types: extract prop types (#8332)

src/checkbox-group/CheckboxGroup.tsx

@@ -1,4 +1,4 @@
-import { PropType, watch, defineComponent } from 'vue';
+import { PropType, watch, defineComponent, ExtractPropTypes } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
@@ -9,6 +9,18 @@ const [name, bem] = createNamespace('checkbox-group');
 
 export const CHECKBOX_GROUP_KEY = Symbol(name);
 
+const props = {
+  max: [Number, String],
+  disabled: Boolean,
+  direction: String as PropType<CheckerDirection>,
+  iconSize: [Number, String],
+  checkedColor: String,
+  modelValue: {
+    type: Array as PropType<unknown[]>,
+    default: () => [],
+  },
+};
+
 export type CheckboxGroupToggleAllOptions =
   | boolean
   | {
@@ -17,27 +29,14 @@ export type CheckboxGroupToggleAllOptions =
     };
 
 export type CheckboxGroupProvide = CheckerParent & {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    max: number | string;
-    modelValue: unknown[];
-  };
   updateValue: (value: unknown[]) => void;
 };
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    max: [Number, String],
-    disabled: Boolean,
-    direction: String as PropType<CheckerDirection>,
-    iconSize: [Number, String],
-    checkedColor: String,
-    modelValue: {
-      type: Array as PropType<unknown[]>,
-      default: () => [],
-    },
-  },
 
   emits: ['change', 'update:modelValue'],
 

src/dropdown-menu/DropdownMenu.tsx

@@ -5,6 +5,7 @@ import {
   PropType,
   CSSProperties,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -25,45 +26,40 @@ export const DROPDOWN_KEY = Symbol(name);
 
 export type DropdownMenuDirection = 'up' | 'down';
 
+const props = {
+  zIndex: [Number, String],
+  activeColor: String,
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  duration: {
+    type: [Number, String],
+    default: 0.2,
+  },
+  direction: {
+    type: String as PropType<DropdownMenuDirection>,
+    default: 'down',
+  },
+  closeOnClickOutside: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+};
+
 export type DropdownMenuProvide = {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    zIndex?: number | string;
-    overlay: boolean;
-    duration: number | string;
-    direction: DropdownMenuDirection;
-    activeColor?: string;
-    closeOnClickOverlay: boolean;
-  };
   offset: Ref<number>;
 };
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    zIndex: [Number, String],
-    activeColor: String,
-    overlay: {
-      type: Boolean,
-      default: true,
-    },
-    duration: {
-      type: [Number, String],
-      default: 0.2,
-    },
-    direction: {
-      type: String as PropType<DropdownMenuDirection>,
-      default: 'down',
-    },
-    closeOnClickOutside: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true,
-    },
-  },
 
   setup(props, { slots }) {
     const root = ref<HTMLElement>();

src/grid/Grid.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP } from '../utils/constant';
 import { useChildren } from '@vant/use';
@@ -9,41 +9,34 @@ export const GRID_KEY = Symbol(name);
 
 export type GridDirection = 'horizontal' | 'vertical';
 
