types: export all props type (#9717)

packages/vant/src/action-bar-button/ActionBarButton.tsx

@@ -1,4 +1,4 @@
-import { computed, PropType, defineComponent } from 'vue';
+import { computed, PropType, defineComponent, ExtractPropTypes } from 'vue';
 import { extend, createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
@@ -12,17 +12,23 @@ import { Button, ButtonType } from '../button';
 
 const [name, bem] = createNamespace('action-bar-button');
 
+const actionBarButtonProps = extend({}, routeProps, {
+  type: String as PropType<ButtonType>,
+  text: String,
+  icon: String,
+  color: String,
+  loading: Boolean,
+  disabled: Boolean,
+});
+
+export type ActionBarButtonProps = ExtractPropTypes<
+  typeof actionBarButtonProps
+>;
+
 export default defineComponent({
   name,
 
-  props: extend({}, routeProps, {
-    type: String as PropType<ButtonType>,
-    text: String,
-    icon: String,
-    color: String,
-    loading: Boolean,
-    disabled: Boolean,
-  }),
+  props: actionBarButtonProps,
 
   setup(props, { slots }) {
     const route = useRoute();

packages/vant/src/action-bar-button/index.ts

@@ -3,3 +3,4 @@ import _ActionBarButton from './ActionBarButton';
 
 export const ActionBarButton = withInstall(_ActionBarButton);
 export default ActionBarButton;
+export type { ActionBarButtonProps } from './ActionBarButton';

packages/vant/src/action-bar-icon/ActionBarIcon.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 import { extend, createNamespace, unknownProp, numericProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
@@ -12,18 +12,22 @@ import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('action-bar-icon');
 
+const actionBarIconProps = extend({}, routeProps, {
+  dot: Boolean,
+  text: String,
+  icon: String,
+  color: String,
+  badge: numericProp,
+  iconClass: unknownProp,
+  iconPrefix: String,
+});
+
+export type ActionBarIconProps = ExtractPropTypes<typeof actionBarIconProps>;
+
 export default defineComponent({
   name,
 
-  props: extend({}, routeProps, {
-    dot: Boolean,
-    text: String,
-    icon: String,
-    color: String,
-    badge: numericProp,
-    iconClass: unknownProp,
-    iconPrefix: String,
-  }),
+  props: actionBarIconProps,
 
   setup(props, { slots }) {
     const route = useRoute();

packages/vant/src/action-bar-icon/index.ts

@@ -3,3 +3,4 @@ import _ActionBarIcon from './ActionBarIcon';
 
 export const ActionBarIcon = withInstall(_ActionBarIcon);
 export default ActionBarIcon;
+export type { ActionBarIconProps } from './ActionBarIcon';

packages/vant/src/action-bar/ActionBar.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 import { truthProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
@@ -6,12 +6,16 @@ const [name, bem] = createNamespace('action-bar');
 
 export const ACTION_BAR_KEY = Symbol(name);
 
+const actionBarProps = {
+  safeAreaInsetBottom: truthProp,
+};
+
+export type ActionBarProps = ExtractPropTypes<typeof actionBarProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    safeAreaInsetBottom: truthProp,
-  },
+  props: actionBarProps,
 
   setup(props, { slots }) {
     const { linkChildren } = useChildren(ACTION_BAR_KEY);

packages/vant/src/action-bar/README.md

@@ -133,6 +133,18 @@ Use `badge` prop to show badge in icon.
 | ------- | -------------- |
 | default | Button content |
 
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type {
+  ActionBarProps,
+  ActionBarIconProps,
+  ActionBarButtonProps,
+} from 'vant';
+```
+
 ## Theming
 
 ### CSS Variables

packages/vant/src/action-bar/README.zh-CN.md

@@ -137,6 +137,18 @@ export default {
 | ------- | ------------ |
 | default | 按钮显示内容 |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type {
+  ActionBarProps,
+  ActionBarIconProps,
+  ActionBarButtonProps,
+} from 'vant';
+```
+
 ## 主题定制
 
 ### 样式变量

packages/vant/src/action-bar/index.ts

@@ -3,3 +3,4 @@ import _ActionBar from './ActionBar';
 
 export const ActionBar = withInstall(_ActionBar);
 export default ActionBar;
+export type { ActionBarProps } from './ActionBar';

packages/vant/src/action-sheet/ActionSheet.tsx

@@ -1,4 +1,4 @@
-import { nextTick, defineComponent } from 'vue';
+import { nextTick, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -28,7 +28,22 @@ export type ActionSheetAction = {
   className?: unknown;
 };
 
-const popupKeys = [
+const actionSheetProps = extend({}, popupSharedProps, {
+  title: String,
+  round: truthProp,
+  actions: makeArrayProp<ActionSheetAction>(),
+  closeIcon: makeStringProp('cross'),
+  closeable: truthProp,
+  cancelText: String,
+  description: String,
+  closeOnPopstate: truthProp,
+  closeOnClickAction: Boolean,
+  safeAreaInsetBottom: truthProp,
+});
+
+export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>;
+
+const popupInheritKeys = [
   ...popupSharedPropKeys,
   'round',
   'closeOnPopstate',
@@ -38,18 +53,7 @@ const popupKeys = [
 export default defineComponent({
   name,
 
-  props: extend({}, popupSharedProps, {
-    title: String,
-    round: truthProp,
-    actions: makeArrayProp<ActionSheetAction>(),
-    closeIcon: makeStringProp('cross'),
-    closeable: truthProp,
-    cancelText: String,
-    description: String,
-    closeOnPopstate: truthProp,
-    closeOnClickAction: Boolean,
-    safeAreaInsetBottom: truthProp,
-  }),
+  props: actionSheetProps,
 
   emits: ['select', 'cancel', 'update:show'],
 
@@ -144,7 +148,7 @@ export default defineComponent({
         class={bem()}
         position="bottom"
         onUpdate:show={updateShow}
-        {...pick(props, popupKeys)}
+        {...pick(props, popupInheritKeys)}
       >
         {renderHeader()}
         {renderDescription()}

packages/vant/src/action-sheet/README.md

@@ -229,7 +229,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { ActionSheetAction } from 'vant';
+import type { ActionSheetProps, ActionSheetAction } from 'vant';
 ```
 
 ## Theming

packages/vant/src/action-sheet/README.zh-CN.md

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

packages/vant/src/action-sheet/index.ts

@@ -3,4 +3,4 @@ import _ActionSheet from './ActionSheet';
 
 export const ActionSheet = withInstall(_ActionSheet);
 export default ActionSheet;
-export type { ActionSheetAction } from './ActionSheet';
+export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';

packages/vant/src/address-edit/AddressEdit.tsx

@@ -54,7 +54,7 @@ const DEFAULT_DATA: AddressEditInfo = {
 
 const isPostal = (value: string) => /^\d{6}$/.test(value);
 
-const props = {
+const addressEditProps = {
   areaList: Object as PropType<AreaList>,
   isSaving: Boolean,
   isDeleting: Boolean,
@@ -90,12 +90,12 @@ const props = {
   },
 };
 
-export type AddressEditProps = ExtractPropTypes<typeof props>;
+export type AddressEditProps = ExtractPropTypes<typeof addressEditProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: addressEditProps,
 
   emits: [
     'save',

packages/vant/src/address-list/AddressList.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -15,18 +15,22 @@ import AddressListItem, { AddressListAddress } from './AddressListItem';
 
 const [name, bem, t] = createNamespace('address-list');
 
+const addressListProps = {
+  list: makeArrayProp<AddressListAddress>(),
+  modelValue: numericProp,
+  switchable: truthProp,
+  disabledText: String,
+  disabledList: makeArrayProp<AddressListAddress>(),
+  addButtonText: String,
+  defaultTagText: String,
+};
+
+export type AddressListProps = ExtractPropTypes<typeof addressListProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    list: makeArrayProp<AddressListAddress>(),
-    modelValue: numericProp,
-    switchable: truthProp,
-    disabledText: String,
-    disabledList: makeArrayProp<AddressListAddress>(),
-    addButtonText: String,
-    defaultTagText: String,
-  },
+  props: addressListProps,
 
   emits: [
     'add',

packages/vant/src/address-list/README.md

@@ -126,7 +126,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { AddressListAddress } from 'vant';
+import type { AddressListProps, AddressListAddress } from 'vant';
 ```
 
 ## Theming

packages/vant/src/address-list/README.zh-CN.md

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

packages/vant/src/address-list/index.ts

@@ -3,4 +3,5 @@ import _AddressList from './AddressList';
 
 export const AddressList = withInstall(_AddressList);
 export default AddressList;
+export type { AddressListProps } from './AddressList';
 export type { AddressListAddress } from './AddressListItem';

packages/vant/src/area/Area.tsx

@@ -19,7 +19,7 @@ import {
   makeNumericProp,
   createNamespace,
 } from '../utils';
-import { pickerProps } from '../picker/Picker';
+import { pickerSharedProps } from '../picker/Picker';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
@@ -54,7 +54,7 @@ const INHERIT_PROPS = [
 
 const isOverseaCode = (code: string) => code[0] === '9';
 
-const props = extend({}, pickerProps, {
+const areaProps = extend({}, pickerSharedProps, {
   value: String,
   columnsNum: makeNumericProp(3),
   columnsPlaceholder: makeArrayProp<string>(),
@@ -68,12 +68,12 @@ const props = extend({}, pickerProps, {
   },
 });
 
-export type AreaProps = ExtractPropTypes<typeof props>;
+export type AreaProps = ExtractPropTypes<typeof areaProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: areaProps,
 
   emits: ['change', 'confirm', 'cancel'],
 

packages/vant/src/area/index.ts

@@ -1,7 +1,7 @@
 import { withInstall } from '../utils';
-import _Area, { AreaProps } from './Area';
+import _Area from './Area';
 
 export const Area = withInstall(_Area);
 export default Area;
-export type { AreaProps };
+export type { AreaProps } from './Area';
 export type { AreaList, AreaInstance, AreaColumnOption } from './types';

packages/vant/src/badge/Badge.tsx

@@ -1,4 +1,10 @@
-import { PropType, CSSProperties, defineComponent, computed } from 'vue';
+import {
+  computed,
+  PropType,
+  CSSProperties,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 import {
   isDef,
   addUnit,
@@ -11,18 +17,22 @@ import {
 
 const [name, bem] = createNamespace('badge');
 
+const badgeProps = {
+  dot: Boolean,
+  max: numericProp,
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  color: String,
+  offset: Array as unknown as PropType<[string | number, string | number]>,
+  content: numericProp,
+  showZero: truthProp,
+};
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    dot: Boolean,
-    max: numericProp,
-    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
-    color: String,
-    offset: Array as unknown as PropType<[string | number, string | number]>,
-    content: numericProp,
-    showZero: truthProp,
-  },
+  props: badgeProps,
 
   setup(props, { slots }) {
     const hasContent = () => {

packages/vant/src/badge/README.md

@@ -133,6 +133,14 @@ Use `content` slot to custom :content of badge.
 | default | Default slot         |
 | content | Custom badge content |
 
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { BadgeProps } from 'vant';
+```
+
 ## Theming
 
 ### CSS Variables

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

@@ -141,6 +141,14 @@ app.use(Badge);
 | default | 徽标包裹的子元素 |
 | content | 自定义徽标内容   |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { BadgeProps } from 'vant';
+```
+
 ## 主题定制
 
 ### 样式变量

packages/vant/src/badge/index.ts

@@ -3,3 +3,4 @@ import _Badge from './Badge';
 
 export const Badge = withInstall(_Badge);
 export default Badge;
+export type { BadgeProps } from './Badge';

packages/vant/src/button/Button.tsx

@@ -2,7 +2,7 @@ import {
   PropType,
   CSSProperties,
   defineComponent,
-  ButtonHTMLAttributes,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -19,45 +19,44 @@ import { useRoute, routeProps } from '../composables/use-route';
 import { Icon } from '../icon';
 import { Loading, LoadingType } from '../loading';
 
+// Types
+import {
+  ButtonSize,
+  ButtonType,
+  ButtonNativeType,
+  ButtonIconPosition,
+} from './types';
+
 const [name, bem] = createNamespace('button');
 
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'success'
-  | 'warning'
-  | 'danger';
+const buttonProps = extend({}, routeProps, {
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('button'),
+  text: String,
+  icon: String,
+  type: makeStringProp<ButtonType>('default'),
+  size: makeStringProp<ButtonSize>('normal'),
+  color: String,
+  block: Boolean,
+  plain: Boolean,
+  round: Boolean,
+  square: Boolean,
+  loading: Boolean,
+  hairline: Boolean,
+  disabled: Boolean,
+  iconPrefix: String,
+  nativeType: makeStringProp<ButtonNativeType>('button'),
+  loadingSize: numericProp,
+  loadingText: String,
+  loadingType: String as PropType<LoadingType>,
+  iconPosition: makeStringProp<ButtonIconPosition>('left'),
+});
 
-export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
-
-export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
-
-export type ButtonIconPosition = 'left' | 'right';
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
 
 export default defineComponent({
   name,
 
-  props: extend({}, routeProps, {
-    tag: makeStringProp<keyof HTMLElementTagNameMap>('button'),
-    text: String,
-    icon: String,
-    type: makeStringProp<ButtonType>('default'),
-    size: makeStringProp<ButtonSize>('normal'),
-    color: String,
-    block: Boolean,
-    plain: Boolean,
-    round: Boolean,
-    square: Boolean,
-    loading: Boolean,
-    hairline: Boolean,
-    disabled: Boolean,
-    iconPrefix: String,
-    nativeType: makeStringProp<ButtonNativeType>('button'),
-    loadingSize: numericProp,
-    loadingText: String,
-    loadingType: String as PropType<LoadingType>,
-    iconPosition: makeStringProp<ButtonIconPosition>('left'),
-  }),
+  props: buttonProps,
 
   emits: ['click'],
 

packages/vant/src/button/README.md

@@ -157,6 +157,7 @@ The component exports the following type definitions:
 import type {
   ButtonType,
   ButtonSize,
+  ButtonProps,
   ButtonNativeType,
   ButtonIconPosition,
 } from 'vant';

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

@@ -180,6 +180,7 @@ app.use(Button);
 import type {
   ButtonType,
   ButtonSize,
+  ButtonProps,
   ButtonNativeType,
   ButtonIconPosition,
 } from 'vant';

packages/vant/src/button/index.ts

@@ -3,9 +3,10 @@ import _Button from './Button';
 
 export const Button = withInstall(_Button);
 export default Button;
+export type { ButtonProps } from './Button';
 export type {
   ButtonType,
   ButtonSize,
   ButtonNativeType,
   ButtonIconPosition,
-} from './Button';
+} from './types';

packages/vant/src/button/types.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes } from 'vue';
+
+export type ButtonType =
+  | 'default'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'danger';
+
+export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
+
+export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
+
+export type ButtonIconPosition = 'left' | 'right';

packages/vant/src/calendar/Calendar.tsx

@@ -53,7 +53,7 @@ import type {
   CalendarMonthInstance,
 } from './types';
 
-const props = {
+const calendarProps = {
   show: Boolean,
   type: makeStringProp<CalendarType>('single'),
   title: String,
@@ -100,12 +100,12 @@ const props = {
   },
 };
 
-export type CalendarProps = ExtractPropTypes<typeof props>;
+export type CalendarProps = ExtractPropTypes<typeof calendarProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: calendarProps,
 
   emits: [
     'select',

packages/vant/src/calendar/CalendarMonth.tsx

@@ -38,7 +38,7 @@ import type { CalendarType, CalendarDayItem, CalendarDayType } from './types';
 
 const [name] = createNamespace('calendar-month');
 
-const props = {
+const calendarMonthProps = {
   date: makeRequiredProp(Date),
   type: String as PropType<CalendarType>,
   color: String,
@@ -55,12 +55,12 @@ const props = {
   firstDayOfWeek: Number,
 };
 
-export type CalendarMonthProps = ExtractPropTypes<typeof props>;
+export type CalendarMonthProps = ExtractPropTypes<typeof calendarMonthProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: calendarMonthProps,
 
   emits: ['click', 'update-height'],
 

packages/vant/src/calendar/index.ts

@@ -1,9 +1,9 @@
 import { withInstall } from '../utils';
-import _Calendar, { CalendarProps } from './Calendar';
+import _Calendar from './Calendar';
 
 export const Calendar = withInstall(_Calendar);
 export default Calendar;
-export type { CalendarProps };
+export type { CalendarProps } from './Calendar';
 export type {
   CalendarType,
   CalendarDayItem,

packages/vant/src/card/Card.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import { isDef, numericProp, makeStringProp, createNamespace } from '../utils';
@@ -9,22 +9,26 @@ import { Image } from '../image';
 
 const [name, bem] = createNamespace('card');
 
+const cardProps = {
+  tag: String,
+  num: numericProp,
+  desc: String,
+  thumb: String,
+  title: String,
+  price: numericProp,
+  centered: Boolean,
+  lazyLoad: Boolean,
+  currency: makeStringProp('¥'),
+  thumbLink: String,
+  originPrice: numericProp,
+};
+
+export type CardProps = ExtractPropTypes<typeof cardProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    tag: String,
-    num: numericProp,
-    desc: String,
-    thumb: String,
-    title: String,
-    price: numericProp,
-    centered: Boolean,
-    lazyLoad: Boolean,
-    currency: makeStringProp('¥'),
-    thumbLink: String,
-    originPrice: numericProp,
-  },
+  props: cardProps,
 
   emits: ['click-thumb'],
 

packages/vant/src/card/README.md

@@ -108,6 +108,14 @@ Use slot to custom content.
 | tags         | Custom tags         |
 | footer       | Custom footer       |
 
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { CardProps } from 'vant';
+```
+
 ## Theming
 
 ### CSS Variables

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

@@ -110,6 +110,14 @@ app.use(Card);
 | tags         | 自定义描述下方标签区域 |
 | footer       | 自定义右下角内容       |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { CardProps } from 'vant';
+```
+
 ## 主题定制
 
 ### 样式变量

packages/vant/src/card/index.ts

@@ -3,3 +3,4 @@ import _Card from './Card';
 
 export const Card = withInstall(_Card);
 export default Card;
+export type { CardProps } from './Card';

packages/vant/src/cascader/Cascader.tsx

@@ -26,7 +26,7 @@ import type { CascaderTab, CascaderOption, CascaderFieldNames } from './types';
 
 const [name, bem, t] = createNamespace('cascader');
 
-const props = {
+const cascaderProps = {
   title: String,
   options: makeArrayProp<CascaderOption>(),
   closeable: truthProp,
@@ -38,12 +38,12 @@ const props = {
   activeColor: String,
 };
 
-export type CascaderProps = ExtractPropTypes<typeof props>;
+export type CascaderProps = ExtractPropTypes<typeof cascaderProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: cascaderProps,
 
   emits: ['close', 'change', 'finish', 'click-tab', 'update:modelValue'],
 

packages/vant/src/cascader/index.ts

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

packages/vant/src/cell-group/CellGroup.tsx

@@ -1,18 +1,22 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
 
 const [name, bem] = createNamespace('cell-group');
 
+const cellGroupProps = {
+  title: String,
+  inset: Boolean,
+  border: truthProp,
+};
+
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;
+
 export default defineComponent({
   name,
 
   inheritAttrs: false,
 
-  props: {
-    title: String,
-    inset: Boolean,
-    border: truthProp,
-  },
+  props: cellGroupProps,
 
   setup(props, { slots, attrs }) {
     const renderGroup = () => (

packages/vant/src/cell-group/index.ts

@@ -3,3 +3,4 @@ import _CellGroup from './CellGroup';
 
 export const CellGroup = withInstall(_CellGroup);
 export default CellGroup;
+export type { CellGroupProps } from './CellGroup';

packages/vant/src/cell/Cell.tsx

@@ -1,4 +1,9 @@
-import { PropType, CSSProperties, defineComponent } from 'vue';
+import {
+  PropType,
+  CSSProperties,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import {
@@ -20,7 +25,7 @@ const [name, bem] = createNamespace('cell');
 
 export type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
 
-export const cellProps = {
+export const cellSharedProps = {
   icon: String,
   size: String as PropType<'large'>,
   title: numericProp,
@@ -42,10 +47,14 @@ export const cellProps = {
   },
 };
 
+const cellProps = extend({}, cellSharedProps, routeProps);
+
+export type CellProps = ExtractPropTypes<typeof cellProps>;
+
 export default defineComponent({
   name,
 
-  props: extend({}, cellProps, routeProps),
+  props: cellProps,
 
   setup(props, { slots }) {
     if (process.env.NODE_ENV !== 'production') {

packages/vant/src/cell/README.md

@@ -197,7 +197,7 @@ app.use(CellGroup);
 The component exports the following type definitions:
 
 ```ts
-import type { CellArrowDirection } from 'vant';
+import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
 ```
 
 ## Theming

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

@@ -202,7 +202,7 @@ app.use(CellGroup);
 组件导出以下类型定义：
 
 ```ts
-import type { CellArrowDirection } from 'vant';
+import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
 ```
 
 ## 主题定制

packages/vant/src/cell/index.ts

@@ -3,4 +3,4 @@ import _Cell from './Cell';
 
 export const Cell = withInstall(_Cell);
 export default Cell;
-export type { CellArrowDirection } from './Cell';
+export type { CellProps, CellArrowDirection } from './Cell';

packages/vant/src/checkbox-group/CheckboxGroup.tsx

@@ -23,7 +23,7 @@ import type {
 
 const [name, bem] = createNamespace('checkbox-group');
 
-const props = {
+const checkboxGroupProps = {
   max: numericProp,
   disabled: Boolean,
   iconSize: numericProp,
@@ -32,7 +32,7 @@ const props = {
   checkedColor: String,
 };
 
-export type CheckboxGroupProps = ExtractPropTypes<typeof props>;
+export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>;
 
 export const CHECKBOX_GROUP_KEY: InjectionKey<CheckboxGroupProvide> =
   Symbol(name);
@@ -40,7 +40,7 @@ export const CHECKBOX_GROUP_KEY: InjectionKey<CheckboxGroupProvide> =
 export default defineComponent({
   name,
 
-  props,
+  props: checkboxGroupProps,
 
   emits: ['change', 'update:modelValue'],
 

packages/vant/src/checkbox-group/index.ts

@@ -1,9 +1,9 @@
 import { withInstall } from '../utils';
-import _CheckboxGroup, { CheckboxGroupProps } from './CheckboxGroup';
+import _CheckboxGroup from './CheckboxGroup';
 
 export const CheckboxGroup = withInstall(_CheckboxGroup);
 export default CheckboxGroup;
-export type { CheckboxGroupProps };
+export type { CheckboxGroupProps } from './CheckboxGroup';
 export type {
   CheckboxGroupInstance,
   CheckboxGroupDirection,

packages/vant/src/checkbox/Checkbox.tsx

@@ -16,16 +16,16 @@ import type { CheckboxExpose } from './types';
 
 const [name, bem] = createNamespace('checkbox');
 
-const props = extend({}, checkerProps, {
+const checkboxProps = extend({}, checkerProps, {
   bindGroup: truthProp,
 });
 
-export type CheckboxProps = ExtractPropTypes<typeof props>;
+export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: checkboxProps,
 
   emits: ['change', 'update:modelValue'],
 

packages/vant/src/checkbox/index.ts

@@ -1,9 +1,9 @@
 import { withInstall } from '../utils';
-import _Checkbox, { CheckboxProps } from './Checkbox';
+import _Checkbox from './Checkbox';
 
 export const Checkbox = withInstall(_Checkbox);
 export default Checkbox;
-export type { CheckboxProps };
+export type { CheckboxProps } from './Checkbox';
 export type {
   CheckboxShape,
   CheckboxInstance,

packages/vant/src/circle/Circle.tsx

@@ -1,4 +1,11 @@
-import { watch, computed, PropType, CSSProperties, defineComponent } from 'vue';
+import {
+  watch,
+  computed,
+  PropType,
+  CSSProperties,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 import { raf, cancelRaf } from '@vant/use';
 import {
   isObject,
@@ -26,23 +33,27 @@ function getPath(clockwise: boolean, viewBoxSize: number) {
 
 export type CircleStartPosition = 'top' | 'right' | 'bottom' | 'left';
 
+const circleProps = {
+  text: String,
+  size: numericProp,
+  fill: makeStringProp('none'),
+  rate: makeNumericProp(100),
+  speed: makeNumericProp(0),
+  color: [String, Object] as PropType<string | Record<string, string>>,
+  clockwise: truthProp,
+  layerColor: String,
+  currentRate: makeNumberProp(0),
+  strokeWidth: makeNumericProp(40),
+  strokeLinecap: String as PropType<CanvasLineCap>,
+  startPosition: makeStringProp<CircleStartPosition>('top'),
+};
+
+export type CircleProps = ExtractPropTypes<typeof circleProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    text: String,
-    size: numericProp,
-    fill: makeStringProp('none'),
-    rate: makeNumericProp(100),
-    speed: makeNumericProp(0),
-    color: [String, Object] as PropType<string | Record<string, string>>,
-    clockwise: truthProp,
-    layerColor: String,
-    currentRate: makeNumberProp(0),
-    strokeWidth: makeNumericProp(40),
-    strokeLinecap: String as PropType<CanvasLineCap>,
-    startPosition: makeStringProp<CircleStartPosition>('top'),
-  },
+  props: circleProps,
 
   emits: ['update:currentRate'],
 

packages/vant/src/circle/README.md

@@ -172,7 +172,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { CircleStartPosition } from 'vant';
+import type { CircleProps, CircleStartPosition } from 'vant';
 ```
 
 ## Theming

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

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

packages/vant/src/circle/index.ts

@@ -3,4 +3,4 @@ import _Circle from './Circle';
 
 export const Circle = withInstall(_Circle);
 export default Circle;
-export type { CircleStartPosition } from './Circle';
+export type { CircleProps, CircleStartPosition } from './Circle';

packages/vant/src/col/Col.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, ExtractPropTypes } from 'vue';
 import {
   numericProp,
   createNamespace,
@@ -10,14 +10,18 @@ import { ROW_KEY } from '../row/Row';
 
 const [name, bem] = createNamespace('col');
 
+const colProps = {
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  span: makeNumericProp(0),
+  offset: numericProp,
+};
+
+export type ColProps = ExtractPropTypes<typeof colProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
-    span: makeNumericProp(0),
-    offset: numericProp,
-  },
+  props: colProps,
 
   setup(props, { slots }) {
     const { parent, index } = useParent(ROW_KEY);

packages/vant/src/col/README.md

@@ -118,5 +118,5 @@ Set grid spacing using `gutter` attribute. The default value is 0.
 The component exports the following type definitions:
 
 ```ts
-import type { RowAlign, RowJustify } from 'vant';
+import type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';
 ```

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

@@ -123,5 +123,5 @@ Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性
 组件导出以下类型定义：
 
 ```ts
-import type { RowAlign, RowJustify } from 'vant';
+import type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';
 ```

packages/vant/src/col/index.ts

@@ -3,3 +3,4 @@ import _Col from './Col';
 
 export const Col = withInstall(_Col);
 export default Col;
+export type { ColProps } from './Col';

packages/vant/src/collapse-item/CollapseItem.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue';
 
 // Utils
-import { cellProps } from '../cell/Cell';
+import { cellSharedProps } from '../cell/Cell';
 import {
   pick,
   extend,
@@ -30,19 +30,19 @@ const [name, bem] = createNamespace('collapse-item');
 
 const CELL_SLOTS = ['icon', 'title', 'value', 'label', 'right-icon'] as const;
 
-const props = extend({}, cellProps, {
+const collapseItemProps = extend({}, cellSharedProps, {
   name: numericProp,
   isLink: truthProp,
   disabled: Boolean,
   readonly: Boolean,
 });
 
-export type CollapseItemProps = ExtractPropTypes<typeof props>;
+export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: collapseItemProps,
 
   setup(props, { slots }) {
     const wrapperRef = ref<HTMLElement>();
@@ -121,7 +121,7 @@ export default defineComponent({
       const { border, disabled, readonly } = props;
       const attrs = pick(
         props,
-        Object.keys(cellProps) as Array<keyof typeof cellProps>
+        Object.keys(cellSharedProps) as Array<keyof typeof cellSharedProps>
       );
 
       if (readonly) {

packages/vant/src/collapse-item/index.ts

@@ -1,7 +1,7 @@
 import { withInstall } from '../utils';
-import _CollapseItem, { CollapseItemProps } from './CollapseItem';
+import _CollapseItem from './CollapseItem';
 
 export const CollapseItem = withInstall(_CollapseItem);
 export default CollapseItem;
-export type { CollapseItemProps };
+export type { CollapseItemProps } from './CollapseItem';
 export type { CollapseItemInstance } from './types';

packages/vant/src/collapse/Collapse.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent, InjectionKey } from 'vue';
+import { PropType, defineComponent, InjectionKey, ExtractPropTypes } from 'vue';
 import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
 import { useChildren } from '@vant/use';
 
@@ -11,6 +11,19 @@ export type CollapseProvide = {
 
 export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol(name);
 
+const collapseProps = {
+  border: truthProp,
+  accordion: Boolean,
+  modelValue: {
+    type: [String, Number, Array] as PropType<
+      string | number | Array<string | number>
+    >,
+    default: '',
+  },
+};
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+
 function validateModelValue(
   modelValue: string | number | Array<string | number>,
   accordion: boolean
@@ -33,16 +46,7 @@ function validateModelValue(
 export default defineComponent({
   name,
 
-  props: {
-    border: truthProp,
-    accordion: Boolean,
-    modelValue: {
-      type: [String, Number, Array] as PropType<
-        string | number | Array<string | number>
-      >,
-      default: '',
-    },
-  },
+  props: collapseProps,
 
   emits: ['change', 'update:modelValue'],
 

packages/vant/src/collapse/README.md

@@ -155,7 +155,11 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collap
 The component exports the following type definitions:
 
 ```ts
-import type { CollapseItemProps, CollapseItemInstance } from 'vant';
+import type {
+  CollapseProps,
+  CollapseItemProps,
+  CollapseItemInstance,
+} from 'vant';
 ```
 
 `CollapseItemInstance` is the type of component instance:

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

@@ -153,7 +153,11 @@ export default {
 组件导出以下类型定义：
 
 ```ts
-import type { CollapseItemProps, CollapseItemInstance } from 'vant';
+import type {
+  CollapseProps,
+  CollapseItemProps,
+  CollapseItemInstance,
+} from 'vant';
 ```
 
 `CollapseItemInstance` 是组件实例的类型，用法如下：

packages/vant/src/collapse/index.ts

@@ -3,3 +3,4 @@ import _Collapse from './Collapse';
 
 export const Collapse = withInstall(_Collapse);
 export default Collapse;
+export type { CollapseProps } from './Collapse';

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -5,6 +5,7 @@ import {
   InjectionKey,
   CSSProperties,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 import { kebabCase, makeStringProp, createNamespace } from '../utils';
 
@@ -17,6 +18,14 @@ export type ConfigProviderProvide = {
 export const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide> =
   Symbol(name);
 
+const configProviderProps = {
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  themeVars: Object as PropType<Record<string, string | number>>,
+  iconPrefix: String,
+};
+
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
+
 function mapThemeVarsToCSSVars(themeVars: Record<string, string | number>) {
   const cssVars: Record<string, string | number> = {};
   Object.keys(themeVars).forEach((key) => {
@@ -28,11 +37,7 @@ function mapThemeVarsToCSSVars(themeVars: Record<string, string | number>) {
 export default defineComponent({
   name,
 
-  props: {
-    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
-    themeVars: Object as PropType<Record<string, string | number>>,
-    iconPrefix: String,
-  },
+  props: configProviderProps,
 
   setup(props, { slots }) {
     const style = computed<CSSProperties | undefined>(() => {

packages/vant/src/config-provider/README.md

@@ -211,3 +211,11 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 | theme-vars           | Theme variables          | _object_ | -          |
 | tag `v3.1.2`         | HTML Tag of root element | _string_ | `div`      |
 | icon-prefix `v3.1.3` | Icon className prefix    | _string_ | `van-icon` |
+
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { ConfigProviderProps } from 'vant';
+```

packages/vant/src/config-provider/README.zh-CN.md

@@ -215,3 +215,11 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 | theme-vars | 自定义主题变量 | _object_ | - |
 | tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div` |
 | icon-prefix `v3.1.3` | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { ConfigProviderProps } from 'vant';
+```

packages/vant/src/config-provider/index.ts

@@ -3,3 +3,4 @@ import _ConfigProvider from './ConfigProvider';
 
 export const ConfigProvider = withInstall(_ConfigProvider);
 export default ConfigProvider;
+export type { ConfigProviderProps } from './ConfigProvider';

packages/vant/src/contact-card/ContactCard.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 import { truthProp, makeStringProp, createNamespace } from '../utils';
 import { Cell } from '../cell';
 
@@ -6,16 +6,20 @@ const [name, bem, t] = createNamespace('contact-card');
 
 export type ContactCardType = 'add' | 'edit';
 
+const contactCardProps = {
+  tel: String,
+  name: String,
+  type: makeStringProp<ContactCardType>('add'),
+  addText: String,
+  editable: truthProp,
+};
+
+export type ContactCardProps = ExtractPropTypes<typeof contactCardProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    tel: String,
-    name: String,
-    type: makeStringProp<ContactCardType>('add'),
-    addText: String,
-    editable: truthProp,
-  },
+  props: contactCardProps,
 
   emits: ['click'],
 

packages/vant/src/contact-card/README.md

@@ -95,7 +95,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { ContactCardType } from 'vant';
+import type { ContactCardType, ContactCardProps } from 'vant';
 ```
 
 ## Theming

packages/vant/src/contact-card/README.zh-CN.md

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

packages/vant/src/contact-card/index.ts

@@ -3,4 +3,4 @@ import _ContactCard from './ContactCard';
 
 export const ContactCard = withInstall(_ContactCard);
 export default ContactCard;
-export type { ContactCardType } from './ContactCard';
+export type { ContactCardType, ContactCardProps } from './ContactCard';

packages/vant/src/contact-edit/ContactEdit.tsx

@@ -1,4 +1,10 @@
-import { watch, reactive, PropType, defineComponent } from 'vue';
+import {
+  watch,
+  reactive,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { isMobile, createNamespace, extend } from '../utils';
@@ -23,24 +29,28 @@ const DEFAULT_CONTACT: ContactEditInfo = {
   name: '',
 };
 
+const contactEditProps = {
+  isEdit: Boolean,
+  isSaving: Boolean,
+  isDeleting: Boolean,
+  showSetDefault: Boolean,
+  setDefaultLabel: String,
+  contactInfo: {
+    type: Object as PropType<ContactEditInfo>,
+    default: () => extend({}, DEFAULT_CONTACT),
+  },
+  telValidator: {
+    type: Function as PropType<(val: string) => boolean>,
+    default: isMobile,
+  },
+};
+
+export type ContactEditProps = ExtractPropTypes<typeof contactEditProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    isEdit: Boolean,
-    isSaving: Boolean,
-    isDeleting: Boolean,
-    showSetDefault: Boolean,
-    setDefaultLabel: String,
-    contactInfo: {
-      type: Object as PropType<ContactEditInfo>,
-      default: () => extend({}, DEFAULT_CONTACT),
-    },
-    telValidator: {
-      type: Function as PropType<(val: string) => boolean>,
-      default: isMobile,
-    },
-  },
+  props: contactEditProps,
 
   emits: ['save', 'delete', 'change-default'],
 

packages/vant/src/contact-edit/README.md

@@ -82,7 +82,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { ContactEditInfo } from 'vant';
+import type { ContactEditInfo, ContactEditProps } from 'vant';
 ```
 
 ## Theming

packages/vant/src/contact-edit/README.zh-CN.md

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

packages/vant/src/contact-edit/index.ts

@@ -3,4 +3,4 @@ import _ContactEdit from './ContactEdit';
 
 export const ContactEdit = withInstall(_ContactEdit);
 export default ContactEdit;
-export type { ContactEditInfo } from './ContactEdit';
+export type { ContactEditInfo, ContactEditProps } from './ContactEdit';

packages/vant/src/contact-list/ContactList.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import { createNamespace, unknownProp } from '../utils';
@@ -20,15 +20,19 @@ export type ContactListItem = {
   isDefault?: boolean;
 };
 
+const contactListProps = {
+  list: Array as PropType<ContactListItem[]>,
+  addText: String,
+  modelValue: unknownProp,
+  defaultTagText: String,
+};
+
+export type ContactListProps = ExtractPropTypes<typeof contactListProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    list: Array as PropType<ContactListItem[]>,
-    addText: String,
-    modelValue: unknownProp,
-    defaultTagText: String,
-  },
+  props: contactListProps,
 
   emits: ['add', 'edit', 'select', 'update:modelValue'],
 

packages/vant/src/contact-list/README.md

@@ -100,7 +100,7 @@ export default {
 The component exports the following type definitions:
 
 ```ts
-import type { ContactListItem } from 'vant';
+import type { ContactListItem, ContactListProps } from 'vant';
 ```
 
 ## Theming

packages/vant/src/contact-list/README.zh-CN.md

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

packages/vant/src/contact-list/index.ts

@@ -3,4 +3,4 @@ import _ContactList from './ContactList';
 
 export const ContactList = withInstall(_ContactList);
 export default ContactList;
-export type { ContactListItem } from './ContactList';
+export type { ContactListItem, ContactListProps } from './ContactList';

packages/vant/src/count-down/CountDown.tsx

@@ -15,19 +15,19 @@ import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('count-down');
 
-const props = {
+const countDownProps = {
   time: makeNumericProp(0),
   format: makeStringProp('HH:mm:ss'),
   autoStart: truthProp,
   millisecond: Boolean,
 };
 
-export type CountDownProps = ExtractPropTypes<typeof props>;
+export type CountDownProps = ExtractPropTypes<typeof countDownProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: countDownProps,
 
   emits: ['change', 'finish'],
 

packages/vant/src/count-down/index.ts

@@ -1,7 +1,7 @@
 import { withInstall } from '../utils';
-import _CountDown, { CountDownProps } from './CountDown';
+import _CountDown from './CountDown';
 
 export const CountDown = withInstall(_CountDown);
 export default CountDown;
-export type { CountDownProps };
+export type { CountDownProps } from './CountDown';
 export type { CountDownInstance, CountDownCurrentTime } from './types';

packages/vant/src/coupon-cell/CouponCell.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -18,11 +18,18 @@ import type { CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-cell');
 
-function formatValue(
-  coupons: CouponInfo[],
-  chosenCoupon: number | string,
-  currency: string
-) {
+const couponCellProps = {
+  title: String,
+  border: truthProp,
+  editable: truthProp,
+  coupons: makeArrayProp<CouponInfo>(),
+  currency: makeStringProp('¥'),
+  chosenCoupon: makeNumericProp(-1),
+};
+
+export type CouponCellProps = ExtractPropTypes<typeof couponCellProps>;
+
+function formatValue({ coupons, chosenCoupon, currency }: CouponCellProps) {
   const coupon = coupons[+chosenCoupon];
 
   if (coupon) {
@@ -43,28 +50,15 @@ function formatValue(
 export default defineComponent({
   name,
 
-  props: {
-    title: String,
-    border: truthProp,
-    editable: truthProp,
-    coupons: makeArrayProp<CouponInfo>(),
-    currency: makeStringProp('¥'),
-    chosenCoupon: makeNumericProp(-1),
-  },
+  props: couponCellProps,
 
   setup(props) {
     return () => {
       const selected = props.coupons[+props.chosenCoupon];
-      const value = formatValue(
-        props.coupons,
-        props.chosenCoupon,
-        props.currency
-      );
-
       return (
         <Cell
           class={bem()}
-          value={value}
+          value={formatValue(props)}
           title={props.title || t('title')}
           border={props.border}
           isLink={props.editable}

packages/vant/src/coupon-cell/index.ts

@@ -3,3 +3,4 @@ import _CouponCell from './CouponCell';
 
 export const CouponCell = withInstall(_CouponCell);
 export default CouponCell;
+export type { CouponCellProps } from './CouponCell';

packages/vant/src/coupon-list/CouponList.tsx

@@ -5,6 +5,7 @@ import {
   reactive,
   onMounted,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -28,30 +29,33 @@ import { Coupon, CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
+const couponListProps = {
+  code: makeStringProp(''),
+  coupons: makeArrayProp<CouponInfo>(),
+  currency: makeStringProp('¥'),
+  showCount: truthProp,
+  emptyImage: makeStringProp(EMPTY_IMAGE),
+  chosenCoupon: makeNumberProp(-1),
+  enabledTitle: String,
+  disabledTitle: String,
+  disabledCoupons: makeArrayProp<CouponInfo>(),
+  showExchangeBar: truthProp,
+  showCloseButton: truthProp,
+  closeButtonText: String,
+  inputPlaceholder: String,
+  exchangeMinLength: makeNumberProp(1),
+  exchangeButtonText: String,
+  displayedCouponIndex: makeNumberProp(-1),
+  exchangeButtonLoading: Boolean,
+  exchangeButtonDisabled: Boolean,
+};
+
+export type CouponListProps = ExtractPropTypes<typeof couponListProps>;
 
 export default defineComponent({
   name,
 
-  props: {
-    code: makeStringProp(''),
-    coupons: makeArrayProp<CouponInfo>(),
-    currency: makeStringProp('¥'),
-    showCount: truthProp,
-    emptyImage: makeStringProp(EMPTY_IMAGE),
-    chosenCoupon: makeNumberProp(-1),
-    enabledTitle: String,
-    disabledTitle: String,
-    disabledCoupons: makeArrayProp<CouponInfo>(),
-    showExchangeBar: truthProp,
-    showCloseButton: truthProp,
-    closeButtonText: String,
-    inputPlaceholder: String,
-    exchangeMinLength: makeNumberProp(1),
-    exchangeButtonText: String,
-    displayedCouponIndex: makeNumberProp(-1),
-    exchangeButtonLoading: Boolean,
-    exchangeButtonDisabled: Boolean,
-  },
+  props: couponListProps,
 
   emits: ['change', 'exchange', 'update:code'],
 

packages/vant/src/coupon-list/README.md

@@ -149,6 +149,14 @@ export default {
 | valueDesc   | Value Text                          | _string_ |
 | unitDesc    | Unit Text                           | _string_ |
 
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { CouponCellProps, CouponListProps } from 'vant';
+```
+
 ## Theming
 
 ### CSS Variables

packages/vant/src/coupon-list/README.zh-CN.md

@@ -151,6 +151,14 @@ export default {
 | valueDesc   | 折扣券优惠金额文案              | _string_ |
 | unitDesc    | 单位文案                        | _string_ |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { CouponCellProps, CouponListProps } from 'vant';
+```
+
 ## 主题定制
 
 ### 样式变量

packages/vant/src/coupon-list/index.ts

@@ -3,3 +3,4 @@ import _CouponList from './CouponList';
 
 export const CouponList = withInstall(_CouponList);
 export default CouponList;
+export type { CouponListProps } from './CouponList';

packages/vant/src/coupon/Coupon.tsx

@@ -1,10 +1,6 @@
 import { computed, PropType, defineComponent } from 'vue';
-import {
-  padZero,
-  makeStringProp,
-  createNamespace,
-  makeRequiredProp,
-} from '../utils';
+import { makeStringProp, createNamespace, makeRequiredProp } from '../utils';
+import { getDate, formatAmount, formatDiscount } from './utils';
 import { Checkbox } from '../checkbox';
 
 export type CouponInfo = {
@@ -25,19 +21,6 @@ export type CouponInfo = {
 
 const [name, bem, t] = createNamespace('coupon');
 
-function getDate(timeStamp: number) {
-  const date = new Date(timeStamp * 1000);
-  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(
-    date.getDate()
-  )}`;
-}
-
-const formatDiscount = (discount: number) =>
-  (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
-
-const formatAmount = (amount: number) =>
-  (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
-
 export default defineComponent({
   name,
 

packages/vant/src/coupon/utils.ts

@@ -0,0 +1,14 @@
+import { padZero } from '../utils';
+
+export function getDate(timeStamp: number) {
+  const date = new Date(timeStamp * 1000);
+  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(
+    date.getDate()
+  )}`;
+}
+
+export const formatDiscount = (discount: number) =>
+  (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
+
+export const formatAmount = (amount: number) =>
+  (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);

packages/vant/src/datetime-picker/DatePicker.tsx

@@ -19,10 +19,10 @@ import {
 } from '../utils';
 import {
   times,
-  pickerKeys,
   sharedProps,
   getTrueValue,
   getMonthEndDay,
+  pickerInheritKeys,
 } from './utils';
 
 // Composables
@@ -327,7 +327,7 @@ export default defineComponent({
         onChange={onChange}
         onCancel={onCancel}
         onConfirm={onConfirm}
-        {...pick(props, pickerKeys)}
+        {...pick(props, pickerInheritKeys)}
       />
     );
   },

packages/vant/src/datetime-picker/DatetimePicker.tsx

@@ -7,18 +7,18 @@ import { DatetimePickerInstance } from './types';
 
 const [name, bem] = createNamespace('datetime-picker');
 
-const timePickerProps = Object.keys(TimePicker.props);
-const datePickerProps = Object.keys(DatePicker.props);
-const props = extend({}, TimePicker.props, DatePicker.props, {
+const timePickerPropKeys = Object.keys(TimePicker.props);
+const datePickerPropKeys = Object.keys(DatePicker.props);
+const datetimePickerProps = extend({}, TimePicker.props, DatePicker.props, {
   modelValue: [String, Date],
 });
 
-export type DatetimePickerProps = ExtractPropTypes<typeof props>;
+export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: datetimePickerProps,
 
   setup(props, { attrs, slots }) {
     const root = ref<DatetimePickerInstance>();
@@ -32,7 +32,7 @@ export default defineComponent({
       const Component = isTimePicker ? TimePicker : DatePicker;
       const inheritProps = pick(
         props,
-        isTimePicker ? timePickerProps : datePickerProps
+        isTimePicker ? timePickerPropKeys : datePickerPropKeys
       );
 
       return (

packages/vant/src/datetime-picker/TimePicker.tsx

@@ -16,7 +16,7 @@ import {
   createNamespace,
   makeNumericProp,
 } from '../utils';
-import { times, sharedProps, pickerKeys } from './utils';
+import { times, sharedProps, pickerInheritKeys } from './utils';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
@@ -171,7 +171,7 @@ export default defineComponent({
         onChange={onChange}
         onCancel={onCancel}
         onConfirm={onConfirm}
-        {...pick(props, pickerKeys)}
+        {...pick(props, pickerInheritKeys)}
       />
     );
   },

packages/vant/src/datetime-picker/utils.ts

@@ -1,9 +1,9 @@
 import { PropType } from 'vue';
 import { extend } from '../utils';
-import { pickerProps } from '../picker/Picker';
+import { pickerSharedProps } from '../picker/Picker';
 import type { DatetimePickerColumnType } from './types';
 
-export const sharedProps = extend({}, pickerProps, {
+export const sharedProps = extend({}, pickerSharedProps, {
   filter: Function as PropType<(type: string, values: string[]) => string[]>,
   columnsOrder: Array as PropType<DatetimePickerColumnType[]>,
   formatter: {
@@ -12,8 +12,8 @@ export const sharedProps = extend({}, pickerProps, {
   },
 });
 
-export const pickerKeys = Object.keys(pickerProps) as Array<
-  keyof typeof pickerProps
+export const pickerInheritKeys = Object.keys(pickerSharedProps) as Array<
+  keyof typeof pickerSharedProps
 >;
 
 export function times<T>(n: number, iteratee: (index: number) => T) {

packages/vant/src/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { PropType, reactive, defineComponent } from 'vue';
+import { PropType, reactive, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -33,7 +33,29 @@ import type {
 
 const [name, bem, t] = createNamespace('dialog');
 
-const popupKeys = [
+const dialogProps = extend({}, popupSharedProps, {
+  title: String,
+  theme: String as PropType<DialogTheme>,
+  width: numericProp,
+  message: [String, Function] as PropType<DialogMessage>,
+  callback: Function as PropType<(action?: DialogAction) => void>,
+  allowHtml: Boolean,
+  className: unknownProp,
+  transition: makeStringProp('van-dialog-bounce'),
+  messageAlign: String as PropType<DialogMessageAlign>,
+  closeOnPopstate: truthProp,
+  showCancelButton: Boolean,
+  cancelButtonText: String,
+  cancelButtonColor: String,
+  confirmButtonText: String,
+  confirmButtonColor: String,
+  showConfirmButton: truthProp,
+  closeOnClickOverlay: Boolean,
+});
+
+export type DialogProps = ExtractPropTypes<typeof dialogProps>;
+
+const popupInheritKeys = [
   ...popupSharedPropKeys,
   'transition',
   'closeOnPopstate',
@@ -42,25 +64,7 @@ const popupKeys = [
 export default defineComponent({
   name,
 
-  props: extend({}, popupSharedProps, {
-    title: String,
-    theme: String as PropType<DialogTheme>,
-    width: numericProp,
-    message: [String, Function] as PropType<DialogMessage>,
-    callback: Function as PropType<(action?: DialogAction) => void>,
-    allowHtml: Boolean,
-    className: unknownProp,
-    transition: makeStringProp('van-dialog-bounce'),
-    messageAlign: String as PropType<DialogMessageAlign>,
-    closeOnPopstate: truthProp,
-    showCancelButton: Boolean,
-    cancelButtonText: String,
-    cancelButtonColor: String,
-    confirmButtonText: String,
-    confirmButtonColor: String,
-    showConfirmButton: truthProp,
-    closeOnClickOverlay: Boolean,
-  }),
+  props: dialogProps,
 
   emits: ['confirm', 'cancel', 'update:show'],
 
@@ -225,7 +229,7 @@ export default defineComponent({
           style={{ width: addUnit(width) }}
           aria-labelledby={title || message}
           onUpdate:show={updateShow}
-          {...pick(props, popupKeys)}
+          {...pick(props, popupInheritKeys)}
         >
           {renderTitle()}
           {renderContent()}

packages/vant/src/dialog/README.md

@@ -220,6 +220,7 @@ The component exports the following type definitions:
 
 ```ts
 import type {
+  DialogProps,
   DialogTheme,
   DialogMessage,
   DialogOptions,

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

@@ -270,6 +270,7 @@ export default {
 
 ```ts
 import type {
+  DialogProps,
   DialogTheme,
   DialogMessage,
   DialogOptions,

packages/vant/src/dialog/index.ts

@@ -2,6 +2,7 @@ import { Dialog } from './function-call';
 
 export default Dialog;
 export { Dialog };
+export type { DialogProps } from './Dialog';
 export type {
   DialogTheme,
   DialogMessage,

packages/vant/src/divider/Divider.tsx

@@ -1,18 +1,22 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 import { truthProp, makeStringProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('divider');
 
 export type DividerContentPosition = 'left' | 'center' | 'right';
 
+const dividerProps = {
+  dashed: Boolean,
+  hairline: truthProp,
+  contentPosition: makeStringProp<DividerContentPosition>('center'),
+};
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>;
+
 export default defineComponent({
   name,
 
-  props: {
-    dashed: Boolean,
-    hairline: truthProp,
-    contentPosition: makeStringProp<DividerContentPosition>('center'),
-  },
+  props: dividerProps,
 
   setup(props, { slots }) {
     return () => (

packages/vant/src/divider/README.md

@@ -74,7 +74,7 @@ app.use(Divider);
 The component exports the following type definitions:
 
 ```ts
-import type { DividerContentPosition } from 'vant';
+import type { DividerProps, DividerContentPosition } from 'vant';
 ```
 
 ## Theming

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

@@ -84,7 +84,7 @@ app.use(Divider);
 组件导出以下类型定义：
 
 ```ts
-import type { DividerContentPosition } from 'vant';
+import type { DividerProps, DividerContentPosition } from 'vant';
 ```
 
 ## 主题定制

packages/vant/src/divider/index.ts

@@ -3,4 +3,4 @@ import _Divider from './Divider';
 
 export const Divider = withInstall(_Divider);
 export default Divider;
-export type { DividerContentPosition } from './Divider';
+export type { DividerProps, DividerContentPosition } from './Divider';

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -32,7 +32,7 @@ import type { DropdownItemOption } from './types';
 
 const [name, bem] = createNamespace('dropdown-item');
 
-const props = {
+const dropdownItemProps = {
   title: String,
   options: makeArrayProp<DropdownItemOption>(),
   disabled: Boolean,
@@ -42,12 +42,12 @@ const props = {
   titleClass: unknownProp,
 };
 
-export type DropdownItemProps = ExtractPropTypes<typeof props>;
+export type DropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>;
 
 export default defineComponent({
   name,
 
-  props,
+  props: dropdownItemProps,
 
   emits: ['open', 'opened', 'close', 'closed', 'change', 'update:modelValue'],