chore: update branches in GitHub actions

For example, when calling `get({}, 'button.small')`, it expects to return an empty string, but return a function (`''.small` is a native function, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small).

.github/workflows/deploy-v4-site.yml

@@ -2,7 +2,7 @@ name: Deploy V4 Site
 
 on:
   push:
-    branches: [next]
+    branches: [dev]
     paths:
       - 'packages/vant/docs/**'
 

.github/workflows/sync-gitee.yml

@@ -2,7 +2,7 @@ name: Sync to Gitee
 
 on:
   push:
-    branches: [dev, 2.x, gh-pages]
+    branches: [dev, 2.x, 3.x, gh-pages]
 
   workflow_dispatch:
 

.npmrc

@@ -1 +1,3 @@
 registry=https://registry.npmmirror.com/
+
+strict-peer-dependencies=false

package.json

@@ -14,7 +14,7 @@
     "*.{ts,tsx,js,vue,less}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix"
   },
-  "packageManager": "pnpm@7.1.6",
+  "packageManager": "pnpm@7.11.0",
   "devDependencies": {
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",

packages/vant-cli/changelog.md

@@ -31,6 +31,12 @@ yarn add stylelint@13 @vant/stylelint-config
 
 现在会默认生成 WebStorm 所需的 web-types.json 文件到 `lib/web-types.json` 目录下。
 
+## v4.0.4
+
+`2022-07-02`
+
+- 修复构建 sfc 文件的类型定义时报错的问题
+
 ## v4.0.3
 
 `2022-07-02`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -87,11 +87,6 @@ export async function compileSfc(filePath: string): Promise<any> {
       new Promise((resolve) => {
         let script = '';
 
-        // the generated render fn lacks type definitions
-        if (lang === 'ts') {
-          script += '// @ts-nocheck\n';
-        }
-
         let bindingMetadata;
         if (descriptor.scriptSetup) {
           const { bindings, content } = compileScript(descriptor, {
@@ -125,6 +120,12 @@ export async function compileSfc(filePath: string): Promise<any> {
 
         script += `\n${EXPORT} ${VUEIDS}`;
 
+        // ts-nocheck should be placed on the first line
+        // the generated render fn lacks type definitions
+        if (lang === 'ts') {
+          script = '// @ts-nocheck\n' + script;
+        }
+
         outputFile(scriptFilePath, script).then(resolve);
       })
     );

packages/vant/docs/markdown/changelog.en-US.md

@@ -19,6 +19,19 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
+### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
+
+`2022-09-04`
+
+**New Component**
+
+- Add new component [PickerGroup](#/en-US/picker-group) [#11005](https://github.com/vant-ui/vant/issues/11005)
+
+**Bug Fixes**
+
+- DatePicker: failed to update model value [#10984](https://github.com/vant-ui/vant/issues/10984)
+- DatePicker: min-date prop not work correctly [#10985](https://github.com/vant-ui/vant/issues/10985)
+
 ### [v4.0.0-beta.1](https://github.com/vant-ui/vant/compare/v3.6.0...v4.0.0-beta.1)
 
 `2022-08-24`

packages/vant/docs/markdown/changelog.zh-CN.md

@@ -19,6 +19,19 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
+### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
+
+`2022-09-04`
+
+**Feature**
+
+- 新增 [PickerGroup 选择器组](#/zh-CN/picker-group) 组件
+
+**Bug Fixes**
+
+- DatePicker: 修复未正确更新 modelValue 的问题 [#10984](https://github.com/vant-ui/vant/issues/10984)
+- DatePicker: 修复 min-date 属性未正确生效的问题 [#10985](https://github.com/vant-ui/vant/issues/10985)
+
 ### [v4.0.0-beta.1](https://github.com/vant-ui/vant/compare/v3.6.0...v4.0.0-beta.1)
 
 `2022-08-24`

packages/vant/docs/markdown/contribution.zh-CN.md

@@ -4,7 +4,7 @@
 
 感谢你使用 Vant。
 
-以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下文字。
+以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下内容。
 
 ### Issue 规范
 
@@ -15,7 +15,7 @@
 
 ### 本地开发
 
-在进行本地开发前，请先确保你的开发环境中安装了 [Node.js >= 14](https://nodejs.org) 和 [pnpm](https://pnpm.io).
+在进行本地开发前，请先确保你的开发环境中安装了 [Node.js >= 14.19.0](https://nodejs.org)。
 
 按照下面的步骤操作，即可在本地开发 Vant 组件。
 
@@ -23,6 +23,12 @@
 # 克隆仓库
 git clone git@github.com:vant-ui/vant.git
 
+# 启用 pnpm 包管理器
+corepack enable
+
+# 如果无法使用 corepack，你也可以手动安装 pnpm
+npm install -g pnpm@7
+
 # 安装依赖
 pnpm i
 
@@ -32,9 +38,9 @@ pnpm dev
 
 仓库的不同分支对应不同的 Vant 版本，请切换到对应分支进行开发：
 
+- dev 分支对应 Vant 4 版本，适用于 Vue 3
+- 3.x 分支对应 Vant 3 版本 ，适用于 Vue 3
 - 2.x 分支对应 Vant 2 版本，适用于 Vue 2
-- dev 分支对应 Vant 3 版本 ，适用于 Vue 3
-- next 分支对应 Vant 4 版本，适用于 Vue 3
 
 ### 镜像仓库
 

packages/vant/docs/markdown/migrate-from-v3.zh-CN.md

@@ -83,20 +83,23 @@ import 'vant/lib/index.css';
 
 DatetimePicker 组件被拆分为：
 
-- TimePicker: 用于时间选择。
-- DatePicker: 用于日期选择。
+- [TimePicker](#/zh-CN/time-picker): 用于时间选择。
+- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
+- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
 
-同时，这两个组件也基于新版 Picker 组件进行重构，并优化了部分 API 设计。
+同时，TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构，并优化了部分 API 设计。
 
 #### 主要变更
 
+以下是 TimePicker 和 DatePicker 的主要 API 变化，更多细节请参考 [TimePicker](#/zh-CN/time-picker) 和 [DatePicker](#/zh-CN/date-picker) 文档。
+
 - `v-model` 绑定的值调整为数组格式
 - 新增 `columns-type` 属性，用于控制选项类型和顺序
 - 移除 `type` 属性和 `columns-order` 属性
 - 移除 `getPicker` 方法
 - 调整 `confirm`、`cancel`、`change` 事件的参数，与 Picker 组件保持一致
 
-> 详细用法请参见 [TimePicker 组件](#/zh-CN/time-picker) 和 [DatePicker 组件](#/zh-CN/date-picker) 文档。
+> Vant 4 不再提供旧版的 DatetimePicker 组件，使用 PickerGroup 组件可以实现更灵活、更丰富的交互效果，具体用法请参考 [PickerGroup](#/zh-CN/picker-group) 组件文档。
 
 ### Area 组件重构
 

packages/vant/package.json

@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.56",
+    "@types/jest": "^27.0.0",
     "@vant/area-data": "workspace:*",
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
@@ -68,8 +69,7 @@
   "sideEffects": [
     "es/**/style/*",
     "lib/**/style/*",
-    "*.css",
-    "*.less"
+    "*.css"
   ],
   "web-types": "lib/web-types.json"
 }

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

@@ -17,7 +17,7 @@ import { Button, ButtonType } from '../button';
 
 const [name, bem] = createNamespace('action-bar-button');
 
-const actionBarButtonProps = extend({}, routeProps, {
+export const actionBarButtonProps = extend({}, routeProps, {
   type: String as PropType<ButtonType>,
   text: String,
   icon: String,

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

@@ -3,6 +3,7 @@ import _ActionBarButton from './ActionBarButton';
 
 export const ActionBarButton = withInstall(_ActionBarButton);
 export default ActionBarButton;
+export { actionBarButtonProps } from './ActionBarButton';
 export type { ActionBarButtonProps } from './ActionBarButton';
 
 declare module 'vue' {

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

@@ -12,7 +12,7 @@ import { Badge, type BadgeProps } from '../badge';
 
 const [name, bem] = createNamespace('action-bar-icon');
 
-const actionBarIconProps = extend({}, routeProps, {
+export const actionBarIconProps = extend({}, routeProps, {
   dot: Boolean,
   text: String,
   icon: String,

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

@@ -3,6 +3,7 @@ import _ActionBarIcon from './ActionBarIcon';
 
 export const ActionBarIcon = withInstall(_ActionBarIcon);
 export default ActionBarIcon;
+export { actionBarIconProps } from './ActionBarIcon';
 export type { ActionBarIconProps } from './ActionBarIcon';
 
 declare module 'vue' {

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

@@ -7,7 +7,7 @@ const [name, bem] = createNamespace('action-bar');
 
 export const ACTION_BAR_KEY = Symbol(name);
 
-const actionBarProps = {
+export const actionBarProps = {
   placeholder: Boolean,
   safeAreaInsetBottom: truthProp,
 };

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

@@ -3,6 +3,7 @@ import _ActionBar from './ActionBar';
 
 export const ActionBar = withInstall(_ActionBar);
 export default ActionBar;
+export { actionBarProps } from './ActionBar';
 export type { ActionBarProps } from './ActionBar';
 
 declare module 'vue' {

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

@@ -29,7 +29,7 @@ export type ActionSheetAction = {
   className?: unknown;
 };
 
-const actionSheetProps = extend({}, popupSharedProps, {
+export const actionSheetProps = extend({}, popupSharedProps, {
   title: String,
   round: truthProp,
   actions: makeArrayProp<ActionSheetAction>(),

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

@@ -3,6 +3,7 @@ import _ActionSheet from './ActionSheet';
 
 export const ActionSheet = withInstall(_ActionSheet);
 export default ActionSheet;
+export { actionSheetProps } from './ActionSheet';
 export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';
 
 declare module 'vue' {

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

@@ -54,7 +54,7 @@ const DEFAULT_DATA: AddressEditInfo = {
   addressDetail: '',
 };
 
-const addressEditProps = {
+export const addressEditProps = {
   areaList: Object as PropType<AreaList>,
   isSaving: Boolean,
   isDeleting: Boolean,

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

@@ -3,6 +3,7 @@ import _AddressEdit, { AddressEditProps } from './AddressEdit';
 
 export const AddressEdit = withInstall(_AddressEdit);
 export default AddressEdit;
+export { addressEditProps } from './AddressEdit';
 export type { AddressEditProps };
 export type {
   AddressEditInfo,

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

@@ -15,7 +15,7 @@ import AddressListItem, { AddressListAddress } from './AddressListItem';
 
 const [name, bem, t] = createNamespace('address-list');
 
-const addressListProps = {
+export const addressListProps = {
   list: makeArrayProp<AddressListAddress>(),
   modelValue: numericProp,
   switchable: truthProp,

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

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

packages/vant/src/area/Area.tsx

@@ -30,7 +30,7 @@ import type { PickerExpose } from '../picker/types';
 
 const [name, bem] = createNamespace('area');
 
-const areaProps = extend({}, pickerSharedProps, {
+export const areaProps = extend({}, pickerSharedProps, {
   modelValue: String,
   columnsNum: makeNumericProp(3),
   columnsPlaceholder: makeArrayProp<string>(),

packages/vant/src/area/index.ts

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

packages/vant/src/badge/Badge.tsx

@@ -24,7 +24,7 @@ export type BadgePosition =
   | 'bottom-left'
   | 'bottom-right';
 
-const badgeProps = {
+export const badgeProps = {
   dot: Boolean,
   max: numericProp,
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),

packages/vant/src/badge/index.ts

@@ -3,6 +3,7 @@ import _Badge from './Badge';
 
 export const Badge = withInstall(_Badge);
 export default Badge;
+export { badgeProps } from './Badge';
 export type { BadgeProps, BadgePosition } from './Badge';
 
 declare module 'vue' {

packages/vant/src/button/Button.tsx

@@ -30,7 +30,7 @@ import {
 
 const [name, bem] = createNamespace('button');
 
-const buttonProps = extend({}, routeProps, {
+export const buttonProps = extend({}, routeProps, {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('button'),
   text: String,
   icon: String,

packages/vant/src/button/index.ts

@@ -3,6 +3,7 @@ import _Button from './Button';
 
 export const Button = withInstall(_Button);
 export default Button;
+export { buttonProps } from './Button';
 export type { ButtonProps } from './Button';
 export type {
   ButtonType,

packages/vant/src/calendar/Calendar.tsx

@@ -53,7 +53,7 @@ import type {
   CalendarMonthInstance,
 } from './types';
 
-const calendarProps = {
+export const calendarProps = {
   show: Boolean,
   type: makeStringProp<CalendarType>('single'),
   title: String,

packages/vant/src/calendar/index.ts

@@ -3,6 +3,7 @@ import _Calendar from './Calendar';
 
 export const Calendar = withInstall(_Calendar);
 export default Calendar;
+export { calendarProps } from './Calendar';
 export type { CalendarProps } from './Calendar';
 export type {
   CalendarType,

packages/vant/src/card/Card.tsx

@@ -9,7 +9,7 @@ import { Image } from '../image';
 
 const [name, bem] = createNamespace('card');
 
-const cardProps = {
+export const cardProps = {
   tag: String,
   num: numericProp,
   desc: String,

packages/vant/src/card/index.ts

@@ -3,6 +3,7 @@ import _Card from './Card';
 
 export const Card = withInstall(_Card);
 export default Card;
+export { cardProps } from './Card';
 export type { CardProps } from './Card';
 
 declare module 'vue' {

packages/vant/src/cascader/Cascader.tsx

@@ -28,7 +28,7 @@ import type { CascaderTab, CascaderOption, CascaderFieldNames } from './types';
 
 const [name, bem, t] = createNamespace('cascader');
 
-const cascaderProps = {
+export const cascaderProps = {
   title: String,
   options: makeArrayProp<CascaderOption>(),
   closeable: truthProp,

packages/vant/src/cascader/index.ts

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

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

@@ -3,7 +3,7 @@ import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
 
 const [name, bem] = createNamespace('cell-group');
 
-const cellGroupProps = {
+export const cellGroupProps = {
   title: String,
   inset: Boolean,
   border: truthProp,

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

@@ -3,6 +3,7 @@ import _CellGroup from './CellGroup';
 
 export const CellGroup = withInstall(_CellGroup);
 export default CellGroup;
+export { cellGroupProps } from './CellGroup';
 export type { CellGroupProps } from './CellGroup';
 
 declare module 'vue' {

packages/vant/src/cell/Cell.tsx

@@ -49,7 +49,7 @@ export const cellSharedProps = {
   },
 };
 
-const cellProps = extend({}, cellSharedProps, routeProps);
+export const cellProps = extend({}, cellSharedProps, routeProps);
 
 export type CellProps = ExtractPropTypes<typeof cellProps>;
 

packages/vant/src/cell/index.ts

@@ -3,6 +3,7 @@ import _Cell from './Cell';
 
 export const Cell = withInstall(_Cell);
 export default Cell;
+export { cellProps } from './Cell';
 export type { CellSize, CellProps, CellArrowDirection } from './Cell';
 
 declare module 'vue' {

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

@@ -23,7 +23,7 @@ import type {
 
 const [name, bem] = createNamespace('checkbox-group');
 
-const checkboxGroupProps = {
+export const checkboxGroupProps = {
   max: numericProp,
   disabled: Boolean,
   iconSize: numericProp,

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

@@ -3,6 +3,7 @@ import _CheckboxGroup from './CheckboxGroup';
 
 export const CheckboxGroup = withInstall(_CheckboxGroup);
 export default CheckboxGroup;
+export { checkboxGroupProps } from './CheckboxGroup';
 export type { CheckboxGroupProps } from './CheckboxGroup';
 export type {
   CheckboxGroupInstance,

packages/vant/src/checkbox/Checkbox.tsx

@@ -16,7 +16,7 @@ import type { CheckboxExpose } from './types';
 
 const [name, bem] = createNamespace('checkbox');
 
-const checkboxProps = extend({}, checkerProps, {
+export const checkboxProps = extend({}, checkerProps, {
   bindGroup: truthProp,
 });
 

packages/vant/src/checkbox/index.ts

@@ -3,6 +3,7 @@ import _Checkbox from './Checkbox';
 
 export const Checkbox = withInstall(_Checkbox);
 export default Checkbox;
+export { checkboxProps } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export type {
   CheckboxShape,

packages/vant/src/circle/Circle.tsx

@@ -34,7 +34,7 @@ function getPath(clockwise: boolean, viewBoxSize: number) {
 
 export type CircleStartPosition = 'top' | 'right' | 'bottom' | 'left';
 
-const circleProps = {
+export const circleProps = {
   text: String,
   size: numericProp,
   fill: makeStringProp('none'),

packages/vant/src/circle/index.ts

@@ -3,6 +3,7 @@ import _Circle from './Circle';
 
 export const Circle = withInstall(_Circle);
 export default Circle;
+export { circleProps } from './Circle';
 export type { CircleProps, CircleStartPosition } from './Circle';
 
 declare module 'vue' {

packages/vant/src/col/Col.tsx

@@ -10,7 +10,7 @@ import { ROW_KEY } from '../row/Row';
 
 const [name, bem] = createNamespace('col');
 
-const colProps = {
+export const colProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
   span: makeNumericProp(0),
   offset: numericProp,

packages/vant/src/col/index.ts

@@ -3,6 +3,7 @@ import _Col from './Col';
 
 export const Col = withInstall(_Col);
 export default Col;
+export { colProps } from './Col';
 export type { ColProps } from './Col';
 
 declare module 'vue' {

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

@@ -30,7 +30,7 @@ const [name, bem] = createNamespace('collapse-item');
 
 const CELL_SLOTS = ['icon', 'title', 'value', 'label', 'right-icon'] as const;
 
-const collapseItemProps = extend({}, cellSharedProps, {
+export const collapseItemProps = extend({}, cellSharedProps, {
   name: numericProp,
   isLink: truthProp,
   disabled: Boolean,

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

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

packages/vant/src/collapse/Collapse.tsx

@@ -30,7 +30,7 @@ export type CollapseToggleAllOptions =
 
 export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol(name);
 
-const collapseProps = {
+export const collapseProps = {
   border: truthProp,
   accordion: Boolean,
   modelValue: {

packages/vant/src/collapse/index.ts

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

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

@@ -35,7 +35,7 @@ export const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide> =
 
 export type ThemeVars = PropType<Record<string, Numeric>>;
 
-const configProviderProps = {
+export const configProviderProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
   theme: makeStringProp<ConfigProviderTheme>('light'),
   zIndex: Number,

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

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

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

@@ -6,7 +6,7 @@ const [name, bem, t] = createNamespace('contact-card');
 
 export type ContactCardType = 'add' | 'edit';
 
-const contactCardProps = {
+export const contactCardProps = {
   tel: String,
   name: String,
   type: makeStringProp<ContactCardType>('add'),

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

@@ -3,6 +3,7 @@ import _ContactCard from './ContactCard';
 
 export const ContactCard = withInstall(_ContactCard);
 export default ContactCard;
+export { contactCardProps } from './ContactCard';
 export type { ContactCardType, ContactCardProps } from './ContactCard';
 
 declare module 'vue' {

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

@@ -29,7 +29,7 @@ const DEFAULT_CONTACT: ContactEditInfo = {
   name: '',
 };
 
-const contactEditProps = {
+export const contactEditProps = {
   isEdit: Boolean,
   isSaving: Boolean,
   isDeleting: Boolean,

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

@@ -3,6 +3,7 @@ import _ContactEdit from './ContactEdit';
 
 export const ContactEdit = withInstall(_ContactEdit);
 export default ContactEdit;
+export { contactEditProps } from './ContactEdit';
 export type { ContactEditInfo, ContactEditProps } from './ContactEdit';
 
 declare module 'vue' {

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

@@ -20,7 +20,7 @@ export type ContactListItem = {
   isDefault?: boolean;
 };
 
-const contactListProps = {
+export const contactListProps = {
   list: Array as PropType<ContactListItem[]>,
   addText: String,
   modelValue: unknownProp,

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

@@ -3,6 +3,7 @@ import _ContactList from './ContactList';
 
 export const ContactList = withInstall(_ContactList);
 export default ContactList;
+export { contactListProps } from './ContactList';
 export type { ContactListItem, ContactListProps } from './ContactList';
 
 declare module 'vue' {

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

@@ -15,7 +15,7 @@ import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('count-down');
 
-const countDownProps = {
+export const countDownProps = {
   time: makeNumericProp(0),
   format: makeStringProp('HH:mm:ss'),
   autoStart: truthProp,

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

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

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

@@ -18,7 +18,7 @@ import type { CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-cell');
 
-const couponCellProps = {
+export const couponCellProps = {
   title: String,
   border: truthProp,
   editable: truthProp,

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

@@ -3,6 +3,7 @@ import _CouponCell from './CouponCell';
 
 export const CouponCell = withInstall(_CouponCell);
 export default CouponCell;
+export { couponCellProps } from './CouponCell';
 export type { CouponCellProps } from './CouponCell';
 
 declare module 'vue' {

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

@@ -31,7 +31,7 @@ import { Coupon, CouponInfo } from '../coupon';
 import { useRect } from '@vant/use';
 
 const [name, bem, t] = createNamespace('coupon-list');
-const couponListProps = {
+export const couponListProps = {
   code: makeStringProp(''),
   coupons: makeArrayProp<CouponInfo>(),
   currency: makeStringProp('¥'),

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

@@ -3,6 +3,7 @@ import _CouponList from './CouponList';
 
 export const CouponList = withInstall(_CouponList);
 export default CouponList;
+export { couponListProps } from './CouponList';
 export type { CouponListProps } from './CouponList';
 
 declare module 'vue' {

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

@@ -24,7 +24,7 @@ const [name] = createNamespace('date-picker');
 
 export type DatePickerColumnType = 'year' | 'month' | 'day';
 
-const datePickerProps = extend({}, sharedProps, {
+export const datePickerProps = extend({}, sharedProps, {
   columnsType: {
     type: Array as PropType<DatePickerColumnType[]>,
     default: () => ['year', 'month', 'day'],

packages/vant/src/date-picker/index.ts

@@ -3,6 +3,7 @@ import _DatePicker, { DatePickerProps } from './DatePicker';
 
 export const DatePicker = withInstall(_DatePicker);
 export default DatePicker;
+export { datePickerProps } from './DatePicker';
 export type { DatePickerProps };
 export type { DatePickerColumnType } from './DatePicker';
 

packages/vant/src/dialog/Dialog.tsx

@@ -42,7 +42,7 @@ import type {
 
 const [name, bem, t] = createNamespace('dialog');
 
-const dialogProps = extend({}, popupSharedProps, {
+export const dialogProps = extend({}, popupSharedProps, {
   title: String,
   theme: String as PropType<DialogTheme>,
   width: numericProp,

packages/vant/src/dialog/README.md

@@ -104,9 +104,9 @@ showConfirmDialog({
 });
 ```
 
-### Advanced Usage
+### Use Dialog Component
 
-If you need to render vue components within a dialog, you can use dialog component.
+If you need to render Vue components within a Dialog, you can use the Dialog component.
 
 ```html
 <van-dialog v-model:show="show" title="Title" show-cancel-button>
@@ -129,6 +129,8 @@ export default {
 
 ### Methods
 
+Vant exports following Dialog utility functions:
+
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
 | showDialog | Show dialog | _options: DialogOptions_ | `Promise<void>` |
@@ -174,7 +176,7 @@ export default {
 | title | Title | _string_ | - |
 | width | Width | _number \| string_ | `320px` |
 | message | Message | _string \| () => JSX.ELement_ | - |
-| message-align | Message align, can be set to `left` `right` | _string_ | `center` |
+| message-align | Message align, can be set to `left` `right` `justify` | _string_ | `center` |
 | theme | Theme style, can be set to `round-button` | _string_ | `default` |
 | show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
 | show-cancel-button | Whether to show cancel button | _boolean_ | `false` |

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

@@ -121,9 +121,9 @@ showConfirmDialog({
 });
 ```
 
-### 组件调用
+### 使用 Dialog 组件
 
-如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
+如果需要在 Dialog 内嵌入组件或其他自定义内容，可以直接使用 Dialog 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
 
 ```html
 <van-dialog v-model:show="show" title="标题" show-cancel-button>
@@ -146,6 +146,8 @@ export default {
 
 ### 方法
 
+Vant 中导出了以下 Dialog 相关的辅助函数：
+
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | showDialog | 展示弹窗 | _options: DialogOptions_ | `Promise<void>` |
@@ -156,7 +158,7 @@ export default {
 
 ### DialogOptions
 
-通过函数调用 `Dialog` 时，支持传入以下选项：
+调用 `showDialog` 等方法时，支持传入以下选项：
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -195,7 +197,7 @@ export default {
 | title | 标题 | _string_ | - |
 | width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
 | message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.Element_ | - |
-| message-align | 内容水平对齐方式，可选值为 `left` `right` | _string_ | `center` |
+| message-align | 内容水平对齐方式，可选值为 `left` `right` `justify` | _string_ | `center` |
 | theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
 | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
 | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |

packages/vant/src/dialog/demo/index.vue

@@ -17,7 +17,7 @@ const t = useTranslate({
       '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
     beforeClose: '异步关闭',
     roundButton: '圆角按钮样式',
-    componentCall: '组件调用',
+    useComponent: '使用 Dialog 组件',
   },
   'en-US': {
     title: 'Title',
@@ -29,7 +29,7 @@ const t = useTranslate({
     content3: 'Content',
     beforeClose: 'Before Close',
     roundButton: 'Round Button Style',
-    componentCall: 'Component Call',
+    useComponent: 'Use Dialog Component',
   },
 });
 
@@ -101,8 +101,8 @@ const onClickBeforeClose = () => {
     <van-cell is-link :title="t('beforeClose')" @click="onClickBeforeClose" />
   </demo-block>
 
-  <demo-block card :title="t('componentCall')">
-    <van-cell is-link :title="t('componentCall')" @click="show = true" />
+  <demo-block card :title="t('useComponent')">
+    <van-cell is-link :title="t('useComponent')" @click="show = true" />
     <van-dialog
       v-model:show="show"
       :title="t('title')"

packages/vant/src/dialog/index.less

@@ -82,6 +82,10 @@ body {
     &--right {
       text-align: right;
     }
+
+    &--justify {
+      text-align: justify;
+    }
   }
 
   &__footer {

packages/vant/src/dialog/index.ts

@@ -3,6 +3,7 @@ import _Dialog from './Dialog';
 
 export const Dialog = withInstall(_Dialog);
 export default Dialog;
+export { dialogProps } from './Dialog';
 export {
   showDialog,
   closeDialog,

packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap

@@ -86,7 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-cell__title">
       <span>
-        Component Call
+        Use Dialog Component
       </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">

packages/vant/src/dialog/types.ts

@@ -4,7 +4,7 @@ import type { Interceptor, Numeric } from '../utils';
 export type DialogTheme = 'default' | 'round-button';
 export type DialogAction = 'confirm' | 'cancel';
 export type DialogMessage = string | (() => JSX.Element);
-export type DialogMessageAlign = 'left' | 'center' | 'right';
+export type DialogMessageAlign = 'left' | 'center' | 'right' | 'justify';
 
 export type DialogOptions = {
   title?: string;

packages/vant/src/divider/Divider.tsx

@@ -5,7 +5,7 @@ const [name, bem] = createNamespace('divider');
 
 export type DividerContentPosition = 'left' | 'center' | 'right';
 
-const dividerProps = {
+export const dividerProps = {
   dashed: Boolean,
   hairline: truthProp,
   contentPosition: makeStringProp<DividerContentPosition>('center'),

packages/vant/src/divider/index.ts

@@ -3,6 +3,7 @@ import _Divider from './Divider';
 
 export const Divider = withInstall(_Divider);
 export default Divider;
+export { dividerProps } from './Divider';
 export type { DividerProps, DividerContentPosition } from './Divider';
 
 declare module 'vue' {

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

@@ -32,7 +32,7 @@ import type { DropdownItemOption } from './types';
 
 const [name, bem] = createNamespace('dropdown-item');
 
-const dropdownItemProps = {
+export const dropdownItemProps = {
   title: String,
   options: makeArrayProp<DropdownItemOption>(),
   disabled: Boolean,

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

@@ -3,6 +3,7 @@ import _DropdownItem, { DropdownItemProps } from './DropdownItem';
 
 export const DropdownItem = withInstall(_DropdownItem);
 export default DropdownItem;
+export { dropdownItemProps } from './DropdownItem';
 export type { DropdownItemProps };
 export type { DropdownItemInstance, DropdownItemOption } from './types';
 

packages/vant/src/dropdown-menu/DropdownMenu.tsx

@@ -35,7 +35,7 @@ import type { DropdownMenuProvide, DropdownMenuDirection } from './types';
 
 const [name, bem] = createNamespace('dropdown-menu');
 
-const dropdownMenuProps = {
+export const dropdownMenuProps = {
   overlay: truthProp,
   zIndex: numericProp,
   duration: makeNumericProp(0.2),

packages/vant/src/dropdown-menu/index.ts

@@ -3,6 +3,7 @@ import _DropdownMenu, { DropdownMenuProps } from './DropdownMenu';
 
 export const DropdownMenu = withInstall(_DropdownMenu);
 export default DropdownMenu;
+export { dropdownMenuProps } from './DropdownMenu';
 export type { DropdownMenuProps };
 export type { DropdownMenuDirection } from './types';
 

packages/vant/src/empty/Empty.tsx

@@ -9,7 +9,7 @@ import {
 
 const [name, bem] = createNamespace('empty');
 
-const emptyProps = {
+export const emptyProps = {
   image: makeStringProp('default'),
   imageSize: [Number, String, Array] as PropType<Numeric | [Numeric, Numeric]>,
   description: String,

packages/vant/src/empty/index.ts

@@ -3,6 +3,7 @@ import _Empty from './Empty';
 
 export const Empty = withInstall(_Empty);
 export default Empty;
+export { emptyProps } from './Empty';
 export type { EmptyProps } from './Empty';
 
 declare module 'vue' {

packages/vant/src/field/Field.tsx

@@ -105,7 +105,7 @@ export const fieldSharedProps = {
   },
 };
 
-const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
+export const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
   rows: numericProp,
   type: makeStringProp<FieldType>('text'),
   rules: Array as PropType<FieldRule[]>,

packages/vant/src/field/index.ts

@@ -3,6 +3,7 @@ import _Field, { FieldProps } from './Field';
 
 export const Field = withInstall(_Field);
 export default Field;
+export { fieldProps } from './Field';
 export type { FieldProps };
 export type {
   FieldType,

packages/vant/src/form/Form.tsx

@@ -24,7 +24,7 @@ import type { FormExpose } from './types';
 
 const [name, bem] = createNamespace('form');
 
-const formProps = {
+export const formProps = {
   colon: Boolean,
   disabled: Boolean,
   readonly: Boolean,

packages/vant/src/form/index.ts

@@ -3,6 +3,7 @@ import _Form, { FormProps } from './Form';
 
 export const Form = withInstall(_Form);
 export default Form;
+export { formProps } from './Form';
 export type { FormProps };
 export type { FormInstance } from './types';
 

packages/vant/src/grid-item/GridItem.tsx

@@ -26,7 +26,7 @@ import { Badge, type BadgeProps } from '../badge';
 
 const [name, bem] = createNamespace('grid-item');
 
-const gridItemProps = extend({}, routeProps, {
+export const gridItemProps = extend({}, routeProps, {
   dot: Boolean,
   text: String,
   icon: String,

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

@@ -3,6 +3,7 @@ import _GridItem from './GridItem';
 
 export const GridItem = withInstall(_GridItem);
 export default GridItem;
+export { gridItemProps } from './GridItem';
 export type { GridItemProps } from './GridItem';
 
 declare module 'vue' {

packages/vant/src/grid/Grid.tsx

@@ -18,7 +18,7 @@ const [name, bem] = createNamespace('grid');
 
 export type GridDirection = 'horizontal' | 'vertical';
 
-const gridProps = {
+export const gridProps = {
   square: Boolean,
   center: truthProp,
   border: truthProp,

packages/vant/src/grid/index.ts

@@ -3,6 +3,7 @@ import _Grid from './Grid';
 
 export const Grid = withInstall(_Grid);
 export default Grid;
+export { gridProps } from './Grid';
 export type { GridProps, GridDirection } from './Grid';
 
 declare module 'vue' {

packages/vant/src/icon/Icon.tsx

@@ -18,7 +18,7 @@ const [name, bem] = createNamespace('icon');
 
 const isImage = (name?: string) => name?.includes('/');
 
-const iconProps = {
+export const iconProps = {
   dot: Boolean,
   tag: makeStringProp<keyof HTMLElementTagNameMap>('i'),
   name: String,

packages/vant/src/icon/index.ts

@@ -3,6 +3,7 @@ import _Icon from './Icon';
 
 export const Icon = withInstall(_Icon);
 export default Icon;
+export { iconProps } from './Icon';
 export type { IconProps } from './Icon';
 
 declare module 'vue' {

packages/vant/src/image-preview/ImagePreview.tsx

@@ -48,7 +48,7 @@ const popupProps = [
   'closeOnPopstate',
 ] as const;
 
-const imagePreviewProps = {
+export const imagePreviewProps = {
   show: Boolean,
   loop: truthProp,
   images: makeArrayProp<string>(),

packages/vant/src/image-preview/README.md

@@ -105,7 +105,7 @@ setTimeout(() => {
 }, 2000);
 ```
 
-### Component Call
+### Use ImagePreview Component
 
 ```html
 <van-image-preview v-model:show="show" :images="images" @change="onChange">
@@ -140,7 +140,15 @@ export default {
 
 ## API
 
-### Options
+### Methods
+
+Vant exports following ImagePreview utility functions:
+
+| Methods          | Description        | Attribute | Return value         |
+| ---------------- | ------------------ | --------- | -------------------- | --------------------- |
+| showImagePreview | Show image preview | `string[] | ImagePreviewOptions` | imagePreview Instance |
+
+### ImagePreviewOptions
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |

packages/vant/src/image-preview/README.zh-CN.md

@@ -114,9 +114,9 @@ setTimeout(() => {
 }, 2000);
 ```
 
-### 组件调用
+### 使用 ImagePreview 组件
 
-如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。
+如果需要在 ImagePreview 内嵌入组件或其他自定义内容，可以直接使用 ImagePreview 组件，并使用 `index` 插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
 
 ```html
 <van-image-preview v-model:show="show" :images="images" @change="onChange">
@@ -151,9 +151,17 @@ export default {
 
 ## API
 
-### Options
+### 方法
 
-通过函数调用 `showImagePreview` 时，支持传入以下选项：
+Vant 中导出了以下 ImagePreview 相关的辅助函数：
+
+| 方法名           | 说明         | 参数      | 返回值               |
+| ---------------- | ------------ | --------- | -------------------- | ----------------- |
+| showImagePreview | 展示图片预览 | `string[] | ImagePreviewOptions` | imagePreview 实例 |
+
+### ImagePreviewOptions
+
+调用 `showImagePreview` 方法时，支持传入以下选项：
 
 | 参数名 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |

packages/vant/src/image-preview/demo/index.vue

@@ -18,7 +18,7 @@ const t = useTranslate({
     closeEvent: '监听关闭事件',
     customConfig: '传入配置项',
     startPosition: '指定初始位置',
-    componentCall: '组件调用',
+    useComponent: '使用 ImagePreview 组件',
     index: (index: number) => `第${index + 1}页`,
   },
   'en-US': {
@@ -29,7 +29,7 @@ const t = useTranslate({
     closeEvent: 'Close Event',
     customConfig: 'Custom Config',
     startPosition: 'Set Start Position',
-    componentCall: 'Component Call',
+    useComponent: 'Use ImagePreview Component',
     index: (index: number) => `Page: ${index}`,
   },
 });
@@ -106,8 +106,8 @@ const showFunctionCall = (options: Partial<ImagePreviewOptions> = {}) => {
     />
   </demo-block>
 
-  <demo-block card :title="t('componentCall')">
-    <van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
+  <demo-block card :title="t('useComponent')">
+    <van-cell is-link :title="t('useComponent')" @click="showComponentCall" />
     <van-image-preview v-model:show="show" :images="images" @change="onChange">
       <template #index>{{ t('index', index) }}</template>
     </van-image-preview>

packages/vant/src/image-preview/index.ts

@@ -4,6 +4,7 @@ import type { ImagePreviewProps } from './ImagePreview';
 
 export const ImagePreview = withInstall(_ImagePreview);
 export default ImagePreview;
+export { imagePreviewProps } from './ImagePreview';
 export { showImagePreview } from './function-call';
 
 export type { ImagePreviewProps };

packages/vant/src/image/Image.tsx

@@ -38,12 +38,13 @@ export type ImagePosition =
   | 'left'
   | string;
 
-const imageProps = {
+export const imageProps = {
   src: String,
   alt: String,
   fit: String as PropType<ImageFit>,
   position: String as PropType<ImagePosition>,
   round: Boolean,
+  block: Boolean,
   width: numericProp,
   height: numericProp,
   radius: numericProp,
@@ -191,7 +192,10 @@ export default defineComponent({
     }
 
     return () => (
-      <div class={bem({ round: props.round })} style={style.value}>
+      <div
+        class={bem({ round: props.round, block: props.block })}
+        style={style.value}
+      >
         {renderImage()}
         {renderPlaceholder()}
         {slots.default?.()}