diff --git a/package.json b/package.json index 42a340335..9755866c1 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "docs:build": "pnpm --filter docs docs:build", "docs:gen": "pnpm --filter docs docs:gen", "docs:contributors": "pnpm --filter docs docs:contributors", - "prepare": "pnpm simple-git-hooks", + "prepare": "pnpm simple-git-hooks && pnpm build-only", "test": "pnpm --filter reka-ui test", "test-update": "pnpm --filter reka-ui test-update", "lint": "eslint .", diff --git a/packages/core/src/DateField/DateFieldInput.vue b/packages/core/src/DateField/DateFieldInput.vue index d4af7e130..cd3d7268e 100644 --- a/packages/core/src/DateField/DateFieldInput.vue +++ b/packages/core/src/DateField/DateFieldInput.vue @@ -2,8 +2,8 @@ import { Primitive, type PrimitiveProps } from '@/Primitive' import type { SegmentPart } from '@/shared/date' import { useDateField } from '@/shared/date/useDateField' -import { injectDateFieldRootContext } from './DateFieldRoot.vue' import { computed, ref } from 'vue' +import { injectDateFieldRootContext } from './DateFieldRoot.vue' export interface DateFieldInputProps extends PrimitiveProps { /** The part of the date to render */ @@ -35,11 +35,67 @@ const { readonly: rootContext.readonly, focusNext: rootContext.focusNext, modelValue: rootContext.modelValue, + programmaticContinuation: rootContext.programmaticContinuation, }) const disabled = computed(() => rootContext.disabled.value) const readonly = computed(() => rootContext.readonly.value) const isInvalid = computed(() => rootContext.isInvalid.value) + +function handleFocusOut(e: FocusEvent) { + if (rootContext.programmaticContinuation.value) { + hasLeftFocus.value = false + } + else { + hasLeftFocus.value = true + } +} + +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 (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(), + code: `Digit${dayValue}`, + keyCode: 48 + dayValue, + which: 48 + dayValue, + bubbles: true, + cancelable: true, + }) + + console.log('triggering keydown for day', event) + + hasLeftFocus.value = false + handleSegmentKeydown(event) + rootContext.programmaticContinuation.value = false + } + } + else { + hasLeftFocus.value = true + } +}