feat: implement constraint simulator (#147)

* feat: basic implementation of constraints simulator

* feat: apply the validator on date fields

* fix: wait for next tick to emit events to allow time for value change

* chore: add changeset

* feat: add constraints validation to the calendar

* fix: uneccessary prop wrapping

.changeset/famous-llamas-smoke.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+feat: implement HTML constraint validator

packages/core/src/useCalendar/useCalendar.ts

@@ -16,6 +16,7 @@ import { useInputValidity } from '../validation';
 import { fromDateToCalendarZonedDateTime, useTemporalStore } from '../useDateTimeField/useTemporalStore';
 import { PickerContextKey } from '../usePicker';
 import { registerField } from '@formwerk/devtools';
+import { useConstraintsValidator } from '../validation/useContraintsValidator';
 
 export interface CalendarProps {
   /**
@@ -28,6 +29,11 @@ export interface CalendarProps {
    */
   label: string;
 
+  /**
+   * Whether the calendar is required.
+   */
+  required?: boolean;
+
   /**
    * The locale to use for the calendar.
    */
@@ -148,7 +154,14 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
 
   // If no controlling field is provided, we should hook up the required hooks to promote the calender to a full form field.
   if (!props.field) {
-    useInputValidity({ field });
+    const { element } = useConstraintsValidator({
+      type: 'date',
+      value: field.fieldValue,
+      source: calendarEl,
+      required: props.required,
+    });
+
+    useInputValidity({ field, inputEl: element });
   }
 
   const isDisabled = createDisabledContext(props.disabled);

packages/core/src/useDateTimeField/useDateTimeField.spec.ts

@@ -293,7 +293,7 @@ describe('useDateTimeField', () => {
         template: `
           <div>
             <span v-bind="labelProps">Date</span>
-            <div v-bind="controlProps">
+            <div v-bind="controlProps" data-testid="control">
               <DateTimeSegment
                 v-for="segment in segments"
                 :key="segment.type"

packages/core/src/useDateTimeField/useDateTimeField.ts

@@ -12,6 +12,7 @@ import { ZonedDateTime, Calendar } from '@internationalized/date';
 import { useInputValidity } from '../validation';
 import { createDisabledContext } from '../helpers/createDisabledContext';
 import { registerField } from '@formwerk/devtools';
+import { useConstraintsValidator } from '../validation/useContraintsValidator';
 
 export interface DateTimeFieldProps {
   /**
@@ -24,6 +25,11 @@ export interface DateTimeFieldProps {
    */
   name?: string;
 
+  /**
+   * Whether the field is required.
+   */
+  required?: boolean;
+
   /**
    * The locale to use for the field.
    */
@@ -109,7 +115,16 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
     schema: props.schema,
   });
 
-  useInputValidity({ field });
+  const { element: inputEl } = useConstraintsValidator({
+    type: 'date',
+    required: props.required,
+    value: field.fieldValue,
+    source: controlEl,
+    min: props.min,
+    max: props.max,
+  });
+
+  useInputValidity({ field, inputEl });
 
   const min = computed(() => fromDateToCalendarZonedDateTime(toValue(props.min), calendar.value, timeZone.value));
   const max = computed(() => fromDateToCalendarZonedDateTime(toValue(props.max), calendar.value, timeZone.value));
@@ -142,6 +157,7 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
     onTouched: () => field.setTouched(true),
     min,
     max,
+    dispatchEvent: (type: string) => inputEl.value?.dispatchEvent(new Event(type)),
   });
 
   const { labelProps, labelledByProps } = useLabel({

packages/core/src/useDateTimeField/useDateTimeSegment.ts

@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, h, inject, shallowRef, toValue } from 'vue';
+import { computed, CSSProperties, defineComponent, h, inject, nextTick, shallowRef, toValue } from 'vue';
 import { Reactivify } from '../types';
 import { hasKeyCode, isNullOrUndefined, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import { DateTimeSegmentGroupKey } from './useDateTimeSegmentGroup';
@@ -75,6 +75,7 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
     focusNext,
     isNumeric,
     isLockedByRange,
+    dispatchEvent,
   } = segmentGroup.useDateSegmentRegistration({
     id,
     getElem: () => segmentEl.value,
@@ -135,6 +136,9 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
     },
     onBlur() {
       onTouched();
+      nextTick(() => {
+        dispatchEvent('blur');
+      });
       const { min, max } = getMetadata();
       if (isNullOrUndefined(min) || isNullOrUndefined(max)) {
         return;

packages/core/src/useDateTimeField/useDateTimeSegmentGroup.spec.ts

@@ -6,6 +6,10 @@ import { flush } from '@test-utils/flush';
 import { DateTimeSegment } from './useDateTimeSegment';
 import { createTemporalPartial, isTemporalPartial } from './temporalPartial';
 
+function dispatchEvent() {
+  // NOOP
+}
+
 describe('useDateTimeSegmentGroup', () => {
   const timeZone = 'UTC';
   const locale = 'en-US';
@@ -35,6 +39,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           // Register a segment
@@ -84,6 +89,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -133,9 +139,10 @@ describe('useDateTimeSegmentGroup', () => {
             formatOptions: {},
             locale,
             controlEl,
+            direction: 'rtl',
             onValueChange,
             onTouched: () => {},
-            direction: 'rtl',
+            dispatchEvent,
           });
 
           return {
@@ -187,6 +194,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           const segment = {
@@ -222,6 +230,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           const segment = {
@@ -257,6 +266,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           const segment = {
@@ -292,6 +302,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           const segment = {
@@ -329,6 +340,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -369,6 +381,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -430,6 +443,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -492,6 +506,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -548,6 +563,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -621,6 +637,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {
@@ -718,6 +735,7 @@ describe('useDateTimeSegmentGroup', () => {
             controlEl,
             onValueChange,
             onTouched: () => {},
+            dispatchEvent,
           });
 
           return {

packages/core/src/useDateTimeField/useDateTimeSegmentGroup.ts

@@ -36,6 +36,7 @@ export interface DateTimeSegmentGroupContext {
     isLast(): boolean;
     focusNext(): void;
     isLockedByRange(): boolean;
+    dispatchEvent(type: string): void;
   };
 }
 
@@ -53,6 +54,7 @@ export interface DateTimeSegmentGroupProps {
   max?: MaybeRefOrGetter<Maybe<ZonedDateTime>>;
   onValueChange: (value: ZonedDateTime) => void;
   onTouched: () => void;
+  dispatchEvent: (type: string) => void;
 }
 
 export function useDateTimeSegmentGroup({
@@ -67,6 +69,7 @@ export function useDateTimeSegmentGroup({
   max,
   onValueChange,
   onTouched,
+  dispatchEvent,
 }: DateTimeSegmentGroupProps) {
   const renderedSegments = ref<DateTimeSegmentRegistration[]>([]);
   const parser = useNumberParser(locale, {
@@ -267,6 +270,7 @@ export function useDateTimeSegmentGroup({
       focusNext,
       isNumeric,
       isLockedByRange,
+      dispatchEvent,
     };
   }
 
@@ -388,7 +392,7 @@ function useDateArithmetic({ currentDate, min, max }: ArithmeticInit) {
       };
     }
 
-    return clampDate(newDate);
+    return newDate;
   }
 
   function addToPart(part: DateTimeSegmentType, diff: number) {

packages/core/src/useSelect/useSelect.ts

@@ -15,6 +15,7 @@ import { useListBox } from '../useListBox';
 import { useLabel, useErrorMessage } from '../a11y';
 import { FieldTypePrefixes } from '../constants';
 import { registerField } from '@formwerk/devtools';
+import { useConstraintsValidator } from '../validation/useContraintsValidator';
 
 export interface SelectProps<TOption, TValue = TOption> {
   /**
@@ -32,6 +33,11 @@ export interface SelectProps<TOption, TValue = TOption> {
    */
   description?: string;
 
+  /**
+   * Whether the select field is required.
+   */
+  required?: boolean;
+
   /**
    * Placeholder text when no option is selected.
    */
@@ -93,7 +99,7 @@ export function useSelect<TOption, TValue = TOption>(_props: Reactivify<SelectPr
     disabled: props.disabled,
     schema: props.schema,
   });
-
+  const triggerEl = ref<HTMLElement>();
   const { fieldValue, setValue, errorMessage, isDisabled } = field;
   const isMutable = () => !isDisabled.value && !toValue(props.readonly);
   const { labelProps, labelledByProps } = useLabel({
@@ -126,7 +132,14 @@ export function useSelect<TOption, TValue = TOption>(_props: Reactivify<SelectPr
     onToggleAfter: toggleAfter,
   });
 
-  const { updateValidity } = useInputValidity({ field });
+  const { element: inputEl } = useConstraintsValidator({
+    type: 'select',
+    required: props.required,
+    value: fieldValue as unknown as string,
+    source: triggerEl,
+  });
+
+  const { updateValidity } = useInputValidity({ field, inputEl });
   const { descriptionProps, describedByProps } = createDescribedByProps({
     inputId,
     description: props.description,
@@ -251,8 +264,6 @@ export function useSelect<TOption, TValue = TOption>(_props: Reactivify<SelectPr
     },
   };
 
-  const triggerEl = ref<HTMLElement>();
-
   const triggerProps = computed<SelectTriggerDomProps>(() => {
     return withRefCapture(
       {