From 87782448b69cbda6d38bc4a1bb0db40fb36bdde1 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 17 Apr 2022 11:45:41 +0800 Subject: [PATCH 01/16] feat(Image): localize default image (#10514) * feat(Image): localize default image * chore: update --- .../test/__snapshots__/index.spec.ts.snap | 648 +++++++++++++++++- packages/vant/src/empty/Empty.tsx | 7 +- packages/vant/src/empty/Images.tsx | 136 ++++ packages/vant/src/empty/Network.tsx | 63 -- .../test/__snapshots__/demo.spec.ts.snap | 486 ++++++++++++- .../test/__snapshots__/index.spec.ts.snap | 363 +++++++++- 6 files changed, 1617 insertions(+), 86 deletions(-) create mode 100644 packages/vant/src/empty/Images.tsx delete mode 100644 packages/vant/src/empty/Network.tsx diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap index e9b17704e..fbdf3c621 100644 --- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap @@ -364,7 +364,167 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis >
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -386,7 +546,167 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis >

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -484,7 +804,167 @@ exports[`should render list-footer slot correctly 1`] = ` >

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -507,7 +987,167 @@ exports[`should render list-footer slot correctly 1`] = ` >

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

diff --git a/packages/vant/src/empty/Empty.tsx b/packages/vant/src/empty/Empty.tsx index 8df0beff1..aa2531bfd 100644 --- a/packages/vant/src/empty/Empty.tsx +++ b/packages/vant/src/empty/Empty.tsx @@ -5,7 +5,7 @@ import { makeStringProp, createNamespace, } from '../utils'; -import { Network } from './Network'; +import { renderNetwork, renderMaterial } from './Images'; const [name, bem] = createNamespace('empty'); @@ -33,7 +33,10 @@ export default defineComponent({ let { image } = props; if (image === 'network') { - return Network; + return renderNetwork(); + } + if (image === 'default') { + return renderMaterial(); } if (PRESET_IMAGES.includes(image)) { diff --git a/packages/vant/src/empty/Images.tsx b/packages/vant/src/empty/Images.tsx new file mode 100644 index 000000000..eebe5a34d --- /dev/null +++ b/packages/vant/src/empty/Images.tsx @@ -0,0 +1,136 @@ +const getId = (num: number | string) => `van-empty-${num}`; +const useId = (num: number | string) => `url(#${getId(num)})`; + +const renderStop = (color: string, offset: number, opacity?: number) => ( + +); + +const renderBuildingDef = () => ( + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + +); + +const renderCloudDef = () => ( + + {renderStop('#F2F3F5', 0, 0.3)} + {renderStop('#F2F3F5', 100)} + +); + +const renderBuilding = () => ( + + + + +); + +const renderCloud = () => ( + + + + +); + +export const renderNetwork = () => ( + + + {renderBuildingDef()} + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + + + {renderStop('#EBEDF0', 0)} + {renderStop('#DCDEE0', 100, 0)} + + + {renderStop('#EAEDF0', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderStop('#EBEDF0', 0)} + {renderStop('#FFF', 100, 0)} + + + + {renderBuilding()} + + + + + + + + + + + + + + + +); + +export const renderMaterial = () => ( + + + {renderBuildingDef()} + {renderCloudDef()} + + {renderStop('#F2F3F5', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderStop('#EAEDF1', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderStop('#EAEDF1', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderBuilding()} + {renderCloud()} + + + + + + + + + + + + + + + +); diff --git a/packages/vant/src/empty/Network.tsx b/packages/vant/src/empty/Network.tsx deleted file mode 100644 index 8bb2e356e..000000000 --- a/packages/vant/src/empty/Network.tsx +++ /dev/null @@ -1,63 +0,0 @@ -const prefix = 'van-empty-network-'; -const renderStop = (color: string, offset: number, opacity?: number) => ( - -); - -export const Network = ( - - - - {renderStop('#FFF', 0, 0.5)} - {renderStop('#F2F3F5', 100)} - - - {renderStop('#EBEDF0', 0)} - {renderStop('#DCDEE0', 100, 0)} - - - {renderStop('#EAEDF0', 0)} - {renderStop('#DCDEE0', 100)} - - - {renderStop('#EBEDF0', 0)} - {renderStop('#FFF', 100, 0)} - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap index 2f9303ac8..3225d70b2 100644 --- a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap @@ -4,7 +4,167 @@ exports[`should render demo and match snapshot 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description @@ -98,7 +258,167 @@ exports[`should render demo and match snapshot 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description @@ -120,7 +440,167 @@ exports[`should render demo and match snapshot 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description diff --git a/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap index b60cf694c..db5d6f4ed 100644 --- a/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap @@ -3,7 +3,167 @@ exports[`should render bottom slot correctly 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Custom bottom @@ -14,7 +174,167 @@ exports[`should render bottom slot correctly 1`] = ` exports[`should render description slot correctly 1`] = `
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Custom description @@ -35,7 +355,7 @@ exports[`should render svg when image is network 1`] = `

- - + + + + + + - - - From 932c57f9a941af4227c776b043201ef286bf7a28 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 17 Apr 2022 12:30:06 +0800 Subject: [PATCH 02/16] feat(Image): localize error image (#10515) --- packages/vant/src/empty/Empty.tsx | 5 +- packages/vant/src/empty/Images.tsx | 40 +++++++ .../test/__snapshots__/demo.spec.ts.snap | 101 +++++++++++++++++- 3 files changed, 144 insertions(+), 2 deletions(-) diff --git a/packages/vant/src/empty/Empty.tsx b/packages/vant/src/empty/Empty.tsx index aa2531bfd..f996ad771 100644 --- a/packages/vant/src/empty/Empty.tsx +++ b/packages/vant/src/empty/Empty.tsx @@ -5,7 +5,7 @@ import { makeStringProp, createNamespace, } from '../utils'; -import { renderNetwork, renderMaterial } from './Images'; +import { renderNetwork, renderMaterial, renderError } from './Images'; const [name, bem] = createNamespace('empty'); @@ -38,6 +38,9 @@ export default defineComponent({ if (image === 'default') { return renderMaterial(); } + if (image === 'error') { + return renderError(); + } if (PRESET_IMAGES.includes(image)) { image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`; diff --git a/packages/vant/src/empty/Images.tsx b/packages/vant/src/empty/Images.tsx index eebe5a34d..ccd19d890 100644 --- a/packages/vant/src/empty/Images.tsx +++ b/packages/vant/src/empty/Images.tsx @@ -19,6 +19,21 @@ const renderCloudDef = () => ( ); +const renderShadowRef = () => ( + + + + +); + const renderBuilding = () => ( @@ -39,6 +54,10 @@ const renderCloud = () => ( ); +const renderShadow = () => ( + +); + export const renderNetwork = () => ( @@ -134,3 +153,24 @@ export const renderMaterial = () => ( ); + +export const renderError = () => ( + + + {renderBuildingDef()} + {renderCloudDef()} + {renderShadowRef()} + + {renderStop('#F2F3F5', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderBuilding()} + {renderCloud()} + {renderShadow()} + + +); diff --git a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap index 3225d70b2..b648a395f 100644 --- a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap @@ -227,7 +227,106 @@ exports[`should render demo and match snapshot 1`] = ` >
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description From bc1228b312b0b05a8bf3fe7ec9d0f0c4a3e924b7 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 17 Apr 2022 12:59:37 +0800 Subject: [PATCH 03/16] feat(Image): localize search image (#10516) --- .../test/__snapshots__/index.spec.ts.snap | 280 ++++++++-------- packages/vant/src/empty/Empty.tsx | 33 +- packages/vant/src/empty/Images.tsx | 141 ++++---- .../test/__snapshots__/demo.spec.ts.snap | 301 +++++++++--------- .../test/__snapshots__/index.spec.ts.snap | 172 +++++----- 5 files changed, 486 insertions(+), 441 deletions(-) diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap index fbdf3c621..09367bc49 100644 --- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap @@ -366,39 +366,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis

- - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + JSX.Element> = { + error: renderError, + search: renderSearch, + network: renderNetwork, + default: renderMaterial, +}; const emptyProps = { image: makeStringProp('default'), @@ -29,24 +39,7 @@ export default defineComponent({ if (slots.image) { return slots.image(); } - - let { image } = props; - - if (image === 'network') { - return renderNetwork(); - } - if (image === 'default') { - return renderMaterial(); - } - if (image === 'error') { - return renderError(); - } - - if (PRESET_IMAGES.includes(image)) { - image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`; - } - - return ; + return PRESET_IMAGES[props.image]?.() || ; }; const renderDescription = () => { diff --git a/packages/vant/src/empty/Images.tsx b/packages/vant/src/empty/Images.tsx index ccd19d890..8b360e060 100644 --- a/packages/vant/src/empty/Images.tsx +++ b/packages/vant/src/empty/Images.tsx @@ -5,43 +5,49 @@ const renderStop = (color: string, offset: number, opacity?: number) => ( ); -const renderBuildingDef = () => ( - - {renderStop('#FFF', 0, 0.5)} - {renderStop('#F2F3F5', 100)} - -); +const renderStops = (fromColor: string, toColor: string) => [ + renderStop(fromColor, 0), + renderStop(toColor, 100), +]; -const renderCloudDef = () => ( - - {renderStop('#F2F3F5', 0, 0.3)} - {renderStop('#F2F3F5', 100)} - -); +const renderShadow = (id: string) => [ + + + {renderStop('#EBEDF0', 0)} + {renderStop('#F2F3F5', 100, 0.3)} + + , + , +]; -const renderShadowRef = () => ( - - - - -); - -const renderBuilding = () => ( +const renderBuilding = () => [ + + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + + , - -); + , +]; -const renderCloud = () => ( +const renderCloud = () => [ + + + {renderStop('#F2F3F5', 0, 0.3)} + {renderStop('#F2F3F5', 100)} + + , ( d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z" fill={useId('b')} /> - -); - -const renderShadow = () => ( - -); + , +]; export const renderNetwork = () => ( - {renderBuildingDef()} {renderStop('#FFF', 0, 0.5)} {renderStop('#F2F3F5', 100)} @@ -71,8 +72,7 @@ export const renderNetwork = () => ( {renderStop('#DCDEE0', 100, 0)} - {renderStop('#EAEDF0', 0)} - {renderStop('#DCDEE0', 100)} + {renderStops('#EAEDF0', '#DCDEE0')} ( export const renderMaterial = () => ( - {renderBuildingDef()} - {renderCloudDef()} - - {renderStop('#F2F3F5', 0)} - {renderStop('#DCDEE0', 100)} + + {renderStops('#F2F3F5', '#DCDEE0')} - {renderStop('#EAEDF1', 0)} - {renderStop('#DCDEE0', 100)} + {renderStops('#EAEDF1', '#DCDEE0')} - - {renderStop('#EAEDF1', 0)} - {renderStop('#DCDEE0', 100)} + + {renderStops('#EAEDF1', '#DCDEE0')} {renderBuilding()} @@ -157,20 +152,52 @@ export const renderMaterial = () => ( export const renderError = () => ( - {renderBuildingDef()} - {renderCloudDef()} - {renderShadowRef()} - - {renderStop('#F2F3F5', 0)} - {renderStop('#DCDEE0', 100)} + + {renderStops('#EAEDF1', '#DCDEE0')} {renderBuilding()} {renderCloud()} - {renderShadow()} + {renderShadow('c')} ); + +export const renderSearch = () => ( + + + + {renderStops('#EEE', '#D8D8D8')} + + + {renderStops('#F2F3F5', '#DCDEE0')} + + + {renderStops('#F2F3F5', '#DCDEE0')} + + + {renderStops('#FFF', '#F7F8FA')} + + + {renderBuilding()} + {renderCloud()} + {renderShadow('d')} + + + + + + + + +); diff --git a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap index b648a395f..c17a0b3eb 100644 --- a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap @@ -6,39 +6,7 @@ exports[`should render demo and match snapshot 1`] = `
- - - - - - - - - - - - - + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + Date: Mon, 18 Apr 2022 18:24:11 +0800 Subject: [PATCH 04/16] docs(vant-cli): translate README to en (#10519) --- packages/vant-cli/README.md | 39 +++++++++-------- packages/vant-cli/README.zh-CN.md | 71 +++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 18 deletions(-) create mode 100644 packages/vant-cli/README.zh-CN.md diff --git a/packages/vant-cli/README.md b/packages/vant-cli/README.md index 89949aeff..34e024af2 100644 --- a/packages/vant-cli/README.md +++ b/packages/vant-cli/README.md @@ -1,36 +1,39 @@ # Vant CLI -Vant CLI 是一个 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。 +Vant CLI is a tool for building vue component library. You can quickly build a full-featured Vue component library with vant-cli. -### 特性 +### Features -- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程 -- 基于约定的目录结构，自动生成优雅的文档站点和组件示例 -- 内置 ESLint、Stylelint 校验规则，提交代码时自动执行校验 -- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking +- Provides rich commands covering the complete process from development to deploy -### 快速上手 +- Based on conventional directory structure. Generate elegant document website and component examples automatically. -执行以下命令可以快速创建一个基于 Vant CLI 的项目： +- ESlint Stylelint built-in. + +- Support Tree Shaking/Theme Customization/Import on Demand + +### Quickstart + +To create a Vant CLI project, run: ```bash yarn create vant-cli-app ``` -### 手动安装 +### Install Manually ```shell -# 通过 npm +# via npm npm i @vant/cli -D -# 通过 yarn +# via yarn yarn add @vant/cli -D -# 通过 pnpm +# via pnpm pnpm add @vant/cli -D ``` -安装完成后，请将以下配置添加到 package.json 文件中 +Please add the followed config to `package.json` file. ```json { @@ -63,9 +66,9 @@ pnpm add @vant/cli -D } ``` -## 详细文档 +## More Details -- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md) -- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md) -- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md) -- [更新日志](https://github.com/youzan/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) +- [CHANGLOG](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md) diff --git a/packages/vant-cli/README.zh-CN.md b/packages/vant-cli/README.zh-CN.md new file mode 100644 index 000000000..89949aeff --- /dev/null +++ b/packages/vant-cli/README.zh-CN.md @@ -0,0 +1,71 @@ +# Vant CLI + +Vant CLI 是一个 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。 + +### 特性 + +- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程 +- 基于约定的目录结构，自动生成优雅的文档站点和组件示例 +- 内置 ESLint、Stylelint 校验规则，提交代码时自动执行校验 +- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking + +### 快速上手 + +执行以下命令可以快速创建一个基于 Vant CLI 的项目： + +```bash +yarn create vant-cli-app +``` + +### 手动安装 + +```shell +# 通过 npm +npm i @vant/cli -D + +# 通过 yarn +yarn add @vant/cli -D + +# 通过 pnpm +pnpm add @vant/cli -D +``` + +安装完成后，请将以下配置添加到 package.json 文件中 + +```json +{ + "scripts": { + "dev": "vant-cli dev", + "test": "vant-cli test", + "lint": "vant-cli lint", + "build": "vant-cli build", + "prepare": "husky install", + "release": "vant-cli release", + "build-site": "vant-cli build-site" + }, + "lint-staged": { + "*.md": "prettier --write", + "*.{ts,tsx,js,vue,less,scss}": "prettier --write", + "*.{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 + }, + "browserslist": ["Chrome >= 51", "iOS >= 10"] +} +``` + +## 详细文档 + +- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md) +- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md) +- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md) +- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md) From 7ae102842799f8c7d9416104af45dbb9b6c6e2d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=93=AD=E4=BD=A0=E5=87=A0=E5=93=87?= Date: Sat, 23 Apr 2022 09:43:42 +0800 Subject: [PATCH 05/16] docs(vant-cli): translate vant-cli docs to en (#10537) * docs(vant-cli): translate commands doc to en * docs(vant-cli): translate config doc to en * docs(vant-cli): translate directory doc to en * docs(vant-cli): fix doc link --- packages/vant-cli/docs/commands.md | 24 +- packages/vant-cli/docs/commands.zh-CN.md | 65 ++++ packages/vant-cli/docs/config.md | 110 ++++--- packages/vant-cli/docs/config.zh-CN.md | 364 ++++++++++++++++++++++ packages/vant-cli/docs/directory.md | 102 +++--- packages/vant-cli/docs/directory.zh-CN.md | 109 +++++++ 6 files changed, 653 insertions(+), 121 deletions(-) create mode 100644 packages/vant-cli/docs/commands.zh-CN.md create mode 100644 packages/vant-cli/docs/config.zh-CN.md create mode 100644 packages/vant-cli/docs/directory.zh-CN.md diff --git a/packages/vant-cli/docs/commands.md b/packages/vant-cli/docs/commands.md index c0382f51f..790a192ee 100644 --- a/packages/vant-cli/docs/commands.md +++ b/packages/vant-cli/docs/commands.md @@ -1,6 +1,6 @@ -# 命令 +# Commands -Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。 +You can add built-in commands to `npm scripts` to use it. ```json // package.json @@ -15,7 +15,7 @@ Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts } ``` -也可以通过 npm 自带的 [npx](https://github.com/npm/npx) 直接执行某个命令： +Additionally, [npx](https://github.com/npm/npx) can used to be run those commands. ```bash npx vant-cli dev @@ -23,17 +23,15 @@ npx vant-cli dev ### dev -运行本地开发环境。 - -运行 dev 命令时，Vant CLI 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。 +Start local dev server for browsering components and demo. ### build -构建组件库。 +Build Vue component library. -运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/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) -发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别: +Please add the followed config to `package.json` when publish to npm. ```json // package.json @@ -46,19 +44,19 @@ npx vant-cli dev ### build-site -构建文档站点，在 `site` 目录生成可用于生产环境的文档站点代码。 +Build documentation website. Files will be output to `site` directory. ### release -发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。 +Publish to npm. `build` and `changlog` will be automatically execute when run `release`. ## changelog -基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。 +Generate changelog based on commit records. ## commit-lint -校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。 +Validate the format of commit message. Need `husky` to do this. ```bash npx husky add .husky/commit-msg 'npx --no-install vant-cli commit-lint $1' diff --git a/packages/vant-cli/docs/commands.zh-CN.md b/packages/vant-cli/docs/commands.zh-CN.md new file mode 100644 index 000000000..e3987c305 --- /dev/null +++ b/packages/vant-cli/docs/commands.zh-CN.md @@ -0,0 +1,65 @@ +# 命令 + +Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。 + +```json +// package.json +{ + "scripts": { + "dev": "vant-cli dev", + "test": "vant-cli test", + "lint": "vant-cli lint", + "release": "vant-cli release", + "build-site": "vant-cli build-site" + } +} +``` + +也可以通过 npm 自带的 [npx](https://github.com/npm/npx) 直接执行某个命令： + +```bash +npx vant-cli dev +``` + +### dev + +运行本地开发环境。 + +运行 dev 命令时，Vant CLI 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。 + +### build + +构建组件库。 + +运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。 + +发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别: + +```json +// package.json +{ + "main": "lib/index.js", + "module": "es/index.js", + "files": ["es", "lib"] +} +``` + +### build-site + +构建文档站点，在 `site` 目录生成可用于生产环境的文档站点代码。 + +### release + +发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。 + +## changelog + +基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。 + +## commit-lint + +校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。 + +```bash +npx husky add .husky/commit-msg 'npx --no-install vant-cli commit-lint $1' +``` diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md index 81b022e26..432914734 100644 --- a/packages/vant-cli/docs/config.md +++ b/packages/vant-cli/docs/config.md @@ -1,6 +1,6 @@ -# 配置指南 +# Config -- [配置指南](#----) +- [Config](#----) - [vant.config.mjs](#vantconfigmjs) - [name](#name) - [build.css.base](#buildcssbase) @@ -22,48 +22,48 @@ - [site.htmlMeta](#sitehtmlmeta) - [site.enableVConsole](#siteenablevconsole) - [PostCSS](#postcss) - - [默认配置](#-----1) + - [Default Config](#-----1) - [browserslist](#browserslist) ## vant.config.mjs -`vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例： +`vant.config.mjs` includes bundle and documentation site config. Please create this file and place it in your project root directory. Here is a basic example: ```js export default { - // 组件库名称 + // component library name name: 'demo-ui', - // 构建配置 + // bundle config build: { site: { publicPath: '/demo-ui/', }, }, - // 文档站点配置 + // documentation site config site: { - // 标题 + // title title: 'Demo UI', - // 图标 + // logo logo: 'https://cdn.jsdelivr.net/npm/@vant/assets/logo.png', - // 描述 + // description description: '示例组件库', - // 左侧导航 + // left nav nav: [ { - title: '开发指南', + title: 'example', items: [ { path: 'home', - title: '介绍', + title: 'home', }, ], }, { - title: '基础组件', + title: 'basic components', items: [ { path: 'my-button', - title: 'MyButton 按钮', + title: 'MyButton', }, ], }, @@ -77,16 +77,16 @@ export default { - Type: `string` - Default: `''` -组件库名称，建议使用中划线分割，如 `demo-ui`。 +Component library name. kebab-case recommended. ### build.css.base - Type: `string` - Default: `'style/base.less'` -全局样式文件的路径，可以为相对路径或绝对路径。 +Global style file path. Support absolute path and relative path both. -相对路径基于 `src` 目录计算。 +Note: relative path is calculated based on `src`. ```js module.exports = { @@ -103,7 +103,7 @@ module.exports = { - Type: `string` - Default: `'less'` -CSS 预处理器配置，目前支持 `less` 和 `sass` 两种预处理器，默认使用 `less`。 +CSS preprocess Config, support `less` and `sass`. Use `less` by default. ```js module.exports = { @@ -120,9 +120,9 @@ module.exports = { - Type: `string` - Default: `/` -等价于 vite 的 `build.outDir` 配置。 +Equivalent to vite `build.outDir`. -一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。 +Genrally, documentation site will be deployed to subpath of domain. For examle: `https://my.github.io/demo-ui/`, `publicPath` should be `/demo-ui/`. ```js module.exports = { @@ -152,24 +152,24 @@ module.exports = { - Type: `boolean` - Default: `false` -是否通过 Named Export 对组件进行导出。 +Should export components by Named Export. -未开启此选项时，会通过 `export default from 'xxx'` 导出组件内部的默认模块。 +When set to `false`, `export default from 'xxx'` will be used to export module. -开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。 +When set to `true`, `export * from 'xxx'` will be used to export all modules and type definition. ### build.configureVite - Type: `(config: InlineConfig): InlineConfig` - Default: `undefined` -vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。 +Custom vite config(`@vant/cli>= 4.0.0`) ```js module.exports = { build: { configureVite(config) { - // 添加一个自定义插件 + // add vite plugin config.plugins.push(vitePluginXXX); return config; }, @@ -177,8 +177,6 @@ module.exports = { }; ``` -在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分： - ```js module.exports = { build: { @@ -186,11 +184,11 @@ module.exports = { const { BUILD_TARGET } = process.env; if (BUILD_TARGET === 'package') { - // 修改组件库构建配置 + // component library bundle config } if (BUILD_TARGET === 'site') { - // 修改文档站点构建配置 + // documentation site bundle config } return config; @@ -204,51 +202,51 @@ module.exports = { - Type: `'npm' | 'yarn' | 'pnpm'` - Default: `undefined` -指定使用的包管理器。 +`npm` package manager. ### site.title - Type: `string` - Default: `''` -文档站点的标题。 +Documentation site title. ### site.logo - Type: `string` - Default: `''` -文档站点的 Logo。 +Documentation site logo. ### site.description - Type: `string` - Default: `''` -标题下方的描述文案。 +Documentation site description. ### site.nav - Type: `object[]` - Default: `undefined` -文档站点的左侧导航，数组中的每个对象表示一个导航分组。 +Documentation site left nav. Each item of `nav` means a navigation group. ```js module.exports = { site: { nav: [ { - // 分组标题 - title: '开发指南', - // 导航项 + // group title + title: 'Development Guide', + // nav items items: [ { - // 导航项路由 + // nav router path: 'home', - // 导航项文案 - title: '介绍', - // 是否隐藏当前页右侧的手机模拟器（默认不隐藏） + // nav title + title: 'title', + // should hide phone emulator(false by default) hideSimulator: true, }, ], @@ -263,7 +261,7 @@ module.exports = { - Type: `object[]` - Default: `undefined` -文档站点多版本配置，当组件库存在多个版本的文档时，可以通过`site.versions`在顶部导航配置一个版本切换按钮。 +Documentation site muti-version config. ```js module.exports = { @@ -283,15 +281,15 @@ module.exports = { - Type: `object` - Default: `undefied` -文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。 +Documentation site baidu analysis config. The script of Baidu Statistic will be automatically loaded when build documentation website. ```js module.exports = { site: { baiduAnalytics: { // 打开百度统计 ->『管理』->『代码获取』 - // 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx" - // 将 `xxxxx` 填写在 seed 中即可 + // find the followed URL: "https://hm.baidu.com/hm.js?xxxxx" + // add `xxxxx` in the seed seed: 'xxxxx', }, }, @@ -303,45 +301,43 @@ module.exports = { - Type: `object` - Default: `undefined` -文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。 - -配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。 +Documentation site search config. Based on [docsearch](https://docsearch.algolia.com/docs/behavior) of algolia. ### site.hideSimulator - Type: `boolean` - Default: `false` -是否隐藏所有页面右侧的手机模拟器，默认不隐藏 +Should hide phone emulator, `false` by default. ### site.simulator.url - Type: `string` - Default: - -自定义手机模拟器的 iframe URL 地址。 +Customize iframe URL. ### site.htmlMeta - Type: `Record` - Default: `undefined` -配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。 +Customize HTML meta tag, key means name, value means content. ### site.enableVConsole - Type: `boolean` - Default: `false` -是否在 dev 时开启 [vConsole](https://github.com/Tencent/vConsole) 调试，用于移动端 debug。 +Should use [vConsole](https://github.com/Tencent/vConsole) to debug when dev. For mobile. ## PostCSS -通过根目录下的`postcss.config.js`文件可以对 PostCSS 进行配置。 +PostCSS can be configured through the `postcss.config.js` file in the root directory. ### 默认配置 -`vant-cli` 中默认的 PostCSS 配置如下： +PostCSS default config: ```js module.exports = { @@ -353,9 +349,9 @@ module.exports = { ## browserslist -推荐在 `package.json` 文件里添加 browserslist 字段，这个值会被 `autoprefixer` 用来确定目标浏览器的版本，保证编译后代码的兼容性。 +Add browserslist field to `package.json` file is recommended. It's used by `autoprefixer` to determine the version of target browser, ensuring compatibility of compiled code. -在移动端浏览器中使用，可以添加如下配置： +You can add the following config for mobile: ```json { diff --git a/packages/vant-cli/docs/config.zh-CN.md b/packages/vant-cli/docs/config.zh-CN.md new file mode 100644 index 000000000..81b022e26 --- /dev/null +++ b/packages/vant-cli/docs/config.zh-CN.md @@ -0,0 +1,364 @@ +# 配置指南 + +- [配置指南](#----) + - [vant.config.mjs](#vantconfigmjs) + - [name](#name) + - [build.css.base](#buildcssbase) + - [build.css.preprocessor](#buildcsspreprocessor) + - [build.site.publicPath](#buildsitepublicpath) + - [build.srcDir](#buildsrcdir) + - [build.namedExport](#buildnamedexport) + - [build.configureVite](#buildconfigurevite) + - [build.packageManager](#buildpackagemanager) + - [site.title](#sitetitle) + - [site.logo](#sitelogo) + - [site.description](#sitedescription) + - [site.nav](#sitenav) + - [site.versions](#siteversions) + - [site.baiduAnalytics](#sitebaiduanalytics) + - [site.searchConfig](#sitesearchconfig) + - [site.hideSimulator](#sitehidesimulator) + - [site.simulator.url](#sitesimulatorurl) + - [site.htmlMeta](#sitehtmlmeta) + - [site.enableVConsole](#siteenablevconsole) + - [PostCSS](#postcss) + - [默认配置](#-----1) + - [browserslist](#browserslist) + +## vant.config.mjs + +`vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例： + +```js +export default { + // 组件库名称 + name: 'demo-ui', + // 构建配置 + build: { + site: { + publicPath: '/demo-ui/', + }, + }, + // 文档站点配置 + site: { + // 标题 + title: 'Demo UI', + // 图标 + logo: 'https://cdn.jsdelivr.net/npm/@vant/assets/logo.png', + // 描述 + description: '示例组件库', + // 左侧导航 + nav: [ + { + title: '开发指南', + items: [ + { + path: 'home', + title: '介绍', + }, + ], + }, + { + title: '基础组件', + items: [ + { + path: 'my-button', + title: 'MyButton 按钮', + }, + ], + }, + ], + }, +}; +``` + +### name + +- Type: `string` +- Default: `''` + +组件库名称，建议使用中划线分割，如 `demo-ui`。 + +### build.css.base + +- Type: `string` +- Default: `'style/base.less'` + +全局样式文件的路径，可以为相对路径或绝对路径。 + +相对路径基于 `src` 目录计算。 + +```js +module.exports = { + build: { + css: { + base: 'style/global.scss', + }, + }, +}; +``` + +### build.css.preprocessor + +- Type: `string` +- Default: `'less'` + +CSS 预处理器配置，目前支持 `less` 和 `sass` 两种预处理器，默认使用 `less`。 + +```js +module.exports = { + build: { + css: { + preprocessor: 'sass', + }, + }, +}; +``` + +### build.site.publicPath + +- Type: `string` +- Default: `/` + +等价于 vite 的 `build.outDir` 配置。 + +一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。 + +```js +module.exports = { + build: { + site: { + publicPath: '/demo-ui/', + }, + }, +}; +``` + +### build.srcDir + +- Type: `string` +- Default: `src` + +```js +module.exports = { + build: { + srcDir: 'myDir', + }, +}; +``` + +### build.namedExport + +- Type: `boolean` +- Default: `false` + +是否通过 Named Export 对组件进行导出。 + +未开启此选项时，会通过 `export default from 'xxx'` 导出组件内部的默认模块。 + +开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。 + +### build.configureVite + +- Type: `(config: InlineConfig): InlineConfig` +- Default: `undefined` + +vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。 + +```js +module.exports = { + build: { + configureVite(config) { + // 添加一个自定义插件 + config.plugins.push(vitePluginXXX); + return config; + }, + }, +}; +``` + +在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分： + +```js +module.exports = { + build: { + configureVite(config) { + const { BUILD_TARGET } = process.env; + + if (BUILD_TARGET === 'package') { + // 修改组件库构建配置 + } + + if (BUILD_TARGET === 'site') { + // 修改文档站点构建配置 + } + + return config; + }, + }, +}; +``` + +### build.packageManager + +- Type: `'npm' | 'yarn' | 'pnpm'` +- Default: `undefined` + +指定使用的包管理器。 + +### site.title + +- Type: `string` +- Default: `''` + +文档站点的标题。 + +### site.logo + +- Type: `string` +- Default: `''` + +文档站点的 Logo。 + +### site.description + +- Type: `string` +- Default: `''` + +标题下方的描述文案。 + +### site.nav + +- Type: `object[]` +- Default: `undefined` + +文档站点的左侧导航，数组中的每个对象表示一个导航分组。 + +```js +module.exports = { + site: { + nav: [ + { + // 分组标题 + title: '开发指南', + // 导航项 + items: [ + { + // 导航项路由 + path: 'home', + // 导航项文案 + title: '介绍', + // 是否隐藏当前页右侧的手机模拟器（默认不隐藏） + hideSimulator: true, + }, + ], + }, + ], + }, +}; +``` + +### site.versions + +- Type: `object[]` +- Default: `undefined` + +文档站点多版本配置，当组件库存在多个版本的文档时，可以通过`site.versions`在顶部导航配置一个版本切换按钮。 + +```js +module.exports = { + site: { + versions: [ + { + label: 'v1', + link: 'https://youzan.github.io/vant/v1/', + }, + ], + }, +}; +``` + +### site.baiduAnalytics + +- Type: `object` +- Default: `undefied` + +文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。 + +```js +module.exports = { + site: { + baiduAnalytics: { + // 打开百度统计 ->『管理』->『代码获取』 + // 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx" + // 将 `xxxxx` 填写在 seed 中即可 + seed: 'xxxxx', + }, + }, +}; +``` + +### site.searchConfig + +- Type: `object` +- Default: `undefined` + +文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。 + +配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。 + +### site.hideSimulator + +- Type: `boolean` +- Default: `false` + +是否隐藏所有页面右侧的手机模拟器，默认不隐藏 + +### site.simulator.url + +- Type: `string` +- Default: - + +自定义手机模拟器的 iframe URL 地址。 + +### site.htmlMeta + +- Type: `Record` +- Default: `undefined` + +配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。 + +### site.enableVConsole + +- Type: `boolean` +- Default: `false` + +是否在 dev 时开启 [vConsole](https://github.com/Tencent/vConsole) 调试，用于移动端 debug。 + +## PostCSS + +通过根目录下的`postcss.config.js`文件可以对 PostCSS 进行配置。 + +### 默认配置 + +`vant-cli` 中默认的 PostCSS 配置如下： + +```js +module.exports = { + plugins: { + autoprefixer: {}, + }, +}; +``` + +## browserslist + +推荐在 `package.json` 文件里添加 browserslist 字段，这个值会被 `autoprefixer` 用来确定目标浏览器的版本，保证编译后代码的兼容性。 + +在移动端浏览器中使用，可以添加如下配置： + +```json +{ + "browserslist": ["Chrome >= 51", "iOS >= 10"] +} +``` diff --git a/packages/vant-cli/docs/directory.md b/packages/vant-cli/docs/directory.md index a0e6a77ef..67af58050 100644 --- a/packages/vant-cli/docs/directory.md +++ b/packages/vant-cli/docs/directory.md @@ -1,91 +1,91 @@ -# 目录结构 +# Directory Structure -## 源代码目录 +## Source Code Directory -基于 Vant CLI 搭建的组件库的基本目录结构如下所示： +The basic directory structure of the component library based on Vant CLI is as follows: ``` project -├─ src # 组件源代码 -│ ├─ button # button 组件源代码 -│ └─ dialog # dialog 组件源代码 +├─ src # component library source code +│ ├─ button # button source code +│ └─ dialog # dialog source code │ -├─ docs # 静态文档目录 -│ ├─ home.md # 文档首页 -│ └─ changelog.md # 更新日志 +├─ docs # static doc directory +│ ├─ home.md # documentation site home +│ └─ changelog.md # changelog │ -├─ vant.config.mjs # Vant CLI 配置文件 +├─ vant.config.mjs # Vant CLI config file ├─ package.json └─ README.md ``` -单个组件的目录如下： +The directories for individual components are as follows: ``` button -├─ demo # 示例目录 -│ └─ index.vue # 组件示例 -├─ index.vue # 组件源码 -└─ README.md # 组件文档 +├─ demo # component demo directory +│ └─ index.vue # component demo +├─ index.vue # componet source code +└─ README.md # component doc ``` -使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。 +When writing SFC, the corresponding JS and CSS files will be generated after bundle process, and the CSS file will be automatically imported into the JS file. -如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示： +If you need to separate JS and CSS to implement functions such as theme customization, you need to use separate JS and CSS files when writing code, as shown below: ``` button -├─ demo # 组件示例 -│ └─ index.vue # 组件示例入口 -├─ index.js # 组件入口 -├─ index.less # 组件样式，可以为 less 或 scss -└─ README.md # 组件文档 +├─ demo # component demo directory +│ └─ index.vue # component demo entry +├─ index.js # component entry +├─ index.less # component style，support scss and less +└─ README.md # component doc ``` -采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。 +When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively, and the styles can also be imported automatically through babel-plugin-import. -通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。 +Theme customization can be achieved by importing style source files (less or scss) and modifying style variables. -## 构建结果目录 +## Output Directory -运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，结构如下： +Running the `build` command will generate production code in the `es` and `lib` directories with the following structure: ``` project -├─ es # es 目录下的代码遵循 esmodule 规范 -│ ├─ button # button 组件编译后的代码目录 -│ ├─ dialog # dialog 组件编译后的代码目录 -│ └─ index.js # 引入所有组件的入口 (ESModule) +├─ es # ESM Directory +│ ├─ button # button component directory +│ ├─ dialog # dialog component directory +│ └─ index.js # All component files entry (ESModule) │ -└─ lib # lib 目录下的代码遵循 commonjs 规范 - ├─ button # button 组件编译后的代码目录 - ├─ dialog # dialog 组件编译后的代码目录 - ├─ index.js # 引入所有组件的入口 - ├─ index.less # 所有组件未编译的样式入口 - ├─ index.css # 打包后的组件样式，用于 CDN 引入 - ├─ [name].js # 打包后的组件脚本，UMD 格式 - ├─ [name].es.js # 打包后的组件脚本，ESModule 格式 - ├─ [name].min.js # 打包和压缩后的组件脚本，UMD 格式 - └─ [name].es.min.js # 打包和压缩后的组件脚本，ESModule 格式 +└─ lib # Commonjs directory + ├─ button # button component library + ├─ dialog # dialog component library + ├─ index.js # All component files entry (Commonjs) + ├─ index.less # All component styles entry(Uncompiled) + ├─ index.css # Bundle component styles for CDN + ├─ [name].js # Bundle script for UMD + ├─ [name].es.js # Bundle script for ESM + ├─ [name].min.js # Bundle and minified script for UMD + └─ [name].es.min.js # Bundle and minified script for ESM ``` -单个组件编译后的目录如下： +The compiled directory of a single component is as follows: ``` button -├─ index.js # 组件编译后的 JS 文件 -├─ index.css # 组件编译后的 CSS 文件 -├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss -└─ style # 按需引入样式的入口 - ├─ index.js # 按需引入编译后的样式 - └─ less.js # 按需引入未编译的样式，可用于主题定制 +├─ index.js # Bundle script file +├─ index.css # Bundle CSS file +├─ index.less # Uncompiled CSS file, less or scss +└─ style # Style entry on demand directory + ├─ index.js # Compiled styles on demand + └─ less.js # Uncompiled styles on demand, for theme customization ``` -### 生成类型声明 +### Generate type definition -当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant CLI 会自动生成 `.d.ts` 类型声明文件。 +When the component library is written in TS and the `tsconfig.declaration.json` file exists in the root directory, Vant CLI will automatically generate the `.d.ts` type declaration file. -`tsconfig.declaration.json` 的参考格式如下： +The format of `tsconfig.declaration.json` is as follows: ```json { @@ -100,7 +100,7 @@ button } ``` -成功生成类型声明后，请在 `package.json` 中添加类型入口声明： +Please add the `typings` field in `package.json` after generate type declaration: ```json { diff --git a/packages/vant-cli/docs/directory.zh-CN.md b/packages/vant-cli/docs/directory.zh-CN.md new file mode 100644 index 000000000..a0e6a77ef --- /dev/null +++ b/packages/vant-cli/docs/directory.zh-CN.md @@ -0,0 +1,109 @@ +# 目录结构 + +## 源代码目录 + +基于 Vant CLI 搭建的组件库的基本目录结构如下所示： + +``` +project +├─ src # 组件源代码 +│ ├─ button # button 组件源代码 +│ └─ dialog # dialog 组件源代码 +│ +├─ docs # 静态文档目录 +│ ├─ home.md # 文档首页 +│ └─ changelog.md # 更新日志 +│ +├─ vant.config.mjs # Vant CLI 配置文件 +├─ package.json +└─ README.md +``` + +单个组件的目录如下： + +``` +button +├─ demo # 示例目录 +│ └─ index.vue # 组件示例 +├─ index.vue # 组件源码 +└─ README.md # 组件文档 +``` + +使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。 + +如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示： + +``` +button +├─ demo # 组件示例 +│ └─ index.vue # 组件示例入口 +├─ index.js # 组件入口 +├─ index.less # 组件样式，可以为 less 或 scss +└─ README.md # 组件文档 +``` + +采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。 + +通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。 + +## 构建结果目录 + +运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，结构如下： + +``` +project +├─ es # es 目录下的代码遵循 esmodule 规范 +│ ├─ button # button 组件编译后的代码目录 +│ ├─ dialog # dialog 组件编译后的代码目录 +│ └─ index.js # 引入所有组件的入口 (ESModule) +│ +└─ lib # lib 目录下的代码遵循 commonjs 规范 + ├─ button # button 组件编译后的代码目录 + ├─ dialog # dialog 组件编译后的代码目录 + ├─ index.js # 引入所有组件的入口 + ├─ index.less # 所有组件未编译的样式入口 + ├─ index.css # 打包后的组件样式，用于 CDN 引入 + ├─ [name].js # 打包后的组件脚本，UMD 格式 + ├─ [name].es.js # 打包后的组件脚本，ESModule 格式 + ├─ [name].min.js # 打包和压缩后的组件脚本，UMD 格式 + └─ [name].es.min.js # 打包和压缩后的组件脚本，ESModule 格式 +``` + +单个组件编译后的目录如下： + +``` +button +├─ index.js # 组件编译后的 JS 文件 +├─ index.css # 组件编译后的 CSS 文件 +├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss +└─ style # 按需引入样式的入口 + ├─ index.js # 按需引入编译后的样式 + └─ less.js # 按需引入未编译的样式，可用于主题定制 +``` + +### 生成类型声明 + +当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant CLI 会自动生成 `.d.ts` 类型声明文件。 + +`tsconfig.declaration.json` 的参考格式如下： + +```json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "declaration": true, + "declarationDir": ".", + "emitDeclarationOnly": true + }, + "include": ["es/**/*", "lib/**/*"], + "exclude": ["node_modules", "**/test/**/*", "**/demo/**/*"] +} +``` + +成功生成类型声明后，请在 `package.json` 中添加类型入口声明： + +```json +{ + "typings": "lib/index.d.ts" +} +``` From f927f6a7518cf7d08ec8abc5dd35019685c19e3a Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 23 Apr 2022 09:53:00 +0800 Subject: [PATCH 06/16] fix(@vant/area-data): only publish dist folder to npm --- packages/vant-area-data/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vant-area-data/package.json b/packages/vant-area-data/package.json index 86fb74960..3fe8e935d 100644 --- a/packages/vant-area-data/package.json +++ b/packages/vant-area-data/package.json @@ -5,6 +5,9 @@ "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", + "files": [ + "dist" + ], "scripts": { "clean": "rimraf ./dist", "dev": "node ./build.js -w", From c378f4ead14176e371ce1e80074244268fbc5769 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 23 Apr 2022 09:56:19 +0800 Subject: [PATCH 07/16] release: @vant/area-data 1.2.4 --- packages/vant-area-data/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant-area-data/package.json b/packages/vant-area-data/package.json index 3fe8e935d..83d0c64a6 100644 --- a/packages/vant-area-data/package.json +++ b/packages/vant-area-data/package.json @@ -1,6 +1,6 @@ { "name": "@vant/area-data", - "version": "1.2.3", + "version": "1.2.4", "description": "Vant 省市区数据", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", From 6baf42fa4a26513b55a514713561194636537702 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 23 Apr 2022 11:47:30 +0800 Subject: [PATCH 08/16] feat(Form): support setting multile validate-trigger (#10544) --- packages/vant/src/field/Field.tsx | 7 ++-- packages/vant/src/field/types.ts | 2 +- packages/vant/src/form/Form.tsx | 8 +++-- packages/vant/src/form/README.md | 2 +- packages/vant/src/form/README.zh-CN.md | 2 +- packages/vant/src/form/test/props.spec.tsx | 37 ++++++++++++++++++++++ packages/vant/src/uploader/Uploader.tsx | 2 +- packages/vant/src/uploader/utils.ts | 5 +-- packages/vant/src/utils/basic.ts | 3 ++ 9 files changed, 55 insertions(+), 13 deletions(-) diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 83b22babf..e48a3c999 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -16,6 +16,7 @@ import { isDef, extend, addUnit, + toArray, FORM_KEY, numericProp, unknownProp, @@ -239,12 +240,12 @@ export default defineComponent({ const validateWithTrigger = (trigger: FieldValidateTrigger) => { if (form && props.rules) { - const defaultTrigger = form.props.validateTrigger === trigger; + const { validateTrigger } = form.props; + const defaultTrigger = toArray(validateTrigger).includes(trigger); const rules = props.rules.filter((rule) => { if (rule.trigger) { - return rule.trigger === trigger; + return toArray(rule.trigger).includes(trigger); } - return defaultTrigger; }); diff --git a/packages/vant/src/field/types.ts b/packages/vant/src/field/types.ts index 730de9b8f..c60169f7c 100644 --- a/packages/vant/src/field/types.ts +++ b/packages/vant/src/field/types.ts @@ -59,7 +59,7 @@ export type FiledRuleFormatter = (value: any, rule: FieldRule) => string; export type FieldRule = { pattern?: RegExp; - trigger?: FieldValidateTrigger; + trigger?: FieldValidateTrigger | FieldValidateTrigger[]; message?: FieldRuleMessage; required?: boolean; validator?: FieldRuleValidator; diff --git a/packages/vant/src/form/Form.tsx b/packages/vant/src/form/Form.tsx index a2d90c6f0..a7857b0b6 100644 --- a/packages/vant/src/form/Form.tsx +++ b/packages/vant/src/form/Form.tsx @@ -6,7 +6,6 @@ import { truthProp, numericProp, preventDefault, - makeStringProp, createNamespace, } from '../utils'; @@ -35,9 +34,14 @@ const formProps = { scrollToError: Boolean, validateFirst: Boolean, submitOnEnter: truthProp, - validateTrigger: makeStringProp('onBlur'), showErrorMessage: truthProp, errorMessageAlign: String as PropType, + validateTrigger: { + type: [String, Array] as PropType< + FieldValidateTrigger | FieldValidateTrigger[] + >, + default: 'onBlur', + }, }; export type FormProps = ExtractPropTypes; diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index 9c2642ef6..e5d0b9686 100644 --- a/packages/vant/src/form/README.md +++ b/packages/vant/src/form/README.md @@ -497,7 +497,7 @@ export default { | label-align | Field label align, can be set to `center` `right` | _string_ | `left` | | input-align | Field input align, can be set to `center` `right` | _string_ | `left` | | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | -| validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit` | _string_ | `onBlur` | +| validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit`, supports using array to set multiple values | _string \| string[]_ | `onBlur` | | colon | Whether to display colon after label | _boolean_ | `false` | | disabled | Whether to disable form | _boolean_ | `false` | | readonly | Whether to be readonly | _boolean_ | `false` | diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index d0aa56c56..3b3c36d24 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -529,7 +529,7 @@ export default { | label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` | | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | -| validate-trigger | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，详见下表 | _string_ | `onBlur` | +| validate-trigger | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，支持通过数组同时设置多个值，具体用法见下方表格 | _string \| string[]_ | `onBlur` | | colon | 是否在 label 后面添加冒号 | _boolean_ | `false` | | disabled | 是否禁用表单中的所有输入框 | _boolean_ | `false` | | readonly | 是否将表单中的所有输入框设置为只读状态 | _boolean_ | `false` | diff --git a/packages/vant/src/form/test/props.spec.tsx b/packages/vant/src/form/test/props.spec.tsx index 046515235..1c4be2535 100644 --- a/packages/vant/src/form/test/props.spec.tsx +++ b/packages/vant/src/form/test/props.spec.tsx @@ -293,6 +293,43 @@ test('should trigger validate after inputting when validate-trigger prop is onCh expect(wrapper.find('.van-field__error-message').exists).toBeTruthy(); }); +test('should trigger validate correctly when validate-trigger prop is array', async () => { + const wrapper = mount({ + data() { + return { + ...getSimpleRules(), + value: '', + }; + }, + render() { + return ( +
+ +
+ ); + }, + }); + + const input = wrapper.find('input'); + + await input.trigger('input'); + expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy(); + + await input.trigger('blur'); + expect(wrapper.find('.van-field__error-message').exists()).toBeTruthy(); + + await wrapper.setData({ value: '1' }); + expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy(); + + await wrapper.setData({ value: '' }); + expect(wrapper.find('.van-field__error-message').exists).toBeTruthy(); +}); + test('should allow to custom trigger in rules', async () => { const rulesA = [ { diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx index 708a8e4e9..00effea10 100644 --- a/packages/vant/src/uploader/Uploader.tsx +++ b/packages/vant/src/uploader/Uploader.tsx @@ -11,6 +11,7 @@ import { import { pick, extend, + toArray, isPromise, truthProp, Interceptor, @@ -24,7 +25,6 @@ import { import { bem, name, - toArray, isOversize, filterFiles, isImageFile, diff --git a/packages/vant/src/uploader/utils.ts b/packages/vant/src/uploader/utils.ts index 35aa1db3a..0db08b5fe 100644 --- a/packages/vant/src/uploader/utils.ts +++ b/packages/vant/src/uploader/utils.ts @@ -1,4 +1,4 @@ -import { createNamespace, isFunction } from '../utils'; +import { toArray, createNamespace, isFunction } from '../utils'; import type { UploaderMaxSize, UploaderResultType, @@ -9,9 +9,6 @@ const [name, bem, t] = createNamespace('uploader'); export { name, bem, t }; -export const toArray = (item: T | T[]): T[] => - Array.isArray(item) ? item : [item]; - export function readFileContent(file: File, resultType: UploaderResultType) { return new Promise((resolve) => { if (resultType === 'file') { diff --git a/packages/vant/src/utils/basic.ts b/packages/vant/src/utils/basic.ts index c07a2aeaf..51093d73e 100644 --- a/packages/vant/src/utils/basic.ts +++ b/packages/vant/src/utils/basic.ts @@ -36,3 +36,6 @@ export function pick( return ret; }, {} as Writeable>); } + +export const toArray = (item: T | T[]): T[] => + Array.isArray(item) ? item : [item]; From 33150f82eadf3b781f139c6a62bfa4adeee0bf21 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 23 Apr 2022 20:37:37 +0800 Subject: [PATCH 09/16] docs(@vant/cli): optimize links and fix typos (#10545) --- packages/vant-cli/README.md | 9 +++++---- packages/vant-cli/README.zh-CN.md | 6 +++--- packages/vant-cli/docs/commands.md | 2 +- packages/vant-cli/docs/config.md | 4 ++-- packages/vant-cli/docs/directory.md | 2 +- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/vant-cli/README.md b/packages/vant-cli/README.md index 34e024af2..a589a74f2 100644 --- a/packages/vant-cli/README.md +++ b/packages/vant-cli/README.md @@ -2,14 +2,15 @@ Vant CLI is a tool for building vue component library. You can quickly build a full-featured Vue component library with vant-cli. +🇨🇳 查看中文版介绍 + +--- + ### Features - 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 Stylelint built-in. - - Support Tree Shaking/Theme Customization/Import on Demand ### Quickstart @@ -71,4 +72,4 @@ Please add the followed config to `package.json` file. - [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) -- [CHANGLOG](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md) +- [CHANGELOG](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md) diff --git a/packages/vant-cli/README.zh-CN.md b/packages/vant-cli/README.zh-CN.md index 89949aeff..1349bc3fc 100644 --- a/packages/vant-cli/README.zh-CN.md +++ b/packages/vant-cli/README.zh-CN.md @@ -65,7 +65,7 @@ pnpm add @vant/cli -D ## 详细文档 -- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md) -- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md) -- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.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) diff --git a/packages/vant-cli/docs/commands.md b/packages/vant-cli/docs/commands.md index 790a192ee..1c6150442 100644 --- a/packages/vant-cli/docs/commands.md +++ b/packages/vant-cli/docs/commands.md @@ -48,7 +48,7 @@ Build documentation website. Files will be output to `site` directory. ### release -Publish to npm. `build` and `changlog` will be automatically execute when run `release`. +Publish to npm. `build` and `changelog` will be automatically execute when run `release`. ## changelog diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md index 432914734..2ad11451d 100644 --- a/packages/vant-cli/docs/config.md +++ b/packages/vant-cli/docs/config.md @@ -122,7 +122,7 @@ module.exports = { Equivalent to vite `build.outDir`. -Genrally, documentation site will be deployed to subpath of domain. For examle: `https://my.github.io/demo-ui/`, `publicPath` should be `/demo-ui/`. +Generally, documentation site will be deployed to subpath of domain. For example: `https://my.github.io/demo-ui/`, `publicPath` should be `/demo-ui/`. ```js module.exports = { @@ -279,7 +279,7 @@ module.exports = { ### site.baiduAnalytics - Type: `object` -- Default: `undefied` +- Default: `undefined` Documentation site baidu analysis config. The script of Baidu Statistic will be automatically loaded when build documentation website. diff --git a/packages/vant-cli/docs/directory.md b/packages/vant-cli/docs/directory.md index 67af58050..6a49c902f 100644 --- a/packages/vant-cli/docs/directory.md +++ b/packages/vant-cli/docs/directory.md @@ -25,7 +25,7 @@ The directories for individual components are as follows: button ├─ demo # component demo directory │ └─ index.vue # component demo -├─ index.vue # componet source code +├─ index.vue # component source code └─ README.md # component doc ``` From 004f6426229fdb2916fae64101d1e04be201aa76 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 24 Apr 2022 10:26:00 +0800 Subject: [PATCH 10/16] fix: remove default license in vant cli template (#10546) --- packages/create-vant-cli-app/generators/vue2/package.json.tpl | 1 - packages/create-vant-cli-app/generators/vue3/package.json.tpl | 1 - packages/vant-cli/docs/commands.md | 4 ++-- packages/vant-cli/docs/commands.zh-CN.md | 4 ++-- packages/vant-cli/docs/config.md | 2 +- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/create-vant-cli-app/generators/vue2/package.json.tpl b/packages/create-vant-cli-app/generators/vue2/package.json.tpl index d9f68c53e..b8785f752 100644 --- a/packages/create-vant-cli-app/generators/vue2/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue2/package.json.tpl @@ -18,7 +18,6 @@ "build-site": "vant-cli build-site && gh-pages -d site-dist" }, "author": "", - "license": "MIT", "husky": { "hooks": { "pre-commit": "lint-staged", diff --git a/packages/create-vant-cli-app/generators/vue3/package.json.tpl b/packages/create-vant-cli-app/generators/vue3/package.json.tpl index ee3136dc9..32f909d01 100644 --- a/packages/create-vant-cli-app/generators/vue3/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue3/package.json.tpl @@ -22,7 +22,6 @@ "test:coverage": "open test/coverage/index.html" }, "author": "", - "license": "MIT", "lint-staged": { "*.md": "prettier --write", "*.{ts,tsx,js,vue,less,scss}": "prettier --write", diff --git a/packages/vant-cli/docs/commands.md b/packages/vant-cli/docs/commands.md index 1c6150442..91df93eb4 100644 --- a/packages/vant-cli/docs/commands.md +++ b/packages/vant-cli/docs/commands.md @@ -50,11 +50,11 @@ Build documentation website. Files will be output to `site` directory. Publish to npm. `build` and `changelog` will be automatically execute when run `release`. -## changelog +### changelog Generate changelog based on commit records. -## commit-lint +### commit-lint Validate the format of commit message. Need `husky` to do this. diff --git a/packages/vant-cli/docs/commands.zh-CN.md b/packages/vant-cli/docs/commands.zh-CN.md index e3987c305..1abd82958 100644 --- a/packages/vant-cli/docs/commands.zh-CN.md +++ b/packages/vant-cli/docs/commands.zh-CN.md @@ -52,11 +52,11 @@ npx vant-cli dev 发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。 -## changelog +### changelog 基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。 -## commit-lint +### commit-lint 校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。 diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md index 2ad11451d..9bd0541a7 100644 --- a/packages/vant-cli/docs/config.md +++ b/packages/vant-cli/docs/config.md @@ -335,7 +335,7 @@ Should use [vConsole](https://github.com/Tencent/vConsole) to debug when dev. Fo PostCSS can be configured through the `postcss.config.js` file in the root directory. -### 默认配置 +### Default Config PostCSS default config: From a33d304d532c02559ef5a7179be865ca4af5cdaa Mon Sep 17 00:00:00 2001 From: Alan Wang Date: Tue, 26 Apr 2022 20:57:15 +0800 Subject: [PATCH 11/16] docs(vant): keep the doc consistent with the demo code (#10554) --- packages/vant/src/form/README.md | 4 ++-- packages/vant/src/form/README.zh-CN.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index e5d0b9686..1661635a9 100644 --- a/packages/vant/src/form/README.md +++ b/packages/vant/src/form/README.md @@ -115,7 +115,7 @@ export default { setup() { const value1 = ref(''); const value2 = ref(''); - const value3 = ref(''); + const value3 = ref('abc'); const value4 = ref(''); const pattern = /\d{6}/; @@ -129,7 +129,7 @@ export default { setTimeout(() => { Toast.clear(); - resolve(/\d{6}/.test(val)); + resolve(val === '1234'); }, 1000); }); diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index 3b3c36d24..6b58ff3e6 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -123,7 +123,7 @@ export default { setup() { const value1 = ref(''); const value2 = ref(''); - const value3 = ref(''); + const value3 = ref('abc'); const value4 = ref(''); const pattern = /\d{6}/; @@ -140,7 +140,7 @@ export default { setTimeout(() => { Toast.clear(); - resolve(/\d{6}/.test(val)); + resolve(val === '1234'); }, 1000); }); From 794a0e3c1eae1376099a703342feb16f2c54aa2b Mon Sep 17 00:00:00 2001 From: Alan Wang Date: Wed, 27 Apr 2022 11:47:06 +0800 Subject: [PATCH 12/16] docs: update the composables content (#10560) --- packages/vant/docs/markdown/vant-use-intro.en-US.md | 2 ++ packages/vant/docs/markdown/vant-use-intro.zh-CN.md | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/vant/docs/markdown/vant-use-intro.en-US.md b/packages/vant/docs/markdown/vant-use-intro.en-US.md index 647195f23..ffe9bec17 100644 --- a/packages/vant/docs/markdown/vant-use-intro.en-US.md +++ b/packages/vant/docs/markdown/vant-use-intro.en-US.md @@ -36,4 +36,6 @@ console.log(height.value); // -> window height | --- | --- | | [useClickAway](#/en-US/use-click-away) | Triggers a callback when user clicks outside of the target element | | [useCountDown](#/en-US/use-count-down) | Used to manage the countdown | +| [useCustomFieldValue](#/en-US/use-custom-field-value) | Used to custom Field value | +| [useEventListener](#/en-US/use-event-listener) | Used to attach event | | [useToggle](#/en-US/use-toggle) | Used to switch between `true` and `false` | diff --git a/packages/vant/docs/markdown/vant-use-intro.zh-CN.md b/packages/vant/docs/markdown/vant-use-intro.zh-CN.md index 2b3df5a35..779a3664e 100644 --- a/packages/vant/docs/markdown/vant-use-intro.zh-CN.md +++ b/packages/vant/docs/markdown/vant-use-intro.zh-CN.md @@ -40,6 +40,7 @@ console.log(height.value); // -> 窗口高度 | --- | --- | | [useClickAway](#/zh-CN/use-click-away) | 监听点击元素外部的事件 | | [useCountDown](#/zh-CN/use-count-down) | 提供倒计时管理能力 | +| [useCustomFieldValue](#/zh-CN/use-custom-field-value) | 自定义表单组件中的表单项 | | [useEventListener](#/zh-CN/use-event-listener) | 方便地进行事件绑定 | | [usePageVisibility](#/zh-CN/use-page-visibility) | 获取页面的可见状态 | | [useRect](#/zh-CN/use-rect) | 获取元素的大小及其相对于视口的位置 | From 00bda601023f6ea7ccc6e241d856cb8b37bec178 Mon Sep 17 00:00:00 2001 From: Alan Wang Date: Wed, 27 Apr 2022 17:08:12 +0800 Subject: [PATCH 13/16] docs: translate docs of composables (#10561) --- .../markdown/use-page-visibility.en-US.md | 40 ++++++++++ packages/vant/docs/markdown/use-rect.en-US.md | 52 ++++++++++++ .../vant/docs/markdown/use-relation.en-US.md | 80 +++++++++++++++++++ .../docs/markdown/use-scroll-parent.en-US.md | 57 +++++++++++++ .../docs/markdown/use-window-size.en-US.md | 45 +++++++++++ .../docs/markdown/vant-use-intro.en-US.md | 5 ++ packages/vant/vant.config.mjs | 40 +++++----- 7 files changed, 299 insertions(+), 20 deletions(-) create mode 100644 packages/vant/docs/markdown/use-page-visibility.en-US.md create mode 100644 packages/vant/docs/markdown/use-rect.en-US.md create mode 100644 packages/vant/docs/markdown/use-relation.en-US.md create mode 100644 packages/vant/docs/markdown/use-scroll-parent.en-US.md create mode 100644 packages/vant/docs/markdown/use-window-size.en-US.md diff --git a/packages/vant/docs/markdown/use-page-visibility.en-US.md b/packages/vant/docs/markdown/use-page-visibility.en-US.md new file mode 100644 index 000000000..d963e77f1 --- /dev/null +++ b/packages/vant/docs/markdown/use-page-visibility.en-US.md @@ -0,0 +1,40 @@ +# usePageVisibility + +### Intro + +Get the visible state of the page. + +## Usage + +### Basic Usage + +```js +import { watch } from 'vue'; +import { usePageVisibility } from '@vant/use'; + +export default { + setup() { + const pageVisibility = usePageVisibility(); + + watch(pageVisibility, (value) => { + console.log('visibility: ', value); + }); + }, +}; +``` + +## API + +### Type Declarations + +```ts +type VisibilityState = 'visible' | 'hidden'; + +function usePageVisibility(): Ref; +``` + +### Return Value + +| Name | Description | Type | +| --- | --- | --- | +| visibilityState | The current visible state of the page, could be `visible` or `hidden` | _Ref\_ | diff --git a/packages/vant/docs/markdown/use-rect.en-US.md b/packages/vant/docs/markdown/use-rect.en-US.md new file mode 100644 index 000000000..1b1721763 --- /dev/null +++ b/packages/vant/docs/markdown/use-rect.en-US.md @@ -0,0 +1,52 @@ +# useRect + +### Intro + +Get the size of an element and its position relative to the viewport, equivalent to [Element.getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). + +## Usage + +### Basic Usage + +```html +
+``` + +```js +import { ref, onMounted } from 'vue'; +import { useRect } from '@vant/use'; + +export default { + setup() { + const root = ref(); + + onMounted(() => { + const rect = useRect(root); + console.log(rect); // -> the size of an element and its position relative to the viewport + }); + + return { root }; + }, +}; +``` + +## API + +### Type Declarations + +```ts +function useRect( + element: Element | Window | Ref +): DOMRect; +``` + +### Return Value + +| Name | Description | Type | +| --- | --- | --- | +| width | Width of the element | _number_ | +| height | Height of the element | _number_ | +| top | The distance from the top to the top-left of the viewport | _number_ | +| left | The distance from the left to the top-left of the viewport | _number_ | +| right | The distance from the right to the top-left of the viewport | _number_ | +| bottom | The distance from the bottom to the top-left of the viewport | _number_ | diff --git a/packages/vant/docs/markdown/use-relation.en-US.md b/packages/vant/docs/markdown/use-relation.en-US.md new file mode 100644 index 000000000..3e190f0ab --- /dev/null +++ b/packages/vant/docs/markdown/use-relation.en-US.md @@ -0,0 +1,80 @@ +# useRelation + +### Intro + +Establish the association relationship between parent and child components, perform data communication and method invocation, based on `provide` and `inject` implementation. + +## Usage + +### Basic Usage + +Use `useChildren` in parent to associate child components: + +```js +import { ref } from 'vue'; +import { useChildren } from '@vant/use'; + +const RELATION_KEY = Symbol('my-relation'); + +export default { + setup() { + const { linkChildren } = useChildren(RELATION_KEY); + + const count = ref(0); + const add = () => { + count.value++; + }; + + // provide data and methods to children + linkChildren({ add, count }); + }, +}; +``` + +Use `useParent` in child component to get the data and methods provided by parent. + +```js +import { useParent } from '@vant/use'; + +export default { + setup() { + const { parent } = useParent(RELATION_KEY); + + // use data and methods provided by parent + if (parent) { + parent.add(); + console.log(parent.count.value); // -> 1 + } + }, +}; +``` + +## API + +### Type Declarations + +```ts +function useParent(key: string | symbol): { + parent?: T; + index?: Ref; +}; + +function useChildren(key: string | symbol): { + children: ComponentPublicInstance[]; + linkChildren: (value: any) => void; +}; +``` + +### Return Value of useParent + +| Name | Description | Type | +| --- | --- | --- | +| parent | Data and methods provided by parent | _any_ | +| index | Index position of the current component in all child of the parent component | _Ref\_ | + +### Return Value of useChildren + +| Name | Description | Type | +| --- | --- | --- | +| children | Component list of children | _ComponentPublicInstance[]_ | +| linkChildren | Function to provide values to child | _(value: any) => void_ | diff --git a/packages/vant/docs/markdown/use-scroll-parent.en-US.md b/packages/vant/docs/markdown/use-scroll-parent.en-US.md new file mode 100644 index 000000000..83cdccabb --- /dev/null +++ b/packages/vant/docs/markdown/use-scroll-parent.en-US.md @@ -0,0 +1,57 @@ +# useScrollParent + +### Intro + +Get the closest parent element that is scrollable. + +## Usage + +### Basic Usage + +```html +
+``` + +```js +import { ref, watch } from 'vue'; +import { useScrollParent, useEventListener } from '@vant/use'; + +export default { + setup() { + const root = ref(); + const scrollParent = useScrollParent(root); + + useEventListener( + 'scroll', + () => { + console.log('scroll'); + }, + { target: scrollParent } + ); + + return { root }; + }, +}; +``` + +## API + +### Type Declarations + +```ts +function useScrollParent( + element: Ref +): Ref; +``` + +### Params + +| Name | Description | Type | Default Value | +| ------- | ------------------- | --------------- | ------------- | +| element | The current element | _Ref\_ | - | + +### Return Value + +| Name | Description | Type | +| --- | --- | --- | +| scrollParent | The closest parent element that is scrollable | _Ref\_ | diff --git a/packages/vant/docs/markdown/use-window-size.en-US.md b/packages/vant/docs/markdown/use-window-size.en-US.md new file mode 100644 index 000000000..21019d74d --- /dev/null +++ b/packages/vant/docs/markdown/use-window-size.en-US.md @@ -0,0 +1,45 @@ +# useWindowSize + +### Intro + +Get the viewport width and height of the browser window, and update it automatically when the window size changes. + +## Usage + +### Basic Usage + +```js +import { watch } from 'vue'; +import { useWindowSize } from '@vant/use'; + +export default { + setup() { + const { width, height } = useWindowSize(); + + console.log(width.value); // -> width of browser window + console.log(height.value); // -> height of browser window + + watch([width, height], () => { + console.log('window resized'); + }); + }, +}; +``` + +## API + +### Type Declarations + +```ts +function useWindowSize(): { + width: Ref; + height: Ref; +}; +``` + +### Return Value + +| Name | Description | Type | +| ------ | ---------------------------- | -------------- | +| width | The width of browser window | _Ref\_ | +| height | The height of browser window | _Ref\_ | diff --git a/packages/vant/docs/markdown/vant-use-intro.en-US.md b/packages/vant/docs/markdown/vant-use-intro.en-US.md index ffe9bec17..30ba38401 100644 --- a/packages/vant/docs/markdown/vant-use-intro.en-US.md +++ b/packages/vant/docs/markdown/vant-use-intro.en-US.md @@ -38,4 +38,9 @@ console.log(height.value); // -> window height | [useCountDown](#/en-US/use-count-down) | Used to manage the countdown | | [useCustomFieldValue](#/en-US/use-custom-field-value) | Used to custom Field value | | [useEventListener](#/en-US/use-event-listener) | Used to attach event | +| [usePageVisibility](#/en-US/use-page-visibility) | Get the visible state of the page | +| [useRect](#/en-US/use-rect) | Get the size of an element and its position relative to the viewport | +| [useRelation](#/en-US/use-relation) | Establish the association relationship between parent and child components | +| [useScrollParent](#/en-US/use-scroll-parent) | Get the closest parent element that is scrollable | | [useToggle](#/en-US/use-toggle) | Used to switch between `true` and `false` | +| [useWindowSize](#/en-US/use-window-size) | Get the viewport width and height of the browser window | diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index 4499d8bbf..86e34d454 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -854,30 +854,30 @@ export default { path: 'use-event-listener', title: 'useEventListener', }, - // { - // path: 'use-page-visibility', - // title: 'usePageVisibility', - // }, - // { - // path: 'use-rect', - // title: 'useRect', - // }, - // { - // path: 'use-relation', - // title: 'useRelation', - // }, - // { - // path: 'use-scroll-parent', - // title: 'useScrollParent', - // }, + { + path: 'use-page-visibility', + title: 'usePageVisibility', + }, + { + path: 'use-rect', + title: 'useRect', + }, + { + path: 'use-relation', + title: 'useRelation', + }, + { + path: 'use-scroll-parent', + title: 'useScrollParent', + }, { path: 'use-toggle', title: 'useToggle', }, - // { - // path: 'use-window-size', - // title: 'useWindowSize', - // }, + { + path: 'use-window-size', + title: 'useWindowSize', + }, ], }, { From d4799dce54f4357fd370ecda34a2d923c2e0bb58 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 30 Apr 2022 17:47:46 +0800 Subject: [PATCH 14/16] feat(Loading): add aria to improve a11y (#10568) --- .../test/__snapshots__/demo.spec.ts.snap | 15 ++++-- .../test/__snapshots__/index.spec.ts.snap | 10 +++- .../test/__snapshots__/demo.spec.ts.snap | 5 +- .../list/test/__snapshots__/demo.spec.ts.snap | 5 +- packages/vant/src/loading/Loading.tsx | 6 ++- .../test/__snapshots__/demo.spec.ts.snap | 50 +++++++++++++++---- .../test/__snapshots__/demo.spec.ts.snap | 5 +- .../test/__snapshots__/index.spec.ts.snap | 10 +++- .../test/__snapshots__/demo.spec.ts.snap | 5 +- .../test/__snapshots__/demo.spec.ts.snap | 5 +- .../test/__snapshots__/index.spec.ts.snap | 10 +++- .../test/__snapshots__/demo.spec.ts.snap | 5 +- 12 files changed, 105 insertions(+), 26 deletions(-) diff --git a/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap index 8804e27c2..0e6cd5cea 100644 --- a/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap @@ -117,7 +117,10 @@ exports[`should render demo and match snapshot 1`] = ` class="van-button van-button--primary van-button--normal van-button--loading" >
-
+