@sectile/vue 0.7.0 → 0.9.0

package/dist/form.d.ts

@@ -1,10 +1,18 @@
-import { type AllowedComponentProps, type ComponentCustomProps, type ComputedRef, type PropType, type Ref, type SlotsType, type VNodeChild, type VNodeProps } from 'vue';
-import { type FormConnection, type FormFieldPath, type FormInteractionValidationTrigger, type FormOptions, type FormRelativePath, type FormSchema as DOMFormSchema, type FormSubmissionElement, type FormSubmitPayload as DOMFormSubmitPayload, type FormValidateContext as DOMFormValidateContext, type FormValidateHandler as DOMFormValidateHandler, type FormValidationIssue as DOMFormValidationIssue, type FormValidationResult as DOMFormValidationResult, type FormValues as DOMFormValues } from '@sectile/dom/form';
+import { type AllowedComponentProps, type ComponentCustomProps, type PropType, type ShallowRef, type SlotsType, type VNodeChild, type VNodeProps } from 'vue';
+import { type FormConnection, type FormFieldPath, type FormInteractionValidationTrigger, type FormOptions, type FormReinitializeOptions as DOMFormReinitializeOptions, type FormSchema as DOMFormSchema, type FormSubscribeOptions as DOMFormSubscribeOptions, type FormSubmitPayload as DOMFormSubmitPayload, type FormValidateContext as DOMFormValidateContext, type FormValidateHandler as DOMFormValidateHandler, type FormValidationIssue as DOMFormValidationIssue, type FormValidationResult as DOMFormValidationResult, type FormValues as DOMFormValues } from '@sectile/dom/form';
+import type { FormSchemaOutput as DOMFormSchemaOutput } from '@sectile/form/schema';
+import { compositeControlCapabilities, hiddenInputSubmissionCapabilities, hiddenSelectSubmissionCapabilities, hiddenValueSubmissionCapabilities, nativeInputControlCapabilities, provideFormControlOwner, useCompositeFormControl, useFormControl, useNativeInputFormControl, type FormControlCapabilities, type FormControlParticipation, type FormControlRegistration, type FormElementSource, type FormLabelMode, type FormMetadataAttribute, type FormSubmissionCapabilities, type FormSubmissionRegistration, type FormSubmissionSource } from './internal/form-control.js';
 import { type PrimitiveAs } from './primitive.js';
 export type FormState = FormConnection<string>['state'];
+export type FormFieldState = NonNullable<ReturnType<FormConnection<string>['getField']>>;
+export type FormFieldMetaInput = Parameters<FormConnection<string>['setFieldMeta']>[1];
+export type FormSubscribeOptions<Selected> = DOMFormSubscribeOptions<Selected>;
+export type FormSelectorFunction<Selected> = (state: FormState) => Selected;
+export type FormFieldSelectorFunction<Selected> = (field: FormFieldState | null) => Selected;
 export type FormIssue = NonNullable<FormOptions<string>['issues']>[number];
 export type FormIssueSource = Parameters<FormConnection<string>['replaceIssues']>[0];
 export type FormValues<Shape extends object = Record<string, unknown>> = DOMFormValues<Shape>;
+export type FormReinitializeOptions = DOMFormReinitializeOptions;
 export type FormSchema<Input extends object = Record<string, unknown>, Output extends object = Input> = DOMFormSchema<FormValues<Input>, FormValues<Output>>;
 export type FormSchemaInput<Schema extends FormSchema> = Schema extends DOMFormSchema<infer Input extends object, object> ? Input : never;
 export type FormSchemaOutput<Schema extends FormSchema> = Schema extends DOMFormSchema<object, infer Output extends object> ? Output : never;
@@ -28,6 +36,16 @@ export type FormSubmitResult = void | {
     readonly issues?: readonly FormSubmitIssue[];
 };
 export type FormSubmitHandler<Values extends object = Record<string, unknown>> = (event: FormSubmitEvent<Values>) => FormSubmitResult | PromiseLike<FormSubmitResult>;
