types(Cascader): add CascaderProps type (#9684)

packages/vant/src/cascader/Cascader.tsx

@@ -1,4 +1,11 @@
-import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
+import {
+  ref,
+  watch,
+  nextTick,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 import {
   extend,
   truthProp,
@@ -15,53 +22,34 @@ import { Icon } from '../icon';
 
 // Types
 import type { TabsClickTabEventParams } from '../tabs/types';
+import type { CascaderTab, CascaderOption, CascaderFieldNames } from './types';
 
 const [name, bem, t] = createNamespace('cascader');
 
-export type CascaderOption = {
-  text?: string;
-  value?: string | number;
-  color?: string;
-  disabled?: boolean;
-  children?: CascaderOption[];
-  className?: unknown;
-  // for custom filed names
-  [key: PropertyKey]: any;
+const props = {
+  title: String,
+  options: makeArrayProp<CascaderOption>(),
+  closeable: truthProp,
+  swipeable: truthProp,
+  closeIcon: makeStringProp('cross'),
+  modelValue: numericProp,
+  fieldNames: Object as PropType<CascaderFieldNames>,
+  placeholder: String,
+  activeColor: String,
 };
 
-type CascaderTab = {
-  options: CascaderOption[];
-  selected: CascaderOption | null;
-};
-
-export type CascaderFieldNames = {
-  text?: string;
-  value?: string;
-  children?: string;
-};
+export type CascaderProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: {
-    title: String,
-    options: makeArrayProp<CascaderOption>(),
-    closeable: truthProp,
-    swipeable: truthProp,
-    closeIcon: makeStringProp('cross'),
-    modelValue: numericProp,
-    fieldNames: Object as PropType<CascaderFieldNames>,
-    placeholder: String,
-    activeColor: String,
-  },
+  props,
 
-  emits: ['close', 'change', 'finish', 'update:modelValue', 'click-tab'],
+  emits: ['close', 'change', 'finish', 'click-tab', 'update:modelValue'],
 
   setup(props, { slots, emit }) {
-    const state = reactive({
-      tabs: [] as CascaderTab[],
-      activeTab: 0,
-    });
+    const tabs = ref<CascaderTab[]>([]);
+    const activeTab = ref(0);
 
     const {
       text: textKey,
@@ -98,16 +86,15 @@ export default defineComponent({
     };
 
     const updateTabs = () => {
-      if (props.modelValue || props.modelValue === 0) {
-        const selectedOptions = getSelectedOptionsByValue(
-          props.options,
-          props.modelValue
-        );
+      const { options, modelValue } = props;
+
+      if (modelValue !== undefined) {
+        const selectedOptions = getSelectedOptionsByValue(options, modelValue);
 
         if (selectedOptions) {
-          let optionsCursor = props.options;
+          let optionsCursor = options;
 
-          state.tabs = selectedOptions.map((option) => {
+          tabs.value = selectedOptions.map((option) => {
             const tab = {
               options: optionsCursor,
               selected: option,
@@ -124,23 +111,23 @@ export default defineComponent({
           });
 
           if (optionsCursor) {
-            state.tabs.push({
+            tabs.value.push({
               options: optionsCursor,
               selected: null,
             });
           }
 
           nextTick(() => {
-            state.activeTab = state.tabs.length - 1;
+            activeTab.value = tabs.value.length - 1;
           });
 
           return;
         }
       }
 
-      state.tabs = [
+      tabs.value = [
         {
-          options: props.options,
+          options,
           selected: null,
         },
       ];
@@ -151,10 +138,10 @@ export default defineComponent({
         return;
       }
 
-      state.tabs[tabIndex].selected = option;
+      tabs.value[tabIndex].selected = option;
 
-      if (state.tabs.length > tabIndex + 1) {
-        state.tabs = state.tabs.slice(0, tabIndex + 1);
+      if (tabs.value.length > tabIndex + 1) {
+        tabs.value = tabs.value.slice(0, tabIndex + 1);
       }
 
       if (option[childrenKey]) {
@@ -163,31 +150,32 @@ export default defineComponent({
           selected: null,
         };
 
-        if (state.tabs[tabIndex + 1]) {
-          state.tabs[tabIndex + 1] = nextTab;
+        if (tabs.value[tabIndex + 1]) {
+          tabs.value[tabIndex + 1] = nextTab;
         } else {
-          state.tabs.push(nextTab);
+          tabs.value.push(nextTab);
         }
 
         nextTick(() => {
-          state.activeTab++;
+          activeTab.value++;
         });
       }
 
-      const selectedOptions = state.tabs
+      const selectedOptions = tabs.value
         .map((tab) => tab.selected)
         .filter(Boolean);
 
-      const eventParams = {
+      emit('update:modelValue', option[valueKey]);
+
+      const params = {
         value: option[valueKey],
         tabIndex,
         selectedOptions,
       };
-      emit('update:modelValue', option[valueKey]);
-      emit('change', eventParams);
+      emit('change', params);
 
       if (!option[childrenKey]) {
-        emit('finish', eventParams);
+        emit('finish', params);
       }
     };
 
@@ -260,9 +248,8 @@ export default defineComponent({
 
     const renderTab = (tab: CascaderTab, tabIndex: number) => {
       const { options, selected } = tab;
-      const title = selected
-        ? selected[textKey]
-        : props.placeholder || t('select');
+      const placeholder = props.placeholder || t('select');
+      const title = selected ? selected[textKey] : placeholder;
 
       return (
         <Tab
@@ -278,7 +265,7 @@ export default defineComponent({
 
     const renderTabs = () => (
       <Tabs
-        v-model:active={state.activeTab}
+        v-model:active={activeTab.value}
         animated
         class={bem('tabs')}
         color={props.activeColor}
@@ -286,7 +273,7 @@ export default defineComponent({
         swipeable={props.swipeable}
         onClick-tab={onClickTab}
       >
-        {state.tabs.map(renderTab)}
+        {tabs.value.map(renderTab)}
       </Tabs>
     );
 
@@ -296,8 +283,8 @@ export default defineComponent({
     watch(
       () => props.modelValue,
       (value) => {
-        if (value || value === 0) {
-          const values = state.tabs.map((tab) => tab.selected?.[valueKey]);
+        if (value !== undefined) {
+          const values = tabs.value.map((tab) => tab.selected?.[valueKey]);
           if (values.includes(value)) {
             return;
           }

packages/vant/src/cascader/README.md

@@ -245,7 +245,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { CascaderOption, CascaderFieldNames } from 'vant';
+import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';
 ```
 
 ## Theming

packages/vant/src/cascader/README.zh-CN.md

@@ -257,7 +257,7 @@ export default {
 组件导出以下类型定义：
 
 ```ts
-import type { CascaderOption, CascaderFieldNames } from 'vant';
+import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';
 ```
 
 ## 主题定制

packages/vant/src/cascader/index.ts

@@ -1,6 +1,7 @@
 import { withInstall } from '../utils';
-import _Cascader from './Cascader';
+import _Cascader, { CascaderProps } from './Cascader';
 
 export const Cascader = withInstall(_Cascader);
 export default Cascader;
-export type { CascaderOption, CascaderFieldNames } from './Cascader';
+export type { CascaderProps };
+export type { CascaderOption, CascaderFieldNames } from './types';

packages/vant/src/cascader/types.ts

@@ -0,0 +1,21 @@
+export type CascaderOption = {
+  text?: string;
+  value?: string | number;
+  color?: string;
+  disabled?: boolean;
+  children?: CascaderOption[];
+  className?: unknown;
+  // for custom filed names
+  [key: PropertyKey]: any;
+};
+
+export type CascaderTab = {
+  options: CascaderOption[];
+  selected: CascaderOption | null;
+};
+
+export type CascaderFieldNames = {
+  text?: string;
+  value?: string;
+  children?: string;
+};