From f8da94e228952e05d5d74eebe19308466c43879b Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 22 Sep 2021 10:54:58 +0800 Subject: [PATCH] perf: useInjectFormItemContext --- .../__tests__/__snapshots__/demo.test.js.snap | 12 +++--- .../generatePicker/generateRangePicker.tsx | 2 +- .../generatePicker/generateSinglePicker.tsx | 2 +- .../date-picker/generatePicker/props.ts | 2 + components/form/FormItem.tsx | 37 +------------------ components/form/FormItemContext.ts | 4 +- .../__tests__/__snapshots__/demo.test.js.snap | 4 +- components/form/demo/validation.vue | 19 +++------- components/form/index.tsx | 4 +- components/input-number/index.tsx | 19 +++++++++- components/input/Input.tsx | 10 ++--- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/input/inputProps.ts | 1 + .../__tests__/__snapshots__/demo.test.js.snap | 4 +- components/mentions/index.tsx | 14 ++++++- components/radio/Group.tsx | 18 ++++++++- components/radio/Radio.tsx | 11 +++++- components/rate/index.tsx | 8 +++- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/slider/index.tsx | 18 ++++++++- components/switch/index.tsx | 13 ++++++- components/time-picker/time-picker.tsx | 17 ++++++++- components/transfer/index.tsx | 7 +++- components/tree-select/index.tsx | 11 ++++++ components/upload/Upload.tsx | 5 +++ components/vc-input-number/src/index.jsx | 4 -- .../vc-slider/src/common/createSlider.tsx | 4 +- 27 files changed, 165 insertions(+), 89 deletions(-) diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap index 0d6ae2781..5abf1afb8 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap @@ -4,7 +4,7 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
-
+
input here
@@ -17,7 +17,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.vue correctly
-
+
@@ -30,7 +30,7 @@ exports[`renders ./components/auto-complete/demo/custom.vue correctly 1`] = `
-
+
@@ -42,7 +42,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.vue correctl
-
+
input here
@@ -54,7 +54,7 @@ exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
-
+
input here
@@ -67,7 +67,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctl
-
+
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 91eb063ba..d939bd0b1 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -15,7 +15,7 @@ import { commonProps, rangePickerProps } from './props'; import type { PanelMode, RangeValue } from '../../vc-picker/interface'; import type { RangePickerSharedProps } from '../../vc-picker/RangePicker'; import devWarning from '../../vc-util/devWarning'; -import { useInjectFormItemContext } from 'ant-design-vue/es/form/FormItemContext'; +import { useInjectFormItemContext } from '../../form/FormItemContext'; export default function generateRangePicker( generateConfig: GenerateConfig, diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 31f5d642c..43c407ef5 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -14,7 +14,7 @@ import classNames from '../../_util/classNames'; import { commonProps, datePickerProps } from './props'; import devWarning from '../../vc-util/devWarning'; -import { useInjectFormItemContext } from 'ant-design-vue/es/form/FormItemContext'; +import { useInjectFormItemContext } from '../../form/FormItemContext'; export default function generateSinglePicker( generateConfig: GenerateConfig, diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts index 5da209fc6..5db4621b8 100644 --- a/components/date-picker/generatePicker/props.ts +++ b/components/date-picker/generatePicker/props.ts @@ -19,6 +19,7 @@ import type { VueNode } from '../../_util/type'; function commonProps() { return { + id: String, dropdownClassName: String, dropdownAlign: { type: Object as PropType }, popupStyle: { type: Object as PropType }, @@ -77,6 +78,7 @@ function commonProps() { } export interface CommonProps { + id?: string; prefixCls?: string; dropdownClassName?: string; dropdownAlign?: AlignType; diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 0928fbe7f..a1b7164c9 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -276,6 +276,7 @@ export default defineComponent({ id: fieldId, onFieldBlur, onFieldChange, + clearValidate, }); let registered = false; watch( @@ -305,12 +306,6 @@ export default defineComponent({ onBeforeUnmount(() => { formContext.removeField(eventKey); }); - // const onHelpAnimEnd = (_key: string, helpShow: boolean) => { - // this.helpShow = helpShow; - // if (!helpShow) { - // this.$forceUpdate(); - // } - // }; const itemClassName = computed(() => ({ [`${prefixCls.value}-item`]: true, @@ -324,36 +319,6 @@ export default defineComponent({ })); return () => { const help = props.help ?? (slots.help ? filterEmpty(slots.help()) : null); - // const children = flattenChildren(slots.default?.()); - // let firstChildren = children[0]; - // if (fieldName.value && props.autoLink && isValidElement(firstChildren)) { - // const originalEvents = firstChildren.props || {}; - // const originalBlur = originalEvents.onBlur; - // const originalChange = originalEvents.onChange; - // firstChildren = cloneElement(firstChildren, { - // ...(fieldId.value ? { id: fieldId.value } : undefined), - // onBlur: (...args: any[]) => { - // if (Array.isArray(originalChange)) { - // for (let i = 0, l = originalChange.length; i < l; i++) { - // originalBlur[i](...args); - // } - // } else if (originalBlur) { - // originalBlur(...args); - // } - // onFieldBlur(); - // }, - // onChange: (...args: any[]) => { - // if (Array.isArray(originalChange)) { - // for (let i = 0, l = originalChange.length; i < l; i++) { - // originalChange[i](...args); - // } - // } else if (originalChange) { - // originalChange(...args); - // } - // onFieldChange(); - // }, - // }); - // } return ( ; + id: ComputedRef; onFieldBlur: () => void; onFieldChange: () => void; + clearValidate: () => void; }; type ContextProps = FormItemContext; @@ -20,6 +21,7 @@ export const useInjectFormItemContext = () => { id: computed(() => undefined), onFieldBlur: () => {}, onFieldChange: () => {}, + clearValidate: () => {}, }; // We should prevent the passing of context for children diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 7e2a58b60..96a16c7e9 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -141,7 +141,7 @@ exports[`renders ./components/form/demo/custom-validation.vue correctly 1`] = `
-
+
@@ -154,7 +154,7 @@ exports[`renders ./components/form/demo/custom-validation.vue correctly 1`] = `
-
+
diff --git a/components/form/demo/validation.vue b/components/form/demo/validation.vue index 1487462d2..2e1f35531 100644 --- a/components/form/demo/validation.vue +++ b/components/form/demo/validation.vue @@ -27,13 +27,12 @@ Just add the `rules` attribute for `Form` component, pass validation rules, and - + + Zone one + Zone two + - + Create Reset @@ -132,12 +131,6 @@ export default defineComponent({ rules, onSubmit, resetForm, - option: ref([ - { - value: 'lucy', - label: 'Lucy', - }, - ]), }; }, }); diff --git a/components/form/index.tsx b/components/form/index.tsx index cfb6c6135..56062202e 100644 --- a/components/form/index.tsx +++ b/components/form/index.tsx @@ -2,6 +2,7 @@ import type { App, Plugin } from 'vue'; import Form, { formProps } from './Form'; import FormItem, { formItemProps } from './FormItem'; import useForm from './useForm'; +import { useInjectFormItemContext } from './FormItemContext'; export type { FormProps } from './Form'; export type { FormItemProps } from './FormItem'; @@ -13,10 +14,11 @@ Form.install = function (app: App) { return app; }; -export { FormItem, formItemProps, formProps, useForm }; +export { FormItem, formItemProps, formProps, useForm, useInjectFormItemContext }; export default Form as typeof Form & Plugin & { readonly Item: typeof Form.Item; readonly useForm: typeof useForm; + readonly useInjectFormItemContext: typeof useInjectFormItemContext; }; diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 40c503edd..0d79c21c2 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -9,6 +9,7 @@ import VcInputNumber from '../vc-input-number/src'; import { defaultConfigProvider } from '../config-provider'; import { tuple, withInstall } from '../_util/type'; import type { EventHandler } from '../_util/EventInterface'; +import { useInjectFormItemContext } from '../form/FormItemContext'; const inputNumberProps = { prefixCls: PropTypes.string, @@ -40,7 +41,9 @@ const InputNumber = defineComponent({ name: 'AInputNumber', inheritAttrs: false, props: inputNumberProps, - setup(props) { + emits: ['input', 'change', 'blur', 'update:value'], + setup(props, { emit }) { + const formItemContext = useInjectFormItemContext(); const inputNumberRef = ref(null); const focus = () => { inputNumberRef.value.focus(); @@ -48,6 +51,13 @@ const InputNumber = defineComponent({ const blur = () => { inputNumberRef.value.blur(); }; + const handleChange = (val: number) => { + emit('update:value', val); + emit('change', val); + }; + const handleBlur = () => { + emit('blur'); + }; onMounted(() => { nextTick(() => { if (process.env.NODE_ENV === 'test') { @@ -62,6 +72,9 @@ const InputNumber = defineComponent({ inputNumberRef, focus, blur, + formItemContext, + handleBlur, + handleChange, }; }, @@ -70,6 +83,7 @@ const InputNumber = defineComponent({ prefixCls: customizePrefixCls, size, class: className, + id = this.formItemContext.id.value, ...others } = { ...getOptionProps(this), @@ -94,6 +108,9 @@ const InputNumber = defineComponent({ downHandler: downIcon, ...others, class: inputNumberClass, + onChange: this.handleChange, + onBlur: this.handleBlur, + id, }; return ; }, diff --git a/components/input/Input.tsx b/components/input/Input.tsx index eb2696957..02d340b07 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -178,6 +178,7 @@ export default defineComponent({ const inputProps: any = { ...otherProps, ...$attrs, + id: otherProps.id ?? this.formItemContext.id.value, onKeydown: handleKeyDown, class: classNames(getInputClassName(prefixCls, size, disabled), { [$attrs.class as string]: $attrs.class && !addonBefore && !addonAfter, @@ -245,12 +246,7 @@ export default defineComponent({ prefix, isFocused, }; - return ( - - ); + + return ; }, }); diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 629e11113..ba9adae9e 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -66,7 +66,7 @@ exports[`renders ./components/input/demo/group.vue correctly 1`] = `
-
+
Email
diff --git a/components/input/inputProps.ts b/components/input/inputProps.ts index f0613af0a..28225f03f 100644 --- a/components/input/inputProps.ts +++ b/components/input/inputProps.ts @@ -2,6 +2,7 @@ import type { PropType } from 'vue'; import PropTypes from '../_util/vue-types'; import type { SizeType } from '../config-provider'; export default { + id: PropTypes.string, prefixCls: PropTypes.string, inputPrefixCls: PropTypes.string, defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap index 89514841d..08c2cf273 100644 --- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap @@ -21,7 +21,7 @@ exports[`renders ./components/mentions/demo/form.vue correctly 1`] = `
-
+
@@ -38,7 +38,7 @@ exports[`renders ./components/mentions/demo/form.vue correctly 1`] = `
-
+
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index bbbdff9b6..918ebf25d 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -7,6 +7,7 @@ import VcMentions from '../vc-mentions'; import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps'; import useConfigInject from '../_util/hooks/useConfigInject'; import { flattenChildren, getOptionProps } from '../_util/props-util'; +import { useInjectFormItemContext } from '../form/FormItemContext'; const { Option } = VcMentions; @@ -75,6 +76,7 @@ const mentionsProps = { }, notFoundContent: PropTypes.any, defaultValue: String, + id: String, }; export type MentionsProps = Partial>; @@ -92,6 +94,7 @@ const Mentions = defineComponent({ const focused = ref(false); const vcMentions = ref(null); const value = ref(props.value ?? props.defaultValue ?? ''); + const formItemContext = useInjectFormItemContext(); watch( () => props.value, val => { @@ -106,6 +109,7 @@ const Mentions = defineComponent({ const handleBlur = (e: FocusEvent) => { focused.value = false; emit('blur', e); + formItemContext.onFieldBlur(); }; const handleSelect = (...args: [MentionsOptionProps, string]) => { @@ -119,6 +123,7 @@ const Mentions = defineComponent({ } emit('update:value', val); emit('change', val); + formItemContext.onFieldChange(); }; const getNotFoundContent = () => { @@ -159,7 +164,13 @@ const Mentions = defineComponent({ }); return () => { - const { disabled, getPopupContainer, rows = 1, ...restProps } = props; + const { + disabled, + getPopupContainer, + rows = 1, + id = formItemContext.id.value, + ...restProps + } = props; const { class: className, ...otherAttrs } = attrs; const otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls']); @@ -186,6 +197,7 @@ const Mentions = defineComponent({ onBlur: handleBlur, ref: vcMentions, value: value.value, + id, }; return ( { this.updatingValue = false; @@ -73,7 +78,12 @@ export default defineComponent({ }, render() { const props = getOptionProps(this); - const { prefixCls: customizePrefixCls, options, buttonStyle } = props; + const { + prefixCls: customizePrefixCls, + options, + buttonStyle, + id = this.formItemContext.id.value, + } = props; const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('radio', customizePrefixCls); @@ -114,6 +124,10 @@ export default defineComponent({ }); } - return
{children}
; + return ( +
+ {children} +
+ ); }, }); diff --git a/components/radio/Radio.tsx b/components/radio/Radio.tsx index 421b5005c..e3908a5b6 100644 --- a/components/radio/Radio.tsx +++ b/components/radio/Radio.tsx @@ -6,6 +6,7 @@ import classNames from '../_util/classNames'; import { getOptionProps } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; import type { RadioChangeEvent } from './interface'; +import { useInjectFormItemContext } from '../form/FormItemContext'; export const radioProps = { prefixCls: PropTypes.string, @@ -30,9 +31,11 @@ export default defineComponent({ props: radioProps, emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'], setup() { + const formItemContext = useInjectFormItemContext(); return { configProvider: inject('configProvider', defaultConfigProvider), radioGroupContext: inject('radioGroupContext', null), + formItemContext, }; }, methods: { @@ -47,6 +50,7 @@ export default defineComponent({ this.$emit('update:checked', targetChecked); this.$emit('update:value', targetChecked); this.$emit('change', event); + this.formItemContext.onFieldChange(); }, onChange2(e: RadioChangeEvent) { this.$emit('change', e); @@ -59,12 +63,17 @@ export default defineComponent({ render() { const { $slots, radioGroupContext: radioGroup } = this; const props = getOptionProps(this); - const { prefixCls: customizePrefixCls, ...restProps } = props; + const { + prefixCls: customizePrefixCls, + id = this.formItemContext.id.value, + ...restProps + } = props; const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('radio', customizePrefixCls); const rProps: RadioProps = { prefixCls, + id, ...restProps, }; diff --git a/components/rate/index.tsx b/components/rate/index.tsx index 100802408..c3e1b3a10 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -12,6 +12,7 @@ import useConfigInject from '../_util/hooks/useConfigInject'; import Star from './Star'; import { useRef } from '../_util/hooks/useRef'; +import { useInjectFormItemContext } from '../form/FormItemContext'; export const rateProps = { prefixCls: PropTypes.string, @@ -25,6 +26,7 @@ export const rateProps = { autofocus: PropTypes.looseBool, tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), direction: PropTypes.string, + id: PropTypes.string, }; export type RateProps = Partial>; @@ -44,6 +46,7 @@ const Rate = defineComponent({ emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'], setup(props, { slots, attrs, emit, expose }) { const { prefixCls, direction } = useConfigInject('rate', props); + const formItemContext = useInjectFormItemContext(); const rateRef = ref(); const [setRef, starRefs] = useRef(); const state = reactive({ @@ -82,6 +85,7 @@ const Rate = defineComponent({ } emit('update:value', value); emit('change', value); + formItemContext.onFieldChange(); }; const onHover = (e: MouseEvent, index: number) => { @@ -115,6 +119,7 @@ const Rate = defineComponent({ const onBlur = () => { state.focused = false; emit('blur'); + formItemContext.onFieldBlur(); }; const onKeyDown = (event: KeyboardEvent) => { const { keyCode } = event; @@ -187,7 +192,7 @@ const Rate = defineComponent({ const character = getPropsSlot(slots, props, 'character') || ; return () => { - const { count, allowHalf, disabled, tabindex } = props; + const { count, allowHalf, disabled, tabindex, id = formItemContext.id.value } = props; const { class: className, style } = attrs; const stars = []; const disabledClass = disabled ? `${prefixCls.value}-disabled` : ''; @@ -216,6 +221,7 @@ const Rate = defineComponent({ return (
    -
    +
    diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 8350c9d50..613a139f2 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -10,6 +10,7 @@ import type { TooltipPlacement } from '../tooltip/Tooltip'; import useConfigInject from '../_util/hooks/useConfigInject'; import SliderTooltip from './SliderTooltip'; import classNames from '../_util/classNames'; +import { useInjectFormItemContext } from '../form/FormItemContext'; export type SliderValue = number | [number, number]; @@ -39,6 +40,7 @@ type Value = [number, number] | number; const defaultTipFormatter = (value: number) => (typeof value === 'number' ? value.toString() : ''); export const sliderProps = () => ({ + id: String, prefixCls: String, tooltipPrefixCls: String, range: { type: [Boolean, Object] as PropType, default: undefined }, @@ -78,11 +80,12 @@ const Slider = defineComponent({ props: { ...sliderProps(), }, - emits: ['update:value', 'change', 'afterChange'], + emits: ['update:value', 'change', 'afterChange', 'blur'], slots: ['mark'], setup(props, { attrs, slots, emit, expose }) { const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } = useConfigInject('slider', props); + const formItemContext = useInjectFormItemContext(); const sliderRef = ref(); const visibles = ref({}); const toggleTooltipVisible = (index: number, visible: boolean) => { @@ -107,6 +110,10 @@ const Slider = defineComponent({ const handleChange = (val: SliderValue) => { emit('update:value', val); emit('change', val); + formItemContext.onFieldChange(); + }; + const handleBlur = () => { + emit('blur'); }; expose({ focus, @@ -140,7 +147,12 @@ const Slider = defineComponent({ ); }; return () => { - const { tooltipPrefixCls: customizeTooltipPrefixCls, range, ...restProps } = props; + const { + tooltipPrefixCls: customizeTooltipPrefixCls, + range, + id = formItemContext.id.value, + ...restProps + } = props; const tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls); const cls = classNames(attrs.class, { [`${prefixCls.value}-rtl`]: direction.value === 'rtl', @@ -181,6 +193,7 @@ const Slider = defineComponent({ return ( ); diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 719ef670e..47333d4bb 100644 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -9,10 +9,12 @@ import { tuple, withInstall } from '../_util/type'; import { getPropsSlot } from '../_util/props-util'; import Omit from 'omit.js'; import useConfigInject from '../_util/hooks/useConfigInject'; +import { useInjectFormItemContext } from '../form/FormItemContext'; export const SwitchSizes = tuple('small', 'default'); type CheckedType = boolean | string | number; const switchProps = { + id: PropTypes.string, prefixCls: PropTypes.string, size: PropTypes.oneOf(SwitchSizes), disabled: PropTypes.looseBool, @@ -55,8 +57,9 @@ const Switch = defineComponent({ inheritAttrs: false, props: switchProps, slots: ['checkedChildren', 'unCheckedChildren'], - emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown'], + emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'], setup(props, { attrs, slots, expose, emit }) { + const formItemContext = useInjectFormItemContext(); onBeforeMount(() => { warning( !('defaultChecked' in attrs), @@ -104,6 +107,11 @@ const Switch = defineComponent({ } emit('update:checked', check); emit('change', check, e); + formItemContext.onFieldChange(); + }; + + const handleBlur = () => { + emit('blur'); }; const handleClick = (e: MouseEvent) => { @@ -147,10 +155,13 @@ const Switch = defineComponent({ 'defaultChecked', 'checkedValue', 'unCheckedValue', + 'id', ])} {...attrs} + id={props.id ?? formItemContext.id.value} onKeydown={handleKeyDown} onClick={handleClick} + onBlur={handleBlur} onMouseup={handleMouseUp} type="button" role="switch" diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx index 309950ff8..ddafac133 100644 --- a/components/time-picker/time-picker.tsx +++ b/components/time-picker/time-picker.tsx @@ -11,6 +11,7 @@ import type { GenerateConfig } from '../vc-picker/generate'; import type { PanelMode, RangeValue } from '../vc-picker/interface'; import type { RangePickerSharedProps } from '../vc-picker/RangePicker'; import devWarning from '../vc-util/devWarning'; +import { useInjectFormItemContext } from '../form/FormItemContext'; export interface TimePickerLocale { placeholder?: string; @@ -74,6 +75,7 @@ function createTimePicker< slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'], emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'], setup(props, { slots, expose, emit, attrs }) { + const formItemContext = useInjectFormItemContext(); devWarning( !(slots.addon || props.addon), 'TimePicker', @@ -91,6 +93,7 @@ function createTimePicker< const onChange = (value: DateType | string, dateString: string) => { emit('update:value', value); emit('change', value, dateString); + formItemContext.onFieldChange(); }; const onOpenChange = (open: boolean) => { emit('update:open', open); @@ -101,15 +104,18 @@ function createTimePicker< }; const onBlur = () => { emit('blur'); + formItemContext.onFieldBlur(); }; const onOk = (value: DateType) => { emit('ok', value); }; return () => { + const { id = formItemContext.id.value, ...restProps } = props; return ( { pickerRef.value?.focus(); @@ -166,6 +175,7 @@ function createTimePicker< ) => { emit('update:value', values); emit('change', values, dateStrings); + formItemContext.onFieldChange(); }; const onOpenChange = (open: boolean) => { emit('update:open', open); @@ -176,6 +186,7 @@ function createTimePicker< }; const onBlur = () => { emit('blur'); + formItemContext.onFieldBlur(); }; const onPanelChange = ( values: RangeValue | RangeValue, @@ -194,10 +205,12 @@ function createTimePicker< emit('calendarChange', values, dateStrings, info); }; return () => { + const { id = formItemContext.id.value, ...restProps } = props; return ( , default: [] }, disabled: { type: Boolean, default: undefined }, @@ -118,6 +120,7 @@ const Transfer = defineComponent({ const sourceSelectedKeys = ref([]); const targetSelectedKeys = ref([]); + const formItemContext = useInjectFormItemContext(); watch( () => props.selectedKeys, () => { @@ -164,6 +167,7 @@ const Transfer = defineComponent({ emit('update:targetKeys', newTargetKeys); handleSelectChange(oppositeDirection, []); emit('change', newTargetKeys, direction, newMoveKeys); + formItemContext.onFieldChange(); }; const moveToLeft = () => { @@ -312,6 +316,7 @@ const Transfer = defineComponent({ selectAllLabels = [], oneWay, pagination, + id = formItemContext.id.value, } = props; const { class: className, style } = attrs; @@ -335,7 +340,7 @@ const Transfer = defineComponent({ const rightTitle = (titles && titles[1]) ?? slots.rightTitle?.() ?? (locale.titles || ['', ''])[1]; return ( -
    +
    { if (transitionName !== undefined) { @@ -92,6 +93,8 @@ const TreeSelect = defineComponent({ '`replaceFields` is deprecated, please use fieldNames instead', ); }); + + const formItemContext = useInjectFormItemContext(); const { configProvider, prefixCls, @@ -131,6 +134,7 @@ const TreeSelect = defineComponent({ const handleChange = (...args: any[]) => { emit('update:value', args[0]); emit('change', ...args); + formItemContext.onFieldChange(); }; const handleTreeExpand = (...args: any[]) => { emit('update:treeExpandedKeys', args[0]); @@ -140,6 +144,10 @@ const TreeSelect = defineComponent({ emit('update:searchValue', args[0]); emit('search', ...args); }; + const handleBlur = () => { + emit('blur'); + formItemContext.onFieldBlur(); + }; return () => { const { notFoundContent = slots.notFoundContent?.(), @@ -154,6 +162,7 @@ const TreeSelect = defineComponent({ treeLine, switcherIcon = slots.switcherIcon?.(), fieldNames = props.replaceFields, + id = formItemContext.id.value, } = props; // ===================== Icons ===================== const { suffixIcon, removeIcon, clearIcon } = getIcons( @@ -202,6 +211,7 @@ const TreeSelect = defineComponent({ virtual={virtual.value} dropdownMatchSelectWidth={dropdownMatchSelectWidth.value} {...selectProps} + id={id} fieldNames={fieldNames} ref={treeSelectRef} prefixCls={prefixCls.value} @@ -223,6 +233,7 @@ const TreeSelect = defineComponent({ choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)} transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)} onChange={handleChange} + onBlur={handleBlur} onSearch={handleSearch} onTreeExpand={handleTreeExpand} v-slots={{ diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index e90a8a537..53f4c868a 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -14,6 +14,7 @@ import { UploadProps } from './interface'; import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils'; import { defineComponent, inject } from 'vue'; import { getDataAndAriaProps } from '../_util/util'; +import { useInjectFormItemContext } from '../form/FormItemContext'; export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'; export interface UploadFile { @@ -54,10 +55,12 @@ export default defineComponent({ supportServerRender: true, }), setup() { + const formItemContext = useInjectFormItemContext(); return { upload: null, progressTimer: null, configProvider: inject('configProvider', defaultConfigProvider), + formItemContext, }; }, // recentUploadStatus: boolean | PromiseLike; @@ -190,6 +193,7 @@ export default defineComponent({ } this.$emit('update:fileList', info.fileList); this.$emit('change', info); + this.formItemContext.onFieldChange(); }, onFileDrop(e) { this.setState({ @@ -276,6 +280,7 @@ export default defineComponent({ const vcUploadProps = { ...this.$props, + id: this.$props.id ?? this.formItemContext.id.value, prefixCls, beforeUpload: this.reBeforeUpload, onStart: this.onStart, diff --git a/components/vc-input-number/src/index.jsx b/components/vc-input-number/src/index.jsx index 81899219e..a99ac56be 100755 --- a/components/vc-input-number/src/index.jsx +++ b/components/vc-input-number/src/index.jsx @@ -158,7 +158,6 @@ export default defineComponent({ typeof nextValue === 'number' && nextValue > max ) { - this.__emit('update:value', max); this.__emit('change', max); } if ( @@ -167,7 +166,6 @@ export default defineComponent({ typeof nextValue === 'number' && nextValue < min ) { - this.__emit('update:value', min); this.__emit('change', min); } } @@ -277,7 +275,6 @@ export default defineComponent({ this.rawInput = this.parser(this.getValueFromEvent(e)); this.setState({ inputValue: this.rawInput }); const num = this.toNumber(this.rawInput); // valid number or invalid string - this.__emit('update:value', num); this.__emit('change', num); }, onFocus(...args) { @@ -374,7 +371,6 @@ export default defineComponent({ ); } if (changed) { - this.__emit('update:value', newValue); this.__emit('change', newValue); } return newValue; diff --git a/components/vc-slider/src/common/createSlider.tsx b/components/vc-slider/src/common/createSlider.tsx index e12cbb234..aaf7b4d02 100644 --- a/components/vc-slider/src/common/createSlider.tsx +++ b/components/vc-slider/src/common/createSlider.tsx @@ -16,6 +16,7 @@ function noop() {} export default function createSlider(Component) { // const displayName = `ComponentEnhancer(${Component.displayName})` const propTypes = { + id: PropTypes.string, min: PropTypes.number, max: PropTypes.number, step: PropTypes.number, @@ -292,8 +293,9 @@ export default function createSlider(Component) { railStyle, dotStyle, activeDotStyle, + id, } = this; - const { class: className, style, id } = this.$attrs; + const { class: className, style } = this.$attrs; const { tracks, handles } = this.renderSlider(); const sliderClassName = classNames(prefixCls, className, {