@indielayer/ui 1.13.2 → 1.14.0
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/docs/pages/component/accordion/index.vue +1 -1
- package/docs/pages/component/button/index.vue +1 -1
- package/docs/pages/component/checkbox/index.vue +1 -1
- package/docs/pages/component/container/index.vue +1 -1
- package/docs/pages/component/drawer/index.vue +1 -1
- package/docs/pages/component/form/index.vue +1 -1
- package/docs/pages/component/formGroup/index.vue +1 -1
- package/docs/pages/component/icon/index.vue +1 -1
- package/docs/pages/component/notifications/index.vue +1 -1
- package/docs/pages/component/pagination/index.vue +1 -1
- package/docs/pages/component/popover/index.vue +1 -1
- package/docs/pages/component/progress/index.vue +1 -1
- package/docs/pages/component/scroll/index.vue +1 -1
- package/docs/pages/component/skeleton/index.vue +1 -1
- package/docs/pages/component/slider/index.vue +1 -1
- package/docs/pages/component/spacer/index.vue +1 -1
- package/docs/pages/component/spinner/index.vue +1 -1
- package/docs/pages/component/table/index.vue +7 -0
- package/docs/pages/component/table/selectable.vue +67 -0
- package/docs/pages/component/table/usage.vue +1 -4
- package/docs/pages/component/table/virtual.vue +3 -0
- package/docs/pages/component/tag/index.vue +1 -1
- package/docs/pages/component/textarea/index.vue +1 -1
- package/docs/pages/component/toggle/index.vue +1 -1
- package/docs/pages/component/upload/index.vue +1 -1
- package/docs/search/components.json +1 -1
- package/lib/components/button/theme/Button.base.theme.js +21 -21
- package/lib/components/radio/theme/Radio.base.theme.js +24 -24
- package/lib/components/select/Select.vue.js +121 -112
- package/lib/components/table/Table.vue.d.ts +62 -8
- package/lib/components/table/Table.vue.js +273 -219
- package/lib/components/table/TableHeader.vue.js +21 -21
- package/lib/components/table/TableRow.vue.d.ts +4 -0
- package/lib/components/table/TableRow.vue.js +3 -2
- package/lib/components/table/theme/TableRow.base.theme.js +3 -3
- package/lib/composables/useFocusTrap.d.ts +9 -4
- package/lib/composables/useFocusTrap.js +42 -27
- package/lib/index.js +1 -1
- package/lib/index.umd.js +4 -4
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/src/components/button/theme/Button.base.theme.ts +1 -1
- package/src/components/radio/theme/Radio.base.theme.ts +1 -1
- package/src/components/select/Select.vue +20 -5
- package/src/components/table/Table.vue +112 -15
- package/src/components/table/TableHeader.vue +1 -1
- package/src/components/table/TableRow.vue +1 -0
- package/src/components/table/theme/TableRow.base.theme.ts +2 -2
- package/src/composables/useFocusTrap.ts +73 -42
- package/src/version.ts +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useTheme as
|
|
3
|
-
import { useVirtualList as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import { chevronDownIcon as
|
|
13
|
-
const
|
|
1
|
+
import { defineComponent as te, mergeModels as z, useModel as le, computed as C, ref as ae, watch as se, resolveComponent as re, openBlock as r, createElementBlock as u, mergeProps as R, unref as c, renderSlot as f, createElementVNode as g, normalizeStyle as V, normalizeClass as k, createVNode as v, withCtx as p, createBlock as m, withModifiers as M, createCommentVNode as h, Fragment as S, renderList as $, createTextVNode as D, toDisplayString as E } from "vue";
|
|
2
|
+
import { useTheme as ie } from "../../composables/useTheme.js";
|
|
3
|
+
import { useVirtualList as ne } from "../../composables/useVirtualList.js";
|
|
4
|
+
import oe from "./TableHead.vue.js";
|
|
5
|
+
import A from "./TableHeader.vue.js";
|
|
6
|
+
import ue from "./TableBody.js";
|
|
7
|
+
import J from "./TableRow.vue.js";
|
|
8
|
+
import L from "./TableCell.vue.js";
|
|
9
|
+
import de from "../spinner/Spinner.vue.js";
|
|
10
|
+
import ce from "../skeleton/Skeleton.vue.js";
|
|
11
|
+
import pe from "../icon/Icon.vue.js";
|
|
12
|
+
import { chevronDownIcon as fe } from "../../common/icons.js";
|
|
13
|
+
const ve = { key: 1 }, me = { colspan: "999" }, ye = { key: 2 }, ge = { colspan: "999" }, ke = ["onClick"], be = { colspan: "999" }, he = {
|
|
14
14
|
headers: {
|
|
15
15
|
type: Array,
|
|
16
16
|
default: () => []
|
|
@@ -54,11 +54,17 @@ const ie = { key: 1 }, ae = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
|
|
|
54
54
|
type: Number,
|
|
55
55
|
default: 5
|
|
56
56
|
},
|
|
57
|
-
keyProp: String
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
keyProp: String,
|
|
58
|
+
selectable: Boolean,
|
|
59
|
+
singleSelect: Boolean,
|
|
60
|
+
autoClearSelected: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
default: !0
|
|
63
|
+
}
|
|
64
|
+
}, Se = { name: "XTable" }, Te = /* @__PURE__ */ te({
|
|
65
|
+
...Se,
|
|
66
|
+
props: /* @__PURE__ */ z({
|
|
67
|
+
...he,
|
|
62
68
|
items: {
|
|
63
69
|
type: Array,
|
|
64
70
|
default: () => []
|
|
@@ -67,231 +73,279 @@ const ie = { key: 1 }, ae = { colspan: "999" }, re = { key: 2 }, ne = { colspan:
|
|
|
67
73
|
selected: {},
|
|
68
74
|
selectedModifiers: {}
|
|
69
75
|
}),
|
|
70
|
-
emits: /* @__PURE__ */
|
|
71
|
-
setup(
|
|
72
|
-
const
|
|
73
|
-
function
|
|
76
|
+
emits: /* @__PURE__ */ z(["update:sort", "click-row"], ["update:selected"]),
|
|
77
|
+
setup(N, { emit: X }) {
|
|
78
|
+
const l = N, a = le(N, "selected");
|
|
79
|
+
function F(e) {
|
|
74
80
|
try {
|
|
75
81
|
return JSON.parse(JSON.stringify(e));
|
|
76
82
|
} catch {
|
|
77
83
|
return [];
|
|
78
84
|
}
|
|
79
85
|
}
|
|
80
|
-
const
|
|
81
|
-
|
|
86
|
+
const w = C(() => l.items), { list: W, containerProps: q, wrapperProps: G } = ne(
|
|
87
|
+
w,
|
|
82
88
|
{
|
|
83
|
-
disabled: !
|
|
84
|
-
itemHeight:
|
|
85
|
-
topOffset:
|
|
86
|
-
bottomOffset:
|
|
87
|
-
overscan:
|
|
89
|
+
disabled: !l.virtualList,
|
|
90
|
+
itemHeight: l.virtualListItemHeight || 54,
|
|
91
|
+
topOffset: l.virtualListOffsetTop || 0,
|
|
92
|
+
bottomOffset: l.virtualListOffsetBottom || 0,
|
|
93
|
+
overscan: l.virtualListOverscan
|
|
88
94
|
}
|
|
89
|
-
),
|
|
90
|
-
|
|
91
|
-
a.expandable && (y.value = V(e));
|
|
92
|
-
}, { immediate: !0 });
|
|
93
|
-
const J = z;
|
|
94
|
-
function X(e, l) {
|
|
95
|
+
), b = ae([]), x = X;
|
|
96
|
+
function Q(e, s) {
|
|
95
97
|
if (e)
|
|
96
|
-
for (let
|
|
97
|
-
const { 0:
|
|
98
|
-
if (e ===
|
|
99
|
-
return parseInt(
|
|
98
|
+
for (let n = 0; n < s.length; n++) {
|
|
99
|
+
const { 0: t, 1: o } = s[n].split(",");
|
|
100
|
+
if (e === t)
|
|
101
|
+
return parseInt(o) > 0 ? 1 : -1;
|
|
100
102
|
}
|
|
101
103
|
}
|
|
102
|
-
function
|
|
103
|
-
const
|
|
104
|
-
let
|
|
105
|
-
for (let
|
|
106
|
-
const { 0:
|
|
107
|
-
if (
|
|
108
|
-
if (
|
|
109
|
-
|
|
104
|
+
function U(e) {
|
|
105
|
+
const s = l.sort.slice(0);
|
|
106
|
+
let n = !1;
|
|
107
|
+
for (let t = 0; t < s.length; t++) {
|
|
108
|
+
const { 0: o, 1: i } = s[t].split(",");
|
|
109
|
+
if (o === e.value) {
|
|
110
|
+
if (n = !0, i === "-1") {
|
|
111
|
+
s.splice(t, 1, `${e.value},1`);
|
|
110
112
|
break;
|
|
111
|
-
} else if (
|
|
112
|
-
|
|
113
|
+
} else if (i === "1") {
|
|
114
|
+
s.splice(t, 1);
|
|
113
115
|
break;
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
}
|
|
117
|
-
|
|
119
|
+
n || s.push(`${e.value},-1`), x("update:sort", s);
|
|
118
120
|
}
|
|
119
|
-
function
|
|
120
|
-
if (!
|
|
121
|
+
function Y(e, s) {
|
|
122
|
+
if (!s)
|
|
121
123
|
return "";
|
|
122
|
-
const
|
|
123
|
-
return (
|
|
124
|
+
const n = Array.isArray(s) ? s : s.match(/([^[.\]])+/g);
|
|
125
|
+
return (n == null ? void 0 : n.reduce((o, i) => o && o[i], e)) ?? "";
|
|
124
126
|
}
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
127
|
+
const y = C(() => l.selectable ? w.value.map((e, s) => l.keyProp ? e[l.keyProp] : s) : []), H = C(() => !l.selectable || l.singleSelect ? !1 : Array.isArray(a.value) && a.value.length > 0 && y.value.length > 0 && a.value.length === y.value.length), P = C(() => !l.selectable || l.singleSelect ? !1 : Array.isArray(a.value) && a.value.length > 0 && y.value.length > 0 && a.value.length !== y.value.length);
|
|
128
|
+
function O(e) {
|
|
129
|
+
return l.selectable ? l.singleSelect ? a.value === e : Array.isArray(a.value) && a.value.includes(e) : !1;
|
|
130
|
+
}
|
|
131
|
+
function T(e) {
|
|
132
|
+
l.selectable && (l.singleSelect ? a.value = a.value === e ? void 0 : e : (Array.isArray(a.value) || (a.value = []), a.value.includes(e) ? a.value = a.value.filter((s) => s !== e) : a.value = [...a.value, e]));
|
|
133
|
+
}
|
|
134
|
+
function Z() {
|
|
135
|
+
!l.selectable || l.singleSelect || (H.value || P.value ? a.value = [] : a.value = y.value);
|
|
136
|
+
}
|
|
137
|
+
function j(e, s) {
|
|
138
|
+
l.selectable && l.singleSelect && T(l.keyProp ? e[l.keyProp] : s), x("click-row", e, s);
|
|
139
|
+
}
|
|
140
|
+
se(w, (e) => {
|
|
141
|
+
l.expandable && (b.value = F(e)), l.selectable && l.autoClearSelected && (l.singleSelect ? y.value.includes(a.value) || (a.value = void 0) : Array.isArray(a.value) && (a.value = a.value.filter((s) => y.value.includes(s))));
|
|
142
|
+
}, { immediate: !0 });
|
|
143
|
+
const { styles: K, classes: _, className: ee } = ie("Table", {}, l);
|
|
144
|
+
return (e, s) => {
|
|
145
|
+
const n = re("x-checkbox");
|
|
146
|
+
return r(), u("div", R({
|
|
147
|
+
class: [c(ee), c(_).wrapper]
|
|
148
|
+
}, c(q)), [
|
|
149
|
+
f(e.$slots, "title"),
|
|
150
|
+
f(e.$slots, "actions"),
|
|
151
|
+
g("div", R(c(G), {
|
|
152
|
+
class: ["relative", {
|
|
153
|
+
"!h-auto": l.loading
|
|
154
|
+
}]
|
|
155
|
+
}), [
|
|
156
|
+
g("table", {
|
|
157
|
+
style: V(c(K)),
|
|
158
|
+
class: k(c(_).table)
|
|
159
|
+
}, [
|
|
160
|
+
v(oe, { "sticky-header": e.stickyHeader }, {
|
|
161
|
+
default: p(() => [
|
|
162
|
+
l.selectable && !l.singleSelect ? (r(), m(A, {
|
|
163
|
+
key: 0,
|
|
164
|
+
width: "48",
|
|
165
|
+
class: "!px-3 !py-2.5"
|
|
166
|
+
}, {
|
|
167
|
+
default: p(() => [
|
|
168
|
+
v(n, {
|
|
169
|
+
"model-value": H.value || P.value,
|
|
170
|
+
indeterminate: P.value,
|
|
171
|
+
"hide-footer": "",
|
|
172
|
+
"aria-label": "Select all rows",
|
|
173
|
+
"skip-form-registry": "",
|
|
174
|
+
onClick: M(Z, ["prevent"])
|
|
175
|
+
}, null, 8, ["model-value", "indeterminate"])
|
|
176
|
+
]),
|
|
177
|
+
_: 1
|
|
178
|
+
})) : h("", !0),
|
|
179
|
+
e.expandable ? (r(), m(A, {
|
|
180
|
+
key: 1,
|
|
181
|
+
width: "48",
|
|
182
|
+
class: "!p-0"
|
|
183
|
+
})) : h("", !0),
|
|
184
|
+
(r(!0), u(S, null, $(e.headers, (t, o) => (r(), m(A, {
|
|
185
|
+
key: o,
|
|
186
|
+
"text-align": t.align,
|
|
187
|
+
sort: Q(t.value, e.sort),
|
|
188
|
+
sortable: t.sortable,
|
|
189
|
+
width: t.width,
|
|
190
|
+
tooltip: t.tooltip,
|
|
191
|
+
onClick: (i) => t.sortable ? U(t) : null
|
|
192
|
+
}, {
|
|
193
|
+
default: p(() => [
|
|
194
|
+
f(e.$slots, `header-${t.value}`, { header: t }, () => [
|
|
195
|
+
D(E(t.text), 1)
|
|
196
|
+
])
|
|
197
|
+
]),
|
|
198
|
+
_: 2
|
|
199
|
+
}, 1032, ["text-align", "sort", "sortable", "width", "tooltip", "onClick"]))), 128))
|
|
200
|
+
]),
|
|
201
|
+
_: 3
|
|
202
|
+
}, 8, ["sticky-header"]),
|
|
203
|
+
v(c(ue), null, {
|
|
204
|
+
default: p(() => [
|
|
205
|
+
e.loading ? (r(!0), u(S, { key: 0 }, $(Number(e.loadingLines), (t, o) => (r(), m(J, {
|
|
206
|
+
key: o,
|
|
207
|
+
striped: e.striped
|
|
208
|
+
}, {
|
|
209
|
+
default: p(() => [
|
|
210
|
+
(r(!0), u(S, null, $(e.headers, (i, B) => (r(), m(L, {
|
|
211
|
+
key: B,
|
|
212
|
+
"text-align": i.align,
|
|
213
|
+
width: i.width,
|
|
214
|
+
dense: e.dense,
|
|
215
|
+
fixed: e.fixed
|
|
216
|
+
}, {
|
|
217
|
+
default: p(() => [
|
|
218
|
+
f(e.$slots, `loading-${i.value}`, { item: t }, () => [
|
|
219
|
+
v(ce, {
|
|
220
|
+
class: k(["max-w-[60%]", {
|
|
221
|
+
"mx-auto": i.align === "center",
|
|
222
|
+
"ml-auto": i.align === "right"
|
|
223
|
+
}]),
|
|
224
|
+
shape: i.skeletonShape || "line"
|
|
225
|
+
}, null, 8, ["shape", "class"])
|
|
226
|
+
])
|
|
227
|
+
]),
|
|
228
|
+
_: 2
|
|
229
|
+
}, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
|
|
230
|
+
]),
|
|
231
|
+
_: 2
|
|
232
|
+
}, 1032, ["striped"]))), 128)) : e.error ? (r(), u("tr", ve, [
|
|
233
|
+
g("td", me, [
|
|
234
|
+
f(e.$slots, "error")
|
|
159
235
|
])
|
|
160
|
-
]),
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
e.loading ? (o(!0), r(k, { key: 0 }, h(Number(e.loadingLines), (t, i) => (o(), g(T, {
|
|
169
|
-
key: i,
|
|
170
|
-
striped: e.striped
|
|
171
|
-
}, {
|
|
172
|
-
default: c(() => [
|
|
173
|
-
(o(!0), r(k, null, h(e.headers, (s, d) => (o(), g(_, {
|
|
174
|
-
key: d,
|
|
175
|
-
"text-align": s.align,
|
|
176
|
-
width: s.width,
|
|
177
|
-
dense: e.dense,
|
|
178
|
-
fixed: e.fixed
|
|
179
|
-
}, {
|
|
180
|
-
default: c(() => [
|
|
181
|
-
p(e.$slots, `loading-${s.value}`, { item: t }, () => [
|
|
182
|
-
v(se, {
|
|
183
|
-
class: m(["max-w-[60%]", {
|
|
184
|
-
"mx-auto": s.align === "center",
|
|
185
|
-
"ml-auto": s.align === "right"
|
|
186
|
-
}]),
|
|
187
|
-
shape: s.skeletonShape || "line"
|
|
188
|
-
}, null, 8, ["shape", "class"])
|
|
189
|
-
])
|
|
190
|
-
]),
|
|
191
|
-
_: 2
|
|
192
|
-
}, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
|
|
193
|
-
]),
|
|
194
|
-
_: 2
|
|
195
|
-
}, 1032, ["striped"]))), 128)) : e.error ? (o(), r("tr", ie, [
|
|
196
|
-
f("td", ae, [
|
|
197
|
-
p(e.$slots, "error")
|
|
198
|
-
])
|
|
199
|
-
])) : !b.value || b.value.length === 0 ? (o(), r("tr", re, [
|
|
200
|
-
f("td", ne, [
|
|
201
|
-
p(e.$slots, "empty")
|
|
202
|
-
])
|
|
203
|
-
])) : (o(!0), r(k, { key: 3 }, h(n(M), (t, i) => {
|
|
204
|
-
var s, d;
|
|
205
|
-
return o(), r(k, {
|
|
206
|
-
key: e.keyProp ?? i
|
|
207
|
-
}, [
|
|
208
|
-
v(T, {
|
|
209
|
-
pointer: e.pointer,
|
|
210
|
-
striped: e.striped,
|
|
211
|
-
selected: A.value ? L.value === (e.keyProp ? t.data[e.keyProp] : t.index) : void 0,
|
|
212
|
-
onClick: (u) => e.$emit("click-row", t.data, t.index)
|
|
213
|
-
}, {
|
|
214
|
-
default: c(() => [
|
|
215
|
-
e.expandable ? (o(), g(_, {
|
|
216
|
-
key: 0,
|
|
217
|
-
width: "48",
|
|
218
|
-
class: "!p-1"
|
|
219
|
-
}, {
|
|
220
|
-
default: c(() => {
|
|
221
|
-
var u;
|
|
222
|
-
return [
|
|
223
|
-
f("button", {
|
|
224
|
-
type: "button",
|
|
225
|
-
class: m(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
|
|
226
|
-
onClick: (N) => y.value[t.index].__expanded = !y.value[t.index].__expanded
|
|
227
|
-
}, [
|
|
228
|
-
v(oe, {
|
|
229
|
-
icon: n(le),
|
|
230
|
-
size: e.dense ? "xs" : "md",
|
|
231
|
-
class: m(["transition-transform", {
|
|
232
|
-
"rotate-180": (u = y.value[t.index]) == null ? void 0 : u.__expanded
|
|
233
|
-
}])
|
|
234
|
-
}, null, 8, ["icon", "size", "class"])
|
|
235
|
-
], 10, de)
|
|
236
|
-
];
|
|
237
|
-
}),
|
|
238
|
-
_: 2
|
|
239
|
-
}, 1024)) : $("", !0),
|
|
240
|
-
(o(!0), r(k, null, h(e.headers, (u, N) => (o(), g(_, {
|
|
241
|
-
key: N,
|
|
242
|
-
"text-align": u.align,
|
|
243
|
-
truncate: u.truncate,
|
|
244
|
-
width: u.width,
|
|
245
|
-
dense: e.dense,
|
|
246
|
-
style: H([a.virtualList ? {
|
|
247
|
-
height: `${a.virtualListItemHeight}px`,
|
|
248
|
-
maxHeight: `${a.virtualListItemHeight}px`,
|
|
249
|
-
overflow: "hidden",
|
|
250
|
-
whiteSpace: "nowrap"
|
|
251
|
-
} : {}])
|
|
252
|
-
}, {
|
|
253
|
-
default: c(() => [
|
|
254
|
-
p(e.$slots, `item-${u.value}`, {
|
|
255
|
-
item: t.data
|
|
256
|
-
}, () => [
|
|
257
|
-
O(P(W(t.data, u.value)), 1)
|
|
258
|
-
])
|
|
259
|
-
]),
|
|
260
|
-
_: 2
|
|
261
|
-
}, 1032, ["text-align", "truncate", "width", "dense", "style"]))), 128))
|
|
262
|
-
]),
|
|
263
|
-
_: 2
|
|
264
|
-
}, 1032, ["pointer", "striped", "selected", "onClick"]),
|
|
265
|
-
e.expandable ? (o(), r("tr", {
|
|
266
|
-
key: 0,
|
|
267
|
-
class: m({ hidden: !((s = y.value[t.index]) != null && s.__expanded) })
|
|
236
|
+
])) : !w.value || w.value.length === 0 ? (r(), u("tr", ye, [
|
|
237
|
+
g("td", ge, [
|
|
238
|
+
f(e.$slots, "empty")
|
|
239
|
+
])
|
|
240
|
+
])) : (r(!0), u(S, { key: 3 }, $(c(W), (t, o) => {
|
|
241
|
+
var i, B;
|
|
242
|
+
return r(), u(S, {
|
|
243
|
+
key: e.keyProp ? t.data[e.keyProp] : t.index
|
|
268
244
|
}, [
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
245
|
+
v(J, {
|
|
246
|
+
pointer: e.pointer,
|
|
247
|
+
striped: e.striped,
|
|
248
|
+
selected: O(e.keyProp ? t.data[e.keyProp] : t.index),
|
|
249
|
+
"single-select": e.singleSelect,
|
|
250
|
+
onClick: (d) => j(t.data, t.index)
|
|
251
|
+
}, {
|
|
252
|
+
default: p(() => [
|
|
253
|
+
l.selectable && !e.singleSelect ? (r(), m(L, {
|
|
254
|
+
key: 0,
|
|
255
|
+
width: "48"
|
|
256
|
+
}, {
|
|
257
|
+
default: p(() => [
|
|
258
|
+
v(n, {
|
|
259
|
+
"model-value": O(e.keyProp ? t.data[e.keyProp] : t.index),
|
|
260
|
+
"hide-footer": "",
|
|
261
|
+
"aria-label": `Select row ${o + 1}`,
|
|
262
|
+
"skip-form-registry": "",
|
|
263
|
+
onClick: M((d) => T(e.keyProp ? t.data[e.keyProp] : t.index), ["prevent"])
|
|
264
|
+
}, null, 8, ["model-value", "aria-label", "onClick"])
|
|
265
|
+
]),
|
|
266
|
+
_: 2
|
|
267
|
+
}, 1024)) : h("", !0),
|
|
268
|
+
e.expandable ? (r(), m(L, {
|
|
269
|
+
key: 1,
|
|
270
|
+
width: "48",
|
|
271
|
+
class: "!p-1"
|
|
272
|
+
}, {
|
|
273
|
+
default: p(() => {
|
|
274
|
+
var d;
|
|
275
|
+
return [
|
|
276
|
+
g("button", {
|
|
277
|
+
type: "button",
|
|
278
|
+
class: k(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
|
|
279
|
+
onClick: (I) => b.value[t.index].__expanded = !b.value[t.index].__expanded
|
|
280
|
+
}, [
|
|
281
|
+
v(pe, {
|
|
282
|
+
icon: c(fe),
|
|
283
|
+
size: e.dense ? "xs" : "md",
|
|
284
|
+
class: k(["transition-transform", {
|
|
285
|
+
"rotate-180": (d = b.value[t.index]) == null ? void 0 : d.__expanded
|
|
286
|
+
}])
|
|
287
|
+
}, null, 8, ["icon", "size", "class"])
|
|
288
|
+
], 10, ke)
|
|
289
|
+
];
|
|
290
|
+
}),
|
|
291
|
+
_: 2
|
|
292
|
+
}, 1024)) : h("", !0),
|
|
293
|
+
(r(!0), u(S, null, $(e.headers, (d, I) => (r(), m(L, {
|
|
294
|
+
key: I,
|
|
295
|
+
"text-align": d.align,
|
|
296
|
+
truncate: d.truncate,
|
|
297
|
+
width: d.width,
|
|
298
|
+
dense: e.dense,
|
|
299
|
+
style: V([l.virtualList ? {
|
|
300
|
+
height: `${l.virtualListItemHeight}px`,
|
|
301
|
+
maxHeight: `${l.virtualListItemHeight}px`,
|
|
302
|
+
overflow: "hidden",
|
|
303
|
+
whiteSpace: "nowrap"
|
|
304
|
+
} : {}])
|
|
305
|
+
}, {
|
|
306
|
+
default: p(() => [
|
|
307
|
+
f(e.$slots, `item-${d.value}`, {
|
|
308
|
+
item: t.data
|
|
309
|
+
}, () => [
|
|
310
|
+
D(E(Y(t.data, d.value)), 1)
|
|
311
|
+
])
|
|
312
|
+
]),
|
|
313
|
+
_: 2
|
|
314
|
+
}, 1032, ["text-align", "truncate", "width", "dense", "style"]))), 128))
|
|
315
|
+
]),
|
|
316
|
+
_: 2
|
|
317
|
+
}, 1032, ["pointer", "striped", "selected", "single-select", "onClick"]),
|
|
318
|
+
e.expandable ? (r(), u("tr", {
|
|
319
|
+
key: 0,
|
|
320
|
+
class: k({ hidden: !((i = b.value[t.index]) != null && i.__expanded) })
|
|
321
|
+
}, [
|
|
322
|
+
g("td", be, [
|
|
323
|
+
g("div", {
|
|
324
|
+
class: k(["overflow-hidden transition-opacity", [(B = b.value[t.index]) != null && B.__expanded ? "" : "opacity-0 max-h-0"]])
|
|
325
|
+
}, [
|
|
326
|
+
f(e.$slots, "expanded-row", {
|
|
327
|
+
item: t.data
|
|
328
|
+
})
|
|
329
|
+
], 2)
|
|
330
|
+
])
|
|
331
|
+
], 2)) : h("", !0)
|
|
332
|
+
], 64);
|
|
333
|
+
}), 128))
|
|
334
|
+
]),
|
|
335
|
+
_: 3
|
|
336
|
+
})
|
|
337
|
+
], 6),
|
|
338
|
+
e.loading ? (r(), u("div", {
|
|
285
339
|
key: 0,
|
|
286
|
-
class:
|
|
340
|
+
class: k(c(_).loadingWrapper)
|
|
287
341
|
}, [
|
|
288
|
-
v(
|
|
289
|
-
], 2)) :
|
|
290
|
-
],
|
|
291
|
-
], 16)
|
|
292
|
-
|
|
342
|
+
v(de, { size: "lg" })
|
|
343
|
+
], 2)) : h("", !0)
|
|
344
|
+
], 16)
|
|
345
|
+
], 16);
|
|
346
|
+
};
|
|
293
347
|
}
|
|
294
348
|
});
|
|
295
349
|
export {
|
|
296
|
-
|
|
350
|
+
Te as default
|
|
297
351
|
};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { defineComponent as k, openBlock as o, createElementBlock as
|
|
2
|
-
import { useTheme as
|
|
1
|
+
import { defineComponent as k, openBlock as o, createElementBlock as l, normalizeStyle as g, unref as n, normalizeClass as a, createElementVNode as s, renderSlot as v, createBlock as c, createCommentVNode as p, Fragment as u } from "vue";
|
|
2
|
+
import { useTheme as b } from "../../composables/useTheme.js";
|
|
3
3
|
import h from "../tooltip/ToggleTip.vue.js";
|
|
4
4
|
const B = {
|
|
5
5
|
key: 2,
|
|
6
6
|
d: "m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"
|
|
7
|
-
},
|
|
7
|
+
}, d = {
|
|
8
8
|
sort: [1, -1, void 0],
|
|
9
9
|
textAlign: ["left", "center", "right", "justify"]
|
|
10
|
-
},
|
|
10
|
+
}, x = {
|
|
11
11
|
sort: {
|
|
12
12
|
type: Number,
|
|
13
|
-
validator: (
|
|
13
|
+
validator: (r) => d.sort.includes(r)
|
|
14
14
|
},
|
|
15
15
|
sortable: Boolean,
|
|
16
16
|
textAlign: {
|
|
17
17
|
type: String,
|
|
18
18
|
default: "left",
|
|
19
|
-
validator: (
|
|
19
|
+
validator: (r) => d.textAlign.includes(r)
|
|
20
20
|
},
|
|
21
21
|
tooltip: String
|
|
22
|
-
},
|
|
23
|
-
...
|
|
24
|
-
props:
|
|
25
|
-
setup(
|
|
26
|
-
const m =
|
|
27
|
-
return (e, t) => (o(),
|
|
22
|
+
}, C = { name: "XTableHeader", validators: d }, H = /* @__PURE__ */ k({
|
|
23
|
+
...C,
|
|
24
|
+
props: x,
|
|
25
|
+
setup(r) {
|
|
26
|
+
const m = r, { styles: y, classes: i, className: f } = b("TableHeader", {}, m);
|
|
27
|
+
return (e, t) => (o(), l("th", {
|
|
28
28
|
style: g(n(y)),
|
|
29
29
|
class: a([n(f), n(i).th, "group/th"])
|
|
30
30
|
}, [
|
|
@@ -32,16 +32,16 @@ const B = {
|
|
|
32
32
|
class: a(n(i).header)
|
|
33
33
|
}, [
|
|
34
34
|
v(e.$slots, "default"),
|
|
35
|
-
e.tooltip ? (o(),
|
|
35
|
+
e.tooltip ? (o(), c(h, {
|
|
36
36
|
key: 0,
|
|
37
37
|
content: e.tooltip
|
|
38
|
-
}, null, 8, ["content"])) :
|
|
39
|
-
e.sortable ? (o(),
|
|
38
|
+
}, null, 8, ["content"])) : p("", !0),
|
|
39
|
+
e.sortable ? (o(), l("svg", {
|
|
40
40
|
key: 1,
|
|
41
41
|
class: a(["shrink-0", [
|
|
42
42
|
n(i).sortIcon,
|
|
43
43
|
[e.sort && [1, -1].includes(e.sort) ? "" : "invisible group-hover/th:visible"],
|
|
44
|
-
[e.sort !== -1 && e.sort !== 1 ? "text-secondary-400" : "text-primary-700"]
|
|
44
|
+
[e.sort !== -1 && e.sort !== 1 ? "text-secondary-400 dark:text-secondary-500" : "text-primary-700 dark:text-primary-400"]
|
|
45
45
|
]]),
|
|
46
46
|
width: "24",
|
|
47
47
|
height: "24",
|
|
@@ -52,7 +52,7 @@ const B = {
|
|
|
52
52
|
fill: "none",
|
|
53
53
|
role: "presentation"
|
|
54
54
|
}, [
|
|
55
|
-
e.sort === -1 ? (o(),
|
|
55
|
+
e.sort === -1 ? (o(), l(u, { key: 0 }, [
|
|
56
56
|
t[0] || (t[0] = s("line", {
|
|
57
57
|
x1: "12",
|
|
58
58
|
y1: "5",
|
|
@@ -60,7 +60,7 @@ const B = {
|
|
|
60
60
|
y2: "19"
|
|
61
61
|
}, null, -1)),
|
|
62
62
|
t[1] || (t[1] = s("polyline", { points: "19 12 12 19 5 12" }, null, -1))
|
|
63
|
-
], 64)) : e.sort === 1 ? (o(),
|
|
63
|
+
], 64)) : e.sort === 1 ? (o(), l(u, { key: 1 }, [
|
|
64
64
|
t[2] || (t[2] = s("line", {
|
|
65
65
|
x1: "12",
|
|
66
66
|
y1: "19",
|
|
@@ -68,12 +68,12 @@ const B = {
|
|
|
68
68
|
y2: "5"
|
|
69
69
|
}, null, -1)),
|
|
70
70
|
t[3] || (t[3] = s("polyline", { points: "5 12 12 5 19 12" }, null, -1))
|
|
71
|
-
], 64)) : (o(),
|
|
72
|
-
], 2)) :
|
|
71
|
+
], 64)) : (o(), l("path", B))
|
|
72
|
+
], 2)) : p("", !0)
|
|
73
73
|
], 2)
|
|
74
74
|
], 6));
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
77
|
export {
|
|
78
|
-
|
|
78
|
+
H as default
|
|
79
79
|
};
|