From b45645924927a7ae23946703c06e0b1d474bcdac Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 10 Nov 2021 15:50:23 +0800 Subject: [PATCH 01/18] perf(@vant/popperjs): add sideEffects false flag --- packages/vant-popperjs/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vant-popperjs/package.json b/packages/vant-popperjs/package.json index a6b2667b2..c34ddd675 100644 --- a/packages/vant-popperjs/package.json +++ b/packages/vant-popperjs/package.json @@ -1,10 +1,11 @@ { "name": "@vant/popperjs", "version": "1.1.0", - "description": "Precompiled popperjs core", + "description": "Pre-compiled popperjs core", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", "types": "dist/index.d.ts", + "sideEffects": false, "files": [ "dist" ], From 2bfbe5f86ef08e41b569f830a6c6e5cb904e6dae Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 10 Nov 2021 17:00:02 +0800 Subject: [PATCH 02/18] chore: merge @vant/lazyload into main package --- packages/vant-lazyload/.eslintignore | 1 - packages/vant-lazyload/README.md | 27 ------------ packages/vant-lazyload/babel.config.js | 3 -- packages/vant-lazyload/package.json | 42 ------------------- packages/vant-lazyload/rollup.config.js | 22 ---------- packages/vant/package.json | 1 - packages/vant/src/lazyload/index.ts | 2 +- .../src/lazyload/vue-lazyload}/index.d.ts | 2 +- .../src/lazyload/vue-lazyload}/index.js | 4 ++ .../lazyload/vue-lazyload}/lazy-component.js | 0 .../lazyload/vue-lazyload}/lazy-container.js | 0 .../src/lazyload/vue-lazyload}/lazy-image.js | 0 .../src/lazyload/vue-lazyload}/lazy.js | 0 .../src/lazyload/vue-lazyload}/listener.js | 0 .../src/lazyload/vue-lazyload}/util.js | 0 packages/vant/tsconfig.declaration.json | 7 +++- pnpm-lock.yaml | 23 ---------- 17 files changed, 12 insertions(+), 122 deletions(-) delete mode 100644 packages/vant-lazyload/.eslintignore delete mode 100644 packages/vant-lazyload/README.md delete mode 100644 packages/vant-lazyload/babel.config.js delete mode 100644 packages/vant-lazyload/package.json delete mode 100644 packages/vant-lazyload/rollup.config.js rename packages/{vant-lazyload/types => vant/src/lazyload/vue-lazyload}/index.d.ts (97%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/index.js (90%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/lazy-component.js (100%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/lazy-container.js (100%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/lazy-image.js (100%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/lazy.js (100%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/listener.js (100%) rename packages/{vant-lazyload/src => vant/src/lazyload/vue-lazyload}/util.js (100%) diff --git a/packages/vant-lazyload/.eslintignore b/packages/vant-lazyload/.eslintignore deleted file mode 100644 index a65b41774..000000000 --- a/packages/vant-lazyload/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -lib diff --git a/packages/vant-lazyload/README.md b/packages/vant-lazyload/README.md deleted file mode 100644 index ac29c7b79..000000000 --- a/packages/vant-lazyload/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# @vant/lazyload - -This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support. - -## Install - -```shell -yarn add @vant/lazyload -``` - -## Usage - -```js -import { createApp } from 'vue'; -import { LazyLoad } from '@vant/lazyload'; - -const app = createApp(); -app.use(LazyLoad); -``` - -## API - -see: https://github.com/hilongjw/vue-lazyload - -## TODO - -support TypeScript. diff --git a/packages/vant-lazyload/babel.config.js b/packages/vant-lazyload/babel.config.js deleted file mode 100644 index 3022f59d1..000000000 --- a/packages/vant-lazyload/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [['@vant/cli/preset.cjs', { loose: true }]], -}; diff --git a/packages/vant-lazyload/package.json b/packages/vant-lazyload/package.json deleted file mode 100644 index 65c1d6acd..000000000 --- a/packages/vant-lazyload/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@vant/lazyload", - "version": "1.4.0", - "description": "This is a fork of vue-lazyload", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "types/index.d.ts", - "publishConfig": { - "access": "public", - "registry": "https://registry.npmjs.org/" - }, - "files": [ - "dist", - "types" - ], - "scripts": { - "dev": "rollup --config rollup.config.js --watch", - "build": "rollup --config rollup.config.js", - "release": "pnpm build && release-it", - "prepare": "pnpm build" - }, - "license": "MIT", - "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-lazyload", - "dependencies": { - "@vant/use": "^1.3.2" - }, - "devDependencies": { - "vue": "3.x", - "@vue/runtime-core": "3.x", - "@vant/cli": "workspace:*", - "@rollup/plugin-babel": "^5.2.1", - "@rollup/plugin-node-resolve": "^10.0.0", - "release-it": "^14.2.2", - "rollup": "^2.33.3" - }, - "release-it": { - "git": { - "tag": false, - "commitMessage": "release: @vant/lazyload ${version}" - } - } -} diff --git a/packages/vant-lazyload/rollup.config.js b/packages/vant-lazyload/rollup.config.js deleted file mode 100644 index 3e8f5dc08..000000000 --- a/packages/vant-lazyload/rollup.config.js +++ /dev/null @@ -1,22 +0,0 @@ -import path from 'path'; -import babel from '@rollup/plugin-babel'; -import nodeResolve from '@rollup/plugin-node-resolve'; - -export default { - input: path.join(__dirname, 'src', 'index.js'), - output: [ - { - dir: 'dist/cjs', - format: 'cjs', - }, - { - dir: 'dist/esm', - format: 'esm', - }, - ], - external: ['vue', '@vant/use'], - plugins: [ - babel({ babelHelpers: 'bundled', extensions: ['.js', '.ts'] }), - nodeResolve(), - ], -}; diff --git a/packages/vant/package.json b/packages/vant/package.json index 44301ca14..1346b71a9 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -45,7 +45,6 @@ "license": "MIT", "dependencies": { "@vant/icons": "^1.7.1", - "@vant/lazyload": "^1.4.0", "@vant/popperjs": "^1.1.0", "@vant/use": "^1.3.2" }, diff --git a/packages/vant/src/lazyload/index.ts b/packages/vant/src/lazyload/index.ts index 50e60fb46..c3184109b 100644 --- a/packages/vant/src/lazyload/index.ts +++ b/packages/vant/src/lazyload/index.ts @@ -1,4 +1,4 @@ -import { Lazyload } from '@vant/lazyload'; +import { Lazyload } from './vue-lazyload'; export default Lazyload; export { Lazyload }; diff --git a/packages/vant-lazyload/types/index.d.ts b/packages/vant/src/lazyload/vue-lazyload/index.d.ts similarity index 97% rename from packages/vant-lazyload/types/index.d.ts rename to packages/vant/src/lazyload/vue-lazyload/index.d.ts index 896f17045..d607bad3a 100644 --- a/packages/vant-lazyload/types/index.d.ts +++ b/packages/vant/src/lazyload/vue-lazyload/index.d.ts @@ -1,4 +1,4 @@ -import { App } from 'vue'; +import type { App } from 'vue'; declare type ListenEvent = | 'scroll' diff --git a/packages/vant-lazyload/src/index.js b/packages/vant/src/lazyload/vue-lazyload/index.js similarity index 90% rename from packages/vant-lazyload/src/index.js rename to packages/vant/src/lazyload/vue-lazyload/index.js index 9715734a6..209186859 100644 --- a/packages/vant-lazyload/src/index.js +++ b/packages/vant/src/lazyload/vue-lazyload/index.js @@ -1,3 +1,7 @@ +/** + * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support. + */ + import Lazy from './lazy'; import LazyComponent from './lazy-component'; import LazyContainer from './lazy-container'; diff --git a/packages/vant-lazyload/src/lazy-component.js b/packages/vant/src/lazyload/vue-lazyload/lazy-component.js similarity index 100% rename from packages/vant-lazyload/src/lazy-component.js rename to packages/vant/src/lazyload/vue-lazyload/lazy-component.js diff --git a/packages/vant-lazyload/src/lazy-container.js b/packages/vant/src/lazyload/vue-lazyload/lazy-container.js similarity index 100% rename from packages/vant-lazyload/src/lazy-container.js rename to packages/vant/src/lazyload/vue-lazyload/lazy-container.js diff --git a/packages/vant-lazyload/src/lazy-image.js b/packages/vant/src/lazyload/vue-lazyload/lazy-image.js similarity index 100% rename from packages/vant-lazyload/src/lazy-image.js rename to packages/vant/src/lazyload/vue-lazyload/lazy-image.js diff --git a/packages/vant-lazyload/src/lazy.js b/packages/vant/src/lazyload/vue-lazyload/lazy.js similarity index 100% rename from packages/vant-lazyload/src/lazy.js rename to packages/vant/src/lazyload/vue-lazyload/lazy.js diff --git a/packages/vant-lazyload/src/listener.js b/packages/vant/src/lazyload/vue-lazyload/listener.js similarity index 100% rename from packages/vant-lazyload/src/listener.js rename to packages/vant/src/lazyload/vue-lazyload/listener.js diff --git a/packages/vant-lazyload/src/util.js b/packages/vant/src/lazyload/vue-lazyload/util.js similarity index 100% rename from packages/vant-lazyload/src/util.js rename to packages/vant/src/lazyload/vue-lazyload/util.js diff --git a/packages/vant/tsconfig.declaration.json b/packages/vant/tsconfig.declaration.json index 625bb2adc..b617d2332 100644 --- a/packages/vant/tsconfig.declaration.json +++ b/packages/vant/tsconfig.declaration.json @@ -6,5 +6,10 @@ "emitDeclarationOnly": true }, "include": ["es/**/*", "lib/**/*"], - "exclude": ["node_modules", "**/test/**/*", "**/demo/**/*"] + "exclude": [ + "node_modules", + "**/test/**/*", + "**/demo/**/*", + "**/vue-lazyload/*" + ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e31e9d03..a04714724 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,7 +48,6 @@ importers: '@vant/area-data': ^1.1.3 '@vant/cli': ^4.0.0-beta.5 '@vant/icons': ^1.7.1 - '@vant/lazyload': ^1.4.0 '@vant/popperjs': ^1.1.0 '@vant/use': ^1.3.2 '@vue/compiler-sfc': ^3.2.20 @@ -58,7 +57,6 @@ importers: vue-router: ^4.0.12 dependencies: '@vant/icons': link:../vant-icons - '@vant/lazyload': link:../vant-lazyload '@vant/popperjs': link:../vant-popperjs '@vant/use': link:../vant-use devDependencies: @@ -219,27 +217,6 @@ importers: devDependencies: release-it: 14.11.6 - packages/vant-lazyload: - specifiers: - '@rollup/plugin-babel': ^5.2.1 - '@rollup/plugin-node-resolve': ^10.0.0 - '@vant/cli': workspace:* - '@vant/use': ^1.3.2 - '@vue/runtime-core': 3.x - release-it: ^14.2.2 - rollup: ^2.33.3 - vue: 3.x - dependencies: - '@vant/use': link:../vant-use - devDependencies: - '@rollup/plugin-babel': 5.3.0_rollup@2.59.0 - '@rollup/plugin-node-resolve': 10.0.0_rollup@2.59.0 - '@vant/cli': link:../vant-cli - '@vue/runtime-core': 3.2.21 - release-it: 14.11.6 - rollup: 2.59.0 - vue: 3.2.21 - packages/vant-markdown-loader: specifiers: front-matter: ^4.0.2 From 74bc0879c4e12ef5ae6d727413dbade64ea69ac3 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 11 Nov 2021 11:08:02 +0800 Subject: [PATCH 03/18] build: using rollup-plugin-esbuild --- packages/vant-popperjs/babel.config.js | 3 - packages/vant-popperjs/package.json | 15 ++-- packages/vant-popperjs/rollup.config.js | 7 +- packages/vant-popperjs/tsconfig.json | 6 +- packages/vant-use/README.md | 4 - packages/vant-use/babel.config.js | 3 - packages/vant-use/package.json | 13 ++-- packages/vant-use/rollup.config.js | 18 +++++ packages/vant-use/scripts/build.js | 40 ---------- .../vant-use/{src => }/test/utils.spec.ts | 2 +- packages/vant-use/tsconfig.json | 7 +- pnpm-lock.yaml | 74 ++++++++++--------- 12 files changed, 80 insertions(+), 112 deletions(-) delete mode 100644 packages/vant-popperjs/babel.config.js delete mode 100644 packages/vant-use/babel.config.js create mode 100644 packages/vant-use/rollup.config.js delete mode 100644 packages/vant-use/scripts/build.js rename packages/vant-use/{src => }/test/utils.spec.ts (72%) diff --git a/packages/vant-popperjs/babel.config.js b/packages/vant-popperjs/babel.config.js deleted file mode 100644 index 3022f59d1..000000000 --- a/packages/vant-popperjs/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [['@vant/cli/preset.cjs', { loose: true }]], -}; diff --git a/packages/vant-popperjs/package.json b/packages/vant-popperjs/package.json index c34ddd675..ebd14d8cb 100644 --- a/packages/vant-popperjs/package.json +++ b/packages/vant-popperjs/package.json @@ -14,8 +14,11 @@ "registry": "https://registry.npmjs.org/" }, "scripts": { + "clean": "rm -rf ./dist", "dev": "rollup --config rollup.config.js --watch", - "build": "rollup --config rollup.config.js && tsc -p ./tsconfig.json --emitDeclarationOnly", + "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly", + "build:bundle": "rollup --config rollup.config.js", + "build": "pnpm clean && pnpm build:bundle && pnpm build:types", "release": "pnpm build && release-it", "prepare": "pnpm build" }, @@ -25,11 +28,11 @@ "@popperjs/core": "^2.9.2" }, "devDependencies": { - "@vant/cli": "workspace:*", - "@rollup/plugin-babel": "^5.2.1", - "@rollup/plugin-node-resolve": "^10.0.0", - "release-it": "^14.2.2", - "rollup": "^2.33.3" + "typescript": "4.x", + "rollup": "^2.33.3", + "rollup-plugin-esbuild": "^4.6.0", + "@rollup/plugin-node-resolve": "^13.0.0", + "release-it": "^14.2.2" }, "release-it": { "git": { diff --git a/packages/vant-popperjs/rollup.config.js b/packages/vant-popperjs/rollup.config.js index c06f520e8..7a76e73a7 100644 --- a/packages/vant-popperjs/rollup.config.js +++ b/packages/vant-popperjs/rollup.config.js @@ -1,5 +1,5 @@ import path from 'path'; -import babel from '@rollup/plugin-babel'; +import esbuild from 'rollup-plugin-esbuild'; import nodeResolve from '@rollup/plugin-node-resolve'; export default { @@ -14,8 +14,5 @@ export default { format: 'esm', }, ], - plugins: [ - babel({ babelHelpers: 'bundled', extensions: ['.js', '.ts'] }), - nodeResolve(), - ], + plugins: [esbuild(), nodeResolve()], }; diff --git a/packages/vant-popperjs/tsconfig.json b/packages/vant-popperjs/tsconfig.json index f7f1373d7..ac6b07b09 100644 --- a/packages/vant-popperjs/tsconfig.json +++ b/packages/vant-popperjs/tsconfig.json @@ -2,13 +2,11 @@ "compilerOptions": { "target": "ES2015", "outDir": "./dist", - "module": "ES2015", + "module": "ESNext", "strict": true, "declaration": true, "skipLibCheck": true, - "esModuleInterop": true, - "moduleResolution": "node", - "lib": ["esnext", "dom"] + "moduleResolution": "Node", }, "include": ["src/**/*"] } diff --git a/packages/vant-use/README.md b/packages/vant-use/README.md index ff6b33ac0..280419866 100644 --- a/packages/vant-use/README.md +++ b/packages/vant-use/README.md @@ -4,10 +4,6 @@ Vant Use 是从 Vant 实际应用场景中沉淀的 Vue 组合式 API 库。 ## 安装 -如果项目中已经安装了 Vant 3，则无须手动安装 Vant Use。 - -如果项目中未使用 Vant，可以通过 `npm` 或 `yarn` 手动安装 Vant Use。 - ```bash # 通过 npm 安装 npm i @vant/use -S diff --git a/packages/vant-use/babel.config.js b/packages/vant-use/babel.config.js deleted file mode 100644 index 3022f59d1..000000000 --- a/packages/vant-use/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [['@vant/cli/preset.cjs', { loose: true }]], -}; diff --git a/packages/vant-use/package.json b/packages/vant-use/package.json index 308bd14ab..b3770740d 100644 --- a/packages/vant-use/package.json +++ b/packages/vant-use/package.json @@ -4,16 +4,17 @@ "description": "Vant Composition API", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", - "typings": "dist/types/index.d.ts", + "typings": "dist/index.d.ts", "sideEffects": false, "files": [ "dist" ], "scripts": { "clean": "rm -rf ./dist", - "build:lib": "node ./scripts/build.js", + "dev": "rollup --config rollup.config.js --watch", "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly", - "build": "pnpm build:lib && pnpm build:types", + "build:bundle": "rollup --config rollup.config.js", + "build": "pnpm clean && pnpm build:bundle && pnpm build:types", "release": "pnpm build && release-it", "prepare": "pnpm build" }, @@ -24,12 +25,10 @@ "license": "MIT", "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-use", "devDependencies": { - "@babel/core": "^7.12.9", - "@vant/cli": "workspace:*", - "fast-glob": "^3.2.7", - "fs-extra": "^10.0.0", "release-it": "^14.0.2", "typescript": "4.x", + "rollup": "^2.33.3", + "rollup-plugin-esbuild": "^4.6.0", "vue": "^3.2.20" }, "release-it": { diff --git a/packages/vant-use/rollup.config.js b/packages/vant-use/rollup.config.js new file mode 100644 index 000000000..4a3a5096b --- /dev/null +++ b/packages/vant-use/rollup.config.js @@ -0,0 +1,18 @@ +import path from 'path'; +import esbuild from 'rollup-plugin-esbuild'; + +export default { + input: path.join(__dirname, 'src', 'index.ts'), + output: [ + { + dir: 'dist/cjs', + format: 'cjs', + }, + { + dir: 'dist/esm', + format: 'esm', + }, + ], + external: ['vue'], + plugins: [esbuild()], +}; diff --git a/packages/vant-use/scripts/build.js b/packages/vant-use/scripts/build.js deleted file mode 100644 index e1c0fa036..000000000 --- a/packages/vant-use/scripts/build.js +++ /dev/null @@ -1,40 +0,0 @@ -const glob = require('fast-glob'); -const { join } = require('path'); -const { transformAsync } = require('@babel/core'); -const { readFileSync, outputFileSync } = require('fs-extra'); - -const srcDir = join(__dirname, '..', 'src'); -const distDir = join(__dirname, '..', 'dist'); -const srcFiles = glob.sync(join(srcDir, '**', '*.ts'), { - ignore: ['**/node_modules', '**/*.spec.ts'], -}); - -const compile = (filePath, distDir) => - new Promise((resolve, reject) => { - const code = readFileSync(filePath, 'utf-8'); - const distPath = filePath.replace(srcDir, distDir).replace('.ts', '.js'); - - transformAsync(code, { filename: filePath }) - .then((result) => { - if (result) { - outputFileSync(distPath, result.code); - resolve(); - } - }) - .catch(reject); - }); - -async function build() { - // esm output - await Promise.all( - srcFiles.map((srcFile) => compile(srcFile, join(distDir, 'esm'))) - ); - - // cjs output - process.env.BABEL_MODULE = 'commonjs'; - await Promise.all( - srcFiles.map((srcFile) => compile(srcFile, join(distDir, 'cjs'))) - ); -} - -build(); diff --git a/packages/vant-use/src/test/utils.spec.ts b/packages/vant-use/test/utils.spec.ts similarity index 72% rename from packages/vant-use/src/test/utils.spec.ts rename to packages/vant-use/test/utils.spec.ts index 68b3e7c32..9c1b9b085 100644 --- a/packages/vant-use/src/test/utils.spec.ts +++ b/packages/vant-use/test/utils.spec.ts @@ -1,4 +1,4 @@ -import { raf, cancelRaf } from '../utils'; +import { raf, cancelRaf } from '../src/utils'; test('raf', async () => { const spy = jest.fn(); diff --git a/packages/vant-use/tsconfig.json b/packages/vant-use/tsconfig.json index 0137ed67d..ac6b07b09 100644 --- a/packages/vant-use/tsconfig.json +++ b/packages/vant-use/tsconfig.json @@ -1,13 +1,12 @@ { "compilerOptions": { "target": "ES2015", - "outDir": "./dist/types", - "module": "ES2015", + "outDir": "./dist", + "module": "ESNext", "strict": true, "declaration": true, "skipLibCheck": true, - "esModuleInterop": true, - "moduleResolution": "Node" + "moduleResolution": "Node", }, "include": ["src/**/*"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a04714724..d09c09e9c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -247,19 +247,19 @@ importers: packages/vant-popperjs: specifiers: '@popperjs/core': ^2.9.2 - '@rollup/plugin-babel': ^5.2.1 - '@rollup/plugin-node-resolve': ^10.0.0 - '@vant/cli': workspace:* + '@rollup/plugin-node-resolve': ^13.0.0 release-it: ^14.2.2 rollup: ^2.33.3 + rollup-plugin-esbuild: ^4.6.0 + typescript: 4.x dependencies: '@popperjs/core': 2.10.2 devDependencies: - '@rollup/plugin-babel': 5.3.0_rollup@2.59.0 - '@rollup/plugin-node-resolve': 10.0.0_rollup@2.59.0 - '@vant/cli': link:../vant-cli + '@rollup/plugin-node-resolve': 13.0.6_rollup@2.59.0 release-it: 14.11.6 rollup: 2.59.0 + rollup-plugin-esbuild: 4.6.0_rollup@2.59.0 + typescript: 4.4.4 packages/vant-stylelint-config: specifiers: @@ -277,19 +277,15 @@ importers: packages/vant-use: specifiers: - '@babel/core': ^7.12.9 - '@vant/cli': workspace:* - fast-glob: ^3.2.7 - fs-extra: ^10.0.0 release-it: ^14.0.2 + rollup: ^2.33.3 + rollup-plugin-esbuild: ^4.6.0 typescript: 4.x vue: ^3.2.20 devDependencies: - '@babel/core': 7.16.0 - '@vant/cli': link:../vant-cli - fast-glob: 3.2.7 - fs-extra: 10.0.0 release-it: 14.11.6 + rollup: 2.59.0 + rollup-plugin-esbuild: 4.6.0_rollup@2.59.0 typescript: 4.4.4 vue: 3.2.21 @@ -1949,27 +1945,11 @@ packages: resolution: {integrity: sha1-B5jAM1Hw3qGlpMq93yalWny+5ZA=, tarball: '@popperjs/core/download/@popperjs/core-2.10.2.tgz'} dev: false - /@rollup/plugin-babel/5.3.0_rollup@2.59.0: - resolution: {integrity: sha1-nLHFFG3daklorZbyCcUMYvkvmHk=, tarball: '@rollup/plugin-babel/download/@rollup/plugin-babel-5.3.0.tgz'} + /@rollup/plugin-node-resolve/13.0.6_rollup@2.59.0: + resolution: {integrity: sha1-KWKQcLt2dWe+gVf1dc+o8rjp73c=, tarball: '@rollup/plugin-node-resolve/download/@rollup/plugin-node-resolve-13.0.6.tgz'} engines: {node: '>= 10.0.0'} peerDependencies: - '@babel/core': ^7.0.0 - '@types/babel__core': ^7.1.9 - rollup: ^1.20.0||^2.0.0 - peerDependenciesMeta: - '@types/babel__core': - optional: true - dependencies: - '@babel/helper-module-imports': 7.16.0 - '@rollup/pluginutils': 3.1.0_rollup@2.59.0 - rollup: 2.59.0 - dev: true - - /@rollup/plugin-node-resolve/10.0.0_rollup@2.59.0: - resolution: {integrity: sha1-RAZKK5jfdTDmas+JQf8mL8m06tg=, tarball: '@rollup/plugin-node-resolve/download/@rollup/plugin-node-resolve-10.0.0.tgz'} - engines: {node: '>= 10.0.0'} - peerDependencies: - rollup: ^1.20.0||^2.0.0 + rollup: ^2.42.0 dependencies: '@rollup/pluginutils': 3.1.0_rollup@2.59.0 '@types/resolve': 1.17.1 @@ -1998,7 +1978,6 @@ packages: dependencies: estree-walker: 2.0.2 picomatch: 2.3.0 - dev: false /@sindresorhus/is/0.14.0: resolution: {integrity: sha1-n7OjzzEyMoFR81PeRjLgHlIQK+o=, tarball: '@sindresorhus/is/download/@sindresorhus/is-0.14.0.tgz'} @@ -3571,7 +3550,7 @@ packages: resolution: {integrity: sha1-pvLc5hL63S7x9Rm3NVHxfoUZmDE=, tarball: deep-is/download/deep-is-0.1.4.tgz} /deepmerge/4.2.2: - resolution: {integrity: sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=, tarball: deepmerge/download/deepmerge-4.2.2.tgz?cache=0&sync_timestamp=1632822781299&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fdeepmerge%2Fdownload%2Fdeepmerge-4.2.2.tgz} + resolution: {integrity: sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=, tarball: deepmerge/download/deepmerge-4.2.2.tgz} engines: {node: '>=0.10.0'} /defaults/1.0.3: @@ -4432,6 +4411,7 @@ packages: graceful-fs: 4.2.8 jsonfile: 6.1.0 universalify: 2.0.0 + dev: false /fs-extra/8.1.0: resolution: {integrity: sha1-SdQ8RaiM2Wd2aMt74bRu/bjS4cA=, tarball: fs-extra/download/fs-extra-8.1.0.tgz?cache=0&sync_timestamp=1632822706452&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffs-extra%2Fdownload%2Ffs-extra-8.1.0.tgz} @@ -5789,6 +5769,11 @@ packages: - utf-8-validate dev: false + /joycon/3.0.1: + resolution: {integrity: sha1-kHTJsIzPN6Zyb/dKGEhfhe/K3a8=, tarball: joycon/download/joycon-3.0.1.tgz} + engines: {node: '>=10'} + dev: true + /js-tokens/4.0.0: resolution: {integrity: sha1-GSA/tZmR35jjoocFDUZHzerzJJk=, tarball: js-tokens/download/js-tokens-4.0.0.tgz} @@ -5898,6 +5883,10 @@ packages: dependencies: minimist: 1.2.5 + /jsonc-parser/3.0.0: + resolution: {integrity: sha1-q914VwHH5+rKip7IzwcMpRp0WiI=, tarball: jsonc-parser/download/jsonc-parser-3.0.0.tgz} + dev: true + /jsonfile/4.0.0: resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=, tarball: jsonfile/download/jsonfile-4.0.0.tgz} optionalDependencies: @@ -5910,6 +5899,7 @@ packages: universalify: 2.0.0 optionalDependencies: graceful-fs: 4.2.8 + dev: false /jsonparse/1.3.1: resolution: {integrity: sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=, tarball: jsonparse/download/jsonparse-1.3.1.tgz} @@ -7315,6 +7305,19 @@ packages: dependencies: glob: 7.2.0 + /rollup-plugin-esbuild/4.6.0_rollup@2.59.0: + resolution: {integrity: sha1-KTsMjS5kt1ORjzAjwfuH3ErN7zs=, tarball: rollup-plugin-esbuild/download/rollup-plugin-esbuild-4.6.0.tgz} + engines: {node: '>=12'} + peerDependencies: + esbuild: '>=0.10.1' + rollup: ^1.20.0 || ^2.0.0 + dependencies: + '@rollup/pluginutils': 4.1.1 + joycon: 3.0.1 + jsonc-parser: 3.0.0 + rollup: 2.59.0 + dev: true + /rollup/2.59.0: resolution: {integrity: sha1-EIxhsPoKN+vI0fFk8oFiIFbw21k=, tarball: rollup/download/rollup-2.59.0.tgz} engines: {node: '>=10.0.0'} @@ -8115,6 +8118,7 @@ packages: /universalify/2.0.0: resolution: {integrity: sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=, tarball: universalify/download/universalify-2.0.0.tgz} engines: {node: '>= 10.0.0'} + dev: false /update-notifier/5.1.0: resolution: {integrity: sha1-SrDXx/NqIx3XMWz3cpMT8CFNmtk=, tarball: update-notifier/download/update-notifier-5.1.0.tgz} From 79146db9d58d9ee4ba9dfd6e4c87cc3af51b0d85 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 11 Nov 2021 14:22:34 +0800 Subject: [PATCH 04/18] chore(Lazyload): reuse some utils --- packages/vant/jest.config.js | 1 + .../lazyload/vue-lazyload/lazy-component.js | 17 +++++-------- .../src/lazyload/vue-lazyload/lazy-image.js | 20 +++++++--------- .../vant/src/lazyload/vue-lazyload/lazy.js | 3 +-- .../src/lazyload/vue-lazyload/listener.js | 24 +++++++------------ .../vant/src/lazyload/vue-lazyload/util.js | 6 ----- 6 files changed, 24 insertions(+), 47 deletions(-) diff --git a/packages/vant/jest.config.js b/packages/vant/jest.config.js index 90ea75444..5dbfb0cff 100644 --- a/packages/vant/jest.config.js +++ b/packages/vant/jest.config.js @@ -2,6 +2,7 @@ module.exports = { testPathIgnorePatterns: ['/node_modules/'], collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx,vue}', + '!src/lazyload/vue-lazyload/**', '!**/demo/**', '!**/test/**', '!**/lang/**', diff --git a/packages/vant/src/lazyload/vue-lazyload/lazy-component.js b/packages/vant/src/lazyload/vue-lazyload/lazy-component.js index 236e57d0a..9f47cf5b3 100644 --- a/packages/vant/src/lazyload/vue-lazyload/lazy-component.js +++ b/packages/vant/src/lazyload/vue-lazyload/lazy-component.js @@ -1,5 +1,5 @@ import { h } from 'vue'; -import { inBrowser } from '@vant/use'; +import { inBrowser, useRect } from '@vant/use'; export default (lazy) => ({ props: { @@ -24,7 +24,6 @@ export default (lazy) => ({ state: { loaded: false, }, - rect: {}, show: false, }; }, @@ -40,18 +39,14 @@ export default (lazy) => ({ }, methods: { - getRect() { - this.rect = this.$el.getBoundingClientRect(); - }, - checkInView() { - this.getRect(); + const rect = useRect(this.$el); return ( inBrowser && - this.rect.top < window.innerHeight * lazy.options.preLoad && - this.rect.bottom > 0 && - this.rect.left < window.innerWidth * lazy.options.preLoad && - this.rect.right > 0 + rect.top < window.innerHeight * lazy.options.preLoad && + rect.bottom > 0 && + rect.left < window.innerWidth * lazy.options.preLoad && + rect.right > 0 ); }, diff --git a/packages/vant/src/lazyload/vue-lazyload/lazy-image.js b/packages/vant/src/lazyload/vue-lazyload/lazy-image.js index b5010b5c5..b43853301 100644 --- a/packages/vant/src/lazyload/vue-lazyload/lazy-image.js +++ b/packages/vant/src/lazyload/vue-lazyload/lazy-image.js @@ -1,5 +1,6 @@ -import { inBrowser } from '@vant/use'; -import { loadImageAsync, noop } from './util'; +import { useRect } from '@vant/use'; +import { loadImageAsync } from './util'; +import { noop } from '../../utils'; export default (lazyManager) => ({ props: { @@ -34,7 +35,6 @@ export default (lazyManager) => ({ error: false, attempt: 0, }, - rect: {}, renderSrc: '', }; }, @@ -66,17 +66,13 @@ export default (lazyManager) => ({ this.options.loading = loading; this.renderSrc = this.options.loading; }, - getRect() { - this.rect = this.$el.getBoundingClientRect(); - }, checkInView() { - this.getRect(); + const rect = useRect(this.$el); return ( - inBrowser && - this.rect.top < window.innerHeight * lazyManager.options.preLoad && - this.rect.bottom > 0 && - this.rect.left < window.innerWidth * lazyManager.options.preLoad && - this.rect.right > 0 + rect.top < window.innerHeight * lazyManager.options.preLoad && + rect.bottom > 0 && + rect.left < window.innerWidth * lazyManager.options.preLoad && + rect.right > 0 ); }, load(onFinish = noop) { diff --git a/packages/vant/src/lazyload/vue-lazyload/lazy.js b/packages/vant/src/lazyload/vue-lazyload/lazy.js index a622c3eba..08afe16ec 100644 --- a/packages/vant/src/lazyload/vue-lazyload/lazy.js +++ b/packages/vant/src/lazyload/vue-lazyload/lazy.js @@ -8,11 +8,11 @@ import { supportWebp, getDPR, getBestSelectionFromSrcset, - isObject, hasIntersectionObserver, modeType, ImageCache, } from './util'; +import { isObject } from '../../utils'; import ReactiveListener from './listener'; const DEFAULT_URL = @@ -64,7 +64,6 @@ export default function () { attempt: attempt || 3, scale: scale || getDPR(scale), ListenEvents: listenEvents || DEFAULT_EVENTS, - hasbind: false, supportWebp: supportWebp(), filter: filter || {}, adapter: adapter || {}, diff --git a/packages/vant/src/lazyload/vue-lazyload/listener.js b/packages/vant/src/lazyload/vue-lazyload/listener.js index b749188ab..f35fa6ea7 100644 --- a/packages/vant/src/lazyload/vue-lazyload/listener.js +++ b/packages/vant/src/lazyload/vue-lazyload/listener.js @@ -1,4 +1,6 @@ -import { loadImageAsync, noop } from './util'; +import { useRect } from '@vant/use'; +import { loadImageAsync } from './util'; +import { noop } from '../../utils'; export default class ReactiveListener { constructor({ @@ -26,8 +28,6 @@ export default class ReactiveListener { this.options = options; - this.rect = null; - this.$parent = $parent; this.elRenderer = elRenderer; this._imageCache = imageCache; @@ -87,25 +87,17 @@ export default class ReactiveListener { } } - /* - * get el node rect - * @return - */ - getRect() { - this.rect = this.el.getBoundingClientRect(); - } - /* * check el is in view * @return {Boolean} el is in view */ checkInView() { - this.getRect(); + const rect = useRect(this.el); return ( - this.rect.top < window.innerHeight * this.options.preLoad && - this.rect.bottom > this.options.preLoadTop && - this.rect.left < window.innerWidth * this.options.preLoad && - this.rect.right > 0 + rect.top < window.innerHeight * this.options.preLoad && + rect.bottom > this.options.preLoadTop && + rect.left < window.innerWidth * this.options.preLoad && + rect.right > 0 ); } diff --git a/packages/vant/src/lazyload/vue-lazyload/util.js b/packages/vant/src/lazyload/vue-lazyload/util.js index 98b652b0d..04e2870de 100644 --- a/packages/vant/src/lazyload/vue-lazyload/util.js +++ b/packages/vant/src/lazyload/vue-lazyload/util.js @@ -158,12 +158,6 @@ export const loadImageAsync = (item, resolve, reject) => { image.onerror = (e) => reject(e); }; -export function isObject(obj) { - return obj !== null && typeof obj === 'object'; -} - -export function noop() {} - export class ImageCache { constructor({ max }) { this.options = { From a9ce9096e428c5baed2ade9732863631f7580069 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Nov 2021 16:54:04 +0800 Subject: [PATCH 05/18] fix(@vant/use): allow to call useWindowSize outside setup (#9834) --- packages/vant-use/src/useWindowSize/index.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/vant-use/src/useWindowSize/index.ts b/packages/vant-use/src/useWindowSize/index.ts index 02230d56c..5a17ba64b 100644 --- a/packages/vant-use/src/useWindowSize/index.ts +++ b/packages/vant-use/src/useWindowSize/index.ts @@ -1,6 +1,5 @@ import { ref, Ref } from 'vue'; import { inBrowser } from '../utils'; -import { useEventListener } from '../useEventListener'; let width: Ref; let height: Ref; @@ -10,16 +9,16 @@ export function useWindowSize() { width = ref(0); height = ref(0); - const update = () => { - if (inBrowser) { + if (inBrowser) { + const update = () => { width.value = window.innerWidth; height.value = window.innerHeight; - } - }; + }; - update(); - useEventListener('resize', update); - useEventListener('orientationchange', update); + update(); + window.addEventListener('resize', update, { passive: true }); + window.addEventListener('orientationchange', update, { passive: true }); + } } return { width, height }; From a0b368f1b4dcbb91157a31c34056d645b03e8d05 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Nov 2021 17:25:48 +0800 Subject: [PATCH 06/18] perf(@vant/use): reduce usePageVisibility event binding (#9835) * perf(@vant/use): reduce usePageVisibility event binding * chore: update --- .eslintrc | 5 ++++- packages/vant-use/src/useClickAway/index.ts | 5 ----- .../vant-use/src/usePageVisibility/index.ts | 21 +++++++++++-------- packages/vant-use/src/useRect/index.ts | 13 +++++------- 4 files changed, 21 insertions(+), 23 deletions(-) diff --git a/.eslintrc b/.eslintrc index d0707a444..d99a2ac50 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,7 @@ { "root": true, - "extends": ["@vant"] + "extends": ["@vant"], + "rules": { + "prefer-object-spread": "off" + } } diff --git a/packages/vant-use/src/useClickAway/index.ts b/packages/vant-use/src/useClickAway/index.ts index b36312dba..8a936eef7 100644 --- a/packages/vant-use/src/useClickAway/index.ts +++ b/packages/vant-use/src/useClickAway/index.ts @@ -1,5 +1,4 @@ import { Ref, unref } from 'vue'; -import { inBrowser } from '../utils'; import { useEventListener } from '../useEventListener'; export type UseClickAwayOptions = { @@ -11,10 +10,6 @@ export function useClickAway( listener: EventListener, options: UseClickAwayOptions = {} ) { - if (!inBrowser) { - return; - } - const { eventName = 'click' } = options; const onClick = (event: Event) => { diff --git a/packages/vant-use/src/usePageVisibility/index.ts b/packages/vant-use/src/usePageVisibility/index.ts index 767192698..e63996815 100644 --- a/packages/vant-use/src/usePageVisibility/index.ts +++ b/packages/vant-use/src/usePageVisibility/index.ts @@ -1,18 +1,21 @@ -import { ref } from 'vue'; +import { ref, Ref } from 'vue'; import { inBrowser } from '../utils'; -import { useEventListener } from '../useEventListener'; + +let visibility: Ref; export function usePageVisibility() { - const visibility = ref('visible'); + if (!visibility) { + visibility = ref('visible'); - const setVisibility = () => { if (inBrowser) { - visibility.value = document.hidden ? 'hidden' : 'visible'; - } - }; + const update = () => { + visibility.value = document.hidden ? 'hidden' : 'visible'; + }; - setVisibility(); - useEventListener('visibilitychange', setVisibility); + update(); + window.addEventListener('visibilitychange', update); + } + } return visibility; } diff --git a/packages/vant-use/src/useRect/index.ts b/packages/vant-use/src/useRect/index.ts index 228549ffc..d8a4c9627 100644 --- a/packages/vant-use/src/useRect/index.ts +++ b/packages/vant-use/src/useRect/index.ts @@ -1,19 +1,16 @@ import { Ref, unref } from 'vue'; -function isWindow(val: unknown): val is Window { - return val === window; -} +const isWindow = (val: unknown): val is Window => val === window; -function makeDOMRect(width: number, height: number) { - return { +const makeDOMRect = (width: number, height: number) => + ({ top: 0, left: 0, right: width, bottom: height, width, height, - } as DOMRect; -} + } as DOMRect); export const useRect = ( elementOrRef: Element | Window | Ref @@ -26,7 +23,7 @@ export const useRect = ( return makeDOMRect(width, height); } - if (element && element.getBoundingClientRect) { + if (element?.getBoundingClientRect) { return element.getBoundingClientRect(); } From 218567437cdd55dcd07e797f3fc14eae4d37baa6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 11 Nov 2021 17:27:41 +0800 Subject: [PATCH 07/18] release: @vant/use 1.3.3 --- packages/vant-use/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant-use/package.json b/packages/vant-use/package.json index b3770740d..d1f21283f 100644 --- a/packages/vant-use/package.json +++ b/packages/vant-use/package.json @@ -1,6 +1,6 @@ { "name": "@vant/use", - "version": "1.3.2", + "version": "1.3.3", "description": "Vant Composition API", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", From 933d1bb2cf487d3ea4d93ee06cc6eb1b11add8c3 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Nov 2021 19:20:10 +0800 Subject: [PATCH 08/18] release: @vant/use 1.3.3 (#9840) --- packages/vant-use/README.md | 14 +++++--- packages/vant-use/changelog.md | 65 ++++++++++++++++++---------------- packages/vant/package.json | 2 +- pnpm-lock.yaml | 10 ++++-- 4 files changed, 52 insertions(+), 39 deletions(-) diff --git a/packages/vant-use/README.md b/packages/vant-use/README.md index 280419866..c235ec312 100644 --- a/packages/vant-use/README.md +++ b/packages/vant-use/README.md @@ -1,13 +1,17 @@ # Vant Use -Vant Use 是从 Vant 实际应用场景中沉淀的 Vue 组合式 API 库。 +Built-in composition APIs of Vant. -## 安装 +## Install -```bash -# 通过 npm 安装 +#### NPM + +```shell npm i @vant/use -S +``` -# 通过 yarn 安装 +#### YARN + +```shell yarn add @vant/use ``` diff --git a/packages/vant-use/changelog.md b/packages/vant-use/changelog.md index 9e72b5b5f..096069f8c 100644 --- a/packages/vant-use/changelog.md +++ b/packages/vant-use/changelog.md @@ -1,144 +1,149 @@ -# 更新日志 +# Changelog + +### v1.3.3 + +- Allow to call useWindowSize outside setup +- Improve usePageVisibility event bindings performance ### v1.3.2 -- 移除 passive event 的 polyfill +-Remove passive event polyfill ### v1.3.1 -- 移除 requestAnimationFrame 的 polyfill +- Remove requestAnimationFrame polyfill ### v1.3.0 -- 新增 `useCustomFieldValue` 方法 +- Added `useCustomFieldValue` method ### v1.2.2 `2021-07-22` -- `useEventListener`: 修复 `invalid watch source` 问题 +- `useEventListener`: fix `invalid watch source` issue ### v1.2.1 `2021-07-21` -- `useEventListener` 现在会监听 target 的变化，并重新监听事件 +- `useEventListener` will now watch the target changes and re-listen the events ### v1.2.0 `2021-07-12` -- 调整 `useParent` 和 `useChildren` 的类型定义 +- Adjust type definition of `useParent` and `useChildren` ### v1.1.2 `2021-04-22` -- 修复 `useScrollParent` 在 SSR 下报错的问题 +- Fix the issue of `useScrollParent` reporting errors under SSR ### v1.1.1 `2021-04-16` -- 移除 `@babel/runtime` 依赖 +- Remove `@babel/runtime` dependency ### v1.1.0 `2021-04-06` -- 构建结果由 ES5 调整为 ES6 +- Compile to ES6 instead of ES5 ### v1.0.5 `2021-02-13` -- 优化 `useRect` 的返回值类型，始终返回 `DOMRect` +- Optimize the return value type of `useRect`, always return `DOMRect` ### v1.0.4 `2021-02-12` -- `useChildren` 支持通过泛型定义 Children 的类型 +- `useChildren` supports defining the type of Children through generics ### v1.0.3 `2021-02-10` -- 当 parent 不存在时，`useParent` 现在返回的 index 为 -1 而不是 undefined +- When parent does not exist, `useParent` now returns index -1 instead of undefined ### v1.0.2 `2021-01-01` -- 修复 useToggle 类型定义错误的问题 +- Fix the problem of incorrect useToggle type definition ### v1.0.1 `2020-12-27` -- 导出个别内部方法供 Vant 使用 +- Export individual internal methods for use by Vant ### v1.0.0 `2020-12-15` -- 优化构建产物体积 +- Optimize the volume of the build product ### v0.1.0 `2020-11-11` -- 新增 `onMountedOrActivated` 方法 +- Added `onMountedOrActivated` method ### v0.0.8 `2020-10-09` -- 改进类型定义 +- Improve type definition ### v0.0.7 `2020-10-06` -- 修复 `useCountDown` 未被导出的问题 +- Fix the problem that `useCountDown` is not exported ### v0.0.6 `2020-10-06` -- 导出所有类型定义 +- Export all type definitions ### v0.0.5 `2020-10-06` -- 新增 `useCountDown` 方法 +- Added `useCountDown` method ### v0.0.4 `2020-10-05` -- 新增 `useRect` 方法 +- Added `useRect` method ### v0.0.3 `2020-09-27` -- 新增 `useParent` 方法 -- 新增 `useChildren` 方法 +- Added `useParent` method +- Added `useChildren` method ### v0.0.2 `2020-09-15` -- 新增 `useWindowSize` 方法 +- Added `useWindowSize` method ### v0.0.1 `2020-09-15` -- 新增 `useClickAway` 方法 -- 新增 `useEventListener` 方法 -- 新增 `usePageVisibility` 方法 -- 新增 `useScrollParent` 方法 -- 新增 `useToggle` 方法 +- Added `useClickAway` method +- Added `useEventListener` method +- Added `usePageVisibility` method +- Added `useScrollParent` method +- Added `useToggle` method diff --git a/packages/vant/package.json b/packages/vant/package.json index 1346b71a9..840e3ab03 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -46,7 +46,7 @@ "dependencies": { "@vant/icons": "^1.7.1", "@vant/popperjs": "^1.1.0", - "@vant/use": "^1.3.2" + "@vant/use": "^1.3.3" }, "peerDependencies": { "vue": "^3.0.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d09c09e9c..afffd9396 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,7 +49,7 @@ importers: '@vant/cli': ^4.0.0-beta.5 '@vant/icons': ^1.7.1 '@vant/popperjs': ^1.1.0 - '@vant/use': ^1.3.2 + '@vant/use': ^1.3.3 '@vue/compiler-sfc': ^3.2.20 '@vue/runtime-core': ^3.2.20 typescript: 4.x @@ -58,7 +58,7 @@ importers: dependencies: '@vant/icons': link:../vant-icons '@vant/popperjs': link:../vant-popperjs - '@vant/use': link:../vant-use + '@vant/use': 1.3.3 devDependencies: '@vant/area-data': link:../vant-area-data '@vant/cli': link:../vant-cli @@ -2335,6 +2335,10 @@ packages: eslint-visitor-keys: 3.0.0 dev: false + /@vant/use/1.3.3: + resolution: {integrity: sha512-EM06Wgc+2sy4VhAECBTRd4NuoUdVeprcfClMdAnS1HNibk13XYd8iGNi8XqijWzrIO/KCCgudnDW9Ja/iYy+rA==, tarball: '@vant/use/download/@vant/use-1.3.3.tgz?cache=0&sync_timestamp=1636624316375&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.3.3.tgz'} + dev: false + /@vitejs/plugin-vue-jsx/1.2.0: resolution: {integrity: sha1-pCFr27ixKABTfTnjtXEfzy60cO8=, tarball: '@vitejs/plugin-vue-jsx/download/@vitejs/plugin-vue-jsx-1.2.0.tgz'} engines: {node: '>=12.0.0'} @@ -7485,7 +7489,7 @@ packages: engines: {node: '>=0.10.0'} /source-map/0.6.1: - resolution: {integrity: sha1-dHIq8y6WFOnCh6jQu95IteLxomM=, tarball: source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1632822727980&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz} + resolution: {integrity: sha1-dHIq8y6WFOnCh6jQu95IteLxomM=, tarball: source-map/download/source-map-0.6.1.tgz} engines: {node: '>=0.10.0'} /source-map/0.7.3: From ca41a57f30fd8c4be6b0486b2b330540c0875d9a Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Nov 2021 19:31:32 +0800 Subject: [PATCH 09/18] fix(Switch): switch node inherit font-size (#9842) * fix(Switch): switch node inherit font-size * chore: upd --- package.json | 1 + packages/vant/src/switch/index.less | 2 ++ pnpm-lock.yaml | 10 ++++------ 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 10bccb497..df8a60c36 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "devDependencies": { "@vant/cli": "workspace:*", "@vant/eslint-config": "workspace:*", + "@vant/stylelint-config": "workspace:*", "eslint": "^8.2.0", "husky": "^7.0.4", "lint-staged": "^11.2.6", diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less index 570f08bc2..8af117767 100644 --- a/packages/vant/src/switch/index.less +++ b/packages/vant/src/switch/index.less @@ -33,6 +33,8 @@ left: 0; width: var(--van-switch-node-size); height: var(--van-switch-node-size); + // https://github.com/youzan/vant/issues/9839 + font-size: inherit; background: var(--van-switch-node-background-color); border-radius: 100%; box-shadow: var(--van-switch-node-box-shadow); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afffd9396..0a752aa50 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ importers: specifiers: '@vant/cli': workspace:* '@vant/eslint-config': workspace:* + '@vant/stylelint-config': workspace:* eslint: ^8.2.0 husky: ^7.0.4 lint-staged: ^11.2.6 @@ -14,6 +15,7 @@ importers: devDependencies: '@vant/cli': link:packages/vant-cli '@vant/eslint-config': link:packages/vant-eslint-config + '@vant/stylelint-config': link:packages/vant-stylelint-config eslint: 8.2.0 husky: 7.0.4 lint-staged: 11.2.6 @@ -58,7 +60,7 @@ importers: dependencies: '@vant/icons': link:../vant-icons '@vant/popperjs': link:../vant-popperjs - '@vant/use': 1.3.3 + '@vant/use': link:../vant-use devDependencies: '@vant/area-data': link:../vant-area-data '@vant/cli': link:../vant-cli @@ -2335,10 +2337,6 @@ packages: eslint-visitor-keys: 3.0.0 dev: false - /@vant/use/1.3.3: - resolution: {integrity: sha512-EM06Wgc+2sy4VhAECBTRd4NuoUdVeprcfClMdAnS1HNibk13XYd8iGNi8XqijWzrIO/KCCgudnDW9Ja/iYy+rA==, tarball: '@vant/use/download/@vant/use-1.3.3.tgz?cache=0&sync_timestamp=1636624316375&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.3.3.tgz'} - dev: false - /@vitejs/plugin-vue-jsx/1.2.0: resolution: {integrity: sha1-pCFr27ixKABTfTnjtXEfzy60cO8=, tarball: '@vitejs/plugin-vue-jsx/download/@vitejs/plugin-vue-jsx-1.2.0.tgz'} engines: {node: '>=12.0.0'} @@ -7489,7 +7487,7 @@ packages: engines: {node: '>=0.10.0'} /source-map/0.6.1: - resolution: {integrity: sha1-dHIq8y6WFOnCh6jQu95IteLxomM=, tarball: source-map/download/source-map-0.6.1.tgz} + resolution: {integrity: sha1-dHIq8y6WFOnCh6jQu95IteLxomM=, tarball: source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1632822727980&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz} engines: {node: '>=0.10.0'} /source-map/0.7.3: From c65e336bf6e5df1b2cfe5b21841174fb4f4e0d96 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Nov 2021 20:37:13 +0800 Subject: [PATCH 10/18] types(Field): expose sub-types of FieldRule (#9843) * types(Field): expose sub-types of FieldRule * types: update --- packages/vant/src/checkbox/types.ts | 8 ++------ packages/vant/src/field/README.md | 3 +++ packages/vant/src/field/README.zh-CN.md | 3 +++ packages/vant/src/field/index.ts | 3 +++ packages/vant/src/field/types.ts | 25 ++++++++++++++++--------- packages/vant/src/swipe/types.ts | 4 +--- 6 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/vant/src/checkbox/types.ts b/packages/vant/src/checkbox/types.ts index fa8d7bf20..d12ed20a8 100644 --- a/packages/vant/src/checkbox/types.ts +++ b/packages/vant/src/checkbox/types.ts @@ -7,13 +7,9 @@ export type CheckboxLabelPosition = CheckerLabelPosition; export type CheckboxExpose = { toggle: (newValue?: boolean) => void; - /** - * @private - */ + /** @private */ props: CheckboxProps; - /** - * @private - */ + /** @private */ checked: ComputedRef; }; diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 36e7b914d..9f1f96f98 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -318,8 +318,11 @@ import type { FieldProps, FieldInstance, FieldTextAlign, + FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, + FieldRuleValidator, + FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index cc7c45102..e4d3f8f73 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -337,8 +337,11 @@ import type { FieldProps, FieldInstance, FieldTextAlign, + FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, + FieldRuleValidator, + FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, diff --git a/packages/vant/src/field/index.ts b/packages/vant/src/field/index.ts index 9b0c7610b..f1570c01e 100644 --- a/packages/vant/src/field/index.ts +++ b/packages/vant/src/field/index.ts @@ -9,8 +9,11 @@ export type { FieldRule, FieldInstance, FieldTextAlign, + FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, + FieldRuleValidator, + FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, diff --git a/packages/vant/src/field/types.ts b/packages/vant/src/field/types.ts index 9fbe122d2..95cd23e0b 100644 --- a/packages/vant/src/field/types.ts +++ b/packages/vant/src/field/types.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-use-before-define */ import type { ComputedRef, ComponentPublicInstance } from 'vue'; import type { FieldProps } from './Field'; @@ -28,16 +29,24 @@ export type FieldValidateError = { message: string; }; +export type FieldRuleMessage = + | string + | ((value: any, rule: FieldRule) => string); + +export type FieldRuleValidator = ( + value: any, + rule: FieldRule +) => boolean | string | Promise; + +export type FiledRuleFormatter = (value: any, rule: FieldRule) => string; + export type FieldRule = { pattern?: RegExp; trigger?: FieldValidateTrigger; - message?: string | ((value: any, rule: FieldRule) => string); + message?: FieldRuleMessage; required?: boolean; - validator?: ( - value: any, - rule: FieldRule - ) => boolean | string | Promise; - formatter?: (value: any, rule: FieldRule) => string; + validator?: FieldRuleValidator; + formatter?: FiledRuleFormatter; }; // Shared props of Field and Form @@ -57,9 +66,7 @@ export type FieldExpose = { rules?: FieldRule[] | undefined ) => Promise; resetValidation: () => void; - /** - * @private - */ + /** @private */ formValue: ComputedRef; }; diff --git a/packages/vant/src/swipe/types.ts b/packages/vant/src/swipe/types.ts index 41dfebf48..261b3d1d0 100644 --- a/packages/vant/src/swipe/types.ts +++ b/packages/vant/src/swipe/types.ts @@ -19,9 +19,7 @@ export type SwipeExpose = { next: () => void; resize: () => void; swipeTo: (index: number, options?: SwipeToOptions) => void; - /** - * @private - */ + /** @private */ state: SwipeState; }; From b163d87064f9b0c61ba48878bea8370bf97c39fb Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 12 Nov 2021 17:49:53 +0800 Subject: [PATCH 11/18] docs: install with pnpm (#9850) --- README.md | 14 ++++++++--- README.zh-CN.md | 14 ++++++++--- .../generators/vue2/docs/quickstart.md | 9 ++++--- .../generators/vue3/docs/quickstart.md | 9 ++++--- packages/vant-area-data/README.md | 13 +++++----- packages/vant-cli/README.md | 9 ++++--- packages/vant-eslint-config/README.md | 11 ++++---- packages/vant-icons/README.md | 13 +++++----- packages/vant-markdown-loader/README.md | 25 +++++++++---------- packages/vant-markdown-vetur/README.md | 11 ++++---- packages/vant-popperjs/README.md | 7 ++++++ packages/vant-stylelint-config/README.md | 11 ++++---- packages/vant-touch-emulator/README.md | 13 +++++----- packages/vant-use/README.md | 13 +++++----- .../vant/docs/markdown/quickstart.en-US.md | 14 ++++++++--- .../vant/docs/markdown/quickstart.zh-CN.md | 16 ++++++++---- packages/vant/src/area/README.md | 7 ++++++ packages/vant/src/area/README.zh-CN.md | 7 ++++++ 18 files changed, 131 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 1d5ca4d8f..d4b7d0d5f 100644 --- a/README.md +++ b/README.md @@ -42,11 +42,17 @@ ## Install ```bash -# Install Vant 2 for Vue 2 project -npm i vant -S +# install Vant 2 for Vue 2 project +npm i vant@2 -# Install Vant 3 for Vue 3 project -npm i vant@next -S +# install Vant 3 for Vue 3 project +npm i vant@3 + +# with yarn +yarn add vant@3 + +# with pnpm +pnpm add vant@3 ``` ## Quickstart diff --git a/README.zh-CN.md b/README.zh-CN.md index b9482eaa7..a599351af 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -46,11 +46,17 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源 ## 安装 ```bash -# Vue 2 项目，安装 Vant 2： -npm i vant -S +# Vue 2 项目，安装 Vant 2 +npm i vant@2 -# Vue 3 项目，安装 Vant 3： -npm i vant@next -S +# Vue 3 项目，安装 Vant 3 +npm i vant@3 + +# 通过 yarn 安装 +yarn add vant@3 + +# 通过 pnpm 安装 +pnpm add vant@3 ``` ## 快速上手 diff --git a/packages/create-vant-cli-app/generators/vue2/docs/quickstart.md b/packages/create-vant-cli-app/generators/vue2/docs/quickstart.md index e761aa6a9..f528a0e25 100644 --- a/packages/create-vant-cli-app/generators/vue2/docs/quickstart.md +++ b/packages/create-vant-cli-app/generators/vue2/docs/quickstart.md @@ -3,9 +3,12 @@ ### 安装 ```bash -# 通过 npm 安装 -npm i <%= name %> -S +# 通过 npm +npm i <%= name %> -# 通过 yarn 安装 +# 通过 yarn yarn add <%= name %> + +# 通过 pnpm +pnpm add <%= name %> ``` diff --git a/packages/create-vant-cli-app/generators/vue3/docs/quickstart.md b/packages/create-vant-cli-app/generators/vue3/docs/quickstart.md index e761aa6a9..f528a0e25 100644 --- a/packages/create-vant-cli-app/generators/vue3/docs/quickstart.md +++ b/packages/create-vant-cli-app/generators/vue3/docs/quickstart.md @@ -3,9 +3,12 @@ ### 安装 ```bash -# 通过 npm 安装 -npm i <%= name %> -S +# 通过 npm +npm i <%= name %> -# 通过 yarn 安装 +# 通过 yarn yarn add <%= name %> + +# 通过 pnpm +pnpm add <%= name %> ``` diff --git a/packages/vant-area-data/README.md b/packages/vant-area-data/README.md index bcd494e38..74093e1ec 100644 --- a/packages/vant-area-data/README.md +++ b/packages/vant-area-data/README.md @@ -4,16 +4,15 @@ ## 安装 -#### NPM - ```shell -npm i @vant/area-data -D -``` +# 通过 npm +npm i @vant/area-data -#### YARN +# 通过 yarn +yarn add @vant/area-data -```shell -yarn add @vant/area-data --dev +# 通过 pnpm +pnpm add @vant/area-data ``` ## 使用 diff --git a/packages/vant-cli/README.md b/packages/vant-cli/README.md index 3c335f83d..5c2eeb9c4 100644 --- a/packages/vant-cli/README.md +++ b/packages/vant-cli/README.md @@ -20,11 +20,14 @@ yarn create vant-cli-app ### 手动安装 ```shell -# 通过 npm 安装 +# 通过 npm npm i @vant/cli -D -# 通过 yarn 安装 -yarn add @vant/cli --dev +# 通过 yarn +yarn add @vant/cli -D + +# 通过 pnpm +pnpm add @vant/cli -D ``` 安装完成后，请将以下配置添加到 package.json 文件中 diff --git a/packages/vant-eslint-config/README.md b/packages/vant-eslint-config/README.md index b6f498acc..89413a262 100644 --- a/packages/vant-eslint-config/README.md +++ b/packages/vant-eslint-config/README.md @@ -2,16 +2,15 @@ ## Install -#### NPM - ```shell +# with npm npm i @vant/eslint-config -D -``` -#### YARN +# with yarn +yarn add @vant/eslint-config -D -```shell -yarn add @vant/eslint-config --dev +# with pnpm +pnpm add @vant/eslint-config -D ``` ## Usage diff --git a/packages/vant-icons/README.md b/packages/vant-icons/README.md index a50e28550..c5c26e822 100644 --- a/packages/vant-icons/README.md +++ b/packages/vant-icons/README.md @@ -2,16 +2,15 @@ ## Install -#### NPM - ```shell -npm i @vant/icons -S -``` +# with npm +npm i @vant/icons -#### YARN - -```shell +# with yarn yarn add @vant/icons + +# with pnpm +pnpm add @vant/icons ``` ## Document diff --git a/packages/vant-markdown-loader/README.md b/packages/vant-markdown-loader/README.md index 5536263c3..bac03df92 100644 --- a/packages/vant-markdown-loader/README.md +++ b/packages/vant-markdown-loader/README.md @@ -4,27 +4,26 @@ Simple and fast vue markdown loader, transform markdown to vue component. ## Install -### NPM - ```shell -npm i @vant/markdown-loader -S -``` +# with npm +npm i @vant/markdown-loader -D -### YARN +# with yarn +yarn add @vant/markdown-loader -D -```shell -yarn add @vant/markdown-loader +# with pnpm +pnpm add @vant/markdown-loader -D ``` ## Options - `enableMetaData`: Default `false`. Whether to use [front-matter](https://github.com/jxson/front-matter) to extract markdown meta data -- `linkOpen`: Default `true`. Whether to add target="_blank" to all links +- `linkOpen`: Default `true`. Whether to add target="\_blank" to all links - `wrapper(html, fm)`: Format the returned content using a custom function - - `html`: The result of [markdown-it](https://github.com/markdown-it/markdown-it)'s render - - `fm`: See [fm(string)](https://github.com/jxson/front-matter#fmstring). If `enableMetaData` option is `false`, the value is `undefined`. - - `attributes` - - `body` - - `frontmatter` + - `html`: The result of [markdown-it](https://github.com/markdown-it/markdown-it)'s render + - `fm`: See [fm(string)](https://github.com/jxson/front-matter#fmstring). If `enableMetaData` option is `false`, the value is `undefined`. + - `attributes` + - `body` + - `frontmatter` diff --git a/packages/vant-markdown-vetur/README.md b/packages/vant-markdown-vetur/README.md index ee43952b5..f759d01e3 100644 --- a/packages/vant-markdown-vetur/README.md +++ b/packages/vant-markdown-vetur/README.md @@ -4,16 +4,15 @@ ## Install -#### NPM - ```shell +# with npm npm i @vant/markdown-vetur -D -``` -#### YARN +# with yarn +yarn add @vant/markdown-vetur -D -```shell -yarn add @vant/markdown-vetur --dev +# with pnpm +pnpm add @vant/markdown-vetur -D ``` ## API diff --git a/packages/vant-popperjs/README.md b/packages/vant-popperjs/README.md index 0f483f68c..690e8aafe 100644 --- a/packages/vant-popperjs/README.md +++ b/packages/vant-popperjs/README.md @@ -5,7 +5,14 @@ ## Install ```shell +# with npm +npm i @vant/popperjs + +# with yarn yarn add @vant/popperjs + +# with pnpm +pnpm add @vant/popperjs ``` ## Usage diff --git a/packages/vant-stylelint-config/README.md b/packages/vant-stylelint-config/README.md index cadb6e337..8725efa7f 100644 --- a/packages/vant-stylelint-config/README.md +++ b/packages/vant-stylelint-config/README.md @@ -2,16 +2,15 @@ ## Install -#### NPM - ```shell +# with npm npm i @vant/stylelint-config -D -``` -#### YARN +# with yarn +yarn add @vant/stylelint-config -D -```shell -yarn add @vant/stylelint-config --dev +# with pnpm +pnpm add @vant/stylelint-config -D ``` ## Usage diff --git a/packages/vant-touch-emulator/README.md b/packages/vant-touch-emulator/README.md index 2432d34e6..fe53349d3 100644 --- a/packages/vant-touch-emulator/README.md +++ b/packages/vant-touch-emulator/README.md @@ -4,16 +4,15 @@ ## Install -#### NPM - ```shell -npm i @vant/touch-emulator -S -``` +# with npm +npm i @vant/touch-emulator -#### YARN - -```shell +# with yarn yarn add @vant/touch-emulator + +# with pnpm +pnpm add @vant/touch-emulator ``` ## 使用指南 diff --git a/packages/vant-use/README.md b/packages/vant-use/README.md index c235ec312..a277a5e2f 100644 --- a/packages/vant-use/README.md +++ b/packages/vant-use/README.md @@ -4,14 +4,13 @@ Built-in composition APIs of Vant. ## Install -#### NPM - ```shell -npm i @vant/use -S -``` +# with npm +npm i @vant/use -#### YARN - -```shell +# with yarn yarn add @vant/use + +# with pnpm +pnpm add @vant/use ``` diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index bdfbf5180..9f14158b7 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -5,11 +5,17 @@ ### npm ```bash -# Install Vant 2 for Vue 2 project -npm i vant -S +# install Vant 2 for Vue 2 project +npm i vant@2 -# Install Vant 3 for Vue 3 project -npm i vant@next -S +# install Vant 3 for Vue 3 project +npm i vant@3 + +# with yarn +yarn add vant@3 + +# with pnpm +pnpm add vant@3 ``` ### CDN diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index bbebac2a8..cf4b5fef3 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -8,14 +8,20 @@ ### 通过 npm 安装 -在现有项目中使用 Vant 时，可以通过 `npm` 或 `yarn` 进行安装： +在现有项目中使用 Vant 时，可以通过 `npm`、`yarn` 或 `pnpm` 进行安装： ```bash -# Vue 2 项目，安装 Vant 2： -npm i vant -S +# Vue 2 项目，安装 Vant 2 +npm i vant@2 -# Vue 3 项目，安装 Vant 3： -npm i vant@next -S +# Vue 3 项目，安装 Vant 3 +npm i vant@3 + +# 通过 yarn 安装 +yarn add vant@3 + +# 通过 pnpm 安装 +pnpm add vant@3 ``` ### 通过 CDN 安装 diff --git a/packages/vant/src/area/README.md b/packages/vant/src/area/README.md index 8248d8c37..014a1b11a 100644 --- a/packages/vant/src/area/README.md +++ b/packages/vant/src/area/README.md @@ -55,7 +55,14 @@ export default { Vant officially provides a default area data, which can be imported through [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data): ```bash +# with npm +npm i @vant/area-data + +# with yarn yarn add @vant/area-data + +# with pnpm +pnpm add @vant/area-data ``` ```ts diff --git a/packages/vant/src/area/README.zh-CN.md b/packages/vant/src/area/README.zh-CN.md index 894333e94..cc9bc0edc 100644 --- a/packages/vant/src/area/README.zh-CN.md +++ b/packages/vant/src/area/README.zh-CN.md @@ -57,7 +57,14 @@ const areaList = { Vant 官方提供了一份默认的省市区数据，可以通过 [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data) 引入： ```bash +# 通过 npm +npm i @vant/area-data + +# 通过 yarn yarn add @vant/area-data + +# 通过 pnpm +pnpm add @vant/area-data ``` ```ts From d5be481eabd0963cb9cdf552ffa88169afa700dc Mon Sep 17 00:00:00 2001 From: Sepush Date: Sat, 13 Nov 2021 17:08:18 +0800 Subject: [PATCH 12/18] fix(build): use rimraf (#9851) --- package.json | 1 + packages/vant-popperjs/package.json | 2 +- packages/vant-use/package.json | 2 +- pnpm-lock.yaml | 4 +++- 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index df8a60c36..fb494a7b8 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "husky": "^7.0.4", "lint-staged": "^11.2.6", "prettier": "^2.4.1", + "rimraf": "^3.0.2", "stylelint": "^13.13.1" } } diff --git a/packages/vant-popperjs/package.json b/packages/vant-popperjs/package.json index ebd14d8cb..a29052e96 100644 --- a/packages/vant-popperjs/package.json +++ b/packages/vant-popperjs/package.json @@ -14,7 +14,7 @@ "registry": "https://registry.npmjs.org/" }, "scripts": { - "clean": "rm -rf ./dist", + "clean": "rimraf ./dist", "dev": "rollup --config rollup.config.js --watch", "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly", "build:bundle": "rollup --config rollup.config.js", diff --git a/packages/vant-use/package.json b/packages/vant-use/package.json index d1f21283f..6d7a0a862 100644 --- a/packages/vant-use/package.json +++ b/packages/vant-use/package.json @@ -10,7 +10,7 @@ "dist" ], "scripts": { - "clean": "rm -rf ./dist", + "clean": "rimraf ./dist", "dev": "rollup --config rollup.config.js --watch", "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly", "build:bundle": "rollup --config rollup.config.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a752aa50..3e8a7c749 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,7 @@ importers: husky: ^7.0.4 lint-staged: ^11.2.6 prettier: ^2.4.1 + rimraf: ^3.0.2 stylelint: ^13.13.1 devDependencies: '@vant/cli': link:packages/vant-cli @@ -20,6 +21,7 @@ importers: husky: 7.0.4 lint-staged: 11.2.6 prettier: 2.4.1 + rimraf: 3.0.2 stylelint: 13.13.1 packages/create-vant-cli-app: @@ -7302,7 +7304,7 @@ packages: engines: {iojs: '>=1.0.0', node: '>=0.10.0'} /rimraf/3.0.2: - resolution: {integrity: sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=, tarball: rimraf/download/rimraf-3.0.2.tgz?cache=0&sync_timestamp=1632822764504&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Frimraf%2Fdownload%2Frimraf-3.0.2.tgz} + resolution: {integrity: sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=, tarball: rimraf/download/rimraf-3.0.2.tgz} hasBin: true dependencies: glob: 7.2.0 From b8729d8ffb0d49fa21bb40a2667e5aa3280f45f5 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 13 Nov 2021 18:45:07 +0800 Subject: [PATCH 13/18] chore: use useWindowSize in convertVw (#9854) --- README.md | 6 ++++++ README.zh-CN.md | 6 ++++++ packages/vant/docs/markdown/quickstart.en-US.md | 6 ++++++ packages/vant/docs/markdown/quickstart.zh-CN.md | 6 +++++- packages/vant/src/composables/use-route.ts | 10 ++++++---- packages/vant/src/dropdown-item/types.ts | 8 ++------ packages/vant/src/image/Image.tsx | 13 ++++--------- packages/vant/src/utils/format.ts | 14 ++++++++------ 8 files changed, 43 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index d4b7d0d5f..1c310d914 100644 --- a/README.md +++ b/README.md @@ -41,13 +41,19 @@ ## Install +Using `npm` to install: + ```bash # install Vant 2 for Vue 2 project npm i vant@2 # install Vant 3 for Vue 3 project npm i vant@3 +``` +Using `yarn` or `pnpm`: + +```bash # with yarn yarn add vant@3 diff --git a/README.zh-CN.md b/README.zh-CN.md index a599351af..fd07f8e92 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -45,13 +45,19 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源 ## 安装 +在现有项目中使用 Vant 时，可以通过 `npm` 进行安装： + ```bash # Vue 2 项目，安装 Vant 2 npm i vant@2 # Vue 3 项目，安装 Vant 3 npm i vant@3 +``` +当然，你也可以通过 `yarn` 或 `pnpm` 进行安装： + +```bash # 通过 yarn 安装 yarn add vant@3 diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 9f14158b7..1d13d6a0e 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -4,13 +4,19 @@ ### npm +Using `npm` to install: + ```bash # install Vant 2 for Vue 2 project npm i vant@2 # install Vant 3 for Vue 3 project npm i vant@3 +``` +Using `yarn` or `pnpm`: + +```bash # with yarn yarn add vant@3 diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index cf4b5fef3..5086c2867 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -8,7 +8,7 @@ ### 通过 npm 安装 -在现有项目中使用 Vant 时，可以通过 `npm`、`yarn` 或 `pnpm` 进行安装： +在现有项目中使用 Vant 时，可以通过 `npm` 进行安装： ```bash # Vue 2 项目，安装 Vant 2 @@ -16,7 +16,11 @@ npm i vant@2 # Vue 3 项目，安装 Vant 3 npm i vant@3 +``` +当然，你也可以通过 `yarn` 或 `pnpm` 进行安装： + +```bash # 通过 yarn 安装 yarn add vant@3 diff --git a/packages/vant/src/composables/use-route.ts b/packages/vant/src/composables/use-route.ts index 718e9f46d..c37cbda14 100644 --- a/packages/vant/src/composables/use-route.ts +++ b/packages/vant/src/composables/use-route.ts @@ -17,10 +17,12 @@ export const routeProps = { export type RouteProps = ExtractPropTypes; -export function route(vm: ComponentPublicInstance) { - const router = vm.$router; - const { to, url, replace } = vm; - +export function route({ + to, + url, + replace, + $router: router, +}: ComponentPublicInstance) { if (to && router) { router[replace ? 'replace' : 'push'](to); } else if (url) { diff --git a/packages/vant/src/dropdown-item/types.ts b/packages/vant/src/dropdown-item/types.ts index 13636aa2d..314a774a4 100644 --- a/packages/vant/src/dropdown-item/types.ts +++ b/packages/vant/src/dropdown-item/types.ts @@ -14,17 +14,13 @@ export type DropdownItemExpose = { immediate?: boolean; } ) => void; - /** - * @private - */ + /** @private */ state: { showPopup: boolean; transition: boolean; showWrapper: boolean; }; - /** - * @private - */ + /** @private */ renderTitle: () => string | VNode[]; }; diff --git a/packages/vant/src/image/Image.tsx b/packages/vant/src/image/Image.tsx index 8c77b4ee8..2679b4c8c 100644 --- a/packages/vant/src/image/Image.tsx +++ b/packages/vant/src/image/Image.tsx @@ -63,15 +63,10 @@ export default defineComponent({ const { $Lazyload } = getCurrentInstance()!.proxy!; const style = computed(() => { - const style: CSSProperties = {}; - - if (isDef(props.width)) { - style.width = addUnit(props.width); - } - - if (isDef(props.height)) { - style.height = addUnit(props.height); - } + const style: CSSProperties = { + width: addUnit(props.width), + height: addUnit(props.height), + }; if (isDef(props.radius)) { style.overflow = 'hidden'; diff --git a/packages/vant/src/utils/format.ts b/packages/vant/src/utils/format.ts index 7d8877ec4..597caffe8 100644 --- a/packages/vant/src/utils/format.ts +++ b/packages/vant/src/utils/format.ts @@ -1,13 +1,13 @@ import { CSSProperties } from 'vue'; +import { useWindowSize } from '@vant/use'; import { inBrowser } from './basic'; import { isDef, isNumeric } from './validate'; export function addUnit(value?: string | number): string | undefined { - if (!isDef(value)) { - return undefined; + if (isDef(value)) { + return isNumeric(value) ? `${value}px` : String(value); } - - return isNumeric(value) ? `${value}px` : String(value); + return undefined; } export function getSizeStyle( @@ -51,13 +51,15 @@ function convertRem(value: string) { } function convertVw(value: string) { + const { width } = useWindowSize(); value = value.replace(/vw/g, ''); - return (+value * window.innerWidth) / 100; + return (+value * width.value) / 100; } function convertVh(value: string) { + const { height } = useWindowSize(); value = value.replace(/vh/g, ''); - return (+value * window.innerHeight) / 100; + return (+value * height.value) / 100; } export function unitToPx(value: string | number): number { From e5ead06d1222b7974a7bd5e70ce0e31993a29c80 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 13 Nov 2021 19:35:44 +0800 Subject: [PATCH 14/18] fix(Tabbar): before-change not work in route mode (#9856) * fix(Tabbar): before-change not work in route mode * fix: upd * test: add test case --- package.json | 1 + packages/vant/src/tabbar-item/TabbarItem.tsx | 7 ++--- packages/vant/src/tabbar/Tabbar.tsx | 21 +++++++-------- packages/vant/src/tabbar/test/index.spec.tsx | 28 ++++++++++++++++++++ 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index fb494a7b8..7ab3d63b2 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dev": "pnpm dev --dir ./packages/vant", "lint": "pnpm lint --dir ./packages/vant", "test": "pnpm test --dir ./packages/vant", + "test:watch": "pnpm test:watch --dir ./packages/vant", "build": "pnpm build --dir ./packages/vant", "build:site": "pnpm build:site --dir ./packages/vant" }, diff --git a/packages/vant/src/tabbar-item/TabbarItem.tsx b/packages/vant/src/tabbar-item/TabbarItem.tsx index d91f529e2..cb41e8fd7 100644 --- a/packages/vant/src/tabbar-item/TabbarItem.tsx +++ b/packages/vant/src/tabbar-item/TabbarItem.tsx @@ -63,13 +63,14 @@ export default defineComponent({ return pathMatched || nameMatched; } - return (props.name || index.value) === modelValue; + return (props.name ?? index.value) === modelValue; }); const onClick = (event: MouseEvent) => { - parent.setActive(props.name ?? index.value); + if (!active.value) { + parent.setActive(props.name ?? index.value, route); + } emit('click', event); - route(); }; const renderIcon = () => { diff --git a/packages/vant/src/tabbar/Tabbar.tsx b/packages/vant/src/tabbar/Tabbar.tsx index 22d6c5dab..9c3a1c8cf 100644 --- a/packages/vant/src/tabbar/Tabbar.tsx +++ b/packages/vant/src/tabbar/Tabbar.tsx @@ -44,7 +44,7 @@ export type TabbarProps = ExtractPropTypes; export type TabbarProvide = { props: TabbarProps; - setActive: (active: number | string) => void; + setActive: (active: number | string, afterChange: () => void) => void; }; export const TABBAR_KEY: InjectionKey = Symbol(name); @@ -83,16 +83,15 @@ export default defineComponent({ ); }; - const setActive = (active: number | string) => { - if (active !== props.modelValue) { - callInterceptor(props.beforeChange, { - args: [active], - done() { - emit('update:modelValue', active); - emit('change', active); - }, - }); - } + const setActive = (active: number | string, afterChange: () => void) => { + callInterceptor(props.beforeChange, { + args: [active], + done() { + emit('update:modelValue', active); + emit('change', active); + afterChange(); + }, + }); }; linkChildren({ props, setActive }); diff --git a/packages/vant/src/tabbar/test/index.spec.tsx b/packages/vant/src/tabbar/test/index.spec.tsx index 558ba95a6..5f2ae7562 100644 --- a/packages/vant/src/tabbar/test/index.spec.tsx +++ b/packages/vant/src/tabbar/test/index.spec.tsx @@ -69,6 +69,34 @@ test('should match active tab by route path in route mode', async () => { expect(items[3].classes()).not.toContain(activeClass); }); +test('should allow to use before-change prop in route mode', async () => { + const wrapper = mount( + { + render: () => ( + false}> + + Tab + + + Tab + + + ), + }, + { + global: { + mocks: getMockRouter(), + }, + } + ); + + const items = wrapper.findAll('.van-tabbar-item'); + expect(items[0].classes()).toContain(activeClass); + + await items[1].trigger('click'); + expect(items[1].classes()).not.toContain(activeClass); +}); + test('should match active tab by route name in route mode', async () => { const wrapper = mount( { From a7081b7e8020dd0bfdcc2a02c552e3247c16963c Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 13 Nov 2021 19:41:37 +0800 Subject: [PATCH 15/18] chore: update labels in issue template (#9857) --- .github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml | 4 ++-- .../ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml | 4 ++-- .../ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml | 4 ++-- .../template-4-feature-request-vant-cli.zh-CN.yml | 4 ++-- .github/ISSUE_TEMPLATE/template-5-bug-report-vant.en-US.yml | 2 +- .../ISSUE_TEMPLATE/template-6-feature-request-vant.en-US.yml | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml b/.github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml index 887956a43..c778ac024 100644 --- a/.github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml +++ b/.github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml @@ -1,7 +1,7 @@ name: 我要反馈 Vant 的 Bug description: 通过标准模板进行 Bug 反馈。 -title: "[Bug Report] 在此填写标题" -labels: ["🐞 bug"] +title: "[Bug Report] 请在此填写标题" +labels: ["bug: need confirm"] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml b/.github/ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml index f5360f12b..929bc04d5 100644 --- a/.github/ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml +++ b/.github/ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml @@ -1,7 +1,7 @@ name: 我要反馈 Vant Cli 的 Bug description: 通过标准模板进行 Bug 反馈。 -title: "[Bug Report] 在此填写标题" -labels: ["🐞 bug", "cli"] +title: "[Bug Report] 请在此填写标题" +labels: ["bug: need confirm", "cli"] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml b/.github/ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml index a79bfebe3..45b8ce62b 100644 --- a/.github/ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml +++ b/.github/ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml @@ -1,7 +1,7 @@ name: 我想要一个 Vant 的新功能 description: 通过标准模板描述一下你的功能需求。 -title: "[Feature Request] 在此填写标题" -labels: ["💡 feature"] +title: "[Feature Request] 请在此填写标题" +labels: ["feature: need confirm"] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/template-4-feature-request-vant-cli.zh-CN.yml b/.github/ISSUE_TEMPLATE/template-4-feature-request-vant-cli.zh-CN.yml index 1242c1983..9b4999ed7 100644 --- a/.github/ISSUE_TEMPLATE/template-4-feature-request-vant-cli.zh-CN.yml +++ b/.github/ISSUE_TEMPLATE/template-4-feature-request-vant-cli.zh-CN.yml @@ -1,7 +1,7 @@ name: 我想要一个 Vant Cli 的新功能 description: 通过标准模板描述一下你的功能需求。 -title: "[Feature Request] 在此填写标题" -labels: ["💡 feature", "cli"] +title: "[Feature Request] 请在此填写标题" +labels: ["feature: need confirm", "cli"] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/template-5-bug-report-vant.en-US.yml b/.github/ISSUE_TEMPLATE/template-5-bug-report-vant.en-US.yml index 61220c006..669444b35 100644 --- a/.github/ISSUE_TEMPLATE/template-5-bug-report-vant.en-US.yml +++ b/.github/ISSUE_TEMPLATE/template-5-bug-report-vant.en-US.yml @@ -1,7 +1,7 @@ name: Bug Report description: Use issue template to report a bug. title: "[Bug Report] Title" -labels: ["🐞 bug"] +labels: ["bug: need confirm"] body: - type: input id: reproduce diff --git a/.github/ISSUE_TEMPLATE/template-6-feature-request-vant.en-US.yml b/.github/ISSUE_TEMPLATE/template-6-feature-request-vant.en-US.yml index a9e8d128e..036364274 100644 --- a/.github/ISSUE_TEMPLATE/template-6-feature-request-vant.en-US.yml +++ b/.github/ISSUE_TEMPLATE/template-6-feature-request-vant.en-US.yml @@ -1,7 +1,7 @@ name: Feature Request description: Use issue template to request a new feature. title: "[Feature Request] Title" -labels: ["💡 feature"] +labels: ["feature: need confirm"] body: - type: textarea id: description From 1b6bae671dad6ecd34548a97905ab14afcc08428 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 14 Nov 2021 16:57:12 +0800 Subject: [PATCH 16/18] chore(AddressEdit): using Form component (#9858) --- packages/vant/package.json | 1 + .../vant/src/address-edit/AddressEdit.tsx | 163 +++++++----------- .../src/address-edit/AddressEditDetail.tsx | 14 +- .../test/__snapshots__/demo.spec.ts.snap | 6 +- .../test/__snapshots__/index.spec.js.snap | 110 +----------- .../vant/src/address-edit/test/index.spec.js | 44 ++--- pnpm-lock.yaml | 10 ++ 7 files changed, 107 insertions(+), 241 deletions(-) diff --git a/packages/vant/package.json b/packages/vant/package.json index 840e3ab03..69b7aa5ba 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -56,6 +56,7 @@ "@vant/cli": "^4.0.0-beta.5", "@vue/compiler-sfc": "^3.2.20", "@vue/runtime-core": "^3.2.20", + "@vue/test-utils": "^2.0.0-rc.16", "typescript": "4.x", "vue": "^3.2.20", "vue-router": "^4.0.12" diff --git a/packages/vant/src/address-edit/AddressEdit.tsx b/packages/vant/src/address-edit/AddressEdit.tsx index d6dcc3cac..69229bfb2 100644 --- a/packages/vant/src/address-edit/AddressEdit.tsx +++ b/packages/vant/src/address-edit/AddressEdit.tsx @@ -27,7 +27,8 @@ import { useExpose } from '../composables/use-expose'; // Components import { Area, AreaList, AreaColumnOption, AreaInstance } from '../area'; import { Cell } from '../cell'; -import { Field } from '../field'; +import { Form } from '../form'; +import { Field, FieldRule } from '../field'; import { Popup } from '../popup'; import { Toast } from '../toast'; import { Button } from '../button'; @@ -111,25 +112,16 @@ export default defineComponent({ setup(props, { emit, slots }) { const areaRef = ref(); - const state = reactive({ - data: {} as AddressEditInfo, - showAreaPopup: false, - detailFocused: false, - errorInfo: { - tel: '', - name: '', - areaCode: '', - postalCode: '', - addressDetail: '', - } as Record, - }); + const data = reactive({} as AddressEditInfo); + const showAreaPopup = ref(false); + const detailFocused = ref(false); const areaListLoaded = computed( () => isObject(props.areaList) && Object.keys(props.areaList).length ); const areaText = computed(() => { - const { country, province, city, county, areaCode } = state.data; + const { country, province, city, county, areaCode } = data; if (areaCode) { const arr = [country, province, city, county]; if (province && province === city) { @@ -142,7 +134,7 @@ export default defineComponent({ // hide bottom field when use search && detail get focused const hideBottomFields = computed( - () => props.searchResult?.length && state.detailFocused + () => props.searchResult?.length && detailFocused.value ); const assignAreaValues = () => { @@ -150,70 +142,52 @@ export default defineComponent({ const detail: Record = areaRef.value.getArea(); detail.areaCode = detail.code; delete detail.code; - extend(state.data, detail); + extend(data, detail); } }; const onFocus = (key: string) => { - state.errorInfo[key] = ''; - state.detailFocused = key === 'addressDetail'; + detailFocused.value = key === 'addressDetail'; emit('focus', key); }; - const getErrorMessage = (key: string) => { - const value = String((state.data as any)[key] || '').trim(); + const rules = computed>(() => { + const { validator, telValidator, postalValidator } = props; - if (props.validator) { - const message = props.validator(key, value); - if (message) { - return message; - } - } - - switch (key) { - case 'name': - return value ? '' : t('nameEmpty'); - case 'tel': - return props.telValidator(value) ? '' : t('telInvalid'); - case 'areaCode': - return value ? '' : t('areaEmpty'); - case 'addressDetail': - return value ? '' : t('addressEmpty'); - case 'postalCode': - return value && !props.postalValidator(value) ? t('postalEmpty') : ''; - } - }; - - const onSave = () => { - const items = ['name', 'tel']; - - if (props.showArea) { - items.push('areaCode'); - } - - if (props.showDetail) { - items.push('addressDetail'); - } - - if (props.showPostal) { - items.push('postalCode'); - } - - const isValid = items.every((item) => { - const msg = getErrorMessage(item); - if (msg) { - state.errorInfo[item] = msg; - } - return !msg; + const makeRule = (name: string, emptyMessage: string): FieldRule => ({ + validator: (value) => { + if (validator) { + const message = validator(name, value); + if (message) { + return message; + } + } + if (!value) { + return emptyMessage; + } + return true; + }, }); - if (isValid && !props.isSaving) { - emit('save', state.data); - } - }; + return { + name: [makeRule('name', t('nameEmpty'))], + tel: [ + makeRule('tel', t('telInvalid')), + { validator: telValidator, message: t('telInvalid') }, + ], + areaCode: [makeRule('areaCode', t('areaEmpty'))], + addressDetail: [makeRule('addressDetail', t('addressEmpty'))], + postalCode: [ + makeRule('addressDetail', t('postalEmpty')), + { validator: postalValidator, message: t('postalEmpty') }, + ], + }; + }); + + const onSave = () => emit('save', data); const onChangeDetail = (val: string) => { - state.data.addressDetail = val; + data.addressDetail = val; emit('change-detail', val); }; @@ -222,22 +196,21 @@ export default defineComponent({ if (values.some((value) => !value.code)) { Toast(t('areaEmpty')); - return; + } else { + showAreaPopup.value = false; + assignAreaValues(); + emit('change-area', values); } - - state.showAreaPopup = false; - assignAreaValues(); - emit('change-area', values); }; - const onDelete = () => emit('delete', state.data); + const onDelete = () => emit('delete', data); // get values of area component - const getArea = () => (areaRef.value ? areaRef.value.getValues() : []); + const getArea = () => areaRef.value?.getValues() || []; // set area code to area component const setAreaCode = (code?: string) => { - state.data.areaCode = code || ''; + data.areaCode = code || ''; if (code) { nextTick(assignAreaValues); @@ -247,12 +220,12 @@ export default defineComponent({ const onDetailBlur = () => { // await for click search event setTimeout(() => { - state.detailFocused = false; + detailFocused.value = false; }); }; const setAddressDetail = (value: string) => { - state.data.addressDetail = value; + data.addressDetail = value; }; const renderSetDefaultCell = () => { @@ -260,7 +233,7 @@ export default defineComponent({ const slots = { 'right-icon': () => ( emit('change-default', event)} /> @@ -277,8 +250,6 @@ export default defineComponent({ /> ); } - - return null; }; useExpose({ @@ -289,13 +260,13 @@ export default defineComponent({ watch( () => props.areaList, - () => setAreaCode(state.data.areaCode) + () => setAreaCode(data.areaCode) ); watch( () => props.addressInfo, (value) => { - state.data = extend({}, DEFAULT_DATA, value); + extend(data, DEFAULT_DATA, value); setAreaCode(value.areaCode); }, { @@ -305,18 +276,17 @@ export default defineComponent({ ); return () => { - const { data, errorInfo } = state; const { disableArea } = props; return ( -
+
onFocus('name')} /> onFocus('tel')} /> onFocus('areaCode')} onClick={() => { emit('click-area'); - state.showAreaPopup = !disableArea; + showAreaPopup.value = !disableArea; }} /> onFocus('addressDetail')} @@ -362,10 +332,10 @@ export default defineComponent({ v-show={!hideBottomFields.value} v-model={data.postalCode} type="tel" + rules={rules.value.postalCode} label={t('postal')} maxlength="6" placeholder={t('postal')} - errorMessage={errorInfo.postalCode} onFocus={() => onFocus('postalCode')} /> )} @@ -380,6 +350,7 @@ export default defineComponent({ text={props.saveButtonText || t('save')} class={bem('button')} loading={props.isSaving} + nativeType="submit" onClick={onSave} /> {props.showDelete && ( @@ -394,7 +365,7 @@ export default defineComponent({ )}
{ - state.showAreaPopup = false; + showAreaPopup.value = false; }} /> -
+ ); }; }, diff --git a/packages/vant/src/address-edit/AddressEditDetail.tsx b/packages/vant/src/address-edit/AddressEditDetail.tsx index 3401e5d1b..f048ed0b5 100644 --- a/packages/vant/src/address-edit/AddressEditDetail.tsx +++ b/packages/vant/src/address-edit/AddressEditDetail.tsx @@ -9,7 +9,7 @@ import { Field } from '../field'; // Types import type { AddressEditSearchItem } from './types'; -import type { FieldInstance } from '../field/types'; +import type { FieldRule, FieldInstance } from '../field/types'; const [name, bem, t] = createNamespace('address-edit-detail'); @@ -18,12 +18,12 @@ export default defineComponent({ props: { show: Boolean, + rows: numericProp, value: String, + rules: Array as PropType, focused: Boolean, - detailRows: numericProp, + maxlength: numericProp, searchResult: Array as PropType, - errorMessage: String, - detailMaxlength: numericProp, showSearchResult: Boolean, }, @@ -86,14 +86,14 @@ export default defineComponent({ clearable ref={field} class={bem()} - rows={props.detailRows} + rows={props.rows} type="textarea" + rules={props.rules} label={t('label')} border={!showSearchResult()} - maxlength={props.detailMaxlength} + maxlength={props.maxlength} modelValue={props.value} placeholder={t('placeholder')} - errorMessage={props.errorMessage} onBlur={onBlur} onFocus={onFocus} onUpdate:modelValue={onInput} diff --git a/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap index 3a44405ce..aabd05ff7 100644 --- a/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap @@ -2,7 +2,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -104,7 +104,7 @@ exports[`should render demo and match snapshot 1`] = `
-
-
+
`; diff --git a/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap b/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap index ef5b38f22..279729d12 100644 --- a/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap +++ b/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap @@ -7,7 +7,7 @@ exports[`should allow to custom validator with validator prop 1`] = ` `; exports[`should render AddressEdit correctly 1`] = ` -
+
@@ -78,7 +78,7 @@ exports[`should render AddressEdit correctly 1`] = `
-
-
+
`; exports[`should render AddressEdit with props correctly 1`] = ` -
+
@@ -193,7 +193,7 @@ exports[`should render AddressEdit with props correctly 1`] = `
-
-
+
`; exports[`should valid address detail and render error message correctly 1`] = ` @@ -229,26 +229,6 @@ exports[`should valid address detail and render error message correctly 1`] = `
`; -exports[`should valid address detail and render error message correctly 2`] = ` -
-
- -
-
-
- -
-
-
-`; - exports[`should valid area code and render error message correctly 1`] = `
`; -exports[`should valid area code and render error message correctly 2`] = ` -
-
- -
-
-
- -
-
- - -
-`; - exports[`should valid name and render error message correctly 1`] = `
@@ -321,24 +277,6 @@ exports[`should valid name and render error message correctly 1`] = `
`; -exports[`should valid name and render error message correctly 2`] = ` -
-
- -
-
-
- -
-
-
-`; - exports[`should valid postal code and render error message correctly 1`] = `
@@ -360,24 +298,6 @@ exports[`should valid postal code and render error message correctly 1`] = `
`; -exports[`should valid postal code and render error message correctly 2`] = ` -
-
- -
-
-
- -
-
-
-`; - exports[`should valid tel and render error message correctly 1`] = `
@@ -398,21 +318,3 @@ exports[`should valid tel and render error message correctly 1`] = `
`; - -exports[`should valid tel and render error message correctly 2`] = ` -
-
- -
-
-
- -
-
-
-`; diff --git a/packages/vant/src/address-edit/test/index.spec.js b/packages/vant/src/address-edit/test/index.spec.js index 21d42db66..492718977 100644 --- a/packages/vant/src/address-edit/test/index.spec.js +++ b/packages/vant/src/address-edit/test/index.spec.js @@ -1,6 +1,7 @@ import { AddressEdit } from '..'; import { areaList } from '../../area/demo/area-simple'; import { mount, later, trigger } from '../../../test'; +import { submitForm } from '../../form/test/shared'; const defaultAddressInfo = { name: '测试', @@ -27,12 +28,10 @@ const createComponent = (addressInfo = {}) => { }, }); - const button = wrapper.find('.van-button'); const fields = wrapper.findAll('.van-field'); return { vm: wrapper.vm, fields, - button, wrapper, }; }; @@ -55,13 +54,6 @@ test('should render AddressEdit with props correctly', () => { expect(wrapper.html()).toMatchSnapshot(); }); -// test('set-default', () => { -// const { wrapper } = createComponent(); -// wrapper.find('.van-switch').trigger('click'); - -// expect(wrapper.html()).toMatchSnapshot(); -// }); - test('should allow to custom validator with validator prop', async () => { const wrapper = mount(AddressEdit, { props: { @@ -70,63 +62,53 @@ test('should allow to custom validator with validator prop', async () => { }, }); - const button = wrapper.find('.van-button'); - await button.trigger('click'); + await submitForm(wrapper); expect(wrapper.find('.van-field__error-message').html()).toMatchSnapshot(); }); test('should valid name and render error message correctly', async () => { - const { fields, button } = createComponent({ + const { fields, wrapper } = createComponent({ name: '', }); - await button.trigger('click'); - expect(fields[0].html()).toMatchSnapshot(); - await fields[0].find('input').trigger('focus'); + await submitForm(wrapper); expect(fields[0].html()).toMatchSnapshot(); }); test('should valid tel and render error message correctly', async () => { - const { fields, button } = createComponent({ + const { fields, wrapper } = createComponent({ tel: '', }); - await button.trigger('click'); - expect(fields[1].html()).toMatchSnapshot(); - await fields[1].find('input').trigger('focus'); + await submitForm(wrapper); expect(fields[1].html()).toMatchSnapshot(); }); test('should valid area code and render error message correctly', async () => { - const { fields, button } = createComponent({ + const { fields, wrapper } = createComponent({ areaCode: '', }); - await button.trigger('click'); - expect(fields[2].html()).toMatchSnapshot(); - await fields[2].find('input').trigger('focus'); + await submitForm(wrapper); expect(fields[2].html()).toMatchSnapshot(); }); test('should valid address detail and render error message correctly', async () => { - const { fields, button } = createComponent({ + const { fields, wrapper } = createComponent({ addressDetail: '', }); - await button.trigger('click'); - expect(fields[3].html()).toMatchSnapshot(); - await fields[3].find('textarea').trigger('focus'); + await submitForm(wrapper); + await later(); expect(fields[3].html()).toMatchSnapshot(); }); test('should valid postal code and render error message correctly', async () => { - const { fields, button } = createComponent({ + const { fields, wrapper } = createComponent({ postalCode: '123', }); - await button.trigger('click'); - expect(fields[4].html()).toMatchSnapshot(); - await fields[4].find('input').trigger('focus'); + await submitForm(wrapper); expect(fields[4].html()).toMatchSnapshot(); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e8a7c749..8767d7c8b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,7 @@ importers: '@vant/use': ^1.3.3 '@vue/compiler-sfc': ^3.2.20 '@vue/runtime-core': ^3.2.20 + '@vue/test-utils': ^2.0.0-rc.16 typescript: 4.x vue: ^3.2.20 vue-router: ^4.0.12 @@ -68,6 +69,7 @@ importers: '@vant/cli': link:../vant-cli '@vue/compiler-sfc': 3.2.21 '@vue/runtime-core': 3.2.21 + '@vue/test-utils': 2.0.0-rc.16_vue@3.2.21 typescript: 4.4.4 vue: 3.2.21 vue-router: 4.0.12_vue@3.2.21 @@ -2477,6 +2479,14 @@ packages: vue: 3.2.21 dev: false + /@vue/test-utils/2.0.0-rc.16_vue@3.2.21: + resolution: {integrity: sha1-WTgPAocPhWrAAqKcAmgdPz/Lr+s=, tarball: '@vue/test-utils/download/@vue/test-utils-2.0.0-rc.16.tgz'} + peerDependencies: + vue: ^3.0.1 + dependencies: + vue: 3.2.21 + dev: true + /JSONStream/1.3.5: resolution: {integrity: sha1-MgjB8I06TZkmGrZPkjArwV4RHKA=, tarball: JSONStream/download/JSONStream-1.3.5.tgz} hasBin: true From 3dcd8c7693df7500e7e8a042647cfe532a974b18 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 14 Nov 2021 17:11:27 +0800 Subject: [PATCH 17/18] chore(@vant/cli): remove @vue/test-utils from deps (#9859) --- packages/vant-cli/changelog.md | 2 ++ packages/vant-cli/package.json | 1 - packages/vant/package.json | 2 +- pnpm-lock.yaml | 12 +----------- 4 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md index 6ff316523..48a42ef51 100644 --- a/packages/vant-cli/changelog.md +++ b/packages/vant-cli/changelog.md @@ -36,6 +36,8 @@ yarn add sass ``` +- 为了避免 Phantom dependency，不再默认依赖 `@vue/test-utils`，使用时需要手动安装 + ### Features - 新增 site.htmlMeta 配置项 diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index f1730b44b..1378f40b4 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -55,7 +55,6 @@ "@vitejs/plugin-vue": "^1.9.4", "@vitejs/plugin-vue-jsx": "^1.2.0", "@vue/babel-plugin-jsx": "^1.1.1", - "@vue/test-utils": "2.0.0-rc.14", "autoprefixer": "^10.4.0", "babel-jest": "^27.3.1", "chalk": "^4.1.2", diff --git a/packages/vant/package.json b/packages/vant/package.json index 69b7aa5ba..cb106e727 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -53,7 +53,7 @@ }, "devDependencies": { "@vant/area-data": "^1.1.3", - "@vant/cli": "^4.0.0-beta.5", + "@vant/cli": "workspace:*", "@vue/compiler-sfc": "^3.2.20", "@vue/runtime-core": "^3.2.20", "@vue/test-utils": "^2.0.0-rc.16", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8767d7c8b..3a9026a05 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,7 +50,7 @@ importers: packages/vant: specifiers: '@vant/area-data': ^1.1.3 - '@vant/cli': ^4.0.0-beta.5 + '@vant/cli': workspace:* '@vant/icons': ^1.7.1 '@vant/popperjs': ^1.1.0 '@vant/use': ^1.3.3 @@ -97,7 +97,6 @@ importers: '@vitejs/plugin-vue-jsx': ^1.2.0 '@vue/babel-plugin-jsx': ^1.1.1 '@vue/compiler-sfc': ^3.2.20 - '@vue/test-utils': 2.0.0-rc.14 autoprefixer: ^10.4.0 babel-jest: ^27.3.1 chalk: ^4.1.2 @@ -150,7 +149,6 @@ importers: '@vitejs/plugin-vue': 1.9.4_vite@2.6.13 '@vitejs/plugin-vue-jsx': 1.2.0 '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.16.0 - '@vue/test-utils': 2.0.0-rc.14_vue@3.2.21 autoprefixer: 10.4.0_postcss@8.3.11 babel-jest: 27.3.1_@babel+core@7.16.0 chalk: 4.1.2 @@ -2471,14 +2469,6 @@ packages: resolution: {integrity: sha1-TNgMDmLPZaetqyRJ6GtvDLM6Ews=, tarball: '@vue/shared/download/@vue/shared-3.2.21.tgz'} dev: true - /@vue/test-utils/2.0.0-rc.14_vue@3.2.21: - resolution: {integrity: sha1-naG+ew42X/X5RWd9oXv2yKeoOr0=, tarball: '@vue/test-utils/download/@vue/test-utils-2.0.0-rc.14.tgz'} - peerDependencies: - vue: ^3.0.1 - dependencies: - vue: 3.2.21 - dev: false - /@vue/test-utils/2.0.0-rc.16_vue@3.2.21: resolution: {integrity: sha1-WTgPAocPhWrAAqKcAmgdPz/Lr+s=, tarball: '@vue/test-utils/download/@vue/test-utils-2.0.0-rc.16.tgz'} peerDependencies: From db975819697a8fddf1dd8ff5652525704fcd5380 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 15 Nov 2021 10:46:34 +0800 Subject: [PATCH 18/18] fix(Field): should not trigger validation after blurring readonly input (#9862) --- packages/vant/src/field/Field.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 59882e305..8f0913ee7 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -310,13 +310,16 @@ export default defineComponent({ nextTick(adjustTextareaSize); // readonly not work in legacy mobile safari - const readonly = getProp('readonly'); - if (readonly) { + if (getProp('readonly')) { blur(); } }; const onBlur = (event: Event) => { + if (getProp('readonly')) { + return; + } + state.focused = false; updateValue(getModelValue(), 'onBlur'); emit('blur', event);