release: 4.0.10

* docs(Cascader): add china area data demo

* docs: upd

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 ### Before submitting a pull request, please make sure the following is done:
 
-1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md).
+1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/main/.github/CONTRIBUTING.md).
 2. If you've added code that should be tested, add tests.
 3. If you've changed APIs, update the documentation.
 4. Ensure the test suite passes (`npm test`).

.github/workflows/codeql-analysis.yml

@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ dev ]
+    branches: [ main ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ dev ]
+    branches: [ main ]
   schedule:
     - cron: '36 21 * * 2'
 

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

@@ -2,7 +2,7 @@ name: Deploy V4 Site
 
 on:
   push:
-    branches: [next]
+    branches: [main]
     paths:
       - 'packages/vant/docs/**'
 
@@ -15,14 +15,14 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
         with:
-          ref: 'next'
+          ref: 'main'
 
       - name: Install pnpm
         run: npm i pnpm@7 -g
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -31,10 +31,19 @@ jobs:
       - name: Build Site
         run: npm run build:site
 
-      - name: Deploy 🚀
+      - name: Deploy for Gitee 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.1
+        uses: JamesIves/github-pages-deploy-action@v4.4.0
         with:
           branch: gh-pages
           folder: packages/vant/site-dist
-          target-folder: v4
+          clean: false
+
+      - name: Deploy for GitHub 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.0
+        with:
+          branch: main
+          folder: packages/vant/site-dist
+          token: ${{ secrets.VANT_UI_TOKEN }}
+          repository-name: vant-ui/vant-ui.github.io
+          target-folder: vant
           clean: false

.github/workflows/sync-gitee.yml

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

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
 
   pull_request:
     branches:
-      - dev
+      - main
 
   workflow_dispatch:
 
@@ -22,7 +22,7 @@ jobs:
 
     - uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '18'
         cache: 'pnpm'
 
     - name: Install dependencies
@@ -41,7 +41,7 @@ jobs:
 
     - uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '18'
         cache: 'pnpm'
 
     - name: Install dependencies
@@ -65,7 +65,7 @@ jobs:
 
     - uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '18'
         cache: 'pnpm'
 
     - name: Install dependencies

.nvmrc

@@ -0,0 +1 @@
+lts/Hydrogen

README.md

@@ -8,10 +8,9 @@
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
@@ -37,9 +36,10 @@
 - 🍭 Support Tree Shaking
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
-- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
+- 🍭 Support Dark Mode
+- 🍭 Support Nuxt 3
 - 🍭 Support SSR
-- 🌍 Support i18n, built-in 20+ languages
+- 🌍 Support i18n, built-in 30+ languages
 
 ## Install
 
