UNPKG

@modular-forms/qwik

Version:

The modular and type-safe form library for Qwik

34 lines (33 loc) 2.05 kB
import type { JSXOutput, QRL } from '@builder.io/qwik'; import type { FieldElement, FieldEvent, FieldPath, FieldPathValue, FieldStore, FieldType, FieldValues, FormStore, Maybe, MaybeArray, MaybeValue, PartialKey, ResponseData, TransformField, ValidateField, ValidationMode } from '../types'; /** * Value type of the field element props. */ export type FieldElementProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = { name: TFieldName; autoFocus: boolean; ref: QRL<(element: FieldElement) => void>; onInput$: QRL<(event: FieldEvent, element: FieldElement) => void>; onChange$: QRL<(event: FieldEvent, element: FieldElement) => void>; onBlur$: QRL<(event: FieldEvent, element: FieldElement) => void>; }; /** * Value type of the field props. */ export type FieldProps<TFieldValues extends FieldValues, TResponseData extends ResponseData, TFieldName extends FieldPath<TFieldValues>> = { of: FormStore<TFieldValues, TResponseData>; name: TFieldName; type: FieldType<FieldPathValue<TFieldValues, TFieldName>>; children: (store: FieldStore<TFieldValues, TFieldName>, props: FieldElementProps<TFieldValues, TFieldName>) => JSXOutput; validate?: Maybe<MaybeArray<QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>>; validateOn?: Maybe<ValidationMode>; revalidateOn?: Maybe<ValidationMode>; transform?: Maybe<MaybeArray<QRL<TransformField<FieldPathValue<TFieldValues, TFieldName>>>>>; keepActive?: Maybe<boolean>; keepState?: Maybe<boolean>; key?: Maybe<string | number>; }; /** * Headless form field that provides reactive properties and state. */ export declare function Field<TFieldValues extends FieldValues, TResponseData extends ResponseData, TFieldName extends FieldPath<TFieldValues>>({ children, name, type, ...props }: FieldPathValue<TFieldValues, TFieldName> extends MaybeValue<string> ? PartialKey<FieldProps<TFieldValues, TResponseData, TFieldName>, 'type'> : FieldProps<TFieldValues, TResponseData, TFieldName>): JSXOutput;