@tachui/forms 0.7.0-alpha1 → 0.8.0-alpha

package/dist/Select-yZyKooXk.js

@@ -0,0 +1,945 @@
+import { createSignal as M, createEffect as N, h as n, text as s, useLifecycle as te, setupOutsideClickDetection as re } from "@tachui/core";
+import { a as T } from "./index-D3WfkqVv.js";
+const Q = (p) => {
+  const {
+    name: e,
+    label: f,
+    disabled: o = !1,
+    required: u = !1,
+    checked: v,
+    defaultChecked: m = !1,
+    indeterminate: w = !1,
+    validation: q,
+    onChange: V,
+    onBlur: I,
+    onFocus: D,
+    error: B,
+    helperText: C,
+    ...b
+  } = p, h = p._formContext, t = T(
+    e,
+    v ?? m,
+    q
+  );
+  h && h.register(e, q);
+  const [c, k] = M(!1);
+  v !== void 0 && N(() => {
+    t.value() !== v && t.setValue(v);
+  });
+  const S = (x) => {
+    const $ = x.target.checked;
+    t.setValue($), h && h.setValue(e, $), V && V(e, $, t);
+  }, r = (x) => {
+    k(!0), t.onFocus(), D && D(e, t.value());
+  }, g = (x) => {
+    k(!1), t.onBlur(), I && I(e, t.value());
+  }, l = B || t.error() || h?.getError(e), i = (x) => {
+    if (x.key === " " || x.key === "Enter") {
+      x.preventDefault();
+      const E = x.target;
+      E.checked = !E.checked, S(x);
+    }
+  };
+  return {
+    type: "component",
+    id: b.id || `checkbox-${e}`,
+    render: () => n(
+      "div",
+      {
+        ...b,
+        class: `tachui-checkbox ${b.class || ""}`.trim(),
+        "data-tachui-checkbox-container": !0,
+        "data-field-state": l ? "error" : t.validating() ? "validating" : "valid",
+        "data-checked": t.value(),
+        "data-indeterminate": w,
+        "data-disabled": o
+      },
+      // Checkbox input and label wrapper
+      n(
+        "label",
+        {
+          "data-tachui-checkbox-label": !0,
+          "data-focused": c(),
+          "data-disabled": o
+        },
+        // Hidden native checkbox for accessibility
+        n("input", {
+          type: "checkbox",
+          id: b.id || e,
+          name: e,
+          checked: t.value(),
+          disabled: o,
+          required: u,
+          onchange: S,
+          onfocus: r,
+          onblur: g,
+          onkeydown: i,
+          "aria-invalid": !!l,
+          "aria-describedby": [
+            l ? `${e}-error` : null,
+            C ? `${e}-helper` : null
+          ].filter(Boolean).join(" ") || void 0,
+          "data-tachui-checkbox-input": !0,
+          style: {
+            position: "absolute",
+            opacity: "0",
+            width: "1px",
+            height: "1px",
+            margin: "-1px",
+            padding: "0",
+            border: "0",
+            clip: "rect(0,0,0,0)"
+          }
+        }),
+        // Custom checkbox visual
+        n(
+          "div",
+          {
+            "data-tachui-checkbox-visual": !0,
+            "data-checked": t.value(),
+            "data-indeterminate": w,
+            "data-focused": c(),
+            "data-disabled": o,
+            "data-error": !!l,
+            "aria-hidden": "true",
+            role: "presentation"
+          },
+          ...t.value() || w ? [
+            n(
+              "div",
+              {
+                "data-tachui-checkbox-indicator": !0,
+                "data-type": w ? "indeterminate" : "checked"
+              },
+              s(w ? "−" : "✓")
+            )
+          ] : []
+        ),
+        ...f ? [
+          n(
+            "span",
+            {
+              "data-tachui-checkbox-text": !0,
+              "data-disabled": o
+            },
+            s(f),
+            ...u ? [
+              n(
+                "span",
+                {
+                  "aria-label": "required",
+                  "data-required-indicator": !0
+                },
+                s(" *")
+              )
+            ] : []
+          )
+        ] : []
+      ),
+      ...l ? [
+        n(
+          "div",
+          {
+            id: `${e}-error`,
+            role: "alert",
+            "aria-live": "polite",
+            "data-tachui-error": !0
+          },
+          s(l)
+        )
+      ] : [],
+      ...C && !l ? [
+        n(
+          "div",
+          {
+            id: `${e}-helper`,
+            "data-tachui-helper": !0
+          },
+          s(C)
+        )
+      ] : [],
+      ...t.validating() ? [
+        n(
+          "div",
+          {
+            "data-tachui-validation-spinner": !0,
+            "aria-label": "Validating..."
+          },
+          s("⏳")
+        )
+      ] : []
+    ),
+    props: p,
+    cleanup: [
+      () => {
+        h && h.unregister(e);
+      }
+    ]
+  };
+}, de = (p) => {
+  const { size: e = "medium", ...f } = p, o = {
+    ...f,
+    class: `tachui-switch tachui-switch-${e} ${f.class || ""}`.trim()
+  }, u = Q(o);
+  return {
+    ...u,
+    render: () => {
+      const v = u.render();
+      return Array.isArray(v) ? v.map((m) => ({
+        ...m,
+        props: {
+          ...m.props,
+          "data-tachui-switch": !0,
+          "data-switch-size": e
+        }
+      })) : {
+        ...v,
+        props: {
+          ...v.props,
+          "data-tachui-switch": !0,
+          "data-switch-size": e
+        }
+      };
+    }
+  };
+}, oe = (p) => {
+  const {
+    name: e,
+    label: f,
+    options: o,
+    value: u,
+    defaultValue: v = [],
+    onChange: m,
+    validation: w,
+    error: q,
+    helperText: V,
+    disabled: I = !1,
+    required: D = !1,
+    direction: B = "vertical",
+    ...C
+  } = p, b = T(e, u ?? v, w), h = (c, k) => {
+    const S = b.value() || [];
+    let r;
+    k ? r = [...S, c] : r = S.filter((g) => g !== c), b.setValue(r), m && m(e, r, c);
+  };
+  return {
+    type: "component",
+    id: C.id || `checkbox-group-${e}`,
+    render: () => n(
+      "fieldset",
+      {
+        ...C,
+        "data-tachui-checkbox-group": !0,
+        "data-direction": B,
+        "data-disabled": I
+      },
+      ...f ? [
+        n(
+          "legend",
+          {
+            "data-tachui-group-label": !0
+          },
+          s(f),
+          ...D ? [
+            n(
+              "span",
+              {
+                "aria-label": "required",
+                "data-required-indicator": !0
+              },
+              s(" *")
+            )
+          ] : []
+        )
+      ] : [],
+      // Checkbox options
+      n(
+        "div",
+        {
+          "data-tachui-checkbox-options": !0,
+          "data-direction": B
+        },
+        ...o.flatMap((c, k) => {
+          const r = Q({
+            name: `${e}-${k}`,
+            label: c.label,
+            checked: (b.value() || []).includes(c.value),
+            disabled: I || c.disabled,
+            onChange: (g, l) => h(c.value, l)
+          }).render();
+          return Array.isArray(r) ? r : [r];
+        })
+      ),
+      ...q ? [
+        n(
+          "div",
+          {
+            id: `${e}-error`,
+            role: "alert",
+            "aria-live": "polite",
+            "data-tachui-error": !0
+          },
+          s(q)
+        )
+      ] : [],
+      ...V && !q ? [
+        n(
+          "div",
+          {
+            id: `${e}-helper`,
+            "data-tachui-helper": !0
+          },
+          s(V)
+        )
+      ] : []
+    ),
+    props: p
+  };
+}, le = (p) => {
+  const {
+    name: e,
+    value: f,
+    label: o,
+    checked: u,
+    groupName: v,
+    disabled: m = !1,
+    required: w = !1,
+    validation: q,
+    onChange: V,
+    onBlur: I,
+    onFocus: D,
+    error: B,
+    helperText: C,
+    ...b
+  } = p, h = p._formContext, t = v || e, c = T(
+    t,
+    u ? f : void 0,
+    q
+  );
+  h && h.register(t, q);
+  const [k, S] = M(!1), r = () => c.value() === f, g = ($) => {
+    $.target.checked && (c.setValue(f), h && h.setValue(t, f), V && V(t, f, c));
+  }, l = ($) => {
+    S(!0), c.onFocus(), D && D(t, c.value());
+  }, i = ($) => {
+    S(!1), c.onBlur(), I && I(t, c.value());
+  }, y = B || c.error() || h?.getError(t), x = ($) => {
+    ($.key === " " || $.key === "Enter") && ($.preventDefault(), g($));
+  };
+  return {
+    type: "component",
+    id: b.id || `radio-${t}-${f}`,
+    render: () => n(
+      "div",
+      {
+        ...b,
+        class: `tachui-radio ${b.class || ""}`.trim(),
+        "data-tachui-radio-container": !0,
+        "data-field-state": y ? "error" : c.validating() ? "validating" : "valid",
+        "data-checked": r(),
+        "data-disabled": m
+      },
+      // Radio input and label wrapper
+      n(
+        "label",
+        {
+          "data-tachui-radio-label": !0,
+          "data-focused": k(),
+          "data-disabled": m
+        },
+        // Hidden native radio for accessibility
+        n("input", {
+          type: "radio",
+          id: b.id || `${t}-${f}`,
+          name: t,
+          value: f,
+          checked: r(),
+          disabled: m,
+          required: w,
+          onchange: g,
+          onfocus: l,
+          onblur: i,
+          onkeydown: x,
+          "aria-invalid": !!y,
+          "aria-describedby": [
+            y ? `${t}-error` : null,
+            C ? `${t}-helper` : null
+          ].filter(Boolean).join(" ") || void 0,
+          "data-tachui-radio-input": !0,
+          style: {
+            position: "absolute",
+            opacity: "0",
+            width: "1px",
+            height: "1px",
+            margin: "-1px",
+            padding: "0",
+            border: "0",
+            clip: "rect(0,0,0,0)"
+          }
+        }),
+        // Custom radio visual
+        n(
+          "div",
+          {
+            "data-tachui-radio-visual": !0,
+            "data-checked": r(),
+            "data-focused": k(),
+            "data-disabled": m,
+            "data-error": !!y,
+            "aria-hidden": "true",
+            role: "presentation"
+          },
+          ...r() ? [
+            n("div", {
+              "data-tachui-radio-dot": !0
+            })
+          ] : []
+        ),
+        ...o ? [
+          n(
+            "span",
+            {
+              "data-tachui-radio-text": !0,
+              "data-disabled": m
+            },
+            s(o),
+            ...w ? [
+              n(
+                "span",
+                {
+                  "aria-label": "required",
+                  "data-required-indicator": !0
+                },
+                s(" *")
+              )
+            ] : []
+          )
+        ] : []
+      )
+    ),
+    props: p,
+    cleanup: [
+      () => {
+      }
+    ]
+  };
+}, ce = (p) => {
+  const {
+    name: e,
+    label: f,
+    options: o,
+    value: u,
+    defaultValue: v,
+    onChange: m,
+    validation: w,
+    error: q,
+    helperText: V,
+    disabled: I = !1,
+    required: D = !1,
+    direction: B = "vertical",
+    ...C
+  } = p, b = p._formContext, h = T(e, u ?? v, w);
+  b && b.register(e, w), u !== void 0 && N(() => {
+    h.value() !== u && h.setValue(u);
+  });
+  const t = (r) => {
+    h.setValue(r), b && b.setValue(e, r), m && m(e, r);
+  }, c = (r) => {
+    const g = o.findIndex((i) => i.value === h.value());
+    let l = g;
+    switch (r.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        r.preventDefault(), l = (g + 1) % o.length;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        r.preventDefault(), l = g === 0 ? o.length - 1 : g - 1;
+        break;
+      case "Home":
+        r.preventDefault(), l = 0;
+        break;
+      case "End":
+        r.preventDefault(), l = o.length - 1;
+        break;
+      default:
+        return;
+    }
+    for (; o[l]?.disabled && (r.key === "ArrowDown" || r.key === "ArrowRight" ? l = (l + 1) % o.length : l = l === 0 ? o.length - 1 : l - 1, l !== g); )
+      ;
+    o[l]?.disabled || (t(o[l].value), setTimeout(() => {
+      const i = document.querySelector(
+        `input[name="${e}"][value="${o[l].value}"]`
+      );
+      i && i.focus();
+    }, 0));
+  }, k = q || h.error();
+  return {
+    type: "component",
+    id: C.id || `radio-group-${e}`,
+    render: () => n(
+      "fieldset",
+      {
+        ...C,
+        "data-tachui-radio-group": !0,
+        "data-direction": B,
+        "data-disabled": I,
+        role: "radiogroup",
+        "aria-invalid": !!k,
+        "aria-describedby": [
+          k ? `${e}-error` : null,
+          V ? `${e}-helper` : null
+        ].filter(Boolean).join(" ") || void 0,
+        onkeydown: c
+      },
+      ...f ? [
+        n(
+          "legend",
+          {
+            "data-tachui-group-label": !0
+          },
+          s(f),
+          ...D ? [
+            n(
+              "span",
+              {
+                "aria-label": "required",
+                "data-required-indicator": !0
+              },
+              s(" *")
+            )
+          ] : []
+        )
+      ] : [],
+      // Radio options
+      n(
+        "div",
+        {
+          "data-tachui-radio-options": !0,
+          "data-direction": B
+        },
+        ...o.flatMap((r, g) => {
+          const i = le({
+            name: `${e}-${g}`,
+            groupName: e,
+            value: r.value,
+            label: r.label,
+            checked: h.value() === r.value,
+            disabled: I || r.disabled,
+            required: D,
+            onChange: () => t(r.value),
+            _formContext: b
+          }).render();
+          return Array.isArray(i) ? i : [i];
+        })
+      ),
+      ...k ? [
+        n(
+          "div",
+          {
+            id: `${e}-error`,
+            role: "alert",
+            "aria-live": "polite",
+            "data-tachui-error": !0
+          },
+          s(k)
+        )
+      ] : [],
+      ...V && !k ? [
+        n(
+          "div",
+          {
+            id: `${e}-helper`,
+            "data-tachui-helper": !0
+          },
+          s(V)
+        )
+      ] : []
+    ),
+    props: p,
+    cleanup: [
+      () => {
+        b && b.unregister(e);
+      }
+    ]
+  };
+}, U = (p) => {
+  const {
+    name: e,
+    label: f,
+    options: o,
+    multiple: u = !1,
+    searchable: v = !1,
+    clearable: m = !1,
+    placeholder: w = u ? "Select options..." : "Select an option...",
+    noOptionsMessage: q = "No options available",
+    loadingMessage: V = "Loading...",
+    maxMenuHeight: I = 200,
+    disabled: D = !1,
+    required: B = !1,
+    value: C,
+    defaultValue: b,
+    validation: h,
+    onChange: t,
+    onBlur: c,
+    onFocus: k,
+    error: S,
+    helperText: r,
+    ...g
+  } = p, l = p._formContext, i = T(e, C ?? b, h);
+  l && l.register(e, h);
+  const [y, x] = M(!1), [E, $] = M(!1), [R, L] = M(""), [O, _] = M(-1), [J] = M(!1);
+  C !== void 0 && N(() => {
+    i.value() !== C && i.setValue(C);
+  });
+  const K = () => {
+    if (!v || !R())
+      return o;
+    const a = R().toLowerCase();
+    return o.filter(
+      (d) => d.label.toLowerCase().includes(a) || String(d.value).toLowerCase().includes(a)
+    );
+  }, W = () => {
+    const a = i.value();
+    if (u)
+      return !a || !Array.isArray(a) || a.length === 0 ? w : o.filter((A) => a.includes(A.value)).map((A) => A.label).join(", ");
+    {
+      if (a == null || a === "")
+        return w;
+      const d = o.find((A) => A.value === a);
+      return d ? d.label : String(a);
+    }
+  }, z = (a) => {
+    if (a.disabled) return;
+    let d;
+    if (u) {
+      const A = i.value() || [];
+      A.includes(a.value) ? d = A.filter((ae) => ae !== a.value) : d = [...A, a.value];
+    } else
+      d = a.value, x(!1), L("");
+    i.setValue(d), l && l.setValue(e, d), t && t(e, d, i);
+  }, j = () => {
+    if (D) return;
+    const a = !y();
+    x(a), a && (_(-1), v && L(""));
+  }, X = (a) => {
+    const d = a.target;
+    L(d.value), _(-1);
+  }, Y = (a) => {
+    const d = K();
+    switch (a.key) {
+      case "Enter":
+        a.preventDefault(), y() ? O() >= 0 && d[O()] && z(d[O()]) : j();
+        break;
+      case " ":
+        (!v || !y()) && (a.preventDefault(), j());
+        break;
+      case "Escape":
+        a.preventDefault(), x(!1), L("");
+        break;
+      case "ArrowDown":
+        if (a.preventDefault(), !y())
+          j();
+        else {
+          const A = Math.min(
+            O() + 1,
+            d.length - 1
+          );
+          _(A);
+        }
+        break;
+      case "ArrowUp":
+        if (a.preventDefault(), y()) {
+          const A = Math.max(O() - 1, -1);
+          _(A);
+        }
+        break;
+      case "Home":
+        y() && (a.preventDefault(), _(0));
+        break;
+      case "End":
+        y() && (a.preventDefault(), _(d.length - 1));
+        break;
+      case "Backspace":
+        m && !v && i.value() !== null && (a.preventDefault(), G());
+        break;
+    }
+  }, Z = () => {
+    $(!0), i.onFocus(), k && k(e, i.value());
+  }, ee = (a) => {
+    requestAnimationFrame(() => {
+      const d = a.relatedTarget;
+      a.target.closest(
+        "[data-tachui-select-container]"
+      )?.contains(d) || ($(!1), x(!1), i.onBlur(), c && c(e, i.value()));
+    });
+  }, G = () => {
+    const a = u ? [] : null;
+    i.setValue(a), l && l.setValue(e, a), t && t(e, a, i);
+  }, H = (a) => {
+    const d = i.value();
+    return u ? Array.isArray(d) && d.includes(a.value) : d === a.value;
+  }, F = S || i.error() || l?.getError(e), P = {
+    type: "component",
+    id: g.id || `select-${e}`,
+    cleanup: [],
+    render: () => ({
+      type: "element",
+      tag: "div",
+      props: {
+        ...g,
+        class: `tachui-select ${g.class || ""}`.trim(),
+        "data-tachui-select-container": !0,
+        "data-field-state": F ? "error" : i.validating() ? "validating" : "valid",
+        "data-open": y(),
+        "data-disabled": D,
+        "data-multiple": u,
+        "data-searchable": v
+      },
+      children: [
+        // Label
+        ...f ? [
+          n(
+            "label",
+            {
+              for: g.id || e,
+              "data-tachui-label": !0,
+              "data-required": B
+            },
+            s(f),
+            ...B ? [
+              n(
+                "span",
+                {
+                  "aria-label": "required",
+                  "data-required-indicator": !0
+                },
+                s(" *")
+              )
+            ] : []
+          )
+        ] : [],
+        // Select trigger
+        {
+          type: "element",
+          tag: "div",
+          props: {
+            id: g.id || e,
+            tabindex: D ? -1 : 0,
+            role: "combobox",
+            "aria-expanded": y(),
+            "aria-haspopup": "listbox",
+            "aria-invalid": !!F,
+            "aria-describedby": [
+              F ? `${e}-error` : null,
+              r ? `${e}-helper` : null
+            ].filter(Boolean).join(" ") || void 0,
+            onclick: j,
+            onkeydown: Y,
+            onfocus: Z,
+            onblur: ee,
+            "data-tachui-select-trigger": !0,
+            "data-focused": E(),
+            "data-disabled": D,
+            "data-error": !!F
+          },
+          children: [
+            // Display value
+            {
+              type: "element",
+              tag: "div",
+              props: {
+                "data-tachui-select-value": !0,
+                "data-placeholder": !i.value() || u && (!i.value() || i.value().length === 0)
+              },
+              children: [s(W())]
+            },
+            // Actions (clear, dropdown arrow)
+            {
+              type: "element",
+              tag: "div",
+              props: {
+                "data-tachui-select-actions": !0
+              },
+              children: [
+                // Clear button
+                ...m && i.value() && (!u || Array.isArray(i.value()) && i.value().length > 0) ? [
+                  {
+                    type: "element",
+                    tag: "button",
+                    props: {
+                      type: "button",
+                      onclick: (a) => {
+                        a.stopPropagation(), G();
+                      },
+                      "aria-label": "Clear selection",
+                      "data-tachui-select-clear": !0
+                    },
+                    children: [s("×")]
+                  }
+                ] : [],
+                // Dropdown arrow
+                {
+                  type: "element",
+                  tag: "div",
+                  props: {
+                    "data-tachui-select-arrow": !0,
+                    "data-open": y()
+                  },
+                  children: [s("▼")]
+                }
+              ]
+            }
+          ]
+        },
+        // Dropdown menu
+        ...y() ? [
+          {
+            type: "element",
+            tag: "div",
+            props: {
+              "data-tachui-select-dropdown": !0,
+              style: {
+                maxHeight: `${I}px`
+              }
+            },
+            children: [
+              // Search input
+              ...v ? [
+                {
+                  type: "element",
+                  tag: "div",
+                  props: {
+                    "data-tachui-select-search": !0
+                  },
+                  children: [
+                    {
+                      type: "element",
+                      tag: "input",
+                      props: {
+                        type: "text",
+                        placeholder: "Search...",
+                        value: R(),
+                        oninput: X,
+                        "data-tachui-select-search-input": !0
+                      }
+                    }
+                  ]
+                }
+              ] : [],
+              // Options list
+              {
+                type: "element",
+                tag: "div",
+                props: {
+                  role: "listbox",
+                  "aria-multiselectable": u,
+                  "data-tachui-select-options": !0
+                },
+                children: K().length > 0 ? K().map((a, d) => ({
+                  type: "element",
+                  tag: "div",
+                  props: {
+                    role: "option",
+                    "aria-selected": H(a),
+                    "aria-disabled": a.disabled,
+                    onclick: () => z(a),
+                    "data-tachui-select-option": !0,
+                    "data-selected": H(a),
+                    "data-highlighted": O() === d,
+                    "data-disabled": a.disabled,
+                    "data-group": a.group
+                  },
+                  children: [
+                    // Selection indicator for multiple
+                    ...u ? [
+                      {
+                        type: "element",
+                        tag: "div",
+                        props: {
+                          "data-tachui-select-checkbox": !0,
+                          "data-checked": H(a)
+                        },
+                        children: [
+                          s(
+                            H(a) ? "✓" : ""
+                          )
+                        ]
+                      }
+                    ] : [],
+                    // Option label
+                    s(a.label)
+                  ]
+                })) : [
+                  {
+                    type: "element",
+                    tag: "div",
+                    props: {
+                      "data-tachui-select-no-options": !0
+                    },
+                    children: [
+                      s(
+                        J() ? V : q
+                      )
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ] : [],
+        // Error message
+        ...F ? [
+          {
+            type: "element",
+            tag: "div",
+            props: {
+              id: `${e}-error`,
+              role: "alert",
+              "aria-live": "polite",
+              "data-tachui-error": !0
+            },
+            children: [s(F)]
+          }
+        ] : [],
+        // Helper text
+        ...r && !F ? [
+          {
+            type: "element",
+            tag: "div",
+            props: {
+              id: `${e}-helper`,
+              "data-tachui-helper": !0
+            },
+            children: [s(r)]
+          }
+        ] : []
+      ]
+    }),
+    props: p
+  };
+  return P.cleanup || (P.cleanup = []), P.cleanup.push(() => {
+    l && l.unregister(e);
+  }), te(P, {
+    onDOMReady: (a, d) => {
+      d && re(
+        P,
+        () => {
+          y() && (x(!1), $(!1), i.onBlur(), c && c(e, i.value()));
+        },
+        "[data-tachui-select-container]"
+      );
+    }
+  }), P;
+}, se = (p) => U({ ...p, multiple: !0 }), ue = (p) => U({ ...p, searchable: !0 });
+export {
+  Q as C,
+  se as M,
+  le as R,
+  de as S,
+  oe as a,
+  ce as b,
+  ue as c,
+  U as d
+};
+//# sourceMappingURL=Select-yZyKooXk.js.map