@septkit/ui 0.0.60 → 0.0.62
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/diagram-layout/diagram-node-card.js +7 -0
- package/dist/diagram-layout/diagram-node-card.vue_vue_type_script_setup_true_lang.js +147 -0
- package/dist/diagram-layout/diagram-node-group.js +7 -0
- package/dist/diagram-layout/diagram-node-group.vue_vue_type_script_setup_true_lang.js +107 -0
- package/dist/diagram-layout/group-geometry.js +7 -0
- package/dist/diagram-layout/index.js +7 -4
- package/dist/external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/arrow-up-down.js +22 -0
- package/dist/external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/funnel.js +8 -0
- package/dist/external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/info.js +20 -0
- package/dist/index.d.ts +288 -6
- package/dist/index.js +18 -8
- package/dist/table/column-filter-context.js +13 -0
- package/dist/table/filterable-column-header.js +7 -0
- package/dist/table/filterable-column-header.vue_vue_type_script_setup_true_lang.js +175 -0
- package/dist/table/filters/build-filter-options.js +101 -0
- package/dist/table/filters/filter-popover.js +7 -0
- package/dist/table/filters/filter-popover.vue_vue_type_script_setup_true_lang.js +169 -0
- package/dist/table/filters/filter-tree-node.js +7 -0
- package/dist/table/filters/filter-tree-node.vue_vue_type_script_setup_true_lang.js +79 -0
- package/dist/table/filters/use-column-filters.js +61 -0
- package/dist/table/filters/use-row-sort.js +43 -0
- package/dist/table/index.js +7 -0
- package/dist/table/row-sort-context.js +11 -0
- package/dist/ui.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import e from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/arrow-down.js";
|
|
2
|
+
import t from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/arrow-up-down.js";
|
|
3
|
+
import n from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/arrow-up.js";
|
|
4
|
+
import r from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/funnel.js";
|
|
5
|
+
import i from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/x.js";
|
|
6
|
+
import { useColumnFilterHeaderContext as a } from "./column-filter-context.js";
|
|
7
|
+
import { useOptionalRowSortContext as o } from "./row-sort-context.js";
|
|
8
|
+
import s from "./filters/filter-popover.js";
|
|
9
|
+
import { Fragment as c, Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as ee, openBlock as b, ref as x, toDisplayString as te, unref as S, watch as C } from "vue";
|
|
10
|
+
//#region lib/table/filterable-column-header.vue?vue&type=script&setup=true&lang.ts
|
|
11
|
+
var ne = { class: "filterable-column-header" }, w = ["title"], T = ["aria-label", "title"], E = [
|
|
12
|
+
"aria-label",
|
|
13
|
+
"aria-pressed",
|
|
14
|
+
"aria-expanded",
|
|
15
|
+
"data-active"
|
|
16
|
+
], D = ["aria-label", "title"], O = ["aria-label"], k = 14, A = 9, j = 8, M = /*@__PURE__*/ g({
|
|
17
|
+
__name: "filterable-column-header",
|
|
18
|
+
props: {
|
|
19
|
+
columnId: {},
|
|
20
|
+
title: {}
|
|
21
|
+
},
|
|
22
|
+
setup(g) {
|
|
23
|
+
let M = g, N = a(), P = o(), F = u(() => N.getVariant(M.columnId)), I = u(() => N.isColumnActive(M.columnId)), L = x(/* @__PURE__ */ new Set()), R = u(() => F.value === "tree" ? N.getTreeOptions(M.columnId) : []), z = u(() => F.value === "tree" ? [] : N.getFlatOptions(M.columnId)), B = u(() => N.getLanguageOptions(M.columnId)), V = u(() => N.getLanguage(M.columnId)), re = u(() => P?.isSortable(M.columnId) ?? !1), H = u(() => P?.getDirection(M.columnId) ?? null);
|
|
24
|
+
function ie(e) {
|
|
25
|
+
N.setLanguage(M.columnId, e), L.value = N.getSelection(M.columnId);
|
|
26
|
+
}
|
|
27
|
+
let U = x(!1), W = x({
|
|
28
|
+
top: "0px",
|
|
29
|
+
left: "0px"
|
|
30
|
+
}), G = x(null), K = x(null), q = x("bottom"), J = x({ left: "0px" });
|
|
31
|
+
async function ae() {
|
|
32
|
+
L.value = N.getSelection(M.columnId), W.value = {
|
|
33
|
+
top: "-9999px",
|
|
34
|
+
left: "-9999px"
|
|
35
|
+
}, U.value = !0, await _(), Y();
|
|
36
|
+
}
|
|
37
|
+
function Y() {
|
|
38
|
+
let e = K.value, t = G.value;
|
|
39
|
+
if (!e || !t) return;
|
|
40
|
+
let n = e.getBoundingClientRect(), r = t.offsetWidth, i = t.offsetHeight, a = window.visualViewport?.width ?? window.innerWidth, o = window.visualViewport?.height ?? window.innerHeight, s = Math.max(j, a - r - j), c = Math.max(j, o - i - j), l = n.left + n.width / 2, u = n.bottom + A, d = n.top - A - i, f = u > c, p = f ? Math.max(j, d) : u, m = Math.min(Math.max(j, l - r / 2), s);
|
|
41
|
+
q.value = f ? "top" : "bottom";
|
|
42
|
+
let h = Math.min(Math.max(k, l - m - k / 2), r - k * 2);
|
|
43
|
+
J.value = { left: `${h}px` }, W.value = {
|
|
44
|
+
top: `${p}px`,
|
|
45
|
+
left: `${m}px`
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function X() {
|
|
49
|
+
U.value = !1, K.value?.focus();
|
|
50
|
+
}
|
|
51
|
+
function Z(e) {
|
|
52
|
+
e.key === "Escape" && X();
|
|
53
|
+
}
|
|
54
|
+
function oe(e) {
|
|
55
|
+
if (e.key !== "Tab") return;
|
|
56
|
+
let t = G.value?.querySelectorAll("button, input, [tabindex]:not([tabindex=\"-1\"])");
|
|
57
|
+
if (!t?.length) return;
|
|
58
|
+
let n = t[0], r = t[t.length - 1], i = window.document.activeElement;
|
|
59
|
+
e.shiftKey && i === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
|
|
60
|
+
}
|
|
61
|
+
C(U, (e) => {
|
|
62
|
+
e ? (window.addEventListener("keydown", Z), window.addEventListener("scroll", Y, !0), window.addEventListener("resize", Y)) : Q();
|
|
63
|
+
});
|
|
64
|
+
function Q() {
|
|
65
|
+
window.removeEventListener("keydown", Z), window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y);
|
|
66
|
+
}
|
|
67
|
+
ee(Q);
|
|
68
|
+
function se(e) {
|
|
69
|
+
N.apply(M.columnId, e), X();
|
|
70
|
+
}
|
|
71
|
+
function ce() {
|
|
72
|
+
N.reset(M.columnId);
|
|
73
|
+
}
|
|
74
|
+
function $() {
|
|
75
|
+
return H.value === "asc" ? `Sorted by ${M.title} ascending, click to sort descending` : H.value === "desc" ? `Sorted by ${M.title} descending, click to clear sorting` : `Sort by ${M.title}`;
|
|
76
|
+
}
|
|
77
|
+
return (a, o) => (b(), p("div", ne, [
|
|
78
|
+
m("span", {
|
|
79
|
+
class: "filterable-column-header__title",
|
|
80
|
+
title: g.title
|
|
81
|
+
}, te(g.title), 9, w),
|
|
82
|
+
re.value ? (b(), p("button", {
|
|
83
|
+
key: 0,
|
|
84
|
+
type: "button",
|
|
85
|
+
class: v(["filterable-column-header__sort", { "filterable-column-header__sort--active": H.value }]),
|
|
86
|
+
"aria-label": $(),
|
|
87
|
+
title: $(),
|
|
88
|
+
"data-testid": "column-sort-trigger",
|
|
89
|
+
onClick: o[0] ||= (e) => S(P)?.toggle(g.columnId)
|
|
90
|
+
}, [H.value === "asc" ? (b(), d(S(n), {
|
|
91
|
+
key: 0,
|
|
92
|
+
size: 14,
|
|
93
|
+
"aria-hidden": "true"
|
|
94
|
+
})) : H.value === "desc" ? (b(), d(S(e), {
|
|
95
|
+
key: 1,
|
|
96
|
+
size: 14,
|
|
97
|
+
"aria-hidden": "true"
|
|
98
|
+
})) : (b(), d(S(t), {
|
|
99
|
+
key: 2,
|
|
100
|
+
size: 14,
|
|
101
|
+
"aria-hidden": "true"
|
|
102
|
+
}))], 10, T)) : f("", !0),
|
|
103
|
+
m("button", {
|
|
104
|
+
ref_key: "funnelRef",
|
|
105
|
+
ref: K,
|
|
106
|
+
type: "button",
|
|
107
|
+
class: v(["filterable-column-header__funnel", { "filterable-column-header__funnel--active": I.value }]),
|
|
108
|
+
"aria-label": `Filter ${g.title}`,
|
|
109
|
+
"aria-pressed": I.value,
|
|
110
|
+
"aria-haspopup": "dialog",
|
|
111
|
+
"aria-expanded": U.value,
|
|
112
|
+
"data-active": I.value,
|
|
113
|
+
"data-testid": "column-filter-trigger",
|
|
114
|
+
onClick: ae
|
|
115
|
+
}, [h(S(r), {
|
|
116
|
+
size: 14,
|
|
117
|
+
"aria-hidden": "true"
|
|
118
|
+
})], 10, E),
|
|
119
|
+
I.value ? (b(), p("button", {
|
|
120
|
+
key: 1,
|
|
121
|
+
type: "button",
|
|
122
|
+
class: "filterable-column-header__reset",
|
|
123
|
+
"aria-label": `Reset ${g.title} filter`,
|
|
124
|
+
title: `Reset ${g.title} filter`,
|
|
125
|
+
"data-testid": "column-filter-reset",
|
|
126
|
+
onClick: ce
|
|
127
|
+
}, [h(S(i), {
|
|
128
|
+
size: 14,
|
|
129
|
+
"aria-hidden": "true"
|
|
130
|
+
})], 8, D)) : f("", !0),
|
|
131
|
+
(b(), d(l, { to: "body" }, [U.value ? (b(), p(c, { key: 0 }, [m("div", {
|
|
132
|
+
class: "filterable-column-header__backdrop",
|
|
133
|
+
onMousedown: X
|
|
134
|
+
}, null, 32), m("div", {
|
|
135
|
+
ref_key: "popoverWrapperRef",
|
|
136
|
+
ref: G,
|
|
137
|
+
role: "dialog",
|
|
138
|
+
"aria-modal": "true",
|
|
139
|
+
"aria-label": `Filter ${g.title}`,
|
|
140
|
+
style: y({
|
|
141
|
+
position: "fixed",
|
|
142
|
+
...W.value,
|
|
143
|
+
zIndex: 9999
|
|
144
|
+
}),
|
|
145
|
+
onKeydown: oe
|
|
146
|
+
}, [m("div", {
|
|
147
|
+
class: v(["filterable-column-header__arrow", `filterable-column-header__arrow--${q.value}`]),
|
|
148
|
+
style: y(J.value)
|
|
149
|
+
}, null, 6), h(s, {
|
|
150
|
+
title: `Filter ${g.title.toLowerCase()}`,
|
|
151
|
+
variant: F.value,
|
|
152
|
+
"initial-selection": L.value,
|
|
153
|
+
"tree-options": R.value,
|
|
154
|
+
"flat-options": z.value,
|
|
155
|
+
"language-options": B.value,
|
|
156
|
+
language: V.value,
|
|
157
|
+
"expand-all-by-default": S(N).expandAllByDefault(g.columnId),
|
|
158
|
+
onApply: se,
|
|
159
|
+
onCancel: X,
|
|
160
|
+
"onUpdate:language": ie
|
|
161
|
+
}, null, 8, [
|
|
162
|
+
"title",
|
|
163
|
+
"variant",
|
|
164
|
+
"initial-selection",
|
|
165
|
+
"tree-options",
|
|
166
|
+
"flat-options",
|
|
167
|
+
"language-options",
|
|
168
|
+
"language",
|
|
169
|
+
"expand-all-by-default"
|
|
170
|
+
])], 44, O)], 64)) : f("", !0)]))
|
|
171
|
+
]));
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
//#endregion
|
|
175
|
+
export { M as default };
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
//#region lib/table/filters/build-filter-options.ts
|
|
2
|
+
var e = "\0";
|
|
3
|
+
function t(e, t) {
|
|
4
|
+
let n = [], r = /* @__PURE__ */ new Map();
|
|
5
|
+
for (let i of e) {
|
|
6
|
+
let e = t(i), a = n, o = [], s;
|
|
7
|
+
for (let t of e) {
|
|
8
|
+
o.push(t);
|
|
9
|
+
let e = o.join("\0");
|
|
10
|
+
s = r.get(e), s || (s = {
|
|
11
|
+
key: e,
|
|
12
|
+
label: t,
|
|
13
|
+
children: []
|
|
14
|
+
}, r.set(e, s), a.push(s)), a = s.children;
|
|
15
|
+
}
|
|
16
|
+
s && (s.isTerminal = !0);
|
|
17
|
+
}
|
|
18
|
+
return c(n), n;
|
|
19
|
+
}
|
|
20
|
+
function n(e, t) {
|
|
21
|
+
let n = /* @__PURE__ */ new Set(), r = [];
|
|
22
|
+
for (let i of e) {
|
|
23
|
+
let e = t(i);
|
|
24
|
+
e === "" || n.has(e) || (n.add(e), r.push({
|
|
25
|
+
key: e,
|
|
26
|
+
label: e
|
|
27
|
+
}));
|
|
28
|
+
}
|
|
29
|
+
return r.sort((e, t) => e.label.localeCompare(t.label)), r;
|
|
30
|
+
}
|
|
31
|
+
var r = "\0no-value";
|
|
32
|
+
function i(e, t, n) {
|
|
33
|
+
let i = /* @__PURE__ */ new Set(), a = [], o = !1;
|
|
34
|
+
for (let n of e) {
|
|
35
|
+
let e = t(n).filter((e) => e !== "");
|
|
36
|
+
e.length === 0 && (o = !0);
|
|
37
|
+
for (let t of e) i.has(t) || (i.add(t), a.push({
|
|
38
|
+
key: t,
|
|
39
|
+
label: t
|
|
40
|
+
}));
|
|
41
|
+
}
|
|
42
|
+
return a.sort((e, t) => e.label.localeCompare(t.label)), o && a.unshift({
|
|
43
|
+
key: r,
|
|
44
|
+
label: n
|
|
45
|
+
}), a;
|
|
46
|
+
}
|
|
47
|
+
function a(e) {
|
|
48
|
+
let t = /* @__PURE__ */ new Set();
|
|
49
|
+
function n(e) {
|
|
50
|
+
if (e.children.length !== 0) {
|
|
51
|
+
t.add(e.key);
|
|
52
|
+
for (let t of e.children) n(t);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
if (Array.isArray(e)) for (let t of e) n(t);
|
|
56
|
+
else n(e);
|
|
57
|
+
return t;
|
|
58
|
+
}
|
|
59
|
+
function o(e) {
|
|
60
|
+
let t = /* @__PURE__ */ new Set();
|
|
61
|
+
function n(e) {
|
|
62
|
+
(e.isTerminal || e.children.length === 0) && t.add(e.key);
|
|
63
|
+
for (let t of e.children) n(t);
|
|
64
|
+
}
|
|
65
|
+
if (Array.isArray(e)) for (let t of e) n(t);
|
|
66
|
+
else n(e);
|
|
67
|
+
return t;
|
|
68
|
+
}
|
|
69
|
+
function s(e, t) {
|
|
70
|
+
let n = t.trim().toLowerCase(), r = /* @__PURE__ */ new Set();
|
|
71
|
+
if (!n) return {
|
|
72
|
+
nodes: e,
|
|
73
|
+
expandedKeys: r
|
|
74
|
+
};
|
|
75
|
+
function i(e) {
|
|
76
|
+
for (let t of e.children) t.children.length !== 0 && (r.add(t.key), i(t));
|
|
77
|
+
}
|
|
78
|
+
function a(e) {
|
|
79
|
+
let t = [];
|
|
80
|
+
for (let o of e) {
|
|
81
|
+
let e = o.label.toLowerCase().includes(n), s = a(o.children);
|
|
82
|
+
if (!e && s.length === 0) continue;
|
|
83
|
+
let c = e ? o.children : s;
|
|
84
|
+
t.push({
|
|
85
|
+
...o,
|
|
86
|
+
children: c
|
|
87
|
+
}), c.length > 0 && r.add(o.key), e && i(o);
|
|
88
|
+
}
|
|
89
|
+
return t;
|
|
90
|
+
}
|
|
91
|
+
return {
|
|
92
|
+
nodes: a(e),
|
|
93
|
+
expandedKeys: r
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
function c(e) {
|
|
97
|
+
e.sort((e, t) => e.label.localeCompare(t.label));
|
|
98
|
+
for (let t of e) c(t.children);
|
|
99
|
+
}
|
|
100
|
+
//#endregion
|
|
101
|
+
export { e as KEY_SEPARATOR, r as NO_VALUE_KEY, n as buildFlatOptions, i as buildMultiValueOptions, t as buildTreeOptions, o as collectLeafKeys, a as collectParentKeys, s as filterTree };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
2
|
+
import t from "./filter-popover.vue_vue_type_script_setup_true_lang.js";
|
|
3
|
+
/* empty css */
|
|
4
|
+
//#region lib/table/filters/filter-popover.vue
|
|
5
|
+
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e3ad5df3"]]);
|
|
6
|
+
//#endregion
|
|
7
|
+
export { n as default };
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { collectLeafKeys as e, collectParentKeys as t, filterTree as n } from "./build-filter-options.js";
|
|
2
|
+
import r from "./filter-tree-node.js";
|
|
3
|
+
import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, onMounted as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, vModelText as _, watch as v, withDirectives as y } from "vue";
|
|
4
|
+
//#region lib/table/filters/filter-popover.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var b = {
|
|
6
|
+
class: "filter-popover",
|
|
7
|
+
"data-testid": "filter-popover"
|
|
8
|
+
}, x = { class: "filter-popover__title" }, S = {
|
|
9
|
+
key: 0,
|
|
10
|
+
class: "filter-popover__search"
|
|
11
|
+
}, C = {
|
|
12
|
+
key: 1,
|
|
13
|
+
class: "filter-popover__bulk"
|
|
14
|
+
}, w = {
|
|
15
|
+
key: 0,
|
|
16
|
+
class: "filter-popover__language",
|
|
17
|
+
role: "group",
|
|
18
|
+
"aria-label": "Language filter"
|
|
19
|
+
}, T = ["aria-pressed"], E = [
|
|
20
|
+
"aria-pressed",
|
|
21
|
+
"data-testid",
|
|
22
|
+
"onClick"
|
|
23
|
+
], D = { class: "filter-popover__bulk-actions" }, O = ["disabled"], ee = ["disabled"], k = { class: "filter-popover__list" }, A = {
|
|
24
|
+
key: 0,
|
|
25
|
+
class: "filter-popover__empty"
|
|
26
|
+
}, j = { class: "filter-popover__flat-label" }, M = ["checked", "onChange"], N = { class: "filter-popover__flat-text" }, P = {
|
|
27
|
+
key: 0,
|
|
28
|
+
class: "filter-popover__empty"
|
|
29
|
+
}, F = { class: "filter-popover__footer" }, I = { class: "filter-popover__footer-actions" }, L = /*@__PURE__*/ u({
|
|
30
|
+
__name: "filter-popover",
|
|
31
|
+
props: {
|
|
32
|
+
title: {},
|
|
33
|
+
variant: {},
|
|
34
|
+
initialSelection: {},
|
|
35
|
+
treeOptions: { default: () => [] },
|
|
36
|
+
flatOptions: { default: () => [] },
|
|
37
|
+
languageOptions: { default: () => [] },
|
|
38
|
+
language: { default: "ALL" },
|
|
39
|
+
expandAllByDefault: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
default: !1
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
emits: [
|
|
45
|
+
"apply",
|
|
46
|
+
"cancel",
|
|
47
|
+
"update:language"
|
|
48
|
+
],
|
|
49
|
+
setup(u, { emit: L }) {
|
|
50
|
+
let R = u, z = L, B = m(new Set(R.initialSelection));
|
|
51
|
+
v(() => R.initialSelection, (e) => {
|
|
52
|
+
B.value = new Set(e);
|
|
53
|
+
});
|
|
54
|
+
let V = m(""), H = m(/* @__PURE__ */ new Set());
|
|
55
|
+
v(() => R.treeOptions, (e) => {
|
|
56
|
+
R.variant === "tree" && R.expandAllByDefault && (H.value = t(e));
|
|
57
|
+
}, { immediate: !0 });
|
|
58
|
+
let U = a(() => n(R.treeOptions, V.value)), W = a(() => U.value.nodes), G = a(() => V.value.trim() ? U.value.expandedKeys : H.value), K = a(() => {
|
|
59
|
+
let e = V.value.trim().toLowerCase();
|
|
60
|
+
return e ? R.flatOptions.filter((t) => t.label.toLowerCase().includes(e)) : R.flatOptions;
|
|
61
|
+
}), q = a(() => R.variant === "tree" ? e(W.value) : new Set(K.value.map((e) => e.key))), J = null;
|
|
62
|
+
v(V, (e, t) => {
|
|
63
|
+
let n = e.trim(), r = (t ?? "").trim();
|
|
64
|
+
n ? (r || (J = new Set(B.value)), B.value = new Set(q.value)) : r && (B.value = J ?? B.value, J = null);
|
|
65
|
+
});
|
|
66
|
+
let Y = m(null);
|
|
67
|
+
f(() => requestAnimationFrame(() => Y.value?.focus()));
|
|
68
|
+
function X(e, t) {
|
|
69
|
+
for (let n of e) t ? B.value.add(n) : B.value.delete(n);
|
|
70
|
+
}
|
|
71
|
+
function Z(t) {
|
|
72
|
+
let n = e(t);
|
|
73
|
+
X(n, ![...n].every((e) => B.value.has(e)));
|
|
74
|
+
}
|
|
75
|
+
function Q(e) {
|
|
76
|
+
H.value.has(e) ? H.value.delete(e) : H.value.add(e);
|
|
77
|
+
}
|
|
78
|
+
function te(e) {
|
|
79
|
+
B.value.has(e.key) ? B.value.delete(e.key) : B.value.add(e.key);
|
|
80
|
+
}
|
|
81
|
+
let $ = a(() => R.variant === "tree" ? e(R.treeOptions) : new Set(R.flatOptions.map((e) => e.key))), ne = a(() => {
|
|
82
|
+
for (let e of $.value) if (!B.value.has(e)) return !1;
|
|
83
|
+
return !0;
|
|
84
|
+
});
|
|
85
|
+
function re() {
|
|
86
|
+
X($.value, !0);
|
|
87
|
+
}
|
|
88
|
+
function ie() {
|
|
89
|
+
B.value.clear();
|
|
90
|
+
}
|
|
91
|
+
function ae() {
|
|
92
|
+
z("apply", new Set(B.value));
|
|
93
|
+
}
|
|
94
|
+
return (e, t) => (p(), c("div", b, [
|
|
95
|
+
l("p", x, g(u.title), 1),
|
|
96
|
+
u.variant === "value" ? s("", !0) : (p(), c("div", S, [y(l("input", {
|
|
97
|
+
ref_key: "searchRef",
|
|
98
|
+
ref: Y,
|
|
99
|
+
"onUpdate:modelValue": t[0] ||= (e) => V.value = e,
|
|
100
|
+
type: "text",
|
|
101
|
+
class: "filter-popover__search-input",
|
|
102
|
+
placeholder: "Search filter",
|
|
103
|
+
"aria-label": "Search filter",
|
|
104
|
+
autocomplete: "off",
|
|
105
|
+
"data-testid": "filter-popover-search"
|
|
106
|
+
}, null, 512), [[_, V.value]])])),
|
|
107
|
+
u.variant === "value" ? s("", !0) : (p(), c("div", C, [u.languageOptions.length ? (p(), c("div", w, [l("button", {
|
|
108
|
+
type: "button",
|
|
109
|
+
class: d(["filter-popover__language-option", { "filter-popover__language-option--active": u.language === "ALL" }]),
|
|
110
|
+
"aria-pressed": u.language === "ALL",
|
|
111
|
+
"data-testid": "filter-popover-language-all",
|
|
112
|
+
onClick: t[1] ||= (e) => z("update:language", "ALL")
|
|
113
|
+
}, " All ", 10, T), (p(!0), c(i, null, h(u.languageOptions, (e) => (p(), c("button", {
|
|
114
|
+
key: e,
|
|
115
|
+
type: "button",
|
|
116
|
+
class: d(["filter-popover__language-option", { "filter-popover__language-option--active": u.language === e }]),
|
|
117
|
+
"aria-pressed": u.language === e,
|
|
118
|
+
"data-testid": `filter-popover-language-${e}`,
|
|
119
|
+
onClick: (t) => z("update:language", e)
|
|
120
|
+
}, g(e), 11, E))), 128))])) : s("", !0), l("div", D, [l("button", {
|
|
121
|
+
type: "button",
|
|
122
|
+
class: "filter-popover__bulk-action",
|
|
123
|
+
disabled: ne.value,
|
|
124
|
+
"data-testid": "filter-popover-select-all",
|
|
125
|
+
onClick: re
|
|
126
|
+
}, " Select all ", 8, O), l("button", {
|
|
127
|
+
type: "button",
|
|
128
|
+
class: "filter-popover__bulk-action",
|
|
129
|
+
disabled: B.value.size === 0,
|
|
130
|
+
"data-testid": "filter-popover-clear",
|
|
131
|
+
onClick: ie
|
|
132
|
+
}, " Clear selection ", 8, ee)])])),
|
|
133
|
+
l("ul", k, [u.variant === "tree" ? (p(), c(i, { key: 0 }, [(p(!0), c(i, null, h(W.value, (e) => (p(), o(r, {
|
|
134
|
+
key: e.key,
|
|
135
|
+
node: e,
|
|
136
|
+
draft: B.value,
|
|
137
|
+
"expanded-keys": G.value,
|
|
138
|
+
onToggle: Z,
|
|
139
|
+
onToggleExpand: Q
|
|
140
|
+
}, null, 8, [
|
|
141
|
+
"node",
|
|
142
|
+
"draft",
|
|
143
|
+
"expanded-keys"
|
|
144
|
+
]))), 128)), W.value.length ? s("", !0) : (p(), c("li", A, "No options found"))], 64)) : (p(), c(i, { key: 1 }, [(p(!0), c(i, null, h(K.value, (e) => (p(), c("li", {
|
|
145
|
+
key: e.key,
|
|
146
|
+
class: "filter-popover__flat-item"
|
|
147
|
+
}, [l("label", j, [l("input", {
|
|
148
|
+
type: "checkbox",
|
|
149
|
+
class: "checkbox checkbox-sm",
|
|
150
|
+
checked: B.value.has(e.key),
|
|
151
|
+
"data-testid": "filter-popover-flat-checkbox",
|
|
152
|
+
onChange: (t) => te(e)
|
|
153
|
+
}, null, 40, M), l("span", N, g(e.label), 1)])]))), 128)), K.value.length ? s("", !0) : (p(), c("li", P, "No options found"))], 64))]),
|
|
154
|
+
l("div", F, [l("div", I, [l("button", {
|
|
155
|
+
type: "button",
|
|
156
|
+
class: "btn btn-sm btn-ghost",
|
|
157
|
+
"data-testid": "filter-popover-cancel",
|
|
158
|
+
onClick: t[2] ||= (e) => z("cancel")
|
|
159
|
+
}, " Cancel "), l("button", {
|
|
160
|
+
type: "button",
|
|
161
|
+
class: "btn btn-sm btn-primary",
|
|
162
|
+
"data-testid": "filter-popover-apply",
|
|
163
|
+
onClick: ae
|
|
164
|
+
}, " Apply ")])])
|
|
165
|
+
]));
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
//#endregion
|
|
169
|
+
export { L as default };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
2
|
+
import t from "./filter-tree-node.vue_vue_type_script_setup_true_lang.js";
|
|
3
|
+
/* empty css */
|
|
4
|
+
//#region lib/table/filters/filter-tree-node.vue
|
|
5
|
+
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-2ae9bf73"]]);
|
|
6
|
+
//#endregion
|
|
7
|
+
export { n as default };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import e from "../../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/chevron-right.js";
|
|
2
|
+
import { collectLeafKeys as t } from "./build-filter-options.js";
|
|
3
|
+
import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, resolveComponent as h, toDisplayString as g, unref as _, watchEffect as v } from "vue";
|
|
4
|
+
//#region lib/table/filters/filter-tree-node.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var y = { class: "filter-tree-node" }, b = ["aria-expanded", "aria-label"], x = {
|
|
6
|
+
key: 1,
|
|
7
|
+
class: "filter-tree-node__caret-spacer"
|
|
8
|
+
}, S = { class: "filter-tree-node__label" }, C = ["checked"], w = { class: "filter-tree-node__label-text" }, T = {
|
|
9
|
+
key: 0,
|
|
10
|
+
class: "filter-tree-node__children"
|
|
11
|
+
}, E = /*@__PURE__*/ l({
|
|
12
|
+
name: "FilterTreeNode",
|
|
13
|
+
__name: "filter-tree-node",
|
|
14
|
+
props: {
|
|
15
|
+
node: {},
|
|
16
|
+
draft: {},
|
|
17
|
+
expandedKeys: {},
|
|
18
|
+
depth: { default: 0 }
|
|
19
|
+
},
|
|
20
|
+
emits: ["toggle", "toggleExpand"],
|
|
21
|
+
setup(l, { emit: E }) {
|
|
22
|
+
let D = l, O = E, k = r(() => D.node.children.length > 0), A = r(() => D.expandedKeys.has(D.node.key)), j = r(() => t(D.node)), M = r(() => {
|
|
23
|
+
let e = 0;
|
|
24
|
+
for (let t of j.value) D.draft.has(t) && (e += 1);
|
|
25
|
+
return e;
|
|
26
|
+
}), N = r(() => M.value > 0 && M.value === j.value.size), P = r(() => M.value > 0 && M.value < j.value.size), F = p(null);
|
|
27
|
+
v(() => {
|
|
28
|
+
F.value && (F.value.indeterminate = P.value);
|
|
29
|
+
}, { flush: "post" });
|
|
30
|
+
function I() {
|
|
31
|
+
O("toggle", D.node);
|
|
32
|
+
}
|
|
33
|
+
function L() {
|
|
34
|
+
O("toggleExpand", D.node.key);
|
|
35
|
+
}
|
|
36
|
+
return (t, r) => {
|
|
37
|
+
let p = h("FilterTreeNode", !0);
|
|
38
|
+
return f(), o("li", y, [s("div", {
|
|
39
|
+
class: "filter-tree-node__row",
|
|
40
|
+
style: d({ paddingLeft: `${l.depth * 1.1}rem` })
|
|
41
|
+
}, [k.value ? (f(), o("button", {
|
|
42
|
+
key: 0,
|
|
43
|
+
type: "button",
|
|
44
|
+
class: "filter-tree-node__caret",
|
|
45
|
+
"aria-expanded": A.value,
|
|
46
|
+
"aria-label": `${A.value ? "Collapse" : "Expand"} ${l.node.label}`,
|
|
47
|
+
"data-testid": "filter-tree-caret",
|
|
48
|
+
onClick: L
|
|
49
|
+
}, [c(_(e), {
|
|
50
|
+
size: 14,
|
|
51
|
+
"aria-hidden": "true",
|
|
52
|
+
class: u(["filter-tree-node__caret-icon", { "filter-tree-node__caret-icon--open": A.value }])
|
|
53
|
+
}, null, 8, ["class"])], 8, b)) : (f(), o("span", x)), s("label", S, [s("input", {
|
|
54
|
+
ref_key: "checkboxRef",
|
|
55
|
+
ref: F,
|
|
56
|
+
type: "checkbox",
|
|
57
|
+
class: "checkbox checkbox-sm",
|
|
58
|
+
checked: N.value,
|
|
59
|
+
"data-testid": "filter-tree-checkbox",
|
|
60
|
+
onChange: I
|
|
61
|
+
}, null, 40, C), s("span", w, g(l.node.label), 1)])], 4), k.value && A.value ? (f(), o("ul", T, [(f(!0), o(n, null, m(l.node.children, (e) => (f(), i(p, {
|
|
62
|
+
key: e.key,
|
|
63
|
+
node: e,
|
|
64
|
+
draft: l.draft,
|
|
65
|
+
"expanded-keys": l.expandedKeys,
|
|
66
|
+
depth: l.depth + 1,
|
|
67
|
+
onToggle: r[0] ||= (e) => O("toggle", e),
|
|
68
|
+
onToggleExpand: r[1] ||= (e) => O("toggleExpand", e)
|
|
69
|
+
}, null, 8, [
|
|
70
|
+
"node",
|
|
71
|
+
"draft",
|
|
72
|
+
"expanded-keys",
|
|
73
|
+
"depth"
|
|
74
|
+
]))), 128))])) : a("", !0)]);
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
//#endregion
|
|
79
|
+
export { E as default };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { computed as e, reactive as t } from "vue";
|
|
2
|
+
//#region lib/table/filters/use-column-filters.ts
|
|
3
|
+
function n(n) {
|
|
4
|
+
let { columns: r, rows: i, strategies: a } = n, o = t(Object.fromEntries(r.map((e) => [e, null]))), s = e(() => {
|
|
5
|
+
let e = {};
|
|
6
|
+
for (let t of r) e[t] = a[t].keyUniverse(i.value);
|
|
7
|
+
return e;
|
|
8
|
+
});
|
|
9
|
+
function c(e) {
|
|
10
|
+
return new Set(s.value[e]);
|
|
11
|
+
}
|
|
12
|
+
function l(e) {
|
|
13
|
+
let t = a[e];
|
|
14
|
+
if (t.isExtraActive?.()) return !0;
|
|
15
|
+
let n = o[e];
|
|
16
|
+
if (!n) return !1;
|
|
17
|
+
if (!t.openWithAllSelected) return n.size > 0;
|
|
18
|
+
for (let t of s.value[e]) if (!n.has(t)) return !0;
|
|
19
|
+
return !1;
|
|
20
|
+
}
|
|
21
|
+
let u = e(() => r.filter(l)), d = e(() => u.value.length > 0);
|
|
22
|
+
function f(e, t) {
|
|
23
|
+
if (!a[e].openWithAllSelected) {
|
|
24
|
+
o[e] = t.size > 0 ? new Set(t) : null;
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
let n = s.value[e], r = !0;
|
|
28
|
+
for (let e of n) if (!t.has(e)) {
|
|
29
|
+
r = !1;
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
o[e] = r ? null : new Set(t);
|
|
33
|
+
}
|
|
34
|
+
function p(e) {
|
|
35
|
+
o[e] = null, a[e].onReset?.();
|
|
36
|
+
}
|
|
37
|
+
function m() {
|
|
38
|
+
for (let e of r) p(e);
|
|
39
|
+
}
|
|
40
|
+
function h(e) {
|
|
41
|
+
let t = o[e];
|
|
42
|
+
return a[e].openWithAllSelected ? t ? new Set(t) : new Set(s.value[e]) : new Set(t ?? []);
|
|
43
|
+
}
|
|
44
|
+
function g(e) {
|
|
45
|
+
for (let t of u.value) if (!a[t].matches(e, o[t])) return !1;
|
|
46
|
+
return !0;
|
|
47
|
+
}
|
|
48
|
+
return {
|
|
49
|
+
selections: o,
|
|
50
|
+
anyActive: d,
|
|
51
|
+
isColumnActive: l,
|
|
52
|
+
apply: f,
|
|
53
|
+
reset: p,
|
|
54
|
+
resetAll: m,
|
|
55
|
+
predicate: g,
|
|
56
|
+
getSelection: h,
|
|
57
|
+
getAllKeys: c
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
//#endregion
|
|
61
|
+
export { n as useColumnFilters };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { ref as e } from "vue";
|
|
2
|
+
//#region lib/table/filters/use-row-sort.ts
|
|
3
|
+
function t(t) {
|
|
4
|
+
let { sortAccessors: n } = t, r = e(null), i = e("asc");
|
|
5
|
+
function a(e) {
|
|
6
|
+
return n[e];
|
|
7
|
+
}
|
|
8
|
+
function o(e) {
|
|
9
|
+
return a(e) !== void 0;
|
|
10
|
+
}
|
|
11
|
+
function s(e) {
|
|
12
|
+
return r.value === e ? i.value : null;
|
|
13
|
+
}
|
|
14
|
+
function c(e) {
|
|
15
|
+
if (o(e)) {
|
|
16
|
+
if (r.value !== e) {
|
|
17
|
+
r.value = e, i.value = "asc";
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (i.value === "asc") {
|
|
21
|
+
i.value = "desc";
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
r.value = null, i.value = "asc";
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function l(e) {
|
|
28
|
+
let t = r.value;
|
|
29
|
+
if (!t) return e;
|
|
30
|
+
let n = a(t);
|
|
31
|
+
if (!n) return e;
|
|
32
|
+
let o = i.value === "asc" ? 1 : -1;
|
|
33
|
+
return [...e].sort((e, t) => o * n(e).localeCompare(n(t)));
|
|
34
|
+
}
|
|
35
|
+
return {
|
|
36
|
+
isSortable: o,
|
|
37
|
+
getDirection: s,
|
|
38
|
+
toggle: c,
|
|
39
|
+
apply: l
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
43
|
+
export { t as useRowSort };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { KEY_SEPARATOR as e, NO_VALUE_KEY as t, buildFlatOptions as n, buildMultiValueOptions as r, buildTreeOptions as i, collectLeafKeys as a, collectParentKeys as o, filterTree as s } from "./filters/build-filter-options.js";
|
|
2
|
+
import { useColumnFilters as c } from "./filters/use-column-filters.js";
|
|
3
|
+
import { useRowSort as l } from "./filters/use-row-sort.js";
|
|
4
|
+
import { provideColumnFilterHeader as u, useColumnFilterHeaderContext as d } from "./column-filter-context.js";
|
|
5
|
+
import { provideRowSortHeader as f, useOptionalRowSortContext as p } from "./row-sort-context.js";
|
|
6
|
+
import m from "./filterable-column-header.js";
|
|
7
|
+
export { m as FilterableColumnHeader, e as KEY_SEPARATOR, t as NO_VALUE_KEY, n as buildFlatOptions, r as buildMultiValueOptions, i as buildTreeOptions, a as collectLeafKeys, o as collectParentKeys, s as filterTree, u as provideColumnFilterHeader, f as provideRowSortHeader, d as useColumnFilterHeaderContext, c as useColumnFilters, p as useOptionalRowSortContext, l as useRowSort };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { inject as e, provide as t } from "vue";
|
|
2
|
+
//#region lib/table/row-sort-context.ts
|
|
3
|
+
var n = Symbol("row-sort-header");
|
|
4
|
+
function r(e) {
|
|
5
|
+
t(n, e);
|
|
6
|
+
}
|
|
7
|
+
function i() {
|
|
8
|
+
return e(n, void 0);
|
|
9
|
+
}
|
|
10
|
+
//#endregion
|
|
11
|
+
export { r as provideRowSortHeader, i as useOptionalRowSortContext };
|