@opengis/table 0.0.17 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- 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";
2
- const Se = /* @__PURE__ */ S({
1
+ import { defineComponent as S, computed as f, createElementBlock as u, openBlock as o, toDisplayString as h, normalizeStyle as ge, normalizeClass as m, Fragment as B, renderList as z, createElementVNode as d, createTextVNode as N, ref as w, useSlots as pe, watch as P, onMounted as fe, provide as $e, createCommentVNode as j, createBlock as L, renderSlot as V, resolveDynamicComponent as q, unref as ae, inject as Te, withDirectives as Fe, vShow as Se } from "vue";
2
+ const De = /* @__PURE__ */ S({
3
3
  name: "NumberFormat",
4
4
  __name: "NumberFormat",
5
5
  props: {
@@ -11,9 +11,9 @@ const Se = /* @__PURE__ */ S({
11
11
  const a = b, e = f(() => a.value === null || a.value === void 0 ? "" : typeof a.value == "number" ? a.value.toFixed(2) : Intl.NumberFormat("uk-UA", {
12
12
  maximumFractionDigits: 2
13
13
  }).format(Number(a.value)));
14
- return (c, r) => (o(), u("span", null, h(e.value), 1));
14
+ return (c, l) => (o(), u("span", null, h(e.value), 1));
15
15
  }
16
- }), De = /* @__PURE__ */ S({
16
+ }), Ae = /* @__PURE__ */ S({
17
17
  name: "DateFormat",
18
18
  __name: "DateFormat",
19
19
  props: {
@@ -30,9 +30,9 @@ const Se = /* @__PURE__ */ S({
30
30
  return a.value;
31
31
  }
32
32
  });
33
- return (c, r) => (o(), u("span", null, h(e.value), 1));
33
+ return (c, l) => (o(), u("span", null, h(e.value), 1));
34
34
  }
35
- }), Ae = /* @__PURE__ */ S({
35
+ }), Ie = /* @__PURE__ */ S({
36
36
  name: "TextFormat",
37
37
  __name: "TextFormat",
38
38
  props: {
@@ -41,10 +41,10 @@ const Se = /* @__PURE__ */ S({
41
41
  column: {}
42
42
  },
43
43
  setup(b) {
44
- const a = b, { value: e } = a, c = f(() => Array.isArray(e) ? e.map((r) => r.text || r).join(",") : e?.text || e);
45
- return (r, s) => (o(), u("span", null, h(c.value), 1));
44
+ const a = b, { value: e } = a, c = f(() => Array.isArray(e) ? e.map((l) => l.text || l).join(",") : e?.text || e);
45
+ return (l, n) => (o(), u("span", null, h(c.value), 1));
46
46
  }
47
- }), Ie = /* @__PURE__ */ S({
47
+ }), je = /* @__PURE__ */ S({
48
48
  name: "BadgeFormat",
49
49
  __name: "BadgeFormat",
50
50
  props: {
@@ -54,36 +54,36 @@ const Se = /* @__PURE__ */ S({
54
54
  },
55
55
  setup(b) {
56
56
  const a = b, e = f(() => {
57
- const s = String(a.value || "").toLowerCase(), i = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";
58
- 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`;
57
+ const n = String(a.value || "").toLowerCase(), i = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";
58
+ return n.includes("success") || n.includes("active") || n.includes("completed") ? `${i} bg-green-100 text-green-800` : n.includes("error") || n.includes("failed") || n.includes("inactive") ? `${i} bg-red-100 text-red-800` : n.includes("warning") || n.includes("pending") ? `${i} bg-yellow-100 text-yellow-800` : n.includes("info") || n.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`;
59
59
  });
60
- function c(s, i = 1) {
61
- const _ = parseInt(s.slice(1, 3), 16), $ = parseInt(s.slice(3, 5), 16), T = parseInt(s.slice(5, 7), 16);
60
+ function c(n, i = 1) {
61
+ const _ = parseInt(n.slice(1, 3), 16), $ = parseInt(n.slice(3, 5), 16), T = parseInt(n.slice(5, 7), 16);
62
62
  return `rgba(${_}, ${$}, ${T}, ${i})`;
63
63
  }
64
- const r = f(() => {
65
- const s = {
64
+ const l = f(() => {
65
+ const n = {
66
66
  minWidth: "60px",
67
67
  textAlign: "center",
68
68
  display: "inline-block"
69
69
  };
70
70
  return /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(a.value?.color) ? {
71
- ...s,
71
+ ...n,
72
72
  backgroundColor: c(a.value.color, 0.1),
73
73
  color: c(a.value.color, 0.8)
74
- } : s;
74
+ } : n;
75
75
  });
76
- return (s, i) => (o(), u("span", {
76
+ return (n, i) => (o(), u("span", {
77
77
  class: m(["badge", e.value]),
78
- style: de(r.value)
79
- }, h(s.value?.text || s.value), 7));
78
+ style: ge(l.value)
79
+ }, h(n.value?.text || n.value), 7));
80
80
  }
81
- }), je = (b, a) => {
81
+ }), Be = (b, a) => {
82
82
  const e = b.__vccOpts || b;
83
- for (const [c, r] of a)
84
- e[c] = r;
83
+ for (const [c, l] of a)
84
+ e[c] = l;
85
85
  return e;
86
- }, Be = /* @__PURE__ */ je(Ie, [["__scopeId", "data-v-28700c64"]]), Re = { class: "flex flex-wrap gap-1" }, ze = /* @__PURE__ */ S({
86
+ }, Re = /* @__PURE__ */ Be(je, [["__scopeId", "data-v-28700c64"]]), ze = { class: "flex flex-wrap gap-1" }, Pe = /* @__PURE__ */ S({
87
87
  name: "ArrayFormat",
88
88
  __name: "ArrayFormat",
89
89
  props: {
@@ -92,15 +92,15 @@ const Se = /* @__PURE__ */ S({
92
92
  column: {}
93
93
  },
94
94
  setup(b) {
95
- 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) : "";
96
- return (r, s) => (o(), u("div", Re, [
97
- (o(!0), u(B, null, R(e.value, (i, _) => (o(), u("span", {
95
+ const a = b, e = f(() => a.value ? Array.isArray(a.value) ? a.value : [a.value] : []), c = (l) => l ? typeof l == "object" && l.name ? l.name : typeof l == "string" || typeof l == "number" ? String(l) : JSON.stringify(l) : "";
96
+ return (l, n) => (o(), u("div", ze, [
97
+ (o(!0), u(B, null, z(e.value, (i, _) => (o(), u("span", {
98
98
  key: _,
99
99
  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"
100
100
  }, h(c(i)), 1))), 128))
101
101
  ]));
102
102
  }
103
- }), Pe = ["href", "target"], Le = /* @__PURE__ */ S({
103
+ }), Le = ["href", "target"], Ne = /* @__PURE__ */ S({
104
104
  __name: "LinkFormat",
105
105
  props: {
106
106
  href: { default: "" },
@@ -111,23 +111,23 @@ const Se = /* @__PURE__ */ S({
111
111
  column: {}
112
112
  },
113
113
  setup(b) {
114
- 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 = (_) => {
114
+ 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 : ""), 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"), i = (_) => {
115
115
  a.onClick && a.row && (_.preventDefault(), a.onClick(a.row, a.value));
116
116
  };
117
117
  return (_, $) => c.value ? (o(), u("a", {
118
118
  key: 0,
119
119
  href: c.value,
120
- target: r.value,
121
- class: m(s.value),
120
+ target: l.value,
121
+ class: m(n.value),
122
122
  onClick: i
123
- }, h(e.value), 11, Pe)) : (o(), u("button", {
123
+ }, h(e.value), 11, Le)) : (o(), u("button", {
124
124
  key: 1,
125
125
  type: "button",
126
- class: m(s.value),
126
+ class: m(n.value),
127
127
  onClick: i
128
128
  }, h(e.value), 3));
129
129
  }
130
- }), Ne = /* @__PURE__ */ S({
130
+ }), Ve = /* @__PURE__ */ S({
131
131
  name: "TextFormat",
132
132
  __name: "SelectFormat",
133
133
  props: {
@@ -136,18 +136,18 @@ const Se = /* @__PURE__ */ S({
136
136
  column: {}
137
137
  },
138
138
  setup(b) {
139
- 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);
140
- return (r, s) => (o(), u("span", null, h(c.value), 1));
139
+ const a = b, { value: e } = a, c = f(() => Array.isArray(e) ? e.map((l) => l.text || l).filter((l, n) => n < 2).join(", ") + (e.length > 2 ? ` +${e.length - 2}` : "") : e?.text || e);
140
+ return (l, n) => (o(), u("span", null, h(c.value), 1));
141
141
  }
142
- }), ue = {
143
- number: Se,
144
- date: De,
145
- text: Ae,
146
- badge: Be,
147
- array: ze,
148
- select: Ne,
149
- link: Le
150
- }, 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({
142
+ }), de = {
143
+ number: De,
144
+ date: Ae,
145
+ text: Ie,
146
+ badge: Re,
147
+ array: Pe,
148
+ select: Ve,
149
+ link: Ne
150
+ }, Me = { class: "flex items-center space-x-4" }, Ee = { class: "font-medium" }, He = { class: "font-medium" }, We = { class: "font-medium" }, Ue = { class: "flex items-center space-x-2" }, Oe = ["disabled"], Je = { class: "flex items-center space-x-1" }, qe = ["onClick"], Ge = ["disabled"], me = /* @__PURE__ */ S({
151
151
  name: "Pagination",
152
152
  __name: "Pagination",
153
153
  props: {
@@ -175,7 +175,7 @@ const Se = /* @__PURE__ */ S({
175
175
  button: "px-4 h-11 text-base min-w-[44px] flex items-center justify-center",
176
176
  icon: "w-5 h-5"
177
177
  }
178
- })[e.size]), r = f(() => {
178
+ })[e.size]), l = f(() => {
179
179
  const { theme: p } = e;
180
180
  return p === "dark" ? {
181
181
  container: "bg-gray-900 border-gray-700",
@@ -199,7 +199,7 @@ const Se = /* @__PURE__ */ S({
199
199
  buttonActive: "bg-blue-600 text-white",
200
200
  ellipsis: "text-gray-500 dark:text-gray-400"
201
201
  };
202
- }), 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(() => {
202
+ }), n = 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(() => {
203
203
  const p = [];
204
204
  if (i.value <= 7)
205
205
  for (let k = 1; k <= i.value; k += 1)
@@ -213,34 +213,34 @@ const Se = /* @__PURE__ */ S({
213
213
  }
214
214
  return p;
215
215
  }), D = (p) => {
216
- p >= 1 && p <= i.value && p !== e.page && s("update:page", p);
216
+ p >= 1 && p <= i.value && p !== e.page && n("update:page", p);
217
217
  };
218
218
  return (p, y) => (o(), u("div", {
219
- class: m(["flex items-center justify-between py-3 border-t", r.value.container])
219
+ class: m(["flex items-center justify-between py-3 border-t", l.value.container])
220
220
  }, [
221
- d("div", Ve, [
221
+ d("div", Me, [
222
222
  d("div", {
223
- class: m(["flex items-center text-sm", r.value.text, c.value.text])
223
+ class: m(["flex items-center text-sm", l.value.text, c.value.text])
224
224
  }, [
225
225
  d("span", null, [
226
- y[2] || (y[2] = L(" Показано ", -1)),
227
- d("span", Me, h(_.value), 1),
228
- y[3] || (y[3] = L(" до ", -1)),
229
- d("span", Ee, h($.value), 1),
230
- y[4] || (y[4] = L(" з ", -1)),
231
- d("span", He, h(p.total), 1),
232
- y[5] || (y[5] = L(" результатів ", -1))
226
+ y[2] || (y[2] = N(" Показано ", -1)),
227
+ d("span", Ee, h(_.value), 1),
228
+ y[3] || (y[3] = N(" до ", -1)),
229
+ d("span", He, h($.value), 1),
230
+ y[4] || (y[4] = N(" з ", -1)),
231
+ d("span", We, h(p.total), 1),
232
+ y[5] || (y[5] = N(" результатів ", -1))
233
233
  ])
234
234
  ], 2)
235
235
  ]),
236
- d("div", We, [
236
+ d("div", Ue, [
237
237
  d("button", {
238
238
  onClick: y[0] || (y[0] = (k) => D(p.page - 1)),
239
239
  disabled: p.page <= 1,
240
240
  class: m([
241
241
  "relative font-medium rounded-md",
242
242
  c.value.button,
243
- p.page <= 1 ? r.value.buttonDisabled : r.value.button
243
+ p.page <= 1 ? l.value.buttonDisabled : l.value.button
244
244
  ])
245
245
  }, [
246
246
  (o(), u("svg", {
@@ -256,21 +256,21 @@ const Se = /* @__PURE__ */ S({
256
256
  d: "M15 19l-7-7 7-7"
257
257
  }, null, -1)
258
258
  ]), 2))
259
- ], 10, Ue),
260
- d("div", Oe, [
261
- (o(!0), u(B, null, R(T.value, (k) => (o(), u(B, { key: k }, [
259
+ ], 10, Oe),
260
+ d("div", Je, [
261
+ (o(!0), u(B, null, z(T.value, (k) => (o(), u(B, { key: k }, [
262
262
  k === "..." ? (o(), u("span", {
263
263
  key: 0,
264
- class: m(["font-medium", c.value.button, r.value.ellipsis])
264
+ class: m(["font-medium", c.value.button, l.value.ellipsis])
265
265
  }, " ... ", 2)) : (o(), u("button", {
266
266
  key: 1,
267
267
  onClick: (F) => D(k),
268
268
  class: m([
269
269
  "relative font-medium rounded-md",
270
270
  c.value.button,
271
- k === p.page ? r.value.buttonActive : r.value.button
271
+ k === p.page ? l.value.buttonActive : l.value.button
272
272
  ])
273
- }, h(k), 11, Je))
273
+ }, h(k), 11, qe))
274
274
  ], 64))), 128))
275
275
  ]),
276
276
  d("button", {
@@ -279,7 +279,7 @@ const Se = /* @__PURE__ */ S({
279
279
  class: m([
280
280
  "relative font-medium rounded-md",
281
281
  c.value.button,
282
- p.page >= i.value ? r.value.buttonDisabled : r.value.button
282
+ p.page >= i.value ? l.value.buttonDisabled : l.value.button
283
283
  ])
284
284
  }, [
285
285
  (o(), u("svg", {
@@ -295,23 +295,26 @@ const Se = /* @__PURE__ */ S({
295
295
  d: "M9 5l7 7-7 7"
296
296
  }, null, -1)
297
297
  ]), 2))
298
- ], 10, qe)
298
+ ], 10, Ge)
299
299
  ])
300
300
  ], 2));
301
301
  }
302
- }), Ge = {
302
+ }), Ke = {
303
303
  key: 0,
304
304
  class: "text-center py-8"
305
- }, Ke = { class: "inline-flex items-center space-x-2" }, Qe = {
305
+ }, Qe = { class: "inline-flex items-center space-x-2" }, Xe = {
306
306
  key: 2,
307
307
  class: "overflow-x-auto"
308
- }, Xe = ["checked", "indeterminate"], Ye = ["onClick"], Ze = { class: "flex items-center justify-between" }, et = {
308
+ }, Ye = ["checked", "indeterminate"], Ze = ["onClick"], et = { class: "flex items-center justify-between" }, tt = {
309
309
  key: 0,
310
310
  class: "ml-1 text-xs"
311
- }, tt = {
311
+ }, at = {
312
312
  key: 1,
313
313
  class: "w-[100px]"
314
- }, at = ["onClick"], rt = ["checked", "onChange"], lt = ["onClick"], nt = { class: "text-center" }, ce = /* @__PURE__ */ S({
314
+ }, rt = ["onClick"], lt = ["checked", "onChange"], st = ["onClick"], nt = {
315
+ key: 1,
316
+ class: "text-center"
317
+ }, ve = /* @__PURE__ */ S({
315
318
  name: "DataTable",
316
319
  __name: "DataTable",
317
320
  props: {
@@ -319,7 +322,7 @@ const Se = /* @__PURE__ */ S({
319
322
  columns: { default: () => [] },
320
323
  api: {},
321
324
  router: {},
322
- tableStyle: { default: "min-width: 50rem" },
325
+ tableStyle: { default: "" },
323
326
  size: { default: "medium" },
324
327
  theme: { default: "light" },
325
328
  loading: { type: Boolean, default: !1 },
@@ -329,6 +332,7 @@ const Se = /* @__PURE__ */ S({
329
332
  classTr: { default: "" },
330
333
  classTd: { default: "" },
331
334
  classTh: { default: "" },
335
+ classThead: { default: "" },
332
336
  classLink: { default: "" },
333
337
  selectable: { type: Boolean, default: !1 },
334
338
  selectedRows: { default: () => [] },
@@ -342,7 +346,7 @@ const Se = /* @__PURE__ */ S({
342
346
  },
343
347
  emits: ["update:page", "update:selectedRows", "row-click", "sort"],
344
348
  setup(b, { emit: a }) {
345
- 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);
349
+ const e = b, c = a, l = w(e.selectedRows || []), n = w([]), i = w([]), _ = w([]), $ = w(!1), T = w(null), D = w(e.router), p = pe(), y = f(() => p.action);
346
350
  function k(t) {
347
351
  if (D.value) {
348
352
  D.value.push(t);
@@ -353,51 +357,51 @@ const Se = /* @__PURE__ */ S({
353
357
  const F = f(() => {
354
358
  if (e.api)
355
359
  return i.value;
356
- if (e.sortable && s.value.length > 0) {
360
+ if (e.sortable && n.value.length > 0) {
357
361
  const t = [...e.rows];
358
- return t.sort((v, l) => {
359
- for (const g of s.value) {
362
+ return t.sort((v, r) => {
363
+ for (const g of n.value) {
360
364
  if (!g.direction)
361
365
  return 0;
362
- const n = v[g.field], x = l[g.field];
363
- if (n == null) return 1;
366
+ const s = v[g.field], x = r[g.field];
367
+ if (s == null) return 1;
364
368
  if (x == null) return -1;
365
369
  let I = 0;
366
- typeof n == "string" && typeof x == "string" ? I = n.localeCompare(x) : n < x ? I = -1 : n > x ? I = 1 : I = 0;
367
- const O = g.direction === "desc" ? -I : I;
368
- if (O !== 0) return O;
370
+ typeof s == "string" && typeof x == "string" ? I = s.localeCompare(x) : s < x ? I = -1 : s > x ? I = 1 : I = 0;
371
+ const J = g.direction === "desc" ? -I : I;
372
+ if (J !== 0) return J;
369
373
  }
370
374
  return 0;
371
375
  }), t;
372
376
  }
373
377
  return e.rows;
374
378
  });
375
- z(() => e.selectedRows, (t) => {
376
- r.value = t || [];
379
+ P(() => e.selectedRows, (t) => {
380
+ l.value = t || [];
377
381
  });
378
- const A = (t) => r.value.some((v) => v === t), te = (t) => {
379
- const v = r.value.findIndex((l) => l === t);
380
- v > -1 ? r.value.splice(v, 1) : r.value.push(t), c("update:selectedRows", [...r.value]);
381
- }, 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 = () => {
382
- q.value ? r.value = [] : r.value = [...F.value], c("update:selectedRows", [...r.value]);
383
- }, me = (t) => {
382
+ const A = (t) => l.value.some((v) => v === t), re = (t) => {
383
+ const v = l.value.findIndex((r) => r === t);
384
+ v > -1 ? l.value.splice(v, 1) : l.value.push(t), c("update:selectedRows", [...l.value]);
385
+ }, G = f(() => F.value.length > 0 && l.value.length === F.value.length), M = f(() => l.value.length > 0 && l.value.length < F.value.length), K = () => {
386
+ G.value ? l.value = [] : l.value = [...F.value], c("update:selectedRows", [...l.value]);
387
+ }, be = (t) => {
384
388
  if (!e.sortable) return;
385
- const v = s.value.findIndex((g) => g.field === t);
389
+ const v = n.value.findIndex((g) => g.field === t);
386
390
  if (v >= 0) {
387
- const g = s.value[v];
388
- g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" && s.value.splice(v, 1);
391
+ const g = n.value[v];
392
+ g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" && n.value.splice(v, 1);
389
393
  } else
390
- s.value.unshift({
394
+ n.value.unshift({
391
395
  field: t,
392
396
  direction: "asc"
393
397
  });
394
- const l = s.value.filter((g) => g.direction).map((g) => ({
398
+ const r = n.value.filter((g) => g.direction).map((g) => ({
395
399
  name: g.field,
396
400
  asc: g.direction === "asc"
397
401
  }));
398
- c("sort", l), e.api && H();
399
- }, be = (t) => s.value.find((l) => l.field === t)?.direction === "asc", ye = (t) => {
400
- const v = s.value.find((l) => l.field === t);
402
+ c("sort", r), e.api && W();
403
+ }, ye = (t) => n.value.find((r) => r.field === t)?.direction === "asc", he = (t) => {
404
+ const v = n.value.find((r) => r.field === t);
401
405
  if (!v)
402
406
  return "↑↓";
403
407
  switch (v.direction) {
@@ -410,26 +414,26 @@ const Se = /* @__PURE__ */ S({
410
414
  default:
411
415
  return "↕️";
412
416
  }
413
- }, K = (t) => e.sortable && t.sortable !== !1, he = (t) => {
417
+ }, Q = (t) => e.sortable && t.sortable !== !1, xe = (t) => {
414
418
  e.clickable && c("row-click", t);
415
- }, V = (t, v) => {
416
- const l = v[t.name];
419
+ }, R = (t, v) => {
420
+ const r = v[t.name];
417
421
  if (e.getCellData || t.getCellData) {
418
422
  const g = t.getCellData || e.getCellData;
419
423
  if (g) {
420
- const n = {
424
+ const s = {
421
425
  name: t.name,
422
426
  row: v,
423
- value: l
427
+ value: r
424
428
  };
425
- return g(n);
429
+ return g(s);
426
430
  }
427
431
  }
428
432
  return ["_data", "_text"].map((g) => {
429
- const n = `${t.name}${g}`;
430
- return v[n] ? v[n] : null;
431
- }).find((g) => g) || l;
432
- }, 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(() => {
433
+ const s = `${t.name}${g}`;
434
+ return v[s] ? v[s] : null;
435
+ }).find((g) => g) || r;
436
+ }, le = (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]` : "" : "", X = w(e.page), se = w(e.limit), Y = w(e.total), E = w(1), Z = w(10), H = w(0), ne = f(() => e.api ? E.value : X.value), oe = f(() => e.api ? Z.value : se.value), ie = f(() => e.api ? H.value : Y.value), C = f(() => {
433
437
  const { theme: t } = e;
434
438
  return t === "dark" ? {
435
439
  container: "dark",
@@ -469,27 +473,27 @@ const Se = /* @__PURE__ */ S({
469
473
  checkbox: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400"
470
474
  };
471
475
  });
472
- z(() => e.page, (t) => {
473
- Q.value = t;
474
- }), z(() => e.limit, (t) => {
475
- re.value = t;
476
- }), z(() => e.total, (t) => {
476
+ P(() => e.page, (t) => {
477
477
  X.value = t;
478
+ }), P(() => e.limit, (t) => {
479
+ se.value = t;
480
+ }), P(() => e.total, (t) => {
481
+ Y.value = t;
478
482
  });
479
- async function H() {
483
+ async function W() {
480
484
  if (e.api) {
481
485
  $.value = !0, T.value = null;
482
486
  try {
483
487
  const t = new URL(e.api, window.location.origin);
484
- if (t.searchParams.set("page", le.value.toString()), t.searchParams.set("limit", ne.value.toString()), s.value.length > 0) {
485
- const g = s.value.filter((n) => n.direction).map((n) => `${n.field}:${n.direction}`).join(",");
488
+ if (t.searchParams.set("page", ne.value.toString()), t.searchParams.set("limit", oe.value.toString()), n.value.length > 0) {
489
+ const g = n.value.filter((s) => s.direction).map((s) => `${s.field}:${s.direction}`).join(",");
486
490
  g && t.searchParams.set("sort", g);
487
491
  }
488
492
  const v = await fetch(t.toString());
489
493
  if (!v.ok)
490
494
  throw new Error(`HTTP error! status: ${v.status}`);
491
- const l = await v.json();
492
- 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);
495
+ const r = await v.json();
496
+ r.rows && Array.isArray(r.rows) && (i.value = r.rows), r.columns && Array.isArray(r.columns) && (_.value = r.columns), r.total !== void 0 && (e.api ? H.value = r.total : Y.value = r.total);
493
497
  } catch (t) {
494
498
  T.value = t instanceof Error ? t.message : "Failed to fetch data", console.error("Error fetching data:", t);
495
499
  } finally {
@@ -497,9 +501,9 @@ const Se = /* @__PURE__ */ S({
497
501
  }
498
502
  }
499
503
  }
500
- const xe = (t) => {
501
- e.api ? M.value = t : (Q.value = t, c("update:page", t)), e.api && H();
502
- }, ke = f(() => e.showPagination && se.value > 0), W = f(() => ({
504
+ const ke = (t) => {
505
+ e.api ? E.value = t : (X.value = t, c("update:page", t)), e.api && W();
506
+ }, _e = f(() => e.showPagination && ie.value > 0), U = f(() => ({
503
507
  small: {
504
508
  header: "px-3 py-2 text-xs",
505
509
  cell: "px-3 py-2 text-xs"
@@ -513,36 +517,36 @@ const Se = /* @__PURE__ */ S({
513
517
  cell: "px-8 py-6 text-base"
514
518
  }
515
519
  })[e.size]);
516
- ge(() => {
517
- e.api && (e.page && (M.value = e.page), e.limit && (Y.value = e.limit), e.total && (E.value = e.total), H());
518
- }), z(() => e.api, (t) => {
519
- t && (M.value = e.page || 1, Y.value = e.limit || 10, E.value = e.total || 0, H());
520
+ fe(() => {
521
+ e.api && (e.page && (E.value = e.page), e.limit && (Z.value = e.limit), e.total && (H.value = e.total), W());
522
+ }), P(() => e.api, (t) => {
523
+ t && (E.value = e.page || 1, Z.value = e.limit || 10, H.value = e.total || 0, W());
520
524
  });
521
- const _e = f(() => e.api ? _.value : e.columns), Z = w([]), U = w({});
522
- Ce("registerColumn", (t, v) => {
523
- Z.value.push(t), v && t.slotName && (U.value[t.name] = v);
525
+ const we = f(() => e.api ? _.value : e.columns), ee = w([]), O = w({});
526
+ $e("registerColumn", (t, v) => {
527
+ ee.value.push(t), v && t.slotName && (O.value[t.name] = v);
524
528
  });
525
- const oe = f(() => {
526
- const t = _e.value || [], v = [], l = p.default?.();
527
- if (l) {
528
- const g = l.filter((n) => n.type?.name === "Column" || n.type === "Column" || n.type && typeof n.type == "object" && n.type.name === "Column").map((n) => {
529
- const x = n.props || n.componentProps || {}, I = x.field || x.name || "", O = x.header || x.label || "", ie = n.children && n.children.body, ee = {
529
+ const ue = f(() => {
530
+ const t = we.value || [], v = [], r = p.default?.();
531
+ if (r) {
532
+ const g = r.filter((s) => s.type?.name === "Column" || s.type === "Column" || s.type && typeof s.type == "object" && s.type.name === "Column").map((s) => {
533
+ const x = s.props || s.componentProps || {}, I = x.field || x.name || "", J = x.header || x.label || "", ce = s.children && s.children.body, te = {
530
534
  name: I,
531
535
  // Use field as the name for data access
532
- ua: O,
536
+ ua: J,
533
537
  // Use header as the display name
534
538
  format: x.format || "text",
535
- slotName: ie ? "body" : void 0,
539
+ slotName: ce ? "body" : void 0,
536
540
  ...x
537
541
  };
538
- return ie && ee.name && (U.value[ee.name] = n.children.body), ee;
542
+ return ce && te.name && (O.value[te.name] = s.children.body), te;
539
543
  });
540
544
  v.push(...g);
541
545
  }
542
- if (Z.value.length > 0 && v.push(...Z.value), v.length > 0) {
543
- const g = [], n = new Set(v.map((x) => x.name));
546
+ if (ee.value.length > 0 && v.push(...ee.value), v.length > 0) {
547
+ const g = [], s = new Set(v.map((x) => x.name));
544
548
  return t.forEach((x) => {
545
- n.has(x.name) || g.push(x);
549
+ s.has(x.name) || g.push(x);
546
550
  }), g.push(...v), console.log("Combined columns:", {
547
551
  default: t.length,
548
552
  custom: v.length,
@@ -550,12 +554,12 @@ const Se = /* @__PURE__ */ S({
550
554
  }), g;
551
555
  }
552
556
  return t.length > 0 ? (console.log("Using default columns:", t.length), t) : [];
553
- }), we = (t = "text") => ue[t] || ue.text;
557
+ }), Ce = (t = "text") => de[t.toLowerCase()] || de.text;
554
558
  return (t, v) => (o(), u("div", {
555
559
  class: m(["w-full", C.value.container])
556
560
  }, [
557
- $.value || e.loading ? (o(), u("div", Ge, [
558
- d("div", Ke, [
561
+ $.value || e.loading ? (o(), u("div", Ke, [
562
+ d("div", Qe, [
559
563
  v[0] || (v[0] = d("div", { class: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" }, null, -1)),
560
564
  d("span", {
561
565
  class: m(C.value.loading)
@@ -564,132 +568,143 @@ const Se = /* @__PURE__ */ S({
564
568
  ])) : T.value ? (o(), u("div", {
565
569
  key: 1,
566
570
  class: m(["text-center py-8", C.value.error])
567
- }, h(T.value), 3)) : !e.loading && F.value.length > 0 ? (o(), u("div", Qe, [
571
+ }, h(T.value), 3)) : !e.loading && F.value.length > 0 ? (o(), u("div", Xe, [
568
572
  d("div", {
569
573
  class: m(t.classWrapper ? t.classWrapper : "relative w-full overflow-auto")
570
574
  }, [
571
575
  d("table", {
572
576
  class: m(t.classTable),
573
- style: de(t.tableStyle)
577
+ style: ge(t.tableStyle)
574
578
  }, [
575
579
  d("thead", {
576
- class: m(C.value.thead)
580
+ class: m(t.classThead || C.value.thead)
577
581
  }, [
578
582
  d("tr", null, [
579
583
  t.selectable ? (o(), u("th", {
580
584
  key: 0,
581
- class: m(["text-left font-medium uppercase tracking-wider", C.value.th, W.value.header, e.classTh, "w-12"])
585
+ class: m(["text-left font-medium uppercase tracking-wider", C.value.th, U.value.header, e.classTh, "w-12"])
582
586
  }, [
583
587
  d("input", {
584
588
  type: "checkbox",
585
- checked: q.value,
586
- indeterminate: N.value,
587
- onChange: G,
589
+ checked: G.value,
590
+ indeterminate: M.value,
591
+ onChange: K,
588
592
  class: m(["h-4 w-4 focus:ring-blue-500 rounded", C.value.checkbox])
589
- }, null, 42, Xe)
593
+ }, null, 42, Ye)
590
594
  ], 2)) : j("", !0),
591
- (o(!0), u(B, null, R(oe.value.filter((l) => !l.hidden), (l) => (o(), u("th", {
592
- key: l.name,
595
+ (o(!0), u(B, null, z(ue.value.filter((r) => !r.hidden), (r) => (o(), u("th", {
596
+ key: r.name,
593
597
  class: m([
594
- l.align ? `text-${l.align}` : "",
595
- K(l) ? ["cursor-pointer", C.value.thHover] : "",
596
- ae(l)
598
+ r.align ? `text-${r.align}` : "",
599
+ Q(r) ? ["cursor-pointer", C.value.thHover] : "",
600
+ le(r)
597
601
  ].concat(
598
602
  e.classTh || [
599
603
  "text-left font-medium uppercase tracking-wider",
600
604
  C.value.th,
601
- W.value.header
605
+ U.value.header
602
606
  ]
603
607
  )),
604
- onClick: (g) => K(l) ? me(l.name) : void 0
608
+ onClick: (g) => Q(r) ? be(r.name) : void 0
605
609
  }, [
606
- d("div", Ze, [
607
- d("span", null, h(l.ua || l.header || l.name), 1),
608
- K(l) ? (o(), u("span", et, [
609
- pe(t.$slots, "sort", {
610
- asc: be(l.name)
610
+ d("div", et, [
611
+ d("span", null, h(r.ua || r.header || r.name), 1),
612
+ Q(r) ? (o(), u("span", tt, [
613
+ V(t.$slots, "sort", {
614
+ asc: ye(r.name)
611
615
  }, () => [
612
- L(h(ye(l.name)), 1)
616
+ N(h(he(r.name)), 1)
613
617
  ])
614
618
  ])) : j("", !0)
615
619
  ])
616
- ], 10, Ye))), 128)),
617
- y.value ? (o(), u("th", tt, "Дії")) : j("", !0)
620
+ ], 10, Ze))), 128)),
621
+ y.value ? (o(), u("th", at, "Дії")) : j("", !0)
618
622
  ])
619
623
  ], 2),
620
624
  d("tbody", {
621
625
  class: m(t.classTbody || C.value.tbody)
622
626
  }, [
623
- (o(!0), u(B, null, R(F.value, (l, g) => (o(), u("tr", {
627
+ (o(!0), u(B, null, z(F.value, (r, g) => (o(), u("tr", {
624
628
  key: g,
625
629
  class: m(e.classTr || [
626
630
  C.value.tr,
627
631
  e.clickable ? "cursor-pointer" : ""
628
632
  ]),
629
- onClick: (n) => e.clickable ? he(l) : void 0
633
+ onClick: (s) => e.clickable ? xe(r) : void 0
630
634
  }, [
631
635
  t.selectable ? (o(), u("td", {
632
636
  key: 0,
633
- class: m(["whitespace-nowrap", C.value.td, W.value.cell, e.classTd, "w-12"])
637
+ class: m(["whitespace-nowrap", C.value.td, U.value.cell, e.classTd, "w-12"])
634
638
  }, [
635
639
  d("input", {
636
640
  type: "checkbox",
637
- checked: A(l),
638
- onChange: (n) => te(l),
641
+ checked: A(r),
642
+ onChange: (s) => re(r),
639
643
  class: m(["h-4 w-4 focus:ring-blue-500 rounded", C.value.checkbox])
640
- }, null, 42, rt)
644
+ }, null, 42, lt)
641
645
  ], 2)) : j("", !0),
642
- (o(!0), u(B, null, R(oe.value.filter((n) => !n.hidden), (n) => (o(), u("td", {
643
- key: n.name,
646
+ (o(!0), u(B, null, z(ue.value.filter((s) => !s.hidden), (s) => (o(), u("td", {
647
+ key: s.name,
644
648
  class: m(e.classTd || [
645
649
  "whitespace-nowrap",
646
650
  C.value.td,
647
- W.value.cell,
648
- n.align ? `text-${n.align}` : "",
649
- ae(n)
651
+ U.value.cell,
652
+ s.align ? `text-${s.align}` : "",
653
+ le(s)
650
654
  ])
651
655
  }, [
652
- n.action && y.value ? (o(), P(J(y.value), {
656
+ s.action && y.value ? (o(), L(q(y.value), {
653
657
  key: 0,
654
- row: l,
655
- value: V(n, l)
656
- }, null, 8, ["row", "value"])) : n.slotName && U.value[n.name] ? (o(), P(J(U.value[n.name]), {
658
+ row: r,
659
+ value: R(s, r)
660
+ }, null, 8, ["row", "value"])) : ae(p).number && s.format === "number" ? V(t.$slots, "number", {
657
661
  key: 1,
658
- data: l,
659
- value: V(n, l),
660
- row: l,
661
- column: n
662
- }, null, 8, ["data", "value", "row", "column"])) : n.link ? (o(), u("a", {
662
+ row: r,
663
+ value: R(s, r)
664
+ }) : ae(p).badge && s.format === "badge" ? V(t.$slots, "badge", {
663
665
  key: 2,
664
- class: m(t.classLink || "hover:text-blue-900 cursor-pointer text-blue-700 hover:underline"),
665
- onClick: (x) => k(n.link.replace("{id}", l.id))
666
- }, h(V(n, l)), 11, lt)) : (o(), P(J(we(n.format)), {
666
+ row: r,
667
+ value: R(s, r)
668
+ }) : ae(p).array && s.format === "array" ? V(t.$slots, "array", {
667
669
  key: 3,
668
- value: V(n, l),
669
- row: l,
670
- column: n,
671
- href: n.link
670
+ row: r,
671
+ value: R(s, r)
672
+ }) : s.slotName && O.value[s.name] ? (o(), L(q(O.value[s.name]), {
673
+ key: 4,
674
+ data: r,
675
+ value: R(s, r),
676
+ row: r,
677
+ column: s
678
+ }, null, 8, ["data", "value", "row", "column"])) : s.link ? (o(), u("a", {
679
+ key: 5,
680
+ class: m(t.classLink || "hover:text-blue-900 cursor-pointer text-blue-700 hover:underline"),
681
+ onClick: (x) => k(s.link.replace("{id}", r.id))
682
+ }, h(R(s, r)), 11, st)) : (o(), L(q(Ce(s.format)), {
683
+ key: 6,
684
+ value: R(s, r),
685
+ row: r,
686
+ column: s,
687
+ href: s.link
672
688
  }, null, 8, ["value", "row", "column", "href"]))
673
689
  ], 2))), 128)),
674
- d("td", nt, [
675
- y.value ? (o(), P(J(y.value), {
676
- key: 0,
677
- row: l
678
- }, null, 8, ["row"])) : j("", !0)
679
- ])
680
- ], 10, at))), 128))
690
+ y.value ? (o(), u("td", nt, [
691
+ d("template", null, [
692
+ (o(), L(q(y.value), { row: r }, null, 8, ["row"]))
693
+ ])
694
+ ])) : j("", !0)
695
+ ], 10, rt))), 128))
681
696
  ], 2)
682
697
  ], 6)
683
698
  ], 2)
684
699
  ])) : j("", !0),
685
- ke.value && !$.value && !e.loading && !T.value ? (o(), P(fe, {
700
+ _e.value && !$.value && !e.loading && !T.value ? (o(), L(me, {
686
701
  key: 3,
687
- page: le.value,
688
- limit: ne.value,
689
- total: se.value,
702
+ page: ne.value,
703
+ limit: oe.value,
704
+ total: ie.value,
690
705
  theme: e.theme,
691
706
  size: e.size,
692
- "onUpdate:page": xe
707
+ "onUpdate:page": ke
693
708
  }, null, 8, ["page", "limit", "total", "theme", "size"])) : j("", !0),
694
709
  !$.value && !e.loading && !T.value && F.value.length === 0 ? (o(), u("div", {
695
710
  key: 4,
@@ -697,7 +712,7 @@ const Se = /* @__PURE__ */ S({
697
712
  }, " Дані відсутні ", 2)) : j("", !0)
698
713
  ], 2));
699
714
  }
700
- }), st = { style: { display: "none" } }, ot = /* @__PURE__ */ S({
715
+ }), ot = { style: { display: "none" } }, it = /* @__PURE__ */ S({
701
716
  name: "Column",
702
717
  __name: "Column",
703
718
  props: {
@@ -718,12 +733,12 @@ const Se = /* @__PURE__ */ S({
718
733
  suffix: {}
719
734
  },
720
735
  setup(b) {
721
- const a = b, e = ve(), c = $e("registerColumn");
722
- return ge(() => {
736
+ const a = b, e = pe(), c = Te("registerColumn");
737
+ return fe(() => {
723
738
  if (c) {
724
739
  const {
725
- field: r,
726
- name: s,
740
+ field: l,
741
+ name: n,
727
742
  header: i,
728
743
  label: _,
729
744
  format: $,
@@ -733,8 +748,8 @@ const Se = /* @__PURE__ */ S({
733
748
  getCellData: y,
734
749
  suffix: k,
735
750
  ...F
736
- } = a, N = {
737
- name: r || s || "",
751
+ } = a, M = {
752
+ name: l || n || "",
738
753
  ua: i || _ || "",
739
754
  format: $ || "text",
740
755
  slotName: T || (e.body ? "body" : void 0),
@@ -745,15 +760,15 @@ const Se = /* @__PURE__ */ S({
745
760
  suffix: k,
746
761
  ...F
747
762
  };
748
- console.log("Registering column:", N);
749
- const G = e.body;
750
- c(N, G);
763
+ console.log("Registering column:", M);
764
+ const K = e.body;
765
+ c(M, K);
751
766
  }
752
- }), (r, s) => (o(), u("div", st, [
753
- pe(r.$slots, "body", { data: {} })
767
+ }), (l, n) => (o(), u("div", ot, [
768
+ V(l.$slots, "body", { data: {} })
754
769
  ]));
755
770
  }
756
- }), it = { class: "mt-4" }, ut = { class: "text-sm text-gray-600 dark:text-gray-300" }, ct = /* @__PURE__ */ S({
771
+ }), ut = { class: "mt-4" }, ct = { class: "text-sm text-gray-600 dark:text-gray-300" }, dt = /* @__PURE__ */ S({
757
772
  __name: "SelectionInfo",
758
773
  props: {
759
774
  selectedRows: {},
@@ -761,49 +776,49 @@ const Se = /* @__PURE__ */ S({
761
776
  },
762
777
  setup(b) {
763
778
  const a = b, e = f(() => a.selectedRows.length);
764
- return (c, r) => (o(), u("div", it, [
765
- d("div", ut, " Обрано: " + h(e.value) + " з " + h(c.totalCount) + " записів ", 1)
779
+ return (c, l) => (o(), u("div", ut, [
780
+ d("div", ct, " Обрано: " + h(e.value) + " з " + h(c.totalCount) + " записів ", 1)
766
781
  ]));
767
782
  }
768
- }), 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({
783
+ }), vt = { class: "mt-4" }, gt = { class: "border-b border-gray-200 dark:border-gray-700" }, pt = { class: "-mb-px flex space-x-8" }, ft = ["onClick"], mt = { class: "mt-4" }, bt = { class: "bg-gray-900 rounded-lg overflow-hidden" }, yt = { class: "flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700" }, ht = { class: "text-sm text-gray-300" }, xt = ["onClick"], kt = { class: "p-4 text-sm text-gray-100 overflow-x-auto" }, _t = /* @__PURE__ */ S({
769
784
  __name: "CodeTabs",
770
785
  props: {
771
786
  tabs: {},
772
787
  defaultTab: { default: void 0 }
773
788
  },
774
789
  setup(b) {
775
- const a = b, e = w(a.defaultTab || a.tabs[0]?.id || ""), c = async (r) => {
790
+ const a = b, e = w(a.defaultTab || a.tabs[0]?.id || ""), c = async (l) => {
776
791
  try {
777
- await navigator.clipboard.writeText(r), console.log("Код скопійовано!");
778
- } catch (s) {
779
- console.error("Помилка копіювання:", s);
792
+ await navigator.clipboard.writeText(l), console.log("Код скопійовано!");
793
+ } catch (n) {
794
+ console.error("Помилка копіювання:", n);
780
795
  }
781
796
  };
782
- return (r, s) => (o(), u("div", dt, [
783
- d("div", vt, [
784
- d("nav", gt, [
785
- (o(!0), u(B, null, R(r.tabs, (i) => (o(), u("button", {
797
+ return (l, n) => (o(), u("div", vt, [
798
+ d("div", gt, [
799
+ d("nav", pt, [
800
+ (o(!0), u(B, null, z(l.tabs, (i) => (o(), u("button", {
786
801
  key: i.id,
787
802
  onClick: (_) => e.value = i.id,
788
803
  class: m([
789
804
  "py-2 px-1 border-b-2 font-medium text-sm transition-colors",
790
805
  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"
791
806
  ])
792
- }, h(i.label), 11, pt))), 128))
807
+ }, h(i.label), 11, ft))), 128))
793
808
  ])
794
809
  ]),
795
- d("div", ft, [
796
- (o(!0), u(B, null, R(r.tabs, (i) => Te((o(), u("div", {
810
+ d("div", mt, [
811
+ (o(!0), u(B, null, z(l.tabs, (i) => Fe((o(), u("div", {
797
812
  key: i.id
798
813
  }, [
799
- d("div", mt, [
800
- d("div", bt, [
801
- d("span", yt, h(i.label), 1),
814
+ d("div", bt, [
815
+ d("div", yt, [
816
+ d("span", ht, h(i.label), 1),
802
817
  d("button", {
803
818
  onClick: (_) => c(i.content),
804
819
  class: "text-gray-400 hover:text-white transition-colors",
805
820
  title: "Копіювати код"
806
- }, s[0] || (s[0] = [
821
+ }, n[0] || (n[0] = [
807
822
  d("svg", {
808
823
  class: "w-4 h-4",
809
824
  fill: "none",
@@ -817,35 +832,35 @@ const Se = /* @__PURE__ */ S({
817
832
  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"
818
833
  })
819
834
  ], -1)
820
- ]), 8, ht)
835
+ ]), 8, xt)
821
836
  ]),
822
- d("pre", xt, [
837
+ d("pre", kt, [
823
838
  d("code", null, h(i.content), 1)
824
839
  ])
825
840
  ])
826
841
  ])), [
827
- [Fe, e.value === i.id]
842
+ [Se, e.value === i.id]
828
843
  ])), 128))
829
844
  ])
830
845
  ]));
831
846
  }
832
847
  });
833
- ce.install = function(a) {
834
- a.component("DataTable", ce), a.component("Column", ot), a.component("Pagination", fe), a.component("SelectionInfo", ct), a.component("CodeTabs", kt);
848
+ ve.install = function(a) {
849
+ a.component("DataTable", ve), a.component("Column", it), a.component("Pagination", me), a.component("SelectionInfo", dt), a.component("CodeTabs", _t);
835
850
  };
836
851
  export {
837
- ze as ArrayFormat,
838
- Be as BadgeFormat,
839
- kt as CodeTabs,
840
- ot as Column,
841
- ce as DataTable,
842
- De as DateFormat,
843
- Le as LinkFormat,
844
- Se as NumberFormat,
845
- fe as Pagination,
846
- Ne as SelectFormat,
847
- ct as SelectionInfo,
848
- Ae as TextFormat,
849
- ce as default,
850
- ue as formatComponents
852
+ Pe as ArrayFormat,
853
+ Re as BadgeFormat,
854
+ _t as CodeTabs,
855
+ it as Column,
856
+ ve as DataTable,
857
+ Ae as DateFormat,
858
+ Ne as LinkFormat,
859
+ De as NumberFormat,
860
+ me as Pagination,
861
+ Ve as SelectFormat,
862
+ dt as SelectionInfo,
863
+ Ie as TextFormat,
864
+ ve as default,
865
+ de as formatComponents
851
866
  };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
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 O=e.defineComponent({name:"NumberFormat",__name:"NumberFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>o.value===null||o.value===void 0?"":typeof o.value=="number"?o.value.toFixed(2):Intl.NumberFormat("uk-UA",{maximumFractionDigits:2}).format(Number(o.value)));return(c,l)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t.value),1))}}),q=e.defineComponent({name:"DateFormat",__name:"DateFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>{if(!o.value)return"";try{return new Date(o.value).toLocaleDateString()}catch{return o.value}});return(c,l)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t.value),1))}}),J=e.defineComponent({name:"TextFormat",__name:"TextFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,{value:t}=o,c=e.computed(()=>Array.isArray(t)?t.map(l=>l.text||l).join(","):t?.text||t);return(l,s)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(c.value),1))}}),G=((u,o)=>{const t=u.__vccOpts||u;for(const[c,l]of o)t[c]=l;return t})(e.defineComponent({name:"BadgeFormat",__name:"BadgeFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>{const s=String(o.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`:o.value?.color&&!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(o.value.color)?`${i} bg-${o.value.color}-100 text-${o.value.color}-800`:`${i} bg-gray-100 text-gray-800`});function c(s,i=1){const h=parseInt(s.slice(1,3),16),x=parseInt(s.slice(3,5),16),C=parseInt(s.slice(5,7),16);return`rgba(${h}, ${x}, ${C}, ${i})`}const l=e.computed(()=>{const s={minWidth:"60px",textAlign:"center",display:"inline-block"};return/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(o.value?.color)?{...s,backgroundColor:c(o.value.color,.1),color:c(o.value.color,.8)}:s});return(s,i)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["badge",t.value]),style:e.normalizeStyle(l.value)},e.toDisplayString(s.value?.text||s.value),7))}}),[["__scopeId","data-v-28700c64"]]),ce={class:"flex flex-wrap gap-1"},K=e.defineComponent({name:"ArrayFormat",__name:"ArrayFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>o.value?Array.isArray(o.value)?o.value:[o.value]:[]),c=l=>l?typeof l=="object"&&l.name?l.name:typeof l=="string"||typeof l=="number"?String(l):JSON.stringify(l):"";return(l,s)=>(e.openBlock(),e.createElementBlock("div",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(i,h)=>(e.openBlock(),e.createElementBlock("span",{key:h,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(c(i)),1))),128))]))}}),de=["href","target"],Q=e.defineComponent({__name:"LinkFormat",props:{href:{default:""},target:{default:"_self"},onClick:{type:Function,default:void 0},value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>typeof o.value=="string"||typeof o.value=="number"?o.value:o.value?.text||o.value?.label||"Link"),c=e.computed(()=>o.href?o.href:typeof o.value=="object"&&o.value?.href?o.value.href:""),l=e.computed(()=>o.target?o.target:typeof o.value=="object"&&o.value?.target?o.value.target:"_self"),s=e.computed(()=>"text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer"),i=h=>{o.onClick&&o.row&&(h.preventDefault(),o.onClick(o.row,o.value))};return(h,x)=>c.value?(e.openBlock(),e.createElementBlock("a",{key:0,href:c.value,target:l.value,class:e.normalizeClass(s.value),onClick:i},e.toDisplayString(t.value),11,de)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:e.normalizeClass(s.value),onClick:i},e.toDisplayString(t.value),3))}}),X=e.defineComponent({name:"TextFormat",__name:"SelectFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,{value:t}=o,c=e.computed(()=>Array.isArray(t)?t.map(l=>l.text||l).filter((l,s)=>s<2).join(", ")+(t.length>2?` +${t.length-2}`:""):t?.text||t);return(l,s)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(c.value),1))}}),A={number:O,date:q,text:J,badge:G,array:K,select:X,link:Q},me={class:"flex items-center space-x-4"},pe={class:"font-medium"},ue={class:"font-medium"},ge={class:"font-medium"},fe={class:"flex items-center space-x-2"},ye=["disabled"],be={class:"flex items-center space-x-1"},he=["onClick"],ke=["disabled"],I=e.defineComponent({name:"Pagination",__name:"Pagination",props:{page:{},limit:{},total:{},theme:{default:"light"},size:{default:"medium"}},emits:["update:page"],setup(u,{emit:o}){const t=u,c=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]),l=e.computed(()=>{const{theme:p}=t;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"}}),s=o,i=e.computed(()=>Math.ceil(t.total/t.limit)),h=e.computed(()=>t.total===0?0:(t.page-1)*t.limit+1),x=e.computed(()=>Math.min(t.page*t.limit,t.total)),C=e.computed(()=>{const p=[];if(i.value<=7)for(let b=1;b<=i.value;b+=1)p.push(b);else{p.push(1),t.page>4&&p.push("...");const b=Math.max(2,t.page-1),_=Math.min(i.value-1,t.page+1);for(let w=b;w<=_;w+=1)w!==1&&w!==i.value&&p.push(w);t.page<i.value-3&&p.push("..."),i.value>1&&p.push(i.value)}return p}),B=p=>{p>=1&&p<=i.value&&p!==t.page&&s("update:page",p)};return(p,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between py-3 border-t",l.value.container])},[e.createElementVNode("div",me,[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center text-sm",l.value.text,c.value.text])},[e.createElementVNode("span",null,[g[2]||(g[2]=e.createTextVNode(" Показано ",-1)),e.createElementVNode("span",pe,e.toDisplayString(h.value),1),g[3]||(g[3]=e.createTextVNode(" до ",-1)),e.createElementVNode("span",ue,e.toDisplayString(x.value),1),g[4]||(g[4]=e.createTextVNode(" з ",-1)),e.createElementVNode("span",ge,e.toDisplayString(p.total),1),g[5]||(g[5]=e.createTextVNode(" результатів ",-1))])],2)]),e.createElementVNode("div",fe,[e.createElementVNode("button",{onClick:g[0]||(g[0]=b=>B(p.page-1)),disabled:p.page<=1,class:e.normalizeClass(["relative font-medium rounded-md",c.value.button,p.page<=1?l.value.buttonDisabled:l.value.button])},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(c.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,ye),e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,b=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:b},[b==="..."?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["font-medium",c.value.button,l.value.ellipsis])}," ... ",2)):(e.openBlock(),e.createElementBlock("button",{key:1,onClick:_=>B(b),class:e.normalizeClass(["relative font-medium rounded-md",c.value.button,b===p.page?l.value.buttonActive:l.value.button])},e.toDisplayString(b),11,he))],64))),128))]),e.createElementVNode("button",{onClick:g[1]||(g[1]=b=>B(p.page+1)),disabled:p.page>=i.value,class:e.normalizeClass(["relative font-medium rounded-md",c.value.button,p.page>=i.value?l.value.buttonDisabled:l.value.button])},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(c.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,ke)])],2))}}),xe={key:0,class:"text-center py-8"},Ce={class:"inline-flex items-center space-x-2"},_e={key:2,class:"overflow-x-auto"},Be=["checked","indeterminate"],we=["onClick"],Ee={class:"flex items-center justify-between"},$e={key:0,class:"ml-1 text-xs"},Ne={key:1,class:"w-[100px]"},Ve=["onClick"],Se=["checked","onChange"],De=["onClick"],ve={class:"text-center"},$=e.defineComponent({name:"DataTable",__name:"DataTable",props:{rows:{default:()=>[]},columns:{default:()=>[]},api:{},router:{},tableStyle:{default:"min-width: 50rem"},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:""},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(u,{emit:o}){const t=u,c=o,l=e.ref(t.selectedRows||[]),s=e.ref([]),i=e.ref([]),h=e.ref([]),x=e.ref(!1),C=e.ref(null),B=e.ref(t.router),p=e.useSlots(),g=e.computed(()=>p.action);function b(a){if(B.value){B.value.push(a);return}location.href=a}const _=e.computed(()=>{if(t.api)return i.value;if(t.sortable&&s.value.length>0){const a=[...t.rows];return a.sort((d,n)=>{for(const m of s.value){if(!m.direction)return 0;const r=d[m.field],y=n[m.field];if(r==null)return 1;if(y==null)return-1;let E=0;typeof r=="string"&&typeof y=="string"?E=r.localeCompare(y):r<y?E=-1:r>y?E=1:E=0;const F=m.direction==="desc"?-E:E;if(F!==0)return F}return 0}),a}return t.rows});e.watch(()=>t.selectedRows,a=>{l.value=a||[]});const w=a=>l.value.some(d=>d===a),te=a=>{const d=l.value.findIndex(n=>n===a);d>-1?l.value.splice(d,1):l.value.push(a),c("update:selectedRows",[...l.value])},j=e.computed(()=>_.value.length>0&&l.value.length===_.value.length),N=e.computed(()=>l.value.length>0&&l.value.length<_.value.length),L=()=>{j.value?l.value=[]:l.value=[..._.value],c("update:selectedRows",[...l.value])},Oe=a=>{if(!t.sortable)return;const d=s.value.findIndex(m=>m.field===a);if(d>=0){const m=s.value[d];m.direction==="asc"?m.direction="desc":m.direction==="desc"&&s.value.splice(d,1)}else s.value.unshift({field:a,direction:"asc"});const n=s.value.filter(m=>m.direction).map(m=>({name:m.field,asc:m.direction==="asc"}));c("sort",n),t.api&&v()},qe=a=>s.value.find(n=>n.field===a)?.direction==="asc",Je=a=>{const d=s.value.find(n=>n.field===a);if(!d)return"↑↓";switch(d.direction){case"asc":return"↑";case"desc":return"↓";default:return"↕️"}},R=a=>t.sortable&&a.sortable!==!1,Ge=a=>{t.clickable&&c("row-click",a)},V=(a,d)=>{const n=d[a.name];if(t.getCellData||a.getCellData){const m=a.getCellData||t.getCellData;if(m){const r={name:a.name,row:d,value:n};return m(r)}}return["_data","_text"].map(m=>{const r=`${a.name}${m}`;return d[r]?d[r]:null}).find(m=>m)||n},ae=a=>a.width?a.width==="w-full"?"w-full":typeof a.width=="string"?`w-[${a.width}px]`:typeof a.width=="number"?`w-[${a.width}px]`:"":"",P=e.ref(t.page),oe=e.ref(t.limit),M=e.ref(t.total),S=e.ref(1),H=e.ref(10),D=e.ref(0),le=e.computed(()=>t.api?S.value:P.value),ne=e.computed(()=>t.api?H.value:oe.value),re=e.computed(()=>t.api?D.value:M.value),k=e.computed(()=>{const{theme:a}=t;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"}});e.watch(()=>t.page,a=>{P.value=a}),e.watch(()=>t.limit,a=>{oe.value=a}),e.watch(()=>t.total,a=>{M.value=a});async function v(){if(t.api){x.value=!0,C.value=null;try{const a=new URL(t.api,window.location.origin);if(a.searchParams.set("page",le.value.toString()),a.searchParams.set("limit",ne.value.toString()),s.value.length>0){const m=s.value.filter(r=>r.direction).map(r=>`${r.field}:${r.direction}`).join(",");m&&a.searchParams.set("sort",m)}const d=await fetch(a.toString());if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);const n=await d.json();n.rows&&Array.isArray(n.rows)&&(i.value=n.rows),n.columns&&Array.isArray(n.columns)&&(h.value=n.columns),n.total!==void 0&&(t.api?D.value=n.total:M.value=n.total)}catch(a){C.value=a instanceof Error?a.message:"Failed to fetch data",console.error("Error fetching data:",a)}finally{x.value=!1}}}const Ke=a=>{t.api?S.value=a:(P.value=a,c("update:page",a)),t.api&&v()},Qe=e.computed(()=>t.showPagination&&re.value>0),T=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&&(S.value=t.page),t.limit&&(H.value=t.limit),t.total&&(D.value=t.total),v())}),e.watch(()=>t.api,a=>{a&&(S.value=t.page||1,H.value=t.limit||10,D.value=t.total||0,v())});const Xe=e.computed(()=>t.api?h.value:t.columns),W=e.ref([]),z=e.ref({});e.provide("registerColumn",(a,d)=>{W.value.push(a),d&&a.slotName&&(z.value[a.name]=d)});const se=e.computed(()=>{const a=Xe.value||[],d=[],n=p.default?.();if(n){const m=n.filter(r=>r.type?.name==="Column"||r.type==="Column"||r.type&&typeof r.type=="object"&&r.type.name==="Column").map(r=>{const y=r.props||r.componentProps||{},E=y.field||y.name||"",F=y.header||y.label||"",ie=r.children&&r.children.body,U={name:E,ua:F,format:y.format||"text",slotName:ie?"body":void 0,...y};return ie&&U.name&&(z.value[U.name]=r.children.body),U});d.push(...m)}if(W.value.length>0&&d.push(...W.value),d.length>0){const m=[],r=new Set(d.map(y=>y.name));return a.forEach(y=>{r.has(y.name)||m.push(y)}),m.push(...d),console.log("Combined columns:",{default:a.length,custom:d.length,combined:m.length}),m}return a.length>0?(console.log("Using default columns:",a.length),a):[]}),Ye=(a="text")=>A[a]||A.text;return(a,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full",k.value.container])},[x.value||t.loading?(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("div",Ce,[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(k.value.loading)},"Loading...",2)])])):C.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["text-center py-8",k.value.error])},e.toDisplayString(C.value),3)):!t.loading&&_.value.length>0?(e.openBlock(),e.createElementBlock("div",_e,[e.createElementVNode("div",{class:e.normalizeClass(a.classWrapper?a.classWrapper:"relative w-full overflow-auto")},[e.createElementVNode("table",{class:e.normalizeClass(a.classTable),style:e.normalizeStyle(a.tableStyle)},[e.createElementVNode("thead",{class:e.normalizeClass(k.value.thead)},[e.createElementVNode("tr",null,[a.selectable?(e.openBlock(),e.createElementBlock("th",{key:0,class:e.normalizeClass(["text-left font-medium uppercase tracking-wider",k.value.th,T.value.header,t.classTh,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:j.value,indeterminate:N.value,onChange:L,class:e.normalizeClass(["h-4 w-4 focus:ring-blue-500 rounded",k.value.checkbox])},null,42,Be)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(se.value.filter(n=>!n.hidden),n=>(e.openBlock(),e.createElementBlock("th",{key:n.name,class:e.normalizeClass([n.align?`text-${n.align}`:"",R(n)?["cursor-pointer",k.value.thHover]:"",ae(n)].concat(t.classTh||["text-left font-medium uppercase tracking-wider",k.value.th,T.value.header])),onClick:m=>R(n)?Oe(n.name):void 0},[e.createElementVNode("div",Ee,[e.createElementVNode("span",null,e.toDisplayString(n.ua||n.header||n.name),1),R(n)?(e.openBlock(),e.createElementBlock("span",$e,[e.renderSlot(a.$slots,"sort",{asc:qe(n.name)},()=>[e.createTextVNode(e.toDisplayString(Je(n.name)),1)])])):e.createCommentVNode("",!0)])],10,we))),128)),g.value?(e.openBlock(),e.createElementBlock("th",Ne,"Дії")):e.createCommentVNode("",!0)])],2),e.createElementVNode("tbody",{class:e.normalizeClass(a.classTbody||k.value.tbody)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,(n,m)=>(e.openBlock(),e.createElementBlock("tr",{key:m,class:e.normalizeClass(t.classTr||[k.value.tr,t.clickable?"cursor-pointer":""]),onClick:r=>t.clickable?Ge(n):void 0},[a.selectable?(e.openBlock(),e.createElementBlock("td",{key:0,class:e.normalizeClass(["whitespace-nowrap",k.value.td,T.value.cell,t.classTd,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:w(n),onChange:r=>te(n),class:e.normalizeClass(["h-4 w-4 focus:ring-blue-500 rounded",k.value.checkbox])},null,42,Se)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(se.value.filter(r=>!r.hidden),r=>(e.openBlock(),e.createElementBlock("td",{key:r.name,class:e.normalizeClass(t.classTd||["whitespace-nowrap",k.value.td,T.value.cell,r.align?`text-${r.align}`:"",ae(r)])},[r.action&&g.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,row:n,value:V(r,n)},null,8,["row","value"])):r.slotName&&z.value[r.name]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(z.value[r.name]),{key:1,data:n,value:V(r,n),row:n,column:r},null,8,["data","value","row","column"])):r.link?(e.openBlock(),e.createElementBlock("a",{key:2,class:e.normalizeClass(a.classLink||"hover:text-blue-900 cursor-pointer text-blue-700 hover:underline"),onClick:y=>b(r.link.replace("{id}",n.id))},e.toDisplayString(V(r,n)),11,De)):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(Ye(r.format)),{key:3,value:V(r,n),row:n,column:r,href:r.link},null,8,["value","row","column","href"]))],2))),128)),e.createElementVNode("td",ve,[g.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,row:n},null,8,["row"])):e.createCommentVNode("",!0)])],10,Ve))),128))],2)],6)],2)])):e.createCommentVNode("",!0),Qe.value&&!x.value&&!t.loading&&!C.value?(e.openBlock(),e.createBlock(I,{key:3,page:le.value,limit:ne.value,total:re.value,theme:t.theme,size:t.size,"onUpdate:page":Ke},null,8,["page","limit","total","theme","size"])):e.createCommentVNode("",!0),!x.value&&!t.loading&&!C.value&&_.value.length===0?(e.openBlock(),e.createElementBlock("div",{key:4,class:e.normalizeClass(["text-center py-8",k.value.empty])}," Дані відсутні ",2)):e.createCommentVNode("",!0)],2))}}),Te={style:{display:"none"}},Y=e.defineComponent({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(u){const o=u,t=e.useSlots(),c=e.inject("registerColumn");return e.onMounted(()=>{if(c){const{field:l,name:s,header:i,label:h,format:x,slotName:C,link:B,action:p,getCellData:g,suffix:b,..._}=o,N={name:l||s||"",ua:i||h||"",format:x||"text",slotName:C||(t.body?"body":void 0),link:B,action:p,getCellData:g,suffix:b,..._};console.log("Registering column:",N);const L=t.body;c(N,L)}}),(l,s)=>(e.openBlock(),e.createElementBlock("div",Te,[e.renderSlot(l.$slots,"body",{data:{}})]))}}),ze={class:"mt-4"},Fe={class:"text-sm text-gray-600 dark:text-gray-300"},Z=e.defineComponent({__name:"SelectionInfo",props:{selectedRows:{},totalCount:{}},setup(u){const o=u,t=e.computed(()=>o.selectedRows.length);return(c,l)=>(e.openBlock(),e.createElementBlock("div",ze,[e.createElementVNode("div",Fe," Обрано: "+e.toDisplayString(t.value)+" з "+e.toDisplayString(c.totalCount)+" записів ",1)]))}}),Ae={class:"mt-4"},Ie={class:"border-b border-gray-200 dark:border-gray-700"},je={class:"-mb-px flex space-x-8"},Le=["onClick"],Re={class:"mt-4"},Pe={class:"bg-gray-900 rounded-lg overflow-hidden"},Me={class:"flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"},He={class:"text-sm text-gray-300"},We=["onClick"],Ue={class:"p-4 text-sm text-gray-100 overflow-x-auto"},ee=e.defineComponent({__name:"CodeTabs",props:{tabs:{},defaultTab:{default:void 0}},setup(u){const o=u,t=e.ref(o.defaultTab||o.tabs[0]?.id||""),c=async l=>{try{await navigator.clipboard.writeText(l),console.log("Код скопійовано!")}catch(s){console.error("Помилка копіювання:",s)}};return(l,s)=>(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",Ie,[e.createElementVNode("nav",je,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.tabs,i=>(e.openBlock(),e.createElementBlock("button",{key:i.id,onClick:h=>t.value=i.id,class:e.normalizeClass(["py-2 px-1 border-b-2 font-medium text-sm transition-colors",t.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.toDisplayString(i.label),11,Le))),128))])]),e.createElementVNode("div",Re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.tabs,i=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:i.id},[e.createElementVNode("div",Pe,[e.createElementVNode("div",Me,[e.createElementVNode("span",He,e.toDisplayString(i.label),1),e.createElementVNode("button",{onClick:h=>c(i.content),class:"text-gray-400 hover:text-white transition-colors",title:"Копіювати код"},s[0]||(s[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,We)]),e.createElementVNode("pre",Ue,[e.createElementVNode("code",null,e.toDisplayString(i.content),1)])])])),[[e.vShow,t.value===i.id]])),128))])]))}});$.install=function(o){o.component("DataTable",$),o.component("Column",Y),o.component("Pagination",I),o.component("SelectionInfo",Z),o.component("CodeTabs",ee)},f.ArrayFormat=K,f.BadgeFormat=G,f.CodeTabs=ee,f.Column=Y,f.DataTable=$,f.DateFormat=q,f.LinkFormat=Q,f.NumberFormat=O,f.Pagination=I,f.SelectFormat=X,f.SelectionInfo=Z,f.TextFormat=J,f.default=$,f.formatComponents=A,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
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 O=e.defineComponent({name:"NumberFormat",__name:"NumberFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>o.value===null||o.value===void 0?"":typeof o.value=="number"?o.value.toFixed(2):Intl.NumberFormat("uk-UA",{maximumFractionDigits:2}).format(Number(o.value)));return(c,n)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t.value),1))}}),q=e.defineComponent({name:"DateFormat",__name:"DateFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>{if(!o.value)return"";try{return new Date(o.value).toLocaleDateString()}catch{return o.value}});return(c,n)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t.value),1))}}),J=e.defineComponent({name:"TextFormat",__name:"TextFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,{value:t}=o,c=e.computed(()=>Array.isArray(t)?t.map(n=>n.text||n).join(","):t?.text||t);return(n,s)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(c.value),1))}}),G=((u,o)=>{const t=u.__vccOpts||u;for(const[c,n]of o)t[c]=n;return t})(e.defineComponent({name:"BadgeFormat",__name:"BadgeFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>{const s=String(o.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`:o.value?.color&&!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(o.value.color)?`${i} bg-${o.value.color}-100 text-${o.value.color}-800`:`${i} bg-gray-100 text-gray-800`});function c(s,i=1){const h=parseInt(s.slice(1,3),16),x=parseInt(s.slice(3,5),16),C=parseInt(s.slice(5,7),16);return`rgba(${h}, ${x}, ${C}, ${i})`}const n=e.computed(()=>{const s={minWidth:"60px",textAlign:"center",display:"inline-block"};return/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(o.value?.color)?{...s,backgroundColor:c(o.value.color,.1),color:c(o.value.color,.8)}:s});return(s,i)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["badge",t.value]),style:e.normalizeStyle(n.value)},e.toDisplayString(s.value?.text||s.value),7))}}),[["__scopeId","data-v-28700c64"]]),ce={class:"flex flex-wrap gap-1"},K=e.defineComponent({name:"ArrayFormat",__name:"ArrayFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>o.value?Array.isArray(o.value)?o.value:[o.value]:[]),c=n=>n?typeof n=="object"&&n.name?n.name:typeof n=="string"||typeof n=="number"?String(n):JSON.stringify(n):"";return(n,s)=>(e.openBlock(),e.createElementBlock("div",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(i,h)=>(e.openBlock(),e.createElementBlock("span",{key:h,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(c(i)),1))),128))]))}}),de=["href","target"],Q=e.defineComponent({__name:"LinkFormat",props:{href:{default:""},target:{default:"_self"},onClick:{type:Function,default:void 0},value:{},row:{},column:{}},setup(u){const o=u,t=e.computed(()=>typeof o.value=="string"||typeof o.value=="number"?o.value:o.value?.text||o.value?.label||"Link"),c=e.computed(()=>o.href?o.href:typeof o.value=="object"&&o.value?.href?o.value.href:""),n=e.computed(()=>o.target?o.target:typeof o.value=="object"&&o.value?.target?o.value.target:"_self"),s=e.computed(()=>"text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer"),i=h=>{o.onClick&&o.row&&(h.preventDefault(),o.onClick(o.row,o.value))};return(h,x)=>c.value?(e.openBlock(),e.createElementBlock("a",{key:0,href:c.value,target:n.value,class:e.normalizeClass(s.value),onClick:i},e.toDisplayString(t.value),11,de)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:e.normalizeClass(s.value),onClick:i},e.toDisplayString(t.value),3))}}),X=e.defineComponent({name:"TextFormat",__name:"SelectFormat",props:{value:{},row:{},column:{}},setup(u){const o=u,{value:t}=o,c=e.computed(()=>Array.isArray(t)?t.map(n=>n.text||n).filter((n,s)=>s<2).join(", ")+(t.length>2?` +${t.length-2}`:""):t?.text||t);return(n,s)=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(c.value),1))}}),A={number:O,date:q,text:J,badge:G,array:K,select:X,link:Q},me={class:"flex items-center space-x-4"},pe={class:"font-medium"},ue={class:"font-medium"},ge={class:"font-medium"},fe={class:"flex items-center space-x-2"},ye=["disabled"],be={class:"flex items-center space-x-1"},he=["onClick"],ke=["disabled"],I=e.defineComponent({name:"Pagination",__name:"Pagination",props:{page:{},limit:{},total:{},theme:{default:"light"},size:{default:"medium"}},emits:["update:page"],setup(u,{emit:o}){const t=u,c=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]),n=e.computed(()=>{const{theme:p}=t;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"}}),s=o,i=e.computed(()=>Math.ceil(t.total/t.limit)),h=e.computed(()=>t.total===0?0:(t.page-1)*t.limit+1),x=e.computed(()=>Math.min(t.page*t.limit,t.total)),C=e.computed(()=>{const p=[];if(i.value<=7)for(let b=1;b<=i.value;b+=1)p.push(b);else{p.push(1),t.page>4&&p.push("...");const b=Math.max(2,t.page-1),_=Math.min(i.value-1,t.page+1);for(let w=b;w<=_;w+=1)w!==1&&w!==i.value&&p.push(w);t.page<i.value-3&&p.push("..."),i.value>1&&p.push(i.value)}return p}),B=p=>{p>=1&&p<=i.value&&p!==t.page&&s("update:page",p)};return(p,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between py-3 border-t",n.value.container])},[e.createElementVNode("div",me,[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center text-sm",n.value.text,c.value.text])},[e.createElementVNode("span",null,[g[2]||(g[2]=e.createTextVNode(" Показано ",-1)),e.createElementVNode("span",pe,e.toDisplayString(h.value),1),g[3]||(g[3]=e.createTextVNode(" до ",-1)),e.createElementVNode("span",ue,e.toDisplayString(x.value),1),g[4]||(g[4]=e.createTextVNode(" з ",-1)),e.createElementVNode("span",ge,e.toDisplayString(p.total),1),g[5]||(g[5]=e.createTextVNode(" результатів ",-1))])],2)]),e.createElementVNode("div",fe,[e.createElementVNode("button",{onClick:g[0]||(g[0]=b=>B(p.page-1)),disabled:p.page<=1,class:e.normalizeClass(["relative font-medium rounded-md",c.value.button,p.page<=1?n.value.buttonDisabled:n.value.button])},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(c.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,ye),e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,b=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:b},[b==="..."?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["font-medium",c.value.button,n.value.ellipsis])}," ... ",2)):(e.openBlock(),e.createElementBlock("button",{key:1,onClick:_=>B(b),class:e.normalizeClass(["relative font-medium rounded-md",c.value.button,b===p.page?n.value.buttonActive:n.value.button])},e.toDisplayString(b),11,he))],64))),128))]),e.createElementVNode("button",{onClick:g[1]||(g[1]=b=>B(p.page+1)),disabled:p.page>=i.value,class:e.normalizeClass(["relative font-medium rounded-md",c.value.button,p.page>=i.value?n.value.buttonDisabled:n.value.button])},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(c.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,ke)])],2))}}),xe={key:0,class:"text-center py-8"},Ce={class:"inline-flex items-center space-x-2"},_e={key:2,class:"overflow-x-auto"},Be=["checked","indeterminate"],we=["onClick"],Ee={class:"flex items-center justify-between"},$e={key:0,class:"ml-1 text-xs"},Ne={key:1,class:"w-[100px]"},Ve=["onClick"],Se=["checked","onChange"],De=["onClick"],Te={key:1,class:"text-center"},N=e.defineComponent({name:"DataTable",__name:"DataTable",props:{rows:{default:()=>[]},columns:{default:()=>[]},api:{},router:{},tableStyle:{default:""},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:""},classThead:{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(u,{emit:o}){const t=u,c=o,n=e.ref(t.selectedRows||[]),s=e.ref([]),i=e.ref([]),h=e.ref([]),x=e.ref(!1),C=e.ref(null),B=e.ref(t.router),p=e.useSlots(),g=e.computed(()=>p.action);function b(a){if(B.value){B.value.push(a);return}location.href=a}const _=e.computed(()=>{if(t.api)return i.value;if(t.sortable&&s.value.length>0){const a=[...t.rows];return a.sort((d,l)=>{for(const m of s.value){if(!m.direction)return 0;const r=d[m.field],y=l[m.field];if(r==null)return 1;if(y==null)return-1;let E=0;typeof r=="string"&&typeof y=="string"?E=r.localeCompare(y):r<y?E=-1:r>y?E=1:E=0;const F=m.direction==="desc"?-E:E;if(F!==0)return F}return 0}),a}return t.rows});e.watch(()=>t.selectedRows,a=>{n.value=a||[]});const w=a=>n.value.some(d=>d===a),te=a=>{const d=n.value.findIndex(l=>l===a);d>-1?n.value.splice(d,1):n.value.push(a),c("update:selectedRows",[...n.value])},L=e.computed(()=>_.value.length>0&&n.value.length===_.value.length),V=e.computed(()=>n.value.length>0&&n.value.length<_.value.length),j=()=>{L.value?n.value=[]:n.value=[..._.value],c("update:selectedRows",[...n.value])},Oe=a=>{if(!t.sortable)return;const d=s.value.findIndex(m=>m.field===a);if(d>=0){const m=s.value[d];m.direction==="asc"?m.direction="desc":m.direction==="desc"&&s.value.splice(d,1)}else s.value.unshift({field:a,direction:"asc"});const l=s.value.filter(m=>m.direction).map(m=>({name:m.field,asc:m.direction==="asc"}));c("sort",l),t.api&&T()},qe=a=>s.value.find(l=>l.field===a)?.direction==="asc",Je=a=>{const d=s.value.find(l=>l.field===a);if(!d)return"↑↓";switch(d.direction){case"asc":return"↑";case"desc":return"↓";default:return"↕️"}},R=a=>t.sortable&&a.sortable!==!1,Ge=a=>{t.clickable&&c("row-click",a)},$=(a,d)=>{const l=d[a.name];if(t.getCellData||a.getCellData){const m=a.getCellData||t.getCellData;if(m){const r={name:a.name,row:d,value:l};return m(r)}}return["_data","_text"].map(m=>{const r=`${a.name}${m}`;return d[r]?d[r]:null}).find(m=>m)||l},ae=a=>a.width?a.width==="w-full"?"w-full":typeof a.width=="string"?`w-[${a.width}px]`:typeof a.width=="number"?`w-[${a.width}px]`:"":"",P=e.ref(t.page),oe=e.ref(t.limit),M=e.ref(t.total),S=e.ref(1),H=e.ref(10),D=e.ref(0),le=e.computed(()=>t.api?S.value:P.value),ne=e.computed(()=>t.api?H.value:oe.value),re=e.computed(()=>t.api?D.value:M.value),k=e.computed(()=>{const{theme:a}=t;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"}});e.watch(()=>t.page,a=>{P.value=a}),e.watch(()=>t.limit,a=>{oe.value=a}),e.watch(()=>t.total,a=>{M.value=a});async function T(){if(t.api){x.value=!0,C.value=null;try{const a=new URL(t.api,window.location.origin);if(a.searchParams.set("page",le.value.toString()),a.searchParams.set("limit",ne.value.toString()),s.value.length>0){const m=s.value.filter(r=>r.direction).map(r=>`${r.field}:${r.direction}`).join(",");m&&a.searchParams.set("sort",m)}const d=await fetch(a.toString());if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);const l=await d.json();l.rows&&Array.isArray(l.rows)&&(i.value=l.rows),l.columns&&Array.isArray(l.columns)&&(h.value=l.columns),l.total!==void 0&&(t.api?D.value=l.total:M.value=l.total)}catch(a){C.value=a instanceof Error?a.message:"Failed to fetch data",console.error("Error fetching data:",a)}finally{x.value=!1}}}const Ke=a=>{t.api?S.value=a:(P.value=a,c("update:page",a)),t.api&&T()},Qe=e.computed(()=>t.showPagination&&re.value>0),z=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&&(S.value=t.page),t.limit&&(H.value=t.limit),t.total&&(D.value=t.total),T())}),e.watch(()=>t.api,a=>{a&&(S.value=t.page||1,H.value=t.limit||10,D.value=t.total||0,T())});const Xe=e.computed(()=>t.api?h.value:t.columns),W=e.ref([]),v=e.ref({});e.provide("registerColumn",(a,d)=>{W.value.push(a),d&&a.slotName&&(v.value[a.name]=d)});const se=e.computed(()=>{const a=Xe.value||[],d=[],l=p.default?.();if(l){const m=l.filter(r=>r.type?.name==="Column"||r.type==="Column"||r.type&&typeof r.type=="object"&&r.type.name==="Column").map(r=>{const y=r.props||r.componentProps||{},E=y.field||y.name||"",F=y.header||y.label||"",ie=r.children&&r.children.body,U={name:E,ua:F,format:y.format||"text",slotName:ie?"body":void 0,...y};return ie&&U.name&&(v.value[U.name]=r.children.body),U});d.push(...m)}if(W.value.length>0&&d.push(...W.value),d.length>0){const m=[],r=new Set(d.map(y=>y.name));return a.forEach(y=>{r.has(y.name)||m.push(y)}),m.push(...d),console.log("Combined columns:",{default:a.length,custom:d.length,combined:m.length}),m}return a.length>0?(console.log("Using default columns:",a.length),a):[]}),Ye=(a="text")=>A[a.toLowerCase()]||A.text;return(a,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full",k.value.container])},[x.value||t.loading?(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("div",Ce,[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(k.value.loading)},"Loading...",2)])])):C.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["text-center py-8",k.value.error])},e.toDisplayString(C.value),3)):!t.loading&&_.value.length>0?(e.openBlock(),e.createElementBlock("div",_e,[e.createElementVNode("div",{class:e.normalizeClass(a.classWrapper?a.classWrapper:"relative w-full overflow-auto")},[e.createElementVNode("table",{class:e.normalizeClass(a.classTable),style:e.normalizeStyle(a.tableStyle)},[e.createElementVNode("thead",{class:e.normalizeClass(a.classThead||k.value.thead)},[e.createElementVNode("tr",null,[a.selectable?(e.openBlock(),e.createElementBlock("th",{key:0,class:e.normalizeClass(["text-left font-medium uppercase tracking-wider",k.value.th,z.value.header,t.classTh,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:L.value,indeterminate:V.value,onChange:j,class:e.normalizeClass(["h-4 w-4 focus:ring-blue-500 rounded",k.value.checkbox])},null,42,Be)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(se.value.filter(l=>!l.hidden),l=>(e.openBlock(),e.createElementBlock("th",{key:l.name,class:e.normalizeClass([l.align?`text-${l.align}`:"",R(l)?["cursor-pointer",k.value.thHover]:"",ae(l)].concat(t.classTh||["text-left font-medium uppercase tracking-wider",k.value.th,z.value.header])),onClick:m=>R(l)?Oe(l.name):void 0},[e.createElementVNode("div",Ee,[e.createElementVNode("span",null,e.toDisplayString(l.ua||l.header||l.name),1),R(l)?(e.openBlock(),e.createElementBlock("span",$e,[e.renderSlot(a.$slots,"sort",{asc:qe(l.name)},()=>[e.createTextVNode(e.toDisplayString(Je(l.name)),1)])])):e.createCommentVNode("",!0)])],10,we))),128)),g.value?(e.openBlock(),e.createElementBlock("th",Ne,"Дії")):e.createCommentVNode("",!0)])],2),e.createElementVNode("tbody",{class:e.normalizeClass(a.classTbody||k.value.tbody)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,(l,m)=>(e.openBlock(),e.createElementBlock("tr",{key:m,class:e.normalizeClass(t.classTr||[k.value.tr,t.clickable?"cursor-pointer":""]),onClick:r=>t.clickable?Ge(l):void 0},[a.selectable?(e.openBlock(),e.createElementBlock("td",{key:0,class:e.normalizeClass(["whitespace-nowrap",k.value.td,z.value.cell,t.classTd,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:w(l),onChange:r=>te(l),class:e.normalizeClass(["h-4 w-4 focus:ring-blue-500 rounded",k.value.checkbox])},null,42,Se)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(se.value.filter(r=>!r.hidden),r=>(e.openBlock(),e.createElementBlock("td",{key:r.name,class:e.normalizeClass(t.classTd||["whitespace-nowrap",k.value.td,z.value.cell,r.align?`text-${r.align}`:"",ae(r)])},[r.action&&g.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,row:l,value:$(r,l)},null,8,["row","value"])):e.unref(p).number&&r.format==="number"?e.renderSlot(a.$slots,"number",{key:1,row:l,value:$(r,l)}):e.unref(p).badge&&r.format==="badge"?e.renderSlot(a.$slots,"badge",{key:2,row:l,value:$(r,l)}):e.unref(p).array&&r.format==="array"?e.renderSlot(a.$slots,"array",{key:3,row:l,value:$(r,l)}):r.slotName&&v.value[r.name]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(v.value[r.name]),{key:4,data:l,value:$(r,l),row:l,column:r},null,8,["data","value","row","column"])):r.link?(e.openBlock(),e.createElementBlock("a",{key:5,class:e.normalizeClass(a.classLink||"hover:text-blue-900 cursor-pointer text-blue-700 hover:underline"),onClick:y=>b(r.link.replace("{id}",l.id))},e.toDisplayString($(r,l)),11,De)):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(Ye(r.format)),{key:6,value:$(r,l),row:l,column:r,href:r.link},null,8,["value","row","column","href"]))],2))),128)),g.value?(e.openBlock(),e.createElementBlock("td",Te,[e.createElementVNode("template",null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{row:l},null,8,["row"]))])])):e.createCommentVNode("",!0)],10,Ve))),128))],2)],6)],2)])):e.createCommentVNode("",!0),Qe.value&&!x.value&&!t.loading&&!C.value?(e.openBlock(),e.createBlock(I,{key:3,page:le.value,limit:ne.value,total:re.value,theme:t.theme,size:t.size,"onUpdate:page":Ke},null,8,["page","limit","total","theme","size"])):e.createCommentVNode("",!0),!x.value&&!t.loading&&!C.value&&_.value.length===0?(e.openBlock(),e.createElementBlock("div",{key:4,class:e.normalizeClass(["text-center py-8",k.value.empty])}," Дані відсутні ",2)):e.createCommentVNode("",!0)],2))}}),ze={style:{display:"none"}},Y=e.defineComponent({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(u){const o=u,t=e.useSlots(),c=e.inject("registerColumn");return e.onMounted(()=>{if(c){const{field:n,name:s,header:i,label:h,format:x,slotName:C,link:B,action:p,getCellData:g,suffix:b,..._}=o,V={name:n||s||"",ua:i||h||"",format:x||"text",slotName:C||(t.body?"body":void 0),link:B,action:p,getCellData:g,suffix:b,..._};console.log("Registering column:",V);const j=t.body;c(V,j)}}),(n,s)=>(e.openBlock(),e.createElementBlock("div",ze,[e.renderSlot(n.$slots,"body",{data:{}})]))}}),ve={class:"mt-4"},Fe={class:"text-sm text-gray-600 dark:text-gray-300"},Z=e.defineComponent({__name:"SelectionInfo",props:{selectedRows:{},totalCount:{}},setup(u){const o=u,t=e.computed(()=>o.selectedRows.length);return(c,n)=>(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("div",Fe," Обрано: "+e.toDisplayString(t.value)+" з "+e.toDisplayString(c.totalCount)+" записів ",1)]))}}),Ae={class:"mt-4"},Ie={class:"border-b border-gray-200 dark:border-gray-700"},Le={class:"-mb-px flex space-x-8"},je=["onClick"],Re={class:"mt-4"},Pe={class:"bg-gray-900 rounded-lg overflow-hidden"},Me={class:"flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"},He={class:"text-sm text-gray-300"},We=["onClick"],Ue={class:"p-4 text-sm text-gray-100 overflow-x-auto"},ee=e.defineComponent({__name:"CodeTabs",props:{tabs:{},defaultTab:{default:void 0}},setup(u){const o=u,t=e.ref(o.defaultTab||o.tabs[0]?.id||""),c=async n=>{try{await navigator.clipboard.writeText(n),console.log("Код скопійовано!")}catch(s){console.error("Помилка копіювання:",s)}};return(n,s)=>(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",Ie,[e.createElementVNode("nav",Le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,i=>(e.openBlock(),e.createElementBlock("button",{key:i.id,onClick:h=>t.value=i.id,class:e.normalizeClass(["py-2 px-1 border-b-2 font-medium text-sm transition-colors",t.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.toDisplayString(i.label),11,je))),128))])]),e.createElementVNode("div",Re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,i=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:i.id},[e.createElementVNode("div",Pe,[e.createElementVNode("div",Me,[e.createElementVNode("span",He,e.toDisplayString(i.label),1),e.createElementVNode("button",{onClick:h=>c(i.content),class:"text-gray-400 hover:text-white transition-colors",title:"Копіювати код"},s[0]||(s[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,We)]),e.createElementVNode("pre",Ue,[e.createElementVNode("code",null,e.toDisplayString(i.content),1)])])])),[[e.vShow,t.value===i.id]])),128))])]))}});N.install=function(o){o.component("DataTable",N),o.component("Column",Y),o.component("Pagination",I),o.component("SelectionInfo",Z),o.component("CodeTabs",ee)},f.ArrayFormat=K,f.BadgeFormat=G,f.CodeTabs=ee,f.Column=Y,f.DataTable=N,f.DateFormat=q,f.LinkFormat=Q,f.NumberFormat=O,f.Pagination=I,f.SelectFormat=X,f.SelectionInfo=Z,f.TextFormat=J,f.default=N,f.formatComponents=A,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengis/table",
3
- "version": "0.0.17",
3
+ "version": "0.0.18",
4
4
  "description": "A Vue 3 data table component with advanced features",
5
5
  "main": "dist/index.mjs",
6
6
  "files": [