@gspa/ui 0.1.4 → 0.3.0

package/dist/components/ReusableForm.js

@@ -1,15 +1,15 @@
-import { useSlots as De, computed as A, ref as D, watch as re, resolveComponent as Me, createElementBlock as u, openBlock as r, createCommentVNode as w, createElementVNode as C, toDisplayString as k, withModifiers as ze, renderSlot as N, Fragment as H, renderList as J, normalizeClass as v, createBlock as x, withCtx as V, createVNode as _, createTextVNode as F } from "vue";
+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 Pe from "./FormField.js";
-import S from "./Input.js";
-import je from "./Textarea.js";
+import { _ as le } from "../DatePicker.vue_vue_type_script_setup_true_lang-Dx_9f8DO.js";
+import { _ as je } from "../FormField.vue_vue_type_script_setup_true_lang-BljDj5YZ.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 M from "./Button.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 z } from "../lib/toast.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,
@@ -27,30 +27,43 @@ const Ye = { class: "w-full p-2" }, Ee = {
   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"
-}, Xe = { class: "min-w-0 flex-1" }, Ze = {
+}, fe = { class: "min-w-0 flex-1" }, ea = {
   key: 3,
   class: "flex w-full items-center gap-2"
-}, fe = { class: "min-w-0 flex-1" }, ea = {
+}, aa = { class: "min-w-0 flex-1" }, ta = {
   key: 5,
   class: "flex items-center"
-}, aa = {
+}, na = {
   key: 6,
   class: "flex items-center"
-}, ta = ["id", "aria-checked", "disabled", "onClick"], na = {
+}, oa = ["id", "aria-checked", "disabled", "onClick"], sa = {
   key: 7,
   class: "space-y-2"
-}, oa = {
+}, ra = {
   key: 11,
   class: "space-y-2"
-}, sa = { class: "flex items-center gap-4" }, ra = { class: "min-w-12 text-right text-sm font-medium ui-text" }, la = {
+}, 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"
-}, ia = {
+}, ca = {
   key: 0,
   class: "hidden"
-}, ua = {
+}, ma = {
   __name: "ReusableForm",
   props: {
     title: { type: String, default: "" },
@@ -78,10 +91,10 @@ const Ye = { class: "w-full p-2" }, Ee = {
   },
   emits: ["submit", "reset", "cancel", "form-change"],
   setup(h, { emit: B }) {
-    const g = h, R = B, ce = De(), c = A(() => g.loading), i = D({}), d = D({}), P = D({}), K = D({}), L = D(!1), me = A(() => Array.isArray(g.sections) && g.sections.length > 0), de = A(() => !!ce.actions), Q = A(() => me.value ? g.sections.map((e, t) => {
-      const s = e?.id || `section-${t + 1}`, n = Array.isArray(e?.fields) ? e.fields : (g.fields || []).filter((a) => a.sectionId === s);
+    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: s,
+        id: r,
         title: e?.title || "",
         description: e?.description || "",
         icon: e?.icon || "",
@@ -99,56 +112,56 @@ const Ye = { class: "w-full p-2" }, Ee = {
       gridClass: "grid grid-cols-12 gap-4",
       card: !1,
       fields: g.fields || []
-    }]), T = A(() => Q.value.flatMap((e) => e.fields || [])), pe = A(() => Object.keys(d.value).length === 0), W = (e) => {
+    }]), 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 "";
       }
-    }, O = (e, t) => {
+    }, Y = (e, t) => {
       if (!(!e || !t))
-        return t.split(".").reduce((s, n) => s?.[n], e);
-    }, q = (e, t, s) => {
+        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] = s;
-    }, Y = (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 = () => {
+      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(".") ? q(e, t.name, Y(t)) : e[t.name] = Y(t);
+        t.name.includes(".") ? M(e, t.name, E(t)) : e[t.name] = E(t);
       }), e;
     }, be = (e) => {
       const t = {};
-      return T.value.forEach((s) => {
-        const n = s.name.includes(".") ? O(e, s.name) : e?.[s.name], a = Y(s), l = n === void 0 ? a : n;
-        if (s.name.includes(".")) {
-          q(t, s.name, l);
+      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;
         }
-        s.type === "file" ? t[s.name] = null : s.type === "multifile" || s.type === "multiselect" ? t[s.name] = Array.isArray(l) ? l : [] : t[s.name] = l;
+        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(i.value) && (L.value = !0, i.value = t, queueMicrotask(() => {
-          L.value = !1;
+        W(t) !== W(u.value) && (O.value = !0, u.value = t, queueMicrotask(() => {
+          O.value = !1;
         }));
       },
       { immediate: !0 }
     ), re(
-      i,
+      u,
       (e) => {
-        L.value || R("form-change", e);
+        O.value || j("form-change", e);
       },
       { deep: !0 }
     );
-    const m = (e) => e.includes(".") ? O(i.value, e) : i.value[e], E = (e) => {
+    const m = (e) => e.includes(".") ? Y(u.value, e) : u.value[e], I = (e) => {
       const t = d.value?.[e];
-      return t || (e.includes(".") ? O(d.value, e) : void 0);
+      return t || (e.includes(".") ? Y(d.value, e) : void 0);
     }, p = (e, t) => {
-      e.includes(".") ? q(i.value, e, t) : i.value[e] = t;
-    }, $ = (e) => e?.type === "password", j = (e) => !!P.value[e.name], ye = (e) => $(e) ? j(e) ? "text" : "password" : e.type, ve = (e) => {
+      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]
@@ -157,72 +170,72 @@ const Ye = { class: "w-full p-2" }, Ee = {
       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 s = e.validate(t, i.value);
-          s && (d.value[e.name] = s);
+          const r = e.validate(t, u.value);
+          r && (d.value[e.name] = r);
         }
       }), typeof g.customValidation == "function") {
-        const e = g.customValidation(i.value);
+        const e = g.customValidation(u.value);
         e && typeof e == "object" && (d.value = { ...d.value, ...e });
       }
       if (typeof g.crossValidate == "function") {
-        const e = g.crossValidate(i.value);
+        const e = g.crossValidate(u.value);
         e && typeof e == "object" && (d.value = { ...d.value, ...e });
       }
       return Object.keys(d.value).length === 0;
-    }, U = (e, t, s = void 0) => typeof e == "function" ? e(i.value, t) : e === void 0 ? s : e, Z = (e) => !!e?.actionButton && e.actionButton.show !== !1, f = (e) => {
+    }, 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(i.value, e) : e.actionButton.disabled;
+      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(i.value, e) : !!e.actionButton.loading : !1, ae = (e) => {
-      typeof e?.actionButton?.onClick == "function" && e.actionButton.onClick(i.value, e);
-    }, te = (e) => $(e) || !!U(e.trailingIcon, e, null), ge = (e) => $(e) ? j(e) ? "eye-slash" : "eye" : U(e.trailingIcon, e, null), ne = (e) => $(e) ? j(e) ? "Hide password" : "Show password" : U(e.trailingIconTitle, e, "Action"), xe = (e) => $(e) ? j(e) ? "Hide password" : "Show password" : U(e.trailingIconAriaLabel, e, ne(e)), we = (e) => U(e.trailingIconClass, e, "w-4 h-4"), I = (e) => !!(c.value || e.disabled || U(e.trailingIconDisabled, e, !1)), ke = (e) => {
-      if (!I(e)) {
-        if ($(e)) {
+    }, 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(i.value, e);
+        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, i.value);
+          await e.onChange(t, u.value);
         } catch {
-          z.error("An error occurred while processing the change");
+          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, i.value);
+          e.onChange(t, u.value);
         } catch {
-          z.error("An error occurred while processing the change");
+          R.error("An error occurred while processing the change");
         }
     }, Ce = (e, t) => {
-      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, i.value);
+      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, i.value);
+      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, i.value);
+      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, i.value);
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, u.value);
     }, $e = (e) => {
       const t = new FormData();
-      return Object.keys(e).forEach((s) => {
-        const n = e[s];
-        n != null && (n instanceof File ? t.append(s, n) : Array.isArray(n) ? n.forEach((a, l) => {
-          a instanceof File ? t.append(`${s}[]`, a) : t.append(`${s}[${l}]`, a);
+      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(`${s}[${a}]`, n[a]);
-        }) : t.append(s, n));
+          t.append(`${r}[${a}]`, n[a]);
+        }) : t.append(r, n));
       }), t;
