diff --git a/.github/renovate.json5 b/.github/renovate.json5 index a6fbc54820a..92851369c78 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -1,11 +1,14 @@ { "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": ["config:recommended"], + "extends": ["config:recommended", "schedule:weekly"], + "dependencyDashboard": false, "packageRules": [ // Use chore as semantic commit type for commit messages { "matchPackagePatterns": ["*"], - "semanticCommitType": "chore" + "semanticCommitType": "chore", + // always bump package.json + "rangeStrategy": "bump" }, { "groupName": "rsbuild", @@ -22,6 +25,12 @@ "packagePatterns": ["^@types/"], "groupSlug": "types" }, + { + "groupName": "all patch dependencies", + "groupSlug": "all-patch", + "matchPackagePatterns": ["*"], + "matchUpdateTypes": ["patch"] + }, // manually update peer dependencies { "depTypeList": ["peerDependencies"], diff --git a/.github/workflows/deploy-v4-site.yml b/.github/workflows/deploy-v4-site.yml index 763fd4c6137..22cb5a78e89 100644 --- a/.github/workflows/deploy-v4-site.yml +++ b/.github/workflows/deploy-v4-site.yml @@ -33,7 +33,7 @@ jobs: run: npm run build:site - name: Deploy for Gitee 🚀 - uses: JamesIves/github-pages-deploy-action@v4.4.1 + uses: JamesIves/github-pages-deploy-action@v4.6.0 with: branch: gh-pages folder: packages/vant/site-dist @@ -57,9 +57,9 @@ jobs: vant-use/**/* - name: Deploy for GitHub 🚀 - uses: JamesIves/github-pages-deploy-action@v4.4.1 + uses: JamesIves/github-pages-deploy-action@v4.6.0 with: - branch: main + branch: gh-pages folder: packages/vant/site-dist token: ${{ secrets.VANT_UI_TOKEN }} repository-name: vant-ui/vant-ui.github.io diff --git a/README.md b/README.md index a80eedffaef..6f6f09fdd27 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3) | [vant-playground](https://github.com/LadyChatterleyLover/vant-playground) | Vant Playground | | [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground | | [vue3-h5-template](https://github.com/yulimchen/vue3-h5-template) | Mobile project template based on Vant | -| [vue3-vant-mobile](https://github.com/CharleeWa/vue3-vant-mobile) | Mobile project template based on Vant | +| [vue3-vant-mobile](https://github.com/easy-temps/vue3-vant-mobile) | Mobile project template based on Vant | | [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | A VS Code extension that provides better intellisense to Vant developers | ## Links diff --git a/README.zh-CN.md b/README.zh-CN.md index a1829ec9dec..4fe3244139b 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -134,7 +134,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一 | [vant-playground](https://github.com/LadyChatterleyLover/vant-playground) | Vant Playground | | [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground | | [vue3-h5-template](https://github.com/yulimchen/vue3-h5-template) | 基于 Vant 的移动端项目模板 | -| [vue3-vant-mobile](https://github.com/CharleeWa/vue3-vant-mobile) | 基于 Vant 的移动端项目模板 | +| [vue3-vant-mobile](https://github.com/easy-temps/vue3-vant-mobile) | 基于 Vant 的移动端项目模板 | | [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | VS Code 扩展,为 Vant 开发者提供更好的智能感知 | ## 链接 diff --git a/package.json b/package.json index 90420c897a5..13e9729ca3a 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,15 @@ "*.{ts,tsx,js,vue}": "eslint --fix" }, "engines": { - "pnpm": ">= 8.8.0" + "pnpm": ">= 9.0.0" }, - "packageManager": "pnpm@8.14.1", + "packageManager": "pnpm@9.0.4", "devDependencies": { "@vant/cli": "workspace:*", "@vant/eslint-config": "workspace:*", - "eslint": "^8.46.0", - "husky": "^8.0.1", + "eslint": "^8.57.0", + "husky": "^8.0.3", "nano-staged": "^0.8.0", - "prettier": "^3.0.0" + "prettier": "^3.2.5" } } diff --git a/packages/create-vant-cli-app/generators/vue3/package.json.tpl b/packages/create-vant-cli-app/generators/vue3/package.json.tpl index dfba98500fd..3cba137fdfb 100644 --- a/packages/create-vant-cli-app/generators/vue3/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue3/package.json.tpl @@ -13,13 +13,9 @@ "scripts": { "dev": "vant-cli dev", "lint": "vant-cli lint", - "test": "vant-cli test", "build": "vant-cli build", "build:site": "vant-cli build-site", - "release": "vant-cli release --tag next", - "release:site": "pnpm build:site && npx gh-pages -d site-dist", - "test:watch": "vant-cli test --watch", - "test:coverage": "open test/coverage/index.html" + "release:site": "pnpm build:site && npx gh-pages -d site-dist" }, "author": "", "nano-staged": { @@ -31,7 +27,7 @@ "vue": "^3.3.4" }, "devDependencies": { - "@vant/cli": "^6.0.0", + "@vant/cli": "^7.0.0", "vue": "^3.3.4", "sass": "^1.49.7" }, diff --git a/packages/create-vant-cli-app/package.json b/packages/create-vant-cli-app/package.json index 35a290904af..55ae8f1b806 100644 --- a/packages/create-vant-cli-app/package.json +++ b/packages/create-vant-cli-app/package.json @@ -1,6 +1,6 @@ { "name": "create-vant-cli-app", - "version": "2.2.1", + "version": "3.0.0", "description": "Create Vant CLI App", "main": "lib/index.js", "bin": { @@ -31,15 +31,15 @@ "author": "chenjiahan", "license": "MIT", "devDependencies": { - "@types/fs-extra": "^11.0.1", - "rimraf": "^5.0.0", + "@types/fs-extra": "^11.0.4", + "rimraf": "^5.0.5", "typescript": "^5.0.4" }, "dependencies": { - "rslog": "^1.1.0", - "fast-glob": "^3.2.11", - "fs-extra": "^11.1.0", - "enquirer": "2.3.6", + "rslog": "^1.2.1", + "fast-glob": "^3.3.2", + "fs-extra": "^11.2.0", + "enquirer": "2.4.1", "picocolors": "^1.0.0" } } diff --git a/packages/create-vant-cli-app/src/generator.ts b/packages/create-vant-cli-app/src/generator.ts index 0545ada36a4..eddba11d1c3 100644 --- a/packages/create-vant-cli-app/src/generator.ts +++ b/packages/create-vant-cli-app/src/generator.ts @@ -12,21 +12,21 @@ const PROMPTS = [ message: 'Select Vue version', type: 'select', choices: [ - { - name: 'vue2', - message: 'Vue 2', - }, { name: 'vue3', message: 'Vue 3', }, + { + name: 'vue2', + message: 'Vue 2', + }, ], }, { name: 'preprocessor', message: 'Select css preprocessor', type: 'select', - choices: ['Less', 'Sass'], + choices: ['Sass', 'Less'], }, ]; diff --git a/packages/vant-area-data/package.json b/packages/vant-area-data/package.json index e9cb4495f63..b506d474984 100644 --- a/packages/vant-area-data/package.json +++ b/packages/vant-area-data/package.json @@ -38,8 +38,8 @@ "author": "chenjiahan", "license": "MIT", "devDependencies": { - "esbuild": "^0.19.10", - "rimraf": "^5.0.0", + "esbuild": "^0.20.2", + "rimraf": "^5.0.5", "typescript": "^5.0.4" } } diff --git a/packages/vant-auto-import-resolver/README.md b/packages/vant-auto-import-resolver/README.md index 0d013fe8f08..42e20caa17d 100644 --- a/packages/vant-auto-import-resolver/README.md +++ b/packages/vant-auto-import-resolver/README.md @@ -14,16 +14,16 @@ English | [简体中文](./README.zh-CN.md) ```shell # via npm -npm i @vant/auto-import-resolver unplugin-vue-components -D +npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # via yarn -yarn add @vant/auto-import-resolver unplugin-vue-components -D +yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # via pnpm -pnpm add @vant/auto-import-resolver unplugin-vue-components -D +pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # via Bun -bun add @vant/auto-import-resolver unplugin-vue-components -D +bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D ``` ## Usage @@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D ```ts // vite.config.ts +import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default defineConfig({ plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -48,11 +52,15 @@ export default defineConfig({ ```ts // rollup.config.js +import AutoImport from 'unplugin-auto-import/rollup'; import Components from 'unplugin-vue-components/rollup'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -64,11 +72,15 @@ export default { ```ts // webpack.config.js +import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; import { VantResolver } from '@vant/auto-import-resolver'; module.exports = { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -80,11 +92,15 @@ module.exports = { ```ts // rspack.config.js +import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; import { VantResolver } from '@vant/auto-import-resolver'; module.exports = { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -96,12 +112,16 @@ module.exports = { ```ts // vue.config.js +import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; import { VantResolver } from '@vant/auto-import-resolver'; module.exports = { configureWebpack: { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -115,11 +135,15 @@ module.exports = { ```ts // esbuild.config.js import { build } from 'esbuild'; +import AutoImport from 'unplugin-auto-import/esbuild'; import Components from 'unplugin-vue-components/esbuild'; import { VantResolver } from '@vant/auto-import-resolver'; build({ plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), diff --git a/packages/vant-auto-import-resolver/README.zh-CN.md b/packages/vant-auto-import-resolver/README.zh-CN.md index cf10550aafe..f8abe675f09 100644 --- a/packages/vant-auto-import-resolver/README.zh-CN.md +++ b/packages/vant-auto-import-resolver/README.zh-CN.md @@ -14,16 +14,16 @@ ```shell # via npm -npm i @vant/auto-import-resolver unplugin-vue-components -D +npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # via yarn -yarn add @vant/auto-import-resolver unplugin-vue-components -D +yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # via pnpm -pnpm add @vant/auto-import-resolver unplugin-vue-components -D +pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # via Bun -bun add @vant/auto-import-resolver unplugin-vue-components -D +bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D ``` ## 使用 @@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D ```ts // vite.config.ts +import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default defineConfig({ plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -48,11 +52,15 @@ export default defineConfig({ ```ts // rollup.config.js +import AutoImport from 'unplugin-auto-import/rollup'; import Components from 'unplugin-vue-components/rollup'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -64,11 +72,15 @@ export default { ```ts // webpack.config.js +import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; import { VantResolver } from '@vant/auto-import-resolver'; module.exports = { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -80,11 +92,15 @@ module.exports = { ```ts // rspack.config.js +import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; import { VantResolver } from '@vant/auto-import-resolver'; module.exports = { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -96,12 +112,16 @@ module.exports = { ```ts // vue.config.js +import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; import { VantResolver } from '@vant/auto-import-resolver'; module.exports = { configureWebpack: { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -115,11 +135,15 @@ module.exports = { ```ts // esbuild.config.js import { build } from 'esbuild'; +import AutoImport from 'unplugin-auto-import/esbuild'; import Components from 'unplugin-vue-components/esbuild'; import { VantResolver } from '@vant/auto-import-resolver'; build({ plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), diff --git a/packages/vant-auto-import-resolver/package.json b/packages/vant-auto-import-resolver/package.json index 47ed41fa92a..45da67059b8 100644 --- a/packages/vant-auto-import-resolver/package.json +++ b/packages/vant-auto-import-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@vant/auto-import-resolver", - "version": "1.0.2", + "version": "1.1.0", "description": "Vant auto import resolver based on unplugin-vue-components", "main": "dist/index.cjs.js", "module": "dist/index.esm.mjs", @@ -34,11 +34,12 @@ "url": "https://github.com/vant-ui/vant.git", "directory": "packages/vant-auto-import-resolver" }, + "homepage": "https://github.com/youzan/vant/blob/main/packages/vant-auto-import-resolver/README.md", "bugs": "https://github.com/vant-ui/vant/issues", "author": "chenjiahan", "license": "MIT", "devDependencies": { - "rimraf": "^5.0.0", + "rimraf": "^5.0.5", "typescript": "^5.0.4" } } diff --git a/packages/vant-auto-import-resolver/src/index.ts b/packages/vant-auto-import-resolver/src/index.ts index 46ce1f0e70a..cb540d28184 100644 --- a/packages/vant-auto-import-resolver/src/index.ts +++ b/packages/vant-auto-import-resolver/src/index.ts @@ -56,8 +56,48 @@ function getSideEffects(dirName: string, options: VantResolverOptions) { return `vant/${moduleType}/${dirName}/style/index`; } +function getAPIMap() { + const apiMap = new Map(); + + const api = { + dialog: [ + 'showDialog', + 'closeDialog', + 'showConfirmDialog', + 'setDialogDefaultOptions', + 'resetDialogDefaultOptions', + ], + imagePreview: ['showImagePreview'], + notify: [ + 'showNotify', + 'closeNotify', + 'setNotifyDefaultOptions', + 'resetNotifyDefaultOptions', + ], + toast: [ + 'showToast', + 'closeToast', + 'showFailToast', + 'showLoadingToast', + 'showSuccessToast', + 'allowMultipleToast', + 'setToastDefaultOptions', + 'resetToastDefaultOptions', + ], + }; + + Object.entries(api).forEach(([importName, apiList]) => { + apiList.forEach((api) => { + apiMap.set(api, importName); + }); + }); + + return apiMap; +} + export function VantResolver(options: VantResolverOptions = {}) { const moduleType = getModuleType(options); + const apiMap = getAPIMap(); return { type: 'component' as const, @@ -71,6 +111,16 @@ export function VantResolver(options: VantResolverOptions = {}) { sideEffects: getSideEffects(kebabCase(partialName), options), }; } + + // import API + if (apiMap.has(name)) { + const partialName = apiMap.get(name)!; + return { + name, + from: `vant/${moduleType}`, + sideEffects: getSideEffects(kebabCase(partialName), options), + }; + } }, }; } diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md index cfa06f31a88..7429ab678a7 100644 --- a/packages/vant-cli/changelog.md +++ b/packages/vant-cli/changelog.md @@ -1,7 +1,27 @@ # 更新日志 -## Unreleased +## v7.0.2 +`2024-04-20` + +- 支持读取 `rsbuild.config.*` 配置文件 +- 支持编译 Vue SFC scopeId + +## v7.0.1 + +`2024-04-14` + +- 修复 tsconfig 导致的编译错误 + +## v7.0.0 + +`2024-04-14` + +请注意,由于 Vant 仓库自身 workflow 的变化,Vant CLI v7 包含了较大的 breaking changes。 + +如果你在使用 Vant CLI v6,可以基于 v6 版本 fork 进行使用。你可以在 [vant_cli_v6](https://github.com/youzan/vant/tree/vant_cli_v6) 分支上找到 v6 代码。 + +- 站点的构建工具切换为 [Rsbuild](https://github.com/web-infra-dev/rsbuild) - 移除 vant-cli test 命令 - 移除 vant-cli release 命令 - 移除 vant-cli changelog 命令 diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md index 35b2fbcf937..52ed4a5f6ec 100644 --- a/packages/vant-cli/docs/config.md +++ b/packages/vant-cli/docs/config.md @@ -1,6 +1,8 @@ # Config - [Config](#----) + - [rsbuild.config.mjs](#rsbuildconfigmjs) + - [vite.config.mjs](#viteconfigmjs) - [vant.config.mjs](#vantconfigmjs) - [name](#name) - [build.css.base](#buildcssbase) @@ -8,7 +10,6 @@ - [build.site.publicPath](#buildsitepublicpath) - [build.srcDir](#buildsrcdir) - [build.namedExport](#buildnamedexport) - - [build.configureVite](#buildconfigurevite) - [build.packageManager](#buildpackagemanager) - [site.title](#sitetitle) - [site.logo](#sitelogo) @@ -24,6 +25,34 @@ - [Default Config](#-----1) - [browserslist](#browserslist) +## rsbuild.config.mjs + +Vant CLI uses [Rsbuild](https://github.com/web-infra-dev/rsbuild) to build the documentation site. You can create an Rsbuild configuration file in the same directory as `vant.config.mjs`. The contents of the file will be automatically read by Vant CLI. + +```js +// rsbuild.config.mjs or rsbuild.config.ts +export default { + plugins: [ + // Configure Rsbuild plugins + ], + dev: { + // Options related to local development + }, + html: { + // Options related to HTML generation + }, + // Other options +}; +``` + +> Please refer to [Configure Rsbuild](https://rsbuild.dev/guide/basic/configure-rsbuild) for more information. + +## vite.config.mjs + +Vant Cli uses Vite to build component library code. You can create a Vite configuration file in the same directory as `vant.config.mjs`. In this file, you can add any Vite configuration. + +> Please refer to [Vite Configuration](https://vitejs.dev/config/) to learn more. + ## vant.config.mjs `vant.config.mjs` includes bundle and documentation site config. Please create this file and place it in your project root directory. Here is a basic example: @@ -192,28 +221,6 @@ module.exports = { }; ``` -```js -module.exports = { - build: { - configureVite(config) { - const { BUILD_TARGET } = process.env; - - if (BUILD_TARGET === 'package') { - // component library bundle config - } - - if (BUILD_TARGET === 'site') { - // documentation site bundle config - } - - return config; - }, - }, -}; -``` - -Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code. - If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0). ### build.packageManager diff --git a/packages/vant-cli/docs/config.zh-CN.md b/packages/vant-cli/docs/config.zh-CN.md index 88bd4024192..25ecd2bd658 100644 --- a/packages/vant-cli/docs/config.zh-CN.md +++ b/packages/vant-cli/docs/config.zh-CN.md @@ -1,6 +1,8 @@ # 配置指南 - [配置指南](#----) + - [rsbuild.config.mjs](#rsbuildconfigmjs) + - [vite.config.mjs](#viteconfigmjs) - [vant.config.mjs](#vantconfigmjs) - [name](#name) - [build.css.base](#buildcssbase) @@ -8,7 +10,6 @@ - [build.site.publicPath](#buildsitepublicpath) - [build.srcDir](#buildsrcdir) - [build.namedExport](#buildnamedexport) - - [build.configureVite](#buildconfigurevite) - [build.packageManager](#buildpackagemanager) - [site.title](#sitetitle) - [site.logo](#sitelogo) @@ -24,6 +25,34 @@ - [默认配置](#-----1) - [browserslist](#browserslist) +## rsbuild.config.mjs + +Vant CLI 使用 [Rsbuild](https://github.com/web-infra-dev/rsbuild) 来构建文档站点,你可以在 `vant.config.mjs` 的同级目录下创建 Rsbuild 的配置文件,文件内容会被 Vant CLI 自动读取。 + +```js +// rsbuild.config.mjs 或 rsbuild.config.ts +export default { + plugins: [ + // 配置 Rsbuild 插件 + ], + dev: { + // 与本地开发有关的选项 + }, + html: { + // 与 HTML 生成有关的选项 + }, + // 其他选项 +}; +``` + +> 请参考 [配置 Rsbuild](https://rsbuild.dev/zh/guide/basic/configure-rsbuild) 了解更多。 + +## vite.config.mjs + +Vant Cli 使用 Vite 来构建组件库代码,你可以在 `vant.config.mjs` 的同级目录下创建 Vite 的配置文件,在该文件中你可以添加任意的 Vite 配置。 + +> 请参考 [Vite 配置](https://vitejs.dev/config/) 了解更多。 + ## vant.config.mjs `vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置,请创建此文件并置于项目根目录下。下面是一份基本配置的示例: @@ -174,50 +203,6 @@ module.exports = { 开启此选项后,会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。 -### build.configureVite - -- Type: `(config: InlineConfig): InlineConfig | undefined` -- Default: `undefined` - -vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)(从 4.0.0 版本开始支持)。 - -```js -module.exports = { - build: { - configureVite(config) { - config.server.port = 3000; - return config; - }, - }, -}; -``` - -在自定义配置时,可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分: - -```js -module.exports = { - build: { - configureVite(config) { - const { BUILD_TARGET } = process.env; - - if (BUILD_TARGET === 'package') { - // 修改组件库构建配置 - } - - if (BUILD_TARGET === 'site') { - // 修改文档站点构建配置 - } - - return config; - }, - }, -}; -``` - -注意,由于 `vant.config.mjs` 文件会被打包到文档网站的代码中,因此 `configureVite` 中不允许引用 vite 插件。 - -如果需要配置 vite 插件,可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件,在该文件中你可以添加任意的 vite 配置(该特性从 @vant/cli 5.1.0 版本开始支持)。 - ### build.packageManager - Type: `'npm' | 'yarn' | 'pnpm' | 'bun'` diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index 04adf8b20fc..66cf66d4c45 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -1,6 +1,6 @@ { "name": "@vant/cli", - "version": "6.2.0", + "version": "7.0.2", "type": "module", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -13,7 +13,7 @@ "scripts": { "dev": "tsc --watch", "build": "rimraf ./lib && tsc", - "release": "vant-cli release", + "release": "rm -rf ./site/node_modules && vant-cli release", "prepare": "pnpm build" }, "files": [ @@ -38,50 +38,50 @@ "author": "chenjiahan", "license": "MIT", "devDependencies": { - "@types/fs-extra": "^11.0.1", - "@types/less": "^3.0.3", - "@types/lodash": "^4.14.191", - "@types/markdown-it": "^13.0.0", - "rimraf": "^5.0.0", - "vue": "^3.4.13" + "@types/fs-extra": "^11.0.4", + "@types/less": "^3.0.6", + "@types/lodash": "^4.17.0", + "@types/markdown-it": "^13.0.7", + "rimraf": "^5.0.5", + "vue": "^3.4.23" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-typescript": "^7.23.2", - "@rsbuild/core": "0.4.1", - "@rsbuild/plugin-babel": "0.4.1", - "@rsbuild/plugin-vue": "0.4.1", - "@rsbuild/plugin-vue-jsx": "0.4.1", + "@babel/core": "^7.24.4", + "@babel/preset-typescript": "^7.24.1", + "@rsbuild/core": "0.6.4", + "@rsbuild/plugin-babel": "0.6.4", + "@rsbuild/plugin-vue": "0.6.4", + "@rsbuild/plugin-vue-jsx": "0.6.4", "@vant/eslint-config": "workspace:^", "@vant/touch-emulator": "workspace:^", - "@vitejs/plugin-vue": "^4.5.2", + "@vitejs/plugin-vue": "^4.6.2", "@vitejs/plugin-vue-jsx": "^3.1.0", - "@vue/babel-plugin-jsx": "^1.1.1", - "autoprefixer": "^10.4.8", - "commander": "^11.0.0", - "rslog": "^1.1.0", - "esbuild": "^0.19.10", - "eslint": "^8.46.0", - "enquirer": "2.3.6", - "fast-glob": "^3.2.11", - "fs-extra": "^11.1.0", + "@vue/babel-plugin-jsx": "^1.2.2", + "autoprefixer": "^10.4.19", + "commander": "^11.1.0", + "rslog": "^1.2.1", + "esbuild": "^0.20.2", + "eslint": "^8.57.0", + "enquirer": "2.4.1", + "fast-glob": "^3.3.2", + "fs-extra": "^11.2.0", "hash-sum": "^2.0.0", - "highlight.js": "^11.6.0", - "husky": "^8.0.1", - "less": "^4.1.3", + "highlight.js": "^11.9.0", + "husky": "^8.0.3", + "less": "^4.2.0", "lodash": "^4.17.21", - "markdown-it": "^13.0.1", - "markdown-it-anchor": "^8.6.4", + "markdown-it": "^13.0.2", + "markdown-it-anchor": "^8.6.7", "nano-staged": "^0.8.0", "picocolors": "^1.0.0", - "postcss": "^8.4.31", - "postcss-load-config": "^4.0.1", - "prettier": "^3.0.0", + "postcss": "^8.4.38", + "postcss-load-config": "^4.0.2", + "prettier": "^3.2.5", "rspack-plugin-virtual-module": "^0.1.12", - "terser": "^5.19.2", + "terser": "^5.30.3", "transliteration": "^2.3.5", "typescript": "^5.0.4", "vite": "^5.0.12", - "vue-router": "^4.1.6" + "vue-router": "^4.3.2" } } diff --git a/packages/vant-cli/site/tsconfig.json b/packages/vant-cli/site/tsconfig.json deleted file mode 100644 index 2f10c52d6d8..00000000000 --- a/packages/vant-cli/site/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "allowJs": true - } -} diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index 13d3b23fc8b..5bdcd761a06 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/packages/vant-cli/src/common/index.ts @@ -1,15 +1,15 @@ import fse from 'fs-extra'; import { sep, join } from 'node:path'; import { SRC_DIR, getVantConfig } from './constant.js'; -import { InlineConfig, loadConfigFromFile, mergeConfig } from 'vite'; +import { type InlineConfig, loadConfigFromFile, mergeConfig } from 'vite'; const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } = fse; export const EXT_REGEXP = /\.\w+$/; export const SFC_REGEXP = /\.(vue)$/; -export const DEMO_REGEXP = new RegExp('\\' + sep + 'demo$'); -export const TEST_REGEXP = new RegExp('\\' + sep + 'test$'); +export const DEMO_REGEXP = new RegExp(`\\${sep}demo$`); +export const TEST_REGEXP = new RegExp(`\\${sep}test$`); export const ASSET_REGEXP = /\.(png|jpe?g|gif|webp|ico|jfif|svg|woff2?|ttf)$/i; export const STYLE_REGEXP = /\.(css|less|scss)$/; export const SCRIPT_REGEXP = /\.(js|ts|jsx|tsx)$/; @@ -24,8 +24,12 @@ export function replaceExt(path: string, ext: string) { return path.replace(EXT_REGEXP, ext); } -export function hasDefaultExport(code: string) { - return code.includes('export default') || code.includes('export { default }'); +export function hasExportOrDefineOptions(code: string) { + return ( + code.includes('export default') || + code.includes('export { default }') || + code.includes('defineOptions') + ); } export function getComponents() { @@ -38,7 +42,7 @@ export function getComponents() { ENTRY_EXTS.some((ext) => { const path = join(SRC_DIR, dir, `index.${ext}`); if (existsSync(path)) { - return hasDefaultExport(readFileSync(path, 'utf-8')); + return hasExportOrDefineOptions(readFileSync(path, 'utf-8')); } return false; @@ -71,8 +75,8 @@ export function pascalize(str: string): string { export function decamelize(str: string, sep = '-') { return str - .replace(/([a-z\d])([A-Z])/g, '$1' + sep + '$2') - .replace(/([A-Z])([A-Z][a-z\d]+)/g, '$1' + sep + '$2') + .replace(/([a-z\d])([A-Z])/g, `$1${sep}$2`) + .replace(/([A-Z])([A-Z][a-z\d]+)/g, `$1${sep}$2`) .toLowerCase(); } diff --git a/packages/vant-cli/src/compiler/compile-sfc.ts b/packages/vant-cli/src/compiler/compile-sfc.ts index a95ce66720a..c63a83a49d2 100644 --- a/packages/vant-cli/src/compiler/compile-sfc.ts +++ b/packages/vant-cli/src/compiler/compile-sfc.ts @@ -6,6 +6,7 @@ import { SFCBlock, compileTemplate, compileScript, + compileStyle, } from 'vue/compiler-sfc'; import { replaceExt } from '../common/index.js'; @@ -37,7 +38,7 @@ function injectRender(script: string, render: string) { } function injectScopeId(script: string, scopeId: string) { - script += `\n${VUEIDS}._scopeId = '${scopeId}'`; + script += `\n${VUEIDS}.__scopeId = '${scopeId}'`; return script; } @@ -75,7 +76,8 @@ export async function compileSfc(filePath: string): Promise { const { template, styles } = descriptor; const hasScoped = styles.some((s) => s.scoped); - const scopeId = hasScoped ? `data-v-${hash(source)}` : ''; + const scopeId = hasScoped ? hash(source) : ''; + const scopeKey = scopeId ? `data-v-${scopeId}` : ''; // compile js part if (descriptor.script || descriptor.scriptSetup) { @@ -87,35 +89,32 @@ export async function compileSfc(filePath: string): Promise { new Promise((resolve) => { let script = ''; - let bindingMetadata; - if (descriptor.scriptSetup) { - const { bindings, content } = compileScript(descriptor, { - id: scopeId, - }); - script += content; - bindingMetadata = bindings; - } else { - script += descriptor.script!.content; - } + const { bindings, content } = compileScript(descriptor, { + id: scopeKey, + }); + script += content; script = injectStyle(script, styles, filePath); + script = script.replace(EXPORT, `const ${VUEIDS} =`); if (template) { const render = compileTemplate({ - id: scopeId, + id: scopeKey, source: template.content, + scoped: !!scopeKey, filename: filePath, compilerOptions: { - bindingMetadata, + scopeId: scopeKey, + bindingMetadata: bindings, }, }).code; script = injectRender(script, render); } - if (scopeId) { - script = injectScopeId(script, scopeId); + if (scopeKey) { + script = injectScopeId(script, scopeKey); } script += `\n${EXPORT} ${VUEIDS}`; @@ -136,20 +135,14 @@ export async function compileSfc(filePath: string): Promise { ...styles.map(async (style, index: number) => { const cssFilePath = getSfcStylePath(filePath, style.lang || 'css', index); - const styleSource = trim(style.content); - - // TODO support scoped - // if (style.scoped) { - // styleSource = compileUtils.compileStyle({ - // id: scopeId, - // scoped: true, - // source: styleSource, - // filename: cssFilePath, - // preprocessLang: style.lang, - // }).code; - // } + const styleSource = compileStyle({ + source: style.content, + filename: path.basename(cssFilePath), + scoped: style.scoped, + id: scopeId, + }); - return outputFile(cssFilePath, styleSource); + return outputFile(cssFilePath, trim(styleSource.code)); }), ); diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts index 6cec54a0d18..12dd7c71477 100644 --- a/packages/vant-cli/src/compiler/compile-site.ts +++ b/packages/vant-cli/src/compiler/compile-site.ts @@ -3,7 +3,11 @@ import { getVantConfig, setBuildTarget } from '../common/index.js'; import { getTemplateParams } from './get-template-params.js'; import { genPackageEntry } from './gen-package-entry.js'; import { genStyleDepsMap } from './gen-style-deps-map.js'; -import type { RsbuildConfig } from '@rsbuild/core'; +import { + loadConfig, + mergeRsbuildConfig, + type RsbuildConfig, +} from '@rsbuild/core'; import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module'; import { CSS_LANG } from '../common/css.js'; import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js'; @@ -95,9 +99,11 @@ export async function compileSite(isProd = false) { }, }; + const userRsbuildConfig = await loadConfig({ cwd: process.cwd() }); + const rsbuild = await createRsbuild({ cwd: SITE_SRC_DIR, - rsbuildConfig, + rsbuildConfig: mergeRsbuildConfig(rsbuildConfig, userRsbuildConfig.content), }); if (isProd) { diff --git a/packages/vant-cli/src/compiler/web-types/formatter.ts b/packages/vant-cli/src/compiler/web-types/formatter.ts index c358c17251b..5169af8b0ab 100644 --- a/packages/vant-cli/src/compiler/web-types/formatter.ts +++ b/packages/vant-cli/src/compiler/web-types/formatter.ts @@ -1,7 +1,7 @@ /* eslint-disable no-continue */ import { Articles } from './parser.js'; import { formatType, removeVersion, toKebabCase } from './utils.js'; -import { VueEventArgument, VueTag } from './type.js'; +import { VueAttribute, VueEvent, VueEventArgument, VueTag } from './type.js'; function formatComponentName(name: string, tagPrefix: string) { return tagPrefix + toKebabCase(name); @@ -105,21 +105,52 @@ export function formatter( const tag = findTag(vueTags, name); table.body.forEach((line) => { - const [name, desc, type, defaultVal] = line; + const [_name, desc, _type, defaultVal] = line; + const name = removeVersion(_name); + const type = formatType(_type); if (!tag.attributes) { tag.attributes = []; } - tag.attributes.push({ - name: removeVersion(name), + const attribute: VueAttribute = { + name, default: defaultVal, description: desc, value: { - type: formatType(type), + type, kind: 'expression', }, - }); + }; + + if (name === 'v-model') { + const modelValue = 'modelValue'; + // add `modelValue` + tag.attributes.push({ ...attribute, name: modelValue }); + + if (type === 'boolean') { + // fix: warning `is not a valid value for v-model` in JetBrains IDE + // ref: https://github.com/JetBrains/web-types/issues/79#issuecomment-2045153333 + attribute.value = { ...attribute.value, type: type + ' ' }; + } + + if (!tag.events) { + tag.events = []; + } + + tag.events.push({ + name: `update:${modelValue}`, + description: `${desc}\n\nEmitted when the value of \`${modelValue}\` prop changes.`, + arguments: [ + { + name: modelValue, + type, + }, + ], + }); + } + + tag.attributes.push(attribute); }); return; } @@ -127,20 +158,21 @@ export function formatter( if (tableTitle.includes('Events')) { const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName; const tag = findTag(vueTags, name); + const events: VueEvent[] = []; table.body.forEach((line) => { const [name, desc, args] = line; - if (!tag.events) { - tag.events = []; - } - - tag.events.push({ + events.push({ name: removeVersion(name), description: desc, arguments: formatArguments(args), }); }); + + // for higher priority + tag.events = events.concat(tag.events || []); + return; } diff --git a/packages/vant-cli/src/compiler/web-types/index.ts b/packages/vant-cli/src/compiler/web-types/index.ts index 4baff4bd797..25c234a8536 100644 --- a/packages/vant-cli/src/compiler/web-types/index.ts +++ b/packages/vant-cli/src/compiler/web-types/index.ts @@ -17,6 +17,7 @@ async function readMarkdown(options: Options) { const mds = await glob(normalizePath(`${options.path}/**/*.md`)); return mds .filter((md) => options.test.test(md)) + .sort((a, b) => a.localeCompare(b)) // keep order .map((path) => fse.readFileSync(path, 'utf-8')); } diff --git a/packages/vant-cli/src/compiler/web-types/parser.ts b/packages/vant-cli/src/compiler/web-types/parser.ts index cfd73705c46..3ef8c2c4e99 100644 --- a/packages/vant-cli/src/compiler/web-types/parser.ts +++ b/packages/vant-cli/src/compiler/web-types/parser.ts @@ -1,5 +1,5 @@ /* eslint-disable no-cond-assign */ -const TITLE_REG = /^(#+)\s+([^\n]*)/; +const TITLE_REG = /^(#+)\s+([^\r\n]*)/; const TABLE_REG = /^\|.+\r?\n\|\s*-+/; const TD_REG = /\s*`[^`]+`\s*|([^|`]+)/g; const TABLE_SPLIT_LINE_REG = /^\|\s*-/; diff --git a/packages/vant-compat/package.json b/packages/vant-compat/package.json index 779b4064909..73a66f93574 100644 --- a/packages/vant-compat/package.json +++ b/packages/vant-compat/package.json @@ -36,11 +36,11 @@ "author": "chenjiahan", "license": "MIT", "devDependencies": { - "@vue/runtime-core": "^3.4.13", + "@vue/runtime-core": "^3.4.23", "vant": "workspace:*", - "vue": "^3.4.13", - "esbuild": "^0.19.10", - "rimraf": "^5.0.0", + "vue": "^3.4.23", + "esbuild": "^0.20.2", + "rimraf": "^5.0.5", "typescript": "^5.0.4" } } diff --git a/packages/vant-eslint-config/package.json b/packages/vant-eslint-config/package.json index 8d32fe98a29..cfbcd7a7457 100644 --- a/packages/vant-eslint-config/package.json +++ b/packages/vant-eslint-config/package.json @@ -22,11 +22,11 @@ "dependencies": { "@typescript-eslint/eslint-plugin": "^6.2.1", "@typescript-eslint/parser": "^6.2.1", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-vue": "^9.16.1" + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-vue": "^9.25.0" }, "devDependencies": { - "eslint": "^8.46.0", + "eslint": "^8.57.0", "typescript": "^5.0.4" }, "peerDependencies": { diff --git a/packages/vant-popperjs/package.json b/packages/vant-popperjs/package.json index 19b079a6846..a216cf32601 100644 --- a/packages/vant-popperjs/package.json +++ b/packages/vant-popperjs/package.json @@ -37,9 +37,9 @@ "author": "chenjiahan", "license": "MIT", "devDependencies": { - "@popperjs/core": "^2.11.6", - "esbuild": "^0.19.10", - "rimraf": "^5.0.0", + "@popperjs/core": "^2.11.8", + "esbuild": "^0.20.2", + "rimraf": "^5.0.5", "typescript": "^5.0.4" } } diff --git a/packages/vant-use/package.json b/packages/vant-use/package.json index 1907eccf256..2664d365a69 100644 --- a/packages/vant-use/package.json +++ b/packages/vant-use/package.json @@ -38,10 +38,10 @@ "author": "chenjiahan", "license": "MIT", "devDependencies": { - "esbuild": "^0.19.10", - "rimraf": "^5.0.0", + "esbuild": "^0.20.2", + "rimraf": "^5.0.5", "typescript": "^5.0.4", - "vue": "^3.4.13" + "vue": "^3.4.23" }, "peerDependencies": { "vue": "^3.0.0" diff --git a/packages/vant/docs/markdown/changelog.en-US.md b/packages/vant/docs/markdown/changelog.en-US.md index 5af20a51883..879c91bc55f 100644 --- a/packages/vant/docs/markdown/changelog.en-US.md +++ b/packages/vant/docs/markdown/changelog.en-US.md @@ -19,6 +19,153 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). ## Details +### v4.8.11 + +`2024-04-14` + +#### New Features 🎉 + +- feat(DropdownMenu): add disabled for option by [@inottn](https://github.com/inottn) in [#12785](https://github.com/youzan/vant/pull/12785) + +#### Bug Fixes 🐞 + +- fix: warning `is not a valid value for v-model` in JetBrains IDE by [@anyesu](https://github.com/anyesu) in [#12787](https://github.com/youzan/vant/pull/12787) +- fix(Cli): remove site tsconfig by [@chenjiahan](https://github.com/chenjiahan) in [#12792](https://github.com/youzan/vant/pull/12792) + +#### Document 📖 + +- docs(list): update Error loading module code by [@wangjue666](https://github.com/wangjue666) in [#12778](https://github.com/youzan/vant/pull/12778) + +#### Other Changes + +- chore(deps): update dependency eslint-plugin-vue to ^9.24.1 by [@renovate](https://github.com/renovate) in [#12774](https://github.com/youzan/vant/pull/12774) +- chore(deps): bump Rsbuild v0.6 by [@chenjiahan](https://github.com/chenjiahan) in [#12790](https://github.com/youzan/vant/pull/12790) + +#### New Contributors + +- [@wangjue666](https://github.com/wangjue666) made their first contribution in [#12778](https://github.com/youzan/vant/pull/12778) +- [@anyesu](https://github.com/anyesu) made their first contribution in [#12787](https://github.com/youzan/vant/pull/12787) + +### v4.8.10 + +`2024-04-06` + +#### New Features 🎉 + +- feat(TimePicker): support confirm and getSelectedTime methods by [@bluesky335](https://github.com/bluesky335) in [#12761](https://github.com/youzan/vant/pull/12761) +- feat(DatePicker): support confirm and getSelectedDate method by [@bluesky335](https://github.com/bluesky335) in [#12762](https://github.com/youzan/vant/pull/12762) +- feat(Coupon): support for checkbox usage by [@CatsAndMice](https://github.com/CatsAndMice) in [#12744](https://github.com/youzan/vant/pull/12744) + +#### Other Changes + +- chore(deps): update dependency vite to v5.0.13 [security] by [@renovate](https://github.com/renovate) in [#12767](https://github.com/youzan/vant/pull/12767) +- chore(deps): update all patch dependencies by [@renovate](https://github.com/renovate) in [#12756](https://github.com/youzan/vant/pull/12756) +- chore(deps): update dependency [@types](https://github.com/types)/lodash to ^4.17.0 by @renovate in [#12757](https://github.com/youzan/vant/pull/12757) +- chore: correct return type of getSelectedTime by [@chenjiahan](https://github.com/chenjiahan) in [#12768](https://github.com/youzan/vant/pull/12768) +- refactor(Coupon): simplify the checkbox usage by [@chenjiahan](https://github.com/chenjiahan) in [#12771](https://github.com/youzan/vant/pull/12771) + +#### New Contributors + +- [@bluesky335](https://github.com/bluesky335) made their first contribution in [#12761](https://github.com/youzan/vant/pull/12761) + +### v4.8.9 + +`2024-04-06` + +Invalid version, please do not use it. + +### v4.8.8 + +`2024-03-31` + +#### New Features 🎉 + +- feat(image-preview): export onLoad and style for image slot by [@chouchouji](https://github.com/chouchouji) in [#12740](https://github.com/youzan/vant/pull/12740) +- feat(AddressList): add event param for click-item by [@chenjiahan](https://github.com/chenjiahan) in [#12748](https://github.com/youzan/vant/pull/12748) + +#### Bug Fixes 🐞 + +- fix(floating-bubble): update offset when the value changed by [@chouchouji](https://github.com/chouchouji) in [#12730](https://github.com/youzan/vant/pull/12730) +- fix(vant-cli): support defineOptions named by [@wChenonly](https://github.com/wChenonly) in [#12734](https://github.com/youzan/vant/pull/12734) +- fix(PickerGroup): rendering correctly when using v-for by [@inottn](https://github.com/inottn) in [#12732](https://github.com/youzan/vant/pull/12732) +- fix(TextEllipsis): should recalculate the ellipsis state when the component is activated by [@inottn](https://github.com/inottn) in [#12741](https://github.com/youzan/vant/pull/12741) + +#### Document 📖 + +- docs(button): Keep Chinese and English documents consistent by [@chouchouji](https://github.com/chouchouji) in [#12708](https://github.com/youzan/vant/pull/12708) +- docs(cell): correct the type of label by [@chouchouji](https://github.com/chouchouji) in [#12721](https://github.com/youzan/vant/pull/12721) +- docs(ImagePreview): add image slot scale guide by [@chenjiahan](https://github.com/chenjiahan) in [#12751](https://github.com/youzan/vant/pull/12751) + +#### Other Changes + +- chore(deps): update dependency vue-router to v4.3.0 by [@renovate](https://github.com/renovate) in [#12702](https://github.com/youzan/vant/pull/12702) +- chore(deps): update dependency esbuild to ^0.20.0 by [@renovate](https://github.com/renovate) in [#12696](https://github.com/youzan/vant/pull/12696) +- chore(workflow): let renovate bump package.json by [@chenjiahan](https://github.com/chenjiahan) in [#12714](https://github.com/youzan/vant/pull/12714) +- chore(deps): update dependency eslint to ^8.57.0 by [@renovate](https://github.com/renovate) in [#12723](https://github.com/youzan/vant/pull/12723) +- chore(docs): update the vue3-vant-mobile reference by [@CharleeWa](https://github.com/CharleeWa) in [#12735](https://github.com/youzan/vant/pull/12735) +- chore(deps): update dependency commander to ^11.1.0 by [@renovate](https://github.com/renovate) in [#12718](https://github.com/youzan/vant/pull/12718) +- chore(deps): update dependency enquirer to v2.4.1 by [@renovate](https://github.com/renovate) in [#12695](https://github.com/youzan/vant/pull/12695) +- chore(deps): update dependency [@vue](https://github.com/vue)/test-utils to ^2.4.5 by @renovate in [#12716](https://github.com/youzan/vant/pull/12716) +- chore(deps): bump Rsbuild v0.5 by [@chenjiahan](https://github.com/chenjiahan) in [#12747](https://github.com/youzan/vant/pull/12747) +- chore(deps): update dependency eslint-config-prettier to ^9.1.0 by [@renovate](https://github.com/renovate) in [#12724](https://github.com/youzan/vant/pull/12724) +- chore(deps): update dependency fs-extra to ^11.2.0 by [@renovate](https://github.com/renovate) in [#12745](https://github.com/youzan/vant/pull/12745) +- chore(deps): update dependency highlight.js to ^11.9.0 by [@renovate](https://github.com/renovate) in [#12746](https://github.com/youzan/vant/pull/12746) +- chore(deps): update dependency fast-glob to ^3.3.2 by [@renovate](https://github.com/renovate) in [#12731](https://github.com/youzan/vant/pull/12731) +- chore(deps): update dependency less to ^4.2.0 by [@renovate](https://github.com/renovate) in [#12752](https://github.com/youzan/vant/pull/12752) +- chore(workflow): let renovate group patch updates by [@chenjiahan](https://github.com/chenjiahan) in [#12754](https://github.com/youzan/vant/pull/12754) + +#### New Contributors + +- [@CharleeWa](https://github.com/CharleeWa) made their first contribution in [#12735](https://github.com/youzan/vant/pull/12735) + +### v4.8.7 + +`2024-03-18` + +#### Other Changes + +- Revert "chore(deps): update dependency typescript to v5.4.2" by [@renovate](https://github.com/renovate) in [#12700](https://github.com/youzan/vant/pull/12700) +- chore: Update homepage by [@yoyo837](https://github.com/yoyo837) in [#12704](https://github.com/youzan/vant/pull/12704) + +### v4.8.6 + +`2024-03-17` + +#### New Features 🎉 + +- feat(ImagePreview): add vertical prop by [@suncohey](https://github.com/suncohey) in [#12660](https://github.com/youzan/vant/pull/12660) +- feat(signature): export clear and submit method by [@chouchouji](https://github.com/chouchouji) in [#12654](https://github.com/youzan/vant/pull/12654) +- feat: support unplugin-auto-import plugin by [@DragonnZhang](https://github.com/DragonnZhang) in [#12679](https://github.com/youzan/vant/pull/12679) +- feat(ActionSheet): add icon support to the actions data by [@wjw-gavin](https://github.com/wjw-gavin) in [#12671](https://github.com/youzan/vant/pull/12671) + +#### Bug Fixes 🐞 + +- fix(ImagePreview): allow user to swipe to next image when the current image is moved to the edge by [@inottn](https://github.com/inottn) in [#12666](https://github.com/youzan/vant/pull/12666) +- fix(ActionSheet): icon class name by [@chenjiahan](https://github.com/chenjiahan) in [#12701](https://github.com/youzan/vant/pull/12701) + +#### Document 📖 + +- docs(ImagePreview): add vertical prop by [@chenjiahan](https://github.com/chenjiahan) in [#12663](https://github.com/youzan/vant/pull/12663) +- docs: change tab's 'Before Change' into a real async function by [@gxy5202](https://github.com/gxy5202) in [#12693](https://github.com/youzan/vant/pull/12693) + +#### Other Changes + +- chore(deps): bump Rsbuild 0.4.12 by [@chenjiahan](https://github.com/chenjiahan) in [#12665](https://github.com/youzan/vant/pull/12665) +- chore(deps): update dependency [@vue](https://github.com/vue)/test-utils to v2.4.5 by @renovate in [#12681](https://github.com/youzan/vant/pull/12681) +- chore(deps): update dependency autoprefixer to v10.4.18 by [@renovate](https://github.com/renovate) in [#12682](https://github.com/youzan/vant/pull/12682) +- chore(workflow): disable dependency dashboard by [@chenjiahan](https://github.com/chenjiahan) in [#12686](https://github.com/youzan/vant/pull/12686) +- chore(deps): update dependency prettier to v3.2.5 by [@renovate](https://github.com/renovate) in [#12685](https://github.com/youzan/vant/pull/12685) +- chore(deps): update rsbuild to v0.4.15 by [@renovate](https://github.com/renovate) in [#12688](https://github.com/youzan/vant/pull/12688) +- chore(deps): update dependency eslint to v8.57.0 by [@renovate](https://github.com/renovate) in [#12697](https://github.com/youzan/vant/pull/12697) +- chore(deps): update dependency typescript to v5.4.2 by [@renovate](https://github.com/renovate) in [#12700](https://github.com/youzan/vant/pull/12700) + +#### New Contributors + +- [@chouchouji](https://github.com/chouchouji) made their first contribution in [#12654](https://github.com/youzan/vant/pull/12654) +- [@renovate](https://github.com/renovate) made their first contribution in [#12681](https://github.com/youzan/vant/pull/12681) +- [@gxy5202](https://github.com/gxy5202) made their first contribution in [#12693](https://github.com/youzan/vant/pull/12693) +- [@DragonnZhang](https://github.com/DragonnZhang) made their first contribution in [#12679](https://github.com/youzan/vant/pull/12679) + ### v4.8.5 `2024-02-25` diff --git a/packages/vant/docs/markdown/changelog.zh-CN.md b/packages/vant/docs/markdown/changelog.zh-CN.md index 49162016d99..3f4a77cb52a 100644 --- a/packages/vant/docs/markdown/changelog.zh-CN.md +++ b/packages/vant/docs/markdown/changelog.zh-CN.md @@ -19,6 +19,153 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 ## 更新内容 +### v4.8.11 + +`2024-04-14` + +#### 新功能 🎉 + +- feat(DropdownMenu):通过 [@inottn](https://github.com/inottn) 在 [#12785](https://github.com/youzan/vant/pull/12785) 中为选项添加 disabled 属性 + +#### Bug 修复 🐞 + +- fix:在 JetBrains IDE 中修复警告 `is not a valid value for v-model`,贡献者 [@anyesu](https://github.com/anyesu) 在 [#12787](https://github.com/youzan/vant/pull/12787) +- fix(Cli):移除站点的 tsconfig 文件,贡献者 [@chenjiahan](https://github.com/chenjiahan) 在 [#12792](https://github.com/youzan/vant/pull/12792) + +#### 文档 📖 + +- docs(list):更新模块代码加载错误信息,贡献者 [@wangjue666](https://github.com/wangjue666) 在 [#12778](https://github.com/youzan/vant/pull/12778) + +#### 其他变更 + +- chore(deps):更新依赖 eslint-plugin-vue 至 ^9.24.1,由 [@renovate](https://github.com/renovate) 在 [#12774](https://github.com/youzan/vant/pull/12774) 提交 +- chore(deps):升级 Rsbuild 至 v0.6 版本,由 [@chenjiahan](https://github.com/chenjiahan) 在 [#12790](https://github.com/youzan/vant/pull/12790) 提交 + +#### 新贡献者 + +- [@wangjue666](https://github.com/wangjue666) 在 [#12778](https://github.com/youzan/vant/pull/12778) 中首次贡献 +- [@anyesu](https://github.com/anyesu) 在 [#12787](https://github.com/youzan/vant/pull/12787) 中首次贡献 + +### v4.8.10 + +`2024-04-06` + +#### 新功能 🎉 + +- feat(TimePicker):支持 confirm 和 getSelectedTime 方法,由 [@bluesky335](https://github.com/bluesky335) 在 [#12761](https://github.com/youzan/vant/pull/12761) 提供 +- feat(DatePicker):支持 confirm 和 getSelectedDate 方法,由 [@bluesky335](https://github.com/bluesky335) 在 [#12762](https://github.com/youzan/vant/pull/12762) 提供 +- feat(Coupon):支持复选框用法,由 [@CatsAndMice](https://github.com/CatsAndMice) 在 [#12744](https://github.com/youzan/vant/pull/12744) 提供 + +#### 其他变更 + +- chore(deps):更新依赖 vite 至 v5.0.13 [安全],由 [@renovate](https://github.com/renovate) 在 [#12767](https://github.com/youzan/vant/pull/12767) 提供 +- chore(deps):更新所有补丁依赖项,由 [@renovate](https://github.com/renovate) 在 [#12756](https://github.com/youzan/vant/pull/12756) 提供 +- chore(deps):更新依赖项 [@types](https://github.com/types)/lodash 至 ^4.17.0,由 [@renovate](https://github.com/renovate) 在 [#12757](https://github.com/youzan/vant/pull/12757) 提供 +- chore:修正 getSelectedTime 的返回类型,由 [@chenjiahan](https://github.com/chenjiahan) 在 [#12768](https://github.com/youzan/vant/pull/12768) 提供 +- refactor(Coupon):简化复选框用法,由 [@chenjiahan](https://github.com/chenjiahan) 在 [#12771](https://github.com/youzan/vant/pull/12771) 提供 + +#### 新贡献者 + +- [@bluesky335](https://github.com/bluesky335) 在 [#12761](https://github.com/youzan/vant/pull/12761) 中首次贡献 + +### v4.8.9 + +`2024-04-06` + +无效版本,请勿使用。 + +### v4.8.8 + +`2024-03-31` + +#### 新特性 🎉 + +- feat(image-preview): 导出 image 插槽的 onLoad 和 style 属性,由[@chouchouji](https://github.com/chouchouji) 在 [#12740](https://github.com/youzan/vant/pull/12740) 提交 +- feat(AddressList): 为 click-item 添加事件参数,由[@chenjiahan](https://github.com/chenjiahan) 在 [#12748](https://github.com/youzan/vant/pull/12748) 提交 + +#### 故障修复 🐞 + +- fix(floating-bubble): 当值更改时更新偏移量,由[@chouchouji](https://github.com/chouchouji) 在 [#12730](https://github.com/youzan/vant/pull/12730) 提交 +- fix(vant-cli): 支持以定义的选项命名,由[@wChenonly](https://github.com/wChenonly) 在 [#12734](https://github.com/youzan/vant/pull/12734) 提交 +- fix(PickerGroup): 使用 v-for 时能够正确渲染,由[@inottn](https://github.com/inottn) 在 [#12732](https://github.com/youzan/vant/pull/12732) 提交 +- fix(TextEllipsis): 当组件被激活时应重新计算省略状态,由[@inottn](https://github.com/inottn) 在 [#12741](https://github.com/youzan/vant/pull/12741) 提交 + +#### 文档更新 📖 + +- docs(button): 保持中英文文档一致,由[@chouchouji](https://github.com/chouchouji) 在 [#12708](https://github.com/youzan/vant/pull/12708) 提交 +- docs(cell): 更正 label 的类型,由[@chouchouji](https://github.com/chouchouji) 在 [#12721](https://github.com/youzan/vant/pull/12721) 提交 +- docs(ImagePreview): 添加图片插槽缩放指导,由[@chenjiahan](https://github.com/chenjiahan) 在 [#12751](https://github.com/youzan/vant/pull/12751) 提交 + +#### 其他更改 + +- chore(deps): 更新 vue-router 依赖至 v4.3.0,由[@renovate](https://github.com/renovate) 在 [#12702](https://github.com/youzan/vant/pull/12702) 提交 +- chore(deps): 更新 esbuild 依赖至 ^0.20.0,由[@renovate](https://github.com/renovate) 在 [#12696](https://github.com/youzan/vant/pull/12696) 提交 +- chore(workflow): 让 renovate 提升 package.json 版本,由[@chenjiahan](https://github.com/chenjiahan) 在 [#12714](https://github.com/youzan/vant/pull/12714) 提交 +- chore(deps): 更新 eslint 依赖至 ^8.57.0,由[@renovate](https://github.com/renovate) 在 [#12723](https://github.com/youzan/vant/pull/12723) 提交 +- chore(docs): 更新 vue3-vant-mobile 参考文档,由[@CharleeWa](https://github.com/CharleeWa) 在 [#12735](https://github.com/youzan/vant/pull/12735) 提交 +- chore(deps): 更新 commander 依赖至 ^11.1.0,由[@renovate](https://github.com/renovate) 在 [#12718](https://github.com/youzan/vant/pull/12718) 提交 +- chore(deps): 更新 enquirer 依赖至 v2.4.1,由[@renovate](https://github.com/renovate) 在 [#12695](https://github.com/youzan/vant/pull/12695) 提交 +- chore(deps): 更新 [@vue](https://github.com/vue)/test-utils 依赖至 ^2.4.5,由 @renovate 在 [#12716](https://github.com/youzan/vant/pull/12716) 提交 +- chore(deps): 版本升至 Rsbuild v0.5,由[@chenjiahan](https://github.com/chenjiahan) 在 [#12747](https://github.com/youzan/vant/pull/12747) 提交 +- chore(deps): 更新 eslint-config-prettier 依赖至 ^9.1.0,由[@renovate](https://github.com/renovate) 在 [#12724](https://github.com/youzan/vant/pull/12724) 提交 +- chore(deps): 更新 fs-extra 依赖至 ^11.2.0,由[@renovate](https://github.com/renovate) 在 [#12745](https://github.com/youzan/vant/pull/12745) 提交 +- chore(deps): 更新 highlight.js 依赖至 ^11.9.0,由[@renovate](https://github.com/renovate) 在 [#12746](https://github.com/youzan/vant/pull/12746) 提交 +- chore(deps): 更新 fast-glob 依赖至 ^3.3.2,由[@renovate](https://github.com/renovate) 在 [#12731](https://github.com/youzan/vant/pull/12731) 提交 +- chore(deps): 更新 less 依赖至 ^4.2.0,由[@renovate](https://github.com/renovate) 在 [#12752](https://github.com/youzan/vant/pull/12752) 提交 +- chore(workflow): 让 renovate 整合补丁更新,由[@chenjiahan](https://github.com/chenjiahan) 在 [#12754](https://github.com/youzan/vant/pull/12754) 提交 + +#### 新贡献者 + +- [@CharleeWa](https://github.com/CharleeWa) 在 [#12735](https://github.com/youzan/vant/pull/12735) 中首次贡献 + +### v4.8.7 + +`2024-03-18` + +#### 其他更改 + +- 回退 "chore(deps):更新依赖 typescript 到 v5.4.2" by [@renovate](https://github.com/renovate) in [#12700](https://github.com/youzan/vant/pull/12700) +- 更新 `@vant/auto-import-resolver` homepage by [@yoyo837](https://github.com/yoyo837) in [#12704](https://github.com/youzan/vant/pull/12704) + +### v4.8.6 + +`2024-03-17` + +#### 新功能 🎉 + +- feat(ImagePreview):添加 vertical 属性 [@suncohey](https://github.com/suncohey) 在 [#12660](https://github.com/youzan/vant/pull/12660) +- feat(signature):导出 clear 和 submit 方法 [@chouchouji](https://github.com/chouchouji) 在 [#12654](https://github.com/youzan/vant/pull/12654) +- feat:支持 unplugin-auto-import 插件 [@DragonnZhang](https://github.com/DragonnZhang) 在 [#12679](https://github.com/youzan/vant/pull/12679) +- feat(ActionSheet):在 actions 数据中添加图标支持 [@wjw-gavin](https://github.com/wjw-gavin) 在 [#12671](https://github.com/youzan/vant/pull/12671) + +#### Bug 修复 🐞 + +- fix(ImagePreview):在当前图片被移动到边缘时,允许用户滑动到下一张图片 [@inottn](https://github.com/inottn) 在 [#12666](https://github.com/youzan/vant/pull/12666) +- fix(ActionSheet):图标类名 [@chenjiahan](https://github.com/chenjiahan) 在 [#12701](https://github.com/youzan/vant/pull/12701) + +#### 文档更新 📖 + +- docs(ImagePreview):添加 vertical 属性 [@chenjiahan](https://github.com/chenjiahan) 在 [#12663](https://github.com/youzan/vant/pull/12663) +- docs:将 tab 的 'Before Change' 改为一个真正的异步函数 [@gxy5202](https://github.com/gxy5202) 在 [#12693](https://github.com/youzan/vant/pull/12693) + +#### 其他更改 + +- chore(deps):Rsbuild 升级到 0.4.12 [@chenjiahan](https://github.com/chenjiahan) 在 [#12665](https://github.com/youzan/vant/pull/12665) +- chore(deps):更新依赖 [@vue](https://github.com/vue)/test-utils 到 v2.4.5 @renovate 在 [#12681](https://github.com/youzan/vant/pull/12681) +- chore(deps):更新依赖 autoprefixer 到 v10.4.18 [@renovate](https://github.com/renovate) 在 [#12682](https://github.com/youzan/vant/pull/12682) +- chore(workflow):禁用依赖仪表板 [@chenjiahan](https://github.com/chenjiahan) 在 [#12686](https://github.com/youzan/vant/pull/12686) +- chore(deps):更新依赖 prettier 到 v3.2.5 [@renovate](https://github.com/renovate) 在 [#12685](https://github.com/youzan/vant/pull/12685) +- chore(deps):更新 Rsbuild 到 v0.4.15 [@renovate](https://github.com/renovate) 在 [#12688](https://github.com/youzan/vant/pull/12688) +- chore(deps):更新依赖 eslint 到 v8.57.0 [@renovate](https://github.com/renovate) 在 [#12697](https://github.com/youzan/vant/pull/12697) +- chore(deps):更新依赖 typescript 到 v5.4.2 [@renovate](https://github.com/renovate) 在 [#12700](https://github.com/youzan/vant/pull/12700) + +#### 新贡献者 + +- [@chouchouji](https://github.com/chouchouji) 在 [#12654](https://github.com/youzan/vant/pull/12654) 做出了首次贡献 +- [@renovate](https://github.com/renovate) 在 [#12681](https://github.com/youzan/vant/pull/12681) 做出了首次贡献 +- [@gxy5202](https://github.com/gxy5202) 在 [#12693](https://github.com/youzan/vant/pull/12693) 做出了首次贡献 +- [@DragonnZhang](https://github.com/DragonnZhang) 在 [#12679](https://github.com/youzan/vant/pull/12679) 做出了首次贡献 + ### v4.8.5 `2024-02-25` diff --git a/packages/vant/docs/markdown/home.en-US.md b/packages/vant/docs/markdown/home.en-US.md index e24d8d68345..c01a42456af 100644 --- a/packages/vant/docs/markdown/home.en-US.md +++ b/packages/vant/docs/markdown/home.en-US.md @@ -84,7 +84,7 @@ The current maintenance status of each version of Vant is as follows: | [vant-playground](https://github.com/LadyChatterleyLover/vant-playground) | Vant Playground | | [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground | | [vue3-h5-template](https://github.com/yulimchen/vue3-h5-template) | Mobile project template based on Vant | -| [vue3-vant-mobile](https://github.com/CharleeWa/vue3-vant-mobile) | Mobile project template based on Vant | +| [vue3-vant-mobile](https://github.com/easy-temps/vue3-vant-mobile) | Mobile project template based on Vant | ### Other Links diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md index c20c17a347f..8d61cee7b34 100644 --- a/packages/vant/docs/markdown/home.zh-CN.md +++ b/packages/vant/docs/markdown/home.zh-CN.md @@ -98,7 +98,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一 | [vant-playground](https://github.com/LadyChatterleyLover/vant-playground) | Vant Playground | | [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground | | [vue3-h5-template](https://github.com/yulimchen/vue3-h5-template) | 基于 Vant 的移动端项目模板 | -| [vue3-vant-mobile](https://github.com/CharleeWa/vue3-vant-mobile) | 基于 Vant 的移动端项目模板 | +| [vue3-vant-mobile](https://github.com/easy-temps/vue3-vant-mobile) | 基于 Vant 的移动端项目模板 | ### 其他链接 diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 940ecbfa170..19c067fc6f7 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -131,16 +131,16 @@ Compared with conventional usage, this method can introduce the CSS style of com ```bash # with npm -npm i @vant/auto-import-resolver unplugin-vue-components -D +npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # with yarn -yarn add @vant/auto-import-resolver unplugin-vue-components -D +yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # with pnpm -pnpm add @vant/auto-import-resolver unplugin-vue-components -D +pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # with Bun -bun add @vant/auto-import-resolver unplugin-vue-components -D +bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D ``` #### 2. Configure Plugin @@ -150,6 +150,7 @@ For Rsbuild based project,configure the plugin in the `rsbuild.config.js` file ```js import { defineConfig } from '@rsbuild/core'; import { pluginVue } from '@rsbuild/plugin-vue'; +import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; import { VantResolver } from '@vant/auto-import-resolver'; @@ -158,6 +159,9 @@ export default defineConfig({ tools: { rspack: { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -171,12 +175,16 @@ For Vite based project,configure the plugin in the `vite.config.js` file: ```js import vue from '@vitejs/plugin-vue'; +import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -188,15 +196,18 @@ For vue-cli based project,configure the plugin in the `vue.config.js` file: ```js const { VantResolver } = require('@vant/auto-import-resolver'); -const ComponentsPlugin = require('unplugin-vue-components/webpack'); +const AutoImport = require('unplugin-auto-import/webpack'); +const Components = require('unplugin-vue-components/webpack'); module.exports = { configureWebpack: { plugins: [ // When the version of unplugin-vue-components is less than 0.26.0: - ComponentsPlugin({ resolvers: [VantResolver()] }), + AutoImport({ resolvers: [VantResolver()] }), + Components({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0: - ComponentsPlugin.default({ resolvers: [VantResolver()] }), + AutoImport.default({ resolvers: [VantResolver()] }), + Components.default({ resolvers: [VantResolver()] }), ], }, }; @@ -206,14 +217,17 @@ For webpack based project,configure the plugin in the `webpack.config.js` file ```js const { VantResolver } = require('@vant/auto-import-resolver'); -const ComponentsPlugin = require('unplugin-vue-components/webpack'); +const AutoImport = require('unplugin-auto-import/webpack'); +const Components = require('unplugin-vue-components/webpack'); module.exports = { plugins: [ // When the version of unplugin-vue-components is less than 0.26.0: - ComponentsPlugin({ resolvers: [VantResolver()] }), + AutoImport({ resolvers: [VantResolver()] }), + Components({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0: - ComponentsPlugin.default({ resolvers: [VantResolver()] }), + AutoImport.default({ resolvers: [VantResolver()] }), + Components.default({ resolvers: [VantResolver()] }), ], }; ``` @@ -228,30 +242,14 @@ Then you can using components from Vant in the template, the `unplugin-vue-compo ``` -#### 4. Style of Function Components - -Some components of Vant are provided as function, including `Toast`, `Dialog`, `Notify` and `ImagePreview`. When using function components, `unplugin-vue-components` cannot parse the automatic registration component, resulting in `@vant/auto-import-resolver` unable to parse the style, so the style needs to be introduced manually. - -```js -// Toast -import { showToast } from 'vant'; -import 'vant/es/toast/style'; +`unplugin-auto-import` will automatically import the corresponding Vant API and styles. -// Dialog -import { showDialog } from 'vant'; -import 'vant/es/dialog/style'; - -// Notify -import { showNotify } from 'vant'; -import 'vant/es/notify/style'; - -// ImagePreview -import { showImagePreview } from 'vant'; -import 'vant/es/image-preview/style'; +```html + ``` -> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides. - #### Tips - "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides. diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 78899ac5e21..6a4b91e58c8 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -153,16 +153,16 @@ Vant 官方基于 `unplugin-vue-components` 提供了自动导入样式的解析 ```bash # 通过 npm 安装 -npm i @vant/auto-import-resolver unplugin-vue-components -D +npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 yarn 安装 -yarn add @vant/auto-import-resolver unplugin-vue-components -D +yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 pnpm 安装 -pnpm add @vant/auto-import-resolver unplugin-vue-components -D +pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 bun 安装 -bun add @vant/auto-import-resolver unplugin-vue-components -D +bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D ``` #### 2. 配置插件 @@ -172,6 +172,7 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D ```js import { defineConfig } from '@rsbuild/core'; import { pluginVue } from '@rsbuild/plugin-vue'; +import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; import { VantResolver } from '@vant/auto-import-resolver'; @@ -180,6 +181,9 @@ export default defineConfig({ tools: { rspack: { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -193,12 +197,16 @@ export default defineConfig({ ```js import vue from '@vitejs/plugin-vue'; +import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -210,15 +218,18 @@ export default { ```js const { VantResolver } = require('@vant/auto-import-resolver'); -const ComponentsPlugin = require('unplugin-vue-components/webpack'); +const AutoImport = require('unplugin-auto-import/webpack'); +const Components = require('unplugin-vue-components/webpack'); module.exports = { configureWebpack: { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时,使用以下写法 - ComponentsPlugin({ resolvers: [VantResolver()] }), + AutoImport({ resolvers: [VantResolver()] }), + Components({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0 时,使用以下写法 - ComponentsPlugin.default({ resolvers: [VantResolver()] }), + AutoImport.default({ resolvers: [VantResolver()] }), + Components.default({ resolvers: [VantResolver()] }), ], }, }; @@ -228,19 +239,22 @@ module.exports = { ```js const { VantResolver } = require('@vant/auto-import-resolver'); -const ComponentsPlugin = require('unplugin-vue-components/webpack'); +const AutoImport = require('unplugin-auto-import/webpack'); +const Components = require('unplugin-vue-components/webpack'); module.exports = { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时,使用以下写法 - ComponentsPlugin({ resolvers: [VantResolver()] }), + AutoImport({ resolvers: [VantResolver()] }), + Components({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0 时,使用以下写法 - ComponentsPlugin.default({ resolvers: [VantResolver()] }), + AutoImport.default({ resolvers: [VantResolver()] }), + Components.default({ resolvers: [VantResolver()] }), ], }; ``` -#### 3. 使用组件 +#### 3. 使用组件和 API 完成以上两步,就可以直接在模板中使用 Vant 组件了,`unplugin-vue-components` 会解析模板并自动注册对应的组件, `@vant/auto-import-resolver` 会自动引入对应的组件样式。 @@ -250,30 +264,14 @@ module.exports = { ``` -#### 4. 引入函数组件的样式 - -Vant 中有个别组件是以函数的形式提供的,包括 `Toast`,`Dialog`,`Notify` 和 `ImagePreview` 组件。在使用函数组件时,`unplugin-vue-components` 无法解析自动注册组件,导致 `@vant/auto-import-resolver` 无法解析样式,因此需要手动引入样式。 - -```js -// Toast -import { showToast } from 'vant'; -import 'vant/es/toast/style'; - -// Dialog -import { showDialog } from 'vant'; -import 'vant/es/dialog/style'; +`unplugin-auto-import` 会自动导入对应的 Vant API 以及样式。 -// Notify -import { showNotify } from 'vant'; -import 'vant/es/notify/style'; - -// ImagePreview -import { showImagePreview } from 'vant'; -import 'vant/es/image-preview/style'; +```html + ``` -你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。 - #### 使用提示 - 请避免同时使用「全量引入」和「按需引入」这两种引入方式,否则会导致代码重复、样式错乱等问题。 diff --git a/packages/vant/package.json b/packages/vant/package.json index 27ee5250d87..6d1371c56ea 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "4.8.5", + "version": "4.8.11", "description": "Mobile UI Components built on Vue", "main": "lib/vant.cjs.js", "module": "es/index.mjs", @@ -48,22 +48,22 @@ "dependencies": { "@vant/popperjs": "workspace:^", "@vant/use": "workspace:^", - "@vue/shared": "^3.0.0" + "@vue/shared": "^3.4.23" }, "peerDependencies": { "vue": "^3.0.0" }, "devDependencies": { - "@types/node": "^18.16.3", + "@types/node": "^18.19.31", "@vant/area-data": "workspace:*", "@vant/cli": "workspace:*", "@vant/eslint-config": "workspace:*", "@vant/icons": "workspace:*", - "@vitejs/plugin-vue": "^4.5.2", + "@vitejs/plugin-vue": "^4.6.2", "@vitejs/plugin-vue-jsx": "^3.1.0", "@vitest/coverage-istanbul": "^1.1.3", - "@vue/runtime-core": "^3.4.13", - "@vue/test-utils": "^2.3.2", + "@vue/runtime-core": "^3.4.23", + "@vue/test-utils": "^2.4.5", "csstype": "^3.1.3", "diffable-html": "^5.0.0", "jsdom": "^22.1.0", @@ -71,8 +71,8 @@ "vite": "^5.0.12", "vitest": "^1.1.3", "vitest-canvas-mock": "^0.3.3", - "vue": "^3.4.13", - "vue-router": "^4.1.6" + "vue": "^3.4.23", + "vue-router": "^4.3.2" }, "sideEffects": [ "es/**/style/*", diff --git a/packages/vant/src/action-sheet/ActionSheet.tsx b/packages/vant/src/action-sheet/ActionSheet.tsx index 5816d07f2a9..08e73a56ea0 100644 --- a/packages/vant/src/action-sheet/ActionSheet.tsx +++ b/packages/vant/src/action-sheet/ActionSheet.tsx @@ -20,6 +20,7 @@ import { popupSharedProps, popupSharedPropKeys } from '../popup/shared'; const [name, bem] = createNamespace('action-sheet'); export type ActionSheetAction = { + icon?: string; name?: string; color?: string; subname?: string; @@ -94,6 +95,12 @@ export default defineComponent({ } }; + const renderIcon = (action: ActionSheetAction) => { + if (action.icon) { + return ; + } + }; + const renderActionContent = (action: ActionSheetAction, index: number) => { if (action.loading) { return ; @@ -135,6 +142,7 @@ export default defineComponent({ class={[bem('item', { loading, disabled }), className]} onClick={onClick} > + {renderIcon(action)} {renderActionContent(action, index)} ); diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md index 5dae39b2bbc..319f0efaf9c 100644 --- a/packages/vant/src/action-sheet/README.md +++ b/packages/vant/src/action-sheet/README.md @@ -53,6 +53,41 @@ export default { }; ``` +### Show Icon + +Use the `icon` field of `actions` to set the icon for the option. + +```html + + +``` + +```js +import { ref } from 'vue'; +import { showToast } from 'vant'; + +export default { + setup() { + const show = ref(false); + const actions = [ + { name: 'Option 1', icon: 'cart-o' }, + { name: 'Option 2', icon: 'shop-o' }, + { name: 'Option 3', icon: 'star-o' }, + ]; + const onSelect = (item) => { + show.value = false; + showToast(item.name); + }; + + return { + show, + actions, + onSelect, + }; + }, +}; +``` + ### Show Cancel Button ```html @@ -195,15 +230,16 @@ export default { ### Data Structure of ActionSheetAction -| Key | Description | Type | -| --------- | ------------------------------- | --------------------------- | -| name | Title | _string_ | -| subname | Subtitle | _string_ | -| color | Text color | _string_ | -| className | className for the option | _string \| Array \| object_ | -| loading | Whether to be loading status | _boolean_ | -| disabled | Whether to be disabled | _boolean_ | -| callback | Callback function after clicked | _action: ActionSheetAction_ | +| Key | Description | Type | +| --- | --- | --- | +| name | Title | _string_ | +| subname | Subtitle | _string_ | +| color | Text color | _string_ | +| icon `v4.8.6` | Icon name or URL | _string_ | +| className | className for the option | _string \| Array \| object_ | +| loading | Whether to be loading status | _boolean_ | +| disabled | Whether to be disabled | _boolean_ | +| callback | Callback function after clicked | _action: ActionSheetAction_ | ### Events @@ -253,6 +289,8 @@ The component provides the following CSS variables, which can be used to customi | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - | | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - | | --van-action-sheet-item-disabled-text-color | _var(--van-text-color-3)_ | - | +| --van-action-sheet-item-icon-size | _18px_ | - | +| --van-action-sheet-item-icon-margin-right | _var(--van-padding-xs)_ | - | | --van-action-sheet-subname-color | _var(--van-text-color-2)_ | - | | --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - | | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - | diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md index fc09a7d11b2..128f8f81162 100644 --- a/packages/vant/src/action-sheet/README.zh-CN.md +++ b/packages/vant/src/action-sheet/README.zh-CN.md @@ -55,6 +55,41 @@ export default { }; ``` +### 展示图标 + +使用 `actions` 的 `icon` 字段可以为选项设置图标。 + +```html + + +``` + +```js +import { ref } from 'vue'; +import { showToast } from 'vant'; + +export default { + setup() { + const show = ref(false); + const actions = [ + { name: '选项一', icon: 'cart-o' }, + { name: '选项二', icon: 'shop-o' }, + { name: '选项三', icon: 'star-o' }, + ]; + const onSelect = (item) => { + show.value = false; + showToast(item.name); + }; + + return { + show, + actions, + onSelect, + }; + }, +}; +``` + ### 展示取消按钮 设置 `cancel-text` 属性后,会在底部展示取消按钮,点击后关闭当前面板并触发 `cancel` 事件。 @@ -207,15 +242,16 @@ export default { `actions` 属性是一个由对象构成的数组,数组中的每个对象配置一列,对象可以包含以下值: -| 键名 | 说明 | 类型 | -| --------- | ------------------------ | --------------------------- | -| name | 标题 | _string_ | -| subname | 二级标题 | _string_ | -| color | 选项文字颜色 | _string_ | -| className | 为对应列添加额外的 class | _string \| Array \| object_ | -| loading | 是否为加载状态 | _boolean_ | -| disabled | 是否为禁用状态 | _boolean_ | -| callback | 点击时触发的回调函数 | _action: ActionSheetAction_ | +| 键名 | 说明 | 类型 | +| ------------- | ------------------------ | --------------------------- | +| name | 标题 | _string_ | +| subname | 二级标题 | _string_ | +| color | 选项文字颜色 | _string_ | +| icon `v4.8.6` | 选项图标名称或图片链接 | _string_ | +| className | 为对应列添加额外的 class | _string \| Array \| object_ | +| loading | 是否为加载状态 | _boolean_ | +| disabled | 是否为禁用状态 | _boolean_ | +| callback | 点击时触发的回调函数 | _action: ActionSheetAction_ | ### Events @@ -265,6 +301,8 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant'; | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - | | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - | | --van-action-sheet-item-disabled-text-color | _var(--van-text-color-3)_ | - | +| --van-action-sheet-item-icon-size | _18px_ | - | +| --van-action-sheet-item-icon-margin-right | _var(--van-padding-xs)_ | - | | --van-action-sheet-subname-color | _var(--van-text-color-2)_ | - | | --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - | | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - | diff --git a/packages/vant/src/action-sheet/demo/index.vue b/packages/vant/src/action-sheet/demo/index.vue index af0a8c5cbda..f297e5b1269 100644 --- a/packages/vant/src/action-sheet/demo/index.vue +++ b/packages/vant/src/action-sheet/demo/index.vue @@ -11,6 +11,7 @@ const t = useTranslate({ option2: '选项二', option3: '选项三', subname: '描述信息', + showIcon: '展示图标', showCancel: '展示取消按钮', buttonText: '弹出菜单', customPanel: '自定义面板', @@ -25,6 +26,7 @@ const t = useTranslate({ option2: 'Option 2', option3: 'Option 3', subname: 'Description', + showIcon: 'Show Icon', showCancel: 'Show Cancel Button', buttonText: 'Show ActionSheet', customPanel: 'Custom Panel', @@ -36,6 +38,7 @@ const t = useTranslate({ }, }); const showBasic = ref(false); +const showIcon = ref(false); const showCancel = ref(false); const showTitle = ref(false); const showStatus = ref(false); @@ -47,6 +50,12 @@ const simpleActions = computed(() => [ { name: t('option3') }, ]); +const iconActions = computed(() => [ + { name: t('option1'), icon: 'cart-o' }, + { name: t('option2'), icon: 'shop-o' }, + { name: t('option3'), icon: 'star-o' }, +]); + const statusActions = computed(() => [ { name: t('coloredOption'), color: '#ee0a24' }, { name: t('disabledOption'), disabled: true }, @@ -64,12 +73,18 @@ const onSelect = (item: ActionSheetAction) => { showToast(item.name); }; +const onSelectIcon = (item: ActionSheetAction) => { + showIcon.value = false; + showToast(item.name); +}; + const onCancel = () => showToast(t('cancel'));