@tachui/forms 0.7.0-alpha1 → 0.7.1-alpha

package/dist/components/index.js

@@ -1,31 +1,28 @@
-import { F as s, a as o, b as i } from "../Form-ylAr3o_e.js";
-import { C as l, a as r, c as F, d as t, D as m, E as C, N as S, P as c, e as x, f as b, R as h, b as p, h as f, g as u, S as P, T as R, i as T, j as N, U } from "../forms-inputs-6QdeMWFk.js";
-import { C as n, M as w, S as D } from "../forms-complex-BiQsZZlT.js";
+import { C as s, c as i, g as l, e as o, h as d, D as F, E as r, F as t, a as m, b as c, M as C, N as S, P as b, i as h, j as x, R as u, d as P, l as R, k as T, f as k, S as n, T as p, m as N, n as U, U as f } from "../TextField-CGBM3x7K.js";
 export {
-  l as Checkbox,
-  r as CheckboxGroup,
-  F as ColorField,
-  n as Combobox,
-  t as CreditCardField,
-  m as DateField,
-  C as EmailField,
-  s as Form,
-  o as FormSection,
-  i as FormUtils,
-  w as MultiSelect,
+  s as Checkbox,
+  i as CheckboxGroup,
+  l as ColorField,
+  o as Combobox,
+  d as CreditCardField,
+  F as DateField,
+  r as EmailField,
+  t as Form,
+  m as FormSection,
+  c as FormUtils,
+  C as MultiSelect,
   S as NumberField,
-  c as PasswordField,
-  x as PhoneField,
-  b as PostalCodeField,
-  h as Radio,
-  p as RadioGroup,
-  f as SSNField,
-  u as SearchField,
-  D as Select,
-  P as Switch,
-  R as TextArea,
-  T as TextField,
-  N as TimeField,
-  U as URLField
+  b as PasswordField,
+  h as PhoneField,
+  x as PostalCodeField,
+  u as Radio,
+  P as RadioGroup,
+  R as SSNField,
+  T as SearchField,
+  k as Select,
+  n as Switch,
+  p as TextArea,
+  N as TextField,
+  U as TimeField,
+  f as URLField
 };
-//# sourceMappingURL=index.js.map

package/dist/index.js

