@gspa/ui 0.1.3 → 0.2.0

package/dist/components/ReusableForm.js

@@ -0,0 +1,686 @@
+import { useSlots as qe, computed as U, ref as z, watch as re, resolveComponent as ze, createElementBlock as i, openBlock as s, createCommentVNode as w, createElementVNode as k, toDisplayString as _, withModifiers as De, renderSlot as H, Fragment as L, renderList as J, normalizeClass as v, createBlock as x, withCtx as V, createVNode as C, createTextVNode as F } from "vue";
+import Re from "./Slider.js";
+import le from "./DatePicker.js";
+import { _ as je } from "../FormField.vue_vue_type_script_setup_true_lang-DimMUyA-.js";
+import { _ as $ } from "../Input.vue_vue_type_script_setup_true_lang-CpBoY97r.js";
+import Pe from "./Textarea.js";
+import ie from "./Select.js";
+import Le from "./MultiSelect.js";
+import { _ as D } from "../Button.vue_vue_type_script_setup_true_lang-B3TkBTvG.js";
+import G from "./Label.js";
+import ue from "./FileUpload.js";
+import { toast as R } from "../lib/toast.js";
+import { _ as Oe } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const Ye = { class: "w-full p-2" }, Ee = {
+  key: 0,
+  class: "mb-6"
+}, Ie = { class: "text-xl font-semibold ui-text" }, Ne = {
+  key: 0,
+  class: "mt-1 text-sm ui-text-muted"
+}, He = {
+  key: 0,
+  class: "mb-4"
+}, Je = {
+  key: 0,
+  class: "text-base font-semibold ui-text"
+}, Ge = {
+  key: 1,
+  class: "mt-1 text-sm ui-text-muted"
+}, Ke = ["value"], Qe = ["title", "aria-label", "disabled", "onClick"], We = {
+  key: 0,
+  class: "h-4 w-4",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, Xe = {
+  key: 0,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M3 3l18 18M10.6 10.7a2 2 0 002.7 2.7M9.9 4.2A10.7 10.7 0 0112 4c5 0 8.7 4.4 9.6 6.5.2.3.2.7 0 1a15 15 0 01-2.2 3.3M6.2 6.2A15.8 15.8 0 002.4 10.5c-.2.3-.2.7 0 1C3.3 13.6 7 18 12 18c1 0 2-.2 2.9-.5"
+}, Ze = {
+  key: 2,
+  class: "flex w-full items-center gap-2"
+}, fe = { class: "min-w-0 flex-1" }, ea = {
+  key: 3,
+  class: "flex w-full items-center gap-2"
+}, aa = { class: "min-w-0 flex-1" }, ta = {
+  key: 5,
+  class: "flex items-center"
+}, na = {
+  key: 6,
+  class: "flex items-center"
+}, oa = ["id", "aria-checked", "disabled", "onClick"], sa = {
+  key: 7,
+  class: "space-y-2"
+}, ra = {
+  key: 11,
+  class: "space-y-2"
+}, la = { class: "flex items-center gap-4" }, ia = { class: "min-w-12 text-right text-sm font-medium ui-text" }, ua = {
+  key: 0,
+  class: "flex justify-end gap-3 pt-6"
+}, ca = {
+  key: 0,
+  class: "hidden"
+}, ma = {
+  __name: "ReusableForm",
+  props: {
+    title: { type: String, default: "" },
+    description: { type: String, default: "" },
+    entityName: { type: String, default: "Item" },
+    fields: {
+      type: Array,
+      required: !0,
+      validator: (h) => Array.isArray(h) && h.every((B) => B?.name && B?.label && B?.type)
+    },
+    sections: { type: Array, default: () => [] },
+    initialData: { type: Object, default: null },
+    loading: { type: Boolean, default: !1 },
+    customValidation: { type: Function, default: null },
+    crossValidate: { type: Function, default: null },
+    submitLabel: { type: String, default: "Submit" },
+    showReset: { type: Boolean, default: !0 },
+    showCancel: { type: Boolean, default: !0 },
+    showSubmit: { type: Boolean, default: !0 },
+    formType: {
+      type: String,
+      default: "create",
+      validator: (h) => ["create", "edit"].includes(h)
+    }
+  },
+  emits: ["submit", "reset", "cancel", "form-change"],
+  setup(h, { emit: B }) {
+    const g = h, j = B, ce = qe(), c = U(() => g.loading), u = z({}), d = z({}), P = z({}), K = z({}), O = z(!1), me = U(() => Array.isArray(g.sections) && g.sections.length > 0), de = U(() => !!ce.actions), Q = U(() => me.value ? g.sections.map((e, t) => {
+      const r = e?.id || `section-${t + 1}`, n = Array.isArray(e?.fields) ? e.fields : (g.fields || []).filter((a) => a.sectionId === r);
+      return {
+        id: r,
+        title: e?.title || "",
+        description: e?.description || "",
+        icon: e?.icon || "",
+        wrapperClass: e?.wrapperClass || "",
+        gridClass: e?.gridClass || "grid grid-cols-12 gap-4",
+        card: e?.card !== !1,
+        fields: n
+      };
+    }) : [{
+      id: "default",
+      title: "",
+      description: "",
+      icon: "",
+      wrapperClass: "",
+      gridClass: "grid grid-cols-12 gap-4",
+      card: !1,
+      fields: g.fields || []
+    }]), T = U(() => Q.value.flatMap((e) => e.fields || [])), pe = U(() => Object.keys(d.value).length === 0), W = (e) => {
+      try {
+        return JSON.stringify(e ?? {});
+      } catch {
+        return "";
+      }
+    }, Y = (e, t) => {
+      if (!(!e || !t))
+        return t.split(".").reduce((r, n) => r?.[n], e);
+    }, M = (e, t, r) => {
+      const n = t.split("."), a = n.pop(), l = n.reduce((b, y) => ((!b[y] || typeof b[y] != "object") && (b[y] = {}), b[y]), e);
+      l[a] = r;
+    }, E = (e) => e.type === "checkbox" || e.type === "switch" ? !1 : e.type === "number" || e.type === "slider" || e.type === "range" ? e.min ?? 0 : e.type === "file" ? null : e.type === "multifile" || e.type === "multiselect" ? [] : e.type === "radio" && e.options?.[0]?.value || "", X = () => {
+      const e = {};
+      return T.value.forEach((t) => {
+        t.name.includes(".") ? M(e, t.name, E(t)) : e[t.name] = E(t);
+      }), e;
+    }, be = (e) => {
+      const t = {};
+      return T.value.forEach((r) => {
+        const n = r.name.includes(".") ? Y(e, r.name) : e?.[r.name], a = E(r), l = n === void 0 ? a : n;
+        if (r.name.includes(".")) {
+          M(t, r.name, l);
+          return;
+        }
+        r.type === "file" ? t[r.name] = null : r.type === "multifile" || r.type === "multiselect" ? t[r.name] = Array.isArray(l) ? l : [] : t[r.name] = l;
+      }), t;
+    };
+    re(
+      () => g.initialData,
+      (e) => {
+        const t = e ? be(e) : X();
+        W(t) !== W(u.value) && (O.value = !0, u.value = t, queueMicrotask(() => {
+          O.value = !1;
+        }));
+      },
+      { immediate: !0 }
+    ), re(
+      u,
+      (e) => {
+        O.value || j("form-change", e);
+      },
+      { deep: !0 }
+    );
+    const m = (e) => e.includes(".") ? Y(u.value, e) : u.value[e], I = (e) => {
+      const t = d.value?.[e];
+      return t || (e.includes(".") ? Y(d.value, e) : void 0);
+    }, p = (e, t) => {
+      e.includes(".") ? M(u.value, e, t) : u.value[e] = t;
+    }, S = (e) => e?.type === "password", q = (e) => !!P.value[e.name], ye = (e) => S(e) ? q(e) ? "text" : "password" : e.type, ve = (e) => {
+      e?.name && (P.value = {
+        ...P.value,
+        [e.name]: !P.value[e.name]
+      });
+    }, he = () => {
+      if (d.value = {}, T.value.forEach((e) => {
+        const t = m(e.name);
+        if (e.required && !e.disabled && e.type !== "hidden" && (e.type === "checkbox" || e.type === "switch" ? t || (d.value[e.name] = e.errorMessage || `${e.label} is required`) : e.type === "multiselect" || e.type === "multifile" ? (!Array.isArray(t) || t.length === 0) && (d.value[e.name] = e.errorMessage || `${e.label} is required`) : e.type === "number" || e.type === "slider" || e.type === "range" ? t === "" || t === null || t === void 0 ? d.value[e.name] = e.errorMessage || `${e.label} is required` : e.min !== void 0 && Number(t) < e.min ? d.value[e.name] = `${e.label} must be at least ${e.min}` : e.max !== void 0 && Number(t) > e.max && (d.value[e.name] = `${e.label} must be at most ${e.max}`) : e.type === "email" ? !t || !String(t).trim() ? d.value[e.name] = e.errorMessage || `${e.label} is required` : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(t)) || (d.value[e.name] = "Please enter a valid email address") : e.type === "url" ? !t || !String(t).trim() ? d.value[e.name] = e.errorMessage || `${e.label} is required` : /^https?:\/\/.+/.test(String(t)) || (d.value[e.name] = "Please enter a valid URL") : (t == null || typeof t == "string" && !t.trim()) && (d.value[e.name] = e.errorMessage || `${e.label} is required`)), typeof e.validate == "function") {
+          const r = e.validate(t, u.value);
+          r && (d.value[e.name] = r);
+        }
+      }), typeof g.customValidation == "function") {
+        const e = g.customValidation(u.value);
+        e && typeof e == "object" && (d.value = { ...d.value, ...e });
+      }
+      if (typeof g.crossValidate == "function") {
+        const e = g.crossValidate(u.value);
+        e && typeof e == "object" && (d.value = { ...d.value, ...e });
+      }
+      return Object.keys(d.value).length === 0;
+    }, A = (e, t, r = void 0) => typeof e == "function" ? e(u.value, t) : e === void 0 ? r : e, Z = (e) => !!e?.actionButton && e.actionButton.show !== !1, f = (e) => {
+      if (!e?.actionButton) return !0;
+      const t = typeof e.actionButton.disabled == "function" ? e.actionButton.disabled(u.value, e) : e.actionButton.disabled;
+      return !!(c.value || e.disabled || t);
+    }, ee = (e) => e?.actionButton ? typeof e.actionButton.loading == "function" ? e.actionButton.loading(u.value, e) : !!e.actionButton.loading : !1, ae = (e) => {
+      typeof e?.actionButton?.onClick == "function" && e.actionButton.onClick(u.value, e);
+    }, te = (e) => S(e) || !!A(e.trailingIcon, e, null), ge = (e) => S(e) ? q(e) ? "eye-slash" : "eye" : A(e.trailingIcon, e, null), ne = (e) => S(e) ? q(e) ? "Hide password" : "Show password" : A(e.trailingIconTitle, e, "Action"), xe = (e) => S(e) ? q(e) ? "Hide password" : "Show password" : A(e.trailingIconAriaLabel, e, ne(e)), we = (e) => A(e.trailingIconClass, e, "w-4 h-4"), N = (e) => !!(c.value || e.disabled || A(e.trailingIconDisabled, e, !1)), ke = (e) => {
+      if (!N(e)) {
+        if (S(e)) {
+          ve(e);
+          return;
+        }
+        typeof e?.onTrailingIconClick == "function" && e.onTrailingIconClick(u.value, e);
+      }
+    }, oe = async (e, t) => {
+      if (p(e.name, t), typeof e?.onChange == "function")
+        try {
+          await e.onChange(t, u.value);
+        } catch {
+          R.error("An error occurred while processing the change");
+        }
+    }, _e = (e, t) => {
+      if (p(e.name, t), typeof e?.onChange == "function")
+        try {
+          e.onChange(t, u.value);
+        } catch {
+          R.error("An error occurred while processing the change");
+        }
+    }, Ce = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, u.value);
+    }, Ve = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, u.value);
+    }, Fe = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, u.value);
+    }, Se = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, u.value);
+    }, $e = (e) => {
+      const t = new FormData();
+      return Object.keys(e).forEach((r) => {
+        const n = e[r];
+        n != null && (n instanceof File ? t.append(r, n) : Array.isArray(n) ? n.forEach((a, l) => {
+          a instanceof File ? t.append(`${r}[]`, a) : t.append(`${r}[${l}]`, a);
+        }) : typeof n == "object" && !(n instanceof Date) ? Object.keys(n).forEach((a) => {
+          t.append(`${r}[${a}]`, n[a]);
+        }) : t.append(r, n));
+      }), t;
+    }, Ae = () => {
+      const e = {};
+      let t = !1;
+      T.value.forEach((n) => {
+        const a = m(n.name);
+        if (n.type === "number" || n.type === "slider" || n.type === "range") {
+          const b = a === "" || a === null || a === void 0 ? a : Number(a);
+          n.name.includes(".") ? M(e, n.name, b) : e[n.name] = b;
+          return;
+        }
+        if (n.type === "file") {
+          a instanceof File ? (t = !0, e[n.name] = a) : g.formType === "edit" && a && (e[n.name] = a);
+          return;
+        }
+        if (n.type === "multifile") {
+          Array.isArray(a) && a.some((b) => b instanceof File) ? (t = !0, e[n.name] = a) : g.formType === "edit" && Array.isArray(a) && a.length > 0 && (e[n.name] = a);
+          return;
+        }
+        const l = ["text", "textarea", "date", "email", "url", "tel", "search", "time", "datetime-local", "month", "week"].includes(n.type) && typeof a == "string" ? a.trim() : a;
+        n.name.includes(".") ? M(e, n.name, l) : e[n.name] = l;
+      });
+      let r = e;
+      return t && (r = $e(e), g.formType === "edit" && r.append("_method", "PUT")), { formData: r, hasFiles: t };
+    }, se = async () => {
+      if (T.value.some(
+        (r) => r.type !== "multifile" && (K.value[r.name] || []).length > 0
+      ))
+        return R.error("Please wait for all files to finish uploading"), !1;
+      if (!he())
+        return R.error("Please fix the validation errors before submitting"), !1;
+      const t = Ae();
+      return j("submit", {
+        formData: t.formData,
+        formType: g.formType,
+        originalData: g.initialData,
+        hasFiles: t.hasFiles
+      }), !0;
+    }, Ue = async () => {
+      try {
+        await se();
+      } catch {
+        R.error("An error occurred during submission");
+      }
+    }, Be = () => {
+      u.value = X(), d.value = {}, K.value = {}, j("reset");
+    }, Te = () => j("cancel");
+    return (e, t) => {
+      const r = ze("font-awesome-icon");
+      return s(), i("div", Ye, [
+        h.title ? (s(), i("div", Ee, [
+          k("h2", Ie, _(h.title), 1),
+          h.description ? (s(), i("p", Ne, _(h.description), 1)) : w("", !0)
+        ])) : w("", !0),
+        k("form", {
+          class: "space-y-6",
+          onSubmit: De(Ue, ["prevent"])
+        }, [
+          (s(!0), i(L, null, J(Q.value, (n) => (s(), i("div", {
+            key: n.id,
+            class: v(n.wrapperClass || "")
+          }, [
+            k("div", {
+              class: v(n.card ? "ui-surface border ui-border-strong rounded-xl p-4 sm:p-5" : "")
+            }, [
+              H(e.$slots, "section-header", { section: n }, () => [
+                n.title || n.description ? (s(), i("div", He, [
+                  n.title ? (s(), i("h3", Je, _(n.title), 1)) : w("", !0),
+                  n.description ? (s(), i("p", Ge, _(n.description), 1)) : w("", !0)
+                ])) : w("", !0)
+              ], !0),
+              k("div", {
+                class: v(n.gridClass)
+              }, [
+                (s(!0), i(L, null, J(n.fields, (a) => (s(), i("div", {
+                  key: a.name,
+                  class: v(a.wrapperClass || "col-span-12")
+                }, [
+                  a.type === "hidden" ? (s(), i("input", {
+                    key: 0,
+                    value: m(a.name),
+                    type: "hidden"
+                  }, null, 8, Ke)) : (s(), x(je, {
+                    key: 1,
+                    id: `form-${h.entityName}-${a.name}`,
+                    label: a.label,
+                    required: !!a.required,
+                    error: I(a.name),
+                    "error-message": I(a.name),
+                    "help-text": a.helpText,
+                    class: v(a.labelClass || "")
+                  }, {
+                    default: V(({ fieldId: l, hasError: b, ariaDescribedBy: y }) => [
+                      H(e.$slots, `field-${a.name}`, {
+                        field: a,
+                        formData: u.value,
+                        error: I(a.name),
+                        update: (o) => p(a.name, o)
+                      }, () => [
+                        ["text", "number", "password", "color", "email", "tel", "url", "search"].includes(a.type) ? (s(), i("div", {
+                          key: 0,
+                          class: v(["relative", te(a) ? "has-trailing-icon" : ""])
+                        }, [
+                          C($, {
+                            id: l,
+                            "model-value": m(a.name),
+                            type: ye(a),
+                            placeholder: a.placeholder,
+                            disabled: c.value || a.disabled,
+                            readonly: a.readonly || a.disabled,
+                            class: v([b ? "border-(--ui-danger)" : "ui-border-strong", a.inputClass || ""]),
+                            "aria-describedby": y,
+                            "onUpdate:modelValue": (o) => p(a.name, o)
+                          }, null, 8, ["id", "model-value", "type", "placeholder", "disabled", "readonly", "class", "aria-describedby", "onUpdate:modelValue"]),
+                          te(a) ? (s(), i("button", {
+                            key: 0,
+                            type: "button",
+                            class: v(["absolute right-3 top-1/2 -translate-y-1/2 ui-text hover:text-(--ui-text) transition-colors", N(a) ? "opacity-50 cursor-not-allowed" : ""]),
+                            title: ne(a),
+                            "aria-label": xe(a),
+                            disabled: N(a),
+                            onClick: (o) => ke(a)
+                          }, [
+                            S(a) ? (s(), i("svg", We, [
+                              q(a) ? (s(), i("path", Xe)) : (s(), i(L, { key: 1 }, [
+                                t[0] || (t[0] = k("path", {
+                                  "stroke-linecap": "round",
+                                  "stroke-linejoin": "round",
+                                  "stroke-width": "2",
+                                  d: "M2.4 10.5C3.3 8.4 7 4 12 4s8.7 4.4 9.6 6.5c.2.3.2.7 0 1C20.7 13.6 17 18 12 18s-8.7-4.4-9.6-6.5a1.1 1.1 0 010-1z"
+                                }, null, -1)),
+                                t[1] || (t[1] = k("circle", {
+                                  cx: "12",
+                                  cy: "11",
+                                  r: "3",
+                                  "stroke-width": "2"
+                                }, null, -1))
+                              ], 64))
+                            ])) : (s(), x(r, {
+                              key: 1,
+                              icon: ge(a),
+                              class: v(we(a))
+                            }, null, 8, ["icon", "class"]))
+                          ], 10, Qe)) : w("", !0)
+                        ], 2)) : a.type === "textarea" ? (s(), x(Pe, {
+                          key: 1,
+                          id: l,
+                          "model-value": m(a.name),
+                          placeholder: a.placeholder,
+                          disabled: c.value || a.disabled,
+                          readonly: a.readonly || a.disabled,
+                          rows: a.rows || 3,
+                          class: v(["w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-(--ui-primary)", b ? "border-(--ui-danger)" : "ui-border-strong", a.inputClass || ""]),
+                          "aria-describedby": y,
+                          "onUpdate:modelValue": (o) => p(a.name, o)
+                        }, null, 8, ["id", "model-value", "placeholder", "disabled", "readonly", "rows", "class", "aria-describedby", "onUpdate:modelValue"])) : a.type === "select" ? (s(), i("div", Ze, [
+                          k("div", fe, [
+                            C(ie, {
+                              id: l,
+                              "model-value": m(a.name),
+                              options: a.options,
+                              placeholder: a.placeholder || "Select an option",
+                              disabled: c.value || a.disabled,
+                              "has-error": b,
+                              "aria-describedby": y,
+                              "onUpdate:modelValue": (o) => oe(a, o)
+                            }, null, 8, ["id", "model-value", "options", "placeholder", "disabled", "has-error", "aria-describedby", "onUpdate:modelValue"])
+                          ]),
+                          Z(a) ? (s(), x(D, {
+                            key: 0,
+                            type: "button",
+                            variant: a.actionButton.variant || "outline",
+                            size: a.actionButton.size || "icon",
+                            class: v(a.actionButton.class || ""),
+                            title: a.actionButton.title || a.actionButton.label || "Action",
+                            disabled: f(a),
+                            loading: ee(a),
+                            onClick: (o) => ae(a)
+                          }, {
+                            default: V(() => [
+                              F(_(a.actionButton.label || "+"), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["variant", "size", "class", "title", "disabled", "loading", "onClick"])) : w("", !0)
+                        ])) : a.type === "multiselect" ? (s(), i("div", ea, [
+                          k("div", aa, [
+                            C(Le, {
+                              id: l,
+                              "model-value": m(a.name),
+                              options: a.options,
+                              disabled: c.value || a.disabled,
+                              placeholder: a.placeholder || "Select options",
+                              "has-error": b,
+                              "aria-describedby": y,
+                              "onUpdate:modelValue": (o) => p(a.name, o)
+                            }, null, 8, ["id", "model-value", "options", "disabled", "placeholder", "has-error", "aria-describedby", "onUpdate:modelValue"])
+                          ]),
+                          Z(a) ? (s(), x(D, {
+                            key: 0,
+                            type: "button",
+                            variant: a.actionButton.variant || "outline",
+                            size: a.actionButton.size || "icon",
+                            class: v(a.actionButton.class || ""),
+                            title: a.actionButton.title || a.actionButton.label || "Action",
+                            disabled: f(a),
+                            loading: ee(a),
+                            onClick: (o) => ae(a)
+                          }, {
+                            default: V(() => [
+                              F(_(a.actionButton.label || "+"), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["variant", "size", "class", "title", "disabled", "loading", "onClick"])) : w("", !0)
+                        ])) : a.type === "combobox" ? (s(), x(ie, {
+                          key: 4,
+                          id: l,
+                          "model-value": m(a.name),
+                          options: a.options,
+                          placeholder: a.placeholder || "Select or type to add new",
+                          disabled: c.value || a.disabled,
+                          "has-error": b,
+                          "aria-describedby": y,
+                          "allow-create": a.allowCreate,
+                          "onUpdate:modelValue": (o) => oe(a, o)
+                        }, null, 8, ["id", "model-value", "options", "placeholder", "disabled", "has-error", "aria-describedby", "allow-create", "onUpdate:modelValue"])) : a.type === "checkbox" ? (s(), i("div", ta, [
+                          C($, {
+                            id: l,
+                            "model-value": m(a.name),
+                            type: "checkbox",
+                            disabled: c.value || a.disabled,
+                            class: "h-4 w-4 rounded ui-border-strong",
+                            "aria-describedby": y,
+                            "onUpdate:modelValue": (o) => p(a.name, o)
+                          }, null, 8, ["id", "model-value", "disabled", "aria-describedby", "onUpdate:modelValue"]),
+                          C(G, {
+                            for: l,
+                            class: "ml-2 text-sm ui-text"
+                          }, {
+                            default: V(() => [
+                              F(_(a.checkboxLabel || a.label), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["for"])
+                        ])) : a.type === "switch" ? (s(), i("div", na, [
+                          k("button", {
+                            id: l,
+                            type: "button",
+                            role: "switch",
+                            "aria-checked": m(a.name),
+                            disabled: c.value || a.disabled,
+                            class: v([
+                              "relative inline-flex h-6 w-11 items-center rounded-full border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:ring-offset-2",
+                              m(a.name) ? "ui-primary-bg border-(--ui-primary)" : "ui-surface-soft border-(--ui-border-strong)",
+                              c.value || a.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                            ]),
+                            onClick: (o) => p(a.name, !m(a.name))
+                          }, [
+                            k("span", {
+                              class: v(["inline-block h-4 w-4 transform rounded-full ui-surface border ui-border-strong transition-transform", m(a.name) ? "translate-x-6" : "translate-x-1"])
+                            }, null, 2)
+                          ], 10, oa),
+                          C(G, {
+                            for: l,
+                            class: "ml-3 text-sm ui-text"
+                          }, {
+                            default: V(() => [
+                              F(_(a.checkboxLabel || a.label), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["for"])
+                        ])) : a.type === "radio" ? (s(), i("div", sa, [
+                          (s(!0), i(L, null, J(a.options, (o) => (s(), i("div", {
+                            key: o.value,
+                            class: "flex items-center"
+                          }, [
+                            C($, {
+                              id: `${l}-${o.value}`,
+                              "model-value": m(a.name),
+                              type: "radio",
+                              value: o.value,
+                              disabled: c.value || a.disabled,
+                              class: "h-4 w-4 ui-border-strong",
+                              "aria-describedby": y,
+                              "onUpdate:modelValue": (Me) => p(a.name, Me)
+                            }, null, 8, ["id", "model-value", "value", "disabled", "aria-describedby", "onUpdate:modelValue"]),
+                            C(G, {
+                              for: `${l}-${o.value}`,
+                              class: "ml-2 text-sm ui-text"
+                            }, {
+                              default: V(() => [
+                                F(_(o.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["for"])
+                          ]))), 128))
+                        ])) : a.type === "file" ? (s(), x(ue, {
+                          key: 8,
+                          multiple: !1,
+                          accept: a.accept,
+                          "max-size": a.maxSize,
+                          variant: a.variant || "default",
+                          onFilesSelected: (o) => Ce(a, o),
+                          onFileRemoved: (o) => Ve(a, o)
+                        }, null, 8, ["accept", "max-size", "variant", "onFilesSelected", "onFileRemoved"])) : a.type === "multifile" ? (s(), x(ue, {
+                          key: 9,
+                          multiple: a.multiple !== !1,
+                          accept: a.accept,
+                          "max-size": a.maxSize,
+                          "max-files": a.maxFiles,
+                          variant: a.variant || "default",
+                          onFilesSelected: (o) => Fe(a, o),
+                          onFileRemoved: (o) => Se(a, o)
+                        }, null, 8, ["multiple", "accept", "max-size", "max-files", "variant", "onFilesSelected", "onFileRemoved"])) : a.type === "slider" ? (s(), x(Re, {
+                          key: 10,
+                          "model-value": m(a.name),
+                          min: a.min,
+                          max: a.max,
+                          step: a.step,
+                          disabled: c.value || a.disabled,
+                          "onUpdate:modelValue": (o) => _e(a, o)
+                        }, null, 8, ["model-value", "min", "max", "step", "disabled", "onUpdate:modelValue"])) : a.type === "range" ? (s(), i("div", ra, [
+                          k("div", la, [
+                            C($, {
+                              id: l,
+                              "model-value": m(a.name),
+                              type: "range",
+                              min: a.min,
+                              max: a.max,
+                              step: a.step || 1,
+                              disabled: c.value || a.disabled,
+                              class: "flex-1",
+                              "aria-describedby": y,
+                              "onUpdate:modelValue": (o) => p(a.name, o)
+                            }, null, 8, ["id", "model-value", "min", "max", "step", "disabled", "aria-describedby", "onUpdate:modelValue"]),
+                            k("span", ia, _(m(a.name)), 1)
+                          ])
+                        ])) : a.type === "date" ? (s(), x(le, {
+                          key: 12,
+                          id: l,
+                          "model-value": m(a.name),
+                          disabled: c.value || a.disabled,
+                          required: a.required,
+                          min: a.min,
+                          max: a.max,
+                          placeholder: a.placeholder || "Select date",
+                          format: a.format || "DD/MM/YYYY",
+                          "enable-time": a.enableTime === !0,
+                          "minute-interval": a.minuteInterval || 1,
+                          clearable: a.clearable !== !1,
+                          "show-today": a.showToday !== !1,
+                          "calendar-position": a.calendarPosition || "left-0 bottom-full",
+                          "aria-describedby": y,
+                          "onUpdate:modelValue": (o) => p(a.name, o)
+                        }, null, 8, ["id", "model-value", "disabled", "required", "min", "max", "placeholder", "format", "enable-time", "minute-interval", "clearable", "show-today", "calendar-position", "aria-describedby", "onUpdate:modelValue"])) : a.type === "time" ? (s(), x($, {
+                          key: 13,
+                          id: l,
+                          "model-value": m(a.name),
+                          type: "time",
+                          disabled: c.value || a.disabled,
+                          class: v([b ? "border-(--ui-danger)" : "ui-border-strong", a.inputClass || ""]),
+                          "aria-describedby": y,
+                          "onUpdate:modelValue": (o) => p(a.name, o)
+                        }, null, 8, ["id", "model-value", "disabled", "class", "aria-describedby", "onUpdate:modelValue"])) : a.type === "datetime-local" ? (s(), x(le, {
+                          key: 14,
+                          id: l,
+                          "model-value": m(a.name),
+                          disabled: c.value || a.disabled,
+                          required: a.required,
+                          min: a.min,
+                          max: a.max,
+                          placeholder: a.placeholder || "Select date and time",
+                          format: a.format || "DD/MM/YYYY",
+                          "enable-time": !0,
+                          "minute-interval": a.minuteInterval || 1,
+                          clearable: a.clearable !== !1,
+                          "show-today": a.showToday !== !1,
+                          "aria-describedby": y,
+                          "onUpdate:modelValue": (o) => p(a.name, o)
+                        }, null, 8, ["id", "model-value", "disabled", "required", "min", "max", "placeholder", "format", "minute-interval", "clearable", "show-today", "aria-describedby", "onUpdate:modelValue"])) : a.type === "month" ? (s(), x($, {
+                          key: 15,
+                          id: l,
+                          "model-value": m(a.name),
+                          type: "month",
+                          disabled: c.value || a.disabled,
+                          class: v([b ? "border-(--ui-danger)" : "ui-border-strong", a.inputClass || ""]),
+                          "aria-describedby": y,
+                          "onUpdate:modelValue": (o) => p(a.name, o)
+                        }, null, 8, ["id", "model-value", "disabled", "class", "aria-describedby", "onUpdate:modelValue"])) : a.type === "week" ? (s(), x($, {
+                          key: 16,
+                          id: l,
+                          "model-value": m(a.name),
+                          type: "week",
+                          disabled: c.value || a.disabled,
+                          class: v([b ? "border-(--ui-danger)" : "ui-border-strong", a.inputClass || ""]),
+                          "aria-describedby": y,
+                          "onUpdate:modelValue": (o) => p(a.name, o)
+                        }, null, 8, ["id", "model-value", "disabled", "class", "aria-describedby", "onUpdate:modelValue"])) : w("", !0)
+                      ], !0)
+                    ]),
+                    _: 2
+                  }, 1032, ["id", "label", "required", "error", "error-message", "help-text", "class"]))
+                ], 2))), 128))
+              ], 2)
+            ], 2)
+          ], 2))), 128)),
+          H(e.$slots, "actions", {
+            formData: u.value,
+            isValid: pe.value,
+            submit: se
+          }, () => [
+            h.showSubmit ? (s(), i("div", ua, [
+              h.showReset ? (s(), x(D, {
+                key: 0,
+                type: "button",
+                variant: "outline",
+                disabled: c.value,
+                onClick: Be
+              }, {
+                default: V(() => [...t[2] || (t[2] = [
+                  F(" Reset ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])) : w("", !0),
+              h.showCancel ? (s(), x(D, {
+                key: 1,
+                type: "button",
+                variant: "outline",
+                disabled: c.value,
+                onClick: Te
+              }, {
+                default: V(() => [...t[3] || (t[3] = [
+                  F(" Cancel ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])) : w("", !0),
+              C(D, {
+                type: "submit",
+                disabled: c.value,
+                loading: c.value,
+                variant: "default"
+              }, {
+                default: V(() => [
+                  F(_(h.submitLabel), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])) : w("", !0)
+          ], !0),
+          h.showSubmit && de.value ? (s(), i("div", ca)) : w("", !0)
+        ], 32)
+      ]);
+    };
+  }
+}, Fa = /* @__PURE__ */ Oe(ma, [["__scopeId", "data-v-7f79d2a2"]]);
+export {
+  Fa as default
+};