+export interface FormSubmissionDefinition {
+    readonly schema?: never;
+    readonly onSubmit: FormSubmitHandler<Record<string, unknown>>;
+}
+export interface FormSchemaSubmissionDefinition<Schema extends FormSchema<object, object>> {
+    readonly schema: Schema;
+    readonly onSubmit: FormSubmitHandler<DOMFormSchemaOutput<Schema>>;
+}
+export declare function defineFormSubmission<const Schema extends FormSchema<object, object>>(definition: FormSchemaSubmissionDefinition<Schema>): FormSchemaSubmissionDefinition<Schema>;
+export declare function defineFormSubmission(definition: FormSubmissionDefinition): FormSubmissionDefinition;
 export type FormSubmitErrorMapper = (reason: unknown) => FormSubmitIssue | readonly FormSubmitIssue[] | undefined;
 export type FormResetHandler = () => void;
 export type FormStateChangeHandler = (state: FormState) => void;
@@ -40,6 +58,7 @@ export type FormSubmitSucceededAction = (generation: number) => boolean;
 export type FormSubmitFailedAction = (generation: number, issues?: readonly FormIssue[]) => boolean;
 export type FormReplaceIssuesAction = (source: FormIssueSource, issues: readonly FormIssue[]) => boolean;
 export type FormResetAction = () => void;
+export type FormReinitializeAction = (options?: FormReinitializeOptions) => void;
 export interface FormRootProps<Input extends object = Record<string, unknown>, Output extends object = Input> {
     readonly issues?: readonly FormIssueInput[];
     readonly schema?: FormSchema<Input, Output>;
@@ -64,6 +83,7 @@ export interface FormRootSlotProps {
     readonly submitSucceeded: FormSubmitSucceededAction;
     readonly submitFailed: FormSubmitFailedAction;
     readonly replaceIssues: FormReplaceIssuesAction;
+    readonly reinitialize: FormReinitializeAction;
     readonly reset: FormResetAction;
 }
 export type FormRootPublicProps<Input extends object = Record<string, unknown>, Output extends object = Input> = FormRootProps<Input, Output> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
@@ -76,16 +96,17 @@ export interface FormRootComponent {
         $slots: {
             default?: (props: FormRootSlotProps) => VNodeChild;
         };
+        submitStarted: FormSubmitStartedAction;
+        submitSucceeded: FormSubmitSucceededAction;
+        submitFailed: FormSubmitFailedAction;
+        replaceIssues: FormReplaceIssuesAction;
+        reinitialize: FormReinitializeAction;
+        reset: FormResetAction;
     };
 }
