fix: ensure model is synced with temporal value

formwerkjs · Jan 26, 2025 · 3bd4881 · 3bd4881
1 parent 77eb41e
commit 3bd4881
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/packages/core/src/useDateTimeField/useDateTimeField.ts b/packages/core/src/useDateTimeField/useDateTimeField.ts
@@ -1,4 +1,4 @@
-import { Reactivify, StandardSchema } from '../types';
+import { Maybe, Reactivify, StandardSchema } from '../types';
 import { CalendarIdentifier, CalendarProps } from '../useCalendar';
 import { createDescribedByProps, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import { computed, shallowRef, toValue } from 'vue';
@@ -70,6 +70,16 @@ export interface DateTimeFieldProps {
    * The schema to use for the field.
    */
   schema?: StandardSchema<Date>;
+
+  /**
+   * The minimum date to use for the field.
+   */
+  minDate?: Date;
+
+  /**
+   * The maximum date to use for the field.
+   */
+  maxDate?: Date;
 }
 
 export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'>) {
@@ -81,23 +91,26 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
 
   const formatter = useDateFormatter(locale, props.formatOptions);
   const controlId = useUniqId(FieldTypePrefixes.DateTimeField);
-  const { dateValue, temporalValue } = useTemporalStore({
-    calendar: calendar,
-    timeZone: timeZone,
-    locale: locale,
-    initialValue: toValue(props.modelValue) ?? toValue(props.value) ?? new Date(),
-  });
 
-  const field = useFormField<Date>({
+  const field = useFormField<Maybe<Date>>({
     path: props.name,
     disabled: props.disabled,
-    initialValue: dateValue.value,
+    initialValue: toValue(props.modelValue) ?? toValue(props.value) ?? new Date(),
     schema: props.schema,
   });
 
+  const temporalValue = useTemporalStore({
+    calendar: calendar,
+    timeZone: timeZone,
+    locale: locale,
+    model: {
+      get: () => field.fieldValue.value,
+      set: value => field.setValue(value),
+    },
+  });
+
   function onValueChange(value: Temporal.ZonedDateTime) {
     temporalValue.value = value;
-    field.setValue(dateValue.value);
   }
 
   const { segments } = useDateTimeSegmentGroup({

diff --git a/packages/core/src/useDateTimeField/useTemporalStore.ts b/packages/core/src/useDateTimeField/useTemporalStore.ts
@@ -1,4 +1,4 @@
-import { MaybeRefOrGetter, ref, computed, toValue } from 'vue';
+import { MaybeRefOrGetter, computed, toValue } from 'vue';
 import { CalendarIdentifier } from '../useCalendar';
 import { DateValue } from './types';
 import { toTemporalInstant } from '@js-temporal/polyfill';
@@ -7,14 +7,17 @@ import { Temporal } from '@js-temporal/polyfill';
 import { isNullOrUndefined } from '../utils/common';
 
 interface TemporalValueStoreInit {
-  initialValue: Maybe<DateValue>;
+  model: {
+    get: () => Maybe<Date>;
+    set: (value: Maybe<Date>) => void;
+  };
   locale: MaybeRefOrGetter<string>;
   timeZone: MaybeRefOrGetter<string>;
   calendar: MaybeRefOrGetter<CalendarIdentifier>;
 }
 
 export function useTemporalStore(init: TemporalValueStoreInit) {
-  const dateValue = ref<Date>(toDate(init.initialValue));
+  const model = init.model;
 
   function toZonedDateTime(value: Maybe<DateValue>): Temporal.ZonedDateTime {
     if (isNullOrUndefined(value)) {
@@ -72,14 +75,11 @@ export function useTemporalStore(init: TemporalValueStoreInit) {
   }
 
   const temporalValue = computed({
-    get: () => toZonedDateTime(dateValue.value),
+    get: () => toZonedDateTime(model.get()),
     set: value => {
-      dateValue.value = toDate(value);
+      model.set(toDate(value));
     },
   });
 
-  return {
-    dateValue,
-    temporalValue,
-  };
+  return temporalValue;
 }