diff --git a/.github/workflows/sync-gitee.yml b/.github/workflows/sync-gitee.yml index f787bc36f..c84eeec8f 100644 --- a/.github/workflows/sync-gitee.yml +++ b/.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 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 1082a8153..1fe5e5cef 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,6 +1,15 @@ name: CI -on: [push] +on: + push: + branches: + - '**' + + pull_request: + branches: + - dev + + workflow_dispatch: jobs: lint: diff --git a/packages/vant/docs/markdown/advanced-usage.zh-CN.md b/packages/vant/docs/markdown/advanced-usage.zh-CN.md index 1e1b1b551..4d8d04cf3 100644 --- a/packages/vant/docs/markdown/advanced-usage.zh-CN.md +++ b/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` 配置调整为: diff --git a/packages/vant/src/badge/Badge.tsx b/packages/vant/src/badge/Badge.tsx index 83522ca0e..cb01aeb33 100644 --- a/packages/vant/src/badge/Badge.tsx +++ b/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 = () => { diff --git a/packages/vant/src/badge/README.zh-CN.md b/packages/vant/src/badge/README.zh-CN.md index 6cec59d0b..ffb5024ae 100644 --- a/packages/vant/src/badge/README.zh-CN.md +++ b/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 - - - - - -``` diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index b0b8fe6fb..bee36ba3c 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/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); } diff --git a/packages/vant/src/composables/use-global-z-index.ts b/packages/vant/src/composables/use-global-z-index.ts new file mode 100644 index 000000000..9293250c2 --- /dev/null +++ b/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; +}; diff --git a/packages/vant/src/composables/use-height.ts b/packages/vant/src/composables/use-height.ts index dfdce08a3..083deccf2 100644 --- a/packages/vant/src/composables/use-height.ts +++ b/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, @@ -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; }; diff --git a/packages/vant/src/config-provider/ConfigProvider.tsx b/packages/vant/src/config-provider/ConfigProvider.tsx index d3af4bef1..da80ebb34 100644 --- a/packages/vant/src/config-provider/ConfigProvider.tsx +++ b/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 = const configProviderProps = { tag: makeStringProp('div'), theme: makeStringProp('light'), + zIndex: Number, themeVars: Object as PropType>, iconPrefix: String, }; @@ -85,6 +87,12 @@ export default defineComponent({ provide(CONFIG_PROVIDER_KEY, props); + watchEffect(() => { + if (props.zIndex !== undefined) { + setGlobalZIndex(props.zIndex); + } + }); + return () => ( {slots.default?.()} diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index 755eab708..1d43e6aeb 100644 --- a/packages/vant/src/config-provider/README.md +++ b/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` | diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index d96fc0406..ce6a72fc3 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/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` | ### 类型定义 diff --git a/packages/vant/src/config-provider/test/index.spec.tsx b/packages/vant/src/config-provider/test/index.spec.tsx index 929240fc7..7ae439d3f 100644 --- a/packages/vant/src/config-provider/test/index.spec.tsx +++ b/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 ( + + + + ); + }, + }); + + await later(); + expect(wrapper.find('.van-popup').style.zIndex).toEqual('1'); +}); diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 671ba9175..022d751bc 100644 --- a/packages/vant/src/field/Field.tsx +++ b/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'; diff --git a/packages/vant/src/field/types.ts b/packages/vant/src/field/types.ts index 51200e8c8..26283f1aa 100644 --- a/packages/vant/src/field/types.ts +++ b/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'; diff --git a/packages/vant/src/field/utils.ts b/packages/vant/src/field/utils.ts index 03eeae162..02010a36b 100644 --- a/packages/vant/src/field/utils.ts +++ b/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)) { - return false; + if (isEmptyValue(value)) { + if (rule.required) { + return false; + } + if (rule.validateEmpty === false) { + return true; + } } if (rule.pattern && !rule.pattern.test(String(value))) { return false; diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index aa758eb73..44ed7205d 100644 --- a/packages/vant/src/form/README.md +++ b/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_ | -| message | Error message | _string \| (value, rule) => string_ | -| validator | Custom validator | _(value, rule) => boolean \| string \| Promise_ | -| pattern | Regex pattern | _RegExp_ | -| trigger | When to validate the form, can be set to `onChange`、`onBlur` | _string_ | +| 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, can be a function to dynamically return message content | _string \| (value, rule) => string_ | +| validator | Custom validator, can return a Promise to validate dynamically | _(value, rule) => boolean \| string \| Promise_ | +| pattern | Regexp pattern, if the regexp cannot match, means that the validation fails | _RegExp_ | +| 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 diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index 621b618cc..d5456ad23 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -541,16 +541,17 @@ export default { ### Rule 数据结构 -使用 Field 的`rules`属性可以定义校验规则，可选属性如下: +使用 Field 的 `rules` 属性可以定义校验规则，可选属性如下: | 键名 | 说明 | 类型 | | --- | --- | --- | -| required | 是否为必选字段，当值为空字符串、空数组、`false`、`undefined`、`null` 时，校验不通过 | _boolean_ | -| message | 错误提示文案 | _string \| (value, rule) => string_ | -| validator | 通过函数进行校验 | _(value, rule) => boolean \| string \| Promise_ | -| pattern | 通过正则表达式进行校验 | _RegExp_ | -| trigger | 本项规则的触发时机，可选值为 `onChange`、`onBlur` | _string_ | +| required | 是否为必选字段，当值为空值时（空字符串、空数组、`false`、`undefined`、`null` ），校验不通过 | _boolean_ | +| message | 错误提示文案，可以设置为一个函数来返回动态的文案内容 | _string \| (value, rule) => string_ | +| validator | 通过函数进行校验，可以返回一个 Promise 来进行异步校验 | _(value, rule) => boolean \| string \| Promise_ | +| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | _RegExp_ | +| trigger | 设置本项规则的触发时机，优先级高于 Form 组件设置的 `validate-trigger` 属性，可选值为 `onChange`、`onBlur`、`onSubmit` | _string \| string[]_ | | formatter | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ | +| validateEmpty `v3.6.0` | 设置 `validator` 和 `pattern` 是否要对空值进行校验，默认值为 `true`，可以设置为 `false` 来禁用该行为 | _boolean_ | ### validate-trigger 可选值 diff --git a/packages/vant/src/form/test/props.spec.tsx b/packages/vant/src/form/test/props.spec.tsx index 1c4be2535..ee9232879 100644 --- a/packages/vant/src/form/test/props.spec.tsx +++ b/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 ( +
+ + + ); + }, + }); + + 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 ( +
+ + + ); + }, + }); + + await submitForm(wrapper); + expect(onFailed).toHaveBeenCalledTimes(0); +}); + test('should support formatter in rules prop', async () => { const onFailed = jest.fn(); const rules: FieldRule[] = [ diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx index fc57aecd8..945d5abba 100644 --- a/packages/vant/src/popup/Popup.tsx +++ b/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; 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'); } diff --git a/packages/vant/src/popup/test/index.spec.jsx b/packages/vant/src/popup/test/index.spec.jsx index 01dfe725e..260a711f2 100644 --- a/packages/vant/src/popup/test/index.spec.jsx +++ b/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-overlay').style.zIndex).toEqual('11'); + expect(wrapper.find('.van-popup').style.zIndex).toEqual('10'); + expect(wrapper.find('.van-overlay').style.zIndex).toEqual('10'); }); test('should lock scroll when showed', async () => { diff --git a/packages/vant/src/pull-refresh/PullRefresh.tsx b/packages/vant/src/pull-refresh/PullRefresh.tsx index fa6f6f97a..29f36af63 100644 --- a/packages/vant/src/pull-refresh/PullRefresh.tsx +++ b/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(); + const track = ref(); 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 (
diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md index 7084fdbf4..5a8590ff9 100644 --- a/packages/vant/src/search/README.md +++ b/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` | diff --git a/packages/vant/src/search/README.zh-CN.md b/packages/vant/src/search/README.zh-CN.md index dbeb89d24..d1a52078f 100644 --- a/packages/vant/src/search/README.zh-CN.md +++ b/packages/vant/src/search/README.zh-CN.md @@ -161,7 +161,7 @@ export default { | clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，
`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` | diff --git a/packages/vant/src/search/index.less b/packages/vant/src/search/index.less index f13d687fc..f10d810bb 100644 --- a/packages/vant/src/search/index.less +++ b/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 {