From 0fc3a6f5b014cd1aed976df41289cf56287c572e Mon Sep 17 00:00:00 2001 From: Toni Cabrera Date: Fri, 17 Jan 2025 14:47:31 -0300 Subject: [PATCH] all working --- .../core/src/DateField/DateFieldInput.vue | 32 ++++++++++-- packages/core/src/shared/date/useDateField.ts | 49 ++++++++++++++----- 2 files changed, 65 insertions(+), 16 deletions(-) diff --git a/packages/core/src/DateField/DateFieldInput.vue b/packages/core/src/DateField/DateFieldInput.vue index 47b3f3244..cd3d7268e 100644 --- a/packages/core/src/DateField/DateFieldInput.vue +++ b/packages/core/src/DateField/DateFieldInput.vue @@ -54,9 +54,27 @@ function handleFocusOut(e: FocusEvent) { function handleFocusIn(e: FocusEvent) { rootContext.setFocusedElement(e.target as HTMLElement) const dayValue = rootContext.segmentValues.value.day + const yearValue = rootContext.segmentValues.value.year if (rootContext.programmaticContinuation.value) { - if (dayValue) { + if (props.part === 'year' && yearValue) { + // create key event for keyword with rootContext.segmentValues.value.year + const event = new KeyboardEvent('keydown', { + key: yearValue.toString(), + code: `Digit${yearValue}`, + keyCode: 48 + yearValue, + which: 48 + yearValue, + bubbles: true, + cancelable: true, + }) + + console.log('triggering keydown for year', event) + + hasLeftFocus.value = false + handleSegmentKeydown(event) + rootContext.programmaticContinuation.value = false + } + else if (props.part === 'day' && dayValue) { // create key event for keyword with rootContext.segmentValues.value.day const event = new KeyboardEvent('keydown', { key: dayValue.toString(), @@ -66,12 +84,16 @@ function handleFocusIn(e: FocusEvent) { bubbles: true, cancelable: true, }) - - hasLeftFocus.value = false; + + console.log('triggering keydown for day', event) + + hasLeftFocus.value = false handleSegmentKeydown(event) + rootContext.programmaticContinuation.value = false } - } else { - hasLeftFocus.value = true; + } + else { + hasLeftFocus.value = true } } diff --git a/packages/core/src/shared/date/useDateField.ts b/packages/core/src/shared/date/useDateField.ts index 9c4f1fa5b..f1f52640c 100644 --- a/packages/core/src/shared/date/useDateField.ts +++ b/packages/core/src/shared/date/useDateField.ts @@ -335,8 +335,6 @@ export function useDateField(props: UseDateFieldProps) { * `prev` value so that we can start the segment over again * when the user types a number. */ - console.log("🚀 ~ updateDayOrMonth ~ props.programmaticContinuation.value:", props.programmaticContinuation.value) - console.log("🚀 ~ updateDayOrMonth ~ props.hasLeftFocus.value:", props.hasLeftFocus.value) if (props.hasLeftFocus.value && !props.programmaticContinuation.value) { props.hasLeftFocus.value = false prev = null @@ -384,9 +382,7 @@ export function useDateField(props: UseDateFieldProps) { * backspace key and then typed the number. */ const digits = prev.toString().length - console.log("🚀 ~ updateDayOrMonth ~ digits:", digits) const total = Number.parseInt(prev.toString() + num.toString()) - console.log("🚀 ~ updateDayOrMonth ~ total:", total) /** * If the number of digits is 2, or if the total with the existing digit * and the pressed digit is greater than the maximum value for this @@ -401,14 +397,31 @@ export function useDateField(props: UseDateFieldProps) { * as the initial value for the next segment (day) */ if (max === 12 && prev === 1 && total > max) { + console.log('enter 1') props.programmaticContinuation.value = true return { moveToNext: true, - value: 1, + value: prev, nextSegmentInitialValue: num, } } + if (max === 28 || max === 29 || max === 30 || max === 31) { + console.log({ + prev, + total, + }) + + if (prev === 3 && total > max) { + props.programmaticContinuation.value = true + + return { + moveToNext: true, + value: prev, + nextSegmentInitialValue: num, + } + } + } /** * As we're doing elsewhere, we're checking if the number is greater @@ -416,11 +429,16 @@ export function useDateField(props: UseDateFieldProps) { * going to move to the next segment. */ if (num > maxStart || total > max) { - // move to next + console.log('enter 3') + + // move to next moveToNext = true } return { value: num, moveToNext } } + + console.log('enter 4') + // move to next moveToNext = true return { value: total, moveToNext } @@ -594,11 +612,15 @@ export function useDateField(props: UseDateFieldProps) { * when the user types a number. */ // probably not implement, kind of weird - if (props.hasLeftFocus.value) { + if (props.hasLeftFocus.value && !props.programmaticContinuation.value) { props.hasLeftFocus.value = false prev = null } + if (props.programmaticContinuation.value) { + props.programmaticContinuation.value = false + } + if (prev === null) return { value: num === 0 ? 1 : num, moveToNext } @@ -640,9 +662,13 @@ export function useDateField(props: UseDateFieldProps) { ? getDaysInMonth(props.placeholder.value.set({ month: segmentMonthValue })) : getDaysInMonth(props.placeholder.value) - const { value, moveToNext } = updateDayOrMonth(daysInMonth, num, props.programmaticContinuation.value ? null : prevValue) + const { value, moveToNext, nextSegmentInitialValue } = updateDayOrMonth(daysInMonth, num, props.programmaticContinuation.value ? null : prevValue) props.segmentValues.value.day = value + if (nextSegmentInitialValue) { + props.segmentValues.value.year = nextSegmentInitialValue + } + if (moveToNext) { props.focusNext() } @@ -698,9 +724,10 @@ export function useDateField(props: UseDateFieldProps) { if (isNumberString(e.key)) { const num = Number.parseInt(e.key) - const { value, moveToNext } = updateYear(num, prevValue) - - props.segmentValues.value.year = value + const { value, moveToNext } = updateYear(num, props.programmaticContinuation.value ? null : prevValue) + if (!props.programmaticContinuation.value) { + props.segmentValues.value.year = value + } if (moveToNext) props.focusNext()