+const props = {
+  square: Boolean,
+  gutter: [Number, String],
+  iconSize: [Number, String],
+  direction: String as PropType<GridDirection>,
+  clickable: Boolean,
+  columnNum: {
+    type: [Number, String],
+    default: 4,
+  },
+  center: {
+    type: Boolean,
+    default: true,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+};
+
 export type GridProvide = {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    center: boolean;
-    border: boolean;
-    square?: boolean;
-    gutter?: number | string;
-    iconSize?: number | string;
-    columnNum: number | string;
-    direction?: GridDirection;
-    clickable?: boolean;
-  };
 };
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    square: Boolean,
-    gutter: [Number, String],
-    iconSize: [Number, String],
-    direction: String as PropType<GridDirection>,
-    clickable: Boolean,
-    columnNum: {
-      type: [Number, String],
-      default: 4,
-    },
-    center: {
-      type: Boolean,
-      default: true,
-    },
-    border: {
-      type: Boolean,
-      default: true,
-    },
-  },
 
   setup(props, { slots }) {
     const { linkChildren } = useChildren(GRID_KEY);

src/index-bar/IndexBar.tsx

@@ -7,6 +7,7 @@ import {
   onMounted,
   CSSProperties,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -31,14 +32,6 @@ import {
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
-export type IndexBarProvide = {
-  props: {
-    sticky: boolean;
-    zIndex?: number | string;
-    highlightColor?: string;
-  };
-};
-
 function genAlphabet() {
   const charCodeOfA = 'A'.charCodeAt(0);
   const indexList = Array(26)
@@ -52,25 +45,31 @@ const [name, bem] = createNamespace('index-bar');
 
 export const INDEX_BAR_KEY = Symbol(name);
 
+const props = {
+  zIndex: [Number, String],
+  highlightColor: String,
+  sticky: {
+    type: Boolean,
+    default: true,
+  },
+  stickyOffsetTop: {
+    type: Number,
+    default: 0,
+  },
+  indexList: {
+    type: Array as PropType<string[]>,
+    default: genAlphabet,
+  },
+};
+
+export type IndexBarProvide = {
+  props: ExtractPropTypes<typeof props>;
+};
+
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    zIndex: [Number, String],
-    highlightColor: String,
-    sticky: {
-      type: Boolean,
-      default: true,
-    },
-    stickyOffsetTop: {
-      type: Number,
-      default: 0,
-    },
-    indexList: {
-      type: Array as PropType<string[]>,
-      default: genAlphabet,
-    },
-  },
 
   emits: ['select', 'change'],
 

src/radio-group/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import { watch, defineComponent } from 'vue';
+import { watch, defineComponent, ExtractPropTypes } from 'vue';
 import { UnknownProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useLinkField } from '../composables/use-link-field';
@@ -8,23 +8,23 @@ const [name, bem] = createNamespace('radio-group');
 
 export const RADIO_KEY = Symbol(name);
 
+const props = {
+  disabled: Boolean,
+  iconSize: [Number, String],
+  direction: String,
+  modelValue: UnknownProp,
+  checkedColor: String,
+};
+
 export type RadioGroupProvide = CheckerParent & {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    modelValue: unknown;
-  };
   updateValue: (value: unknown) => void;
 };
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    disabled: Boolean,
-    iconSize: [Number, String],
-    direction: String,
-    modelValue: UnknownProp,
-    checkedColor: String,
-  },
 
   emits: ['change', 'update:modelValue'],
 

src/steps/Steps.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
@@ -8,40 +8,34 @@ export const STEPS_KEY = Symbol(name);
 
 export type StepsDirection = 'horizontal' | 'vertical';
 
+const props = {
+  finishIcon: String,
+  activeColor: String,
+  inactiveIcon: String,
+  inactiveColor: String,
+  active: {
+    type: [Number, String],
+    default: 0,
+  },
+  direction: {
+    type: String as PropType<StepsDirection>,
+    default: 'horizontal',
+  },
+  activeIcon: {
+    type: String,
+    default: 'checked',
+  },
+};
+
 export type StepsProvide = {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    active: number | string;
-    direction: StepsDirection;
-    activeIcon: string;
-    finishIcon?: string;
-    activeColor?: string;
-    inactiveIcon?: string;
-    inactiveColor?: string;
-  };
   onClickStep: (index: number) => void;
 };
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    finishIcon: String,
-    activeColor: String,
-    inactiveIcon: String,
-    inactiveColor: String,
-    active: {
-      type: [Number, String],
-      default: 0,
-    },
-    direction: {
-      type: String as PropType<StepsDirection>,
-      default: 'horizontal',
-    },
-    activeIcon: {
-      type: String,
-      default: 'checked',
-    },
-  },
 
   emits: ['click-step'],
 

src/swipe/Swipe.tsx

