@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 +270 -255
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
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
|
|
2
|
-
const
|
|
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,
|
|
14
|
+
return (c, l) => (o(), u("span", null, h(e.value), 1));
|
|
15
15
|
}
|
|
16
|
-
}),
|
|
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,
|
|
33
|
+
return (c, l) => (o(), u("span", null, h(e.value), 1));
|
|
34
34
|
}
|
|
35
|
-
}),
|
|
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((
|
|
45
|
-
return (
|
|
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
|
-
}),
|
|
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
|
|
58
|
-
return
|
|
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(
|
|
61
|
-
const _ = parseInt(
|
|
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
|
|
65
|
-
const
|
|
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
|
-
...
|
|
71
|
+
...n,
|
|
72
72
|
backgroundColor: c(a.value.color, 0.1),
|
|
73
73
|
color: c(a.value.color, 0.8)
|
|
74
|
-
} :
|
|
74
|
+
} : n;
|
|
75
75
|
});
|
|
76
|
-
return (
|
|
76
|
+
return (n, i) => (o(), u("span", {
|
|
77
77
|
class: m(["badge", e.value]),
|
|
78
|
-
style:
|
|
79
|
-
}, h(
|
|
78
|
+
style: ge(l.value)
|
|
79
|
+
}, h(n.value?.text || n.value), 7));
|
|
80
80
|
}
|
|
81
|
-
}),
|
|
81
|
+
}), Be = (b, a) => {
|
|
82
82
|
const e = b.__vccOpts || b;
|
|
83
|
-
for (const [c,
|
|
84
|
-
e[c] =
|
|
83
|
+
for (const [c, l] of a)
|
|
84
|
+
e[c] = l;
|
|
85
85
|
return e;
|
|
86
|
-
},
|
|
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 = (
|
|
96
|
-
return (
|
|
97
|
-
(o(!0), u(B, null,
|
|
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
|
-
}),
|
|
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 : ""),
|
|
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:
|
|
121
|
-
class: m(
|
|
120
|
+
target: l.value,
|
|
121
|
+
class: m(n.value),
|
|
122
122
|
onClick: i
|
|
123
|
-
}, h(e.value), 11,
|
|
123
|
+
}, h(e.value), 11, Le)) : (o(), u("button", {
|
|
124
124
|
key: 1,
|
|
125
125
|
type: "button",
|
|
126
|
-
class: m(
|
|
126
|
+
class: m(n.value),
|
|
127
127
|
onClick: i
|
|
128
128
|
}, h(e.value), 3));
|
|
129
129
|
}
|
|
130
|
-
}),
|
|
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((
|
|
140
|
-
return (
|
|
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
|
-
}),
|
|
143
|
-
number:
|
|
144
|
-
date:
|
|
145
|
-
text:
|
|
146
|
-
badge:
|
|
147
|
-
array:
|
|
148
|
-
select:
|
|
149
|
-
link:
|
|
150
|
-
},
|
|
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]),
|
|
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
|
-
}),
|
|
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 &&
|
|
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",
|
|
219
|
+
class: m(["flex items-center justify-between py-3 border-t", l.value.container])
|
|
220
220
|
}, [
|
|
221
|
-
d("div",
|
|
221
|
+
d("div", Me, [
|
|
222
222
|
d("div", {
|
|
223
|
-
class: m(["flex items-center text-sm",
|
|
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] =
|
|
227
|
-
d("span",
|
|
228
|
-
y[3] || (y[3] =
|
|
229
|
-
d("span",
|
|
230
|
-
y[4] || (y[4] =
|
|
231
|
-
d("span",
|
|
232
|
-
y[5] || (y[5] =
|
|
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",
|
|
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 ?
|
|
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,
|
|
260
|
-
d("div",
|
|
261
|
-
(o(!0), u(B, null,
|
|
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,
|
|
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 ?
|
|
271
|
+
k === p.page ? l.value.buttonActive : l.value.button
|
|
272
272
|
])
|
|
273
|
-
}, h(k), 11,
|
|
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 ?
|
|
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,
|
|
298
|
+
], 10, Ge)
|
|
299
299
|
])
|
|
300
300
|
], 2));
|
|
301
301
|
}
|
|
302
|
-
}),
|
|
302
|
+
}), Ke = {
|
|
303
303
|
key: 0,
|
|
304
304
|
class: "text-center py-8"
|
|
305
|
-
},
|
|
305
|
+
}, Qe = { class: "inline-flex items-center space-x-2" }, Xe = {
|
|
306
306
|
key: 2,
|
|
307
307
|
class: "overflow-x-auto"
|
|
308
|
-
},
|
|
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
|
-
},
|
|
311
|
+
}, at = {
|
|
312
312
|
key: 1,
|
|
313
313
|
class: "w-[100px]"
|
|
314
|
-
},
|
|
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: "
|
|
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,
|
|
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 &&
|
|
360
|
+
if (e.sortable && n.value.length > 0) {
|
|
357
361
|
const t = [...e.rows];
|
|
358
|
-
return t.sort((v,
|
|
359
|
-
for (const g of
|
|
362
|
+
return t.sort((v, r) => {
|
|
363
|
+
for (const g of n.value) {
|
|
360
364
|
if (!g.direction)
|
|
361
365
|
return 0;
|
|
362
|
-
const
|
|
363
|
-
if (
|
|
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
|
|
367
|
-
const
|
|
368
|
-
if (
|
|
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
|
-
|
|
376
|
-
|
|
379
|
+
P(() => e.selectedRows, (t) => {
|
|
380
|
+
l.value = t || [];
|
|
377
381
|
});
|
|
378
|
-
const A = (t) =>
|
|
379
|
-
const v =
|
|
380
|
-
v > -1 ?
|
|
381
|
-
},
|
|
382
|
-
|
|
383
|
-
},
|
|
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 =
|
|
389
|
+
const v = n.value.findIndex((g) => g.field === t);
|
|
386
390
|
if (v >= 0) {
|
|
387
|
-
const g =
|
|
388
|
-
g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" &&
|
|
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
|
-
|
|
394
|
+
n.value.unshift({
|
|
391
395
|
field: t,
|
|
392
396
|
direction: "asc"
|
|
393
397
|
});
|
|
394
|
-
const
|
|
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",
|
|
399
|
-
},
|
|
400
|
-
const v =
|
|
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
|
-
},
|
|
417
|
+
}, Q = (t) => e.sortable && t.sortable !== !1, xe = (t) => {
|
|
414
418
|
e.clickable && c("row-click", t);
|
|
415
|
-
},
|
|
416
|
-
const
|
|
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
|
|
424
|
+
const s = {
|
|
421
425
|
name: t.name,
|
|
422
426
|
row: v,
|
|
423
|
-
value:
|
|
427
|
+
value: r
|
|
424
428
|
};
|
|
425
|
-
return g(
|
|
429
|
+
return g(s);
|
|
426
430
|
}
|
|
427
431
|
}
|
|
428
432
|
return ["_data", "_text"].map((g) => {
|
|
429
|
-
const
|
|
430
|
-
return v[
|
|
431
|
-
}).find((g) => g) ||
|
|
432
|
-
},
|
|
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
|
-
|
|
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
|
|
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",
|
|
485
|
-
const g =
|
|
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
|
|
492
|
-
|
|
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
|
|
501
|
-
e.api ?
|
|
502
|
-
},
|
|
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
|
-
|
|
517
|
-
e.api && (e.page && (
|
|
518
|
-
}),
|
|
519
|
-
t && (
|
|
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
|
|
522
|
-
|
|
523
|
-
|
|
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
|
|
526
|
-
const t =
|
|
527
|
-
if (
|
|
528
|
-
const g =
|
|
529
|
-
const x =
|
|
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:
|
|
536
|
+
ua: J,
|
|
533
537
|
// Use header as the display name
|
|
534
538
|
format: x.format || "text",
|
|
535
|
-
slotName:
|
|
539
|
+
slotName: ce ? "body" : void 0,
|
|
536
540
|
...x
|
|
537
541
|
};
|
|
538
|
-
return
|
|
542
|
+
return ce && te.name && (O.value[te.name] = s.children.body), te;
|
|
539
543
|
});
|
|
540
544
|
v.push(...g);
|
|
541
545
|
}
|
|
542
|
-
if (
|
|
543
|
-
const g = [],
|
|
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
|
-
|
|
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
|
-
}),
|
|
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",
|
|
558
|
-
d("div",
|
|
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",
|
|
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:
|
|
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,
|
|
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:
|
|
586
|
-
indeterminate:
|
|
587
|
-
onChange:
|
|
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,
|
|
593
|
+
}, null, 42, Ye)
|
|
590
594
|
], 2)) : j("", !0),
|
|
591
|
-
(o(!0), u(B, null,
|
|
592
|
-
key:
|
|
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
|
-
|
|
595
|
-
|
|
596
|
-
|
|
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
|
-
|
|
605
|
+
U.value.header
|
|
602
606
|
]
|
|
603
607
|
)),
|
|
604
|
-
onClick: (g) =>
|
|
608
|
+
onClick: (g) => Q(r) ? be(r.name) : void 0
|
|
605
609
|
}, [
|
|
606
|
-
d("div",
|
|
607
|
-
d("span", null, h(
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
asc:
|
|
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
|
-
|
|
616
|
+
N(h(he(r.name)), 1)
|
|
613
617
|
])
|
|
614
618
|
])) : j("", !0)
|
|
615
619
|
])
|
|
616
|
-
], 10,
|
|
617
|
-
y.value ? (o(), u("th",
|
|
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,
|
|
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: (
|
|
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,
|
|
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(
|
|
638
|
-
onChange: (
|
|
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,
|
|
644
|
+
}, null, 42, lt)
|
|
641
645
|
], 2)) : j("", !0),
|
|
642
|
-
(o(!0), u(B, null,
|
|
643
|
-
key:
|
|
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
|
-
|
|
648
|
-
|
|
649
|
-
|
|
651
|
+
U.value.cell,
|
|
652
|
+
s.align ? `text-${s.align}` : "",
|
|
653
|
+
le(s)
|
|
650
654
|
])
|
|
651
655
|
}, [
|
|
652
|
-
|
|
656
|
+
s.action && y.value ? (o(), L(q(y.value), {
|
|
653
657
|
key: 0,
|
|
654
|
-
row:
|
|
655
|
-
value:
|
|
656
|
-
}, null, 8, ["row", "value"])) :
|
|
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
|
-
|
|
659
|
-
value:
|
|
660
|
-
|
|
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
|
-
|
|
665
|
-
|
|
666
|
-
}
|
|
666
|
+
row: r,
|
|
667
|
+
value: R(s, r)
|
|
668
|
+
}) : ae(p).array && s.format === "array" ? V(t.$slots, "array", {
|
|
667
669
|
key: 3,
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
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
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
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
|
-
|
|
700
|
+
_e.value && !$.value && !e.loading && !T.value ? (o(), L(me, {
|
|
686
701
|
key: 3,
|
|
687
|
-
page:
|
|
688
|
-
limit:
|
|
689
|
-
total:
|
|
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":
|
|
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
|
-
}),
|
|
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 =
|
|
722
|
-
return
|
|
736
|
+
const a = b, e = pe(), c = Te("registerColumn");
|
|
737
|
+
return fe(() => {
|
|
723
738
|
if (c) {
|
|
724
739
|
const {
|
|
725
|
-
field:
|
|
726
|
-
name:
|
|
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,
|
|
737
|
-
name:
|
|
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:",
|
|
749
|
-
const
|
|
750
|
-
c(
|
|
763
|
+
console.log("Registering column:", M);
|
|
764
|
+
const K = e.body;
|
|
765
|
+
c(M, K);
|
|
751
766
|
}
|
|
752
|
-
}), (
|
|
753
|
-
|
|
767
|
+
}), (l, n) => (o(), u("div", ot, [
|
|
768
|
+
V(l.$slots, "body", { data: {} })
|
|
754
769
|
]));
|
|
755
770
|
}
|
|
756
|
-
}),
|
|
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,
|
|
765
|
-
d("div",
|
|
779
|
+
return (c, l) => (o(), u("div", ut, [
|
|
780
|
+
d("div", ct, " Обрано: " + h(e.value) + " з " + h(c.totalCount) + " записів ", 1)
|
|
766
781
|
]));
|
|
767
782
|
}
|
|
768
|
-
}),
|
|
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 (
|
|
790
|
+
const a = b, e = w(a.defaultTab || a.tabs[0]?.id || ""), c = async (l) => {
|
|
776
791
|
try {
|
|
777
|
-
await navigator.clipboard.writeText(
|
|
778
|
-
} catch (
|
|
779
|
-
console.error("Помилка копіювання:",
|
|
792
|
+
await navigator.clipboard.writeText(l), console.log("Код скопійовано!");
|
|
793
|
+
} catch (n) {
|
|
794
|
+
console.error("Помилка копіювання:", n);
|
|
780
795
|
}
|
|
781
796
|
};
|
|
782
|
-
return (
|
|
783
|
-
d("div",
|
|
784
|
-
d("nav",
|
|
785
|
-
(o(!0), u(B, null,
|
|
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,
|
|
807
|
+
}, h(i.label), 11, ft))), 128))
|
|
793
808
|
])
|
|
794
809
|
]),
|
|
795
|
-
d("div",
|
|
796
|
-
(o(!0), u(B, null,
|
|
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",
|
|
800
|
-
d("div",
|
|
801
|
-
d("span",
|
|
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
|
-
},
|
|
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,
|
|
835
|
+
]), 8, xt)
|
|
821
836
|
]),
|
|
822
|
-
d("pre",
|
|
837
|
+
d("pre", kt, [
|
|
823
838
|
d("code", null, h(i.content), 1)
|
|
824
839
|
])
|
|
825
840
|
])
|
|
826
841
|
])), [
|
|
827
|
-
[
|
|
842
|
+
[Se, e.value === i.id]
|
|
828
843
|
])), 128))
|
|
829
844
|
])
|
|
830
845
|
]));
|
|
831
846
|
}
|
|
832
847
|
});
|
|
833
|
-
|
|
834
|
-
a.component("DataTable",
|
|
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
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
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"}})});
|