-    }, Ue = () => {
+    }, 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(".") ? q(e, n.name, b) : e[n.name] = b;
+          n.name.includes(".") ? M(e, n.name, b) : e[n.name] = b;
           return;
         }
         if (n.type === "file") {
@@ -234,90 +247,90 @@ const Ye = { class: "w-full p-2" }, Ee = {
           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(".") ? q(e, n.name, l) : e[n.name] = l;
+        n.name.includes(".") ? M(e, n.name, l) : e[n.name] = l;
       });
-      let s = e;
-      return t && (s = $e(e), g.formType === "edit" && s.append("_method", "PUT")), { formData: s, hasFiles: t };
+      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(
-        (s) => s.type !== "multifile" && (K.value[s.name] || []).length > 0
+        (r) => r.type !== "multifile" && (K.value[r.name] || []).length > 0
       ))
-        return z.error("Please wait for all files to finish uploading"), !1;
+        return R.error("Please wait for all files to finish uploading"), !1;
       if (!he())
-        return z.error("Please fix the validation errors before submitting"), !1;
-      const t = Ue();
-      return R("submit", {
+        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;
-    }, Ae = async () => {
+    }, Ue = async () => {
       try {
         await se();
       } catch {
-        z.error("An error occurred during submission");
+        R.error("An error occurred during submission");
       }
     }, Be = () => {
-      i.value = X(), d.value = {}, K.value = {}, R("reset");
-    }, Te = () => R("cancel");
+      u.value = X(), d.value = {}, K.value = {}, j("reset");
+    }, Te = () => j("cancel");
     return (e, t) => {
-      const s = Me("font-awesome-icon");
-      return r(), u("div", Ye, [
-        h.title ? (r(), u("div", Ee, [
-          C("h2", Ie, k(h.title), 1),
-          h.description ? (r(), u("p", Ne, k(h.description), 1)) : w("", !0)
+      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),
-        C("form", {
+        k("form", {
           class: "space-y-6",
-          onSubmit: ze(Ae, ["prevent"])
+          onSubmit: De(Ue, ["prevent"])
         }, [
-          (r(!0), u(H, null, J(Q.value, (n) => (r(), u("div", {
+          (s(!0), i(L, null, J(Q.value, (n) => (s(), i("div", {
             key: n.id,
             class: v(n.wrapperClass || "")
           }, [
-            C("div", {
+            k("div", {
               class: v(n.card ? "ui-surface border ui-border-strong rounded-xl p-4 sm:p-5" : "")
             }, [
-              N(e.$slots, "section-header", { section: n }, () => [
-                n.title || n.description ? (r(), u("div", He, [
-                  n.title ? (r(), u("h3", Je, k(n.title), 1)) : w("", !0),
-                  n.description ? (r(), u("p", Ge, k(n.description), 1)) : w("", !0)
+              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),
-              C("div", {
+              k("div", {
                 class: v(n.gridClass)
               }, [
-                (r(!0), u(H, null, J(n.fields, (a) => (r(), u("div", {
+                (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" ? (r(), u("input", {
+                  a.type === "hidden" ? (s(), i("input", {
                     key: 0,
                     value: m(a.name),
                     type: "hidden"
-                  }, null, 8, Ke)) : (r(), x(Pe, {
+                  }, null, 8, Ke)) : (s(), x(je, {
                     key: 1,
                     id: `form-${h.entityName}-${a.name}`,
                     label: a.label,
                     required: !!a.required,
-                    error: E(a.name),
-                    "error-message": E(a.name),
+                    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 }) => [
-                      N(e.$slots, `field-${a.name}`, {
+                      H(e.$slots, `field-${a.name}`, {
                         field: a,
-                        formData: i.value,
-                        error: E(a.name),
+                        formData: u.value,
+                        error: I(a.name),
                         update: (o) => p(a.name, o)
                       }, () => [
-                        ["text", "number", "password", "color", "email", "tel", "url", "search"].includes(a.type) ? (r(), u("div", {
+                        ["text", "number", "password", "color", "email", "tel", "url", "search"].includes(a.type) ? (s(), i("div", {
                           key: 0,
                           class: v(["relative", te(a) ? "has-trailing-icon" : ""])
                         }, [
-                          _(S, {
+                          C($, {
                             id: l,
                             "model-value": m(a.name),
                             type: ye(a),
@@ -328,21 +341,37 @@ const Ye = { class: "w-full p-2" }, Ee = {
                             "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) ? (r(), u("button", {
+                          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", I(a) ? "opacity-50 cursor-not-allowed" : ""]),
+                            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: I(a),
+                            disabled: N(a),
                             onClick: (o) => ke(a)
                           }, [
-                            _(s, {
+                            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"])
+                            }, null, 8, ["icon", "class"]))
                           ], 10, Qe)) : w("", !0)
-                        ], 2)) : a.type === "textarea" ? (r(), x(je, {
+                        ], 2)) : a.type === "textarea" ? (s(), x(Pe, {
                           key: 1,
                           id: l,
                           "model-value": m(a.name),
@@ -353,9 +382,9 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           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" ? (r(), u("div", We, [
-                          C("div", Xe, [
-                            _(ie, {
+                        }, 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,
@@ -366,7 +395,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                               "onUpdate:modelValue": (o) => oe(a, o)
                             }, null, 8, ["id", "model-value", "options", "placeholder", "disabled", "has-error", "aria-describedby", "onUpdate:modelValue"])
                           ]),
-                          Z(a) ? (r(), x(M, {
+                          Z(a) ? (s(), x(D, {
                             key: 0,
                             type: "button",
                             variant: a.actionButton.variant || "outline",
@@ -378,13 +407,13 @@ const Ye = { class: "w-full p-2" }, Ee = {
                             onClick: (o) => ae(a)
                           }, {
                             default: V(() => [
-                              F(k(a.actionButton.label || "+"), 1)
+                              F(_(a.actionButton.label || "+"), 1)
                             ]),
                             _: 2
                           }, 1032, ["variant", "size", "class", "title", "disabled", "loading", "onClick"])) : w("", !0)
-                        ])) : a.type === "multiselect" ? (r(), u("div", Ze, [
-                          C("div", fe, [
-                            _(Le, {
+                        ])) : a.type === "multiselect" ? (s(), i("div", ea, [
+                          k("div", aa, [
+                            C(Le, {
                               id: l,
                               "model-value": m(a.name),
                               options: a.options,
@@ -395,7 +424,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                               "onUpdate:modelValue": (o) => p(a.name, o)
                             }, null, 8, ["id", "model-value", "options", "disabled", "placeholder", "has-error", "aria-describedby", "onUpdate:modelValue"])
                           ]),
-                          Z(a) ? (r(), x(M, {
+                          Z(a) ? (s(), x(D, {
                             key: 0,
                             type: "button",
                             variant: a.actionButton.variant || "outline",
@@ -407,11 +436,11 @@ const Ye = { class: "w-full p-2" }, Ee = {
                             onClick: (o) => ae(a)
                           }, {
                             default: V(() => [
-                              F(k(a.actionButton.label || "+"), 1)
+                              F(_(a.actionButton.label || "+"), 1)
                             ]),
                             _: 2
                           }, 1032, ["variant", "size", "class", "title", "disabled", "loading", "onClick"])) : w("", !0)
-                        ])) : a.type === "combobox" ? (r(), x(ie, {
+                        ])) : a.type === "combobox" ? (s(), x(ie, {
                           key: 4,
                           id: l,
                           "model-value": m(a.name),
@@ -422,8 +451,8 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           "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" ? (r(), u("div", ea, [
-                          _(S, {
+                        }, 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",
@@ -432,17 +461,17 @@ const Ye = { class: "w-full p-2" }, Ee = {
                             "aria-describedby": y,
                             "onUpdate:modelValue": (o) => p(a.name, o)
                           }, null, 8, ["id", "model-value", "disabled", "aria-describedby", "onUpdate:modelValue"]),
-                          _(G, {
+                          C(G, {
                             for: l,
                             class: "ml-2 text-sm ui-text"
                           }, {
                             default: V(() => [
-                              F(k(a.checkboxLabel || a.label), 1)
+                              F(_(a.checkboxLabel || a.label), 1)
                             ]),
                             _: 2
                           }, 1032, ["for"])
-                        ])) : a.type === "switch" ? (r(), u("div", aa, [
-                          C("button", {
+                        ])) : a.type === "switch" ? (s(), i("div", na, [
+                          k("button", {
                             id: l,
                             type: "button",
                             role: "switch",
@@ -455,25 +484,25 @@ const Ye = { class: "w-full p-2" }, Ee = {
                             ]),
                             onClick: (o) => p(a.name, !m(a.name))
                           }, [
-                            C("span", {
+                            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, ta),
-                          _(G, {
+                          ], 10, oa),
+                          C(G, {
                             for: l,
                             class: "ml-3 text-sm ui-text"
                           }, {
                             default: V(() => [
-                              F(k(a.checkboxLabel || a.label), 1)
+                              F(_(a.checkboxLabel || a.label), 1)
                             ]),
                             _: 2
                           }, 1032, ["for"])
-                        ])) : a.type === "radio" ? (r(), u("div", na, [
-                          (r(!0), u(H, null, J(a.options, (o) => (r(), u("div", {
+                        ])) : 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"
                           }, [
-                            _(S, {
+                            C($, {
                               id: `${l}-${o.value}`,
                               "model-value": m(a.name),
                               type: "radio",
@@ -481,19 +510,19 @@ const Ye = { class: "w-full p-2" }, Ee = {
                               disabled: c.value || a.disabled,
                               class: "h-4 w-4 ui-border-strong",
                               "aria-describedby": y,
-                              "onUpdate:modelValue": (qe) => p(a.name, qe)
+                              "onUpdate:modelValue": (Me) => p(a.name, Me)
                             }, null, 8, ["id", "model-value", "value", "disabled", "aria-describedby", "onUpdate:modelValue"]),
-                            _(G, {
+                            C(G, {
                               for: `${l}-${o.value}`,
                               class: "ml-2 text-sm ui-text"
                             }, {
                               default: V(() => [
-                                F(k(o.label), 1)
+                                F(_(o.label), 1)
                               ]),
                               _: 2
                             }, 1032, ["for"])
                           ]))), 128))
-                        ])) : a.type === "file" ? (r(), x(ue, {
+                        ])) : a.type === "file" ? (s(), x(ue, {
                           key: 8,
                           multiple: !1,
                           accept: a.accept,
@@ -501,7 +530,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           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" ? (r(), x(ue, {
+                        }, null, 8, ["accept", "max-size", "variant", "onFilesSelected", "onFileRemoved"])) : a.type === "multifile" ? (s(), x(ue, {
                           key: 9,
                           multiple: a.multiple !== !1,
                           accept: a.accept,
@@ -510,7 +539,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           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" ? (r(), x(Re, {
+                        }, 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,
@@ -518,9 +547,9 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           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" ? (r(), u("div", oa, [
-                          C("div", sa, [
-                            _(S, {
+                        }, 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",
@@ -532,9 +561,9 @@ const Ye = { class: "w-full p-2" }, Ee = {
                               "aria-describedby": y,
                               "onUpdate:modelValue": (o) => p(a.name, o)
                             }, null, 8, ["id", "model-value", "min", "max", "step", "disabled", "aria-describedby", "onUpdate:modelValue"]),
-                            C("span", ra, k(m(a.name)), 1)
+                            k("span", ia, _(m(a.name)), 1)
                           ])
-                        ])) : a.type === "date" ? (r(), x(le, {
+                        ])) : a.type === "date" ? (s(), x(le, {
                           key: 12,
                           id: l,
                           "model-value": m(a.name),
@@ -551,7 +580,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           "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" ? (r(), x(S, {
+                        }, 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),
@@ -560,7 +589,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           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" ? (r(), x(le, {
+                        }, 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),
@@ -576,7 +605,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           "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" ? (r(), x(S, {
+                        }, 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),
@@ -585,7 +614,7 @@ const Ye = { class: "w-full p-2" }, Ee = {
                           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" ? (r(), x(S, {
+                        }, 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),
@@ -603,55 +632,55 @@ const Ye = { class: "w-full p-2" }, Ee = {
               ], 2)
             ], 2)
           ], 2))), 128)),
-          N(e.$slots, "actions", {
-            formData: i.value,
+          H(e.$slots, "actions", {
+            formData: u.value,
             isValid: pe.value,
             submit: se
           }, () => [
-            h.showSubmit ? (r(), u("div", la, [
-              h.showReset ? (r(), x(M, {
+            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[0] || (t[0] = [
+                default: V(() => [...t[2] || (t[2] = [
                   F(" Reset ", -1)
                 ])]),
                 _: 1
               }, 8, ["disabled"])) : w("", !0),
-              h.showCancel ? (r(), x(M, {
+              h.showCancel ? (s(), x(D, {
                 key: 1,
                 type: "button",
                 variant: "outline",
                 disabled: c.value,
                 onClick: Te
               }, {
-                default: V(() => [...t[1] || (t[1] = [
+                default: V(() => [...t[3] || (t[3] = [
                   F(" Cancel ", -1)
                 ])]),
                 _: 1
               }, 8, ["disabled"])) : w("", !0),
-              _(M, {
+              C(D, {
                 type: "submit",
                 disabled: c.value,
                 loading: c.value,
                 variant: "default"
               }, {
                 default: V(() => [
-                  F(k(h.submitLabel), 1)
+                  F(_(h.submitLabel), 1)
                 ]),
                 _: 1
               }, 8, ["disabled", "loading"])
             ])) : w("", !0)
           ], !0),
-          h.showSubmit && de.value ? (r(), u("div", ia)) : w("", !0)
+          h.showSubmit && de.value ? (s(), i("div", ca)) : w("", !0)
         ], 32)
       ]);
     };
   }
-}, Ca = /* @__PURE__ */ Oe(ua, [["__scopeId", "data-v-08eb5933"]]);
+}, Fa = /* @__PURE__ */ Oe(ma, [["__scopeId", "data-v-7f79d2a2"]]);
 export {
-  Ca as default
+  Fa as default
 };