@soft-stech/bootsman-ui-shadcn 1.4.26 → 1.4.27
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/{BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-DsrMMFKz.js → BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-BOdkTG0_.js} +1 -1
- package/dist/components/ui/table/BuiDataTable.vue.d.ts +1 -0
- package/dist/components/ui/table/BuiDataTableColumnList.js +1 -1
- package/dist/components/ui/table/index.js +152 -151
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/stories/BuiDataTable.story.vue +3 -1
- package/src/components/ui/table/BuiDataTable.vue +2 -1
- package/src/components/ui/table/BuiDataTableColumnList.vue +3 -1
- package/src/components/ui/table/index.ts +8 -6
|
@@ -1326,7 +1326,7 @@ const Pn = { class: "dragHandler grow" }, Yn = /* @__PURE__ */ Bt({
|
|
|
1326
1326
|
$t(ct(Zt), {
|
|
1327
1327
|
checked: r.getIsVisible()
|
|
1328
1328
|
}, null, 8, ["checked"]),
|
|
1329
|
-
Vt("div", Pn, Ut(r.columnDef.meta?.title || r.id.replace(/([A-Z])/g, " $1")), 1)
|
|
1329
|
+
Vt("div", Pn, Ut(r.columnDef.meta?.title || r.id.replace(/^values\./, "").replace(/([A-Z])/g, " $1")), 1)
|
|
1330
1330
|
]),
|
|
1331
1331
|
_: 2
|
|
1332
1332
|
}, 1032, ["value", "onSelect"]))), 128))
|
|
@@ -34,6 +34,7 @@ declare const _default: <TData, TValue>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
34
34
|
getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
|
|
35
35
|
renderSubComponent?: (row: Row<TData>) => (() => any) | undefined;
|
|
36
36
|
freezeHeader?: boolean;
|
|
37
|
+
enableColumnListControl?: boolean;
|
|
37
38
|
columnSearchPlaceholder?: string;
|
|
38
39
|
columnSearchNotFound?: string;
|
|
39
40
|
})> & import('vue').PublicProps;
|
|
@@ -4,47 +4,47 @@ import { _ as O } from "../../../BuiTableCell.vue_vue_type_script_setup_true_lan
|
|
|
4
4
|
import { _ as X } from "../../../BuiTableHead.vue_vue_type_script_setup_true_lang-BDSRArVd.js";
|
|
5
5
|
import { _ as Z } from "../../../BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
|
|
6
6
|
import { _ as V } from "../../../BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
|
|
7
|
-
import { defineComponent as G, computed as w, openBlock as r, createElementBlock as d, Fragment as
|
|
8
|
-
import { _ as
|
|
9
|
-
import { _ as
|
|
10
|
-
import { _ as
|
|
11
|
-
import { _ as
|
|
12
|
-
import { _ as
|
|
13
|
-
import { _ as
|
|
14
|
-
import { _ as
|
|
15
|
-
import { h as
|
|
16
|
-
import { FlexRender as W, useVueTable as
|
|
17
|
-
import { _ as
|
|
18
|
-
import { _ as
|
|
19
|
-
import { _ as
|
|
20
|
-
import { _ as
|
|
21
|
-
import { _ as
|
|
22
|
-
import { _ as
|
|
23
|
-
import { _ as
|
|
7
|
+
import { defineComponent as G, computed as w, openBlock as r, createElementBlock as d, Fragment as p, createBlock as c, unref as t, normalizeClass as ee, withCtx as a, renderSlot as y, renderList as k, normalizeStyle as K, createVNode as s, createCommentVNode as S, resolveDynamicComponent as oe, mergeModels as te, useModel as _, watchEffect as ne, ref as x, watch as le, createSlots as ae, createElementVNode as g, createTextVNode as h, toDisplayString as B } from "vue";
|
|
8
|
+
import { _ as io } from "../../../BuiTableCaption.vue_vue_type_script_setup_true_lang-CTEP1Sde.js";
|
|
9
|
+
import { _ as re } from "../../../BuiTableEmpty.vue_vue_type_script_setup_true_lang-BTyX0sT5.js";
|
|
10
|
+
import { _ as mo } from "../../../BuiTableFooter.vue_vue_type_script_setup_true_lang-CRyh8XF5.js";
|
|
11
|
+
import { _ as se } from "../../../BuiCollapsible.vue_vue_type_script_setup_true_lang-DjuQBjGZ.js";
|
|
12
|
+
import { _ as ie } from "../../../BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-l-nmwAwq.js";
|
|
13
|
+
import { _ as ue } from "../../../BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-BiD89zzH.js";
|
|
14
|
+
import { _ as de } from "../../../variables-CtE99jPc.js";
|
|
15
|
+
import { h as me, v as C, g as ge, _ as pe } from "../../../utils-CwP7Up6y.js";
|
|
16
|
+
import { FlexRender as W, useVueTable as ce, getCoreRowModel as fe, getPaginationRowModel as be, getSortedRowModel as ye } from "@tanstack/vue-table";
|
|
17
|
+
import { _ as ve } from "../../../BuiCommand.vue_vue_type_script_setup_true_lang-BiBVfuW-.js";
|
|
18
|
+
import { _ as we } from "../../../BuiCommandEmpty.vue_vue_type_script_setup_true_lang-BkPg_0iY.js";
|
|
19
|
+
import { _ as Se } from "../../../BuiCommandInput.vue_vue_type_script_setup_true_lang-Dxua89Ba.js";
|
|
20
|
+
import { _ as _e } from "../../../BuiCommandList.vue_vue_type_script_setup_true_lang-CczssFsO.js";
|
|
21
|
+
import { _ as Ce } from "../../../BuiPopover.vue_vue_type_script_setup_true_lang-CGkz30K2.js";
|
|
22
|
+
import { _ as he } from "../../../BuiPopoverTrigger.vue_vue_type_script_setup_true_lang-Du2ZN56l.js";
|
|
23
|
+
import { _ as ke } from "../../../BuiPopoverContent.vue_vue_type_script_setup_true_lang-D5UGzl8u.js";
|
|
24
24
|
import { _ as ze } from "../../../BuiScrollArea.vue_vue_type_script_setup_true_lang-D-nqw_Ka.js";
|
|
25
|
-
import { _ as
|
|
25
|
+
import { _ as $e } from "../../../BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-BOdkTG0_.js";
|
|
26
26
|
/**
|
|
27
27
|
* @license lucide-vue-next v0.441.0 - ISC
|
|
28
28
|
*
|
|
29
29
|
* This source code is licensed under the ISC license.
|
|
30
30
|
* See the LICENSE file in the root directory of this source tree.
|
|
31
31
|
*/
|
|
32
|
-
const
|
|
32
|
+
const Be = me("Settings2Icon", [
|
|
33
33
|
["path", { d: "M20 7h-9", key: "3s1dr2" }],
|
|
34
34
|
["path", { d: "M14 17H5", key: "gfn3mx" }],
|
|
35
35
|
["circle", { cx: "17", cy: "17", r: "3", key: "18b49y" }],
|
|
36
36
|
["circle", { cx: "7", cy: "7", r: "3", key: "dfmy0x" }]
|
|
37
|
-
]),
|
|
37
|
+
]), Re = "[!fake-empty!]", j = /* @__PURE__ */ G({
|
|
38
38
|
__name: "BuiTableRowSubrow",
|
|
39
39
|
props: {
|
|
40
40
|
row: {},
|
|
41
41
|
renderSubComponent: { type: Function },
|
|
42
42
|
columns: {}
|
|
43
43
|
},
|
|
44
|
-
setup(
|
|
45
|
-
const n =
|
|
46
|
-
return (i, R) => (r(), d(
|
|
47
|
-
|
|
44
|
+
setup(f) {
|
|
45
|
+
const n = f, z = w(() => n.row.original.name?.includes(Re));
|
|
46
|
+
return (i, R) => (r(), d(p, null, [
|
|
47
|
+
z.value ? S("", !0) : (r(), c(t(V), {
|
|
48
48
|
key: 0,
|
|
49
49
|
"data-row-state": i.row.getIsSelected() ? "selected" : void 0,
|
|
50
50
|
class: ee(n.renderSubComponent?.(i.row) ? "border-b-0" : "")
|
|
@@ -53,7 +53,7 @@ const $e = de("Settings2Icon", [
|
|
|
53
53
|
y(i.$slots, "actions")
|
|
54
54
|
]),
|
|
55
55
|
default: a(() => [
|
|
56
|
-
(r(!0), d(
|
|
56
|
+
(r(!0), d(p, null, k(i.row.getVisibleCells(), (v) => (r(), c(t(O), {
|
|
57
57
|
key: v.id,
|
|
58
58
|
style: K({ ...t(Y)(v.column) })
|
|
59
59
|
}, {
|
|
@@ -68,7 +68,7 @@ const $e = de("Settings2Icon", [
|
|
|
68
68
|
]),
|
|
69
69
|
_: 3
|
|
70
70
|
}, 8, ["data-row-state", "class"])),
|
|
71
|
-
n.renderSubComponent?.(i.row) ? (r(),
|
|
71
|
+
n.renderSubComponent?.(i.row) ? (r(), c(t(V), {
|
|
72
72
|
key: 1,
|
|
73
73
|
"data-row-state": i.row.getIsSelected() ? "selected" : void 0
|
|
74
74
|
}, {
|
|
@@ -81,7 +81,7 @@ const $e = de("Settings2Icon", [
|
|
|
81
81
|
class: "pt-0"
|
|
82
82
|
}, {
|
|
83
83
|
default: a(() => [
|
|
84
|
-
(r(),
|
|
84
|
+
(r(), c(oe(n.renderSubComponent?.(i.row)?.())))
|
|
85
85
|
]),
|
|
86
86
|
_: 1
|
|
87
87
|
}, 8, ["colspan"])
|
|
@@ -90,13 +90,13 @@ const $e = de("Settings2Icon", [
|
|
|
90
90
|
}, 8, ["data-row-state"])) : S("", !0)
|
|
91
91
|
], 64));
|
|
92
92
|
}
|
|
93
|
-
}),
|
|
93
|
+
}), Ie = {
|
|
94
94
|
key: 0,
|
|
95
95
|
class: "w-full py-3"
|
|
96
|
-
},
|
|
96
|
+
}, Me = { class: "absolute right-0 top-0 z-10 h-10 bg-background" }, Pe = { class: "flex h-full items-center border-l border-border/[0.16] bg-foreground/[0.04] px-1" }, xe = ["onDblclick", "onMousedown", "className"], Oe = { class: "mt-1 flex w-full items-center justify-between" }, Ve = { class: "relative -mb-[6px] inline-block rounded-t-lg bg-background px-4 py-2 text-sm font-medium shadow-top-shadow" }, Te = {
|
|
97
97
|
key: 1,
|
|
98
98
|
class: "flex w-full justify-end border-x border-b border-border/[0.16] bg-primary/[0.04] px-4 py-1 text-base text-muted-foreground"
|
|
99
|
-
}, A = "#UNDEFINED#",
|
|
99
|
+
}, A = "#UNDEFINED#", ao = /* @__PURE__ */ G({
|
|
100
100
|
__name: "BuiDataTable",
|
|
101
101
|
props: /* @__PURE__ */ te({
|
|
102
102
|
columns: {},
|
|
@@ -111,6 +111,7 @@ const $e = de("Settings2Icon", [
|
|
|
111
111
|
getRowId: {},
|
|
112
112
|
renderSubComponent: {},
|
|
113
113
|
freezeHeader: { type: Boolean },
|
|
114
|
+
enableColumnListControl: { type: Boolean },
|
|
114
115
|
columnSearchPlaceholder: { default: "Column name" },
|
|
115
116
|
columnSearchNotFound: { default: "Not found" }
|
|
116
117
|
}, {
|
|
@@ -128,10 +129,10 @@ const $e = de("Settings2Icon", [
|
|
|
128
129
|
columnOrderModifiers: {}
|
|
129
130
|
}),
|
|
130
131
|
emits: ["update:sorting", "update:pagination", "update:selection", "update:columnVisibility", "update:columnSizing", "update:columnOrder"],
|
|
131
|
-
setup(
|
|
132
|
-
const n =
|
|
132
|
+
setup(f) {
|
|
133
|
+
const n = f, z = _(f, "sorting"), i = _(f, "pagination"), R = _(f, "selection"), v = _(f, "columnVisibility"), T = _(f, "columnSizing"), b = _(f, "columnOrder"), N = w(
|
|
133
134
|
() => n.manualPagination ? n.totalItems : n.data.length
|
|
134
|
-
), q = n.columns.map((e) => e.meta?.pinLeft && e.id ? e.id : "").filter(Boolean), u =
|
|
135
|
+
), q = n.columns.map((e) => e.meta?.pinLeft && e.id ? e.id : "").filter(Boolean), u = ce({
|
|
135
136
|
initialState: {
|
|
136
137
|
// TODO: column freeze
|
|
137
138
|
columnPinning: { left: q },
|
|
@@ -143,11 +144,11 @@ const $e = de("Settings2Icon", [
|
|
|
143
144
|
get columns() {
|
|
144
145
|
return n.columns;
|
|
145
146
|
},
|
|
146
|
-
getCoreRowModel:
|
|
147
|
-
getPaginationRowModel:
|
|
148
|
-
getSortedRowModel:
|
|
147
|
+
getCoreRowModel: fe(),
|
|
148
|
+
getPaginationRowModel: be(),
|
|
149
|
+
getSortedRowModel: ye(),
|
|
149
150
|
onSortingChange: (e) => {
|
|
150
|
-
C(e,
|
|
151
|
+
C(e, z);
|
|
151
152
|
},
|
|
152
153
|
onPaginationChange: (e) => {
|
|
153
154
|
C(e, i);
|
|
@@ -173,7 +174,7 @@ const $e = de("Settings2Icon", [
|
|
|
173
174
|
columnResizeDirection: "ltr",
|
|
174
175
|
state: {
|
|
175
176
|
get sorting() {
|
|
176
|
-
return
|
|
177
|
+
return z.value;
|
|
177
178
|
},
|
|
178
179
|
get pagination() {
|
|
179
180
|
return i.value;
|
|
@@ -192,7 +193,7 @@ const $e = de("Settings2Icon", [
|
|
|
192
193
|
}
|
|
193
194
|
},
|
|
194
195
|
getRowId: n.getRowId
|
|
195
|
-
}),
|
|
196
|
+
}), L = w({
|
|
196
197
|
get() {
|
|
197
198
|
return u.getState().pagination.pageSize;
|
|
198
199
|
},
|
|
@@ -211,105 +212,38 @@ const $e = de("Settings2Icon", [
|
|
|
211
212
|
const e = u.getPageCount();
|
|
212
213
|
e && e < $.value && ($.value = e);
|
|
213
214
|
});
|
|
214
|
-
const
|
|
215
|
+
const D = w(() => n.groupBy ? u.getRowModel().rows.reduce((e, o) => {
|
|
215
216
|
const m = o.getValue(n.groupBy) ?? A;
|
|
216
217
|
return e[m] = e[m] || [], e[m].push(o), e;
|
|
217
218
|
}, /* @__PURE__ */ Object.create(null)) : null);
|
|
218
|
-
function
|
|
219
|
+
function H(e) {
|
|
219
220
|
return (n.groupBy && n.groupLabels ? n.groupLabels[n.groupBy] || [] : [])[e];
|
|
220
221
|
}
|
|
221
|
-
const I =
|
|
222
|
+
const I = x(
|
|
222
223
|
u.getAllColumns().filter((e) => typeof e.accessorFn < "u" && e.getCanHide()).sort((e, o) => b.value ? b.value?.indexOf(e.id) < 0 && b.value?.indexOf(o.id) >= 0 ? 1 : b.value?.indexOf(e.id) >= 0 && b.value?.indexOf(o.id) < 0 ? -1 : b.value?.indexOf(e.id) - b.value?.indexOf(o.id) : 0)
|
|
223
|
-
), E = w(() => I.value.map((e) => e.id)), F =
|
|
224
|
+
), E = w(() => I.value.map((e) => e.id)), F = x(!1), M = x(""), U = w(
|
|
224
225
|
() => u.getHeaderGroups().length > 0 ? u.getHeaderGroups()[0].headers : void 0
|
|
225
226
|
);
|
|
226
227
|
return le(E, () => {
|
|
227
228
|
u.setColumnOrder(E.value);
|
|
228
|
-
}), (e, o) => (r(), d(
|
|
229
|
-
e.$slots.caption ? (r(), d("div",
|
|
229
|
+
}), (e, o) => (r(), d(p, null, [
|
|
230
|
+
e.$slots.caption ? (r(), d("div", Ie, [
|
|
230
231
|
y(e.$slots, "caption", { table: t(u) })
|
|
231
232
|
])) : S("", !0),
|
|
232
|
-
s(t(J), null, {
|
|
233
|
-
columnVisibility: a(() => [
|
|
234
|
-
s(t(_e), {
|
|
235
|
-
open: F.value,
|
|
236
|
-
"onUpdate:open": o[3] || (o[3] = (l) => F.value = l)
|
|
237
|
-
}, {
|
|
238
|
-
default: a(() => [
|
|
239
|
-
s(t(Ce), { "as-child": "" }, {
|
|
240
|
-
default: a(() => [
|
|
241
|
-
g("div", Ie, [
|
|
242
|
-
g("div", Pe, [
|
|
243
|
-
s(t(me), {
|
|
244
|
-
variant: "ghost",
|
|
245
|
-
class: "flex h-8 w-8 items-center justify-center text-foreground"
|
|
246
|
-
}, {
|
|
247
|
-
default: a(() => [
|
|
248
|
-
s(t($e), { class: "h-4 w-4 flex-shrink-0 opacity-50" })
|
|
249
|
-
]),
|
|
250
|
-
_: 1
|
|
251
|
-
})
|
|
252
|
-
])
|
|
253
|
-
])
|
|
254
|
-
]),
|
|
255
|
-
_: 1
|
|
256
|
-
}),
|
|
257
|
-
s(t(he), {
|
|
258
|
-
class: "w-[250px] p-0",
|
|
259
|
-
align: "start"
|
|
260
|
-
}, {
|
|
261
|
-
default: a(() => [
|
|
262
|
-
s(t(ye), null, {
|
|
263
|
-
default: a(() => [
|
|
264
|
-
s(t(we), {
|
|
265
|
-
placeholder: e.columnSearchPlaceholder,
|
|
266
|
-
modelValue: P.value,
|
|
267
|
-
"onUpdate:modelValue": o[0] || (o[0] = (l) => P.value = l),
|
|
268
|
-
onInput: o[1] || (o[1] = (l) => P.value = l.target.value)
|
|
269
|
-
}, null, 8, ["placeholder", "modelValue"]),
|
|
270
|
-
s(t(Se), null, {
|
|
271
|
-
default: a(() => [
|
|
272
|
-
s(t(ze), { class: "h-[300px]" }, {
|
|
273
|
-
default: a(() => [
|
|
274
|
-
s(t(ve), null, {
|
|
275
|
-
default: a(() => [
|
|
276
|
-
h(B(e.columnSearchNotFound), 1)
|
|
277
|
-
]),
|
|
278
|
-
_: 1
|
|
279
|
-
}),
|
|
280
|
-
s(t(ke), {
|
|
281
|
-
"columns-list": I.value,
|
|
282
|
-
"onUpdate:columnsList": o[2] || (o[2] = (l) => I.value = l)
|
|
283
|
-
}, null, 8, ["columns-list"])
|
|
284
|
-
]),
|
|
285
|
-
_: 1
|
|
286
|
-
})
|
|
287
|
-
]),
|
|
288
|
-
_: 1
|
|
289
|
-
})
|
|
290
|
-
]),
|
|
291
|
-
_: 1
|
|
292
|
-
})
|
|
293
|
-
]),
|
|
294
|
-
_: 1
|
|
295
|
-
})
|
|
296
|
-
]),
|
|
297
|
-
_: 1
|
|
298
|
-
}, 8, ["open"])
|
|
299
|
-
]),
|
|
233
|
+
s(t(J), null, ae({
|
|
300
234
|
default: a(() => [
|
|
301
|
-
U.value ? (r(),
|
|
235
|
+
U.value ? (r(), c(t(Z), {
|
|
302
236
|
key: 0,
|
|
303
237
|
"freeze-header": n.freezeHeader
|
|
304
238
|
}, {
|
|
305
239
|
default: a(() => [
|
|
306
|
-
(r(!0), d(
|
|
240
|
+
(r(!0), d(p, null, k(U.value, (l) => (r(), c(t(X), {
|
|
307
241
|
key: l.id,
|
|
308
242
|
style: K({ ...t(Y)(l.column), width: l.getSize() + "px" }),
|
|
309
243
|
"freeze-header": n.freezeHeader
|
|
310
244
|
}, {
|
|
311
245
|
default: a(() => [
|
|
312
|
-
l.isPlaceholder ? S("", !0) : (r(),
|
|
246
|
+
l.isPlaceholder ? S("", !0) : (r(), c(t(W), {
|
|
313
247
|
key: 0,
|
|
314
248
|
render: l.column.columnDef.header,
|
|
315
249
|
props: l.getContext()
|
|
@@ -330,14 +264,14 @@ const $e = de("Settings2Icon", [
|
|
|
330
264
|
}, 8, ["freeze-header"])) : S("", !0),
|
|
331
265
|
s(t(Q), null, {
|
|
332
266
|
default: a(() => [
|
|
333
|
-
t(u).getRowModel().rows?.length ? (r(), d(
|
|
334
|
-
n.groupBy &&
|
|
267
|
+
t(u).getRowModel().rows?.length ? (r(), d(p, { key: 0 }, [
|
|
268
|
+
n.groupBy && D.value ? (r(!0), d(p, { key: 0 }, k(D.value, (l, m) => (r(), c(t(se), {
|
|
335
269
|
asChild: "",
|
|
336
270
|
key: m,
|
|
337
271
|
open: !0
|
|
338
272
|
}, {
|
|
339
273
|
default: a(() => [
|
|
340
|
-
s(t(
|
|
274
|
+
s(t(ie), { asChild: "" }, {
|
|
341
275
|
default: a(() => [
|
|
342
276
|
s(t(V), { class: "bg-foreground/[0.04]" }, {
|
|
343
277
|
actions: a(() => [
|
|
@@ -349,8 +283,8 @@ const $e = de("Settings2Icon", [
|
|
|
349
283
|
class: "!pb-0"
|
|
350
284
|
}, {
|
|
351
285
|
default: a(() => [
|
|
352
|
-
g("div",
|
|
353
|
-
g("div",
|
|
286
|
+
g("div", Oe, [
|
|
287
|
+
g("div", Ve, [
|
|
354
288
|
o[6] || (o[6] = g("div", { class: "absolute -left-2 bottom-0 h-2 w-2 bg-background" }, null, -1)),
|
|
355
289
|
o[7] || (o[7] = g("div", { class: "absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-background" }, null, -1)),
|
|
356
290
|
o[8] || (o[8] = g("div", { class: "absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]" }, null, -1)),
|
|
@@ -358,14 +292,14 @@ const $e = de("Settings2Icon", [
|
|
|
358
292
|
o[10] || (o[10] = g("div", { class: "absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-background" }, null, -1)),
|
|
359
293
|
o[11] || (o[11] = g("div", { class: "absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]" }, null, -1)),
|
|
360
294
|
o[12] || (o[12] = g("div", null, null, -1)),
|
|
361
|
-
m === A ? (r(), d(
|
|
362
|
-
h(B(
|
|
363
|
-
], 64)) : (r(), d(
|
|
364
|
-
h(B(
|
|
295
|
+
m === A ? (r(), d(p, { key: 0 }, [
|
|
296
|
+
h(B(H(1)), 1)
|
|
297
|
+
], 64)) : (r(), d(p, { key: 1 }, [
|
|
298
|
+
h(B(H(0)) + ": ", 1),
|
|
365
299
|
e.$slots.groupName ? y(e.$slots, "groupName", {
|
|
366
300
|
key: 0,
|
|
367
301
|
group: m
|
|
368
|
-
}) : (r(), d(
|
|
302
|
+
}) : (r(), d(p, { key: 1 }, [
|
|
369
303
|
h(B(m), 1)
|
|
370
304
|
], 64))
|
|
371
305
|
], 64))
|
|
@@ -384,17 +318,17 @@ const $e = de("Settings2Icon", [
|
|
|
384
318
|
]),
|
|
385
319
|
_: 2
|
|
386
320
|
}, 1024),
|
|
387
|
-
s(t(
|
|
321
|
+
s(t(ue), { asChild: "" }, {
|
|
388
322
|
default: a(() => [
|
|
389
|
-
(r(!0), d(
|
|
390
|
-
key:
|
|
323
|
+
(r(!0), d(p, null, k(l, (P) => (r(), c(j, {
|
|
324
|
+
key: P.id,
|
|
391
325
|
columns: n.columns,
|
|
392
|
-
row:
|
|
326
|
+
row: P,
|
|
393
327
|
renderSubComponent: n.renderSubComponent
|
|
394
328
|
}, {
|
|
395
329
|
actions: a(() => [
|
|
396
330
|
y(e.$slots, "rowActions", {
|
|
397
|
-
row:
|
|
331
|
+
row: P.original
|
|
398
332
|
})
|
|
399
333
|
]),
|
|
400
334
|
_: 2
|
|
@@ -404,7 +338,7 @@ const $e = de("Settings2Icon", [
|
|
|
404
338
|
}, 1024)
|
|
405
339
|
]),
|
|
406
340
|
_: 2
|
|
407
|
-
}, 1024))), 128)) : (r(!0), d(
|
|
341
|
+
}, 1024))), 128)) : (r(!0), d(p, { key: 1 }, k(t(u).getRowModel().rows, (l) => (r(), c(j, {
|
|
408
342
|
key: l.id,
|
|
409
343
|
columns: n.columns,
|
|
410
344
|
row: l,
|
|
@@ -417,7 +351,7 @@ const $e = de("Settings2Icon", [
|
|
|
417
351
|
]),
|
|
418
352
|
_: 2
|
|
419
353
|
}, 1032, ["columns", "row", "renderSubComponent"]))), 128))
|
|
420
|
-
], 64)) : (r(),
|
|
354
|
+
], 64)) : (r(), c(t(re), {
|
|
421
355
|
key: 1,
|
|
422
356
|
colspan: e.columns.length
|
|
423
357
|
}, {
|
|
@@ -432,37 +366,104 @@ const $e = de("Settings2Icon", [
|
|
|
432
366
|
_: 3
|
|
433
367
|
})
|
|
434
368
|
]),
|
|
435
|
-
_:
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
|
|
369
|
+
_: 2
|
|
370
|
+
}, [
|
|
371
|
+
e.enableColumnListControl ? {
|
|
372
|
+
name: "columnVisibility",
|
|
373
|
+
fn: a(() => [
|
|
374
|
+
s(t(Ce), {
|
|
375
|
+
open: F.value,
|
|
376
|
+
"onUpdate:open": o[3] || (o[3] = (l) => F.value = l)
|
|
377
|
+
}, {
|
|
378
|
+
default: a(() => [
|
|
379
|
+
s(t(he), { "as-child": "" }, {
|
|
380
|
+
default: a(() => [
|
|
381
|
+
g("div", Me, [
|
|
382
|
+
g("div", Pe, [
|
|
383
|
+
s(t(pe), {
|
|
384
|
+
variant: "ghost",
|
|
385
|
+
class: "flex h-8 w-8 items-center justify-center text-foreground"
|
|
386
|
+
}, {
|
|
387
|
+
default: a(() => [
|
|
388
|
+
s(t(Be), { class: "h-4 w-4 flex-shrink-0 opacity-50" })
|
|
389
|
+
]),
|
|
390
|
+
_: 1
|
|
391
|
+
})
|
|
392
|
+
])
|
|
393
|
+
])
|
|
394
|
+
]),
|
|
395
|
+
_: 1
|
|
396
|
+
}),
|
|
397
|
+
s(t(ke), {
|
|
398
|
+
class: "w-[250px] p-0",
|
|
399
|
+
align: "start"
|
|
400
|
+
}, {
|
|
401
|
+
default: a(() => [
|
|
402
|
+
s(t(ve), null, {
|
|
403
|
+
default: a(() => [
|
|
404
|
+
s(t(Se), {
|
|
405
|
+
placeholder: e.columnSearchPlaceholder,
|
|
406
|
+
modelValue: M.value,
|
|
407
|
+
"onUpdate:modelValue": o[0] || (o[0] = (l) => M.value = l),
|
|
408
|
+
onInput: o[1] || (o[1] = (l) => M.value = l.target.value)
|
|
409
|
+
}, null, 8, ["placeholder", "modelValue"]),
|
|
410
|
+
s(t(_e), null, {
|
|
411
|
+
default: a(() => [
|
|
412
|
+
s(t(ze), { class: "h-[300px]" }, {
|
|
413
|
+
default: a(() => [
|
|
414
|
+
s(t(we), null, {
|
|
415
|
+
default: a(() => [
|
|
416
|
+
h(B(e.columnSearchNotFound), 1)
|
|
417
|
+
]),
|
|
418
|
+
_: 1
|
|
419
|
+
}),
|
|
420
|
+
s(t($e), {
|
|
421
|
+
"columns-list": I.value,
|
|
422
|
+
"onUpdate:columnsList": o[2] || (o[2] = (l) => I.value = l)
|
|
423
|
+
}, null, 8, ["columns-list"])
|
|
424
|
+
]),
|
|
425
|
+
_: 1
|
|
426
|
+
})
|
|
427
|
+
]),
|
|
428
|
+
_: 1
|
|
429
|
+
})
|
|
430
|
+
]),
|
|
431
|
+
_: 1
|
|
432
|
+
})
|
|
433
|
+
]),
|
|
434
|
+
_: 1
|
|
435
|
+
})
|
|
436
|
+
]),
|
|
437
|
+
_: 1
|
|
438
|
+
}, 8, ["open"])
|
|
439
|
+
]),
|
|
440
|
+
key: "0"
|
|
441
|
+
} : void 0
|
|
442
|
+
]), 1024),
|
|
443
|
+
e.showPagination && N.value > 0 ? (r(), d("div", Te, [
|
|
444
|
+
s(t(de), {
|
|
439
445
|
total: N.value,
|
|
440
446
|
pageIndex: $.value,
|
|
441
447
|
"onUpdate:pageIndex": o[4] || (o[4] = (l) => $.value = l),
|
|
442
|
-
pageSize:
|
|
443
|
-
"onUpdate:pageSize": o[5] || (o[5] = (l) =>
|
|
448
|
+
pageSize: L.value,
|
|
449
|
+
"onUpdate:pageSize": o[5] || (o[5] = (l) => L.value = l)
|
|
444
450
|
}, null, 8, ["total", "pageIndex", "pageSize"])
|
|
445
451
|
])) : S("", !0)
|
|
446
452
|
], 64));
|
|
447
453
|
}
|
|
448
454
|
});
|
|
449
|
-
function Y(
|
|
450
|
-
|
|
451
|
-
return {
|
|
452
|
-
left: n === "left" ? "0" : void 0,
|
|
453
|
-
position: n ? "sticky" : "relative",
|
|
454
|
-
zIndex: n ? "1" : "0"
|
|
455
|
-
};
|
|
455
|
+
function Y(f) {
|
|
456
|
+
return { position: "relative" };
|
|
456
457
|
}
|
|
457
458
|
export {
|
|
458
|
-
|
|
459
|
-
|
|
459
|
+
ao as BuiDataTable,
|
|
460
|
+
$e as BuiDataTableColumnList,
|
|
460
461
|
J as BuiTable,
|
|
461
462
|
Q as BuiTableBody,
|
|
462
|
-
|
|
463
|
+
io as BuiTableCaption,
|
|
463
464
|
O as BuiTableCell,
|
|
464
|
-
|
|
465
|
-
|
|
465
|
+
re as BuiTableEmpty,
|
|
466
|
+
mo as BuiTableFooter,
|
|
466
467
|
X as BuiTableHead,
|
|
467
468
|
Z as BuiTableHeader,
|
|
468
469
|
V as BuiTableRow,
|
package/dist/index.js
CHANGED
|
@@ -165,7 +165,7 @@ import { _ as ji } from "./BuiSheetHeader.vue_vue_type_script_setup_true_lang-vG
|
|
|
165
165
|
import { _ as Ji } from "./BuiSheetTitle.vue_vue_type_script_setup_true_lang-D-bamlaT.js";
|
|
166
166
|
import { _ as Ui } from "./BuiSheetTrigger.vue_vue_type_script_setup_true_lang-Bo3F1V-i.js";
|
|
167
167
|
import { Form as zi, Field as Qi, FieldArray as Wi, useField as Xi, useFieldArray as Zi, useForm as $i } from "vee-validate";
|
|
168
|
-
import { _ as ru } from "./BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-
|
|
168
|
+
import { _ as ru } from "./BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-BOdkTG0_.js";
|
|
169
169
|
import { _ as tu } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-BBDzM6Br.js";
|
|
170
170
|
import { _ as iu } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-fLjieQsa.js";
|
|
171
171
|
import { _ as pu } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-D1VfRzjv.js";
|
package/package.json
CHANGED
|
@@ -64,7 +64,8 @@ const columns: ColumnDef<Task>[] = [
|
|
|
64
64
|
}),
|
|
65
65
|
`${row.getValue('id')}`
|
|
66
66
|
]),
|
|
67
|
-
enableHiding: false
|
|
67
|
+
enableHiding: false,
|
|
68
|
+
meta: { title: 'ID', pinLeft: true }
|
|
68
69
|
},
|
|
69
70
|
{
|
|
70
71
|
accessorKey: 'title',
|
|
@@ -200,6 +201,7 @@ function groupName(group: string | number) {
|
|
|
200
201
|
:groupBy="groupBy === 'none' ? undefined : groupBy"
|
|
201
202
|
:groupLabels="groupLabels"
|
|
202
203
|
:renderSubComponent="renderSubComponent"
|
|
204
|
+
enable-column-list-control
|
|
203
205
|
>
|
|
204
206
|
<template #caption="{ table }">
|
|
205
207
|
<div class="flex justify-between">
|
|
@@ -64,6 +64,7 @@ const props = withDefaults(
|
|
|
64
64
|
getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
|
|
65
65
|
renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
|
|
66
66
|
freezeHeader?: boolean
|
|
67
|
+
enableColumnListControl?: boolean
|
|
67
68
|
columnSearchPlaceholder?: string
|
|
68
69
|
columnSearchNotFound?: string
|
|
69
70
|
}>(),
|
|
@@ -230,7 +231,7 @@ watch(columnsListIds, () => {
|
|
|
230
231
|
<slot name="caption" :table="table" />
|
|
231
232
|
</div>
|
|
232
233
|
<BuiTable>
|
|
233
|
-
<template #columnVisibility>
|
|
234
|
+
<template v-if="enableColumnListControl" #columnVisibility>
|
|
234
235
|
<BuiPopover v-model:open="open">
|
|
235
236
|
<BuiPopoverTrigger as-child>
|
|
236
237
|
<div class="absolute right-0 top-0 z-10 h-10 bg-background">
|
|
@@ -25,7 +25,9 @@ useSortable(columnsListRef, columnsList, { handle: '.dragHandler' })
|
|
|
25
25
|
>
|
|
26
26
|
<BuiCheckbox :checked="col.getIsVisible()" />
|
|
27
27
|
<div class="dragHandler grow">
|
|
28
|
-
{{
|
|
28
|
+
{{
|
|
29
|
+
col.columnDef.meta?.title || col.id.replace(/^values\./, '').replace(/([A-Z])/g, ' $1')
|
|
30
|
+
}}
|
|
29
31
|
</div>
|
|
30
32
|
</BuiCommandItem>
|
|
31
33
|
</div>
|
|
@@ -15,10 +15,12 @@ export { default as BuiDataTable } from './BuiDataTable.vue'
|
|
|
15
15
|
export { default as BuiDataTableColumnList } from './BuiDataTableColumnList.vue'
|
|
16
16
|
|
|
17
17
|
export function getPinningStyle<TData>(column: Column<TData, unknown>): CSSProperties {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
// FYI sticky columns not possible with transparent background colors
|
|
19
|
+
// const isPinned = column.getIsPinned()
|
|
20
|
+
// return {
|
|
21
|
+
// left: isPinned === 'left' ? '0' : undefined,
|
|
22
|
+
// position: isPinned ? 'sticky' : 'relative',
|
|
23
|
+
// zIndex: isPinned ? '1' : '0'
|
|
24
|
+
// }
|
|
25
|
+
return { position: 'relative' }
|
|
24
26
|
}
|