@tempots/beatui 1.7.4 → 1.9.0

package/dist/use-form-DsCzINfm.js

@@ -0,0 +1,750 @@
+import { prop as p, computedOf as D, Fragment as M, attr as T, on as w, emitValueAsNumber as O, emitValue as P, Value as j } from "@tempots/dom";
+import { Validation as c, strictEqual as b } from "@tempots/std";
+function J(i) {
+  return i.split(".").map((t) => {
+    const s = t.match(/^\[(\d+)\]$/);
+    return s ? Number(s[1]) : t;
+  });
+}
+function H(i) {
+  return typeof i == "number" ? `[${i}]` : `.${i}`;
+}
+function I(i) {
+  if (i.length === 0) return "";
+  const [e, ...t] = i;
+  return [
+    typeof e == "number" ? `[${e}]` : e,
+    ...t.map(H)
+  ].join("");
+}
+const K = {
+  /** A valid validation result */
+  valid: c.valid,
+  /**
+   * Create an invalid validation with a message
+   */
+  invalid(i) {
+    return c.invalid({ message: i });
+  },
+  /**
+   * Create an invalid validation with field-specific errors.
+   * Values can be error messages (strings) or full ControllerError objects.
+   */
+  invalidFields(i) {
+    const e = {};
+    for (const [t, s] of Object.entries(i))
+      e[t] = typeof s == "string" ? { message: s } : s;
+    return c.invalid({ dependencies: e });
+  },
+  /**
+   * Create an invalid validation from a ControllerError object
+   */
+  fromError(i) {
+    return c.invalid(i);
+  }
+};
+function C(i) {
+  return function(t) {
+    if (t.type === "valid") return t;
+    let s = t.error;
+    for (const n of i)
+      if (s = s?.dependencies?.[n], s == null) return c.valid;
+    return c.invalid(s);
+  };
+}
+class g {
+  /** The path segments identifying this controller's position in the form hierarchy (e.g., ['user', 'email']). */
+  path;
+  /** Callback to propagate value changes up to the parent form. */
+  change;
+  /** Reactive signal containing the current field value. */
+  signal;
+  /** Reactive signal containing the current validation state (valid, pending, or invalid with errors). */
+  status;
+  /** Reactive signal containing the current error message string, or undefined if valid. */
+  error;
+  /** Reactive signal indicating whether this field has any errors. */
+  hasError;
+  /** Reactive signal tracking whether the user has interacted with this field. */
+  touched;
+  /** Reactive signal indicating whether errors should be shown (respects validation mode and touched state). */
+  errorVisible;
+  /** Reactive signal tracking whether the current value differs from the baseline. */
+  dirty;
+  /** Reactive signal containing nested field errors for child controllers. */
+  dependencyErrors;
+  #e = {
+    disabled: p(!1),
+    touched: p(!1)
+  };
+  #s;
+  #t = p(void 0);
+  /** Parent controller context providing disabled state and optional validation mode. */
+  parent;
+  /** Reactive signal indicating whether this field is disabled (combines local and parent disabled state). */
+  disabled;
+  #i = [];
+  /** Reactive signal indicating whether this field is disabled OR has errors (useful for submit button state). */
+  disabledOrHasErrors;
+  /**
+   * Creates a new Controller instance.
+   *
+   * @param path - Field path segments in the form hierarchy
+   * @param change - Callback to propagate value changes
+   * @param signal - Reactive signal holding the field value
+   * @param status - Reactive signal holding validation state
+   * @param parent - Parent context with disabled state and optional validation mode
+   * @param equals - Equality function for dirty tracking (defaults to strictEqual)
+   */
+  constructor(e, t, s, n, l, o = b) {
+    this.path = e, this.change = t, this.signal = s, this.status = n, this.#s = o, this.#t.set(s.value), this.error = n.map(
+      (a) => a?.type === "invalid" ? a.error?.message : void 0
+    ), this.hasError = this.error.map((a) => a != null), this.touched = this.#e.touched, l.validationMode ? this.errorVisible = D(
+      this.hasError,
+      this.touched,
+      l.validationMode
+    )((a, r, d) => d === "eager" ? !!a : !!a && !!r) : this.errorVisible = D(
+      this.hasError,
+      this.touched
+    )((a, r) => !!a && !!r), this.dirty = D(
+      this.signal,
+      this.#t
+    )((a, r) => !this.#s(a, r)), this.dependencyErrors = n.map(
+      (a) => a?.type === "invalid" ? a.error?.dependencies : void 0
+    ), this.parent = l, this.disabled = D(
+      this.#e.disabled,
+      l.disabled
+    )((a, r) => a || r), this.disabledOrHasErrors = D(
+      this.disabled,
+      this.hasError
+    )((a, r) => a || r), this.onDispose(() => {
+      this.#e.disabled.dispose(), this.#e.touched.dispose(), this.disabled.dispose(), this.error.dispose(), this.errorVisible.dispose(), this.dirty.dispose(), this.#t.dispose(), this.dependencyErrors.dispose(), this.disabledOrHasErrors.dispose();
+    });
+  }
+  /**
+   * Returns the field name as a dot-separated string (e.g., "user.email").
+   */
+  get name() {
+    return I(this.path);
+  }
+  /**
+   * Registers a callback to be executed when this controller is disposed.
+   *
+   * @param callback - Function to execute on disposal
+   */
+  onDispose = (e) => {
+    this.#i.push(e);
+  };
+  /**
+   * Disposes all internal resources and registered callbacks.
+   * Should be called when the controller is no longer needed to prevent memory leaks.
+   */
+  dispose = () => {
+    for (const e of this.#i)
+      try {
+        e();
+      } catch (t) {
+        console.error("Error in dispose callback:", t);
+      }
+    this.#i.length = 0;
+  };
+  /**
+   * Sets the disabled state for this field.
+   *
+   * @param disabled - Whether the field should be disabled
+   */
+  setDisabled = (e) => {
+    this.#e.disabled.set(e);
+  };
+  /**
+   * Disables this field.
+   */
+  disable = () => this.setDisabled(!0);
+  /**
+   * Enables this field.
+   */
+  enable = () => this.setDisabled(!1);
+  /**
+   * Marks this field as touched (user has interacted with it).
+   */
+  markTouched = () => {
+    this.#e.touched.set(!0);
+  };
+  /**
+   * Resets the touched state to false.
+   */
+  resetTouched = () => {
+    this.#e.touched.set(!1);
+  };
+  /**
+   * Marks the current value as the new baseline for dirty tracking.
+   */
+  markPristine = () => {
+    this.#t.set(this.signal.value);
+  };
+  /**
+   * Resets the field value to the baseline value.
+   */
+  reset = () => {
+    this.change(this.#t.value);
+  };
+  /**
+   * Casts this controller to an ArrayController for managing array values.
+   *
+   * @param equals - Equality function for array comparison (defaults to strictEqual)
+   * @returns An ArrayController instance
+   */
+  array = (e = b) => new $(
+    this.path,
+    this.change,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.signal,
+    this.status,
+    this.parent,
+    e
+  );
+  /**
+   * Casts this controller to an ObjectController for managing object values with field access.
+   *
+   * @param equals - Equality function for object comparison (defaults to strictEqual)
+   * @returns An ObjectController instance
+   */
+  object = (e = b) => new N(
+    this.path,
+    this.change,
+    this.signal,
+    this.status,
+    this.parent,
+    e
+  );
+  /**
+   * Creates a transformed controller that maps values bidirectionally.
+   * Useful for converting between internal and display representations.
+   *
+   * @template Out - The transformed value type
+   * @param transform - Function to convert from T to Out
+   * @param untransform - Function to convert from Out back to T
+   * @param subpath - Optional path segments to append
+   * @param equals - Equality function for the transformed type
+   * @returns A new Controller instance managing the transformed value
+   *
+   * @example
+   * ```typescript
+   * // Transform number to string for text input
+   * const stringController = numberController.transform(
+   *   (n) => n.toString(),
+   *   (s) => parseFloat(s) || 0
+   * )
+   * ```
+   */
+  transform = (e, t, s = [], n = b) => new g(
+    [...this.path, ...s],
+    (l) => this.change(t(l)),
+    this.signal.map(e, n),
+    this.status.map(C(s)),
+    this.parent,
+    n
+  );
+  /**
+   * Creates a transformed controller with async bidirectional mapping.
+   * Useful for async operations like fetching related data or formatting.
+   *
+   * @template Out - The transformed value type
+   * @param transform - Async function to convert from T to Out
+   * @param untransform - Async function to convert from Out back to T
+   * @param alt - Fallback value while async transform is pending
+   * @param subpath - Optional path segments to append
+   * @param equals - Equality function for the transformed type
+   * @returns A new Controller instance managing the async-transformed value
+   */
+  asyncTransform = (e, t, s, n = [], l = b) => new g(
+    [...this.path, ...n],
+    (o) => {
+      t(o).then((a) => this.change(a));
+    },
+    this.signal.mapAsync(e, s, void 0, l),
+    this.status.map(C(n)),
+    this.parent,
+    l
+  );
+}
+class N extends g {
+  #e = /* @__PURE__ */ new Map();
+  #s = /* @__PURE__ */ new Map();
+  #t = /* @__PURE__ */ new Map();
+  #i = p(!1);
+  /** Reactive signal indicating whether this field or any child field is touched. */
+  touchedDeep = this.#i;
+  #a = /* @__PURE__ */ new Map();
+  #n = /* @__PURE__ */ new Map();
+  #o = p(!1);
+  /** Reactive signal indicating whether this field or any child field is dirty. */
+  dirtyDeep = this.#o;
+  #h;
+  #c;
+  #l = () => {
+    let e = !1;
+    for (const t of this.#s.values())
+      if (t) {
+        e = !0;
+        break;
+      }
+    this.#i.set(this.touched.value || e);
+  };
+  constructor(e, t, s, n, l, o) {
+    super(
+      e,
+      t,
+      s.map((r) => r ?? {}, o),
+      n,
+      l,
+      o
+    ), this.#h = this.touched.on(() => {
+      this.#l();
+    }), this.#c = this.dirty.on(() => {
+      this.#r();
+    });
+    const a = this.signal.on(() => this.#r());
+    this.onDispose(() => {
+      for (const r of this.#e.values())
+        r.dispose();
+      this.#e.clear();
+      for (const r of this.#t.values()) r();
+      this.#t.clear(), this.#s.clear(), this.#i.dispose();
+      for (const r of this.#n.values()) r();
+      this.#n.clear(), this.#a.clear(), this.#o.dispose(), this.#h(), this.#c(), a();
+    });
+  }
+  /**
+   * Gets or creates a controller for a specific field in the object.
+   * Controllers are cached and reused for the same field name.
+   *
+   * @template K - The field key type
+   * @param field - The field name to access
+   * @returns A Controller instance for the specified field
+   *
+   * @example
+   * ```typescript
+   * const emailController = userController.field('email')
+   * const nameController = userController.field('name')
+   * ```
+   */
+  field = (e) => {
+    if (this.#e.has(e))
+      return this.#e.get(e);
+    const t = async (o) => {
+      this.change({
+        ...this.signal.value,
+        [e]: o
+      });
+    }, s = new g(
+      [...this.path, e],
+      t,
+      this.signal.map((o) => o[e]),
+      this.status.map(C([e])),
+      {
+        disabled: this.disabled,
+        // propagate validationMode to children if present
+        validationMode: this.parent.validationMode
+      }
+    );
+    this.#e.set(e, s);
+    const n = s.touched.on((o) => {
+      this.#s.set(e, o), this.#l();
+    });
+    this.#t.set(e, n);
+    const l = s.dirty.on((o) => {
+      this.#a.set(e, o), this.#r();
+    });
+    return this.#n.set(e, l), s;
+  };
+  /**
+   * Marks this field and all child fields as touched recursively.
+   * Useful for showing all validation errors when a form is submitted.
+   */
+  markAllTouched = () => {
+    this.markTouched();
+    const e = this.signal.value;
+    for (const t of Object.keys(e))
+      this.field(t).markTouched();
+    for (const t of this.#e.values())
+      t.markTouched();
+  };
+  /**
+   * Marks this field and all child fields as pristine (resets baseline) recursively.
+   */
+  markAllPristine = () => {
+    this.markPristine();
+    const e = this.signal.value;
+    for (const t of Object.keys(e))
+      this.field(t).markPristine?.();
+    for (const t of this.#e.values())
+      t.markPristine?.();
+  };
+  #r = () => {
+    let e = !1;
+    for (const t of this.#a.values())
+      if (t) {
+        e = !0;
+        break;
+      }
+    this.#o.set(this.dirty.value || e);
+  };
+}
+class $ extends g {
+  #e = new Array();
+  /** Reactive signal containing the current array length. */
+  length;
+  #s = /* @__PURE__ */ new Map();
+  #t = /* @__PURE__ */ new Map();
+  #i = p(!1);
+  /** Reactive signal indicating whether this array or any item is touched. */
+  touchedDeep = this.#i;
+  #a = /* @__PURE__ */ new Map();
+  #n = /* @__PURE__ */ new Map();
+  #o = p(!1);
+  /** Reactive signal indicating whether this array or any item is dirty. */
+  dirtyDeep = this.#o;
+  #h;
+  #c;
+  #l = () => {
+    let e = !1;
+    for (const t of this.#s.values())
+      if (t) {
+        e = !0;
+        break;
+      }
+    this.#i.set(this.touched.value || e);
+  };
+  constructor(e, t, s, n, l, o) {
+    const a = s.map((h) => h ?? [], o);
+    super(e, t, a, n, l, o);
+    const r = a.on((h) => {
+      const u = this.#e.length - h.length;
+      u > 0 && (this.#e.splice(h.length, u).forEach((y, v) => {
+        const f = h.length + v;
+        y.dispose(), this.#t.get(f)?.(), this.#t.delete(f), this.#s.delete(f), this.#n.get(f)?.(), this.#n.delete(f), this.#a.delete(f);
+      }), this.#l(), this.#r());
+    });
+    this.length = a.map((h) => h.length), this.#h = this.touched.on(() => {
+      this.#l();
+    }), this.#c = this.dirty.on(() => {
+      this.#r();
+    });
+    const d = this.signal.on(() => this.#r());
+    this.onDispose(() => {
+      for (const h of this.#e)
+        h.dispose();
+      this.length.dispose(), this.#e.length = 0, r(), a.dispose();
+      for (const h of this.#t.values()) h();
+      this.#t.clear(), this.#s.clear(), this.#i.dispose();
+      for (const h of this.#n.values()) h();
+      this.#n.clear(), this.#a.clear(), this.#o.dispose(), this.#h(), this.#c(), d();
+    });
+  }
+  /**
+   * Gets or creates a controller for a specific array item by index.
+   * Controllers are cached and reused for the same index.
+   *
+   * @param index - The zero-based index of the item
+   * @returns A Controller instance for the specified item
+   *
+   * @example
+   * ```typescript
+   * const firstTaskController = tasksController.item(0)
+   * const secondTaskController = tasksController.item(1)
+   * ```
+   */
+  item = (e) => {
+    if (this.#e[e])
+      return this.#e[e];
+    const t = async (o) => {
+      const a = this.signal.value.slice();
+      a[e] = o, this.change(a);
+    }, s = new g(
+      [...this.path, e],
+      t,
+      this.signal.map((o) => o[e]),
+      this.status.map(C([e])),
+      {
+        disabled: this.disabled,
+        validationMode: this.parent.validationMode
+      }
+    );
+    this.#e[e] = s;
+    const n = s.touched.on((o) => {
+      this.#s.set(e, o), this.#l();
+    });
+    this.#t.set(e, n);
+    const l = s.dirty.on((o) => {
+      this.#a.set(e, o), this.#r();
+    });
+    return this.#n.set(e, l), s;
+  };
+  /**
+   * Appends one or more items to the end of the array.
+   *
+   * @param value - Items to append
+   */
+  push = (...e) => {
+    this.change([...this.signal.value, ...e]);
+  };
+  /**
+   * Removes the last item from the array.
+   */
+  pop = () => {
+    this.splice(this.signal.value.length - 1, 1);
+  };
+  /**
+   * Removes the first item from the array.
+   */
+  shift = () => {
+    this.splice(0, 1);
+  };
+  /**
+   * Inserts one or more items at the beginning of the array.
+   *
+   * @param value - Items to prepend
+   */
+  unshift = (...e) => {
+    this.change([...e, ...this.signal.value]);
+  };
+  /**
+   * Removes the item at the specified index.
+   *
+   * @param index - Zero-based index of the item to remove
+   */
+  removeAt = (e) => {
+    this.splice(e, 1);
+  };
+  /**
+   * Removes items from the array starting at the specified index.
+   *
+   * @param start - Zero-based index to start removing items
+   * @param deleteCount - Number of items to remove (optional)
+   */
+  splice = (e, t) => {
+    const s = this.signal.value.slice();
+    s.splice(e, t), this.change(s);
+  };
+  /**
+   * Moves one or more items from one index to another within the array.
+   *
+   * @param from - Source index to move from
+   * @param to - Destination index to move to
+   * @param length - Number of items to move (defaults to 1)
+   *
+   * @example
+   * ```typescript
+   * controller.move(0, 2) // Move first item to third position
+   * controller.move(2, 0, 2) // Move items at index 2-3 to the beginning
+   * ```
+   */
+  move = (e, t, s = 1) => {
+    if (s < 1 || e === t) return;
+    const n = this.signal.value.slice(), l = n.splice(e, s);
+    n.splice(t, 0, ...l), this.change(n);
+  };
+  /**
+   * Marks this array and all item controllers as touched recursively.
+   * Useful for showing all validation errors when a form is submitted.
+   */
+  markAllTouched = () => {
+    this.markTouched();
+    const e = this.signal.value.length;
+    for (let t = 0; t < e; t++)
+      this.item(t).markTouched();
+  };
+  /**
+   * Marks this array and all item controllers as pristine (resets baseline) recursively.
+   */
+  markAllPristine = () => {
+    this.markPristine();
+    const e = this.signal.value.length;
+    for (let t = 0; t < e; t++)
+      this.item(t).markPristine?.();
+  };
+  #r = () => {
+    let e = !1;
+    for (const t of this.#a.values())
+      if (t) {
+        e = !0;
+        break;
+      }
+    this.#o.set(this.dirty.value || e);
+  };
+}
+function F(i) {
+  function e(t) {
+    return typeof t == "number" ? t : t.toString();
+  }
+  return i.map(
+    (t) => typeof t == "object" && t.key != null ? e(t.key) : e(t)
+  );
+}
+function z(i) {
+  const e = i.filter((n) => n.path == null || n.path.length === 0).map((n) => n.message), t = i.filter((n) => n.path != null && n.path.length > 0).reduce((n, l) => {
+    const o = F(l.path), a = o.pop();
+    let r = n;
+    for (const d of o)
+      r.dependencies == null && (r.dependencies = {}), r.dependencies[d] == null && (r.dependencies[d] = {}), r = r.dependencies[d];
+    return r.dependencies == null && (r.dependencies = {}), r.dependencies[a] = { message: l.message }, n;
+  }, {}), s = e.join(`
+`);
+  return {
+    ...t,
+    message: s != "" ? s : void 0
+  };
+}
+function R({
+  initialValue: i,
+  onChange: e,
+  validate: t,
+  equals: s,
+  validationMode: n,
+  validateDebounceMs: l
+}) {
+  const o = j.deriveProp(i), a = p(c.valid), r = p(!1), d = p(n ?? "onTouched"), h = (m) => {
+    a.set(m);
+  };
+  let u;
+  const y = async (m) => {
+    if (t != null) {
+      const k = await t(m);
+      h(k);
+    }
+  }, v = async (m) => {
+    o.set(m), e?.(m);
+    const k = d.value;
+    if (t != null) {
+      if (k === "onSubmit")
+        return;
+      const V = l ?? 0;
+      V > 0 ? (u && clearTimeout(u), u = setTimeout(() => {
+        y(m);
+      }, V)) : await y(m);
+    }
+  }, f = new g(
+    [],
+    v,
+    o,
+    a,
+    {
+      disabled: r,
+      validationMode: d
+    },
+    s ?? b
+  );
+  return f.onDispose(() => {
+    r.dispose(), o.dispose(), a.dispose(), d.dispose(), u && clearTimeout(u);
+  }), { controller: f, setStatus: h };
+}
+function S(i) {
+  return M(T.disabled(i.disabled), T.name(i.name));
+}
+function L(i, {
+  triggerOn: e = "change"
+} = {}) {
+  return M(
+    S(i),
+    T.value(i.signal),
+    (e === "input" ? w.input : w.change)(P(i.change))
+  );
+}
+function Q(i, {
+  triggerOn: e = "change"
+} = {}) {
+  return M(
+    S(i),
+    T.valueAsNumber(i.signal),
+    (e === "input" ? w.input : w.change)(
+      O(i.change)
+    )
+  );
+}
+function E(i) {
+  return i.issues != null ? c.invalid(z(i.issues)) : c.valid;
+}
+async function U({
+  task: i,
+  errorMessage: e,
+  errorPath: t = ["root"],
+  validation: s
+}) {
+  try {
+    const n = await i();
+    return s != null ? s(n) : c.valid;
+  } catch (n) {
+    const l = e ?? (n instanceof Error ? n.message : "Operation failed");
+    return t.length === 1 && t[0] === "root" ? c.invalid({
+      message: l
+    }) : c.invalid({
+      dependencies: A(t, l)
+    });
+  }
+}
+function A(i, e) {
+  if (i.length === 1)
+    return {
+      [i[0]]: { message: e }
+    };
+  const [t, ...s] = i;
+  return {
+    [t]: {
+      dependencies: A(s, e)
+    }
+  };
+}
+function W({
+  initialValue: i = {},
+  schema: e,
+  onSubmit: t = async () => c.valid,
+  validationMode: s,
+  validateDebounceMs: n
+}) {
+  const { controller: l, setStatus: o } = R({
+    initialValue: i,
+    validationMode: s ?? "onTouched",
+    validateDebounceMs: n,
+    validate: (s ?? "onTouched") === "onSubmit" || e == null ? void 0 : async (h) => E(
+      await e["~standard"].validate(h)
+    )
+  }), a = p(!1), r = l.object();
+  return r.onDispose(() => a.dispose()), {
+    controller: r,
+    setStatus: o,
+    submit: async (h) => {
+      if (a.set(!0), h?.preventDefault(), r.markAllTouched(), e != null) {
+        const y = r.signal.value, v = E(
+          await e["~standard"].validate(y)
+        );
+        if (o(v), v.type === "invalid") {
+          a.set(!1);
+          return;
+        }
+      }
+      const u = await t(r.signal.value);
+      a.set(!1), u.type === "invalid" && o(u);
+    },
+    submitting: a
+  };
+}
+export {
+  $ as A,
+  K as C,
+  N as O,
+  g as a,
+  R as b,
+  S as c,
+  Q as d,
+  L as e,
+  z as f,
+  F as g,
+  I as h,
+  C as m,
+  J as p,
+  E as s,
+  U as t,
+  W as u,
+  H as w
+};