@@ -80,6 +80,10 @@ app.use(Button);
 
 See more in [Quickstart](https://vant-ui.github.io/vant#/en-US/quickstart).
 
+## Start On Visual Studio Code Web
+
+[https://github.dev/youzan/vant](https://github.dev/youzan/vant)
+
 ## Browser Support
 
 Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
@@ -92,16 +96,15 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 | --- | --- |
 | [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
-| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
-| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
 
 ## Community Ecosystem
 
 | Project | Description |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@@ -112,7 +115,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 - [Documentation](https://vant-ui.github.io/vant)
 - [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
-- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
+- [Discussions](https://github.com/vant-ui/vant/discussions)
 
 ## Preview
 

README.zh-CN.md

@@ -8,10 +8,9 @@
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
@@ -41,9 +40,10 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 - 🍭 支持主题定制，内置 700+ 个主题变量
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
-- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
+- 🍭 支持深色模式
+- 🍭 支持 Nuxt 3
 - 🍭 支持服务器端渲染
-- 🌍 支持国际化，内置 20+ 种语言包
+- 🌍 支持国际化，内置 30+ 种语言包
 
 ## 安装
 
@@ -84,6 +84,10 @@ app.use(Button);
 
 vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://vant-contrib.gitee.io/vant#/zh-CN/quickstart).
 
+## 在 Cloud IDE 中预览
+
+[https://idegithub.com/youzan/vant](https://idegithub.com/youzan/vant)
+
 ## 浏览器支持
 
 Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
@@ -98,9 +102,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | --- | --- |
 | [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
-| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
-| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
 
 ## 社区生态
 
@@ -109,7 +113,6 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | 项目 | 描述 |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 框架移动端组件库 |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@@ -120,7 +123,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 - [详细文档](https://vant-contrib.gitee.io/vant)
 - [更新日志](https://vant-contrib.gitee.io/vant#/zh-CN/changelog)
-- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
+- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
+- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
 
 ## 手机预览
 

package.json

@@ -14,24 +14,16 @@
     "*.{ts,tsx,js,vue,less}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix"
   },
-  "packageManager": "pnpm@7.11.0",
+  "engines": {
+    "pnpm": ">= 7.0.0"
+  },
+  "packageManager": "pnpm@7.20.0",
   "devDependencies": {
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
-    "eslint": "^8.23.0",
+    "eslint": "^8.31.0",
     "husky": "^8.0.1",
     "nano-staged": "^0.8.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.7.1"
-    "rimraf": "^3.0.2"
-  },
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@algolia/client-search",
-        "@types/react",
-        "react",
-        "react-dom"
-      ]
-    }
   }
 }

packages/create-vant-cli-app/generators/vue3/.gitignore.tpl

@@ -15,5 +15,5 @@ test/coverage
 es
 lib
 dist
-site
+**/site-dist
 changelog.generated.md

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -31,7 +31,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vant/cli": "^4.0.0",
+    "@vant/cli": "^5.0.0",
     "vue": "^3.0.0",
     "sass": "^1.49.7"
   },

packages/create-vant-cli-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vant-cli-app",
-  "version": "2.0.1",
+  "version": "2.1.2",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {
@@ -32,15 +32,15 @@
   "license": "MIT",
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/inquirer": "^8.2.3",
     "release-it": "^15.4.1",
+    "rimraf": "^4.0.4",
     "typescript": "^4.8.2"
   },
   "dependencies": {
     "consola": "^2.11.3",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
-    "inquirer": "^8.2.4",
+    "enquirer": "2.3.6",
     "picocolors": "^1.0.0"
   },
   "release-it": {

packages/create-vant-cli-app/src/constant.ts

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join } from 'node:path';
 
 export const CWD = process.cwd();
 export const GENERATOR_DIR = join(__dirname, '../generators');

packages/create-vant-cli-app/src/generator.ts

@@ -2,30 +2,30 @@ import fs from 'fs-extra';
 import glob from 'fast-glob';
 import color from 'picocolors';
 import consola from 'consola';
-import { prompt } from 'inquirer';
+import { prompt } from 'enquirer';
-import { sep, join } from 'path';
+import { sep, join } from 'node:path';
 import { CWD, GENERATOR_DIR } from './constant';
 
 const PROMPTS = [
   {
     name: 'vueVersion',
     message: 'Select Vue version',
-    type: 'list',
+    type: 'select',
     choices: [
       {
-        name: 'Vue 2',
+        name: 'vue2',
-        value: 'vue2',
+        message: 'Vue 2',
       },
       {
-        name: 'Vue 3',
+        name: 'vue3',
-        value: 'vue3',
+        message: 'Vue 3',
       },
     ],
   },
   {
     name: 'preprocessor',
     message: 'Select css preprocessor',
-    type: 'list',
+    type: 'select',
     choices: ['Less', 'Sass'],
   },
 ];

packages/create-vant-cli-app/src/index.ts

@@ -1,20 +1,16 @@
 #!/usr/bin/env node
 
 import consola from 'consola';
-import { prompt } from 'inquirer';
+import { prompt } from 'enquirer';
 import { ensureDir } from 'fs-extra';
 import { VanGenerator } from './generator';
 
-const PROMPTS = [
+async function run() {
-  {
+  const { name } = await prompt<{ name: string }>({
     type: 'input',
     name: 'name',
     message: 'Your package name',
-  },
+  });
-];
-
-async function run() {
-  const { name } = await prompt(PROMPTS);
 
   try {
     await ensureDir(name);

packages/vant-area-data/README.md

@@ -1,6 +1,6 @@
-# Vant Area Data
+# Vant China Area Data
 
-中国省市区数据，适用于 Vant Area 组件。
+中国省市区数据，适用于 Vant 的 Area 和 Cascader 等组件。
 
 ## 安装
 
@@ -17,10 +17,20 @@ pnpm add @vant/area-data
 
 ## 使用
 
+在 Vant 的 Area 组件中使用时，直接引用 `areaList` 对象即可：
+
 ```ts
 import { areaList } from '@vant/area-data';
 ```
 
+在 Vant 的 Cascader 组件中使用时，请使用 `useCascaderAreaData` 方法：
+
+```ts
+import { useCascaderAreaData } from '@vant/area-data';
+
+const cascaderAreaData = useCascaderAreaData();
+```
+
 ## 数据更新
 
-中国的行政区划每年都会有变动，如果发现省市区数据未及时更新，欢迎提 Pull Request 帮助我们更新。
+中国的行政区划每年都会有变动，如果发现省市区数据未及时更新，欢迎提 Pull Request 帮助我们更新。你可以在[「国家统计局 - 全国区划代码」](http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/) 和[「民政部 - 行政区划代码」](https://www.mca.gov.cn/article/sj/xzqh/1980/)上查询到最新数据，请根据官方数据进行核实。

packages/vant-area-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/area-data",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Vant 省市区数据",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -11,6 +11,7 @@
       "require": "./dist/index.cjs.js"
     }
   },
+  "sideEffects": false,
   "files": [
     "dist"
   ],
@@ -36,8 +37,9 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.54",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
+    "rimraf": "^4.0.4",
     "typescript": "^4.8.2"
   },
   "release-it": {

packages/vant-area-data/src/index.ts

@@ -1,4 +1,8 @@
-export const areaList = {
+export const areaList: {
+  province_list: Record<string, string>;
+  city_list: Record<string, string>;
+  county_list: Record<string, string>;
+} = {
   province_list: {
     110000: '北京市',
     120000: '天津市',
@@ -3886,3 +3890,53 @@ export const areaList = {
     820204: '圣方济各堂区',
   },
 };
+
+type CascaderOption = {
+  text: string;
+  value: string;
+  children?: CascaderOption[];
+};
+
+const makeOption = (
+  text: string,
+  value: string,
+  children?: CascaderOption[]
+): CascaderOption => ({
+  text,
+  value,
+  children,
+});
+
+export function useCascaderAreaData() {
+  const {
+    city_list: city,
+    county_list: county,
+    province_list: province,
+  } = areaList;
+
+  const provinceMap = new Map<string, CascaderOption>();
+  Object.keys(province).forEach((code) => {
+    provinceMap.set(code.slice(0, 2), makeOption(province[code], code, []));
+  });
+
+  const cityMap = new Map<string, CascaderOption>();
+
+  Object.keys(city).forEach((code) => {
+    const option = makeOption(city[code], code, []);
+    cityMap.set(code.slice(0, 4), option);
+
+    const province = provinceMap.get(code.slice(0, 2));
+    if (province) {
+      province.children!.push(option);
+    }
+  });
+
+  Object.keys(county).forEach((code) => {
+    const city = cityMap.get(code.slice(0, 4));
+    if (city) {
+      city.children!.push(makeOption(county[code], code));
+    }
+  });
+
+  return Array.from(provinceMap.values());
+}

packages/vant-cli/README.md

@@ -65,7 +65,7 @@ Please add the followed config to `package.json` file.
 
 ## More Details
 
-- [cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.md)
+- [cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.md)
-- [config](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.md)
+- [config](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/config.md)
-- [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
+- [directory structure](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.md)
-- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
+- [CHANGELOG](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/changelog.md)

packages/vant-cli/README.zh-CN.md

@@ -62,7 +62,7 @@ pnpm add @vant/cli -D
 
 ## 详细文档
 
-- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
+- [命令](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.zh-CN.md)
-- [配置指南](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
+- [配置指南](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/config.zh-CN.md)
-- [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
+- [目录结构](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.zh-CN.md)
-- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
+- [更新日志](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/changelog.md)

packages/vant-cli/changelog.md

@@ -1,14 +1,43 @@
 # 更新日志
 
-## v5.0.0 (未发布)
+## v6.0.0 [unreleased]
+
+- vite: 由 v3 升级至 v4
+- @vitejs/plugin-vue: 由 v3 升级至 v4
+- @vitejs/plugin-vue-jsx: 由 v2 升级至 v3
+- 移除 `site.searchConfig` 配置项
+
+## v5.1.0
+
+`2022-11-05`
+
+- 支持读取 `vite.config.ts` 文件来自定义 vite 配置
+- 修复设置 vite 的 `server.port` 配置项不生效的问题
+
+## v5.0.2
+
+`2022-10-07`
+
+- 修复首次运行 dev 时 vite 引入了两份 Vue 代码导致渲染失败的问题
+
+## v5.0.1
+
+`2022-10-06`
+
+- 修复 jest 版本未正确升级的问题
+
+## v5.0.0
 
 ### 依赖升级
 
+`2022-10-06`
+
 对以下依赖进行了大版本升级：
 
-- vite v3
+- vite: 由 v2 升级至 v3
-- @vitejs/plugin-vue v3
+- jest: 由 v27 升级至 v29
-- @vitejs/plugin-vue-jsx v2
+- @vitejs/plugin-vue: 由 v2 升级至 v3
+- @vitejs/plugin-vue-jsx: 由 v1 升级至 v2
 
 ### 依赖精简
 

packages/vant-cli/cjs/jest.config.cjs

@@ -29,6 +29,10 @@ const DEFAULT_CONFIG = {
   ],
   coverageReporters: ['html', 'lcov', 'text-summary'],
   coverageDirectory: './test/coverage',
+  testEnvironmentOptions: {
+    // https://stackoverflow.com/questions/72428323/jest-referenceerror-vue-is-not-defined
+    customExportConditions: ['node', 'node-addons'],
+  },
 };
 
 function readRootConfig() {

packages/vant-cli/cjs/jest.transformer.cjs

@@ -87,6 +87,8 @@ module.exports = {
     if (isJsxFile(path)) {
       code = transformJsx(code, path);
     }
-    return transformScript(code);
+    return {
+      code: transformScript(code)
+    };
   },
 };

packages/vant-cli/docs/commands.md

@@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
 
 Build Vue component library.
 
-Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
+Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.md)
 
 Please add the followed config to `package.json` when publish to npm.
 

packages/vant-cli/docs/commands.zh-CN.md

@@ -31,7 +31,7 @@ npx vant-cli dev
 
 构建组件库。
 
-运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
+运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.zh-CN.md)。
 
 发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
 

packages/vant-cli/docs/config.md

@@ -16,7 +16,6 @@
     - [site.nav](#sitenav)
     - [site.versions](#siteversions)
     - [site.baiduAnalytics](#sitebaiduanalytics)
-    - [site.searchConfig](#sitesearchconfig)
     - [site.hideSimulator](#sitehidesimulator)
     - [site.simulator.url](#sitesimulatorurl)
     - [site.htmlMeta](#sitehtmlmeta)
@@ -177,17 +176,16 @@ When set to `true`, `export * from 'xxx'` will be used to export all modules and
 
 ### build.configureVite
 
-- Type: `(config: InlineConfig): InlineConfig`
+- Type: `(config: InlineConfig): InlineConfig | undefined`
 - Default: `undefined`
 
-Custom vite config(`@vant/cli>= 4.0.0`)
+Custom [vite config](https://vitejs.dev/config/), requires `@vant/cli>= 4.0.0`.
 
 ```js
 module.exports = {
   build: {
     configureVite(config) {
-      // add vite plugin
+      config.server.port = 3000;
-      config.plugins.push(vitePluginXXX);
       return config;
     },
   },
@@ -214,6 +212,10 @@ module.exports = {
 };
 ```
 
+Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code.
+
+If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0).
+
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm'`
@@ -352,13 +354,6 @@ module.exports = {
 };
 ```
 
-### site.searchConfig
-
-- Type: `object`
-- Default: `undefined`
-
-Documentation site search config. Based on [docsearch](https://docsearch.algolia.com/docs/behavior) of algolia.
-
 ### site.hideSimulator
 
 - Type: `boolean`

packages/vant-cli/docs/config.zh-CN.md

@@ -16,7 +16,6 @@
     - [site.nav](#sitenav)
     - [site.versions](#siteversions)
     - [site.baiduAnalytics](#sitebaiduanalytics)
-    - [site.searchConfig](#sitesearchconfig)
     - [site.hideSimulator](#sitehidesimulator)
     - [site.simulator.url](#sitesimulatorurl)
     - [site.htmlMeta](#sitehtmlmeta)
@@ -177,17 +176,16 @@ module.exports = {
 
 ### build.configureVite
 
-- Type: `(config: InlineConfig): InlineConfig`
+- Type: `(config: InlineConfig): InlineConfig | undefined`
 - Default: `undefined`
 
-vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。
+vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)（从 4.0.0 版本开始支持）。
 
 ```js
 module.exports = {
   build: {
     configureVite(config) {
-      // 添加一个自定义插件
+      config.server.port = 3000;
-      config.plugins.push(vitePluginXXX);
       return config;
     },
   },
@@ -216,6 +214,10 @@ module.exports = {
 };
 ```
 
+注意，由于 `vant.config.mjs` 文件会被打包到文档网站的代码中，因此 `configureVite` 中不允许引用 vite 插件。
+
+如果需要配置 vite 插件，可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件，在该文件中你可以添加任意的 vite 配置（该特性从 @vant/cli 5.1.0 版本开始支持）。
+
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm'`
@@ -354,15 +356,6 @@ module.exports = {
 };
 ```
 
-### site.searchConfig
-
-- Type: `object`
-- Default: `undefined`
-
-文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。
-
-配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
-
 ### site.hideSimulator
 
 - Type: `boolean`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.4",
+  "version": "5.1.0",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -39,41 +39,41 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "@jest/types": "^27.5.1",
+    "@jest/types": "^29.1.2",
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
+    "@types/lodash": "^4.14.191",
     "@types/markdown-it": "^12.2.3",
-    "react": "^18.2.0",
+    "rimraf": "^4.0.4",
-    "react-dom": "^18.2.0",
+    "vue": "^3.2.45"
-    "vue": "^3.2.38"
   },
   "dependencies": {
     "@babel/core": "^7.18.13",
     "@babel/preset-typescript": "^7.18.6",
-    "@docsearch/css": "^3.2.1",
+    "@types/jest": "^29.1.1",
-    "@docsearch/js": "^3.2.1",
-    "@types/jest": "^27.5.2",
     "@vant/eslint-config": "^3.5.0",
     "@vant/touch-emulator": "^1.4.0",
-    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "autoprefixer": "^10.4.8",
     "commander": "^9.4.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.25",
-    "esbuild": "^0.14.54",
+    "esbuild": "^0.16.10",
-    "eslint": "^8.23.0",
+    "eslint": "^8.31.0",
-    "execa": "^5.1.1",
+    "execa": "^6.1.0",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
     "highlight.js": "^11.6.0",
     "husky": "^8.0.1",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
     "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.1.2",
     "jest-serializer-html": "^7.1.0",
     "less": "^4.1.3",
+    "lodash": "^4.17.21",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^8.6.4",
     "nano-staged": "^0.8.0",
@@ -83,10 +83,10 @@
     "postcss-load-config": "^3.1.4",
     "prettier": "^2.7.1",
     "release-it": "^15.4.1",
+    "terser": "^5.16.1",
     "transliteration": "^2.3.5",
     "typescript": "^4.8.2",
-    "vite": "^3.0.9",
+    "vite": "^4.0.3",
-    "vite-plugin-html": "^2.1.2",
     "vite-plugin-md": "^0.11.9",
     "vue-router": "^4.1.5"
   },

packages/vant-cli/site/common/style/highlight.less

@@ -15,6 +15,13 @@ code {
   border-radius: var(--van-doc-border-radius);
 }
 
+p {
+  code {
+    display: inline-flex;
+    padding: 4px 10px;
+  }
+}
+
 pre {
   margin: 20px 0 0;
 

packages/vant-cli/site/common/style/vars.less

@@ -1,4 +1,4 @@
-body {
+:root {
   // colors
   --van-doc-black: #000;
   --van-doc-white: #fff;
@@ -14,7 +14,7 @@ body {
   --van-doc-green: #07c160;
 
   // sizes
-  --van-doc-padding: 24px;
+  --van-doc-padding: 32px;
   --van-doc-row-max-width: 1680px;
   --van-doc-nav-width: 220px;
   --van-doc-border-radius: 20px;
@@ -44,7 +44,7 @@ body {
   --van-doc-code-background: var(--van-doc-gray-1);
 
   // blockquote
-  --van-doc-blockquote-color: #4994df;
+  --van-doc-blockquote-color: #2f85da;
   --van-doc-blockquote-background: #ecf9ff;
 }
 

packages/vant-cli/site/desktop/components/Content.vue

@@ -83,8 +83,8 @@ export default {
 
 <style lang="less">
 .van-doc-card {
-  margin-bottom: 24px;
+  margin-bottom: var(--van-doc-padding);
-  padding: 24px;
+  padding: 28px 28px 32px;
   background-color: var(--van-doc-background-2);
   border-radius: var(--van-doc-border-radius);
   overflow: auto;
@@ -185,7 +185,7 @@ export default {
   }
 
   > p {
-    margin-top: 8px;
+    margin-top: 16px;
     color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
@@ -253,7 +253,7 @@ export default {
   }
 
   > ul {
-    margin: 12px 0;
+    margin: 16px 0 0;
   }
 
   > ul li,
@@ -303,7 +303,8 @@ export default {
   > blockquote {
     margin: 16px 0 0;
     padding: 16px;
-    font-size: 14px;
+    font-size: 15px;
+    line-height: 26px;
     color: var(--van-doc-blockquote-color);
     background-color: var(--van-doc-blockquote-background);
     border-radius: var(--van-doc-border-radius);
@@ -312,7 +313,7 @@ export default {
   > img,
   > p img {
     width: 100%;
-    margin: 16px 0;
+    margin: 16px 0 0;
     border-radius: var(--van-doc-border-radius);
   }
 }
@@ -323,7 +324,7 @@ export default {
   padding: 0 0 75px;
 
   .van-doc-markdown-body {
-    padding: 24px;
+    padding: var(--van-doc-padding);
     overflow: hidden;
 
     h1,
@@ -343,7 +344,7 @@ export default {
     }
 
     h2 {
-      margin: 45px 0 20px;
+      margin: 52px 0 20px;
       font-size: 26px;
     }
   }

packages/vant-cli/site/desktop/components/Header.vue

@@ -64,12 +64,6 @@
               {{ langLabel }}
             </a>
           </li>
-
-          <search-input
-            v-if="searchConfig"
-            :lang="lang"
-            :search-config="searchConfig"
-          />
         </ul>
       </div>
     </div>
@@ -77,17 +71,12 @@
 </template>
 
 <script>
-import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
 import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
 
-  components: {
-    SearchInput,
-  },
-
   props: {
     lang: String,
     config: Object,
@@ -122,10 +111,6 @@ export default {
       return {};
     },
 
-    searchConfig() {
-      return this.config.searchConfig;
-    },
-
     themeImg() {
       if (this.currentTheme === 'light') {
         return 'https://b.yzcdn.cn/vant/dark-theme.svg';
@@ -138,8 +123,8 @@ export default {
     currentTheme: {
       handler(newVal, oldVal) {
         window.localStorage.setItem('vantTheme', newVal);
-        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
-        document.body.classList.add(`van-doc-theme-${newVal}`);
+        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
         syncThemeToChild(newVal);
       },
       immediate: true,
@@ -187,6 +172,8 @@ export default {
   width: 100%;
   background-color: var(--van-doc-header-background);
   user-select: none;
+  position: relative;
+  z-index: 2;
 
   &__top {
     display: flex;

packages/vant-cli/site/desktop/components/Nav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-doc-nav" :style="style">
+  <div :class="['van-doc-nav', { 'van-doc-nav-fixed': isFixed }]">
     <div
       v-for="(group, index) in navConfig"
       class="van-doc-nav__group"
@@ -38,19 +38,11 @@ export default {
 
   data() {
     return {
-      top: 64,
+      isFixed: false,
-      bottom: 0,
     };
   },
 
   computed: {
-    style() {
-      return {
-        top: this.top + 'px',
-        bottom: this.bottom + 'px',
-      };
-    },
-
     base() {
       return this.lang ? `/${this.lang}/` : '/';
     },
@@ -64,7 +56,7 @@ export default {
   methods: {
     onScroll() {
       const { pageYOffset: offset } = window;
-      this.top = Math.max(0, 64 - offset);
+      this.isFixed = offset > 64;
     },
   },
 };
@@ -72,8 +64,10 @@ export default {
 
 <style lang="less">
 .van-doc-nav {
-  position: fixed;
+  position: absolute;
   left: 0;
+  top: var(--van-doc-header-top-height);
+  bottom: 0;
   z-index: 1;
   min-width: var(--van-doc-nav-width);
   max-width: var(--van-doc-nav-width);
@@ -86,6 +80,10 @@ export default {
     margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
   }
 
+  &.van-doc-nav-fixed {
+    position: fixed;
+    top: 0;
+  }
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -110,14 +108,14 @@ export default {
     padding: 24px 0 0 var(--van-doc-padding);
     color: var(--van-doc-text-color-2);
     font-weight: 600;
-    font-size: 15px;
+    font-size: 16px;
     line-height: 28px;
   }
 
   &__item {
     a {
       display: block;
-      margin: 8px 0;
+      margin: 4px 0;
       padding: 6px 0 6px var(--van-doc-padding);
       color: var(--van-doc-text-color-3);
       font-size: 14px;

packages/vant-cli/site/desktop/components/SearchInput.vue

@@ -1,63 +0,0 @@
-<template>
-  <div id="docsearch" />
-</template>
-
-<script>
-export default {
-  name: 'VanDocSearch',
-
-  props: {
-    lang: String,
-    searchConfig: Object,
-  },
-
-  watch: {
-    lang() {
-      this.initDocsearch();
-    },
-  },
-
-  mounted() {
-    this.initDocsearch();
-  },
-
-  methods: {
-    initDocsearch() {
-      if (this.searchConfig) {
-        import('@docsearch/css');
-        import('@docsearch/js').then((docsearch) => {
-          docsearch.default({
-            ...this.searchConfig,
-            container: '#docsearch',
-          });
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less">
-#docsearch {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.DocSearch-Button {
-  height: 32px;
-  background: #f7f8fa;
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.DocSearch-Search-Icon {
-  width: 18px;
-  height: 18px;
-}
-
-.DocSearch-Button-Key {
-  font-size: 12px;
-}
-</style>

packages/vant-cli/site/index.html

@@ -11,12 +11,12 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
     />
-    <%- meta %>
+    <%= meta %>
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <% if (headHtml) { %>
-      <%- headHtml %>
+      <%= headHtml %>
     <% } %>
     <% if (baiduAnalytics) { %>
     <script>

packages/vant-cli/site/mobile.html

@@ -11,12 +11,12 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
     />
-    <%- meta %>
+    <%= meta %>
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <% if (headHtml) { %>
-      <%- headHtml %>
+      <%= headHtml %>
     <% } %>
     <% if (enableVConsole) { %>
     <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>

packages/vant-cli/site/mobile/App.vue

@@ -1,11 +1,11 @@
 <template>
   <demo-nav />
   <router-view v-slot="{ Component }">
-    <keep-alive>
+    <demo-section>
-      <demo-section>
+      <keep-alive>
         <component :is="Component" />
-      </demo-section>
+      </keep-alive>
-    </keep-alive>
+    </demo-section>
   </router-view>
 </template>
 
@@ -24,12 +24,21 @@ export default {
     watch(
       theme,
       (newVal, oldVal) => {
-        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
-        document.body.classList.add(`van-doc-theme-${newVal}`);
+        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
 
-        const { darkModeClass } = config.site;
+        const { darkModeClass, lightModeClass } = config.site;
         if (darkModeClass) {
-          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+          document.documentElement.classList.toggle(
+            darkModeClass,
+            newVal === 'dark'
+          );
+        }
+        if (lightModeClass) {
+          document.documentElement.classList.toggle(
+            lightModeClass,
+            newVal === 'light'
+          );
         }
       },
       { immediate: true }
@@ -43,6 +52,7 @@ export default {
 
 body {
   min-width: 100vw;
+  background-color: inherit;
 }
 
 .van-doc-theme-light {

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -93,6 +93,7 @@ export default {
     margin: 0 0 40px;
     color: var(--van-doc-text-color-4);
     font-size: 14px;
+    line-height: 1.6;
   }
 }
 </style>

packages/vant-cli/src/commands/build.ts

@@ -1,6 +1,6 @@
 import fse from 'fs-extra';
-import execa from 'execa';
+import { execa } from 'execa';
-import { join, relative } from 'path';
+import { join, relative } from 'node:path';
 import { clean } from './clean.js';
 import { CSS_LANG } from '../common/css.js';
 import { createSpinner, consola } from '../common/logger.js';

packages/vant-cli/src/commands/changelog.ts

@@ -1,8 +1,8 @@
-import { join, dirname } from 'path';
+import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath } from 'node:url';
 import { ROOT } from '../common/constant.js';
 import { createSpinner, slimPath } from '../common/logger.js';
-import { createWriteStream, readFileSync } from 'fs';
+import { createWriteStream, readFileSync } from 'node:fs';
 import conventionalChangelog from 'conventional-changelog';
 
 const DIST_FILE = join(ROOT, './changelog.generated.md');

packages/vant-cli/src/commands/commit-lint.ts

@@ -1,4 +1,4 @@
-import { readFileSync } from 'fs';
+import { readFileSync } from 'node:fs';
 import { consola } from '../common/logger.js';
 
 const commitRE =

packages/vant-cli/src/commands/lint.ts

@@ -1,4 +1,4 @@
-import execa from 'execa';
+import { execa } from 'execa';
 import { consola, createSpinner } from '../common/logger.js';
 import { SCRIPT_EXTS } from '../common/constant.js';
 
@@ -18,7 +18,7 @@ function runCommand(
   return new Promise((resolve) => {
     execa(cmd, options, {
       preferLocal: true,
-      env: { FORCE_COLOR: true },
+      env: { FORCE_COLOR: 'true' },
     })
       .then(() => {
         spinner.success({ text: messages.succeed });

packages/vant-cli/src/commands/release.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-template-curly-in-string */
 import releaseIt from 'release-it';
-import { join, dirname } from 'path';
+import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath } from 'node:url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');

packages/vant-cli/src/common/constant.ts

@@ -1,6 +1,6 @@
-import { existsSync, readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'node:fs';
-import { fileURLToPath, pathToFileURL } from 'url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
-import { join, dirname, isAbsolute } from 'path';
+import { join, dirname, isAbsolute } from 'node:path';
 
 function findRootDir(dir: string): string {
   if (existsSync(join(dir, 'vant.config.mjs'))) {

packages/vant-cli/src/common/css.ts

@@ -1,5 +1,5 @@
-import { existsSync } from 'fs';
+import { existsSync } from 'node:fs';
-import { join, isAbsolute } from 'path';
+import { join, isAbsolute } from 'node:path';
 import { getVantConfig } from '../common/index.js';
 import { STYLE_DIR, SRC_DIR } from './constant.js';
 

packages/vant-cli/src/common/index.ts

@@ -1,7 +1,7 @@
 import fse from 'fs-extra';
-import { sep, join } from 'path';
+import { sep, join } from 'node:path';
 import { SRC_DIR, getVantConfig } from './constant.js';
-import type { InlineConfig } from 'vite';
+import { InlineConfig, loadConfigFromFile, mergeConfig } from 'vite';
 
 const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } =
   fse;
@@ -114,13 +114,33 @@ export function smartOutputFile(filePath: string, content: string) {
   outputFileSync(filePath, content);
 }
 
-export function mergeCustomViteConfig(config: InlineConfig) {
+export async function mergeCustomViteConfig(
+  config: InlineConfig,
+  mode: 'production' | 'development'
+): Promise<InlineConfig> {
   const vantConfig = getVantConfig();
   const configureVite = vantConfig.build?.configureVite;
 
+  const userConfig = await loadConfigFromFile(
+    {
+      mode,
+      command: mode === 'development' ? 'serve' : 'build',
+    },
+    undefined,
+    process.cwd()
+  );
+
   if (configureVite) {
-    return configureVite(config);
+    const ret = configureVite(config);
+    if (ret) {
+      config = ret;
+    }
   }
+
+  if (userConfig) {
+    return mergeConfig(config, userConfig.config);
+  }
+
   return config;
 }
 

packages/vant-cli/src/common/manager.ts

@@ -1,4 +1,4 @@
-import execa from 'execa';
+import { execa } from 'execa';
 import { consola } from './logger.js';
 import { execSync } from 'child_process';
 import { getVantConfig } from './constant.js';

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

@@ -34,8 +34,13 @@ export async function compileBundles() {
     getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
 
   await Promise.all(
-    bundleOptions.map((config) =>
+    bundleOptions.map(async (config) =>
-      build(mergeCustomViteConfig(getViteConfigForPackage(config)))
+      build(
+        await mergeCustomViteConfig(
+          getViteConfigForPackage(config),
+          'production'
+        )
+      )
     )
   );
 }

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

@@ -1,6 +1,6 @@
 import less from 'less';
-import { join } from 'path';
+import { join } from 'node:path';
-import { readFileSync } from 'fs';
+import { readFileSync } from 'node:fs';
 import { CWD } from '../common/constant.js';
 
 export async function compileLess(filePath: string) {

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

@@ -1,4 +1,4 @@
-import { createRequire } from 'module';
+import { createRequire } from 'node:module';
 
 const require = createRequire(import.meta.url);
 

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

@@ -1,7 +1,7 @@
 import fse from 'fs-extra';
 import babel from '@babel/core';
 import esbuild, { type Format } from 'esbuild';
-import { sep } from 'path';
+import { sep } from 'node:path';
 import { isJsx, replaceExt, getVantConfig } from '../common/index.js';
 import { replaceCSSImportExt } from '../common/css.js';
 import { replaceScriptImportExt } from './get-deps.js';

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

@@ -1,5 +1,5 @@
 import fse from 'fs-extra';
-import path from 'path';
+import path from 'node:path';
 import hash from 'hash-sum';
 import {
   parse,

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

@@ -1,5 +1,5 @@
 import color from 'picocolors';
-import { createRequire } from 'module';
+import { createRequire } from 'node:module';
 import { createServer, build } from 'vite';
 import {
   getViteConfigForSiteDev,
@@ -29,12 +29,18 @@ export function genSiteEntry(): Promise<void> {
 export async function compileSite(production = false) {
   await genSiteEntry();
   if (production) {
-    const config = mergeCustomViteConfig(getViteConfigForSiteProd());
+    const config = await mergeCustomViteConfig(
+      getViteConfigForSiteProd(),
+      'production'
+    );
     await build(config);
   } else {
-    const config = mergeCustomViteConfig(getViteConfigForSiteDev());
+    const config = await mergeCustomViteConfig(
+      getViteConfigForSiteDev(),
+      'development'
+    );
     const server = await createServer(config);
-    await server.listen();
+    await server.listen(config.server?.port);
 
     const require = createRequire(import.meta.url);
     const { version } = require('vite/package.json');

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

@@ -1,4 +1,4 @@
-import { parse } from 'path';
+import { parse } from 'node:path';
 import fse from 'fs-extra';
 import { getVantConfig, replaceExt } from '../common/index.js';
 import { compileCss } from './compile-css.js';

packages/vant-cli/src/compiler/gen-component-style.ts

@@ -3,8 +3,8 @@
  */
 
 import fse from 'fs-extra';
-import { createRequire } from 'module';
+import { createRequire } from 'node:module';
-import { sep, join, relative } from 'path';
+import { sep, join, relative } from 'node:path';
 import { getComponents, replaceExt } from '../common/index.js';
 import { CSS_LANG, getCssBaseFile } from '../common/css.js';
 import { checkStyleExists } from './gen-style-deps-map.js';

packages/vant-cli/src/compiler/gen-package-entry.ts

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import {
   pascalize,
   getComponents,

packages/vant-cli/src/compiler/gen-package-style.ts

@@ -1,6 +1,6 @@
-import { join } from 'path';
+import { join } from 'node:path';
-import { existsSync } from 'fs';
+import { existsSync } from 'node:fs';
-import { createRequire } from 'module';
+import { createRequire } from 'node:module';
 import { smartOutputFile, normalizePath } from '../common/index.js';
 import { CSS_LANG, getCssBaseFile } from '../common/css.js';
 import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';

packages/vant-cli/src/compiler/gen-site-desktop-shared.ts

@@ -1,12 +1,7 @@
 import glob from 'fast-glob';
-import { join, parse } from 'path';
+import { join, parse } from 'node:path';
-import { existsSync, readFileSync, readdirSync } from 'fs';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
-import {
+import { pascalize, getVantConfig, normalizePath } from '../common/index.js';
-  isDev,
-  pascalize,
-  getVantConfig,
-  normalizePath,
-} from '../common/index.js';
 import {
   SRC_DIR,
   DOCS_DIR,
@@ -80,10 +75,7 @@ function genImportDocuments(items: DocumentItem[]) {
   return items
     .map((item) => {
       const path = normalizePath(item.path);
-      if (isDev()) {
+      return `const ${item.name} = () => import('${path}');`;
-        return `const ${item.name} = () => import('${path}');`;
-      }
-      return `import ${item.name} from '${path}';`;
     })
     .join('\n');
 }

packages/vant-cli/src/compiler/gen-site-mobile-shared.ts

@@ -1,5 +1,5 @@
-import { join } from 'path';
+import { join } from 'node:path';
-import { existsSync, readdirSync } from 'fs';
+import { existsSync, readdirSync } from 'node:fs';
 import { SRC_DIR } from '../common/constant.js';
 import {
   pascalize,

packages/vant-cli/src/compiler/gen-style-deps-map.ts

@@ -1,6 +1,6 @@
-import { relative, sep, join } from 'path';
+import { relative, sep, join } from 'node:path';
 import { CSS_LANG } from '../common/css.js';
-import { existsSync } from 'fs';
+import { existsSync } from 'node:fs';
 import { getDeps, clearDepsCache, fillExt } from './get-deps.js';
 import { getComponents, smartOutputFile } from '../common/index.js';
 import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';

packages/vant-cli/src/compiler/get-deps.ts

@@ -1,6 +1,6 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import { SCRIPT_EXTS, STYLE_EXTS } from '../common/constant.js';
-import { readFileSync, existsSync } from 'fs';
+import { readFileSync, existsSync } from 'node:fs';
 
 let depsMap: Record<string, string[]> = {};
 let existsCache: Record<string, boolean> = {};

packages/vant-cli/src/compiler/web-types/formatter.ts

@@ -1,11 +1,6 @@
 /* eslint-disable no-continue */
 import { Articles } from './parser.js';
-import {
+import { formatType, removeVersion, toKebabCase } from './utils.js';
-  formatOptions,
-  formatType,
-  removeVersion,
-  toKebabCase,
-} from './utils.js';
 import { VueEventArgument, VueTag } from './type.js';
 
 function formatComponentName(name: string, tagPrefix: string) {
@@ -66,9 +61,6 @@ function findTag(vueTags: VueTag[], name: string) {
 
   const newTag: VueTag = {
     name,
-    slots: [],
-    events: [],
-    attributes: [],
   };
 
   vueTags.push(newTag);
@@ -107,12 +99,16 @@ export function formatter(
       const tag = findTag(vueTags, name);
 
       table.body.forEach((line) => {
-        const [name, desc, type, defaultVal, options] = line;
+        const [name, desc, type, defaultVal] = line;
-        tag.attributes!.push({
+
+        if (!tag.attributes) {
+          tag.attributes = [];
+        }
+
+        tag.attributes.push({
           name: removeVersion(name),
           default: defaultVal,
           description: desc,
-          options: formatOptions(options),
           value: {
             type: formatType(type),
             kind: 'expression',
@@ -128,7 +124,12 @@ export function formatter(
 
       table.body.forEach((line) => {
         const [name, desc, args] = line;
-        tag.events!.push({
+
+        if (!tag.events) {
+          tag.events = [];
+        }
+
+        tag.events.push({
           name: removeVersion(name),
           description: desc,
           arguments: formatArguments(args),
@@ -143,7 +144,12 @@ export function formatter(
 
       table.body.forEach((line) => {
         const [name, desc] = line;
-        tag.slots!.push({
+
+        if (!tag.slots) {
+          tag.slots = [];
+        }
+
+        tag.slots.push({
           name: removeVersion(name),
           description: desc,
         });

packages/vant-cli/src/compiler/web-types/index.ts

@@ -1,5 +1,5 @@
 import glob from 'fast-glob';
-import { join } from 'path';
+import { join } from 'node:path';
 import fse from 'fs-extra';
 import { mdParser } from './parser.js';
 import { formatter } from './formatter.js';
@@ -36,7 +36,7 @@ export async function parseAndWrite(options: Options) {
   const webTypes = genWebTypes(vueTags, options);
   fse.outputFileSync(
     join(options.outputDir, 'web-types.json'),
-    JSON.stringify(webTypes, null, 2)
+    JSON.stringify(webTypes)
   );
 }
 

packages/vant-cli/src/compiler/web-types/type.ts

@@ -1,4 +1,4 @@
-import { PathLike } from 'fs';
+import { PathLike } from 'node:fs';
 
 export type VueSlot = {
   name: string;
@@ -20,7 +20,6 @@ export type VueAttribute = {
   name: string;
   default: string;
   description: string;
-  options: string[];
   value: {
     kind: 'expression';
     type: string;

packages/vant-cli/src/compiler/web-types/utils.ts

@@ -20,9 +20,3 @@ export function formatType(type: string) {
 export function normalizePath(path: string): string {
   return path.replace(/\\/g, '/');
 }
-
-// `default` `primary` -> ['default', 'primary']
-export function formatOptions(options?: string) {
-  if (!options) return [];
-  return options.replace(/`/g, '').split(' ');
-}

packages/vant-cli/src/compiler/web-types/web-types.ts

@@ -12,8 +12,8 @@ export function genWebTypes(tags: VueTag[], options: Options) {
       html: {
         tags,
         attributes: [],
-        'types-syntax': 'typescript',
       },
     },
+    'js-types-syntax': 'typescript',
   };
 }

packages/vant-cli/src/config/vite.package.ts

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import { setBuildTarget } from '../common/index.js';
 import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
 import type { InlineConfig } from 'vite';
@@ -28,6 +28,8 @@ export function getViteConfigForPackage({
       : undefined,
 
     build: {
+      emptyOutDir: false,
+
       lib: {
         name,
         entry,

packages/vant-cli/src/config/vite.site.ts

@@ -1,12 +1,12 @@
-import { join } from 'path';
+import { join } from 'node:path';
-import { createRequire } from 'module';
+import { createRequire } from 'node:module';
 import hljs from 'highlight.js';
 import vitePluginMd from 'vite-plugin-md';
 import vitePluginVue from '@vitejs/plugin-vue';
 import vitePluginJsx from '@vitejs/plugin-vue-jsx';
 import { setBuildTarget, getVantConfig, isDev } from '../common/index.js';
 import { SITE_DIST_DIR, SITE_SRC_DIR } from '../common/constant.js';
-import { injectHtml } from 'vite-plugin-html';
+import lodash from 'lodash';
 import type { InlineConfig, PluginOption } from 'vite';
 import type MarkdownIt from 'markdown-it';
 import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
@@ -131,6 +131,18 @@ function vitePluginGenVantBaseCode(): PluginOption {
   };
 }
 
+function vitePluginHTML(data: object): PluginOption {
+  return {
+    name: 'vite-plugin-html',
+    transformIndexHtml: {
+      enforce: 'pre',
+      transform(html) {
+        return lodash.template(html)(data);
+      },
+    },
+  };
+}
+
 export function getViteConfigForSiteDev(): InlineConfig {
   setBuildTarget('site');
 
@@ -144,6 +156,11 @@ export function getViteConfigForSiteDev(): InlineConfig {
   return {
     root: SITE_SRC_DIR,
 
+    optimizeDeps: {
+      // https://github.com/youzan/vant/issues/10930
+      include: ['vue', 'vue-router'],
+    },
+
     plugins: [
       vitePluginGenVantBaseCode(),
       vitePluginVue({
@@ -172,18 +189,16 @@ export function getViteConfigForSiteDev(): InlineConfig {
         },
       }),
       vitePluginJsx(),
-      injectHtml({
+      vitePluginHTML({
-        data: {
+        ...siteConfig,
-          ...siteConfig,
+        title,
-          title,
+        // `description` is used by the HTML ejs template,
-          // `description` is used by the HTML ejs template,
+        // so it needs to be written explicitly here to avoid error: description is not defined
-          // so it needs to be written explicitly here to avoid error: description is not defined
+        description: siteConfig.description,
-          description: siteConfig.description,
+        headHtml,
-          headHtml,
+        baiduAnalytics,
-          baiduAnalytics,
+        enableVConsole,
-          enableVConsole,
+        meta: getHTMLMeta(vantConfig),
-          meta: getHTMLMeta(vantConfig),
-        },
       }),
     ],
 

packages/vant-cli/src/index.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
-import fs from 'fs';
+import fs from 'node:fs';
-import { URL, fileURLToPath } from 'url';
+import { URL, fileURLToPath } from 'node:url';
 
 const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
 const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));

packages/vant-cli/src/module.d.ts

@@ -1,5 +1,4 @@
 // some modules with missing type definitions
-declare module 'execa';
 declare module 'hash-sum';
 declare module '@babel/core';
 declare module 'release-it';

packages/vant-compat/package.json

@@ -38,9 +38,10 @@
   "devDependencies": {
     "@vue/runtime-core": "^3.2.27",
     "vant": "workspace:*",
-    "vue": "^3.2.27",
+    "vue": "^3.2.45",
-    "esbuild": "^0.14.29",
+    "esbuild": "^0.16.10",
     "release-it": "^15.1.1",
+    "rimraf": "^4.0.4",
     "typescript": "^4.7.4"
   },
   "release-it": {

packages/vant-eslint-config/package.json

@@ -20,16 +20,17 @@
   "author": "chenjiahan",
   "license": "MIT",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.36.1",
+    "@typescript-eslint/parser": "^5.48.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.4.0"
+    "eslint-plugin-vue": "^9.8.0"
   },
   "devDependencies": {
-    "enhanced-resolve": "^5.10.0",
+    "enhanced-resolve": "^5.12.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.31.0",
+    "jest": "^29.3.1",
     "typescript": "^4.8.2"
   },
   "peerDependencies": {

packages/vant-eslint-config/test/index.spec.js

@@ -24,7 +24,6 @@ test('a vue project should pass lint', async () => {
   expect([
     'no-const-assign',
     '@typescript-eslint/no-unused-vars',
-    'vue/multi-word-component-names',
     'no-undef',
   ]).toEqual(rest);
 });
@@ -34,7 +33,6 @@ test('a vue-tsx project should pass lint', async () => {
 
   expect([
     '@typescript-eslint/no-unused-vars',
-    'vue/multi-word-component-names',
     'vue/no-ref-as-operand',
     '@typescript-eslint/no-empty-interface',
   ]).toEqual(rest);

packages/vant-icons/CHANGELOG.md

@@ -1,5 +1,14 @@
 ## Changelog
 
+## 2.0.1
+
+- add woff format back to be compatible with some special webview
+
+## 2.0.0
+
+- no longer support woff/ttf format
+- fix delete / delete-o icon
+
 ## 1.8.0
 
 - add qq icon

packages/vant-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/icons",
-  "version": "1.8.0",
+  "version": "2.0.1",
   "description": "vant icons",
   "main": "./src/config.js",
   "types": "./src/config.d.ts",

packages/vant-icons/src/encode.less

@@ -1 +0,0 @@
-// deprecated

packages/vant-icons/src/index.less

@@ -5,10 +5,8 @@
   font-style: normal;
   font-display: auto;
   font-family: 'vant-icon';
-  src: url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952')
+  src: url('//at.alicdn.com/t/c/font_2553510_ovbl29ce9ud.woff2?t=1672541115585')
       format('woff2'),
-    url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff?t=1649083952952')
+    url('//at.alicdn.com/t/c/font_2553510_ovbl29ce9ud.woff?t=1672541115585')
-      format('woff'),
+      format('woff');
-    url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.ttf?t=1649083952952')
-      format('truetype');
 }

packages/vant-popperjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/popperjs",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Pre-compiled popperjs core",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -36,12 +36,11 @@
   "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
-  "dependencies": {
-    "@popperjs/core": "^2.11.6"
-  },
   "devDependencies": {
-    "esbuild": "^0.14.54",
+    "@popperjs/core": "^2.11.6",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
+    "rimraf": "^4.0.4",
     "typescript": "^4.8.2"
   },
   "release-it": {

packages/vant-popperjs/src/index.ts

@@ -1,6 +1,6 @@
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import offsetModifier from '@popperjs/core/lib/modifiers/offset';
-import type { Instance, Placement } from '@popperjs/core';
+import type { Instance } from '@popperjs/core';
 
 export { createPopper, offsetModifier };
-export type { Instance, Placement };
+export type { Instance };

packages/vant-use/changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v1.4.4
+
+- Fix `useChildren` not sort children correctly
+
+## v1.4.3
+
+- improve `useEventListener` typing
+
+## v1.4.2
+
+- `useClickAway` support multiple targets
+
 ## v1.4.1
 
 - Add `exports` field to package.json, support nuxt 3.

packages/vant-use/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/use",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Vant Composition API",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -37,10 +37,11 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.54",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
+    "rimraf": "^4.0.4",
     "typescript": "^4.8.2",
-    "vue": "^3.2.38"
+    "vue": "^3.2.45"
   },
   "release-it": {
     "git": {

packages/vant-use/src/useRelation/useChildren.ts

@@ -37,6 +37,20 @@ export function flattenVNodes(children: VNodeNormalizedChildren) {
   return result;
 }
 
+const findVNodeIndex = (vnodes: VNode[], vnode: VNode) => {
+  const index = vnodes.indexOf(vnode);
+  if (index === -1) {
+    return vnodes.findIndex(
+      (item) =>
+        vnode.key !== undefined &&
+        vnode.key !== null &&
+        item.type === vnode.type &&
+        item.key === vnode.key
+    );
+  }
+  return index;
+};
+
 // sort children instances by vnodes order
 export function sortChildren(
   parent: ComponentInternalInstance,
@@ -46,7 +60,7 @@ export function sortChildren(
   const vnodes = flattenVNodes(parent.subTree.children);
 
   internalChildren.sort(
-    (a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode)
+    (a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode)
   );
 
   const orderedPublicChildren = internalChildren.map((item) => item.proxy!);

packages/vant/.stylelintignore

@@ -1,4 +0,0 @@
-node_modules
-dist
-lib
-*.tsx

packages/vant/docs/markdown/advanced-usage.en-US.md

@@ -132,7 +132,7 @@ module.exports = {
 
 ### Adapt to PC Browsers
 
-Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
+Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
 
 ```bash
 # Install

packages/vant/docs/markdown/advanced-usage.zh-CN.md

@@ -197,7 +197,7 @@ module.exports = {
 
 Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 `touch` 事件，没有监听桌面端的 `mouse` 事件。
 
-如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件，使得组件能够在桌面端使用。
+如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator)，这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件，使得组件能够在桌面端使用。
 
 ```bash
 # 安装模块

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

@@ -19,6 +19,268 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
+### [v4.0.9](https://github.com/vant-ui/vant/compare/v4.0.8...v4.0.9)
+
+`2023-01-26`
+
+**Feature**
+
+- BackTop: add immediate prop [#11515](https://github.com/vant-ui/vant/issues/11515)
+- Calendar: add month-title slot [#11500](https://github.com/vant-ui/vant/issues/11500)
+- Cascader: add useCascaderAreaData method [#11518](https://github.com/vant-ui/vant/issues/11518)
+- ImagePreview: allow swipe when image is moved to edge [#11505](https://github.com/vant-ui/vant/issues/11505)
+- Locale: add Esperanto translations [#11520](https://github.com/vant-ui/vant/issues/11520)
+- Locale: add useCurrentLang method [#11517](https://github.com/vant-ui/vant/issues/11517)
+- Swipe: add drag-start, drag-end event [#11502](https://github.com/vant-ui/vant/issues/11502)
+
+**Bug Fixes**
+
+- ImagePreview: disable zoom when swiping [#11504](https://github.com/vant-ui/vant/issues/11504)
+- Locale: fix Italian general revision [#11519](https://github.com/vant-ui/vant/issues/11519)
+- Swipe: avoid resetting position on multi-finger touch [#11503](https://github.com/vant-ui/vant/issues/11503)
+
+### [v4.0.8](https://github.com/vant-ui/vant/compare/v4.0.7...v4.0.8)
+
+`2023-01-15`
+
+**Feature**
+
+- PickerGroup: add next-step-text prop [#11487](https://github.com/vant-ui/vant/issues/11487)
+
+**Bug Fixes**
+
+- Picker: change confirm button color to primary color [#11479](https://github.com/vant-ui/vant/issues/11479)
+- NumberKeyboard: change confirm button color to primary color [#11479](https://github.com/vant-ui/vant/issues/11479)
+- Icons: add woff format to compat some special webview [#11485](https://github.com/vant-ui/vant/issues/11485)
+- Picker: ensure title align in center [#11489](https://github.com/vant-ui/vant/issues/11489)
+- Skeleton: fix can not register skeleton image component [#11470](https://github.com/vant-ui/vant/issues/11470) [#11469](https://github.com/vant-ui/vant/issues/11469)
+- Tabs: incorrect insert position in some cases [#11462](https://github.com/vant-ui/vant/issues/11462)
+
+### [v4.0.7](https://github.com/vant-ui/vant/compare/v4.0.6...v4.0.7)
+
+`2023-01-02`
+
+**Bug Fixes**
+
+- Icons: fix delete / delete-o icon [#11441](https://github.com/vant-ui/vant/issues/11441)
+- Icons: no longer support woff/ttf format [#11442](https://github.com/vant-ui/vant/issues/11442)
+- ImagePreview：fix teleport prop not work [#11429](https://github.com/vant-ui/vant/issues/11429)
+- Locale: fix typo of "Calendar" in ru-RU [#11425](https://github.com/vant-ui/vant/issues/11425)
+- Swipe: failed to render inside keep-alive [#11437](https://github.com/vant-ui/vant/issues/11437)
+
+### [v4.0.6](https://github.com/vant-ui/vant/compare/v4.0.5...v4.0.6)
+
+`2022-12-26`
+
+**Bug Fixes**
+
+- Fix missing declaration files caused by upgrading vite v4 [#11423](https://github.com/vant-ui/vant/issues/11423)
+
+### [v4.0.5](https://github.com/vant-ui/vant/compare/v4.0.4...v4.0.5)
+
+`2022-12-25`
+
+**Feature**
+
+- Locale: add Dutch lang [#11419](https://github.com/vant-ui/vant/issues/11419)
+- Locale: add Mongolian lang [#11418](https://github.com/vant-ui/vant/issues/11418)
+
+**Bug Fixes**
+
+- Badge: fix badge offset of different position [#11400](https://github.com/vant-ui/vant/issues/11400)
+- Form: filter no name field's value [#11410](https://github.com/vant-ui/vant/issues/11410)
+- Picker: picker loading color in dark theme [#11405](https://github.com/vant-ui/vant/issues/11405)
+
+### [v4.0.4](https://github.com/vant-ui/vant/compare/v4.0.3...v4.0.4)
+
+`2022-12-23`
+
+**Bug Fixes**
+
+- Field: incorrect cursor position when value length exceeds maxlength or when formatter is used [#11360](https://github.com/vant-ui/vant/issues/11360)
+- Image: load event missing params [#11406](https://github.com/vant-ui/vant/issues/11406)
+
+### [v4.0.3](https://github.com/vant-ui/vant/compare/v4.0.2...v4.0.3)
+
+`2022-12-13`
+
+**Bug Fixes**
+
+- Field: failed to dynamically set empty label [#11373](https://github.com/vant-ui/vant/issues/11373)
+- ImagePreview: fix loading when previewing images [#11376](https://github.com/vant-ui/vant/issues/11376)
+
+### [v4.0.2](https://github.com/vant-ui/vant/compare/v4.0.1...v4.0.2)
+
+`2022-12-03`
+
+**Bug Fixes**
+
+- Field: incorrect cursor position when using formatter [#11348](https://github.com/vant-ui/vant/issues/11348)
+- Image: load event not triggered in nuxt3 [128972](https://github.com/vant-ui/vant/commit/128972a75329d4b14028d00cd23dac66038e2d4c)
+- NavBar: update placeholder height when window resized [#11351](https://github.com/vant-ui/vant/issues/11351)
+
+### [v4.0.1](https://github.com/vant-ui/vant/compare/v4.0.0...v4.0.1)
+
+`2022-12-01`
+
+**Feature**
+
+- Picker: add selectedIndexes to the confirm event [#11329](https://github.com/vant-ui/vant/issues/11329)
+
+**Bug Fixes**
+
+- Field: set selection range only when focused [#11333](https://github.com/vant-ui/vant/issues/11333)
+
+### [v4.0.0](https://github.com/vant-ui/vant/compare/v4.0.0-rc.9...v4.0.0)
+
+`2022-11-26`
+
+**Feature**
+
+- List: add disabled prop [#11307](https://github.com/vant-ui/vant/issues/11307)
+- BackTop: allow dynamically set target prop [#11311](https://github.com/vant-ui/vant/issues/11311)
+- BackTop: allow using css var to custom position [#11312](https://github.com/vant-ui/vant/issues/11312)
+- BackTop: rename visibility-height prop to offset [#11309](https://github.com/vant-ui/vant/issues/11309)
+
+**Bug Fixes**
+
+- Field: keep selection position after updating value [#11308](https://github.com/vant-ui/vant/issues/11308)
+
+### [v4.0.0-rc.9](https://github.com/vant-ui/vant/compare/v4.0.0-rc.8...v4.0.0-rc.9)
+
+`2022-11-24`
+
+**Bug Fixes**
+
+- Cell: arrow-direction assignment right is invalid [#11279](https://github.com/vant-ui/vant/issues/11279)
+- Style: body normalize not work [#11287](https://github.com/vant-ui/vant/issues/11287)
+
+### [v4.0.0-rc.8](https://github.com/vant-ui/vant/compare/v4.0.0-rc.7...v4.0.0-rc.8)
+
+`2022-11-20`
+
+**Feature**
+
+- add new BackTop component, note that the API is not stable yet, we may change the API before 4.0 release. [#11236](https://github.com/vant-ui/vant/issues/11236)
+
+**Bug Fixes**
+
+- DropdownItem: should inherit attrs when using teleport [#11273](https://github.com/vant-ui/vant/issues/11273)
+- List: incorrect initial loading value [#11275](https://github.com/vant-ui/vant/issues/11275)
+- NumberKeyboard: should inherit attrs when using teleport [#11274](https://github.com/vant-ui/vant/issues/11274)
+
+### [v4.0.0-rc.7](https://github.com/vant-ui/vant/compare/v4.0.0-rc.6...v4.0.0-rc.7)
+
+`2022-11-13`
+
+**New Component**
+
+- Add new SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph components [#11173](https://github.com/vant-ui/vant/issues/11173)
+
+**Feature**
+
+- ImagePreview: add long-press event [#11252](https://github.com/vant-ui/vant/issues/11252)
+- Popover: support uncontrolled mode [#11244](https://github.com/vant-ui/vant/issues/11244)
+
+**Bug Fixes**
+
+- ActionSheet: fix that close is invalid without title [#11213](https://github.com/vant-ui/vant/issues/11213)
+- DatePicker: only throw error in development [#11248](https://github.com/vant-ui/vant/issues/11248)
+- Lazyload: lazy-image h is not a function [#11229](https://github.com/vant-ui/vant/issues/11229)
+- Picker: correct v-model when emit confirm event [#11194](https://github.com/vant-ui/vant/issues/11194)
+- Picker: empty column will cause error [#11249](https://github.com/vant-ui/vant/issues/11249)
+- Uploader: chooseFile is invalid when show-upload is false [#11218](https://github.com/vant-ui/vant/issues/11218)
+
+### [v4.0.0-rc.6](https://github.com/vant-ui/vant/compare/v4.0.0-rc.5...v4.0.0-rc.6)
+
+`2022-10-23`
+
+**Feature**
+
+- Calendar: add params for subtitle slot [#11168](https://github.com/vant-ui/vant/issues/11168)
+- Cell: add tag prop [#11139](https://github.com/vant-ui/vant/issues/11139)
+- ImagePreview: add image slot [#11133](https://github.com/vant-ui/vant/issues/11133)
+- Toast: add wordBreak prop [#11147](https://github.com/vant-ui/vant/issues/11147)
+
+**Bug Fixes**
+
+- CouponList: fix the style of coupon checkbox [#11153](https://github.com/vant-ui/vant/issues/11153)
+- CouponList: incorrect field style [#11155](https://github.com/vant-ui/vant/issues/11155)
+- Swipe: failed to render when inside popup [#11162](https://github.com/vant-ui/vant/issues/11162)
+
+### [v4.0.0-rc.5](https://github.com/vant-ui/vant/compare/v4.0.0-rc.4...v4.0.0-rc.5)
+
+`2022-10-07`
+
+**Feature**
+
+- Field: support label-position top [#11102](https://github.com/vant-ui/vant/issues/11102)
+- Loading: add icon slot [#11109](https://github.com/vant-ui/vant/issues/11109)
+- NavBar: add clickable prop [#11048](https://github.com/vant-ui/vant/issues/11048)
+- Stepper: add auto-fixed prop [#11071](https://github.com/vant-ui/vant/issues/11071)
+
+**Bug Fixes**
+
+- DatePicker: format value when exceed max date [#11122](https://github.com/vant-ui/vant/issues/11122)
+- Tabs: incorrect nav scroll animation in some cases [#11116](https://github.com/vant-ui/vant/issues/11116)
+- Tabs: scroll position when using nav-bottom slot [#11115](https://github.com/vant-ui/vant/issues/11115)
+
+### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
+
+`2022-09-25`
+
+**Feature**
+
+- Field: add message param to 'end-validate' method [#11080](https://github.com/vant-ui/vant/issues/11080)
+
+**Bug Fixes**
+
+- Tabs: incorrect scroll position in some cases [#11085](https://github.com/vant-ui/vant/issues/11085)
+- Tabs: incorrect scroll position when inited [#11059](https://github.com/vant-ui/vant/issues/11059)
+
+### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
+
+`2022-09-12`
+
+**Feature**
+
+- ConfigProvider: add ConfigProviderThemeVars type [#11034](https://github.com/vant-ui/vant/issues/11034)
+- Notify: add z-index prop [#11032](https://github.com/vant-ui/vant/issues/11032)
+- remove popperjs to reduce install size [#11030](https://github.com/vant-ui/vant/issues/11030)
+
+**Types**
+
+- Toast: fix missing global components type [#11033](https://github.com/vant-ui/vant/issues/11033)
+
+### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
+
+`2022-09-11`
+
+**Breaking Changes**
+
+- attach css variables to :root element [#11026](https://github.com/vant-ui/vant/issues/11026)
+
+**Bug Fixes**
+
+- Dialog: incorrect transform behavior [#11028](https://github.com/vant-ui/vant/issues/11028)
+- Empty: fix opacity in dark mode [#11027](https://github.com/vant-ui/vant/issues/11027)
+
+### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
+
+`2022-09-10`
+
+**Feature**
+
+- export props of all components [#11024](https://github.com/vant-ui/vant/issues/11024)
+- Dialog: message-align can be justify [#11014](https://github.com/vant-ui/vant/issues/11014)
+- Image: add block prop [#11022](https://github.com/vant-ui/vant/issues/11022)
+- Toast: add message slot [#11018](https://github.com/vant-ui/vant/issues/11018)
+
+**Bug Fixes**
+
+- Picker: failed to update value in some cases [#11009](https://github.com/vant-ui/vant/issues/11009)
+- Locale: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
+
 ### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
 
 `2022-09-04`

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

@@ -19,6 +19,270 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
+### [v4.0.9](https://github.com/vant-ui/vant/compare/v4.0.8...v4.0.9)
+
+`2023-01-26`
+
+**Feature**
+
+- BackTop: 新增 immediate 属性 [#11515](https://github.com/vant-ui/vant/issues/11515)
+- Calendar: 新增 month-title 插槽 [#11500](https://github.com/vant-ui/vant/issues/11500)
+- Cascader: 新增 useCascaderAreaData 方法 [#11518](https://github.com/vant-ui/vant/issues/11518)
+- ImagePreview: 支持在缩放图片后滑动至其他图片 [#11505](https://github.com/vant-ui/vant/issues/11505)
+- Locale: 新增 Esperanto 世界语 [#11520](https://github.com/vant-ui/vant/issues/11520)
+- Locale: 新增 useCurrentLang 方法 [#11517](https://github.com/vant-ui/vant/issues/11517)
+- Swipe: 新增 drag-start, drag-end 事件 [#11502](https://github.com/vant-ui/vant/issues/11502)
+
+**Bug Fixes**
+
+- ImagePreview: 修复切换图片过程中可以触发图片缩放的问题 [#11504](https://github.com/vant-ui/vant/issues/11504)
+- Locale: 修复意大利语翻译问题 [#11519](https://github.com/vant-ui/vant/issues/11519)
+- Swipe: 修复多指操作时滑动位置被错误重置的问题 [#11503](https://github.com/vant-ui/vant/issues/11503)
+
+### [v4.0.8](https://github.com/vant-ui/vant/compare/v4.0.7...v4.0.8)
+
+`2023-01-15`
+
+**Feature**
+
+- PickerGroup: 新增 next-step-text 属性 [#11487](https://github.com/vant-ui/vant/issues/11487)
+
+**Bug Fixes**
+
+- Picker: 调整确认按钮的颜色为 primary color [#11479](https://github.com/vant-ui/vant/issues/11479)
+- NumberKeyboard: 调整确认按钮的颜色为 primary color [#11479](https://github.com/vant-ui/vant/issues/11479)
+- Icons: 增加 woff 格式来兼容个别 webview 环境 [#11485](https://github.com/vant-ui/vant/issues/11485)
+- Picker: 修复标题文字可能不居中的问题 [#11489](https://github.com/vant-ui/vant/issues/11489)
+- Skeleton: 修复全量引入组件时不会自动注册 Skeleton 子组件的问题 [#11470](https://github.com/vant-ui/vant/issues/11470) [#11469](https://github.com/vant-ui/vant/issues/11469)
+- Tabs: 修复动态插入 Tab 时在个别情况下顺序错误的问题 [#11462](https://github.com/vant-ui/vant/issues/11462)
+
+### [v4.0.7](https://github.com/vant-ui/vant/compare/v4.0.6...v4.0.7)
+
+`2023-01-02`
+
+**Bug Fixes**
+
+- Icons: 修复 delete / delete-o 图标存在多余黑点的问题 [#11441](https://github.com/vant-ui/vant/issues/11441)
+- Icons: 移除多余的 woff/ttf 格式声明 [#11442](https://github.com/vant-ui/vant/issues/11442)
+- ImagePreview：修复 teleport 属性不生效的问题 [#11429](https://github.com/vant-ui/vant/issues/11429)
+- Locale: 修复 ru-RU 中的 "Calendar" 拼写错误 [#11425](https://github.com/vant-ui/vant/issues/11425)
+- Swipe: 修复在 keep-alive 内使用时可能渲染空白的问题 [#11437](https://github.com/vant-ui/vant/issues/11437)
+
+### [v4.0.6](https://github.com/vant-ui/vant/compare/v4.0.5...v4.0.6)
+
+`2022-12-26`
+
+**Bug Fixes**
+
+- 修复升级 vite v4 导致构建产物不全的问题 [#11423](https://github.com/vant-ui/vant/issues/11423)
+
+### [v4.0.5](https://github.com/vant-ui/vant/compare/v4.0.4...v4.0.5)
+
+`2022-12-25`
+
+**Feature**
+
+- Locale: 新增 Dutch 荷兰语 [#11419](https://github.com/vant-ui/vant/issues/11419)
+- Locale: 新增 Mongolian 蒙古语 [#11418](https://github.com/vant-ui/vant/issues/11418)
+
+**Bug Fixes**
+
+- Badge: 修复 offset 属性部分情况下导致样式错误的问题 [#11400](https://github.com/vant-ui/vant/issues/11400)
+- Form: 修复事件参数中可能出现 key 为 undefined 的问题 [#11410](https://github.com/vant-ui/vant/issues/11410)
+- Picker: 修复深色模式下加载状态样式错误的问题 [#11405](https://github.com/vant-ui/vant/issues/11405)
+
+### [v4.0.4](https://github.com/vant-ui/vant/compare/v4.0.3...v4.0.4)
+
+`2022-12-23`
+
+**Bug Fixes**
+
+- Field: 修复使用 formatter 时光标位置可能错误的问题 [#11360](https://github.com/vant-ui/vant/issues/11360)
+- Image: 修复 load 事件未正确触发导致 ImagePreview 报错的问题 [#11406](https://github.com/vant-ui/vant/issues/11406)
+
+### [v4.0.3](https://github.com/vant-ui/vant/compare/v4.0.2...v4.0.3)
+
+`2022-12-13`
+
+**Bug Fixes**
+
+- Field: 修复动态设置空的 label 不生效的问题 [#11373](https://github.com/vant-ui/vant/issues/11373)
+- ImagePreview: 修复图片可能加载失败的问题 [#11376](https://github.com/vant-ui/vant/issues/11376)
+
+### [v4.0.2](https://github.com/vant-ui/vant/compare/v4.0.1...v4.0.2)
+
+`2022-12-03`
+
+**Bug Fixes**
+
+- Field: 修复使用 formatter 时光标位置错误的问题 [#11348](https://github.com/vant-ui/vant/issues/11348)
+- Image: 修复在 Nuxt 3 下图片可能无法展示的问题 [128972](https://github.com/vant-ui/vant/commit/128972a75329d4b14028d00cd23dac66038e2d4c)
+- NavBar: 修复屏幕旋转时 placeholder 未自动适配高度的问题 [#11351](https://github.com/vant-ui/vant/issues/11351)
+
+### [v4.0.1](https://github.com/vant-ui/vant/compare/v4.0.0...v4.0.1)
+
+`2022-12-01`
+
+**Feature**
+
+- Picker: 新增 selectedIndexes 作为事件入参 [#11329](https://github.com/vant-ui/vant/issues/11329)
+
+**Bug Fixes**
+
+- Field: 修复未选中时修改绑定的值会导致键盘弹出的问题 [#11333](https://github.com/vant-ui/vant/issues/11333)
+
+### [v4.0.0](https://github.com/vant-ui/vant/compare/v4.0.0-rc.9...v4.0.0)
+
+`2022-11-26`
+
+> 完整内容请移步：[「4.0 更新介绍」](https://vant-ui.github.io/vant/#/zh-CN/release-note-v4)
+
+**Feature**
+
+- List: 新增 disabled 属性 [#11307](https://github.com/vant-ui/vant/issues/11307)
+- BackTop: 支持动态设置 target 属性 [#11311](https://github.com/vant-ui/vant/issues/11311)
+- BackTop: 支持通过 CSS 变量修改组件位置 [#11312](https://github.com/vant-ui/vant/issues/11312)
+- BackTop: 重命名 visibility-height 属性为 offset [#11309](https://github.com/vant-ui/vant/issues/11309)
+
+**Bug Fixes**
+
+- Field: 修复格式化值后，光标位置错误的问题 [#11308](https://github.com/vant-ui/vant/issues/11308)
+
+### [v4.0.0-rc.9](https://github.com/vant-ui/vant/compare/v4.0.0-rc.8...v4.0.0-rc.9)
+
+`2022-11-24`
+
+**Bug Fixes**
+
+- Cell: 修复 arrow-direction 设置为 right 不显示的问题 [#11279](https://github.com/vant-ui/vant/issues/11279)
+- Style: 修复 body 标签上的 normalize 样式未生效的问题 [#11287](https://github.com/vant-ui/vant/issues/11287)
+
+### [v4.0.0-rc.8](https://github.com/vant-ui/vant/compare/v4.0.0-rc.7...v4.0.0-rc.8)
+
+`2022-11-20`
+
+**Feature**
+
+- 新增 BackTop 回到顶部组件，注意该新组件的 API 尚未稳定，在 4.0 正式版发布前仍可能产生 breaking change [#11236](https://github.com/vant-ui/vant/issues/11236)
+
+**Bug Fixes**
+
+- DropdownItem: 修复使用 teleport 时无法设置 attr 的问题 [#11273](https://github.com/vant-ui/vant/issues/11273)
+- List: 修复初始的 loading 值为 true 时加载错误的问题 [#11275](https://github.com/vant-ui/vant/issues/11275)
+- NumberKeyboard: 修复使用 teleport 时无法设置 attr 的问题 [#11274](https://github.com/vant-ui/vant/issues/11274)
+
+### [v4.0.0-rc.7](https://github.com/vant-ui/vant/compare/v4.0.0-rc.6...v4.0.0-rc.7)
+
+`2022-11-13`
+
+**New Component**
+
+- 新增 SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph 组件 [#11173](https://github.com/vant-ui/vant/issues/11173)
+
+**Feature**
+
+- ImagePreview: 新增 long-press 事件 [#11252](https://github.com/vant-ui/vant/issues/11252)
+- Popover: 支持非受控模式 [#11244](https://github.com/vant-ui/vant/issues/11244)
+
+**Bug Fixes**
+
+- ActionSheet: 修复标题为空时取消按钮层级错误的问题 [#11213](https://github.com/vant-ui/vant/issues/11213)
+- DatePicker: 在生产环境下不再抛出开发错误提示 [#11248](https://github.com/vant-ui/vant/issues/11248)
+- Lazyload: 修复使用 lazy-image 时报错 h is not a function 的问题 [#11229](https://github.com/vant-ui/vant/issues/11229)
+- Picker: 修复抛出 confirm 事件时 v-model 未正确更新的问题 [#11194](https://github.com/vant-ui/vant/issues/11194)
+- Picker: 修复 column 为空时操作报错的问题 [#11249](https://github.com/vant-ui/vant/issues/11249)
+- Uploader: 修复 show-upload 为 false 时 chooseFile 无法调用的问题 [#11218](https://github.com/vant-ui/vant/issues/11218)
+
+### [v4.0.0-rc.6](https://github.com/vant-ui/vant/compare/v4.0.0-rc.5...v4.0.0-rc.6)
+
+`2022-10-23`
+
+**Feature**
+
+- Calendar: subtitle 插槽新增 text 和 date 入参 [#11168](https://github.com/vant-ui/vant/issues/11168)
+- Cell: 新增 tag 属性 [#11139](https://github.com/vant-ui/vant/issues/11139)
+- ImagePreview: 新增 image 插槽 [#11133](https://github.com/vant-ui/vant/issues/11133)
+- Toast: 新增 wordBreak 选项 [#11147](https://github.com/vant-ui/vant/issues/11147)
+
+**Bug Fixes**
+
+- CouponList: 修复 coupon 位置错误的问题 [#11153](https://github.com/vant-ui/vant/issues/11153)
+- CouponList: 修复输入框样式错误的问题 [#11155](https://github.com/vant-ui/vant/issues/11155)
+- Swipe: 修复在 Popup 内时个别情况下渲染错误的问题 [#11162](https://github.com/vant-ui/vant/issues/11162)
+
+### [v4.0.0-rc.5](https://github.com/vant-ui/vant/compare/v4.0.0-rc.4...v4.0.0-rc.5)
+
+`2022-10-07`
+
+**Feature**
+
+- Field: 支持将 label-position 设置为 top [#11102](https://github.com/vant-ui/vant/issues/11102)
+- Loading: 新增 icon 插槽 [#11109](https://github.com/vant-ui/vant/issues/11109)
+- NavBar: 新增 clickable 属性 [#11048](https://github.com/vant-ui/vant/issues/11048)
+- Stepper: 新增 auto-fixed 属性 [#11071](https://github.com/vant-ui/vant/issues/11071)
+
+**Bug Fixes**
+
+- DatePicker: 修复日期超出 maxDate 时格式化不正确的问题 [#11122](https://github.com/vant-ui/vant/issues/11122)
+- Tabs: 修复开启 scrollspy 时个别情况下标题栏滚动位置错误的问题 [#11116](https://github.com/vant-ui/vant/issues/11116)
+- Tabs: 修复开启 scrollspy 时 nav-bottom 插槽遮挡内容的问题 [#11115](https://github.com/vant-ui/vant/issues/11115)
+
+### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
+
+`2022-09-25`
+
+**Feature**
+
+- Field: end-validate 事件新增 message 参数 [#11080](https://github.com/vant-ui/vant/issues/11080)
+
+**Bug Fixes**
+
+- Tabs: 修复个别情况下页面滚动位置错误的问题 [#11085](https://github.com/vant-ui/vant/issues/11085)
+- Tabs: 修复初始化时菜单横向滚动位置错误的问题 [#11059](https://github.com/vant-ui/vant/issues/11059)
+
+### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
+
+`2022-09-12`
+
+**Feature**
+
+- ConfigProvider: 新增 ConfigProviderThemeVars 类型 [#11034](https://github.com/vant-ui/vant/issues/11034)
+- Notify: 新增 z-index 属性 [#11032](https://github.com/vant-ui/vant/issues/11032)
+- 移除 `@popperjs/core` 依赖，减少安装体积 1.6MB [#11030](https://github.com/vant-ui/vant/issues/11030)
+
+**Types**
+
+- Toast: 修复缺少全局类型定义的问题 [#11033](https://github.com/vant-ui/vant/issues/11033)
+
+### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
+
+`2022-09-11`
+
+**Breaking Changes**
+
+- 调整了所有 CSS 变量的挂载位置，由 `body` 节点调整回 `:root` 节点，调整后与 Vant v3 版本保持一致，以便于 v3 项目更平滑地升级到 v4 版本。 [#11026](https://github.com/vant-ui/vant/issues/11026)
+
+**Bug Fixes**
+
+- Dialog: 修复过渡动画异常的问题 [#11028](https://github.com/vant-ui/vant/issues/11028)
+- Empty: 修复深色模式下亮度过高的问题 [#11027](https://github.com/vant-ui/vant/issues/11027)
+
+### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
+
+`2022-09-10`
+
+**Feature**
+
+- 导出所有组件的 props，方便进行二次封装 [#11024](https://github.com/vant-ui/vant/issues/11024)
+- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
+- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
+- Toast: 新增 message 插槽 [#11018](https://github.com/vant-ui/vant/issues/11018)
+
+**Bug Fixes**
+
+- Picker: 修复部分情况下未正确更新选中值的问题 [#11009](https://github.com/vant-ui/vant/issues/11009)
+- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
+
 ### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
 
 `2022-09-04`

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

@@ -0,0 +1,141 @@
+# Contribution Guide
+
+### Introduction
+
+Thank you for using Vant.
+
+Below are the guidelines for submitting feedback or code to Vant. Please take a few minutes to read the following before submitting an issue or PR to Vant.
+
+### Issue Specification
+
+- If you encountered a problem, please first confirm whether the problem has been recorded in the issue or has been fixed.
+- When submitting an issue, please describe the problem you encountered in a short language, and add the environment and reproduction steps when the problem occurs.
+
+## Participate in development
+
+### Local development
+
+Before developing locally, please make sure that [Node.js >= 14.19.0](https://nodejs.org) is installed in your development environment.
+
+Follow the steps below to develop Vant components locally.
+
+```bash
+# Clone repository
+git clone git@github.com:vant-ui/vant.git
+
+# Enable pnpm package manager
+corepack enable
+
+# If you can't use corepack, you can also install pnpm manually
+npm install -g pnpm@7
+
+# Install dependencies
+pnpm i
+
+# Start development
+pnpm dev
+```
+
+Different branches of the repository correspond to different Vant versions, please switch to the appropriate branch for development:
+
+- The main branch corresponds to the Vant 4 version, suitable for Vue 3
+- 3.x branch corresponds to Vant 3 version, suitable for Vue 3
+- 2.x branch corresponds to Vant 2 version, suitable for Vue 2
+
+### Mirror repository
+
+If GitHub cloning is slow, you can also directly clone Vant's [mirror repository](https://gitee.com/vant-contrib/vant) directly on gitee:
+
+```bash
+git clone git@gitee.com:vant-contrib/vant.git
+```
+
+The mirror repository is only used to speed up local access, please do not submit issues and pull requests to the mirror repository.
+
+### Directory Structure
+
+Vant uses monorepo for code management, and all subpackages are in the `packages/vant` directory:
+
+```
+root
+└─ packages
+   ├─ vant        # Component library
+   ├─ vant-cli    # Scaffolding
+   ├─ vant-icons  # Icon library
+   ├─ vant-use    # Composition API
+   └─ ....        # Other npm packages
+```
+
+Among them, the `packages/vant` directory is the core code of the component library:
+
+```
+vant
+├─ docs             # Documentation
+├─ src              # Component source code
+├─ test             # Test utils
+└─ vant.config.mjs  # Document configuration
+```
+
+The `packages/vant/src` directory contains the source code of each component, and each folder corresponds to a component:
+
+```
+src
+└─ button
+   ├─ demo             # Demo code
+   ├─ test             # Unit test
+   ├─ Component.tsx    # Component
+   ├─ index.ts         # Component entry
+   ├─ index.less       # Styles
+   ├─ README.md        # English document
+   └─ README.zh-CN.md  # Chinese document
+```
+
+### Code Specification
+
+When writing code, please note:
+
+- Make sure the code can pass the repository's ESLint check.
+- Make sure the code format is standardized, use prettier for code formatting.
+- Make sure you don't use incompatible APIs like `async`, `await`.
+
+## Submitting a Pull Request
+
+### Reference Guide
+
+If this is your first time submitting a pull request on GitHub, you can learn from the following article:
+
+- [First participation in open source](https://github.com/firstcontributions/first-contributions)
+
+### Pull Request Specification
+
+When submitting a Pull Request, please note:
+
+- Keep your PRs small enough that a PR only addresses a single issue or adds a single feature.
+- When adding new components or modifying original components, remember to add or modify the corresponding unit tests to ensure the stability of the code.
+- Please include an appropriate description in the PR, and link related issues.
+
+### Pull Request Process
+
+1. Fork the main repository. If you have already forked, please synchronize the latest code from the main repository.
+2. Create a new branch based on the main branch of the repository after the fork, such as `feature/button_color`.
+3. Develop on the new branch. When development is complete, submit a pull request to the main branch of the main repository.
+4. The pull request is merged into the main repository after the review is approved.
+5. Wait for Vant to release a new version, usually once a week.
+
+### Synchronize the latest code
+
+Before submitting a Pull Request, please synchronize the latest code of the main repository according to the following process:
+
+```bash
+# Add the main repository to remote
+git remote add upstream git@github.com:vant-ui/vant.git
+
+# Pull the latest code from the main repository
+git fetch upstream
+
+# Switch to the main branch
+git checkout main
+
+# Merge the code from the main repository
+git merge upstream/main
+```

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

@@ -38,9 +38,9 @@ pnpm dev
 
 仓库的不同分支对应不同的 Vant 版本，请切换到对应分支进行开发：
 
+- main 分支对应 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
 
 ### 镜像仓库
 
@@ -66,7 +66,7 @@ root
    └─ ....        # 其他周边 npm 包
 ```
 
-其中，`vant` 目录为组件库的核心代码：
+其中，`packages/vant` 目录为组件库的核心代码：
 
 ```
 vant
@@ -76,7 +76,7 @@ vant
 └─ vant.config.mjs  # 文档网站配置
 ```
 
-`src` 目录包含各个组件的源码，每个文件夹对应一个组件：
+`packages/vant/src` 目录包含各个组件的源码，每个文件夹对应一个组件：
 
 ```
 src
@@ -86,7 +86,6 @@ src
    ├─ Component.tsx    # 组件
    ├─ index.ts         # 组件入口
    ├─ index.less       # 样式
-   ├─ var.less         # 样式变量
    ├─ README.md        # 英文文档
    └─ README.zh-CN.md  # 中文文档
 ```
@@ -97,30 +96,30 @@ src
 
 - 确保代码可以通过仓库的 ESLint 校验。
 - 确保代码格式是规范的，使用 prettier 进行代码格式化。
-- 确保没有使用超出兼容性范围的 API，比如 `async/await`。
+- 确保没有使用超出兼容性范围的 API，比如 `async`, `await`.
 
-## 提交 PR
+## 提交 Pull Request
 
 ### 参考指南
 
 如果你是第一次在 GitHub 上提 Pull Request ，可以阅读下面这两篇文章来学习：
 
+- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md)
 - [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
-- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/master/translations/README.chs.md)
 
 ### Pull Request 规范
 
 在提交 Pull Request 时，请注意：
 
-- 如果遇到问题，建议保持你的 PR 足够小。保证一个 PR 只解决单个问题、添加单个功能。
+- 保持你的 PR 足够小，一个 PR 只解决单个问题或添加单个功能。
 - 当新增组件或者修改原有组件时，记得增加或者修改对应的单元测试，保证代码的稳定。
 - 在 PR 中请添加合适的描述，并关联相关的 Issue。
 
 ### Pull Request 流程
 
 1. fork 主仓库，如果已经 fork 过，请同步主仓库的最新代码。
-2. 基于 fork 后仓库的 dev 分支新建一个分支，比如 `feature/button_color`。
+2. 基于 fork 后仓库的 main 分支新建一个分支，比如 `feature/button_color`。
-3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 dev 分支。
+3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 main 分支。
 4. Pull Request 会在 Review 通过后被合并到主仓库。
 5. 等待 Vant 发布新版本，一般是每周一次。
 
@@ -129,15 +128,15 @@ src
 提 Pull Request 前，请依照下面的流程同步主仓库的最新代码：
 
 ```bash
-# 添加主仓库到 remote，作为 fork 后仓库的上游仓库
+# 添加主仓库到 remote
 git remote add upstream git@github.com:vant-ui/vant.git
 
 # 拉取主仓库最新代码
 git fetch upstream
 
-# 切换至 dev 分支
+# 切换至 main 分支
-git checkout dev
+git checkout main
 
 # 合并主仓库代码
-git merge upstream/dev
+git merge upstream/main
 ```

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

@@ -22,7 +22,7 @@ Contains color specifications, font specifications, and component design specifi
 
 <img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
 
-<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
+<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
 
 ### Icons (Sketch)
 
@@ -30,7 +30,7 @@ Contains icon library resources.
 
 <img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
 
-<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
+<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
 
 ### Axure
 

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

@@ -22,7 +22,7 @@
 
 <img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
 
-<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
+<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
 
 ### 图标设计稿（Sketch）
 
@@ -30,7 +30,7 @@
 
 <img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
 
-<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
+<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
 
 #### 在线资源
 

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

@@ -0,0 +1,83 @@
+# FAQ
+
+### How do I customize the style of Vant components?
+
+#### 1. Theme customization
+
+Vant provides the ability to customize the theme based on CSS variables, and can uniformly modify the component style. For details, see [ConfigProvider Global Configuration](#/en-US/config-provider) component.
+
+#### 2. Overriding the default style
+
+If the theme customization does not meet your needs, you can also override the default style using a **custom style class**, see the following example:
+
+```html
+<template>
+  <van-button class="my-button">Button</van-button>
+</template>
+
+<style>
+  /** Override the style of Button's root element */
+  .my-button {
+    width: 200px;
+  }
+
+  /** Override the style of Button's child elements */
+  .my-button.van-button__text {
+    color: red;
+  }
+</style>
+```
+
+### Components not rendering correctly in HTML?
+
+When using Vant components in HTML, you may encounter situations where some sample code may not render correctly, such as the following usage:
+
+```html
+<van-cell-group>
+  <van-cell title="cell" value="content" />
+  <van-cell title="cell" value="content" />
+</van-cell-group>
+```
+
+This is because HTML does not support self-closing custom elements, so syntax like `<van-cell />` is not recognized. Using a closing tag can work around this problem:
+
+```html
+<van-cell-group>
+  <van-cell title="cell" value="content"></van-cell>
+  <van-cell title="cell" value="content"></van-cell>
+</van-cell-group>
+```
+
+Self-closing custom elements are available in single-file components, string templates, and JSX, so this problem doesn't arise.
+
+### Can't trigger the click feedback on iOS?
+
+This is because iOS Safari does not trigger the `:active` pseudo-class by default. The solution is to add an empty `ontouchstart` attribute to the `body` tag:
+
+```html
+<body ontouchstart="">
+  ...
+</body>
+```
+
+Reference link: [stackoverflow - :active pseudo-class doesn't work in mobile safari](https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490)
+
+### Why is there no Select component?
+
+Select is a widely used component on the desktop, but its interactive form is not suitable for the mobile device.
+
+On the mobile side, we recommend using the [Picker selector component](#/en-US/picker) instead.
+
+### Is it supported in uni-app?
+
+All components of Vant are implemented based on the Vue framework and are not adapted to uni-app, so the availability of each component under uni-app is not guaranteed.
+
+If you encounter problems using Vant in uni-app, it is recommended to provide feedback to uni-app.
+
+### Some components do not work on the desktop?
+
+See [Adapt to PC Browsers](#/en-US/advanced-usage#adapt-to-pc-browsers).
+
+### How do I implement mobile responsive adaptation?
+
+See [Browser Adaptation](#/en-US/advanced-usage#browser-adaptation).

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

@@ -50,7 +50,7 @@ Vant 基于 CSS 变量提供了主题定制的能力，可以对组件样式进
 
 在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。
 
-### 在 iOS 上点击组件时，无法触发点击反馈效果？
+### 在 iOS 上无法触发组件的点击反馈效果？
 
 这是因为 iOS Safari 默认不会触发 `:active` 伪类，解决方法是在 `body` 标签上添加一个空的 `ontouchstart` 属性：
 
@@ -68,6 +68,12 @@ Select 是桌面端常用的组件，但它的交互形式不适合移动端。
 
 在移动端，我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。
 
+### 是否支持在 uni-app 中使用？
+
+Vant 所有组件都是基于 Vue 框架实现的，没有针对 uni-app 进行适配，因此不保证各个组件在 uni-app 下的可用性。
+
+如果你在 uni-app 中使用 Vant 遇到问题，建议向 uni-app 进行反馈。
+
 ### 部分组件无法在桌面端进行操作？
 
 参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。

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

@@ -19,9 +19,10 @@
 - 🍭 Support Tree Shaking
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
-- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
+- 🍭 Support Dark Mode
+- 🍭 Support Nuxt 3
 - 🍭 Support SSR
-- 🌍 Support i18n, built-in 20+ languages
+- 🌍 Support i18n, built-in 30+ languages
 
 ### Quickstart
 
@@ -33,6 +34,17 @@ Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
 
 Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
 
+### Maintenance Status
+
+The current maintenance status of each version of Vant is as follows:
+
+| Name | Framework | Release | Latest Version | Status |
+| --- | --- | --- | --- | --- |
+| Vant 4 | Vue 3 | `2022.12` | ![](https://img.shields.io/npm/v/vant/latest?style=flat-square) | Under active development |
+| Vant 3 | Vue 3 | `2020.12` | ![](https://img.shields.io/npm/v/vant/latest-v3?style=flat-square) | Bugfix only |
+| Vant 2 | Vue 2 | `2019.06` | ![](https://img.shields.io/npm/v/vant/latest-v2?style=flat-square) | Bugfix only |
+| Vant 1 | Vue 2 | `2018.03` | ![](https://img.shields.io/npm/v/vant/latest-v1?style=flat-square) | End of life |
+
 ## Links
 
 ### Official Ecosystem
@@ -41,16 +53,15 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 | --- | --- |
 | [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
-| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
-| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
 
 ### Community Ecosystem
 
 | Project | Description |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React Mobile UI Components Library |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@@ -61,7 +72,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 - [Feedback](https://github.com/vant-ui/vant/issues)
 - [Changelog](#/en-US/changelog)
-- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
+- [Discussions](https://github.com/vant-ui/vant/discussions)
 
 ## Contribution
 
@@ -83,8 +94,8 @@ Thanks to the following friends for their contributions to Vant:
 
 ### Contribution Guide
 
-Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
+Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/main/.github/CONTRIBUTING.md) before making a pull request.
 
 ### LICENSE
 
-[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89).

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

@@ -25,9 +25,10 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 - 🍭 支持主题定制，内置 700+ 个主题变量
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
-- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
+- 🍭 支持深色模式
+- 🍭 支持 Nuxt 3
 - 🍭 支持服务器端渲染
-- 🌍 支持国际化，内置 20+ 种语言包
+- 🌍 支持国际化，内置 30+ 种语言包
 
 ### 版本提示
 
@@ -43,6 +44,17 @@ Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
 
 Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
 
+### 维护状态
+
+目前 Vant 各个版本的维护状态如下：
+
+| 名称 | 框架 | 发布时间 | 最新版 | 维护状态 |
+| --- | --- | --- | --- | --- |
+| Vant 4 | Vue 3 | `2022.12` | ![](https://img.shields.io/npm/v/vant/latest?style=flat-square) | 持续迭代新功能 |
+| Vant 3 | Vue 3 | `2020.12` | ![](https://img.shields.io/npm/v/vant/latest-v3?style=flat-square) | 停止迭代新功能，bug 会被处理和修复 |
+| Vant 2 | Vue 2 | `2019.06` | ![](https://img.shields.io/npm/v/vant/latest-v2?style=flat-square) | 停止迭代新功能，重要 bug 会被处理和修复 |
+| Vant 1 | Vue 2 | `2018.03` | ![](https://img.shields.io/npm/v/vant/latest-v1?style=flat-square) | 停止维护，不再接受 PR |
+
 ## 链接
 
 ### 官方生态
@@ -53,9 +65,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | --- | --- |
 | [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
-| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
-| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
 
 ### 社区生态
 
@@ -64,7 +76,6 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | 项目 | 描述 |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 基于 Vant 的 React 版本移动端 UI 组件库 |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@@ -75,8 +86,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 - [意见反馈](https://github.com/vant-ui/vant/issues)
 - [更新日志](#/zh-CN/changelog)
-- [码云镜像](https://gitee.com/vant-contrib/vant)
+- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
-- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
+- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
 
 ## 贡献
 
@@ -104,4 +115,4 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 ### 开源协议
 
-本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。

packages/vant/docs/markdown/migrate-from-v2.en-US.md

@@ -0,0 +1,235 @@
+# Upgrade from v2 to v3
+
+### Introduction
+
+This document provides an upgrade guide from Vant 2 to Vant 3.
+
+### Upgrade steps
+
+#### 1. Upgrade to Vue 3
+
+Vant 3 is developed based on Vue 3. Before using Vant 3, please upgrade the Vue in the project to version 3.0 or above.
+
+#### 2. Handle incompatible changes
+
+There are some incompatible changes from Vant 2 to Vant 3, please read the incompatible changes below carefully and deal with them in order.
+
+## Incompatible changes
+
+### Component renaming
+
+The GoodsAction component is renamed to **ActionBar**.
+
+```html
+<!-- Vant 2 -->
+<van-goods-action>
+  <van-goods-action-icon text="icon" />
+  <van-goods-action-button text="button" />
+</van-goods-action>
+
+<!-- Vant 3 -->
+<van-action-bar>
+  <van-action-bar-icon text="icon" />
+  <van-action-bar-button text="button" />
+</van-action-bar>
+```
+
+### Deprecated components
+
+Vant v3 removed the SwitchCell component, you can use the Cell and Switch components instead.
+
+```html
+<!-- Vant 2 -->
+<van-switch-cell title="title" v-model="checked" />
+
+<!-- Vant 3 -->
+<van-cell center title="title">
+  <template #right-icon>
+    <van-switch v-model="checked" size="24" />
+  </template>
+</van-cell>
+```
+
+### Popup components v-model changes
+
+In order to adapt to Vue 3's v-model API usage changes, all components that provide v-model have some adjustments in usage. `v-model` for the following popup components has been renamed to `v-model:show`:
+
+- ActionSheet
+- Calendar
+- Dialog
+- Image Preview
+- Notify
+- Popover
+- Popup -ShareSheet
+
+```html
+<!-- Vant 2 -->
+<van-popup v-model="show" />
+
+<!-- Vant 3 -->
+<van-popup v-model:show="show" />
+```
+
+### Form component v-model internal value change
+
+The prop corresponding to the following form component v-model is renamed to `modelValue`, and the event is renamed to `update:modelValue`:
+
+-Checkbox
+
+- CheckboxGroup -DatetimePicker -DropdownItem -Field -Radio
+- RadioGroup -Search
+- Stepper -Switch
+- Sidebar
+- Uploader
+
+```html
+<!-- Vant 2 -->
+<van-field :value="value" @input="onInput" />
+
+<!-- Vant 3 -->
+<van-field :model-value="value" @update:model-value="onInput" />
+```
+
+### Other v-model tweaks
+
+- Circle: `v-model` renamed to `v-model:currentRate`
+- CouponList: `v-model` renamed to `v-model:code`
+- List: `v-model` renamed to `v-model:loading`, `error.sync` renamed to `v-model:error`
+- Tabs: `v-model` renamed to `v-model:active`
+- TreeSelect: `active-id.sync` renamed to `v-model:active-id`
+- TreeSelect: `main-active-index.sync` renamed to `v-model:main-active-index`
+
+### Badge prop adjustment
+
+In the previous version, we used the `info` prop to display the badge in the upper right corner of the icon. In order to better meet the naming habits of the community, we renamed this prop to badge, which affects the following components:
+
+- Tab
+- Icon
+- GridItem
+- TreeSelect
+- TabbarItem
+- SidebarItem
+- GoodsActionIcon
+
+At the same time, the Info component will also be renamed to Badge.
+
+```html
+<!-- Vant 2 -->
+<van-icon info="5" />
+
+<!-- Vant 3 -->
+<van-icon badge="5" />
+```
+
+### Rename the get-container prop
+
+Vue 3.0 added a new Teleport component, which provides the ability to render the component to any DOM position, and Vant 2 also provides similar capabilities through the `get-container` prop. For consistency with the official API, the `get-container` prop in Vant 3 will be renamed to `teleport`.
+
+```html
+<!-- Vant 2 -->
+<template>
+  <van-popup get-container="body" />
+  <van-popup :get-container="getContainer" />
+</template>
+<script>
+  export default {
+    methods: {
+      getContainer() {
+        return document.querySelector('#container');
+      },
+    },
+  };
+</script>
+
+<!-- Vant 3 -->
+<template>
+  <van-popup teleport="body" />
+  <van-popup :teleport="container" />
+</template>
+<script>
+  export default {
+    beforeCreate() {
+      this.container = document.querySelector('#container');
+    },
+  };
+</script>
+```
+
+### API adjustments
+
+#### Area
+
+- The `change` event parameter is no longer passed to the component instance
+
+#### Button
+
+- The type corresponding to the blue button is adjusted from `info` to `primary`
+- The type corresponding to the green button is adjusted from `primary` to `success`
+- Default value of `native-type` changed from `submit` to `button`
+
+#### Checkbox
+
+- When used inside Cell, you now need to manually add `@click.stop` to prevent event bubbling
+
+#### Dialog
+
+- The `allow-html` prop is disabled by default.
+- `before-close` prop usage adjustment, no longer pass in the done function, but return Promise to control.
+
+#### DatetimePicker
+
+- The `change` event parameter is no longer passed to the component instance
+
+#### ImagePreview
+
+- Remove the `async-close` prop, you can use the new `before-close` prop instead.
+
+#### Picker
+
+- The `change` event parameter is no longer passed to the component instance.
+- The `allow-html` prop is turned off by default.
+- The `show-toolbar` prop is enabled by default.
+- Under cascade selection, the callback parameters returned by the `confirm` and `change` events will contain a complete option object.
+
+#### Popover
+
+- Default value of `trigger` prop adjusted to `click`.
+
+#### Stepper
+
+- The `async-change` prop is renamed to `before-change`, and the usage method is adjusted.
+
+#### SwipeCell
+
+- `detail` parameter of `open` event renamed to `name`.
+- `on-close` prop renamed to `before-close`, and parameter structure adjusted.
+- The `before-close` prop is no longer passed to the component instance.
+
+#### Toast
+
+- `mask` prop renamed to `overlay`.
+
+#### TreeSelect
+
+- `navclick` event renamed to `click-nav`.
+- `itemclick` event renamed to `click-item`.
+
+### Global methods
+
+Global methods such as `$toast` and `$dialog` are provided by default in Vant 2, but Vue 3.0 no longer supports directly mounting methods on Vue's prototype chain, so starting from Vant 3.0, you must first pass `app.use` registers the component to the corresponding app.
+
+```js
+import { Toast, Dialog, Notify } from 'vant';
+
+// Register components such as Toast to the app
+app.use(Toast);
+app.use(Dialog);
+app.use(Notify);
+
+// Subcomponents in the app can directly call methods such as $toast
+export default {
+  mounted() {
+    this.$toast('prompt text');
+  },
+};
+```

packages/vant/docs/markdown/migrate-from-v3.en-US.md

@@ -0,0 +1,434 @@
+# Upgrade from v3 to v4
+
+### Introduction
+
+This document provides an upgrade guide from Vant 3 to Vant 4.
+
+### Installing Vant 4
+
+First you need to install Vant 4 and `@vant/compat`.
+
+`@vant/compat` is a compatibility package that helps you to switch from Vant 3 to Vant 4.
+
+```bash
+# Install via npm
+npm add vant@^4 @vant/compat@^1
+
+# Install via yarn
+yarn add vant@^4 @vant/compat@^1
+
+# Install via pnpm
+pnpm add vant@^4 @vant/compat@^1
+```
+
+You can also change the version directly in the `dependencies` field of `package.json`, and you will need to reinstall the dependencies after the change.
+
+```diff
+{
+   "dependencies": {
+-    "vant": "^3.0.0",
++    "vant": "^4.0.0",
++    "@vant/compat": "^1.0.0",
+   }
+}
+```
+
+## Import method changes
+
+### Remove babel-plugin-import
+
+Starting from Vant 4.0, `babel-plugin-import` will no longer be supported, please remove the `babel-plugin-import` plugin that the project depends on.
+
+Simply remove the following code in `babel.config.js`:
+
+```diff
+module.exports = {
+  plugins: [
+-    ['import', {
+-      libraryName: 'vant',
+-      libraryDirectory: 'es',
+-      style: true
+-    }, 'vant']
+  ]
+};
+```
+
+#### Benefits
+
+The main benefits of removing `babel-plugin-import` are as follows:
+
+- Instead of relying heavily on Babel compilation, projects can use modern compilation tools such as SWC and esbuild to improve compilation efficiency.
+- No longer subject to the import restrictions of `babel-plugin-import`, you can import content other than Vant components, such as the new `showToast` method in Vant 4, or the `buttonProps` object:
+
+```ts
+import { showToast, buttonProps } from 'vant';
+```
+
+#### Import style on demand
+
+Removing `babel-plugin-import` will not affect the JS size of the project, because Vant supports Tree Shaking to remove unnecessary JS code by default.
+
+The way the CSS code is imported can be selected from the following two ways:
+
+- Include Vant's style files in their entirety in the project:
+
+```js
+import 'vant/lib/index.css';
+```
+
+- Use the [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) plugin to import styles on demand, see [Quick Start](#/en-US/quickstart) for detailed usage.
+
+## Component refactoring
+
+### Introduction
+
+In Vant 4, three components have been refactored, they are:
+
+- `Area`
+- `Picker`
+- `DatetimePicker`
+
+The reason for refactoring these three components is that in the previous version, the API design of the `Picker` component had some unreasonable designs, which caused people to often encounter problems when using it, such as:
+
+- Picker columns data format definition is unreasonable, easy to cause misunderstanding
+- The Picker data flow is not clear, exposing too many instance methods to operate on the data
+- DatetimePicker logic is too complicated, bugs often occur in borderline scenarios
+
+To solve the above problems, we have refactored the `Picker` component in the v4 version, and also refactored the `Area` and `DatetimePicker` components derived from `Picker`. If you use these three components in your project, please read the documentation carefully and upgrade.
+
+### Picker component refactoring
+
+#### Major changes
+
+- Support binding the currently selected value through `v-model`, remove the `default-index` prop.
+- Redefine the structure of the `columns` prop.
+- Removed the instance methods for manipulating internal data, only the `confirm` method remains.
+- Added `getSelectedOptions` instance method.
+- Changed parameters of `confirm`, `cancel`, `change` events.
+- Renamed `item-height` prop to `option-height`.
+- Renamed `visible-item-count` prop to `visible-option-num`.
+
+> Please refer to [Picker Component Documentation](#/en-US/picker) for detailed usage.
+
+### DatetimePicker component refactoring
+
+The DatetimePicker component is split into three subcomponents:
+
+- [TimePicker](#/en-US/time-picker): Used for time selection, including hours, minutes, and seconds.
+- [DatePicker](#/en-US/date-picker): Used for date selection, including year, month and day.
+- [PickerGroup](#/en-US/picker-group): Used to combine multiple Picker selector components to select multiple values in one interaction.
+
+At the same time, the TimePicker and DatePicker components are also refactored based on the new version of the Picker component, and some API designs are optimized.
+
+#### Major changes
+
+The following are the main API changes of TimePicker and DatePicker. For more details, please refer to [TimePicker](#/en-US/time-picker) and [DatePicker](#/en-US/date-picker) documentation.
+
+- The value of `v-model` binding is adjusted to array format.
+- Added `columns-type` prop to control option type and order.
+- Remove `type` and `columns-order` props.
+- Remove `getPicker` method.
+- Adjust the parameters of `confirm`, `cancel`, `change` events to be consistent with the Picker component.
+
+> Vant 4 no longer provides the old version of the DatetimePicker component. The PickerGroup component can be used to achieve more flexible and richer interactive effects. For specific usage, please refer to the [PickerGroup](#/en-US/picker-group) component documentation.
+
+### Area component refactoring
+
+The Area component is encapsulated based on the Picker component, so this upgrade also refactors the internal logic of the Area component and optimizes some APIs.
+
+#### Major changes
+
+- Support binding the currently selected value via `v-model`.
+- Removed `reset` method, now can be reset by modifying `v-model`.
+- Removed `is-oversea-code` prop.
+- Adjust the parameters of `confirm`, `cancel`, `change` events to be consistent with the Picker component.
+- Renamed `value` prop to `modelValue`.
+- Renamed `item-height` prop to `option-height`.
+- Renamed `visible-item-count` prop to `visible-option-num`.
+
+> Please refer to [Area Component Documentation](#/en-US/area) for detailed usage.
+
+## API tweaks
+
+### Dialog calling method adjustment
+
+In Vant 3, `Dialog` is a function, and calling the function can quickly evoke the global Dialog component, and `Dialog.Component` is the `Dialog` component object, which is different from the usage of most components, which can easily lead to mistake.
+
+In order to be more intuitive, we adjusted the calling method of `Dialog` in Vant 4, renamed the `Dialog()` function to `showDialog()`, and let `Dialog` directly point to the component object.
+
+```js
+// Vant 3
+Dialog(); // function call
+Dialog.Component; // Component object
+
+// Vant 4
+showDialog(); // function call
+Dialog; // component object
+```
+
+Since `Dialog` has become a component object, other methods mounted on `Dialog` have also been renamed. The mapping relationship between the old and new APIs is as follows:
+
+```js
+Dialog(); // -> showDialog()
+Dialog.alert(); // -> showDialog()
+Dialog.confirm(); // -> showConfirmDialog()
+Dialog.close(); // -> closeDialog();
+Dialog.setDefaultOptions(); // -> setDialogDefaultOptions()
+Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
+```
+
+#### Migration
+
+In order to facilitate the migration of old version code to v4, we provide a compatibility solution, you can use the `Dialog` object exported in `@vant/compat` to be compatible with the original code.
+
+Reference the `Dialog` method from `@vant/compat`:
+
+```js
+import { Dialog } from '@vant/compat';
+
+Dialog();
+Dialog.close();
+```
+
+The `Dialog` exported in `@vant/compat` has exactly the same API and behavior as the `Dialog` in Vant 3, so you only need to modify the reference path of `Dialog`, and other codes can remain unchanged.
+
+After the project is upgraded to Vant v4, it is recommended to gradually replace it with the new `showDialog` and other methods in iterations, and remove the `@vant/compat` package.
+
+### Toast calling method adjustment
+
+In Vant 4, the calling method of the `Toast` component has also been adjusted, which is consistent with the changes of the `Dialog` component:
+
+```js
+// Vant 3
+Toast(); // function call
+
+// Vant 4
+showToast(); // function call
+Toast; // component object
+```
+
+Other methods mounted on `Toast` have also been renamed, and the mapping relationship between the old and new APIs is as follows:
+
+```js
+Toast(); // -> showToast()
+Toast.fail(); // -> showFailToast()
+Toast.success(); // -> showSuccessToast()
+Toast.loading(); // -> showLoadingToast()
+Toast.clear(); // -> closeToast()
+Toast.setDefaultOptions(); // -> setToastDefaultOptions()
+Toast.resetDefaultOptions(); // -> resetToastDefaultOptions()
+```
+
+At the same time, Vant 4 will no longer globally register the `$toast` method on the `this` object, which means that `$toast` will not be accessible on the `this` object.
+
+#### Migration
+
+In order to facilitate code migration, we provide a compatibility solution, you can use the `Toast` object exported in `@vant/compat` to be compatible with the original code.
+
+```js
+import { Toast } from '@vant/compat';
+
+Toast();
+Toast.clear();
+```
+
+The `Toast` exported in `@vant/compat` has exactly the same API and behavior as `Toast` in Vant 3, so you only need to modify the reference path of `Toast`, and other codes can remain unchanged.
+
+### Notify calling method adjustment
+
+In Vant 4, the calling method of the `Notify` component has also been adjusted, which is consistent with the changes of the `Dialog` component:
+
+```js
+// Vant 3
+Notify(); // function call
+Notify.Component; // component object
+
+// Vant 4
+showNotify(); // function call
+Notify; // component object
+```
+
+Other methods mounted on `Notify` have also been renamed, and the mapping relationship between the old and new APIs is as follows:
+
+```js
+Notify(); // -> showNotify()
+Notify.clear(); // -> closeNotify()
+Notify.setDefaultOptions(); // -> setNotifyDefaultOptions()
+Notify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()
+```
+
+At the same time, Vant 4 will no longer globally register the `$notify` method on the `this` object, which means that `$notify` will not be accessible on the `this` object.
+
+#### Migration
+
+In order to facilitate code migration, we provide a compatibility solution, you can use the `Notify` object exported in `@vant/compat` to be compatible with the original code.
+
+```js
+import { Notify } from '@vant/compat';
+
+Notify();
+Notify.clear();
+```
+
+`Notify` exported in `@vant/compat` has exactly the same API and behavior as `Notify` in Vant 3, so you only need to modify the reference path of `Notify`, and other codes can remain unchanged.
+
+### ImagePreview calling method adjustment
+
+In Vant 4, the calling method of the `ImagePreview` component has also been adjusted, which is consistent with the changes of the `ImagePreview` component:
+
+```js
+// Vant 3
+ImagePreview(); // function call
+ImagePreview.Component; // component object
+
+// Vant 4
+showImagePreview(); // function call
+ImagePreview; // component object
+```
+
+#### Migration
+
+In order to facilitate code migration, we provide a compatibility solution, you can use the `ImagePreview` object exported in `@vant/compat` to be compatible with the original code.
+
+```js
+import { ImagePreview } from '@vant/compat';
+
+ImagePreview();
+```
+
+The `ImagePreview` exported in `@vant/compat` has exactly the same API and behavior as the `ImagePreview` in Vant 3, so you only need to modify the reference path of `ImagePreview`, and other codes can remain unchanged.
+
+### Event naming adjustment
+
+Starting from Vant 4, all events are named in **camelCase** officially recommended by Vue.
+
+```js
+// Vant 3
+emit('click-input');
+
+// Vant 4
+emit('clickInput');
+```
+
+This change **does not affect the original template code**, Vue will automatically format the event name in the template, so you don't need to make any changes.
+
+```html
+<!-- The following code works as usual without any changes -->
+<van-field @click-input="onClick" />
+```
+
+If you use the Vant component in JSX, you need to adjust the monitored event name to camel case format, the original dash format will no longer take effect, and the new monitoring method is more in line with JSX's own specifications:
+
+```jsx
+// Vant 3
+<Field onClick-input={onClick} />
+
+// Vant 4
+<Field onClickInput={onClick} />
+```
+
+### Other API adjustments
+
+In Vant 4.0 version, the following APIs have been updated incompatible:
+
+#### AddressEdit
+
+- Remove `show-postal` prop.
+- Remove `postal-validator` prop.
+- Parameter of `change-area` event changed to `PickerOption[]` type.
+- Remove undocumented `getArea` instance method.
+
+#### Popup
+
+Some adjustments have been made to the CSS style of Popup. If you have added some custom CSS styles to the Popup component, please check if this update affects the UI in the project.
+
+- Added `box-sizing: border-box` style by default.
+- Changed the horizontal centering method when `position="center"`, to solve the problem that the width of the Popup cannot be adjusted correctly.
+
+```less
+// Vant 3
+.van-popup --center {
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+// Vant 4
+.van-popup --center {
+  left: 0;
+  right: 0;
+  width: fit-content;
+  max-width: calc(100vw - var(--van-padding-md) * 2);
+  margin: 0 auto;
+  transform: translateY(-50%);
+}
+```
+
+#### Tabs
+
+- Removed `click` and `disabled` events, please use `click-tab` event instead
+
+## Style adjustments
+
+### Uniform primary color
+
+In the previous version, Vant components had two primary colors, some components used blue (#1989fa) as the primary color, and others used red (#ee0a24).
+
+To keep the colour specification consistent,, we have unified the primary color in Vant 4, and all components use blue as the primary color.
+
+The primary color of the following components has been changed from red to blue:
+
+- AddressEdit
+- AddressList
+- Card
+- Calendar
+- Cascader
+- ContactList
+- ContactEdit
+- CouponList
+- Dialog
+- DropdownMenu -IndexBar
+- Sidebar -Steps
+- Tabs
+- TreeSelect
+
+### Remove Less variables
+
+Currently, Vant already supports theme customization capabilities based on CSS variables, which is more flexible than Less customization. Therefore, Vant 4 will no longer provide Less-based theme customization.
+
+This means that Vant's npm package will no longer contain `.less` style source files, only the compiled `.css` style files will be provided.
+
+If your project is using an old version of Less theme customization, please use the [ConfigProvider global configuration](#/en-US/config-provider) component to replace it.
+
+### Simplify CSS variable names
+
+With code size and usability in mind, we have simplified the names of some CSS variables, and used shorter words in the variable names to reduce the code size.
+
+This upgrade includes the following variable name changes:
+
+```less
+animation-duration -> duration
+animation-timing-function-enter -> ease-out
+animation-timing-function-leave -> ease-in
+background-color -> background
+background-color-light -> background-2
+border-radius -> radius
+border-width-base -> border-width
+box-shadow -> shadow
+font-family -> font
+font-weight-bold -> font-bold
+price-integer-font -> price-font
+text-link -> link
+transition-duration -> duration
+```
+
+Due to the large number of CSS variables involved, it is recommended that you perform a global match and replace in the code repository.
+
+For the `ConfigProvider` component, we have added the `ConfigProviderThemeVars` type definition to provide full type hints. In TypeScript code, you can use type hints to ensure that theme variables are substituted correctly.
+
+```ts
+import type { ConfigProviderThemeVars } from 'vant';
+
+const themeVars: ConfigProviderThemeVars = {
+  sliderBarHeight: '4px',
+};
+```

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

@@ -4,11 +4,40 @@
 
 本文档提供了从 Vant 3 到 Vant 4 的升级指南。
 
-## 按需引入方式调整
+### 安装 Vant 4
+
+首先你需要安装 Vant 4 以及 `@vant/compat`。
+
+`@vant/compat` 是一个兼容包，可以帮助你从 Vant 3 过渡到 Vant 4。
+
+```bash
+# 通过 npm 安装
+npm add vant@^4 @vant/compat@^1
+
+# 通过 yarn 安装
+yarn add vant@^4 @vant/compat@^1
+
+# 通过 pnpm 安装
+pnpm add vant@^4 @vant/compat@^1
+```
+
+你也可以直接修改 `package.json` 的 `dependencies` 字段中的版本号，修改完成后需要重新安装依赖。
+
+```diff
+{
+  "dependencies": {
+-    "vant": "^3.0.0",
++    "vant": "^4.0.0",
++    "@vant/compat": "^1.0.0",
+  }
+}
+```
+
+## 调整按需引入方式
 
 ### 移除 babel-plugin-import
 
-从 Vant 4.0 版本开始，将不再支持 `babel-plugin-import`，请移除项目中依赖的 `babel-plugin-import` 插件。
+从 Vant 4.0 开始，将不再支持 `babel-plugin-import`，请移除项目中依赖的 `babel-plugin-import` 插件。
 
 只需要删除 `babel.config.js` 中的以下代码即可：
 
@@ -26,28 +55,29 @@ module.exports = {
 
 #### 收益
 
-移除 `babel-plugin-import` 有以下收益：
+移除 `babel-plugin-import` 主要带来以下收益：
 
-- 不再强依赖 babel，项目可以使用 esbuild、swc 等更高效的编译工具，大幅度提升编译效率。
+- 不再强依赖 Babel 编译，项目可以使用 SWC、esbuild 等现代编译工具，进而提升编译效率。
-- 不再受到 `babel-plugin-import` 的 import 写法限制，可以从 vant 中导入除了组件以外的其他内容，比如 Vant 4 中新增的 `showToast` 等方法：
+- 不再受到 `babel-plugin-import` 的 import 限制，可以从 Vant 中导入除组件以外的内容，比如 Vant 4 中新增的 `showToast` 方法，或是 `buttonProps` 对象：
 
 ```ts
-import { showToast, showDialog } from 'vant';
+import { showToast, buttonProps } from 'vant';
 ```
 
 #### 样式引入方案
 
-移除 `babel-plugin-import` 对项目的 JS 体积不会有影响，因为 Vant 默认支持通过 Tree Shaking 优化来移除不需要的 JS 代码。
+移除 `babel-plugin-import` 对项目的 JS 体积不会有影响，因为 Vant 默认支持通过 Tree Shaking 来移除不需要的 JS 代码。
 
 而 CSS 代码的引入方式可以从以下两种方式中进行选择：
 
-- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式，详细用法参见 [快速上手](#/zh-CN/quickstart)。
 - 在项目中全量引入 Vant 的样式文件：
 
 ```js
 import 'vant/lib/index.css';
 ```
 
+- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式，详细用法参见 [快速上手](#/zh-CN/quickstart)。
+
 ## 组件重构
 
 ### 介绍
@@ -58,12 +88,13 @@ import 'vant/lib/index.css';
 - `Picker`
 - `DatetimePicker`
 
-之所以重构这三个组件，是因为在之前的版本中，`Picker` 组件的 API 设计存在一些不合理的设计，导致大家在使用时经常遇到问题，比如：
+这三个组件之所以被重构，是因为在之前的版本中，`Picker` 组件的 API 设计存在一些不合理的设计，导致大家在使用时经常遇到问题，比如：
 
-- columns 数据格式定义不合理，容易产生误解
+- Picker columns 数据格式定义不合理，容易产生误解
-- 数据流不清晰，暴露了过多的实例方法来对数据进行操作
+- Picker 数据流不清晰，暴露了过多的实例方法来对数据进行操作
+- DatetimePicker 逻辑过于复杂，经常在边界场景下出现 bug
 
-为了解决上述问题，我们在 v4 版本中对 `Picker` 组件进行了重构，同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。
+为了解决上述问题，我们在 v4 版本中对 `Picker` 组件进行了重构，同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。如果你的项目中使用了这三个组件，请仔细阅读文档并进行升级。
 
 ### Picker 组件重构
 
@@ -81,11 +112,11 @@ import 'vant/lib/index.css';
 
 ### DatetimePicker 组件重构
 
-DatetimePicker 组件被拆分为：
+DatetimePicker 组件被拆分为三个子组件：
 
-- [TimePicker](#/zh-CN/time-picker): 用于时间选择。
+- [TimePicker](#/zh-CN/time-picker): 用于时间选择，包括时、分、秒。
-- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
+- [DatePicker](#/zh-CN/date-picker): 用于日期选择，包括年、月、日。
-- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
+- [PickerGroup](#/zh-CN/picker-group): 用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。
 
 同时，TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构，并优化了部分 API 设计。
 
@@ -103,7 +134,7 @@ DatetimePicker 组件被拆分为：
 
 ### Area 组件重构
 
-Area 组件是基于 Picker 组件进行封装的，因此本次升级也对 Area 组件进行了内部逻辑的重构，并优化了部分 API 设计。
+Area 组件是基于 Picker 组件进行封装的，因此本次升级也对 Area 组件进行了内部逻辑的重构，并优化了部分 API。
 
 #### 主要变更
 
@@ -123,7 +154,7 @@ Area 组件是基于 Picker 组件进行封装的，因此本次升级也对 Are
 
 在 Vant 3 中，`Dialog` 是一个函数，调用函数可以快速唤起全局的弹窗组件，而 `Dialog.Component` 才是 `Dialog` 组件对象，这与大部分组件的用法存在差异，容易导致使用错误。
 
-为了更符合直觉，我们在 Vant 4 中调整了 `Dialog` 的调用方式，将 `Dialog()` 函数重命名为 `showDialog()`。
+为了更符合直觉，我们在 Vant 4 中调整了 `Dialog` 的调用方式，将 `Dialog()` 函数重命名为 `showDialog()`，并让 `Dialog` 直接指向组件对象。
 
 ```js
 // Vant 3
@@ -135,7 +166,7 @@ showDialog(); // 函数调用
 Dialog; // 组件对象
 ```
 
-`Dialog` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+由于 `Dialog` 变为了组件对象，`Dialog` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
 
 ```js
 Dialog(); // -> showDialog()
@@ -148,7 +179,9 @@ Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
 
 #### 兼容方案
 
-为了便于代码迁移，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
+为了便于旧版本代码迁移至 v4，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
+
+从 `@vant/compat` 中引用 `Dialog` 方法：
 
 ```js
 import { Dialog } from '@vant/compat';
@@ -159,6 +192,8 @@ Dialog.close();
 
 `@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为，因此你只需要修改 `Dialog` 的引用路径，其他代码可以保持不变。
 
+在项目完成升级到 Vant v4 后，建议在迭代中逐步替换为新的 `showDialog` 等方法，并移除 `@vant/compat` 包。
+
 ### Toast 调用方式调整
 
 Vant 4 中，`Toast` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
@@ -275,14 +310,14 @@ emit('click-input');
 emit('clickInput');
 ```
 
-这项改动**不影响原有的模板代码**，Vue 会自动在模板中对事件名进行格式转换：
+这项改动**不影响原有的模板代码**，Vue 会自动在模板中对事件名进行格式转换，因此你无须做任何更改。
 
 ```html
 <!-- 以下代码可以照常运行，无须做任何更改 -->
 <van-field @click-input="onClick" />
 ```
 
-如果你在 JSX 中使用 Vant 组件，需要将监听的事件名调整为驼峰格式，新的监听方式更加符合 JSX 本身的规范：
+如果你在 JSX 中使用 Vant 组件，需要将监听的事件名调整为驼峰格式，原有的中划线格式将不再生效，新的监听方式更加符合 JSX 本身的规范：
 
 ```jsx
 // Vant 3
@@ -305,7 +340,7 @@ emit('clickInput');
 
 #### Popup
 
-Popup 的 CSS 样式进行了一定调整，请确认是否对项目中的 UI 产生影响。
+Popup 的 CSS 样式进行了一定调整，如果你在 Popup 组件上添加了一些自定义的 CSS 样式，请确认本次升级是否对项目中的 UI 产生影响。
 
 - 默认添加了 `box-sizing: border-box` 样式
 - 调整了 `position="center"` 时的水平居中方式，以解决弹窗宽度无法正确自适应的问题：
@@ -332,11 +367,35 @@ Popup 的 CSS 样式进行了一定调整，请确认是否对项目中的 UI
 
 - 移除了 `click` 和 `disabled` 事件，请使用 `click-tab` 事件代替
 
-## 样式变量调整
+## 样式调整
+
+### 主色调统一
+
+在之前的版本中，Vant 组件有两种主色调，部分组件采用蓝色（#1989fa）作为主色调，另一部分则采用红色（#ee0a24）。
+
+为了保持色彩规范的一致性，我们在 Vant 4 中对主色调进行统一，所有组件均采用蓝色作为主色调。
+
+以下组件的主色调由红色调整为蓝色：
+
+- AddressEdit
+- AddressList
+- Card
+- Calendar
+- Cascader
+- ContactList
+- ContactEdit
+- CouponList
+- Dialog
+- DropdownMenu
+- IndexBar
+- Sidebar
+- Steps
+- Tabs
+- TreeSelect
 
 ### 移除 Less 变量
 
-目前 Vant 已经支持了基于 CSS 变量的主题定制能力，因此后续将不再提供基于 Less 的主题定制方式。
+目前 Vant 已经支持了基于 CSS 变量的主题定制能力，相较于 Less 定制更加灵活。因此，Vant 4 将不再提供基于 Less 的主题定制方式。
 
 这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件，只会提供编译后的 `.css` 样式文件。
 
@@ -344,7 +403,9 @@ Popup 的 CSS 样式进行了一定调整，请确认是否对项目中的 UI
 
 ### 简化 CSS 变量名
 
-考虑到 **代码体积** 和 **使用便捷性**，我们对部分 CSS 变量的名称进行了简化，在变量名中使用更简短的单词，涉及以下变更：
+考虑到 **代码体积** 和 **使用便捷性**，我们对部分 CSS 变量的名称进行了简化，在变量名中使用了更简短的单词，以减小代码体积。
+
+本次升级涉及以下变量名变更：
 
 ```less
 animation-duration               ->  duration
@@ -363,3 +424,13 @@ transition-duration              ->  duration
 ```
 
 由于涉及的 CSS 变量较多，建议在代码仓库中进行全局匹配和替换。
+
+对于 `ConfigProvider` 组件，我们新增了 `ConfigProviderThemeVars` 类型定义，提供完整的类型提示。在 TypeScript 代码中，你可以通过类型提示来确保主题变量被正确替换。
+
+```ts
+import type { ConfigProviderThemeVars } from 'vant';
+
+const themeVars: ConfigProviderThemeVars = {
+  sliderBarHeight: '4px',
+};
+```