diff --git a/README.zh-CN.md b/README.zh-CN.md index d65fb66d0..14eaef864 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -27,7 +27,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 -目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。 +目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。 ## 特性 diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index a065f757f..8e01e0829 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -1,6 +1,6 @@ { "name": "@vant/cli", - "version": "4.0.0", + "version": "4.0.1", "type": "module", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/packages/vant-cli/site/common/index.js b/packages/vant-cli/site/common/index.js index dcfb367e9..166c9f1ef 100644 --- a/packages/vant-cli/site/common/index.js +++ b/packages/vant-cli/site/common/index.js @@ -4,7 +4,7 @@ const isMobile = /ios|iphone|ipod|ipad|android/.test(ua); export function decamelize(str, 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])([A-Z][a-z\d]+)/g, '$1' + sep + '$2') .toLowerCase(); } diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index 2bbe6d085..bb027de5c 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/packages/vant-cli/src/common/index.ts @@ -72,7 +72,7 @@ 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])([A-Z][a-z\d]+)/g, '$1' + sep + '$2') .toLowerCase(); } diff --git a/packages/vant-cli/template/changelog-commit.hbs b/packages/vant-cli/template/changelog-commit.hbs index a05524abc..82b43a9fc 100644 --- a/packages/vant-cli/template/changelog-commit.hbs +++ b/packages/vant-cli/template/changelog-commit.hbs @@ -5,7 +5,31 @@ {{~header}} {{~/if}} {{#if references~}} - {{~#each references}} [{{~this.repository}}#{{this.issue}}]({{~@root.repoUrl}}/{{~@root.issue}}/{{this.issue}}){{/each}} -{{~else}} [{{shortHash}}]({{~@root.repoUrl}}/{{~@root.commit}}/{{hash}}) + {{~#each references}} [{{~this.repository}}#{{this.issue}}]( + {{~#if @root.repository}} + {{~#if @root.host}} + {{~@root.host}}/ + {{~/if}} + {{~#if @root.owner}} + {{~@root.owner}}/ + {{~/if}} + {{~@root.repository}} + {{~else}} + {{~@root.repoUrl}} + {{~/if}} +/{{~@root.issue}}/{{this.issue}}){{/each}} +{{~else}} [{{shortHash}}]( +{{~#if @root.repository}} + {{~#if @root.host}} + {{~@root.host}}/ + {{~/if}} + {{~#if @root.owner}} + {{~@root.owner}}/ + {{~/if}} + {{~@root.repository}} +{{~else}} + {{~@root.repoUrl}} +{{~/if}} +/{{~@root.commit}}/{{hash}}) {{~/if}} diff --git a/packages/vant-cli/template/changelog-header.hbs b/packages/vant-cli/template/changelog-header.hbs index bd0a517f9..aa5de66c0 100644 --- a/packages/vant-cli/template/changelog-header.hbs +++ b/packages/vant-cli/template/changelog-header.hbs @@ -1,3 +1,15 @@ -### [v{{version}}]({{~@root.repoUrl}}/compare/{{previousTag}}...{{currentTag}}) +### [v{{version}}]( +{{~#if @root.repository}} + {{~#if @root.host}} + {{~@root.host}}/ + {{~/if}} + {{~#if @root.owner}} + {{~@root.owner}}/ + {{~/if}} + {{~@root.repository}} +{{~else}} + {{~@root.repoUrl}} +{{~/if}} +/compare/{{previousTag}}...{{currentTag}}) `{{date}}` diff --git a/packages/vant-use/changelog.md b/packages/vant-use/changelog.md index baf0cfc9f..50d60899d 100644 --- a/packages/vant-use/changelog.md +++ b/packages/vant-use/changelog.md @@ -1,5 +1,9 @@ # Changelog +## v1.3.6 + +- Fix missing VisibilityState type + ## v1.3.5 - Fix useChildren missing subTree when flattening vnodes diff --git a/packages/vant-use/package.json b/packages/vant-use/package.json index dc2cea308..f6dd0c2c3 100644 --- a/packages/vant-use/package.json +++ b/packages/vant-use/package.json @@ -1,6 +1,6 @@ { "name": "@vant/use", - "version": "1.3.5", + "version": "1.3.6", "description": "Vant Composition API", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", diff --git a/packages/vant-use/src/usePageVisibility/index.ts b/packages/vant-use/src/usePageVisibility/index.ts index e63996815..1cde17165 100644 --- a/packages/vant-use/src/usePageVisibility/index.ts +++ b/packages/vant-use/src/usePageVisibility/index.ts @@ -1,6 +1,8 @@ import { ref, Ref } from 'vue'; import { inBrowser } from '../utils'; +type VisibilityState = 'hidden' | 'visible'; + let visibility: Ref; export function usePageVisibility() { diff --git a/packages/vant/docs/markdown/contribution.zh-CN.md b/packages/vant/docs/markdown/contribution.zh-CN.md index 1c38e9c80..8f2c9d544 100644 --- a/packages/vant/docs/markdown/contribution.zh-CN.md +++ b/packages/vant/docs/markdown/contribution.zh-CN.md @@ -21,8 +21,6 @@ ```bash # 克隆仓库 -# 默认为 dev 分支，对应 Vant 3 的代码 -# 如果需要在 Vant 2 上进行更改，请基于 2.x 分支进行开发 git clone git@github.com:youzan/vant.git # 安装依赖 @@ -32,6 +30,22 @@ pnpm i pnpm dev ``` +仓库的不同分支对应不同的 Vant 版本，请切换到对应分支进行开发： + +- 2.x 分支对应 Vant 2 版本，适用于 Vue 2 +- dev 分支对应 Vant 3 版本 ，适用于 Vue 3 +- next 分支对应 Vant 4 版本，适用于 Vue 3 + +### 镜像仓库 + +如果 GitHub 克隆速度较慢，你也可以直接克隆 Vant 在 gitee 上的[镜像仓库](https://gitee.com/vant-contrib/vant)： + +```bash +git clone git@gitee.com:vant-contrib/vant.git +``` + +镜像仓库仅用于加快国内的访问速度，请勿在镜像仓库中提 issue 和 Pull Request。 + ### 目录结构 Vant 采用 monorepo 进行代码管理，所有子包在 `packages` 目录下: diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md index 41f036966..c1c502fe6 100644 --- a/packages/vant/docs/markdown/home.zh-CN.md +++ b/packages/vant/docs/markdown/home.zh-CN.md @@ -10,7 +10,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 -目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。 +目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。 ### 版本提示 diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 409704c3f..85e21413d 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -100,13 +100,13 @@ If you are using vite, please use [vite-plugin-style-import](https://github.com/ ```bash # with npm -npm i vite-plugin-style-import -D +npm i vite-plugin-style-import@1.4.1 -D # with yarn -yarn add vite-plugin-style-import -D +yarn add vite-plugin-style-import@1.4.1 -D # with pnpm -pnpm add vite-plugin-style-import -D +pnpm add vite-plugin-style-import@1.4.1 -D ``` #### 2. Configure Plugin diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 72939bd54..e3853227b 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -101,13 +101,13 @@ pnpm add vant ```bash # 通过 npm 安装 -npm i vite-plugin-style-import -D +npm i vite-plugin-style-import@1.4.1 -D # 通过 yarn 安装 -yarn add vite-plugin-style-import -D +yarn add vite-plugin-style-import@1.4.1 -D # 通过 pnpm 安装 -pnpm add vite-plugin-style-import -D +pnpm add vite-plugin-style-import@1.4.1 -D ``` #### 2. 配置插件 diff --git a/packages/vant/package.json b/packages/vant/package.json index e41d2043e..38b9e802e 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -66,7 +66,7 @@ "dependencies": { "@vant/icons": "^1.7.1", "@vant/popperjs": "^1.1.0", - "@vant/use": "^1.3.5" + "@vant/use": "^1.3.6" }, "peerDependencies": { "vue": "^3.0.0" diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index ef2fe521f..2df9b140b 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -79,6 +79,7 @@ const calendarProps = { showRangePrompt: truthProp, confirmDisabledText: String, closeOnClickOverlay: truthProp, + safeAreaInsetTop: Boolean, safeAreaInsetBottom: truthProp, minDate: { type: Date, @@ -563,6 +564,7 @@ export default defineComponent({ closeable={props.showTitle || props.showSubtitle} teleport={props.teleport} closeOnPopstate={props.closeOnPopstate} + safeAreaInsetTop={props.safeAreaInsetTop} closeOnClickOverlay={props.closeOnClickOverlay} onUpdate:show={updateShow} /> diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index e1ae42f7e..7a051cd26 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -279,6 +279,7 @@ Following props are supported when the poppable is true | round | Whether to show round corner | _boolean_ | `true` | | close-on-popstate | Whether to close when popstate | _boolean_ | `true` | | close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` | +| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | | teleport | Specifies a target element where Calendar will be mounted | _string \| Element_ | - | diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md index e1f6f5465..6415a0131 100644 --- a/packages/vant/src/calendar/README.zh-CN.md +++ b/packages/vant/src/calendar/README.zh-CN.md @@ -283,6 +283,7 @@ export default { | round | 是否显示圆角弹窗 | _boolean_ | `true` | | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | +| safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - | @@ -415,6 +416,28 @@ calendarRef.value?.reset(); ## 常见问题 +### 如何在 formatter 中使用异步返回的数据？ + +如果需要在 formatter 中使用异步返回的数据，可以使用计算属性动态创建 formatter 函数，示例如下： + +```js +const asyncData = ref(); + +const formatter = computed(() => { + if (!asyncData.value) { + return (day) => day; + } + return (day) => { + day.bottomInfo = asyncData.value; + return day; + }; +}); + +setTimeout(() => { + asyncData.value = '后端文案'; +}, 3000); +``` + ### 在 iOS 系统上初始化组件失败？ 如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。 diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md index 169a07c69..065ff462b 100644 --- a/packages/vant/src/dialog/README.zh-CN.md +++ b/packages/vant/src/dialog/README.zh-CN.md @@ -222,7 +222,7 @@ export default { | v-model:show | 是否显示弹窗 | _boolean_ | - | | title | 标题 | _string_ | - | | width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` | -| message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.ELement_ | - | +| message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.Element_ | - | | message-align | 内容水平对齐方式，可选值为 `left` `right` | _string_ | `center` | | theme | 样式风格，可选值为 `round-button` | _string_ | `default` | | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` | diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index c7db4b0d3..70af5a5e1 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -405,6 +405,16 @@ fieldRef.value?.focus(); HTML 原生的 `type="number"` 属性在 iOS 和 Android 系统上都存在一定问题，比如 maxlength 属性不生效、无法获取到完整的输入内容等。因此设置 type 为 `number` 时，Field 不会使用原生的 `type="number"` 属性，而是用现代浏览器支持的 [inputmode 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode)来控制输入键盘的类型。 +### 为什么 v-model 绑定的值被更新为 string 类型？ + +Field 组件内部会将传入的 v-model 格式化为 string 类型，便于组件内部进行处理。 + +如果你希望在 v-model 上绑定 number 类型，可以使用 Vue 提供的 [.number 修饰符](https://vuejs.org/guide/essentials/forms.html#lazy)。 + +```html + +``` + ### 在桌面端点击清除按钮无效？ 清除按钮监听是的移动端 Touch 事件，参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/packages/vant/src/nav-bar/NavBar.tsx b/packages/vant/src/nav-bar/NavBar.tsx index 0370c8de5..fa8fea2c4 100644 --- a/packages/vant/src/nav-bar/NavBar.tsx +++ b/packages/vant/src/nav-bar/NavBar.tsx @@ -82,8 +82,11 @@ export default defineComponent({ ref={navBarRef} style={style} class={[ - bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }), - { [BORDER_BOTTOM]: border }, + bem({ fixed }), + { + [BORDER_BOTTOM]: border, + 'van-safe-area-top': props.safeAreaInsetTop, + }, ]} >
diff --git a/packages/vant/src/nav-bar/test/index.spec.ts b/packages/vant/src/nav-bar/test/index.spec.ts index 267d41d50..094379bd0 100644 --- a/packages/vant/src/nav-bar/test/index.spec.ts +++ b/packages/vant/src/nav-bar/test/index.spec.ts @@ -74,7 +74,7 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop' }, }); - expect(wrapper.classes()).toContain('van-nav-bar--safe-area-inset-top'); + expect(wrapper.classes()).toContain('van-safe-area-top'); }); test('should change z-index when using z-index prop', () => { diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx index 095ed8200..a993c4142 100644 --- a/packages/vant/src/popup/Popup.tsx +++ b/packages/vant/src/popup/Popup.tsx @@ -48,6 +48,7 @@ const popupProps = extend({}, popupSharedProps, { iconPrefix: String, closeOnPopstate: Boolean, closeIconPosition: makeStringProp('top-right'), + safeAreaInsetTop: Boolean, safeAreaInsetBottom: Boolean, }); @@ -177,7 +178,7 @@ export default defineComponent({ const onKeydown = (event: KeyboardEvent) => emit('keydown', event); const renderPopup = lazyRender(() => { - const { round, position, safeAreaInsetBottom } = props; + const { round, position, safeAreaInsetTop, safeAreaInsetBottom } = props; return (
{ await wrapper.setProps({ show: false }); expect(beforeClose).toHaveBeenCalledTimes(0); }); + +test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => { + const wrapper = mount(Popup, { + props: { + show: true, + safeAreaInsetTop: true, + }, + }); + + expect(wrapper.find('.van-popup').classes()).toContain('van-safe-area-top'); +}); + +test('should have safe-area-inset-bottom class when using safe-area-inset-bottom prop', () => { + const wrapper = mount(Popup, { + props: { + show: true, + safeAreaInsetBottom: true, + }, + }); + + expect(wrapper.find('.van-popup').classes()).toContain( + 'van-safe-area-bottom' + ); +}); diff --git a/packages/vant/src/skeleton/Skeleton.tsx b/packages/vant/src/skeleton/Skeleton.tsx index 7ac2f1b0d..3a75cea39 100644 --- a/packages/vant/src/skeleton/Skeleton.tsx +++ b/packages/vant/src/skeleton/Skeleton.tsx @@ -38,9 +38,11 @@ export type SkeletonProps = ExtractPropTypes; export default defineComponent({ name, + inheritAttrs: false, + props: skeletonProps, - setup(props, { slots }) { + setup(props, { slots, attrs }) { const renderAvatar = () => { if (props.avatar) { return ( @@ -90,7 +92,10 @@ export default defineComponent({ } return ( -
+
{renderAvatar()}
{renderTitle()} diff --git a/packages/vant/src/style/README.md b/packages/vant/src/style/README.md index fcbcdb223..22b13979f 100644 --- a/packages/vant/src/style/README.md +++ b/packages/vant/src/style/README.md @@ -49,11 +49,15 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
``` -### Safe Area Bottom +### Safe Area -Enable safe area inset bottom. +Enable safe area. ```html + +
+ +
``` diff --git a/packages/vant/src/style/README.zh-CN.md b/packages/vant/src/style/README.zh-CN.md index 2e6e4ab68..6ac9e0e4d 100644 --- a/packages/vant/src/style/README.zh-CN.md +++ b/packages/vant/src/style/README.zh-CN.md @@ -47,11 +47,15 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
``` -### 底部安全区 +### 安全区 -为元素添加底部安全区适配。 +为元素添加安全区适配。 ```html + +
+ +
``` diff --git a/packages/vant/src/style/base.less b/packages/vant/src/style/base.less index be52abb01..41c97732b 100644 --- a/packages/vant/src/style/base.less +++ b/packages/vant/src/style/base.less @@ -25,6 +25,11 @@ .multi-ellipsis(3); } +.van-safe-area-top { + padding-top: constant(safe-area-inset-top); + padding-top: env(safe-area-inset-top); +} + .van-safe-area-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); diff --git a/packages/vant/src/swipe-cell/SwipeCell.tsx b/packages/vant/src/swipe-cell/SwipeCell.tsx index 668b10776..d00987a6a 100644 --- a/packages/vant/src/swipe-cell/SwipeCell.tsx +++ b/packages/vant/src/swipe-cell/SwipeCell.tsx @@ -219,7 +219,7 @@ export default defineComponent({
+
) : (
{message}
); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 54cebfd3e..718727aeb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -54,7 +54,7 @@ importers: '@vant/eslint-config': workspace:* '@vant/icons': ^1.7.1 '@vant/popperjs': ^1.1.0 - '@vant/use': ^1.3.5 + '@vant/use': ^1.3.6 '@vue/runtime-core': ^3.2.27 '@vue/test-utils': ^2.0.0-rc.16 typescript: ~4.5.2