@opengis/table 0.0.14 → 0.0.16

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