@jsg-developer/vue-pack 0.0.1

package/dist/TabelData-fKFaSnkC.js

@@ -0,0 +1,2142 @@
+import { defineComponent as ue, createElementBlock as s, openBlock as n, mergeProps as Ve, renderSlot as qe, createTextVNode as oe, toDisplayString as k, ref as V, computed as X, inject as Ge, createCommentVNode as L, createVNode as I, createElementVNode as a, unref as l, normalizeClass as re, Fragment as W, renderList as q, createBlock as ce, normalizeStyle as je, onMounted as Se, onUnmounted as Qe, Transition as De, withCtx as Me, withModifiers as Je, watch as Ae, nextTick as $e, withKeys as ze, toRaw as Te, provide as Xe, withDirectives as He, isRef as Ke, vModelText as Ye, vModelCheckbox as Fe } from "vue";
+import { aa as me, m as Ue, ab as et, y as ke, a9 as fe, ac as tt, x as at, w as Be, L as nt, F as st } from "./TabelData.vue_vue_type_style_index_0_scoped_76b9b7a6_lang-Dtm1AO8H.js";
+const it = ["src", "alt"], lt = /* @__PURE__ */ ue({
+  __name: "BaseImage",
+  props: {
+    src: {},
+    alt: {}
+  },
+  setup(e) {
+    return (d, r) => (n(), s("img", Ve({
+      src: e.src,
+      alt: e.alt,
+      loading: "lazy",
+      decoding: "async",
+      class: "image-cover"
+    }, d.$attrs), null, 16, it));
+  }
+}), ys = /* @__PURE__ */ me(lt, [["__scopeId", "data-v-42adc665"]]), ot = { class: "base-label" }, rt = /* @__PURE__ */ ue({
+  __name: "BaseLabel",
+  props: {
+    label: {}
+  },
+  setup(e) {
+    return (d, r) => (n(), s("label", ot, [
+      qe(d.$slots, "default", {}, () => [
+        oe(k(e.label), 1)
+      ], !0)
+    ]));
+  }
+}), P = /* @__PURE__ */ me(rt, [["__scopeId", "data-v-1f7d7c4b"]]);
+function Ie(e = "id-ID", d = "Asia/Jakarta") {
+  let r = e, o = d;
+  try {
+    typeof navigator < "u" && (r = navigator.language || e), o = Intl.DateTimeFormat().resolvedOptions().timeZone || d;
+  } catch {
+  }
+  return { locale: r, timeZone: o };
+}
+function Le(e, d = "id-ID") {
+  const r = Intl.DateTimeFormat.supportedLocalesOf([e]);
+  return r.length > 0 ? r[0] : d;
+}
+function Ne(e) {
+  return e instanceof Date && !isNaN(e.getTime());
+}
+const ct = (e) => {
+  try {
+    if (!e) return "-";
+    const d = new Date(e);
+    if (!Ne(d)) return e;
+    const { locale: r, timeZone: o } = Ie();
+    return d.toLocaleDateString(Le(r), {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      timeZone: o
+    });
+  } catch {
+    return e;
+  }
+}, ut = (e) => {
+  try {
+    if (!e) return "-";
+    const d = /* @__PURE__ */ new Date(`1970-01-01T${e}`);
+    if (!Ne(d)) return e;
+    const { locale: r, timeZone: o } = Ie();
+    return d.toLocaleTimeString(Le(r), {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: o
+    });
+  } catch {
+    return e;
+  }
+}, dt = (e) => {
+  try {
+    if (!e) return "-";
+    const d = new Date(e);
+    if (!Ne(d)) return e;
+    const { locale: r, timeZone: o } = Ie();
+    return d.toLocaleString(Le(r), {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: o
+    });
+  } catch {
+    return e;
+  }
+}, vt = ["id"], mt = { key: 0 }, ht = { class: "field-value" }, yt = { key: 1 }, ft = ["innerHTML"], bt = {
+  key: 1,
+  class: "field-value"
+}, gt = { key: 2 }, kt = ["innerHTML"], wt = {
+  key: 1,
+  class: "field-value"
+}, pt = { key: 3 }, _t = { class: "password-wrapper" }, Ct = { class: "password-text" }, Dt = { key: 4 }, Mt = { class: "field-value" }, $t = { key: 5 }, At = { class: "field-value" }, Tt = { key: 6 }, xt = { class: "field-value" }, Ot = { key: 7 }, jt = { key: 8 }, Ht = { key: 0 }, Kt = ["href"], Bt = {
+  key: 1,
+  class: "file-info"
+}, Vt = { class: "file-size" }, St = ["href"], It = {
+  key: 1,
+  class: "no-value"
+}, Lt = { key: 9 }, Nt = {
+  key: 0,
+  class: "file-array-container"
+}, Ft = ["href"], Pt = {
+  key: 1,
+  class: "file-info"
+}, Et = { class: "file-size" }, zt = ["href"], Ut = {
+  key: 1,
+  class: "no-value"
+}, Wt = { key: 10 }, Rt = { class: "field-value" }, Zt = { key: 11 }, qt = { class: "field-value" }, Gt = { key: 12 }, Qt = ["href"], Jt = { key: 13 }, Xt = { class: "field-value" }, Yt = { key: 14 }, ea = {
+  key: 0,
+  class: "object-container"
+}, ta = {
+  key: 1,
+  class: "no-value"
+}, aa = { key: 15 }, na = { key: 0 }, sa = ["src"], ia = {
+  key: 1,
+  class: "no-value"
+}, la = { key: 16 }, oa = {
+  key: 0,
+  class: "image-array-container"
+}, ra = ["src", "alt", "onClick"], ca = {
+  key: 1,
+  class: "no-value"
+}, ua = { key: 17 }, da = { class: "color-container" }, va = ["title", "onClick"], ma = {
+  key: 1,
+  class: "no-value"
+}, ha = { key: 18 }, ya = { class: "field-value" }, fa = { key: 19 }, ba = {
+  key: 0,
+  class: "array-object-container"
+}, ga = {
+  key: 1,
+  class: "no-value"
+}, ka = {
+  key: 1,
+  class: "field-wrapper"
+}, wa = { class: "option-group-grid" }, pa = /* @__PURE__ */ ue({
+  __name: "FieldDetailRenderer",
+  props: {
+    field: {},
+    fieldKey: {},
+    formData: {},
+    requiredText: {},
+    valueNullView: { type: Boolean },
+    optionalText: {},
+    lang: {}
+  },
+  emits: ["image-click"],
+  setup(e, { emit: d }) {
+    const r = V(!1), o = e, c = d, t = X(() => o.formData?.[o.fieldKey]), h = X(() => {
+      const b = t.value;
+      return o.valueNullView && o.field.type !== "optionGroupSchema" ? !0 : b != null && b !== "";
+    }), y = Ge("TableComponents", {
+      labels: V(Ue[o.lang ?? "en"])
+    }).labels, i = X(() => {
+      let b = o.field.label || o.fieldKey || "";
+      return o.field.type === "optionGroupSchema" ? o.field.label ?? "" : b;
+    }), C = (b) => b instanceof File, O = (b) => URL.createObjectURL(b), F = (b) => {
+      navigator.clipboard.writeText(b).then(() => console.log("Copied:", b)).catch(console.error);
+    };
+    return (b, S) => h.value ? (n(), s("div", {
+      key: 0,
+      class: "field-wrapper",
+      id: e.fieldKey
+    }, [
+      e.field.type === "text" ? (n(), s("div", mt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", ht, k(t.value || "-"), 1)
+      ])) : e.field.type === "richText" ? (n(), s("div", yt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        t.value ? (n(), s("div", {
+          key: 0,
+          class: "prose-content",
+          innerHTML: t.value
+        }, null, 8, ft)) : (n(), s("p", bt, "-"))
+      ])) : e.field.type === "textArea" ? (n(), s("div", gt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        t.value ? (n(), s("div", {
+          key: 0,
+          class: "prose-content",
+          innerHTML: t.value
+        }, null, 8, kt)) : (n(), s("p", wt, "-"))
+      ])) : e.field.type === "password" ? (n(), s("div", pt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("div", _t, [
+          a("p", Ct, k(r.value ? t.value ?? "-" : t.value ? "•".repeat(String(t.value).length) : "-"), 1),
+          t.value ? (n(), s("button", {
+            key: 0,
+            type: "button",
+            class: "toggle-visibility-button",
+            onClick: S[0] || (S[0] = ($) => r.value = !r.value)
+          }, k(r.value ? "Hide" : "Show"), 1)) : L("", !0)
+        ])
+      ])) : e.field.type === "date" ? (n(), s("div", Dt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", Mt, k(t.value ? l(ct)(t.value) : "-"), 1)
+      ])) : e.field.type === "time" ? (n(), s("div", $t, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", At, k(t.value ? l(ut)(t.value) : "-"), 1)
+      ])) : e.field.type === "dateTime" ? (n(), s("div", Tt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", xt, k(t.value ? l(dt)(t.value) : "-"), 1)
+      ])) : e.field.type === "toggle" ? (n(), s("div", Ot, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", {
+          class: re(["toggle-badge", t.value ? "active" : "inactive"])
+        }, k(t.value ? l(y).btn.toogle.active : l(y).btn.toogle.inactive) + " ⦿ ", 3)
+      ])) : e.field.type === "file" ? (n(), s("div", jt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        t.value ? (n(), s("div", Ht, [
+          typeof t.value == "string" ? (n(), s("a", {
+            key: 0,
+            href: t.value,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "file-link"
+          }, k(t.value.split("/").pop() || t.value), 9, Kt)) : C(t.value) ? (n(), s("div", Bt, [
+            a("span", null, k(t.value.name), 1),
+            a("span", Vt, "(" + k((t.value.size / 1024).toFixed(1)) + " KB)", 1),
+            a("a", {
+              href: O(t.value),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              class: "file-preview-link"
+            }, " Preview ", 8, St)
+          ])) : L("", !0)
+        ])) : (n(), s("div", It, "-"))
+      ])) : e.field.type === "fileArray" ? (n(), s("div", Lt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        Array.isArray(t.value) && t.value.length ? (n(), s("div", Nt, [
+          (n(!0), s(W, null, q(t.value, ($, H) => (n(), s("div", { key: H }, [
+            typeof $ == "string" ? (n(), s("a", {
+              key: 0,
+              href: $,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              class: "file-link"
+            }, k($.split("/").pop() || $), 9, Ft)) : C($) ? (n(), s("div", Pt, [
+              a("span", null, k($.name), 1),
+              a("span", Et, "(" + k(($.size / 1024).toFixed(1)) + " KB)", 1),
+              a("a", {
+                href: O($),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                class: "file-preview-link"
+              }, " Preview ", 8, zt)
+            ])) : L("", !0)
+          ]))), 128))
+        ])) : (n(), s("div", Ut, "-"))
+      ])) : e.field.type === "number" ? (n(), s("div", Wt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", Rt, k(t.value ?? "-"), 1)
+      ])) : e.field.type === "email" ? (n(), s("div", Zt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", qt, k(t.value ?? "-"), 1)
+      ])) : e.field.type === "url" ? (n(), s("div", Gt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("a", {
+          href: t.value,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class: "url-link"
+        }, k(t.value ?? "-"), 9, Qt)
+      ])) : e.field.type === "tag" ? (n(), s("div", Jt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", Xt, k(t.value ?? "-"), 1)
+      ])) : e.field.type === "object" ? (n(), s("div", Yt, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        t.value && typeof t.value == "object" && Object.keys(t.value).length ? (n(), s("div", ea, [
+          (n(!0), s(W, null, q(e.field.schema, ($, H) => (n(), ce(l(xe), {
+            key: H,
+            field: $,
+            "field-key": H,
+            "form-data": t.value,
+            "value-null-view": e.valueNullView,
+            "optional-text": e.optionalText,
+            "required-text": e.requiredText,
+            onImageClick: S[1] || (S[1] = (E) => c("image-click", E))
+          }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+        ])) : (n(), s("div", ta, "-"))
+      ])) : e.field.type === "image" ? (n(), s("div", aa, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        t.value ? (n(), s("div", na, [
+          a("img", {
+            src: t.value,
+            alt: "Image",
+            class: "image-preview-single",
+            onClick: S[2] || (S[2] = ($) => c("image-click", t.value))
+          }, null, 8, sa)
+        ])) : (n(), s("div", ia, "-"))
+      ])) : e.field.type === "imageArray" ? (n(), s("div", la, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        Array.isArray(t.value) && t.value.length ? (n(), s("div", oa, [
+          (n(!0), s(W, null, q(t.value, ($, H) => (n(), s("div", { key: H }, [
+            a("img", {
+              src: $,
+              alt: `Image ${H + 1}`,
+              class: "image-preview-multi",
+              onClick: (E) => c("image-click", $)
+            }, null, 8, ra)
+          ]))), 128))
+        ])) : (n(), s("div", ca, "-"))
+      ])) : e.field.type === "color" ? (n(), s("div", ua, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("div", da, [
+          Array.isArray(t.value) && t.value.length ? (n(!0), s(W, { key: 0 }, q(t.value, ($, H) => (n(), s("div", {
+            key: H,
+            class: "color-swatch",
+            style: je({ backgroundColor: $ }),
+            title: $,
+            onClick: (E) => F($)
+          }, null, 12, va))), 128)) : (n(), s("div", ma, "-"))
+        ])
+      ])) : e.field.type === "select" ? (n(), s("div", ha, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        a("p", ya, k(t.value || "-"), 1)
+      ])) : e.field.type === "arrayObject" ? (n(), s("div", fa, [
+        I(l(P), { label: i.value }, null, 8, ["label"]),
+        Array.isArray(t.value) && t.value.length ? (n(), s("div", ba, [
+          (n(!0), s(W, null, q(t.value, ($, H) => (n(), s("div", {
+            key: H,
+            class: "array-object-item"
+          }, [
+            (n(!0), s(W, null, q(e.field.schema, (E, B) => (n(), ce(l(xe), {
+              key: B,
+              field: E,
+              "field-key": B,
+              "form-data": $,
+              "value-null-view": e.valueNullView,
+              "optional-text": e.optionalText,
+              "required-text": e.requiredText,
+              onImageClick: S[3] || (S[3] = (p) => c("image-click", p))
+            }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+          ]))), 128))
+        ])) : (n(), s("div", ga, "-"))
+      ])) : L("", !0)
+    ], 8, vt)) : e.field.type === "optionGroupSchema" ? (n(), s("div", ka, [
+      e.formData[e.fieldKey] || i.value ? (n(), ce(l(P), {
+        key: 0,
+        label: e.formData[e.fieldKey] ? i.value + ":" + (e.formData[e.fieldKey] ?? "") : i.value,
+        class: "option-group-main-label"
+      }, null, 8, ["label"])) : L("", !0),
+      a("div", wa, [
+        (n(!0), s(W, null, q(e.field.options, ($, H) => (n(), s("div", {
+          key: H,
+          class: "option-group-item"
+        }, [
+          I(l(P), {
+            label: H,
+            class: "option-group-item-label"
+          }, null, 8, ["label"]),
+          S[5] || (S[5] = a("hr", { class: "option-group-divider" }, null, -1)),
+          (n(!0), s(W, null, q($, (E, B) => (n(), ce(l(xe), {
+            key: B,
+            field: E,
+            "field-key": B,
+            "form-data": e.formData,
+            "value-null-view": e.valueNullView,
+            "optional-text": e.optionalText,
+            "required-text": e.requiredText,
+            onImageClick: S[4] || (S[4] = (p) => c("image-click", p))
+          }, null, 8, ["field", "field-key", "form-data", "value-null-view", "optional-text", "required-text"]))), 128))
+        ]))), 128))
+      ])
+    ])) : L("", !0);
+  }
+}), xe = /* @__PURE__ */ me(pa, [["__scopeId", "data-v-77044b61"]]), _a = ["src", "alt"], Ca = /* @__PURE__ */ ue({
+  __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 d = e, r = V(null), o = V(!0), c = (h) => new Promise((v, y) => {
+      const i = new Image();
+      i.crossOrigin = "anonymous", i.onload = () => v(i), i.onerror = (C) => y(C), i.src = h;
+    }), t = (h, v) => {
+      const y = document.createElement("canvas"), i = y.getContext("2d");
+      if (!i)
+        return console.error("Gagal mendapatkan konteks canvas 2D."), h.src;
+      y.width = h.width, y.height = h.height, i.drawImage(h, 0, 0);
+      const C = h.width / d.watermarkSize, O = v.height / v.width * C, F = h.width - C - 10, b = h.height - O - 10;
+      return i.globalAlpha = 0.8, i.drawImage(v, F, b, C, O), i.globalAlpha = 1, y.toDataURL("image/png");
+    };
+    return Se(async () => {
+      try {
+        const h = await c(d.imageUrl), v = await c(d.watermarkUrl);
+        r.value = t(h, v);
+      } catch (h) {
+        console.error("Gagal menerapkan watermark, menampilkan gambar asli:", h), r.value = d.imageUrl;
+      } finally {
+        o.value = !1;
+      }
+    }), (h, v) => (n(), s(W, null, [
+      o.value ? (n(), s("div", Ve({
+        key: 0,
+        class: "skeleton-loader"
+      }, h.$attrs), null, 16)) : L("", !0),
+      !o.value && r.value ? (n(), s("img", Ve({
+        key: 1,
+        loading: "lazy",
+        src: r.value,
+        alt: d.alt
+      }, h.$attrs), null, 16, _a)) : L("", !0)
+    ], 64));
+  }
+}), fs = /* @__PURE__ */ me(Ca, [["__scopeId", "data-v-bc2fb469"]]), Da = { class: "modal-header" }, Ma = { class: "header-content" }, $a = { class: "title-section" }, Aa = { class: "modal-title" }, Ta = { class: "modal-body" }, xa = { class: "form-fields-container" }, Oa = { class: "modal-footer" }, ja = { class: "footer-buttons" }, Ha = { class: "btn-content" }, Ka = ["src"], Ba = /* @__PURE__ */ ue({
+  __name: "ModalDetailData",
+  props: {
+    schema: {},
+    formData: {},
+    valueNullView: { type: Boolean },
+    title: {},
+    closeText: {},
+    requiredText: {},
+    optionalText: {},
+    lang: {}
+  },
+  emits: ["close"],
+  setup(e, { emit: d }) {
+    const r = d, o = V(!1), c = V(""), t = () => r("close"), h = (i) => {
+      c.value = i, o.value = !0;
+    }, v = V(!1), y = () => {
+      v.value = window.innerWidth < 768;
+    };
+    return Se(() => {
+      y(), window.addEventListener("resize", y);
+    }), Qe(() => {
+      window.removeEventListener("resize", y);
+    }), (i, C) => (n(), s(W, null, [
+      I(De, {
+        name: "modal-overlay",
+        appear: ""
+      }, {
+        default: Me(() => [
+          a("div", {
+            class: "modal-overlay",
+            onClick: Je(t, ["self"])
+          }, [
+            I(De, {
+              name: "modal-container",
+              appear: ""
+            }, {
+              default: Me(() => [
+                a("div", {
+                  class: re(["modal-container", { "mobile-view": v.value }])
+                }, [
+                  a("div", Da, [
+                    a("div", Ma, [
+                      a("div", $a, [
+                        C[1] || (C[1] = a("div", { class: "icon-container" }, [
+                          a("svg", {
+                            width: "24",
+                            height: "24",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg"
+                          }, [
+                            a("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)),
+                        a("h2", Aa, k(e.title ?? "Detail Data"), 1)
+                      ]),
+                      a("button", {
+                        class: "close-btn",
+                        onClick: t,
+                        "aria-label": "Close"
+                      }, [...C[2] || (C[2] = [
+                        a("svg", {
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg"
+                        }, [
+                          a("path", {
+                            d: "M18 6L6 18M6 6L18 18",
+                            stroke: "currentColor",
+                            "stroke-width": "2",
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round"
+                          })
+                        ], -1)
+                      ])])
+                    ])
+                  ]),
+                  a("div", Ta, [
+                    a("div", xa, [
+                      (n(!0), s(W, null, q(e.schema, (O, F) => (n(), ce(l(xe), {
+                        key: F,
+                        field: O,
+                        "field-key": F,
+                        "form-data": e.formData,
+                        "required-text": e.requiredText,
+                        "optional-text": e.optionalText,
+                        "value-null-view": e.valueNullView,
+                        onImageClick: h,
+                        lang: e.lang
+                      }, null, 8, ["field", "field-key", "form-data", "required-text", "optional-text", "value-null-view", "lang"]))), 128))
+                    ])
+                  ]),
+                  a("div", Oa, [
+                    a("div", ja, [
+                      a("button", {
+                        type: "button",
+                        onClick: t,
+                        class: "btn btn-primary"
+                      }, [
+                        a("span", Ha, [
+                          C[3] || (C[3] = a("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg"
+                          }, [
+                            a("path", {
+                              d: "M6 18L18 6M6 6L18 18",
+                              stroke: "currentColor",
+                              "stroke-width": "2",
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round"
+                            })
+                          ], -1)),
+                          oe(" " + k(e.closeText ?? "Close"), 1)
+                        ])
+                      ])
+                    ])
+                  ])
+                ], 2)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }),
+      I(De, {
+        name: "modal-overlay",
+        appear: ""
+      }, {
+        default: Me(() => [
+          o.value ? (n(), s("div", {
+            key: 0,
+            class: "modal-overlay image-preview-overlay",
+            onClick: C[0] || (C[0] = (O) => o.value = !1)
+          }, [
+            I(De, {
+              name: "modal-container",
+              appear: ""
+            }, {
+              default: Me(() => [
+                a("img", {
+                  src: c.value,
+                  alt: "Preview",
+                  class: "image-preview-content"
+                }, null, 8, Ka)
+              ]),
+              _: 1
+            })
+          ])) : L("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}), Va = /* @__PURE__ */ me(Ba, [["__scopeId", "data-v-a78353a9"]]), Sa = ["innerHTML"], bs = /* @__PURE__ */ ue({
+  __name: "SafeHtml",
+  props: {
+    html: {}
+  },
+  setup(e) {
+    const d = e, r = X(() => et.sanitize(d.html));
+    return (o, c) => e.html ? (n(), s("div", {
+      key: 0,
+      innerHTML: r.value
+    }, null, 8, Sa)) : L("", !0);
+  }
+}), Ia = {
+  class: "alert-icon",
+  "aria-hidden": "true",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  viewBox: "0 0 20 20"
+}, La = {
+  key: 0,
+  d: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
+}, Na = {
+  key: 1,
+  d: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+}, Fa = { class: "sr-only" }, Pa = { class: "alert-title" }, Ea = { class: "alert-messages" }, za = /* @__PURE__ */ ue({
+  __name: "AlertApp",
+  setup(e, { expose: d }) {
+    const r = V([]), o = V([]), c = V([]);
+    let t = 0;
+    function h() {
+      let y = 0;
+      c.value = o.value.map((i) => {
+        const C = i?.offsetHeight || 0, O = y;
+        return y += C + 10, O;
+      });
+    }
+    function v(y) {
+      y.id = t++, y.show = !1, r.value.push(y), $e(() => {
+        y.show = !0, h();
+      }), setTimeout(() => {
+        y.show = !1, $e(() => {
+          h(), setTimeout(() => {
+            r.value = r.value.filter((i) => i.id !== y.id), $e(h);
+          }, 200);
+        });
+      }, 5e3);
+    }
+    return Ae(r, () => {
+      $e(h);
+    }), d({
+      addAlert: v
+    }), (y, i) => (n(!0), s(W, null, q(r.value, (C, O) => (n(), s("div", {
+      key: C.id,
+      ref_for: !0,
+      ref_key: "alertRefs",
+      ref: o,
+      class: re(["alert-container", C.type === "error" ? "alert-error" : "alert-success"]),
+      style: je({
+        top: `${c.value[O] ?? 0}px`,
+        transform: `translateX(${C.show ? "0" : "200%"})`
+      }),
+      role: "alert"
+    }, [
+      (n(), s("svg", Ia, [
+        C.type === "error" ? (n(), s("path", La)) : (n(), s("path", Na))
+      ])),
+      a("span", Fa, k(C.type === "error" ? "Error" : "Success"), 1),
+      a("div", null, [
+        a("span", Pa, k(C.title), 1),
+        a("ul", Ea, [
+          (n(!0), s(W, null, q(C.messages, (F, b) => (n(), s("li", { key: b }, k(F), 1))), 128))
+        ])
+      ])
+    ], 6))), 128));
+  }
+}), Ua = /* @__PURE__ */ me(za, [["__scopeId", "data-v-005a57aa"]]), Wa = ["aria-labelledby"], Ra = {
+  id: "dialog-title",
+  class: "dialog-title"
+}, Za = {
+  id: "dialog-desc",
+  class: "dialog-message"
+}, qa = { class: "button-container" }, Ga = /* @__PURE__ */ ue({
+  __name: "WarningForm",
+  props: {
+    title: { default: "Warning Title" },
+    message: { default: "Warning Message" },
+    isGreen: { type: Boolean, default: !1 }
+  },
+  emits: ["confirm", "close"],
+  setup(e, { emit: d }) {
+    const r = e, o = d;
+    return (c, t) => (n(), s("div", {
+      class: "warning-overlay",
+      onKeydown: t[2] || (t[2] = ze((h) => o("close"), ["esc"]))
+    }, [
+      a("div", {
+        class: "warning-dialog",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": r.title
+      }, [
+        a("h2", Ra, k(r.title), 1),
+        a("p", Za, k(r.message), 1),
+        a("div", qa, [
+          a("button", {
+            class: re(["btn btn-confirm", r.isGreen ? "btn-green" : "btn-red"]),
+            onClick: t[0] || (t[0] = (h) => o("confirm"))
+          }, " Ya ", 2),
+          a("button", {
+            class: "btn btn-cancel",
+            onClick: t[1] || (t[1] = (h) => o("close"))
+          }, "Tidak")
+        ])
+      ], 8, Wa)
+    ], 32));
+  }
+}), Pe = /* @__PURE__ */ me(Ga, [["__scopeId", "data-v-a8d3c182"]]);
+async function Oe(e, d, r, o) {
+  const c = {};
+  for (const [t, h] of Object.entries(d)) {
+    const v = h?.type;
+    if (v === "select" && h.DB_NAME && !h.optionsIsNumber) {
+      const i = e[h.baseKey?.base ?? t];
+      if (i !== null) {
+        const C = await ke(h.DB_NAME, i);
+        c[t] = C[h.baseKey.name ?? "name"] ?? "";
+      } else
+        c[t] = "";
+      continue;
+    }
+    if (v === "object") {
+      const i = e[t] || {};
+      c[t] = await Oe(
+        e[t] || {},
+        h.schema || {},
+        i,
+        h.baseKey?.base ?? "id"
+      );
+      continue;
+    }
+    if (v === "optionGroupSchema" && h.options) {
+      if (h.withValue) {
+        const i = e[t];
+        c[t] = await ge(i);
+      }
+      for (const [i, C] of Object.entries(
+        h.options
+      ))
+        for (const [O, F] of Object.entries(C)) {
+          const b = F, S = e[O];
+          if (b.type === "optionGroupSchema" && b.options) {
+            const $ = await Oe(
+              e,
+              { [O]: b },
+              r,
+              o
+            );
+            Object.assign(c, $);
+            continue;
+          }
+          if (b.type === "object") {
+            c[O] = await Oe(
+              e[O] || {},
+              b.schema || {},
+              e[O] || {},
+              b.baseKey?.base ?? "id"
+            );
+            continue;
+          }
+          if (b.type === "select" && b.DB_NAME && !b.optionsIsNumber) {
+            const $ = e[b.baseKey?.base ?? O];
+            if ($ != null) {
+              const H = b.DB_NAME, E = await ke(H, $);
+              c[O] = E[b.baseKey?.name ?? "name"] ?? void 0;
+            } else
+              c[O] = void 0;
+          } else
+            c[O] = ge(S);
+        }
+      continue;
+    }
+    const y = e[t];
+    c[t] = ge(y);
+  }
+  return r && e?.[o ?? "id"] && (c[o ?? "id"] = e?.[o ?? "id"]), c;
+}
+async function we(e, d) {
+  const r = {};
+  console.log(e);
+  for (const [o, c] of Object.entries(d)) {
+    const t = c?.type, h = e[c.baseKey?.base ?? o];
+    if (t === "select" && c.optionsView && c.options && h) {
+      const v = c.options.findIndex((y) => y === h);
+      if (!c.optionsView[v] && c.DB_NAME && c.baseKey.name) {
+        const i = (await ke(c.DB_NAME, h))[c.baseKey.name];
+        r[o] = i;
+      } else
+        r[o] = c.optionsView[v] ?? h;
+      continue;
+    }
+    if (t === "object") {
+      r[o] = await we(h || {}, c.schema || {});
+      continue;
+    }
+    if (t === "optionGroupSchema") {
+      const v = [];
+      for (const [i, C] of Object.entries(
+        c.options
+      ))
+        v.push(C);
+      const y = await We(e, v);
+      Object.assign(r, y);
+      continue;
+    }
+    if (t === "arrayObject") {
+      const v = [];
+      for (const y of h) {
+        const i = await we(y, c.schema || {});
+        v.push(i);
+      }
+      r[o] = v;
+      continue;
+    }
+    r[o] = ge(h);
+  }
+  return r;
+}
+async function We(e, d) {
+  const r = {};
+  for (const o of d)
+    for (const [c, t] of Object.entries(o)) {
+      const h = t?.type, v = e[t.baseKey?.base ?? c];
+      if (h === "select" && t.optionsView && t.options && v) {
+        const y = t.options.findIndex((i) => i === v);
+        if (!t.optionsView[y] && t.DB_NAME && t.baseKey.name) {
+          const C = (await ke(t.DB_NAME, v))[t.baseKey.name];
+          r[c] = C;
+        } else
+          r[c] = t.optionsView[y] ?? v;
+      } else if (h === "optionGroupSchema") {
+        const y = [];
+        for (const [C, O] of Object.entries(
+          t.options
+        ))
+          y.push(O);
+        const i = await We(e, y);
+        Object.assign(r, i);
+      } else if (h === "object")
+        r[c] = await we(v || {}, t.schema || {});
+      else if (h === "arrayObject") {
+        const y = [];
+        for (const i of v) {
+          const C = await we(i, t.schema || {});
+          y.push(C);
+        }
+        r[c] = y;
+        continue;
+      } else
+        r[c] = ge(v);
+    }
+  return r;
+}
+function ge(e, d) {
+  return e ?? null;
+}
+function ve(e) {
+  const d = Te(e), r = Array.isArray(d) ? [] : {};
+  if (Array.isArray(d))
+    return d.map((o) => o !== null && typeof o == "object" && !(o instanceof File || o instanceof Blob || o instanceof Date) && !Array.isArray(o) ? ve(o) : o);
+  for (const o in d) {
+    const c = d[o];
+    c === void 0 ? r[o] = null : c instanceof File || c instanceof Blob || c instanceof Date ? r[o] = c : typeof c == "string" && (c.trim() === "" || c === "<p><br></p>") || typeof c == "number" && c === 0 ? r[o] = null : Array.isArray(c) ? r[o] = c.map((t) => t !== null && typeof t == "object" && !(t instanceof File || t instanceof Blob || t instanceof Date) && !Array.isArray(t) ? ve(t) : t) : typeof c == "object" && c !== null ? r[o] = ve(c) : r[o] = c;
+  }
+  return r;
+}
+function Re(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 Ee(e) {
+  return typeof e == "string" ? e : e instanceof File || typeof e == "object" && e.url ? e.url || URL.createObjectURL(e) : "";
+}
+function Qa(e) {
+  return Array.isArray(e) && e.every((d) => Re(d));
+}
+function Ja(e) {
+  return Array.isArray(e) ? e.every((d) => Ze(d)) : !1;
+}
+function Ze(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 Xa(e) {
+  return /<\/?[a-z][\s\S]*>/i.test(e);
+}
+function Ya(e) {
+  return Object.keys(e).reduce((d, r) => (r !== "id" && (d[r] = e[r]), d), {});
+}
+function en(e, d, r, o, c, t, h, v) {
+  const y = V({});
+  async function i(B) {
+    o.value?.show("loading", t.message.process.loading);
+    try {
+      const p = await h(e.data, B);
+      if (v.isUpdate.value = Number(B), !p) {
+        o.value?.show("error", t.message.notFound);
+        return;
+      }
+      const z = e.base.schema.update ?? e.base.schema.global ?? {};
+      if (y.value = await Oe(
+        p,
+        z,
+        v.isUpdate.value,
+        e.keys?.idKey ?? "id"
+      ), e.base?.justTabel || e.manual?.update || !e.endPoints?.update) {
+        d("edit", y.value, B), o.value?.hide();
+        return;
+      }
+      v.FormModalOpen.value = !0, o.value?.hide();
+    } catch (p) {
+      const z = typeof p == "string" ? p : p instanceof Error ? p.message : JSON.stringify(p, Object.getOwnPropertyNames(p));
+      o.value?.show("error", z || "An unknown error occurred");
+    }
+  }
+  function C() {
+    if (e.base?.justTabel || e.manual?.create || !e.endPoints?.create) {
+      d("create");
+      return;
+    }
+    v.isUpdate.value = null, v.FormModalOpen.value = !0;
+  }
+  async function O(B) {
+    o.value?.show("loading", t.message.process.loading);
+    try {
+      const p = await h(e.data, B);
+      if (v.isUpdate.value = Number(B), !p) {
+        o.value?.show("error", t.message.notFound);
+        return;
+      }
+      if (y.value = await we(
+        p,
+        e.base?.schema.display ?? e.base?.schema.global ?? {}
+      ), e.base.justTabel || e.manual?.display) {
+        d("show", y.value, B), o.value?.hide();
+        return;
+      }
+      v.detailItemModal.value = !0, o.value?.hide();
+    } catch (p) {
+      o.value?.show("error", JSON.stringify(p));
+    }
+  }
+  function F(B) {
+    v.idData.value = B, v.showWarningModel.value = !0;
+  }
+  function b() {
+    v.showWarningModelSelected.value = !0;
+  }
+  function S() {
+    v.showWarningModel.value = !1, v.showWarningModelSelected.value = !1, v.FormModalOpen.value = !1, v.detailItemModal.value = !1, y.value = {}, v.isUpdate.value = null;
+  }
+  const $ = async (B) => {
+    const p = v.isUpdate.value !== null, z = p ? e.endPoints?.update : e.endPoints?.create, R = p ? e.validation?.update || null : e.validation?.create || null, te = p ? "update" : "create", Z = p ? t.message.success.update : t.message.success.create, G = p ? t.message.error.update : t.message.error.create;
+    if (!z) {
+      o.value?.show(
+        "error",
+        p ? t.message.error.update : t.message.error.create
+      );
+      return;
+    }
+    if (Array.isArray(v.dataChildDelete.value) && v.dataChildDelete.value.length > 0 && p) {
+      const U = e.base.schema.update ?? e.base.schema.global ?? {};
+      let N = "", Y, ne = await h(
+        e.data,
+        v.isUpdate.value
+      ), de, he, ye = !0;
+      for (const ee in U) {
+        const Q = U[ee];
+        if (Q.type === "arrayObject") {
+          N = ee, Y = Q.endPoint?.deleteMany ?? e.endPoints?.deleteMany, de = Q.DB_NAME ?? e.base.source.DB_NAME, he = Q.deleteValidation ?? e.validation?.delete ?? void 0, ye = !0;
+          break;
+        }
+      }
+      if (Array.isArray(y.value[N]))
+        for (let ee = 0; ee < v.dataChildDelete.value.length; ee++) {
+          const Q = v.dataChildDelete.value[ee];
+          e.keys?.idKey, y.value[N] = y.value[N].filter((J) => J?.[e.keys?.idKey ?? "id"] !== Q), ne && Array.isArray(ne[N]) && (ne[N] = ne[N].filter((J) => J?.[e.keys?.idKey ?? "id"] !== Q));
+        }
+      const ae = tt(ve(B), ve(Te(y.value))), se = await E(
+        v.dataChildDelete.value,
+        Y,
+        he,
+        de,
+        ye
+      );
+      if (se?.response && ae) {
+        o.value?.show("success", t.message.success.delete), await at(de, ve(Te(ne))), await r(), S();
+        return;
+      } else if (!se?.response) {
+        o.value?.show("error", se.message);
+        return;
+      }
+    }
+    try {
+      o.value?.show(
+        "loading",
+        p ? t.message.process.update : t.message.process.create
+      );
+      const U = p ? e.submitOption?.update?.authType ?? e.submitOption?.global?.authType ?? "cookie" : e.submitOption?.create?.authType ?? e.submitOption?.global?.authType ?? "cookie", N = p ? e.submitOption?.update?.token ?? e.submitOption?.global?.token ?? void 0 : e.submitOption?.create?.token ?? e.submitOption?.global?.token ?? void 0, Y = p ? e.submitOption?.update?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0 : e.submitOption?.create?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0;
+      await fe({
+        data: ve(B),
+        oldData: p ? ve(Te(y.value)) : void 0,
+        validation: R ?? void 0,
+        endpoint: z,
+        mode: te,
+        token: N,
+        authType: U,
+        customHeaders: Y,
+        db: e.base.source.DB_NAME,
+        ...p ? e.submitOption?.update ?? e.submitOption?.global : e.submitOption?.create ?? e.submitOption?.global
+      }), e.base.dataTabelCustomDisplay ? d("refreshData") : r(), o.value?.show("success", Z), S();
+    } catch (U) {
+      c(
+        "error",
+        G,
+        Object.entries(U).map(([N, Y]) => `${N} : ${Y}`)
+      ), o.value?.show("error", G);
+    }
+  };
+  async function H(B, p, z, R, te = !0) {
+    if (e.base.justTabel || e.manual?.delete || !e.endPoints?.delete) {
+      d("delete", B);
+      return;
+    }
+    if (p = p ?? e.endPoints?.delete, z = z ?? e.validation?.delete, R = R ?? e.base?.source.DB_NAME ?? void 0, !p) {
+      o.value?.show("error", t.message.error.delete);
+      return;
+    }
+    const Z = { [e.keys?.idKey ?? "id"]: B };
+    try {
+      o.value?.show("loading", t.message.process.delete);
+      const G = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", U = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, N = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0;
+      await fe({
+        data: Z,
+        validation: z ?? void 0,
+        endpoint: p,
+        mode: "delete",
+        token: U,
+        authType: G,
+        customHeaders: N,
+        db: R,
+        deleteDataDB: te,
+        ...e.submitOption?.delete ?? e.submitOption?.global
+      }), e.base?.dataTabelCustomDisplay ? d("refreshData") : r(), o.value?.show("success", t.message.success.delete);
+    } catch (G) {
+      c(
+        "error",
+        t.message.error.delete,
+        Object.entries(G).map(([U, N]) => `${U} : ${N}`)
+      ), o.value?.show("error", t.message.error.delete);
+    } finally {
+      S();
+    }
+  }
+  async function E(B, p, z, R, te = !0) {
+    if (e.base?.justTabel || e.manual?.delete || !e.endPoints?.delete) {
+      d("deleteMany", B);
+      return;
+    }
+    if (p = p ?? e.endPoints?.deleteMany, z = z ?? e.validation?.deleteMany, R = R ?? e.base?.source.DB_NAME ?? void 0, !p) {
+      o.value?.show("error", t.message.error.deleteMany);
+      return;
+    }
+    try {
+      o.value?.show("loading", t.message.process.deleteMany);
+      const Z = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", G = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, U = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0, N = await fe({
+        data: { [e.keys?.idsKey ?? "ids"]: B },
+        validation: z ?? void 0,
+        endpoint: p,
+        mode: "delete",
+        db: R,
+        authType: Z,
+        token: G,
+        customHeaders: U,
+        deleteDataDB: te
+      });
+      return v.selectedItems.value = [], e.base?.dataTabelCustomDisplay ? (d("refreshData"), o.value?.show("success", t.message.success.deleteMany), S(), N) : (await r(), o.value?.show("success", t.message.success.deleteMany), S(), N);
+    } catch (Z) {
+      c(
+        "error",
+        t.message.error.deleteMany,
+        Object.entries(Z).map(([G, U]) => `${G} : ${U}`)
+      ), o.value?.show("error", t.message.error.deleteMany);
+    }
+  }
+  return {
+    initialData: y,
+    openEditModal: i,
+    openCreateModal: C,
+    openShowModal: O,
+    openWarningDeleteData: F,
+    openWarningDeleteSelectedData: b,
+    closeModal: S,
+    submitFormData: $,
+    DeleteData: H,
+    DeleteSeletedData: E
+  };
+}
+function tn(e, d, r, o) {
+  const c = V(""), t = V(1), h = V([]), v = V(!1), y = V(!1), i = V(!1), C = V(null), O = V(null), F = V("asc"), b = V(!1), S = V(!1), $ = V(null), H = V(null), E = X(() => e.pagination?.itemsPerPage ?? 10), B = X(() => e.pagination?.maxVisiblePages ?? 5);
+  V(null), V("none");
+  const p = X(() => {
+    const m = e.keys?.idKey;
+    return e.data.find((A) => A?.[m ?? "id"] === C.value) || {};
+  }), z = X(() => {
+    const m = e.keys?.idKey ?? "id", A = e.keys?.nameKey ?? "name";
+    return e.data.filter((j) => h.value.includes(j[m])).map((j) => j[A]).join(", ");
+  }), R = X(() => {
+    let m = (e.base.data ?? []).filter(
+      (A) => Object.values(A).some(
+        (j) => String(j).toLowerCase().includes(c.value.toLowerCase())
+      )
+    );
+    return O.value && m.sort((A, j) => {
+      let _ = A[O.value], M = j[O.value];
+      return typeof _ == "string" && (_ = _.toLowerCase()), typeof M == "string" && (M = M.toLowerCase()), _ < M ? F.value === "asc" ? -1 : 1 : _ > M ? F.value === "asc" ? 1 : -1 : 0;
+    }), m;
+  }), te = X(() => {
+    const m = (t.value - 1) * E.value;
+    return R.value.slice(m, m + E.value);
+  }), Z = X(() => Math.ceil(R.value.length / E.value)), G = X(() => {
+    const m = [], A = Z.value, j = t.value, _ = B.value;
+    if (A <= _ + 2) {
+      for (let w = 1; w <= A; w++) m.push(w);
+      return m;
+    }
+    m.push(1);
+    let M = Math.max(2, j - 2), f = Math.min(A - 1, j + 2);
+    M > 2 && m.push("...");
+    for (let w = M; w <= f; w++)
+      m.push(w);
+    return f < A - 1 && m.push("..."), m.push(A), m;
+  });
+  function U() {
+    h.value = v.value ? te.value.map((m) => m?.[e.keys?.idKey ?? "id"]) : [];
+  }
+  function N(m) {
+    O.value === m ? F.value = F.value === "desc" ? "asc" : "desc" : (O.value = m, F.value = "desc");
+  }
+  function Y() {
+    t.value > 1 && t.value--;
+  }
+  function ne() {
+    t.value < Z.value && t.value++;
+  }
+  async function de() {
+    if (e.base.source.DB_NAME) {
+      const m = await Be(e.base.source.DB_NAME);
+      if (e.base.source.connect?.length) {
+        const A = {};
+        return await Promise.all(
+          e.base.source.connect.map(async (j) => {
+            A[j.DB_NAME] = await Be(j.DB_NAME);
+          })
+        ), m.map((j) => {
+          let _ = { ...j };
+          for (const M of e.base.source.connect) {
+            const f = M.key, w = M.connectKey, T = (A[M.DB_NAME] || []).filter(
+              (K) => J(K, w) === J(j, f)
+            );
+            _[M.DB_NAME] = T.length > 0 ? T : null;
+          }
+          return _;
+        });
+      }
+      return m;
+    } else if (e.base.source.fetchApi?.getAll) {
+      const m = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", A = e.submitOption?.delete?.token ?? e.submitOption?.global?.token, j = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders, _ = await fe({
+        mode: "get",
+        endpoint: e.base.source.fetchApi?.getAll,
+        db: e.base.source.DB_NAME,
+        authType: m,
+        token: A,
+        customHeaders: j
+      });
+      if (e.base.source.fetchApi.connect?.length) {
+        const M = {};
+        return await Promise.all(
+          e.base.source.fetchApi.connect.map(async (f) => {
+            const w = await fe({
+              mode: "get",
+              endpoint: f.url,
+              db: e.base.source.DB_NAME,
+              authType: m,
+              token: A,
+              customHeaders: j
+            }), T = f.valueKey ?? f.url ?? f.key;
+            M[T] = w.data ?? [];
+          })
+        ), !_.data || !Array.isArray(_.data) ? _.data : _.data.map((f) => {
+          let w = { ...f };
+          for (const T of e.base.source.fetchApi.connect) {
+            const K = T.key, x = T.connectKey, u = T.valueKey ?? T.url ?? T.key, g = (M[u] || []).filter(
+              (D) => J(D, x) === J(f, K)
+            );
+            w[u] = g.length > 0 ? g : null;
+          }
+          return w;
+        });
+      }
+      return _.data ?? [];
+    } else
+      return;
+  }
+  async function he(m, A) {
+    if (m.connect?.withDB)
+      return await ke(m.connect.withDB.DB_NAME, A);
+    if (m.connect?.withFetch) {
+      const j = e.submitOption?.delete?.authType ?? e.submitOption?.global?.authType ?? "cookie", _ = e.submitOption?.delete?.token ?? e.submitOption?.global?.token ?? void 0, M = e.submitOption?.delete?.customHeaders ?? e.submitOption?.global?.customHeaders ?? void 0, f = await fe({
+        mode: "get",
+        endpoint: m.connect?.withFetch.url + "/" + A,
+        db: e.base.source.DB_NAME,
+        authType: j,
+        token: _,
+        customHeaders: M
+      });
+      if (f.data)
+        return f.data;
+    } else
+      return;
+  }
+  async function ye(m, A) {
+    return m.find((j) => j[e.keys?.idKey ?? "id"] == A);
+  }
+  let ae = !0, se = null;
+  async function ee() {
+    if (ae && r.value?.show("loading", o.message.process.loading), e.base?.dataTabelCustomDisplay && e.base?.dataTabelCustomDisplay.length !== 0) {
+      e.base.data = e.base.dataTabelCustomDisplay, e.data = await de(), await Q(), ae && (r.value?.hide(), ae = !1);
+      return;
+    }
+    const m = await de();
+    if (e.data = m, await Q(), Array.isArray(m)) {
+      const _ = e.keys?.idKey ?? "id";
+      m.sort((M, f) => M.updatedAt && f.updatedAt ? new Date(f.updatedAt).getTime() - new Date(M.updatedAt).getTime() : (f[_] ?? 0) - (M[_] ?? 0)), e.data = m;
+    } else {
+      ae && (r.value?.hide(), ae = !1);
+      return;
+    }
+    const A = e.keys?.idKey, j = e.base.headersTabelDisplay?.length === 0 || e.base.headersTabelDisplay === void 0;
+    e.base.data = await Promise.all(
+      m.map(async (_) => {
+        const M = {};
+        if (A && _[A] != null && (M[A] = _[A], j && (!e.base.headersTabelDisplay?.includes(A) || e.base.headersTabelDisplay === void 0) && (e.base.headersTabelDisplay = [])), e.base.dataTabelDisplay)
+          for (const [f, w] of Object.entries(e.base.dataTabelDisplay))
+            if (typeof w == "string") {
+              const T = J(_, w);
+              M[f] = Array.isArray(T) ? T.map((K) => ie(K)) : ie(T ?? "-"), j && !e.base.headersTabelDisplay?.includes(f) && e.base.headersTabelDisplay?.push(f);
+            } else {
+              let T = J(_, w.valueKey);
+              if ((w.connect?.withDB || w.connect?.withFetch) && T)
+                if (Array.isArray(T)) {
+                  const K = await Promise.all(
+                    T.map(async (x) => {
+                      const u = await he(w, x);
+                      return u ? u[w.connect?.withDB?.valueKey ?? w.connect?.withFetch?.valueKey] : x;
+                    })
+                  );
+                  M[f] = K.map((x) => ie(x));
+                } else {
+                  const K = await he(w, T);
+                  K && (T = K[w.connect.withDB?.valueKey ?? w.connect.withFetch?.valueKey]), M[f] = ie(T);
+                }
+              else
+                M[f] = ie(T);
+              j && !e.base.headersTabelDisplay?.includes(f) && e.base.headersTabelDisplay?.push(f);
+            }
+        else {
+          let f = 0;
+          for (const [w, T] of Object.entries(_)) {
+            if (w === A) continue;
+            if (f >= 8) break;
+            const K = be(w);
+            M[K] = ie(T), j && !e.base.headersTabelDisplay?.includes(K) && e.base.headersTabelDisplay?.push(K), f++;
+          }
+        }
+        return M;
+      })
+    ), ae && (r.value?.hide(), ae = !1), e.base?.source?.fetchApi?.autoRefresh?.time && (se && clearTimeout(se), se = setTimeout(() => {
+      ee();
+    }, e.base.source.fetchApi.autoRefresh.time));
+  }
+  async function Q() {
+    const m = {
+      global: e.base.schema.global ?? {},
+      create: e.base.schema.create ?? {},
+      update: e.base.schema.update ?? {},
+      display: e.base.schema.display ?? {}
+    }, A = (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
+    }), j = async (f) => {
+      const w = f.options?.valueKey ?? "id", T = f.options?.viewKey ?? "name";
+      let K;
+      if (f.options?.url && (K = await fe({
+        mode: "get",
+        endpoint: f.options.url,
+        ...A("get")
+      }), Array.isArray(K?.data) && (f.options = K.data.map((x) => x[w]) ?? [], f.options?.viewKey ? f.optionsView = K.map((x) => x[T]) ?? [] : f.optionsView = K.map((x) => x[w]) ?? [])), f.options?.DB_NAME) {
+        const x = f.options?.DB_NAME ?? f.optionsView?.DB_NAME;
+        if (K = await Be(x), Array.isArray(K)) {
+          const u = f.options;
+          u?.DB_NAME && (f.options = K.map((g) => g[w]) ?? []), u?.viewKey ? f.optionsView = K.map((g) => g[T]) ?? [] : f.optionsView = K.map((g) => g[w]) ?? [];
+        }
+      }
+    }, _ = (f, w) => {
+      e.data && f.validate?.duplicate === !0 && (f.validate.duplicate = e.data.map((T) => T[w]) ?? []);
+    };
+    async function M(f) {
+      for (const [w, T] of Object.entries(f)) {
+        const K = T?.type;
+        if (K === "select" && await j(T), K === "text" && _(T, w), K === "optionGroupSchema") {
+          const x = T?.options ?? {};
+          for (const [u, g] of Object.entries(x))
+            await M(g);
+        }
+        K === "arrayObject" && T.schema && await M(T.schema), K === "object" && T.schema && await M(T.schema);
+      }
+    }
+    for (const [f, w] of Object.entries(m))
+      w && await M(w);
+  }
+  function J(m, A) {
+    if (!(!m || typeof A != "string"))
+      try {
+        const j = A.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let _ = m;
+        for (const M of j) {
+          if (_ == null) return;
+          if (Array.isArray(_)) {
+            const f = Number(M);
+            isNaN(f) ? (_ = _.map((w) => w?.[M]).filter((w) => w !== void 0), _.some((w) => Array.isArray(w)) && (_ = _.flat()), _.length === 1 && (_ = _[0])) : _ = _[f];
+          } else
+            _ = _?.[M];
+        }
+        return _;
+      } catch {
+        return "-";
+      }
+  }
+  function be(m) {
+    return m.replace(/([A-Z])/g, " $1").replace(/[_\-]/g, " ").replace(/\s+/g, " ").trim().replace(/\w\S*/g, (A) => A.charAt(0).toUpperCase() + A.slice(1).toLowerCase());
+  }
+  function ie(m) {
+    if (Array.isArray(m)) {
+      if (m.length === 0) return "Empty";
+      if (typeof m[0] == "string") return m.join(", ");
+      if (typeof m[0] == "object") return `${m.length} item`;
+    }
+    return typeof m == "object" && m !== null ? Object.keys(m).length > 0 ? "Objek" : "Empty" : m != null ? String(m) : "—";
+  }
+  return {
+    searchQuery: c,
+    currentPage: t,
+    selectedItems: h,
+    selectAll: v,
+    showWarningModel: y,
+    showWarningModelSelected: i,
+    idData: C,
+    sortField: O,
+    sortDirection: F,
+    FormModalOpen: b,
+    detailItemModal: S,
+    isUpdate: $,
+    dataChildDelete: H,
+    selectedItem: p,
+    selectedItemNames: z,
+    filteredData: R,
+    paginatedData: te,
+    totalPages: Z,
+    visiblePages: G,
+    toggleAll: U,
+    sortBy: N,
+    prevPage: Y,
+    nextPage: ne,
+    summarizeValue: ie,
+    setUpData: ee,
+    getValueByPath: J,
+    toTitleCase: be,
+    GetDataById: ye
+  };
+}
+const an = {
+  idKey: "id",
+  idsKey: "ids"
+}, nn = {
+  btnInfoActive: !0,
+  searchQueryActive: !0,
+  sortable: !0,
+  createActive: !0,
+  updateActive: !0,
+  deleteActive: !0,
+  deleteManyActive: !0,
+  displayActive: !0
+}, gs = {
+  create: !1,
+  update: !1,
+  delete: !1,
+  deleteMany: !1,
+  display: !1
+}, sn = {
+  itemsPerPage: 5,
+  maxVisiblePages: 5
+}, ln = {
+  create: void 0,
+  update: void 0,
+  delete: void 0,
+  deleteMany: void 0
+}, ks = {
+  create: void 0,
+  update: void 0,
+  delete: void 0,
+  deleteMany: void 0
+}, ws = {
+  global: {
+    authType: "cookie"
+  }
+}, on = { class: "table-container" }, rn = { class: "table-wrapper" }, cn = { class: "table-header" }, un = { class: "header-top" }, dn = { class: "header-actions" }, vn = { class: "action-buttons" }, mn = ["disabled"], hn = { class: "header-search" }, yn = {
+  key: 0,
+  class: "search-container"
+}, fn = ["placeholder"], bn = {
+  key: 0,
+  class: "selection-indicator"
+}, gn = { class: "selection-count" }, kn = {
+  key: 0,
+  class: "empty-state"
+}, wn = { class: "empty-title" }, pn = { class: "empty-description" }, _n = {
+  key: 1,
+  class: "table-content"
+}, Cn = { class: "table-scroll-container" }, Dn = { class: "data-table" }, Mn = { class: "table-header-row" }, $n = { class: "checkbox-column" }, An = { class: "header-content" }, Tn = ["onClick"], xn = { class: "actions-column" }, On = { class: "table-body" }, jn = { class: "checkbox-cell" }, Hn = ["value"], Kn = ["innerHTML"], Bn = {
+  key: 1,
+  class: "status-badge"
+}, Vn = {
+  key: 2,
+  class: "text-cell datetime-cell"
+}, Sn = {
+  key: 3,
+  class: "text-cell date-cell"
+}, In = {
+  key: 4,
+  class: "text-cell time-cell"
+}, Ln = {
+  key: 5,
+  class: "image-cell"
+}, Nn = { class: "image-container" }, Fn = ["src", "alt"], Pn = {
+  key: 6,
+  class: "color-array-cell"
+}, En = ["title"], zn = {
+  key: 0,
+  class: "color-count"
+}, Un = {
+  key: 7,
+  class: "color-cell"
+}, Wn = ["title"], Rn = {
+  key: 8,
+  class: "image-array-cell"
+}, Zn = ["src", "alt"], qn = {
+  key: 0,
+  class: "image-count"
+}, Gn = {
+  key: 9,
+  class: "array-cell"
+}, Qn = {
+  key: 10,
+  class: "text-cell"
+}, Jn = { class: "actions-cell" }, Xn = { class: "action-buttons-group" }, Yn = ["onClick"], es = { class: "action-text" }, ts = ["onClick"], as = { class: "action-text" }, ns = ["onClick"], ss = { class: "action-text" }, is = { class: "pagination-container" }, ls = { class: "pagination-info" }, os = { class: "pagination-controls" }, rs = ["disabled"], cs = { class: "pagination-pages" }, us = ["onClick", "disabled"], ds = ["disabled"], vs = /* @__PURE__ */ ue({
+  __name: "TabelData",
+  props: {
+    base: {},
+    keys: { default: () => an },
+    formDesign: {},
+    submitOption: {},
+    feature: { default: () => nn },
+    pagination: { default: () => sn },
+    validation: { default: () => ln },
+    manual: {},
+    endPoints: {}
+  },
+  emits: ["refreshData", "edit", "create", "show", "delete", "deleteMany"],
+  setup(e, { emit: d }) {
+    const r = (x) => typeof x == "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(x), o = (x) => typeof x == "string" && /^\d{4}-\d{2}-\d{2}$/.test(x), c = (x) => typeof x == "string" && /^\d{2}:\d{2}$/.test(x);
+    function t(x, u = "en") {
+      try {
+        const g = new Date(x), D = u === "id" ? "id-ID" : u;
+        return new Intl.DateTimeFormat(D, {
+          dateStyle: "medium",
+          // "18 Okt 2025"
+          timeStyle: "short"
+          // "10.54"
+        }).format(g);
+      } catch {
+        return x;
+      }
+    }
+    function h(x, u = "en") {
+      try {
+        const g = /* @__PURE__ */ new Date(`${x}T00:00:00`), D = u === "id" ? "id-ID" : u;
+        return new Intl.DateTimeFormat(D, {
+          dateStyle: "medium"
+          // "18 Okt 2025"
+        }).format(g);
+      } catch {
+        return x;
+      }
+    }
+    function v(x, u = "en") {
+      try {
+        const [g, D] = x.split(":"), le = /* @__PURE__ */ new Date();
+        le.setHours(parseInt(g, 10), parseInt(D, 10), 0, 0);
+        const pe = u === "id" ? "id-ID" : u;
+        return new Intl.DateTimeFormat(pe, {
+          timeStyle: "short"
+          // "10.54"
+        }).format(le);
+      } catch {
+        return x;
+      }
+    }
+    const y = e, i = V({
+      ...y
+    }), C = d, O = V(null), F = V(), b = X(() => Ue[y.base?.lang ?? "en"]), {
+      searchQuery: S,
+      currentPage: $,
+      selectedItems: H,
+      selectAll: E,
+      showWarningModel: B,
+      showWarningModelSelected: p,
+      idData: z,
+      FormModalOpen: R,
+      detailItemModal: te,
+      isUpdate: Z,
+      dataChildDelete: G,
+      selectedItem: U,
+      filteredData: N,
+      paginatedData: Y,
+      totalPages: ne,
+      visiblePages: de,
+      selectedItemNames: he,
+      toggleAll: ye,
+      sortBy: ae,
+      prevPage: se,
+      nextPage: ee,
+      setUpData: Q,
+      GetDataById: J
+    } = tn(i.value, C, O, b.value), {
+      initialData: be,
+      openEditModal: ie,
+      openCreateModal: m,
+      openShowModal: A,
+      openWarningDeleteData: j,
+      openWarningDeleteSelectedData: _,
+      closeModal: M,
+      submitFormData: f,
+      DeleteData: w,
+      DeleteSeletedData: T
+    } = en(
+      i.value,
+      C,
+      Q,
+      O,
+      K,
+      b.value,
+      J,
+      {
+        selectedItems: H,
+        idData: z,
+        isUpdate: Z,
+        FormModalOpen: R,
+        detailItemModal: te,
+        dataChildDelete: G,
+        showWarningModel: B,
+        showWarningModelSelected: p
+      }
+    );
+    Ae(H, (x) => {
+      E.value = x.length === Y.value.length && Y.value.length > 0;
+    }), Ae(S, () => {
+      $.value = 1;
+    }), Ae(
+      () => y.base.dataTabelCustomDisplay || y.base.schema,
+      async () => {
+        Object.assign(i.value, {
+          ...y
+        }), H.value = [], await Q();
+      }
+    ), Se(async () => {
+      Object.assign(i.value, {
+        ...y
+      }), await Q();
+    }), Xe("TableComponents", { ShowAlert: K, loader: O, labels: b });
+    function K(x, u, g) {
+      const D = {
+        type: x,
+        title: u,
+        messages: g
+      };
+      F.value?.addAlert(D);
+    }
+    return (x, u) => (n(), s("div", on, [
+      I(l(nt), {
+        ref_key: "loader",
+        ref: O
+      }, null, 512),
+      l(B) ? (n(), ce(l(Pe), {
+        key: 0,
+        title: b.value.warning.delete,
+        message: `${l(U).name ?? l(U)[i.value?.keys?.nameKey ?? i.value?.keys?.idKey ?? "id"]}`,
+        onConfirm: u[0] || (u[0] = () => {
+          l(z) !== null && l(w)(l(z));
+        }),
+        onClose: l(M)
+      }, null, 8, ["title", "message", "onClose"])) : L("", !0),
+      l(p) ? (n(), ce(l(Pe), {
+        key: 1,
+        title: b.value.warning.deleteMany,
+        message: l(he),
+        onConfirm: u[1] || (u[1] = () => l(T)(l(H))),
+        onClose: l(M)
+      }, null, 8, ["title", "message", "onClose"])) : L("", !0),
+      l(te) ? (n(), ce(l(Va), {
+        key: 2,
+        title: b.value?.title?.display,
+        "close-text": b.value?.btn?.close,
+        schema: i.value?.base?.schema.display ?? i.value?.base?.schema.global ?? {},
+        "form-data": l(be) ?? {},
+        "value-null-view": !0,
+        onClose: l(M)
+      }, null, 8, ["title", "close-text", "schema", "form-data", "onClose"])) : L("", !0),
+      I(l(Ua), {
+        ref_key: "alert",
+        ref: F
+      }, null, 512),
+      l(R) ? (n(), ce(st, {
+        key: 3,
+        id: l(Z) ?? null,
+        "is-update": !!l(Z),
+        schema: l(Z) ? i.value.base.schema.update ?? i.value.base.schema.global : i.value.base.schema.create ?? i.value.base.schema.global,
+        "initial-data": l(Z) ? l(be) : void 0,
+        lang: i.value.base.lang ?? "en",
+        onCancel: u[2] || (u[2] = (g) => R.value = !1),
+        onDataChildRemove: u[3] || (u[3] = (g) => G.value = g),
+        onSubmit: l(f)
+      }, null, 8, ["id", "is-update", "schema", "initial-data", "lang", "onSubmit"])) : L("", !0),
+      a("div", rn, [
+        a("div", cn, [
+          a("div", un, [
+            a("div", dn, [
+              a("div", vn, [
+                i.value?.feature?.createActive ? (n(), s("button", {
+                  key: 0,
+                  onClick: u[4] || (u[4] = (g) => l(m)()),
+                  class: "btn btn-primary"
+                }, [
+                  u[14] || (u[14] = a("span", { class: "btn-icon" }, [
+                    a("svg", {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none"
+                    }, [
+                      a("path", {
+                        d: "M12 5V19M5 12H19",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      })
+                    ])
+                  ], -1)),
+                  oe(" " + k(b.value?.btn?.add), 1)
+                ])) : L("", !0),
+                l(H).length > 0 && i.value?.feature?.deleteManyActive ? (n(), s("button", {
+                  key: 1,
+                  onClick: u[5] || (u[5] = (g) => l(_)()),
+                  class: re(["btn btn-danger", { disabled: l(H).length === 0 }]),
+                  disabled: l(H).length === 0
+                }, [
+                  u[15] || (u[15] = a("span", { class: "btn-icon" }, [
+                    a("svg", {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none"
+                    }, [
+                      a("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)),
+                  oe(" " + k(b.value?.btn?.deleteMany), 1)
+                ], 10, mn)) : L("", !0)
+              ])
+            ]),
+            a("div", hn, [
+              i.value?.feature?.searchQueryActive ? (n(), s("div", yn, [
+                u[16] || (u[16] = a("div", { class: "search-icon" }, [
+                  a("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none"
+                  }, [
+                    a("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)),
+                He(a("input", {
+                  "onUpdate:modelValue": u[6] || (u[6] = (g) => Ke(S) ? S.value = g : null),
+                  type: "text",
+                  placeholder: b.value?.search || "Search...",
+                  class: "search-input",
+                  onKeyup: u[7] || (u[7] = ze((g) => $.value = 1, ["enter"]))
+                }, null, 40, fn), [
+                  [Ye, l(S)]
+                ])
+              ])) : L("", !0)
+            ])
+          ]),
+          l(H).length > 0 ? (n(), s("div", bn, [
+            a("span", gn, k(l(H).length), 1),
+            oe(" " + k(l(H).length === 1 ? b.value.selection.selectedOne ?? "item is selected" : b.value.selection.selected ?? "items are selected"), 1)
+          ])) : L("", !0)
+        ]),
+        l(N).length === 0 ? (n(), s("div", kn, [
+          u[18] || (u[18] = a("div", { class: "empty-icon" }, [
+            a("svg", {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 24 24",
+              fill: "none"
+            }, [
+              a("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"
+              }),
+              a("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)),
+          a("h3", wn, k(b.value?.message?.notFound), 1),
+          a("p", pn, k(b.value?.message?.notFoundDesc || "No data available"), 1),
+          i.value?.feature?.createActive ? (n(), s("button", {
+            key: 0,
+            onClick: u[8] || (u[8] = (g) => l(m)()),
+            class: "btn btn-primary empty-action"
+          }, [
+            u[17] || (u[17] = a("span", { class: "btn-icon" }, [
+              a("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none"
+              }, [
+                a("path", {
+                  d: "M12 5V19M5 12H19",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ])
+            ], -1)),
+            oe(" " + k(b.value?.btn?.add), 1)
+          ])) : L("", !0)
+        ])) : (n(), s("div", _n, [
+          a("div", Cn, [
+            a("table", Dn, [
+              a("thead", Mn, [
+                a("tr", null, [
+                  a("th", $n, [
+                    i.value?.feature?.deleteManyActive ? He((n(), s("input", {
+                      key: 0,
+                      type: "checkbox",
+                      onChange: u[9] || (u[9] = //@ts-ignore
+                      (...g) => l(ye) && l(ye)(...g)),
+                      "onUpdate:modelValue": u[10] || (u[10] = (g) => Ke(E) ? E.value = g : null),
+                      class: "checkbox-input"
+                    }, null, 544)), [
+                      [Fe, l(E)]
+                    ]) : L("", !0)
+                  ]),
+                  (n(!0), s(W, null, q(i.value?.base.headersTabelDisplay, (g, D) => (n(), s("th", {
+                    key: g,
+                    class: re(["table-header-cell", { "hidden-mobile": D > 0 }])
+                  }, [
+                    a("div", An, [
+                      oe(k(g) + " ", 1),
+                      i.value?.feature?.sortable ? (n(), s("button", {
+                        key: 0,
+                        onClick: (le) => l(ae)(g),
+                        class: "sort-button"
+                      }, [...u[19] || (u[19] = [
+                        a("svg", {
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none"
+                        }, [
+                          a("path", {
+                            d: "M8 9L12 5L16 9M16 15L12 19L8 15",
+                            stroke: "currentColor",
+                            "stroke-width": "2",
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round"
+                          })
+                        ], -1)
+                      ])], 8, Tn)) : L("", !0)
+                    ])
+                  ], 2))), 128)),
+                  a("th", xn, k(b.value?.action || "Actions"), 1)
+                ])
+              ]),
+              a("tbody", On, [
+                (n(!0), s(W, null, q(l(Y), (g) => (n(), s("tr", {
+                  key: g?.[i.value?.keys?.idKey ?? "id"],
+                  class: "table-row"
+                }, [
+                  a("td", jn, [
+                    i.value?.feature?.deleteManyActive ? He((n(), s("input", {
+                      key: 0,
+                      type: "checkbox",
+                      "onUpdate:modelValue": u[11] || (u[11] = (D) => Ke(H) ? H.value = D : null),
+                      value: g?.[i.value?.keys?.idKey ?? "id"],
+                      class: "checkbox-input"
+                    }, null, 8, Hn)), [
+                      [Fe, l(H)]
+                    ]) : L("", !0)
+                  ]),
+                  (n(!0), s(W, null, q(l(Ya)(g), (D, le, pe) => (n(), s("td", {
+                    key: le,
+                    class: re(["table-cell", {
+                      "hidden-mobile": pe > 0,
+                      "primary-cell": pe === 0
+                    }])
+                  }, [
+                    l(Xa)(D) ? (n(), s("div", {
+                      key: 0,
+                      innerHTML: D,
+                      class: "html-content"
+                    }, null, 8, Kn)) : le === "status" || le === "active" ? (n(), s("div", Bn, [
+                      a("span", {
+                        class: re({
+                          "status-active": D,
+                          "status-inactive": !D
+                        })
+                      }, k(D ? b.value?.btn.toogle?.active || "Active" : b.value?.btn.toogle?.inactive || "Inactive"), 3)
+                    ])) : r(D) ? (n(), s("div", Vn, [
+                      u[20] || (u[20] = a("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        class: "cell-icon"
+                      }, [
+                        a("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"
+                        }),
+                        a("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)),
+                      a("span", null, k(t(D, i.value.base.lang ?? "en")), 1)
+                    ])) : o(D) ? (n(), s("div", Sn, [
+                      u[21] || (u[21] = a("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        class: "cell-icon"
+                      }, [
+                        a("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)),
+                      a("span", null, k(h(D, i.value.base.lang ?? "en")), 1)
+                    ])) : c(D) ? (n(), s("div", In, [
+                      u[22] || (u[22] = a("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        class: "cell-icon"
+                      }, [
+                        a("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"
+                        }),
+                        a("path", {
+                          d: "M12 6V12L16 14",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round"
+                        })
+                      ], -1)),
+                      a("span", null, k(v(D, i.value.base.lang ?? "en")), 1)
+                    ])) : l(Re)(D) ? (n(), s("div", Ln, [
+                      a("div", Nn, [
+                        a("img", {
+                          src: l(Ee)(D),
+                          class: "image-preview",
+                          alt: `Preview ${le}`
+                        }, null, 8, Fn)
+                      ])
+                    ])) : l(Ja)(D) ? (n(), s("div", Pn, [
+                      (n(!0), s(W, null, q(D.slice(0, 3), (_e, Ce) => (n(), s("div", {
+                        key: Ce,
+                        style: je({ backgroundColor: _e }),
+                        class: "color-chip",
+                        title: _e
+                      }, null, 12, En))), 128)),
+                      D.length > 3 ? (n(), s("span", zn, "+" + k(D.length - 3), 1)) : L("", !0)
+                    ])) : l(Ze)(D) ? (n(), s("div", Un, [
+                      a("div", {
+                        style: je({ backgroundColor: D }),
+                        class: "color-chip single",
+                        title: D
+                      }, null, 12, Wn)
+                    ])) : l(Qa)(D) ? (n(), s("div", Rn, [
+                      (n(!0), s(W, null, q(D.slice(0, 3), (_e, Ce) => (n(), s("div", {
+                        key: Ce,
+                        class: "image-container small"
+                      }, [
+                        a("img", {
+                          src: l(Ee)(_e),
+                          class: "image-preview",
+                          alt: `Preview ${le}-${Ce}`
+                        }, null, 8, Zn)
+                      ]))), 128)),
+                      D.length > 3 ? (n(), s("span", qn, "+" + k(D.length - 3), 1)) : L("", !0)
+                    ])) : Array.isArray(D) ? (n(), s("div", Gn, k(D.join(", ")), 1)) : (n(), s("div", Qn, k(D), 1))
+                  ], 2))), 128)),
+                  a("td", Jn, [
+                    a("div", Xn, [
+                      i.value?.feature?.updateActive ? (n(), s("button", {
+                        key: 0,
+                        onClick: (D) => l(ie)(g?.[i.value?.keys?.idKey ?? "id"]),
+                        class: "action-btn btn-edit"
+                      }, [
+                        u[23] || (u[23] = a("span", { class: "action-icon" }, [
+                          a("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none"
+                          }, [
+                            a("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)),
+                        a("span", es, k(b.value?.btn?.update), 1)
+                      ], 8, Yn)) : L("", !0),
+                      i.value?.feature?.deleteActive ? (n(), s("button", {
+                        key: 1,
+                        onClick: (D) => l(j)(g?.[i.value?.keys?.idKey ?? "id"]),
+                        class: "action-btn btn-delete"
+                      }, [
+                        u[24] || (u[24] = a("span", { class: "action-icon" }, [
+                          a("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none"
+                          }, [
+                            a("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)),
+                        a("span", as, k(b.value?.btn?.remove), 1)
+                      ], 8, ts)) : L("", !0),
+                      i.value?.feature?.displayActive ? (n(), s("button", {
+                        key: 2,
+                        onClick: (D) => l(A)(g?.[i.value?.keys?.idKey ?? "id"]),
+                        class: "action-btn btn-view"
+                      }, [
+                        u[25] || (u[25] = a("span", { class: "action-icon" }, [
+                          a("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none"
+                          }, [
+                            a("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"
+                            }),
+                            a("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)),
+                        a("span", ss, k(b.value?.btn?.display), 1)
+                      ], 8, ns)) : L("", !0)
+                    ])
+                  ])
+                ]))), 128))
+              ])
+            ])
+          ]),
+          a("div", is, [
+            a("div", ls, k(i.value?.pagination?.indicator?.displayingText || "Showing") + " " + k((l($) - 1) * (i.value?.pagination?.itemsPerPage ?? 5) + 1) + " - " + k(Math.min(
+              l($) * (i.value?.pagination?.itemsPerPage ?? 5),
+              l(N).length
+            )) + " of " + k(l(N).length) + " " + k(i.value?.pagination?.indicator?.dataText || "") + " data ", 1),
+            a("div", os, [
+              a("button", {
+                onClick: u[12] || (u[12] = //@ts-ignore
+                (...g) => l(se) && l(se)(...g)),
+                disabled: l($) === 1,
+                class: "pagination-btn pagination-prev"
+              }, [
+                u[26] || (u[26] = a("span", { class: "btn-icon" }, [
+                  a("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none"
+                  }, [
+                    a("path", {
+                      d: "M15 18L9 12L15 6",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ], -1)),
+                oe(" " + k(b.value?.btn?.prev || "Previous"), 1)
+              ], 8, rs),
+              a("div", cs, [
+                (n(!0), s(W, null, q(l(de), (g) => (n(), s("button", {
+                  key: g + "",
+                  onClick: (D) => typeof g == "number" && ($.value = g),
+                  disabled: g === "...",
+                  class: re([{
+                    "page-active": l($) === g,
+                    "page-ellipsis": g === "..."
+                  }, "page-btn"])
+                }, k(g), 11, us))), 128))
+              ]),
+              a("button", {
+                onClick: u[13] || (u[13] = //@ts-ignore
+                (...g) => l(ee) && l(ee)(...g)),
+                disabled: l($) === l(ne) || l(ne) === 0,
+                class: "pagination-btn pagination-next"
+              }, [
+                oe(k(b.value?.btn?.next || "Next") + " ", 1),
+                u[27] || (u[27] = a("span", { class: "btn-icon" }, [
+                  a("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none"
+                  }, [
+                    a("path", {
+                      d: "M9 18L15 12L9 6",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ], -1))
+              ], 8, ds)
+            ])
+          ])
+        ]))
+      ])
+    ]));
+  }
+}), ps = /* @__PURE__ */ me(vs, [["__scopeId", "data-v-76b9b7a6"]]);
+export {
+  Ua as A,
+  ys as B,
+  xe as F,
+  fs as I,
+  Va as M,
+  ps as T,
+  Pe as W,
+  bs as _,
+  P as a,
+  nn as b,
+  gs as c,
+  an as d,
+  sn as e,
+  ln as f,
+  ks as g,
+  ws as h,
+  Ie as i,
+  ct as j,
+  ut as k,
+  dt as l
+};