Merge branch 'dev' into next

.github/workflows/sync-gitee.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches: [dev, 2.x, gh-pages]
 
+  workflow_dispatch:
+
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/test.yml

@@ -1,6 +1,15 @@
 name: CI
 
-on: [push]
+on:
+  push:
+    branches:
+      - '**'
+
+  pull_request:
+    branches:
+      - dev
+
+  workflow_dispatch:
 
 jobs:
   lint:

packages/vant/docs/markdown/advanced-usage.zh-CN.md

@@ -172,6 +172,8 @@ module.exports = {
 };
 ```
 
+> Tips: 在配置 postcss-pxtorem 时，同样应避免 ignore node_modules 目录，否则会导致 Vant 样式无法被编译。
+
 #### 其他设计稿尺寸
 
 如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 `rootValue` 配置调整为:

packages/vant/src/badge/Badge.tsx

@@ -48,7 +48,11 @@ export default defineComponent({
         return true;
       }
       const { content, showZero } = props;
-      return isDef(content) && content !== '' && (showZero || content !== 0);
+      return (
+        isDef(content) &&
+        content !== '' &&
+        (showZero || (content !== 0 && content !== '0'))
+      );
     };
 
     const renderContent = () => {

packages/vant/src/badge/README.zh-CN.md

@@ -148,7 +148,7 @@ app.use(Badge);
 | dot | 是否展示为小红点 | _boolean_ | `false` |
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
 | offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
-| show-zero `v3.0.10` | 当 content 为数字 0 时，是否展示徽标 | _boolean_ | `true` |
+| show-zero `v3.0.10` | 当 content 为数字 0 或字符串 '0' 时，是否展示徽标 | _boolean_ | `true` |
 | position `v3.2.7` | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 
 ### Slots
@@ -184,17 +184,3 @@ import type { BadgeProps, BadgePosition } from 'vant';
 | --van-badge-dot-color | _var(--van-danger-color)_ | - |
 | --van-badge-dot-size | _8px_ | - |
 | --van-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |
-
-## 常见问题
-
-### 设置 show-zero 属性为 false 不生效？
-
-注意 `show-zero` 属性仅对数字类型的 `0` 有效，对字符串类型的 `'0'` 无效。
-
-```html
-<!-- 正确写法，不显示 0 -->
-<van-badge :content="0" :show-zero="false" />
-
-<!-- 错误写法，显示 0 -->
-<van-badge content="0" :show-zero="false" />
-```

packages/vant/src/calendar/Calendar.tsx

@@ -185,10 +185,6 @@ export default defineComponent({
       const months: Date[] = [];
       const cursor = new Date(props.minDate);
 
-      if (props.lazyRender && !props.show && props.poppable) {
-        return months;
-      }
-
       cursor.setDate(1);
 
       do {
@@ -299,7 +295,9 @@ export default defineComponent({
           props.type === 'single'
             ? (currentDate.value as Date)
             : (currentDate.value as Date[])[0];
-        scrollToDate(targetDate);
+        if (isDate(targetDate)) {
+          scrollToDate(targetDate);
+        }
       } else {
         raf(onScroll);
       }

packages/vant/src/composables/use-global-z-index.ts

@@ -0,0 +1,24 @@
+/**
+ * The z-index of Popup components.
+
+ * Will affect this components:
+ *   - ActionSheet
+ *   - Calendar
+ *   - Dialog
+ *   - DropdownItem
+ *   - ImagePreview
+ *   - Notify
+ *   - Popup
+ *   - Popover
+ *   - ShareSheet
+ *   - Toast
+ */
+let globalZIndex = 2000;
+
+/** the global z-index is automatically incremented after reading */
+export const useGlobalZIndex = () => ++globalZIndex;
+
+/** reset the global z-index */
+export const setGlobalZIndex = (val: number) => {
+  globalZIndex = val;
+};

packages/vant/src/composables/use-height.ts

@@ -1,5 +1,6 @@
 import { useRect } from '@vant/use';
 import { Ref, ref, onMounted, nextTick } from 'vue';
+import { onPopupReopen } from './on-popup-reopen';
 
 export const useHeight = (
   element: Element | Ref<Element | undefined>,
@@ -25,5 +26,11 @@ export const useHeight = (
     }
   });
 
+  // The result of useHeight might be 0 when the popup is hidden,
+  // so we need to reset the height when the popup is reopened.
+  // IntersectionObserver is a better solution, but it is not supported by legacy browsers.
+  // https://github.com/vant-ui/vant/issues/10628
+  onPopupReopen(() => nextTick(setHeight));
+
   return height;
 };

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -18,6 +18,7 @@ import {
   createNamespace,
   type Numeric,
 } from '../utils';
+import { setGlobalZIndex } from '../composables/use-global-z-index';
 
 const [name, bem] = createNamespace('config-provider');
 
@@ -33,6 +34,7 @@ export const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide> =
 const configProviderProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
   theme: makeStringProp<ConfigProviderTheme>('light'),
+  zIndex: Number,
   themeVars: Object as PropType<Record<string, Numeric>>,
   iconPrefix: String,
 };
@@ -85,6 +87,12 @@ export default defineComponent({
 
     provide(CONFIG_PROVIDER_KEY, props);
 
+    watchEffect(() => {
+      if (props.zIndex !== undefined) {
+        setGlobalZIndex(props.zIndex);
+      }
+    });
+
     return () => (
       <props.tag class={bem()} style={style.value}>
         {slots.default?.()}

packages/vant/src/config-provider/README.md

@@ -249,6 +249,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 | --- | --- | --- | --- |
 | theme | Theme mode, can be set to `dark` | _ConfigProviderTheme_ | `light` |
 | theme-vars | Theme variables | _object_ | - |
+| z-index `v3.6.0` | Set the z-index of all popup components, this property takes effect globally | _number_ | `2000` |
 | tag `v3.1.2` | HTML Tag of root element | _string_ | `div` |
 | icon-prefix `v3.1.3` | Icon className prefix | _string_ | `van-icon` |
 

packages/vant/src/config-provider/README.zh-CN.md

@@ -254,6 +254,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 | theme | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | _ConfigProviderTheme_ | `light` |
 | theme-vars | 自定义主题变量，局部生效 | _object_ | - |
 | tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div` |
