Compare commits

..

2 Commits

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

View File

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

View File

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

View File

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

View File

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

View File

@ -7,7 +7,7 @@ on:
pull_request:
branches:
- main
- dev
workflow_dispatch:

View File

@ -92,15 +92,16 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
## Community Ecosystem
| Project | Description |
| --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -111,7 +112,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
- [Documentation](https://vant-ui.github.io/vant)
- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
- [Discussions](https://github.com/vant-ui/vant/discussions)
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## Preview

View File

@ -98,9 +98,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
## 社区生态
@ -109,6 +109,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| 项目 | 描述 |
| --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 框架移动端组件库 |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -119,8 +120,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
- [详细文档](https://vant-contrib.gitee.io/vant)
- [更新日志](https://vant-contrib.gitee.io/vant#/zh-CN/changelog)
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## 手机预览

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "create-vant-cli-app",
"version": "2.1.0",
"version": "2.0.1",
"description": "Create Vant CLI App",
"main": "lib/index.js",
"bin": {

View File

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

View File

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

View File

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

View File

@ -1,29 +1,14 @@
# 更新日志
## v5.0.2
`2022-10-07`
- 修复首次运行 dev 时 vite 引入了两份 Vue 代码导致渲染失败的问题
## v5.0.1
`2022-10-06`
- 修复 jest 版本未正确升级的问题
## v5.0.0
## v5.0.0 (未发布)
### 依赖升级
`2022-10-06`
对以下依赖进行了大版本升级:
- vite: 由 v2 升级至 v3
- jest: 由 v27 升级至 v29
- @vitejs/plugin-vue: 由 v2 升级至 v3
- @vitejs/plugin-vue-jsx: 由 v1 升级至 v2
- vite v3
- @vitejs/plugin-vue v3
- @vitejs/plugin-vue-jsx v2
### 依赖精简

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "@vant/cli",
"version": "5.0.2",
"version": "4.0.4",
"type": "module",
"main": "lib/index.js",
"typings": "lib/index.d.ts",
@ -39,7 +39,7 @@
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {
"@jest/types": "^29.1.2",
"@jest/types": "^27.5.1",
"@types/fs-extra": "^9.0.13",
"@types/less": "^3.0.3",
"@types/markdown-it": "^12.2.3",
@ -52,7 +52,7 @@
"@babel/preset-typescript": "^7.18.6",
"@docsearch/css": "^3.2.1",
"@docsearch/js": "^3.2.1",
"@types/jest": "^29.1.1",
"@types/jest": "^27.5.2",
"@vant/eslint-config": "^3.5.0",
"@vant/touch-emulator": "^1.4.0",
"@vitejs/plugin-vue": "^3.0.3",
@ -62,7 +62,7 @@
"commander": "^9.4.0",
"consola": "^2.15.3",
"conventional-changelog": "^3.1.25",
"esbuild": "^0.15.9",
"esbuild": "^0.14.54",
"eslint": "^8.23.0",
"execa": "^5.1.1",
"fast-glob": "^3.2.11",
@ -70,10 +70,9 @@
"hash-sum": "^2.0.0",
"highlight.js": "^11.6.0",
"husky": "^8.0.1",
"jest": "^29.1.2",
"jest": "^27.5.1",
"jest-canvas-mock": "^2.4.0",
"jest-serializer-html": "^7.1.0",
"jest-environment-jsdom": "^29.1.2",
"less": "^4.1.3",
"markdown-it": "^12.3.2",
"markdown-it-anchor": "^8.6.4",
@ -86,7 +85,7 @@
"release-it": "^15.4.1",
"transliteration": "^2.3.5",
"typescript": "^4.8.2",
"vite": "3.0.9",
"vite": "^3.0.9",
"vite-plugin-html": "^2.1.2",
"vite-plugin-md": "^0.11.9",
"vue-router": "^4.1.5"

View File

@ -1,4 +1,4 @@
:root {
body {
// colors
--van-doc-black: #000;
--van-doc-white: #fff;

View File

@ -138,8 +138,8 @@ export default {
currentTheme: {
handler(newVal, oldVal) {
window.localStorage.setItem('vantTheme', newVal);
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
document.documentElement.classList.add(`van-doc-theme-${newVal}`);
document.body.classList.remove(`van-doc-theme-${oldVal}`);
document.body.classList.add(`van-doc-theme-${newVal}`);
syncThemeToChild(newVal);
},
immediate: true,

View File

@ -24,21 +24,12 @@ export default {
watch(
theme,
(newVal, oldVal) => {
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
document.documentElement.classList.add(`van-doc-theme-${newVal}`);
document.body.classList.remove(`van-doc-theme-${oldVal}`);
document.body.classList.add(`van-doc-theme-${newVal}`);
const { darkModeClass, lightModeClass } = config.site;
const { darkModeClass } = config.site;
if (darkModeClass) {
document.documentElement.classList.toggle(
darkModeClass,
newVal === 'dark'
);
}
if (lightModeClass) {
document.documentElement.classList.toggle(
lightModeClass,
newVal === 'light'
);
document.body.classList.toggle(darkModeClass, newVal === 'dark');
}
},
{ immediate: true }
@ -52,7 +43,6 @@ export default {
body {
min-width: 100vw;
background-color: inherit;
}
.van-doc-theme-light {

View File

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

View File

@ -144,11 +144,6 @@ export function getViteConfigForSiteDev(): InlineConfig {
return {
root: SITE_SRC_DIR,
optimizeDeps: {
// https://github.com/youzan/vant/issues/10930
include: ['vue', 'vue-router'],
},
plugins: [
vitePluginGenVantBaseCode(),
vitePluginVue({

View File

@ -39,7 +39,7 @@
"@vue/runtime-core": "^3.2.27",
"vant": "workspace:*",
"vue": "^3.2.27",
"esbuild": "^0.15.9",
"esbuild": "^0.14.29",
"release-it": "^15.1.1",
"typescript": "^4.7.4"
},

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -19,62 +19,6 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
## Details
### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
`2022-09-25`
**Feature**
- Field: add message param to 'end-validate' method [#11080](https://github.com/vant-ui/vant/issues/11080)
**Bug Fixes**
- Tabs: incorrect scroll position in some cases [#11085](https://github.com/vant-ui/vant/issues/11085)
- Tabs: incorrect scroll position when inited [#11059](https://github.com/vant-ui/vant/issues/11059)
### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
`2022-09-12`
**Feature**
- ConfigProvider: add ConfigProviderThemeVars type [#11034](https://github.com/vant-ui/vant/issues/11034)
- Notify: add z-index prop [#11032](https://github.com/vant-ui/vant/issues/11032)
- remove popperjs to reduce install size [#11030](https://github.com/vant-ui/vant/issues/11030)
**Types**
- Toast: fix missing global components type [#11033](https://github.com/vant-ui/vant/issues/11033)
### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
`2022-09-11`
**Breaking Changes**
- attach css variables to :root element [#11026](https://github.com/vant-ui/vant/issues/11026)
**Bug Fixes**
- Dialog: incorrect transform behavior [#11028](https://github.com/vant-ui/vant/issues/11028)
- Empty: fix opacity in dark mode [#11027](https://github.com/vant-ui/vant/issues/11027)
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
`2022-09-10`
**Feature**
- export props of all components [#11024](https://github.com/vant-ui/vant/issues/11024)
- Dialog: message-align can be justify [#11014](https://github.com/vant-ui/vant/issues/11014)
- Image: add block prop [#11022](https://github.com/vant-ui/vant/issues/11022)
- Toast: add message slot [#11018](https://github.com/vant-ui/vant/issues/11018)
**Bug Fixes**
- Picker: failed to update value in some cases [#11009](https://github.com/vant-ui/vant/issues/11009)
- Locale: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
`2022-09-04`

View File

@ -19,62 +19,6 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
## 更新内容
### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
`2022-09-25`
**Feature**
- Field: end-validate 事件新增 message 参数 [#11080](https://github.com/vant-ui/vant/issues/11080)
**Bug Fixes**
- Tabs: 修复个别情况下页面滚动位置错误的问题 [#11085](https://github.com/vant-ui/vant/issues/11085)
- Tabs: 修复初始化时菜单横向滚动位置错误的问题 [#11059](https://github.com/vant-ui/vant/issues/11059)
### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
`2022-09-12`
**Feature**
- ConfigProvider: 新增 ConfigProviderThemeVars 类型 [#11034](https://github.com/vant-ui/vant/issues/11034)
- Notify: 新增 z-index 属性 [#11032](https://github.com/vant-ui/vant/issues/11032)
- 移除 `@popperjs/core` 依赖,减少安装体积 1.6MB [#11030](https://github.com/vant-ui/vant/issues/11030)
**Types**
- Toast: 修复缺少全局类型定义的问题 [#11033](https://github.com/vant-ui/vant/issues/11033)
### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
`2022-09-11`
**Breaking Changes**
- 调整了所有 CSS 变量的挂载位置,由 `body` 节点调整回 `:root` 节点,调整后与 Vant v3 版本保持一致,以便于 v3 项目更平滑地升级到 v4 版本。 [#11026](https://github.com/vant-ui/vant/issues/11026)
**Bug Fixes**
- Dialog: 修复过渡动画异常的问题 [#11028](https://github.com/vant-ui/vant/issues/11028)
- Empty: 修复深色模式下亮度过高的问题 [#11027](https://github.com/vant-ui/vant/issues/11027)
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
`2022-09-10`
**Feature**
- 导出所有组件的 props方便进行二次封装 [#11024](https://github.com/vant-ui/vant/issues/11024)
- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
- Toast: 新增 message 插槽 [#11018](https://github.com/vant-ui/vant/issues/11018)
**Bug Fixes**
- Picker: 修复部分情况下未正确更新选中值的问题 [#11009](https://github.com/vant-ui/vant/issues/11009)
- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
`2022-09-04`

View File

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

View File

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

View File

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

View File

@ -41,15 +41,16 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Community Ecosystem
| Project | Description |
| --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React Mobile UI Components Library |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -60,7 +61,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
- [Feedback](https://github.com/vant-ui/vant/issues)
- [Changelog](#/en-US/changelog)
- [Discussions](https://github.com/vant-ui/vant/discussions)
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## Contribution
@ -82,7 +83,7 @@ Thanks to the following friends for their contributions to Vant:
### Contribution Guide
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/main/.github/CONTRIBUTING.md) before making a pull request.
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
### LICENSE

View File

@ -53,9 +53,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
### 社区生态
@ -64,6 +64,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| 项目 | 描述 |
| --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 基于 Vant 的 React 版本移动端 UI 组件库 |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -74,8 +75,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
- [意见反馈](https://github.com/vant-ui/vant/issues)
- [更新日志](#/zh-CN/changelog)
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
- [码云镜像](https://gitee.com/vant-contrib/vant)
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## 贡献

View File

@ -1,6 +1,6 @@
{
"name": "vant",
"version": "4.0.0-rc.5",
"version": "4.0.0-rc.0",
"description": "Mobile UI Components built on Vue",
"main": "lib/vant.cjs.js",
"module": "es/index.mjs",
@ -47,19 +47,19 @@
"components"
],
"dependencies": {
"@vant/popperjs": "^1.3.0",
"@vant/use": "^1.4.3"
"@vant/icons": "^1.8.0",
"@vant/popperjs": "^1.2.1",
"@vant/use": "^1.4.2"
},
"peerDependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@types/jest": "^29.1.1",
"@types/jest": "^27.0.0",
"@vant/area-data": "workspace:*",
"@vant/cli": "workspace:*",
"@vant/eslint-config": "workspace:*",
"@vant/icons": "workspace:*",
"@vue/runtime-core": "^3.2.38",
"@vue/test-utils": "^2.0.2",
"typescript": "^4.8.2",

View File

@ -1,4 +1,4 @@
:root {
body {
--van-action-bar-button-height: 40px;
--van-action-bar-button-warning-color: var(--van-gradient-orange);
--van-action-bar-button-danger-color: var(--van-gradient-red);

View File

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

View File

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

View File

@ -1,4 +1,4 @@
:root {
body {
--van-action-bar-icon-width: 48px;
--van-action-bar-icon-height: 100%;
--van-action-bar-icon-color: var(--van-text-color);

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +0,0 @@
export type ActionBarThemeVars = {
actionBarBackground?: string;
actionBarHeight?: string;
};

View File

@ -179,7 +179,6 @@ export default {
| closeable | Whether to show close icon | _boolean_ | `true` |
| close-icon | Close icon name | _string_ | `cross` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| round | Whether to show round corner | _boolean_ | `true` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |

View File

@ -189,7 +189,6 @@ export default {
| closeable | 是否显示关闭图标 | _boolean_ | `true` |
| close-icon | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| duration | 动画时长,单位秒,设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
| z-index | 将面板的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` |
| round | 是否显示圆角 | _boolean_ | `true` |
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
| overlay-class | 自定义遮罩层类名 | _string \| Array \| object_ | - |

View File

@ -1,6 +1,6 @@
@import '../style/mixins/hairline';
:root {
body {
--van-action-sheet-max-height: 80%;
--van-action-sheet-header-height: 48px;
--van-action-sheet-header-font-size: var(--van-font-size-lg);

View File

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

View File

@ -1,23 +0,0 @@
export type ActionSheetThemeVars = {
actionSheetMaxHeight?: string;
actionSheetHeaderHeight?: string;
actionSheetHeaderFontSize?: string;
actionSheetDescriptionColor?: string;
actionSheetDescriptionFontSize?: string;
actionSheetDescriptionLineHeight?: number | string;
actionSheetItemBackground?: string;
actionSheetItemFontSize?: string;
actionSheetItemLineHeight?: number | string;
actionSheetItemTextColor?: string;
actionSheetItemDisabledTextColor?: string;
actionSheetSubnameColor?: string;
actionSheetSubnameFontSize?: string;
actionSheetSubnameLineHeight?: number | string;
actionSheetCloseIconSize?: string;
actionSheetCloseIconColor?: string;
actionSheetCloseIconPadding?: string;
actionSheetCancelTextColor?: string;
actionSheetCancelPaddingTop?: string;
actionSheetCancelPaddingColor?: string;
actionSheetLoadingIconSize?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-address-edit-padding: var(--van-padding-sm);
--van-address-edit-buttons-padding: var(--van-padding-xl)
var(--van-padding-base);

View File

@ -8,7 +8,6 @@ export type { AddressEditProps };
export type {
AddressEditInfo,
AddressEditInstance,
AddressEditThemeVars,
AddressEditSearchItem,
} from './types';

View File

@ -27,10 +27,3 @@ export type AddressEditInstance = ComponentPublicInstance<
AddressEditProps,
AddressEditExpose
>;
export type AddressEditThemeVars = {
addressEditPadding?: string;
addressEditButtonsPadding?: string;
addressEditButtonMarginBottom?: string;
addressEditButtonFontSize?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
--van-address-list-disabled-text-color: var(--van-text-color-2);
--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;

View File

@ -6,7 +6,6 @@ export default AddressList;
export { addressListProps } from './AddressList';
export type { AddressListProps } from './AddressList';
export type { AddressListAddress } from './AddressListItem';
export type { AddressListThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,15 +0,0 @@
export type AddressListThemeVars = {
addressListPadding?: string;
addressListDisabledTextColor?: string;
addressListDisabledTextPadding?: string;
addressListDisabledTextFontSize?: string;
addressListDisabledTextLineHeight?: number | string;
addressListAddButtonZIndex?: number | string;
addressListItemPadding?: string;
addressListItemTextColor?: string;
addressListItemDisabledTextColor?: string;
addressListItemFontSize?: string;
addressListItemLineHeight?: number | string;
addressListRadioColor?: string;
addressListEditIconSize?: string;
};

View File

@ -52,7 +52,7 @@ export default {
### @vant/area-data
Vant officially provides a default China area data, which can be imported through [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data):
Vant officially provides a default China area data, which can be imported through [@vant/area-data](https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data):
```bash
# with npm

View File

@ -54,7 +54,7 @@ const areaList = {
### @vant/area-data
Vant 官方提供了一份默认的中国省市区数据,可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data) 引入:
Vant 官方提供了一份默认的中国省市区数据,可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data) 引入:
```bash
# 通过 npm

View File

@ -1,4 +1,4 @@
:root {
body {
--van-badge-size: 16px;
--van-badge-color: var(--van-white);
--van-badge-padding: 0 3px;

View File

@ -5,7 +5,6 @@ export const Badge = withInstall(_Badge);
export default Badge;
export { badgeProps } from './Badge';
export type { BadgeProps, BadgePosition } from './Badge';
export type { BadgeThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,12 +0,0 @@
export type BadgeThemeVars = {
badgeSize?: string;
badgeColor?: string;
badgePadding?: string;
badgeFontSize?: string;
badgeFontWeight?: string;
badgeBorderWidth?: string;
badgeBackground?: string;
badgeDotColor?: string;
badgeDotSize?: string;
badgeFont?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-button-mini-height: 24px;
--van-button-mini-padding: 0 var(--van-padding-base);
--van-button-mini-font-size: var(--van-font-size-xs);

View File

@ -8,7 +8,6 @@ export type { ButtonProps } from './Button';
export type {
ButtonType,
ButtonSize,
ButtonThemeVars,
ButtonNativeType,
ButtonIconPosition,
} from './types';

View File

@ -12,40 +12,3 @@ export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
export type ButtonIconPosition = 'left' | 'right';
export type ButtonThemeVars = {
buttonMiniHeight?: string;
buttonMiniPadding?: string;
buttonMiniFontSize?: string;
buttonSmallHeight?: string;
buttonSmallPadding?: string;
buttonSmallFontSize?: string;
buttonNormalPadding?: string;
buttonNormalFontSize?: string;
buttonLargeHeight?: string;
buttonDefaultHeight?: string;
buttonDefaultLineHeight?: number | string;
buttonDefaultFontSize?: string;
buttonDefaultColor?: string;
buttonDefaultBackground?: string;
buttonDefaultBorderColor?: string;
buttonPrimaryColor?: string;
buttonPrimaryBackground?: string;
buttonPrimaryBorderColor?: string;
buttonSuccessColor?: string;
buttonSuccessBackground?: string;
buttonSuccessBorderColor?: string;
buttonDangerColor?: string;
buttonDangerBackground?: string;
buttonDangerBorderColor?: string;
buttonWarningColor?: string;
buttonWarningBackground?: string;
buttonWarningBorderColor?: string;
buttonBorderWidth?: string;
buttonRadius?: string;
buttonRoundRadius?: string;
buttonPlainBackground?: string;
buttonDisabledOpacity?: number | string;
buttonIconSize?: string;
buttonLoadingIconSize?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-calendar-background: var(--van-background-2);
--van-calendar-popup-height: 80%;
--van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);

View File

@ -10,7 +10,6 @@ export type {
CalendarDayItem,
CalendarDayType,
CalendarInstance,
CalendarThemeVars,
} from './types';
declare module 'vue' {

View File

@ -48,32 +48,3 @@ export type CalendarMonthInstance = ComponentPublicInstance<
disabledDays: Ref<ComputedRef<CalendarDayItem[]>>;
}
>;
export type CalendarThemeVars = {
calendarBackground?: string;
calendarPopupHeight?: string;
calendarHeaderShadow?: string;
calendarHeaderTitleHeight?: string;
calendarHeaderTitleFontSize?: string;
calendarHeaderSubtitleFontSize?: string;
calendarWeekdaysHeight?: string;
calendarWeekdaysFontSize?: string;
calendarMonthTitleFontSize?: string;
calendarMonthMarkColor?: string;
calendarMonthMarkFontSize?: string;
calendarDayHeight?: string;
calendarDayFontSize?: string;
calendarDayMarginBottom?: string;
calendarRangeEdgeColor?: string;
calendarRangeEdgeBackground?: string;
calendarRangeMiddleColor?: string;
calendarRangeMiddleBackgroundOpacity?: number | string;
calendarSelectedDaySize?: string;
calendarSelectedDayColor?: string;
calendarInfoFontSize?: string;
calendarInfoLineHeight?: number | string;
calendarSelectedDayBackground?: string;
calendarDayDisabledColor?: string;
calendarConfirmButtonHeight?: string;
calendarConfirmButtonMargin?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-card-padding: var(--van-padding-xs) var(--van-padding-md);
--van-card-font-size: var(--van-font-size-sm);
--van-card-text-color: var(--van-text-color);

View File

@ -5,7 +5,6 @@ export const Card = withInstall(_Card);
export default Card;
export { cardProps } from './Card';
export type { CardProps } from './Card';
export type { CardThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,18 +0,0 @@
export type CardThemeVars = {
cardPadding?: string;
cardFontSize?: string;
cardTextColor?: string;
cardBackground?: string;
cardThumbSize?: string;
cardThumbRadius?: string;
cardTitleLineHeight?: number | string;
cardDescColor?: string;
cardDescLineHeight?: number | string;
cardPriceColor?: string;
cardOriginPriceColor?: string;
cardNumColor?: string;
cardOriginPriceFontSize?: string;
cardPriceFontSize?: string;
cardPriceIntegerFontSize?: string;
cardPriceFont?: string;
};

View File

@ -255,7 +255,7 @@ export default {
| closeable | Whether to show close icon | _boolean_ | `true` |
| show-header `v3.4.2` | Whether to show header | _boolean_ | `true` |
| close-icon `v3.0.10` | Close icon name | _string_ | `cross` |
| field-names `v3.0.4` | Custom the fields of options | _CascaderFieldNames_ | `{ text: 'text', value: 'value', children: 'children' }` |
| field-names `v3.0.4` | Custom the fields of options | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
### Data Structure of CascaderOption

View File

@ -265,7 +265,7 @@ export default {
| closeable | 是否显示关闭图标 | _boolean_ | `true` |
| show-header `v3.4.2` | 是否展示标题栏 | _boolean_ | `true` |
| close-icon `v3.0.10` | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _CascaderFieldNames_ | `{ text: 'text', value: 'value', children: 'children' }` |
| field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
### CascaderOption 数据结构

View File

@ -1,4 +1,4 @@
:root {
body {
--van-cascader-header-height: 48px;
--van-cascader-header-padding: 0 var(--van-padding-md);
--van-cascader-title-font-size: var(--van-font-size-lg);

View File

@ -5,11 +5,7 @@ export const Cascader = withInstall(_Cascader);
export default Cascader;
export { cascaderProps } from './Cascader';
export type { CascaderProps } from './Cascader';
export type {
CascaderOption,
CascaderThemeVars,
CascaderFieldNames,
} from './types';
export type { CascaderOption, CascaderFieldNames } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -111,7 +111,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__panel-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"

View File

@ -21,19 +21,3 @@ export type CascaderFieldNames = {
value?: string;
children?: string;
};
export type CascaderThemeVars = {
cascaderHeaderHeight?: string;
cascaderHeaderPadding?: string;
cascaderTitleFontSize?: string;
cascaderTitleLineHeight?: number | string;
cascaderCloseIconSize?: string;
cascaderCloseIconColor?: string;
cascaderSelectedIconSize?: string;
cascaderTabsHeight?: string;
cascaderActiveColor?: string;
cascaderOptionsHeight?: string;
cascaderOptionDisabledColor?: string;
cascaderTabColor?: string;
cascaderUnselectedTabColor?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-cell-group-background: var(--van-background-2);
--van-cell-group-title-color: var(--van-text-color-2);
--van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);

View File

@ -5,7 +5,6 @@ export const CellGroup = withInstall(_CellGroup);
export default CellGroup;
export { cellGroupProps } from './CellGroup';
export type { CellGroupProps } from './CellGroup';
export type { CellGroupThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,10 +0,0 @@
export type CellGroupThemeVars = {
cellGroupBackground?: string;
cellGroupTitleColor?: string;
cellGroupTitlePadding?: string;
cellGroupTitleFontSize?: string;
cellGroupTitleLineHeight?: number | string;
cellGroupInsetPadding?: string;
cellGroupInsetRadius?: string;
cellGroupInsetTitlePadding?: string;
};

View File

@ -1,6 +1,6 @@
@import '../style/mixins/hairline';
:root {
body {
--van-cell-font-size: var(--van-font-size-md);
--van-cell-line-height: 24px;
--van-cell-vertical-padding: 10px;

View File

@ -5,7 +5,6 @@ export const Cell = withInstall(_Cell);
export default Cell;
export { cellProps } from './Cell';
export type { CellSize, CellProps, CellArrowDirection } from './Cell';
export type { CellThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,21 +0,0 @@
export type CellThemeVars = {
cellFontSize?: string;
cellLineHeight?: number | string;
cellVerticalPadding?: string;
cellHorizontalPadding?: string;
cellTextColor?: string;
cellBackground?: string;
cellBorderColor?: string;
cellActiveColor?: string;
cellRequiredColor?: string;
cellLabelColor?: string;
cellLabelFontSize?: string;
cellLabelLineHeight?: number | string;
cellLabelMarginTop?: string;
cellValueColor?: string;
cellIconSize?: string;
cellRightIconColor?: string;
cellLargeVerticalPadding?: string;
cellLargeTitleFontSize?: string;
cellLargeLabelFontSize?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-checkbox-size: 20px;
--van-checkbox-border-color: var(--van-gray-5);
--van-checkbox-duration: var(--van-duration-fast);

View File

@ -8,7 +8,6 @@ export type { CheckboxProps } from './Checkbox';
export type {
CheckboxShape,
CheckboxInstance,
CheckboxThemeVars,
CheckboxLabelPosition,
} from './types';

View File

@ -17,15 +17,3 @@ export type CheckboxInstance = ComponentPublicInstance<
CheckboxProps,
CheckboxExpose
>;
export type CheckboxThemeVars = {
checkboxSize?: string;
checkboxBorderColor?: string;
checkboxDuration?: string;
checkboxLabelMargin?: string;
checkboxLabelColor?: string;
checkboxCheckedIconColor?: string;
checkboxDisabledIconColor?: string;
checkboxDisabledLabelColor?: string;
checkboxDisabledBackground?: string;
};

View File

@ -1,4 +1,4 @@
:root {
body {
--van-circle-size: 100px;
--van-circle-color: var(--van-primary-color);
--van-circle-layer-color: var(--van-white);

View File

@ -5,7 +5,6 @@ export const Circle = withInstall(_Circle);
export default Circle;
export { circleProps } from './Circle';
export type { CircleProps, CircleStartPosition } from './Circle';
export type { CircleThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,9 +0,0 @@
export type CircleThemeVars = {
circleSize?: string;
circleColor?: string;
circleLayerColor?: string;
circleTextColor?: string;
circleTextFontWeight?: string;
circleTextFontSize?: string;
circleTextLineHeight?: number | string;
};

View File

@ -1,6 +1,6 @@
@import '../style/mixins/hairline';
:root {
body {
--van-collapse-item-duration: var(--van-duration-base);
--van-collapse-item-content-padding: var(--van-padding-sm)
var(--van-padding-md);

View File

@ -5,7 +5,7 @@ export const CollapseItem = withInstall(_CollapseItem);
export default CollapseItem;
export { collapseItemProps } from './CollapseItem';
export type { CollapseItemProps } from './CollapseItem';
export type { CollapseItemInstance, CollapseItemThemeVars } from './types';
export type { CollapseItemInstance } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -9,13 +9,3 @@ export type CollapseItemInstance = ComponentPublicInstance<
CollapseItemProps,
CollapseItemExpose
>;
export type CollapseItemThemeVars = {
collapseItemDuration?: string;
collapseItemContentPadding?: string;
collapseItemContentFontSize?: string;
collapseItemContentLineHeight?: number | string;
collapseItemContentTextColor?: string;
collapseItemContentBackground?: string;
collapseItemTitleDisabledColor?: string;
};

View File

@ -73,10 +73,10 @@ export default defineComponent({
if (inBrowser) {
const addTheme = () => {
document.documentElement.classList.add(`van-theme-${props.theme}`);
document.body.classList.add(`van-theme-${props.theme}`);
};
const removeTheme = (theme = props.theme) => {
document.documentElement.classList.remove(`van-theme-${theme}`);
document.body.classList.remove(`van-theme-${theme}`);
};
watch(

View File

@ -28,15 +28,6 @@ In takes effect globally, making all Vant components on the page dark.
<van-config-provider theme="dark">...</van-config-provider>
```
The theme prop will not change the text-color or background-color of the page, you can set it manually like this:
```css
.van-theme-dark body {
text-color: #f5f5f5;
background-color: black;
}
```
> Tips: The theme prop will not change the background color of the page, you need to set it manually.
### Switch Theme
@ -78,10 +69,10 @@ Looking at the style of the Button component, you can see that the following var
}
```
The default values of these variables are defined on the `:root` node:
The default values of these variables are defined on the `body` node:
```css
:root {
body {
--van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
@ -97,7 +88,7 @@ You can directly override these CSS variables in the code, and the style of the
```css
/* the Primary Button will turn red */
:root {
body {
--van-button-primary-background: red;
}
```
@ -159,18 +150,6 @@ export default {
> Tips: ConfigProvider only affects its child components.
#### Use In TypeScript
Using `ConfigProviderThemeVars` type to get code intellisense.
```ts
import type { ConfigProviderThemeVars } from 'vant';
const themeVars: ConfigProviderThemeVars = {
sliderBarHeight: '4px',
};
```
### Combining dark mode with CSS variables
If you need to define CSS variables for dark mode or light mode separately, you can use the `theme-vars-dark` and `theme-vars-light` props.
@ -218,10 +197,8 @@ CSS variables in Vant are divided into **basic variables** and **component varia
#### Modify Basic Variables
- The basic variables can only be modified through the `:root` selector.
- The component variables can be modified through the `:root` selector and `ConfigProvider` component.
You can also use the `.van-theme-light` and `.van-theme-dark` class selector to modify basic or component variables in light or dark mode individually.
- The basic variables can only be modified through the `body` selector.
- The component variables can be modified through the `body` selector and `ConfigProvider` component.
#### Variables List
@ -322,9 +299,5 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
The component exports the following type definitions:
```ts
import type {
ConfigProviderProps,
ConfigProviderTheme,
ConfigProviderThemeVars,
} from 'vant';
import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
```

View File

@ -28,14 +28,7 @@ app.use(ConfigProvider);
<van-config-provider theme="dark">...</van-config-provider>
```
值得注意的是,开启 Vant 的深色模式只会影响 Vant 组件的 UI并不会影响全局的文字颜色或背景颜色你可以参考以下 CSS 来设置一些全局样式:
```css
.van-theme-dark body {
text-color: #f5f5f5;
background-color: black;
}
```
> Tips: 开启深色模式不会改变页面的背景色,需要手动进行设置。
### 动态切换
@ -76,10 +69,10 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
}
```
这些变量的默认值被定义在 `:root` 节点上HTML 里的所有子节点都可以访问到这些变量:
这些变量的默认值被定义在 `body` 节点上body 下所有子节点都可以访问到这些变量:
```css
:root {
body {
--van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
@ -95,7 +88,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
```css
/* 添加这段样式后Primary Button 会变成红色 */
:root {
body {
--van-button-primary-background: red;
}
```
@ -155,19 +148,7 @@ export default {
};
```
> 注意ConfigProvider 仅影响它的子组件的样式,不影响全局 root 节点。
#### 在 TypeScript 中使用
在 TypeScript 中定义 themeVars 时,建议使用 Vant 提供的 `ConfigProviderThemeVars` 类型,可以提供完善的类型提示:
```ts
import type { ConfigProviderThemeVars } from 'vant';
const themeVars: ConfigProviderThemeVars = {
sliderBarHeight: '4px',
};
```
> 注意ConfigProvider 仅影响它的子组件的样式,不影响全局 body 节点。
### 结合深色模式与 CSS 变量
@ -218,10 +199,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
由于 CSS 变量继承机制的原因,两者的修改方式有一定差异:
- 基础变量只能通过 `:root 选择器` 修改,不能通过 `ConfigProvider 组件` 修改。
- 组件变量可以通过 `:root 选择器``ConfigProvider 组件` 修改。
你也可以使用 `.van-theme-light``.van-theme-dark` 这两个类名选择器来单独修改浅色或深色模式下的基础变量和组件变量。
- 基础变量只能通过 `body 选择器` 修改,不能通过 `ConfigProvider 组件` 修改。
- 组件变量可以通过 `body 选择器``ConfigProvider 组件` 修改。
#### 变量列表
@ -324,9 +303,5 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
组件导出以下类型定义:
```ts
import type {
ConfigProviderProps,
ConfigProviderTheme,
ConfigProviderThemeVars,
} from 'vant';
import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
```

View File

@ -8,7 +8,6 @@ export type {
ConfigProviderProps,
ConfigProviderTheme,
} from './ConfigProvider';
export type { ConfigProviderThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

@ -1,72 +0,0 @@
export type ConfigProviderThemeVars =
import('../action-bar').ActionBarThemeVars &
import('../action-bar-button').ActionBarButtonThemeVars &
import('../action-bar-icon').ActionBarIconThemeVars &
import('../action-sheet').ActionSheetThemeVars &
import('../address-edit').AddressEditThemeVars &
import('../address-list').AddressListThemeVars &
import('../badge').BadgeThemeVars &
import('../button').ButtonThemeVars &
import('../calendar').CalendarThemeVars &
import('../card').CardThemeVars &
import('../cascader').CascaderThemeVars &
import('../cell').CellThemeVars &
import('../cell-group').CellGroupThemeVars &
import('../checkbox').CheckboxThemeVars &
import('../circle').CircleThemeVars &
import('../collapse-item').CollapseItemThemeVars &
import('../contact-card').ContactCardThemeVars &
import('../contact-edit').ContactEditThemeVars &
import('../contact-list').ContactListThemeVars &
import('../count-down').CountDownThemeVars &
import('../coupon').CouponThemeVars &
import('../coupon-cell').CouponCellThemeVars &
import('../coupon-list').CouponListThemeVars &
import('../dialog').DialogThemeVars &
import('../divider').DividerThemeVars &
import('../dropdown-item').DropdownItemThemeVars &
import('../dropdown-menu').DropdownMenuThemeVars &
import('../empty').EmptyThemeVars &
import('../field').FieldThemeVars &
import('../grid-item').GridItemThemeVars &
import('../image').ImageThemeVars &
import('../image-preview').ImagePreviewThemeVars &
import('../index-anchor').IndexAnchorThemeVars &
import('../index-bar').IndexBarThemeVars &
import('../list').ListThemeVars &
import('../loading').LoadingThemeVars &
import('../nav-bar').NavBarThemeVars &
import('../notice-bar').NoticeBarThemeVars &
import('../notify').NotifyThemeVars &
import('../number-keyboard').NumberKeyboardThemeVars &
import('../overlay').OverlayThemeVars &
import('../pagination').PaginationThemeVars &
import('../password-input').PasswordInputThemeVars &
import('../picker').PickerThemeVars &
import('../picker-group').PickerGroupThemeVars &
import('../popover').PopoverThemeVars &
import('../popup').PopupThemeVars &
import('../progress').ProgressThemeVars &
import('../pull-refresh').PullRefreshThemeVars &
import('../radio').RadioThemeVars &
import('../rate').RateThemeVars &
import('../search').SearchThemeVars &
import('../share-sheet').ShareSheetThemeVars &
import('../sidebar').SidebarThemeVars &
import('../sidebar-item').SidebarItemThemeVars &
import('../skeleton').SkeletonThemeVars &
import('../slider').SliderThemeVars &
import('../step').StepThemeVars &
import('../stepper').StepperThemeVars &
import('../steps').StepsThemeVars &
import('../sticky').StickyThemeVars &
import('../submit-bar').SubmitBarThemeVars &
import('../swipe').SwipeThemeVars &
import('../switch').SwitchThemeVars &
import('../tabbar').TabbarThemeVars &
import('../tabbar-item').TabbarItemThemeVars &
import('../tabs').TabsThemeVars &
import('../tag').TagThemeVars &
import('../toast').ToastThemeVars &
import('../tree-select').TreeSelectThemeVars &
import('../uploader').UploaderThemeVars;

View File

@ -1,4 +1,4 @@
:root {
body {
--van-contact-card-padding: var(--van-padding-md);
--van-contact-card-add-icon-size: 40px;
--van-contact-card-add-icon-color: var(--van-primary-color);

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