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