@jsg-developer/vue-pack 0.0.1 → 0.0.2

package/dist/TabelData.vue_vue_type_script_setup_true_lang-DcKNY6tx.js

@@ -0,0 +1,2164 @@
+import { defineComponent as ge, createElementBlock as a, openBlock as d, mergeProps as Ve, renderSlot as Re, createTextVNode as re, toDisplayString as y, ref as I, computed as X, inject as Ze, resolveComponent as Je, createCommentVNode as N, createVNode as S, createElementVNode as s, unref as l, normalizeClass as Y, Fragment as G, renderList as R, createBlock as ie, normalizeStyle as Te, onMounted as Be, onUnmounted as Qe, Transition as we, withCtx as _e, withModifiers as Xe, watch as De, nextTick as Ce, withKeys as Ee, toRaw as Me, provide as Ye, withDirectives as Oe, isRef as Ke, vModelText as et, vModelCheckbox as Le } from "vue";
+import tt from "dompurify";
+import { y as ze, aa as Ue, K as ve, a9 as fe, ab as st, J as dt, I as He, L as at, _ as lt } from "./quill.snow-CF-SW6JG.js";
+const nt = ["src", "alt"], aa = /* @__PURE__ */ ge({
+  __name: "BaseImage",
+  props: {
+    src: {},
+    alt: {}
+  },
+  setup(e) {
+    return (u, r) => (d(), a("img", Ve({
+      src: e.src,
+      alt: e.alt,
+      loading: "lazy",
+      decoding: "async",
+      class: "jsgd-object-cover"
+    }, u.$attrs), null, 16, nt));
+  }
+}), ot = { 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" }, z = /* @__PURE__ */ ge({
+  __name: "BaseLabel",
+  props: {
+    label: {}
+  },
+  setup(e) {
+    return (u, r) => (d(), a("label", ot, [
+      Re(u.$slots, "default", {}, () => [
+        re(y(e.label), 1)
+      ])
+    ]));
+  }
+});
+function Se(e = "id-ID", u = "Asia/Jakarta") {
+  let r = e, n = u;
+  try {
+    typeof navigator < "u" && (r = navigator.language || e), n = Intl.DateTimeFormat().resolvedOptions().timeZone || u;
+  } catch {
+  }
+  return { locale: r, timeZone: n };
+}
+function Ie(e, u = "id-ID") {
+  const r = Intl.DateTimeFormat.supportedLocalesOf([e]);
+  return r.length > 0 ? r[0] : u;
+}
+function Ne(e) {
+  return e instanceof Date && !isNaN(e.getTime());
+}
+const rt = (e) => {
+  try {
+    if (!e) return "-";
+    const u = new Date(e);
+    if (!Ne(u)) return e;
+    const { locale: r, timeZone: n } = Se();
+    return u.toLocaleDateString(Ie(r), {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      timeZone: n
+    });
+  } catch {
+    return e;
+  }
+}, it = (e) => {
+  try {
+    if (!e) return "-";
+    const u = /* @__PURE__ */ new Date(`1970-01-01T${e}`);
+    if (!Ne(u)) return e;
+    const { locale: r, timeZone: n } = Se();
+    return u.toLocaleTimeString(Ie(r), {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: n
+    });
+  } catch {
+    return e;
+  }
+}, gt = (e) => {
+  try {
+    if (!e) return "-";
+    const u = new Date(e);
+    if (!Ne(u)) return e;
+    const { locale: r, timeZone: n } = Se();
+    return u.toLocaleString(Ie(r), {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: n
+    });
+  } catch {
+    return e;
+  }
+}, ut = ["id"], ct = { key: 0 }, jt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, bt = { key: 1 }, ft = ["innerHTML"], mt = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, ht = { key: 2 }, vt = ["innerHTML"], yt = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, kt = { key: 3 }, xt = { class: "jsgd-flex jsgd-items-center jsgd-gap-4" }, pt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-font-mono" }, wt = { key: 4 }, _t = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Ct = { key: 5 }, Dt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Mt = { key: 6 }, $t = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, At = { key: 7 }, Tt = { key: 8 }, Ot = { key: 0 }, Kt = ["href"], Ht = {
+  key: 1,
+  class: "jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Vt = { class: "jsgd-text-sm jsgd-text-slate-500 dark:jsgd-text-slate-400" }, Bt = ["href"], St = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, It = { key: 9 }, Nt = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-col jsgd-gap-2"
+}, Lt = ["href"], Ft = {
+  key: 1,
+  class: "jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Pt = { class: "jsgd-text-sm jsgd-text-slate-500 dark:jsgd-text-slate-400" }, Et = ["href"], zt = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, Ut = { key: 10 }, Wt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Gt = { key: 11 }, qt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Rt = { key: 12 }, Zt = ["href"], Jt = { key: 13 }, Qt = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, Xt = { key: 14 }, Yt = {
+  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"
+}, es = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, ts = { key: 15 }, ss = { key: 0 }, ds = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, as = { key: 16 }, ls = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-wrap jsgd-gap-4"
+}, ns = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, os = { key: 17 }, rs = { class: "jsgd-flex jsgd-flex-wrap jsgd-gap-2" }, is = ["title", "onClick"], gs = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, us = { key: 18 }, cs = { class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed" }, js = { key: 19 }, bs = {
+  key: 0,
+  class: "jsgd-flex jsgd-flex-col jsgd-gap-4"
+}, fs = {
+  key: 1,
+  class: "jsgd-text-slate-700 dark:jsgd-text-slate-200 jsgd-leading-relaxed jsgd-italic"
+}, ms = {
+  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"
+}, hs = { class: "jsgd-flex jsgd-flex-col jsgd-gap-4" }, $e = /* @__PURE__ */ ge({
+  __name: "FieldDetailRenderer",
+  props: {
+    field: {},
+    fieldKey: {},
+    formData: {},
+    requiredText: {},
+    valueNullView: { type: Boolean },
+    optionalText: {},
+    lang: {}
+  },
+  emits: ["image-click"],
+  setup(e, { emit: u }) {
+    const r = I(!1), n = e, i = u, t = X(() => n.formData?.[n.fieldKey]), m = X(() => {
+      const K = t.value;
+      return n.valueNullView && n.field.type !== "optionGroupSchema" ? !0 : o(K);
+    }), v = Ze("TableComponents", {
+      labels: I(ze[n.lang ?? "en"])
+    }).labels, o = (K) => K != null && K !== "" && !(Array.isArray(K) && K.length === 0), j = X(() => {
+      let K = n.field.label || n.fieldKey || "";
+      return n.field.type === "optionGroupSchema" ? n.field.label ?? "" : K;
+    }), w = (K) => K instanceof File, F = (K) => URL.createObjectURL(K), _ = (K) => {
+      navigator.clipboard.writeText(K).then(() => console.log("Copied:", K)).catch(console.error);
+    };
+    return (K, B) => {
+      const E = Je("BaseImage");
+      return 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", ct, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", jt, y(t.value || "-"), 1)
+        ])) : e.field.type === "richText" ? (d(), a("div", bt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          t.value ? (d(), a("div", {
+            key: 0,
+            class: "prose-content",
+            innerHTML: t.value
+          }, null, 8, ft)) : (d(), a("p", mt, " - "))
+        ])) : e.field.type === "textArea" ? (d(), a("div", ht, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          t.value ? (d(), a("div", {
+            key: 0,
+            class: "prose-content",
+            innerHTML: t.value
+          }, null, 8, vt)) : (d(), a("p", yt, " - "))
+        ])) : e.field.type === "password" ? (d(), a("div", kt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("div", xt, [
+            s("p", pt, y(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] = (O) => r.value = !r.value)
+            }, y(r.value ? "Hide" : "Show"), 1)) : N("", !0)
+          ])
+        ])) : e.field.type === "date" ? (d(), a("div", wt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", _t, y(t.value ? l(rt)(t.value) : "-"), 1)
+        ])) : e.field.type === "time" ? (d(), a("div", Ct, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", Dt, y(t.value ? l(it)(t.value) : "-"), 1)
+        ])) : e.field.type === "dateTime" ? (d(), a("div", Mt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", $t, y(t.value ? l(gt)(t.value) : "-"), 1)
+        ])) : e.field.type === "toggle" ? (d(), a("div", At, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", {
+            class: Y([
+              "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"
+            ])
+          }, y(t.value ? l(v).btn.toogle.active : l(v).btn.toogle.inactive) + " ⦿ ", 3)
+        ])) : e.field.type === "file" ? (d(), a("div", Tt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          t.value ? (d(), a("div", Ot, [
+            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"
+            }, y(t.value.split("/").pop() || t.value), 9, Kt)) : w(t.value) ? (d(), a("div", Ht, [
+              s("span", null, y(t.value.name), 1),
+              s("span", Vt, "(" + y((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, Bt)
+            ])) : N("", !0)
+          ])) : (d(), a("div", St, " - "))
+        ])) : e.field.type === "fileArray" ? (d(), a("div", It, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          Array.isArray(t.value) && t.value.length ? (d(), a("div", Nt, [
+            (d(!0), a(G, null, R(t.value, (O, T) => (d(), a("div", { key: T }, [
+              typeof O == "string" ? (d(), a("a", {
+                key: 0,
+                href: O,
+                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"
+              }, y(O.split("/").pop() || O), 9, Lt)) : w(O) ? (d(), a("div", Ft, [
+                s("span", null, y(O.name), 1),
+                s("span", Pt, "(" + y((O.size / 1024).toFixed(1)) + " KB)", 1),
+                s("a", {
+                  href: F(O),
+                  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, Et)
+              ])) : N("", !0)
+            ]))), 128))
+          ])) : (d(), a("div", zt, " - "))
+        ])) : e.field.type === "number" ? (d(), a("div", Ut, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", Wt, y(t.value ?? "-"), 1)
+        ])) : e.field.type === "email" ? (d(), a("div", Gt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", qt, y(t.value ?? "-"), 1)
+        ])) : e.field.type === "url" ? (d(), a("div", Rt, [
+          S(l(z), { 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"
+          }, y(t.value ?? "-"), 9, Zt)
+        ])) : e.field.type === "tag" ? (d(), a("div", Jt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", Qt, y(t.value ?? "-"), 1)
+        ])) : e.field.type === "object" ? (d(), a("div", Xt, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          t.value && typeof t.value == "object" && Object.keys(t.value).length ? (d(), a("div", Yt, [
+            (d(!0), a(G, null, R(e.field.schema, (O, T) => (d(), ie(l($e), {
+              key: T,
+              field: O,
+              "field-key": T,
+              "form-data": t.value,
+              "value-null-view": e.valueNullView,
+              "optional-text": e.optionalText,
+              "required-text": e.requiredText,
+              onImageClick: B[1] || (B[1] = (k) => i("image-click", k))
+            }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+          ])) : (d(), a("div", es, " - "))
+        ])) : e.field.type === "image" ? (d(), a("div", ts, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          t.value ? (d(), a("div", ss, [
+            S(E, {
+              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] = (O) => i("image-click", t.value))
+            }, null, 8, ["src"])
+          ])) : (d(), a("div", ds, " - "))
+        ])) : e.field.type === "imageArray" ? (d(), a("div", as, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          Array.isArray(t.value) && t.value.length ? (d(), a("div", ls, [
+            (d(!0), a(G, null, R(t.value, (O, T) => (d(), a("div", { key: T }, [
+              S(E, {
+                src: O,
+                alt: `Image ${T + 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: (k) => i("image-click", O)
+              }, null, 8, ["src", "alt", "onClick"])
+            ]))), 128))
+          ])) : (d(), a("div", ns, " - "))
+        ])) : e.field.type === "color" ? (d(), a("div", os, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("div", rs, [
+            Array.isArray(t.value) && t.value.length ? (d(!0), a(G, { key: 0 }, R(t.value, (O, T) => (d(), a("div", {
+              key: T,
+              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: Te({ backgroundColor: O }),
+              title: O,
+              onClick: (k) => _(O)
+            }, null, 12, is))), 128)) : (d(), a("div", gs, " - "))
+          ])
+        ])) : e.field.type === "select" ? (d(), a("div", us, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          s("p", cs, y(t.value || "-"), 1)
+        ])) : e.field.type === "arrayObject" ? (d(), a("div", js, [
+          S(l(z), { label: j.value }, null, 8, ["label"]),
+          Array.isArray(t.value) && t.value.length ? (d(), a("div", bs, [
+            (d(!0), a(G, null, R(t.value, (O, T) => (d(), a("div", {
+              key: T,
+              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(G, null, R(e.field.schema, (k, L) => (d(), ie(l($e), {
+                key: L,
+                field: k,
+                "field-key": L,
+                "form-data": O,
+                "value-null-view": e.valueNullView,
+                "optional-text": e.optionalText,
+                "required-text": e.requiredText,
+                onImageClick: B[3] || (B[3] = (U) => i("image-click", U))
+              }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+            ]))), 128))
+          ])) : (d(), a("div", fs, " - "))
+        ])) : N("", !0)
+      ], 8, ut)) : e.field.type === "optionGroupSchema" ? (d(), a("div", ms, [
+        e.formData[e.fieldKey] || j.value ? (d(), ie(l(z), {
+          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", hs, [
+          (d(!0), a(G, null, R(e.field.options, (O, T) => (d(), a("div", {
+            key: T,
+            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(z), {
+              label: T,
+              class: "option-group-item-label"
+            }, null, 8, ["label"]),
+            B[5] || (B[5] = s("hr", { class: "option-group-divider" }, null, -1)),
+            (d(!0), a(G, null, R(O, (k, L) => (d(), ie(l($e), {
+              key: L,
+              field: k,
+              "field-key": L,
+              "form-data": e.formData,
+              "value-null-view": e.valueNullView,
+              "optional-text": e.optionalText,
+              "required-text": e.requiredText,
+              onImageClick: B[4] || (B[4] = (U) => i("image-click", U))
+            }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+          ]))), 128))
+        ])
+      ])) : N("", !0);
+    };
+  }
+}), vs = ["src", "alt"], la = /* @__PURE__ */ ge({
+  __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), n = I(!0), i = (m) => new Promise((c, v) => {
+      const o = new Image();
+      o.crossOrigin = "anonymous", o.onload = () => c(o), o.onerror = (j) => v(j), o.src = m;
+    }), t = (m, c) => {
+      const v = document.createElement("canvas"), o = v.getContext("2d");
+      if (!o)
+        return console.error("Gagal mendapatkan konteks canvas 2D."), m.src;
+      v.width = m.width, v.height = m.height, o.drawImage(m, 0, 0);
+      const j = m.width / u.watermarkSize, w = c.height / c.width * j, F = m.width - j - 10, _ = m.height - w - 10;
+      return o.globalAlpha = 0.8, o.drawImage(c, F, _, j, w), o.globalAlpha = 1, v.toDataURL("image/png");
+    };
+    return Be(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 {
+        n.value = !1;
+      }
+    }), (m, c) => (d(), a(G, null, [
+      n.value ? (d(), a("div", Ve({
+        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),
+      !n.value && r.value ? (d(), a("img", Ve({
+        key: 1,
+        loading: "lazy",
+        src: r.value,
+        alt: u.alt
+      }, m.$attrs), null, 16, vs)) : N("", !0)
+    ], 64));
+  }
+}), ys = { class: "modal-header" }, ks = { class: "header-content" }, xs = { class: "title-section" }, ps = { class: "modal-title" }, ws = { class: "modal-body" }, _s = { class: "form-fields-container" }, Cs = { class: "modal-footer" }, Ds = { class: "footer-buttons" }, Ms = { class: "btn-content" }, $s = ["src"], As = /* @__PURE__ */ ge({
+  __name: "ModalDetailData",
+  props: {
+    schema: {},
+    formData: {},
+    valueNullView: { type: Boolean },
+    title: {},
+    closeText: {},
+    requiredText: {},
+    optionalText: {},
+    lang: {}
+  },
+  emits: ["close"],
+  setup(e, { emit: u }) {
+    const r = u, n = I(!1), i = I(""), t = () => r("close"), m = (o) => {
+      i.value = o, n.value = !0;
+    }, c = I(!1), v = () => {
+      c.value = window.innerWidth < 768;
+    };
+    return Be(() => {
+      v(), window.addEventListener("resize", v);
+    }), Qe(() => {
+      window.removeEventListener("resize", v);
+    }), (o, j) => (d(), a(G, null, [
+      S(we, {
+        name: "modal-overlay",
+        appear: ""
+      }, {
+        default: _e(() => [
+          s("div", {
+            class: "modal-overlay",
+            onClick: Xe(t, ["self"])
+          }, [
+            S(we, {
+              name: "modal-container",
+              appear: ""
+            }, {
+              default: _e(() => [
+                s("div", {
+                  class: Y(["modal-container", { "mobile-view": c.value }])
+                }, [
+                  s("div", ys, [
+                    s("div", ks, [
+                      s("div", xs, [
+                        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", ps, y(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", ws, [
+                    s("div", _s, [
+                      (d(!0), a(G, null, R(e.schema, (w, F) => (d(), ie(l($e), {
+                        key: F,
+                        field: w,
+                        "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", Cs, [
+                    s("div", Ds, [
+                      s("button", {
+                        type: "button",
+                        onClick: t,
+                        class: "btn btn-primary"
+                      }, [
+                        s("span", Ms, [
+                          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)),
+                          re(" " + y(e.closeText ?? "Close"), 1)
+                        ])
+                      ])
+                    ])
+                  ])
+                ], 2)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }),
+      S(we, {
+        name: "modal-overlay",
+        appear: ""
+      }, {
+        default: _e(() => [
+          n.value ? (d(), a("div", {
+            key: 0,
+            class: "modal-overlay image-preview-overlay",
+            onClick: j[0] || (j[0] = (w) => n.value = !1)
+          }, [
+            S(we, {
+              name: "modal-container",
+              appear: ""
+            }, {
+              default: _e(() => [
+                s("img", {
+                  src: i.value,
+                  alt: "Preview",
+                  class: "image-preview-content"
+                }, null, 8, $s)
+              ]),
+              _: 1
+            })
+          ])) : N("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}), Ts = /* @__PURE__ */ Ue(As, [["__scopeId", "data-v-a78353a9"]]), Os = ["innerHTML"], na = /* @__PURE__ */ ge({
+  __name: "SafeHtml",
+  props: {
+    html: {}
+  },
+  setup(e) {
+    const u = e, r = X(() => tt.sanitize(u.html));
+    return (n, i) => e.html ? (d(), a("div", {
+      key: 0,
+      innerHTML: r.value
+    }, null, 8, Os)) : N("", !0);
+  }
+}), Ks = { class: "jsgd-sr-only" }, Hs = { class: "jsgd-font-semibold" }, Vs = /* @__PURE__ */ ge({
+  __name: "AlertApp",
+  setup(e, { expose: u }) {
+    const r = I([]), n = I([]), i = I([]);
+    let t = 0;
+    const m = (o) => {
+      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 o === "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` : o === "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 o = 0;
+      i.value = n.value.map((j) => {
+        const w = j?.offsetHeight || 0, F = o;
+        return o += w + 10, F;
+      });
+    }
+    function v(o) {
+      o.id = t++, o.show = !1, r.value.push(o), Ce(() => {
+        o.show = !0, c();
+      }), setTimeout(() => {
+        o.show = !1, Ce(() => {
+          c(), setTimeout(() => {
+            r.value = r.value.filter((j) => j.id !== o.id), Ce(c);
+          }, 200);
+        });
+      }, 5e3);
+    }
+    return De(r, () => {
+      Ce(c);
+    }), u({
+      addAlert: v
+    }), (o, j) => (d(!0), a(G, null, R(r.value, (w, F) => (d(), a("div", {
+      key: w.id,
+      ref_for: !0,
+      ref_key: "alertRefs",
+      ref: n,
+      class: Y(["alert-container", m(w.type)]),
+      style: Te({
+        top: `${i.value[F] ?? 0}px`,
+        transform: `translateX(${w.show ? "0" : "200%"})`
+      }),
+      role: "alert"
+    }, [
+      s("span", {
+        class: Y(["jsgd-shrink-0 jsgd-w-5 jsgd-h-5", [
+          w.type === "error" ? "jsgd-i-mdi-alert-circle" : "jsgd-i-mdi-check-circle",
+          w.type === "error" ? "jsgd-text-red-500 dark:jsgd-text-red-400" : "jsgd-text-green-500 dark:jsgd-text-green-400"
+        ]])
+      }, null, 2),
+      s("span", Ks, y(w.type === "error" ? "Error" : "Success"), 1),
+      s("div", null, [
+        s("span", Hs, y(w.title), 1),
+        s("ul", {
+          class: Y([
+            "jsgd-mt-1 jsgd-pl-5 jsgd-text-sm jsgd-list-disc jsgd-list-inside",
+            w.type === "error" ? "[&::marker]:jsgd-text-red-500" : "[&::marker]:jsgd-text-green-500"
+          ])
+        }, [
+          (d(!0), a(G, null, R(w.messages, (_, K) => (d(), a("li", { key: K }, y(_), 1))), 128))
+        ], 2)
+      ])
+    ], 6))), 128));
+  }
+}), Bs = ["aria-labelledby"], Ss = {
+  id: "dialog-title",
+  class: "jsgd-text-2xl jsgd-font-bold jsgd-text-slate-800 jsgd-mb-3 dark:jsgd-text-slate-100"
+}, Is = {
+  id: "dialog-desc",
+  class: "jsgd-text-slate-500 jsgd-leading-relaxed jsgd-mb-10 dark:jsgd-text-slate-400"
+}, Ns = { class: "jsgd-grid jsgd-grid-cols-2 jsgd-gap-4" }, Ls = /* @__PURE__ */ ge({
+  __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, n = 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] = Ee((m) => n("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: Y([
+            "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: Y(["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", Ss, y(r.title), 1),
+        s("p", Is, y(r.message), 1),
+        s("div", Ns, [
+          s("button", {
+            class: Y([
+              "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) => n("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) => n("close"))
+          }, " Tidak ")
+        ])
+      ], 8, Bs)
+    ], 32));
+  }
+}), Fe = /* @__PURE__ */ Ue(Ls, [["__scopeId", "data-v-d74c76a7"]]);
+async function Ae(e, u, r, n) {
+  const i = {};
+  for (const [t, m] of Object.entries(u)) {
+    const c = m?.type;
+    if (c === "select" && m.DB_NAME && !m.optionsIsNumber) {
+      const o = e[m.baseKey?.base ?? t];
+      if (o !== null) {
+        const j = await ve(m.DB_NAME, o);
+        i[t] = j[m.baseKey.name ?? "name"] ?? "";
+      } else
+        i[t] = "";
+      continue;
+    }
+    if (c === "object") {
+      const o = e[t] || {};
+      i[t] = await Ae(
+        e[t] || {},
+        m.schema || {},
+        o,
+        m.baseKey?.base ?? "id"
+      );
+      continue;
+    }
+    if (c === "optionGroupSchema" && m.options) {
+      if (m.withValue) {
+        const o = e[t];
+        i[t] = await he(o);
+      }
+      for (const [o, j] of Object.entries(
+        m.options
+      ))
+        for (const [w, F] of Object.entries(j)) {
+          const _ = F, K = e[w];
+          if (_.type === "optionGroupSchema" && _.options) {
+            const B = await Ae(
+              e,
+              { [w]: _ },
+              r,
+              n
+            );
+            Object.assign(i, B);
+            continue;
+          }
+          if (_.type === "object") {
+            i[w] = await Ae(
+              e[w] || {},
+              _.schema || {},
+              e[w] || {},
+              _.baseKey?.base ?? "id"
+            );
+            continue;
+          }
+          if (_.type === "select" && _.DB_NAME && !_.optionsIsNumber) {
+            const B = e[_.baseKey?.base ?? w];
+            if (B != null) {
+              const E = _.DB_NAME, O = await ve(E, B);
+              i[w] = O[_.baseKey?.name ?? "name"] ?? void 0;
+            } else
+              i[w] = void 0;
+          } else
+            i[w] = he(K);
+        }
+      continue;
+    }
+    const v = e[t];
+    i[t] = he(v);
+  }
+  return r && e?.[n ?? "id"] && (i[n ?? "id"] = e?.[n ?? "id"]), i;
+}
+async function ye(e, u) {
+  const r = {};
+  console.log(e);
+  for (const [n, i] of Object.entries(u)) {
+    const t = i?.type, m = e[i.baseKey?.base ?? n];
+    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 o = (await ve(i.DB_NAME, m))[i.baseKey.name];
+        r[n] = o;
+      } else
+        r[n] = i.optionsView[c] ?? m;
+      continue;
+    }
+    if (t === "object") {
+      r[n] = await ye(m || {}, i.schema || {});
+      continue;
+    }
+    if (t === "optionGroupSchema") {
+      const c = [];
+      for (const [o, j] of Object.entries(
+        i.options
+      ))
+        c.push(j);
+      const v = await We(e, c);
+      Object.assign(r, v);
+      continue;
+    }
+    if (t === "arrayObject") {
+      const c = [];
+      for (const v of m) {
+        const o = await ye(v, i.schema || {});
+        c.push(o);
+      }
+      r[n] = c;
+      continue;
+    }
+    r[n] = he(m);
+  }
+  return r;
+}
+async function We(e, u) {
+  const r = {};
+  for (const n of u)
+    for (const [i, t] of Object.entries(n)) {
+      const m = t?.type, c = e[t.baseKey?.base ?? i];
+      if (m === "select" && t.optionsView && t.options && c) {
+        const v = t.options.findIndex((o) => o === c);
+        if (!t.optionsView[v] && t.DB_NAME && t.baseKey.name) {
+          const j = (await ve(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, w] of Object.entries(
+          t.options
+        ))
+          v.push(w);
+        const o = await We(e, v);
+        Object.assign(r, o);
+      } else if (m === "object")
+        r[i] = await ye(c || {}, t.schema || {});
+      else if (m === "arrayObject") {
+        const v = [];
+        for (const o of c) {
+          const j = await ye(o, t.schema || {});
+          v.push(j);
+        }
+        r[i] = v;
+        continue;
+      } else
+        r[i] = he(c);
+    }
+  return r;
+}
+function he(e, u) {
+  return e ?? null;
+}
+function ce(e) {
+  const u = Me(e), r = Array.isArray(u) ? [] : {};
+  if (Array.isArray(u))
+    return u.map((n) => n !== null && typeof n == "object" && !(n instanceof File || n instanceof Blob || n instanceof Date) && !Array.isArray(n) ? ce(n) : n);
+  for (const n in u) {
+    const i = u[n];
+    i === void 0 ? r[n] = null : i instanceof File || i instanceof Blob || i instanceof Date ? r[n] = i : typeof i == "string" && (i.trim() === "" || i === "<p><br></p>") || typeof i == "number" && i === 0 ? r[n] = null : Array.isArray(i) ? r[n] = i.map((t) => t !== null && typeof t == "object" && !(t instanceof File || t instanceof Blob || t instanceof Date) && !Array.isArray(t) ? ce(t) : t) : typeof i == "object" && i !== null ? r[n] = ce(i) : r[n] = i;
+  }
+  return r;
+}
+function Ge(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 Pe(e) {
+  return typeof e == "string" ? e : e instanceof File || typeof e == "object" && e.url ? e.url || URL.createObjectURL(e) : "";
+}
+function Fs(e) {
+  return Array.isArray(e) && e.every((u) => Ge(u));
+}
+function Ps(e) {
+  return Array.isArray(e) ? e.every((u) => qe(u)) : !1;
+}
+function qe(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 Es(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 Us(e, u, r, n, i, t, m, c) {
+  const v = I({});
+  async function o(T) {
+    n.value?.show("loading", t.message.process.loading);
+    try {
+      const k = await m(e.data, T);
+      if (c.isUpdate.value = Number(T), !k) {
+        n.value?.show("error", t.message.notFound);
+        return;
+      }
+      const L = e.base.schema.update ?? e.base.schema.global ?? {};
+      if (v.value = await Ae(
+        k,
+        L,
+        c.isUpdate.value,
+        e.keys?.idKey ?? "id"
+      ), e.base?.justTabel || e.manual?.update || !e.endPoints?.update) {
+        u("edit", v.value, T), n.value?.hide();
+        return;
+      }
+      c.FormModalOpen.value = !0, n.value?.hide();
+    } catch (k) {
+      const L = typeof k == "string" ? k : k instanceof Error ? k.message : JSON.stringify(k, Object.getOwnPropertyNames(k));
+      n.value?.show("error", L || "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 w(T) {
+    n.value?.show("loading", t.message.process.loading);
+    try {
+      const k = await m(e.data, T);
+      if (c.isUpdate.value = Number(T), !k) {
+        n.value?.show("error", t.message.notFound);
+        return;
+      }
+      if (v.value = await ye(
+        k,
+        e.base?.schema.display ?? e.base?.schema.global ?? {}
+      ), e.base.justTabel || e.manual?.display) {
+        u("show", v.value, T), n.value?.hide();
+        return;
+      }
+      c.detailItemModal.value = !0, n.value?.hide();
+    } catch (k) {
+      n.value?.show("error", JSON.stringify(k));
+    }
+  }
+  function F(T) {
+    c.idData.value = T, c.showWarningModel.value = !0;
+  }
+  function _() {
+    c.showWarningModelSelected.value = !0;
+  }
+  function K() {
+    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 (T) => {
+    const k = c.isUpdate.value !== null, L = k ? e.endPoints?.update : e.endPoints?.create, U = k ? e.validation?.update || null : e.validation?.create || null, se = k ? "update" : "create", q = k ? t.message.success.update : t.message.success.create, Z = k ? t.message.error.update : t.message.error.create;
+    if (!L) {
+      n.value?.show(
+        "error",
+        k ? t.message.error.update : t.message.error.create
+      );
+      return;
+    }
+    if (Array.isArray(c.dataChildDelete.value) && c.dataChildDelete.value.length > 0 && k) {
+      const W = e.base.schema.update ?? e.base.schema.global ?? {};
+      let P = "", ee, ae = await m(
+        e.data,
+        c.isUpdate.value
+      ), ue, je, be = !0;
+      for (const te in W) {
+        const J = W[te];
+        if (J.type === "arrayObject") {
+          P = te, ee = J.endPoint?.deleteMany ?? e.endPoints?.deleteMany, ue = J.DB_NAME ?? e.base.source.DB_NAME, je = J.deleteValidation ?? e.validation?.delete ?? void 0, be = !0;
+          break;
+        }
+      }
+      if (Array.isArray(v.value[P]))
+        for (let te = 0; te < c.dataChildDelete.value.length; te++) {
+          const J = c.dataChildDelete.value[te];
+          e.keys?.idKey, v.value[P] = v.value[P].filter((Q) => Q?.[e.keys?.idKey ?? "id"] !== J), ae && Array.isArray(ae[P]) && (ae[P] = ae[P].filter((Q) => Q?.[e.keys?.idKey ?? "id"] !== J));
+        }
+      const de = st(ce(T), ce(Me(v.value))), le = await O(
+        c.dataChildDelete.value,
+        ee,
+        je,
+        ue,
+        be
+      );
+      if (le?.response && de) {
+        n.value?.show("success", t.message.success.delete), await dt(ue, ce(Me(ae))), await r(), K();
+        return;
+      } else if (!le?.response) {
+        n.value?.show("error", le.message);
+        return;
+      }
+    }
+    try {
+      n.value?.show(
+        "loading",
+        k ? t.message.process.update : t.message.process.create
+      );
+      const W = k ? e.submitOption?.update?.authType ?? e.submitOption?.global?.authType ?? "cookie" : e.submitOption?.create?.authType ?? e.submitOption?.global?.authType ?? "cookie", P = k ? e.submitOption?.update?.token ?? e.submitOption?.global?.token ?? void 0 : e.submitOption?.create?.token ?? e.submitOption?.global?.token ?? void 0, ee = k ? e.submitOption?.update?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0 : e.submitOption?.create?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0;
+      await fe({
+        data: ce(T),
+        oldData: k ? ce(Me(v.value)) : void 0,
+        validation: U ?? void 0,
+        endpoint: L,
+        mode: se,
+        token: P,
+        authType: W,
+        customHeaders: ee,
+        db: e.base.source.DB_NAME,
+        ...k ? e.submitOption?.update ?? e.submitOption?.global : e.submitOption?.create ?? e.submitOption?.global
+      }), e.base.dataTabelCustomDisplay ? u("refreshData") : r(), n.value?.show("success", q), K();
+    } catch (W) {
+      i(
+        "error",
+        Z,
+        Object.entries(W).map(([P, ee]) => `${P} : ${ee}`)
+      ), n.value?.show("error", Z);
+    }
+  };
+  async function E(T, k, L, U, se = !0) {
+    if (e.base.justTabel || e.manual?.delete || !e.endPoints?.delete) {
+      u("delete", T);
+      return;
+    }
+    if (k = k ?? e.endPoints?.delete, L = L ?? e.validation?.delete, U = U ?? e.base?.source.DB_NAME ?? void 0, !k) {
+      n.value?.show("error", t.message.error.delete);
+      return;
+    }
+    const q = { [e.keys?.idKey ?? "id"]: T };
+    try {
+      n.value?.show("loading", t.message.process.delete);
+      const Z = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", W = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, P = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0;
+      await fe({
+        data: q,
+        validation: L ?? void 0,
+        endpoint: k,
+        mode: "delete",
+        token: W,
+        authType: Z,
+        customHeaders: P,
+        db: U,
+        deleteDataDB: se,
+        ...e.submitOption?.delete ?? e.submitOption?.global
+      }), e.base?.dataTabelCustomDisplay ? u("refreshData") : r(), n.value?.show("success", t.message.success.delete);
+    } catch (Z) {
+      i(
+        "error",
+        t.message.error.delete,
+        Object.entries(Z).map(([W, P]) => `${W} : ${P}`)
+      ), n.value?.show("error", t.message.error.delete);
+    } finally {
+      K();
+    }
+  }
+  async function O(T, k, L, U, se = !0) {
+    if (e.base?.justTabel || e.manual?.delete || !e.endPoints?.delete) {
+      u("deleteMany", T);
+      return;
+    }
+    if (k = k ?? e.endPoints?.deleteMany, L = L ?? e.validation?.deleteMany, U = U ?? e.base?.source.DB_NAME ?? void 0, !k) {
+      n.value?.show("error", t.message.error.deleteMany);
+      return;
+    }
+    try {
+      n.value?.show("loading", t.message.process.deleteMany);
+      const q = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", Z = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, W = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0, P = await fe({
+        data: { [e.keys?.idsKey ?? "ids"]: T },
+        validation: L ?? void 0,
+        endpoint: k,
+        mode: "delete",
+        db: U,
+        authType: q,
+        token: Z,
+        customHeaders: W,
+        deleteDataDB: se
+      });
+      return c.selectedItems.value = [], e.base?.dataTabelCustomDisplay ? (u("refreshData"), n.value?.show("success", t.message.success.deleteMany), K(), P) : (await r(), n.value?.show("success", t.message.success.deleteMany), K(), P);
+    } catch (q) {
+      i(
+        "error",
+        t.message.error.deleteMany,
+        Object.entries(q).map(([Z, W]) => `${Z} : ${W}`)
+      ), n.value?.show("error", t.message.error.deleteMany);
+    }
+  }
+  return {
+    initialData: v,
+    openEditModal: o,
+    openCreateModal: j,
+    openShowModal: w,
+    openWarningDeleteData: F,
+    openWarningDeleteSelectedData: _,
+    closeModal: K,
+    submitFormData: B,
+    DeleteData: E,
+    DeleteSeletedData: O
+  };
+}
+function Ws(e, u, r, n) {
+  const i = I(""), t = I(1), m = I([]), c = I(!1), v = I(!1), o = I(!1), j = I(null), w = I(null), F = I("asc"), _ = I(!1), K = I(!1), B = I(null), E = I(null), O = X(() => e.pagination?.itemsPerPage ?? 10), T = X(() => e.pagination?.maxVisiblePages ?? 5);
+  I(null), I("none");
+  const k = X(() => {
+    const b = e.keys?.idKey;
+    return e.data.find((M) => M?.[b ?? "id"] === j.value) || {};
+  }), L = X(() => {
+    const b = e.keys?.idKey ?? "id", M = e.keys?.nameKey ?? "name";
+    return e.data.filter((H) => m.value.includes(H[b])).map((H) => H[M]).join(", ");
+  }), U = X(() => {
+    let b = (e.base.data ?? []).filter(
+      (M) => Object.values(M).some(
+        (H) => String(H).toLowerCase().includes(i.value.toLowerCase())
+      )
+    );
+    return w.value && b.sort((M, H) => {
+      let p = M[w.value], D = H[w.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;
+    }), b;
+  }), se = X(() => {
+    const b = (t.value - 1) * O.value;
+    return U.value.slice(b, b + O.value);
+  }), q = X(() => Math.ceil(U.value.length / O.value)), Z = X(() => {
+    const b = [], M = q.value, H = t.value, p = T.value;
+    if (M <= p + 2) {
+      for (let x = 1; x <= M; x++) b.push(x);
+      return b;
+    }
+    b.push(1);
+    let D = Math.max(2, H - 2), f = Math.min(M - 1, H + 2);
+    D > 2 && b.push("...");
+    for (let x = D; x <= f; x++)
+      b.push(x);
+    return f < M - 1 && b.push("..."), b.push(M), b;
+  });
+  function W() {
+    m.value = c.value ? se.value.map((b) => b?.[e.keys?.idKey ?? "id"]) : [];
+  }
+  function P(b) {
+    w.value === b ? F.value = F.value === "desc" ? "asc" : "desc" : (w.value = b, F.value = "desc");
+  }
+  function ee() {
+    t.value > 1 && t.value--;
+  }
+  function ae() {
+    t.value < q.value && t.value++;
+  }
+  async function ue() {
+    if (e.base.source.DB_NAME) {
+      const b = await He(e.base.source.DB_NAME);
+      if (e.base.source.connect?.length) {
+        const M = {};
+        return await Promise.all(
+          e.base.source.connect.map(async (H) => {
+            M[H.DB_NAME] = await He(H.DB_NAME);
+          })
+        ), b.map((H) => {
+          let p = { ...H };
+          for (const D of e.base.source.connect) {
+            const f = D.key, x = D.connectKey, $ = (M[D.DB_NAME] || []).filter(
+              (V) => Q(V, x) === Q(H, f)
+            );
+            p[D.DB_NAME] = $.length > 0 ? $ : null;
+          }
+          return p;
+        });
+      }
+      return b;
+    } else if (e.base.source.fetchApi?.getAll) {
+      const b = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", M = e.submitOption?.delete?.token ?? e.submitOption?.global?.token, H = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders, p = await fe({
+        mode: "get",
+        endpoint: e.base.source.fetchApi?.getAll,
+        db: e.base.source.DB_NAME,
+        authType: b,
+        token: M,
+        customHeaders: H
+      });
+      if (e.base.source.fetchApi.connect?.length) {
+        const D = {};
+        return await Promise.all(
+          e.base.source.fetchApi.connect.map(async (f) => {
+            const x = await fe({
+              mode: "get",
+              endpoint: f.url,
+              db: e.base.source.DB_NAME,
+              authType: b,
+              token: M,
+              customHeaders: H
+            }), $ = f.valueKey ?? f.url ?? f.key;
+            D[$] = x.data ?? [];
+          })
+        ), !p.data || !Array.isArray(p.data) ? p.data : p.data.map((f) => {
+          let x = { ...f };
+          for (const $ of e.base.source.fetchApi.connect) {
+            const V = $.key, A = $.connectKey, g = $.valueKey ?? $.url ?? $.key, h = (D[g] || []).filter(
+              (C) => Q(C, A) === Q(f, V)
+            );
+            x[g] = h.length > 0 ? h : null;
+          }
+          return x;
+        });
+      }
+      return p.data ?? [];
+    } else
+      return;
+  }
+  async function je(b, M) {
+    if (b.connect?.withDB)
+      return await ve(b.connect.withDB.DB_NAME, M);
+    if (b.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, f = await fe({
+        mode: "get",
+        endpoint: b.connect?.withFetch.url + "/" + M,
+        db: e.base.source.DB_NAME,
+        authType: H,
+        token: p,
+        customHeaders: D
+      });
+      if (f.data)
+        return f.data;
+    } else
+      return;
+  }
+  async function be(b, M) {
+    return b.find((H) => H[e.keys?.idKey ?? "id"] == M);
+  }
+  let de = !0, le = null;
+  async function te() {
+    if (de && r.value?.show("loading", n.message.process.loading), e.base?.dataTabelCustomDisplay && e.base?.dataTabelCustomDisplay.length !== 0) {
+      e.base.data = e.base.dataTabelCustomDisplay, e.data = await ue(), await J(), de && (r.value?.hide(), de = !1);
+      return;
+    }
+    const b = await ue();
+    if (e.data = b, await J(), Array.isArray(b)) {
+      const p = e.keys?.idKey ?? "id";
+      b.sort((D, f) => D.updatedAt && f.updatedAt ? new Date(f.updatedAt).getTime() - new Date(D.updatedAt).getTime() : (f[p] ?? 0) - (D[p] ?? 0)), e.data = b;
+    } else {
+      de && (r.value?.hide(), de = !1);
+      return;
+    }
+    const M = e.keys?.idKey, H = e.base.headersTabelDisplay?.length === 0 || e.base.headersTabelDisplay === void 0;
+    e.base.data = await Promise.all(
+      b.map(async (p) => {
+        const D = {};
+        if (M && p[M] != null && (D[M] = p[M], H && (!e.base.headersTabelDisplay?.includes(M) || e.base.headersTabelDisplay === void 0) && (e.base.headersTabelDisplay = [])), e.base.dataTabelDisplay)
+          for (const [f, x] of Object.entries(e.base.dataTabelDisplay))
+            if (typeof x == "string") {
+              const $ = Q(p, x);
+              D[f] = Array.isArray($) ? $.map((V) => ne(V)) : ne($ ?? "-"), H && !e.base.headersTabelDisplay?.includes(f) && e.base.headersTabelDisplay?.push(f);
+            } else {
+              let $ = Q(p, x.valueKey);
+              if ((x.connect?.withDB || x.connect?.withFetch) && $)
+                if (Array.isArray($)) {
+                  const V = await Promise.all(
+                    $.map(async (A) => {
+                      const g = await je(x, A);
+                      return g ? g[x.connect?.withDB?.valueKey ?? x.connect?.withFetch?.valueKey] : A;
+                    })
+                  );
+                  D[f] = V.map((A) => ne(A));
+                } else {
+                  const V = await je(x, $);
+                  V && ($ = V[x.connect.withDB?.valueKey ?? x.connect.withFetch?.valueKey]), D[f] = ne($);
+                }
+              else
+                D[f] = ne($);
+              H && !e.base.headersTabelDisplay?.includes(f) && e.base.headersTabelDisplay?.push(f);
+            }
+        else {
+          let f = 0;
+          for (const [x, $] of Object.entries(p)) {
+            if (x === M) continue;
+            if (f >= 8) break;
+            const V = me(x);
+            D[V] = ne($), H && !e.base.headersTabelDisplay?.includes(V) && e.base.headersTabelDisplay?.push(V), f++;
+          }
+        }
+        return D;
+      })
+    ), de && (r.value?.hide(), de = !1), e.base?.source?.fetchApi?.autoRefresh?.time && (le && clearTimeout(le), le = setTimeout(() => {
+      te();
+    }, e.base.source.fetchApi.autoRefresh.time));
+  }
+  async function J() {
+    const b = {
+      global: e.base.schema.global ?? {},
+      create: e.base.schema.create ?? {},
+      update: e.base.schema.update ?? {},
+      display: e.base.schema.display ?? {}
+    }, M = (f) => ({
+      authType: e.submitOption?.[f]?.authType ?? e.submitOption?.global?.authType ?? "cookie",
+      token: e.submitOption?.[f]?.token ?? e.submitOption?.global?.token,
+      customHeaders: e.submitOption?.[f]?.customHeaders ?? e.submitOption?.global?.customHeaders
+    }), H = async (f) => {
+      const x = f.options?.valueKey ?? "id", $ = f.options?.viewKey ?? "name";
+      let V;
+      if (f.options?.url && (V = await fe({
+        mode: "get",
+        endpoint: f.options.url,
+        ...M("get")
+      }), Array.isArray(V?.data) && (f.options = V.data.map((A) => A[x]) ?? [], f.options?.viewKey ? f.optionsView = V.map((A) => A[$]) ?? [] : f.optionsView = V.map((A) => A[x]) ?? [])), f.options?.DB_NAME) {
+        const A = f.options?.DB_NAME ?? f.optionsView?.DB_NAME;
+        if (V = await He(A), Array.isArray(V)) {
+          const g = f.options;
+          g?.DB_NAME && (f.options = V.map((h) => h[x]) ?? []), g?.viewKey ? f.optionsView = V.map((h) => h[$]) ?? [] : f.optionsView = V.map((h) => h[x]) ?? [];
+        }
+      }
+    }, p = (f, x) => {
+      e.data && f.validate?.duplicate === !0 && (f.validate.duplicate = e.data.map(($) => $[x]) ?? []);
+    };
+    async function D(f) {
+      for (const [x, $] of Object.entries(f)) {
+        const V = $?.type;
+        if (V === "select" && await H($), V === "text" && p($, x), V === "optionGroupSchema") {
+          const A = $?.options ?? {};
+          for (const [g, h] of Object.entries(A))
+            await D(h);
+        }
+        V === "arrayObject" && $.schema && await D($.schema), V === "object" && $.schema && await D($.schema);
+      }
+    }
+    for (const [f, x] of Object.entries(b))
+      x && await D(x);
+  }
+  function Q(b, M) {
+    if (!(!b || typeof M != "string"))
+      try {
+        const H = M.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let p = b;
+        for (const D of H) {
+          if (p == null) return;
+          if (Array.isArray(p)) {
+            const f = Number(D);
+            isNaN(f) ? (p = p.map((x) => x?.[D]).filter((x) => x !== void 0), p.some((x) => Array.isArray(x)) && (p = p.flat()), p.length === 1 && (p = p[0])) : p = p[f];
+          } else
+            p = p?.[D];
+        }
+        return p;
+      } catch {
+        return "-";
+      }
+  }
+  function me(b) {
+    return b.replace(/([A-Z])/g, " $1").replace(/[_\-]/g, " ").replace(/\s+/g, " ").trim().replace(/\w\S*/g, (M) => M.charAt(0).toUpperCase() + M.slice(1).toLowerCase());
+  }
+  function ne(b) {
+    if (Array.isArray(b)) {
+      if (b.length === 0) return "Empty";
+      if (typeof b[0] == "string") return b.join(", ");
+      if (typeof b[0] == "object") return `${b.length} item`;
+    }
+    return typeof b == "object" && b !== null ? Object.keys(b).length > 0 ? "Objek" : "Empty" : b != null ? String(b) : "—";
+  }
+  return {
+    searchQuery: i,
+    currentPage: t,
+    selectedItems: m,
+    selectAll: c,
+    showWarningModel: v,
+    showWarningModelSelected: o,
+    idData: j,
+    sortField: w,
+    sortDirection: F,
+    FormModalOpen: _,
+    detailItemModal: K,
+    isUpdate: B,
+    dataChildDelete: E,
+    selectedItem: k,
+    selectedItemNames: L,
+    filteredData: U,
+    paginatedData: se,
+    totalPages: q,
+    visiblePages: Z,
+    toggleAll: W,
+    sortBy: P,
+    prevPage: ee,
+    nextPage: ae,
+    summarizeValue: ne,
+    setUpData: te,
+    getValueByPath: Q,
+    toTitleCase: me,
+    GetDataById: be
+  };
+}
+const Gs = {
+  idKey: "id",
+  idsKey: "ids"
+}, qs = {
+  btnInfoActive: !0,
+  searchQueryActive: !0,
+  sortable: !0,
+  createActive: !0,
+  updateActive: !0,
+  deleteActive: !0,
+  deleteManyActive: !0,
+  displayActive: !0
+}, oa = {
+  create: !1,
+  update: !1,
+  delete: !1,
+  deleteMany: !1,
+  display: !1
+}, Rs = {
+  itemsPerPage: 5,
+  maxVisiblePages: 5
+}, Zs = {
+  create: void 0,
+  update: void 0,
+  delete: void 0,
+  deleteMany: void 0
+}, ra = {
+  create: void 0,
+  update: void 0,
+  delete: void 0,
+  deleteMany: void 0
+}, ia = {
+  global: {
+    authType: "cookie"
+  }
+}, Js = { 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" }, Qs = { class: "jsgd-flex-1 jsgd-flex jsgd-flex-col jsgd-p-6 jsgd-gap-6 jsgd-box-border" }, Xs = { 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" }, Ys = { 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" }, ed = { class: "jsgd-flex jsgd-items-center" }, td = { class: "jsgd-flex jsgd-gap-3 jsgd-flex-wrap" }, sd = ["disabled"], dd = { class: "jsgd-flex jsgd-items-center" }, ad = {
+  key: 0,
+  class: "jsgd-relative jsgd-min-w-[250px]"
+}, ld = ["placeholder"], nd = {
+  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"
+}, od = { class: "jsgd-bg-white/20 jsgd-px-2 jsgd-py-1 jsgd-rounded-md jsgd-font-semibold" }, rd = {
+  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"
+}, id = { class: "jsgd-text-xl jsgd-font-semibold jsgd-text-slate-800 jsgd-mb-2 dark:jsgd-text-slate-100" }, gd = { class: "jsgd-text-slate-500 jsgd-mb-8 jsgd-max-w-[300px] dark:jsgd-text-slate-400" }, ud = {
+  key: 1,
+  class: "jsgd-flex jsgd-flex-col jsgd-flex-1 jsgd-gap-6"
+}, cd = { 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" }, jd = { class: "jsgd-w-full jsgd-border-collapse jsgd-bg-white dark:jsgd-bg-slate-900" }, bd = { class: "jsgd-bg-slate-50 jsgd-border-b jsgd-border-slate-200 dark:jsgd-bg-slate-800 dark:jsgd-border-slate-700" }, fd = { class: "jsgd-w-12 jsgd-p-4" }, md = { class: "jsgd-flex jsgd-items-center jsgd-gap-2" }, hd = ["onClick"], vd = { class: "jsgd-w-48 jsgd-text-xs jsgd-p-4 jsgd-text-right" }, yd = { class: "jsgd-bg-white dark:jsgd-bg-slate-900" }, kd = { class: "jsgd-text-center" }, xd = ["value"], pd = ["innerHTML"], wd = { key: 1 }, _d = {
+  key: 2,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Cd = {
+  key: 3,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Dd = {
+  key: 4,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis jsgd-flex jsgd-items-center jsgd-gap-2"
+}, Md = {
+  key: 5,
+  class: "jsgd-whitespace-nowrap"
+}, $d = { class: "jsgd-w-12 jsgd-h-12 jsgd-rounded-lg jsgd-overflow-hidden jsgd-border jsgd-border-slate-200 dark:jsgd-border-slate-700" }, Ad = ["src", "alt"], Td = {
+  key: 6,
+  class: "jsgd-whitespace-nowrap jsgd-flex jsgd-items-center jsgd-gap-1"
+}, Od = ["title"], Kd = {
+  key: 0,
+  class: "jsgd-text-xs jsgd-text-slate-400 jsgd-ml-1 dark:jsgd-text-slate-500"
+}, Hd = {
+  key: 7,
+  class: "jsgd-whitespace-nowrap"
+}, Vd = ["title"], Bd = {
+  key: 8,
+  class: "jsgd-whitespace-nowrap jsgd-flex jsgd-items-center jsgd-gap-1"
+}, Sd = ["src", "alt"], Id = {
+  key: 0,
+  class: "jsgd-text-xs jsgd-text-slate-400 jsgd-ml-1 dark:jsgd-text-slate-500"
+}, Nd = {
+  key: 9,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis"
+}, Ld = {
+  key: 10,
+  class: "jsgd-whitespace-nowrap jsgd-overflow-hidden jsgd-text-ellipsis"
+}, Fd = { class: "jsgd-p-4 jsgd-text-right" }, Pd = { class: "jsgd-flex jsgd-justify-end jsgd-gap-2" }, Ed = ["onClick"], zd = { class: "jsgd-hidden md:jsgd-inline" }, Ud = ["onClick"], Wd = { class: "jsgd-hidden md:jsgd-inline" }, Gd = ["onClick"], qd = { class: "jsgd-hidden md:jsgd-inline" }, Rd = { 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" }, Zd = { class: "jsgd-text-sm jsgd-text-slate-500 dark:jsgd-text-slate-400" }, Jd = { class: "jsgd-flex jsgd-items-center jsgd-gap-2" }, Qd = ["disabled"], Xd = { class: "jsgd-flex jsgd-items-center jsgd-gap-1" }, Yd = ["onClick", "disabled"], ea = ["disabled"], ga = /* @__PURE__ */ ge({
+  __name: "TabelData",
+  props: {
+    base: {},
+    keys: { default: () => Gs },
+    formDesign: {},
+    submitOption: {},
+    feature: { default: () => qs },
+    pagination: { default: () => Rs },
+    validation: { default: () => Zs },
+    manual: {},
+    endPoints: {}
+  },
+  emits: ["refreshData", "edit", "create", "show", "delete", "deleteMany"],
+  setup(e, { emit: u }) {
+    const r = (A) => typeof A == "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(A), n = (A) => typeof A == "string" && /^\d{4}-\d{2}-\d{2}$/.test(A), i = (A) => typeof A == "string" && /^\d{2}:\d{2}$/.test(A);
+    function t(A, g = "en") {
+      try {
+        const h = new Date(A), C = g === "id" ? "id-ID" : g;
+        return new Intl.DateTimeFormat(C, {
+          dateStyle: "medium",
+          // "18 Okt 2025"
+          timeStyle: "short"
+          // "10.54"
+        }).format(h);
+      } catch {
+        return A;
+      }
+    }
+    function m(A, g = "en") {
+      try {
+        const h = /* @__PURE__ */ new Date(`${A}T00:00:00`), C = g === "id" ? "id-ID" : g;
+        return new Intl.DateTimeFormat(C, {
+          dateStyle: "medium"
+          // "18 Okt 2025"
+        }).format(h);
+      } catch {
+        return A;
+      }
+    }
+    function c(A, g = "en") {
+      try {
+        const [h, C] = A.split(":"), oe = /* @__PURE__ */ new Date();
+        oe.setHours(parseInt(h, 10), parseInt(C, 10), 0, 0);
+        const ke = g === "id" ? "id-ID" : g;
+        return new Intl.DateTimeFormat(ke, {
+          timeStyle: "short"
+          // "10.54"
+        }).format(oe);
+      } catch {
+        return A;
+      }
+    }
+    const v = e, o = I({
+      ...v
+    }), j = u, w = I(null), F = I(), _ = X(() => ze[v.base?.lang ?? "en"]), {
+      searchQuery: K,
+      currentPage: B,
+      selectedItems: E,
+      selectAll: O,
+      showWarningModel: T,
+      showWarningModelSelected: k,
+      idData: L,
+      FormModalOpen: U,
+      detailItemModal: se,
+      isUpdate: q,
+      dataChildDelete: Z,
+      selectedItem: W,
+      filteredData: P,
+      paginatedData: ee,
+      totalPages: ae,
+      visiblePages: ue,
+      selectedItemNames: je,
+      toggleAll: be,
+      sortBy: de,
+      prevPage: le,
+      nextPage: te,
+      setUpData: J,
+      GetDataById: Q
+    } = Ws(o.value, j, w, _.value), {
+      initialData: me,
+      openEditModal: ne,
+      openCreateModal: b,
+      openShowModal: M,
+      openWarningDeleteData: H,
+      openWarningDeleteSelectedData: p,
+      closeModal: D,
+      submitFormData: f,
+      DeleteData: x,
+      DeleteSeletedData: $
+    } = Us(
+      o.value,
+      j,
+      J,
+      w,
+      V,
+      _.value,
+      Q,
+      {
+        selectedItems: E,
+        idData: L,
+        isUpdate: q,
+        FormModalOpen: U,
+        detailItemModal: se,
+        dataChildDelete: Z,
+        showWarningModel: T,
+        showWarningModelSelected: k
+      }
+    );
+    De(E, (A) => {
+      O.value = A.length === ee.value.length && ee.value.length > 0;
+    }), De(K, () => {
+      B.value = 1;
+    }), De(
+      () => v.base.dataTabelCustomDisplay || v.base.schema,
+      async () => {
+        Object.assign(o.value, {
+          ...v
+        }), E.value = [], await J();
+      }
+    ), Be(async () => {
+      Object.assign(o.value, {
+        ...v
+      }), await J();
+    }), Ye("TableComponents", { ShowAlert: V, loader: w, labels: _ });
+    function V(A, g, h) {
+      const C = {
+        type: A,
+        title: g,
+        messages: h
+      };
+      F.value?.addAlert(C);
+    }
+    return (A, g) => (d(), a("div", Js, [
+      S(l(at), {
+        ref_key: "loader",
+        ref: w
+      }, null, 512),
+      l(T) ? (d(), ie(l(Fe), {
+        key: 0,
+        title: _.value.warning.delete,
+        message: `${l(W).name ?? l(W)[o.value?.keys?.nameKey ?? o.value?.keys?.idKey ?? "id"]}`,
+        onConfirm: g[0] || (g[0] = () => {
+          l(L) !== null && l(x)(l(L));
+        }),
+        onClose: l(D)
+      }, null, 8, ["title", "message", "onClose"])) : N("", !0),
+      l(k) ? (d(), ie(l(Fe), {
+        key: 1,
+        title: _.value.warning.deleteMany,
+        message: l(je),
+        onConfirm: g[1] || (g[1] = () => l($)(l(E))),
+        onClose: l(D)
+      }, null, 8, ["title", "message", "onClose"])) : N("", !0),
+      l(se) ? (d(), ie(l(Ts), {
+        key: 2,
+        title: _.value?.title?.display,
+        "close-text": _.value?.btn?.close,
+        schema: o.value?.base?.schema.display ?? o.value?.base?.schema.global ?? {},
+        "form-data": l(me) ?? {},
+        "value-null-view": !0,
+        onClose: l(D)
+      }, null, 8, ["title", "close-text", "schema", "form-data", "onClose"])) : N("", !0),
+      S(l(Vs), {
+        ref_key: "alert",
+        ref: F
+      }, null, 512),
+      l(U) ? (d(), ie(lt, {
+        key: 3,
+        id: l(q) ?? null,
+        "is-update": !!l(q),
+        schema: l(q) ? o.value.base.schema.update ?? o.value.base.schema.global : o.value.base.schema.create ?? o.value.base.schema.global,
+        "initial-data": l(q) ? l(me) : void 0,
+        lang: o.value.base.lang ?? "en",
+        onCancel: g[2] || (g[2] = (h) => U.value = !1),
+        onDataChildRemove: g[3] || (g[3] = (h) => Z.value = h),
+        onSubmit: l(f)
+      }, null, 8, ["id", "is-update", "schema", "initial-data", "lang", "onSubmit"])) : N("", !0),
+      s("div", Qs, [
+        s("div", Xs, [
+          s("div", Ys, [
+            s("div", ed, [
+              s("div", td, [
+                o.value?.feature?.createActive ? (d(), a("button", {
+                  key: 0,
+                  onClick: g[4] || (g[4] = (h) => l(b)()),
+                  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)),
+                  re(" " + y(_.value?.btn?.add), 1)
+                ])) : N("", !0),
+                l(E).length > 0 && o.value?.feature?.deleteManyActive ? (d(), a("button", {
+                  key: 1,
+                  onClick: g[5] || (g[5] = (h) => l(p)()),
+                  class: Y(["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(E).length === 0
+                  }]),
+                  disabled: l(E).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)),
+                  re(" " + y(_.value?.btn?.deleteMany), 1)
+                ], 10, sd)) : N("", !0)
+              ])
+            ]),
+            s("div", dd, [
+              o.value?.feature?.searchQueryActive ? (d(), a("div", ad, [
+                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)),
+                Oe(s("input", {
+                  "onUpdate:modelValue": g[6] || (g[6] = (h) => Ke(K) ? K.value = h : null),
+                  type: "text",
+                  placeholder: _.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] = Ee((h) => B.value = 1, ["enter"]))
+                }, null, 40, ld), [
+                  [et, l(K)]
+                ])
+              ])) : N("", !0)
+            ])
+          ]),
+          l(E).length > 0 ? (d(), a("div", nd, [
+            s("span", od, y(l(E).length), 1),
+            re(" " + y(l(E).length === 1 ? _.value.selection.selectedOne ?? "item is selected" : _.value.selection.selected ?? "items are selected"), 1)
+          ])) : N("", !0)
+        ]),
+        l(P).length === 0 ? (d(), a("div", rd, [
+          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", id, y(_.value?.message?.notFound), 1),
+          s("p", gd, y(_.value?.message?.notFoundDesc || "No data available"), 1),
+          o.value?.feature?.createActive ? (d(), a("button", {
+            key: 0,
+            onClick: g[8] || (g[8] = (h) => l(b)()),
+            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)),
+            re(" " + y(_.value?.btn?.add), 1)
+          ])) : N("", !0)
+        ])) : (d(), a("div", ud, [
+          s("div", cd, [
+            s("table", jd, [
+              s("thead", bd, [
+                s("tr", null, [
+                  s("th", fd, [
+                    o.value?.feature?.deleteManyActive ? Oe((d(), a("input", {
+                      key: 0,
+                      type: "checkbox",
+                      onChange: g[9] || (g[9] = //@ts-ignore
+                      (...h) => l(be) && l(be)(...h)),
+                      "onUpdate:modelValue": g[10] || (g[10] = (h) => Ke(O) ? O.value = h : 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)), [
+                      [Le, l(O)]
+                    ]) : N("", !0)
+                  ]),
+                  (d(!0), a(G, null, R(o.value?.base.headersTabelDisplay, (h, C) => (d(), a("th", {
+                    key: h,
+                    class: Y(["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": C > 0 }])
+                  }, [
+                    s("div", md, [
+                      re(y(h) + " ", 1),
+                      o.value?.feature?.sortable ? (d(), a("button", {
+                        key: 0,
+                        onClick: (oe) => l(de)(h),
+                        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, hd)) : N("", !0)
+                    ])
+                  ], 2))), 128)),
+                  s("th", vd, y(_.value?.action || "Actions"), 1)
+                ])
+              ]),
+              s("tbody", yd, [
+                (d(!0), a(G, null, R(l(ee), (h) => (d(), a("tr", {
+                  key: h?.[o.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", kd, [
+                    o.value?.feature?.deleteManyActive ? Oe((d(), a("input", {
+                      key: 0,
+                      type: "checkbox",
+                      "onUpdate:modelValue": g[11] || (g[11] = (C) => Ke(E) ? E.value = C : null),
+                      value: h?.[o.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, xd)), [
+                      [Le, l(E)]
+                    ]) : N("", !0)
+                  ]),
+                  (d(!0), a(G, null, R(l(zs)(h), (C, oe, ke) => (d(), a("td", {
+                    key: oe,
+                    class: Y(["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": ke > 0,
+                      "jsgd-font-semibold jsgd-text-slate-800 dark:jsgd-text-slate-100": ke === 0
+                    }])
+                  }, [
+                    l(Es)(C) ? (d(), a("div", {
+                      key: 0,
+                      innerHTML: C,
+                      class: "jsgd-max-w-full jsgd-max-h-16 jsgd-overflow-hidden"
+                    }, null, 8, pd)) : oe === "status" || oe === "active" ? (d(), a("div", wd, [
+                      s("span", {
+                        class: Y(["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": C,
+                          "jsgd-bg-red-500/10 jsgd-text-red-500 dark:jsgd-text-red-400": !C
+                        }])
+                      }, y(C ? _.value?.btn.toogle?.active || "Active" : _.value?.btn.toogle?.inactive || "Inactive"), 3)
+                    ])) : r(C) ? (d(), a("div", _d, [
+                      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, y(t(C, o.value.base.lang ?? "en")), 1)
+                    ])) : n(C) ? (d(), a("div", Cd, [
+                      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, y(m(C, o.value.base.lang ?? "en")), 1)
+                    ])) : i(C) ? (d(), a("div", Dd, [
+                      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, y(c(C, o.value.base.lang ?? "en")), 1)
+                    ])) : l(Ge)(C) ? (d(), a("div", Md, [
+                      s("div", $d, [
+                        s("img", {
+                          src: l(Pe)(C),
+                          class: "jsgd-w-full jsgd-h-full jsgd-object-cover",
+                          alt: `Preview ${oe}`
+                        }, null, 8, Ad)
+                      ])
+                    ])) : l(Ps)(C) ? (d(), a("div", Td, [
+                      (d(!0), a(G, null, R(C.slice(0, 3), (xe, pe) => (d(), a("div", {
+                        key: pe,
+                        style: Te({ backgroundColor: xe }),
+                        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: xe
+                      }, null, 12, Od))), 128)),
+                      C.length > 3 ? (d(), a("span", Kd, "+" + y(C.length - 3), 1)) : N("", !0)
+                    ])) : l(qe)(C) ? (d(), a("div", Hd, [
+                      s("div", {
+                        style: Te({ backgroundColor: C }),
+                        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: C
+                      }, null, 12, Vd)
+                    ])) : l(Fs)(C) ? (d(), a("div", Bd, [
+                      (d(!0), a(G, null, R(C.slice(0, 3), (xe, pe) => (d(), a("div", {
+                        key: pe,
+                        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(Pe)(xe),
+                          class: "jsgd-w-full jsgd-h-full jsgd-object-cover",
+                          alt: `Preview ${oe}-${pe}`
+                        }, null, 8, Sd)
+                      ]))), 128)),
+                      C.length > 3 ? (d(), a("span", Id, "+" + y(C.length - 3), 1)) : N("", !0)
+                    ])) : Array.isArray(C) ? (d(), a("div", Nd, y(C.join(", ")), 1)) : (d(), a("div", Ld, y(C), 1))
+                  ], 2))), 128)),
+                  s("td", Fd, [
+                    s("div", Pd, [
+                      o.value?.feature?.updateActive ? (d(), a("button", {
+                        key: 0,
+                        onClick: (C) => l(ne)(h?.[o.value?.keys?.idKey ?? "id"]),
+                        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 jsgd-bg-blue-500/10 jsgd-text-blue-500 hover:jsgd-bg-blue-500 hover:jsgd-text-white hover:-jsgd-translate-y-px dark:jsgd-text-blue-400 dark:hover:jsgd-bg-blue-600"
+                      }, [
+                        g[23] || (g[23] = 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: "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"
+                            })
+                          ])
+                        ], -1)),
+                        s("span", zd, y(_.value?.btn?.update), 1)
+                      ], 8, Ed)) : N("", !0),
+                      o.value?.feature?.deleteActive ? (d(), a("button", {
+                        key: 1,
+                        onClick: (C) => l(H)(h?.[o.value?.keys?.idKey ?? "id"]),
+                        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 jsgd-bg-red-500/10 jsgd-text-red-500 hover:jsgd-bg-red-500 hover:jsgd-text-white hover:-jsgd-translate-y-px dark:jsgd-text-red-400 dark:hover:jsgd-bg-red-600"
+                      }, [
+                        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: "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)),
+                        s("span", Wd, y(_.value?.btn?.remove), 1)
+                      ], 8, Ud)) : N("", !0),
+                      o.value?.feature?.displayActive ? (d(), a("button", {
+                        key: 2,
+                        onClick: (C) => l(M)(h?.[o.value?.keys?.idKey ?? "id"]),
+                        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 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-400"
+                      }, [
+                        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: "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"
+                            }),
+                            s("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"
+                            })
+                          ])
+                        ], -1)),
+                        s("span", qd, y(_.value?.btn?.display), 1)
+                      ], 8, Gd)) : N("", !0)
+                    ])
+                  ])
+                ]))), 128))
+              ])
+            ])
+          ]),
+          s("div", Rd, [
+            s("div", Zd, y(o.value?.pagination?.indicator?.displayingText || "Showing") + " " + y((l(B) - 1) * (o.value?.pagination?.itemsPerPage ?? 5) + 1) + " - " + y(Math.min(
+              l(B) * (o.value?.pagination?.itemsPerPage ?? 5),
+              l(P).length
+            )) + " of " + y(l(P).length) + " " + y(o.value?.pagination?.indicator?.dataText || "") + " data ", 1),
+            s("div", Jd, [
+              s("button", {
+                onClick: g[12] || (g[12] = //@ts-ignore
+                (...h) => l(le) && l(le)(...h)),
+                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[26] || (g[26] = 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)),
+                re(" " + y(_.value?.btn?.prev || "Previous"), 1)
+              ], 8, Qd),
+              s("div", Xd, [
+                (d(!0), a(G, null, R(l(ue), (h) => (d(), a("button", {
+                  key: h + "",
+                  onClick: (C) => typeof h == "number" && (B.value = h),
+                  disabled: h === "...",
+                  class: Y([{
+                    "jsgd-bg-blue-500 jsgd-text-white jsgd-border-blue-500 dark:jsgd-bg-blue-600 dark:jsgd-border-blue-600": l(B) === h,
+                    "jsgd-bg-transparent jsgd-border-none jsgd-cursor-default": h === "..."
+                  }, "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"])
+                }, y(h), 11, Yd))), 128))
+              ]),
+              s("button", {
+                onClick: g[13] || (g[13] = //@ts-ignore
+                (...h) => l(te) && l(te)(...h)),
+                disabled: l(B) === l(ae) || l(ae) === 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"
+              }, [
+                re(y(_.value?.btn?.next || "Next") + " ", 1),
+                g[27] || (g[27] = 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, ea)
+            ])
+          ])
+        ]))
+      ])
+    ]));
+  }
+});
+export {
+  Ts as M,
+  Fe as W,
+  ga as _,
+  aa as a,
+  z as b,
+  $e as c,
+  la as d,
+  na as e,
+  Vs as f,
+  Gs as g,
+  qs as h,
+  oa as i,
+  Rs as j,
+  Zs as k,
+  ra as l,
+  ia as m,
+  Se as n,
+  rt as o,
+  it as p,
+  gt as q
+};