@jsg-developer/vue-pack 0.0.2 → 0.0.3

package/dist/TabelData-BPjJ27Uj.js

@@ -0,0 +1,2219 @@
+import { defineComponent as je, createElementBlock as a, openBlock as d, mergeProps as Fe, renderSlot as tt, createTextVNode as ue, toDisplayString as k, ref as I, computed as ee, inject as st, createCommentVNode as N, createVNode as S, createElementVNode as s, unref as l, normalizeClass as Q, Fragment as z, renderList as W, createBlock as ce, normalizeStyle as Be, onMounted as Pe, onUnmounted as dt, Transition as we, withCtx as pe, withModifiers as Ze, watch as _e, nextTick as Oe, withKeys as Je, toRaw as He, provide as at, withDirectives as Ie, isRef as Le, vModelText as lt, vModelCheckbox as We } from "vue";
+import ot from "dompurify";
+import { x as Qe, aa as Se, K as Me, a9 as ye, ab as nt, J as rt, I as Ne, L as it, F as gt } from "./quill.snow-DiPGvD5E.js";
+const ut = ["src", "alt"], Ge = /* @__PURE__ */ je({
+  __name: "BaseImage",
+  props: {
+    src: {},
+    alt: {}
+  },
+  setup(e) {
+    return (u, r) => (d(), a("img", Fe({
+      src: e.src,
+      alt: e.alt,
+      loading: "lazy",
+      decoding: "async",
+      class: "jsgd-object-cover"
+    }, u.$attrs), null, 16, ut));
+  }
+}), ct = { class: "jsgd-block jsgd-mb-2 jsgd-cursor-default jsgd-transition-colors jsgd-duration-200 jsgd-text-slate-700 dark:jsgd-text-slate-300 jsgd-text-sm md:jsgd-text-base jsgd-font-medium hover:jsgd-animate-subtle-glow" }, U = /* @__PURE__ */ je({
+  __name: "BaseLabel",
+  props: {
+    label: {}
+  },
+  setup(e) {
+    return (u, r) => (d(), a("label", ct, [
+      tt(u.$slots, "default", {}, () => [
+        ue(k(e.label), 1)
+      ])
+    ]));
+  }
+});
+function Ee(e = "id-ID", u = "Asia/Jakarta") {
+  let r = e, o = u;
+  try {
+    typeof navigator < "u" && (r = navigator.language || e), o = Intl.DateTimeFormat().resolvedOptions().timeZone || u;
+  } catch {
+  }
+  return { locale: r, timeZone: o };
+}
+function ze(e, u = "id-ID") {
+  const r = Intl.DateTimeFormat.supportedLocalesOf([e]);
+  return r.length > 0 ? r[0] : u;
+}
+function Ue(e) {
+  return e instanceof Date && !isNaN(e.getTime());
+}
+const jt = (e) => {
+  try {
+    if (!e) return "-";
+    const u = new Date(e);
+    if (!Ue(u)) return e;
+    const { locale: r, timeZone: o } = Ee();
+    return u.toLocaleDateString(ze(r), {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      timeZone: o
+    });
+  } catch {
+    return e;
+  }
+}, bt = (e) => {
+  try {
+    if (!e) return "-";
+    const u = /* @__PURE__ */ new Date(`1970-01-01T${e}`);
+    if (!Ue(u)) return e;
+    const { locale: r, timeZone: o } = Ee();
+    return u.toLocaleTimeString(ze(r), {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: o
+    });
+  } catch {
+    return e;
+  }
+}, ft = (e) => {
+  try {
+    if (!e) return "-";
+    const u = new Date(e);
+    if (!Ue(u)) return e;
+    const { locale: r, timeZone: o } = Ee();
+    return u.toLocaleString(ze(r), {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: o
+    });
+  } catch {
+    return e;
+  }
+}, ht = ["id"], mt = { key: 0 }, vt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, yt = { key: 1 }, kt = ["innerHTML"], xt = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, wt = { key: 2 }, pt = ["innerHTML"], _t = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, Ct = { key: 3 }, Mt = { class: "jsgd-flex jsgd-items-center jsgd-gap-4" }, Dt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-font-mono" }, At = { key: 4 }, $t = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Tt = { key: 5 }, Ot = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Ht = { key: 6 }, Kt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Vt = { key: 7 }, Bt = { key: 8 }, St = { key: 0 }, It = ["href"], Lt = {
+  key: 1,
+  class: "jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Nt = { class: "jsgd-text-sm jsgd-text-slate-500 dark:jsgd-text-slate-400" }, Ft = ["href"], Pt = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, Et = { key: 9 }, zt = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-col jsgd-gap-2"
+}, Ut = ["href"], Wt = {
+  key: 1,
+  class: "jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Gt = { class: "jsgd-text-sm jsgd-text-slate-500 dark:jsgd-text-slate-400" }, Rt = ["href"], qt = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, Zt = { key: 10 }, Jt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Qt = { key: 11 }, Xt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Yt = { key: 12 }, es = ["href"], ts = { key: 13 }, ss = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, ds = { key: 14 }, as = {
+  key: 0,
+  class: "jsgd-p-4 jsgd-border jsgd-border-slate-200 jsgd-rounded-md jsgd-bg-slate-50 jsgd-shadow-inner dark:jsgd-border-slate-700 dark:jsgd-bg-slate-800/50"
+}, ls = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, os = { key: 15 }, ns = { key: 0 }, rs = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, is = { key: 16 }, gs = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-wrap jsgd-gap-4"
+}, us = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, cs = { key: 17 }, js = { class: "jsgd-flex jsgd-flex-wrap jsgd-gap-2" }, bs = ["title", "onClick"], fs = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, hs = { key: 18 }, ms = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, vs = { key: 19 }, ys = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-col jsgd-gap-4"
+}, ks = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, xs = {
+  key: 1,
+  class: "jsgd-pb-6 jsgd-mb-6 jsgd-border-b jsgd-border-slate-200 dark:jsgd-border-slate-700 last:jsgd-mb-0 last:jsgd-pb-0 last:jsgd-border-b-0"
+}, ws = { class: "jsgd-flex jsgd-flex-col jsgd-gap-4" }, ps = /* @__PURE__ */ je({
+  __name: "FieldDetailRenderer",
+  props: {
+    field: {},
+    fieldKey: {},
+    formData: {},
+    requiredText: {},
+    valueNullView: { type: Boolean },
+    optionalText: {},
+    lang: {}
+  },
+  emits: ["image-click"],
+  setup(e, { emit: u }) {
+    const r = I(!1), o = e, i = u, t = ee(() => o.formData?.[o.fieldKey]), m = ee(() => {
+      const O = t.value;
+      return o.valueNullView && o.field.type !== "optionGroupSchema" ? !0 : n(O);
+    }), v = st("TableComponents", {
+      labels: I(Qe[o.lang ?? "en"])
+    }).labels, n = (O) => O != null && O !== "" && !(Array.isArray(O) && O.length === 0), j = ee(() => {
+      let O = o.field.label || o.fieldKey || "";
+      return o.field.type === "optionGroupSchema" ? o.field.label ?? "" : O;
+    }), _ = (O) => O instanceof File, F = (O) => URL.createObjectURL(O), C = (O) => {
+      navigator.clipboard.writeText(O).then(() => console.log("Copied:", O)).catch(console.error);
+    };
+    return (O, B) => m.value ? (d(), a("div", {
+      key: 0,
+      class: "jsgd-pb-6 jsgd-mb-6 jsgd-border-b jsgd-border-slate-200 dark:jsgd-border-slate-700 last:jsgd-mb-0 last:jsgd-pb-0 last:jsgd-border-b-0",
+      id: e.fieldKey
+    }, [
+      e.field.type === "text" ? (d(), a("div", mt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", vt, k(t.value || "-"), 1)
+      ])) : e.field.type === "richText" ? (d(), a("div", yt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        t.value ? (d(), a("div", {
+          key: 0,
+          class: "prose-content",
+          innerHTML: t.value
+        }, null, 8, kt)) : (d(), a("p", xt, " - "))
+      ])) : e.field.type === "textArea" ? (d(), a("div", wt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        t.value ? (d(), a("div", {
+          key: 0,
+          class: "prose-content",
+          innerHTML: t.value
+        }, null, 8, pt)) : (d(), a("p", _t, " - "))
+      ])) : e.field.type === "password" ? (d(), a("div", Ct, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("div", Mt, [
+          s("p", Dt, k(r.value ? t.value ?? "-" : t.value ? "•".repeat(String(t.value).length) : "-"), 1),
+          t.value ? (d(), a("button", {
+            key: 0,
+            type: "button",
+            class: "jsgd-text-sm jsgd-text-blue-600 jsgd-bg-transparent jsgd-border-none jsgd-cursor-pointer jsgd-transition-colors hover:jsgd-text-blue-500 dark:jsgd-text-blue-400 dark:hover:jsgd-text-blue-300",
+            onClick: B[0] || (B[0] = (M) => r.value = !r.value)
+          }, k(r.value ? "Hide" : "Show"), 1)) : N("", !0)
+        ])
+      ])) : e.field.type === "date" ? (d(), a("div", At, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", $t, k(t.value ? l(jt)(t.value) : "-"), 1)
+      ])) : e.field.type === "time" ? (d(), a("div", Tt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", Ot, k(t.value ? l(bt)(t.value) : "-"), 1)
+      ])) : e.field.type === "dateTime" ? (d(), a("div", Ht, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", Kt, k(t.value ? l(ft)(t.value) : "-"), 1)
+      ])) : e.field.type === "toggle" ? (d(), a("div", Vt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", {
+          class: Q([
+            "jsgd-inline-flex jsgd-items-center jsgd-gap-2 jsgd-px-3 jsgd-py-1 jsgd-font-medium jsgd-rounded-full",
+            t.value ? "jsgd-bg-green-100 jsgd-text-green-800 dark:jsgd-bg-green-900 dark:jsgd-text-green-200" : "jsgd-bg-red-100 jsgd-text-red-800 dark:jsgd-bg-red-900 dark:jsgd-text-red-200"
+          ])
+        }, k(t.value ? l(v).btn.toogle.active : l(v).btn.toogle.inactive) + " ⦿ ", 3)
+      ])) : e.field.type === "file" ? (d(), a("div", Bt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        t.value ? (d(), a("div", St, [
+          typeof t.value == "string" ? (d(), a("a", {
+            key: 0,
+            href: t.value,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "jsgd-font-medium jsgd-text-blue-600 jsgd-underline jsgd-underline-offset-2 jsgd-transition-colors hover:jsgd-text-blue-500 dark:jsgd-text-blue-400 dark:hover:jsgd-text-blue-300"
+          }, k(t.value.split("/").pop() || t.value), 9, It)) : _(t.value) ? (d(), a("div", Lt, [
+            s("span", null, k(t.value.name), 1),
+            s("span", Nt, "(" + k((t.value.size / 1024).toFixed(1)) + " KB)", 1),
+            s("a", {
+              href: F(t.value),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              class: "jsgd-font-medium jsgd-text-blue-600 jsgd-underline jsgd-underline-offset-2 jsgd-transition-colors hover:jsgd-text-blue-500 dark:jsgd-text-blue-400 dark:hover:jsgd-text-blue-300"
+            }, " Preview ", 8, Ft)
+          ])) : N("", !0)
+        ])) : (d(), a("div", Pt, " - "))
+      ])) : e.field.type === "fileArray" ? (d(), a("div", Et, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        Array.isArray(t.value) && t.value.length ? (d(), a("div", zt, [
+          (d(!0), a(z, null, W(t.value, (M, L) => (d(), a("div", { key: L }, [
+            typeof M == "string" ? (d(), a("a", {
+              key: 0,
+              href: M,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              class: "jsgd-font-medium jsgd-text-blue-600 jsgd-underline jsgd-underline-offset-2 jsgd-transition-colors hover:jsgd-text-blue-500 dark:jsgd-text-blue-400 dark:hover:jsgd-text-blue-300"
+            }, k(M.split("/").pop() || M), 9, Ut)) : _(M) ? (d(), a("div", Wt, [
+              s("span", null, k(M.name), 1),
+              s("span", Gt, "(" + k((M.size / 1024).toFixed(1)) + " KB)", 1),
+              s("a", {
+                href: F(M),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                class: "jsgd-font-medium jsgd-text-blue-600 jsgd-underline jsgd-underline-offset-2 jsgd-transition-colors hover:jsgd-text-blue-500 dark:jsgd-text-blue-400 dark:hover:jsgd-text-blue-300"
+              }, " Preview ", 8, Rt)
+            ])) : N("", !0)
+          ]))), 128))
+        ])) : (d(), a("div", qt, " - "))
+      ])) : e.field.type === "number" ? (d(), a("div", Zt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", Jt, k(t.value ?? "-"), 1)
+      ])) : e.field.type === "email" ? (d(), a("div", Qt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", Xt, k(t.value ?? "-"), 1)
+      ])) : e.field.type === "url" ? (d(), a("div", Yt, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("a", {
+          href: t.value,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class: "jsgd-font-medium jsgd-text-blue-600 jsgd-underline jsgd-underline-offset-2 jsgd-transition-colors hover:jsgd-text-blue-500 dark:jsgd-text-blue-400 dark:hover:jsgd-text-blue-300"
+        }, k(t.value ?? "-"), 9, es)
+      ])) : e.field.type === "tag" ? (d(), a("div", ts, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", ss, k(t.value ?? "-"), 1)
+      ])) : e.field.type === "object" ? (d(), a("div", ds, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        t.value && typeof t.value == "object" && Object.keys(t.value).length ? (d(), a("div", as, [
+          (d(!0), a(z, null, W(e.field.schema, (M, L) => (d(), ce(l(Ke), {
+            key: L,
+            field: M,
+            "field-key": L,
+            "form-data": t.value,
+            "value-null-view": e.valueNullView,
+            "optional-text": e.optionalText,
+            "required-text": e.requiredText,
+            onImageClick: B[1] || (B[1] = (V) => i("image-click", V))
+          }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+        ])) : (d(), a("div", ls, " - "))
+      ])) : e.field.type === "image" ? (d(), a("div", os, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        t.value ? (d(), a("div", ns, [
+          S(l(Ge), {
+            src: t.value,
+            alt: "Image",
+            class: "jsgd-block jsgd-rounded-md jsgd-shadow-md jsgd-border jsgd-border-slate-200 jsgd-cursor-pointer jsgd-transition-all hover:jsgd-scale-105 hover:jsgd-shadow-lg jsgd-w-full jsgd-max-w-48 jsgd-aspect-video jsgd-object-contain dark:jsgd-border-slate-700",
+            onClick: B[2] || (B[2] = (M) => i("image-click", t.value))
+          }, null, 8, ["src"])
+        ])) : (d(), a("div", rs, " - "))
+      ])) : e.field.type === "imageArray" ? (d(), a("div", is, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        Array.isArray(t.value) && t.value.length ? (d(), a("div", gs, [
+          (d(!0), a(z, null, W(t.value, (M, L) => (d(), a("div", { key: L }, [
+            S(l(Ge), {
+              src: M,
+              alt: `Image ${L + 1}`,
+              class: "jsgd-block jsgd-rounded-md jsgd-shadow-md jsgd-border jsgd-border-slate-200 jsgd-cursor-pointer jsgd-transition-all hover:jsgd-scale-105 hover:jsgd-shadow-lg jsgd-w-24 jsgd-h-24 jsgd-object-contain dark:jsgd-border-slate-700",
+              onClick: (V) => i("image-click", M)
+            }, null, 8, ["src", "alt", "onClick"])
+          ]))), 128))
+        ])) : (d(), a("div", us, " - "))
+      ])) : e.field.type === "color" ? (d(), a("div", cs, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("div", js, [
+          Array.isArray(t.value) && t.value.length ? (d(!0), a(z, { key: 0 }, W(t.value, (M, L) => (d(), a("div", {
+            key: L,
+            class: "jsgd-w-8 jsgd-h-8 jsgd-rounded-full jsgd-border-2 jsgd-border-white jsgd-shadow-[0_0_0_1px] jsgd-shadow-slate-300 jsgd-cursor-pointer jsgd-transition-transform hover:jsgd-scale-110 dark:jsgd-border-slate-800 dark:jsgd-shadow-slate-600",
+            style: Be({ backgroundColor: M }),
+            title: M,
+            onClick: (V) => C(M)
+          }, null, 12, bs))), 128)) : (d(), a("div", fs, " - "))
+        ])
+      ])) : e.field.type === "select" ? (d(), a("div", hs, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        s("p", ms, k(t.value || "-"), 1)
+      ])) : e.field.type === "arrayObject" ? (d(), a("div", vs, [
+        S(l(U), { label: j.value }, null, 8, ["label"]),
+        Array.isArray(t.value) && t.value.length ? (d(), a("div", ys, [
+          (d(!0), a(z, null, W(t.value, (M, L) => (d(), a("div", {
+            key: L,
+            class: "jsgd-p-4 jsgd-border jsgd-border-slate-200 jsgd-rounded-md jsgd-bg-slate-50 jsgd-shadow-inner dark:jsgd-border-slate-700 dark:jsgd-bg-slate-800/50"
+          }, [
+            (d(!0), a(z, null, W(e.field.schema, (V, x) => (d(), ce(l(Ke), {
+              key: x,
+              field: V,
+              "field-key": x,
+              "form-data": M,
+              "value-null-view": e.valueNullView,
+              "optional-text": e.optionalText,
+              "required-text": e.requiredText,
+              onImageClick: B[3] || (B[3] = (P) => i("image-click", P))
+            }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+          ]))), 128))
+        ])) : (d(), a("div", ks, " - "))
+      ])) : N("", !0)
+    ], 8, ht)) : e.field.type === "optionGroupSchema" ? (d(), a("div", xs, [
+      e.formData[e.fieldKey] || j.value ? (d(), ce(l(U), {
+        key: 0,
+        label: e.formData[e.fieldKey] ? j.value + ":" + (e.formData[e.fieldKey] ?? "") : j.value,
+        class: "!jsgd-text-lg !jsgd-font-semibold !jsgd-text-slate-900 dark:!jsgd-text-slate-100 !jsgd-border-l-4 !jsgd-border-slate-400 !jsgd-pl-3 dark:!jsgd-border-slate-600"
+      }, null, 8, ["label"])) : N("", !0),
+      s("div", ws, [
+        (d(!0), a(z, null, W(e.field.options, (M, L) => (d(), a("div", {
+          key: L,
+          class: "jsgd-p-4 jsgd-border jsgd-border-slate-200 jsgd-rounded-md jsgd-bg-slate-50 jsgd-shadow-inner dark:jsgd-border-slate-700 dark:jsgd-bg-slate-800/50"
+        }, [
+          S(l(U), {
+            label: L,
+            class: "option-group-item-label"
+          }, null, 8, ["label"]),
+          B[5] || (B[5] = s("hr", { class: "option-group-divider" }, null, -1)),
+          (d(!0), a(z, null, W(M, (V, x) => (d(), ce(l(Ke), {
+            key: x,
+            field: V,
+            "field-key": x,
+            "form-data": e.formData,
+            "value-null-view": e.valueNullView,
+            "optional-text": e.optionalText,
+            "required-text": e.requiredText,
+            onImageClick: B[4] || (B[4] = (P) => i("image-click", P))
+          }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+        ]))), 128))
+      ])
+    ])) : N("", !0);
+  }
+}), Ke = /* @__PURE__ */ Se(ps, [["__scopeId", "data-v-03da3adc"]]), _s = ["src", "alt"], fa = /* @__PURE__ */ je({
+  __name: "ImagePreview",
+  props: {
+    imageUrl: {},
+    watermarkUrl: { default: "https://res.cloudinary.com/doyufai9q/image/upload/v1754227461/Logo_transparent_b6qrek.png" },
+    watermarkSize: { default: 4 },
+    alt: { default: "" }
+  },
+  setup(e) {
+    const u = e, r = I(null), o = I(!0), i = (m) => new Promise((c, v) => {
+      const n = new Image();
+      n.crossOrigin = "anonymous", n.onload = () => c(n), n.onerror = (j) => v(j), n.src = m;
+    }), t = (m, c) => {
+      const v = document.createElement("canvas"), n = v.getContext("2d");
+      if (!n)
+        return console.error("Gagal mendapatkan konteks canvas 2D."), m.src;
+      v.width = m.width, v.height = m.height, n.drawImage(m, 0, 0);
+      const j = m.width / u.watermarkSize, _ = c.height / c.width * j, F = m.width - j - 10, C = m.height - _ - 10;
+      return n.globalAlpha = 0.8, n.drawImage(c, F, C, j, _), n.globalAlpha = 1, v.toDataURL("image/png");
+    };
+    return Pe(async () => {
+      try {
+        const m = await i(u.imageUrl), c = await i(u.watermarkUrl);
+        r.value = t(m, c);
+      } catch (m) {
+        console.error("Gagal menerapkan watermark, menampilkan gambar asli:", m), r.value = u.imageUrl;
+      } finally {
+        o.value = !1;
+      }
+    }), (m, c) => (d(), a(z, null, [
+      o.value ? (d(), a("div", Fe({
+        key: 0,
+        class: "jsgd-w-full jsgd-h-48 jsgd-bg-slate-200 dark:jsgd-bg-slate-700 jsgd-rounded-lg jsgd-animate-pulse"
+      }, m.$attrs), null, 16)) : N("", !0),
+      !o.value && r.value ? (d(), a("img", Fe({
+        key: 1,
+        loading: "lazy",
+        src: r.value,
+        alt: u.alt
+      }, m.$attrs), null, 16, _s)) : N("", !0)
+    ], 64));
+  }
+}), Cs = { class: "modal-header" }, Ms = { class: "header-content" }, Ds = { class: "title-section" }, As = { class: "modal-title" }, $s = { class: "modal-body" }, Ts = { class: "form-fields-container" }, Os = { class: "modal-footer" }, Hs = { class: "footer-buttons" }, Ks = { class: "btn-content" }, Vs = ["src"], Bs = /* @__PURE__ */ je({
+  __name: "ModalDetailData",
+  props: {
+    schema: {},
+    formData: {},
+    valueNullView: { type: Boolean },
+    title: {},
+    closeText: {},
+    requiredText: {},
+    optionalText: {},
+    lang: {}
+  },
+  emits: ["close"],
+  setup(e, { emit: u }) {
+    const r = u, o = I(!1), i = I(""), t = () => r("close"), m = (n) => {
+      i.value = n, o.value = !0;
+    }, c = I(!1), v = () => {
+      c.value = window.innerWidth < 768;
+    };
+    return Pe(() => {
+      v(), window.addEventListener("resize", v);
+    }), dt(() => {
+      window.removeEventListener("resize", v);
+    }), (n, j) => (d(), a(z, null, [
+      S(we, {
+        name: "modal-overlay",
+        appear: ""
+      }, {
+        default: pe(() => [
+          s("div", {
+            class: "modal-overlay",
+            onClick: Ze(t, ["self"])
+          }, [
+            S(we, {
+              name: "modal-container",
+              appear: ""
+            }, {
+              default: pe(() => [
+                s("div", {
+                  class: Q(["modal-container", { "mobile-view": c.value }])
+                }, [
+                  s("div", Cs, [
+                    s("div", Ms, [
+                      s("div", Ds, [
+                        j[1] || (j[1] = s("div", { class: "icon-container" }, [
+                          s("svg", {
+                            width: "24",
+                            height: "24",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg"
+                          }, [
+                            s("path", {
+                              d: "M10 3H6C4.89543 3 4 3.89543 4 5V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V5C20 3.89543 19.1046 3 18 3H14M10 3V6C10 6.55228 10.4477 7 11 7H13C13.5523 7 14 6.55228 14 6V3M10 3V1M14 3V1M9 11H15M9 15H15",
+                              stroke: "currentColor",
+                              "stroke-width": "2",
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round"
+                            })
+                          ])
+                        ], -1)),
+                        s("h2", As, k(e.title ?? "Detail Data"), 1)
+                      ]),
+                      s("button", {
+                        class: "close-btn",
+                        onClick: t,
+                        "aria-label": "Close"
+                      }, [...j[2] || (j[2] = [
+                        s("svg", {
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg"
+                        }, [
+                          s("path", {
+                            d: "M18 6L6 18M6 6L18 18",
+                            stroke: "currentColor",
+                            "stroke-width": "2",
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round"
+                          })
+                        ], -1)
+                      ])])
+                    ])
+                  ]),
+                  s("div", $s, [
+                    s("div", Ts, [
+                      (d(!0), a(z, null, W(e.schema, (_, F) => (d(), ce(l(Ke), {
+                        key: F,
+                        field: _,
+                        "field-key": F,
+                        "form-data": e.formData,
+                        "required-text": e.requiredText,
+                        "optional-text": e.optionalText,
+                        "value-null-view": e.valueNullView,
+                        onImageClick: m,
+                        lang: e.lang
+                      }, null, 8, ["field", "field-key", "form-data", "required-text", "optional-text", "value-null-view", "lang"]))), 128))
+                    ])
+                  ]),
+                  s("div", Os, [
+                    s("div", Hs, [
+                      s("button", {
+                        type: "button",
+                        onClick: t,
+                        class: "btn btn-primary"
+                      }, [
+                        s("span", Ks, [
+                          j[3] || (j[3] = s("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg"
+                          }, [
+                            s("path", {
+                              d: "M6 18L18 6M6 6L18 18",
+                              stroke: "currentColor",
+                              "stroke-width": "2",
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round"
+                            })
+                          ], -1)),
+                          ue(" " + k(e.closeText ?? "Close"), 1)
+                        ])
+                      ])
+                    ])
+                  ])
+                ], 2)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }),
+      S(we, {
+        name: "modal-overlay",
+        appear: ""
+      }, {
+        default: pe(() => [
+          o.value ? (d(), a("div", {
+            key: 0,
+            class: "modal-overlay image-preview-overlay",
+            onClick: j[0] || (j[0] = (_) => o.value = !1)
+          }, [
+            S(we, {
+              name: "modal-container",
+              appear: ""
+            }, {
+              default: pe(() => [
+                s("img", {
+                  src: i.value,
+                  alt: "Preview",
+                  class: "image-preview-content"
+                }, null, 8, Vs)
+              ]),
+              _: 1
+            })
+          ])) : N("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}), Ss = /* @__PURE__ */ Se(Bs, [["__scopeId", "data-v-a78353a9"]]), Is = ["innerHTML"], ha = /* @__PURE__ */ je({
+  __name: "SafeHtml",
+  props: {
+    html: {}
+  },
+  setup(e) {
+    const u = e, r = ee(() => ot.sanitize(u.html));
+    return (o, i) => e.html ? (d(), a("div", {
+      key: 0,
+      innerHTML: r.value
+    }, null, 8, Is)) : N("", !0);
+  }
+}), Ls = { class: "jsgd-sr-only" }, Ns = { class: "jsgd-font-semibold" }, Fs = /* @__PURE__ */ je({
+  __name: "AlertApp",
+  setup(e, { expose: u }) {
+    const r = I([]), o = I([]), i = I([]);
+    let t = 0;
+    const m = (n) => {
+      const j = "jsgd-fixed jsgd-top-4 jsgd-right-4 jsgd-z-100 jsgd-flex jsgd-items-start jsgd-gap-3 jsgd-w-full jsgd-max-w-sm jsgd-p-4 jsgd-mb-4 jsgd-rounded-lg jsgd-shadow-lg jsgd-transition-all jsgd-duration-300 jsgd-ease-[cubic-bezier(0.4,0,0.2,1)] sm:jsgd-max-w-md max-sm:jsgd-left-4";
+      return n === "success" ? `${j} jsgd-border-1 jsgd-border-solid jsgd-border-green-200 jsgd-bg-green-50 jsgd-text-green-800 dark:jsgd-bg-green-800/30 dark:jsgd-border-green-700 dark:jsgd-text-green-200` : n === "error" ? `${j} jsgd-border-1 jsgd-border-solid jsgd-border-red-200 jsgd-bg-red-50 jsgd-text-red-800 dark:jsgd-bg-red-800/30 dark:jsgd-border-red-700 dark:jsgd-text-red-200` : j;
+    };
+    function c() {
+      let n = 0;
+      i.value = o.value.map((j) => {
+        const _ = j?.offsetHeight || 0, F = n;
+        return n += _ + 10, F;
+      });
+    }
+    function v(n) {
+      n.id = t++, n.show = !1, r.value.push(n), Oe(() => {
+        n.show = !0, c();
+      }), setTimeout(() => {
+        n.show = !1, Oe(() => {
+          c(), setTimeout(() => {
+            r.value = r.value.filter((j) => j.id !== n.id), Oe(c);
+          }, 200);
+        });
+      }, 5e3);
+    }
+    return _e(r, () => {
+      Oe(c);
+    }), u({
+      addAlert: v
+    }), (n, j) => (d(!0), a(z, null, W(r.value, (_, F) => (d(), a("div", {
+      key: _.id,
+      ref_for: !0,
+      ref_key: "alertRefs",
+      ref: o,
+      class: Q(["alert-container", m(_.type)]),
+      style: Be({
+        top: `${i.value[F] ?? 0}px`,
+        transform: `translateX(${_.show ? "0" : "200%"})`
+      }),
+      role: "alert"
+    }, [
+      s("span", {
+        class: Q(["jsgd-shrink-0 jsgd-w-5 jsgd-h-5", [
+          _.type === "error" ? "jsgd-i-mdi-alert-circle" : "jsgd-i-mdi-check-circle",
+          _.type === "error" ? "jsgd-text-red-500 dark:jsgd-text-red-400" : "jsgd-text-green-500 dark:jsgd-text-green-400"
+        ]])
+      }, null, 2),
+      s("span", Ls, k(_.type === "error" ? "Error" : "Success"), 1),
+      s("div", null, [
+        s("span", Ns, k(_.title), 1),
+        s("ul", {
+          class: Q([
+            "jsgd-mt-1 jsgd-pl-5 jsgd-text-sm jsgd-list-disc jsgd-list-inside",
+            _.type === "error" ? "[&::marker]:jsgd-text-red-500" : "[&::marker]:jsgd-text-green-500"
+          ])
+        }, [
+          (d(!0), a(z, null, W(_.messages, (C, O) => (d(), a("li", { key: O }, k(C), 1))), 128))
+        ], 2)
+      ])
+    ], 6))), 128));
+  }
+}), Ps = ["aria-labelledby"], Es = {
+  id: "dialog-title",
+  class: "jsgd-text-2xl jsgd-font-bold jsgd-text-slate-800 jsgd-mb-3 dark:jsgd-text-slate-100"
+}, zs = {
+  id: "dialog-desc",
+  class: "jsgd-text-slate-500 jsgd-leading-relaxed jsgd-mb-10 dark:jsgd-text-slate-400"
+}, Us = { class: "jsgd-grid jsgd-grid-cols-2 jsgd-gap-4" }, Ws = /* @__PURE__ */ je({
+  __name: "WarningForm",
+  props: {
+    title: { default: "Warning Title" },
+    message: { default: "Warning Message" },
+    isGreen: { type: Boolean, default: !1 }
+  },
+  emits: ["confirm", "close"],
+  setup(e, { emit: u }) {
+    const r = e, o = u;
+    return (i, t) => (d(), a("div", {
+      class: "jsgd-fixed jsgd-inset-0 jsgd-z-36 jsgd-grid jsgd-place-items-center jsgd-p-4 jsgd-bg-slate-900/60 jsgd-backdrop-blur-sm jsgd-animate-[fadeIn_250ms_ease-out]",
+      onKeydown: t[2] || (t[2] = Je((m) => o("close"), ["esc"]))
+    }, [
+      s("div", {
+        class: "jsgd-relative jsgd-w-full jsgd-max-w-md jsgd-pt-16 jsgd-pb-8 jsgd-px-8 jsgd-bg-gradient-to-br jsgd-from-white jsgd-to-slate-50 jsgd-rounded-2xl jsgd-shadow-2xl jsgd-text-center jsgd-animate-[scaleIn_250ms_cubic-bezier(0.16,1,0.3,1)] jsgd-border-1 jsgd-border-solid jsgd-border-slate-200 dark:jsgd-from-slate-800 dark:jsgd-to-slate-900 dark:jsgd-border-slate-700",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": r.title
+      }, [
+        s("div", {
+          class: Q([
+            "jsgd-absolute jsgd-top-[-2.25rem] jsgd-left-1/2 -jsgd-translate-x-1/2 jsgd-w-[4.5rem] jsgd-h-[4.5rem] jsgd-rounded-full jsgd-grid jsgd-place-items-center jsgd-border-4 jsgd-border-solid jsgd-border-white jsgd-shadow-md jsgd-animate-[scaleIn_400ms_150ms_ease-out_backwards] dark:jsgd-border-slate-800",
+            r.isGreen ? "jsgd-bg-green-100 dark:jsgd-bg-green-900/50" : "jsgd-bg-red-100 dark:jsgd-bg-red-900/50"
+          ])
+        }, [
+          s("span", {
+            class: Q(["jsgd-w-9 jsgd-h-9", [
+              r.isGreen ? "jsgd-i-mdi-check-decagram" : "jsgd-i-mdi-alert-decagram",
+              r.isGreen ? "jsgd-text-green-600 dark:jsgd-text-green-400" : "jsgd-text-red-600 dark:jsgd-text-red-400"
+            ]])
+          }, null, 2)
+        ], 2),
+        s("h2", Es, k(r.title), 1),
+        s("p", zs, k(r.message), 1),
+        s("div", Us, [
+          s("button", {
+            class: Q([
+              "jsgd-w-full jsgd-py-3.5 jsgd-px-4 jsgd-rounded-lg jsgd-border-none jsgd-font-semibold jsgd-text-sm jsgd-cursor-pointer jsgd-transition-all jsgd-duration-300 jsgd-ease-[cubic-bezier(0.4,0,0.2,1)] jsgd-relative jsgd-overflow-hidden hover:-jsgd-translate-y-0.5 jsgd-text-white",
+              r.isGreen ? "jsgd-bg-gradient-to-br jsgd-from-green-500 jsgd-to-emerald-600 jsgd-shadow-lg jsgd-shadow-green-500/20 hover:jsgd-shadow-xl hover:jsgd-shadow-green-500/30" : "jsgd-bg-gradient-to-br jsgd-from-red-500 jsgd-to-rose-600 jsgd-shadow-lg jsgd-shadow-red-500/20 hover:jsgd-shadow-xl hover:jsgd-shadow-red-500/30"
+            ]),
+            onClick: t[0] || (t[0] = (m) => o("confirm"))
+          }, " Ya ", 2),
+          s("button", {
+            class: "jsgd-w-full jsgd-py-3.5 jsgd-px-4 jsgd-rounded-lg jsgd-font-semibold jsgd-text-sm jsgd-cursor-pointer jsgd-transition-all jsgd-duration-300 jsgd-ease-[cubic-bezier(0.4,0,0.2,1)] jsgd-relative jsgd-overflow-hidden hover:-jsgd-translate-y-0.5 jsgd-bg-slate-200 jsgd-text-slate-700 jsgd-border-1 jsgd-border-solid jsgd-border-slate-300 hover:jsgd-bg-slate-300 dark:jsgd-bg-slate-700 dark:jsgd-text-slate-200 dark:jsgd-border-slate-600 dark:hover:jsgd-bg-slate-600",
+            onClick: t[1] || (t[1] = (m) => o("close"))
+          }, " Tidak ")
+        ])
+      ], 8, Ps)
+    ], 32));
+  }
+}), Re = /* @__PURE__ */ Se(Ws, [["__scopeId", "data-v-d74c76a7"]]);
+async function Ve(e, u, r, o) {
+  const i = {};
+  for (const [t, m] of Object.entries(u)) {
+    const c = m?.type;
+    if (c === "select" && m.DB_NAME && !m.optionsIsNumber) {
+      const n = e[m.baseKey?.base ?? t];
+      if (n !== null) {
+        const j = await Me(m.DB_NAME, n);
+        i[t] = j[m.baseKey.name ?? "name"] ?? "";
+      } else
+        i[t] = "";
+      continue;
+    }
+    if (c === "object") {
+      const n = e[t] || {};
+      i[t] = await Ve(
+        e[t] || {},
+        m.schema || {},
+        n,
+        m.baseKey?.base ?? "id"
+      );
+      continue;
+    }
+    if (c === "optionGroupSchema" && m.options) {
+      if (m.withValue) {
+        const n = e[t];
+        i[t] = await Ce(n);
+      }
+      for (const [n, j] of Object.entries(
+        m.options
+      ))
+        for (const [_, F] of Object.entries(j)) {
+          const C = F, O = e[_];
+          if (C.type === "optionGroupSchema" && C.options) {
+            const B = await Ve(
+              e,
+              { [_]: C },
+              r,
+              o
+            );
+            Object.assign(i, B);
+            continue;
+          }
+          if (C.type === "object") {
+            i[_] = await Ve(
+              e[_] || {},
+              C.schema || {},
+              e[_] || {},
+              C.baseKey?.base ?? "id"
+            );
+            continue;
+          }
+          if (C.type === "select" && C.DB_NAME && !C.optionsIsNumber) {
+            const B = e[C.baseKey?.base ?? _];
+            if (B != null) {
+              const M = C.DB_NAME, L = await Me(M, B);
+              i[_] = L[C.baseKey?.name ?? "name"] ?? void 0;
+            } else
+              i[_] = void 0;
+          } else
+            i[_] = Ce(O);
+        }
+      continue;
+    }
+    const v = e[t];
+    i[t] = Ce(v);
+  }
+  return r && e?.[o ?? "id"] && (i[o ?? "id"] = e?.[o ?? "id"]), i;
+}
+async function De(e, u) {
+  const r = {};
+  console.log(e);
+  for (const [o, i] of Object.entries(u)) {
+    const t = i?.type, m = e[i.baseKey?.base ?? o];
+    if (t === "select" && i.optionsView && i.options && m) {
+      const c = i.options.findIndex((v) => v === m);
+      if (!i.optionsView[c] && i.DB_NAME && i.baseKey.name) {
+        const n = (await Me(i.DB_NAME, m))[i.baseKey.name];
+        r[o] = n;
+      } else
+        r[o] = i.optionsView[c] ?? m;
+      continue;
+    }
+    if (t === "object") {
+      r[o] = await De(m || {}, i.schema || {});
+      continue;
+    }
+    if (t === "optionGroupSchema") {
+      const c = [];
+      for (const [n, j] of Object.entries(
+        i.options
+      ))
+        c.push(j);
+      const v = await Xe(e, c);
+      Object.assign(r, v);
+      continue;
+    }
+    if (t === "arrayObject") {
+      const c = [];
+      for (const v of m) {
+        const n = await De(v, i.schema || {});
+        c.push(n);
+      }
+      r[o] = c;
+      continue;
+    }
+    r[o] = Ce(m);
+  }
+  return r;
+}
+async function Xe(e, u) {
+  const r = {};
+  for (const o of u)
+    for (const [i, t] of Object.entries(o)) {
+      const m = t?.type, c = e[t.baseKey?.base ?? i];
+      if (m === "select" && t.optionsView && t.options && c) {
+        const v = t.options.findIndex((n) => n === c);
+        if (!t.optionsView[v] && t.DB_NAME && t.baseKey.name) {
+          const j = (await Me(t.DB_NAME, c))[t.baseKey.name];
+          r[i] = j;
+        } else
+          r[i] = t.optionsView[v] ?? c;
+      } else if (m === "optionGroupSchema") {
+        const v = [];
+        for (const [j, _] of Object.entries(
+          t.options
+        ))
+          v.push(_);
+        const n = await Xe(e, v);
+        Object.assign(r, n);
+      } else if (m === "object")
+        r[i] = await De(c || {}, t.schema || {});
+      else if (m === "arrayObject") {
+        const v = [];
+        for (const n of c) {
+          const j = await De(n, t.schema || {});
+          v.push(j);
+        }
+        r[i] = v;
+        continue;
+      } else
+        r[i] = Ce(c);
+    }
+  return r;
+}
+function Ce(e, u) {
+  return e ?? null;
+}
+function he(e) {
+  const u = He(e), r = Array.isArray(u) ? [] : {};
+  if (Array.isArray(u))
+    return u.map((o) => o !== null && typeof o == "object" && !(o instanceof File || o instanceof Blob || o instanceof Date) && !Array.isArray(o) ? he(o) : o);
+  for (const o in u) {
+    const i = u[o];
+    i === void 0 ? r[o] = null : i instanceof File || i instanceof Blob || i instanceof Date ? r[o] = i : typeof i == "string" && (i.trim() === "" || i === "<p><br></p>") || typeof i == "number" && i === 0 ? r[o] = null : Array.isArray(i) ? r[o] = i.map((t) => t !== null && typeof t == "object" && !(t instanceof File || t instanceof Blob || t instanceof Date) && !Array.isArray(t) ? he(t) : t) : typeof i == "object" && i !== null ? r[o] = he(i) : r[o] = i;
+  }
+  return r;
+}
+function Ye(e) {
+  return e ? typeof e == "string" ? /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(e.toLowerCase()) || e.startsWith("data:image/") || e.startsWith("blob:") : e instanceof File || typeof e == "object" && e.type?.startsWith("image/") : !1;
+}
+function qe(e) {
+  return typeof e == "string" ? e : e instanceof File || typeof e == "object" && e.url ? e.url || URL.createObjectURL(e) : "";
+}
+function Gs(e) {
+  return Array.isArray(e) && e.every((u) => Ye(u));
+}
+function Rs(e) {
+  return Array.isArray(e) ? e.every((u) => et(u)) : !1;
+}
+function et(e) {
+  return typeof e != "string" ? !1 : /^#([0-9A-F]{3}){1,2}$/i.test(e) || /^rgb(a?)\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d\.]+\s*)?\)$/i.test(e) || /^hsl(a?)\(\s*\d+\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%\s*(,\s*[\d\.]+\s*)?\)$/i.test(e) ? !0 : [
+    "red",
+    "blue",
+    "green",
+    "yellow",
+    "orange",
+    "purple",
+    "pink",
+    "brown",
+    "black",
+    "white",
+    "gray",
+    "cyan",
+    "magenta",
+    "lime",
+    "maroon",
+    "navy",
+    "olive",
+    "teal",
+    "silver",
+    "aqua"
+  ].includes(e.toLowerCase());
+}
+function qs(e) {
+  return /<\/?[a-z][\s\S]*>/i.test(e);
+}
+function Zs(e) {
+  return Object.keys(e).reduce((u, r) => (r !== "id" && (u[r] = e[r]), u), {});
+}
+function Js(e, u, r, o, i, t, m, c) {
+  const v = I({});
+  async function n(V) {
+    o.value?.show("loading", t.message.process.loading);
+    try {
+      const x = await m(e.data, V);
+      if (c.isUpdate.value = Number(V), !x) {
+        o.value?.show("error", t.message.notFound);
+        return;
+      }
+      const P = e.base.schema.update ?? e.base.schema.global ?? {};
+      if (v.value = await Ve(
+        x,
+        P,
+        c.isUpdate.value,
+        e.keys?.idKey ?? "id"
+      ), e.base?.justTabel || e.manual?.update || !e.endPoints?.update) {
+        u("edit", v.value, V), o.value?.hide();
+        return;
+      }
+      c.FormModalOpen.value = !0, o.value?.hide();
+    } catch (x) {
+      const P = typeof x == "string" ? x : x instanceof Error ? x.message : JSON.stringify(x, Object.getOwnPropertyNames(x));
+      o.value?.show("error", P || "An unknown error occurred");
+    }
+  }
+  function j() {
+    if (e.base?.justTabel || e.manual?.create || !e.endPoints?.create) {
+      u("create");
+      return;
+    }
+    c.isUpdate.value = null, c.FormModalOpen.value = !0;
+  }
+  async function _(V) {
+    o.value?.show("loading", t.message.process.loading);
+    try {
+      const x = await m(e.data, V);
+      if (c.isUpdate.value = Number(V), !x) {
+        o.value?.show("error", t.message.notFound);
+        return;
+      }
+      if (v.value = await De(
+        x,
+        e.base?.schema.display ?? e.base?.schema.global ?? {}
+      ), e.base.justTabel || e.manual?.display) {
+        u("show", v.value, V), o.value?.hide();
+        return;
+      }
+      c.detailItemModal.value = !0, o.value?.hide();
+    } catch (x) {
+      o.value?.show("error", JSON.stringify(x));
+    }
+  }
+  function F(V) {
+    c.idData.value = V, c.showWarningModel.value = !0;
+  }
+  function C() {
+    c.showWarningModelSelected.value = !0;
+  }
+  function O() {
+    c.showWarningModel.value = !1, c.showWarningModelSelected.value = !1, c.FormModalOpen.value = !1, c.detailItemModal.value = !1, v.value = {}, c.isUpdate.value = null;
+  }
+  const B = async (V) => {
+    const x = c.isUpdate.value !== null, P = x ? e.endPoints?.update : e.endPoints?.create, q = x ? e.validation?.update || null : e.validation?.create || null, le = x ? "update" : "create", Z = x ? t.message.success.update : t.message.success.create, J = x ? t.message.error.update : t.message.error.create;
+    if (!P) {
+      o.value?.show(
+        "error",
+        x ? t.message.error.update : t.message.error.create
+      );
+      return;
+    }
+    if (Array.isArray(c.dataChildDelete.value) && c.dataChildDelete.value.length > 0 && x) {
+      const G = e.base.schema.update ?? e.base.schema.global ?? {};
+      let E = "", te, ne = await m(
+        e.data,
+        c.isUpdate.value
+      ), be, me, ve = !0;
+      for (const se in G) {
+        const X = G[se];
+        if (X.type === "arrayObject") {
+          E = se, te = X.endPoint?.deleteMany ?? e.endPoints?.deleteMany, be = X.DB_NAME ?? e.base.source.DB_NAME, me = X.deleteValidation ?? e.validation?.delete ?? void 0, ve = !0;
+          break;
+        }
+      }
+      if (Array.isArray(v.value[E]))
+        for (let se = 0; se < c.dataChildDelete.value.length; se++) {
+          const X = c.dataChildDelete.value[se];
+          e.keys?.idKey, v.value[E] = v.value[E].filter((Y) => Y?.[e.keys?.idKey ?? "id"] !== X), ne && Array.isArray(ne[E]) && (ne[E] = ne[E].filter((Y) => Y?.[e.keys?.idKey ?? "id"] !== X));
+        }
+      const oe = nt(he(V), he(He(v.value))), re = await L(
+        c.dataChildDelete.value,
+        te,
+        me,
+        be,
+        ve
+      );
+      if (re?.response && oe) {
+        o.value?.show("success", t.message.success.delete), await rt(be, he(He(ne))), await r(), O();
+        return;
+      } else if (!re?.response) {
+        o.value?.show("error", re.message);
+        return;
+      }
+    }
+    try {
+      o.value?.show(
+        "loading",
+        x ? t.message.process.update : t.message.process.create
+      );
+      const G = x ? e.submitOption?.update?.authType ?? e.submitOption?.global?.authType ?? "cookie" : e.submitOption?.create?.authType ?? e.submitOption?.global?.authType ?? "cookie", E = x ? e.submitOption?.update?.token ?? e.submitOption?.global?.token ?? void 0 : e.submitOption?.create?.token ?? e.submitOption?.global?.token ?? void 0, te = x ? e.submitOption?.update?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0 : e.submitOption?.create?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0;
+      await ye({
+        data: he(V),
+        oldData: x ? he(He(v.value)) : void 0,
+        validation: q ?? void 0,
+        endpoint: P,
+        mode: le,
+        token: E,
+        authType: G,
+        customHeaders: te,
+        db: e.base.source.DB_NAME,
+        ...x ? e.submitOption?.update ?? e.submitOption?.global : e.submitOption?.create ?? e.submitOption?.global,
+        demo: e.demo
+      }), e.base.dataTabelCustomDisplay ? u("refreshData") : r(), o.value?.show("success", Z), O();
+    } catch (G) {
+      i(
+        "error",
+        J,
+        Object.entries(G).map(([E, te]) => `${E} : ${te}`)
+      ), o.value?.show("error", J);
+    }
+  };
+  async function M(V, x, P, q, le = !0) {
+    if (e.base.justTabel || e.manual?.delete || !e.endPoints?.delete) {
+      u("delete", V);
+      return;
+    }
+    if (x = x ?? e.endPoints?.delete, P = P ?? e.validation?.delete, q = q ?? e.base?.source.DB_NAME ?? void 0, !x) {
+      o.value?.show("error", t.message.error.delete);
+      return;
+    }
+    const Z = { [e.keys?.idKey ?? "id"]: V };
+    try {
+      o.value?.show("loading", t.message.process.delete);
+      const J = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", G = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, E = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0;
+      await ye({
+        data: Z,
+        validation: P ?? void 0,
+        endpoint: x,
+        mode: "delete",
+        token: G,
+        authType: J,
+        customHeaders: E,
+        db: q,
+        deleteDataDB: le,
+        demo: e.demo,
+        ...e.submitOption?.delete ?? e.submitOption?.global
+      }), e.base?.dataTabelCustomDisplay ? u("refreshData") : r(), o.value?.show("success", t.message.success.delete);
+    } catch (J) {
+      i(
+        "error",
+        t.message.error.delete,
+        Object.entries(J).map(([G, E]) => `${G} : ${E}`)
+      ), o.value?.show("error", t.message.error.delete);
+    } finally {
+      O();
+    }
+  }
+  async function L(V, x, P, q, le = !0) {
+    if (e.base?.justTabel || e.manual?.delete || !e.endPoints?.delete) {
+      u("deleteMany", V);
+      return;
+    }
+    if (x = x ?? e.endPoints?.deleteMany, P = P ?? e.validation?.deleteMany, q = q ?? e.base?.source.DB_NAME ?? void 0, !x) {
+      o.value?.show("error", t.message.error.deleteMany);
+      return;
+    }
+    try {
+      o.value?.show("loading", t.message.process.deleteMany);
+      const Z = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", J = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, G = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0, E = await ye({
+        data: { [e.keys?.idsKey ?? "ids"]: V },
+        validation: P ?? void 0,
+        endpoint: x,
+        mode: "delete",
+        db: q,
+        authType: Z,
+        token: J,
+        customHeaders: G,
+        deleteDataDB: le,
+        demo: e.demo
+      });
+      return c.selectedItems.value = [], e.base?.dataTabelCustomDisplay ? (u("refreshData"), o.value?.show("success", t.message.success.deleteMany), O(), E) : (await r(), o.value?.show("success", t.message.success.deleteMany), O(), E);
+    } catch (Z) {
+      i(
+        "error",
+        t.message.error.deleteMany,
+        Object.entries(Z).map(([J, G]) => `${J} : ${G}`)
+      ), o.value?.show("error", t.message.error.deleteMany);
+    }
+  }
+  return {
+    initialData: v,
+    openEditModal: n,
+    openCreateModal: j,
+    openShowModal: _,
+    openWarningDeleteData: F,
+    openWarningDeleteSelectedData: C,
+    closeModal: O,
+    submitFormData: B,
+    DeleteData: M,
+    DeleteSeletedData: L
+  };
+}
+function Qs(e, u, r, o) {
+  const i = I(""), t = I(1), m = I([]), c = I(!1), v = I(!1), n = I(!1), j = I(null), _ = I(null), F = I("asc"), C = I(!1), O = I(!1), B = I(null), M = I(null), L = ee(() => e.pagination?.itemsPerPage ?? 10), V = ee(() => e.pagination?.maxVisiblePages ?? 5);
+  I(null), I("none");
+  const x = ee(() => {
+    const f = e.keys?.idKey;
+    return e.data.find((A) => A?.[f ?? "id"] === j.value) || {};
+  }), P = ee(() => {
+    const f = e.keys?.idKey ?? "id", A = e.keys?.nameKey ?? "name";
+    return e.data.filter((H) => m.value.includes(H[f])).map((H) => H[A]).join(", ");
+  }), q = ee(() => {
+    let f = (e.base.data ?? []).filter(
+      (A) => Object.values(A).some(
+        (H) => String(H).toLowerCase().includes(i.value.toLowerCase())
+      )
+    );
+    return _.value && f.sort((A, H) => {
+      let p = A[_.value], D = H[_.value];
+      return typeof p == "string" && (p = p.toLowerCase()), typeof D == "string" && (D = D.toLowerCase()), p < D ? F.value === "asc" ? -1 : 1 : p > D ? F.value === "asc" ? 1 : -1 : 0;
+    }), f;
+  }), le = ee(() => {
+    const f = (t.value - 1) * L.value;
+    return q.value.slice(f, f + L.value);
+  }), Z = ee(() => Math.ceil(q.value.length / L.value)), J = ee(() => {
+    const f = [], A = Z.value, H = t.value, p = V.value;
+    if (A <= p + 2) {
+      for (let w = 1; w <= A; w++) f.push(w);
+      return f;
+    }
+    f.push(1);
+    let D = Math.max(2, H - 2), h = Math.min(A - 1, H + 2);
+    D > 2 && f.push("...");
+    for (let w = D; w <= h; w++)
+      f.push(w);
+    return h < A - 1 && f.push("..."), f.push(A), f;
+  });
+  function G() {
+    m.value = c.value ? le.value.map((f) => f?.[e.keys?.idKey ?? "id"]) : [];
+  }
+  function E(f) {
+    _.value === f ? F.value = F.value === "desc" ? "asc" : "desc" : (_.value = f, F.value = "desc");
+  }
+  function te() {
+    t.value > 1 && t.value--;
+  }
+  function ne() {
+    t.value < Z.value && t.value++;
+  }
+  async function be() {
+    if (e.base.source.DB_NAME) {
+      const f = await Ne(e.base.source.DB_NAME);
+      if (e.base.source.connect?.length) {
+        const A = {};
+        return await Promise.all(
+          e.base.source.connect.map(async (H) => {
+            A[H.DB_NAME] = await Ne(H.DB_NAME);
+          })
+        ), f.map((H) => {
+          let p = { ...H };
+          for (const D of e.base.source.connect) {
+            const h = D.key, w = D.connectKey, $ = (A[D.DB_NAME] || []).filter(
+              (T) => Y(T, w) === Y(H, h)
+            );
+            p[D.DB_NAME] = $.length > 0 ? $ : null;
+          }
+          return p;
+        });
+      }
+      return f;
+    } else if (e.base.source.fetchApi?.getAll) {
+      const f = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", A = e.submitOption?.delete?.token ?? e.submitOption?.global?.token, H = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders, p = await ye({
+        mode: "get",
+        endpoint: e.base.source.fetchApi?.getAll,
+        db: e.base.source.DB_NAME,
+        authType: f,
+        token: A,
+        customHeaders: H
+      });
+      if (e.base.source.fetchApi.connect?.length) {
+        const D = {};
+        return await Promise.all(
+          e.base.source.fetchApi.connect.map(async (h) => {
+            const w = await ye({
+              mode: "get",
+              endpoint: h.url,
+              db: e.base.source.DB_NAME,
+              authType: f,
+              token: A,
+              customHeaders: H
+            }), $ = h.valueKey ?? h.url ?? h.key;
+            D[$] = w.data ?? [];
+          })
+        ), !p.data || !Array.isArray(p.data) ? p.data : p.data.map((h) => {
+          let w = { ...h };
+          for (const $ of e.base.source.fetchApi.connect) {
+            const T = $.key, R = $.connectKey, de = $.valueKey ?? $.url ?? $.key, ae = (D[de] || []).filter(
+              (fe) => Y(fe, R) === Y(h, T)
+            );
+            w[de] = ae.length > 0 ? ae : null;
+          }
+          return w;
+        });
+      }
+      return p.data ?? [];
+    } else
+      return;
+  }
+  async function me(f, A) {
+    if (f.connect?.withDB)
+      return await Me(f.connect.withDB.DB_NAME, A);
+    if (f.connect?.withFetch) {
+      const H = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", p = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, D = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0, h = await ye({
+        mode: "get",
+        endpoint: f.connect?.withFetch.url + "/" + A,
+        db: e.base.source.DB_NAME,
+        authType: H,
+        token: p,
+        customHeaders: D
+      });
+      if (h.data)
+        return h.data;
+    } else
+      return;
+  }
+  async function ve(f, A) {
+    return f.find((H) => H[e.keys?.idKey ?? "id"] == A);
+  }
+  let oe = !0, re = null;
+  async function se() {
+    if (oe && r.value?.show("loading", o.message.process.loading), e.base?.dataTabelCustomDisplay && e.base?.dataTabelCustomDisplay.length !== 0) {
+      e.base.data = e.base.dataTabelCustomDisplay, e.data = await be(), await X(), oe && (r.value?.hide(), oe = !1);
+      return;
+    }
+    const f = await be();
+    if (e.data = f, await X(), Array.isArray(f)) {
+      const p = e.keys?.idKey ?? "id";
+      f.sort((D, h) => D.updatedAt && h.updatedAt ? new Date(h.updatedAt).getTime() - new Date(D.updatedAt).getTime() : (h[p] ?? 0) - (D[p] ?? 0)), e.data = f;
+    } else {
+      oe && (r.value?.hide(), oe = !1);
+      return;
+    }
+    const A = e.keys?.idKey, H = e.base.headersTabelDisplay?.length === 0 || e.base.headersTabelDisplay === void 0;
+    e.base.data = await Promise.all(
+      f.map(async (p) => {
+        const D = {};
+        if (A && p[A] != null && (D[A] = p[A], H && (!e.base.headersTabelDisplay?.includes(A) || e.base.headersTabelDisplay === void 0) && (e.base.headersTabelDisplay = [])), e.base.dataTabelDisplay)
+          for (const [h, w] of Object.entries(e.base.dataTabelDisplay))
+            if (typeof w == "string") {
+              const $ = Y(p, w);
+              D[h] = Array.isArray($) ? $.map((T) => ie(T)) : ie($ ?? "-"), H && !e.base.headersTabelDisplay?.includes(h) && e.base.headersTabelDisplay?.push(h);
+            } else {
+              let $ = Y(p, w.valueKey);
+              if ((w.connect?.withDB || w.connect?.withFetch) && $)
+                if (Array.isArray($)) {
+                  const T = await Promise.all(
+                    $.map(async (R) => {
+                      const de = await me(w, R);
+                      return de ? de[w.connect?.withDB?.valueKey ?? w.connect?.withFetch?.valueKey] : R;
+                    })
+                  );
+                  D[h] = T.map((R) => ie(R));
+                } else {
+                  const T = await me(w, $);
+                  T && ($ = T[w.connect.withDB?.valueKey ?? w.connect.withFetch?.valueKey]), D[h] = ie($);
+                }
+              else
+                D[h] = ie($);
+              H && !e.base.headersTabelDisplay?.includes(h) && e.base.headersTabelDisplay?.push(h);
+            }
+        else {
+          let h = 0;
+          for (const [w, $] of Object.entries(p)) {
+            if (w === A) continue;
+            if (h >= 8) break;
+            const T = ke(w);
+            D[T] = ie($), H && !e.base.headersTabelDisplay?.includes(T) && e.base.headersTabelDisplay?.push(T), h++;
+          }
+        }
+        return D;
+      })
+    ), oe && (r.value?.hide(), oe = !1), e.base?.source?.fetchApi?.autoRefresh?.time && (re && clearTimeout(re), re = setTimeout(() => {
+      se();
+    }, e.base.source.fetchApi.autoRefresh.time));
+  }
+  async function X() {
+    const f = {
+      global: e.base.schema.global ?? {},
+      create: e.base.schema.create ?? {},
+      update: e.base.schema.update ?? {},
+      display: e.base.schema.display ?? {}
+    }, A = (h) => ({
+      authType: e.submitOption?.[h]?.authType ?? e.submitOption?.global?.authType ?? "cookie",
+      token: e.submitOption?.[h]?.token ?? e.submitOption?.global?.token,
+      customHeaders: e.submitOption?.[h]?.customHeaders ?? e.submitOption?.global?.customHeaders
+    }), H = async (h) => {
+      const w = h.options?.valueKey ?? "id", $ = h.options?.viewKey ?? "name";
+      let T;
+      if (h.options?.url && (T = await ye({
+        mode: "get",
+        endpoint: h.options.url,
+        ...A("get")
+      }), Array.isArray(T?.data) && (h.options = T.data.map((R) => R[w]) ?? [], h.options?.viewKey ? h.optionsView = T.map((R) => R[$]) ?? [] : h.optionsView = T.map((R) => R[w]) ?? [])), h.options?.DB_NAME) {
+        const R = h.options?.DB_NAME ?? h.optionsView?.DB_NAME;
+        if (T = await Ne(R), Array.isArray(T)) {
+          const de = h.options;
+          de?.DB_NAME && (h.options = T.map((ae) => ae[w]) ?? []), de?.viewKey ? h.optionsView = T.map((ae) => ae[$]) ?? [] : h.optionsView = T.map((ae) => ae[w]) ?? [];
+        }
+      }
+    }, p = (h, w) => {
+      e.data && h.validate?.duplicate === !0 && (h.validate.duplicate = e.data.map(($) => $[w]) ?? []);
+    };
+    async function D(h) {
+      for (const [w, $] of Object.entries(h)) {
+        const T = $?.type;
+        if (T === "select" && await H($), T === "text" && p($, w), T === "optionGroupSchema") {
+          const R = $?.options ?? {};
+          for (const [de, ae] of Object.entries(R))
+            await D(ae);
+        }
+        T === "arrayObject" && $.schema && await D($.schema), T === "object" && $.schema && await D($.schema);
+      }
+    }
+    for (const [h, w] of Object.entries(f))
+      w && await D(w);
+  }
+  function Y(f, A) {
+    if (!(!f || typeof A != "string"))
+      try {
+        const H = A.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let p = f;
+        for (const D of H) {
+          if (p == null) return;
+          if (Array.isArray(p)) {
+            const h = Number(D);
+            isNaN(h) ? (p = p.map((w) => w?.[D]).filter((w) => w !== void 0), p.some((w) => Array.isArray(w)) && (p = p.flat()), p.length === 1 && (p = p[0])) : p = p[h];
+          } else
+            p = p?.[D];
+        }
+        return p;
+      } catch {
+        return "-";
+      }
+  }
+  function ke(f) {
+    return f.replace(/([A-Z])/g, " $1").replace(/[_\-]/g, " ").replace(/\s+/g, " ").trim().replace(/\w\S*/g, (A) => A.charAt(0).toUpperCase() + A.slice(1).toLowerCase());
+  }
+  function ie(f) {
+    if (Array.isArray(f)) {
+      if (f.length === 0) return "Empty";
+      if (typeof f[0] == "string") return f.join(", ");
+      if (typeof f[0] == "object") return `${f.length} item`;
+    }
+    return typeof f == "object" && f !== null ? Object.keys(f).length > 0 ? "Objek" : "Empty" : f != null ? String(f) : "—";
+  }
+  return {
+    searchQuery: i,
+    currentPage: t,
+    selectedItems: m,
+    selectAll: c,
+    showWarningModel: v,
+    showWarningModelSelected: n,
+    idData: j,
+    sortField: _,
+    sortDirection: F,
+    FormModalOpen: C,
+    detailItemModal: O,
+    isUpdate: B,
+    dataChildDelete: M,
+    selectedItem: x,
+    selectedItemNames: P,
+    filteredData: q,
+    paginatedData: le,
+    totalPages: Z,
+    visiblePages: J,
+    toggleAll: G,
+    sortBy: E,
+    prevPage: te,
+    nextPage: ne,
+    summarizeValue: ie,
+    setUpData: se,
+    getValueByPath: Y,
+    toTitleCase: ke,
+    GetDataById: ve
+  };
+}
+const Xs = {
+  idKey: "id",
+  idsKey: "ids"
+}, Ys = {
+  btnInfoActive: !0,
+  searchQueryActive: !0,
+  sortable: !0,
+  createActive: !0,
+  updateActive: !0,
+  deleteActive: !0,
+  deleteManyActive: !0,
+  displayActive: !0
+}, ma = {
+  create: !1,
+  update: !1,
+  delete: !1,
+  deleteMany: !1,
+  display: !1
+}, ed = {
+  itemsPerPage: 5,
+  maxVisiblePages: 5
+}, td = {
+  create: void 0,
+  update: void 0,
+  delete: void 0,
+  deleteMany: void 0
+}, va = {
+  create: void 0,
+  update: void 0,
+  delete: void 0,
+  deleteMany: void 0
+}, ya = {
+  global: {
+    authType: "cookie"
+  }
+}, sd = { class: "jsgd-w-full jsgd-h-full jsgd-flex jsgd-flex-col jsgd-bg-white jsgd-text-slate-800 jsgd-relative jsgd-transition-all dark:jsgd-bg-slate-900 dark:jsgd-text-slate-100" }, dd = { class: "jsgd-flex-1 jsgd-flex jsgd-flex-col jsgd-p-6 jsgd-gap-6 jsgd-box-border" }, ad = { class: "jsgd-flex jsgd-justify-center jsgd-gap-4 jsgd-p-6 jsgd-bg-slate-50 jsgd-rounded-2xl jsgd-shadow-sm jsgd-border jsgd-border-slate-200 min-[512px]:jsgd-flex-col dark:jsgd-bg-slate-800 dark:jsgd-border-slate-700" }, ld = { class: "jsgd-flex jsgd-items-center jsgd-flex-col jsgd-justify-center jsgd-gap-4 min-[512px]:jsgd-flex-row min-[512px]:jsgd-justify-between min-[512px]:jsgd-items-center" }, od = { class: "jsgd-flex jsgd-items-center" }, nd = { class: "jsgd-flex jsgd-gap-3 jsgd-flex-wrap" }, rd = ["disabled"], id = { class: "jsgd-flex jsgd-items-center" }, gd = {
+  key: 0,
+  class: "jsgd-relative jsgd-min-w-[250px]"
+}, ud = ["placeholder"], cd = {
+  key: 0,
+  class: "jsgd-flex jsgd-items-center jsgd-gap-2 jsgd-px-4 jsgd-py-3 jsgd-bg-blue-500 jsgd-text-white jsgd-rounded-lg jsgd-text-sm jsgd-font-medium jsgd-animate-[slideIn_0.3s_ease-out] dark:jsgd-bg-blue-600"
+}, jd = { class: "jsgd-bg-white/20 jsgd-px-2 jsgd-py-1 jsgd-rounded-md jsgd-font-semibold" }, bd = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-col jsgd-items-center jsgd-justify-center jsgd-py-16 jsgd-px-8 jsgd-text-center jsgd-bg-slate-50 jsgd-rounded-2xl jsgd-border jsgd-border-slate-200 dark:jsgd-bg-slate-800 dark:jsgd-border-slate-700"
+}, fd = { class: "jsgd-text-xl jsgd-font-semibold jsgd-text-slate-800 jsgd-mb-2 dark:jsgd-text-slate-100" }, hd = { class: "jsgd-text-slate-500 jsgd-mb-8 jsgd-max-w-[300px] dark:jsgd-text-slate-400" }, md = {
+  key: 1,
+  class: "jsgd-flex jsgd-flex-col jsgd-flex-1 jsgd-gap-6"
+}, vd = { class: "jsgd-flex-1 jsgd-overflow-auto jsgd-rounded-lg jsgd-border jsgd-border-slate-200 jsgd-bg-white jsgd-shadow-sm table-scroll-container dark:jsgd-border-slate-700 dark:jsgd-bg-slate-900" }, yd = { class: "jsgd-w-full jsgd-border-collapse jsgd-bg-white dark:jsgd-bg-slate-900" }, kd = { class: "jsgd-bg-slate-50 jsgd-border-b jsgd-border-slate-200 dark:jsgd-bg-slate-800 dark:jsgd-border-slate-700" }, xd = { class: "jsgd-w-12 jsgd-p-4" }, wd = { class: "jsgd-flex jsgd-items-center jsgd-gap-2" }, pd = ["onClick"], _d = { class: "jsgd-w-48 jsgd-text-xs jsgd-p-4 jsgd-text-right" }, Cd = { class: "jsgd-bg-white dark:jsgd-bg-slate-900" }, Md = { class: "jsgd-text-center" }, Dd = ["value"], Ad = ["innerHTML"], $d = { key: 1 }, Td = {
+  key: 2,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Od = {
+  key: 3,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Hd = {
+  key: 4,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Kd = {
+  key: 5,
+  class: "jsgd-whitespace-nowrap"
+}, Vd = { class: "jsgd-w-12 jsgd-h-12 jsgd-rounded-lg jsgd-overflow-hidden jsgd-border jsgd-border-slate-200 dark:jsgd-border-slate-700" }, Bd = ["src", "alt"], Sd = {
+  key: 6,
+  class: "jsgd-whitespace-nowrap jsgd-flex jsgd-items-center jsgd-gap-1"
+}, Id = ["title"], Ld = {
+  key: 0,
+  class: "jsgd-text-xs jsgd-text-slate-400 jsgd-ml-1 dark:jsgd-text-slate-500"
+}, Nd = {
+  key: 7,
+  class: "jsgd-whitespace-nowrap"
+}, Fd = ["title"], Pd = {
+  key: 8,
+  class: "jsgd-whitespace-nowrap jsgd-flex jsgd-items-center jsgd-gap-1"
+}, Ed = ["src", "alt"], zd = {
+  key: 0,
+  class: "jsgd-text-xs jsgd-text-slate-400 jsgd-ml-1 dark:jsgd-text-slate-500"
+}, Ud = {
+  key: 9,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis"
+}, Wd = {
+  key: 10,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis"
+}, Gd = { class: "jsgd-p-4 jsgd-text-right jsgd-relative jsgd-align-middle" }, Rd = { class: "jsgd-flex jsgd-justify-end jsgd-gap-2" }, qd = ["onClick"], Zd = ["innerHTML"], Jd = { class: "jsgd-hidden md:jsgd-inline" }, Qd = ["onClick"], Xd = ["innerHTML"], Yd = { class: "jsgd-absolute jsgd-bottom-full jsgd-mb-2 jsgd-left-1/2 -jsgd-translate-x-1/2 jsgd-px-2 jsgd-py-1 jsgd-bg-slate-800 jsgd-text-white jsgd-text-xs jsgd-font-medium jsgd-rounded-md jsgd-whitespace-nowrap jsgd-opacity-0 jsgd-invisible jsgd-transition-all jsgd-pointer-events-none group-hover:jsgd-opacity-100 group-hover:jsgd-visible group-hover:-jsgd-translate-y-1 dark:jsgd-bg-slate-700" }, ea = ["onClick"], ta = {
+  key: 0,
+  class: "jsgd-absolute jsgd-z-10 jsgd-right-4 jsgd-top-full jsgd-mt-2 jsgd-w-48 jsgd-bg-white jsgd-rounded-lg jsgd-shadow-xl jsgd-border jsgd-border-slate-200 jsgd-overflow-hidden dark:jsgd-bg-slate-800 dark:jsgd-border-slate-700"
+}, sa = ["onClick"], da = ["innerHTML"], aa = { class: "jsgd-flex jsgd-flex-col jsgd-gap-4 jsgd-items-center jsgd-justify-between jsgd-p-6 jsgd-bg-slate-50 jsgd-rounded-2xl jsgd-border jsgd-border-slate-200 md:jsgd-flex-row dark:jsgd-bg-slate-800 dark:jsgd-border-slate-700" }, la = { class: "jsgd-text-sm jsgd-text-slate-500 dark:jsgd-text-slate-400" }, oa = { class: "jsgd-flex jsgd-items-center jsgd-gap-2" }, na = ["disabled"], ra = { class: "jsgd-flex jsgd-items-center jsgd-gap-1" }, ia = ["onClick", "disabled"], ga = ["disabled"], ua = /* @__PURE__ */ je({
+  __name: "TabelData",
+  props: {
+    base: {},
+    keys: { default: () => Xs },
+    formDesign: {},
+    submitOption: {},
+    customActions: { default: () => [] },
+    feature: { default: () => Ys },
+    pagination: { default: () => ed },
+    validation: { default: () => td },
+    manual: {},
+    endPoints: {},
+    demo: { type: Boolean, default: () => !1 }
+  },
+  emits: ["refreshData", "edit", "create", "show", "delete", "deleteMany", "customAction"],
+  setup(e, { emit: u }) {
+    const r = (K) => typeof K == "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(K), o = (K) => typeof K == "string" && /^\d{4}-\d{2}-\d{2}$/.test(K), i = (K) => typeof K == "string" && /^\d{2}:\d{2}$/.test(K);
+    function t(K, g = "en") {
+      try {
+        const y = new Date(K), b = g === "id" ? "id-ID" : g;
+        return new Intl.DateTimeFormat(b, {
+          dateStyle: "medium",
+          // "18 Okt 2025"
+          timeStyle: "short"
+          // "10.54"
+        }).format(y);
+      } catch {
+        return K;
+      }
+    }
+    function m(K, g = "en") {
+      try {
+        const y = /* @__PURE__ */ new Date(`${K}T00:00:00`), b = g === "id" ? "id-ID" : g;
+        return new Intl.DateTimeFormat(b, {
+          dateStyle: "medium"
+          // "18 Okt 2025"
+        }).format(y);
+      } catch {
+        return K;
+      }
+    }
+    function c(K, g = "en") {
+      try {
+        const [y, b] = K.split(":"), ge = /* @__PURE__ */ new Date();
+        ge.setHours(parseInt(y, 10), parseInt(b, 10), 0, 0);
+        const Ae = g === "id" ? "id-ID" : g;
+        return new Intl.DateTimeFormat(Ae, {
+          timeStyle: "short"
+          // "10.54"
+        }).format(ge);
+      } catch {
+        return K;
+      }
+    }
+    const v = e, n = I({
+      ...v
+    }), j = u, _ = I(null), F = I(), C = ee(() => Qe[v.base?.lang ?? "en"]), {
+      searchQuery: O,
+      currentPage: B,
+      selectedItems: M,
+      selectAll: L,
+      showWarningModel: V,
+      showWarningModelSelected: x,
+      idData: P,
+      FormModalOpen: q,
+      detailItemModal: le,
+      isUpdate: Z,
+      dataChildDelete: J,
+      selectedItem: G,
+      filteredData: E,
+      paginatedData: te,
+      totalPages: ne,
+      visiblePages: be,
+      selectedItemNames: me,
+      toggleAll: ve,
+      sortBy: oe,
+      prevPage: re,
+      nextPage: se,
+      setUpData: X,
+      GetDataById: Y
+    } = Qs(n.value, j, _, C.value), {
+      initialData: ke,
+      openEditModal: ie,
+      openCreateModal: f,
+      openShowModal: A,
+      openWarningDeleteData: H,
+      openWarningDeleteSelectedData: p,
+      closeModal: D,
+      submitFormData: h,
+      DeleteData: w,
+      DeleteSeletedData: $
+    } = Js(
+      n.value,
+      j,
+      X,
+      _,
+      de,
+      C.value,
+      Y,
+      {
+        selectedItems: M,
+        idData: P,
+        isUpdate: Z,
+        FormModalOpen: q,
+        detailItemModal: le,
+        dataChildDelete: J,
+        showWarningModel: V,
+        showWarningModelSelected: x
+      }
+    ), T = I(null);
+    function R(K, g) {
+      j("customAction", { key: K, item: g });
+    }
+    _e(M, (K) => {
+      L.value = K.length === te.value.length && te.value.length > 0;
+    }), _e(T, (K) => {
+      K ? window.addEventListener("click", fe) : window.removeEventListener("click", fe);
+    }), _e(O, () => {
+      B.value = 1;
+    }), _e(
+      () => v.base.dataTabelCustomDisplay || v.base.schema,
+      async () => {
+        Object.assign(n.value, {
+          ...v
+        }), M.value = [], await X();
+      }
+    ), Pe(async () => {
+      Object.assign(n.value, {
+        ...v
+      }), await X();
+    }), at("TableComponents", { ShowAlert: de, loader: _, labels: C });
+    function de(K, g, y) {
+      const b = {
+        type: K,
+        title: g,
+        messages: y
+      };
+      F.value?.addAlert(b);
+    }
+    function ae(K) {
+      T.value === K ? T.value = null : T.value = K;
+    }
+    function fe() {
+      T.value = null;
+    }
+    function xe(K) {
+      const g = [], y = K?.[n.value?.keys?.idKey ?? "id"];
+      if (n.value.customActions)
+        for (const b of n.value.customActions)
+          g.push({
+            key: `custom-${b.key}`,
+            label: b.label,
+            icon: b.icon,
+            class: b.class || "jsgd-bg-gray-500/10 jsgd-text-gray-500 hover:jsgd-bg-gray-500 hover:jsgd-text-white dark:jsgd-text-gray-400 dark:hover:jsgd-bg-gray-600",
+            handler: () => {
+              R(b.key, K), fe();
+            }
+          });
+      return n.value?.feature?.updateActive && g.push({
+        key: "update",
+        label: C.value?.btn?.update,
+        icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M11 5H6C4.89543 5 4 5.89543 4 7V18C4 19.1046 4.89543 20 6 20H17C18.1046 20 19 19.1046 19 18V13M17.5858 3.58579C18.3668 2.80474 19.6332 2.80474 20.4142 3.58579C21.1953 4.36683 21.1953 5.63316 20.4142 6.41421L11.8284 15H9L9 12.1716L17.5858 3.58579Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+        class: "jsgd-bg-blue-500/10 jsgd-text-blue-500 hover:jsgd-bg-blue-500 hover:jsgd-text-white dark:jsgd-text-blue-400 dark:hover:jsgd-bg-blue-600",
+        handler: () => {
+          ie(y), fe();
+        }
+      }), n.value?.feature?.deleteActive && g.push({
+        key: "delete",
+        label: C.value?.btn?.remove,
+        icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 7L18.1327 19.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224C6.81296 21 5.94208 20.1891 5.86732 19.1425L5 7M10 11V17M14 11V17M15 7V4C15 3.44772 14.5523 3 14 3H10C9.44772 3 9 3.44772 9 4V7M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+        class: "jsgd-bg-red-500/10 jsgd-text-red-500 hover:jsgd-bg-red-500 hover:jsgd-text-white dark:jsgd-text-red-400 dark:hover:jsgd-bg-red-600",
+        handler: () => {
+          H(y), fe();
+        }
+      }), n.value?.feature?.displayActive && g.push({
+        key: "display",
+        label: C.value?.btn?.display,
+        icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor" stroke-width="2"/><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2"/></svg>',
+        class: "jsgd-bg-slate-500/10 jsgd-text-slate-500 hover:jsgd-bg-slate-500 hover:jsgd-text-white dark:jsgd-text-slate-400 dark:hover:jsgd-bg-slate-400",
+        handler: () => {
+          A(y), fe();
+        }
+      }), g;
+    }
+    return (K, g) => (d(), a("div", sd, [
+      S(l(it), {
+        ref_key: "loader",
+        ref: _
+      }, null, 512),
+      l(V) ? (d(), ce(l(Re), {
+        key: 0,
+        title: C.value.warning.delete,
+        message: `${l(G).name ?? l(G)[n.value?.keys?.nameKey ?? n.value?.keys?.idKey ?? "id"]}`,
+        onConfirm: g[0] || (g[0] = () => {
+          l(P) !== null && l(w)(l(P));
+        }),
+        onClose: l(D)
+      }, null, 8, ["title", "message", "onClose"])) : N("", !0),
+      l(x) ? (d(), ce(l(Re), {
+        key: 1,
+        title: C.value.warning.deleteMany,
+        message: l(me),
+        onConfirm: g[1] || (g[1] = () => l($)(l(M))),
+        onClose: l(D)
+      }, null, 8, ["title", "message", "onClose"])) : N("", !0),
+      l(le) ? (d(), ce(l(Ss), {
+        key: 2,
+        title: C.value?.title?.display,
+        "close-text": C.value?.btn?.close,
+        schema: n.value?.base?.schema.display ?? n.value?.base?.schema.global ?? {},
+        "form-data": l(ke) ?? {},
+        "value-null-view": !0,
+        onClose: l(D)
+      }, null, 8, ["title", "close-text", "schema", "form-data", "onClose"])) : N("", !0),
+      S(l(Fs), {
+        ref_key: "alert",
+        ref: F
+      }, null, 512),
+      l(q) ? (d(), ce(gt, {
+        key: 3,
+        id: l(Z) ?? null,
+        "is-update": !!l(Z),
+        schema: l(Z) ? n.value.base.schema.update ?? n.value.base.schema.global : n.value.base.schema.create ?? n.value.base.schema.global,
+        "initial-data": l(Z) ? l(ke) : void 0,
+        lang: n.value.base.lang ?? "en",
+        onCancel: g[2] || (g[2] = (y) => q.value = !1),
+        demo: n.value.demo,
+        onDataChildRemove: g[3] || (g[3] = (y) => J.value = y),
+        onSubmit: l(h)
+      }, null, 8, ["id", "is-update", "schema", "initial-data", "lang", "demo", "onSubmit"])) : N("", !0),
+      s("div", dd, [
+        s("div", ad, [
+          s("div", ld, [
+            s("div", od, [
+              s("div", nd, [
+                n.value?.feature?.createActive ? (d(), a("button", {
+                  key: 0,
+                  onClick: g[4] || (g[4] = (y) => l(f)()),
+                  class: "jsgd-flex jsgd-items-center jsgd-gap-2 jsgd-px-6 jsgd-py-3 jsgd-border-none jsgd-rounded-lg jsgd-text-sm jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all jsgd-relative jsgd-overflow-hidden disabled:jsgd-opacity-50 disabled:jsgd-cursor-not-allowed disabled:jsgd-transform-none before:jsgd-content-[''] before:jsgd-absolute before:jsgd-top-0 before:jsgd-left-[-100%] before:jsgd-w-full before:jsgd-h-full before:jsgd-bg-gradient-to-r before:jsgd-from-transparent before:jsgd-via-white/20 before:jsgd-to-transparent before:jsgd-transition-[left] before:jsgd-duration-600 hover:before:jsgd-left-full jsgd-bg-gradient-to-br jsgd-from-blue-500 jsgd-to-blue-600 jsgd-text-white jsgd-shadow-md hover:jsgd-shadow-lg hover:-jsgd-translate-y-0.5 dark:jsgd-from-blue-600 dark:jsgd-to-blue-700"
+                }, [
+                  g[14] || (g[14] = s("span", { class: "jsgd-flex jsgd-items-center jsgd-justify-center" }, [
+                    s("svg", {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none"
+                    }, [
+                      s("path", {
+                        d: "M12 5V19M5 12H19",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      })
+                    ])
+                  ], -1)),
+                  ue(" " + k(C.value?.btn?.add), 1)
+                ])) : N("", !0),
+                l(M).length > 0 && n.value?.feature?.deleteManyActive ? (d(), a("button", {
+                  key: 1,
+                  onClick: g[5] || (g[5] = (y) => l(p)()),
+                  class: Q(["jsgd-flex jsgd-items-center jsgd-gap-2 jsgd-px-6 jsgd-py-3 jsgd-border-none jsgd-rounded-lg jsgd-text-sm jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all jsgd-relative jsgd-overflow-hidden disabled:jsgd-opacity-50 disabled:jsgd-cursor-not-allowed disabled:jsgd-transform-none before:jsgd-content-[''] before:jsgd-absolute before:jsgd-top-0 before:jsgd-left-[-100%] before:jsgd-w-full before:jsgd-h-full before:jsgd-bg-gradient-to-r before:jsgd-from-transparent before:jsgd-via-white/20 before:jsgd-to-transparent before:jsgd-transition-[left] before:jsgd-duration-600 hover:before:jsgd-left-full jsgd-bg-gradient-to-br jsgd-from-red-500 jsgd-to-red-600 jsgd-text-white jsgd-shadow-md hover:jsgd-shadow-lg hover:-jsgd-translate-y-0.5 dark:jsgd-from-red-600 dark:jsgd-to-red-700", {
+                    "jsgd-bg-slate-100 jsgd-text-slate-400 dark:jsgd-bg-slate-700 dark:jsgd-text-slate-500": l(M).length === 0
+                  }]),
+                  disabled: l(M).length === 0
+                }, [
+                  g[15] || (g[15] = s("span", { class: "jsgd-flex jsgd-items-center jsgd-justify-center" }, [
+                    s("svg", {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none"
+                    }, [
+                      s("path", {
+                        d: "M19 7L18.1327 19.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224C6.81296 21 5.94208 20.1891 5.86732 19.1425L5 7M10 11V17M14 11V17M15 7V4C15 3.44772 14.5523 3 14 3H10C9.44772 3 9 3.44772 9 4V7M4 7H20",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      })
+                    ])
+                  ], -1)),
+                  ue(" " + k(C.value?.btn?.deleteMany), 1)
+                ], 10, rd)) : N("", !0)
+              ])
+            ]),
+            s("div", id, [
+              n.value?.feature?.searchQueryActive ? (d(), a("div", gd, [
+                g[16] || (g[16] = s("div", { class: "jsgd-absolute jsgd-left-3 jsgd-top-1/2 -jsgd-translate-y-1/2 jsgd-text-slate-400 jsgd-flex jsgd-items-center jsgd-justify-center dark:jsgd-text-slate-500" }, [
+                  s("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none"
+                  }, [
+                    s("path", {
+                      d: "M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ], -1)),
+                Ie(s("input", {
+                  "onUpdate:modelValue": g[6] || (g[6] = (y) => Le(O) ? O.value = y : null),
+                  type: "text",
+                  placeholder: C.value?.search || "Search...",
+                  class: "jsgd-w-full jsgd-py-3 jsgd-pr-3 jsgd-pl-10 jsgd-bg-white jsgd-border jsgd-border-slate-200 jsgd-rounded-lg jsgd-box-border jsgd-text-slate-800 jsgd-text-sm jsgd-transition-all focus:jsgd-outline-none focus:jsgd-border-blue-500 focus:jsgd-ring-3 focus:jsgd-ring-blue-500/10 dark:jsgd-bg-slate-900 dark:jsgd-border-slate-700 dark:jsgd-text-slate-100 dark:focus:jsgd-border-blue-400",
+                  onKeyup: g[7] || (g[7] = Je((y) => B.value = 1, ["enter"]))
+                }, null, 40, ud), [
+                  [lt, l(O)]
+                ])
+              ])) : N("", !0)
+            ])
+          ]),
+          l(M).length > 0 ? (d(), a("div", cd, [
+            s("span", jd, k(l(M).length), 1),
+            ue(" " + k(l(M).length === 1 ? C.value.selection.selectedOne ?? "item is selected" : C.value.selection.selected ?? "items are selected"), 1)
+          ])) : N("", !0)
+        ]),
+        l(E).length === 0 ? (d(), a("div", bd, [
+          g[18] || (g[18] = s("div", { class: "jsgd-text-slate-400 jsgd-mb-6 jsgd-opacity-70 dark:jsgd-text-slate-500" }, [
+            s("svg", {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 24 24",
+              fill: "none"
+            }, [
+              s("path", {
+                d: "M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H3ZM3 7V5C3 3.89543 3.89543 3 5 3H9",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round"
+              }),
+              s("path", {
+                d: "M15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13Z",
+                stroke: "currentColor",
+                "stroke-width": "2"
+              })
+            ])
+          ], -1)),
+          s("h3", fd, k(C.value?.message?.notFound), 1),
+          s("p", hd, k(C.value?.message?.notFoundDesc || "No data available"), 1),
+          n.value?.feature?.createActive ? (d(), a("button", {
+            key: 0,
+            onClick: g[8] || (g[8] = (y) => l(f)()),
+            class: "jsgd-flex jsgd-items-center jsgd-gap-2 jsgd-px-6 jsgd-py-3 jsgd-border-none jsgd-rounded-lg jsgd-text-sm jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all jsgd-relative jsgd-overflow-hidden disabled:jsgd-opacity-50 disabled:jsgd-cursor-not-allowed disabled:jsgd-transform-none before:jsgd-content-[''] before:jsgd-absolute before:jsgd-top-0 before:jsgd-left-[-100%] before:jsgd-w-full before:jsgd-h-full before:jsgd-bg-gradient-to-r before:jsgd-from-transparent before:jsgd-via-white/20 before:jsgd-to-transparent before:jsgd-transition-[left] before:jsgd-duration-600 hover:before:jsgd-left-full jsgd-bg-gradient-to-br jsgd-from-blue-500 jsgd-to-blue-600 jsgd-text-white jsgd-shadow-md hover:jsgd-shadow-lg hover:-jsgd-translate-y-0.5 jsgd-animate-[pulse_2s_infinite] dark:jsgd-from-blue-600 dark:jsgd-to-blue-700"
+          }, [
+            g[17] || (g[17] = s("span", { class: "jsgd-flex jsgd-items-center jsgd-justify-center" }, [
+              s("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none"
+              }, [
+                s("path", {
+                  d: "M12 5V19M5 12H19",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ])
+            ], -1)),
+            ue(" " + k(C.value?.btn?.add), 1)
+          ])) : N("", !0)
+        ])) : (d(), a("div", md, [
+          s("div", vd, [
+            s("table", yd, [
+              s("thead", kd, [
+                s("tr", null, [
+                  s("th", xd, [
+                    n.value?.feature?.deleteManyActive ? Ie((d(), a("input", {
+                      key: 0,
+                      type: "checkbox",
+                      onChange: g[9] || (g[9] = //@ts-ignore
+                      (...y) => l(ve) && l(ve)(...y)),
+                      "onUpdate:modelValue": g[10] || (g[10] = (y) => Le(L) ? L.value = y : null),
+                      class: "jsgd-w-4 jsgd-h-4 jsgd-border jsgd-border-slate-200 jsgd-rounded-sm jsgd-bg-white jsgd-cursor-pointer jsgd-transition-all checked:jsgd-bg-blue-500 checked:jsgd-border-blue-500 focus:jsgd-outline-none focus:jsgd-ring-3 focus:jsgd-ring-blue-500/10 dark:jsgd-border-slate-700 dark:jsgd-bg-slate-900 dark:checked:jsgd-bg-blue-600 dark:checked:jsgd-border-blue-600"
+                    }, null, 544)), [
+                      [We, l(L)]
+                    ]) : N("", !0)
+                  ]),
+                  (d(!0), a(z, null, W(n.value?.base.headersTabelDisplay, (y, b) => (d(), a("th", {
+                    key: y,
+                    class: Q(["jsgd-p-4 jsgd-text-left jsgd-text-xs jsgd-font-semibold jsgd-text-slate-500 jsgd-uppercase jsgd-tracking-wider jsgd-whitespace-nowrap dark:jsgd-text-slate-400", { "jsgd-hidden md:jsgd-table-cell": b > 0 }])
+                  }, [
+                    s("div", wd, [
+                      ue(k(y) + " ", 1),
+                      n.value?.feature?.sortable ? (d(), a("button", {
+                        key: 0,
+                        onClick: (ge) => l(oe)(y),
+                        class: "jsgd-bg-transparent jsgd-border-none jsgd-text-slate-400 jsgd-cursor-pointer jsgd-p-1 jsgd-rounded-md jsgd-transition-all jsgd-flex jsgd-items-center jsgd-justify-center hover:jsgd-text-slate-800 hover:jsgd-bg-slate-100 dark:jsgd-text-slate-500 dark:hover:jsgd-text-slate-100 dark:hover:jsgd-bg-slate-700"
+                      }, [...g[19] || (g[19] = [
+                        s("svg", {
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none"
+                        }, [
+                          s("path", {
+                            d: "M8 9L12 5L16 9M16 15L12 19L8 15",
+                            stroke: "currentColor",
+                            "stroke-width": "2",
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round"
+                          })
+                        ], -1)
+                      ])], 8, pd)) : N("", !0)
+                    ])
+                  ], 2))), 128)),
+                  s("th", _d, k(C.value?.action || "Actions"), 1)
+                ])
+              ]),
+              s("tbody", Cd, [
+                (d(!0), a(z, null, W(l(te), (y) => (d(), a("tr", {
+                  key: y?.[n.value?.keys?.idKey ?? "id"],
+                  class: "jsgd-border-b jsgd-border-slate-50 jsgd-transition-all hover:jsgd-bg-slate-50 dark:jsgd-border-slate-800 dark:hover:jsgd-bg-slate-800"
+                }, [
+                  s("td", Md, [
+                    n.value?.feature?.deleteManyActive ? Ie((d(), a("input", {
+                      key: 0,
+                      type: "checkbox",
+                      "onUpdate:modelValue": g[11] || (g[11] = (b) => Le(M) ? M.value = b : null),
+                      value: y?.[n.value?.keys?.idKey ?? "id"],
+                      class: "jsgd-w-4 jsgd-h-4 jsgd-border jsgd-border-slate-200 jsgd-rounded-sm jsgd-bg-white jsgd-cursor-pointer jsgd-transition-all checked:jsgd-bg-blue-500 checked:jsgd-border-blue-500 focus:jsgd-outline-none focus:jsgd-ring-3 focus:jsgd-ring-blue-500/10 dark:jsgd-border-slate-700 dark:jsgd-bg-slate-900 dark:checked:jsgd-bg-blue-600 dark:checked:jsgd-border-blue-600"
+                    }, null, 8, Dd)), [
+                      [We, l(M)]
+                    ]) : N("", !0)
+                  ]),
+                  (d(!0), a(z, null, W(l(Zs)(y), (b, ge, Ae) => (d(), a("td", {
+                    key: ge,
+                    class: Q(["jsgd-p-4 jsgd-text-sm jsgd-text-slate-500 jsgd-max-w-[200px] dark:jsgd-text-slate-400", {
+                      "jsgd-hidden md:jsgd-table-cell": Ae > 0,
+                      "jsgd-font-semibold jsgd-text-slate-800 dark:jsgd-text-slate-100": Ae === 0
+                    }])
+                  }, [
+                    l(qs)(b) ? (d(), a("div", {
+                      key: 0,
+                      innerHTML: b,
+                      class: "jsgd-max-w-full jsgd-max-h-16 jsgd-overflow-hidden"
+                    }, null, 8, Ad)) : ge === "status" || ge === "active" ? (d(), a("div", $d, [
+                      s("span", {
+                        class: Q(["jsgd-px-3 jsgd-py-1 jsgd-rounded-full jsgd-text-xs jsgd-font-medium jsgd-inline-block", {
+                          "jsgd-bg-green-500/10 jsgd-text-emerald-500 dark:jsgd-text-emerald-400": b,
+                          "jsgd-bg-red-500/10 jsgd-text-red-500 dark:jsgd-text-red-400": !b
+                        }])
+                      }, k(b ? C.value?.btn.toogle?.active || "Active" : C.value?.btn.toogle?.inactive || "Inactive"), 3)
+                    ])) : r(b) ? (d(), a("div", Td, [
+                      g[20] || (g[20] = s("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        class: "jsgd-shrink-0 jsgd-text-slate-500 dark:jsgd-text-slate-400"
+                      }, [
+                        s("path", {
+                          d: "M8 7V3M16 7V3M4 11H20M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round"
+                        }),
+                        s("path", {
+                          d: "M12 15H12.01M12 18H12.01M16 15H16.01M16 18H16.01M8 15H8.01M8 18H8.01",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round"
+                        })
+                      ], -1)),
+                      s("span", null, k(t(b, n.value.base.lang ?? "en")), 1)
+                    ])) : o(b) ? (d(), a("div", Od, [
+                      g[21] || (g[21] = s("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        class: "jsgd-shrink-0 jsgd-text-slate-500 dark:jsgd-text-slate-400"
+                      }, [
+                        s("path", {
+                          d: "M8 7V3M16 7V3M4 11H20M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round"
+                        })
+                      ], -1)),
+                      s("span", null, k(m(b, n.value.base.lang ?? "en")), 1)
+                    ])) : i(b) ? (d(), a("div", Hd, [
+                      g[22] || (g[22] = s("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        class: "jsgd-shrink-0 jsgd-text-slate-500 dark:jsgd-text-slate-400"
+                      }, [
+                        s("path", {
+                          d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round"
+                        }),
+                        s("path", {
+                          d: "M12 6V12L16 14",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round"
+                        })
+                      ], -1)),
+                      s("span", null, k(c(b, n.value.base.lang ?? "en")), 1)
+                    ])) : l(Ye)(b) ? (d(), a("div", Kd, [
+                      s("div", Vd, [
+                        s("img", {
+                          src: l(qe)(b),
+                          class: "jsgd-w-full jsgd-h-full jsgd-object-cover",
+                          alt: `Preview ${ge}`
+                        }, null, 8, Bd)
+                      ])
+                    ])) : l(Rs)(b) ? (d(), a("div", Sd, [
+                      (d(!0), a(z, null, W(b.slice(0, 3), ($e, Te) => (d(), a("div", {
+                        key: Te,
+                        style: Be({ backgroundColor: $e }),
+                        class: "jsgd-w-6 jsgd-h-6 jsgd-rounded-full jsgd-border-2 jsgd-border-slate-200 jsgd-inline-block jsgd-mr-1 jsgd-cursor-pointer jsgd-transition-all hover:jsgd-scale-110 dark:jsgd-border-slate-700",
+                        title: $e
+                      }, null, 12, Id))), 128)),
+                      b.length > 3 ? (d(), a("span", Ld, "+" + k(b.length - 3), 1)) : N("", !0)
+                    ])) : l(et)(b) ? (d(), a("div", Nd, [
+                      s("div", {
+                        style: Be({ backgroundColor: b }),
+                        class: "jsgd-w-6 jsgd-h-6 jsgd-rounded-full jsgd-border-2 jsgd-border-slate-200 jsgd-inline-block jsgd-mr-1 jsgd-cursor-pointer jsgd-transition-all hover:jsgd-scale-110 jsgd-w-8 jsgd-h-8 dark:jsgd-border-slate-700",
+                        title: b
+                      }, null, 12, Fd)
+                    ])) : l(Gs)(b) ? (d(), a("div", Pd, [
+                      (d(!0), a(z, null, W(b.slice(0, 3), ($e, Te) => (d(), a("div", {
+                        key: Te,
+                        class: "jsgd-w-12 jsgd-h-12 jsgd-rounded-lg jsgd-overflow-hidden jsgd-border jsgd-border-slate-200 jsgd-w-8 jsgd-h-8 jsgd-rounded-md dark:jsgd-border-slate-700"
+                      }, [
+                        s("img", {
+                          src: l(qe)($e),
+                          class: "jsgd-w-full jsgd-h-full jsgd-object-cover",
+                          alt: `Preview ${ge}-${Te}`
+                        }, null, 8, Ed)
+                      ]))), 128)),
+                      b.length > 3 ? (d(), a("span", zd, "+" + k(b.length - 3), 1)) : N("", !0)
+                    ])) : Array.isArray(b) ? (d(), a("div", Ud, k(b.join(", ")), 1)) : (d(), a("div", Wd, k(b), 1))
+                  ], 2))), 128)),
+                  s("td", Gd, [
+                    s("div", Rd, [
+                      xe(y).length <= 3 ? (d(!0), a(z, { key: 0 }, W(xe(y), (b) => (d(), a("button", {
+                        key: b.key,
+                        onClick: b.handler,
+                        class: Q([b.class, "jsgd-flex jsgd-items-center jsgd-gap-1.5 jsgd-px-3 jsgd-py-2 jsgd-border-none jsgd-rounded-lg jsgd-text-xs jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all jsgd-whitespace-nowrap hover:-jsgd-translate-y-px"])
+                      }, [
+                        b.icon ? (d(), a("span", {
+                          key: 0,
+                          class: "jsgd-flex jsgd-items-center jsgd-justify-center jsgd-w-4 jsgd-h-4",
+                          innerHTML: b.icon
+                        }, null, 8, Zd)) : N("", !0),
+                        s("span", Jd, k(b.label), 1)
+                      ], 10, qd))), 128)) : xe(y).length <= 5 ? (d(!0), a(z, { key: 1 }, W(xe(y), (b) => (d(), a("div", {
+                        key: b.key,
+                        class: "jsgd-relative jsgd-group"
+                      }, [
+                        s("button", {
+                          onClick: b.handler,
+                          class: Q([b.class, "jsgd-flex jsgd-items-center jsgd-justify-center jsgd-w-9 jsgd-h-9 jsgd-border-none jsgd-rounded-lg jsgd-cursor-pointer jsgd-transition-all hover:-jsgd-translate-y-px"])
+                        }, [
+                          b.icon ? (d(), a("span", {
+                            key: 0,
+                            class: "jsgd-flex jsgd-items-center jsgd-justify-center jsgd-w-4 jsgd-h-4",
+                            innerHTML: b.icon
+                          }, null, 8, Xd)) : N("", !0)
+                        ], 10, Qd),
+                        s("div", Yd, k(b.label), 1)
+                      ]))), 128)) : (d(), a(z, { key: 2 }, [
+                        s("button", {
+                          onClick: Ze((b) => ae(y?.[n.value?.keys?.idKey ?? "id"]), ["stop"]),
+                          class: "jsgd-flex jsgd-items-center jsgd-justify-center jsgd-w-9 jsgd-h-9 jsgd-border-none jsgd-rounded-lg jsgd-text-xs jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all jsgd-whitespace-nowrap jsgd-bg-slate-500/10 jsgd-text-slate-500 hover:jsgd-bg-slate-500 hover:jsgd-text-white hover:-jsgd-translate-y-px dark:jsgd-text-slate-400 dark:hover:jsgd-bg-slate-600"
+                        }, [...g[23] || (g[23] = [
+                          s("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none"
+                          }, [
+                            s("path", {
+                              d: "M5 12H5.01M12 12H12.01M19 12H19.01",
+                              stroke: "currentColor",
+                              "stroke-width": "2",
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round"
+                            })
+                          ], -1)
+                        ])], 8, ea),
+                        S(we, { name: "jsgd-action-menu" }, {
+                          default: pe(() => [
+                            T.value === y?.[n.value?.keys?.idKey ?? "id"] ? (d(), a("div", ta, [
+                              s("ul", null, [
+                                (d(!0), a(z, null, W(xe(y), (b) => (d(), a("li", {
+                                  key: `dropdown-${b.key}`
+                                }, [
+                                  s("button", {
+                                    onClick: b.handler,
+                                    class: "jsgd-w-full jsgd-flex jsgd-items-center jsgd-gap-3 jsgd-px-4 jsgd-py-2.5 jsgd-text-left jsgd-text-sm jsgd-border-none jsgd-bg-transparent jsgd-cursor-pointer jsgd-transition-colors jsgd-text-slate-700 hover:jsgd-bg-slate-100 dark:jsgd-text-slate-300 dark:hover:jsgd-bg-slate-700/50"
+                                  }, [
+                                    b.icon ? (d(), a("span", {
+                                      key: 0,
+                                      class: "jsgd-flex jsgd-items-center jsgd-justify-center jsgd-w-4 jsgd-h-4",
+                                      innerHTML: b.icon
+                                    }, null, 8, da)) : N("", !0),
+                                    s("span", null, k(b.label), 1)
+                                  ], 8, sa)
+                                ]))), 128))
+                              ])
+                            ])) : N("", !0)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ], 64))
+                    ])
+                  ])
+                ]))), 128))
+              ])
+            ])
+          ]),
+          s("div", aa, [
+            s("div", la, k(n.value?.pagination?.indicator?.displayingText || "Showing") + " " + k((l(B) - 1) * (n.value?.pagination?.itemsPerPage ?? 5) + 1) + " - " + k(Math.min(
+              l(B) * (n.value?.pagination?.itemsPerPage ?? 5),
+              l(E).length
+            )) + " of " + k(l(E).length) + " " + k(n.value?.pagination?.indicator?.dataText || "") + " data ", 1),
+            s("div", oa, [
+              s("button", {
+                onClick: g[12] || (g[12] = //@ts-ignore
+                (...y) => l(re) && l(re)(...y)),
+                disabled: l(B) === 1,
+                class: "jsgd-flex jsgd-items-center jsgd-gap-2 jsgd-px-4 jsgd-py-3 jsgd-bg-white jsgd-border jsgd-border-slate-200 jsgd-rounded-lg jsgd-text-slate-800 jsgd-text-sm jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all hover:jsgd-bg-slate-100 hover:-jsgd-translate-y-px disabled:jsgd-opacity-50 disabled:jsgd-cursor-not-allowed disabled:jsgd-transform-none dark:jsgd-bg-slate-900 dark:jsgd-border-slate-700 dark:jsgd-text-slate-100 dark:hover:jsgd-bg-slate-800"
+              }, [
+                g[24] || (g[24] = s("span", { class: "jsgd-flex jsgd-items-center jsgd-justify-center" }, [
+                  s("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none"
+                  }, [
+                    s("path", {
+                      d: "M15 18L9 12L15 6",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ], -1)),
+                ue(" " + k(C.value?.btn?.prev || "Previous"), 1)
+              ], 8, na),
+              s("div", ra, [
+                (d(!0), a(z, null, W(l(be), (y) => (d(), a("button", {
+                  key: y + "",
+                  onClick: (b) => typeof y == "number" && (B.value = y),
+                  disabled: y === "...",
+                  class: Q([{
+                    "jsgd-bg-blue-500 jsgd-text-white jsgd-border-blue-500 dark:jsgd-bg-blue-600 dark:jsgd-border-blue-600": l(B) === y,
+                    "jsgd-bg-transparent jsgd-border-none jsgd-cursor-default": y === "..."
+                  }, "jsgd-min-w-10 jsgd-h-10 jsgd-flex jsgd-items-center jsgd-justify-center jsgd-bg-white jsgd-border jsgd-border-slate-200 jsgd-rounded-lg jsgd-text-slate-800 jsgd-text-sm jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all hover:jsgd-bg-slate-100 dark:jsgd-bg-slate-900 dark:jsgd-border-slate-700 dark:jsgd-text-slate-100 dark:hover:jsgd-bg-slate-800"])
+                }, k(y), 11, ia))), 128))
+              ]),
+              s("button", {
+                onClick: g[13] || (g[13] = //@ts-ignore
+                (...y) => l(se) && l(se)(...y)),
+                disabled: l(B) === l(ne) || l(ne) === 0,
+                class: "jsgd-flex jsgd-items-center jsgd-gap-2 jsgd-px-4 jsgd-py-3 jsgd-bg-white jsgd-border jsgd-border-slate-200 jsgd-rounded-lg jsgd-text-slate-800 jsgd-text-sm jsgd-font-medium jsgd-cursor-pointer jsgd-transition-all hover:jsgd-bg-slate-100 hover:-jsgd-translate-y-px disabled:jsgd-opacity-50 disabled:jsgd-cursor-not-allowed disabled:jsgd-transform-none dark:jsgd-bg-slate-900 dark:jsgd-border-slate-700 dark:jsgd-text-slate-100 dark:hover:jsgd-bg-slate-800"
+              }, [
+                ue(k(C.value?.btn?.next || "Next") + " ", 1),
+                g[25] || (g[25] = s("span", { class: "jsgd-flex jsgd-items-center jsgd-justify-center" }, [
+                  s("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none"
+                  }, [
+                    s("path", {
+                      d: "M9 18L15 12L9 6",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ], -1))
+              ], 8, ga)
+            ])
+          ])
+        ]))
+      ])
+    ]));
+  }
+}), ka = /* @__PURE__ */ Se(ua, [["__scopeId", "data-v-5adc76fb"]]);
+export {
+  Ke as F,
+  Ss as M,
+  ka as T,
+  Re as W,
+  Ge as _,
+  U as a,
+  fa as b,
+  ha as c,
+  Fs as d,
+  Xs as e,
+  Ys as f,
+  ma as g,
+  ed as h,
+  td as i,
+  va as j,
+  ya as k,
+  Ee as l,
+  jt as m,
+  bt as n,
+  ft as o
+};