@opengis/table 0.0.1

package/README.md

@@ -0,0 +1,166 @@
+# DataTable Component
+
+Повнофункціональний компонент таблиці для Vue 3 з TypeScript, який підтримує пагінацію, вибір рядків, сортування та кастомні слоти.
+
+## Особливості
+
+- ✅ Пагінація з локальними даними або через API
+- ✅ Вибір рядків з чекбоксами
+- ✅ Різні розміри таблиці (small, medium, large)
+- ✅ Форматування даних (текст, числа, дати, бейджі, масиви)
+- ✅ **Кастомні слоти для колонок**
+- ✅ Стан завантаження та обробка помилок
+- ✅ Темна тема
+- ✅ Адаптивний дизайн
+
+## Кастомні слоти колонок
+
+Компонент підтримує кастомні слоти для створення власної верстки в колонках. Використовуйте `template #body` в компоненті `Column`:
+
+```vue
+<DataTable :rows="data" tableClass="w-full" tableStyle="min-width: 50rem">
+  <Column field="name" header="Назва">
+    <template #body="{ data }">
+      <div>
+        <div class="font-medium">{{ data.name.main }}</div>
+        <div class="text-sm text-gray-500">{{ data.name.sub }}</div>
+      </div>
+    </template>
+  </Column>
+  <Column field="status" header="Статус">
+    <template #body="{ data }">
+      <span :class="getStatusClass(data.status)" class="px-2 py-1 rounded-full text-xs">
+        {{ data.status }}
+      </span>
+    </template>
+  </Column>
+  <Column field="actions" header="Дії">
+    <template #body="{ data }">
+      <div class="flex gap-2">
+        <button @click="handleView(data)" title="Переглянути">
+          <i class="fas fa-eye"></i>
+        </button>
+        <button @click="handleEdit(data)" title="Редагувати">
+          <i class="fas fa-edit"></i>
+        </button>
+      </div>
+    </template>
+  </Column>
+</DataTable>
+```
+
+### Параметри слоту
+
+Слот `#body` отримує об'єкт з наступними властивостями:
+
+- `data` - повний об'єкт рядка даних
+- `value` - значення конкретного поля колонки
+
+### Приклади використання
+
+#### 1. Складена назва з підзаголовком
+```vue
+<Column field="name" header="Назва">
+  <template #body="{ data }">
+    <div>
+      <div class="font-medium">{{ data.name.main }}</div>
+      <div class="text-sm text-gray-500">{{ data.name.sub }}</div>
+    </div>
+  </template>
+</Column>
+```
+
+#### 2. Бейдж з кольором
+```vue
+<Column field="role" header="Роль">
+  <template #body="{ data }">
+    <span :class="data.role === 'Заявник' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'" 
+          class="px-2 py-1 rounded-full text-xs font-medium">
+      {{ data.role }}
+    </span>
+  </template>
+</Column>
+```
+
+#### 3. Статус з іконкою
+```vue
+<Column field="status" header="Статус">
+  <template #body="{ data }">
+    <div class="flex items-center gap-2">
+      <span :class="getStatusIconClass(data.status)" class="text-lg">
+        {{ getStatusIcon(data.status) }}
+      </span>
+      <span>{{ data.status }}</span>
+    </div>
+  </template>
+</Column>
+```
+
+#### 4. Кнопки дій
+```vue
+<Column field="actions" header="Дії">
+  <template #body="{ data }">
+    <div class="flex gap-2">
+      <button @click.stop="handleView(data)" title="Переглянути">
+        <i class="fas fa-eye"></i>
+      </button>
+      <button @click.stop="handleDownload(data)" title="Завантажити">
+        <i class="fas fa-download"></i>
+      </button>
+    </div>
+  </template>
+</Column>
+```
+
+**Важливо:** Використовуйте `@click.stop` для кнопок в слотах, щоб уникнути спрацьовування кліку по рядку таблиці.
+
+## Встановлення
+
+```bash
+npm install @your-org/datatable
+```
+
+## Використання
+
+```vue
+<template>
+  <DataTable
+    :rows="data"
+    :columns="columns"
+    :selectable="true"
+    @update:selectedRows="handleSelection"
+  />
+</template>
+
+<script setup>
+import { DataTable, Column } from '@your-org/datatable';
+
+const data = ref([
+  { id: 1, name: 'Product A', category: 'Electronics' },
+  { id: 2, name: 'Product B', category: 'Books' }
+]);
+
+const columns = ref([
+  { field: 'id', header: 'ID' },
+  { field: 'name', header: 'Name' },
+  { field: 'category', header: 'Category' }
+]);
+</script>
+```
+
+## Пропси
+
+| Пропс | Тип | За замовчуванням | Опис |
+|-------|-----|------------------|------|
+| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Тема таблиці |
+
+## Встановлення
+
+```bash
+npm install
+npm run dev
+```
+
+## Ліцензія
+
+MIT

