@opengis/table 0.0.17 → 0.0.19
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 +283 -270
- 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 v, createTextVNode as N, ref as w, useSlots as pe, watch as L, onMounted as fe, provide as $e, createCommentVNode as j, createBlock as J, renderSlot as P, resolveDynamicComponent as te, 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
|
-
|
|
222
|
-
|
|
223
|
-
class: m(["flex items-center text-sm",
|
|
221
|
+
v("div", Me, [
|
|
222
|
+
v("div", {
|
|
223
|
+
class: m(["flex items-center text-sm", l.value.text, c.value.text])
|
|
224
224
|
}, [
|
|
225
|
-
|
|
226
|
-
y[2] || (y[2] =
|
|
227
|
-
|
|
228
|
-
y[3] || (y[3] =
|
|
229
|
-
|
|
230
|
-
y[4] || (y[4] =
|
|
231
|
-
|
|
232
|
-
y[5] || (y[5] =
|
|
225
|
+
v("span", null, [
|
|
226
|
+
y[2] || (y[2] = N(" Показано ", -1)),
|
|
227
|
+
v("span", Ee, h(_.value), 1),
|
|
228
|
+
y[3] || (y[3] = N(" до ", -1)),
|
|
229
|
+
v("span", He, h($.value), 1),
|
|
230
|
+
y[4] || (y[4] = N(" з ", -1)),
|
|
231
|
+
v("span", We, h(p.total), 1),
|
|
232
|
+
y[5] || (y[5] = N(" результатів ", -1))
|
|
233
233
|
])
|
|
234
234
|
], 2)
|
|
235
235
|
]),
|
|
236
|
-
|
|
237
|
-
|
|
236
|
+
v("div", Ue, [
|
|
237
|
+
v("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", {
|
|
@@ -249,37 +249,37 @@ const Se = /* @__PURE__ */ S({
|
|
|
249
249
|
stroke: "currentColor",
|
|
250
250
|
viewBox: "0 0 24 24"
|
|
251
251
|
}, y[6] || (y[6] = [
|
|
252
|
-
|
|
252
|
+
v("path", {
|
|
253
253
|
"stroke-linecap": "round",
|
|
254
254
|
"stroke-linejoin": "round",
|
|
255
255
|
"stroke-width": "2",
|
|
256
256
|
d: "M15 19l-7-7 7-7"
|
|
257
257
|
}, null, -1)
|
|
258
258
|
]), 2))
|
|
259
|
-
], 10,
|
|
260
|
-
|
|
261
|
-
(o(!0), u(B, null,
|
|
259
|
+
], 10, Oe),
|
|
260
|
+
v("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
|
+
v("button", {
|
|
277
277
|
onClick: y[1] || (y[1] = (k) => D(p.page + 1)),
|
|
278
278
|
disabled: p.page >= i.value,
|
|
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", {
|
|
@@ -288,30 +288,33 @@ const Se = /* @__PURE__ */ S({
|
|
|
288
288
|
stroke: "currentColor",
|
|
289
289
|
viewBox: "0 0 24 24"
|
|
290
290
|
}, y[7] || (y[7] = [
|
|
291
|
-
|
|
291
|
+
v("path", {
|
|
292
292
|
"stroke-linecap": "round",
|
|
293
293
|
"stroke-linejoin": "round",
|
|
294
294
|
"stroke-width": "2",
|
|
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,17 +357,17 @@ 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((
|
|
359
|
-
for (const g of
|
|
362
|
+
return t.sort((d, r) => {
|
|
363
|
+
for (const g of n.value) {
|
|
360
364
|
if (!g.direction)
|
|
361
365
|
return 0;
|
|
362
|
-
const
|
|
363
|
-
if (
|
|
366
|
+
const s = d[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
|
|
370
|
+
typeof s == "string" && typeof x == "string" ? I = s.localeCompare(x) : s < x ? I = -1 : s > x ? I = 1 : I = 0;
|
|
367
371
|
const O = g.direction === "desc" ? -I : I;
|
|
368
372
|
if (O !== 0) return O;
|
|
369
373
|
}
|
|
@@ -372,35 +376,35 @@ const Se = /* @__PURE__ */ S({
|
|
|
372
376
|
}
|
|
373
377
|
return e.rows;
|
|
374
378
|
});
|
|
375
|
-
|
|
376
|
-
|
|
379
|
+
L(() => e.selectedRows, (t) => {
|
|
380
|
+
l.value = t || [];
|
|
377
381
|
});
|
|
378
|
-
const A = (t) =>
|
|
379
|
-
const
|
|
380
|
-
|
|
381
|
-
}, q = f(() => F.value.length > 0 &&
|
|
382
|
-
q.value ?
|
|
383
|
-
},
|
|
382
|
+
const A = (t) => l.value.some((d) => d === t), re = (t) => {
|
|
383
|
+
const d = l.value.findIndex((r) => r === t);
|
|
384
|
+
d > -1 ? l.value.splice(d, 1) : l.value.push(t), c("update:selectedRows", [...l.value]);
|
|
385
|
+
}, q = f(() => F.value.length > 0 && l.value.length === F.value.length), V = f(() => l.value.length > 0 && l.value.length < F.value.length), G = () => {
|
|
386
|
+
q.value ? l.value = [] : l.value = [...F.value], c("update:selectedRows", [...l.value]);
|
|
387
|
+
}, be = (t) => {
|
|
384
388
|
if (!e.sortable) return;
|
|
385
|
-
const
|
|
386
|
-
if (
|
|
387
|
-
const g =
|
|
388
|
-
g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" &&
|
|
389
|
+
const d = n.value.findIndex((g) => g.field === t);
|
|
390
|
+
if (d >= 0) {
|
|
391
|
+
const g = n.value[d];
|
|
392
|
+
g.direction === "asc" ? g.direction = "desc" : g.direction === "desc" && n.value.splice(d, 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
|
|
401
|
-
if (!
|
|
402
|
+
c("sort", r), e.api && H();
|
|
403
|
+
}, ye = (t) => n.value.find((r) => r.field === t)?.direction === "asc", he = (t) => {
|
|
404
|
+
const d = n.value.find((r) => r.field === t);
|
|
405
|
+
if (!d)
|
|
402
406
|
return "↑↓";
|
|
403
|
-
switch (
|
|
407
|
+
switch (d.direction) {
|
|
404
408
|
case "asc":
|
|
405
409
|
return "↑";
|
|
406
410
|
// Up arrow for ascending
|
|
@@ -410,26 +414,26 @@ const Se = /* @__PURE__ */ S({
|
|
|
410
414
|
default:
|
|
411
415
|
return "↕️";
|
|
412
416
|
}
|
|
413
|
-
}, K = (t) => e.sortable && t.sortable !== !1,
|
|
417
|
+
}, K = (t) => e.sortable && t.sortable !== !1, xe = (t) => {
|
|
414
418
|
e.clickable && c("row-click", t);
|
|
415
|
-
},
|
|
416
|
-
const
|
|
419
|
+
}, R = (t, d) => {
|
|
420
|
+
const r = d[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
|
-
row:
|
|
423
|
-
value:
|
|
426
|
+
row: d,
|
|
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
|
|
431
|
-
}).find((g) => g) ||
|
|
432
|
-
},
|
|
433
|
+
const s = `${t.name}${g}`;
|
|
434
|
+
return d[s] ? d[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]` : "" : "", Q = w(e.page), se = w(e.limit), X = w(e.total), M = w(1), Y = w(10), E = w(0), ne = f(() => e.api ? M.value : Q.value), oe = f(() => e.api ? Y.value : se.value), ie = f(() => e.api ? E.value : X.value), C = f(() => {
|
|
433
437
|
const { theme: t } = e;
|
|
434
438
|
return t === "dark" ? {
|
|
435
439
|
container: "dark",
|
|
@@ -469,11 +473,11 @@ 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
|
-
|
|
476
|
+
L(() => e.page, (t) => {
|
|
473
477
|
Q.value = t;
|
|
474
|
-
}),
|
|
475
|
-
|
|
476
|
-
}),
|
|
478
|
+
}), L(() => e.limit, (t) => {
|
|
479
|
+
se.value = t;
|
|
480
|
+
}), L(() => e.total, (t) => {
|
|
477
481
|
X.value = t;
|
|
478
482
|
});
|
|
479
483
|
async function H() {
|
|
@@ -481,15 +485,15 @@ const Se = /* @__PURE__ */ S({
|
|
|
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
|
-
const
|
|
489
|
-
if (!
|
|
490
|
-
throw new Error(`HTTP error! status: ${
|
|
491
|
-
const
|
|
492
|
-
|
|
492
|
+
const d = await fetch(t.toString());
|
|
493
|
+
if (!d.ok)
|
|
494
|
+
throw new Error(`HTTP error! status: ${d.status}`);
|
|
495
|
+
const r = await d.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 ? E.value = r.total : X.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
|
|
504
|
+
const ke = (t) => {
|
|
501
505
|
e.api ? M.value = t : (Q.value = t, c("update:page", t)), e.api && H();
|
|
502
|
-
},
|
|
506
|
+
}, _e = f(() => e.showPagination && ie.value > 0), W = f(() => ({
|
|
503
507
|
small: {
|
|
504
508
|
header: "px-3 py-2 text-xs",
|
|
505
509
|
cell: "px-3 py-2 text-xs"
|
|
@@ -513,87 +517,87 @@ const Se = /* @__PURE__ */ S({
|
|
|
513
517
|
cell: "px-8 py-6 text-base"
|
|
514
518
|
}
|
|
515
519
|
})[e.size]);
|
|
516
|
-
|
|
520
|
+
fe(() => {
|
|
517
521
|
e.api && (e.page && (M.value = e.page), e.limit && (Y.value = e.limit), e.total && (E.value = e.total), H());
|
|
518
|
-
}),
|
|
522
|
+
}), L(() => e.api, (t) => {
|
|
519
523
|
t && (M.value = e.page || 1, Y.value = e.limit || 10, E.value = e.total || 0, H());
|
|
520
524
|
});
|
|
521
|
-
const
|
|
522
|
-
|
|
523
|
-
Z.value.push(t),
|
|
525
|
+
const we = f(() => e.api ? _.value : e.columns), Z = w([]), U = w({});
|
|
526
|
+
$e("registerColumn", (t, d) => {
|
|
527
|
+
Z.value.push(t), d && t.slotName && (U.value[t.name] = d);
|
|
524
528
|
});
|
|
525
|
-
const
|
|
526
|
-
const t =
|
|
527
|
-
if (
|
|
528
|
-
const g =
|
|
529
|
-
const x =
|
|
529
|
+
const ue = f(() => {
|
|
530
|
+
const t = we.value || [], d = [], 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 || "", O = x.header || x.label || "", ce = s.children && s.children.body, ee = {
|
|
530
534
|
name: I,
|
|
531
535
|
// Use field as the name for data access
|
|
532
536
|
ua: O,
|
|
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 && ee.name && (U.value[ee.name] = s.children.body), ee;
|
|
539
543
|
});
|
|
540
|
-
|
|
544
|
+
d.push(...g);
|
|
541
545
|
}
|
|
542
|
-
if (Z.value.length > 0 &&
|
|
543
|
-
const g = [],
|
|
546
|
+
if (Z.value.length > 0 && d.push(...Z.value), d.length > 0) {
|
|
547
|
+
const g = [], s = new Set(d.map((x) => x.name));
|
|
544
548
|
return t.forEach((x) => {
|
|
545
|
-
|
|
546
|
-
}), g.push(...
|
|
549
|
+
s.has(x.name) || g.push(x);
|
|
550
|
+
}), g.push(...d), console.log("Combined columns:", {
|
|
547
551
|
default: t.length,
|
|
548
|
-
custom:
|
|
552
|
+
custom: d.length,
|
|
549
553
|
combined: g.length
|
|
550
554
|
}), g;
|
|
551
555
|
}
|
|
552
556
|
return t.length > 0 ? (console.log("Using default columns:", t.length), t) : [];
|
|
553
|
-
}),
|
|
554
|
-
return (t,
|
|
557
|
+
}), Ce = (t = "text") => de[t.toLowerCase()] || de.text;
|
|
558
|
+
return (t, d) => (o(), u("div", {
|
|
555
559
|
class: m(["w-full", C.value.container])
|
|
556
560
|
}, [
|
|
557
|
-
$.value || e.loading ? (o(), u("div",
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
+
$.value || e.loading ? (o(), u("div", Ke, [
|
|
562
|
+
v("div", Qe, [
|
|
563
|
+
d[0] || (d[0] = v("div", { class: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" }, null, -1)),
|
|
564
|
+
v("span", {
|
|
561
565
|
class: m(C.value.loading)
|
|
562
566
|
}, "Loading...", 2)
|
|
563
567
|
])
|
|
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",
|
|
568
|
-
|
|
571
|
+
}, h(T.value), 3)) : !e.loading && F.value.length > 0 ? (o(), u("div", Xe, [
|
|
572
|
+
v("div", {
|
|
569
573
|
class: m(t.classWrapper ? t.classWrapper : "relative w-full overflow-auto")
|
|
570
574
|
}, [
|
|
571
|
-
|
|
575
|
+
v("table", {
|
|
572
576
|
class: m(t.classTable),
|
|
573
|
-
style:
|
|
577
|
+
style: ge(t.tableStyle)
|
|
574
578
|
}, [
|
|
575
|
-
|
|
576
|
-
class: m(C.value.thead)
|
|
579
|
+
v("thead", {
|
|
580
|
+
class: m(t.classThead || C.value.thead)
|
|
577
581
|
}, [
|
|
578
|
-
|
|
582
|
+
v("tr", null, [
|
|
579
583
|
t.selectable ? (o(), u("th", {
|
|
580
584
|
key: 0,
|
|
581
585
|
class: m(["text-left font-medium uppercase tracking-wider", C.value.th, W.value.header, e.classTh, "w-12"])
|
|
582
586
|
}, [
|
|
583
|
-
|
|
587
|
+
v("input", {
|
|
584
588
|
type: "checkbox",
|
|
585
589
|
checked: q.value,
|
|
586
|
-
indeterminate:
|
|
590
|
+
indeterminate: V.value,
|
|
587
591
|
onChange: G,
|
|
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
|
-
K(
|
|
596
|
-
|
|
598
|
+
r.align ? `text-${r.align}` : "",
|
|
599
|
+
K(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",
|
|
@@ -601,95 +605,104 @@ const Se = /* @__PURE__ */ S({
|
|
|
601
605
|
W.value.header
|
|
602
606
|
]
|
|
603
607
|
)),
|
|
604
|
-
onClick: (g) => K(
|
|
608
|
+
onClick: (g) => K(r) ? be(r.name) : void 0
|
|
605
609
|
}, [
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
K(
|
|
609
|
-
|
|
610
|
-
asc:
|
|
610
|
+
v("div", et, [
|
|
611
|
+
v("span", null, h(r.ua || r.header || r.name), 1),
|
|
612
|
+
K(r) ? (o(), u("span", tt, [
|
|
613
|
+
P(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
|
+
v("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
637
|
class: m(["whitespace-nowrap", C.value.td, W.value.cell, e.classTd, "w-12"])
|
|
634
638
|
}, [
|
|
635
|
-
|
|
639
|
+
v("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
651
|
W.value.cell,
|
|
648
|
-
|
|
649
|
-
|
|
652
|
+
s.align ? `text-${s.align}` : "",
|
|
653
|
+
le(s)
|
|
650
654
|
])
|
|
651
655
|
}, [
|
|
652
|
-
|
|
656
|
+
s.action && y.value ? (o(), J(te(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" ? P(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" ? P(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" ? P(t.$slots, "array", {
|
|
667
669
|
key: 3,
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
670
|
+
row: r,
|
|
671
|
+
value: R(s, r)
|
|
672
|
+
}) : s.slotName && U.value[s.name] ? (o(), J(te(U.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(), J(te(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
|
-
}, null, 8, ["row"])) : j("", !0)
|
|
679
|
-
])
|
|
680
|
-
], 10, at))), 128))
|
|
690
|
+
y.value ? (o(), u("td", nt, [
|
|
691
|
+
P(t.$slots, "action", { row: r })
|
|
692
|
+
])) : j("", !0)
|
|
693
|
+
], 10, rt))), 128))
|
|
681
694
|
], 2)
|
|
682
695
|
], 6)
|
|
683
696
|
], 2)
|
|
684
697
|
])) : j("", !0),
|
|
685
|
-
|
|
698
|
+
_e.value && !$.value && !e.loading && !T.value ? (o(), J(me, {
|
|
686
699
|
key: 3,
|
|
687
|
-
page:
|
|
688
|
-
limit:
|
|
689
|
-
total:
|
|
700
|
+
page: ne.value,
|
|
701
|
+
limit: oe.value,
|
|
702
|
+
total: ie.value,
|
|
690
703
|
theme: e.theme,
|
|
691
704
|
size: e.size,
|
|
692
|
-
"onUpdate:page":
|
|
705
|
+
"onUpdate:page": ke
|
|
693
706
|
}, null, 8, ["page", "limit", "total", "theme", "size"])) : j("", !0),
|
|
694
707
|
!$.value && !e.loading && !T.value && F.value.length === 0 ? (o(), u("div", {
|
|
695
708
|
key: 4,
|
|
@@ -697,7 +710,7 @@ const Se = /* @__PURE__ */ S({
|
|
|
697
710
|
}, " Дані відсутні ", 2)) : j("", !0)
|
|
698
711
|
], 2));
|
|
699
712
|
}
|
|
700
|
-
}),
|
|
713
|
+
}), ot = { style: { display: "none" } }, it = /* @__PURE__ */ S({
|
|
701
714
|
name: "Column",
|
|
702
715
|
__name: "Column",
|
|
703
716
|
props: {
|
|
@@ -718,12 +731,12 @@ const Se = /* @__PURE__ */ S({
|
|
|
718
731
|
suffix: {}
|
|
719
732
|
},
|
|
720
733
|
setup(b) {
|
|
721
|
-
const a = b, e =
|
|
722
|
-
return
|
|
734
|
+
const a = b, e = pe(), c = Te("registerColumn");
|
|
735
|
+
return fe(() => {
|
|
723
736
|
if (c) {
|
|
724
737
|
const {
|
|
725
|
-
field:
|
|
726
|
-
name:
|
|
738
|
+
field: l,
|
|
739
|
+
name: n,
|
|
727
740
|
header: i,
|
|
728
741
|
label: _,
|
|
729
742
|
format: $,
|
|
@@ -733,8 +746,8 @@ const Se = /* @__PURE__ */ S({
|
|
|
733
746
|
getCellData: y,
|
|
734
747
|
suffix: k,
|
|
735
748
|
...F
|
|
736
|
-
} = a,
|
|
737
|
-
name:
|
|
749
|
+
} = a, V = {
|
|
750
|
+
name: l || n || "",
|
|
738
751
|
ua: i || _ || "",
|
|
739
752
|
format: $ || "text",
|
|
740
753
|
slotName: T || (e.body ? "body" : void 0),
|
|
@@ -745,15 +758,15 @@ const Se = /* @__PURE__ */ S({
|
|
|
745
758
|
suffix: k,
|
|
746
759
|
...F
|
|
747
760
|
};
|
|
748
|
-
console.log("Registering column:",
|
|
761
|
+
console.log("Registering column:", V);
|
|
749
762
|
const G = e.body;
|
|
750
|
-
c(
|
|
763
|
+
c(V, G);
|
|
751
764
|
}
|
|
752
|
-
}), (
|
|
753
|
-
|
|
765
|
+
}), (l, n) => (o(), u("div", ot, [
|
|
766
|
+
P(l.$slots, "body", { data: {} })
|
|
754
767
|
]));
|
|
755
768
|
}
|
|
756
|
-
}),
|
|
769
|
+
}), ut = { class: "mt-4" }, ct = { class: "text-sm text-gray-600 dark:text-gray-300" }, dt = /* @__PURE__ */ S({
|
|
757
770
|
__name: "SelectionInfo",
|
|
758
771
|
props: {
|
|
759
772
|
selectedRows: {},
|
|
@@ -761,91 +774,91 @@ const Se = /* @__PURE__ */ S({
|
|
|
761
774
|
},
|
|
762
775
|
setup(b) {
|
|
763
776
|
const a = b, e = f(() => a.selectedRows.length);
|
|
764
|
-
return (c,
|
|
765
|
-
|
|
777
|
+
return (c, l) => (o(), u("div", ut, [
|
|
778
|
+
v("div", ct, " Обрано: " + h(e.value) + " з " + h(c.totalCount) + " записів ", 1)
|
|
766
779
|
]));
|
|
767
780
|
}
|
|
768
|
-
}),
|
|
781
|
+
}), 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
782
|
__name: "CodeTabs",
|
|
770
783
|
props: {
|
|
771
784
|
tabs: {},
|
|
772
785
|
defaultTab: { default: void 0 }
|
|
773
786
|
},
|
|
774
787
|
setup(b) {
|
|
775
|
-
const a = b, e = w(a.defaultTab || a.tabs[0]?.id || ""), c = async (
|
|
788
|
+
const a = b, e = w(a.defaultTab || a.tabs[0]?.id || ""), c = async (l) => {
|
|
776
789
|
try {
|
|
777
|
-
await navigator.clipboard.writeText(
|
|
778
|
-
} catch (
|
|
779
|
-
console.error("Помилка копіювання:",
|
|
790
|
+
await navigator.clipboard.writeText(l), console.log("Код скопійовано!");
|
|
791
|
+
} catch (n) {
|
|
792
|
+
console.error("Помилка копіювання:", n);
|
|
780
793
|
}
|
|
781
794
|
};
|
|
782
|
-
return (
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
(o(!0), u(B, null,
|
|
795
|
+
return (l, n) => (o(), u("div", vt, [
|
|
796
|
+
v("div", gt, [
|
|
797
|
+
v("nav", pt, [
|
|
798
|
+
(o(!0), u(B, null, z(l.tabs, (i) => (o(), u("button", {
|
|
786
799
|
key: i.id,
|
|
787
800
|
onClick: (_) => e.value = i.id,
|
|
788
801
|
class: m([
|
|
789
802
|
"py-2 px-1 border-b-2 font-medium text-sm transition-colors",
|
|
790
803
|
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
804
|
])
|
|
792
|
-
}, h(i.label), 11,
|
|
805
|
+
}, h(i.label), 11, ft))), 128))
|
|
793
806
|
])
|
|
794
807
|
]),
|
|
795
|
-
|
|
796
|
-
(o(!0), u(B, null,
|
|
808
|
+
v("div", mt, [
|
|
809
|
+
(o(!0), u(B, null, z(l.tabs, (i) => Fe((o(), u("div", {
|
|
797
810
|
key: i.id
|
|
798
811
|
}, [
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
812
|
+
v("div", bt, [
|
|
813
|
+
v("div", yt, [
|
|
814
|
+
v("span", ht, h(i.label), 1),
|
|
815
|
+
v("button", {
|
|
803
816
|
onClick: (_) => c(i.content),
|
|
804
817
|
class: "text-gray-400 hover:text-white transition-colors",
|
|
805
818
|
title: "Копіювати код"
|
|
806
|
-
},
|
|
807
|
-
|
|
819
|
+
}, n[0] || (n[0] = [
|
|
820
|
+
v("svg", {
|
|
808
821
|
class: "w-4 h-4",
|
|
809
822
|
fill: "none",
|
|
810
823
|
stroke: "currentColor",
|
|
811
824
|
viewBox: "0 0 24 24"
|
|
812
825
|
}, [
|
|
813
|
-
|
|
826
|
+
v("path", {
|
|
814
827
|
"stroke-linecap": "round",
|
|
815
828
|
"stroke-linejoin": "round",
|
|
816
829
|
"stroke-width": "2",
|
|
817
830
|
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
831
|
})
|
|
819
832
|
], -1)
|
|
820
|
-
]), 8,
|
|
833
|
+
]), 8, xt)
|
|
821
834
|
]),
|
|
822
|
-
|
|
823
|
-
|
|
835
|
+
v("pre", kt, [
|
|
836
|
+
v("code", null, h(i.content), 1)
|
|
824
837
|
])
|
|
825
838
|
])
|
|
826
839
|
])), [
|
|
827
|
-
[
|
|
840
|
+
[Se, e.value === i.id]
|
|
828
841
|
])), 128))
|
|
829
842
|
])
|
|
830
843
|
]));
|
|
831
844
|
}
|
|
832
845
|
});
|
|
833
|
-
|
|
834
|
-
a.component("DataTable",
|
|
846
|
+
ve.install = function(a) {
|
|
847
|
+
a.component("DataTable", ve), a.component("Column", it), a.component("Pagination", me), a.component("SelectionInfo", dt), a.component("CodeTabs", _t);
|
|
835
848
|
};
|
|
836
849
|
export {
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
850
|
+
Pe as ArrayFormat,
|
|
851
|
+
Re as BadgeFormat,
|
|
852
|
+
_t as CodeTabs,
|
|
853
|
+
it as Column,
|
|
854
|
+
ve as DataTable,
|
|
855
|
+
Ae as DateFormat,
|
|
856
|
+
Ne as LinkFormat,
|
|
857
|
+
De as NumberFormat,
|
|
858
|
+
me as Pagination,
|
|
859
|
+
Ve as SelectFormat,
|
|
860
|
+
dt as SelectionInfo,
|
|
861
|
+
Ie as TextFormat,
|
|
862
|
+
ve as default,
|
|
863
|
+
de as formatComponents
|
|
851
864
|
};
|
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]"},Se=["onClick"],Ve=["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),S=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),V=e.ref(1),H=e.ref(10),D=e.ref(0),le=e.computed(()=>t.api?V.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?V.value=a:(P.value=a,c("update:page",a)),t.api&&T()},Qe=e.computed(()=>t.showPagination&&re.value>0),v=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&&(V.value=t.page),t.limit&&(H.value=t.limit),t.total&&(D.value=t.total),T())}),e.watch(()=>t.api,a=>{a&&(V.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([]),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=[],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&&(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.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,v.value.header,t.classTh,"w-12"])},[e.createElementVNode("input",{type:"checkbox",checked:L.value,indeterminate:S.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,v.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,v.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,Ve)],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,v.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&&z.value[r.name]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(z.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.renderSlot(a.$slots,"action",{row:l})])):e.createCommentVNode("",!0)],10,Se))),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))}}),ve={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,S={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:",S);const j=t.body;c(S,j)}}),(n,s)=>(e.openBlock(),e.createElementBlock("div",ve,[e.renderSlot(n.$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,n)=>(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"},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"}})});
|