@neutro/form 0.0.5 → 0.1.0

package/dist/adapters/vue.d.ts

@@ -1,22 +1,166 @@
 import * as vue from 'vue';
-import { MaybeRef } from 'vue';
+import { DeepReadonly, ShallowRef, MaybeRef } from 'vue';
 
-declare function useVueForm<T extends object>(form: any): {
-    state: Readonly<vue.Ref<any, any>>;
-    get: any;
-    set: any;
-    connect: any;
-    submit: any;
-    handleSubmit: any;
-    reset: any;
-    batch: any;
-    arrayAppend: any;
-    arrayInsert: any;
-    arrayRemove: any;
-    arrayMove: any;
-    arraySwap: any;
+/**
+ * @neutro/form-core
+ * High-Performance, Zero-Dependency, Framework-Agnostic Reactive Form Engine.
+ */
+type Primitive = string | number | boolean | null | undefined | Date | File;
+type Prev = [never, 0, 1, 2, 3, 4, 5, ...any[]];
+type PathImpl<T, K extends keyof T, Depth extends number = 5> = [Depth] extends [never] ? never : K extends string ? T[K] extends Primitive ? K : T[K] extends Array<infer U> ? K | `${K}.${number}` | (U extends object ? `${K}.${number}.${PathImpl<U, keyof U, Prev[Depth]>}` : never) : NonNullable<T[K]> extends object ? K | `${K}.${PathImpl<NonNullable<T[K]>, keyof NonNullable<T[K]>, Prev[Depth]>}` : K : never;
+type Path<T> = PathImpl<T, keyof T> & string;
+type _GetPathValue<T, P extends string> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? _GetPathValue<NonNullable<T[K]>, Rest> : T extends readonly any[] ? _GetPathValue<NonNullable<T[number]>, Rest> : unknown : P extends keyof T ? T[P] : T extends readonly any[] ? T[number] : unknown;
+type GetPathValue<T, P extends string> = _GetPathValue<T, P>;
+interface FormState<T> {
+    values: T;
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    dirty: Record<string, boolean>;
+    isSubmitting: boolean;
+    isValidating: boolean;
+}
+type FormSubscriber<T> = (state: FormState<T>) => void;
+type PathSubscriber<V = any> = (value: V, fieldState: {
+    error?: string;
+    touched?: boolean;
+    dirty?: boolean;
+}) => void;
+type ValidationMode = 'onChange' | 'onBlur' | 'onTouched' | 'onSubmitOnly';
+type FormAction = {
+    type: 'SET';
+    path: string;
+    value: unknown;
+    options?: {
+        touch?: boolean;
+        validate?: boolean;
+    };
+} | {
+    type: 'VALIDATE';
+    paths?: string[];
+} | {
+    type: 'SUBMIT';
+} | {
+    type: 'RESET';
+    newValues?: unknown;
+} | {
+    type: 'SET_ERRORS';
+    errors: Record<string, string>;
+} | {
+    type: 'CONNECT';
+    path: string;
+} | {
+    type: 'DISCONNECT';
+    path: string;
+} | {
+    type: 'BLUR';
+    path: string;
+} | {
+    type: 'BATCH_START';
+} | {
+    type: 'BATCH_END';
+} | {
+    type: 'ARRAY_APPEND';
+    path: string;
+    item: unknown;
+} | {
+    type: 'ARRAY_INSERT';
+    path: string;
+    index: number;
+    item: unknown;
+} | {
+    type: 'ARRAY_REMOVE';
+    path: string;
+    index: number;
+} | {
+    type: 'ARRAY_MOVE';
+    path: string;
+    from: number;
+    to: number;
+} | {
+    type: 'ARRAY_SWAP';
+    path: string;
+    i: number;
+    j: number;
+} | {
+    type: 'CLEAR_ERRORS';
 };
-declare function useVueFormPath(form: any, path: MaybeRef<string>): {
+interface AriaPropsOptions {
+    required?: boolean;
+    errorId?: string;
+}
+interface AriaProps {
+    'aria-invalid': 'true' | 'false';
+    'aria-describedby': string | undefined;
+    'aria-required': true | undefined;
+}
+interface ConnectOptions {
+    persist?: boolean;
+    format?: (val: string) => string;
+    validateOn?: ValidationMode;
+}
+interface FormInstance<T extends object> {
+    subscribe: (fn: FormSubscriber<T>) => () => void;
+    subscribeToPath<P extends Path<T>>(path: P, fn: PathSubscriber<GetPathValue<T, P>>): () => void;
+    subscribeToPath(path: string, fn: PathSubscriber): () => void;
+    get<P extends Path<T>>(path: P): GetPathValue<T, P>;
+    get(path: string | string[]): any;
+    set: (path: Path<T> | string | string[], val: any, options?: {
+        touch?: boolean;
+        validate?: boolean;
+    }) => void;
+    validate: (scopePaths?: Path<T>[] | string[] | string[][]) => Promise<boolean>;
+    connect: (path: Path<T> | string, el: HTMLElement, options?: ConnectOptions) => () => void;
+    submit: (onValid: (payload: Partial<T>) => void | Promise<void>) => Promise<boolean>;
+    handleSubmit: (onValid: (payload: Partial<T>) => void | Promise<void>, onInvalid?: (errors: Record<string, string>) => void) => (e?: Event) => void;
+    getState: () => FormState<T>;
+    getPayload: () => Partial<T>;
+    getAriaProps: (path: Path<T> | string, options?: AriaPropsOptions) => AriaProps;
+    batch: (fn: () => void) => void;
+    arrayAppend: (path: Path<T> | string | string[], item: any) => void;
+    arrayInsert: (path: Path<T> | string | string[], index: number, item: any) => void;
+    arrayRemove: (path: Path<T> | string | string[], index: number) => void;
+    arrayMove: (path: Path<T> | string | string[], fromIndex: number, toIndex: number) => void;
+    arraySwap: (path: Path<T> | string | string[], indexA: number, indexB: number) => void;
+    reset: (newValues?: T) => void;
+    getConnectedCount: () => number;
+    destroy: () => void;
+    setErrors: (errors: Record<Path<T> | (string & {}), string>) => void;
+    clearErrors: () => void;
+    /**
+     * Returns the effective ValidationMode for a field. Useful for debugging
+     * validation timing; framework adapters should rely on this only in custom
+     * event handlers, not in render logic.
+     */
+    getFieldMode: (path: string) => ValidationMode;
+    _subscribeToActions: (fn: (action: FormAction, state: FormState<T>) => void) => () => void;
+}
+
+interface VueFormReturn<T extends object> {
+    state: DeepReadonly<ShallowRef<FormState<T>>>;
+    get: FormInstance<T>['get'];
+    set: FormInstance<T>['set'];
+    connect: FormInstance<T>['connect'];
+    submit: FormInstance<T>['submit'];
+    handleSubmit: FormInstance<T>['handleSubmit'];
+    reset: FormInstance<T>['reset'];
+    batch: FormInstance<T>['batch'];
+    validate: FormInstance<T>['validate'];
+    subscribeToPath: FormInstance<T>['subscribeToPath'];
+    getPayload: FormInstance<T>['getPayload'];
+    getAriaProps: FormInstance<T>['getAriaProps'];
+    getFieldMode: FormInstance<T>['getFieldMode'];
+    getConnectedCount: FormInstance<T>['getConnectedCount'];
+    destroy: FormInstance<T>['destroy'];
+    arrayAppend: FormInstance<T>['arrayAppend'];
+    arrayInsert: FormInstance<T>['arrayInsert'];
+    arrayRemove: FormInstance<T>['arrayRemove'];
+    arrayMove: FormInstance<T>['arrayMove'];
+    arraySwap: FormInstance<T>['arraySwap'];
+    setErrors: FormInstance<T>['setErrors'];
+    clearErrors: FormInstance<T>['clearErrors'];
+}
+declare function useVueForm<T extends object>(form: FormInstance<T>): VueFormReturn<T>;
+declare function useVueFormPath<T extends object>(form: FormInstance<T>, path: MaybeRef<string>): {
     value: Readonly<vue.Ref<Readonly<unknown>, Readonly<unknown>>>;
     fieldState: Readonly<vue.Ref<{
         readonly error?: string | undefined;
@@ -29,4 +173,4 @@ declare function useVueFormPath(form: any, path: MaybeRef<string>): {
     } | null>>;
 };
 
-export { useVueForm, useVueFormPath };
+export { type VueFormReturn, useVueForm, useVueFormPath };

package/dist/adapters/vue.js

@@ -1,11 +1,18 @@
 // ../adapters/vue/dist/index.js
-import { shallowRef, readonly, unref, watch, onUnmounted } from "vue";
+import {
+  getCurrentInstance,
+  onUnmounted,
+  readonly,
+  shallowRef,
+  unref,
+  watch
+} from "vue";
 function useVueForm(form) {
   const state = shallowRef(form.getState());
   const unsubscribe = form.subscribe((s) => {
     state.value = s;
   });
-  onUnmounted(unsubscribe);
+  if (getCurrentInstance()) onUnmounted(unsubscribe);
   return {
     state: readonly(state),
     get: form.get,
@@ -15,16 +22,27 @@ function useVueForm(form) {
     handleSubmit: form.handleSubmit,
     reset: form.reset,
     batch: form.batch,
+    validate: form.validate,
+    subscribeToPath: form.subscribeToPath,
+    getPayload: form.getPayload,
+    getAriaProps: form.getAriaProps,
+    getFieldMode: form.getFieldMode,
+    getConnectedCount: form.getConnectedCount,
+    destroy: form.destroy,
     arrayAppend: form.arrayAppend,
     arrayInsert: form.arrayInsert,
     arrayRemove: form.arrayRemove,
     arrayMove: form.arrayMove,
-    arraySwap: form.arraySwap
+    arraySwap: form.arraySwap,
+    setErrors: form.setErrors,
+    clearErrors: form.clearErrors
   };
 }
 function useVueFormPath(form, path) {
   const value = shallowRef(form.get(unref(path)));
-  const fieldState = shallowRef(null);
+  const fieldState = shallowRef(
+    null
+  );
   let unsubscribe = form.subscribeToPath(unref(path), (v, fs) => {
     value.value = v;
     fieldState.value = fs;
@@ -41,7 +59,7 @@ function useVueFormPath(form, path) {
       });
     }
   );
-  onUnmounted(() => unsubscribe());
+  if (getCurrentInstance()) onUnmounted(() => unsubscribe());
   return { value: readonly(value), fieldState: readonly(fieldState) };
 }
 export {