@opengis/table 0.0.15 → 0.0.17

package/dist/index.mjs

@@ -1,31 +1,5 @@
-import { inject as ge, defineComponent as S, computed as m, createElementBlock as d, openBlock as u, toDisplayString as x, normalizeStyle as fe, normalizeClass as b, Fragment as N, renderList as R, createElementVNode as v, createTextVNode as E, ref as w, useSlots as me, watch as j, onMounted as be, provide as De, createCommentVNode as I, createBlock as B, renderSlot as he, resolveDynamicComponent as J, unref as Fe, withDirectives as Te, vShow as Ae } from "vue";
-/*!
-  * vue-router v4.5.1
-  * (c) 2025 Eduardo San Martin Morote
-  * @license MIT
-  */
-var ue;
-(function(c) {
-  c.pop = "pop", c.push = "push";
-})(ue || (ue = {}));
-var ce;
-(function(c) {
-  c.back = "back", c.forward = "forward", c.unknown = "";
-})(ce || (ce = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
-var de;
-(function(c) {
-  c[c.aborted = 4] = "aborted", c[c.cancelled = 8] = "cancelled", c[c.duplicated = 16] = "duplicated";
-})(de || (de = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
-const Ie = Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
-function Ne() {
-  return ge(Ie);
-}
-const Re = /* @__PURE__ */ S({
+import { defineComponent as S, computed as f, createElementBlock as u, openBlock as o, toDisplayString as h, normalizeStyle as de, normalizeClass as m, Fragment as B, renderList as R, createElementVNode as d, createTextVNode as L, ref as w, useSlots as ve, watch as z, onMounted as ge, provide as Ce, createCommentVNode as j, createBlock as P, renderSlot as pe, resolveDynamicComponent as J, inject as $e, withDirectives as Te, vShow as Fe } from "vue";
+const Se = /* @__PURE__ */ S({
   name: "NumberFormat",
   __name: "NumberFormat",
   props: {
@@ -33,13 +7,13 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, o = m(() => a.value === null || a.value === void 0 ? "" : typeof a.value == "number" ? a.value.toFixed(2) : Intl.NumberFormat("uk-UA", {
+  setup(b) {
+    const a = b, e = f(() => a.value === null || a.value === void 0 ? "" : typeof a.value == "number" ? a.value.toFixed(2) : Intl.NumberFormat("uk-UA", {
       maximumFractionDigits: 2
     }).format(Number(a.value)));
-    return (e, l) => (u(), d("span", null, x(o.value), 1));
+    return (c, r) => (o(), u("span", null, h(e.value), 1));
   }
-}), Ve = /* @__PURE__ */ S({
+}), De = /* @__PURE__ */ S({
   name: "DateFormat",
   __name: "DateFormat",
   props: {
@@ -47,8 +21,8 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, o = m(() => {
+  setup(b) {
+    const a = b, e = f(() => {
       if (!a.value) return "";
       try {
         return new Date(a.value).toLocaleDateString();
@@ -56,9 +30,9 @@ const Re = /* @__PURE__ */ S({
         return a.value;
       }
     });
-    return (e, l) => (u(), d("span", null, x(o.value), 1));
+    return (c, r) => (o(), u("span", null, h(e.value), 1));
   }
-}), je = /* @__PURE__ */ S({
+}), Ae = /* @__PURE__ */ S({
   name: "TextFormat",
   __name: "TextFormat",
   props: {
@@ -66,11 +40,11 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, { value: o } = a, e = m(() => Array.isArray(o) ? o.map((l) => l.text || l).join(",") : o?.text || o);
-    return (l, s) => (u(), d("span", null, x(e.value), 1));
+  setup(b) {
+    const a = b, { value: e } = a, c = f(() => Array.isArray(e) ? e.map((r) => r.text || r).join(",") : e?.text || e);
+    return (r, s) => (o(), u("span", null, h(c.value), 1));
   }
-}), Be = /* @__PURE__ */ S({
+}), Ie = /* @__PURE__ */ S({
   name: "BadgeFormat",
   __name: "BadgeFormat",
   props: {
@@ -78,16 +52,16 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, o = m(() => {
+  setup(b) {
+    const a = b, e = f(() => {
       const s = String(a.value || "").toLowerCase(), i = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";
       return s.includes("success") || s.includes("active") || s.includes("completed") ? `${i} bg-green-100 text-green-800` : s.includes("error") || s.includes("failed") || s.includes("inactive") ? `${i} bg-red-100 text-red-800` : s.includes("warning") || s.includes("pending") ? `${i} bg-yellow-100 text-yellow-800` : s.includes("info") || s.includes("processing") ? `${i} bg-blue-100 text-blue-800` : a.value?.color && !/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(a.value.color) ? `${i} bg-${a.value.color}-100 text-${a.value.color}-800` : `${i} bg-gray-100 text-gray-800`;
     });
-    function e(s, i = 1) {
-      const _ = parseInt(s.slice(1, 3), 16), F = parseInt(s.slice(3, 5), 16), D = parseInt(s.slice(5, 7), 16);
-      return `rgba(${_}, ${F}, ${D}, ${i})`;
+    function c(s, i = 1) {
+      const _ = parseInt(s.slice(1, 3), 16), $ = parseInt(s.slice(3, 5), 16), T = parseInt(s.slice(5, 7), 16);
+      return `rgba(${_}, ${$}, ${T}, ${i})`;
     }
-    const l = m(() => {
+    const r = f(() => {
       const s = {
         minWidth: "60px",
         textAlign: "center",
@@ -95,21 +69,21 @@ const Re = /* @__PURE__ */ S({
       };
       return /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(a.value?.color) ? {
         ...s,
-        backgroundColor: e(a.value.color, 0.1),
-        color: e(a.value.color, 0.8)
+        backgroundColor: c(a.value.color, 0.1),
+        color: c(a.value.color, 0.8)
       } : s;
     });
-    return (s, i) => (u(), d("span", {
-      class: b(["badge", o.value]),
-      style: fe(l.value)
-    }, x(s.value?.text || s.value), 7));
+    return (s, i) => (o(), u("span", {
+      class: m(["badge", e.value]),
+      style: de(r.value)
+    }, h(s.value?.text || s.value), 7));
   }
-}), Ee = (c, a) => {
-  const o = c.__vccOpts || c;
-  for (const [e, l] of a)
-    o[e] = l;
-  return o;
-}, ze = /* @__PURE__ */ Ee(Be, [["__scopeId", "data-v-28700c64"]]), Pe = { class: "flex flex-wrap gap-1" }, Le = /* @__PURE__ */ S({
+}), je = (b, a) => {
+  const e = b.__vccOpts || b;
+  for (const [c, r] of a)
+    e[c] = r;
+  return e;
+}, Be = /* @__PURE__ */ je(Ie, [["__scopeId", "data-v-28700c64"]]), Re = { class: "flex flex-wrap gap-1" }, ze = /* @__PURE__ */ S({
   name: "ArrayFormat",
   __name: "ArrayFormat",
   props: {
@@ -117,16 +91,16 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, o = m(() => a.value ? Array.isArray(a.value) ? a.value : [a.value] : []), e = (l) => l ? typeof l == "object" && l.name ? l.name : typeof l == "string" || typeof l == "number" ? String(l) : JSON.stringify(l) : "";
-    return (l, s) => (u(), d("div", Pe, [
-      (u(!0), d(N, null, R(o.value, (i, _) => (u(), d("span", {
+  setup(b) {
+    const a = b, e = f(() => a.value ? Array.isArray(a.value) ? a.value : [a.value] : []), c = (r) => r ? typeof r == "object" && r.name ? r.name : typeof r == "string" || typeof r == "number" ? String(r) : JSON.stringify(r) : "";
+    return (r, s) => (o(), u("div", Re, [
+      (o(!0), u(B, null, R(e.value, (i, _) => (o(), u("span", {
         key: _,
         class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 transition-colors"
-      }, x(e(i)), 1))), 128))
+      }, h(c(i)), 1))), 128))
     ]));
   }
-}), Me = ["href", "target"], Oe = /* @__PURE__ */ S({
+}), Pe = ["href", "target"], Le = /* @__PURE__ */ S({
   __name: "LinkFormat",
   props: {
     href: { default: "" },
@@ -136,24 +110,24 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, o = m(() => typeof a.value == "string" || typeof a.value == "number" ? a.value : a.value?.text || a.value?.label || "Link"), e = m(() => a.href ? a.href : typeof a.value == "object" && a.value?.href ? a.value.href : ""), l = m(() => a.target ? a.target : typeof a.value == "object" && a.value?.target ? a.value.target : "_self"), s = m(() => "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer"), i = (_) => {
+  setup(b) {
+    const a = b, e = f(() => typeof a.value == "string" || typeof a.value == "number" ? a.value : a.value?.text || a.value?.label || "Link"), c = f(() => a.href ? a.href : typeof a.value == "object" && a.value?.href ? a.value.href : ""), r = f(() => a.target ? a.target : typeof a.value == "object" && a.value?.target ? a.value.target : "_self"), s = f(() => "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer"), i = (_) => {
       a.onClick && a.row && (_.preventDefault(), a.onClick(a.row, a.value));
     };
-    return (_, F) => e.value ? (u(), d("a", {
+    return (_, $) => c.value ? (o(), u("a", {
       key: 0,
-      href: e.value,
-      target: l.value,
-      class: b(s.value),
+      href: c.value,
+      target: r.value,
+      class: m(s.value),
       onClick: i
-    }, x(o.value), 11, Me)) : (u(), d("button", {
+    }, h(e.value), 11, Pe)) : (o(), u("button", {
       key: 1,
       type: "button",
-      class: b(s.value),
+      class: m(s.value),
       onClick: i
-    }, x(o.value), 3));
+    }, h(e.value), 3));
   }
-}), He = /* @__PURE__ */ S({
+}), Ne = /* @__PURE__ */ S({
   name: "TextFormat",
   __name: "SelectFormat",
   props: {
@@ -161,19 +135,19 @@ const Re = /* @__PURE__ */ S({
     row: {},
     column: {}
   },
-  setup(c) {
-    const a = c, { value: o } = a, e = m(() => Array.isArray(o) ? o.map((l) => l.text || l).filter((l, s) => s < 2).join(", ") + (o.length > 2 ? ` +${o.length - 2}` : "") : o?.text || o);
-    return (l, s) => (u(), d("span", null, x(e.value), 1));
+  setup(b) {
+    const a = b, { value: e } = a, c = f(() => Array.isArray(e) ? e.map((r) => r.text || r).filter((r, s) => s < 2).join(", ") + (e.length > 2 ? ` +${e.length - 2}` : "") : e?.text || e);
+    return (r, s) => (o(), u("span", null, h(c.value), 1));
   }
-}), ve = {
-  number: Re,
-  date: Ve,
-  text: je,
-  badge: ze,
-  array: Le,
-  select: He,
-  link: Oe
-}, We = { class: "flex items-center space-x-4" }, Ue = { class: "font-medium" }, Je = { class: "font-medium" }, Ke = { class: "font-medium" }, qe = { class: "flex items-center space-x-2" }, Ge = ["disabled"], Qe = { class: "flex items-center space-x-1" }, Xe = ["onClick"], Ye = ["disabled"], ye = /* @__PURE__ */ S({
+}), ue = {
+  number: Se,
+  date: De,
+  text: Ae,
+  badge: Be,
+  array: ze,
+  select: Ne,
+  link: Le
+}, Ve = { class: "flex items-center space-x-4" }, Me = { class: "font-medium" }, Ee = { class: "font-medium" }, He = { class: "font-medium" }, We = { class: "flex items-center space-x-2" }, Ue = ["disabled"], Oe = { class: "flex items-center space-x-1" }, Je = ["onClick"], qe = ["disabled"], fe = /* @__PURE__ */ S({
   name: "Pagination",
   __name: "Pagination",
   props: {
@@ -184,8 +158,8 @@ const Re = /* @__PURE__ */ S({
     size: { default: "medium" }
   },
   emits: ["update:page"],
-  setup(c, { emit: a }) {
-    const o = c, e = m(() => ({
+  setup(b, { emit: a }) {
+    const e = b, c = f(() => ({
       small: {
         text: "text-xs",
         button: "px-2 h-7 text-xs min-w-[28px] flex items-center justify-center",
@@ -201,16 +175,16 @@ const Re = /* @__PURE__ */ S({
         button: "px-4 h-11 text-base min-w-[44px] flex items-center justify-center",
         icon: "w-5 h-5"
       }
-    })[o.size]), l = m(() => {
-      const { theme: f } = o;
-      return f === "dark" ? {
+    })[e.size]), r = f(() => {
+      const { theme: p } = e;
+      return p === "dark" ? {
         container: "bg-gray-900 border-gray-700",
         text: "text-gray-300",
         button: "text-gray-300 bg-gray-800 border-gray-600 hover:bg-gray-700",
         buttonDisabled: "text-gray-500 bg-gray-800",
         buttonActive: "bg-blue-600 text-white",
         ellipsis: "text-gray-400"
-      } : f === "light" ? {
+      } : p === "light" ? {
         container: "bg-white border-gray-200",
         text: "text-gray-700",
         button: "text-gray-700 bg-white border-gray-300 hover:bg-gray-50",
@@ -225,128 +199,133 @@ const Re = /* @__PURE__ */ S({
         buttonActive: "bg-blue-600 text-white",
         ellipsis: "text-gray-500 dark:text-gray-400"
       };
-    }), s = a, i = m(() => Math.ceil(o.total / o.limit)), _ = m(() => o.total === 0 ? 0 : (o.page - 1) * o.limit + 1), F = m(() => Math.min(o.page * o.limit, o.total)), D = m(() => {
-      const f = [];
+    }), s = a, i = f(() => Math.ceil(e.total / e.limit)), _ = f(() => e.total === 0 ? 0 : (e.page - 1) * e.limit + 1), $ = f(() => Math.min(e.page * e.limit, e.total)), T = f(() => {
+      const p = [];
       if (i.value <= 7)
-        for (let y = 1; y <= i.value; y += 1)
-          f.push(y);
+        for (let k = 1; k <= i.value; k += 1)
+          p.push(k);
       else {
-        f.push(1), o.page > 4 && f.push("...");
-        const y = Math.max(2, o.page - 1), V = Math.min(i.value - 1, o.page + 1);
-        for (let T = y; T <= V; T += 1)
-          T !== 1 && T !== i.value && f.push(T);
-        o.page < i.value - 3 && f.push("..."), i.value > 1 && f.push(i.value);
+        p.push(1), e.page > 4 && p.push("...");
+        const k = Math.max(2, e.page - 1), F = Math.min(i.value - 1, e.page + 1);
+        for (let A = k; A <= F; A += 1)
+          A !== 1 && A !== i.value && p.push(A);
+        e.page < i.value - 3 && p.push("..."), i.value > 1 && p.push(i.value);
       }
-      return f;
-    }), $ = (f) => {
-      f >= 1 && f <= i.value && f !== o.page && s("update:page", f);
+      return p;
+    }), D = (p) => {
+      p >= 1 && p <= i.value && p !== e.page && s("update:page", p);
     };
-    return (f, h) => (u(), d("div", {
-      class: b(["flex items-center justify-between py-3 border-t", l.value.container])
+    return (p, y) => (o(), u("div", {
+      class: m(["flex items-center justify-between py-3 border-t", r.value.container])
     }, [
-      v("div", We, [
-        v("div", {
-          class: b(["flex items-center text-sm", l.value.text, e.value.text])
+      d("div", Ve, [
+        d("div", {
+          class: m(["flex items-center text-sm", r.value.text, c.value.text])
         }, [
-          v("span", null, [
-            h[2] || (h[2] = E(" Показано ", -1)),
-            v("span", Ue, x(_.value), 1),
-            h[3] || (h[3] = E(" до ", -1)),
-            v("span", Je, x(F.value), 1),
-            h[4] || (h[4] = E(" з ", -1)),
-            v("span", Ke, x(f.total), 1),
-            h[5] || (h[5] = E(" результатів ", -1))
+          d("span", null, [
+            y[2] || (y[2] = L(" Показано ", -1)),
+            d("span", Me, h(_.value), 1),
+            y[3] || (y[3] = L(" до ", -1)),
+            d("span", Ee, h($.value), 1),
+            y[4] || (y[4] = L(" з ", -1)),
+            d("span", He, h(p.total), 1),
+            y[5] || (y[5] = L(" результатів ", -1))
           ])
         ], 2)
       ]),
-      v("div", qe, [
-        v("button", {
-          onClick: h[0] || (h[0] = (y) => $(f.page - 1)),
-          disabled: f.page <= 1,
-          class: b([
+      d("div", We, [
+        d("button", {
+          onClick: y[0] || (y[0] = (k) => D(p.page - 1)),
+          disabled: p.page <= 1,
+          class: m([
             "relative font-medium rounded-md",
-            e.value.button,
-            f.page <= 1 ? l.value.buttonDisabled : l.value.button
+            c.value.button,
+            p.page <= 1 ? r.value.buttonDisabled : r.value.button
           ])
         }, [
-          (u(), d("svg", {
-            class: b(e.value.icon),
+          (o(), u("svg", {
+            class: m(c.value.icon),
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24"
-          }, h[6] || (h[6] = [
-            v("path", {
+          }, y[6] || (y[6] = [
+            d("path", {
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               "stroke-width": "2",
               d: "M15 19l-7-7 7-7"
             }, null, -1)
           ]), 2))
-        ], 10, Ge),
-        v("div", Qe, [
-          (u(!0), d(N, null, R(D.value, (y) => (u(), d(N, { key: y }, [
-            y === "..." ? (u(), d("span", {
+        ], 10, Ue),
+        d("div", Oe, [
+          (o(!0), u(B, null, R(T.value, (k) => (o(), u(B, { key: k }, [
+            k === "..." ? (o(), u("span", {
               key: 0,
-              class: b(["font-medium", e.value.button, l.value.ellipsis])
-            }, " ... ", 2)) : (u(), d("button", {
+              class: m(["font-medium", c.value.button, r.value.ellipsis])
+            }, " ... ", 2)) : (o(), u("button", {
               key: 1,
-              onClick: (V) => $(y),
-              class: b([
+              onClick: (F) => D(k),
+              class: m([
                 "relative font-medium rounded-md",
-                e.value.button,
-                y === f.page ? l.value.buttonActive : l.value.button
+                c.value.button,
+                k === p.page ? r.value.buttonActive : r.value.button
               ])
-            }, x(y), 11, Xe))
+            }, h(k), 11, Je))
           ], 64))), 128))
         ]),
-        v("button", {
-          onClick: h[1] || (h[1] = (y) => $(f.page + 1)),
-          disabled: f.page >= i.value,
-          class: b([
+        d("button", {
+          onClick: y[1] || (y[1] = (k) => D(p.page + 1)),
+          disabled: p.page >= i.value,
+          class: m([
             "relative font-medium rounded-md",
-            e.value.button,
-            f.page >= i.value ? l.value.buttonDisabled : l.value.button
+            c.value.button,
+            p.page >= i.value ? r.value.buttonDisabled : r.value.button
           ])
         }, [
-          (u(), d("svg", {
-            class: b(e.value.icon),
+          (o(), u("svg", {
+            class: m(c.value.icon),
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24"
-          }, h[7] || (h[7] = [
-            v("path", {
+          }, y[7] || (y[7] = [
+            d("path", {
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               "stroke-width": "2",
               d: "M9 5l7 7-7 7"
             }, null, -1)
           ]), 2))
-        ], 10, Ye)
+        ], 10, qe)
       ])
     ], 2));
   }
-}), Ze = {
+}), Ge = {
   key: 0,
   class: "text-center py-8"
-}, et = { class: "inline-flex items-center space-x-2" }, tt = {
+}, Ke = { class: "inline-flex items-center space-x-2" }, Qe = {
   key: 2,
   class: "overflow-x-auto"
-}, at = ["checked", "indeterminate"], rt = ["onClick"], nt = { class: "flex items-center justify-between" }, ot = {
+}, Xe = ["checked", "indeterminate"], Ye = ["onClick"], Ze = { class: "flex items-center justify-between" }, et = {
   key: 0,
   class: "ml-1 text-xs"
-}, lt = { key: 1 }, st = ["onClick"], it = ["checked", "onChange"], ut = ["onClick"], pe = /* @__PURE__ */ S({
+}, tt = {
+  key: 1,
+  class: "w-[100px]"
+}, at = ["onClick"], rt = ["checked", "onChange"], lt = ["onClick"], nt = { class: "text-center" }, ce = /* @__PURE__ */ S({
   name: "DataTable",
   __name: "DataTable",
   props: {
     rows: { default: () => [] },
     columns: { default: () => [] },
     api: {},
+    router: {},
     tableStyle: { default: "min-width: 50rem" },
-    tableClass: { default: "min-w-full divide-y divide-gray-200 dark:divide-gray-700" },
-    tableClassWrapper: {},
     size: { default: "medium" },
     theme: { default: "light" },
     loading: { type: Boolean, default: !1 },
+    classWrapper: { default: "" },
+    classTable: { default: "min-w-full divide-y divide-gray-200 dark:divide-gray-700" },
+    classTbody: { default: "" },
     classTr: { default: "" },
     classTd: { default: "" },
     classTh: { default: "" },
@@ -362,58 +341,66 @@ const Re = /* @__PURE__ */ S({
     getCellData: { type: Function, default: void 0 }
   },
   emits: ["update:page", "update:selectedRows", "row-click", "sort"],
-  setup(c, { emit: a }) {
-    const o = Ne(), e = c, l = a, s = w(e.selectedRows || []), i = w([]), _ = w([]), F = w([]), D = w(!1), $ = w(null), f = me(), h = m(() => f.action), y = m(() => {
+  setup(b, { emit: a }) {
+    const e = b, c = a, r = w(e.selectedRows || []), s = w([]), i = w([]), _ = w([]), $ = w(!1), T = w(null), D = w(e.router), p = ve(), y = f(() => p.action);
+    function k(t) {
+      if (D.value) {
+        D.value.push(t);
+        return;
+      }
+      location.href = t;
+    }
+    const F = f(() => {
       if (e.api)
-        return _.value;
-      if (e.sortable && i.value.length > 0) {
+        return i.value;
+      if (e.sortable && s.value.length > 0) {
         const t = [...e.rows];
-        return t.sort((p, r) => {
-          for (const g of i.value) {
+        return t.sort((v, l) => {
+          for (const g of s.value) {
             if (!g.direction)
               return 0;
-            const n = p[g.field], k = r[g.field];
+            const n = v[g.field], x = l[g.field];
             if (n == null) return 1;
-            if (k == null) return -1;
-            let A = 0;
-            typeof n == "string" && typeof k == "string" ? A = n.localeCompare(k) : n < k ? A = -1 : n > k ? A = 1 : A = 0;
-            const U = g.direction === "desc" ? -A : A;
-            if (U !== 0) return U;
+            if (x == null) return -1;
+            let I = 0;
+            typeof n == "string" && typeof x == "string" ? I = n.localeCompare(x) : n < x ? I = -1 : n > x ? I = 1 : I = 0;
+            const O = g.direction === "desc" ? -I : I;
+            if (O !== 0) return O;
           }
           return 0;
         }), t;
       }
       return e.rows;
     });
-    j(() => e.selectedRows, (t) => {
-      s.value = t || [];
+    z(() => e.selectedRows, (t) => {
+      r.value = t || [];
     });
-    const V = (t) => s.value.some((p) => p === t), T = (t) => {
-      const p = s.value.findIndex((r) => r === t);
-      p > -1 ? s.value.splice(p, 1) : s.value.push(t), l("update:selectedRows", [...s.value]);
-    }, K = m(() => y.value.length > 0 && s.value.length === y.value.length), te = m(() => s.value.length > 0 && s.value.length < y.value.length), z = () => {
-      K.value ? s.value = [] : s.value = [...y.value], l("update:selectedRows", [...s.value]);
-    }, q = (t) => {
+    const A = (t) => r.value.some((v) => v === t), te = (t) => {
+      const v = r.value.findIndex((l) => l === t);
+      v > -1 ? r.value.splice(v, 1) : r.value.push(t), c("update:selectedRows", [...r.value]);
+    }, q = f(() => F.value.length > 0 && r.value.length === F.value.length), N = f(() => r.value.length > 0 && r.value.length < F.value.length), G = () => {
+      q.value ? r.value = [] : r.value = [...F.value], c("update:selectedRows", [...r.value]);
+    }, me = (t) => {
       if (!e.sortable) return;
-      const p = i.value.findIndex((g) => g.field === t);
-      if (p >= 0) {
-        const g = i.value[p];
-        g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" && i.value.splice(p, 1);
+      const v = s.value.findIndex((g) => g.field === t);
+      if (v >= 0) {
+        const g = s.value[v];
+        g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" && s.value.splice(v, 1);
       } else
-        i.value.unshift({
+        s.value.unshift({
           field: t,
           direction: "asc"
         });
-      const r = i.value.filter((g) => g.direction).map((g) => ({
+      const l = s.value.filter((g) => g.direction).map((g) => ({
         name: g.field,
         asc: g.direction === "asc"
       }));
-      l("sort", r), e.api && O();
-    }, xe = (t) => i.value.find((r) => r.field === t)?.direction === "asc", ke = (t) => {
-      const p = i.value.find((r) => r.field === t);
-      if (!p)
+      c("sort", l), e.api && H();
+    }, be = (t) => s.value.find((l) => l.field === t)?.direction === "asc", ye = (t) => {
+      const v = s.value.find((l) => l.field === t);
+      if (!v)
         return "↑↓";
-      switch (p.direction) {
+      switch (v.direction) {
         case "asc":
           return "↑";
         // Up arrow for ascending
@@ -423,26 +410,26 @@ const Re = /* @__PURE__ */ S({
         default:
           return "↕️";
       }
-    }, G = (t) => e.sortable && t.sortable !== !1, _e = (t) => {
-      e.clickable && l("row-click", t);
-    }, P = (t, p) => {
-      const r = p[t.name];
+    }, K = (t) => e.sortable && t.sortable !== !1, he = (t) => {
+      e.clickable && c("row-click", t);
+    }, V = (t, v) => {
+      const l = v[t.name];
       if (e.getCellData || t.getCellData) {
         const g = t.getCellData || e.getCellData;
         if (g) {
           const n = {
             name: t.name,
-            row: p,
-            value: r
+            row: v,
+            value: l
           };
           return g(n);
         }
       }
       return ["_data", "_text"].map((g) => {
         const n = `${t.name}${g}`;
-        return p[n] ? p[n] : null;
-      }).find((g) => g) || r;
-    }, ae = (t) => t.width ? t.width === "w-full" ? "w-full" : typeof t.width == "string" ? t.width : typeof t.width == "number" ? `w-${t.width}` : "" : "", Q = w(e.page), re = w(e.limit), X = w(e.total), L = w(1), Y = w(10), M = w(0), ne = m(() => e.api ? L.value : Q.value), oe = m(() => e.api ? Y.value : re.value), le = m(() => e.api ? M.value : X.value), C = m(() => {
+        return v[n] ? v[n] : null;
+      }).find((g) => g) || l;
+    }, ae = (t) => t.width ? t.width === "w-full" ? "w-full" : typeof t.width == "string" ? `w-[${t.width}px]` : typeof t.width == "number" ? `w-[${t.width}px]` : "" : "", Q = w(e.page), re = w(e.limit), X = w(e.total), M = w(1), Y = w(10), E = w(0), le = f(() => e.api ? M.value : Q.value), ne = f(() => e.api ? Y.value : re.value), se = f(() => e.api ? E.value : X.value), C = f(() => {
       const { theme: t } = e;
       return t === "dark" ? {
         container: "dark",
@@ -482,37 +469,37 @@ const Re = /* @__PURE__ */ S({
         checkbox: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400"
       };
     });
-    j(() => e.page, (t) => {
+    z(() => e.page, (t) => {
       Q.value = t;
-    }), j(() => e.limit, (t) => {
+    }), z(() => e.limit, (t) => {
       re.value = t;
-    }), j(() => e.total, (t) => {
+    }), z(() => e.total, (t) => {
       X.value = t;
     });
-    async function O() {
+    async function H() {
       if (e.api) {
-        D.value = !0, $.value = null;
+        $.value = !0, T.value = null;
         try {
           const t = new URL(e.api, window.location.origin);
-          if (t.searchParams.set("page", ne.value.toString()), t.searchParams.set("limit", oe.value.toString()), i.value.length > 0) {
-            const g = i.value.filter((n) => n.direction).map((n) => `${n.field}:${n.direction}`).join(",");
+          if (t.searchParams.set("page", le.value.toString()), t.searchParams.set("limit", ne.value.toString()), s.value.length > 0) {
+            const g = s.value.filter((n) => n.direction).map((n) => `${n.field}:${n.direction}`).join(",");
             g && t.searchParams.set("sort", g);
           }
-          const p = await fetch(t.toString());
-          if (!p.ok)
-            throw new Error(`HTTP error! status: ${p.status}`);
-          const r = await p.json();
-          r.rows && Array.isArray(r.rows) && (_.value = r.rows), r.columns && Array.isArray(r.columns) && (F.value = r.columns), r.total !== void 0 && (e.api ? M.value = r.total : X.value = r.total);
+          const v = await fetch(t.toString());
+          if (!v.ok)
+            throw new Error(`HTTP error! status: ${v.status}`);
+          const l = await v.json();
+          l.rows && Array.isArray(l.rows) && (i.value = l.rows), l.columns && Array.isArray(l.columns) && (_.value = l.columns), l.total !== void 0 && (e.api ? E.value = l.total : X.value = l.total);
         } catch (t) {
-          $.value = t instanceof Error ? t.message : "Failed to fetch data", console.error("Error fetching data:", t);
+          T.value = t instanceof Error ? t.message : "Failed to fetch data", console.error("Error fetching data:", t);
         } finally {
-          D.value = !1;
+          $.value = !1;
         }
       }
     }
-    const we = (t) => {
-      e.api ? L.value = t : (Q.value = t, l("update:page", t)), e.api && O();
-    }, Ce = m(() => e.showPagination && le.value > 0), H = m(() => ({
+    const xe = (t) => {
+      e.api ? M.value = t : (Q.value = t, c("update:page", t)), e.api && H();
+    }, ke = f(() => e.showPagination && se.value > 0), W = f(() => ({
       small: {
         header: "px-3 py-2 text-xs",
         cell: "px-3 py-2 text-xs"
@@ -526,191 +513,191 @@ const Re = /* @__PURE__ */ S({
         cell: "px-8 py-6 text-base"
       }
     })[e.size]);
-    be(() => {
-      e.api && (e.page && (L.value = e.page), e.limit && (Y.value = e.limit), e.total && (M.value = e.total), O());
-    }), j(() => e.api, (t) => {
-      t && (L.value = e.page || 1, Y.value = e.limit || 10, M.value = e.total || 0, O());
+    ge(() => {
+      e.api && (e.page && (M.value = e.page), e.limit && (Y.value = e.limit), e.total && (E.value = e.total), H());
+    }), z(() => e.api, (t) => {
+      t && (M.value = e.page || 1, Y.value = e.limit || 10, E.value = e.total || 0, H());
     });
-    const $e = m(() => e.api ? F.value : e.columns), Z = w([]), W = w({});
-    De("registerColumn", (t, p) => {
-      Z.value.push(t), p && t.slotName && (W.value[t.name] = p);
+    const _e = f(() => e.api ? _.value : e.columns), Z = w([]), U = w({});
+    Ce("registerColumn", (t, v) => {
+      Z.value.push(t), v && t.slotName && (U.value[t.name] = v);
     });
-    const se = m(() => {
-      const t = $e.value || [], p = [], r = f.default?.();
-      if (r) {
-        const g = r.filter((n) => n.type?.name === "Column" || n.type === "Column" || n.type && typeof n.type == "object" && n.type.name === "Column").map((n) => {
-          const k = n.props || n.componentProps || {}, A = k.field || k.name || "", U = k.header || k.label || "", ie = n.children && n.children.body, ee = {
-            name: A,
+    const oe = f(() => {
+      const t = _e.value || [], v = [], l = p.default?.();
+      if (l) {
+        const g = l.filter((n) => n.type?.name === "Column" || n.type === "Column" || n.type && typeof n.type == "object" && n.type.name === "Column").map((n) => {
+          const x = n.props || n.componentProps || {}, I = x.field || x.name || "", O = x.header || x.label || "", ie = n.children && n.children.body, ee = {
+            name: I,
             // Use field as the name for data access
-            ua: U,
+            ua: O,
             // Use header as the display name
-            format: k.format || "text",
+            format: x.format || "text",
             slotName: ie ? "body" : void 0,
-            ...k
+            ...x
           };
-          return ie && ee.name && (W.value[ee.name] = n.children.body), ee;
+          return ie && ee.name && (U.value[ee.name] = n.children.body), ee;
         });
-        p.push(...g);
+        v.push(...g);
       }
-      if (Z.value.length > 0 && p.push(...Z.value), p.length > 0) {
-        const g = [], n = new Set(p.map((k) => k.name));
-        return t.forEach((k) => {
-          n.has(k.name) || g.push(k);
-        }), g.push(...p), console.log("Combined columns:", {
+      if (Z.value.length > 0 && v.push(...Z.value), v.length > 0) {
+        const g = [], n = new Set(v.map((x) => x.name));
+        return t.forEach((x) => {
+          n.has(x.name) || g.push(x);
+        }), g.push(...v), console.log("Combined columns:", {
           default: t.length,
-          custom: p.length,
+          custom: v.length,
           combined: g.length
         }), g;
       }
       return t.length > 0 ? (console.log("Using default columns:", t.length), t) : [];
-    }), Se = (t = "text") => ve[t] || ve.text;
-    return (t, p) => (u(), d("div", {
-      class: b(["w-full", C.value.container])
+    }), we = (t = "text") => ue[t] || ue.text;
+    return (t, v) => (o(), u("div", {
+      class: m(["w-full", C.value.container])
     }, [
-      D.value || e.loading ? (u(), d("div", Ze, [
-        v("div", et, [
-          p[0] || (p[0] = v("div", { class: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" }, null, -1)),
-          v("span", {
-            class: b(C.value.loading)
+      $.value || e.loading ? (o(), u("div", Ge, [
+        d("div", Ke, [
+          v[0] || (v[0] = d("div", { class: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" }, null, -1)),
+          d("span", {
+            class: m(C.value.loading)
           }, "Loading...", 2)
         ])
-      ])) : $.value ? (u(), d("div", {
+      ])) : T.value ? (o(), u("div", {
         key: 1,
-        class: b(["text-center py-8", C.value.error])
-      }, x($.value), 3)) : !e.loading && y.value.length > 0 ? (u(), d("div", tt, [
-        v("div", {
-          class: b(t.tableClassWrapper ? t.tableClassWrapper : "relative w-full overflow-auto")
+        class: m(["text-center py-8", C.value.error])
+      }, h(T.value), 3)) : !e.loading && F.value.length > 0 ? (o(), u("div", Qe, [
+        d("div", {
+          class: m(t.classWrapper ? t.classWrapper : "relative w-full overflow-auto")
         }, [
-          v("table", {
-            class: b(t.tableClass),
-            style: fe(t.tableStyle)
+          d("table", {
+            class: m(t.classTable),
+            style: de(t.tableStyle)
           }, [
-            v("thead", {
-              class: b(C.value.thead)
+            d("thead", {
+              class: m(C.value.thead)
             }, [
-              v("tr", null, [
-                t.selectable ? (u(), d("th", {
+              d("tr", null, [
+                t.selectable ? (o(), u("th", {
                   key: 0,
-                  class: b(["text-left font-medium uppercase tracking-wider", C.value.th, H.value.header, e.classTh, "w-12"])
+                  class: m(["text-left font-medium uppercase tracking-wider", C.value.th, W.value.header, e.classTh, "w-12"])
                 }, [
-                  v("input", {
+                  d("input", {
                     type: "checkbox",
-                    checked: K.value,
-                    indeterminate: te.value,
-                    onChange: z,
-                    class: b(["h-4 w-4 focus:ring-blue-500 rounded", C.value.checkbox])
-                  }, null, 42, at)
-                ], 2)) : I("", !0),
-                (u(!0), d(N, null, R(se.value.filter((r) => !r.hidden), (r) => (u(), d("th", {
-                  key: r.name,
-                  class: b([
-                    "text-left font-medium uppercase tracking-wider",
-                    C.value.th,
-                    H.value.header,
-                    e.classTh,
-                    r.align ? `text-${r.align}` : "",
-                    G(r) ? ["cursor-pointer", C.value.thHover] : "",
-                    ae(r)
-                  ]),
-                  onClick: (g) => G(r) ? q(r.name) : void 0
+                    checked: q.value,
+                    indeterminate: N.value,
+                    onChange: G,
+                    class: m(["h-4 w-4 focus:ring-blue-500 rounded", C.value.checkbox])
+                  }, null, 42, Xe)
+                ], 2)) : j("", !0),
+                (o(!0), u(B, null, R(oe.value.filter((l) => !l.hidden), (l) => (o(), u("th", {
+                  key: l.name,
+                  class: m([
+                    l.align ? `text-${l.align}` : "",
+                    K(l) ? ["cursor-pointer", C.value.thHover] : "",
+                    ae(l)
+                  ].concat(
+                    e.classTh || [
+                      "text-left font-medium uppercase tracking-wider",
+                      C.value.th,
+                      W.value.header
+                    ]
+                  )),
+                  onClick: (g) => K(l) ? me(l.name) : void 0
                 }, [
-                  v("div", nt, [
-                    v("span", null, x(r.ua || r.header || r.name), 1),
-                    G(r) ? (u(), d("span", ot, [
-                      he(t.$slots, "sort", {
-                        asc: xe(r.name)
+                  d("div", Ze, [
+                    d("span", null, h(l.ua || l.header || l.name), 1),
+                    K(l) ? (o(), u("span", et, [
+                      pe(t.$slots, "sort", {
+                        asc: be(l.name)
                       }, () => [
-                        E(x(ke(r.name)), 1)
+                        L(h(ye(l.name)), 1)
                       ])
-                    ])) : I("", !0)
+                    ])) : j("", !0)
                   ])
-                ], 10, rt))), 128)),
-                h.value ? (u(), d("th", lt, "Дії")) : I("", !0)
+                ], 10, Ye))), 128)),
+                y.value ? (o(), u("th", tt, "Дії")) : j("", !0)
               ])
             ], 2),
-            v("tbody", {
-              class: b(C.value.tbody)
+            d("tbody", {
+              class: m(t.classTbody || C.value.tbody)
             }, [
-              (u(!0), d(N, null, R(y.value, (r, g) => (u(), d("tr", {
+              (o(!0), u(B, null, R(F.value, (l, g) => (o(), u("tr", {
                 key: g,
-                class: b([
+                class: m(e.classTr || [
                   C.value.tr,
-                  e.classTr,
                   e.clickable ? "cursor-pointer" : ""
                 ]),
-                onClick: (n) => e.clickable ? _e(r) : void 0
+                onClick: (n) => e.clickable ? he(l) : void 0
               }, [
-                t.selectable ? (u(), d("td", {
+                t.selectable ? (o(), u("td", {
                   key: 0,
-                  class: b(["whitespace-nowrap", C.value.td, H.value.cell, e.classTd, "w-12"])
+                  class: m(["whitespace-nowrap", C.value.td, W.value.cell, e.classTd, "w-12"])
                 }, [
-                  v("input", {
+                  d("input", {
                     type: "checkbox",
-                    checked: V(r),
-                    onChange: (n) => T(r),
-                    class: b(["h-4 w-4 focus:ring-blue-500 rounded", C.value.checkbox])
-                  }, null, 42, it)
-                ], 2)) : I("", !0),
-                (u(!0), d(N, null, R(se.value.filter((n) => !n.hidden), (n) => (u(), d("td", {
+                    checked: A(l),
+                    onChange: (n) => te(l),
+                    class: m(["h-4 w-4 focus:ring-blue-500 rounded", C.value.checkbox])
+                  }, null, 42, rt)
+                ], 2)) : j("", !0),
+                (o(!0), u(B, null, R(oe.value.filter((n) => !n.hidden), (n) => (o(), u("td", {
                   key: n.name,
-                  class: b([
+                  class: m(e.classTd || [
                     "whitespace-nowrap",
                     C.value.td,
-                    H.value.cell,
-                    e.classTd,
+                    W.value.cell,
                     n.align ? `text-${n.align}` : "",
                     ae(n)
                   ])
                 }, [
-                  n.action && h.value ? (u(), B(J(h.value), {
+                  n.action && y.value ? (o(), P(J(y.value), {
                     key: 0,
-                    row: r,
-                    value: P(n, r)
-                  }, null, 8, ["row", "value"])) : n.slotName && W.value[n.name] ? (u(), B(J(W.value[n.name]), {
+                    row: l,
+                    value: V(n, l)
+                  }, null, 8, ["row", "value"])) : n.slotName && U.value[n.name] ? (o(), P(J(U.value[n.name]), {
                     key: 1,
-                    data: r,
-                    value: P(n, r),
-                    row: r,
+                    data: l,
+                    value: V(n, l),
+                    row: l,
                     column: n
-                  }, null, 8, ["data", "value", "row", "column"])) : n.link ? (u(), d("a", {
+                  }, null, 8, ["data", "value", "row", "column"])) : n.link ? (o(), u("a", {
                     key: 2,
-                    class: b(t.classLink || "hover:text-blue-900 cursor-pointer text-blue-700 hover:underline"),
-                    onClick: (k) => Fe(o).push(n.link.replace("{id}", r.id))
-                  }, x(P(n, r)), 11, ut)) : (u(), B(J(Se(n.format)), {
+                    class: m(t.classLink || "hover:text-blue-900 cursor-pointer text-blue-700 hover:underline"),
+                    onClick: (x) => k(n.link.replace("{id}", l.id))
+                  }, h(V(n, l)), 11, lt)) : (o(), P(J(we(n.format)), {
                     key: 3,
-                    value: P(n, r),
-                    row: r,
+                    value: V(n, l),
+                    row: l,
                     column: n,
                     href: n.link
                   }, null, 8, ["value", "row", "column", "href"]))
                 ], 2))), 128)),
-                v("td", null, [
-                  h.value ? (u(), B(J(h.value), {
+                d("td", nt, [
+                  y.value ? (o(), P(J(y.value), {
                     key: 0,
-                    row: r
-                  }, null, 8, ["row"])) : I("", !0)
+                    row: l
+                  }, null, 8, ["row"])) : j("", !0)
                 ])
-              ], 10, st))), 128))
+              ], 10, at))), 128))
             ], 2)
           ], 6)
         ], 2)
-      ])) : I("", !0),
-      Ce.value && !D.value && !e.loading && !$.value ? (u(), B(ye, {
+      ])) : j("", !0),
+      ke.value && !$.value && !e.loading && !T.value ? (o(), P(fe, {
         key: 3,
-        page: ne.value,
-        limit: oe.value,
-        total: le.value,
+        page: le.value,
+        limit: ne.value,
+        total: se.value,
         theme: e.theme,
         size: e.size,
-        "onUpdate:page": we
-      }, null, 8, ["page", "limit", "total", "theme", "size"])) : I("", !0),
-      !D.value && !e.loading && !$.value && y.value.length === 0 ? (u(), d("div", {
+        "onUpdate:page": xe
+      }, null, 8, ["page", "limit", "total", "theme", "size"])) : j("", !0),
+      !$.value && !e.loading && !T.value && F.value.length === 0 ? (o(), u("div", {
         key: 4,
-        class: b(["text-center py-8", C.value.empty])
-      }, " Дані відсутні ", 2)) : I("", !0)
+        class: m(["text-center py-8", C.value.empty])
+      }, " Дані відсутні ", 2)) : j("", !0)
     ], 2));
   }
-}), ct = { style: { display: "none" } }, dt = /* @__PURE__ */ S({
+}), st = { style: { display: "none" } }, ot = /* @__PURE__ */ S({
   name: "Column",
   __name: "Column",
   props: {
@@ -730,135 +717,135 @@ const Re = /* @__PURE__ */ S({
     getCellData: { type: Function },
     suffix: {}
   },
-  setup(c) {
-    const a = c, o = me(), e = ge("registerColumn");
-    return be(() => {
-      if (e) {
+  setup(b) {
+    const a = b, e = ve(), c = $e("registerColumn");
+    return ge(() => {
+      if (c) {
         const {
-          field: l,
+          field: r,
           name: s,
           header: i,
           label: _,
-          format: F,
-          slotName: D,
-          link: $,
-          action: f,
-          getCellData: h,
-          suffix: y,
-          ...V
-        } = a, z = {
-          name: l || s || "",
+          format: $,
+          slotName: T,
+          link: D,
+          action: p,
+          getCellData: y,
+          suffix: k,
+          ...F
+        } = a, N = {
+          name: r || s || "",
           ua: i || _ || "",
-          format: F || "text",
-          slotName: D || (o.body ? "body" : void 0),
+          format: $ || "text",
+          slotName: T || (e.body ? "body" : void 0),
           // Use 'body' slot if it exists
-          link: $,
-          action: f,
-          getCellData: h,
-          suffix: y,
-          ...V
+          link: D,
+          action: p,
+          getCellData: y,
+          suffix: k,
+          ...F
         };
-        console.log("Registering column:", z);
-        const q = o.body;
-        e(z, q);
+        console.log("Registering column:", N);
+        const G = e.body;
+        c(N, G);
       }
-    }), (l, s) => (u(), d("div", ct, [
-      he(l.$slots, "body", { data: {} })
+    }), (r, s) => (o(), u("div", st, [
+      pe(r.$slots, "body", { data: {} })
     ]));
   }
-}), vt = { class: "mt-4" }, pt = { class: "text-sm text-gray-600 dark:text-gray-300" }, gt = /* @__PURE__ */ S({
+}), it = { class: "mt-4" }, ut = { class: "text-sm text-gray-600 dark:text-gray-300" }, ct = /* @__PURE__ */ S({
   __name: "SelectionInfo",
   props: {
     selectedRows: {},
     totalCount: {}
   },
-  setup(c) {
-    const a = c, o = m(() => a.selectedRows.length);
-    return (e, l) => (u(), d("div", vt, [
-      v("div", pt, " Обрано: " + x(o.value) + " з " + x(e.totalCount) + " записів ", 1)
+  setup(b) {
+    const a = b, e = f(() => a.selectedRows.length);
+    return (c, r) => (o(), u("div", it, [
+      d("div", ut, " Обрано: " + h(e.value) + " з " + h(c.totalCount) + " записів ", 1)
     ]));
   }
-}), ft = { class: "mt-4" }, mt = { class: "border-b border-gray-200 dark:border-gray-700" }, bt = { class: "-mb-px flex space-x-8" }, ht = ["onClick"], yt = { class: "mt-4" }, xt = { class: "bg-gray-900 rounded-lg overflow-hidden" }, kt = { class: "flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700" }, _t = { class: "text-sm text-gray-300" }, wt = ["onClick"], Ct = { class: "p-4 text-sm text-gray-100 overflow-x-auto" }, $t = /* @__PURE__ */ S({
+}), dt = { class: "mt-4" }, vt = { class: "border-b border-gray-200 dark:border-gray-700" }, gt = { class: "-mb-px flex space-x-8" }, pt = ["onClick"], ft = { class: "mt-4" }, mt = { class: "bg-gray-900 rounded-lg overflow-hidden" }, bt = { class: "flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700" }, yt = { class: "text-sm text-gray-300" }, ht = ["onClick"], xt = { class: "p-4 text-sm text-gray-100 overflow-x-auto" }, kt = /* @__PURE__ */ S({
   __name: "CodeTabs",
   props: {
     tabs: {},
     defaultTab: { default: void 0 }
   },
-  setup(c) {
-    const a = c, o = w(a.defaultTab || a.tabs[0]?.id || ""), e = async (l) => {
+  setup(b) {
+    const a = b, e = w(a.defaultTab || a.tabs[0]?.id || ""), c = async (r) => {
       try {
-        await navigator.clipboard.writeText(l), console.log("Код скопійовано!");
+        await navigator.clipboard.writeText(r), console.log("Код скопійовано!");
       } catch (s) {
         console.error("Помилка копіювання:", s);
       }
     };
-    return (l, s) => (u(), d("div", ft, [
-      v("div", mt, [
-        v("nav", bt, [
-          (u(!0), d(N, null, R(l.tabs, (i) => (u(), d("button", {
+    return (r, s) => (o(), u("div", dt, [
+      d("div", vt, [
+        d("nav", gt, [
+          (o(!0), u(B, null, R(r.tabs, (i) => (o(), u("button", {
             key: i.id,
-            onClick: (_) => o.value = i.id,
-            class: b([
+            onClick: (_) => e.value = i.id,
+            class: m([
               "py-2 px-1 border-b-2 font-medium text-sm transition-colors",
-              o.value === i.id ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+              e.value === i.id ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
             ])
-          }, x(i.label), 11, ht))), 128))
+          }, h(i.label), 11, pt))), 128))
         ])
       ]),
-      v("div", yt, [
-        (u(!0), d(N, null, R(l.tabs, (i) => Te((u(), d("div", {
+      d("div", ft, [
+        (o(!0), u(B, null, R(r.tabs, (i) => Te((o(), u("div", {
           key: i.id
         }, [
-          v("div", xt, [
-            v("div", kt, [
-              v("span", _t, x(i.label), 1),
-              v("button", {
-                onClick: (_) => e(i.content),
+          d("div", mt, [
+            d("div", bt, [
+              d("span", yt, h(i.label), 1),
+              d("button", {
+                onClick: (_) => c(i.content),
                 class: "text-gray-400 hover:text-white transition-colors",
                 title: "Копіювати код"
               }, s[0] || (s[0] = [
-                v("svg", {
+                d("svg", {
                   class: "w-4 h-4",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24"
                 }, [
-                  v("path", {
+                  d("path", {
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
                     "stroke-width": "2",
                     d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                   })
                 ], -1)
-              ]), 8, wt)
+              ]), 8, ht)
             ]),
-            v("pre", Ct, [
-              v("code", null, x(i.content), 1)
+            d("pre", xt, [
+              d("code", null, h(i.content), 1)
             ])
           ])
         ])), [
-          [Ae, o.value === i.id]
+          [Fe, e.value === i.id]
         ])), 128))
       ])
     ]));
   }
 });
-pe.install = function(a) {
-  a.component("DataTable", pe), a.component("Column", dt), a.component("Pagination", ye), a.component("SelectionInfo", gt), a.component("CodeTabs", $t);
+ce.install = function(a) {
+  a.component("DataTable", ce), a.component("Column", ot), a.component("Pagination", fe), a.component("SelectionInfo", ct), a.component("CodeTabs", kt);
 };
 export {
-  Le as ArrayFormat,
-  ze as BadgeFormat,
-  $t as CodeTabs,
-  dt as Column,
-  pe as DataTable,
-  Ve as DateFormat,
-  Oe as LinkFormat,
-  Re as NumberFormat,
-  ye as Pagination,
-  He as SelectFormat,
-  gt as SelectionInfo,
-  je as TextFormat,
-  pe as default,
-  ve as formatComponents
+  ze as ArrayFormat,
+  Be as BadgeFormat,
+  kt as CodeTabs,
+  ot as Column,
+  ce as DataTable,
+  De as DateFormat,
+  Le as LinkFormat,
+  Se as NumberFormat,
+  fe as Pagination,
+  Ne as SelectFormat,
+  ct as SelectionInfo,
+  Ae as TextFormat,
+  ce as default,
+  ue as formatComponents
 };