chore: update branches in GitHub actions

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

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

@@ -1,4 +1,4 @@
-name: Deploy V3 Site
+name: Deploy V4 Site
 
 on:
   push:
@@ -15,7 +15,7 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
         with:
-          ref: 'dev'
+          ref: 'next'
 
       - name: Install pnpm
         run: npm i pnpm@7 -g
@@ -36,4 +36,5 @@ jobs:
         with:
           branch: gh-pages
           folder: packages/vant/site-dist
+          target-folder: v4
           clean: false

.github/workflows/sync-gitee.yml

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

.github/workflows/test.yml

@@ -1,6 +1,15 @@
 name: CI
 
-on: [push]
+on:
+  push:
+    branches:
+      - '**'
+
+  pull_request:
+    branches:
+      - dev
+
+  workflow_dispatch:
 
 jobs:
   lint:

.npmrc

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

README.md

@@ -67,10 +67,14 @@ pnpm add vant
 
 ```js
 import { createApp } from 'vue';
+// 1. Import the components you need
 import { Button } from 'vant';
+// 2. Import the components style
 import 'vant/lib/index.css';
 
 const app = createApp();
+
+// 3. Register the components you need
 app.use(Button);
 ```
 

README.zh-CN.md

@@ -71,10 +71,14 @@ pnpm add vant
 
 ```js
 import { createApp } from 'vue';
+// 1. 引入你需要的组件
 import { Button } from 'vant';
+// 2. 引入组件样式
 import 'vant/lib/index.css';
 
 const app = createApp();
+
+// 3. 注册你需要的组件
 app.use(Button);
 ```
 

package.json

@@ -14,14 +14,14 @@
     "*.{ts,tsx,js,vue,less}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix"
   },