+| z-index `v3.6.0` | 设置所有弹窗类组件的 z-index，该属性对全局生效 | _number_ | `2000` |
 | icon-prefix `v3.1.3` | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
 ### 类型定义

packages/vant/src/config-provider/test/index.spec.tsx

@@ -1,6 +1,8 @@
+import { ref } from 'vue';
 import { ConfigProvider } from '..';
 import { Icon } from '../../icon';
-import { mount } from '../../../test';
+import { later, mount } from '../../../test';
+import Popup from '../../popup';
 
 test('should render tag prop correctly', () => {
   const wrapper = mount(ConfigProvider, {
@@ -23,3 +25,19 @@ test('should change icon class-prefix when using icon-prefix prop', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should change global z-index when using z-index prop', async () => {
+  const show = ref(true);
+  const wrapper = mount({
+    render() {
+      return (
+        <ConfigProvider zIndex={0}>
+          <Popup v-model:show={show.value} />
+        </ConfigProvider>
+      );
+    },
+  });
+
+  await later();
+  expect(wrapper.find('.van-popup').style.zIndex).toEqual('1');
+});

packages/vant/src/field/Field.tsx

@@ -32,6 +32,7 @@ import {
   runSyncRule,
   endComposing,
   mapInputType,
+  isEmptyValue,
   startComposing,
   getRuleMessage,
   resizeTextarea,
@@ -201,6 +202,10 @@ export default defineComponent({
             }
 
             if (rule.validator) {
+              if (isEmptyValue(value) && rule.validateEmpty === false) {
+                return;
+              }
+
               return runRuleValidator(value, rule).then((result) => {
                 if (result && typeof result === 'string') {
                   state.status = 'failed';

packages/vant/src/field/types.ts

@@ -64,6 +64,7 @@ export type FieldRule = {
   required?: boolean;
   validator?: FieldRuleValidator;
   formatter?: FiledRuleFormatter;
+  validateEmpty?: boolean;
 };
 
 export type FieldValidationStatus = 'passed' | 'failed' | 'unvalidated';

packages/vant/src/field/utils.ts

@@ -8,7 +8,7 @@ import {
 } from '../utils';
 import type { FieldRule, FieldType, FieldAutosizeConfig } from './types';
 
-function isEmptyValue(value: unknown) {
+export function isEmptyValue(value: unknown) {
   if (Array.isArray(value)) {
     return !value.length;
   }
@@ -19,8 +19,13 @@ function isEmptyValue(value: unknown) {
 }
 
 export function runSyncRule(value: unknown, rule: FieldRule) {
-  if (rule.required && isEmptyValue(value)) {
+  if (isEmptyValue(value)) {
-    return false;
+    if (rule.required) {
+      return false;
+    }
+    if (rule.validateEmpty === false) {
+      return true;
+    }
   }
   if (rule.pattern && !rule.pattern.test(String(value))) {
     return false;

packages/vant/src/form/README.md

@@ -509,12 +509,13 @@ export default {
 
 | Key | Description | Type |
 | --- | --- | --- |
-| required | Whether to be a required field, the value is not allowed to be empty string, empty array, `false`, `undefined`, `null` | _boolean_ |
+| required | Whether to be a required field, the value is not allowed to be empty (empty string, empty array, `false`, `undefined`, `null`) | _boolean_ |
-| message | Error message | _string \| (value, rule) => string_ |
+| message | Error message, can be a function to dynamically return message content | _string \| (value, rule) => string_ |
-| validator | Custom validator | _(value, rule) => boolean \| string \| Promise_ |
+| validator | Custom validator, can return a Promise to validate dynamically | _(value, rule) => boolean \| string \| Promise_ |
-| pattern | Regex pattern | _RegExp_ |
+| pattern | Regexp pattern, if the regexp cannot match, means that the validation fails | _RegExp_ |
-| trigger | When to validate the form, can be set to `onChange`、`onBlur` | _string_ |
+| trigger | When to validate the form, priority is higher than the `validate-trigger` of the Form component, can be set to `onChange`, `onBlur`, `onSubmit` | _string \| string[]_ |
 | formatter | Format value before validate | _(value, rule) => any_ |
+| validateEmpty `v3.6.0` | Controls whether the `validator` and `pattern` options to verify empty values, the default value is `true`, you can set to `false` to disable this behavior | _boolean_ |
 
 ### validate-trigger
 

packages/vant/src/form/README.zh-CN.md

@@ -541,16 +541,17 @@ export default {
 
 ### Rule 数据结构
 
-使用 Field 的`rules`属性可以定义校验规则，可选属性如下:
+使用 Field 的 `rules` 属性可以定义校验规则，可选属性如下:
 
 | 键名 | 说明 | 类型 |
 | --- | --- | --- |
-| required | 是否为必选字段，当值为空字符串、空数组、`false`、`undefined`、`null` 时，校验不通过 | _boolean_ |
+| required | 是否为必选字段，当值为空值时（空字符串、空数组、`false`、`undefined`、`null` ），校验不通过 | _boolean_ |
-| message | 错误提示文案 | _string \| (value, rule) => string_ |
+| message | 错误提示文案，可以设置为一个函数来返回动态的文案内容 | _string \| (value, rule) => string_ |
-| validator | 通过函数进行校验 | _(value, rule) => boolean \| string \| Promise_ |
+| validator | 通过函数进行校验，可以返回一个 Promise 来进行异步校验 | _(value, rule) => boolean \| string \| Promise_ |
-| pattern | 通过正则表达式进行校验 | _RegExp_ |
+| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | _RegExp_ |
-| trigger | 本项规则的触发时机，可选值为 `onChange`、`onBlur` | _string_ |
+| trigger | 设置本项规则的触发时机，优先级高于 Form 组件设置的 `validate-trigger` 属性，可选值为 `onChange`、`onBlur`、`onSubmit` | _string \| string[]_ |
 | formatter | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ |
+| validateEmpty `v3.6.0` | 设置 `validator` 和 `pattern` 是否要对空值进行校验，默认值为 `true`，可以设置为 `false` 来禁用该行为 | _boolean_ |
 
 ### validate-trigger 可选值
 

packages/vant/src/form/test/props.spec.tsx

@@ -70,6 +70,40 @@ test('should support message function in rules prop', async () => {
   });
 });
 
+test('should skip pattern if validateEmpty is false in rules prop', async () => {
+  const onFailed = jest.fn();
+  const rules: FieldRule[] = [{ pattern: /\d{6}/, validateEmpty: false }];
+  const wrapper = mount({
+    render() {
+      return (
+        <Form onFailed={onFailed}>
+          <Field name="A" rules={rules} modelValue="" />
+        </Form>
+      );
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledTimes(0);
+});
+
+test('should skip validator if validateEmpty is false in rules prop', async () => {
+  const onFailed = jest.fn();
+  const rules: FieldRule[] = [{ validator: () => false, validateEmpty: false }];
+  const wrapper = mount({
+    render() {
+      return (
+        <Form onFailed={onFailed}>
+          <Field name="A" rules={rules} modelValue="" />
+        </Form>
+      );
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledTimes(0);
+});
+
 test('should support formatter in rules prop', async () => {
   const onFailed = jest.fn();
   const rules: FieldRule[] = [

packages/vant/src/popup/Popup.tsx

@@ -31,6 +31,7 @@ import { useExpose } from '../composables/use-expose';
 import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 import { POPUP_TOGGLE_KEY } from '../composables/on-popup-reopen';
+import { useGlobalZIndex } from '../composables/use-global-z-index';
 
 // Components
 import { Icon } from '../icon';
@@ -56,8 +57,6 @@ export type PopupProps = ExtractPropTypes<typeof popupProps>;
 
 const [name, bem] = createNamespace('popup');
 
-let globalZIndex = 2000;
-
 export default defineComponent({
   name,
 
@@ -103,12 +102,10 @@ export default defineComponent({
 
     const open = () => {
       if (!opened) {
-        if (props.zIndex !== undefined) {
-          globalZIndex = +props.zIndex;
-        }
-
         opened = true;
-        zIndex.value = ++globalZIndex;
+
+        zIndex.value =
+          props.zIndex !== undefined ? +props.zIndex : useGlobalZIndex();
 
         emit('open');
       }

packages/vant/src/popup/test/index.spec.jsx

@@ -29,8 +29,8 @@ test('should change z-index when using z-index prop', async () => {
   });
 
   await nextTick();
-  expect(wrapper.find('.van-popup').style.zIndex).toEqual('11');
+  expect(wrapper.find('.van-popup').style.zIndex).toEqual('10');
-  expect(wrapper.find('.van-overlay').style.zIndex).toEqual('11');
+  expect(wrapper.find('.van-overlay').style.zIndex).toEqual('10');
 });
 
 test('should lock scroll when showed', async () => {

packages/vant/src/pull-refresh/PullRefresh.tsx

@@ -17,7 +17,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useScrollParent } from '@vant/use';
+import { useEventListener, useScrollParent } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 
 // Components
@@ -61,6 +61,7 @@ export default defineComponent({
     let reachTop: boolean;
 
     const root = ref<HTMLElement>();
+    const track = ref<HTMLElement>();
     const scrollParent = useScrollParent(root);
 
     const state = reactive({
@@ -220,6 +221,15 @@ export default defineComponent({
       }
     );
 
+    // add passive option to avoid Chrome warning
+    useEventListener('touchstart', onTouchStart as EventListener, {
+      target: track,
+      passive: true,
+    });
+    useEventListener('touchmove', onTouchMove as EventListener, {
+      target: track,
+    });
+
     return () => {
       const trackStyle = {
         transitionDuration: `${state.duration}ms`,
@@ -231,10 +241,9 @@ export default defineComponent({
       return (
         <div ref={root} class={bem()}>
           <div
+            ref={track}
             class={bem('track')}
             style={trackStyle}
-            onTouchstart={onTouchStart}
-            onTouchmove={onTouchMove}
             onTouchend={onTouchEnd}
             onTouchcancel={onTouchEnd}
           >

packages/vant/src/search/README.md

@@ -149,7 +149,7 @@ export default {
 | clear-trigger | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
 | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
 | show-action | Whether to show right action button | _boolean_ | `false` |
-| action-text | Text of action button | _boolean_ | `Cancel` |
+| action-text | Text of action button | _string_ | `Cancel` |
 | disabled | Whether to disable field | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |
 | error | Whether to mark the input content in red | _boolean_ | `false` |

packages/vant/src/search/README.zh-CN.md

@@ -161,7 +161,7 @@ export default {
 | clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
 | show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
-| action-text | 取消按钮文字 | _boolean_ | `取消` |
+| action-text | 取消按钮文字 | _string_ | `取消` |
 | disabled | 是否禁用输入框 | _boolean_ | `false` |
 | readonly | 是否将输入框设为只读状态，只读状态下无法输入内容 | _boolean_ | `false` |
 | error | 是否将输入内容标红 | _boolean_ | `false` |

packages/vant/src/search/index.less

@@ -40,7 +40,9 @@ body {
 
   &__field {
     flex: 1;
-    padding: 5px var(--van-padding-xs) 5px 0;
+    align-items: center;
+    padding: 0 var(--van-padding-xs) 0 0;
+    height: var(--van-search-input-height);
     background-color: transparent;
 
     .van-field__left-icon {