@@ -10,6 +10,7 @@ import {
   onDeactivated,
   onBeforeUnmount,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -35,16 +36,48 @@ const [name, bem] = createNamespace('swipe');
 
 export const SWIPE_KEY = Symbol(name);
 
+const props = {
+  width: [Number, String],
+  height: [Number, String],
+  vertical: Boolean,
+  lazyRender: Boolean,
+  indicatorColor: String,
+  loop: {
+    type: Boolean,
+    default: true,
+  },
+  autoplay: {
+    type: [Number, String],
+    default: 0,
+  },
+  duration: {
+    type: [Number, String],
+    default: 500,
+  },
+  touchable: {
+    type: Boolean,
+    default: true,
+  },
+  initialSwipe: {
+    type: [Number, String],
+    default: 0,
+  },
+  showIndicators: {
+    type: Boolean,
+    default: true,
+  },
+  stopPropagation: {
+    type: Boolean,
+    default: true,
+  },
+};
+
 export type SwipeToOptions = {
   immediate?: boolean;
 };
 
 export type SwipeProvide = {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    loop: boolean;
-    vertical?: boolean;
-    lazyRender?: boolean;
-  };
   size: ComputedRef<number>;
   count: ComputedRef<number>;
   activeIndicator: ComputedRef<number>;
@@ -53,41 +86,7 @@ export type SwipeProvide = {
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    width: [Number, String],
-    height: [Number, String],
-    vertical: Boolean,
-    lazyRender: Boolean,
-    indicatorColor: String,
-    loop: {
-      type: Boolean,
-      default: true,
-    },
-    autoplay: {
-      type: [Number, String],
-      default: 0,
-    },
-    duration: {
-      type: [Number, String],
-      default: 500,
-    },
-    touchable: {
-      type: Boolean,
-      default: true,
-    },
-    initialSwipe: {
-      type: [Number, String],
-      default: 0,
-    },
-    showIndicators: {
-      type: Boolean,
-      default: true,
-    },
-    stopPropagation: {
-      type: Boolean,
-      default: true,
-    },
-  },
 
   emits: ['change'],
 

src/tabbar/Tabbar.tsx

@@ -1,4 +1,4 @@
-import { ref, PropType, defineComponent } from 'vue';
+import { ref, PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import { createNamespace, getZIndexStyle } from '../utils';
@@ -13,43 +13,40 @@ const [name, bem] = createNamespace('tabbar');
 
 export const TABBAR_KEY = Symbol(name);
 
+const props = {
+  route: Boolean,
+  zIndex: [Number, String],
+  placeholder: Boolean,
+  activeColor: String,
+  beforeChange: Function as PropType<Interceptor>,
+  inactiveColor: String,
+  modelValue: {
+    type: [Number, String],
+    default: 0,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  safeAreaInsetBottom: {
+    type: Boolean as PropType<boolean | null>,
+    default: null,
+  },
+};
+
 export type TabbarProvide = {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    route?: boolean;
-    modelValue: number | string;
-    activeColor?: string;
-    inactiveColor?: string;
-  };
   setActive: (active: number | string) => void;
 };
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    route: Boolean,
-    zIndex: [Number, String],
-    placeholder: Boolean,
-    activeColor: String,
-    beforeChange: Function as PropType<Interceptor>,
-    inactiveColor: String,
-    modelValue: {
-      type: [Number, String],
-      default: 0,
-    },
-    border: {
-      type: Boolean,
-      default: true,
-    },
-    fixed: {
-      type: Boolean,
-      default: true,
-    },
-    safeAreaInsetBottom: {
-      type: Boolean as PropType<boolean | null>,
-      default: null,
-    },
-  },
 
   emits: ['change', 'update:modelValue'],
 

src/tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import {
   CSSProperties,
   defineComponent,
   ComponentPublicInstance,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -52,13 +53,51 @@ export const TABS_KEY = Symbol(name);
 
 export type TabsType = 'line' | 'card';
 
+const props = {
+  color: String,
+  border: Boolean,
+  sticky: Boolean,
+  animated: Boolean,
+  swipeable: Boolean,
+  scrollspy: Boolean,
+  background: String,
+  lineWidth: [Number, String],
+  lineHeight: [Number, String],
+  beforeChange: Function as PropType<Interceptor>,
+  titleActiveColor: String,
+  titleInactiveColor: String,
+  type: {
+    type: String as PropType<TabsType>,
+    default: 'line',
+  },
+  active: {
+    type: [Number, String],
+    default: 0,
+  },
+  ellipsis: {
+    type: Boolean,
+    default: true,
+  },
+  duration: {
+    type: [Number, String],
+    default: 0.3,
+  },
+  offsetTop: {
+    type: [Number, String],
+    default: 0,
+  },
+  lazyRender: {
+    type: Boolean,
+    default: true,
+  },
+  swipeThreshold: {
+    type: [Number, String],
+    default: 5,
+  },
+};
+
 export type TabsProvide = {
-  props: {
+  props: ExtractPropTypes<typeof props>;
-    animated?: boolean;
-    swipeable?: boolean;
-    scrollspy?: boolean;
-    lazyRender: boolean;
-  };
   setLine: () => void;
   onRendered: (name: string | number, title?: string) => void;
   scrollIntoView: (immediate?: boolean) => void;
@@ -68,48 +107,7 @@ export type TabsProvide = {
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    color: String,
-    border: Boolean,
-    sticky: Boolean,
-    animated: Boolean,
-    swipeable: Boolean,
-    scrollspy: Boolean,
-    background: String,
-    lineWidth: [Number, String],
-    lineHeight: [Number, String],
-    beforeChange: Function as PropType<Interceptor>,
-    titleActiveColor: String,
-    titleInactiveColor: String,
-    type: {
-      type: String as PropType<TabsType>,
-      default: 'line',
-    },
-    active: {
-      type: [Number, String],
-      default: 0,
-    },
-    ellipsis: {
-      type: Boolean,
-      default: true,
-    },
-    duration: {
-      type: [Number, String],
-      default: 0.3,
-    },
-    offsetTop: {
-      type: [Number, String],
-      default: 0,
-    },
-    lazyRender: {
-      type: Boolean,
-      default: true,
-    },
-    swipeThreshold: {
-      type: [Number, String],
-      default: 5,
-    },
-  },
 
   emits: ['click', 'change', 'scroll', 'disabled', 'rendered', 'update:active'],