Compare commits

..

2 Commits
v4.0.7 ... next

Author SHA1 Message Date
chenjiahan
b45b0b7608 chore: update branches in GitHub actions 2022-09-10 21:57:09 +08:00
chenjiahan
c309ca2aaf docs: switch dev branch to v4 2022-09-10 21:53:49 +08:00
500 changed files with 3989 additions and 9206 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

1
.nvmrc
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
:root { body {
// colors // colors
--van-doc-black: #000; --van-doc-black: #000;
--van-doc-white: #fff; --van-doc-white: #fff;
@ -44,7 +44,7 @@
--van-doc-code-background: var(--van-doc-gray-1); --van-doc-code-background: var(--van-doc-gray-1);
// blockquote // blockquote
--van-doc-blockquote-color: #2f85da; --van-doc-blockquote-color: #4994df;
--van-doc-blockquote-background: #ecf9ff; --van-doc-blockquote-background: #ecf9ff;
} }

View File

@ -303,8 +303,7 @@ export default {
> blockquote { > blockquote {
margin: 16px 0 0; margin: 16px 0 0;
padding: 16px; padding: 16px;
font-size: 15px; font-size: 14px;
line-height: 26px;
color: var(--van-doc-blockquote-color); color: var(--van-doc-blockquote-color);
background-color: var(--van-doc-blockquote-background); background-color: var(--van-doc-blockquote-background);
border-radius: var(--van-doc-border-radius); border-radius: var(--van-doc-border-radius);

View File

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

View File

@ -110,14 +110,14 @@ export default {
padding: 24px 0 0 var(--van-doc-padding); padding: 24px 0 0 var(--van-doc-padding);
color: var(--van-doc-text-color-2); color: var(--van-doc-text-color-2);
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 15px;
line-height: 28px; line-height: 28px;
} }
&__item { &__item {
a { a {
display: block; display: block;
margin: 4px 0; margin: 8px 0;
padding: 6px 0 6px var(--van-doc-padding); padding: 6px 0 6px var(--van-doc-padding);
color: var(--van-doc-text-color-3); color: var(--van-doc-text-color-3);
font-size: 14px; font-size: 14px;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,10 +1,5 @@
## Changelog ## Changelog
## 2.0.0
- no longer support woff/ttf format
- fix delete / delete-o icon
## 1.8.0 ## 1.8.0
- add qq icon - add qq icon

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

@ -1,13 +1,5 @@
# Changelog # Changelog
## v1.4.3
- improve `useEventListener` typing
## v1.4.2
- `useClickAway` support multiple targets
## v1.4.1 ## v1.4.1
- Add `exports` field to package.json, support nuxt 3. - Add `exports` field to package.json, support nuxt 3.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -68,12 +68,6 @@ Select 是桌面端常用的组件,但它的交互形式不适合移动端。
在移动端,我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。 在移动端,我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。
### 是否支持在 uni-app 中使用?
Vant 所有组件都是基于 Vue 框架实现的,没有针对 uni-app 进行适配,因此不保证各个组件在 uni-app 下的可用性。
如果你在 uni-app 中使用 Vant 遇到问题,建议向 uni-app 进行反馈。
### 部分组件无法在桌面端进行操作? ### 部分组件无法在桌面端进行操作?
参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
:root { body {
--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);

View File

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

View File

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

View File

@ -1,4 +1,4 @@
:root { body {
--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);

View File

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

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More