-  "packageManager": "pnpm@7.1.6",
+  "packageManager": "pnpm@7.11.0",
   "devDependencies": {
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
-    "eslint": "^8.2.0",
+    "eslint": "^8.23.0",
     "husky": "^8.0.1",
     "nano-staged": "^0.8.0",
-    "prettier": "^2.5.0",
+    "prettier": "^2.7.1",
     "rimraf": "^3.0.2"
   },
   "pnpm": {

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

@@ -32,15 +32,15 @@
   "license": "MIT",
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/inquirer": "^8.1.3",
+    "@types/inquirer": "^8.2.3",
-    "release-it": "^15.1.1",
+    "release-it": "^15.4.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.2"
   },
   "dependencies": {
     "consola": "^2.11.3",
-    "fast-glob": "^3.2.4",
+    "fast-glob": "^3.2.11",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^10.1.0",
-    "inquirer": "^8.0.0",
+    "inquirer": "^8.2.4",
     "picocolors": "^1.0.0"
   },
   "release-it": {

packages/vant-area-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/area-data",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Vant 省市区数据",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -36,9 +36,9 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.29",
+    "esbuild": "^0.14.54",
-    "release-it": "^15.1.1",
+    "release-it": "^15.4.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.2"
   },
   "release-it": {
     "git": {

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

@@ -1150,10 +1150,10 @@ export const areaList = {
     232701: '漠河市',
     232721: '呼玛县',
     232722: '塔河县',
-    232790: '松岭区',
+    232761: '加格达奇区',
-    232791: '呼中区',
+    232762: '松岭区',
-    232792: '加格达奇区',
+    232763: '新林区',
-    232793: '新林区',
+    232764: '呼中区',
     310101: '黄浦区',
     310104: '徐汇区',
     310105: '长宁区',

packages/vant-cli/changelog.md

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

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -39,56 +39,56 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
+    "@jest/types": "^27.5.1",
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
-    "@jest/types": "^27",
+    "react": "^18.2.0",
-    "vue": "^3.2.27",
+    "react-dom": "^18.2.0",
-    "react": "^18",
+    "vue": "^3.2.38"
-    "react-dom": "^18"
   },
   "dependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.18.13",
-    "@babel/preset-typescript": "^7.16.0",
+    "@babel/preset-typescript": "^7.18.6",
-    "@docsearch/css": "^3.0.0",
+    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.0.0",
+    "@docsearch/js": "^3.2.1",
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^27.5.2",
-    "@vant/eslint-config": "^3.3.2",
+    "@vant/eslint-config": "^3.5.0",
-    "@vant/touch-emulator": "^1.3.2",
+    "@vant/touch-emulator": "^1.4.0",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.0.3",
-    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.8",
-    "commander": "^9.3.0",
+    "commander": "^9.4.0",
     "consola": "^2.15.3",
-    "conventional-changelog": "^3.1.24",
+    "conventional-changelog": "^3.1.25",
-    "esbuild": "^0.14.29",
+    "esbuild": "^0.14.54",
-    "eslint": "^8.1.0",
+    "eslint": "^8.23.0",
     "execa": "^5.1.1",
-    "fast-glob": "^3.2.7",
+    "fast-glob": "^3.2.11",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.6.0",
     "husky": "^8.0.1",
-    "jest": "^27.3.1",
+    "jest": "^27.5.1",
-    "jest-canvas-mock": "^2.3.1",
+    "jest-canvas-mock": "^2.4.0",
     "jest-serializer-html": "^7.1.0",
-    "less": "^4.1.2",
+    "less": "^4.1.3",
-    "markdown-it": "^12.2.0",
+    "markdown-it": "^12.3.2",
-    "markdown-it-anchor": "^8.4.1",
+    "markdown-it-anchor": "^8.6.4",
     "nano-staged": "^0.8.0",
     "nanospinner": "^1.1.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.16",
-    "postcss-load-config": "^3.1.0",
+    "postcss-load-config": "^3.1.4",
-    "prettier": "^2.5.0",
+    "prettier": "^2.7.1",
-    "release-it": "^15.1.1",
+    "release-it": "^15.4.1",
-    "transliteration": "^2.2.0",
+    "transliteration": "^2.3.5",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.2",
-    "vite": "^3.0.0",
+    "vite": "^3.0.9",
-    "vite-plugin-html": "^2.1.1",
+    "vite-plugin-html": "^2.1.2",
-    "vite-plugin-md": "^0.11.4",
+    "vite-plugin-md": "^0.11.9",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.1.5"
   },
   "release-it": {
     "git": {

packages/vant-cli/site/common/iframe-sync.js

@@ -1,7 +1,4 @@
-/**
+import { ref } from 'vue';
- * 同步父窗口和 iframe 的 vue-router 状态
- */
-
 import { config } from 'site-desktop-shared';
 
 let queue = [];
@@ -62,6 +59,49 @@ export function syncPathToChild() {
   }
 }
 
+export function syncThemeToChild(theme) {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(() => {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'updateTheme',
+          value: theme,
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function getDefaultTheme() {
+  const cache = window.localStorage.getItem('vantTheme');
+
+  if (cache) {
+    return cache;
+  }
+
+  const useDark =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return useDark ? 'dark' : 'light';
+}
+
+export function useCurrentTheme() {
+  const theme = ref(getDefaultTheme());
+
+  window.addEventListener('message', (event) => {
+    if (event.data?.type !== 'updateTheme') {
+      return;
+    }
+
+    const newTheme = event.data?.value || '';
+    theme.value = newTheme;
+  });
+
+  return theme;
+}
+
 export function listenToSyncPath(router) {
   window.addEventListener('message', (event) => {
     if (event.data?.type !== 'replacePath') {

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

@@ -1,15 +1,15 @@
-@import './var';
+@import './vars.less';
 
 body {
   min-width: 1100px;
   margin: 0;
   overflow-x: auto;
-  color: @van-doc-black;
+  color: var(--van-doc-text-color-2);
   font-size: 16px;
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
     Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
-  background-color: @van-doc-background-color;
+  background-color: var(--van-doc-background);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -41,8 +41,8 @@ a {
 .van-doc-row {
   width: 100%;
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
-    width: @van-doc-row-max-width;
+    width: var(--van-doc-row-max-width);
     margin: 0 auto;
   }
 }

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

@@ -1,20 +1,18 @@
-@import './var';
-
 code {
   position: relative;
   display: block;
   padding: 16px 20px;
   overflow-x: auto;
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
   font-weight: 400;
   font-size: 14px;
-  font-family: @van-doc-code-font-family;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
   line-height: 26px;
   white-space: pre-wrap;
   word-wrap: break-word;
   -webkit-font-smoothing: auto;
-  background-color: #f8f8f8;
+  background-color: var(--van-doc-code-background);
-  border-radius: @van-doc-border-radius;
+  border-radius: var(--van-doc-border-radius);
 }
 
 pre {
@@ -33,7 +31,7 @@ pre {
 }
 
 .hljs-subst {
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
 }
 
 .hljs-string,
@@ -42,18 +40,18 @@ pre {
 .hljs-template-tag,
 .hljs-template-variable,
 .hljs-addition {
-  color: @van-doc-green;
+  color: var(--van-doc-green);
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #999;
+  color: var(--van-doc-code-comment-color);
 }
 
 .hljs-params,
 .hljs-keyword,
 .hljs-attribute {
-  color: @van-doc-purple;
+  color: var(--van-doc-purple);
 }
 
 .hljs-deletion,

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

@@ -1,27 +0,0 @@
-@van-doc-black: #323233;
-@van-doc-blue: #1989fa;
-@van-doc-purple: #8080ff;
-@van-doc-fuchsia: #a7419e;
-@van-doc-green: #4fc08d;
-@van-doc-text-color: #34495e;
-@van-doc-text-light-blue: rgba(69, 90, 100, 0.6);
-@van-doc-background-color: #f7f8fa;
-@van-doc-grey: #999;
-@van-doc-dark-grey: #666;
-@van-doc-light-grey: #ccc;
-@van-doc-border-color: #f1f4f8;
-@van-doc-code-color: #58727e;
-@van-doc-code-background-color: #f1f4f8;
-@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-@van-doc-padding: 24px;
-@van-doc-row-max-width: 1680px;
-@van-doc-nav-width: 220px;
-@van-doc-border-radius: 20px;
-
-// header
-@van-doc-header-top-height: 64px;
-@van-doc-header-bottom-height: 50px;
-
-// simulator
-@van-doc-simulator-width: 360px;
-@van-doc-simulator-height: 620px;

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

@@ -0,0 +1,74 @@
+body {
+  // colors
+  --van-doc-black: #000;
+  --van-doc-white: #fff;
+  --van-doc-gray-1: #f7f8fa;
+  --van-doc-gray-2: #f2f3f5;
+  --van-doc-gray-3: #ebedf0;
+  --van-doc-gray-4: #dcdee0;
+  --van-doc-gray-5: #c8c9cc;
+  --van-doc-gray-6: #969799;
+  --van-doc-gray-7: #646566;
+  --van-doc-gray-8: #323233;
+  --van-doc-blue: #1989fa;
+  --van-doc-green: #07c160;
+
+  // sizes
+  --van-doc-padding: 24px;
+  --van-doc-row-max-width: 1680px;
+  --van-doc-nav-width: 220px;
+  --van-doc-border-radius: 20px;
+  --van-doc-simulator-width: 360px;
+  --van-doc-simulator-height: 620px;
+  --van-doc-header-top-height: 64px;
+}
+
+.van-doc-theme-light {
+  // text
+  --van-doc-text-color-1: var(--van-doc-black);
+  --van-doc-text-color-2: var(--van-doc-gray-8);
+  --van-doc-text-color-3: #34495e;
+  --van-doc-text-color-4: var(--van-doc-gray-6);
+  --van-doc-link-color: var(--van-doc-blue);
+
+  // background
+  --van-doc-background: #eff2f5;
+  --van-doc-background-2: var(--van-doc-white);
+  --van-doc-background-3: var(--van-doc-white);
+  --van-doc-header-background: #011f3c;
+  --van-doc-border-color: var(--van-doc-gray-2);
+
+  // code
+  --van-doc-code-color: #58727e;
+  --van-doc-code-comment-color: var(--van-doc-gray-6);
+  --van-doc-code-background: var(--van-doc-gray-1);
+
+  // blockquote
+  --van-doc-blockquote-color: #4994df;
+  --van-doc-blockquote-background: #ecf9ff;
+}
+
+.van-doc-theme-dark {
+  // text
+  --van-doc-text-color-1: var(--van-doc-white);
+  --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
+  --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
+  --van-doc-text-color-4: rgba(255, 255, 255, 0.6);
+  --van-doc-link-color: #1bb5fe;
+
+  // background
+  --van-doc-background: #202124;
+  --van-doc-background-2: rgba(255, 255, 255, 0.06);
+  --van-doc-background-3: rgba(255, 255, 255, 0.1);
+  --van-doc-header-background: rgba(1, 31, 60, 0.3);
+  --van-doc-border-color: #3a3a3c;
+
+  // code
+  --van-doc-code-color: rgba(200, 200, 200, 0.85);
+  --van-doc-code-comment-color: var(--van-doc-gray-7);
+  --van-doc-code-background: rgba(0, 0, 0, 0.24);
+
+  // blockquote
+  --van-doc-blockquote-color: #bae6fd;
+  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
+}

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

@@ -8,6 +8,7 @@
       :simulator="simulator"
       :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
+      :dark-mode-class="darkModeClass"
     >
       <router-view />
     </van-doc>
@@ -27,6 +28,7 @@ export default {
   data() {
     return {
       hasSimulator: true,
+      darkModeClass: config.site.darkModeClass,
     };
   },
 
@@ -70,18 +72,18 @@ export default {
   watch: {
     // eslint-disable-next-line
     '$route.path'() {
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     lang(val) {
       setLang(val);
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     config: {
       handler(val) {
         if (val) {
-          this.setTitleAndToogleSimulator();
+          this.setTitleAndToggleSimulator();
         }
       },
       immediate: true,
@@ -100,7 +102,7 @@ export default {
   },
 
   methods: {
-    setTitleAndToogleSimulator() {
+    setTitleAndToggleSimulator() {
       let { title } = this.config;
 
       const navItems = this.config.nav.reduce(

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

@@ -18,18 +18,18 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-container {
   box-sizing: border-box;
-  padding-left: @van-doc-nav-width;
+  padding-left: var(--van-doc-nav-width);
   overflow: hidden;
 
   &--with-simulator {
-    padding-right: @van-doc-simulator-width + @van-doc-padding;
+    padding-right: calc(
+      var(--van-doc-simulator-width) + var(--van-doc-padding)
+    );
 
     @media (max-width: 1100px) {
-      padding-right: @van-doc-simulator-width - 8px;
+      padding-right: calc(var(--van-doc-simulator-width) - 8px);
     }
   }
 }

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

@@ -82,14 +82,12 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-card {
   margin-bottom: 24px;
   padding: 24px;
-  background-color: #fff;
+  background-color: var(--van-doc-background-2);
-  border-radius: @van-doc-border-radius;
+  border-radius: var(--van-doc-border-radius);
-  box-shadow: 0 8px 12px #ebedf0;
+  overflow: auto;
 
   > pre code {
     position: relative;
@@ -144,15 +142,15 @@ export default {
   > table a,
   > blockquote a {
     margin: 0 1px;
-    color: @van-doc-blue;
+    color: var(--van-doc-link-color);
     -webkit-font-smoothing: auto;
 
     &:hover {
-      color: darken(@van-doc-blue, 10%);
+      opacity: 0.8;
     }
 
     &:active {
-      color: darken(@van-doc-blue, 20%);
+      opacity: 0.6;
     }
   }
 
@@ -160,7 +158,6 @@ export default {
   > h4,
   > h5,
   > h6 {
-    color: @van-doc-black;
     font-weight: normal;
     line-height: 1.6;
 
@@ -189,23 +186,19 @@ export default {
 
   > p {
     margin-top: 8px;
-  }
+    color: var(--van-doc-text-color-3);
-
-  > p,
-  > blockquote p {
-    color: @van-doc-text-color;
     font-size: 15px;
     line-height: 26px;
 
     strong {
-      color: black;
+      color: var(--van-doc-text-color-1);
     }
   }
 
   > table {
     width: 100%;
     margin-top: 12px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 14px;
     line-height: 1.5;
     border-collapse: collapse;
@@ -226,7 +219,7 @@ export default {
 
     td {
       padding: 8px;
-      border-top: 1px solid @van-doc-code-background-color;
+      border-top: 1px solid var(--van-doc-border-color);
 
       &:first-child {
         padding-left: 0;
@@ -235,10 +228,10 @@ export default {
         code {
           margin: 0;
           padding: 2px 6px;
-          color: @van-doc-blue;
+          color: var(--van-doc-blue);
           font-weight: 600;
           font-size: 11px;
-          background-color: fade(@van-doc-blue, 10%);
+          background-color: rgba(25, 137, 250, 0.15);
           border-radius: 20px;
         }
       }
@@ -250,9 +243,9 @@ export default {
 
     em {
       display: inline-block;
-      color: @van-doc-green;
+      color: var(--van-doc-green);
       font-size: 14px;
-      font-family: @van-doc-code-font-family;
+      font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
       font-style: normal;
       max-width: 300px;
       -webkit-font-smoothing: auto;
@@ -268,7 +261,7 @@ export default {
     position: relative;
     margin: 5px 0 5px 10px;
     padding-left: 15px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
@@ -280,7 +273,7 @@ export default {
       width: 6px;
       height: 6px;
       margin-top: 10px;
-      border: 1px solid @van-doc-dark-grey;
+      border: 1px solid currentColor;
       border-radius: 50%;
       content: '';
     }
@@ -310,15 +303,17 @@ export default {
   > blockquote {
     margin: 16px 0 0;
     padding: 16px;
-    background-color: #ecf9ff;
+    font-size: 14px;
-    border-radius: @van-doc-border-radius;
+    color: var(--van-doc-blockquote-color);
+    background-color: var(--van-doc-blockquote-background);
+    border-radius: var(--van-doc-border-radius);
   }
 
   > img,
   > p img {
     width: 100%;
     margin: 16px 0;
-    border-radius: @van-doc-border-radius;
+    border-radius: var(--van-doc-border-radius);
   }
 }
 
@@ -333,7 +328,6 @@ export default {
 
     h1,
     h2 {
-      color: @van-doc-black;
       font-weight: normal;
       line-height: 1.5;
 

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

@@ -24,6 +24,16 @@
             </a>
           </li>
 
+          <li v-if="darkModeClass" class="van-doc-header__top-nav-item">
+            <a
+              class="van-doc-header__link"
+              target="_blank"
+              @click="toggleTheme"
+            >
+              <img :src="themeImg" />
+            </a>
+          </li>
+
           <li
             ref="version"
             v-if="versions"
@@ -69,6 +79,7 @@
 <script>
 import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
+import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
@@ -82,10 +93,12 @@ export default {
     config: Object,
     versions: Array,
     langConfigs: Array,
+    darkModeClass: String,
   },
 
   data() {
     return {
+      currentTheme: getDefaultTheme(),
       packageVersion,
       showVersionPop: false,
     };
@@ -112,9 +125,32 @@ export default {
     searchConfig() {
       return this.config.searchConfig;
     },
+
+    themeImg() {
+      if (this.currentTheme === 'light') {
+        return 'https://b.yzcdn.cn/vant/dark-theme.svg';
+      }
+      return 'https://b.yzcdn.cn/vant/light-theme.svg';
+    },
+  },
+
+  watch: {
+    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}`);
+        syncThemeToChild(newVal);
+      },
+      immediate: true,
+    },
   },
 
   methods: {
+    toggleTheme() {
+      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+    },
+
     toggleVersionPop() {
       const val = !this.showVersionPop;
 
@@ -147,18 +183,16 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-header {
   width: 100%;
-  background-color: #001938;
+  background-color: var(--van-doc-header-background);
   user-select: none;
 
   &__top {
     display: flex;
     align-items: center;
-    height: @van-doc-header-top-height;
+    height: var(--van-doc-header-top-height);
-    padding: 0 @van-doc-padding;
+    padding: 0 var(--van-doc-padding);
 
     &-nav {
       flex: 1;
@@ -234,7 +268,7 @@ export default {
         transition: 0.2s;
 
         &:hover {
-          color: @van-doc-blue;
+          color: var(--van-doc-link-color);
           background-color: #f7f8fa;
         }
       }
@@ -268,6 +302,8 @@ export default {
   }
 
   &__link {
+    cursor: pointer;
+
     span {
       color: #fff;
       font-size: 16px;

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

@@ -71,22 +71,19 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-nav {
   position: fixed;
   left: 0;
   z-index: 1;
-  min-width: @van-doc-nav-width;
+  min-width: var(--van-doc-nav-width);
-  max-width: @van-doc-nav-width;
+  max-width: var(--van-doc-nav-width);
-  padding: @van-doc-padding 0;
+  padding: 8px 0;
   overflow-y: scroll;
-  background-color: #fff;
+  background-color: var(--van-doc-background-2);
-  box-shadow: 0 8px 12px #ebedf0;
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     left: 50%;
-    margin-left: -(@van-doc-row-max-width / 2);
+    margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
   }
 
   &::-webkit-scrollbar {
@@ -110,8 +107,8 @@ export default {
   }
 
   &__title {
-    padding: 8px 0 8px @van-doc-padding;
+    padding: 24px 0 0 var(--van-doc-padding);
-    color: #455a64;
+    color: var(--van-doc-text-color-2);
     font-weight: 600;
     font-size: 15px;
     line-height: 28px;
@@ -121,21 +118,19 @@ export default {
     a {
       display: block;
       margin: 8px 0;
-      padding: 8px 0 8px @van-doc-padding;
+      padding: 6px 0 6px var(--van-doc-padding);
-      color: #455a64;
+      color: var(--van-doc-text-color-3);
       font-size: 14px;
       line-height: 20px;
       transition: color 0.2s;
 
       &:hover,
       &.active {
-        color: @van-doc-green;
+        color: var(--van-doc-link-color);
       }
 
       &.active {
         font-weight: 600;
-        background-color: #ebfff0;
-        border-radius: 999px;
       }
 
       span {

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

@@ -38,8 +38,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 #docsearch {
   display: inline-block;
   vertical-align: middle;

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

@@ -44,34 +44,31 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-simulator {
   position: absolute;
-  top: @van-doc-padding + @van-doc-header-top-height;
+  top: calc(var(--van-doc-padding) + var(--van-doc-header-top-height));
-  right: @van-doc-padding;
+  right: var(--van-doc-padding);
   z-index: 1;
   box-sizing: border-box;
-  width: @van-doc-simulator-width;
+  width: var(--van-doc-simulator-width);
-  min-width: @van-doc-simulator-width;
+  min-width: var(--van-doc-simulator-width);
   overflow: hidden;
-  background: #fafafa;
+  background: var(--van-doc-background-2);
-  border-radius: @van-doc-border-radius;
+  border-radius: var(--van-doc-border-radius);
-  box-shadow: 0 8px 12px #ebedf0;
 
   @media (max-width: 1100px) {
     right: auto;
     left: 750px;
   }
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     right: 50%;
-    margin-right: -(@van-doc-row-max-width / 2) + 24px;
+    margin-right: calc(var(--van-doc-row-max-width) / 2 * -1 + 24px);
   }
 
   &-fixed {
     position: fixed;
-    top: @van-doc-padding;
+    top: var(--van-doc-padding);
   }
 
   iframe {

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

@@ -5,6 +5,7 @@
       :config="config"
       :versions="versions"
       :lang-configs="langConfigs"
+      :dark-mode-class="darkModeClass"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
@@ -39,8 +40,9 @@ export default {
     lang: String,
     versions: Array,
     simulator: String,
-    hasSimulator: Boolean,
     langConfigs: Array,
+    hasSimulator: Boolean,
+    darkModeClass: String,
     config: {
       type: Object,
       required: true,
@@ -108,7 +110,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-@import '../../common/style/var';
-</style>

packages/vant-cli/site/desktop/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-sync';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);

packages/vant-cli/site/index.html

@@ -30,7 +30,7 @@
     </script>
     <% } %>
   </head>
-  <body ontouchstart>
+  <body>
     <div id="app"></div>
     <script type="module" src="/desktop/main.js"></script>
   </body>

packages/vant-cli/site/mobile.html

@@ -39,7 +39,7 @@
     </script>
     <% } %>
   </head>
-  <body ontouchstart>
+  <body>
     <div id="app"></div>
     <script type="module" src="/mobile/main.js"></script>
   </body>

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

@@ -10,21 +10,49 @@
 </template>
 
 <script>
+import { watch } from 'vue';
 import DemoNav from './components/DemoNav.vue';
+import { useCurrentTheme } from '../common/iframe-sync';
+import { config } from 'site-mobile-shared';
 
 export default {
   components: { DemoNav },
+
+  setup() {
+    const theme = useCurrentTheme();
+
+    watch(
+      theme,
+      (newVal, oldVal) => {
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+
+        const { darkModeClass } = config.site;
+        if (darkModeClass) {
+          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+        }
+      },
+      { immediate: true }
+    );
+  },
 };
 </script>
 
 <style lang="less">
-@import '../common/style/var';
 @import '../common/style/base';
 
 body {
   min-width: 100vw;
 }
 
+.van-doc-theme-light {
+  background-color: var(--van-doc-gray-1);
+}
+
+.van-doc-theme-dark {
+  background-color: var(--van-doc-black);
+}
+
 ::-webkit-scrollbar {
   width: 0;
   background: transparent;

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

@@ -20,13 +20,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-demo-block {
   &__title {
     margin: 0;
     padding: 32px 16px 16px;
-    color: @van-doc-text-light-blue;
+    color: var(--van-doc-text-color-4);
     font-weight: normal;
     font-size: 14px;
     line-height: 16px;

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

@@ -52,14 +52,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home {
   box-sizing: border-box;
   width: 100%;
   min-height: 100vh;
   padding: 46px 20px 20px;
-  background: #fff;
 
   &__title,
   &__desc {
@@ -94,7 +91,7 @@ export default {
 
   &__desc {
     margin: 0 0 40px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 }

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

@@ -43,12 +43,10 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home-nav {
   &__title {
     margin: 24px 0 8px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 
@@ -57,20 +55,20 @@ export default {
     display: flex;
     margin: 0 0 12px;
     padding-left: 20px;
-    color: #323233;
+    color: var(--van-doc-text-color-3);
     font-weight: 600;
     font-size: 14px;
     line-height: 40px;
-    background: #f7f8fa;
+    background-color: var(--van-doc-background-3);
     border-radius: 99px;
-    transition: background 0.3s;
+    transition: opacity 0.3s;
 
     &:hover {
-      background: darken(#f7f8fa, 3%);
+      opacity: 0.8;
     }
 
     &:active {
-      background: darken(#f7f8fa, 6%);
+      opacity: 0.6;
     }
   }
 

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

@@ -42,7 +42,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: #fff;
+  background-color: var(--van-doc-background-3);
 
   &__title {
     font-weight: 600;

packages/vant-cli/site/mobile/main.js

@@ -13,3 +13,8 @@ window.app = createApp(App)
 setTimeout(() => {
   window.app.mount('#app');
 }, 0);
+
+// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490
+document.addEventListener('touchstart', () => {}, {
+  passive: true,
+});

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome.vue';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-sync';
 
 const { locales, defaultLang } = config.site;
 

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

@@ -12,7 +12,7 @@ import { compileBundles } from '../compiler/compile-bundles.js';
 import { genPackageEntry } from '../compiler/gen-package-entry.js';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
 import { genComponentStyle } from '../compiler/gen-component-style.js';
-import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
+import { SRC_DIR, LIB_DIR, ES_DIR, getVantConfig } from '../common/constant.js';
 import { genPackageStyle } from '../compiler/gen-package-style.js';
 import { genWebStormTypes } from '../compiler/web-types/index.js';
 import {
@@ -135,9 +135,10 @@ async function buildPackageStyleEntry() {
 }
 
 async function buildBundledOutputs() {
+  const config = getVantConfig();
   setModuleEnv('esmodule');
   await compileBundles();
-  genWebStormTypes();
+  genWebStormTypes(config.build?.tagPrefix);
 }
 
 const tasks = [

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

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

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

@@ -40,7 +40,7 @@ export async function parseAndWrite(options: Options) {
   );
 }
 
-export function genWebStormTypes() {
+export function genWebStormTypes(tagPrefix?: string) {
   const pkgJson = getPackageJson();
   const vantConfig = getVantConfig();
 
@@ -50,5 +50,6 @@ export function genWebStormTypes() {
     test: /README\.md/,
     version: pkgJson.version,
     outputDir: LIB_DIR,
+    tagPrefix,
   });
 }

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

@@ -14,12 +14,19 @@ export function getViteConfigForPackage({
   const { name, build } = getVantConfig();
   const entryExtension = build?.extensions?.esm || '.js';
   const entry = join(ES_DIR, `index${entryExtension}`);
+  const shouldReplaceEnv = minify || formats?.includes('umd');
 
   return {
     root: CWD,
 
     logLevel: 'silent',
 
+    define: shouldReplaceEnv
+      ? {
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        }
+      : undefined,
+
     build: {
       lib: {
         name,
@@ -30,6 +37,7 @@ export function getViteConfigForPackage({
           return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
         },
       },
+
       // terser has better compression than esbuild
       minify: minify ? 'terser' : false,
       rollupOptions: {

packages/vant-compat/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-compat/README.md

@@ -0,0 +1,32 @@
+# @vant/compat
+
+This package provides Vant 3 compatible behavior for Vant 4 users.
+
+## Install
+
+```shell
+# with npm
+npm i @vant/compat
+
+# with yarn
+yarn add @vant/compat
+
+# with pnpm
+pnpm add @vant/compat
+```
+
+## Usage
+
+```js
+// Same as Toast in Vant 3
+import { Toast } from '@vant/compat';
+
+// Same as Dialog in Vant 3
+import { Dialog } from '@vant/compat';
+
+// Same as Notify in Vant 3
+import { Notify } from '@vant/compat';
+
+// Same as ImagePreview in Vant 3
+import { ImagePreview } from '@vant/compat';
+```

packages/vant-compat/build.js

@@ -0,0 +1 @@
+require('../vant-use/build');

packages/vant-compat/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vant/compat",
+  "version": "1.0.0",
+  "description": "Provide Vant 3 compatible behavior for Vant 4",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "dev": "node ./build.js -w",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node ./build.js",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "release": "pnpm build && release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vant-ui/vant.git",
+    "directory": "packages/vant-compat"
+  },
+  "bugs": "https://github.com/vant-ui/vant/issues",
+  "author": "chenjiahan",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/runtime-core": "^3.2.27",
+    "vant": "workspace:*",
+    "vue": "^3.2.27",
+    "esbuild": "^0.14.29",
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "release: @vant/compat ${version}"
+    }
+  }
+}

packages/vant-compat/src/dialog.ts

@@ -0,0 +1,30 @@
+import {
+  Dialog as VanDialog,
+  showDialog,
+  closeDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Dialog = (...args: Parameters<typeof showDialog>) =>
+  showDialog(...args);
+
+Dialog.Component = VanDialog;
+Dialog.alert = Dialog;
+Dialog.config = showConfirmDialog;
+Dialog.close = closeDialog;
+Dialog.setDefaultOptions = setDialogDefaultOptions;
+Dialog.resetDefaultOptions = resetDialogDefaultOptions;
+
+Dialog.install = (app: App) => {
+  app.use(Dialog.Component);
+  app.config.globalProperties.$dialog = Dialog;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof Dialog;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { ImagePreview as VanImagePreview, showImagePreview } from 'vant';
+import type { App } from 'vue';
+
+export const ImagePreview = (...args: Parameters<typeof showImagePreview>) =>
+  showImagePreview(...args);
+
+ImagePreview.Component = VanImagePreview;
+
+ImagePreview.install = (app: App) => {
+  app.use(ImagePreview.Component);
+};

packages/vant-compat/src/index.ts

@@ -0,0 +1,4 @@
+export * from './toast';
+export * from './notify';
+export * from './dialog';
+export * from './image-preview';

packages/vant-compat/src/notify.ts

@@ -0,0 +1,27 @@
+import {
+  Notify as VanNotify,
+  showNotify,
+  closeNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Notify = (...args: Parameters<typeof showNotify>) =>
+  showNotify(...args);
+
+Notify.clear = closeNotify;
+Notify.Component = VanNotify;
+Notify.setDefaultOptions = setNotifyDefaultOptions;
+Notify.resetDefaultOptions = resetNotifyDefaultOptions;
+
+Notify.install = (app: App) => {
+  app.use(Notify.Component);
+  app.config.globalProperties.$notify = Notify;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $notify: typeof Notify;
+  }
+}

packages/vant-compat/src/toast.ts

@@ -0,0 +1,49 @@
+import {
+  showToast,
+  closeToast,
+  showFailToast,
+  showSuccessToast,
+  allowMultipleToast,
+  setToastDefaultOptions,
+  resetToastDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Toast = (...args: Parameters<typeof showToast>) => {
+  const toast = showToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.fail = (...args: Parameters<typeof showFailToast>) => {
+  const toast = showFailToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.success = (...args: Parameters<typeof showSuccessToast>) => {
+  const toast = showSuccessToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.clear = closeToast;
+Toast.allowMultiple = allowMultipleToast;
+Toast.setDefaultOptions = setToastDefaultOptions;
+Toast.resetDefaultOptions = resetToastDefaultOptions;
+
+Toast.install = (app: App) => {
+  app.config.globalProperties.$toast = Toast;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof Toast;
+  }
+}

packages/vant-compat/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true
+  },
+  "include": ["src/**/*"]
+}

packages/vant-eslint-config/package.json

@@ -20,17 +20,17 @@
   "author": "chenjiahan",
   "license": "MIT",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.30.3",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.30.3",
+    "@typescript-eslint/parser": "^5.36.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.1.1"
+    "eslint-plugin-vue": "^9.4.0"
   },
   "devDependencies": {
     "enhanced-resolve": "^5.10.0",
-    "eslint": "^8.19.0",
+    "eslint": "^8.23.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "eslint": "^7.32.0 || ^8.2.0"

packages/vant-icons/package.json

@@ -23,7 +23,7 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "release-it": "^15.1.1"
+    "release-it": "^15.4.1"
   },
   "release-it": {
     "git": {

packages/vant-popperjs/package.json

@@ -31,18 +31,18 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/vant-ui/vant.git",
-    "directory": "packages/vant-markdown-loader"
+    "directory": "packages/vant-popperjs"
   },
   "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.9.2"
+    "@popperjs/core": "^2.11.6"
   },
   "devDependencies": {
-    "esbuild": "^0.14.29",
+    "esbuild": "^0.14.54",
-    "release-it": "^15.1.1",
+    "release-it": "^15.4.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.2"
   },
   "release-it": {
     "git": {

packages/vant-touch-emulator/build.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcFile = path.join(__dirname, 'src', 'index.js');
+const distDir = path.join(__dirname, 'dist');
+
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir);
+}
+fs.copyFileSync(srcFile, path.join(distDir, 'index.js'));
+fs.copyFileSync(srcFile, path.join(distDir, 'index.mjs'));

packages/vant-touch-emulator/changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### [v1.4.0]
+
+`2022-08-06`
+
+- support `.mjs` extension
+
 ### [v1.3.1]
 
 `2021-07-06`

packages/vant-touch-emulator/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@vant/touch-emulator",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Vant touch emulator",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "scripts": {
+    "build": "node ./build.js",
+    "prepare": "pnpm build"
+  },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "repository": {
     "type": "git",

packages/vant-use/build.js

@@ -14,7 +14,7 @@ function bundleBundle(format) {
     outfile,
     // preserve Chinese character
     charset: 'utf8',
-    external: ['vue'],
+    external: ['vue', 'vant'],
     entryPoints: ['./src/index.ts'],
   }).then(finish);
 }

packages/vant-use/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/use",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "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.29",
+    "esbuild": "^0.14.54",
-    "release-it": "^15.1.1",
+    "release-it": "^15.4.1",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.2",
-    "vue": "^3.2.27"
+    "vue": "^3.2.38"
   },
   "release-it": {
     "git": {

packages/vant-use/src/useClickAway/index.ts

@@ -7,7 +7,10 @@ export type UseClickAwayOptions = {
 };
 
 export function useClickAway(
-  target: Element | Ref<Element | undefined>,
+  target:
+    | Element
+    | Ref<Element | undefined>
+    | Array<Element | Ref<Element | undefined>>,
   listener: EventListener,
   options: UseClickAwayOptions = {}
 ) {
@@ -18,8 +21,13 @@ export function useClickAway(
   const { eventName = 'click' } = options;
 
   const onClick = (event: Event) => {
-    const element = unref(target);
+    const targets = Array.isArray(target) ? target : [target];
-    if (element && !element.contains(event.target as Node)) {
+    const isClickAway = targets.every((item) => {
+      const element = unref(item);
+      return element && !element.contains(event.target as Node);
+    });
+
+    if (isClickAway) {
       listener(event);
     }
   };

packages/vant-use/src/useEventListener/index.ts

@@ -10,6 +10,16 @@ export type UseEventListenerOptions = {
   passive?: boolean;
 };
 
+export function useEventListener<K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+  options?: UseEventListenerOptions
+): void;
+export function useEventListener(
+  type: string,
+  listener: EventListener,
+  options?: UseEventListenerOptions
+): void;
 export function useEventListener(
   type: string,
   listener: EventListener,
@@ -27,7 +37,10 @@ export function useEventListener(
     const element = unref(target);
 
     if (element && !attached) {
-      element.addEventListener(type, listener, { capture, passive });
+      element.addEventListener(type, listener, {
+        capture,
+        passive,
+      });
       attached = true;
     }
   };

packages/vant-use/src/usePageVisibility/index.ts

@@ -1,7 +1,7 @@
 import { ref, Ref } from 'vue';
 import { inBrowser } from '../utils';
 
-type VisibilityState = "hidden" | "visible";
+type VisibilityState = 'hidden' | 'visible';
 
 let visibility: Ref<VisibilityState>;
 

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

@@ -172,6 +172,8 @@ module.exports = {
 };
 ```
 
+> Tips: 在配置 postcss-pxtorem 时，同样应避免 ignore node_modules 目录，否则会导致 Vant 样式无法被编译。
+
 #### 其他设计稿尺寸
 
 如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 `rootValue` 配置调整为:

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

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

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

@@ -31,7 +31,7 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 ### 版本提示
 
-你当前浏览的是 **Vant 3.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant/v2)。
+你当前浏览的是 **Vant 4.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant/v2)。
 
 ### 快速上手
 

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

@@ -1,4 +1,4 @@
-# 从 v2 升级
+# 从 v2 升级到 v3
 
 ### 介绍
 

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

@@ -0,0 +1,365 @@
+# 从 v3 升级到 v4
+
+### 介绍
+
+本文档提供了从 Vant 3 到 Vant 4 的升级指南。
+
+## 按需引入方式调整
+
+### 移除 babel-plugin-import
+
+从 Vant 4.0 版本开始，将不再支持 `babel-plugin-import`，请移除项目中依赖的 `babel-plugin-import` 插件。
+
+只需要删除 `babel.config.js` 中的以下代码即可：
+
+```diff
+module.exports = {
+  plugins: [
+-    ['import', {
+-      libraryName: 'vant',
+-      libraryDirectory: 'es',
+-      style: true
+-    }, 'vant']
+  ]
+};
+```
+
+#### 收益
+
+移除 `babel-plugin-import` 有以下收益：
+
+- 不再强依赖 babel，项目可以使用 esbuild、swc 等更高效的编译工具，大幅度提升编译效率。
+- 不再受到 `babel-plugin-import` 的 import 写法限制，可以从 vant 中导入除了组件以外的其他内容，比如 Vant 4 中新增的 `showToast` 等方法：
+
+```ts
+import { showToast, showDialog } from 'vant';
+```
+
+#### 样式引入方案
+
+移除 `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';
+```
+
+## 组件重构
+
+### 介绍
+
+在 Vant 4 中，一共有三个组件被完全重构，它们是：
+
+- `Area`
+- `Picker`
+- `DatetimePicker`
+
+之所以重构这三个组件，是因为在之前的版本中，`Picker` 组件的 API 设计存在一些不合理的设计，导致大家在使用时经常遇到问题，比如：
+
+- columns 数据格式定义不合理，容易产生误解
+- 数据流不清晰，暴露了过多的实例方法来对数据进行操作
+
+为了解决上述问题，我们在 v4 版本中对 `Picker` 组件进行了重构，同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。
+
+### Picker 组件重构
+
+#### 主要变更
+
+- 支持通过 `v-model` 绑定当前选中的值，移除 `default-index` 属性
+- 重新定义了 `columns` 属性的结构
+- 移除了操作内部数据的实例方法，仅保留 `confirm` 方法
+- 新增 `getSelectedOptions` 实例方法
+- 调整了 `confirm`、`cancel`、`change` 事件的参数
+- 重命名 `item-height` 属性为 `option-height`
+- 重命名 `visible-item-count` 属性为 `visible-option-num`
+
+> 详细用法请参见 [Picker 组件文档](#/zh-CN/picker)。
+
+### DatetimePicker 组件重构
+
+DatetimePicker 组件被拆分为：
+
+- [TimePicker](#/zh-CN/time-picker): 用于时间选择。
+- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
+- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
+
+同时，TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构，并优化了部分 API 设计。
+
+#### 主要变更
+
+以下是 TimePicker 和 DatePicker 的主要 API 变化，更多细节请参考 [TimePicker](#/zh-CN/time-picker) 和 [DatePicker](#/zh-CN/date-picker) 文档。
+
+- `v-model` 绑定的值调整为数组格式
+- 新增 `columns-type` 属性，用于控制选项类型和顺序
+- 移除 `type` 属性和 `columns-order` 属性
+- 移除 `getPicker` 方法
+- 调整 `confirm`、`cancel`、`change` 事件的参数，与 Picker 组件保持一致
+
+> Vant 4 不再提供旧版的 DatetimePicker 组件，使用 PickerGroup 组件可以实现更灵活、更丰富的交互效果，具体用法请参考 [PickerGroup](#/zh-CN/picker-group) 组件文档。
+
+### Area 组件重构
+
+Area 组件是基于 Picker 组件进行封装的，因此本次升级也对 Area 组件进行了内部逻辑的重构，并优化了部分 API 设计。
+
+#### 主要变更
+
+- 支持通过 `v-model` 绑定当前选中的值
+- 移除 `reset` 方法，现在可以通过修改 `v-model` 来进行重置
+- 移除 `is-oversea-code` 属性
+- 调整 `confirm`、`cancel`、`change` 事件的参数，与 Picker 组件保持一致
+- 重命名 `value` 属性为 `modelValue`
+- 重命名 `item-height` 属性为 `option-height`
+- 重命名 `visible-item-count` 属性为 `visible-option-num`
+
+> 详细用法请参见 [Area 组件文档](#/zh-CN/area)。
+
+## API 调整
+
+### Dialog 调用方式调整
+
+在 Vant 3 中，`Dialog` 是一个函数，调用函数可以快速唤起全局的弹窗组件，而 `Dialog.Component` 才是 `Dialog` 组件对象，这与大部分组件的用法存在差异，容易导致使用错误。
+
+为了更符合直觉，我们在 Vant 4 中调整了 `Dialog` 的调用方式，将 `Dialog()` 函数重命名为 `showDialog()`。
+
+```js
+// Vant 3
+Dialog(); // 函数调用
+Dialog.Component; // 组件对象
+
+// Vant 4
+showDialog(); // 函数调用
+Dialog; // 组件对象
+```
+
+`Dialog` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+
+```js
+Dialog(); // -> showDialog()
+Dialog.alert(); // -> showDialog()
+Dialog.confirm(); // -> showConfirmDialog()
+Dialog.close(); // -> closeDialog();
+Dialog.setDefaultOptions(); // -> setDialogDefaultOptions()
+Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
+```
+
+#### 兼容方案
+
+为了便于代码迁移，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
+
+```js
+import { Dialog } from '@vant/compat';
+
+Dialog();
+Dialog.close();
+```
+
+`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为，因此你只需要修改 `Dialog` 的引用路径，其他代码可以保持不变。
+
+### Toast 调用方式调整
+
+Vant 4 中，`Toast` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
+
+```js
+// Vant 3
+Toast(); // 函数调用
+
+// Vant 4
+showToast(); // 函数调用
+Toast; // 组件对象
+```
+
+`Toast` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+
+```js
+Toast(); // -> showToast()
+Toast.fail(); // -> showFailToast()
+Toast.success(); // -> showSuccessToast()
+Toast.loading(); // -> showLoadingToast()
+Toast.clear(); // -> closeToast()
+Toast.setDefaultOptions(); // -> setToastDefaultOptions()
+Toast.resetDefaultOptions(); // -> resetToastDefaultOptions()
+```
+
+同时，Vant 4 将不再在 `this` 对象上全局注册 `$toast` 方法，这意味着 `this` 对象上将无法访问到 `$toast`。
+
+#### 兼容方案
+
+为了便于代码迁移，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `Toast` 对象来兼容原有代码。
+
+```js
+import { Toast } from '@vant/compat';
+
+Toast();
+Toast.clear();
+```
+
+`@vant/compat` 中导出的 `Toast` 与 Vant 3 中的 `Toast` 拥有完全一致的 API 和行为，因此你只需要修改 `Toast` 的引用路径，其他代码可以保持不变。
+
+### Notify 调用方式调整
+
+Vant 4 中，`Notify` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
+
+```js
+// Vant 3
+Notify(); // 函数调用
+Notify.Component; // 组件对象
+
+// Vant 4
+showNotify(); // 函数调用
+Notify; // 组件对象
+```
+
+`Notify` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+
+```js
+Notify(); // -> showNotify()
+Notify.clear(); // -> closeNotify()
+Notify.setDefaultOptions(); // -> setNotifyDefaultOptions()
+Notify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()
+```
+
+同时，Vant 4 将不再在 `this` 对象上全局注册 `$notify` 方法，这意味着 `this` 对象上将无法访问到 `$notify`。
+
+#### 兼容方案
+
+为了便于代码迁移，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `Notify` 对象来兼容原有代码。
+
+```js
+import { Notify } from '@vant/compat';
+
+Notify();
+Notify.clear();
+```
+
+`@vant/compat` 中导出的 `Notify` 与 Vant 3 中的 `Notify` 拥有完全一致的 API 和行为，因此你只需要修改 `Notify` 的引用路径，其他代码可以保持不变。
+
+### ImagePreview 调用方式调整
+
+Vant 4 中，`ImagePreview` 组件的调用方式也进行了调整，与 `ImagePreview` 组件的改动一致：
+
+```js
+// Vant 3
+ImagePreview(); // 函数调用
+ImagePreview.Component; // 组件对象
+
+// Vant 4
+showImagePreview(); // 函数调用
+ImagePreview; // 组件对象
+```
+
+#### 兼容方案
+
+为了便于代码迁移，我们提供了兼容方案，你可以使用 `@vant/compat` 中导出的 `ImagePreview` 对象来兼容原有代码。
+
+```js
+import { ImagePreview } from '@vant/compat';
+
+ImagePreview();
+```
+
+`@vant/compat` 中导出的 `ImagePreview` 与 Vant 3 中的 `ImagePreview` 拥有完全一致的 API 和行为，因此你只需要修改 `ImagePreview` 的引用路径，其他代码可以保持不变。
+
+### 事件命名调整
+
+从 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} />
+```
+
+### 其他 API 调整
+
+在 Vant 4.0 版本中，以下 API 进行了不兼容更新：
+
+#### AddressEdit
+
+- 移除 `show-postal` 属性
+- 移除 `postal-validator` 属性
+- `change-area` 事件的参数调整为 `PickerOption[]` 类型
+- 移除未在文档中标注的 `getArea` 实例方法
+
+#### Popup
+
+Popup 的 CSS 样式进行了一定调整，请确认是否对项目中的 UI 产生影响。
+
+- 默认添加了 `box-sizing: border-box` 样式
+- 调整了 `position="center"` 时的水平居中方式，以解决弹窗宽度无法正确自适应的问题：
+
+```less
+// Vant 3
+.van-popup--center {
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+// Vant 4
+.van-popup--center {
+  left: 0;
+  right: 0;
+  width: fit-content;
+  max-width: calc(100vw - var(--van-padding-md) * 2);
+  margin: 0 auto;
+  transform: translateY(-50%);
+}
+```
+
+#### Tabs
+
+- 移除了 `click` 和 `disabled` 事件，请使用 `click-tab` 事件代替
+
+## 样式变量调整
+
+### 移除 Less 变量
+
+目前 Vant 已经支持了基于 CSS 变量的主题定制能力，因此后续将不再提供基于 Less 的主题定制方式。
+
+这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件，只会提供编译后的 `.css` 样式文件。
+
+如果你的项目正在使用旧版的 Less 主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行替换。
+
+### 简化 CSS 变量名
+
+考虑到 **代码体积** 和 **使用便捷性**，我们对部分 CSS 变量的名称进行了简化，在变量名中使用更简短的单词，涉及以下变更：
+
+```less
+animation-duration               ->  duration
+animation-timing-function-enter  ->  ease-out
+animation-timing-function-leave  ->  ease-in
+background-color                 ->  background
+background-color-light           ->  background-2
+border-radius                    ->  radius
+border-width-base                ->  border-width
+box-shadow                       ->  shadow
+font-family                      ->  font
+font-weight-bold                 ->  font-bold
+price-integer-font               ->  price-font
+text-link                        ->  link
+transition-duration              ->  duration
+```
+
+由于涉及的 CSS 变量较多，建议在代码仓库中进行全局匹配和替换。

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

@@ -26,7 +26,7 @@ pnpm add vant
 
 ### CDN
 
-The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
+The easiest way to use Vant is to include a CDN link in the HTML file, after which you can access all components via the global variable `vant`.
 
 ```html
 <!-- import style -->
@@ -50,7 +50,7 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
   app.use(vant.Lazyload);
 
   // Call function component
-  vant.Toast('Message');
+  vant.showToast('Message');
 
   app.mount('#app');
 </script>
@@ -92,9 +92,28 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to
 
 ## Usage
 
-### Import on demand (recommended)
+### Basic Usage
 
-If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
+The basic usage of Vant components;
+
+```js
+import { createApp } from 'vue';
+// 1. Import the components you need
+import { Button } from 'vant';
+// 2. Import the components style
+import 'vant/lib/index.css';
+
+const app = createApp();
+
+// 3. Register the components you need
+app.use(Button);
+```
+
+> Tip: Vant supports Tree Shaking by default, so you don't need to configure any plugins, the unused JS code will be removed by Tree Shaking, but CSS styles cannot be optimized by it.
+
+### Import on demand
+
+If you are using vite, webpack or vue-cli, you can use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components), this plugin can help you to auto importing components and reduce CSS file size.
 
 #### 1. Install Plugin
 
@@ -160,16 +179,14 @@ module.exports = {
 };
 ```
 
-#### 3. Import Components
+#### 3. Using Components
 
-Then you can import components from Vant:
+Then you can using components from Vant in the template, the `unplugin-vue-components` will automatically import the corresponding Vant components.
 
-```js
+```html
-import { createApp } from 'vue';
+<template>
-import { Button } from 'vant';
+  <van-button type="primary" />
-
+</template>
-const app = createApp();
-app.use(Button);
 ```
 
 #### 4. Style of Function Components
@@ -178,43 +195,41 @@ Some components of Vant are provided as function, including `Toast`, `Dialog`, `
 
 ```js
 // Toast
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 import 'vant/es/toast/style';
 
 // Dialog
-import { Dialog } from 'vant';
+import { showDialog } from 'vant';
 import 'vant/es/dialog/style';
 
 // Notify
-import { Notify } from 'vant';
+import { showNotify } from 'vant';
 import 'vant/es/notify/style';
 
 // ImagePreview
-import { ImagePreview } from 'vant';
+import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```
 
-> Vant supports tree shaking by default, so you don't necessarily need the webpack plugin, if you can't accept the full import of css.
+> 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.
 
-### Import all components (not recommended)
+## With Frameworks
 
-Import all components will **increase the bundle size**, so this is not recommended.
+### Use Vant in Nuxt 3
 
-```js
+When using Vant in Nuxt 3, you should add `/vant/` to the `build.transpile`:
-import { createApp } from 'vue';
-import Vant from 'vant';
-import 'vant/lib/index.css';
 
-const app = createApp();
+```ts
-app.use(Vant);
+import { defineNuxtConfig } from 'nuxt';
+
+export default defineNuxtConfig({
+  experimental: {
+    externalVue: true,
+  },
+});
 ```
 
-### Manually import (not recommended)
+Reference:
 
-```js
+- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761)
-// import script
+- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084)
-import Button from 'vant/es/button/index';
-// import style
-// if the component does not have a style file, there is no need to import
-import 'vant/es/button/style/index';
-```

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

@@ -30,7 +30,7 @@ pnpm add vant
 
 ### 通过 CDN 安装
 
-使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。
+使用 Vant 最简单的方法是直接在 HTML 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。
 
 ```html
 <!-- 引入样式文件 -->
@@ -54,8 +54,8 @@ pnpm add vant
   // 可以通过下面的方式手动注册
   app.use(vant.Lazyload);
 
-  // 调用函数组件，弹出一个 Toast
+  // 调用工具函数，弹出一个 Toast
-  vant.Toast('提示');
+  vant.showToast('提示');
 
   app.mount('#app');
 </script>
@@ -93,9 +93,32 @@ pnpm add vant
 
 ## 引入组件
 
-### 按需引入组件（推荐）
+### 方法一. 常规用法
 
-在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
+下面是使用 Vant 组件的用法示例：
+
+```js
+import { createApp } from 'vue';
+// 1. 引入你需要的组件
+import { Button } from 'vant';
+// 2. 引入组件样式
+import 'vant/lib/index.css';
+
+const app = createApp();
+
+// 3. 注册你需要的组件
+app.use(Button);
+```
+
+Vant 支持多种组件注册方式，除了在 app 上全局注册组件，你也可以选择其他的方式，比如局部注册，详见 [组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce) 章节。
+
+> 提示：Vant 默认支持 Tree Shaking，因此你不需要配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 样式无法通过这种方式优化，如果需要按需引入 CSS 样式，请参考下面的方法二。
+
+### 方法二. 按需引入组件样式
+
+在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，可以使用 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动引入组件，并按需引入组件的样式。
+
+相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。
 
 #### 1. 安装插件
 
@@ -161,16 +184,14 @@ module.exports = {
 };
 ```
 
-#### 3. 引入组件
+#### 3. 使用组件
 
-完成以上两步，就可以直接使用 Vant 组件了：
+完成以上两步，就可以直接在模板中使用 Vant 组件了，`unplugin-vue-components` 会解析模板并自动注册对应的组件。
 
-```js
+```html
-import { createApp } from 'vue';
+<template>
-import { Button } from 'vant';
+  <van-button type="primary" />
-
+</template>
-const app = createApp();
-app.use(Button);
 ```
 
 #### 4. 引入函数组件的样式
@@ -179,45 +200,74 @@ Vant 中有个别组件是以函数的形式提供的，包括 `Toast`，`Dialog
 
 ```js
 // Toast
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 import 'vant/es/toast/style';
 
 // Dialog
-import { Dialog } from 'vant';
+import { showDialog } from 'vant';
 import 'vant/es/dialog/style';
 
 // Notify
-import { Notify } from 'vant';
+import { showNotify } from 'vant';
 import 'vant/es/notify/style';
 
 // ImagePreview
-import { ImagePreview } from 'vant';
+import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```
 
-> 注意：Vant 支持 Tree Shaking，因此你也可以不配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。
+你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
 
-### 导入所有组件（不推荐）
+> 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。
 
-Vant 支持一次性导入所有组件，引入所有组件会**增加代码包体积**，因此不推荐这种做法。
+## 在框架中使用
 
-```js
+### 在 Nuxt 3 中使用
-import { createApp } from 'vue';
-import Vant from 'vant';
-import 'vant/lib/index.css';
 
-const app = createApp();
+在 Nuxt 3 中使用 Vant 时，由于 Nuxt 3 框架本身的限制，需要在 `nuxt.config.ts` 中添加以下配置：
-app.use(Vant);
+
+```ts
+import { defineNuxtConfig } from 'nuxt';
+
+export default defineNuxtConfig({
+  experimental: {
+    externalVue: true,
+  },
+});
 ```
 
-### 手动按需引入组件（不推荐）
+关于该问题的背景，可以参考以下 issue：
 
-在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。
+- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761)
+- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084)
 
-```js
+## 迁移提示
-// 引入组件脚本
+
-import Button from 'vant/es/button/index';
+### 移除 babel-plugin-import
-// 引入组件样式
+
-// 若组件没有样式文件，则无须引入
+从 Vant 4.0 版本开始，将不再支持 `babel-plugin-import`，请移除项目中依赖的 `babel-plugin-import` 插件。
-import 'vant/es/button/style/index';
+
+只需要删除 `babel.config.js` 中的以下代码即可：
+
+```diff
+module.exports = {
+  plugins: [
+-    ['import', {
+-      libraryName: 'vant',
+-      libraryDirectory: 'es',
+-      style: true
+-    }, 'vant']
+  ]
+};
+```
+
+#### 收益
+
+移除 `babel-plugin-import` 有以下收益：
+
+- 不再强依赖 babel，项目可以使用 esbuild、swc 等更高效的编译工具，大幅度提升编译效率。
+- 不再受到 `babel-plugin-import` 的 import 写法限制，可以从 vant 中导入除了组件以外的其他内容，比如 Vant 4 中新增的 `showToast` 等方法：
+
+```ts
+import { showToast, showDialog } from 'vant';
 ```

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

@@ -1,176 +0,0 @@
-# Custom Theme
-
-### Deprecated
-
-This document is deprecated. Vant provides a more convenient [ConfigProvider](#/en-US/config-provider) component for theme configuration. Less variables **will be removed in the next major version**.
-
-### Intro
-
-Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme.
-
-### Less variables
-
-There are some [basic variables](<(https://github.com/vant-ui/vant/blob/dev/packages/vant/src/style/var.less)>) below, for component less variables, please refer to the documentation of each component, or view the `var.less` file in the component source directory.
-
-```less
-// Color Palette
-@black: #000;
-@white: #fff;
-@gray-1: #f7f8fa;
-@gray-2: #f2f3f5;
-@gray-3: #ebedf0;
-@gray-4: #dcdee0;
-@gray-5: #c8c9cc;
-@gray-6: #969799;
-@gray-7: #646566;
-@gray-8: #323233;
-@red: #ee0a24;
-@blue: #1989fa;
-@orange: #ff976a;
-@orange-dark: #ed6a0c;
-@orange-light: #fffbe8;
-@green: #07c160;
-
-// Gradient Colors
-@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
-@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
-
-// Component Colors
-@text-color: @gray-8;
-@active-color: @gray-2;
-@active-opacity: 0.7;
-@disabled-opacity: 0.5;
-@background-color: @gray-1;
-@background-color-light: @white;
-@text-link-color: #576b95;
-
-// Padding
-@padding-base: 4px;
-@padding-xs: @padding-base * 2;
-@padding-sm: @padding-base * 3;
-@padding-md: @padding-base * 4;
-@padding-lg: @padding-base * 6;
-@padding-xl: @padding-base * 8;
-
-// Font
-@font-size-xs: 10px;
-@font-size-sm: 12px;
-@font-size-md: 14px;
-@font-size-lg: 16px;
-@font-weight-bold: 500;
-@line-height-xs: 14px;
-@line-height-sm: 18px;
-@line-height-md: 20px;
-@line-height-lg: 22px;
-@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
-  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
-  'Microsoft Yahei', sans-serif;
-@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
-  sans-serif;
-
-// Animation
-@animation-duration-base: 0.3s;
-@animation-duration-fast: 0.2s;
-@animation-timing-function-enter: ease-out;
-@animation-timing-function-leave: ease-in;
-
-// Border
-@border-color: @gray-3;
-@border-width-base: 1px;
-@border-radius-sm: 2px;
-@border-radius-md: 4px;
-@border-radius-lg: 8px;
-@border-radius-max: 999px;
-```
-
-## How to custom theme
-
-### Step 1: import less file
-
-First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file.
-
-#### Automatically import style
-
-Configure babel plugin in babel.config.js, if you are using babel6, please manually import less file.
-
-```js
-module.exports = {
-  plugins: [
-    [
-      'import',
-      {
-        libraryName: 'vant',
-        libraryDirectory: 'es',
-        // specify less file path
-        style: (name) => `${name}/style/less`,
-      },
-      'vant',
-    ],
-  ],
-};
-```
-
-#### Manually import style
-
-```js
-// import all styles
-import 'vant/lib/index.less';
-
-// import style of single component
-import 'vant/lib/button/style/less';
-```
-
-### Step 2: modify less variables
-
-Use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to modify less variables，webpack config for reference:
-
-```js
-// webpack.config.js
-module.exports = {
-  rules: [
-    {
-      test: /\.less$/,
-      use: [
-        // ...other loaders
-        {
-          loader: 'less-loader',
-          options: {
-            lessOptions: {
-              modifyVars: {
-                // override with less vars
-                'text-color': '#111',
-                'border-color': '#eee',
-                // or override with less file
-                hack: `true; @import "your-less-file-path.less";`,
-              },
-            },
-          },
-        },
-      ],
-    },
-  ],
-};
-```
-
-If you build a project by vue-cli,it can be configured in `vue.config.js`:
-
-```js
-// vue.config.js
-module.exports = {
-  css: {
-    loaderOptions: {
-      less: {
-        lessOptions: {
-          modifyVars: {
-            // override with less vars
-            'text-color': '#111',
-            'border-color': '#eee',
-            // or override with less file
-            hack: `true; @import "your-less-file-path.less";`,
-          },
-        },
-      },
-    },
-  },
-};
-```

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

@@ -1,184 +0,0 @@
-# 定制主题
-
-### 废弃提示
-
-本文档已废弃，Vant 提供了更方便的 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。基于 Less 变量进行定制的方式**将在下个大版本废弃**。
-
-### 介绍
-
-Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
-
-### 示例工程
-
-我们提供了一个基于 Vue CLI 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/vant-ui/vant-demo)，其中包含了定制主题的基本配置，可以作为参考。
-
-### 样式变量
-
-Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
-
-下面是所有的[基础样式变量](https://github.com/vant-ui/vant/blob/dev/packages/vant/src/style/var.less)，组件的样式变量请参考各个组件的文档，或查看组件源码目录下的 `var.less` 文件。
-
-```less
-// Color Palette
-@black: #000;
-@white: #fff;
-@gray-1: #f7f8fa;
-@gray-2: #f2f3f5;
-@gray-3: #ebedf0;
-@gray-4: #dcdee0;
-@gray-5: #c8c9cc;
-@gray-6: #969799;
-@gray-7: #646566;
-@gray-8: #323233;
-@red: #ee0a24;
-@blue: #1989fa;
-@orange: #ff976a;
-@orange-dark: #ed6a0c;
-@orange-light: #fffbe8;
-@green: #07c160;
-
-// Gradient Colors
-@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
-@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
-
-// Component Colors
-@text-color: @gray-8;
-@active-color: @gray-2;
-@active-opacity: 0.7;
-@disabled-opacity: 0.5;
-@background-color: @gray-1;
-@background-color-light: @white;
-@text-link-color: #576b95;
-
-// Padding
-@padding-base: 4px;
-@padding-xs: @padding-base * 2;
-@padding-sm: @padding-base * 3;
-@padding-md: @padding-base * 4;
-@padding-lg: @padding-base * 6;
-@padding-xl: @padding-base * 8;
-
-// Font
-@font-size-xs: 10px;
-@font-size-sm: 12px;
-@font-size-md: 14px;
-@font-size-lg: 16px;
-@font-weight-bold: 500;
-@line-height-xs: 14px;
-@line-height-sm: 18px;
-@line-height-md: 20px;
-@line-height-lg: 22px;
-@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
-  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
-  'Microsoft Yahei', sans-serif;
-@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
-  sans-serif;
-
-// Animation
-@animation-duration-base: 0.3s;
-@animation-duration-fast: 0.2s;
-@animation-timing-function-enter: ease-out;
-@animation-timing-function-leave: ease-in;
-
-// Border
-@border-color: @gray-3;
-@border-width-base: 1px;
-@border-radius-sm: 2px;
-@border-radius-md: 4px;
-@border-radius-lg: 8px;
-@border-radius-max: 999px;
-```
-
-## 定制方法
-
-### 步骤一 引入样式源文件
-
-定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
-
-#### 按需引入样式（推荐）
-
-在 babel.config.js 中配置按需引入样式源文件，注意 babel 6 不支持按需引入样式，请手动引入样式。
-
-```js
-module.exports = {
-  plugins: [
-    [
-      'import',
-      {
-        libraryName: 'vant',
-        libraryDirectory: 'es',
-        // 指定样式路径
-        style: (name) => `${name}/style/less`,
-      },
-      'vant',
-    ],
-  ],
-};
-```
-
-#### 手动引入样式
-
-```js
-// 引入全部样式
-import 'vant/lib/index.less';
-
-// 引入单个组件样式
-import 'vant/lib/button/style/less';
-```
-
-### 步骤二 修改样式变量
-
-使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。
-
-```js
-// webpack.config.js
-module.exports = {
-  rules: [
-    {
-      test: /\.less$/,
-      use: [
-        // ...其他 loader 配置
-        {
-          loader: 'less-loader',
-          options: {
-            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
-            lessOptions: {
-              modifyVars: {
-                // 直接覆盖变量
-                'text-color': '#111',
-                'border-color': '#eee',
-                // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
-                hack: `true; @import "your-less-file-path.less";`,
-              },
-            },
-          },
-        },
-      ],
-    },
-  ],
-};
-```
-
-如果 vue-cli 搭建的项目，可以在 `vue.config.js` 中进行配置。
-
-```js
-// vue.config.js
-module.exports = {
-  css: {
-    loaderOptions: {
-      less: {
-        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
-        lessOptions: {
-          modifyVars: {
-            // 直接覆盖变量
-            'text-color': '#111',
-            'border-color': '#eee',
-            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
-            hack: `true; @import "your-less-file-path.less";`,
-          },
-        },
-      },
-    },
-  },
-};
-```

packages/vant/docs/markdown/use-click-away.en-US.md

@@ -74,7 +74,7 @@ function useClickAway(
 
 | Name | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| target | Target element | _Element \| Ref\<Element>_ | - |
+| target | Target element, support multiple elements | _Element \| Ref\<Element> \| Array\<Element \| Ref\<Element>>_ | - |
 | listener | Callback function when the outside is clicked | _EventListener_ | - |
 | options | Options | _Options_ | `{ eventName: 'click' }` |
 

packages/vant/docs/markdown/use-click-away.zh-CN.md

@@ -74,11 +74,11 @@ function useClickAway(
 
 ### 参数
 
-| 参数     | 说明                     | 类型                       | 默认值 |
+| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ------------------------ | -------------------------- | ------ |
+| --- | --- | --- | --- |
-| target   | 绑定事件的元素           | _Element \| Ref\<Element>_ | -      |
+| target | 绑定事件的元素，支持传入数组来绑定多个元素 | _Element \| Ref\<Element> \| Array\<Element \| Ref\<Element>>_ | - |
-| listener | 点击外部时触发的回调函数 | _EventListener_            | -      |
+| listener | 点击外部时触发的回调函数 | _EventListener_ | - |
-| options  | 可选的配置项             | _Options_                  | 见下表 |
+| options | 可选的配置项 | _Options_ | 见下表 |
 
 ### Options
 

packages/vant/docs/site/use-translate.ts

@@ -52,6 +52,7 @@ export function initDemoLocale() {
       disabled: '禁用状态',
       uneditable: '不可编辑',
       basicUsage: '基础用法',
+      usingUrl: '使用图片 URL',
       advancedUsage: '高级用法',
       loadingStatus: '加载状态',
     },
@@ -78,6 +79,7 @@ export function initDemoLocale() {
       disabled: 'Disabled',
       uneditable: 'Uneditable',
       basicUsage: 'Basic Usage',
+      usingUrl: 'Using URL',
       advancedUsage: 'Advanced Usage',
       loadingStatus: 'Loading',
     },

packages/vant/package.json

@@ -1,13 +1,16 @@
 {
   "name": "vant",
-  "version": "3.5.3",
+  "version": "4.0.0-rc.0",
-  "description": "Lightweight Mobile UI Components built on Vue",
+  "description": "Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",
   "style": "lib/index.css",
   "typings": "lib/index.d.ts",
   "unpkg": "lib/vant.min.js",
   "jsdelivr": "lib/vant.min.js",
+  "npm": {
+    "tag": "next"
+  },
   "files": [
     "es",
     "lib"
@@ -46,27 +49,27 @@
   "dependencies": {
     "@vant/icons": "^1.8.0",
     "@vant/popperjs": "^1.2.1",
-    "@vant/use": "^1.4.1"
+    "@vant/use": "^1.4.2"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "^16",
+    "@types/node": "^16.11.56",
+    "@types/jest": "^27.0.0",
     "@vant/area-data": "workspace:*",
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
-    "@vue/runtime-core": "^3.2.27",
+    "@vue/runtime-core": "^3.2.38",
-    "@vue/test-utils": "^2.0.1",
+    "@vue/test-utils": "^2.0.2",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.2",
-    "vue": "^3.2.27",
+    "vue": "^3.2.38",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.1.5"
   },
   "sideEffects": [
     "es/**/style/*",
     "lib/**/style/*",
-    "*.css",
+    "*.css"
-    "*.less"
   ],
   "web-types": "lib/web-types.json"
 }

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

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

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

@@ -1,29 +1,27 @@
-@import './var.less';
+body {
-
+  --van-action-bar-button-height: 40px;
-:root {
+  --van-action-bar-button-warning-color: var(--van-gradient-orange);
-  --van-action-bar-button-height: @action-bar-button-height;
+  --van-action-bar-button-danger-color: var(--van-gradient-red);
-  --van-action-bar-button-warning-color: @action-bar-button-warning-color;
-  --van-action-bar-button-danger-color: @action-bar-button-danger-color;
 }
 
 .van-action-bar-button {
   flex: 1;
   height: var(--van-action-bar-button-height);
-  font-weight: var(--van-font-weight-bold);
+  font-weight: var(--van-font-bold);
   font-size: var(--van-font-size-md);
   border: none;
   border-radius: 0;
 
   &--first {
     margin-left: 5px;
-    border-top-left-radius: var(--van-border-radius-max);
+    border-top-left-radius: var(--van-radius-max);
-    border-bottom-left-radius: var(--van-border-radius-max);
+    border-bottom-left-radius: var(--van-radius-max);
   }
 
   &--last {
     margin-right: 5px;
-    border-top-right-radius: var(--van-border-radius-max);
+    border-top-right-radius: var(--van-radius-max);
-    border-bottom-right-radius: var(--van-border-radius-max);
+    border-bottom-right-radius: var(--van-radius-max);
   }
 
   &--warning {

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

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

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

@@ -1,5 +0,0 @@
-@import '../style/var.less';
-
-@action-bar-button-height: 40px;
-@action-bar-button-warning-color: var(--van-gradient-orange);
-@action-bar-button-danger-color: var(--van-gradient-red);

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

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

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

@@ -1,14 +1,12 @@
-@import './var.less';
+body {
-
+  --van-action-bar-icon-width: 48px;
-:root {
+  --van-action-bar-icon-height: 100%;
-  --van-action-bar-icon-width: @action-bar-icon-width;
+  --van-action-bar-icon-color: var(--van-text-color);
-  --van-action-bar-icon-height: @action-bar-icon-height;
+  --van-action-bar-icon-size: 18px;
-  --van-action-bar-icon-color: @action-bar-icon-color;
+  --van-action-bar-icon-font-size: var(--van-font-size-xs);
-  --van-action-bar-icon-size: @action-bar-icon-size;
+  --van-action-bar-icon-active-color: var(--van-active-color);
-  --van-action-bar-icon-font-size: @action-bar-icon-font-size;
+  --van-action-bar-icon-text-color: var(--van-text-color);
-  --van-action-bar-icon-active-color: @action-bar-icon-active-color;
+  --van-action-bar-icon-background: var(--van-background-2);
-  --van-action-bar-icon-text-color: @action-bar-icon-text-color;
-  --van-action-bar-icon-background-color: @action-bar-icon-background-color;
 }
 
 .van-action-bar-icon {
@@ -21,7 +19,7 @@
   font-size: var(--van-action-bar-icon-font-size);
   line-height: 1;
   text-align: center;
-  background: var(--van-action-bar-icon-background-color);
+  background: var(--van-action-bar-icon-background);
   cursor: pointer;
 
   &:active {

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

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

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

@@ -1,10 +0,0 @@
-@import '../style/var.less';
-
-@action-bar-icon-width: 48px;
-@action-bar-icon-height: 100%;
-@action-bar-icon-color: var(--van-text-color);
-@action-bar-icon-size: 18px;
-@action-bar-icon-font-size: var(--van-font-size-xs);
-@action-bar-icon-active-color: var(--van-active-color);
-@action-bar-icon-text-color: var(--van-gray-7);
-@action-bar-icon-background-color: var(--van-background-color-light);

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

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

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

@@ -32,12 +32,12 @@ app.use(ActionBarButton);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onClickIcon = () => Toast('Click Icon');
+    const onClickIcon = () => showToast('Click Icon');
-    const onClickButton = () => Toast('Click Button');
+    const onClickButton = () => showToast('Click Button');
     return {
       onClickIcon,
       onClickButton,
@@ -155,7 +155,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-action-bar-background-color | _var(--van-background-color-light)_ | - |
+| --van-action-bar-background | _var(--van-background-2)_ | - |
 | --van-action-bar-height | _50px_ | - |
 | --van-action-bar-icon-width | _48px_ | - |
 | --van-action-bar-icon-height | _100%_ | - |
@@ -163,8 +163,8 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-bar-icon-size | _18px_ | - |
 | --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
 | --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
-| --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
+| --van-action-bar-icon-text-color | _var(--van-text-color)_ | - |
-| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - |
+| --van-action-bar-icon-background | _var(--van-background-2)_ | - |
 | --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/README.zh-CN.md

@@ -32,12 +32,12 @@ app.use(ActionBarButton);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onClickIcon = () => Toast('点击图标');
+    const onClickIcon = () => showToast('点击图标');
-    const onClickButton = () => Toast('点击按钮');
+    const onClickButton = () => showToast('点击按钮');
     return {
       onClickIcon,
       onClickButton,
@@ -157,18 +157,18 @@ import type {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称 | 默认值 | 描述 |
+| 名称                                  | 默认值                       | 描述 |
-| --- | --- | --- |
+| ------------------------------------- | ---------------------------- | ---- |
-| --van-action-bar-background-color | _var(--van-background-color-light)_ | - |
+| --van-action-bar-background           | _var(--van-background-2)_    | -    |
-| --van-action-bar-height | _50px_ | - |
+| --van-action-bar-height               | _50px_                       | -    |
-| --van-action-bar-icon-width | _48px_ | - |
+| --van-action-bar-icon-width           | _48px_                       | -    |
-| --van-action-bar-icon-height | _100%_ | - |
+| --van-action-bar-icon-height          | _100%_                       | -    |
-| --van-action-bar-icon-color | _var(--van-text-color)_ | - |
+| --van-action-bar-icon-color           | _var(--van-text-color)_      | -    |
-| --van-action-bar-icon-size | _18px_ | - |
+| --van-action-bar-icon-size            | _18px_                       | -    |
-| --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
+| --van-action-bar-icon-font-size       | _var(--van-font-size-xs)_    | -    |
-| --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
+| --van-action-bar-icon-active-color    | _var(--van-active-color)_    | -    |
-| --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
+| --van-action-bar-icon-text-color      | _var(--van-text-color)_      | -    |
-| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - |
+| --van-action-bar-icon-background      | _var(--van-background-2)_    | -    |
-| --van-action-bar-button-height | _40px_ | - |
+| --van-action-bar-button-height        | _40px_                       | -    |
-| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
+| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | -    |
-| --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |
+| --van-action-bar-button-danger-color  | _var(--van-gradient-red)_    | -    |

packages/vant/src/action-bar/demo/index.vue

@@ -3,7 +3,7 @@ import VanActionBar from '..';
 import VanActionBarIcon from '../../action-bar-icon';
 import VanActionBarButton from '../../action-bar-button';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -33,8 +33,8 @@ const t = useTranslate({
     customButtonColor: 'Custom Button Color',
   },
 });
-const onClickIcon = () => Toast(t('clickIcon'));
+const onClickIcon = () => showToast(t('clickIcon'));
-const onClickButton = () => Toast(t('clickButton'));
+const onClickButton = () => showToast(t('clickButton'));
 </script>
 
 <template>

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

@@ -1,8 +1,6 @@
-@import './var.less';
+body {
-
+  --van-action-bar-background: var(--van-background-2);
-:root {
+  --van-action-bar-height: 50px;
-  --van-action-bar-background-color: @action-bar-background-color;
-  --van-action-bar-height: @action-bar-height;
 }
 
 .van-action-bar {
@@ -14,5 +12,5 @@
   align-items: center;
   box-sizing: content-box;
   height: var(--van-action-bar-height);
-  background: var(--van-action-bar-background-color);
+  background: var(--van-action-bar-background);
 }

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

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

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

@@ -1,4 +0,0 @@
-@import '../style/var.less';
-
-@action-bar-background-color: var(--van-background-color-light);
-@action-bar-height: 50px;

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

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

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

@@ -29,7 +29,7 @@ Use `actions` prop to set options of action-sheet.
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -41,7 +41,7 @@ export default {
     ];
     const onSelect = (item) => {
       show.value = false;
-      Toast(item.name);
+      showToast(item.name);
     };
 
     return {
@@ -67,7 +67,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -77,7 +77,7 @@ export default {
       { name: 'Option 2' },
       { name: 'Option 3' },
     ];
-    const onCancel = () => Toast('cancel');
+    const onCancel = () => showToast('cancel');
 
     return {
       show,
@@ -247,7 +247,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-description-color | _var(--van-text-color-2)_ | - |
 | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
 | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
-| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-2)_ | - |
 | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
 | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
 | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
@@ -260,5 +260,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
 | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
 | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
-| --van-action-sheet-cancel-padding-color | _var(--van-background-color)_ | - |
+| --van-action-sheet-cancel-padding-color | _var(--van-background)_ | - |
 | --van-action-sheet-loading-icon-size | _22px_ | - |

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

@@ -29,7 +29,7 @@ app.use(ActionSheet);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -43,7 +43,7 @@ export default {
       // 默认情况下点击选项时不会自动收起
       // 可以通过 close-on-click-action 属性开启自动收起
       show.value = false;
-      Toast(item.name);
+      showToast(item.name);
     };
 
     return {
@@ -71,7 +71,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -81,7 +81,7 @@ export default {
       { name: '选项二' },
       { name: '选项三' },
     ];
-    const onCancel = () => Toast('取消');
+    const onCancel = () => showToast('取消');
 
     return {
       show,
@@ -259,7 +259,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-description-color | _var(--van-text-color-2)_ | - |
 | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
 | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
-| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-2)_ | - |
 | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
 | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
 | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
@@ -272,5 +272,5 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
 | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
 | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
-| --van-action-sheet-cancel-padding-color | _var(--van-background-color)_ | - |
+| --van-action-sheet-cancel-padding-color | _var(--van-background)_ | - |
 | --van-action-sheet-loading-icon-size | _22px_ | - |

packages/vant/src/action-sheet/demo/index.vue

@@ -3,7 +3,7 @@ import VanCell from '../../cell';
 import VanActionSheet, { ActionSheetAction } from '..';
 import { ref, computed } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -61,10 +61,10 @@ const actionsWithDescription = computed<ActionSheetAction[]>(() => [
 
 const onSelect = (item: ActionSheetAction) => {
   showBasic.value = false;
-  Toast(item.name);
+  showToast(item.name);
 };
 
-const onCancel = () => Toast(t('cancel'));
+const onCancel = () => showToast(t('cancel'));
 </script>
 
 <template>

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

@@ -1,28 +1,27 @@
-@import './var.less';
 @import '../style/mixins/hairline';
 
-:root {
+body {
-  --van-action-sheet-max-height: @action-sheet-max-height;
+  --van-action-sheet-max-height: 80%;
-  --van-action-sheet-header-height: @action-sheet-header-height;
+  --van-action-sheet-header-height: 48px;
-  --van-action-sheet-header-font-size: @action-sheet-header-font-size;
+  --van-action-sheet-header-font-size: var(--van-font-size-lg);
-  --van-action-sheet-description-color: @action-sheet-description-color;
+  --van-action-sheet-description-color: var(--van-text-color-2);
-  --van-action-sheet-description-font-size: @action-sheet-description-font-size;
+  --van-action-sheet-description-font-size: var(--van-font-size-md);
-  --van-action-sheet-description-line-height: @action-sheet-description-line-height;
+  --van-action-sheet-description-line-height: var(--van-line-height-md);
-  --van-action-sheet-item-background: @action-sheet-item-background;
+  --van-action-sheet-item-background: var(--van-background-2);
-  --van-action-sheet-item-font-size: @action-sheet-item-font-size;
+  --van-action-sheet-item-font-size: var(--van-font-size-lg);
-  --van-action-sheet-item-line-height: @action-sheet-item-line-height;
+  --van-action-sheet-item-line-height: var(--van-line-height-lg);
-  --van-action-sheet-item-text-color: @action-sheet-item-text-color;
+  --van-action-sheet-item-text-color: var(--van-text-color);
-  --van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color;
+  --van-action-sheet-item-disabled-text-color: var(--van-text-color-3);
-  --van-action-sheet-subname-color: @action-sheet-subname-color;
+  --van-action-sheet-subname-color: var(--van-text-color-2);
-  --van-action-sheet-subname-font-size: @action-sheet-subname-font-size;
+  --van-action-sheet-subname-font-size: var(--van-font-size-sm);
-  --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
+  --van-action-sheet-subname-line-height: var(--van-line-height-sm);
-  --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
+  --van-action-sheet-close-icon-size: 22px;
-  --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
+  --van-action-sheet-close-icon-color: var(--van-gray-5);
-  --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
+  --van-action-sheet-close-icon-padding: 0 var(--van-padding-md);
-  --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
+  --van-action-sheet-cancel-text-color: var(--van-gray-7);
-  --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
+  --van-action-sheet-cancel-padding-top: var(--van-padding-xs);
-  --van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color;
+  --van-action-sheet-cancel-padding-color: var(--van-background);
-  --van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size;
+  --van-action-sheet-loading-icon-size: 22px;
 }
 
 .van-action-sheet {
@@ -95,7 +94,7 @@
 
   &__header {
     flex-shrink: 0;
-    font-weight: var(--van-font-weight-bold);
+    font-weight: var(--van-font-bold);
     font-size: var(--van-action-sheet-header-font-size);
     line-height: var(--van-action-sheet-header-height);
     text-align: center;

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

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

packages/vant/src/action-sheet/test/__snapshots__/demo.spec.ts.snap

@@ -67,23 +67,33 @@ exports[`should render demo and match snapshot 1`] = `
     </i>
   </div>
 </div>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>

packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap

@@ -22,12 +22,17 @@ exports[`should render cancel slot correctly 1`] = `
 `;
 
 exports[`should render default slot correctly 1`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet"
+  >
     <div class="van-action-sheet__header">
       Title
       <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close van-haptics-feedback">