feat: added schema prop to all input composables

packages/core/src/types/forms.ts

@@ -2,7 +2,7 @@ import { Schema, Simplify } from 'type-fest';
 import { FormObject } from './common';
 import { Path } from './paths';
 import { TypedSchemaError } from './typedSchema';
-import { FormValidationMode } from '@core/useForm/formContext';
+import { FormValidationMode } from '../useForm/formContext';
 
 export type TouchedSchema<TForm extends FormObject> = Simplify<Schema<TForm, boolean>>;
 

packages/core/src/useCheckbox/useCheckbox.ts

@@ -1,6 +1,6 @@
 import { Ref, computed, inject, nextTick, ref, toValue } from 'vue';
 import { isEqual, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
-import { AriaLabelableProps, Reactivify, InputBaseAttributes, RovingTabIndex } from '../types';
+import { AriaLabelableProps, Reactivify, InputBaseAttributes, RovingTabIndex, TypedSchema } from '../types';
 import { useLabel } from '../a11y/useLabel';
 import { CheckboxGroupContext, CheckboxGroupKey } from './useCheckboxGroup';
 import { useFormField } from '../useFormField';
@@ -14,6 +14,8 @@ export interface CheckboxProps<TValue = string> {
   trueValue?: TValue;
   falseValue?: TValue;
   indeterminate?: boolean;
+
+  schema?: TypedSchema<TValue>;
 }
 
 export interface CheckboxDomInputProps extends AriaLabelableProps, InputBaseAttributes {
@@ -30,10 +32,10 @@ export interface CheckboxDomProps extends AriaLabelableProps {
 }
 
 export function useCheckbox<TValue = string>(
-  _props: Reactivify<CheckboxProps<TValue>>,
+  _props: Reactivify<CheckboxProps<TValue>, 'schema'>,
   elementRef?: Ref<HTMLInputElement | undefined>,
 ) {
-  const props = normalizeProps(_props);
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.Checkbox);
   const getTrueValue = () => (toValue(props.trueValue) as TValue) ?? (true as TValue);
   const getFalseValue = () => (toValue(props.falseValue) as TValue) ?? (false as TValue);
@@ -45,6 +47,7 @@ export function useCheckbox<TValue = string>(
         path: props.name,
         initialValue: toValue(props.modelValue) as TValue,
         disabled: props.disabled,
+        schema: props.schema,
       });
 
   const checked = computed({

packages/core/src/useCheckbox/useCheckboxGroup.ts

@@ -9,6 +9,7 @@ import {
   Direction,
   Reactivify,
   Arrayable,
+  TypedSchema,
 } from '../types';
 import { useUniqId, createDescribedByProps, normalizeProps, isEqual } from '../utils/common';
 import { useLocale } from '../i18n/useLocale';
@@ -59,15 +60,17 @@ export interface CheckboxGroupProps<TCheckbox = unknown> {
   disabled?: boolean;
   readonly?: boolean;
   required?: boolean;
+
+  schema?: TypedSchema<CheckboxGroupValue<TCheckbox>>;
 }
 
 interface CheckboxGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps {
   role: 'group';
   dir: Direction;
 }
 
-export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProps<TCheckbox>>) {
-  const props = normalizeProps(_props);
+export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProps<TCheckbox>, 'schema'>) {
+  const props = normalizeProps(_props, ['schema']);
   const groupId = useUniqId(FieldTypePrefixes.CheckboxGroup);
   const { direction } = useLocale();
   const checkboxes: CheckboxContext[] = [];
@@ -79,6 +82,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
   const field = useFormField({
     path: props.name,
     initialValue: toValue(props.modelValue),
+    schema: props.schema,
   });
 
   const { displayError } = useErrorDisplay(field);

packages/core/src/useNumberField/index.ts

@@ -24,6 +24,7 @@ import { useLocale } from '../i18n/useLocale';
 import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { useErrorDisplay } from '../useFormField/useErrorDisplay';
+import { TypedSchema } from '../types';
 
 export interface NumberInputDOMAttributes {
   name?: string;
@@ -59,13 +60,15 @@ export interface NumberFieldProps {
   disabled?: boolean;
 
   formatOptions?: Intl.NumberFormatOptions;
+
+  schema?: TypedSchema<number>;
 }
 
 export function useNumberField(
-  _props: Reactivify<NumberFieldProps>,
+  _props: Reactivify<NumberFieldProps, 'schema'>,
   elementRef?: Ref<HTMLInputElement | HTMLTextAreaElement>,
 ) {
-  const props = normalizeProps(_props);
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.NumberField);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
   const { locale } = useLocale();
@@ -74,6 +77,7 @@ export function useNumberField(
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails } = useInputValidity({ inputRef, field });

packages/core/src/useRadio/useRadioGroup.ts

@@ -9,6 +9,7 @@ import {
   Direction,
   Reactivify,
   Arrayable,
+  TypedSchema,
 } from '../types';
 import { useUniqId, createDescribedByProps, getNextCycleArrIdx, normalizeProps, isEmpty } from '../utils/common';
 import { useLocale } from '../i18n/useLocale';
@@ -49,6 +50,8 @@ export interface RadioGroupProps<TValue = string> {
   disabled?: boolean;
   readonly?: boolean;
   required?: boolean;
+
+  schema?: TypedSchema<TValue>;
 }
 
 interface RadioGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps {
@@ -74,8 +77,8 @@ function getOrientationArrows(dir: Direction | undefined) {
   return { prev: prevKeys, next: nextKeys };
 }
 
-export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProps<TValue>>) {
-  const props = normalizeProps(_props);
+export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProps<TValue>, 'schema'>) {
+  const props = normalizeProps(_props, ['schema']);
   const groupId = useUniqId(FieldTypePrefixes.RadioButtonGroup);
   const { direction } = useLocale();
 
@@ -89,6 +92,7 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp
     path: props.name,
     initialValue: toValue(props.modelValue) as TValue,
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails } = useInputValidity({ field });

packages/core/src/useSearchField/index.ts

@@ -7,6 +7,7 @@ import {
   Numberish,
   Reactivify,
   TextInputBaseAttributes,
+  TypedSchema,
 } from '../types';
 import { createDescribedByProps, normalizeProps, propsToValues, useUniqId, withRefCapture } from '../utils/common';
 import { useInputValidity } from '../validation/useInputValidity';
@@ -44,17 +45,23 @@ export interface SearchFieldProps {
   readonly?: boolean;
   disabled?: boolean;
 
+  schema?: TypedSchema<string>;
+
   onSubmit?: (value: string) => void;
 }
 
-export function useSearchField(_props: Reactivify<SearchFieldProps, 'onSubmit'>, elementRef?: Ref<HTMLInputElement>) {
-  const props = normalizeProps(_props, ['onSubmit']);
+export function useSearchField(
+  _props: Reactivify<SearchFieldProps, 'onSubmit' | 'schema'>,
+  elementRef?: Ref<HTMLInputElement>,
+) {
+  const props = normalizeProps(_props, ['onSubmit', 'schema']);
   const inputId = useUniqId(FieldTypePrefixes.SearchField);
   const inputRef = elementRef || ref<HTMLInputElement>();
   const field = useFormField<string | undefined>({
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails, updateValidity } = useInputValidity({ inputRef, field });

packages/core/src/useSlider/slider.ts

@@ -1,6 +1,6 @@
 import { InjectionKey, computed, onBeforeUnmount, provide, ref, toValue } from 'vue';
 import { useLabel } from '../a11y/useLabel';
-import { AriaLabelableProps, Arrayable, Direction, Orientation, Reactivify } from '../types';
+import { AriaLabelableProps, Arrayable, Direction, Orientation, Reactivify, TypedSchema } from '../types';
 import { isNullOrUndefined, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import { toNearestMultipleOf } from '../utils/math';
 import { useLocale } from '../i18n/useLocale';
@@ -19,6 +19,8 @@ export interface SliderProps {
   step?: number;
 
   disabled?: boolean;
+
+  schema?: TypedSchema<number>;
 }
 
 export type Coordinate = { x: number; y: number };
@@ -94,8 +96,8 @@ export interface SliderContext {
 
 export const SliderInjectionKey: InjectionKey<SliderContext> = Symbol('Slider');
 
-export function useSlider(_props: Reactivify<SliderProps>) {
-  const props = normalizeProps(_props);
+export function useSlider(_props: Reactivify<SliderProps, 'schema'>) {
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.Slider);
   const trackRef = ref<HTMLElement>();
   const thumbs = ref<ThumbContext[]>([]);
@@ -105,6 +107,7 @@ export function useSlider(_props: Reactivify<SliderProps>) {
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { labelProps, labelledByProps } = useLabel({

packages/core/src/useSwitch/index.ts

@@ -1,5 +1,12 @@
 import { Ref, computed, shallowRef, toValue } from 'vue';
-import { AriaDescribableProps, AriaLabelableProps, InputBaseAttributes, InputEvents, Reactivify } from '../types';
+import {
+  AriaDescribableProps,
+  AriaLabelableProps,
+  InputBaseAttributes,
+  InputEvents,
+  Reactivify,
+  TypedSchema,
+} from '../types';
 import { isEqual, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import { useLabel } from '../a11y/useLabel';
 import { useFormField } from '../useFormField';
@@ -22,10 +29,12 @@ export type SwitchProps = {
 
   trueValue?: unknown;
   falseValue?: unknown;
+
+  schema?: TypedSchema<unknown>;
 };
 
-export function useSwitch(_props: Reactivify<SwitchProps>, elementRef?: Ref<HTMLInputElement>) {
-  const props = normalizeProps(_props);
+export function useSwitch(_props: Reactivify<SwitchProps, 'schema'>, elementRef?: Ref<HTMLInputElement>) {
+  const props = normalizeProps(_props, ['schema']);
   const id = useUniqId(FieldTypePrefixes.Switch);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
   const { labelProps, labelledByProps } = useLabel({
@@ -38,6 +47,7 @@ export function useSwitch(_props: Reactivify<SwitchProps>, elementRef?: Ref<HTML
     path: props.name,
     initialValue: toValue(props.modelValue) ?? toValue(props.falseValue) ?? false,
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   /**