coles-solid-library 0.3.6 → 0.3.7

package/dist/components/Form/formGroup.d.ts

@@ -1,4 +1,4 @@
-import { FormGroupData, ValidationDefault } from "./formHelp/models";
+import { FormGroupData, ValidationDefault, ValidatorResult, ControlMeta } from "./formHelp/models";
 export { FormArray } from "./formHelp/formArray";
 export { Validators } from "./formHelp/validators";
 /**
@@ -11,6 +11,7 @@ export declare class FormGroup<T extends object> {
     private internalDataSignal;
     private validators;
     private errors;
+    private meta;
     private keys;
     constructor(data: FormGroupData<T>);
     /**
@@ -70,6 +71,12 @@ export declare class FormGroup<T extends object> {
      * @param hasError - Whether the error should be set or cleared
      */
     setError(key: keyof T, errKey: string, hasError: boolean): void;
+    addValidator<K extends keyof T>(key: K, validator: ValidatorResult<T[K]>): void;
+    removeValidator<K extends keyof T>(key: K, errKey: string): void;
+    getMeta<K extends keyof T>(key: K): ControlMeta<T[K]>;
+    markTouched<K extends keyof T>(key: K): void;
+    markDirty<K extends keyof T>(key: K): void;
+    reset(): void;
     /**
      * Sets a new value for a specified form control.
      *
@@ -101,6 +108,7 @@ export declare class FormGroup<T extends object> {
      * @returns `true` if the control(s) pass all validations; otherwise, `false`.
      */
     validate<K extends keyof T>(key?: K): boolean;
+    validateAsync<K extends keyof T>(key?: K): Promise<boolean>;
 }
 /**
  * Utility type to extract the element type from an array type

package/dist/components/Form/formHelp/models.d.ts

@@ -1,8 +1,9 @@
 import { JSX } from "solid-js";
 import { FormArray } from "./formArray";
 export interface ValidatorResult<T> {
-    revalidate: (val: T) => boolean;
     errKey: string;
+    revalidate: (val: T) => boolean | Promise<boolean>;
+    hide?: (val: T) => boolean;
 }
 export interface Error {
     key: string;
@@ -14,18 +15,14 @@ export type ErrorObject<T> = {
     [P in keyof T]: Error[];
 };
 export type ArrayValidation<T> = [(ValidationDefault<T, keyof T>)[], ValidatorResult<T[]>[]];
-export interface ValidatorResult<T> {
-    revalidate: (val: T) => boolean;
-    errKey: string;
-    hide?: (val: T) => boolean;
-}
-export interface Error {
-    key: string;
-    hasError: boolean;
-}
 export type ValidatorObject<T> = {
     [P in keyof T]?: ValidatorResult<T[P]>[];
 };
 export type FormGroupData<T extends object> = {
-    [P in keyof T]: [T[P], ValidatorResult<T[P]>[]] | (T[P] extends object ? FormArray<T[P]> : any);
+    [P in keyof T]: [T[P], ValidatorResult<T[P]>[]] | (T[P] extends (infer U)[] ? FormArray<U & object> : T[P] extends object ? FormArray<T[P] & object> : any);
 };
+export interface ControlMeta<T = any> {
+    touched: boolean;
+    dirty: boolean;
+    initialValue: T;
+}

package/dist/components/Form/formHelp/validators.d.ts

@@ -67,6 +67,10 @@ export declare class Validators {
      * @returns A ValidatorResult that includes the error key and a revalidation function.
      */
     static custom<T>(errKey: string, validator: (value: T) => boolean, hide?: (val: T) => boolean): ValidatorResult<T>;