@@ -1,9 +1,8 @@
-import { F as n, a as d } from "./Form-ylAr3o_e.js";
-import { b as Q } from "./Form-ylAr3o_e.js";
-import { d as c, a as m, c as u, b as g, V as f, C as p, r as F, g as h } from "./forms-core-B1bx1drO.js";
-import { m as Y, F as ee, l as te, j as re, k as ae, i as se, n as ie, e as oe, u as le, h as ne, f as de, v as ce } from "./forms-core-B1bx1drO.js";
-import { k as v, l as N, i as b, E as I, P as S, g as V, U as x, e as y, N as C, d as R, h as A, f as T, T as P, D as L, j as D, c as E, C as _, S as M, a as U, R as w, b as $ } from "./forms-inputs-6QdeMWFk.js";
-import { S as k, M as G, C as H } from "./forms-complex-BiQsZZlT.js";
+import { o as n, p as d, F as c, a as m, m as u, E as g, P as f, k as p, U as F, i as h, N as v, h as N, l as b, j as I, T as S, D as V, n as x, g as y, C as R, S as A, c as C, R as T, d as P, f as L, M as D, e as E } from "./TextField-CGBM3x7K.js";
+import { b as K } from "./TextField-CGBM3x7K.js";
+import { createFormState as _, createField as M, createMultiStepFormState as U } from "./state/index.js";
+import { defaultMessageFormatter as w, ValidationPresets as $, CrossFieldValidators as k, registerFormsValidators as G, getValidationRules as H } from "./validation/index.js";
+import { FormsComponentValidation as J, FormsValidationError as Y, VALIDATION_RULES as ee, ValidationMessageFormatter as te, ValidationUtils as re, createDebouncedValidator as ae, createFormsValidators as se, registerValidationRule as ie, unregisterValidationRule as oe, validateField as le, validateValue as ne, validateValueAsync as de } from "./validation/index.js";
 const O = {
   /**
    * Email validation
@@ -246,138 +245,137 @@ const O = {
     const t = (r, a, o) => {
       e.registerComponent(r, a, o);
     };
-    t("Form", n, {
+    t("Form", c, {
       category: "forms",
       tags: ["form", "container", "validation"]
-    }), t("FormSection", d, {
+    }), t("FormSection", m, {
       category: "forms",
       tags: ["form", "section", "fieldset"]
-    }), t("TextField", b, {
+    }), t("TextField", u, {
       category: "forms",
       tags: ["input", "text", "validation"]
-    }), t("EmailField", I, {
+    }), t("EmailField", g, {
       category: "forms",
       tags: ["input", "email", "validation"]
-    }), t("PasswordField", S, {
+    }), t("PasswordField", f, {
       category: "forms",
       tags: ["input", "password", "validation"]
-    }), t("SearchField", V, {
+    }), t("SearchField", p, {
       category: "forms",
       tags: ["input", "search"]
-    }), t("URLField", x, {
+    }), t("URLField", F, {
       category: "forms",
       tags: ["input", "url", "validation"]
-    }), t("PhoneField", y, {
+    }), t("PhoneField", h, {
       category: "forms",
       tags: ["input", "phone", "validation"]
-    }), t("NumberField", C, {
+    }), t("NumberField", v, {
       category: "forms",
       tags: ["input", "number", "numeric", "validation"]
-    }), t("CreditCardField", R, {
+    }), t("CreditCardField", N, {
       category: "forms",
       tags: ["input", "credit-card", "payment", "validation"]
-    }), t("SSNField", A, {
+    }), t("SSNField", b, {
       category: "forms",
       tags: ["input", "ssn", "social-security", "validation"]
-    }), t("PostalCodeField", T, {
+    }), t("PostalCodeField", I, {
       category: "forms",
       tags: ["input", "postal-code", "zip", "validation"]
-    }), t("TextArea", P, {
+    }), t("TextArea", S, {
       category: "forms",
       tags: ["input", "textarea", "multiline"]
-    }), t("DateField", L, {
+    }), t("DateField", V, {
       category: "forms",
       tags: ["input", "date", "calendar", "validation"]
-    }), t("TimeField", D, {
+    }), t("TimeField", x, {
       category: "forms",
       tags: ["input", "time", "clock", "validation"]
-    }), t("ColorField", E, {
+    }), t("ColorField", y, {
       category: "forms",
       tags: ["input", "color", "picker"]
-    }), t("Checkbox", _, {
+    }), t("Checkbox", R, {
       category: "forms",
       tags: ["input", "checkbox", "boolean"]
-    }), t("Switch", M, {
+    }), t("Switch", A, {
       category: "forms",
       tags: ["input", "switch", "toggle", "boolean"]
-    }), t("CheckboxGroup", U, {
+    }), t("CheckboxGroup", C, {
       category: "forms",
       tags: ["input", "checkbox", "group", "multiple"]
-    }), t("Radio", w, {
+    }), t("Radio", T, {
       category: "forms",
       tags: ["input", "radio", "choice"]
-    }), t("RadioGroup", $, {
+    }), t("RadioGroup", P, {
       category: "forms",
       tags: ["input", "radio", "group", "choice"]
-    }), t("Select", k, {
+    }), t("Select", L, {
       category: "forms",
       tags: ["input", "select", "dropdown", "choice"]
-    }), t("MultiSelect", G, {
+    }), t("MultiSelect", D, {
       category: "forms",
       tags: ["input", "select", "multiple", "choice"]
-    }), t("Combobox", H, {
+    }), t("Combobox", E, {
       category: "forms",
       tags: ["input", "combobox", "search", "choice"]
     }), e.registerService("formsConfig", {
       theme: "default",
       validation: {},
       accessibility: {}
-    }), e.registerService("validationMessageFormatter", c), e.registerService("createFormState", m), e.registerService("createField", u), e.registerService("createMultiStepFormState", g), e.registerService("ValidationPresets", f), e.registerService("CrossFieldValidators", p), e.registerService("TextFieldFormatters", v), e.registerService("TextFieldParsers", N), e.registerService("TextFieldValidators", O), await F(), console.log("📝 TachUI Forms plugin installed successfully"), console.log("   • 24 form components (including enhanced TextField variants)"), console.log(`   • ${h().length} validation rules`), console.log("   • TextField formatters and validators included");
+    }), e.registerService("validationMessageFormatter", w), e.registerService("createFormState", _), e.registerService("createField", M), e.registerService("createMultiStepFormState", U), e.registerService("ValidationPresets", $), e.registerService("CrossFieldValidators", k), e.registerService("TextFieldFormatters", n), e.registerService("TextFieldParsers", d), e.registerService("TextFieldValidators", O), await G(), console.log("📝 TachUI Forms plugin installed successfully"), console.log("   • 24 form components (including enhanced TextField variants)"), console.log(`   • ${H().length} validation rules`), console.log("   • TextField formatters and validators included");
   },
   async uninstall() {
     console.log("📝 TachUI Forms plugin uninstalled");
   }
-}, W = async (e) => z.install(e);
+}, B = async (e) => z.install(e);
 export {
-  _ as Checkbox,
-  U as CheckboxGroup,
-  E as ColorField,
-  H as Combobox,
-  R as CreditCardField,
-  p as CrossFieldValidators,
-  L as DateField,
-  I as EmailField,
-  n as Form,
-  d as FormSection,
-  Q as FormUtils,
-  Y as FormsComponentValidation,
-  ee as FormsValidationError,
-  G as MultiSelect,
-  C as NumberField,
-  S as PasswordField,
-  y as PhoneField,
-  T as PostalCodeField,
-  w as Radio,
-  $ as RadioGroup,
-  A as SSNField,
-  V as SearchField,
-  k as Select,
-  M as Switch,
-  P as TextArea,
-  b as TextField,
-  v as TextFieldFormatters,
-  N as TextFieldParsers,
+  R as Checkbox,
+  C as CheckboxGroup,
+  y as ColorField,
+  E as Combobox,
+  N as CreditCardField,
+  k as CrossFieldValidators,
+  V as DateField,
+  g as EmailField,
+  c as Form,
+  m as FormSection,
+  K as FormUtils,
+  J as FormsComponentValidation,
+  Y as FormsValidationError,
+  D as MultiSelect,
+  v as NumberField,
+  f as PasswordField,
+  h as PhoneField,
+  I as PostalCodeField,
+  T as Radio,
+  P as RadioGroup,
+  b as SSNField,
+  p as SearchField,
+  L as Select,
+  A as Switch,
+  S as TextArea,
+  u as TextField,
+  n as TextFieldFormatters,
+  d as TextFieldParsers,
   O as TextFieldValidators,
-  D as TimeField,
-  x as URLField,
-  te as VALIDATION_RULES,
-  re as ValidationMessageFormatter,
-  f as ValidationPresets,
-  ae as ValidationUtils,
-  se as createDebouncedValidator,
-  u as createField,
-  m as createFormState,
-  ie as createFormsValidators,
-  g as createMultiStepFormState,
+  x as TimeField,
+  F as URLField,
+  ee as VALIDATION_RULES,
+  te as ValidationMessageFormatter,
+  $ as ValidationPresets,
+  re as ValidationUtils,
+  ae as createDebouncedValidator,
+  M as createField,
+  _ as createFormState,
+  se as createFormsValidators,
+  U as createMultiStepFormState,
   z as default,
-  c as defaultMessageFormatter,
-  h as getValidationRules,
-  W as installFormsPlugin,
-  F as registerFormsValidators,
-  oe as registerValidationRule,
-  le as unregisterValidationRule,
-  ne as validateField,
-  de as validateValue,
-  ce as validateValueAsync
+  w as defaultMessageFormatter,
+  H as getValidationRules,
+  B as installFormsPlugin,
+  G as registerFormsValidators,
+  ie as registerValidationRule,
+  oe as unregisterValidationRule,
+  le as validateField,
+  ne as validateValue,
+  de as validateValueAsync
 };
-//# sourceMappingURL=index.js.map

package/dist/state/index.js

@@ -1,9 +1,242 @@
-import "@tachui/core";
-import { c as r, a as c, b as o, v as s } from "../forms-core-B1bx1drO.js";
+import { createSignal as v, createComputed as O, createEffect as C } from "@tachui/core";
+import { validateValueAsync as k } from "../validation/index.js";
+function P(c) {
+  const [r, n] = v(c), [s, l] = v(void 0), [h, g] = v(!1), [u, p] = v(!1), [V, E] = v(!1), [F, b] = v(!1);
+  C(() => {
+    r() !== c && p(!0);
+  });
+  const a = O(() => !s());
+  return {
+    state: O(
+      () => ({
+        value: r(),
+        error: s(),
+        touched: h(),
+        dirty: u(),
+        valid: a(),
+        validating: F(),
+        focused: V()
+      })
+    ),
+    setValue: (i) => {
+      n(i), p(i !== c), h();
+    },
+    setError: l,
+    setTouched: g,
+    setFocused: E,
+    setValidating: b
+  };
+}
+function $(c = {}) {
+  const r = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), [s, l] = v(!1), [h, g] = v(!1);
+  Object.keys(c).forEach((t) => {
+    const e = P(c[t]);
+    r.set(t, e);
+  });
+  const u = O(() => {
+    const t = {}, e = {}, o = {};
+    let m = !0, d = !1;
+    for (const [_, w] of r) {
+      const M = w.state();
+      t[_] = M, M.error && (e[_] = M.error, m = !1), M.touched && (o[_] = !0), M.dirty && (d = !0);
+    }
+    return {
+      fields: t,
+      valid: m,
+      dirty: d,
+      submitting: s(),
+      submitted: h(),
+      errors: e,
+      touched: o
+    };
+  }), p = (t, e) => {
+    if (r.has(t)) {
+      e && n.set(t, e);
+      return;
+    }
+    const o = P(c[t]);
+    if (r.set(t, o), e && n.set(t, e), e) {
+      const m = o.state;
+      C(async () => {
+        const d = m();
+        if ((e.validateOn === "change" || e.validateOn === "blur" && d.touched || e.validateOn === "submit" && h()) && (d.dirty || d.touched)) {
+          o.setValidating(!0);
+          try {
+            const w = await T(d, e);
+            o.setError(w.valid ? void 0 : w.message);
+          } catch {
+            o.setError("Validation error occurred");
+          } finally {
+            o.setValidating(!1);
+          }
+        }
+      });
+    }
+  }, V = (t) => {
+    r.delete(t), n.delete(t);
+  }, E = (t, e) => {
+    const o = r.get(t);
+    o && o.setValue(e);
+  }, F = (t) => r.get(t)?.state().value, b = (t) => r.get(t)?.state().error, a = async (t) => {
+    const e = r.get(t), o = n.get(t);
+    if (!e || !o)
+      return !0;
+    const m = e.state();
+    e.setValidating(!0);
+    try {
+      const d = await T(m, o);
+      return e.setError(d.valid ? void 0 : d.message), d.valid;
+    } catch {
+      return e.setError("Validation error occurred"), !1;
+    } finally {
+      e.setValidating(!1);
+    }
+  }, f = async () => {
+    const t = Array.from(r.keys()).map(a);
+    return (await Promise.all(t)).every((o) => o);
+  }, i = () => {
+    for (const [t, e] of r)
+      e.setValue(c[t]), e.setError(void 0), e.setTouched(!1), e.setFocused(!1), e.setValidating(!1);
+    l(!1), g(!1);
+  }, y = async (t) => {
+    l(!0), g(!0);
+    try {
+      if (await f() && t) {
+        const o = {};
+        for (const [m, d] of r)
+          o[m] = d.state().value;
+        await t(o, u());
+      }
+    } finally {
+      l(!1);
+    }
+  }, S = (t) => {
+    const e = {}, o = t || Array.from(r.keys());
+    for (const m of o)
+      r.has(m) && (e[m] = F(m));
+    return e;
+  }, A = async (t) => {
+    const o = (t || Array.from(r.keys())).map(a);
+    return (await Promise.all(o)).every((d) => d);
+  };
+  return {
+    fields: u().fields,
+    state: u(),
+    register: p,
+    unregister: V,
+    setValue: E,
+    getValue: F,
+    getError: b,
+    validateField: a,
+    validateForm: f,
+    resetForm: i,
+    submitForm: y,
+    watch: S,
+    trigger: A
+  };
+}
+async function T(c, r) {
+  return !r.rules || r.rules.length === 0 ? { valid: !0 } : r.debounceMs ? new Promise((n) => {
+    setTimeout(async () => {
+      const s = await k(c.value, r.rules);
+      n(s);
+    }, r.debounceMs);
+  }) : k(c.value, r.rules);
+}
+function B(c, r, n) {
+  const s = P(r), l = s.state;
+  n && C(async () => {
+    const u = l();
+    if ((n.validateOn === "change" || n.validateOn === "blur" && u.touched) && (u.dirty || u.touched)) {
+      s.setValidating(!0);
+      try {
+        const V = await T(u, n);
+        s.setError(V.valid ? void 0 : V.message);
+      } catch {
+        s.setError("Validation error occurred");
+      } finally {
+        s.setValidating(!1);
+      }
+    }
+  });
+  const h = async () => {
+    if (!n) return !0;
+    s.setValidating(!0);
+    try {
+      const u = await T(l(), n);
+      return s.setError(u.valid ? void 0 : u.message), u.valid;
+    } catch {
+      return s.setError("Validation error occurred"), !1;
+    } finally {
+      s.setValidating(!1);
+    }
+  }, g = () => {
+    s.setValue(r), s.setError(void 0), s.setTouched(!1), s.setFocused(!1), s.setValidating(!1);
+  };
+  return {
+    value: () => l().value,
+    setValue: s.setValue,
+    error: () => l().error,
+    touched: () => l().touched,
+    dirty: () => l().dirty,
+    valid: () => l().valid,
+    validating: () => l().validating,
+    focused: () => l().focused,
+    onFocus: () => {
+      s.setFocused(!0);
+    },
+    onBlur: () => {
+      s.setFocused(!1), s.setTouched(!0);
+    },
+    validate: h,
+    reset: g
+  };
+}
+function D(c, r = {}) {
+  const [n, s] = v(0), [l, h] = v(/* @__PURE__ */ new Set()), g = /* @__PURE__ */ new Map();
+  return c.forEach((a, f) => {
+    const i = Object.keys(r).filter((y) => y.startsWith(`step_${f}_`)).reduce(
+      (y, S) => {
+        const A = S.replace(`step_${f}_`, "");
+        return y[A] = r[S], y;
+      },
+      {}
+    );
+    g.set(f, $(i));
+  }), {
+    currentStep: n,
+    completedSteps: l,
+    nextStep: async (a = !0) => {
+      const f = n(), i = g.get(f);
+      return a && i && !await i.validateForm() ? !1 : f < c.length - 1 ? (h((y) => /* @__PURE__ */ new Set([...y, f])), s(f + 1), !0) : !1;
+    },
+    previousStep: () => {
+      const a = n();
+      return a > 0 ? (s(a - 1), !0) : !1;
+    },
+    goToStep: (a) => a >= 0 && a < c.length ? (s(a), !0) : !1,
+    getCurrentForm: () => g.get(n()),
+    getAllValues: () => {
+      const a = {};
+      return g.forEach((f, i) => {
+        const y = f.watch();
+        Object.keys(y).forEach((S) => {
+          a[`step_${i}_${S}`] = y[S];
+        });
+      }), a;
+    },
+    validateAllSteps: async () => {
+      const a = Array.from(g.values()).map((i) => i.validateForm());
+      return (await Promise.all(a)).every((i) => i);
+    },
+    getStepForm: (a) => g.get(a),
+    isStepCompleted: (a) => l().has(a),
+    canGoToStep: (a) => a <= n() || l().has(a)
+  };
+}
 export {
-  r as createField,
-  c as createFormState,
-  o as createMultiStepFormState,
-  s as validateValueAsync
+  B as createField,
+  $ as createFormState,
+  D as createMultiStepFormState,
+  k as validateValueAsync
 };
-//# sourceMappingURL=index.js.map