diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index 77092cdb5..2250ee746 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -42,7 +42,6 @@ "@types/fs-extra": "^9.0.13", "@types/less": "^3.0.3", "@types/markdown-it": "^12.2.3", - "@types/react": "^18", "@jest/types": "^27", "vue": "^3.2.27", "react": "^18", diff --git a/packages/vant/src/action-bar/ActionBar.tsx b/packages/vant/src/action-bar/ActionBar.tsx index f1df59efb..e7343d554 100644 --- a/packages/vant/src/action-bar/ActionBar.tsx +++ b/packages/vant/src/action-bar/ActionBar.tsx @@ -1,12 +1,14 @@ -import { defineComponent, type ExtractPropTypes } from 'vue'; +import { defineComponent, ref, type ExtractPropTypes } from 'vue'; import { truthProp, createNamespace } from '../utils'; import { useChildren } from '@vant/use'; +import { usePlaceholder } from '../composables/use-placeholder'; const [name, bem] = createNamespace('action-bar'); export const ACTION_BAR_KEY = Symbol(name); const actionBarProps = { + placeholder: Boolean, safeAreaInsetBottom: truthProp, }; @@ -18,16 +20,26 @@ export default defineComponent({ props: actionBarProps, setup(props, { slots }) { + const root = ref(); + const renderPlaceholder = usePlaceholder(root, bem); const { linkChildren } = useChildren(ACTION_BAR_KEY); linkChildren(); - return () => ( + const renderActionBar = () => (
{slots.default?.()}
); + + return () => { + if (props.placeholder) { + return renderPlaceholder(renderActionBar); + } + return renderActionBar(); + }; }, }); diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md index c6fcb2617..742c858c5 100644 --- a/packages/vant/src/action-bar/README.md +++ b/packages/vant/src/action-bar/README.md @@ -90,6 +90,7 @@ Use `badge` prop to show badge in icon. | Attribute | Description | Type | Default | | --- | --- | --- | --- | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | +| placeholder `v3.5.1` | Whether to generate a placeholder element | _boolean_ | `false` | ### ActionBarIcon Props diff --git a/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md index 7ee7f1d14..c529e234b 100644 --- a/packages/vant/src/action-bar/README.zh-CN.md +++ b/packages/vant/src/action-bar/README.zh-CN.md @@ -94,6 +94,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| placeholder `v3.5.1` | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | ### ActionBarIcon Props diff --git a/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap index 00a3012f5..eb736552a 100644 --- a/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap @@ -4,3 +4,12 @@ exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
`; + +exports[`should render placeholder element when using placeholder prop 1`] = ` +
+
+
+
+`; diff --git a/packages/vant/src/action-bar/test/index.spec.ts b/packages/vant/src/action-bar/test/index.spec.ts index b494fb8c6..0fea7cf8e 100644 --- a/packages/vant/src/action-bar/test/index.spec.ts +++ b/packages/vant/src/action-bar/test/index.spec.ts @@ -1,5 +1,5 @@ import { ActionBar } from '..'; -import { mount } from '../../../test'; +import { later, mockGetBoundingClientRect, mount } from '../../../test'; test('should allow to disable safe-area-inset-bottom prop', () => { const wrapper = mount(ActionBar, { @@ -10,3 +10,16 @@ test('should allow to disable safe-area-inset-bottom prop', () => { expect(wrapper.html()).toMatchSnapshot(); }); + +test('should render placeholder element when using placeholder prop', async () => { + const restore = mockGetBoundingClientRect({ height: 50 }); + const wrapper = mount(ActionBar, { + props: { + placeholder: true, + }, + }); + + await later(); + expect(wrapper.html()).toMatchSnapshot(); + restore(); +}); diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index 5b7ff674e..d668b6d28 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -185,6 +185,10 @@ 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 { diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 9c85f7607..6b6a57127 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -128,6 +128,8 @@ export default defineComponent({ 'clear', 'keypress', 'clickInput', + 'endValidate', + 'startValidate', 'clickLeftIcon', 'clickRightIcon', 'update:modelValue', @@ -218,19 +220,24 @@ export default defineComponent({ state.validateMessage = ''; }; + const endValidate = () => emit('endValidate', { status: state.status }); + const validate = (rules = props.rules) => new Promise((resolve) => { resetValidation(); if (rules) { + emit('startValidate'); runRules(rules).then(() => { if (state.status === 'failed') { resolve({ name: props.name, message: state.validateMessage, }); + endValidate(); } else { state.status = 'passed'; resolve(); + endValidate(); } }); } else { diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index d1f10fb4c..b772ca02c 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -298,6 +298,8 @@ Use `input-align` prop to align the input value. | click-input | Emitted when the input is clicked | _event: MouseEvent_ | | click-left-icon | Emitted when the left icon is clicked | _event: MouseEvent_ | | click-right-icon | Emitted when the right icon is clicked | _event: MouseEvent_ | +| start-validate `v3.5.1` | Emitted when start validation | - | +| end-validate `v3.5.1` | Emitted when end validation | _{ status: string }_ | ### Methods diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index 6828d3082..3129a2a4b 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -307,16 +307,18 @@ export default { ### Events -| 事件 | 说明 | 回调参数 | -| ------------------ | -------------------- | ------------------------------ | +| 事件 | 说明 | 回调参数 | +| --- | --- | --- | | update:model-value | 输入框内容变化时触发 | _value: string (当前输入的值)_ | -| focus | 输入框获得焦点时触发 | _event: Event_ | -| blur | 输入框失去焦点时触发 | _event: Event_ | -| clear | 点击清除按钮时触发 | _event: MouseEvent_ | -| click | 点击组件时触发 | _event: MouseEvent_ | -| click-input | 点击输入区域时触发 | _event: MouseEvent_ | -| click-left-icon | 点击左侧图标时触发 | _event: MouseEvent_ | -| click-right-icon | 点击右侧图标时触发 | _event: MouseEvent_ | +| focus | 输入框获得焦点时触发 | _event: Event_ | +| blur | 输入框失去焦点时触发 | _event: Event_ | +| clear | 点击清除按钮时触发 | _event: MouseEvent_ | +| click | 点击组件时触发 | _event: MouseEvent_ | +| click-input | 点击输入区域时触发 | _event: MouseEvent_ | +| click-left-icon | 点击左侧图标时触发 | _event: MouseEvent_ | +| click-right-icon | 点击右侧图标时触发 | _event: MouseEvent_ | +| start-validate `v3.5.1` | 开始表单校验时触发 | - | +| end-validate `v3.5.1` | 结束表单校验时触发 | _{ status: string }_ | ### 方法 diff --git a/packages/vant/src/form/test/events.spec.tsx b/packages/vant/src/form/test/events.spec.tsx index 221b537af..fda147406 100644 --- a/packages/vant/src/form/test/events.spec.tsx +++ b/packages/vant/src/form/test/events.spec.tsx @@ -1,4 +1,4 @@ -import { mount } from '../../../test'; +import { later, mount } from '../../../test'; import { submitForm, mountSimpleRulesForm } from './shared'; import { Form } from '..'; import { Field } from '../../field'; @@ -64,3 +64,55 @@ test('should emit failed event correctly when rule message is empty', async () = values: { A: '' }, }); }); + +test('Field should emit startValidate event when validation start', async () => { + const onStart = jest.fn(); + const wrapper = mount({ + render() { + return ( +
+ + + ); + }, + }); + + await submitForm(wrapper); + expect(onStart).toHaveBeenCalledTimes(1); +}); + +test('Field should emit endValidate event when validation end', async () => { + const onEnd = jest.fn(); + const rules = [ + { + validator: () => + new Promise((resolve) => { + setTimeout(() => resolve(true), 10); + }), + }, + ]; + const wrapper = mount({ + render() { + return ( +
+ + + ); + }, + }); + + await submitForm(wrapper); + expect(onEnd).toHaveBeenCalledTimes(0); + await later(50); + expect(onEnd).toHaveBeenCalledTimes(1); +}); diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx index a993c4142..5c5403115 100644 --- a/packages/vant/src/popup/Popup.tsx +++ b/packages/vant/src/popup/Popup.tsx @@ -264,7 +264,8 @@ export default defineComponent({ }); onDeactivated(() => { - if (props.show) { + // teleported popup should be closed when deactivated + if (props.show && props.teleport) { close(); shouldReopen = true; } diff --git a/packages/vant/src/submit-bar/README.md b/packages/vant/src/submit-bar/README.md index 948f7d989..967d6e5b4 100644 --- a/packages/vant/src/submit-bar/README.md +++ b/packages/vant/src/submit-bar/README.md @@ -106,6 +106,7 @@ export default { | disabled | Whether to disable button | _boolean_ | `false` | | loading | Whether to show loading icon | _boolean_ | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | +| placeholder `v3.5.1` | Whether to generate a placeholder element | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/submit-bar/README.zh-CN.md b/packages/vant/src/submit-bar/README.zh-CN.md index 79f1cea4d..5063665fb 100644 --- a/packages/vant/src/submit-bar/README.zh-CN.md +++ b/packages/vant/src/submit-bar/README.zh-CN.md @@ -113,6 +113,7 @@ export default { | disabled | 是否禁用按钮 | _boolean_ | `false` | | loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| placeholder `v3.5.1` | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/submit-bar/SubmitBar.tsx b/packages/vant/src/submit-bar/SubmitBar.tsx index 6d85d9bb6..f34f18e27 100644 --- a/packages/vant/src/submit-bar/SubmitBar.tsx +++ b/packages/vant/src/submit-bar/SubmitBar.tsx @@ -1,4 +1,9 @@ -import { defineComponent, type PropType, type ExtractPropTypes } from 'vue'; +import { + ref, + defineComponent, + type PropType, + type ExtractPropTypes, +} from 'vue'; import { truthProp, makeStringProp, @@ -9,6 +14,7 @@ import { // Components import { Icon } from '../icon'; import { Button, ButtonType } from '../button'; +import { usePlaceholder } from '../composables/use-placeholder'; const [name, bem, t] = createNamespace('submit-bar'); @@ -27,6 +33,7 @@ const submitBarProps = { buttonType: makeStringProp('danger'), buttonColor: String, suffixLabel: String, + placeholder: Boolean, decimalLength: makeNumericProp(2), safeAreaInsetBottom: truthProp, }; @@ -41,6 +48,9 @@ export default defineComponent({ emits: ['submit'], setup(props, { emit, slots }) { + const root = ref(); + const renderPlaceholder = usePlaceholder(root, bem); + const renderText = () => { const { price, label, currency, textAlign, suffixLabel, decimalLength } = props; @@ -99,8 +109,9 @@ export default defineComponent({ ); }; - return () => ( + const renderSubmitBar = () => (
{slots.top?.()} @@ -112,5 +123,12 @@ export default defineComponent({
); + + return () => { + if (props.placeholder) { + return renderPlaceholder(renderSubmitBar); + } + return renderSubmitBar(); + }; }, }); diff --git a/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap index 627cbf97d..6cca54b1d 100644 --- a/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap @@ -47,6 +47,23 @@ exports[`should render disabled submit button correctly 1`] = ` `; +exports[`should render placeholder element when using placeholder prop 1`] = ` +
+
+
+ +
+
+
+`; + exports[`should render suffix-label correctly 1`] = `
diff --git a/packages/vant/src/submit-bar/test/index.spec.ts b/packages/vant/src/submit-bar/test/index.spec.ts index 9d3742a71..8cfe7aefa 100644 --- a/packages/vant/src/submit-bar/test/index.spec.ts +++ b/packages/vant/src/submit-bar/test/index.spec.ts @@ -1,5 +1,5 @@ import { SubmitBar } from '..'; -import { mount } from '../../../test'; +import { later, mockGetBoundingClientRect, mount } from '../../../test'; test('should emit submit event when submit button is clicked', () => { const wrapper = mount(SubmitBar); @@ -107,3 +107,16 @@ test('should render button slot correctly', () => { }); expect(wrapper.html()).toMatchSnapshot(); }); + +test('should render placeholder element when using placeholder prop', async () => { + const restore = mockGetBoundingClientRect({ height: 50 }); + const wrapper = mount(SubmitBar, { + props: { + placeholder: true, + }, + }); + + await later(); + expect(wrapper.html()).toMatchSnapshot(); + restore(); +}); diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md index 49577f7e0..9a47fba01 100644 --- a/packages/vant/src/switch/README.md +++ b/packages/vant/src/switch/README.md @@ -65,9 +65,11 @@ Using `node` slot to custom the content of the node. ```html -
- -
+