@opengis/table 0.0.1 → 0.0.12

package/index.mjs

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