adverich-kun-ui 0.1.391 → 0.1.392
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.
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { mergeModels as W, toRefs as
|
|
1
|
+
import { mergeModels as W, toRefs as be, useModel as Ce, ref as v, watch as Q, computed as q, onMounted as Te, createElementBlock as r, openBlock as l, mergeProps as V, createCommentVNode as u, createElementVNode as O, renderSlot as a, createBlock as b, unref as s, normalizeClass as C, withCtx as j, createVNode as T, withDirectives as G, vModelText as Fe, vShow as J, normalizeProps as d, guardReactiveProps as g, Fragment as ke, createSlots as X, renderList as Y, toDisplayString as $e, isRef as Pe, nextTick as Me } from "vue";
|
|
2
2
|
import { isMobile as m } from "../../../../utils/_platform.js";
|
|
3
|
-
import
|
|
3
|
+
import Z from "../../../KunIcon/src/components/KunIcon.vue.js";
|
|
4
4
|
import Ae from "../../../../icons/IconFilter.vue.js";
|
|
5
5
|
import Ie from "../../../../icons/IconSearch.vue.js";
|
|
6
6
|
import Re from "./KunTableHeaders.vue.js";
|
|
7
7
|
import Ee from "./KunTableFooter.vue.js";
|
|
8
8
|
import Be from "./KunTableRows.vue.js";
|
|
9
9
|
import Ve from "./KunTableIterators.vue.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
10
|
+
import Oe from "../../../KunBtn/src/components/KunBtn.vue.js";
|
|
11
|
+
import je from "./KunTableFilter.vue.js";
|
|
12
|
+
import xe from "../composables/useExpand.js";
|
|
13
|
+
import ze from "../composables/useOptions.js";
|
|
14
|
+
import De from "../composables/useSelect.js";
|
|
15
|
+
import He from "../composables/useFilter.js";
|
|
16
|
+
import Ne from "../composables/KunTableProps.js";
|
|
17
17
|
const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key: 0 }, We = { key: 5 }, Qe = {
|
|
18
18
|
key: 1,
|
|
19
19
|
class: "h-full flex justify-center items-center"
|
|
@@ -22,45 +22,45 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
22
22
|
class: "sticky bottom-0 z-10 print:hidden"
|
|
23
23
|
}, Je = "overflow-hidden h-full w-full flex flex-col border border-slate-200 dark:border-slate-800 rounded", Xe = "table-auto w-full h-fit text-sm text-left", ms = {
|
|
24
24
|
__name: "KunTable",
|
|
25
|
-
props: /* @__PURE__ */ W(
|
|
25
|
+
props: /* @__PURE__ */ W(Ne(), {
|
|
26
26
|
selectedItems: { type: Array, default: () => [] },
|
|
27
27
|
selectedItemsModifiers: {}
|
|
28
28
|
}),
|
|
29
29
|
emits: /* @__PURE__ */ W(["update:page", "update:itemsPerPage", "update:sortBy", "update:search", "focusOnSearch"], ["update:selectedItems"]),
|
|
30
|
-
setup(
|
|
31
|
-
const
|
|
32
|
-
headers:
|
|
33
|
-
showExpand:
|
|
34
|
-
showSelect:
|
|
35
|
-
rowClass:
|
|
36
|
-
hideDefaultFooter:
|
|
37
|
-
hideDefaultHeader:
|
|
38
|
-
tableClass:
|
|
39
|
-
wrapperClass:
|
|
40
|
-
pageOptions:
|
|
41
|
-
items:
|
|
42
|
-
searchable:
|
|
43
|
-
debounceTime:
|
|
44
|
-
} =
|
|
30
|
+
setup(x, { emit: _ }) {
|
|
31
|
+
const S = _, p = x, F = be(p), ee = Ce(x, "selectedItems"), {
|
|
32
|
+
headers: z,
|
|
33
|
+
showExpand: k,
|
|
34
|
+
showSelect: $,
|
|
35
|
+
rowClass: D,
|
|
36
|
+
hideDefaultFooter: se,
|
|
37
|
+
hideDefaultHeader: oe,
|
|
38
|
+
tableClass: te,
|
|
39
|
+
wrapperClass: le,
|
|
40
|
+
pageOptions: ae,
|
|
41
|
+
items: ne,
|
|
42
|
+
searchable: H,
|
|
43
|
+
debounceTime: re
|
|
44
|
+
} = F, w = v(p.search);
|
|
45
45
|
Q(() => p.search, (e) => {
|
|
46
46
|
e !== w.value && (w.value = e);
|
|
47
47
|
});
|
|
48
|
-
const { filteredItems:
|
|
48
|
+
const { filteredItems: ie, setSearch: ce, modalFilter: y, applyColumnFilters: ue, clearFilters: de, appliedFilters: pe } = He(F, re);
|
|
49
49
|
Q(w, (e) => {
|
|
50
|
-
|
|
50
|
+
S("update:search", e), ce(e);
|
|
51
51
|
});
|
|
52
|
-
const { options: i, paginatedItems: f, updateSort:
|
|
52
|
+
const { options: i, paginatedItems: f, updateSort: me } = ze(F, S, ie), { isSelected: P, toggleSelect: M, toggleSelectAll: fe, allSelected: he, someSelected: ge } = De(f, ee), { isExpanded: A, toggleExpand: I } = xe(), h = q(() => ({
|
|
53
53
|
items: f.value,
|
|
54
|
-
headers:
|
|
54
|
+
headers: z.value,
|
|
55
55
|
page: i.page,
|
|
56
56
|
itemsPerPage: i.itemsPerPage,
|
|
57
|
-
toggleSelect:
|
|
58
|
-
isSelected:
|
|
59
|
-
toggleExpand:
|
|
60
|
-
isExpanded:
|
|
57
|
+
toggleSelect: M,
|
|
58
|
+
isSelected: P,
|
|
59
|
+
toggleExpand: I,
|
|
60
|
+
isExpanded: A,
|
|
61
61
|
sortBy: i.sortBy,
|
|
62
62
|
hasActions: p.hasActions
|
|
63
|
-
})),
|
|
63
|
+
})), we = [Je, le.value], ye = [Xe, te.value], N = q(() => p.headers.map((e) => {
|
|
64
64
|
var t, c;
|
|
65
65
|
const o = { ...e };
|
|
66
66
|
if ((e.columnType === "function" || e.columnType == "objectFunction" || e.columnType == "simpleFunction") && typeof e.columnFunction == "string") {
|
|
@@ -77,27 +77,25 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
77
77
|
}
|
|
78
78
|
return o;
|
|
79
79
|
}));
|
|
80
|
-
|
|
81
|
-
const K =
|
|
82
|
-
function
|
|
83
|
-
Se()
|
|
84
|
-
F("focusOnSearch", b.value);
|
|
85
|
-
});
|
|
80
|
+
Te(() => L());
|
|
81
|
+
const K = v(null), R = v(!0), E = v(!1);
|
|
82
|
+
function ve() {
|
|
83
|
+
Se();
|
|
86
84
|
}
|
|
87
85
|
function Se() {
|
|
88
|
-
m.value && (U(),
|
|
86
|
+
m.value && (U(), Me(() => {
|
|
89
87
|
K.value.focus();
|
|
90
88
|
}));
|
|
91
89
|
}
|
|
92
90
|
function L() {
|
|
93
|
-
m.value && (B.value = "w-fit",
|
|
91
|
+
m.value && (B.value = "w-fit", R.value = !1, E.value = !0, S("focusOnSearch", !1));
|
|
94
92
|
}
|
|
95
93
|
function U() {
|
|
96
|
-
m.value && (B.value = "w-full border", E.value = !1,
|
|
94
|
+
m.value && (B.value = "w-full border", E.value = !1, R.value = !0, S("focusOnSearch", !0));
|
|
97
95
|
}
|
|
98
|
-
const B =
|
|
99
|
-
return (e, o) => (l(), r("div", V({ class:
|
|
100
|
-
s(
|
|
96
|
+
const B = v("w-full border max-w-sm");
|
|
97
|
+
return (e, o) => (l(), r("div", V({ class: we }, e.$attrs, { style: { "user-select": "text" } }), [
|
|
98
|
+
s(H) || e.filterable || e.$slots.prependSearch || e.$slots.appendSearch ? (l(), r("div", {
|
|
101
99
|
key: 0,
|
|
102
100
|
class: C(["p-2 bg-slate-200 dark:bg-slate-800 print:hidden", {
|
|
103
101
|
"justify-start flex": e.searchPosition === "start",
|
|
@@ -106,16 +104,16 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
106
104
|
}])
|
|
107
105
|
}, [
|
|
108
106
|
a(e.$slots, "prependSearch"),
|
|
109
|
-
e.filterable && e.filters.length ? (l(),
|
|
107
|
+
e.filterable && e.filters.length ? (l(), b(Oe, {
|
|
110
108
|
key: 0,
|
|
111
109
|
class: "h-fit",
|
|
112
|
-
onClick: o[0] || (o[0] = (t) =>
|
|
110
|
+
onClick: o[0] || (o[0] = (t) => y.value = !0),
|
|
113
111
|
rounded: "rounded-full",
|
|
114
112
|
size: "xs",
|
|
115
113
|
bgColor: "bg-green-200 dark:bg-green-800"
|
|
116
114
|
}, {
|
|
117
|
-
default:
|
|
118
|
-
T(
|
|
115
|
+
default: j(() => [
|
|
116
|
+
T(Z, {
|
|
119
117
|
class: "h-fit",
|
|
120
118
|
icon: Ae,
|
|
121
119
|
size: "text-lg"
|
|
@@ -123,11 +121,11 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
123
121
|
]),
|
|
124
122
|
_: 1
|
|
125
123
|
})) : u("", !0),
|
|
126
|
-
s(
|
|
124
|
+
s(H) ? (l(), r("div", {
|
|
127
125
|
key: 1,
|
|
128
126
|
class: C(["rounded flex mx-2", [B.value]])
|
|
129
127
|
}, [
|
|
130
|
-
G(
|
|
128
|
+
G(O("input", {
|
|
131
129
|
"onUpdate:modelValue": o[1] || (o[1] = (t) => w.value = t),
|
|
132
130
|
type: "text",
|
|
133
131
|
placeholder: e.searchPlaceholder,
|
|
@@ -137,19 +135,19 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
137
135
|
onFocus: U,
|
|
138
136
|
onBlur: L
|
|
139
137
|
}, null, 42, Ke), [
|
|
140
|
-
[
|
|
141
|
-
[J,
|
|
138
|
+
[Fe, w.value],
|
|
139
|
+
[J, R.value]
|
|
142
140
|
]),
|
|
143
|
-
G(T(
|
|
141
|
+
G(T(Z, {
|
|
144
142
|
icon: Ie,
|
|
145
|
-
onClick:
|
|
143
|
+
onClick: ve
|
|
146
144
|
}, null, 512), [
|
|
147
145
|
[J, E.value]
|
|
148
146
|
])
|
|
149
147
|
], 2)) : u("", !0),
|
|
150
148
|
a(e.$slots, "appendSearch")
|
|
151
149
|
], 2)) : u("", !0),
|
|
152
|
-
|
|
150
|
+
O("div", Le, [
|
|
153
151
|
s(f).length ? (l(), r("table", {
|
|
154
152
|
key: 0,
|
|
155
153
|
class: C(ye)
|
|
@@ -157,70 +155,70 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
157
155
|
e.$slots.colgroup && !s(m) ? (l(), r("colgroup", Ue, [
|
|
158
156
|
a(e.$slots, "colgroup", d(g(h.value)))
|
|
159
157
|
])) : u("", !0),
|
|
160
|
-
!s(
|
|
158
|
+
!s(oe) && !s(m) ? (l(), b(Re, {
|
|
161
159
|
key: 1,
|
|
162
|
-
headers: s(
|
|
160
|
+
headers: s(z),
|
|
163
161
|
"sort-by": s(i).sortBy,
|
|
164
|
-
"show-select": s(
|
|
165
|
-
"show-expand": s(
|
|
166
|
-
"all-selected": s(
|
|
167
|
-
"some-selected": s(
|
|
162
|
+
"show-select": s($),
|
|
163
|
+
"show-expand": s(k),
|
|
164
|
+
"all-selected": s(he),
|
|
165
|
+
"some-selected": s(ge),
|
|
168
166
|
"thead-class": e.theadClass,
|
|
169
167
|
"tr-class": e.trClass,
|
|
170
168
|
"th-class": e.thClass,
|
|
171
169
|
"has-actions": e.hasActions,
|
|
172
170
|
"action-label": e.actionLabel,
|
|
173
|
-
onSort: s(
|
|
174
|
-
onToggleSelectAll: s(
|
|
171
|
+
onSort: s(me),
|
|
172
|
+
onToggleSelectAll: s(fe),
|
|
175
173
|
customHeaders: e.customSlots
|
|
176
174
|
}, null, 8, ["headers", "sort-by", "show-select", "show-expand", "all-selected", "some-selected", "thead-class", "tr-class", "th-class", "has-actions", "action-label", "onSort", "onToggleSelectAll", "customHeaders"])) : a(e.$slots, "thead", d(V({ key: 2 }, h.value))),
|
|
177
|
-
s(m) ? (l(),
|
|
175
|
+
s(m) ? (l(), b(Ve, {
|
|
178
176
|
key: 4,
|
|
179
177
|
items: s(f),
|
|
180
|
-
headers:
|
|
181
|
-
"row-class": s(
|
|
178
|
+
headers: N.value,
|
|
179
|
+
"row-class": s(D),
|
|
182
180
|
"row-class-condition": e.rowClassCondition,
|
|
183
|
-
"is-selected": s(
|
|
184
|
-
"is-expanded": s(
|
|
185
|
-
"show-select": s(
|
|
186
|
-
"show-expand": s(
|
|
181
|
+
"is-selected": s(P),
|
|
182
|
+
"is-expanded": s(A),
|
|
183
|
+
"show-select": s($),
|
|
184
|
+
"show-expand": s(k),
|
|
187
185
|
"has-actions": e.hasActions,
|
|
188
186
|
"action-loading-map": e.actionLoadingMap,
|
|
189
|
-
onToggleExpand: s(
|
|
190
|
-
onToggleSelect: s(
|
|
187
|
+
onToggleExpand: s(I),
|
|
188
|
+
onToggleSelect: s(M),
|
|
191
189
|
customSlots: e.customSlots
|
|
192
190
|
}, X({ _: 2 }, [
|
|
193
191
|
Y(e.$slots, (t, c) => ({
|
|
194
192
|
name: c,
|
|
195
|
-
fn:
|
|
193
|
+
fn: j((n) => [
|
|
196
194
|
a(e.$slots, c, d(g(n)))
|
|
197
195
|
])
|
|
198
196
|
}))
|
|
199
|
-
]), 1032, ["items", "headers", "row-class", "row-class-condition", "is-selected", "is-expanded", "show-select", "show-expand", "has-actions", "action-loading-map", "onToggleExpand", "onToggleSelect", "customSlots"])) : (l(), r(
|
|
197
|
+
]), 1032, ["items", "headers", "row-class", "row-class-condition", "is-selected", "is-expanded", "show-select", "show-expand", "has-actions", "action-loading-map", "onToggleExpand", "onToggleSelect", "customSlots"])) : (l(), r(ke, { key: 3 }, [
|
|
200
198
|
a(e.$slots, "body.prepend", d(g(h.value))),
|
|
201
199
|
T(Be, {
|
|
202
200
|
items: s(f),
|
|
203
|
-
headers:
|
|
201
|
+
headers: N.value,
|
|
204
202
|
"tbody-class": e.tbodyClass,
|
|
205
|
-
"row-class": s(
|
|
203
|
+
"row-class": s(D),
|
|
206
204
|
"row-class-condition": e.rowClassCondition,
|
|
207
205
|
"tr-class": e.trClass,
|
|
208
206
|
"td-class": e.tdClass,
|
|
209
207
|
"selected-class": e.selectedClass,
|
|
210
208
|
"striped-class": e.stripedClass,
|
|
211
|
-
"is-selected": s(
|
|
212
|
-
"is-expanded": s(
|
|
213
|
-
"show-select": s(
|
|
214
|
-
"show-expand": s(
|
|
209
|
+
"is-selected": s(P),
|
|
210
|
+
"is-expanded": s(A),
|
|
211
|
+
"show-select": s($),
|
|
212
|
+
"show-expand": s(k),
|
|
215
213
|
"has-actions": e.hasActions,
|
|
216
214
|
"action-loading-map": e.actionLoadingMap,
|
|
217
|
-
onToggleExpand: s(
|
|
218
|
-
onToggleSelect: s(
|
|
215
|
+
onToggleExpand: s(I),
|
|
216
|
+
onToggleSelect: s(M),
|
|
219
217
|
customSlots: e.customSlots
|
|
220
218
|
}, X({ _: 2 }, [
|
|
221
219
|
Y(e.$slots, (t, c) => ({
|
|
222
220
|
name: c,
|
|
223
|
-
fn:
|
|
221
|
+
fn: j((n) => [
|
|
224
222
|
a(e.$slots, c, d(g(n)))
|
|
225
223
|
])
|
|
226
224
|
}))
|
|
@@ -232,27 +230,27 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key:
|
|
|
232
230
|
])) : u("", !0)
|
|
233
231
|
])) : u("", !0),
|
|
234
232
|
s(f).length ? u("", !0) : (l(), r("div", Qe, [
|
|
235
|
-
|
|
233
|
+
O("div", qe, $e(e.noDataText), 1)
|
|
236
234
|
]))
|
|
237
235
|
]),
|
|
238
|
-
s(
|
|
236
|
+
s(se) ? a(e.$slots, "footer", d(V({ key: 2 }, h.value))) : (l(), r("div", Ge, [
|
|
239
237
|
T(Ee, {
|
|
240
|
-
"items-length": s(
|
|
238
|
+
"items-length": s(ne).length,
|
|
241
239
|
"items-per-page": s(i).itemsPerPage,
|
|
242
240
|
"current-page": s(i).page,
|
|
243
|
-
"page-options": s(
|
|
241
|
+
"page-options": s(ae),
|
|
244
242
|
"onUpdate:itemsPerPage": o[2] || (o[2] = (t) => s(i).itemsPerPage = t),
|
|
245
243
|
"onUpdate:page": o[3] || (o[3] = (t) => s(i).page = t)
|
|
246
244
|
}, null, 8, ["items-length", "items-per-page", "current-page", "page-options"])
|
|
247
245
|
])),
|
|
248
|
-
e.filterable && s(
|
|
246
|
+
e.filterable && s(y) ? (l(), b(je, {
|
|
249
247
|
key: 3,
|
|
250
248
|
filters: e.filters,
|
|
251
|
-
modelValue: s(
|
|
252
|
-
"onUpdate:modelValue": o[4] || (o[4] = (t) =>
|
|
253
|
-
onApplyFilters: s(
|
|
254
|
-
onClearFilters: s(
|
|
255
|
-
activeFilters: s(
|
|
249
|
+
modelValue: s(y),
|
|
250
|
+
"onUpdate:modelValue": o[4] || (o[4] = (t) => Pe(y) ? y.value = t : null),
|
|
251
|
+
onApplyFilters: s(ue),
|
|
252
|
+
onClearFilters: s(de),
|
|
253
|
+
activeFilters: s(pe).byColumn
|
|
256
254
|
}, null, 8, ["filters", "modelValue", "onApplyFilters", "onClearFilters", "activeFilters"])) : u("", !0)
|
|
257
255
|
], 16));
|
|
258
256
|
}
|