-type FormFieldLeaf = string | number | boolean | bigint | symbol | null | undefined | Date | Blob | File;
-type FormFieldPathSegments<Value, Depth extends readonly unknown[] = []> = Depth['length'] extends 8 ? never : NonNullable<Value> extends FormFieldLeaf ? never : NonNullable<Value> extends readonly (infer Item)[] ? readonly [number] | readonly [number, ...FormFieldPathSegments<Item, readonly [...Depth, unknown]>] : NonNullable<Value> extends object ? {
-    [Key in keyof NonNullable<Value> & string]: readonly [Key] | readonly [Key, ...FormFieldPathSegments<NonNullable<Value>[Key], readonly [...Depth, unknown]>];
-}[keyof NonNullable<Value> & string] : never;
-export type FormFieldPathOf<Values extends object> = string extends keyof Values ? FormFieldPath : (keyof Values & string) | FormFieldPathSegments<Values>;
-export interface FormFieldProps<Values extends object = Record<string, unknown>> {
+export interface FormFieldProps {
     readonly id?: string;
-    readonly name?: FormFieldPathOf<Values>;
+    readonly name?: FormFieldPath;
     readonly form?: string;
     readonly required?: boolean;
     readonly disabled?: boolean;
@@ -93,23 +114,7 @@ export interface FormFieldProps<Values extends object = Record<string, unknown>>
     readonly as?: PrimitiveAs;
     readonly asChild?: boolean;
 }
-export type FormFieldPublicProps<Values extends object = Record<string, unknown>> = FormFieldProps<Values> & VNodeProps & AllowedComponentProps & ComponentCustomProps;
-export interface TypedFormRootComponent<Input extends object, Output extends object = Input> {
-    new (props: FormRootPublicProps<Input, Output>): {
-        $props: FormRootPublicProps<Input, Output>;
-        $slots: {
-            default?: (props: FormRootSlotProps) => VNodeChild;
-        };
-    };
-}
-export interface TypedFormFieldComponent<Values extends object> {
-    new (props: FormFieldPublicProps<Values>): {
-        $props: FormFieldPublicProps<Values>;
-        $slots: {
-            default?: (props: FormFieldSlotProps) => VNodeChild;
-        };
-    };
-}
+export type FormFieldPublicProps = FormFieldProps & VNodeProps & AllowedComponentProps & ComponentCustomProps;
 export interface FormFieldSlotProps {
     readonly id: string;
     readonly controlId: string;
@@ -121,51 +126,70 @@ export interface FormFieldSlotProps {
     readonly touched: boolean;
     readonly dirty: boolean;
     readonly issues: readonly FormIssue[];
+    readonly setMeta: (meta: FormFieldMetaInput) => boolean;
+    readonly replaceIssues: (source: FormIssueSource, issues: readonly FormIssue[]) => boolean;
+    readonly upsertIssue: (issue: FormIssue) => boolean;
+    readonly removeIssue: (issueId: Parameters<FormConnection<string>['removeFieldIssue']>[1]) => boolean;
+    readonly clearIssues: (source?: FormIssueSource) => boolean;
 }
-export type FormLabelMode = 'for' | 'labelledby' | 'legend';
-export type FormMetadataAttribute = 'id' | 'name' | 'form' | 'required' | 'disabled' | 'readonly' | 'aria-describedby' | 'aria-errormessage' | 'aria-invalid' | 'aria-labelledby' | 'aria-disabled' | 'aria-required' | 'aria-readonly';
-export interface FormControlCapabilities {
-    readonly id?: boolean;
-    readonly describedBy?: boolean;
-    readonly invalid?: boolean;
-    readonly labelledBy?: boolean;
-    readonly required?: boolean;
-    readonly disabled?: boolean;
-    readonly readonly?: boolean;
+export interface FormFieldController {
+    readonly state: Readonly<ShallowRef<FormFieldState | null>>;
+    setMeta(meta: FormFieldMetaInput): boolean;
+    replaceIssues(source: FormIssueSource, issues: readonly FormIssue[]): boolean;
+    upsertIssue(issue: FormIssue): boolean;
+    removeIssue(issueId: Parameters<FormConnection<string>['removeFieldIssue']>[1]): boolean;
+    clearIssues(source?: FormIssueSource): boolean;
 }
-export interface FormSubmissionCapabilities {
-    readonly name?: boolean;
-    readonly form?: boolean;
-    readonly required?: boolean;
-    readonly disabled?: boolean;
-    readonly readonly?: boolean;
+export interface FormSelectorProps<Selected> {
+    readonly select: FormSelectorFunction<Selected>;
+    readonly equals?: NonNullable<FormSubscribeOptions<Selected>['equals']>;
 }
-export type FormElementSource<ElementType extends HTMLElement = HTMLElement> = Ref<ElementType | null> | (() => ElementType | null);
-export interface FormSubmissionRegistration {
-    readonly element: FormElementSource<FormSubmissionElement>;
-    readonly relativeName?: FormRelativePath;
-    readonly capabilities?: FormSubmissionCapabilities;
-    readonly explicit?: readonly FormMetadataAttribute[];
+export interface FormSelectorComponent {
+    new <Selected>(props: FormSelectorProps<Selected>): {
+        $props: FormSelectorProps<Selected>;
+        $slots: {
+            default?: (props: {
+                readonly selected: Selected;
+            }) => VNodeChild;
+        };
+    };
 }
-export type FormSubmissionSource = readonly FormSubmissionRegistration[] | (() => readonly FormSubmissionRegistration[]);
-export interface FormControlRegistration {
-    readonly element: FormElementSource;
-    readonly semanticControl?: FormElementSource;
-    readonly focusTarget?: FormElementSource;
-    readonly submissions?: FormSubmissionSource;
-    readonly labelMode?: FormLabelMode;
-    readonly capabilities?: FormControlCapabilities;
-    readonly explicit?: readonly FormMetadataAttribute[];
+export interface FormFieldSelectorProps<Selected> {
+    readonly id: string;
+    readonly select: FormFieldSelectorFunction<Selected>;
+    readonly equals?: NonNullable<FormSubscribeOptions<Selected>['equals']>;
 }
-export interface FormControlParticipation {
-    readonly participating: boolean;
-    readonly controlProps: ComputedRef<Readonly<Record<string, unknown>>>;
+export interface FormFieldSelectorComponent {
+    new <Selected>(props: FormFieldSelectorProps<Selected>): {
+        $props: FormFieldSelectorProps<Selected>;
+        $slots: {
+            default?: (props: {
+                readonly selected: Selected;
+            }) => VNodeChild;
+        };
+    };
 }
+export interface FormSummarySlotProps {
+    readonly valid: boolean;
+}
+export interface FormSubmitSlotProps {
+    readonly valid: boolean;
+    readonly submitting: boolean;
+    readonly canSubmit: boolean;
+    readonly submissionStatus: FormState['submissionStatus'];
+}
+export { compositeControlCapabilities, hiddenInputSubmissionCapabilities, hiddenSelectSubmissionCapabilities, hiddenValueSubmissionCapabilities, nativeInputControlCapabilities, provideFormControlOwner, useCompositeFormControl, useFormControl, useNativeInputFormControl, };
+export type { FormControlCapabilities, FormControlParticipation, FormControlRegistration, FormElementSource, FormLabelMode, FormMetadataAttribute, FormSubmissionCapabilities, FormSubmissionRegistration, FormSubmissionSource, };
 export interface FormPartProps {
     readonly as?: PrimitiveAs;
     readonly asChild?: boolean;
 }
 export declare const FormRoot: FormRootComponent;
+export declare function useFormSelector<Selected>(selector: FormSelectorFunction<Selected>, options?: FormSubscribeOptions<Selected>): Readonly<ShallowRef<Selected>>;
+export declare function useFormFieldSelector<Selected>(id: string, selector: FormFieldSelectorFunction<Selected>, options?: FormSubscribeOptions<Selected>): Readonly<ShallowRef<Selected>>;
+export declare function useFormFieldController(id: string): FormFieldController;
+export declare const FormSelector: FormSelectorComponent;
+export declare const FormFieldSelector: FormFieldSelectorComponent;
 export declare const FormField: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<PrimitiveAs>;
@@ -334,7 +358,7 @@ export declare const FormSummary: import("vue").DefineComponent<import("vue").Ex
     as: PrimitiveAs;
     asChild: boolean;
 }, SlotsType<{
-    default: (props: FormRootSlotProps) => VNodeChild;
+    default: (props: FormSummarySlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const FormReset: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     asChild: {
@@ -379,57 +403,6 @@ export declare const FormSubmit: import("vue").DefineComponent<import("vue").Ext
 }>> & Readonly<{}>, {
     asChild: boolean;
     as: PrimitiveAs;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export declare function useFormControl(registration: FormControlRegistration): FormControlParticipation;
-export declare const nativeInputControlCapabilities: Readonly<{
-    id: true;
-    describedBy: true;
-    invalid: true;
-    required: true;
-    disabled: true;
-    readonly: true;
-}>;
-export declare const compositeControlCapabilities: Readonly<{
-    id: true;
-    describedBy: true;
-    invalid: true;
-    labelledBy: true;
-}>;
-export declare const hiddenInputSubmissionCapabilities: Readonly<{
-    name: true;
-    form: true;
-    required: true;
-    disabled: true;
-}>;
-export declare const hiddenSelectSubmissionCapabilities: Readonly<{
-    name: true;
-    form: true;
-    required: true;
-    disabled: true;
-}>;
-export declare const hiddenValueSubmissionCapabilities: Readonly<{
-    name: true;
-    form: true;
-    disabled: true;
-}>;
-export declare function useNativeInputFormControl(element: Ref<HTMLInputElement | HTMLTextAreaElement | null | undefined>): FormControlParticipation;
-export declare function useCompositeFormControl(options: {
-    readonly root: FormElementSource;
-    readonly focusTarget?: FormElementSource;
-    readonly submissions?: FormSubmissionSource;
-    readonly labelMode?: FormLabelMode;
-}): FormControlParticipation;
-export declare function provideFormControlOwner(): void;
-export interface TypedFormComponents<Input extends object, Output extends object = Input> {
-    readonly Root: TypedFormRootComponent<Input, Output>;
-    readonly Field: TypedFormFieldComponent<Input>;
-    readonly Label: typeof FormLabel;
-    readonly Description: typeof FormDescription;
-    readonly Message: typeof FormMessage;
-    readonly Summary: typeof FormSummary;
-    readonly Reset: typeof FormReset;
-    readonly Submit: typeof FormSubmit;
-}
-export declare function createTypedForm<Input extends object, Output extends object = Input>(): TypedFormComponents<Input, Output>;
-export {};
-//# sourceMappingURL=form.d.ts.map
+}, SlotsType<{
+    default: (props: FormSubmitSlotProps) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;