vlite3 1.4.35 → 1.4.39
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/components/Badge.vue.js +5 -5
- package/components/Badge.vue3.js +5 -0
- package/components/CategoryManager/CategoryManager.vue2.js +6 -5
- package/components/Chip/Chip.vue.js +21 -21
- package/components/Chip/Chip.vue3.js +5 -0
- package/components/Comment/CommentItem.vue2.js +3 -2
- package/components/DataTable/DataTable.vue.d.ts +4 -1
- package/components/DataTable/DataTable.vue.js +317 -203
- package/components/DataTable/DataTableRow.vue.d.ts +21 -0
- package/components/DataTable/DataTableRow.vue.js +140 -73
- package/components/DataTable/types.d.ts +30 -0
- package/components/DataTable/useDataTableTree.d.ts +25 -0
- package/components/DataTable/useDataTableTree.js +147 -0
- package/components/FileTree/FileTree.vue.d.ts +3 -1
- package/components/FileTree/FileTree.vue.js +1 -1
- package/components/FileTree/FileTree.vue2.js +148 -105
- package/components/FileTree/FileTreeNode.vue.d.ts +15 -5
- package/components/FileTree/FileTreeNode.vue.js +149 -182
- package/components/Form/{AccordionView.vue.js → AccordionView.vue2.js} +1 -1
- package/components/Form/Form.vue2.js +45 -43
- package/components/Form/index.vue2.js +1 -1
- package/components/ImportData/ImportData.vue.js +4 -2
- package/components/Invoice/InvoiceVariant1.vue.js +3 -2
- package/components/Invoice/InvoiceVariant2.vue.js +3 -2
- package/components/Invoice/InvoiceVariant3.vue.js +3 -2
- package/components/Invoice/InvoiceVariant4.vue.js +3 -2
- package/components/MultiSelect/MultiSelect.vue.js +3 -2
- package/components/PricingPlan/PricingPlanItem.vue.js +10 -9
- package/components/RichTextEditor/RichTextEditor.vue.js +4 -4
- package/components/RichTextEditor/RichTextLinkPopover.vue3.js +2 -2
- package/components/RichTextEditor/RichTextToolbar.vue3.js +2 -2
- package/components/Screen/ScreenFilter.vue.js +21 -20
- package/components/StatusChip/StatusChip.vue.js +8 -7
- package/components/StatusChip/StatusChip.vue3.js +5 -0
- package/components/Timeline/TimelineItem.vue.js +3 -2
- package/components/TreeConnectors/TreeConnectors.vue.d.ts +27 -0
- package/components/TreeConnectors/TreeConnectors.vue.js +53 -0
- package/components/TreeConnectors/TreeConnectors.vue2.js +4 -0
- package/components/TreeConnectors/geometry.d.ts +90 -0
- package/components/TreeConnectors/geometry.js +137 -0
- package/components/TreeConnectors/index.d.ts +3 -0
- package/components/index.d.ts +1 -0
- package/index.js +473 -470
- package/package.json +1 -1
- package/style.css +15 -1
- package/components/Badge.vue2.js +0 -4
- package/components/Chip/Chip.vue2.js +0 -4
- package/components/StatusChip/StatusChip.vue2.js +0 -4
- /package/components/RichTextEditor/{RichTextLinkPopover.vue.js → RichTextLinkPopover.vue2.js} +0 -0
- /package/components/RichTextEditor/{RichTextToolbar.vue.js → RichTextToolbar.vue2.js} +0 -0
|
@@ -6,11 +6,21 @@ interface Props {
|
|
|
6
6
|
keyField: string;
|
|
7
7
|
selectable?: boolean;
|
|
8
8
|
isSelected?: boolean;
|
|
9
|
+
isIndeterminate?: boolean;
|
|
9
10
|
hoverable?: boolean;
|
|
10
11
|
striped?: boolean;
|
|
11
12
|
compact?: boolean;
|
|
12
13
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
13
14
|
cellBordered?: boolean;
|
|
15
|
+
/** Tree mode — when true, first data column shows expand/indent chrome. */
|
|
16
|
+
treeMode?: boolean;
|
|
17
|
+
depth?: number;
|
|
18
|
+
treeIndent?: number;
|
|
19
|
+
expandable?: boolean;
|
|
20
|
+
expanded?: boolean;
|
|
21
|
+
treeLoading?: boolean;
|
|
22
|
+
isLastSibling?: boolean;
|
|
23
|
+
ancestorLastFlags?: boolean[];
|
|
14
24
|
}
|
|
15
25
|
declare function __VLS_template(): {
|
|
16
26
|
attrs: Partial<{}>;
|
|
@@ -26,12 +36,14 @@ declare function __VLS_template(): {
|
|
|
26
36
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
27
37
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
28
38
|
select: (id: any) => any;
|
|
39
|
+
toggleExpand: () => any;
|
|
29
40
|
rowClick: (payload: {
|
|
30
41
|
row: any;
|
|
31
42
|
index: number;
|
|
32
43
|
}) => any;
|
|
33
44
|
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
|
|
34
45
|
onSelect?: (id: any) => any;
|
|
46
|
+
onToggleExpand?: () => any;
|
|
35
47
|
onRowClick?: (payload: {
|
|
36
48
|
row: any;
|
|
37
49
|
index: number;
|
|
@@ -42,8 +54,17 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
|
|
|
42
54
|
striped: boolean;
|
|
43
55
|
selectable: boolean;
|
|
44
56
|
isSelected: boolean;
|
|
57
|
+
depth: number;
|
|
58
|
+
isLastSibling: boolean;
|
|
59
|
+
ancestorLastFlags: boolean[];
|
|
60
|
+
isIndeterminate: boolean;
|
|
45
61
|
keyField: string;
|
|
46
62
|
hoverable: boolean;
|
|
63
|
+
treeMode: boolean;
|
|
64
|
+
treeIndent: number;
|
|
65
|
+
expandable: boolean;
|
|
66
|
+
expanded: boolean;
|
|
67
|
+
treeLoading: boolean;
|
|
47
68
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;
|
|
48
69
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
49
70
|
export default _default;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
1
|
+
import { defineComponent as D, computed as g, openBlock as o, createElementBlock as d, normalizeClass as x, withModifiers as I, createElementVNode as b, createVNode as v, createCommentVNode as w, Fragment as p, renderList as U, normalizeStyle as y, unref as c, createBlock as u, renderSlot as V } from "vue";
|
|
2
|
+
import R from "../CheckBox.vue.js";
|
|
3
|
+
import h from "../Icon.vue.js";
|
|
4
|
+
import G from "../Price/Price.vue.js";
|
|
5
|
+
import P from "../DateTime/DateTime.vue.js";
|
|
6
|
+
import O from "../TreeConnectors/TreeConnectors.vue.js";
|
|
7
|
+
import { DEFAULT_TOGGLE_SIZE as H, DEFAULT_TREE_CONTENT_GAP as k, DEFAULT_TREE_LEAF_INSET as E, DEFAULT_TREE_LEADING as j } from "../TreeConnectors/geometry.js";
|
|
8
|
+
const Z = ["data-state"], q = { class: "flex items-center justify-center" }, J = ["aria-expanded"], K = ["title", "innerHTML"], le = /* @__PURE__ */ D({
|
|
6
9
|
__name: "DataTableRow",
|
|
7
10
|
props: {
|
|
8
11
|
row: {},
|
|
@@ -11,29 +14,38 @@ const E = ["data-state"], H = { class: "flex items-center justify-center" }, I =
|
|
|
11
14
|
keyField: { default: "_id" },
|
|
12
15
|
selectable: { type: Boolean, default: !1 },
|
|
13
16
|
isSelected: { type: Boolean, default: !1 },
|
|
17
|
+
isIndeterminate: { type: Boolean, default: !1 },
|
|
14
18
|
hoverable: { type: Boolean, default: !0 },
|
|
15
19
|
striped: { type: Boolean, default: !1 },
|
|
16
20
|
compact: { type: Boolean, default: !1 },
|
|
17
21
|
size: { default: "md" },
|
|
18
|
-
cellBordered: { type: Boolean }
|
|
22
|
+
cellBordered: { type: Boolean },
|
|
23
|
+
treeMode: { type: Boolean, default: !1 },
|
|
24
|
+
depth: { default: 0 },
|
|
25
|
+
treeIndent: { default: 20 },
|
|
26
|
+
expandable: { type: Boolean, default: !1 },
|
|
27
|
+
expanded: { type: Boolean, default: !1 },
|
|
28
|
+
treeLoading: { type: Boolean, default: !1 },
|
|
29
|
+
isLastSibling: { type: Boolean, default: !1 },
|
|
30
|
+
ancestorLastFlags: { default: () => [] }
|
|
19
31
|
},
|
|
20
|
-
emits: ["select", "rowClick"],
|
|
21
|
-
setup(
|
|
22
|
-
const
|
|
23
|
-
if (!(!
|
|
24
|
-
return l.includes(".") ? l.split(".").reduce((t,
|
|
25
|
-
},
|
|
26
|
-
const
|
|
27
|
-
if (
|
|
28
|
-
const
|
|
29
|
-
|
|
32
|
+
emits: ["select", "rowClick", "toggleExpand"],
|
|
33
|
+
setup(e, { emit: C }) {
|
|
34
|
+
const s = e, f = C, a = (n, l) => {
|
|
35
|
+
if (!(!n || !l))
|
|
36
|
+
return l.includes(".") ? l.split(".").reduce((t, i) => t?.[i], n) : n[l];
|
|
37
|
+
}, S = (n, l, t) => n.format ? n.format(l, t) : l == null ? "-" : n.type === "number" ? new Intl.NumberFormat("en-US").format(Number(l)) : String(l), L = (n, l, t) => {
|
|
38
|
+
const i = [];
|
|
39
|
+
if (n.width && /(?:^|\s|:)w-/.test(n.width) && i.push(n.width), n.minWidth && /(?:^|\s|:)min-w-/.test(n.minWidth) && i.push(n.minWidth), n.capitalize && i.push("capitalize"), n.addStatusColor) {
|
|
40
|
+
const r = B(l);
|
|
41
|
+
r && i.push(r);
|
|
30
42
|
}
|
|
31
|
-
if (typeof
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
} else
|
|
35
|
-
return
|
|
36
|
-
},
|
|
43
|
+
if (typeof n.class == "function") {
|
|
44
|
+
const r = n.class(l, t);
|
|
45
|
+
r && i.push(r);
|
|
46
|
+
} else n.class && i.push(n.class);
|
|
47
|
+
return i.join(" ");
|
|
48
|
+
}, B = (n) => {
|
|
37
49
|
const l = {
|
|
38
50
|
active: "text-success font-medium",
|
|
39
51
|
inactive: "text-muted-foreground",
|
|
@@ -48,86 +60,141 @@ const E = ["data-state"], H = { class: "flex items-center justify-center" }, I =
|
|
|
48
60
|
high: "text-destructive font-medium",
|
|
49
61
|
medium: "text-warning font-medium",
|
|
50
62
|
low: "text-muted-foreground"
|
|
51
|
-
}, t = String(
|
|
63
|
+
}, t = String(n).toLowerCase().replace(/[-_\s]/g, "");
|
|
52
64
|
return l[t] || "";
|
|
53
|
-
},
|
|
65
|
+
}, T = (n) => ({
|
|
54
66
|
left: "text-left",
|
|
55
67
|
center: "text-center",
|
|
56
68
|
right: "text-right"
|
|
57
|
-
})[
|
|
58
|
-
const { size:
|
|
59
|
-
return
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
m
|
|
69
|
+
})[n.align || "left"], M = g(() => a(s.row, s.keyField)), F = () => {
|
|
70
|
+
const { size: n, compact: l, cellBordered: t } = s;
|
|
71
|
+
return n === "xs" || l ? `py-1.5! -text-fs-1.5! ${t ? "px-3!" : "pr-4 max-sm:pr-10!"}` : n === "sm" ? `py-2! -text-fs-1.5! ${t ? "px-3!" : "pr-5 max-sm:pr-10!"}` : n === "lg" ? `py-4! text-base ${t ? "px-4!" : "pr-7 max-sm:pr-12!"}` : `py-3! -text-fs-1.5! ${t ? "px-3.5!" : "pr-6! max-sm:pr-10!"}`;
|
|
72
|
+
}, m = j, z = g(
|
|
73
|
+
() => s.treeMode ? m + s.depth * s.treeIndent : 0
|
|
74
|
+
), N = g(() => {
|
|
75
|
+
const n = m + s.depth * s.treeIndent;
|
|
76
|
+
return s.expandable ? n + H + k : n + E;
|
|
77
|
+
}), $ = () => {
|
|
78
|
+
f("rowClick", { row: s.row, index: s.index });
|
|
79
|
+
}, A = () => {
|
|
80
|
+
f("select", M.value);
|
|
81
|
+
}, W = (n) => {
|
|
82
|
+
n.stopPropagation(), f("toggleExpand");
|
|
64
83
|
};
|
|
65
|
-
return (
|
|
66
|
-
class:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
84
|
+
return (n, l) => (o(), d("tr", {
|
|
85
|
+
class: x(["border-b data-[state=selected]:bg-muted h-full", [
|
|
86
|
+
e.hoverable ? "hover:bg-muted/20" : "",
|
|
87
|
+
e.striped && e.index % 2 === 1 ? "bg-muted/20" : "bg-background",
|
|
88
|
+
e.isSelected ? "bg-muted! hover:bg-muted/30" : "",
|
|
70
89
|
"group"
|
|
71
90
|
]]),
|
|
72
|
-
"data-state":
|
|
73
|
-
onClick:
|
|
91
|
+
"data-state": e.isSelected ? "selected" : void 0,
|
|
92
|
+
onClick: $
|
|
74
93
|
}, [
|
|
75
|
-
|
|
94
|
+
e.selectable ? (o(), d("td", {
|
|
76
95
|
key: 0,
|
|
77
96
|
class: "px-0! py-1! align-middle text-center",
|
|
78
|
-
onClick: l[0] || (l[0] =
|
|
97
|
+
onClick: l[0] || (l[0] = I(() => {
|
|
79
98
|
}, ["stop"]))
|
|
80
99
|
}, [
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
"model-value":
|
|
100
|
+
b("div", q, [
|
|
101
|
+
v(R, {
|
|
102
|
+
"model-value": e.isSelected,
|
|
103
|
+
indeterminate: e.isIndeterminate,
|
|
84
104
|
size: "xs",
|
|
85
|
-
"onUpdate:modelValue":
|
|
86
|
-
}, null, 8, ["model-value"])
|
|
105
|
+
"onUpdate:modelValue": A
|
|
106
|
+
}, null, 8, ["model-value", "indeterminate"])
|
|
87
107
|
])
|
|
88
|
-
])) :
|
|
89
|
-
(o(!0),
|
|
108
|
+
])) : w("", !0),
|
|
109
|
+
(o(!0), d(p, null, U(e.headers, (t, i) => (o(), d("td", {
|
|
90
110
|
key: t.field,
|
|
91
|
-
class:
|
|
92
|
-
|
|
93
|
-
|
|
111
|
+
class: x(["align-middle whitespace-normal wrap-break-word", [
|
|
112
|
+
F(),
|
|
113
|
+
T(t),
|
|
94
114
|
t.hideOnMobile ? "hidden md:table-cell" : "",
|
|
95
|
-
|
|
115
|
+
e.treeMode ? "max-w-none min-w-0" : "max-w-[400px]",
|
|
116
|
+
// Keep overflow clip on data cells; last column (actions) must stay visible
|
|
117
|
+
i === e.headers.length - 1 ? "overflow-visible" : "overflow-hidden",
|
|
118
|
+
// Tree chrome overlays the whole first cell (incl. padding) so branch
|
|
119
|
+
// lines join seamlessly across rows. overflow-visible lets the connector
|
|
120
|
+
// overlay bleed across the collapsed row border for continuous trunks.
|
|
121
|
+
e.treeMode && i === 0 ? "relative pl-0! overflow-visible!" : "",
|
|
122
|
+
L(t, a(e.row, t.field), e.row)
|
|
96
123
|
]]),
|
|
97
|
-
style:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
124
|
+
style: y(
|
|
125
|
+
e.treeMode ? void 0 : {
|
|
126
|
+
...t.width && !/(?:^|\s|:)w-/.test(t.width) ? { width: t.width } : {},
|
|
127
|
+
...t.minWidth && !/(?:^|\s|:)min-w-/.test(t.minWidth) ? { minWidth: t.minWidth } : {}
|
|
128
|
+
}
|
|
129
|
+
)
|
|
101
130
|
}, [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
131
|
+
e.treeMode && i === 0 ? (o(), d(p, { key: 0 }, [
|
|
132
|
+
v(c(O), {
|
|
133
|
+
depth: e.depth,
|
|
134
|
+
"is-last-sibling": e.isLastSibling,
|
|
135
|
+
"ancestor-last-flags": e.ancestorLastFlags,
|
|
136
|
+
"has-toggle": e.expandable,
|
|
137
|
+
indent: e.treeIndent,
|
|
138
|
+
"base-inset": c(m),
|
|
139
|
+
"content-gap": c(k),
|
|
140
|
+
"leaf-has-spacer": !1,
|
|
141
|
+
"leaf-inset": c(E),
|
|
142
|
+
"bleed-y": ""
|
|
143
|
+
}, null, 8, ["depth", "is-last-sibling", "ancestor-last-flags", "has-toggle", "indent", "base-inset", "content-gap", "leaf-inset"]),
|
|
144
|
+
e.expandable ? (o(), d("button", {
|
|
145
|
+
key: 0,
|
|
146
|
+
type: "button",
|
|
147
|
+
class: "absolute z-10 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors focus:outline-none",
|
|
148
|
+
style: y({ left: z.value + "px" }),
|
|
149
|
+
"aria-expanded": e.expanded,
|
|
150
|
+
onClick: W
|
|
151
|
+
}, [
|
|
152
|
+
e.treeLoading ? (o(), u(h, {
|
|
153
|
+
key: 0,
|
|
154
|
+
icon: "lucide:loader-2",
|
|
155
|
+
class: "h-4 w-4 animate-spin"
|
|
156
|
+
})) : (o(), u(h, {
|
|
157
|
+
key: 1,
|
|
158
|
+
icon: e.expanded ? "lucide:chevron-down" : "lucide:chevron-right",
|
|
159
|
+
class: "h-4 w-4"
|
|
160
|
+
}, null, 8, ["icon"]))
|
|
161
|
+
], 12, J)) : w("", !0)
|
|
162
|
+
], 64)) : w("", !0),
|
|
163
|
+
b("div", {
|
|
164
|
+
class: x([
|
|
165
|
+
"w-full min-w-0",
|
|
166
|
+
e.treeMode && i === 0 ? "relative flex items-center min-h-[28px] max-h-[80px] overflow-y-auto scrollbar-hide" : i === e.headers.length - 1 ? "overflow-visible" : "max-h-[80px] overflow-y-auto scrollbar-hide"
|
|
167
|
+
]),
|
|
168
|
+
style: y(e.treeMode && i === 0 ? { paddingLeft: N.value + "px" } : void 0)
|
|
169
|
+
}, [
|
|
170
|
+
V(n.$slots, t.field, {
|
|
171
|
+
value: a(e.row, t.field),
|
|
172
|
+
row: e.row,
|
|
173
|
+
index: e.index,
|
|
107
174
|
field: t.field
|
|
108
175
|
}, () => [
|
|
109
|
-
t.type === "price" ? (o(),
|
|
176
|
+
t.type === "price" ? (o(), u(G, {
|
|
110
177
|
key: 0,
|
|
111
|
-
value:
|
|
178
|
+
value: a(e.row, t.field),
|
|
112
179
|
class: "block",
|
|
113
|
-
title: String(
|
|
114
|
-
}, null, 8, ["value", "title"])) : t.type === "date" ? (o(),
|
|
180
|
+
title: String(a(e.row, t.field))
|
|
181
|
+
}, null, 8, ["value", "title"])) : t.type === "date" ? (o(), u(P, {
|
|
115
182
|
key: 1,
|
|
116
|
-
value:
|
|
183
|
+
value: a(e.row, t.field),
|
|
117
184
|
class: "block",
|
|
118
|
-
title: String(
|
|
119
|
-
}, null, 8, ["value", "title"])) : (o(),
|
|
185
|
+
title: String(a(e.row, t.field))
|
|
186
|
+
}, null, 8, ["value", "title"])) : (o(), d("span", {
|
|
120
187
|
key: 2,
|
|
121
188
|
class: "block",
|
|
122
|
-
title: String(
|
|
123
|
-
innerHTML:
|
|
124
|
-
}, null, 8,
|
|
189
|
+
title: String(a(e.row, t.field)),
|
|
190
|
+
innerHTML: S(t, a(e.row, t.field), e.row)
|
|
191
|
+
}, null, 8, K))
|
|
125
192
|
])
|
|
126
|
-
])
|
|
193
|
+
], 6)
|
|
127
194
|
], 6))), 128))
|
|
128
|
-
], 10,
|
|
195
|
+
], 10, Z));
|
|
129
196
|
}
|
|
130
197
|
});
|
|
131
198
|
export {
|
|
132
|
-
|
|
199
|
+
le as default
|
|
133
200
|
};
|
|
@@ -73,6 +73,16 @@ export interface DataTableProps {
|
|
|
73
73
|
variant?: 'default' | 'raised';
|
|
74
74
|
headerVariant?: 'default' | 'minimal';
|
|
75
75
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
76
|
+
/**
|
|
77
|
+
* Async loader for nested rows. Called when a row with `hasChildren: true`
|
|
78
|
+
* (and no cached/static `children`) is expanded. Return value is cached internally.
|
|
79
|
+
*/
|
|
80
|
+
loadChildren?: (row: any) => Promise<any[]>;
|
|
81
|
+
/**
|
|
82
|
+
* Horizontal indent per tree depth level in px. Applied by DataTable to the first column.
|
|
83
|
+
* @default 20
|
|
84
|
+
*/
|
|
85
|
+
treeIndent?: number;
|
|
76
86
|
}
|
|
77
87
|
export interface SelectionState {
|
|
78
88
|
selected: any[];
|
|
@@ -83,6 +93,26 @@ export interface RowClickPayload {
|
|
|
83
93
|
row: any;
|
|
84
94
|
index: number;
|
|
85
95
|
}
|
|
96
|
+
/**
|
|
97
|
+
* Emitted when a tree row is expanded or collapsed.
|
|
98
|
+
* Row conventions: `children?: any[]` (static) and/or `hasChildren?: boolean` (async marker).
|
|
99
|
+
*/
|
|
100
|
+
export interface ExpandPayload {
|
|
101
|
+
row: any;
|
|
102
|
+
expanded: boolean;
|
|
103
|
+
children?: any[];
|
|
104
|
+
depth: number;
|
|
105
|
+
}
|
|
106
|
+
/** Flattened visible tree row metadata used internally by DataTable. */
|
|
107
|
+
export interface DataTableFlatRow {
|
|
108
|
+
row: any;
|
|
109
|
+
id: any;
|
|
110
|
+
depth: number;
|
|
111
|
+
parentId: any | null;
|
|
112
|
+
isLastSibling: boolean;
|
|
113
|
+
ancestorLastFlags: boolean[];
|
|
114
|
+
index: number;
|
|
115
|
+
}
|
|
86
116
|
/**
|
|
87
117
|
* Shape provided by Screen to all deeply nested components via provide/inject.
|
|
88
118
|
*
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Ref, ComputedRef } from 'vue';
|
|
2
|
+
import { DataTableFlatRow, ExpandPayload } from './types';
|
|
3
|
+
export interface UseDataTableTreeOptions {
|
|
4
|
+
rows: Ref<any[]> | ComputedRef<any[]>;
|
|
5
|
+
keyField: Ref<string> | ComputedRef<string>;
|
|
6
|
+
loadChildren?: Ref<((row: any) => Promise<any[]>) | undefined> | ComputedRef<((row: any) => Promise<any[]>) | undefined>;
|
|
7
|
+
getRowId: (row: any, keyField: string) => any;
|
|
8
|
+
onExpand: (payload: ExpandPayload) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare function useDataTableTree({ rows, keyField, loadChildren, getRowId, onExpand, }: UseDataTableTreeOptions): {
|
|
11
|
+
isTreeMode: ComputedRef<boolean>;
|
|
12
|
+
expandedKeys: import('vue').ShallowRef<Set<any>, Set<any>>;
|
|
13
|
+
loadingKeys: import('vue').ShallowRef<Set<any>, Set<any>>;
|
|
14
|
+
childrenCache: import('vue').ShallowRef<Map<any, any[]>, Map<any, any[]>>;
|
|
15
|
+
flattenVisibleRows: ComputedRef<DataTableFlatRow[]>;
|
|
16
|
+
allLoadedRows: ComputedRef<Map<any, any>>;
|
|
17
|
+
findParentId: (id: any) => any | null;
|
|
18
|
+
getChildren: (row: any) => any[];
|
|
19
|
+
isExpandable: (row: any) => boolean;
|
|
20
|
+
isExpanded: (id: any) => boolean;
|
|
21
|
+
isLoading: (id: any) => boolean;
|
|
22
|
+
collectDescendantIds: (row: any) => any[];
|
|
23
|
+
toggleExpand: (row: any, depth: number) => Promise<void>;
|
|
24
|
+
pruneStaleTreeState: () => void;
|
|
25
|
+
};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { shallowRef as E, computed as g } from "vue";
|
|
2
|
+
import { EMPTY_ANCESTOR_LAST_FLAGS as D, appendAncestorLastFlag as P } from "../TreeConnectors/geometry.js";
|
|
3
|
+
const L = "children", G = "hasChildren";
|
|
4
|
+
function H(d) {
|
|
5
|
+
const c = d?.[L];
|
|
6
|
+
return Array.isArray(c) && c.length > 0;
|
|
7
|
+
}
|
|
8
|
+
function A(d) {
|
|
9
|
+
return d?.[G] === !0;
|
|
10
|
+
}
|
|
11
|
+
function q({
|
|
12
|
+
rows: d,
|
|
13
|
+
keyField: c,
|
|
14
|
+
loadChildren: S,
|
|
15
|
+
getRowId: f,
|
|
16
|
+
onExpand: T
|
|
17
|
+
}) {
|
|
18
|
+
const o = E(/* @__PURE__ */ new Set()), v = E(/* @__PURE__ */ new Set()), i = E(/* @__PURE__ */ new Map()), b = g(() => {
|
|
19
|
+
if (S?.value) return !0;
|
|
20
|
+
const e = (t) => {
|
|
21
|
+
for (const n of t) {
|
|
22
|
+
if (H(n) || A(n)) return !0;
|
|
23
|
+
const a = n?.[L];
|
|
24
|
+
if (Array.isArray(a) && e(a)) return !0;
|
|
25
|
+
}
|
|
26
|
+
return !1;
|
|
27
|
+
};
|
|
28
|
+
return e(d.value || []);
|
|
29
|
+
}), p = (e) => {
|
|
30
|
+
const t = f(e, c.value);
|
|
31
|
+
if (i.value.has(t))
|
|
32
|
+
return i.value.get(t) || [];
|
|
33
|
+
const n = e?.[L];
|
|
34
|
+
return Array.isArray(n) ? n : [];
|
|
35
|
+
}, C = (e) => {
|
|
36
|
+
const t = f(e, c.value);
|
|
37
|
+
return i.value.has(t) ? (i.value.get(t) || []).length > 0 : H(e) ? !0 : A(e);
|
|
38
|
+
}, K = (e) => o.value.has(e), N = (e) => v.value.has(e), I = (e) => {
|
|
39
|
+
const t = [], n = (a) => {
|
|
40
|
+
for (const l of p(a))
|
|
41
|
+
t.push(f(l, c.value)), n(l);
|
|
42
|
+
};
|
|
43
|
+
return n(e), t;
|
|
44
|
+
}, M = g(() => {
|
|
45
|
+
const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = (a, l) => {
|
|
46
|
+
for (const s of a) {
|
|
47
|
+
const h = f(s, c.value);
|
|
48
|
+
e.set(h, s), t.set(h, l);
|
|
49
|
+
const u = p(s);
|
|
50
|
+
u.length && n(u, h);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
return n(d.value || [], null), { byId: e, parentById: t };
|
|
54
|
+
}), m = g(() => M.value.byId), Y = (e) => M.value.parentById.get(e) ?? null, B = g(() => {
|
|
55
|
+
if (!b.value) {
|
|
56
|
+
const a = d.value || [];
|
|
57
|
+
return a.map((l, s) => ({
|
|
58
|
+
row: l,
|
|
59
|
+
id: f(l, c.value),
|
|
60
|
+
depth: 0,
|
|
61
|
+
parentId: null,
|
|
62
|
+
isLastSibling: s === a.length - 1,
|
|
63
|
+
ancestorLastFlags: D,
|
|
64
|
+
index: s
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
const e = [];
|
|
68
|
+
let t = 0;
|
|
69
|
+
const n = (a, l, s, h) => {
|
|
70
|
+
const u = a.length - 1;
|
|
71
|
+
for (let r = 0; r < a.length; r++) {
|
|
72
|
+
const x = a[r], y = f(x, c.value), _ = r === u;
|
|
73
|
+
if (e.push({
|
|
74
|
+
row: x,
|
|
75
|
+
id: y,
|
|
76
|
+
depth: l,
|
|
77
|
+
parentId: s,
|
|
78
|
+
isLastSibling: _,
|
|
79
|
+
ancestorLastFlags: h,
|
|
80
|
+
index: t++
|
|
81
|
+
}), o.value.has(y)) {
|
|
82
|
+
const w = p(x);
|
|
83
|
+
w.length > 0 && n(
|
|
84
|
+
w,
|
|
85
|
+
l + 1,
|
|
86
|
+
y,
|
|
87
|
+
P(h, _)
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
return n(d.value || [], 0, null, D), e;
|
|
93
|
+
});
|
|
94
|
+
return {
|
|
95
|
+
isTreeMode: b,
|
|
96
|
+
expandedKeys: o,
|
|
97
|
+
loadingKeys: v,
|
|
98
|
+
childrenCache: i,
|
|
99
|
+
flattenVisibleRows: B,
|
|
100
|
+
allLoadedRows: m,
|
|
101
|
+
findParentId: Y,
|
|
102
|
+
getChildren: p,
|
|
103
|
+
isExpandable: C,
|
|
104
|
+
isExpanded: K,
|
|
105
|
+
isLoading: N,
|
|
106
|
+
collectDescendantIds: I,
|
|
107
|
+
toggleExpand: async (e, t) => {
|
|
108
|
+
if (!C(e)) return;
|
|
109
|
+
const n = f(e, c.value);
|
|
110
|
+
if (o.value.has(n)) {
|
|
111
|
+
const u = new Set(o.value);
|
|
112
|
+
u.delete(n);
|
|
113
|
+
for (const r of I(e))
|
|
114
|
+
u.delete(r);
|
|
115
|
+
o.value = u, T({ row: e, expanded: !1, children: p(e), depth: t });
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
const l = new Set(o.value);
|
|
119
|
+
l.add(n), o.value = l;
|
|
120
|
+
let s = p(e);
|
|
121
|
+
if (!!S?.value && s.length === 0 && A(e) && !i.value.has(n) && S?.value) {
|
|
122
|
+
const u = new Set(v.value);
|
|
123
|
+
u.add(n), v.value = u;
|
|
124
|
+
try {
|
|
125
|
+
s = await S.value(e) || [];
|
|
126
|
+
const r = new Map(i.value);
|
|
127
|
+
r.set(n, s), i.value = r;
|
|
128
|
+
} finally {
|
|
129
|
+
const r = new Set(v.value);
|
|
130
|
+
r.delete(n), v.value = r;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
T({ row: e, expanded: !0, children: s, depth: t });
|
|
134
|
+
},
|
|
135
|
+
pruneStaleTreeState: () => {
|
|
136
|
+
const e = new Set(m.value.keys());
|
|
137
|
+
o.value = new Set([...o.value].filter((n) => e.has(n))), v.value = new Set([...v.value].filter((n) => e.has(n)));
|
|
138
|
+
const t = /* @__PURE__ */ new Map();
|
|
139
|
+
i.value.forEach((n, a) => {
|
|
140
|
+
e.has(a) && t.set(a, n);
|
|
141
|
+
}), i.value = t;
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
export {
|
|
146
|
+
q as useDataTableTree
|
|
147
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./FileTree.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import r from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fb5185c6"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|