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,25 +9,7 @@ const [name, bem] = createNamespace('checkbox-group');
 
 export const CHECKBOX_GROUP_KEY = Symbol(name);
 
-export type CheckboxGroupToggleAllOptions =
+const props = {
-  | boolean
-  | {
-      checked?: boolean;
-      skipDisabled?: boolean;
-    };
-
-export type CheckboxGroupProvide = CheckerParent & {
-  props: {
-    max: number | string;
-    modelValue: unknown[];
-  };
-  updateValue: (value: unknown[]) => void;
-};
-
-export default defineComponent({
-  name,
-
-  props: {
   max: [Number, String],
   disabled: Boolean,
   direction: String as PropType<CheckerDirection>,
@@ -37,7 +19,24 @@ export default defineComponent({
     type: Array as PropType<unknown[]>,
     default: () => [],
   },
-  },
+};
+
+export type CheckboxGroupToggleAllOptions =
+  | boolean
+  | {
+      checked?: boolean;
+      skipDisabled?: boolean;
+    };
+
+export type CheckboxGroupProvide = CheckerParent & {
+  props: ExtractPropTypes<typeof props>;
+  updateValue: (value: unknown[]) => void;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   emits: ['change', 'update:modelValue'],
 

src/dropdown-menu/DropdownMenu.tsx

@@ -5,6 +5,7 @@ import {
   PropType,
   CSSProperties,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -25,22 +26,7 @@ export const DROPDOWN_KEY = Symbol(name);
 
 export type DropdownMenuDirection = 'up' | 'down';
 
-export type DropdownMenuProvide = {
+const props = {
-  props: {
-    zIndex?: number | string;
-    overlay: boolean;
-    duration: number | string;
-    direction: DropdownMenuDirection;
-    activeColor?: string;
-    closeOnClickOverlay: boolean;
-  };
-  offset: Ref<number>;
-};
-
-export default defineComponent({
-  name,
-
-  props: {
   zIndex: [Number, String],
   activeColor: String,
   overlay: {
@@ -63,7 +49,17 @@ export default defineComponent({
     type: Boolean,
     default: true,
   },
-  },
+};
+
+export type DropdownMenuProvide = {
+  props: ExtractPropTypes<typeof props>;
+  offset: Ref<number>;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   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,23 +9,7 @@ export const GRID_KEY = Symbol(name);
 
 export type GridDirection = 'horizontal' | 'vertical';
 
-export type GridProvide = {
+const props = {
-  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: {
   square: Boolean,
   gutter: [Number, String],
   iconSize: [Number, String],
@@ -43,7 +27,16 @@ export default defineComponent({
     type: Boolean,
     default: true,
   },
-  },
+};
+
+export type GridProvide = {
+  props: ExtractPropTypes<typeof props>;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   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,10 +45,7 @@ const [name, bem] = createNamespace('index-bar');
 
 export const INDEX_BAR_KEY = Symbol(name);
 
-export default defineComponent({
+const props = {
-  name,
-
-  props: {
   zIndex: [Number, String],
   highlightColor: String,
   sticky: {
@@ -70,7 +60,16 @@ export default defineComponent({
     type: Array as PropType<string[]>,
     default: genAlphabet,
   },
-  },
+};
+
+export type IndexBarProvide = {
+  props: ExtractPropTypes<typeof props>;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   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);
 
-export type RadioGroupProvide = CheckerParent & {
+const props = {
-  props: {
+  disabled: Boolean,
-    modelValue: unknown;
+  iconSize: [Number, String],
+  direction: String,
+  modelValue: UnknownProp,
+  checkedColor: String,
 };
+
+export type RadioGroupProvide = CheckerParent & {
+  props: ExtractPropTypes<typeof props>;
   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,23 +8,7 @@ export const STEPS_KEY = Symbol(name);
 
 export type StepsDirection = 'horizontal' | 'vertical';
 
-export type StepsProvide = {
+const props = {
-  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: {
   finishIcon: String,
   activeColor: String,
   inactiveIcon: String,
@@ -41,7 +25,17 @@ export default defineComponent({
     type: String,
     default: 'checked',
   },
-  },
+};
+
+export type StepsProvide = {
+  props: ExtractPropTypes<typeof props>;
+  onClickStep: (index: number) => void;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   emits: ['click-step'],
 

src/swipe/Swipe.tsx

@@ -10,6 +10,7 @@ import {
   onDeactivated,
   onBeforeUnmount,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -35,25 +36,7 @@ const [name, bem] = createNamespace('swipe');
 
 export const SWIPE_KEY = Symbol(name);
 
-export type SwipeToOptions = {
+const props = {
-  immediate?: boolean;
-};
-
-export type SwipeProvide = {
-  props: {
-    loop: boolean;
-    vertical?: boolean;
-    lazyRender?: boolean;
-  };
-  size: ComputedRef<number>;
-  count: ComputedRef<number>;
-  activeIndicator: ComputedRef<number>;
-};
-
-export default defineComponent({
-  name,
-
-  props: {
   width: [Number, String],
   height: [Number, String],
   vertical: Boolean,
@@ -87,7 +70,23 @@ export default defineComponent({
     type: Boolean,
     default: true,
   },
-  },
+};
+
+export type SwipeToOptions = {
+  immediate?: boolean;
+};
+
+export type SwipeProvide = {
+  props: ExtractPropTypes<typeof props>;
+  size: ComputedRef<number>;
+  count: ComputedRef<number>;
+  activeIndicator: ComputedRef<number>;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   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,20 +13,7 @@ const [name, bem] = createNamespace('tabbar');
 
 export const TABBAR_KEY = Symbol(name);
 
-export type TabbarProvide = {
+const props = {
-  props: {
-    route?: boolean;
-    modelValue: number | string;
-    activeColor?: string;
-    inactiveColor?: string;
-  };
-  setActive: (active: number | string) => void;
-};
-
-export default defineComponent({
-  name,
-
-  props: {
   route: Boolean,
   zIndex: [Number, String],
   placeholder: Boolean,
@@ -49,7 +36,17 @@ export default defineComponent({
     type: Boolean as PropType<boolean | null>,
     default: null,
   },
-  },
+};
+
+export type TabbarProvide = {
+  props: ExtractPropTypes<typeof props>;
+  setActive: (active: number | string) => void;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   emits: ['change', 'update:modelValue'],
 

src/tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import {
   CSSProperties,
   defineComponent,
   ComponentPublicInstance,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -52,23 +53,7 @@ export const TABS_KEY = Symbol(name);
 
 export type TabsType = 'line' | 'card';
 
-export type TabsProvide = {
+const props = {
-  props: {
-    animated?: boolean;
-    swipeable?: boolean;
-    scrollspy?: boolean;
-    lazyRender: boolean;
-  };
-  setLine: () => void;
-  onRendered: (name: string | number, title?: string) => void;
-  scrollIntoView: (immediate?: boolean) => void;
-  currentName: ComputedRef<number | string | undefined>;
-};
-
-export default defineComponent({
-  name,
-
-  props: {
   color: String,
   border: Boolean,
   sticky: Boolean,
@@ -109,7 +94,20 @@ export default defineComponent({
     type: [Number, String],
     default: 5,
   },
-  },
+};
+
+export type TabsProvide = {
+  props: ExtractPropTypes<typeof props>;
+  setLine: () => void;
+  onRendered: (name: string | number, title?: string) => void;
+  scrollIntoView: (immediate?: boolean) => void;
+  currentName: ComputedRef<number | string | undefined>;
+};
+
+export default defineComponent({
+  name,
+
+  props,
 
   emits: ['click', 'change', 'scroll', 'disabled', 'rendered', 'update:active'],