package/dist/index.css

@@ -0,0 +1 @@
+.badge[data-v-9d7cd70c]{transition:all .2s ease-in-out}.badge[data-v-9d7cd70c]:hover{transform:scale(1.05)}

package/dist/index.mjs

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

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.filter={},f.Vue))})(this,function(f,e){"use strict";const M=e.defineComponent({name:"NumberFormat",__name:"NumberFormat",props:{value:{}},setup(p){const n=p,t=e.computed(()=>n.value===null||n.value===void 0?"":typeof n.value=="number"?n.value.toLocaleString():n.value);return(r,a)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t.value),1))}}),H=e.defineComponent({name:"DateFormat",__name:"DateFormat",props:{value:{}},setup(p){const n=p,t=e.computed(()=>{if(!n.value)return"";try{return new Date(n.value).toLocaleDateString()}catch{return n.value}});return(r,a)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t.value),1))}}),U=e.defineComponent({name:"TextFormat",__name:"TextFormat",props:{value:{}},setup(p){return(n,t)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(n.value),1))}}),O=((p,n)=>{const t=p.__vccOpts||p;for(const[r,a]of n)t[r]=a;return t})(e.defineComponent({name:"BadgeFormat",__name:"BadgeFormat",props:{value:{}},setup(p){const n=p,t=e.computed(()=>{const a=String(n.value||"").toLowerCase(),c="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";return a.includes("success")||a.includes("active")||a.includes("completed")?`${c} bg-green-100 text-green-800`:a.includes("error")||a.includes("failed")||a.includes("inactive")?`${c} bg-red-100 text-red-800`:a.includes("warning")||a.includes("pending")?`${c} bg-yellow-100 text-yellow-800`:a.includes("info")||a.includes("processing")?`${c} bg-blue-100 text-blue-800`:`${c} bg-gray-100 text-gray-800`}),r=e.computed(()=>({minWidth:"60px",textAlign:"center",display:"inline-block"}));return(a,c)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["badge",t.value]),style:e.normalizeStyle(r.value)},e.toDisplayString(a.value),7))}}),[["__scopeId","data-v-9d7cd70c"]]),ee={class:"flex flex-wrap gap-1"},q=e.defineComponent({name:"ArrayFormat",__name:"ArrayFormat",props:{value:{}},setup(p){const n=p,t=e.computed(()=>n.value?Array.isArray(n.value)?n.value:[n.value]:[]),r=a=>a?typeof a=="object"&&a.name?a.name:typeof a=="string"||typeof a=="number"?String(a):JSON.stringify(a):"";return(a,c)=>(e.openBlock(),e.createElementBlock("div",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(s,k)=>(e.openBlock(),e.createElementBlock("span",{key:k,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"},e.toDisplayString(r(s)),1))),128))]))}}),P={number:M,date:H,text:U,badge:O,array:q},te={class:"flex items-center space-x-4"},ae={class:"font-medium"},oe={class:"font-medium"},le={class:"font-medium"},ne={class:"flex items-center space-x-2"},re=["disabled"],se={class:"flex items-center space-x-1"},ie=["onClick"],ce=["disabled"],A=e.defineComponent({name:"Pagination",__name:"Pagination",props:{page:{},limit:{},total:{},theme:{default:"light"},size:{default:"medium"}},emits:["update:page"],setup(p,{emit:n}){const t=p,r=e.computed(()=>({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"}})[t.size]),a=e.computed(()=>{const{theme:i}=t;return i==="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"}:i==="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"}}),c=n,s=e.computed(()=>Math.ceil(t.total/t.limit)),k=e.computed(()=>t.total===0?0:(t.page-1)*t.limit+1),C=e.computed(()=>Math.min(t.page*t.limit,t.total)),x=e.computed(()=>{const i=[];if(s.value<=7)for(let y=1;y<=s.value;y+=1)i.push(y);else{i.push(1),t.page>4&&i.push("...");const y=Math.max(2,t.page-1),E=Math.min(s.value-1,t.page+1);for(let _=y;_<=E;_+=1)_!==1&&_!==s.value&&i.push(_);t.page<s.value-3&&i.push("..."),s.value>1&&i.push(s.value)}return i}),h=i=>{i>=1&&i<=s.value&&i!==t.page&&c("update:page",i)};return(i,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between py-3 border-t",a.value.container])},[e.createElementVNode("div",te,[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center text-sm",a.value.text,r.value.text])},[e.createElementVNode("span",null,[g[2]||(g[2]=e.createTextVNode(" Показано ",-1)),e.createElementVNode("span",ae,e.toDisplayString(k.value),1),g[3]||(g[3]=e.createTextVNode(" до ",-1)),e.createElementVNode("span",oe,e.toDisplayString(C.value),1),g[4]||(g[4]=e.createTextVNode(" з ",-1)),e.createElementVNode("span",le,e.toDisplayString(i.total),1),g[5]||(g[5]=e.createTextVNode(" результатів ",-1))])],2)]),e.createElementVNode("div",ne,[e.createElementVNode("button",{onClick:g[0]||(g[0]=y=>h(i.page-1)),disabled:i.page<=1,class:e.normalizeClass(["relative font-medium rounded-md",r.value.button,i.page<=1?a.value.buttonDisabled:a.value.button])},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(r.value.icon),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},g[6]||(g[6]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"},null,-1)]),2))],10,re),e.createElementVNode("div",se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,y=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:y},[y==="..."?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["font-medium",r.value.button,a.value.ellipsis])}," ... ",2)):(e.openBlock(),e.createElementBlock("button",{key:1,onClick:E=>h(y),class:e.normalizeClass(["relative font-medium rounded-md",r.value.button,y===i.page?a.value.buttonActive:a.value.button])},e.toDisplayString(y),11,ie))],64))),128))]),e.createElementVNode("button",{onClick:g[1]||(g[1]=y=>h(i.page+1)),disabled:i.page>=s.value,class:e.normalizeClass(["relative font-medium rounded-md",r.value.button,i.page>=s.value?a.value.buttonDisabled:a.value.button])},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(r.value.icon),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},g[7]||(g[7]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"},null,-1)]),2))],10,ce)])],2))}}),de={key:0,class:"text-center py-8"},me={class:"inline-flex items-center space-x-2"},pe={key:2,class:"overflow-x-auto"},ge={class:"relative w-full overflow-auto"},ue=["checked","indeterminate"],fe=["onClick"],ye={class:"flex items-center justify-between"},be={key:0,class:"ml-1 text-xs"},he=["onClick"],ke=["checked","onChange"],N=e.defineComponent({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"},size:{default:"medium"},theme:{default:"light"},loading:{type:Boolean,default:!1},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}},emits:["update:page","update:selectedRows","row-click"],setup(p,{emit:n}){const t=p,r=n,a=e.ref(t.selectedRows||[]),c=e.ref([]),s=e.ref([]),k=e.ref([]),C=e.ref(!1),x=e.ref(null),h=e.computed(()=>{if(t.api)return s.value;if(t.sortable&&c.value.length>0){const o=[...t.rows];return o.sort((d,l)=>{for(const u of c.value){if(!u.direction)return 0;const m=d[u.field],w=l[u.field];if(m==null)return 1;if(w==null)return-1;let B=0;typeof m=="string"&&typeof w=="string"?B=m.localeCompare(w):m<w?B=-1:m>w?B=1:B=0;const V=u.direction==="desc"?-B:B;if(V!==0)return V}return 0}),o}return t.rows});e.watch(()=>t.selectedRows,o=>{a.value=o||[]});const i=o=>a.value.some(d=>d===o),g=o=>{const d=a.value.findIndex(l=>l===o);d>-1?a.value.splice(d,1):a.value.push(o),r("update:selectedRows",[...a.value])},y=e.computed(()=>h.value.length>0&&a.value.length===h.value.length),E=e.computed(()=>a.value.length>0&&a.value.length<h.value.length),_=()=>{y.value?a.value=[]:a.value=[...h.value],r("update:selectedRows",[...a.value])},Fe=o=>{if(!t.sortable)return;const d=c.value.findIndex(l=>l.field===o);if(d>=0){const l=c.value[d];l.direction==="asc"?l.direction="desc":l.direction==="desc"&&c.value.splice(d,1)}else c.value.unshift({field:o,direction:"asc"});t.api&&z()},Te=o=>{const d=c.value.find(l=>l.field===o);if(!d)return"↑↓";switch(d.direction){case"asc":return"↑";case"desc":return"↓";default:return"↕️"}},R=o=>t.sortable&&o.sortable!==!1,Pe=o=>{t.clickable&&r("row-click",o)},j=e.ref(t.page),K=e.ref(t.limit),I=e.ref(t.total),$=e.ref(1),L=e.ref(10),S=e.ref(0),Q=e.computed(()=>t.api?$.value:j.value),X=e.computed(()=>t.api?L.value:K.value),Y=e.computed(()=>t.api?S.value:I.value),b=e.computed(()=>{const{theme:o}=t;return o==="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"}:o==="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"}});e.watch(()=>t.page,o=>{j.value=o}),e.watch(()=>t.limit,o=>{K.value=o}),e.watch(()=>t.total,o=>{I.value=o});const z=async()=>{if(t.api){C.value=!0,x.value=null;try{const o=new URL(t.api,window.location.origin);if(o.searchParams.set("page",Q.value.toString()),o.searchParams.set("limit",X.value.toString()),c.value.length>0){const u=c.value.filter(m=>m.direction).map(m=>`${m.field}:${m.direction}`).join(",");u&&o.searchParams.set("sort",u)}const d=await fetch(o.toString());if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);const l=await d.json();l.rows&&Array.isArray(l.rows)&&(s.value=l.rows),l.columns&&Array.isArray(l.columns)&&(k.value=l.columns),l.total!==void 0&&(t.api?S.value=l.total:I.value=l.total)}catch(o){x.value=o instanceof Error?o.message:"Failed to fetch data",console.error("Error fetching data:",o)}finally{C.value=!1}}},Ae=o=>{t.api?$.value=o:(j.value=o,r("update:page",o)),t.api&&z()},Re=e.computed(()=>t.showPagination&&Y.value>0),D=e.computed(()=>({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"}})[t.size]);e.onMounted(()=>{t.api&&(t.page&&($.value=t.page),t.limit&&(L.value=t.limit),t.total&&(S.value=t.total),z())}),e.watch(()=>t.api,o=>{o&&($.value=t.page||1,L.value=t.limit||10,S.value=t.total||0,z())});const v=e.computed(()=>t.api?k.value:t.columns),F=e.ref([]),T=e.ref({});e.provide("registerColumn",(o,d)=>{F.value.push(o),d&&o.slotName&&(T.value[o.name]=d)});const je=e.useSlots(),Z=e.computed(()=>{if(F.value.length>0)return console.log("Using slot columns:",F.value),F.value;const o=je.default?.();if(o){console.log("Slot children:",o);const d=o.filter(l=>{const u=l.type?.name==="Column"||l.type==="Column"||l.type&&typeof l.type=="object"&&l.type.name==="Column";return console.log("Checking child:",l.type,"isColumn:",u),u}).map(l=>{console.log("Column slot props:",l.props),console.log("Column slot type:",l.type);const u=l.props||l.componentProps||{},m=u.field||u.name||"",w=u.header||u.label||"",B=l.children&&l.children.body,V={name:m,ua:w,format:u.format||"text",slotName:B?"body":void 0,...u};return B&&V.name&&(T.value[V.name]=l.children.body),console.log("Processed column:",V),V});if(d.length>0)return console.log("Final processed columns from slots:",d),d}return v.value&&v.value.length>0?(console.log("Using table columns from props/API:",v.value),v.value):[]}),Ie=(o="text")=>P[o]||P.text;return(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full",b.value.container])},[C.value||t.loading?(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("div",me,[d[0]||(d[0]=e.createElementVNode("div",{class:"animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"},null,-1)),e.createElementVNode("span",{class:e.normalizeClass(b.value.loading)},"Loading...",2)])])):x.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["text-center py-8",b.value.error])},e.toDisplayString(x.value),3)):!t.loading&&h.value.length>0?(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("div",ge,[e.createElementVNode("table",{class:e.normalizeClass(o.tableClass),style:e.normalizeStyle(o.tableStyle)},[e.createElementVNode("thead",{class:e.normalizeClass(b.value.thead)},[e.createElementVNode("tr",null,[o.selectable?(e.openBlock(),e.createElementBlock("th",{key:0,class:e.normalizeClass(["text-left font-medium uppercase tracking-wider",b.value.th,D.value.header,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:y.value,indeterminate:E.value,onChange:_,class:e.normalizeClass(["h-4 w-4 focus:ring-blue-500 rounded",b.value.checkbox])},null,42,ue)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Z.value,l=>(e.openBlock(),e.createElementBlock("th",{key:l.name,class:e.normalizeClass(["text-left font-medium uppercase tracking-wider",b.value.th,D.value.header,l.align?`text-${l.align}`:"",R(l)?["cursor-pointer",b.value.thHover]:""]),onClick:u=>R(l)?Fe(l.name):void 0},[e.createElementVNode("div",ye,[e.createElementVNode("span",null,e.toDisplayString(l.ua||l.header||l.name),1),R(l)?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString(Te(l.name)),1)):e.createCommentVNode("",!0)])],10,fe))),128))])],2),e.createElementVNode("tbody",{class:e.normalizeClass(b.value.tbody)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(l,u)=>(e.openBlock(),e.createElementBlock("tr",{key:u,class:e.normalizeClass([b.value.tr,t.clickable?"cursor-pointer":""]),onClick:m=>t.clickable?Pe(l):void 0},[o.selectable?(e.openBlock(),e.createElementBlock("td",{key:0,class:e.normalizeClass(["whitespace-nowrap",b.value.td,D.value.cell,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:i(l),onChange:m=>g(l),class:e.normalizeClass(["h-4 w-4 focus:ring-blue-500 rounded",b.value.checkbox])},null,42,ke)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Z.value,m=>(e.openBlock(),e.createElementBlock("td",{key:m.name,class:e.normalizeClass(["whitespace-nowrap",b.value.td,D.value.cell,m.align?`text-${m.align}`:""])},[m.slotName&&T.value[m.name]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(T.value[m.name]),{key:0,data:l,value:l[m.name]},null,8,["data","value"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(Ie(m.format)),{key:1,value:l[m.name]},null,8,["value"]))],2))),128))],10,he))),128))],2)],6)])])):e.createCommentVNode("",!0),Re.value&&!C.value&&!t.loading&&!x.value?(e.openBlock(),e.createBlock(A,{key:3,page:Q.value,limit:X.value,total:Y.value,theme:t.theme,size:t.size,"onUpdate:page":Ae},null,8,["page","limit","total","theme","size"])):e.createCommentVNode("",!0),!C.value&&!t.loading&&!x.value&&h.value.length===0?(e.openBlock(),e.createElementBlock("div",{key:4,class:e.normalizeClass(["text-center py-8",b.value.empty])}," Дані відсутні ",2)):e.createCommentVNode("",!0)],2))}}),xe={style:{display:"none"}},J=e.defineComponent({name:"Column",__name:"Column",props:{field:{},name:{},header:{},label:{},format:{},hidden:{type:Boolean},sortable:{type:Boolean},width:{},align:{},slot:{},slotName:{}},setup(p){const n=p,t=e.useSlots(),r=e.inject("registerColumn");return e.onMounted(()=>{if(r){const{field:a,name:c,header:s,label:k,format:C,slotName:x,...h}=n,E={name:a||c||"",ua:s||k||"",format:C||"text",slotName:x||(t.body?"body":void 0),...h};console.log("Registering column:",E);const _=t.body;r(E,_)}}),(a,c)=>(e.openBlock(),e.createElementBlock("div",xe,[e.renderSlot(a.$slots,"body",{data:{}})]))}}),Ce={class:"mt-4"},_e={class:"text-sm text-gray-600 dark:text-gray-300"},W=e.defineComponent({__name:"SelectionInfo",props:{selectedRows:{},totalCount:{}},setup(p){const n=p,t=e.computed(()=>n.selectedRows.length);return(r,a)=>(e.openBlock(),e.createElementBlock("div",Ce,[e.createElementVNode("div",_e," Обрано: "+e.toDisplayString(t.value)+" з "+e.toDisplayString(r.totalCount)+" записів ",1)]))}}),Be={class:"mt-4"},we={class:"border-b border-gray-200 dark:border-gray-700"},Ee={class:"-mb-px flex space-x-8"},Ve=["onClick"],Ne={class:"mt-4"},$e={class:"bg-gray-900 rounded-lg overflow-hidden"},Se={class:"flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"},ze={class:"text-sm text-gray-300"},De=["onClick"],ve={class:"p-4 text-sm text-gray-100 overflow-x-auto"},G=e.defineComponent({__name:"CodeTabs",props:{tabs:{},defaultTab:{default:void 0}},setup(p){const n=p,t=e.ref(n.defaultTab||n.tabs[0]?.id||""),r=async a=>{try{await navigator.clipboard.writeText(a),console.log("Код скопійовано!")}catch(c){console.error("Помилка копіювання:",c)}};return(a,c)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",we,[e.createElementVNode("nav",Ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.tabs,s=>(e.openBlock(),e.createElementBlock("button",{key:s.id,onClick:k=>t.value=s.id,class:e.normalizeClass(["py-2 px-1 border-b-2 font-medium text-sm transition-colors",t.value===s.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.toDisplayString(s.label),11,Ve))),128))])]),e.createElementVNode("div",Ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.tabs,s=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:s.id},[e.createElementVNode("div",$e,[e.createElementVNode("div",Se,[e.createElementVNode("span",ze,e.toDisplayString(s.label),1),e.createElementVNode("button",{onClick:k=>r(s.content),class:"text-gray-400 hover:text-white transition-colors",title:"Копіювати код"},c[0]||(c[0]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[e.createElementVNode("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,De)]),e.createElementVNode("pre",ve,[e.createElementVNode("code",null,e.toDisplayString(s.content),1)])])])),[[e.vShow,t.value===s.id]])),128))])]))}});N.install=function(n){n.component("DataTable",N),n.component("Column",J),n.component("Pagination",A),n.component("SelectionInfo",W),n.component("CodeTabs",G)},f.ArrayFormat=q,f.BadgeFormat=O,f.CodeTabs=G,f.Column=J,f.DataTable=N,f.DateFormat=H,f.NumberFormat=M,f.Pagination=A,f.SelectionInfo=W,f.TextFormat=U,f.default=N,f.formatComponents=P,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@opengis/table",
+  "version": "0.0.1",
+  "description": "A Vue 3 data table component with advanced features",
+  "main": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "table",
+    "data-table",
+    "component",
+    "typescript"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.15.32",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.0",
+    "vue-tsc": "^2.2.10",
+    "eslint": "8.49.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-vue": "^9.17.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "vue": "^3.5.17"
+  },
+  "scripts": {
+    "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "dev": "vite",
+    "build": "vite build",
+    "docs": "vite docs",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "build:types": "copy src\\types\\index.ts dist\\types.d.ts",
+    "build:full": "npm run build:lib && npm run build:types",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "prepublishOnly": "bun run build ",
+    "docs:dev": "npm run --prefix ./docs docs:dev",
+    "docs:build": "npm run --prefix ./docs docs:build",
+    "docs:preview": "npm run --prefix ./docs docs:preview"
+  },
+  "directories": {
+    "example": "examples"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.softpro.ua/npm/table.git"
+  },
+  "author": "softpro"
+}