vlite3 0.6.6 → 0.6.7
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/DataTable/DataTable.vue.js +232 -209
- package/components/DataTable/types.d.ts +15 -0
- package/components/DataTable/types.js +4 -0
- package/components/Dropdown/Dropdown.vue.js +13 -21
- package/components/Modal.vue.js +2 -2
- package/components/Modal.vue2.js +58 -56
- package/components/PermissionMatrix/PermissionEditor.vue.d.ts +0 -12
- package/components/PermissionMatrix/PermissionEditor.vue.js +120 -524
- package/components/PermissionMatrix/PermissionEditorList.vue.d.ts +18 -0
- package/components/PermissionMatrix/PermissionEditorList.vue.js +156 -0
- package/components/PermissionMatrix/PermissionEditorList.vue2.js +4 -0
- package/components/PermissionMatrix/PermissionEditorMatrix.vue.d.ts +18 -0
- package/components/PermissionMatrix/PermissionEditorMatrix.vue.js +207 -0
- package/components/PermissionMatrix/PermissionEditorMatrix.vue2.js +4 -0
- package/components/PermissionMatrix/PermissionTopBar.vue.d.ts +28 -0
- package/components/PermissionMatrix/PermissionTopBar.vue.js +132 -0
- package/components/PermissionMatrix/PermissionTopBar.vue2.js +4 -0
- package/components/PermissionMatrix/utils.d.ts +11 -0
- package/components/PermissionMatrix/utils.js +20 -0
- package/components/Screen/Screen.vue.js +113 -107
- package/components/SidePanel.vue.js +57 -53
- package/index.js +179 -177
- package/package.json +1 -1
- package/style.css +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { PermissionGroup, PermissionToggleMode, PermissionMatrixSize } from './types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
groups: PermissionGroup[];
|
|
4
|
+
modelValue: string[];
|
|
5
|
+
collapsedGroups: Set<string>;
|
|
6
|
+
toggleMode: PermissionToggleMode;
|
|
7
|
+
readonly: boolean;
|
|
8
|
+
size: PermissionMatrixSize;
|
|
9
|
+
collapsible: boolean;
|
|
10
|
+
};
|
|
11
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
12
|
+
"update:modelValue": (val: string[]) => any;
|
|
13
|
+
toggleCollapse: (groupKey: string) => any;
|
|
14
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
15
|
+
"onUpdate:modelValue"?: (val: string[]) => any;
|
|
16
|
+
onToggleCollapse?: (groupKey: string) => any;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
18
|
+
export default _default;
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { defineComponent as M, computed as $, openBlock as o, createElementBlock as c, createVNode as w, createElementVNode as a, normalizeClass as r, Fragment as g, renderList as C, createBlock as u, createCommentVNode as y, toDisplayString as x, withModifiers as N, withCtx as P } from "vue";
|
|
2
|
+
import U from "../CheckBox.vue.js";
|
|
3
|
+
import B from "../Switch.vue.js";
|
|
4
|
+
import k from "../Icon.vue.js";
|
|
5
|
+
import E from "../Tooltip.vue.js";
|
|
6
|
+
const S = {
|
|
7
|
+
key: 0,
|
|
8
|
+
class: "text-center py-12 text-muted-foreground"
|
|
9
|
+
}, j = {
|
|
10
|
+
key: 1,
|
|
11
|
+
class: "space-y-0 border rounded-lg overflow-hidden"
|
|
12
|
+
}, L = ["onClick"], A = { class: "flex items-center gap-2" }, D = { key: 0 }, F = { class: "flex items-center gap-2 pl-6" }, q = { class: "flex items-center" }, R = /* @__PURE__ */ M({
|
|
13
|
+
__name: "PermissionEditorList",
|
|
14
|
+
props: {
|
|
15
|
+
groups: {},
|
|
16
|
+
modelValue: {},
|
|
17
|
+
collapsedGroups: {},
|
|
18
|
+
toggleMode: {},
|
|
19
|
+
readonly: { type: Boolean },
|
|
20
|
+
size: {},
|
|
21
|
+
collapsible: { type: Boolean }
|
|
22
|
+
},
|
|
23
|
+
emits: ["update:modelValue", "toggleCollapse"],
|
|
24
|
+
setup(l, { emit: G }) {
|
|
25
|
+
const s = l, b = G, h = $(() => s.size === "sm" ? "text-xs" : "text-sm"), p = $(() => s.size === "sm" ? "px-3 py-1.5" : "px-4 py-2.5");
|
|
26
|
+
function m(n) {
|
|
27
|
+
return s.modelValue.includes(n);
|
|
28
|
+
}
|
|
29
|
+
function V(n) {
|
|
30
|
+
if (s.readonly) return;
|
|
31
|
+
const i = m(n) ? s.modelValue.filter((e) => e !== n) : [...s.modelValue, n];
|
|
32
|
+
b("update:modelValue", i);
|
|
33
|
+
}
|
|
34
|
+
function f(n) {
|
|
35
|
+
const i = n.permissions, e = i.filter((d) => m(d.key));
|
|
36
|
+
return e.length === 0 ? "none" : e.length === i.length ? "all" : "indeterminate";
|
|
37
|
+
}
|
|
38
|
+
function z(n) {
|
|
39
|
+
if (s.readonly) return;
|
|
40
|
+
const i = f(n), e = n.permissions.map((t) => t.key);
|
|
41
|
+
let d;
|
|
42
|
+
if (i === "all")
|
|
43
|
+
d = s.modelValue.filter((t) => !e.includes(t));
|
|
44
|
+
else {
|
|
45
|
+
const t = e.filter((v) => !s.modelValue.includes(v));
|
|
46
|
+
d = [...s.modelValue, ...t];
|
|
47
|
+
}
|
|
48
|
+
b("update:modelValue", d);
|
|
49
|
+
}
|
|
50
|
+
return (n, i) => l.groups.length === 0 ? (o(), c("div", S, [
|
|
51
|
+
w(k, {
|
|
52
|
+
icon: "lucide:search-x",
|
|
53
|
+
class: "w-8 h-8 mx-auto mb-3 opacity-50"
|
|
54
|
+
}),
|
|
55
|
+
a("p", {
|
|
56
|
+
class: r(h.value)
|
|
57
|
+
}, "No permissions match your filters.", 2)
|
|
58
|
+
])) : (o(), c("div", j, [
|
|
59
|
+
(o(!0), c(g, null, C(l.groups, (e, d) => (o(), c(g, {
|
|
60
|
+
key: e.key
|
|
61
|
+
}, [
|
|
62
|
+
a("div", {
|
|
63
|
+
class: r([
|
|
64
|
+
p.value,
|
|
65
|
+
"flex items-center justify-between bg-muted cursor-pointer select-none",
|
|
66
|
+
d > 0 ? "border-t" : ""
|
|
67
|
+
]),
|
|
68
|
+
onClick: (t) => n.$emit("toggleCollapse", e.key)
|
|
69
|
+
}, [
|
|
70
|
+
a("div", A, [
|
|
71
|
+
l.collapsible ? (o(), u(k, {
|
|
72
|
+
key: 0,
|
|
73
|
+
icon: "lucide:chevron-right",
|
|
74
|
+
class: r(["w-3.5 h-3.5 transition-transform duration-200 text-muted-foreground", { "rotate-90": !l.collapsedGroups.has(e.key) }])
|
|
75
|
+
}, null, 8, ["class"])) : y("", !0),
|
|
76
|
+
e.icon ? (o(), u(k, {
|
|
77
|
+
key: 1,
|
|
78
|
+
icon: e.icon,
|
|
79
|
+
class: "w-4 h-4 text-muted-foreground"
|
|
80
|
+
}, null, 8, ["icon"])) : y("", !0),
|
|
81
|
+
a("span", {
|
|
82
|
+
class: r([h.value, "font-semibold text-foreground"])
|
|
83
|
+
}, x(e.label), 3),
|
|
84
|
+
a("span", {
|
|
85
|
+
class: r([l.size === "sm" ? "text-[10px]" : "text-xs", "text-muted-foreground"])
|
|
86
|
+
}, " (" + x(e.permissions.filter((t) => m(t.key)).length) + "/" + x(e.permissions.length) + ") ", 3)
|
|
87
|
+
]),
|
|
88
|
+
a("div", {
|
|
89
|
+
class: "flex items-center",
|
|
90
|
+
onClick: i[0] || (i[0] = N(() => {
|
|
91
|
+
}, ["stop"]))
|
|
92
|
+
}, [
|
|
93
|
+
l.toggleMode === "checkbox" ? (o(), u(U, {
|
|
94
|
+
key: 0,
|
|
95
|
+
"model-value": f(e) === "all",
|
|
96
|
+
indeterminate: f(e) === "indeterminate",
|
|
97
|
+
disabled: l.readonly,
|
|
98
|
+
size: l.size === "sm" ? "xs" : "sm",
|
|
99
|
+
"onUpdate:modelValue": (t) => z(e)
|
|
100
|
+
}, null, 8, ["model-value", "indeterminate", "disabled", "size", "onUpdate:modelValue"])) : (o(), u(B, {
|
|
101
|
+
key: 1,
|
|
102
|
+
"model-value": f(e) === "all",
|
|
103
|
+
disabled: l.readonly,
|
|
104
|
+
"onUpdate:modelValue": (t) => z(e)
|
|
105
|
+
}, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
|
|
106
|
+
])
|
|
107
|
+
], 10, L),
|
|
108
|
+
l.collapsedGroups.has(e.key) ? y("", !0) : (o(), c("div", D, [
|
|
109
|
+
(o(!0), c(g, null, C(e.permissions, (t) => (o(), c("div", {
|
|
110
|
+
key: t.key,
|
|
111
|
+
class: r([
|
|
112
|
+
p.value,
|
|
113
|
+
"flex items-center justify-between border-t hover:bg-accent/40 transition-colors duration-100"
|
|
114
|
+
])
|
|
115
|
+
}, [
|
|
116
|
+
a("div", F, [
|
|
117
|
+
a("span", {
|
|
118
|
+
class: r([h.value, "text-foreground"])
|
|
119
|
+
}, x(t.label), 3),
|
|
120
|
+
t.description ? (o(), u(E, {
|
|
121
|
+
key: 0,
|
|
122
|
+
content: t.description,
|
|
123
|
+
placement: "top"
|
|
124
|
+
}, {
|
|
125
|
+
default: P(() => [
|
|
126
|
+
w(k, {
|
|
127
|
+
icon: "lucide:info",
|
|
128
|
+
class: "w-3 h-3 text-muted-foreground cursor-auto shrink-0"
|
|
129
|
+
})
|
|
130
|
+
]),
|
|
131
|
+
_: 1
|
|
132
|
+
}, 8, ["content"])) : y("", !0)
|
|
133
|
+
]),
|
|
134
|
+
a("div", q, [
|
|
135
|
+
l.toggleMode === "checkbox" ? (o(), u(U, {
|
|
136
|
+
key: 0,
|
|
137
|
+
"model-value": m(t.key),
|
|
138
|
+
disabled: l.readonly,
|
|
139
|
+
size: l.size === "sm" ? "xs" : "sm",
|
|
140
|
+
"onUpdate:modelValue": (v) => V(t.key)
|
|
141
|
+
}, null, 8, ["model-value", "disabled", "size", "onUpdate:modelValue"])) : (o(), u(B, {
|
|
142
|
+
key: 1,
|
|
143
|
+
"model-value": m(t.key),
|
|
144
|
+
disabled: l.readonly,
|
|
145
|
+
"onUpdate:modelValue": (v) => V(t.key)
|
|
146
|
+
}, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
|
|
147
|
+
])
|
|
148
|
+
], 2))), 128))
|
|
149
|
+
]))
|
|
150
|
+
], 64))), 128))
|
|
151
|
+
]));
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
export {
|
|
155
|
+
R as default
|
|
156
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { PermissionMatrixGroup, PermissionToggleMode, PermissionMatrixSize } from './types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
matrixGroups: PermissionMatrixGroup[];
|
|
4
|
+
modelValue: string[];
|
|
5
|
+
collapsedGroups: Set<string>;
|
|
6
|
+
toggleMode: PermissionToggleMode;
|
|
7
|
+
readonly: boolean;
|
|
8
|
+
size: PermissionMatrixSize;
|
|
9
|
+
collapsible: boolean;
|
|
10
|
+
};
|
|
11
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
12
|
+
"update:modelValue": (val: string[]) => any;
|
|
13
|
+
toggleCollapse: (groupKey: string) => any;
|
|
14
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
15
|
+
"onUpdate:modelValue"?: (val: string[]) => any;
|
|
16
|
+
onToggleCollapse?: (groupKey: string) => any;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
18
|
+
export default _default;
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import { defineComponent as S, computed as G, openBlock as o, createElementBlock as r, createVNode as U, createElementVNode as i, normalizeClass as c, Fragment as f, renderList as k, toDisplayString as g, createBlock as m, createCommentVNode as b, withModifiers as j, withCtx as K, unref as w } from "vue";
|
|
2
|
+
import P from "../CheckBox.vue.js";
|
|
3
|
+
import B from "../Switch.vue.js";
|
|
4
|
+
import h from "../Icon.vue.js";
|
|
5
|
+
import D from "../Tooltip.vue.js";
|
|
6
|
+
import { isActionEnabled as p, getMatrixPermKey as A, getMatrixRowPermKeys as E } from "./utils.js";
|
|
7
|
+
const F = {
|
|
8
|
+
key: 0,
|
|
9
|
+
class: "text-center py-12 text-muted-foreground"
|
|
10
|
+
}, H = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "permission-matrix-wrapper border rounded-lg overflow-auto"
|
|
13
|
+
}, L = { class: "w-full border-collapse" }, R = { class: "sticky top-0 z-10" }, q = { class: "bg-muted" }, I = ["onClick"], J = ["colspan"], O = { class: "flex items-center justify-between" }, Q = { class: "flex items-center gap-2" }, T = { class: "flex items-center gap-2 pl-6" }, W = {
|
|
14
|
+
key: 0,
|
|
15
|
+
class: "flex items-center justify-center"
|
|
16
|
+
}, X = {
|
|
17
|
+
key: 1,
|
|
18
|
+
class: "flex items-center justify-center"
|
|
19
|
+
}, se = /* @__PURE__ */ S({
|
|
20
|
+
__name: "PermissionEditorMatrix",
|
|
21
|
+
props: {
|
|
22
|
+
matrixGroups: {},
|
|
23
|
+
modelValue: {},
|
|
24
|
+
collapsedGroups: {},
|
|
25
|
+
toggleMode: {},
|
|
26
|
+
readonly: { type: Boolean },
|
|
27
|
+
size: {},
|
|
28
|
+
collapsible: { type: Boolean }
|
|
29
|
+
},
|
|
30
|
+
emits: ["update:modelValue", "toggleCollapse"],
|
|
31
|
+
setup(s, { emit: N }) {
|
|
32
|
+
const d = s, V = N, u = G(() => d.size === "sm" ? "text-xs" : "text-sm"), v = G(() => {
|
|
33
|
+
const n = /* @__PURE__ */ new Set(), l = [];
|
|
34
|
+
for (const e of d.matrixGroups)
|
|
35
|
+
for (const t of e.actions)
|
|
36
|
+
n.has(t.key) || (n.add(t.key), l.push(t));
|
|
37
|
+
return l;
|
|
38
|
+
});
|
|
39
|
+
function z(n, l) {
|
|
40
|
+
return n.actions.some((e) => e.key === l);
|
|
41
|
+
}
|
|
42
|
+
function M(n, l, e) {
|
|
43
|
+
return p(l, e) ? d.modelValue.includes(A(n, l, e)) : !1;
|
|
44
|
+
}
|
|
45
|
+
function $(n, l, e) {
|
|
46
|
+
if (d.readonly || !p(l, e)) return;
|
|
47
|
+
const t = A(n, l, e), a = d.modelValue.includes(t) ? d.modelValue.filter((y) => y !== t) : [...d.modelValue, t];
|
|
48
|
+
V("update:modelValue", a);
|
|
49
|
+
}
|
|
50
|
+
function x(n) {
|
|
51
|
+
const l = n.rows.flatMap((t) => E(n.key, t, n.actions));
|
|
52
|
+
if (l.length === 0) return "none";
|
|
53
|
+
const e = l.filter((t) => d.modelValue.includes(t));
|
|
54
|
+
return e.length === 0 ? "none" : e.length === l.length ? "all" : "indeterminate";
|
|
55
|
+
}
|
|
56
|
+
function C(n) {
|
|
57
|
+
if (d.readonly) return;
|
|
58
|
+
const l = n.rows.flatMap((a) => E(n.key, a, n.actions)), e = x(n);
|
|
59
|
+
let t;
|
|
60
|
+
if (e === "all")
|
|
61
|
+
t = d.modelValue.filter((a) => !l.includes(a));
|
|
62
|
+
else {
|
|
63
|
+
const a = l.filter((y) => !d.modelValue.includes(y));
|
|
64
|
+
t = [...d.modelValue, ...a];
|
|
65
|
+
}
|
|
66
|
+
V("update:modelValue", t);
|
|
67
|
+
}
|
|
68
|
+
return (n, l) => s.matrixGroups.length === 0 ? (o(), r("div", F, [
|
|
69
|
+
U(h, {
|
|
70
|
+
icon: "lucide:search-x",
|
|
71
|
+
class: "w-8 h-8 mx-auto mb-3 opacity-50"
|
|
72
|
+
}),
|
|
73
|
+
i("p", {
|
|
74
|
+
class: c(u.value)
|
|
75
|
+
}, "No permissions match your filters.", 2)
|
|
76
|
+
])) : (o(), r("div", H, [
|
|
77
|
+
i("table", L, [
|
|
78
|
+
i("thead", R, [
|
|
79
|
+
i("tr", q, [
|
|
80
|
+
i("th", {
|
|
81
|
+
class: c([
|
|
82
|
+
s.size === "sm" ? "px-3 py-2" : "px-4 py-2.5",
|
|
83
|
+
u.value,
|
|
84
|
+
"text-left font-semibold text-foreground min-w-[200px] bg-muted border-b"
|
|
85
|
+
])
|
|
86
|
+
}, " Permission ", 2),
|
|
87
|
+
(o(!0), r(f, null, k(v.value, (e) => (o(), r("th", {
|
|
88
|
+
key: e.key,
|
|
89
|
+
class: c([
|
|
90
|
+
s.size === "sm" ? "px-2 py-2" : "px-3 py-2.5",
|
|
91
|
+
u.value,
|
|
92
|
+
"text-center font-semibold text-foreground border-l border-b bg-muted min-w-[100px]"
|
|
93
|
+
])
|
|
94
|
+
}, g(e.label), 3))), 128))
|
|
95
|
+
])
|
|
96
|
+
]),
|
|
97
|
+
i("tbody", null, [
|
|
98
|
+
(o(!0), r(f, null, k(s.matrixGroups, (e) => (o(), r(f, {
|
|
99
|
+
key: e.key
|
|
100
|
+
}, [
|
|
101
|
+
i("tr", {
|
|
102
|
+
class: "bg-secondary/50 cursor-pointer select-none",
|
|
103
|
+
onClick: (t) => n.$emit("toggleCollapse", e.key)
|
|
104
|
+
}, [
|
|
105
|
+
i("td", {
|
|
106
|
+
colspan: v.value.length + 1,
|
|
107
|
+
class: c([s.size === "sm" ? "px-3 py-1.5" : "px-4 py-2", "border-t"])
|
|
108
|
+
}, [
|
|
109
|
+
i("div", O, [
|
|
110
|
+
i("div", Q, [
|
|
111
|
+
s.collapsible ? (o(), m(h, {
|
|
112
|
+
key: 0,
|
|
113
|
+
icon: "lucide:chevron-right",
|
|
114
|
+
class: c(["w-3.5 h-3.5 transition-transform duration-200 text-muted-foreground", { "rotate-90": !s.collapsedGroups.has(e.key) }])
|
|
115
|
+
}, null, 8, ["class"])) : b("", !0),
|
|
116
|
+
e.icon ? (o(), m(h, {
|
|
117
|
+
key: 1,
|
|
118
|
+
icon: e.icon,
|
|
119
|
+
class: "w-4 h-4 text-muted-foreground"
|
|
120
|
+
}, null, 8, ["icon"])) : b("", !0),
|
|
121
|
+
i("span", {
|
|
122
|
+
class: c([u.value, "font-semibold text-foreground"])
|
|
123
|
+
}, g(e.label), 3)
|
|
124
|
+
]),
|
|
125
|
+
i("div", {
|
|
126
|
+
class: "flex items-center",
|
|
127
|
+
onClick: l[0] || (l[0] = j(() => {
|
|
128
|
+
}, ["stop"]))
|
|
129
|
+
}, [
|
|
130
|
+
s.toggleMode === "checkbox" ? (o(), m(P, {
|
|
131
|
+
key: 0,
|
|
132
|
+
"model-value": x(e) === "all",
|
|
133
|
+
indeterminate: x(e) === "indeterminate",
|
|
134
|
+
disabled: s.readonly,
|
|
135
|
+
size: s.size === "sm" ? "xs" : "sm",
|
|
136
|
+
"onUpdate:modelValue": (t) => C(e)
|
|
137
|
+
}, null, 8, ["model-value", "indeterminate", "disabled", "size", "onUpdate:modelValue"])) : (o(), m(B, {
|
|
138
|
+
key: 1,
|
|
139
|
+
"model-value": x(e) === "all",
|
|
140
|
+
disabled: s.readonly,
|
|
141
|
+
"onUpdate:modelValue": (t) => C(e)
|
|
142
|
+
}, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
|
|
143
|
+
])
|
|
144
|
+
])
|
|
145
|
+
], 10, J)
|
|
146
|
+
], 8, I),
|
|
147
|
+
s.collapsedGroups.has(e.key) ? b("", !0) : (o(!0), r(f, { key: 0 }, k(e.rows, (t) => (o(), r("tr", {
|
|
148
|
+
key: e.key + "-" + t.key,
|
|
149
|
+
class: "hover:bg-accent/40 transition-colors duration-100"
|
|
150
|
+
}, [
|
|
151
|
+
i("td", {
|
|
152
|
+
class: c([s.size === "sm" ? "px-3 py-1.5" : "px-4 py-2", "border-t"])
|
|
153
|
+
}, [
|
|
154
|
+
i("div", T, [
|
|
155
|
+
i("span", {
|
|
156
|
+
class: c([u.value, "text-foreground"])
|
|
157
|
+
}, g(t.label), 3),
|
|
158
|
+
t.description ? (o(), m(D, {
|
|
159
|
+
key: 0,
|
|
160
|
+
content: t.description,
|
|
161
|
+
placement: "top"
|
|
162
|
+
}, {
|
|
163
|
+
default: K(() => [
|
|
164
|
+
U(h, {
|
|
165
|
+
icon: "lucide:info",
|
|
166
|
+
class: "w-3 h-3 text-muted-foreground cursor-auto shrink-0"
|
|
167
|
+
})
|
|
168
|
+
]),
|
|
169
|
+
_: 1
|
|
170
|
+
}, 8, ["content"])) : b("", !0)
|
|
171
|
+
])
|
|
172
|
+
], 2),
|
|
173
|
+
(o(!0), r(f, null, k(v.value, (a) => (o(), r("td", {
|
|
174
|
+
key: a.key,
|
|
175
|
+
class: c([
|
|
176
|
+
s.size === "sm" ? "px-2 py-1.5" : "px-3 py-2",
|
|
177
|
+
"text-center border-t border-l",
|
|
178
|
+
!z(e, a.key) || !w(p)(t, a.key) ? "bg-muted/30" : ""
|
|
179
|
+
])
|
|
180
|
+
}, [
|
|
181
|
+
!z(e, a.key) || !w(p)(t, a.key) ? (o(), r("div", W, [...l[1] || (l[1] = [
|
|
182
|
+
i("span", { class: "text-xs text-muted-foreground/40 select-none" }, "—", -1)
|
|
183
|
+
])])) : (o(), r("div", X, [
|
|
184
|
+
s.toggleMode === "checkbox" ? (o(), m(P, {
|
|
185
|
+
key: 0,
|
|
186
|
+
"model-value": M(e.key, t, a.key),
|
|
187
|
+
disabled: s.readonly,
|
|
188
|
+
size: s.size === "sm" ? "xs" : "sm",
|
|
189
|
+
"onUpdate:modelValue": (y) => $(e.key, t, a.key)
|
|
190
|
+
}, null, 8, ["model-value", "disabled", "size", "onUpdate:modelValue"])) : (o(), m(B, {
|
|
191
|
+
key: 1,
|
|
192
|
+
"model-value": M(e.key, t, a.key),
|
|
193
|
+
disabled: s.readonly,
|
|
194
|
+
"onUpdate:modelValue": (y) => $(e.key, t, a.key)
|
|
195
|
+
}, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
|
|
196
|
+
]))
|
|
197
|
+
], 2))), 128))
|
|
198
|
+
]))), 128))
|
|
199
|
+
], 64))), 128))
|
|
200
|
+
])
|
|
201
|
+
])
|
|
202
|
+
]));
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
export {
|
|
206
|
+
se as default
|
|
207
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { PermissionMatrixSize } from './types';
|
|
2
|
+
interface GroupOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
icon?: string;
|
|
6
|
+
}
|
|
7
|
+
type __VLS_Props = {
|
|
8
|
+
searchQuery: string;
|
|
9
|
+
selectedGroupKeys: string[];
|
|
10
|
+
searchable: boolean;
|
|
11
|
+
size: PermissionMatrixSize;
|
|
12
|
+
readonly: boolean;
|
|
13
|
+
totalPerms: number;
|
|
14
|
+
selectedCount: number;
|
|
15
|
+
groupOptions: GroupOption[];
|
|
16
|
+
};
|
|
17
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
18
|
+
clearAll: () => any;
|
|
19
|
+
"update:searchQuery": (val: string) => any;
|
|
20
|
+
"update:selectedGroupKeys": (val: string[]) => any;
|
|
21
|
+
selectAll: () => any;
|
|
22
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
23
|
+
onClearAll?: () => any;
|
|
24
|
+
"onUpdate:searchQuery"?: (val: string) => any;
|
|
25
|
+
"onUpdate:selectedGroupKeys"?: (val: string[]) => any;
|
|
26
|
+
onSelectAll?: () => any;
|
|
27
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
28
|
+
export default _default;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { defineComponent as w, computed as k, openBlock as l, createElementBlock as n, createElementVNode as r, createVNode as c, createCommentVNode as i, unref as C, withCtx as f, withModifiers as G, createBlock as $, toDisplayString as a, normalizeClass as u } from "vue";
|
|
2
|
+
import z from "../Input.vue.js";
|
|
3
|
+
/* empty css */
|
|
4
|
+
import h from "../Icon.vue.js";
|
|
5
|
+
import K from "../CheckBox.vue.js";
|
|
6
|
+
import B from "../Dropdown/Dropdown.vue.js";
|
|
7
|
+
import "../../core/config.js";
|
|
8
|
+
const S = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4" }, V = { class: "flex items-center gap-2 flex-1 w-full sm:max-w-lg" }, A = {
|
|
9
|
+
key: 0,
|
|
10
|
+
class: "flex-1"
|
|
11
|
+
}, Q = {
|
|
12
|
+
key: 0,
|
|
13
|
+
class: "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[10px] font-bold min-w-[18px] h-[18px] px-1"
|
|
14
|
+
}, N = ["onClick"], P = { class: "text-sm" }, U = {
|
|
15
|
+
key: 0,
|
|
16
|
+
class: "border-t px-3 py-1.5"
|
|
17
|
+
}, E = { class: "flex items-center gap-3 ml-auto" }, H = /* @__PURE__ */ w({
|
|
18
|
+
__name: "PermissionTopBar",
|
|
19
|
+
props: {
|
|
20
|
+
searchQuery: {},
|
|
21
|
+
selectedGroupKeys: {},
|
|
22
|
+
searchable: { type: Boolean },
|
|
23
|
+
size: {},
|
|
24
|
+
readonly: { type: Boolean },
|
|
25
|
+
totalPerms: {},
|
|
26
|
+
selectedCount: {},
|
|
27
|
+
groupOptions: {}
|
|
28
|
+
},
|
|
29
|
+
emits: ["update:searchQuery", "update:selectedGroupKeys", "selectAll", "clearAll"],
|
|
30
|
+
setup(e, { emit: g }) {
|
|
31
|
+
const x = e, d = g, m = k(() => x.size === "sm" ? "text-xs" : "text-sm");
|
|
32
|
+
function y(s) {
|
|
33
|
+
const t = x.selectedGroupKeys, o = t.includes(s) ? t.filter((p) => p !== s) : [...t, s];
|
|
34
|
+
d("update:selectedGroupKeys", o);
|
|
35
|
+
}
|
|
36
|
+
function v() {
|
|
37
|
+
d("update:selectedGroupKeys", []);
|
|
38
|
+
}
|
|
39
|
+
function b(s) {
|
|
40
|
+
d("update:searchQuery", String(s));
|
|
41
|
+
}
|
|
42
|
+
return (s, t) => (l(), n("div", S, [
|
|
43
|
+
r("div", V, [
|
|
44
|
+
e.searchable ? (l(), n("div", A, [
|
|
45
|
+
c(z, {
|
|
46
|
+
"model-value": e.searchQuery,
|
|
47
|
+
"onUpdate:modelValue": b,
|
|
48
|
+
placeholder: "Search permissions...",
|
|
49
|
+
icon: "lucide:search",
|
|
50
|
+
size: e.size,
|
|
51
|
+
"show-clear-button": ""
|
|
52
|
+
}, null, 8, ["model-value", "size"])
|
|
53
|
+
])) : i("", !0),
|
|
54
|
+
c(C(B), {
|
|
55
|
+
options: e.groupOptions,
|
|
56
|
+
"close-on-select": !1,
|
|
57
|
+
selectable: !1,
|
|
58
|
+
position: "bottom-end"
|
|
59
|
+
}, {
|
|
60
|
+
trigger: f(() => [
|
|
61
|
+
r("button", {
|
|
62
|
+
type: "button",
|
|
63
|
+
class: u([
|
|
64
|
+
"inline-flex items-center gap-1.5 border rounded-md cursor-pointer transition-colors",
|
|
65
|
+
e.size === "sm" ? "px-2 py-1.5 text-xs" : "px-3 py-2 text-sm",
|
|
66
|
+
e.selectedGroupKeys.length > 0 ? "border-primary bg-primary/5 text-primary" : "border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
67
|
+
])
|
|
68
|
+
}, [
|
|
69
|
+
c(h, {
|
|
70
|
+
icon: "lucide:filter",
|
|
71
|
+
class: "w-3.5 h-3.5"
|
|
72
|
+
}),
|
|
73
|
+
t[2] || (t[2] = r("span", { class: "hidden sm:inline" }, "Modules", -1)),
|
|
74
|
+
e.selectedGroupKeys.length > 0 ? (l(), n("span", Q, a(e.selectedGroupKeys.length), 1)) : i("", !0)
|
|
75
|
+
], 2)
|
|
76
|
+
]),
|
|
77
|
+
item: f(({ option: o }) => [
|
|
78
|
+
r("div", {
|
|
79
|
+
class: "flex items-center gap-2 w-full cursor-pointer hover:bg-accent rounded-md",
|
|
80
|
+
onClick: G((p) => y(o.value), ["stop"])
|
|
81
|
+
}, [
|
|
82
|
+
c(K, {
|
|
83
|
+
"model-value": e.selectedGroupKeys.includes(o.value),
|
|
84
|
+
size: "xs",
|
|
85
|
+
"onUpdate:modelValue": (p) => y(o.value)
|
|
86
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"]),
|
|
87
|
+
o?.icon ? (l(), $(h, {
|
|
88
|
+
key: 0,
|
|
89
|
+
icon: o.icon,
|
|
90
|
+
class: "w-3.5 h-3.5 text-muted-foreground"
|
|
91
|
+
}, null, 8, ["icon"])) : i("", !0),
|
|
92
|
+
r("span", P, a(o.label), 1)
|
|
93
|
+
], 8, N)
|
|
94
|
+
]),
|
|
95
|
+
footer: f(() => [
|
|
96
|
+
e.selectedGroupKeys.length > 0 ? (l(), n("div", U, [
|
|
97
|
+
r("button", {
|
|
98
|
+
type: "button",
|
|
99
|
+
class: "text-xs text-muted-foreground hover:text-foreground cursor-pointer",
|
|
100
|
+
onClick: v
|
|
101
|
+
}, " Clear filters ")
|
|
102
|
+
])) : i("", !0)
|
|
103
|
+
]),
|
|
104
|
+
_: 1
|
|
105
|
+
}, 8, ["options"])
|
|
106
|
+
]),
|
|
107
|
+
r("div", E, [
|
|
108
|
+
r("span", {
|
|
109
|
+
class: u([m.value, "text-muted-foreground whitespace-nowrap"])
|
|
110
|
+
}, a(e.selectedCount) + " / " + a(e.totalPerms) + " selected ", 3),
|
|
111
|
+
e.readonly ? i("", !0) : (l(), n("button", {
|
|
112
|
+
key: 0,
|
|
113
|
+
type: "button",
|
|
114
|
+
class: u([m.value, "text-primary hover:underline whitespace-nowrap cursor-pointer"]),
|
|
115
|
+
onClick: t[0] || (t[0] = (o) => s.$emit("selectAll"))
|
|
116
|
+
}, " Select All ", 2)),
|
|
117
|
+
!e.readonly && e.selectedCount > 0 ? (l(), n("button", {
|
|
118
|
+
key: 1,
|
|
119
|
+
type: "button",
|
|
120
|
+
class: u([
|
|
121
|
+
m.value,
|
|
122
|
+
"text-muted-foreground hover:text-foreground hover:underline whitespace-nowrap cursor-pointer"
|
|
123
|
+
]),
|
|
124
|
+
onClick: t[1] || (t[1] = (o) => s.$emit("clearAll"))
|
|
125
|
+
}, " Clear ", 2)) : i("", !0)
|
|
126
|
+
])
|
|
127
|
+
]));
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
export {
|
|
131
|
+
H as default
|
|
132
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PermissionMatrixRow, PermissionMatrixGroup } from './types';
|
|
2
|
+
/** Resolve permission key for a matrix cell */
|
|
3
|
+
export declare function getMatrixPermKey(groupKey: string, row: PermissionMatrixRow, actionKey: string): string;
|
|
4
|
+
/** Check if a row supports a given action */
|
|
5
|
+
export declare function isActionEnabled(row: PermissionMatrixRow, actionKey: string): boolean;
|
|
6
|
+
/** Get all enabled permission keys for a matrix row */
|
|
7
|
+
export declare function getMatrixRowPermKeys(groupKey: string, row: PermissionMatrixRow, actions: {
|
|
8
|
+
key: string;
|
|
9
|
+
}[]): string[];
|
|
10
|
+
/** Get all permission keys from all matrix groups */
|
|
11
|
+
export declare function getAllMatrixKeys(matrixGroups: PermissionMatrixGroup[]): string[];
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
function r(t, e, n) {
|
|
2
|
+
return e.singleKey ? `${t}-${e.key}` : `${t}-${e.key}-${n}`;
|
|
3
|
+
}
|
|
4
|
+
function a(t, e) {
|
|
5
|
+
return t.actions.includes(e);
|
|
6
|
+
}
|
|
7
|
+
function u(t, e, n) {
|
|
8
|
+
return n.filter((i) => a(e, i.key)).map((i) => r(t, e, i.key));
|
|
9
|
+
}
|
|
10
|
+
function c(t) {
|
|
11
|
+
return t.flatMap(
|
|
12
|
+
(e) => e.rows.flatMap((n) => u(e.key, n, e.actions))
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
c as getAllMatrixKeys,
|
|
17
|
+
r as getMatrixPermKey,
|
|
18
|
+
u as getMatrixRowPermKeys,
|
|
19
|
+
a as isActionEnabled
|
|
20
|
+
};
|