Compare commits

..

No commits in common. "next" and "v4.0.0-beta.0" have entirely different histories.

396 changed files with 2866 additions and 9906 deletions

View File

@ -2,4 +2,4 @@
请移步 GitHub issues 进行反馈:
https://github.com/vant-ui/vant/issues
https://github.com/youzan/vant/issues

View File

@ -29,7 +29,7 @@ It's welcomed to pull request, And there are some tips about that:
You will need [Node.js >= 14](https://nodejs.org) and [pnpm](https://pnpm.io).
```bash
git clone git@github.com:vant-ui/vant.git
git clone git@github.com:youzan/vant.git
# Install dependencies
pnpm i

View File

@ -9,8 +9,8 @@ body:
在提交 Bug 报告前,请注意:
- 确认你的问题无法通过官方文档得到解决。
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues),并且没有发现同样的问题。
- 如果不是反馈 Bug请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues),并且没有发现同样的问题。
- 如果不是反馈 Bug请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
- type: input
id: reproduce

View File

@ -9,8 +9,8 @@ body:
在提交 Bug 报告前,请注意:
- 确认你的问题无法通过官方文档得到解决。
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues),并且没有发现同样的问题。
- 如果不是反馈 Bug请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues),并且没有发现同样的问题。
- 如果不是反馈 Bug请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
- type: input
id: reproduce

View File

@ -9,8 +9,8 @@ body:
在提交功能需求前,请注意:
- 确认这是一个通用功能,并且无法通过现有的 API 或 Slot 实现。
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues),并且没有发现同样的需求。
- 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖,讨论一下需求是否合理。
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues),并且没有发现同样的需求。
- 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖,讨论一下需求是否合理。
- type: textarea
id: description

View File

@ -9,8 +9,8 @@ body:
在提交功能需求前,请注意:
- 确认这是一个通用功能,并且无法通过现有的 API 实现。
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues),并且没有发现同样的需求。
- 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖,讨论一下需求是否合理。
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues),并且没有发现同样的需求。
- 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖,讨论一下需求是否合理。
- type: textarea
id: description

View File

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

View File

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

View File

@ -2,9 +2,7 @@ name: Sync to Gitee
on:
push:
branches: [dev, 2.x, 3.x, gh-pages]
workflow_dispatch:
branches: [dev, 2.x, gh-pages]
jobs:
build:
@ -17,6 +15,6 @@ jobs:
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# GitHub 源仓库地址
source-repo: git@github.com:vant-ui/vant.git
source-repo: git@github.com:youzan/vant.git
# Gitee 目标仓库地址
destination-repo: git@gitee.com:vant-contrib/vant.git

View File

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

1
.gitignore vendored
View File

@ -15,5 +15,6 @@ package-lock.json
es
lib
dist
vetur
**/site-dist
changelog.generated.md

2
.npmrc
View File

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

3
.stylelintrc Normal file
View File

@ -0,0 +1,3 @@
{
"extends": ["@vant/stylelint-config"]
}

View File

@ -4,13 +4,14 @@
<h1 align="center">Vant</h1>
<p align="center">Lightweight Mobile UI Components built on Vue</p>
<p align="center">Mobile UI Components built on Vue</p>
<p align="center">
<img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
<img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
<img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
<img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="CI Status" />
<img src="https://img.shields.io/codecov/c/github/youzan/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/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
<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>
@ -28,7 +29,6 @@
- 🚀 1KB Component average size (min+gzip)
- 🚀 70+ High quality components
- 🚀 Zero third-party dependencies
- 💪 90%+ Unit test coverage
- 💪 Written in TypeScript
- 📖 Extensive documentation and demos
@ -67,14 +67,10 @@ pnpm add vant
```js
import { createApp } from 'vue';
// 1. Import the components you need
import { Button } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';
const app = createApp();
// 3. Register the components you need
app.use(Button);
```
@ -90,11 +86,11 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
| Project | Description |
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
## Community Ecosystem
@ -132,7 +128,7 @@ Core contributors of Vant and Vant Weapp:
Thanks to the following friends for their contributions to Vant:
<a href="https://github.com/vant-ui/vant/graphs/contributors">
<a href="https://github.com/youzan/vant/graphs/contributors">
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
</a>

View File

@ -8,9 +8,10 @@
<p align="center">
<img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
<img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
<img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
<img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="CI Status" />
<img src="https://img.shields.io/codecov/c/github/youzan/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/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
<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>
@ -32,7 +33,6 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
- 🚀 性能极佳,组件平均体积小于 1KBmin+gzip
- 🚀 70+ 个高质量组件,覆盖移动端主流场景
- 🚀 零外部依赖,不依赖三方 npm 包
- 💪 使用 TypeScript 编写,提供完整的类型定义
- 💪 单元测试覆盖率超过 90%,提供稳定性保障
- 📖 提供丰富的中英文文档和组件示例
@ -71,14 +71,10 @@ pnpm add vant
```js
import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
const app = createApp();
// 3. 注册你需要的组件
app.use(Button);
```
@ -96,11 +92,11 @@ 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/youzan/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
## 社区生态
@ -140,7 +136,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
感谢以下小伙伴们为 Vant 发展做出的贡献:
<a href="https://github.com/vant-ui/vant/graphs/contributors">
<a href="https://github.com/youzan/vant/graphs/contributors">
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
</a>
@ -148,7 +144,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
修改代码请阅读我们的 [贡献指南](https://vant-contrib.gitee.io/vant/#/zh-CN/contribution)。
使用过程中发现任何问题都可以提 [Issue](https://github.com/vant-ui/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/vant-ui/vant/pulls)。
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
## 开源协议

View File

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

View File

@ -25,7 +25,8 @@
}
},
"nano-staged": {
"*.{ts,tsx,js,jsx,vue}": "eslint --fix"
"*.{ts,tsx,js,jsx,vue}": "eslint --fix",
"*.{vue,css,less,scss}": "stylelint --fix"
},
"peerDependencies": {
"vue": "^2.6.11",
@ -42,6 +43,11 @@
"@vant"
]
},
"stylelint": {
"extends": [
"@vant/stylelint-config"
]
},
"prettier": {
"singleQuote": true
},

View File

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

View File

@ -25,7 +25,8 @@
"nano-staged": {
"*.md": "prettier --write",
"*.{ts,tsx,js,vue,less,scss}": "prettier --write",
"*.{ts,tsx,js,vue}": "eslint --fix"
"*.{ts,tsx,js,vue}": "eslint --fix",
"*.{vue,css,less,scss}": "stylelint --fix"
},
"peerDependencies": {
"vue": "^3.0.0"
@ -41,6 +42,11 @@
"@vant"
]
},
"stylelint": {
"extends": [
"@vant/stylelint-config"
]
},
"prettier": {
"singleQuote": true
},

View File

@ -7,7 +7,3 @@
<demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
</demo-block>
</template>
<script setup>
import DemoButton from '../index.vue';
</script>

View File

@ -1,6 +1,6 @@
{
"name": "create-vant-cli-app",
"version": "2.0.1",
"version": "2.0.0",
"description": "Create Vant CLI App",
"main": "lib/index.js",
"bin": {
@ -24,23 +24,23 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/create-vant-cli-app"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {
"@types/fs-extra": "^9.0.13",
"@types/inquirer": "^8.2.3",
"release-it": "^15.4.1",
"typescript": "^4.8.2"
"@types/inquirer": "^8.1.3",
"release-it": "^15.1.1",
"typescript": "^4.7.4"
},
"dependencies": {
"consola": "^2.11.3",
"fast-glob": "^3.2.11",
"fs-extra": "^10.1.0",
"inquirer": "^8.2.4",
"fast-glob": "^3.2.4",
"fs-extra": "^10.0.0",
"inquirer": "^8.0.0",
"picocolors": "^1.0.0"
},
"release-it": {

View File

@ -1,6 +1,6 @@
{
"name": "@vant/area-data",
"version": "1.3.2",
"version": "1.3.1",
"description": "Vant 省市区数据",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.mjs",
@ -29,16 +29,16 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-area-data"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {
"esbuild": "^0.14.54",
"release-it": "^15.4.1",
"typescript": "^4.8.2"
"esbuild": "^0.14.29",
"release-it": "^15.1.1",
"typescript": "^4.7.4"
},
"release-it": {
"git": {

View File

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

View File

@ -10,7 +10,7 @@ Vant CLI is a tool for building vue component library. You can quickly build a f
- Provides rich commands covering the complete process from development to deploy
- Based on conventional directory structure. Generate elegant document website and component examples automatically.
- ESlint built-in.
- ESlint Stylelint built-in.
- Support Tree Shaking/Theme Customization/Import on Demand
### Quickstart
@ -50,12 +50,16 @@ Please add the followed config to `package.json` file.
"nano-staged": {
"*.md": "prettier --write",
"*.{ts,tsx,js,vue,less,scss}": "prettier --write",
"*.{ts,tsx,js,vue}": "eslint --fix"
"*.{ts,tsx,js,vue}": "eslint --fix",
"*.{vue,css,less,scss}": "stylelint --fix"
},
"eslintConfig": {
"root": true,
"extends": ["@vant"]
},
"stylelint": {
"extends": ["@vant/stylelint-config"]
},
"prettier": {
"singleQuote": true
},
@ -65,7 +69,7 @@ Please add the followed config to `package.json` file.
## More Details
- [cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.md)
- [config](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.md)
- [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
- [cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md)
- [config](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)
- [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
- [CHANGELOG](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)

View File

@ -1,13 +1,12 @@
# Vant CLI
Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具,通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
Vant CLI 是一个 Vue 组件库构建工具,通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
### 特性
- 基于 Vite 实现,享受愉悦的开发体验
- 提供丰富的命令,涵盖从开发测试到构建发布的完整流程
- 基于约定的目录结构,自动生成优雅的文档站点和组件示例
- 内置 ESLint 校验规则,提交代码时自动执行校验
- 内置 ESLint、Stylelint 校验规则,提交代码时自动执行校验
- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
### 快速上手
@ -47,12 +46,16 @@ pnpm add @vant/cli -D
"nano-staged": {
"*.md": "prettier --write",
"*.{ts,tsx,js,vue,less,scss}": "prettier --write",
"*.{ts,tsx,js,vue}": "eslint --fix"
"*.{ts,tsx,js,vue}": "eslint --fix",
"*.{vue,css,less,scss}": "stylelint --fix"
},
"eslintConfig": {
"root": true,
"extends": ["@vant"]
},
"stylelint": {
"extends": ["@vant/stylelint-config"]
},
"prettier": {
"singleQuote": true
},
@ -62,7 +65,7 @@ pnpm add @vant/cli -D
## 详细文档
- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
- [配置指南](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
- [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)

View File

@ -1,42 +1,5 @@
# 更新日志
## v5.0.0 (未发布)
### 依赖升级
对以下依赖进行了大版本升级:
- vite v3
- @vitejs/plugin-vue v3
- @vitejs/plugin-vue-jsx v2
### 依赖精简
- 不再默认安装 `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",
```
- 不再默认内置 `stylelint`,需要的话可以自行安装:
```bash
yarn add stylelint@13 @vant/stylelint-config
```
### 移除 vetur 相关配置
由于 Vue 3 推荐使用 volar 而不是 vetur因此移除了 vetur 相关的配置文件。
现在会默认生成 WebStorm 所需的 web-types.json 文件到 `lib/web-types.json` 目录下。
## v4.0.4
`2022-07-02`
- 修复构建 sfc 文件的类型定义时报错的问题
## v4.0.3
`2022-07-02`
@ -443,15 +406,15 @@ yarn add sass
`2020-03-29`
- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/vant-ui/vant/pull/5928))
- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/youzan/vant/pull/5928))
### v2.3.0
`2020-03-25`
- build 命令支持编译 scoped 样式 ([#5910](https://github.com/vant-ui/vant/pull/5910))
- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/vant-ui/vant/issues/5899))
- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/vant-ui/vant/issues/5895))
- build 命令支持编译 scoped 样式 ([#5910](https://github.com/youzan/vant/pull/5910))
- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/youzan/vant/issues/5899))
- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/youzan/vant/issues/5895))
- 升级 @vant/markdown-vetur 2.0.0
### v2.2.8
@ -485,7 +448,7 @@ yarn add sass
`2020-02-14`
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/vant-ui/vant/pull/5655)
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
### v2.2.3
@ -497,14 +460,14 @@ yarn add sass
`2020-02-05`
- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/vant-ui/vant/pull/5626))
- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
### v2.2.1
`2020-02-04`
- 升级 babel@7.8
- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/vant-ui/vant/pull/5620))
- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
### v2.2.0

View File

@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
Build Vue component library.
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
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/dev/packages/vant-cli/docs/directory.zh-CN.md)。
运行 build 命令会在 `es``lib` 目录下生成可用于生产环境的组件代码,详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
发布 npm 时,请将以下配置加入到 `package.json` 中,使 npm 包能被正确识别:

View File

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

View File

@ -87,7 +87,6 @@ export default {
padding: 24px;
background-color: var(--van-doc-background-2);
border-radius: var(--van-doc-border-radius);
overflow: auto;
> pre code {
position: relative;

View File

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

View File

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

View File

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

View File

@ -16,7 +16,7 @@ program
program
.command('lint')
.description('Run ESLint')
.description('Run eslint and stylelint')
.action(async () => {
const { lint } = await import('./commands/lint.js');
return lint();

View File

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

View File

@ -3,6 +3,7 @@ import {
ES_DIR,
LIB_DIR,
DIST_DIR,
VETUR_DIR,
SITE_DIST_DIR,
} from '../common/constant.js';
@ -13,6 +14,7 @@ export async function clean() {
remove(ES_DIR),
remove(LIB_DIR),
remove(DIST_DIR),
remove(VETUR_DIR),
remove(SITE_DIST_DIR),
]);
}

View File

@ -44,10 +44,23 @@ function eslint() {
);
}
function stylelint() {
return runCommand(
'stylelint',
['src/**/*.css', 'src/**/*.vue', 'src/**/*.less', 'src/**/*.sass', '--fix'],
{
start: 'Running stylelint...',
succeed: 'Stylelint Passed.',
failed: 'Stylelint failed!',
}
);
}
export async function lint() {
const eslintPassed = await eslint();
const stylelintPassed = await stylelint();
if (!eslintPassed) {
if (!eslintPassed || !stylelintPassed) {
process.exit(1);
}
}

View File

@ -21,6 +21,7 @@ export const ROOT = findRootDir(CWD);
export const ES_DIR = join(ROOT, 'es');
export const LIB_DIR = join(ROOT, 'lib');
export const DOCS_DIR = join(ROOT, 'docs');
export const VETUR_DIR = join(ROOT, 'vetur');
export const SITE_DIST_DIR = join(ROOT, 'site-dist');
export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.mjs');
export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');

View File

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

View File

@ -0,0 +1,25 @@
import markdownVetur from '@vant/markdown-vetur';
import {
SRC_DIR,
VETUR_DIR,
getVantConfig,
getPackageJson,
} from '../common/constant.js';
// generate vetur tags & attributes
export function genVeturConfig() {
const pkgJson = getPackageJson();
const vantConfig = getVantConfig();
const options = vantConfig.build?.vetur;
if (options) {
markdownVetur.parseAndWrite({
name: vantConfig.name,
path: SRC_DIR,
test: /README\.md/,
version: pkgJson.version,
outputDir: VETUR_DIR,
...options,
});
}
}

View File

@ -1,55 +0,0 @@
import glob from 'fast-glob';
import { join } from 'path';
import fse from 'fs-extra';
import { mdParser } from './parser.js';
import { formatter } from './formatter.js';
import { genWebTypes } from './web-types.js';
import { Options, VueTag } from './type.js';
import { normalizePath } from './utils.js';
import {
SRC_DIR,
LIB_DIR,
getVantConfig,
getPackageJson,
} from '../../common/constant.js';
async function readMarkdown(options: Options) {
const mds = await glob(normalizePath(`${options.path}/**/*.md`));
return mds
.filter((md) => options.test.test(md))
.map((path) => fse.readFileSync(path, 'utf-8'));
}
export async function parseAndWrite(options: Options) {
if (!options.outputDir) {
throw new Error('outputDir can not be empty.');
}
const mds = await readMarkdown(options);
const vueTags: VueTag[] = [];
mds.forEach((md) => {
const parsedMd = mdParser(md);
formatter(vueTags, parsedMd, options.tagPrefix);
});
const webTypes = genWebTypes(vueTags, options);
fse.outputFileSync(
join(options.outputDir, 'web-types.json'),
JSON.stringify(webTypes, null, 2)
);
}
export function genWebStormTypes(tagPrefix?: string) {
const pkgJson = getPackageJson();
const vantConfig = getVantConfig();
parseAndWrite({
name: vantConfig.name,
path: SRC_DIR,
test: /README\.md/,
version: pkgJson.version,
outputDir: LIB_DIR,
tagPrefix,
});
}

View File

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

View File

@ -204,9 +204,9 @@ export function getViteConfigForSiteProd(): InlineConfig {
base: publicPath,
build: {
outDir,
reportCompressedSize: false,
brotliSize: false,
emptyOutDir: true,
// https://github.com/vant-ui/vant/issues/9703
// https://github.com/youzan/vant/issues/9703
cssTarget: ['chrome53'],
rollupOptions: {
input: {

View File

@ -4,3 +4,4 @@ declare module 'hash-sum';
declare module '@babel/core';
declare module 'release-it';
declare module 'conventional-changelog';
declare module '@vant/markdown-vetur';

View File

@ -29,10 +29,10 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-compat"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {

View File

@ -13,24 +13,24 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-eslint-config"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"dependencies": {
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"@typescript-eslint/eslint-plugin": "^5.30.3",
"@typescript-eslint/parser": "^5.30.3",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^9.4.0"
"eslint-plugin-vue": "^9.1.1"
},
"devDependencies": {
"enhanced-resolve": "^5.10.0",
"eslint": "^8.23.0",
"typescript": "^4.8.2"
"eslint": "^8.19.0",
"typescript": "^4.7.4"
},
"peerDependencies": {
"eslint": "^7.32.0 || ^8.2.0"

View File

@ -16,14 +16,14 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-icons"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {
"release-it": "^15.4.1"
"release-it": "^15.1.1"
},
"release-it": {
"git": {

View File

@ -1,3 +1,6 @@
/* stylelint-disable selector-pseudo-element-colon-notation */
/* stylelint-disable font-family-no-missing-generic-family-keyword */
.van-icon {
position: relative;
display: inline-block;

View File

@ -1,5 +1,7 @@
@import './common.less';
/* stylelint-disable selector-pseudo-element-colon-notation */
/* stylelint-disable font-family-no-missing-generic-family-keyword */
@font-face {
font-weight: normal;
font-family: 'vant-icon';

View File

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

View File

@ -0,0 +1,37 @@
# Vant Markdown Vetur
将 .md 文件转换成能描述 vue 组件的 .json 文件,供 WebStorm 和 vscode 的 `vetur` 插件读取,从而可以在 vue 模版语法中拥有自动补全的功能。
## Install
```shell
# with npm
npm i @vant/markdown-vetur -D
# with yarn
yarn add @vant/markdown-vetur -D
# with pnpm
pnpm add @vant/markdown-vetur -D
```
## API
#### parseAndWrite
解析目录下所有匹配的文件,并输出为 tags.json 和 attributes.json
```ts
interface Options {
// 需要解析的文件夹路径
path: PathLike;
// 文件匹配正则
test: RegExp;
// 输出目录
outputDir: string;
// 递归的目录最大深度
maxDeep?: number;
// 解析出来的组件名前缀
tagPrefix?: string;
}
```

View File

@ -0,0 +1,35 @@
{
"name": "@vant/markdown-vetur",
"version": "2.3.0",
"description": "simple parse markdown to vue component description for vetur auto-completion",
"main": "lib/index.js",
"files": [
"lib"
],
"scripts": {
"dev": "tsc --watch",
"build": "rimraf ./lib && tsc",
"release": "pnpm build && npm publish",
"prepare": "pnpm build"
},
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-markdown-vetur"
},
"bugs": "https://github.com/youzan/vant/issues",
"author": "zhangshuai",
"license": "MIT",
"dependencies": {
"fast-glob": "^3.2.2",
"fs-extra": "^10.0.0"
},
"devDependencies": {
"@types/fs-extra": "^9.0.13",
"typescript": "^4.7.4"
}
}

View File

@ -1,19 +1,14 @@
/* eslint-disable no-continue */
import { Articles } from './parser.js';
import {
formatOptions,
formatType,
removeVersion,
toKebabCase,
} from './utils.js';
import { VueEventArgument, VueTag } from './type.js';
import { Articals } from './parser';
import { formatOptions, formatType, removeVersion, toKebabCase } from './utils';
import { VueEventArgument, VueTag } from './type';
function formatComponentName(name: string, tagPrefix: string) {
return tagPrefix + toKebabCase(name);
}
/**
* format arguments of events
* format arugments of events
* input = value: { foo: foo or 1, bar: bar or 2 }, value2: { one: 1 and 1, two: 2 and 2 }, foo: bar
* output = [{ name: 'value', type: '{ foo: foo or 1, bar: bar or 2 }' }, { name: 'value2', type: '{ one: 1 and 1, two: 2 and 2 }'}, { name: 'foo', type: 'bar' }]
*/
@ -78,29 +73,29 @@ function findTag(vueTags: VueTag[], name: string) {
export function formatter(
vueTags: VueTag[],
articles: Articles,
articals: Articals,
tagPrefix = ''
) {
if (!articles.length) {
if (!articals.length) {
return;
}
const mainTitle = articles[0].content;
const mainTitle = articals[0].content;
const defaultName = mainTitle
? formatComponentName(mainTitle.split(' ')[0], tagPrefix)
: '';
const tables = articles.filter((article) => article.type === 'table');
const tables = articals.filter((artical) => artical.type === 'table');
tables.forEach((item) => {
const { table } = item;
const prevIndex = articles.indexOf(item) - 1;
const prevArticle = articles[prevIndex];
const prevIndex = articals.indexOf(item) - 1;
const prevArtical = articals[prevIndex];
if (!prevArticle || !prevArticle.content || !table || !table.body) {
if (!prevArtical || !prevArtical.content || !table || !table.body) {
return;
}
const tableTitle = prevArticle.content;
const tableTitle = prevArtical.content;
if (tableTitle.includes('Props')) {
const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;

View File

@ -0,0 +1,49 @@
import glob from 'fast-glob';
import { join } from 'path';
import { mdParser } from './parser';
import { formatter } from './formatter';
import { genWebTypes } from './web-types';
import { readFileSync, outputFileSync } from 'fs-extra';
import { Options, VueTag } from './type';
import { normalizePath } from './utils';
import { genVeturTags, genVeturAttributes } from './vetur';
async function readMarkdown(options: Options) {
const mds = await glob(normalizePath(`${options.path}/**/*.md`));
return mds
.filter((md) => options.test.test(md))
.map((path) => readFileSync(path, 'utf-8'));
}
export async function parseAndWrite(options: Options) {
if (!options.outputDir) {
throw new Error('outputDir can not be empty.');
}
const mds = await readMarkdown(options);
const vueTags: VueTag[] = [];
mds.forEach((md) => {
const parsedMd = mdParser(md);
formatter(vueTags, parsedMd, options.tagPrefix);
});
const webTypes = genWebTypes(vueTags, options);
const veturTags = genVeturTags(vueTags);
const veturAttributes = genVeturAttributes(vueTags);
outputFileSync(
join(options.outputDir, 'tags.json'),
JSON.stringify(veturTags, null, 2)
);
outputFileSync(
join(options.outputDir, 'attributes.json'),
JSON.stringify(veturAttributes, null, 2)
);
outputFileSync(
join(options.outputDir, 'web-types.json'),
JSON.stringify(webTypes, null, 2)
);
}
export default { parseAndWrite };

View File

@ -9,14 +9,14 @@ type TableContent = {
body: string[][];
};
export type Article = {
export type Artical = {
type: string;
content?: string;
table?: TableContent;
level?: number;
};
export type Articles = Article[];
export type Articals = Artical[];
function readLine(input: string) {
const end = input.indexOf('\n');
@ -75,8 +75,8 @@ function tableParse(input: string) {
};
}
export function mdParser(input: string): Articles {
const article = [];
export function mdParser(input: string): Articals {
const artical = [];
let start = 0;
const end = input.length;
@ -85,7 +85,7 @@ export function mdParser(input: string): Articles {
let match;
if ((match = TITLE_REG.exec(target))) {
article.push({
artical.push({
type: 'title',
content: match[2],
level: match[1].length,
@ -94,7 +94,7 @@ export function mdParser(input: string): Articles {
start += match.index + match[0].length;
} else if ((match = TABLE_REG.exec(target))) {
const { table, usedLength } = tableParse(target.substr(match.index));
article.push({
artical.push({
type: 'table',
table,
});
@ -105,5 +105,5 @@ export function mdParser(input: string): Articles {
}
}
return article;
return artical;
}

View File

@ -35,6 +35,26 @@ export type VueTag = {
description?: string;
};
export type VeturTag = {
description?: string;
attributes: string[];
};
export type VeturTags = Record<string, VeturTag>;
export type VeturAttribute = {
type: string;
description: string;
options?: string[];
};
export type VeturAttributes = Record<string, VeturAttribute>;
export type VeturResult = {
tags: VeturTags;
attributes: VeturAttributes;
};
export type Options = {
name: string;
path: PathLike;

View File

@ -0,0 +1,36 @@
import { VueTag, VeturTags, VeturAttributes, VeturAttribute } from './type';
export function genVeturTags(tags: VueTag[]) {
const veturTags: VeturTags = {};
tags.forEach((tag) => {
veturTags[tag.name] = {
attributes: tag.attributes ? tag.attributes.map((item) => item.name) : [],
};
});
return veturTags;
}
export function genVeturAttributes(tags: VueTag[]) {
const veturAttributes: VeturAttributes = {};
tags.forEach((tag) => {
if (tag.attributes) {
tag.attributes.forEach((attr) => {
const attribute: VeturAttribute = {
type: attr.value.type,
description: `${attr.description}, Default: ${attr.default}`,
};
if (attr.options.length > 0) {
attribute.options = attr.options;
}
veturAttributes[`${tag.name}/${attr.name}`] = attribute;
});
}
});
return veturAttributes;
}

View File

@ -1,4 +1,4 @@
import type { VueTag, Options } from './type.js';
import { VueTag, Options } from './type';
// create web-types.json to provide autocomplete in JetBrains IDEs
export function genWebTypes(tags: VueTag[], options: Options) {

View File

@ -0,0 +1,10 @@
{
"extends": "../../tsconfig",
"compilerOptions": {
"target": "ES2019",
"outDir": "./lib",
"module": "commonjs",
"declaration": true
},
"include": ["src/**/*"]
}

View File

@ -21,4 +21,4 @@ see: https://popper.js.org/
## Refer
issue: https://github.com/vant-ui/vant/issues/7626
issue: https://github.com/youzan/vant/issues/7626

View File

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

View File

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

View File

@ -0,0 +1,22 @@
# Stylelint Config of Vant
## Install
```shell
# with npm
npm i @vant/stylelint-config -D
# with yarn
yarn add @vant/stylelint-config -D
# with pnpm
pnpm add @vant/stylelint-config -D
```
## Usage
```js
{
"extends": ["@vant/stylelint-config"]
}
```

View File

@ -0,0 +1,18 @@
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
'no-descending-specificity': null,
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['deep'],
},
],
},
};

View File

@ -0,0 +1,25 @@
{
"name": "@vant/stylelint-config",
"version": "1.4.2",
"description": "stylelint config of vant.",
"main": "index.js",
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-stylelint-config"
},
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"dependencies": {
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^22.0.0"
},
"devDependencies": {
"stylelint": "^13.0.0"
}
}

View File

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

View File

@ -1,11 +1,5 @@
# Changelog
### [v1.4.0]
`2022-08-06`
- support `.mjs` extension
### [v1.3.1]
`2021-07-06`
@ -16,7 +10,7 @@
`2021-05-26`
- add SSR support [\#8767](https://github.com/vant-ui/vant/pull/8767)
- add SSR support [\#8767](https://github.com/youzan/vant/pull/8767)
### [v1.2.0]

View File

@ -1,23 +1,17 @@
{
"name": "@vant/touch-emulator",
"version": "1.4.0",
"version": "1.3.2",
"description": "Vant touch emulator",
"main": "dist/index.js",
"module": "dist/index.mjs",
"scripts": {
"build": "node ./build.js",
"prepare": "pnpm build"
},
"main": "index.js",
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
"access": "public"
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-touch-emulator"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT"
}

View File

@ -1,6 +1,6 @@
{
"name": "@vant/use",
"version": "1.4.2",
"version": "1.4.1",
"description": "Vant Composition API",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.mjs",
@ -30,17 +30,17 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant-use"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {
"esbuild": "^0.14.54",
"release-it": "^15.4.1",
"typescript": "^4.8.2",
"vue": "^3.2.38"
"esbuild": "^0.14.29",
"release-it": "^15.1.1",
"typescript": "^4.7.4",
"vue": "^3.2.27"
},
"release-it": {
"git": {

View File

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

View File

@ -107,7 +107,7 @@ export function useCountDown(options: UseCountDownOptions) {
const tick = () => {
// should not start counting in server
// see: https://github.com/vant-ui/vant/issues/7807
// see: https://github.com/youzan/vant/issues/7807
if (!inBrowser) {
return;
}

View File

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

View File

@ -15,7 +15,7 @@ function isElement(node: Element) {
);
}
// https://github.com/vant-ui/vant/issues/3823
// https://github.com/youzan/vant/issues/3823
export function getScrollParent(
el: Element,
root: ScrollElement | undefined = defaultRoot

View File

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

View File

@ -172,8 +172,6 @@ module.exports = {
};
```
> Tips: 在配置 postcss-pxtorem 时,同样应避免 ignore node_modules 目录,否则会导致 Vant 样式无法被编译。
#### 其他设计稿尺寸
如果设计稿的尺寸不是 375而是 750 或其他大小,可以将 `rootValue` 配置调整为:
@ -197,7 +195,7 @@ module.exports = {
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。
如果你需要在桌面端使用 Vant可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
如果你需要在桌面端使用 Vant可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
```bash
# 安装模块

View File

@ -19,153 +19,61 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
## Details
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
`2022-09-04`
**New Component**
- Add new component [PickerGroup](#/en-US/picker-group) [#11005](https://github.com/vant-ui/vant/issues/11005)
**Bug Fixes**
- DatePicker: failed to update model value [#10984](https://github.com/vant-ui/vant/issues/10984)
- DatePicker: min-date prop not work correctly [#10985](https://github.com/vant-ui/vant/issues/10985)
### [v4.0.0-beta.1](https://github.com/vant-ui/vant/compare/v3.6.0...v4.0.0-beta.1)
`2022-08-24`
**Breaking Changes**
- Popup: improve style when position is center [#10965](https://github.com/vant-ui/vant/issues/10965)
```less
// Vant 3
.van-popup--center {
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
// Vant 4
.van-popup--center {
left: 0;
right: 0;
width: fit-content;
max-width: calc(100vw - var(--van-padding-md) * 2);
margin: 0 auto;
transform: translateY(-50%);
}
```
**New Component**
- Add new component [Space](#/en-US/space), contributed by [@LadyChatterleyLover](https://github.com/LadyChatterleyLover) [#10857](https://github.com/vant-ui/vant/issues/10857)
**Feature**
- ConfigProvider: add z-index prop [#10915](https://github.com/vant-ui/vant/issues/10915)
- Form: add validateEmpty option of rule [#10913](https://github.com/vant-ui/vant/issues/10913)
- Popup: add role and tabindex for a11y [#10894](https://github.com/vant-ui/vant/issues/10894)
- TouchEmulator: support .mjs extension [#10888](https://github.com/vant-ui/vant/issues/10888)
**Feature**
- ConfigProvider: add theme-vars-dark and theme-vars-light props [#10939](https://github.com/vant-ui/vant/issues/10939)
- Picker: add clickOption event [#10865](https://github.com/vant-ui/vant/issues/10865)
- add correct passive flag to improve scroll performance [#10951](https://github.com/vant-ui/vant/issues/10951)
- @vant/use: improve useEventListener typing [#10952](https://github.com/vant-ui/vant/issues/10952)
**Bug Fixes**
- ConfigProvider: should remove theme class on unmount [#10898](https://github.com/vant-ui/vant/issues/10898)
- reduce passive event warning of touchstart event [#10954](https://github.com/vant-ui/vant/issues/10954)
- Tabs: resize not work for swipeable tabs [#10964](https://github.com/vant-ui/vant/issues/10964)
- Fix incorrect tag name in WebStorm [#10946](https://github.com/vant-ui/vant/issues/10946)
- Badge: should hide string zero when using show-zero prop [#10921](https://github.com/vant-ui/vant/issues/10921)
- Calendar: content disappeared when hiding [#10910](https://github.com/vant-ui/vant/issues/10910)
- Calendar: reading getFullYear error in some cases [#10909](https://github.com/vant-ui/vant/issues/10909)
- Empty: generate unique id to avoid render issue [#10943](https://github.com/vant-ui/vant/issues/10943)
- Popover: can not scroll inside popup [#10949](https://github.com/vant-ui/vant/issues/10949)
- PullRefresh: fix passive event warning [#10938](https://github.com/vant-ui/vant/issues/10938)
- Search: --van-search-input-height var not work [#10911](https://github.com/vant-ui/vant/issues/10911)
### [v4.0.0-beta.0](https://github.com/vant-ui/vant/compare/v3.5.2...v4.0.0-beta.0)
`2022-07-16`
**Breaking Changes**
- Toast: redesign function-call API [#10804](https://github.com/vant-ui/vant/issues/10804)
- Dialog: redesign function-call API [#10781](https://github.com/vant-ui/vant/issues/10781)
- Notify: redesign function-call API [#10782](https://github.com/vant-ui/vant/issues/10782)
- ImagePreview: redesign function-call API [#10802](https://github.com/vant-ui/vant/issues/10802)
**Feature**
- add @vant/compat package [#10806](https://github.com/vant-ui/vant/issues/10806)
- Calendar: expose getSelectedDate method [419a8e](https://github.com/vant-ui/vant/commit/419a8e4f0e6454b9aac30d5800318deabec099cb)
- remove less source file to remove bundle size [#10752](https://github.com/vant-ui/vant/issues/10752)
**Bug Fixes**
- Uploader: should not preview failed images [#10790](https://github.com/vant-ui/vant/issues/10790)
### [v4.0.0-alpha.4](https://github.com/vant-ui/vant/compare/v3.5.0-beta.0...v4.0.0-alpha.4)
### [v4.0.0-alpha.4](https://github.com/youzan/vant/compare/v3.5.0-beta.0...v4.0.0-alpha.4)
`2022-05-31`
**Feature**
- using mjs extension for esmodule [#10625](https://github.com/vant-ui/vant/issues/10625)
- using mjs extension for esmodule [#10625](https://github.com/youzan/vant/issues/10625)
### [v4.0.0-alpha.3](https://github.com/vant-ui/vant/compare/v3.4.9...v4.0.0-alpha.3)
### [v4.0.0-alpha.3](https://github.com/youzan/vant/compare/v3.4.9...v4.0.0-alpha.3)
`2022-05-02`
**Feature**
- Form: support setting multiple validate-trigger [#10544](https://github.com/vant-ui/vant/issues/10544)
- Empty: localize all images [#10514](https://github.com/vant-ui/vant/issues/10514) [#10515](https://github.com/vant-ui/vant/issues/10515) [#10516](https://github.com/vant-ui/vant/issues/10516)
- Loading: add aria to improve a11y [#10568](https://github.com/vant-ui/vant/issues/10568)
- Form: support setting multiple validate-trigger [#10544](https://github.com/youzan/vant/issues/10544)
- Empty: localize all images [#10514](https://github.com/youzan/vant/issues/10514) [#10515](https://github.com/youzan/vant/issues/10515) [#10516](https://github.com/youzan/vant/issues/10516)
- Loading: add aria to improve a11y [#10568](https://github.com/youzan/vant/issues/10568)
**Bug Fixes**
- Search: style error in dark mode [#10527](https://github.com/vant-ui/vant/issues/10527)
- @vant/area-data: only publish dist folder to npm [f927f6](https://github.com/vant-ui/vant/commit/f927f6a7518cf7d08ec8abc5dd35019685c19e3a)
- Search: style error in dark mode [#10527](https://github.com/youzan/vant/issues/10527)
- @vant/area-data: only publish dist folder to npm [f927f6](https://github.com/youzan/vant/commit/f927f6a7518cf7d08ec8abc5dd35019685c19e3a)
### [v4.0.0-alpha.2](https://github.com/vant-ui/vant/compare/v3.4.8...v4.0.0-alpha.2)
### [v4.0.0-alpha.2](https://github.com/youzan/vant/compare/v3.4.8...v4.0.0-alpha.2)
`2022-04-16`
- CalendarDay: add default margin-bottom [#10441](https://github.com/vant-ui/vant/issues/10441)
- Empty: support set the image size separately [#10465](https://github.com/vant-ui/vant/issues/10465)
- Field: add enterkeyhint prop [#10478](https://github.com/vant-ui/vant/issues/10478)
- Form: add getValues method [#10511](https://github.com/vant-ui/vant/issues/10511)
- Icon: add some icons for ShareSheet [#10468](https://github.com/vant-ui/vant/issues/10468)
- Locale: add Danish lang [#10513](https://github.com/vant-ui/vant/issues/10513)
- ShareSheet: no longer rely on CDN images [#10469](https://github.com/vant-ui/vant/issues/10469)
- Add event arguments in web-types.json [#10474](https://github.com/vant-ui/vant/issues/10474)
- CalendarDay: add default margin-bottom [#10441](https://github.com/youzan/vant/issues/10441)
- Empty: support set the image size separately [#10465](https://github.com/youzan/vant/issues/10465)
- Field: add enterkeyhint prop [#10478](https://github.com/youzan/vant/issues/10478)
- Form: add getValues method [#10511](https://github.com/youzan/vant/issues/10511)
- Icon: add some icons for ShareSheet [#10468](https://github.com/youzan/vant/issues/10468)
- Locale: add Danish lang [#10513](https://github.com/youzan/vant/issues/10513)
- ShareSheet: no longer rely on CDN images [#10469](https://github.com/youzan/vant/issues/10469)
- Add event arguments in web-types.json [#10474](https://github.com/youzan/vant/issues/10474)
**Bug Fixes**
- DatetimePicker: modeValue is inconsistent with the selected data [#10448](https://github.com/vant-ui/vant/issues/10448)
- Rate: support precisely selected [#10500](https://github.com/vant-ui/vant/issues/10500)
- DatetimePicker: modeValue is inconsistent with the selected data [#10448](https://github.com/youzan/vant/issues/10448)
- Rate: support precisely selected [#10500](https://github.com/youzan/vant/issues/10500)
### [v4.0.0-alpha.1](https://github.com/vant-ui/vant/compare/v3.4.6...v4.0.0-alpha.1)
### [v4.0.0-alpha.1](https://github.com/youzan/vant/compare/v3.4.6...v4.0.0-alpha.1)
`2022-03-19`
**Feature**
- @vant/area-data: update counties of NanJing [#10410](https://github.com/vant-ui/vant/issues/10410)
- Locale: add la-LA.ts [#10388](https://github.com/vant-ui/vant/issues/10388)
- @vant/area-data: update counties of NanJing [#10410](https://github.com/youzan/vant/issues/10410)
- Locale: add la-LA.ts [#10388](https://github.com/youzan/vant/issues/10388)
**Bug Fixes**
- Calendar: fix title color in dark mode [#10403](https://github.com/vant-ui/vant/issues/10403)
- Picker: fix title color in dark mode [#10403](https://github.com/vant-ui/vant/issues/10403)
- ConfigProvider: dark mode not work as default value [#10413](https://github.com/vant-ui/vant/issues/10413)
- DatePicker: failed to update model value [#10415](https://github.com/vant-ui/vant/issues/10415)
- Dialog: fix title and message color in dark mode [#10379](https://github.com/vant-ui/vant/issues/10379)
- IndexBar: allow active bottom anchor [#10404](https://github.com/vant-ui/vant/issues/10404)
- Calendar: fix title color in dark mode [#10403](https://github.com/youzan/vant/issues/10403)
- Picker: fix title color in dark mode [#10403](https://github.com/youzan/vant/issues/10403)
- ConfigProvider: dark mode not work as default value [#10413](https://github.com/youzan/vant/issues/10413)
- DatePicker: failed to update model value [#10415](https://github.com/youzan/vant/issues/10415)
- Dialog: fix title and message color in dark mode [#10379](https://github.com/youzan/vant/issues/10379)
- IndexBar: allow active bottom anchor [#10404](https://github.com/youzan/vant/issues/10404)

View File

@ -19,161 +19,66 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
## 更新内容
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
`2022-09-04`
**Feature**
- 新增 [PickerGroup 选择器组](#/zh-CN/picker-group) 组件
**Bug Fixes**
- DatePicker: 修复未正确更新 modelValue 的问题 [#10984](https://github.com/vant-ui/vant/issues/10984)
- DatePicker: 修复 min-date 属性未正确生效的问题 [#10985](https://github.com/vant-ui/vant/issues/10985)
### [v4.0.0-beta.1](https://github.com/vant-ui/vant/compare/v3.6.0...v4.0.0-beta.1)
`2022-08-24`
**Breaking Changes**
- Popup: 默认添加了 `box-sizing: border-box` 样式。
- Popup: 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题。
```less
// Vant 3
.van-popup--center {
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
// Vant 4
.van-popup--center {
left: 0;
right: 0;
width: fit-content;
max-width: calc(100vw - var(--van-padding-md) * 2);
margin: 0 auto;
transform: translateY(-50%);
}
```
**New Component**
- 新增 [Space 间距](#/zh-CN/space) 组件, 由 [@LadyChatterleyLover](https://github.com/LadyChatterleyLover) 贡献 [#10857](https://github.com/vant-ui/vant/issues/10857)
**Feature**
- ConfigProvider: 新增 z-index 属性,用于设置弹窗组件的 z-index [#10915](https://github.com/vant-ui/vant/issues/10915)
- Form: 新增 rule 的 validateEmpty 选项 [#10913](https://github.com/vant-ui/vant/issues/10913)
- Popup: 新增 role 和 tabindex优化无障碍访问 [#10894](https://github.com/vant-ui/vant/issues/10894)
- TouchEmulator: 支持 .mjs 后缀 [#10888](https://github.com/vant-ui/vant/issues/10888)
**Feature**
- ConfigProvider: 新增 theme-vars-dark 和 theme-vars-light 属性 [#10939](https://github.com/vant-ui/vant/issues/10939)
- Picker: 新增 clickOption 事件 [#10865](https://github.com/vant-ui/vant/issues/10865)
- 为 scroll 事件添加了正确的 passive 标记来提升滚动性能 [#10951](https://github.com/vant-ui/vant/issues/10951)
- @vant/use: 优化 useEventListener 类型定义 [#10952](https://github.com/vant-ui/vant/issues/10952)
**Bug Fixes**
- ConfigProvider: 修复销毁时没有回收全局样式类的问题 [#10898](https://github.com/vant-ui/vant/issues/10898)
- 修复 touchstart 导致控制台出现 passive event warning 的问题 [#10954](https://github.com/vant-ui/vant/issues/10954)
- Tabs: 修复开启 swipeable 时resize 方法无法正确生效的问题 [#10964](https://github.com/vant-ui/vant/issues/10964)
- 修复在 WebStorm 下标签无法自动补全的问题 [#10946](https://github.com/vant-ui/vant/issues/10946)
- Badge: 修复使用 show-zero 时字符串 `'0'` 不生效的问题 [#10921](https://github.com/vant-ui/vant/issues/10921)
- Calendar: 修复关闭弹窗过程中内容白屏的问题 [#10910](https://github.com/vant-ui/vant/issues/10910)
- Calendar: 修复控制台出现读取 getFullYear 异常的问题 [#10909](https://github.com/vant-ui/vant/issues/10909)
- Empty: 修复在 Tab 下嵌套使用时渲染异常的问题 [#10943](https://github.com/vant-ui/vant/issues/10943)
- Popover: 修复在 Popup 下嵌套使用时无法滚动的问题 [#10949](https://github.com/vant-ui/vant/issues/10949)
- PullRefresh: 修复 Chrome 控制台出现 passive event warning 的问题 [#10938](https://github.com/vant-ui/vant/issues/10938)
- Search: 修复 --van-search-input-height 样式变量不生效的问题 [#10911](https://github.com/vant-ui/vant/issues/10911)
### [v4.0.0-beta.0](https://github.com/vant-ui/vant/compare/v3.5.2...v4.0.0-beta.0)
`2022-07-16`
**Breaking Changes**
- Toast: 重新设计函数调用 API [#10804](https://github.com/vant-ui/vant/issues/10804)
- Dialog: 重新设计函数调用 API [#10781](https://github.com/vant-ui/vant/issues/10781)
- Notify: 重新设计函数调用 API[#10782](https://github.com/vant-ui/vant/issues/10782)
- ImagePreview: 重新设计函数调用 API [#10802](https://github.com/vant-ui/vant/issues/10802)
关于以上改动的详细描述和迁移方法,请参考 [从 v3 升级到 v4](/vant/v4/#/zh-CN/migrate-from-v3) 的 「API 调整」部分。
**Feature**
- 新增 @vant/compat 包,用于辅助代码迁移 [#10806](https://github.com/vant-ui/vant/issues/10806)
- Calendar: 新增 getSelectedDate 方法 [419a8e](https://github.com/vant-ui/vant/commit/419a8e4f0e6454b9aac30d5800318deabec099cb)
- 由于主题定制方式调整,发布到 npm 的代码中将不再包含 .less 样式源文件,从而减少 npm 包体积 [#10752](https://github.com/vant-ui/vant/issues/10752)
**Bug Fixes**
- Uploader: 修复预览图片时会展示上传失败的图片的问题 [#10790](https://github.com/vant-ui/vant/issues/10790)
### [v4.0.0-alpha.4](https://github.com/vant-ui/vant/compare/v3.5.0-beta.0...v4.0.0-alpha.4)
### [v4.0.0-alpha.4](https://github.com/youzan/vant/compare/v3.5.0-beta.0...v4.0.0-alpha.4)
`2022-05-31`
**Feature**
- 适配 nuxt 3现在 dist 目录下所有 esmodule 文件将使用 `.mjs` 文件后缀 [#10625](https://github.com/vant-ui/vant/issues/10625)
- 适配 nuxt 3现在 dist 目录下所有 esmodule 文件将使用 `.mjs` 文件后缀 [#10625](https://github.com/youzan/vant/issues/10625)
### [v4.0.0-alpha.3](https://github.com/vant-ui/vant/compare/v3.4.9...v4.0.0-alpha.3)
### [v4.0.0-alpha.3](https://github.com/youzan/vant/compare/v3.4.9...v4.0.0-alpha.3)
`2022-05-02`
**Feature**
- Form: 支持同时设置多个 validate-trigger 值 [#10544](https://github.com/vant-ui/vant/issues/10544)
- Empty: 支持在无网络的环境下离线使用,图片从 CDN 调整为内联的 SVG 图片 [#10514](https://github.com/vant-ui/vant/issues/10514) [#10515](https://github.com/vant-ui/vant/issues/10515) [#10516](https://github.com/vant-ui/vant/issues/10516)
- Loading: 优化无障碍访问 [#10568](https://github.com/vant-ui/vant/issues/10568)
- Form: 支持同时设置多个 validate-trigger 值 [#10544](https://github.com/youzan/vant/issues/10544)
- Empty: 支持在无网络的环境下离线使用,图片从 CDN 调整为内联的 SVG 图片 [#10514](https://github.com/youzan/vant/issues/10514) [#10515](https://github.com/youzan/vant/issues/10515) [#10516](https://github.com/youzan/vant/issues/10516)
- Loading: 优化无障碍访问 [#10568](https://github.com/youzan/vant/issues/10568)
**Bug Fixes**
- Search: 修复暗色模式下样式错误的问题 [#10527](https://github.com/vant-ui/vant/issues/10527)
- @vant/area-data: 修复发布到 npm 时包含 tsconfig.json 文件导致编译错误的问题 [f927f6](https://github.com/vant-ui/vant/commit/f927f6a7518cf7d08ec8abc5dd35019685c19e3a)
- Search: 修复暗色模式下样式错误的问题 [#10527](https://github.com/youzan/vant/issues/10527)
- @vant/area-data: 修复发布到 npm 时包含 tsconfig.json 文件导致编译错误的问题 [f927f6](https://github.com/youzan/vant/commit/f927f6a7518cf7d08ec8abc5dd35019685c19e3a)
### [v4.0.0-alpha.2](https://github.com/vant-ui/vant/compare/v3.4.8...v4.0.0-alpha.2)
### [v4.0.0-alpha.2](https://github.com/youzan/vant/compare/v3.4.8...v4.0.0-alpha.2)
`2022-04-16`
**Feature**
- CalendarDay: 增加日期行间距 [#10441](https://github.com/vant-ui/vant/issues/10441)
- Empty: 支持单独设置 image 的宽高 [#10465](https://github.com/vant-ui/vant/issues/10465)
- Field: 新增 enterkeyhint 属性 [#10478](https://github.com/vant-ui/vant/issues/10478)
- Form: 新增 getValues 方法 [#10511](https://github.com/vant-ui/vant/issues/10511)
- Icon: 新增 qq、weibo 等图标 [#10468](https://github.com/vant-ui/vant/issues/10468)
- Locale: 新增 Danish 丹麦语 [#10513](https://github.com/vant-ui/vant/issues/10513)
- ShareSheet: 不再依赖 CDN 上的图片资源,使用 iconfont 代替 [#10469](https://github.com/vant-ui/vant/issues/10469)
- web-types.json 文件增加 event arguments 信息 [#10474](https://github.com/vant-ui/vant/issues/10474)
- CalendarDay: 增加日期行间距 [#10441](https://github.com/youzan/vant/issues/10441)
- Empty: 支持单独设置 image 的宽高 [#10465](https://github.com/youzan/vant/issues/10465)
- Field: 新增 enterkeyhint 属性 [#10478](https://github.com/youzan/vant/issues/10478)
- Form: 新增 getValues 方法 [#10511](https://github.com/youzan/vant/issues/10511)
- Icon: 新增 qq、weibo 等图标 [#10468](https://github.com/youzan/vant/issues/10468)
- Locale: 新增 Danish 丹麦语 [#10513](https://github.com/youzan/vant/issues/10513)
- ShareSheet: 不再依赖 CDN 上的图片资源,使用 iconfont 代替 [#10469](https://github.com/youzan/vant/issues/10469)
- web-types.json 文件增加 event arguments 信息 [#10474](https://github.com/youzan/vant/issues/10474)
**Bug Fixes**
- DatetimePicker: 修复 modeValue 与选中的数据不一致的问题 [#10448](https://github.com/vant-ui/vant/issues/10448)
- Rate: 修复多行时滑动选中不正确的问题 [#10500](https://github.com/vant-ui/vant/issues/10500)
- DatetimePicker: 修复 modeValue 与选中的数据不一致的问题 [#10448](https://github.com/youzan/vant/issues/10448)
- Rate: 修复多行时滑动选中不正确的问题 [#10500](https://github.com/youzan/vant/issues/10500)
### [v4.0.0-alpha.1](https://github.com/vant-ui/vant/compare/v3.4.6...v4.0.0-alpha.1)
### [v4.0.0-alpha.1](https://github.com/youzan/vant/compare/v3.4.6...v4.0.0-alpha.1)
`2022-03-19`
**Feature**
- @vant/area-data: 新增南京市江北新区 [#10410](https://github.com/vant-ui/vant/issues/10410)
- Locale: 新增老挝语 [#10388](https://github.com/vant-ui/vant/issues/10388)
- @vant/area-data: 新增南京市江北新区 [#10410](https://github.com/youzan/vant/issues/10410)
- Locale: 新增老挝语 [#10388](https://github.com/youzan/vant/issues/10388)
**Bug Fixes**
- Calendar: 修复暗色模式下标题颜色 [#10403](https://github.com/vant-ui/vant/issues/10403)
- Picker: 修复暗色模式下标题颜色 [#10403](https://github.com/vant-ui/vant/issues/10403)
- ConfigProvider: 修复默认设置暗色模式不生效的问题 [#10413](https://github.com/vant-ui/vant/issues/10413)
- DatePicker: 修复更新 v-model 不生效的问题 [#10415](https://github.com/vant-ui/vant/issues/10415)
- Dialog: 修复暗色模式下标题和文本颜色 [#10379](https://github.com/vant-ui/vant/issues/10379)
- IndexBar: 修复底部索引无法高亮的问题 [#10404](https://github.com/vant-ui/vant/issues/10404)
- Calendar: 修复暗色模式下标题颜色 [#10403](https://github.com/youzan/vant/issues/10403)
- Picker: 修复暗色模式下标题颜色 [#10403](https://github.com/youzan/vant/issues/10403)
- ConfigProvider: 修复默认设置暗色模式不生效的问题 [#10413](https://github.com/youzan/vant/issues/10413)
- DatePicker: 修复更新 v-model 不生效的问题 [#10415](https://github.com/youzan/vant/issues/10415)
- Dialog: 修复暗色模式下标题和文本颜色 [#10379](https://github.com/youzan/vant/issues/10379)
- IndexBar: 修复底部索引无法高亮的问题 [#10404](https://github.com/youzan/vant/issues/10404)
### 4.0.0-alpha.0

View File

@ -4,7 +4,7 @@
感谢你使用 Vant。
以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下内容
以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下文字
### Issue 规范
@ -15,19 +15,13 @@
### 本地开发
在进行本地开发前,请先确保你的开发环境中安装了 [Node.js >= 14.19.0](https://nodejs.org)。
在进行本地开发前,请先确保你的开发环境中安装了 [Node.js >= 14](https://nodejs.org) 和 [pnpm](https://pnpm.io).
按照下面的步骤操作,即可在本地开发 Vant 组件。
```bash
# 克隆仓库
git clone git@github.com:vant-ui/vant.git
# 启用 pnpm 包管理器
corepack enable
# 如果无法使用 corepack你也可以手动安装 pnpm
npm install -g pnpm@7
git clone git@github.com:youzan/vant.git
# 安装依赖
pnpm i
@ -38,9 +32,9 @@ pnpm dev
仓库的不同分支对应不同的 Vant 版本,请切换到对应分支进行开发:
- dev 分支对应 Vant 4 版本,适用于 Vue 3
- 3.x 分支对应 Vant 3 版本 ,适用于 Vue 3
- 2.x 分支对应 Vant 2 版本,适用于 Vue 2
- dev 分支对应 Vant 3 版本 ,适用于 Vue 3
- next 分支对应 Vant 4 版本,适用于 Vue 3
### 镜像仓库
@ -95,7 +89,7 @@ src
在编写代码时,请注意:
- 确保代码可以通过仓库的 ESLint 校验。
- 确保代码可以通过仓库的 ESLint 和 Stylelint 校验。
- 确保代码格式是规范的,使用 prettier 进行代码格式化。
- 确保没有使用超出兼容性范围的 API比如 `async/await`
@ -130,7 +124,7 @@ src
```bash
# 添加主仓库到 remote作为 fork 后仓库的上游仓库
git remote add upstream git@github.com:vant-ui/vant.git
git remote add upstream git@github.com:youzan/vant.git
# 拉取主仓库最新代码
git fetch upstream

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

View File

@ -2,7 +2,7 @@
<div class="van-doc-intro">
<img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png">
<h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
<p>Lightweight Mobile UI Components built on Vue</p>
<p>Mobile UI Components built on Vue</p>
</div>
</div>
@ -10,7 +10,6 @@
- 🚀 1KB Component average size (min+gzip)
- 🚀 70+ High quality components
- 🚀 Zero third-party dependencies
- 💪 90%+ Unit test coverage
- 💪 Written in TypeScript
- 📖 Extensive documentation and demos
@ -39,11 +38,11 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
| Project | Description |
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Community Ecosystem
@ -59,7 +58,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
### Other Links
- [Feedback](https://github.com/vant-ui/vant/issues)
- [Feedback](https://github.com/youzan/vant/issues)
- [Changelog](#/en-US/changelog)
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
@ -77,13 +76,13 @@ Core contributors of Vant and Vant Weapp:
Thanks to the following friends for their contributions to Vant:
<a href="https://github.com/vant-ui/vant/graphs/contributors" target="_black">
<a href="https://github.com/youzan/vant/graphs/contributors" target="_black">
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors" style="width: 100%; margin: 16px 0">
</a>
### Contribution Guide
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
Please make sure to read the [Contributing Guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
### LICENSE

View File

@ -16,7 +16,6 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
- 🚀 性能极佳,组件平均体积小于 1KBmin+gzip
- 🚀 70+ 个高质量组件,覆盖移动端主流场景
- 🚀 零外部依赖,不依赖三方 npm 包
- 💪 使用 TypeScript 编写,提供完整的类型定义
- 💪 单元测试覆盖率超过 90%,提供稳定性保障
- 📖 提供丰富的中英文文档和组件示例
@ -51,11 +50,11 @@ 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/youzan/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
### 社区生态
@ -73,7 +72,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
### 其他链接
- [意见反馈](https://github.com/vant-ui/vant/issues)
- [意见反馈](https://github.com/youzan/vant/issues)
- [更新日志](#/zh-CN/changelog)
- [码云镜像](https://gitee.com/vant-contrib/vant)
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
@ -92,7 +91,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
感谢以下小伙伴们为 Vant 发展做出的贡献:
<a href="https://github.com/vant-ui/vant/graphs/contributors" target="_black">
<a href="https://github.com/youzan/vant/graphs/contributors" target="_black">
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors" style="width: 100%; margin: 16px 0">
</a>
@ -100,7 +99,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
贡献代码请阅读我们的[贡献指南](#/zh-CN/contribution)。
使用过程中发现任何问题都可以提 [Issue](https://github.com/vant-ui/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/vant-ui/vant/pulls)。
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
### 开源协议

View File

@ -4,68 +4,16 @@
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
## 按需引入方式调整
### 移除 babel-plugin-import
从 Vant 4.0 版本开始,将不再支持 `babel-plugin-import`,请移除项目中依赖的 `babel-plugin-import` 插件。
只需要删除 `babel.config.js` 中的以下代码即可:
```diff
module.exports = {
plugins: [
- ['import', {
- libraryName: 'vant',
- libraryDirectory: 'es',
- style: true
- }, 'vant']
]
};
```
#### 收益
移除 `babel-plugin-import` 有以下收益:
- 不再强依赖 babel项目可以使用 esbuild、swc 等更高效的编译工具,大幅度提升编译效率。
- 不再受到 `babel-plugin-import` 的 import 写法限制,可以从 vant 中导入除了组件以外的其他内容,比如 Vant 4 中新增的 `showToast` 等方法:
```ts
import { showToast, showDialog } from 'vant';
```
#### 样式引入方案
移除 `babel-plugin-import` 对项目的 JS 体积不会有影响,因为 Vant 默认支持通过 Tree Shaking 优化来移除不需要的 JS 代码。
而 CSS 代码的引入方式可以从以下两种方式中进行选择:
- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式,详细用法参见 [快速上手](#/zh-CN/quickstart)。
- 在项目中全量引入 Vant 的样式文件:
```js
import 'vant/lib/index.css';
```
## 组件重构
### 介绍
### Picker 组件重构
在 Vant 4 中,一共有三个组件被完全重构,它们是:
- `Area`
- `Picker`
- `DatetimePicker`
之所以重构这三个组件,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如:
在之前的版本中Picker 组件的 API 设计存在一些不合理的设计,比如:
- columns 数据格式定义不合理,容易产生误解
- 数据流不清晰,暴露了过多的实例方法来对数据进行操作
为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area``DatetimePicker` 组件。
### Picker 组件重构
为了解决上述问题,我们在 v4 版本中对 Picker 组件进行了重构。
#### 主要变更
@ -77,30 +25,25 @@ import 'vant/lib/index.css';
- 重命名 `item-height` 属性为 `option-height`
- 重命名 `visible-item-count` 属性为 `visible-option-num`
> 详细用法请参见 [Picker 组件文档](#/zh-CN/picker)。
详细用法请参见 [Picker 组件文档](#/zh-CN/picker)。
### DatetimePicker 组件重构
DatetimePicker 组件被拆分为:
- [TimePicker](#/zh-CN/time-picker): 用于时间选择。
- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
- TimePicker: 用于时间选择。
- DatePicker: 用于日期选择。
同时,TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。
同时,这两个组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。
#### 主要变更
以下是 TimePicker 和 DatePicker 的主要 API 变化,更多细节请参考 [TimePicker](#/zh-CN/time-picker) 和 [DatePicker](#/zh-CN/date-picker) 文档。
- `v-model` 绑定的值调整为数组格式
- 新增 `columns-type` 属性,用于控制选项类型和顺序
- 移除 `type` 属性和 `columns-order` 属性
- 移除 `getPicker` 方法
- 调整 `confirm``cancel``change` 事件的参数,与 Picker 组件保持一致
> Vant 4 不再提供旧版的 DatetimePicker 组件,使用 PickerGroup 组件可以实现更灵活、更丰富的交互效果,具体用法请参考 [PickerGroup](#/zh-CN/picker-group) 组件文档。
### Area 组件重构
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计。
@ -115,7 +58,7 @@ Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Are
- 重命名 `item-height` 属性为 `option-height`
- 重命名 `visible-item-count` 属性为 `visible-option-num`
> 详细用法请参见 [Area 组件文档](#/zh-CN/area)。
详细用法请参见 [Area 组件文档](#/zh-CN/area)。
## API 调整
@ -146,9 +89,7 @@ Dialog.setDefaultOptions(); // -> setDialogDefaultOptions()
Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
```
#### 兼容方案
为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
为了便于代码迁移,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象:
```js
import { Dialog } from '@vant/compat';
@ -157,7 +98,7 @@ Dialog();
Dialog.close();
```
`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为,因此你只需要修改 `Dialog` 的引用路径,其他代码可以保持不变
`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为。
### Toast 调用方式调整
@ -186,9 +127,7 @@ Toast.resetDefaultOptions(); // -> resetToastDefaultOptions()
同时Vant 4 将不再在 `this` 对象上全局注册 `$toast` 方法,这意味着 `this` 对象上将无法访问到 `$toast`
#### 兼容方案
为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Toast` 对象来兼容原有代码。
为了便于代码迁移,你可以使用 `@vant/compat` 中导出的 `Toast` 对象:
```js
import { Toast } from '@vant/compat';
@ -197,7 +136,7 @@ Toast();
Toast.clear();
```
`@vant/compat` 中导出的 `Toast` 与 Vant 3 中的 `Toast` 拥有完全一致的 API 和行为,因此你只需要修改 `Toast` 的引用路径,其他代码可以保持不变
`@vant/compat` 中导出的 `Toast` 与 Vant 3 中的 `Toast` 拥有完全一致的 API 和行为。
### Notify 调用方式调整
@ -224,9 +163,7 @@ Notify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()
同时Vant 4 将不再在 `this` 对象上全局注册 `$notify` 方法,这意味着 `this` 对象上将无法访问到 `$notify`
#### 兼容方案
为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Notify` 对象来兼容原有代码。
为了便于代码迁移,你可以使用 `@vant/compat` 中导出的 `Notify` 对象:
```js
import { Notify } from '@vant/compat';
@ -235,7 +172,7 @@ Notify();
Notify.clear();
```
`@vant/compat` 中导出的 `Notify` 与 Vant 3 中的 `Notify` 拥有完全一致的 API 和行为,因此你只需要修改 `Notify` 的引用路径,其他代码可以保持不变
`@vant/compat` 中导出的 `Notify` 与 Vant 3 中的 `Notify` 拥有完全一致的 API 和行为。
### ImagePreview 调用方式调整
@ -251,9 +188,7 @@ showImagePreview(); // 函数调用
ImagePreview; // 组件对象
```
#### 兼容方案
为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `ImagePreview` 对象来兼容原有代码。
为了便于代码迁移,你可以使用 `@vant/compat` 中导出的 `ImagePreview` 对象:
```js
import { ImagePreview } from '@vant/compat';
@ -261,7 +196,7 @@ import { ImagePreview } from '@vant/compat';
ImagePreview();
```
`@vant/compat` 中导出的 `ImagePreview` 与 Vant 3 中的 `ImagePreview` 拥有完全一致的 API 和行为,因此你只需要修改 `ImagePreview` 的引用路径,其他代码可以保持不变
`@vant/compat` 中导出的 `ImagePreview` 与 Vant 3 中的 `ImagePreview` 拥有完全一致的 API 和行为。
### 事件命名调整
@ -296,6 +231,10 @@ emit('clickInput');
在 Vant 4.0 版本中,以下 API 进行了不兼容更新:
#### Tabs
- 移除了 `click``disabled` 事件,请使用 `click-tab` 事件代替
#### AddressEdit
- 移除 `show-postal` 属性
@ -303,35 +242,6 @@ emit('clickInput');
- `change-area` 事件的参数调整为 `PickerOption[]` 类型
- 移除未在文档中标注的 `getArea` 实例方法
#### Popup
Popup 的 CSS 样式进行了一定调整,请确认是否对项目中的 UI 产生影响。
- 默认添加了 `box-sizing: border-box` 样式
- 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题:
```less
// Vant 3
.van-popup--center {
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
// Vant 4
.van-popup--center {
left: 0;
right: 0;
width: fit-content;
max-width: calc(100vw - var(--van-padding-md) * 2);
margin: 0 auto;
transform: translateY(-50%);
}
```
#### Tabs
- 移除了 `click``disabled` 事件,请使用 `click-tab` 事件代替
## 样式变量调整
### 移除 Less 变量

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "vant",
"version": "4.0.0-rc.0",
"version": "4.0.0-beta.0",
"description": "Mobile UI Components built on Vue",
"main": "lib/vant.cjs.js",
"module": "es/index.mjs",
@ -13,7 +13,8 @@
},
"files": [
"es",
"lib"
"lib",
"vetur"
],
"scripts": {
"dev": "vant-cli dev",
@ -31,10 +32,10 @@
},
"repository": {
"type": "git",
"url": "https://github.com/vant-ui/vant.git",
"url": "https://github.com/youzan/vant.git",
"directory": "packages/vant"
},
"bugs": "https://github.com/vant-ui/vant/issues",
"bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"keywords": [
@ -49,27 +50,31 @@
"dependencies": {
"@vant/icons": "^1.8.0",
"@vant/popperjs": "^1.2.1",
"@vant/use": "^1.4.2"
"@vant/use": "^1.4.1"
},
"peerDependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@types/jest": "^27.0.0",
"@types/node": "^16",
"@vant/area-data": "workspace:*",
"@vant/cli": "workspace:*",
"@vant/eslint-config": "workspace:*",
"@vue/runtime-core": "^3.2.38",
"@vue/test-utils": "^2.0.2",
"typescript": "^4.8.2",
"vue": "^3.2.38",
"vue-router": "^4.1.5"
"@vue/runtime-core": "^3.2.27",
"@vue/test-utils": "^2.0.1",
"typescript": "^4.7.4",
"vue": "^3.2.27",
"vue-router": "^4.0.12"
},
"sideEffects": [
"es/**/style/*",
"lib/**/style/*",
"*.css"
"*.css",
"*.less"
],
"web-types": "lib/web-types.json"
"web-types": "vetur/web-types.json",
"vetur": {
"tags": "vetur/tags.json",
"attributes": "vetur/attributes.json"
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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