diff --git a/packages/core/src/types/forms.ts b/packages/core/src/types/forms.ts index 86cb6402..bba8b9eb 100644 --- a/packages/core/src/types/forms.ts +++ b/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 = Simplify>; diff --git a/packages/core/src/useCheckbox/useCheckbox.ts b/packages/core/src/useCheckbox/useCheckbox.ts index 390dfc41..f353fe8d 100644 --- a/packages/core/src/useCheckbox/useCheckbox.ts +++ b/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 { trueValue?: TValue; falseValue?: TValue; indeterminate?: boolean; + + schema?: TypedSchema; } export interface CheckboxDomInputProps extends AriaLabelableProps, InputBaseAttributes { @@ -30,10 +32,10 @@ export interface CheckboxDomProps extends AriaLabelableProps { } export function useCheckbox( - _props: Reactivify>, + _props: Reactivify, 'schema'>, elementRef?: Ref, ) { - 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( path: props.name, initialValue: toValue(props.modelValue) as TValue, disabled: props.disabled, + schema: props.schema, }); const checked = computed({ diff --git a/packages/core/src/useCheckbox/useCheckboxGroup.ts b/packages/core/src/useCheckbox/useCheckboxGroup.ts index 2f8b7f23..f91b3334 100644 --- a/packages/core/src/useCheckbox/useCheckboxGroup.ts +++ b/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,6 +60,8 @@ export interface CheckboxGroupProps { disabled?: boolean; readonly?: boolean; required?: boolean; + + schema?: TypedSchema>; } interface CheckboxGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps { @@ -66,8 +69,8 @@ interface CheckboxGroupDomProps extends AriaLabelableProps, AriaDescribableProps dir: Direction; } -export function useCheckboxGroup(_props: Reactivify>) { - const props = normalizeProps(_props); +export function useCheckboxGroup(_props: Reactivify, 'schema'>) { + const props = normalizeProps(_props, ['schema']); const groupId = useUniqId(FieldTypePrefixes.CheckboxGroup); const { direction } = useLocale(); const checkboxes: CheckboxContext[] = []; @@ -79,6 +82,7 @@ export function useCheckboxGroup(_props: Reactivify; } export function useNumberField( - _props: Reactivify, + _props: Reactivify, elementRef?: Ref, ) { - const props = normalizeProps(_props); + const props = normalizeProps(_props, ['schema']); const inputId = useUniqId(FieldTypePrefixes.NumberField); const inputRef = elementRef || shallowRef(); 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 }); diff --git a/packages/core/src/useRadio/useRadioGroup.ts b/packages/core/src/useRadio/useRadioGroup.ts index 5cd38955..07456a7d 100644 --- a/packages/core/src/useRadio/useRadioGroup.ts +++ b/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 { disabled?: boolean; readonly?: boolean; required?: boolean; + + schema?: TypedSchema; } interface RadioGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps { @@ -74,8 +77,8 @@ function getOrientationArrows(dir: Direction | undefined) { return { prev: prevKeys, next: nextKeys }; } -export function useRadioGroup(_props: Reactivify>) { - const props = normalizeProps(_props); +export function useRadioGroup(_props: Reactivify, 'schema'>) { + const props = normalizeProps(_props, ['schema']); const groupId = useUniqId(FieldTypePrefixes.RadioButtonGroup); const { direction } = useLocale(); @@ -89,6 +92,7 @@ export function useRadioGroup(_props: Reactivify; + onSubmit?: (value: string) => void; } -export function useSearchField(_props: Reactivify, elementRef?: Ref) { - const props = normalizeProps(_props, ['onSubmit']); +export function useSearchField( + _props: Reactivify, + elementRef?: Ref, +) { + const props = normalizeProps(_props, ['onSubmit', 'schema']); const inputId = useUniqId(FieldTypePrefixes.SearchField); const inputRef = elementRef || ref(); const field = useFormField({ path: props.name, initialValue: toValue(props.modelValue), disabled: props.disabled, + schema: props.schema, }); const { validityDetails, updateValidity } = useInputValidity({ inputRef, field }); diff --git a/packages/core/src/useSlider/slider.ts b/packages/core/src/useSlider/slider.ts index 367509b9..aeca76a9 100644 --- a/packages/core/src/useSlider/slider.ts +++ b/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; } export type Coordinate = { x: number; y: number }; @@ -94,8 +96,8 @@ export interface SliderContext { export const SliderInjectionKey: InjectionKey = Symbol('Slider'); -export function useSlider(_props: Reactivify) { - const props = normalizeProps(_props); +export function useSlider(_props: Reactivify) { + const props = normalizeProps(_props, ['schema']); const inputId = useUniqId(FieldTypePrefixes.Slider); const trackRef = ref(); const thumbs = ref([]); @@ -105,6 +107,7 @@ export function useSlider(_props: Reactivify) { path: props.name, initialValue: toValue(props.modelValue), disabled: props.disabled, + schema: props.schema, }); const { labelProps, labelledByProps } = useLabel({ diff --git a/packages/core/src/useSwitch/index.ts b/packages/core/src/useSwitch/index.ts index a40f1278..b9f90ff5 100644 --- a/packages/core/src/useSwitch/index.ts +++ b/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; }; -export function useSwitch(_props: Reactivify, elementRef?: Ref) { - const props = normalizeProps(_props); +export function useSwitch(_props: Reactivify, elementRef?: Ref) { + const props = normalizeProps(_props, ['schema']); const id = useUniqId(FieldTypePrefixes.Switch); const inputRef = elementRef || shallowRef(); const { labelProps, labelledByProps } = useLabel({ @@ -38,6 +47,7 @@ export function useSwitch(_props: Reactivify, elementRef?: Ref