+    /**
+     * Creates an async validator; resolves promise to boolean.
+     */
+    static asyncCustom<T>(errKey: string, validator: (value: T) => Promise<boolean>, hide?: (val: T) => boolean): ValidatorResult<T>;
     /**
      * A helper function that creates a ValidatorResult object.
      *

package/dist/components/Form/useFormFieldBinding.d.ts

@@ -0,0 +1,14 @@
+import { Accessor } from 'solid-js';
+export interface FieldBinding<T, K extends keyof T> {
+    value: Accessor<T[K]>;
+    setValue: (v: T[K]) => void;
+    errors: () => {
+        key: string;
+        hasError: boolean;
+    }[];
+    hasError: () => boolean;
+    touched: () => boolean;
+    dirty: () => boolean;
+    validate: () => boolean;
+}
+export declare function useFormFieldBinding<T extends object, K extends keyof T>(key: K): FieldBinding<T, K>;

package/dist/index.esm.js

@@ -1400,10 +1400,13 @@ const useFormContext = () => {
 };
 const Form = props => {
   const startData = props.data.get() ?? {};
+  // Custom shallow clone preserving FormArray instances (already handled in FormGroup.get)
+  const initialValue = {};
+  Object.keys(startData).forEach(k => {
+    initialValue[k] = startData[k];
+  });
   return createComponent(Provider, {
-    get value() {
-      return CloneStore(startData);
-    },
+    value: initialValue,
     get formGroup() {
       return props.data;
     },
@@ -1498,21 +1501,21 @@ const Input = props => {
     }
     if (props.onChange) props.onChange(e);
   };
-  createEffect(() => {
-    if (isRequired()) {
-      context?.setName?.(old => `${old} *`);
-    } else {
-      context?.setName?.(old => old);
-    }
-  });
+  // Removed name mutation adding '*' to avoid duplicating required indicator; legend handles display.
   onMount(() => {
     if (!isNullish(context.getName)) {
       // Force a non-checkbox field type
       context.setFieldType(props.type === "checkbox" ? "text" : props.type ?? "text");
       if (!isNullish(formContext?.data)) {
-        const formValue = formContext.data[context.formName ?? ""]?.trim();
-        if (formValue) {
-          context.setValue(formValue);
+        const raw = formContext.data[context.formName ?? ""];
+        if (typeof raw === 'string') {
+          const formValue = raw.trim();
+          if (formValue) {
+            context.setValue(formValue);
+            context.setTextInside(true);
+          }
+        } else if (raw !== undefined && raw !== null) {
+          context.setValue(raw);
           context.setTextInside(true);
         }
       }
@@ -2122,7 +2125,6 @@ function Select(props) {
     selectStyle: currStyle
   }));
   const [dropTop, setDropTop] = createSignal(false);
-  console.log("Select rendered with options:", options);
   return (() => {
     var _el$7 = _tmpl$5$1(),
       _el$8 = _el$7.firstChild,
@@ -2299,7 +2301,6 @@ function Option(props) {
     const contextSuccess = selectFormContextValue(props.value);
     !contextSuccess ? selectFormFieldValue(props.value) : true;
     if (!formField?.getName?.()) {
-      console.log('selected!', props.value, select);
       select.selectValue?.(props.value);
       formField?.setFocused?.(true);
     }
@@ -2406,7 +2407,7 @@ const TextArea = props => {
         if (!!context?.getName && !!e.currentTarget.value.trim()) {
           context?.setValue(e.currentTarget.value);
           context?.setTextInside(true);
-        } else if (!!context.getName && !e.currentTarget.value.trim()) {
+        } else if (!!context?.getName && !e.currentTarget.value.trim()) {
           context?.setValue("");
           context?.setTextInside(false);
         }
@@ -3000,11 +3001,21 @@ function RadioGroup(props) {
   radioGroupCount++;
   const groupName = props.name ?? `radio-group-${radioGroupCount}`;
   const [internalValue, setInternalValue] = createSignal(props.defaultValue);
+  const formField = useFormProvider();
+  const formContext = useFormContext();
   const selectedValue = () => props.value !== undefined ? props.value : internalValue();
   const setSelectedValue = val => {
     if (props.value === undefined) {
       setInternalValue(val);
     }
+    // Bridge to FormGroup if inside a FormField with formName
+    if (formField?.formName && formContext?.formGroup?.set) {
+      formContext.formGroup.set(formField.formName, val);
+      formContext.setData(old => ({
+        ...old,
+        [formField.formName]: val
+      }));
+    }
     props.onChange?.(val);
   };
   const radioRefs = [];
@@ -3450,39 +3461,47 @@ class FormArray {
     }
     // Validate all controls in the form array.
     if (isNullish(index)) {
-      const cleanValue = val => {
-        if (isNullish(val)) {
-          return [];
-        } else if (Array.isArray(val)) {
-          return val;
-        } else {
-          return [val];
-        }
-      };
-      this.errors = cleanValue(values).map((value, i) => {
-        const errors = this.internalValidation.map(([_, validators]) => {
+      // Always evaluate array-level validators even if the array is empty
+      const arrayLevelErrors = this.internalArrayValidation.map(validator => ({
+        key: validator.errKey,
+        hasError: !validator.revalidate(values)
+      }));
+      if (values.length === 0) {
+        this.errors = [arrayLevelErrors]; // store array-level errors at index 0 placeholder
+        return this.errors.flat().every(error => !error.hasError);
+      }
+      this.errors = values.map((value, i) => {
+        const controlErrors = this.internalValidation.map(([propKey, validators]) => {
+          const currentVal = value[propKey];
           return validators.map(validator => ({
             key: validator.errKey,
-            hasError: !validator.revalidate(value)
+            hasError: !validator.revalidate(currentVal)
           }));
         });
         const arrayErrors = this.internalArrayValidation.map(validator => ({
           key: validator.errKey,
           hasError: !validator.revalidate(values)
         }));
-        this.errors[i] = [...errors.flat(), ...arrayErrors];
-        return [...errors.flat(), ...arrayErrors];
+        const merged = [...controlErrors.flat(), ...arrayErrors];
+        this.errors[i] = merged;
+        return merged;
       });
       return this.errors.flat().every(error => !error.hasError);
     }
     // Validate a specific control in the form array.
-    const errors = this.internalValidation.map(([_, validators]) => {
+    const value = values[index];
+    const controlErrors = this.internalValidation.map(([propKey, validators]) => {
+      const currentVal = value[propKey];
       return validators.map(validator => ({
         key: validator.errKey,
-        hasError: !validator.revalidate(values[index])
+        hasError: !validator.revalidate(currentVal)
       }));
     });
-    this.errors[index] = errors.flat();
+    const arrayErrors = this.internalArrayValidation.map(validator => ({
+      key: validator.errKey,
+      hasError: !validator.revalidate(values)
+    }));
+    this.errors[index] = [...controlErrors.flat(), ...arrayErrors];
     return this.errors[index].every(error => !error.hasError);
   }
 }
@@ -3529,15 +3548,16 @@ const FormField2 = props => {
   });
   const theChildren = children(() => props.children);
   const formErrors = () => {
-    const allErrors = (formContext?.formGroup.getErrors(local?.formName ?? '') ?? []).filter(error => error.hasError);
+    if (!local?.formName) return [];
+    const allErrors = (formContext?.formGroup.getErrors(local.formName) ?? []).filter(e => e.hasError);
     if (allErrors.length === 0) return [];
-    let errKeys = allErrors.map(error => error.key);
-    // test just require
+    let errKeys = allErrors.map(e => e.key);
     if (errKeys.includes('required')) {
-      errKeys = errKeys.filter(err => err !== 'minLength' && err !== 'maxLength');
+      errKeys = errKeys.filter(k => k !== 'minLength' && k !== 'maxLength');
     }
-    //---
-    return context?.getErrors?.().err.filter(err => errKeys.includes(err.key));
+    // Map to displays stored in context errors (ColeError registered displays) if available
+    const displayMap = context?.getErrors?.().err ?? [];
+    return displayMap.filter(e => errKeys.includes(e.key));
   };
   const hasRequired = createMemo(() => {
     if (isNullish(local?.formName)) return false;
@@ -3746,7 +3766,13 @@ class Validators {
    * @returns A ValidatorResult that includes the error key and a revalidation function.
    */
   static custom(errKey, validator, hide) {
-    return this.createValidatorResult(errKey, validator);
+    return this.createValidatorResult(errKey, validator, hide);
+  }
+  /**
+   * Creates an async validator; resolves promise to boolean.
+   */
+  static asyncCustom(errKey, validator, hide) {
+    return this.createValidatorResult(errKey, validator, hide);
   }
   /**
    * A helper function that creates a ValidatorResult object.
@@ -3777,6 +3803,7 @@ class FormGroup {
   internalDataSignal;
   validators = {};
   errors;
+  meta = {};
   keys = [];
   constructor(data) {
     this.data = data;
@@ -3787,11 +3814,8 @@ class FormGroup {
       const value = data[key];
       this.keys.push(key);
       if (value instanceof FormArray) {
-        // If the value is a FormArray, store it directly.
-        // We need to ensure that when T[key] is an array type, we store the array returned by FormArray
-        newData[key] = value.get();
+        newData[key] = value;
       } else {
-        // Otherwise, initialize the data, validators, and errors for the control.
         newData[key] = value[0];
         newValidators[key] = value[1];
         newErrors[key] = value[1].map(validator => ({
@@ -3799,13 +3823,31 @@ class FormGroup {
           hasError: false
         }));
       }
+      const initialVal = value instanceof FormArray ? value.get() : CloneStore(newData[key]);
+      this.meta[key] = {
+        touched: false,
+        dirty: false,
+        initialValue: initialVal
+      };
     }
     this.internalDataSignal = createStore(newData);
     this.validators = newValidators;
     this.errors = createSignal(newErrors);
   }
   get(key) {
-    if (!key) return CloneStore(this.internalDataSignal[0]);
+    if (!key) {
+      // Custom clone that preserves FormArray instances (structuredClone fails on functions inside)
+      const clone = {};
+      for (const k of this.keys) {
+        const val = this.internalDataSignal[0][k];
+        if (val instanceof FormArray) {
+          clone[k] = val; // keep reference; consumer methods operate on instance
+        } else {
+          clone[k] = CloneStore(val);
+        }
+      }
+      return clone;
+    }
     // If the control is a FormArray, use its get method
     if (this.internalDataSignal[0][key] instanceof FormArray) {
       // Return the array from FormArray.get() as the expected type T[K]
@@ -3885,16 +3927,56 @@ class FormGroup {
    * @param hasError - Whether the error should be set or cleared
    */
   setError(key, errKey, hasError) {
-    if (this.internalDataSignal[0][key] instanceof FormArray) {
-      // Not supported for FormArray - errors are managed internally
-      return;
-    }
-    const errorIndex = this.errors[0]()[key]?.findIndex(error => error.key === errKey);
-    if (errorIndex !== -1) {
-      this.errors[1](old => {
-        old[key][errorIndex].hasError = hasError;
-        return Clone(old);
+    if (this.internalDataSignal[0][key] instanceof FormArray) return;
+    const current = this.errors[0]();
+    const list = current[key] ?? [];
+    let index = list.findIndex(e => e.key === errKey);
+    if (index === -1) {
+      list.push({
+        key: errKey,
+        hasError
       });
+    } else {
+      list[index].hasError = hasError;
+    }
+    current[key] = list;
+    this.errors[1](() => Clone(current));
+  }
+  addValidator(key, validator) {
+    if (!this.validators[key]) this.validators[key] = [];
+    this.validators[key].push(validator);
+    this.setError(key, validator.errKey, false);
+  }
+  removeValidator(key, errKey) {
+    if (!this.validators[key]) return;
+    this.validators[key] = this.validators[key].filter(v => v.errKey !== errKey);
+    const current = this.errors[0]();
+    if (current[key]) {
+      current[key] = current[key].filter(e => e.key !== errKey);
+      this.errors[1](() => Clone(current));
+    }
+  }
+  getMeta(key) {
+    return this.meta[key];
+  }
+  markTouched(key) {
+    this.meta[key].touched = true;
+  }
+  markDirty(key) {
+    this.meta[key].dirty = true;
+  }
+  reset() {
+    for (const k of this.keys) {
+      const m = this.meta[k];
+      this.set(k, CloneStore(m.initialValue));
+      m.touched = false;
+      m.dirty = false;
+      const errs = this.errors[0]();
+      errs[k] = errs[k]?.map(e => ({
+        ...e,
+        hasError: false
+      }));
+      this.errors[1](() => Clone(errs));
     }
   }
   /**
@@ -3915,6 +3997,11 @@ class FormGroup {
       ...old,
       [key]: value
     }));
+    const m = this.meta[key];
+    if (m) {
+      if (!m.touched) m.touched = true;
+      if (!m.dirty && JSON.stringify(m.initialValue) !== JSON.stringify(value)) m.dirty = true;
+    }
   }
   /**
    * Adds an item to a FormArray control
@@ -3949,28 +4036,62 @@ class FormGroup {
    */
   validate(key) {
     if (isNullish(this.internalDataSignal?.[0])) {
-      console.error('Data is null');
+      if (process?.env?.NODE_ENV !== 'production') console.error('Data is null');
       return false;
     }
     if (!key) {
       const results = this.keys.map(k => this.validate(k));
-      return results.every(result => result);
+      return results.every(Boolean);
     }
     if (this.internalDataSignal?.[0]?.[key] instanceof FormArray) {
       return this.internalDataSignal[0][key].validateCurrent();
     }
     const validators = this.validators[key];
     if (!validators) return true;
-    return !validators.map(validator => {
-      const hasError = !validator.revalidate(this.internalDataSignal[0][key]);
-      const toHide = validator.hide?.(this.internalDataSignal[0][key]);
-      if (toHide) {
-        this.setError(key, validator.errKey, false);
-        return true;
+    let allValid = true;
+    for (const validator of validators) {
+      try {
+        const result = validator.revalidate(this.internalDataSignal[0][key]);
+        const isPromise = typeof result?.then === 'function';
+        const resolved = isPromise ? true : result; // optimistic until async handled via validateAsync
+        const toHide = validator.hide?.(this.internalDataSignal[0][key]);
+        if (toHide) {
+          this.setError(key, validator.errKey, false);
+        } else {
+          this.setError(key, validator.errKey, !resolved);
+          if (!resolved) allValid = false;
+        }
+      } catch (e) {
+        if (process?.env?.NODE_ENV !== 'production') console.warn('Validator threw', validator.errKey, e);
+        this.setError(key, validator.errKey, true);
+        allValid = false;
       }
-      this.setError(key, validator.errKey, hasError);
-      return !hasError;
-    }).includes(false);
+    }
+    return allValid;
+  }
+  async validateAsync(key) {
+    if (!key) {
+      const results = await Promise.all(this.keys.map(k => this.validateAsync(k)));
+      return results.every(Boolean);
+    }
+    if (this.internalDataSignal?.[0]?.[key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].validateCurrent();
+    }
+    const validators = this.validators[key];
+    if (!validators) return true;
+    let allValid = true;
+    for (const validator of validators) {
+      try {
+        const res = await validator.revalidate(this.internalDataSignal[0][key]);
+        const toHide = validator.hide?.(this.internalDataSignal[0][key]);
+        if (toHide) this.setError(key, validator.errKey, false);else this.setError(key, validator.errKey, !res);
+        if (!res && !toHide) allValid = false;
+      } catch {
+        this.setError(key, validator.errKey, true);
+        allValid = false;
+      }
+    }
+    return allValid;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",