@gspa/ui 0.1.3 → 0.1.4

package/dist/components/ReusableForm.js

@@ -0,0 +1,657 @@
+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 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 ie from "./Select.js";
+import Le from "./MultiSelect.js";
+import M from "./Button.js";
+import G from "./Label.js";
+import ue from "./FileUpload.js";
+import { toast as z } 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: 2,
+  class: "flex w-full items-center gap-2"
+}, Xe = { class: "min-w-0 flex-1" }, Ze = {
+  key: 3,
+  class: "flex w-full items-center gap-2"
+}, fe = { class: "min-w-0 flex-1" }, ea = {
+  key: 5,
+  class: "flex items-center"
+}, aa = {
+  key: 6,
+  class: "flex items-center"
+}, ta = ["id", "aria-checked", "disabled", "onClick"], na = {
+  key: 7,
+  class: "space-y-2"
+}, oa = {
+  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 = {
+  key: 0,
+  class: "flex justify-end gap-3 pt-6"
+}, ia = {
+  key: 0,
+  class: "hidden"
+}, ua = {
+  __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, 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);
+      return {
+        id: s,
+        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 = A(() => Q.value.flatMap((e) => e.fields || [])), pe = A(() => Object.keys(d.value).length === 0), W = (e) => {
+      try {
+        return JSON.stringify(e ?? {});
+      } catch {
+        return "";
+      }
+    }, O = (e, t) => {
+      if (!(!e || !t))
+        return t.split(".").reduce((s, n) => s?.[n], e);
+    }, q = (e, t, s) => {
+      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 = () => {
+      const e = {};
+      return T.value.forEach((t) => {
+        t.name.includes(".") ? q(e, t.name, Y(t)) : e[t.name] = Y(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;
+        }
+        s.type === "file" ? t[s.name] = null : s.type === "multifile" || s.type === "multiselect" ? t[s.name] = Array.isArray(l) ? l : [] : t[s.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;
+        }));
+      },
+      { immediate: !0 }
+    ), re(
+      i,
+      (e) => {
+        L.value || R("form-change", e);
+      },
+      { deep: !0 }
+    );
+    const m = (e) => e.includes(".") ? O(i.value, e) : i.value[e], E = (e) => {
+      const t = d.value?.[e];
+      return t || (e.includes(".") ? O(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?.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 s = e.validate(t, i.value);
+          s && (d.value[e.name] = s);
+        }
+      }), typeof g.customValidation == "function") {
+        const e = g.customValidation(i.value);
+        e && typeof e == "object" && (d.value = { ...d.value, ...e });
+      }
+      if (typeof g.crossValidate == "function") {
+        const e = g.crossValidate(i.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) => {
+      if (!e?.actionButton) return !0;
+      const t = typeof e.actionButton.disabled == "function" ? e.actionButton.disabled(i.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)) {
+          ve(e);
+          return;
+        }
+        typeof e?.onTrailingIconClick == "function" && e.onTrailingIconClick(i.value, e);
+      }
+    }, oe = async (e, t) => {
+      if (p(e.name, t), typeof e?.onChange == "function")
+        try {
+          await e.onChange(t, i.value);
+        } catch {
+          z.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);
+        } catch {
+          z.error("An error occurred while processing the change");
+        }
+    }, Ce = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, i.value);
+    }, Ve = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, i.value);
+    }, Fe = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, i.value);
+    }, Se = (e, t) => {
+      p(e.name, t), typeof e?.onChange == "function" && e.onChange(t, i.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);
+        }) : typeof n == "object" && !(n instanceof Date) ? Object.keys(n).forEach((a) => {
+          t.append(`${s}[${a}]`, n[a]);
+        }) : t.append(s, n));
+      }), t;
+    }, Ue = () => {
+      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;
+          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(".") ? q(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 };
+    }, se = async () => {
+      if (T.value.some(
+        (s) => s.type !== "multifile" && (K.value[s.name] || []).length > 0
+      ))
+        return z.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", {
+        formData: t.formData,
+        formType: g.formType,
+        originalData: g.initialData,
+        hasFiles: t.hasFiles
+      }), !0;
+    }, Ae = async () => {
+      try {
+        await se();
+      } catch {
+        z.error("An error occurred during submission");
+      }
+    }, Be = () => {
+      i.value = X(), d.value = {}, K.value = {}, R("reset");
+    }, Te = () => R("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)
+        ])) : w("", !0),
+        C("form", {
+          class: "space-y-6",
+          onSubmit: ze(Ae, ["prevent"])
+        }, [
+          (r(!0), u(H, null, J(Q.value, (n) => (r(), u("div", {
+            key: n.id,
+            class: v(n.wrapperClass || "")
+          }, [
+            C("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)
+                ])) : w("", !0)
+              ], !0),
+              C("div", {
+                class: v(n.gridClass)
+              }, [
+                (r(!0), u(H, null, J(n.fields, (a) => (r(), u("div", {
+                  key: a.name,
+                  class: v(a.wrapperClass || "col-span-12")
+                }, [
+                  a.type === "hidden" ? (r(), u("input", {
+                    key: 0,
+                    value: m(a.name),
+                    type: "hidden"
+                  }, null, 8, Ke)) : (r(), x(Pe, {
+                    key: 1,
+                    id: `form-${h.entityName}-${a.name}`,
+                    label: a.label,
+                    required: !!a.required,
+                    error: E(a.name),
+                    "error-message": E(a.name),
+                    "help-text": a.helpText,
+                    class: v(a.labelClass || "")
+                  }, {
+                    default: V(({ fieldId: l, hasError: b, ariaDescribedBy: y }) => [
+                      N(e.$slots, `field-${a.name}`, {
+                        field: a,
+                        formData: i.value,
+                        error: E(a.name),
+                        update: (o) => p(a.name, o)
+                      }, () => [
+                        ["text", "number", "password", "color", "email", "tel", "url", "search"].includes(a.type) ? (r(), u("div", {
+                          key: 0,
+                          class: v(["relative", te(a) ? "has-trailing-icon" : ""])
+                        }, [
+                          _(S, {
+                            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) ? (r(), u("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" : ""]),
+                            title: ne(a),
+                            "aria-label": xe(a),
+                            disabled: I(a),
+                            onClick: (o) => ke(a)
+                          }, [
+                            _(s, {
+                              icon: ge(a),
+                              class: v(we(a))
+                            }, null, 8, ["icon", "class"])
+                          ], 10, Qe)) : w("", !0)
+                        ], 2)) : a.type === "textarea" ? (r(), x(je, {
+                          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" ? (r(), u("div", We, [
+                          C("div", Xe, [
+                            _(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) ? (r(), x(M, {
+                            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(k(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, {
+                              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) ? (r(), x(M, {
+                            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(k(a.actionButton.label || "+"), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["variant", "size", "class", "title", "disabled", "loading", "onClick"])) : w("", !0)
+                        ])) : a.type === "combobox" ? (r(), 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" ? (r(), u("div", ea, [
+                          _(S, {
+                            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"]),
+                          _(G, {
+                            for: l,
+                            class: "ml-2 text-sm ui-text"
+                          }, {
+                            default: V(() => [
+                              F(k(a.checkboxLabel || a.label), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["for"])
+                        ])) : a.type === "switch" ? (r(), u("div", aa, [
+                          C("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))
+                          }, [
+                            C("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, {
+                            for: l,
+                            class: "ml-3 text-sm ui-text"
+                          }, {
+                            default: V(() => [
+                              F(k(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", {
+                            key: o.value,
+                            class: "flex items-center"
+                          }, [
+                            _(S, {
+                              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": (qe) => p(a.name, qe)
+                            }, null, 8, ["id", "model-value", "value", "disabled", "aria-describedby", "onUpdate:modelValue"]),
+                            _(G, {
+                              for: `${l}-${o.value}`,
+                              class: "ml-2 text-sm ui-text"
+                            }, {
+                              default: V(() => [
+                                F(k(o.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["for"])
+                          ]))), 128))
+                        ])) : a.type === "file" ? (r(), 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" ? (r(), 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" ? (r(), 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" ? (r(), u("div", oa, [
+                          C("div", sa, [
+                            _(S, {
+                              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"]),
+                            C("span", ra, k(m(a.name)), 1)
+                          ])
+                        ])) : a.type === "date" ? (r(), 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" ? (r(), x(S, {
+                          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" ? (r(), 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" ? (r(), x(S, {
+                          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" ? (r(), x(S, {
+                          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)),
+          N(e.$slots, "actions", {
+            formData: i.value,
+            isValid: pe.value,
+            submit: se
+          }, () => [
+            h.showSubmit ? (r(), u("div", la, [
+              h.showReset ? (r(), x(M, {
+                key: 0,
+                type: "button",
+                variant: "outline",
+                disabled: c.value,
+                onClick: Be
+              }, {
+                default: V(() => [...t[0] || (t[0] = [
+                  F(" Reset ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])) : w("", !0),
+              h.showCancel ? (r(), x(M, {
+                key: 1,
+                type: "button",
+                variant: "outline",
+                disabled: c.value,
+                onClick: Te
+              }, {
+                default: V(() => [...t[1] || (t[1] = [
+                  F(" Cancel ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])) : w("", !0),
+              _(M, {
+                type: "submit",
+                disabled: c.value,
+                loading: c.value,
+                variant: "default"
+              }, {
+                default: V(() => [
+                  F(k(h.submitLabel), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])) : w("", !0)
+          ], !0),
+          h.showSubmit && de.value ? (r(), u("div", ia)) : w("", !0)
+        ], 32)
+      ]);
+    };
+  }
+}, Ca = /* @__PURE__ */ Oe(ua, [["__scopeId", "data-v-08eb5933"]]);
+export {
+  Ca as default
+};

package/dist/components/ReusableFormModal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./Modal.cjs"),v=require("./ReusableForm.cjs"),S={__name:"ReusableFormModal",props:{modelValue:{type:Boolean,default:!1},modalType:{type:String,required:!0,validator:t=>["create","edit"].includes(t)},entityName:{type:String,default:"Item"},fields:{type:Array,required:!0},sections:{type:Array,default:()=>[]},initialData:{type:Object,default:null},loading:{type:Boolean,default:!1},customValidation:{type:Function,default:null},crossValidate:{type:Function,default:null},showSubmit:{type:Boolean,default:!0},submitLabel:{type:String,default:""},showReset:{type:Boolean,default:!1},showCancel:{type:Boolean,default:!0},modalSize:{type:String,default:"4xl",validator:t=>["sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl","8xl","full"].includes(t)},modalHeight:{type:String,default:"auto"},modalResizable:{type:Boolean,default:!1}},emits:["update:modelValue","submit","close","form-change"],setup(t,{emit:r}){const a=t,n=r,s=e.useSlots(),d=e.computed({get:()=>a.modelValue,set:l=>n("update:modelValue",l)}),m=e.computed(()=>a.submitLabel?a.submitLabel:a.modalType==="create"?`Create ${a.entityName}`:`Update ${a.entityName}`),c=e.computed(()=>a.modalType==="create"?`Add New ${a.entityName}`:`Edit ${a.entityName}`),f=e.computed(()=>a.modalType==="create"?`Fill in the details to create a new ${a.entityName.toLowerCase()}.`:`Update the ${a.entityName.toLowerCase()} information below.`),y=e.computed(()=>{if(Array.isArray(a.sections)&&a.sections.length>0){const l=a.sections.flatMap(i=>Array.isArray(i?.fields)?i.fields:[]);if(l.length>0)return l}return a.fields||[]}),b=e.computed(()=>y.value.map(l=>l?.name).filter(l=>typeof l=="string"&&!!l&&!!s[`field-${l}`])),u=()=>{d.value=!1,n("close")},h=()=>{u()},p=l=>{n("submit",{...l,modalType:a.modalType,originalData:a.initialData})};return(l,i)=>(e.openBlock(),e.createBlock(w.default,{modelValue:d.value,"onUpdate:modelValue":i[1]||(i[1]=o=>d.value=o),"show-close":!0,"close-on-backdrop":!0,size:t.modalSize,class:e.normalizeClass(t.modalHeight==="auto"?"":t.modalHeight),resizable:t.modalResizable,onClose:u},{default:e.withCtx(()=>[e.createVNode(v.default,{title:c.value,description:f.value,"entity-name":t.entityName,fields:t.fields,sections:t.sections,"initial-data":t.initialData,loading:t.loading,"custom-validation":t.customValidation,"cross-validate":t.crossValidate,"submit-label":m.value,"show-reset":t.showReset,"show-cancel":t.showCancel,"show-submit":t.showSubmit,"form-type":t.modalType,onSubmit:p,onCancel:h,onFormChange:i[0]||(i[0]=o=>n("form-change",o))},e.createSlots({_:2},[e.unref(s)["section-header"]?{name:"section-header",fn:e.withCtx(o=>[e.renderSlot(l.$slots,"section-header",e.normalizeProps(e.guardReactiveProps(o)))]),key:"0"}:void 0,e.renderList(b.value,o=>({name:`field-${o}`,fn:e.withCtx(g=>[e.renderSlot(l.$slots,`field-${o}`,e.normalizeProps(e.guardReactiveProps(g)))])})),e.unref(s).actions?{name:"actions",fn:e.withCtx(o=>[e.renderSlot(l.$slots,"actions",e.normalizeProps(e.guardReactiveProps(o)))]),key:"1"}:void 0]),1032,["title","description","entity-name","fields","sections","initial-data","loading","custom-validation","cross-validate","submit-label","show-reset","show-cancel","show-submit","form-type"])]),_:3},8,["modelValue","size","class","resizable"]))}};exports.default=S;