Merge branch 'dev' into next

2025-04-05 19:41:42 +08:00 · 2022-03-13 16:27:20 +08:00 · 2022-03-13 16:27:20 +08:00 · 101dcc3ef2
commit 101dcc3ef2
parent 8572393881 0dc490c9bc
32 changed files with 176 additions and 33 deletions
--- 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)。

 ## 特性

--- 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",
--- 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();
 }

--- 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();
 }

--- 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}}

--- 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}}`
--- 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
--- 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",
--- 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<VisibilityState>;

 export function usePageVisibility() {
--- 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` 目录下:
--- 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)。

 ### 版本提示

--- 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
--- 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. 配置插件
--- 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"
--- 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}
          />
--- 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_ | - |

--- 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')`。
--- 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` |
--- 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
+<van-field v-model.number="value" type="tel" />
+```
+
 ### 在桌面端点击清除按钮无效？

 清除按钮监听是的移动端 Touch 事件，参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。
--- 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,
+            },
          ]}
        >
          <div class={bem('content')}>
--- 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', () => {
--- 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<PopupCloseIconPosition>('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 (
        <div
@ -189,7 +190,10 @@ export default defineComponent({
              round,
              [position]: position,
            }),
-            { 'van-safe-area-bottom': safeAreaInsetBottom },
+            {
+              'van-safe-area-top': safeAreaInsetTop,
+              'van-safe-area-bottom': safeAreaInsetBottom,
+            },
          ]}
          onKeydown={onKeydown}
          {...attrs}
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@ -125,6 +125,7 @@ Use `teleport` prop to specify mount location.
 | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
 | teleport | Specifies a target element where Popup will be mounted | _string \| Element_ | - |
+| 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_ | `false` |

 ### Events
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@ -131,6 +131,7 @@ export default {
 | transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
+| 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_ | `false` |

 ### Events
--- a/packages/vant/src/popup/test/index.spec.jsx
+++ b/packages/vant/src/popup/test/index.spec.jsx
@ -259,3 +259,27 @@ test('should not call before-close when show prop becomes false', async () => {
  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'
+  );
+});
--- a/packages/vant/src/skeleton/Skeleton.tsx
+++ b/packages/vant/src/skeleton/Skeleton.tsx
@ -38,9 +38,11 @@ export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;
 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 (
-        <div class={bem({ animate: props.animate, round: props.round })}>
+        <div
+          class={bem({ animate: props.animate, round: props.round })}
+          {...attrs}
+        >
          {renderAvatar()}
          <div class={bem('content')}>
            {renderTitle()}
--- 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
 <div class="van-hairline--surround"></div>
 ```

-### Safe Area Bottom
+### Safe Area

-Enable safe area inset bottom.
+Enable safe area.

 ```html
+<!-- top -->
+<div class="van-safe-area-top"></div>
+
+<!-- bottom -->
 <div class="van-safe-area-bottom"></div>
 ```

--- a/packages/vant/src/style/README.zh-CN.md
+++ b/packages/vant/src/style/README.zh-CN.md
@ -47,11 +47,15 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```

-### 底部安全区
+### 安全区

-为元素添加底部安全区适配。
+为元素添加安全区适配。

 ```html
+<!-- 顶部安全区 -->
+<div class="van-safe-area-top"></div>
+
+<!-- 底部安全区 -->
 <div class="van-safe-area-bottom"></div>
 ```

--- 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);
--- a/packages/vant/src/swipe-cell/SwipeCell.tsx
+++ b/packages/vant/src/swipe-cell/SwipeCell.tsx
@ -219,7 +219,7 @@ export default defineComponent({
        <div
          ref={root}
          class={bem()}
-          onClick={getClickHandler('cell')}
+          onClick={getClickHandler('cell', lockClick)}
          onTouchstart={onTouchStart}
          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
--- a/packages/vant/src/toast/Toast.tsx
+++ b/packages/vant/src/toast/Toast.tsx
@ -120,7 +120,7 @@ export default defineComponent({

      if (isDef(message) && message !== '') {
        return type === 'html' ? (
-          <div class={bem('text')} innerHTML={String(message)} />
+          <div key={0} class={bem('text')} innerHTML={String(message)} />
        ) : (
          <div class={bem('text')}>{message}</div>
        );
--- 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