From 8fc83cd5d7f971202ac6bbbddbe8ad79f0446e45 Mon Sep 17 00:00:00 2001 From: Eduard Predescu Date: Wed, 7 Aug 2024 19:56:00 +0300 Subject: [PATCH] feat(DateField): emit undefined on field delete after input filled --- .../radix-vue/src/DateField/DateFieldRoot.vue | 7 ++--- .../radix-vue/src/DateField/useDateField.ts | 7 ++++- .../src/DatePicker/DatePickerRoot.vue | 1 - .../src/DateRangeField/DateRangeFieldRoot.vue | 26 +++++++------------ .../DateRangePicker/DateRangePickerRoot.vue | 1 - 5 files changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue index 24f304adf..e6fa4b705 100644 --- a/packages/radix-vue/src/DateField/DateFieldRoot.vue +++ b/packages/radix-vue/src/DateField/DateFieldRoot.vue @@ -123,7 +123,6 @@ onMounted(() => { const modelValue = useVModel(props, 'modelValue', emits, { defaultValue: defaultValue.value, - passive: (props.modelValue === undefined) as false, }) as Ref const defaultDate = getDefaultDate({ @@ -196,10 +195,12 @@ watch(modelValue, (_modelValue) => { }) watch([modelValue, locale], ([_modelValue]) => { - if (_modelValue !== undefined) + if (_modelValue !== undefined) { segmentValues.value = { ...syncSegmentValues({ value: _modelValue, formatter }) } - else + } + else if (Object.values(segmentValues.value).every(value => value === null)) { segmentValues.value = { ...initialSegments } + } }) const currentFocusedElement = ref(null) diff --git a/packages/radix-vue/src/DateField/useDateField.ts b/packages/radix-vue/src/DateField/useDateField.ts index 1c9889045..36e7dadd1 100644 --- a/packages/radix-vue/src/DateField/useDateField.ts +++ b/packages/radix-vue/src/DateField/useDateField.ts @@ -2,7 +2,7 @@ import { type Formatter, useKbd } from '@/shared' import type { AnyExceptLiteral, HourCycle, SegmentPart, SegmentValueObj } from '@/shared/date' import { getDaysInMonth, toDate } from '@/date' import type { CalendarDateTime, CycleTimeOptions, DateFields, DateValue, TimeFields } from '@internationalized/date' -import { type Ref, computed } from 'vue' +import { type Ref, computed, ref } from 'vue' import { isAcceptableSegmentKey, isNumberString, isSegmentNavigationKey } from './utils' type MinuteSecondIncrementProps = { @@ -261,6 +261,7 @@ export type UseDateFieldProps = { export function useDateField(props: UseDateFieldProps) { const kbd = useKbd() + const filledDate = ref(false) function minuteSecondIncrementation({ e, part, dateRef, prevValue }: MinuteSecondIncrementProps): number { const sign = e.key === kbd.ARROW_UP ? 1 : -1 @@ -825,6 +826,10 @@ export function useDateField(props: UseDateFieldProps) { }) props.modelValue.value = dateRef.copy() + filledDate.value = true + } + else if (filledDate.value) { + props.modelValue.value = undefined } } } diff --git a/packages/radix-vue/src/DatePicker/DatePickerRoot.vue b/packages/radix-vue/src/DatePicker/DatePickerRoot.vue index c88a406a3..ebffe1cf4 100644 --- a/packages/radix-vue/src/DatePicker/DatePickerRoot.vue +++ b/packages/radix-vue/src/DatePicker/DatePickerRoot.vue @@ -109,7 +109,6 @@ const dir = useDirection(propDir) const modelValue = useVModel(props, 'modelValue', emits, { defaultValue: defaultValue.value, - passive: (props.modelValue === undefined) as false, }) as Ref const defaultDate = computed(() => getDefaultDate({ diff --git a/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue b/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue index 1e4ba4ada..7a558f0ff 100644 --- a/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue +++ b/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue @@ -121,7 +121,6 @@ onMounted(() => { const modelValue = useVModel(props, 'modelValue', emits, { defaultValue: props.defaultValue ?? { start: undefined, end: undefined }, - passive: (props.modelValue === undefined) as false, }) as Ref const defaultDate = getDefaultDate({ @@ -233,18 +232,7 @@ const startValue = ref(modelValue.value.start?.copy()) as Ref watch([startValue, endValue], ([_startValue, _endValue]) => { - const value = modelValue.value - if (value.start && value.end && _startValue && _endValue && value.start.compare(_startValue) === 0 && value.end.compare(_endValue) === 0) - return - - if (_startValue && _endValue) { - if (modelValue.value.start?.compare(_startValue) === 0 && modelValue.value.end?.compare(_endValue) === 0) - return - modelValue.value = { start: _startValue.copy(), end: _endValue.copy() } - } - else if (modelValue.value.start && modelValue.value.end) { - modelValue.value = { start: undefined, end: undefined } - } + modelValue.value = { start: _startValue?.copy(), end: _endValue?.copy() } }) watch(modelValue, (_modelValue) => { @@ -257,10 +245,12 @@ watch(modelValue, (_modelValue) => { }) watch([startValue, locale], ([_startValue]) => { - if (_startValue !== undefined) + if (_startValue !== undefined) { startSegmentValues.value = { ...syncSegmentValues({ value: _startValue, formatter }) } - else + } + else if (Object.values(startSegmentValues.value).every(value => value === null)) { startSegmentValues.value = { ...initialSegments } + } }) watch(locale, (value) => { @@ -281,10 +271,12 @@ watch(modelValue, (_modelValue) => { }) watch([endValue, locale], ([_endValue]) => { - if (_endValue !== undefined) + if (_endValue !== undefined) { endSegmentValues.value = { ...syncSegmentValues({ value: _endValue, formatter }) } - else + } + else if (Object.values(endSegmentValues.value).every(value => value === null)) { endSegmentValues.value = { ...initialSegments } + } }) const currentFocusedElement = ref(null) diff --git a/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue b/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue index 6cea031e5..1e8b43c22 100644 --- a/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue +++ b/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue @@ -112,7 +112,6 @@ const dir = useDirection(propsDir) const modelValue = useVModel(props, 'modelValue', emits, { defaultValue: props.defaultValue, - passive: (props.modelValue === undefined) as false, }) as Ref const defaultDate = getDefaultDate({