release: 4.0.7

* docs(ConfigProvider): fix how to override basic css variables

* docs(ConfigProvider): add notes about two `:root` selectors

.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: [dev]
+    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 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.1
+      - name: Deploy for Gitee 🚀
+        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, 3.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,7 +36,8 @@
 - 🍭 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
 
@@ -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-icons](https://github.com/vant-ui/vant/tree/dev/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-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/main/packages/vant-icons) | Vant icons |
+| [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,7 +40,8 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 - 🍭 支持主题定制，内置 700+ 个主题变量
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
-- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
+- 🍭 支持深色模式
+- 🍭 支持 Nuxt 3
 - 🍭 支持服务器端渲染
 - 🌍 支持国际化，内置 20+ 种语言包
 
@@ -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-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | 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,7 +14,10 @@
     "*.{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:*",
@@ -23,15 +26,5 @@
     "nano-staged": "^0.8.0",
     "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/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.0",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {
@@ -32,7 +32,6 @@
   "license": "MIT",
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/inquirer": "^8.2.3",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2"
   },
@@ -40,7 +39,7 @@
     "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,15 +2,15 @@ import fs from 'fs-extra';
 import glob from 'fast-glob';
 import color from 'picocolors';
 import consola from 'consola';
-import { prompt } from 'inquirer';
-import { sep, join } from 'path';
+import { prompt } from 'enquirer';
+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',
@@ -25,7 +25,7 @@ const PROMPTS = [
   {
     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/package.json

@@ -36,7 +36,7 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.54",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2"
   },

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)
-- [config](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.md)
-- [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
-- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
+- [cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.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/main/packages/vant-cli/docs/directory.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/dev/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/dev/packages/vant-cli/changelog.md)
+- [命令](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.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/main/packages/vant-cli/docs/directory.zh-CN.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
-- @vitejs/plugin-vue v3
-- @vitejs/plugin-vue-jsx v2
+- vite: 由 v2 升级至 v3
+- jest: 由 v27 升级至 v29
+- @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.plugins.push(vitePluginXXX);
+      config.server.port = 3000;
       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.plugins.push(vitePluginXXX);
+      config.server.port = 3000;
       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,40 @@
   "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",
-    "react-dom": "^18.2.0",
-    "vue": "^3.2.38"
+    "vue": "^3.2.45"
   },
   "dependencies": {
     "@babel/core": "^7.18.13",
     "@babel/preset-typescript": "^7.18.6",
-    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.2.1",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.1.1",
     "@vant/eslint-config": "^3.5.0",
     "@vant/touch-emulator": "^1.4.0",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@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",
-    "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.1.2",
     "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 +82,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-plugin-html": "^2.1.2",
+    "vite": "^4.0.3",
     "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;
@@ -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

@@ -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);

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.body.classList.add(`van-doc-theme-${newVal}`);
+        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
+        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
         syncThemeToChild(newVal);
       },
       immediate: true,

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

@@ -110,14 +110,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.body.classList.add(`van-doc-theme-${newVal}`);
+        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
+        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/src/commands/build.ts

@@ -1,6 +1,6 @@
 import fse from 'fs-extra';
-import execa from 'execa';
-import { join, relative } from 'path';
+import { execa } from 'execa';
+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 { fileURLToPath } from 'url';
+import { join, dirname } from 'node:path';
+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 { fileURLToPath } from 'url';
+import { join, dirname } from 'node:path';
+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 { fileURLToPath, pathToFileURL } from 'url';
-import { join, dirname, isAbsolute } from 'path';
+import { existsSync, readFileSync } from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+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 { join, isAbsolute } from 'path';
+import { existsSync } from 'node:fs';
+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) =>
-      build(mergeCustomViteConfig(getViteConfigForPackage(config)))
+    bundleOptions.map(async (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 { readFileSync } from 'fs';
+import { join } from 'node:path';
+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 { sep, join, relative } from 'path';
+import { createRequire } from 'node:module';
+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 { existsSync } from 'fs';
-import { createRequire } from 'module';
+import { join } from 'node:path';
+import { existsSync } from 'node:fs';
+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 { existsSync, readFileSync, readdirSync } from 'fs';
-import {
-  isDev,
-  pascalize,
-  getVantConfig,
-  normalizePath,
-} from '../common/index.js';
+import { join, parse } from 'node:path';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { 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 `import ${item.name} from '${path}';`;
+      return `const ${item.name} = () => import('${path}');`;
     })
     .join('\n');
 }

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

@@ -1,5 +1,5 @@
-import { join } from 'path';
-import { existsSync, readdirSync } from 'fs';
+import { join } from 'node:path';
+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 {
-  formatOptions,
-  formatType,
-  removeVersion,
-  toKebabCase,
-} from './utils.js';
+import { 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;
-        tag.attributes!.push({
+        const [name, desc, type, defaultVal] = line;
+
+        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 { createRequire } from 'module';
+import { join } from 'node:path';
+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({
-        data: {
-          ...siteConfig,
-          title,
-          // `description` is used by the HTML ejs template,
-          // so it needs to be written explicitly here to avoid error: description is not defined
-          description: siteConfig.description,
-          headHtml,
-          baiduAnalytics,
-          enableVConsole,
-          meta: getHTMLMeta(vantConfig),
-        },
+      vitePluginHTML({
+        ...siteConfig,
+        title,
+        // `description` is used by the HTML ejs template,
+        // so it needs to be written explicitly here to avoid error: description is not defined
+        description: siteConfig.description,
+        headHtml,
+        baiduAnalytics,
+        enableVConsole,
+        meta: getHTMLMeta(vantConfig),
       }),
     ],
 

packages/vant-cli/src/index.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
-import fs from 'fs';
-import { URL, fileURLToPath } from 'url';
+import fs from 'node:fs';
+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,8 +38,8 @@
   "devDependencies": {
     "@vue/runtime-core": "^3.2.27",
     "vant": "workspace:*",
-    "vue": "^3.2.27",
-    "esbuild": "^0.14.29",
+    "vue": "^3.2.45",
+    "esbuild": "^0.16.10",
     "release-it": "^15.1.1",
     "typescript": "^4.7.4"
   },

packages/vant-icons/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Changelog
 
+## 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.0",
   "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,6 @@
   font-style: normal;
   font-display: auto;
   font-family: 'vant-icon';
-  src: url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952')
-      format('woff2'),
-    url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff?t=1649083952952')
-      format('woff'),
-    url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.ttf?t=1649083952952')
-      format('truetype');
+  src: url('//at.alicdn.com/t/c/font_2553510_ovbl29ce9ud.woff2?t=1672541115585')
+    format('woff2');
 }

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,11 +36,9 @@
   "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",
     "typescript": "^4.8.2"
   },

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,13 @@
 # Changelog
 
+## 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.3",
   "description": "Vant Composition API",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -37,10 +37,10 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.54",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2",
-    "vue": "^3.2.38"
+    "vue": "^3.2.45"
   },
   "release-it": {
     "git": {

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,219 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
+### [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,221 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
+### [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.zh-CN.md

@@ -38,7 +38,7 @@ pnpm dev
 
 仓库的不同分支对应不同的 Vant 版本，请切换到对应分支进行开发：
 
-- dev 分支对应 Vant 4 版本，适用于 Vue 3
+- main 分支对应 Vant 4 版本，适用于 Vue 3
 - 3.x 分支对应 Vant 3 版本 ，适用于 Vue 3
 - 2.x 分支对应 Vant 2 版本，适用于 Vue 2
 
@@ -106,7 +106,7 @@ src
 如果你是第一次在 GitHub 上提 Pull Request ，可以阅读下面这两篇文章来学习：
 
 - [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
-- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/master/translations/README.chs.md)
+- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md)
 
 ### Pull Request 规范
 
@@ -119,8 +119,8 @@ src
 ### Pull Request 流程
 
 1. fork 主仓库，如果已经 fork 过，请同步主仓库的最新代码。
-2. 基于 fork 后仓库的 dev 分支新建一个分支，比如 `feature/button_color`。
-3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 dev 分支。
+2. 基于 fork 后仓库的 main 分支新建一个分支，比如 `feature/button_color`。
+3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 main 分支。
 4. Pull Request 会在 Review 通过后被合并到主仓库。
 5. 等待 Vant 发布新版本，一般是每周一次。
 
@@ -135,9 +135,9 @@ git remote add upstream git@github.com:vant-ui/vant.git
 # 拉取主仓库最新代码
 git fetch upstream
 
-# 切换至 dev 分支
-git checkout dev
+# 切换至 main 分支
+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.zh-CN.md

@@ -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,7 +19,8 @@
 - 🍭 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
 
@@ -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-icons](https://github.com/vant-ui/vant/tree/dev/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-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/main/packages/vant-icons) | Vant icons |
+| [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,7 +94,7 @@ 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
 

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

@@ -25,7 +25,8 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 - 🍭 支持主题定制，内置 700+ 个主题变量
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
-- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
+- 🍭 支持深色模式
+- 🍭 支持 Nuxt 3
 - 🍭 支持服务器端渲染
 - 🌍 支持国际化，内置 20+ 种语言包
 
@@ -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-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | 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)
-- [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)
 
 ## 贡献
 

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-plugin-import` 的 import 写法限制，可以从 vant 中导入除了组件以外的其他内容，比如 Vant 4 中新增的 `showToast` 等方法：
+- 不再强依赖 Babel 编译，项目可以使用 SWC、esbuild 等现代编译工具，进而提升编译效率。
+- 不再受到 `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): 用于时间选择。
-- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
-- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
+- [TimePicker](#/zh-CN/time-picker): 用于时间选择，包括时、分、秒。
+- [DatePicker](#/zh-CN/date-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',
+};
+```

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

@@ -32,12 +32,12 @@ The easiest way to use Vant is to include a CDN link in the HTML file, after whi
 <!-- import style -->
 <link
   rel="stylesheet"
-  href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
+  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
 />
 
 <!-- import script -->
 <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
-<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
+<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
 
 <script>
   // Render the Button component
@@ -213,6 +213,11 @@ import 'vant/es/image-preview/style';
 
 > Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
 
+#### Tips
+
+- "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
+- unplugin-vue-components is not officially maintained by Vant. If you encounter issues when using this plugin, please feedback to [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) repository.
+
 ## With Frameworks
 
 ### Use Vant in Nuxt 3

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

@@ -36,12 +36,12 @@ pnpm add vant
 <!-- 引入样式文件 -->
 <link
   rel="stylesheet"
-  href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
+  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
 />
 
 <!-- 引入 Vue 和 Vant 的 JS 文件 -->
 <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
-<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
+<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
 
 <script>
   // 在 #app 标签下渲染一个按钮组件
@@ -89,7 +89,6 @@ pnpm add vant
 - 配置基于 Rem 的适配方案
 - 配置基于 Viewport 的适配方案
 - 配置基于 TypeScript 的工程
-- 配置自定义主题色方案
 
 ## 引入组件
 
@@ -218,7 +217,10 @@ import 'vant/es/image-preview/style';
 
 你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
 
-> 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。
+#### 使用提示
+
+- 请避免同时使用「全量引入」和「按需引入」这两种引入方式，否则会导致代码重复、样式错乱等问题。
+- unplugin-vue-components 并不是 Vant 官方维护的插件，如果在使用过程中遇到问题，建议优先到 [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 仓库下反馈。
 
 ## 在框架中使用
 

packages/vant/docs/markdown/release-note-v4.zh-CN.md

@@ -0,0 +1,229 @@
+# 4.0 版本介绍
+
+### 引言
+
+历经一年的迭代，Vant 4.0 版本已正式发布，这是 Vant 自 2017 年开源以来发布的第四个重要版本。
+
+在本次迭代中，Vant 支持了深色模式，增加五个新组件，改善工具函数 API 并重构 Picker 等组件，同时继续在轻量化和易用性方面做出改进。
+
+### 支持深色模式
+
+**Vant 4.0 支持切换所有组件为深色模式。**
+
+只需要把 [ConfigProvider 组件](https://vant-ui.github.io/vant/#/zh-CN/config-provider)的 `theme` 属性设置为 `dark`，即可切换为深色模式，将页面上的所有 Vant 组件变成深色风格。
+
+```html
+<van-config-provider theme="dark">
+  <!-- child components -->
+</van-config-provider>
+```
+
+![](https://user-images.githubusercontent.com/7237365/205472724-6c9ee0df-df10-4f9b-84b6-081576bdcea9.png)
+
+同时，Vant 4.0 文档也已支持切换为深色模式：
+
+![](https://user-images.githubusercontent.com/7237365/205472729-fefc9053-1866-4812-8b97-ee0ba5d47230.png)
+
+### 几个新组件
+
+**Vant 4.0 包含以下新组件：**
+
+- [BackTop 回到顶部](https://vant-ui.github.io/vant/#/zh-CN/back-top)：返回页面顶部的操作按钮。
+- [TimePicker 时间选择器](https://vant-ui.github.io/vant/#/zh-CN/time-picker)：用于时间选择，包括时、分、秒。
+- [DatePicker 日期选择器](https://vant-ui.github.io/vant/#/zh-CN/time-picker)：用于日期选择，包括年、月、日。
+- [PickerGroup 选择器组](https://vant-ui.github.io/vant/#/zh-CN/picker-group)：用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。
+- [Skeleton 骨架屏子组件](https://vant-ui.github.io/vant/#/zh-CN/skeleton)：通过 SkeletonTitle、SkeletonImage、SkeletonAvatar 等子组件来自定义骨架屏。
+
+其中，TimePicker 和 DatePicker 由旧版的 DatetimePicker 组件拆分而来，DatetimePicker 组件不再提供。你可以通过 PickerGroup 来实现同时选择日期和时间的交互效果。
+
+![](https://user-images.githubusercontent.com/7237365/205474243-14e0a87c-dcfa-4229-9a16-f6ebf910b621.png)
+
+### 保持轻量
+
+**Vant 4.0 的安装体积降低 30%，包体积保持轻量。**
+
+随着 npm 生态的发展，node_modules 正在吞噬我们的磁盘空间。为了缓解 node_modules 黑洞、加快安装速度，我们对 Vant 的 npm 依赖和构建产物进行了优化。
+
+相较于 Vant 3.6.2 版本，Vant 4.0.0 版本的安装体积由 7MB 下降至 5MB。作为对比，社区中主流组件库的安装体积普遍在 15MB ~ 80MB。你可以通过 [packagephobia](https://packagephobia.com/result?p=vant) 来查询 npm 包的安装体积。
+
+![](https://user-images.githubusercontent.com/7237365/205470714-e1828299-4df2-40f4-b7cc-f65971fe4567.png)
+
+在包体积上，本次更新依然加量不加价，Minified + Gzipped 后的体积保持在 70KB 以下：
+
+![](https://user-images.githubusercontent.com/7237365/205474583-f2d8226f-e089-42d7-8326-3c874dcf1784.png)
+
+### 统一主色调
+
+**Vant 4.0 统一了所有组件的主色调。**
+
+在之前的版本中，Vant 组件有两种主色调，部分组件采用蓝色 `#1989fa` 作为主色调，另一部分则采用红色 `#ee0a24`。
+
+为了保持色彩规范的一致性，我们在 Vant 4 中对主色调进行统一，所有组件均采用蓝色作为主色调。
+
+![](https://user-images.githubusercontent.com/7237365/205472726-a0552833-f99d-447a-acce-051ec7ebdbe1.png)
+
+统一主色调后，主题定制会变得更加容易。比如，你可以覆盖 `--van-primary-color` 这个 CSS 变量，将所有组件的主色调设置为绿色：
+
+```css
+:root {
+  --van-primary-color: #07c160;
+}
+```
+
+### 按需引入方式调整
+
+**Vant 4.0 不再使用 babel-plugin-import 实现按需引入。**
+
+在早期，组件库大多使用 `babel-plugin-import` 实现按需引入，这意味着组件库会强依赖 Babel 编译。从 Vant 4.0 开始，将不再支持 `babel-plugin-import`，主要带来以下收益：
+
+- 不再强依赖 Babel 编译，项目可以使用 SWC、esbuild 等现代编译工具，进而提升编译效率。
+
+![](https://user-images.githubusercontent.com/7237365/205478241-dba3c4ed-152c-4892-9e74-1a0d978be314.png)
+
+- 不再受到 `babel-plugin-import` 的 import 限制，可以从 Vant 中导入除组件以外的内容，比如 Vant 4 中新增的 `showToast` 方法，或是 `buttonProps` 对象：
+
+```ts
+import { showToast, buttonProps } from 'vant';
+```
+
+在包体积方面，移除 `babel-plugin-import` 对项目的 JS 体积不会有影响，因为 Vant 默认支持通过 Tree Shaking 来移除不需要的 JS 代码，而 CSS 代码可以通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入，详细用法请参考 [「快速上手」](https://vant-ui.github.io/vant/#/zh-CN/quickstart)。
+
+### 样式变量类型提示
+
+**Vant 4.0 提供了样式变量的类型提示。**
+
+Vant 提供了 700 多个样式变量，你可以通过 CSS 代码或 `ConfigProvider` 组件修改这些样式变量。在 Vant 4.0 中，我们新增了 `ConfigProviderThemeVars` 类型，以提供样式变量的类型提示。
+
+因此在编写 TypeScript 代码时，你可以通过类型提示来补全主题变量名称：
+
+![](https://user-images.githubusercontent.com/7237365/205478960-c284e272-a394-4098-ad0f-eda72e74f9f7.png)
+
+### Picker 组件重构
+
+**Vant 4.0 重构了 Picker 组件，以及基于 Picker 的 Area 和 DatetimePicker 组件。**
+
+在之前的版本中，`Picker` 组件的 API 设计不够合理，导致大家在使用时经常遇到问题，比如：
+
+- Picker 的 columns 数据格式不合理，容易产生误解。
+- Picker 的数据流不清晰，暴露了过多的实例方法来对数据进行操作。
+- DatetimePicker 的逻辑过于复杂，经常在边界场景下出现 bug。
+
+为了解决上述问题，我们在 Vant 4.0 中对 `Picker` 组件进行了重构，同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。
+
+如果你的项目中使用了这三个组件，请阅读 [「升级指南」](https://vant-ui.github.io/vant/#/zh-CN/migrate-from-v3) 进行升级。
+
+### 组件工具函数调整
+
+**Vant 4.0 调整了组件工具函数的用法，使其更符合直觉。**
+
+Vant 3 提供了一些组件工具函数，比如调用 `Dialog()` 函数，可以快速唤起全局的弹窗组件，而 `Dialog.Component` 才是 `Dialog` 对应的组件对象。
+
+```ts
+// 函数调用
+Dialog({ message: 'Hello World!' });
+
+// 组件注册
+app.use('van-dialog', Dialog.Component);
+```
+
+以上 API 设计导致 Dialog 等支持工具函数的组件与常规组件存在用法差异，容易被误用；同时也导致 `unplugin-vue-components` 无法自动引入 Dialog 等组件。
+
+为了更符合直觉，我们在 Vant 4 中调整了组件工具函数的调用方式，受影响的函数包括 `Dialog()`、`Toast()`、`Notify()` 和 `ImagePreview()`。以 Dialog 为例，我们将 `Dialog()` 函数重命名为 `showDialog()`，并让 `Dialog` 直接指向组件对象。
+
+```ts
+// 函数调用
+showDialog({ message: 'Hello World!' });
+
+// 组件注册
+app.use('van-dialog', Dialog);
+```
+
+为了便于存量代码迁移至 Vant 4.0，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `Dialog()` 函数来兼容原有代码。
+
+```js
+import { Dialog } from '@vant/compat';
+
+Dialog({ message: 'Hello World!' });
+```
+
+`@vant/compat` 中导出的 `Dialog()` 与 Vant 3 中的 `Dialog()` 拥有完全一致的 API 和行为，因此在升级时，你只需要修改它的引用路径，其余代码可以保持不变。在项目完成升级到 Vant 4.0 后，建议在迭代中逐步替换为新的 `showDialog()` 等方法，并移除 `@vant/compat` 包。
+
+### 事件命名调整
+
+**Vant 4.0 将事件名改为驼峰格式。**
+
+从 Vant 4 开始，所有的事件均采用 Vue 官方推荐的驼峰格式进行命名。
+
+```js
+// Vant 3
+emit('click-input');
+
+// Vant 4
+emit('clickInput');
+```
+
+这项改动**不影响原有的模板代码**，Vue 会自动在模板中对事件名进行格式转换，因此你无须做任何更改。
+
+```html
+<!-- 以下代码可以照常运行，无须做任何更改 -->
+<van-field @click-input="onClick" />
+```
+
+如果你在 JSX 中使用 Vant 组件，需要将监听的事件名调整为驼峰格式，原有的中划线格式将不再生效，新的监听方式更加符合 JSX 本身的规范：
+
+```jsx
+// Vant 3
+<Field onClick-input={onClick} />
+
+// Vant 4
+<Field onClickInput={onClick} />
+```
+
+### 移除 Less 变量
+
+**Vant 4.0 不再支持通过 Less 变量定制主题。**
+
+目前 Vant 已经支持基于 CSS 变量的主题定制，相较于 Less 定制更加灵活。因此，Vant 4 将不再提供基于 Less 的主题定制。这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件，仅会提供编译后的 `.css` 样式文件。
+
+如果你的项目正在使用旧版的 Less 主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 进行替换。
+
+### Vant Cli 5.0
+
+**本次更新同步发布了 Vant Cli 5.0 版本。**
+
+[Vant Cli](https://github.com/youzan/vant/tree/main/packages/vant-cli) 是 Vant 底层的组件库构建工具，本次更新内容有：
+
+- 升级 Vite 到 3.0 版本，并对相关的 Vite 插件进行升级。
+- 不再默认安装 `stylelint` 和 `@vant/stylelint-config` 依赖，需要的话可以自行安装：
+
+```bash
+npm add stylelint@13 @vant/stylelint-config
+```
+
+- 不再默认安装 `gh-pages` 依赖，请按照如下方式更新 package.json：
+
+```diff
+- "release:site": "pnpm build:site && gh-pages -d site-dist",
++ "release:site": "pnpm build:site && npx gh-pages -d site-dist",
+```
+
+### 版本信息
+
+**目前 [Vant 官网](https://vant-ui.github.io/vant/) 和 npm latest 标签均已指向 Vant 4.0。**
+
+我们为 Vant 4.0 准备了完整的升级指南，请阅读 [从 v3 升级到 v4](https://vant-ui.github.io/vant/#/zh-CN/migrate-from-v3) 进行升级。
+
+同时，Vant 3.x 也会进入维护状态，后续 Vant 各个版本的维护状态如下：
+
+| 名称   | 框架  | 发布时间  | 维护状态                                |
+| ------ | ----- | --------- | --------------------------------------- |
+| Vant 4 | Vue 3 | `2022.12` | 持续迭代新功能                          |
+| Vant 3 | Vue 3 | `2020.12` | 停止迭代新功能，bug 会被处理和修复      |
+| Vant 2 | Vue 2 | `2019.06` | 停止迭代新功能，重要 bug 会被处理和修复 |
+| Vant 1 | Vue 2 | `2018.03` | 停止维护，不再接受 PR                   |
+
+### 最后
+
+感谢在 Vant 4.0 迭代期间做出贡献的朋友们，感谢所有使用 Vant 的开发者，愿大家在开源的道路上步履不停。
+
+![](https://user-images.githubusercontent.com/7237365/205481230-fdd89482-86ad-40c8-b81f-4af0789f8488.png)

packages/vant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "4.0.0-rc.0",
+  "version": "4.0.7",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",
@@ -8,9 +8,6 @@
   "typings": "lib/index.d.ts",
   "unpkg": "lib/vant.min.js",
   "jsdelivr": "lib/vant.min.js",
-  "npm": {
-    "tag": "next"
-  },
   "files": [
     "es",
     "lib"
@@ -47,23 +44,23 @@
     "components"
   ],
   "dependencies": {
-    "@vant/icons": "^1.8.0",
-    "@vant/popperjs": "^1.2.1",
-    "@vant/use": "^1.4.2"
+    "@vant/popperjs": "^1.3.0",
+    "@vant/use": "^1.4.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "^16.11.56",
-    "@types/jest": "^27.0.0",
+    "@types/node": "^18.11.18",
+    "@types/jest": "^29.1.1",
     "@vant/area-data": "workspace:*",
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
+    "@vant/icons": "workspace:*",
     "@vue/runtime-core": "^3.2.38",
     "@vue/test-utils": "^2.0.2",
     "typescript": "^4.8.2",
-    "vue": "^3.2.38",
+    "vue": "^3.2.45",
     "vue-router": "^4.1.5"
   },
   "sideEffects": [

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

@@ -1,4 +1,4 @@
-body {
+:root {
   --van-action-bar-button-height: 40px;
   --van-action-bar-button-warning-color: var(--van-gradient-orange);
   --van-action-bar-button-danger-color: var(--van-gradient-red);

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

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

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

@@ -0,0 +1,5 @@
+export type ActionBarButtonThemeVars = {
+  actionBarButtonHeight?: string;
+  actionBarButtonWarningColor?: string;
+  actionBarButtonDangerColor?: string;
+};

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

@@ -1,4 +1,4 @@
-body {
+:root {
   --van-action-bar-icon-width: 48px;
   --van-action-bar-icon-height: 100%;
   --van-action-bar-icon-color: var(--van-text-color);

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

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

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

@@ -0,0 +1,10 @@
+export type ActionBarIconThemeVars = {
+  actionBarIconWidth?: string;
+  actionBarIconHeight?: string;
+  actionBarIconColor?: string;
+  actionBarIconSize?: string;
+  actionBarIconFontSize?: string;
+  actionBarIconActiveColor?: string;
+  actionBarIconTextColor?: string;
+  actionBarIconBackground?: string;
+};

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

@@ -1,4 +1,4 @@
-body {
+:root {
   --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }