vlite3 0.6.6 → 0.6.7

package/components/PermissionMatrix/PermissionEditor.vue.js

@@ -1,40 +1,9 @@
-import { defineComponent as de, ref as B, computed as p, onMounted as ue, watch as ce, openBlock as a, createElementBlock as d, normalizeClass as u, createElementVNode as i, createVNode as V, createCommentVNode as f, unref as me, withCtx as G, withModifiers as D, createBlock as m, toDisplayString as v, Fragment as k, renderList as M } from "vue";
-import U from "../CheckBox.vue.js";
-import E from "../Switch.vue.js";
-import h from "../Icon.vue.js";
-import fe from "../Input.vue.js";
-/* empty css            */
-import Y from "../Tooltip.vue.js";
-import ye from "../Dropdown/Dropdown.vue.js";
-import "../../core/config.js";
-const xe = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4" }, ve = { class: "flex items-center gap-2 flex-1 w-full sm:max-w-lg" }, pe = {
-  key: 0,
-  class: "flex-1"
-}, ke = {
-  key: 0,
-  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"
-}, he = ["onClick"], be = { class: "text-sm" }, ge = {
-  key: 0,
-  class: "border-t px-3 py-1.5"
-}, we = { class: "flex items-center gap-3 ml-auto" }, Ve = {
-  key: 0,
-  class: "text-center py-12 text-muted-foreground"
-}, Ce = {
-  key: 1,
-  class: "permission-matrix-wrapper border rounded-lg overflow-auto"
-}, ze = { class: "w-full border-collapse" }, Me = { class: "sticky top-0 z-10" }, $e = { class: "bg-muted" }, Ge = ["onClick"], Ue = ["colspan"], Se = { class: "flex items-center justify-between" }, Le = { class: "flex items-center gap-2" }, Pe = { class: "flex items-center gap-2 pl-6" }, Ae = {
-  key: 0,
-  class: "flex items-center justify-center"
-}, Be = {
-  key: 1,
-  class: "flex items-center justify-center"
-}, Ee = {
-  key: 0,
-  class: "text-center py-12 text-muted-foreground"
-}, je = {
-  key: 1,
-  class: "space-y-0 border rounded-lg overflow-hidden"
-}, Ne = ["onClick"], Ke = { class: "flex items-center gap-2" }, De = { key: 0 }, Fe = { class: "flex items-center gap-2 pl-6" }, qe = { class: "flex items-center" }, Ye = /* @__PURE__ */ de({
+import { defineComponent as B, computed as c, ref as p, onMounted as K, watch as E, openBlock as g, createElementBlock as A, normalizeClass as $, createVNode as Q, createBlock as b } from "vue";
+import U from "./PermissionTopBar.vue.js";
+import P from "./PermissionEditorList.vue.js";
+import q from "./PermissionEditorMatrix.vue.js";
+import { getAllMatrixKeys as h } from "./utils.js";
+const D = /* @__PURE__ */ B({
   __name: "PermissionEditor",
   props: {
     groups: { default: () => [] },
@@ -50,515 +19,142 @@ const xe = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-3
     matrixGroups: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: Z }) {
-    const n = r, g = Z, w = B(""), y = B([]), _ = p(
-      () => n.groups.map((l) => ({
+  setup(s, { emit: C }) {
+    const a = s, f = C, i = c(() => a.layout === "matrix"), r = p(""), d = p([]), y = c(() => i.value ? a.matrixGroups : a.groups), x = c(
+      () => y.value.map((l) => ({
         label: l.label,
         value: l.key,
         icon: l.icon
       }))
-    );
-    function F(l) {
-      const t = y.value;
-      t.includes(l) ? y.value = t.filter((e) => e !== l) : y.value = [...t, l];
-    }
-    function ee() {
-      y.value = [];
-    }
-    const b = B(/* @__PURE__ */ new Set()), j = B(/* @__PURE__ */ new Set());
-    function te() {
-      if (n.defaultExpanded && n.defaultExpanded.length > 0) {
-        const l = n.groups.map((t) => t.key);
-        return new Set(l.filter((t) => !n.defaultExpanded.includes(t)));
+    ), n = p(/* @__PURE__ */ new Set()), v = p(/* @__PURE__ */ new Set());
+    function k() {
+      if (a.defaultExpanded && a.defaultExpanded.length > 0) {
+        const l = y.value.map((e) => e.key);
+        return new Set(l.filter((e) => !a.defaultExpanded.includes(e)));
       }
       return /* @__PURE__ */ new Set();
     }
-    ue(() => {
-      const l = te();
-      j.value = l, b.value = new Set(l);
-    }), ce(w, (l) => {
+    K(() => {
+      const l = k();
+      v.value = l, n.value = new Set(l);
+    }), E(r, (l) => {
       if (l.trim()) {
-        const t = l.toLowerCase(), e = /* @__PURE__ */ new Set();
-        for (const s of n.groups)
-          (s.label.toLowerCase().includes(t) || s.permissions.some(
-            (z) => z.label.toLowerCase().includes(t) || z.key.toLowerCase().includes(t)
-          )) && e.add(s.key);
-        const o = n.groups.map((s) => s.key);
-        b.value = new Set(o.filter((s) => !e.has(s)));
+        const e = l.toLowerCase(), o = /* @__PURE__ */ new Set();
+        if (i.value)
+          for (const t of a.matrixGroups)
+            (t.label.toLowerCase().includes(e) || t.rows.some(
+              (m) => m.label.toLowerCase().includes(e) || m.key.toLowerCase().includes(e)
+            )) && o.add(t.key);
+        else
+          for (const t of a.groups)
+            (t.label.toLowerCase().includes(e) || t.permissions.some(
+              (m) => m.label.toLowerCase().includes(e) || m.key.toLowerCase().includes(e)
+            )) && o.add(t.key);
+        const u = y.value.map((t) => t.key);
+        n.value = new Set(u.filter((t) => !o.has(t)));
       } else
-        b.value = new Set(j.value);
+        n.value = new Set(v.value);
     });
-    function q(l) {
-      if (!n.collapsible) return;
-      const t = new Set(b.value);
-      t.has(l) ? t.delete(l) : t.add(l), b.value = t, w.value.trim() || (j.value = new Set(t));
-    }
-    const O = p(() => {
-      let l = n.groups;
-      if (y.value.length > 0 && (l = l.filter((t) => y.value.includes(t.key))), w.value.trim()) {
-        const t = w.value.toLowerCase();
-        l = l.map((e) => {
-          const o = e.permissions.filter(
-            (s) => s.label.toLowerCase().includes(t) || s.key.toLowerCase().includes(t) || e.label.toLowerCase().includes(t)
+    function w(l) {
+      if (!a.collapsible) return;
+      const e = new Set(n.value);
+      e.has(l) ? e.delete(l) : e.add(l), n.value = e, r.value.trim() || (v.value = new Set(e));
+    }
+    const G = c(() => {
+      let l = a.groups;
+      if (d.value.length > 0 && (l = l.filter((e) => d.value.includes(e.key))), r.value.trim()) {
+        const e = r.value.toLowerCase();
+        l = l.map((o) => {
+          const u = o.permissions.filter(
+            (t) => t.label.toLowerCase().includes(e) || t.key.toLowerCase().includes(e) || o.label.toLowerCase().includes(e)
           );
-          return o.length === 0 ? null : { ...e, permissions: o };
+          return u.length === 0 ? null : { ...o, permissions: u };
         }).filter(Boolean);
       }
       return l;
-    });
-    function $(l) {
-      return n.modelValue.includes(l);
-    }
-    function R(l) {
-      if (n.readonly) return;
-      const t = $(l) ? n.modelValue.filter((e) => e !== l) : [...n.modelValue, l];
-      g("update:modelValue", t);
-    }
-    function S(l) {
-      const t = l.permissions, e = t.filter((o) => $(o.key));
-      return e.length === 0 ? "none" : e.length === t.length ? "all" : "indeterminate";
-    }
-    function H(l) {
-      if (n.readonly) return;
-      const t = S(l), e = l.permissions.map((s) => s.key);
-      let o;
-      if (t === "all")
-        o = n.modelValue.filter((s) => !e.includes(s));
-      else {
-        const s = e.filter((c) => !n.modelValue.includes(c));
-        o = [...n.modelValue, ...s];
-      }
-      g("update:modelValue", o);
-    }
-    function le() {
-      if (n.readonly) return;
-      const l = n.groups.flatMap((t) => t.permissions.map((e) => e.key));
-      g("update:modelValue", l);
-    }
-    function se() {
-      n.readonly || g("update:modelValue", []);
-    }
-    const ne = p(() => n.layout === "matrix" ? oe.value : n.groups.reduce((l, t) => l + t.permissions.length, 0)), x = p(() => n.size === "sm" ? "text-xs" : "text-sm"), Q = p(() => n.size === "sm" ? "px-3 py-1.5" : "px-4 py-2.5"), L = p(() => n.layout === "matrix");
-    function N(l, t, e) {
-      return t.singleKey ? `${l}-${t.key}` : `${l}-${t.key}-${e}`;
-    }
-    function C(l, t) {
-      return l.actions.includes(t);
-    }
-    function I(l, t, e) {
-      return C(t, e) ? n.modelValue.includes(N(l, t, e)) : !1;
-    }
-    function J(l, t, e) {
-      if (n.readonly || !C(t, e)) return;
-      const o = N(l, t, e), s = n.modelValue.includes(o) ? n.modelValue.filter((c) => c !== o) : [...n.modelValue, o];
-      g("update:modelValue", s);
-    }
-    function P(l, t, e) {
-      return e.filter((o) => C(t, o.key)).map((o) => N(l, t, o.key));
-    }
-    function A(l) {
-      const t = l.rows.flatMap((o) => P(l.key, o, l.actions));
-      if (t.length === 0) return "none";
-      const e = t.filter((o) => n.modelValue.includes(o));
-      return e.length === 0 ? "none" : e.length === t.length ? "all" : "indeterminate";
-    }
-    function T(l) {
-      if (n.readonly) return;
-      const t = l.rows.flatMap((s) => P(l.key, s, l.actions)), e = A(l);
-      let o;
-      if (e === "all")
-        o = n.modelValue.filter((s) => !t.includes(s));
-      else {
-        const s = t.filter((c) => !n.modelValue.includes(c));
-        o = [...n.modelValue, ...s];
-      }
-      g("update:modelValue", o);
-    }
-    const oe = p(
-      () => n.matrixGroups.reduce(
-        (l, t) => l + t.rows.reduce((e, o) => e + o.actions.filter((s) => C(o, s)).length, 0),
-        0
-      )
-    );
-    function ae() {
-      if (n.readonly) return;
-      const l = n.matrixGroups.flatMap(
-        (e) => e.rows.flatMap((o) => P(e.key, o, e.actions))
-      ), t = n.modelValue.filter((e) => !l.includes(e));
-      g("update:modelValue", [...t, ...l]);
-    }
-    function ie() {
-      if (n.readonly) return;
-      const l = new Set(
-        n.matrixGroups.flatMap(
-          (t) => t.rows.flatMap((e) => P(t.key, e, t.actions))
-        )
-      );
-      g(
-        "update:modelValue",
-        n.modelValue.filter((t) => !l.has(t))
-      );
-    }
-    const W = p(() => {
-      let l = n.matrixGroups;
-      if (y.value.length > 0 && (l = l.filter((t) => y.value.includes(t.key))), w.value.trim()) {
-        const t = w.value.toLowerCase();
-        l = l.map((e) => {
-          const o = e.rows.filter(
-            (s) => s.label.toLowerCase().includes(t) || s.key.toLowerCase().includes(t) || e.label.toLowerCase().includes(t)
+    }), V = c(() => {
+      let l = a.matrixGroups;
+      if (d.value.length > 0 && (l = l.filter((e) => d.value.includes(e.key))), r.value.trim()) {
+        const e = r.value.toLowerCase();
+        l = l.map((o) => {
+          const u = o.rows.filter(
+            (t) => t.label.toLowerCase().includes(e) || t.key.toLowerCase().includes(e) || o.label.toLowerCase().includes(e)
           );
-          return o.length === 0 ? null : { ...e, rows: o };
+          return u.length === 0 ? null : { ...o, rows: u };
         }).filter(Boolean);
       }
       return l;
-    }), re = p(
-      () => n.matrixGroups.map((l) => ({
-        label: l.label,
-        value: l.key,
-        icon: l.icon
-      }))
-    ), K = p(() => {
-      const l = /* @__PURE__ */ new Set(), t = [];
-      for (const e of n.matrixGroups)
-        for (const o of e.actions)
-          l.has(o.key) || (l.add(o.key), t.push(o));
-      return t;
-    });
-    function X(l, t) {
-      return l.actions.some((e) => e.key === t);
+    }), L = c(() => i.value ? a.matrixGroups.reduce(
+      (l, e) => l + e.rows.reduce(
+        (o, u) => o + u.actions.filter((t) => u.actions.includes(t?.key)).length,
+        0
+      ),
+      0
+    ) : a.groups.reduce((l, e) => l + e.permissions.length, 0));
+    function M() {
+      if (!a.readonly)
+        if (i.value) {
+          const l = h(a.matrixGroups), e = a.modelValue.filter((o) => !l.includes(o));
+          f("update:modelValue", [...e, ...l]);
+        } else {
+          const l = a.groups.flatMap((e) => e.permissions.map((o) => o.key));
+          f("update:modelValue", l);
+        }
+    }
+    function S() {
+      if (!a.readonly)
+        if (i.value) {
+          const l = new Set(h(a.matrixGroups));
+          f(
+            "update:modelValue",
+            a.modelValue.filter((e) => !l.has(e))
+          );
+        } else
+          f("update:modelValue", []);
     }
-    return (l, t) => (a(), d("div", {
-      class: u(["permission-editor", n.class])
+    return (l, e) => (g(), A("div", {
+      class: $(["permission-editor", a.class])
     }, [
-      i("div", xe, [
-        i("div", ve, [
-          r.searchable ? (a(), d("div", pe, [
-            V(fe, {
-              modelValue: w.value,
-              "onUpdate:modelValue": t[0] || (t[0] = (e) => w.value = e),
-              placeholder: "Search permissions...",
-              icon: "lucide:search",
-              size: r.size,
-              "show-clear-button": ""
-            }, null, 8, ["modelValue", "size"])
-          ])) : f("", !0),
-          V(me(ye), {
-            options: L.value ? re.value : _.value,
-            "close-on-select": !1,
-            selectable: !1,
-            position: "bottom-end"
-          }, {
-            trigger: G(() => [
-              i("button", {
-                type: "button",
-                class: u([
-                  "inline-flex items-center gap-1.5 border rounded-md cursor-pointer transition-colors",
-                  r.size === "sm" ? "px-2 py-1.5 text-xs" : "px-3 py-2 text-sm",
-                  y.value.length > 0 ? "border-primary bg-primary/5 text-primary" : "border-border text-muted-foreground hover:text-foreground hover:bg-accent"
-                ])
-              }, [
-                V(h, {
-                  icon: "lucide:filter",
-                  class: "w-3.5 h-3.5"
-                }),
-                t[5] || (t[5] = i("span", { class: "hidden sm:inline" }, "Modules", -1)),
-                y.value.length > 0 ? (a(), d("span", ke, v(y.value.length), 1)) : f("", !0)
-              ], 2)
-            ]),
-            item: G(({ option: e }) => [
-              i("div", {
-                class: "flex items-center gap-2 px-2 py-1.5 cursor-pointer hover:bg-accent rounded-md",
-                onClick: D((o) => F(e.value), ["stop"])
-              }, [
-                V(U, {
-                  "model-value": y.value.includes(e.value),
-                  size: "xs",
-                  "onUpdate:modelValue": (o) => F(e.value)
-                }, null, 8, ["model-value", "onUpdate:modelValue"]),
-                e.icon ? (a(), m(h, {
-                  key: 0,
-                  icon: e.icon,
-                  class: "w-3.5 h-3.5 text-muted-foreground"
-                }, null, 8, ["icon"])) : f("", !0),
-                i("span", be, v(e.label), 1)
-              ], 8, he)
-            ]),
-            footer: G(() => [
-              y.value.length > 0 ? (a(), d("div", ge, [
-                i("button", {
-                  type: "button",
-                  class: "text-xs text-muted-foreground hover:text-foreground cursor-pointer",
-                  onClick: ee
-                }, " Clear filters ")
-              ])) : f("", !0)
-            ]),
-            _: 1
-          }, 8, ["options"])
-        ]),
-        i("div", we, [
-          i("span", {
-            class: u([x.value, "text-muted-foreground whitespace-nowrap"])
-          }, v(r.modelValue.length) + " / " + v(ne.value) + " selected ", 3),
-          r.readonly ? f("", !0) : (a(), d("button", {
-            key: 0,
-            type: "button",
-            class: u([x.value, "text-primary hover:underline whitespace-nowrap cursor-pointer"]),
-            onClick: t[1] || (t[1] = (e) => L.value ? ae() : le())
-          }, " Select All ", 2)),
-          !r.readonly && r.modelValue.length > 0 ? (a(), d("button", {
-            key: 1,
-            type: "button",
-            class: u([
-              x.value,
-              "text-muted-foreground hover:text-foreground hover:underline whitespace-nowrap cursor-pointer"
-            ]),
-            onClick: t[2] || (t[2] = (e) => L.value ? ie() : se())
-          }, " Clear ", 2)) : f("", !0)
-        ])
-      ]),
-      L.value ? (a(), d(k, { key: 0 }, [
-        W.value.length === 0 ? (a(), d("div", Ve, [
-          V(h, {
-            icon: "lucide:search-x",
-            class: "w-8 h-8 mx-auto mb-3 opacity-50"
-          }),
-          i("p", {
-            class: u(x.value)
-          }, "No permissions match your filters.", 2)
-        ])) : (a(), d("div", Ce, [
-          i("table", ze, [
-            i("thead", Me, [
-              i("tr", $e, [
-                i("th", {
-                  class: u([
-                    r.size === "sm" ? "px-3 py-2" : "px-4 py-2.5",
-                    x.value,
-                    "text-left font-semibold text-foreground min-w-[200px] bg-muted border-b"
-                  ])
-                }, " Permission ", 2),
-                (a(!0), d(k, null, M(K.value, (e) => (a(), d("th", {
-                  key: e.key,
-                  class: u([
-                    r.size === "sm" ? "px-2 py-2" : "px-3 py-2.5",
-                    x.value,
-                    "text-center font-semibold text-foreground border-l border-b bg-muted min-w-[100px]"
-                  ])
-                }, v(e.label), 3))), 128))
-              ])
-            ]),
-            i("tbody", null, [
-              (a(!0), d(k, null, M(W.value, (e, o) => (a(), d(k, {
-                key: e.key
-              }, [
-                i("tr", {
-                  class: "bg-secondary/50 cursor-pointer select-none",
-                  onClick: (s) => q(e.key)
-                }, [
-                  i("td", {
-                    colspan: K.value.length + 1,
-                    class: u([r.size === "sm" ? "px-3 py-1.5" : "px-4 py-2", "border-t"])
-                  }, [
-                    i("div", Se, [
-                      i("div", Le, [
-                        r.collapsible ? (a(), m(h, {
-                          key: 0,
-                          icon: "lucide:chevron-right",
-                          class: u(["w-3.5 h-3.5 transition-transform duration-200 text-muted-foreground", { "rotate-90": !b.value.has(e.key) }])
-                        }, null, 8, ["class"])) : f("", !0),
-                        e.icon ? (a(), m(h, {
-                          key: 1,
-                          icon: e.icon,
-                          class: "w-4 h-4 text-muted-foreground"
-                        }, null, 8, ["icon"])) : f("", !0),
-                        i("span", {
-                          class: u([x.value, "font-semibold text-foreground"])
-                        }, v(e.label), 3)
-                      ]),
-                      i("div", {
-                        class: "flex items-center",
-                        onClick: t[3] || (t[3] = D(() => {
-                        }, ["stop"]))
-                      }, [
-                        r.toggleMode === "checkbox" ? (a(), m(U, {
-                          key: 0,
-                          "model-value": A(e) === "all",
-                          indeterminate: A(e) === "indeterminate",
-                          disabled: r.readonly,
-                          size: r.size === "sm" ? "xs" : "sm",
-                          "onUpdate:modelValue": (s) => T(e)
-                        }, null, 8, ["model-value", "indeterminate", "disabled", "size", "onUpdate:modelValue"])) : (a(), m(E, {
-                          key: 1,
-                          "model-value": A(e) === "all",
-                          disabled: r.readonly,
-                          "onUpdate:modelValue": (s) => T(e)
-                        }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
-                      ])
-                    ])
-                  ], 10, Ue)
-                ], 8, Ge),
-                b.value.has(e.key) ? f("", !0) : (a(!0), d(k, { key: 0 }, M(e.rows, (s) => (a(), d("tr", {
-                  key: e.key + "-" + s.key,
-                  class: "hover:bg-accent/40 transition-colors duration-100"
-                }, [
-                  i("td", {
-                    class: u([r.size === "sm" ? "px-3 py-1.5" : "px-4 py-2", "border-t"])
-                  }, [
-                    i("div", Pe, [
-                      i("span", {
-                        class: u([x.value, "text-foreground"])
-                      }, v(s.label), 3),
-                      s.description ? (a(), m(Y, {
-                        key: 0,
-                        content: s.description,
-                        placement: "top"
-                      }, {
-                        default: G(() => [
-                          V(h, {
-                            icon: "lucide:info",
-                            class: "w-3 h-3 text-muted-foreground cursor-auto shrink-0"
-                          })
-                        ]),
-                        _: 1
-                      }, 8, ["content"])) : f("", !0)
-                    ])
-                  ], 2),
-                  (a(!0), d(k, null, M(K.value, (c) => (a(), d("td", {
-                    key: c.key,
-                    class: u([
-                      r.size === "sm" ? "px-2 py-1.5" : "px-3 py-2",
-                      "text-center border-t border-l",
-                      !X(e, c.key) || !C(s, c.key) ? "bg-muted/30" : ""
-                    ])
-                  }, [
-                    !X(e, c.key) || !C(s, c.key) ? (a(), d("div", Ae, [...t[6] || (t[6] = [
-                      i("span", { class: "text-xs text-muted-foreground/40 select-none" }, "—", -1)
-                    ])])) : (a(), d("div", Be, [
-                      r.toggleMode === "checkbox" ? (a(), m(U, {
-                        key: 0,
-                        "model-value": I(e.key, s, c.key),
-                        disabled: r.readonly,
-                        size: r.size === "sm" ? "xs" : "sm",
-                        "onUpdate:modelValue": (z) => J(e.key, s, c.key)
-                      }, null, 8, ["model-value", "disabled", "size", "onUpdate:modelValue"])) : (a(), m(E, {
-                        key: 1,
-                        "model-value": I(e.key, s, c.key),
-                        disabled: r.readonly,
-                        "onUpdate:modelValue": (z) => J(e.key, s, c.key)
-                      }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
-                    ]))
-                  ], 2))), 128))
-                ]))), 128))
-              ], 64))), 128))
-            ])
-          ])
-        ]))
-      ], 64)) : (a(), d(k, { key: 1 }, [
-        O.value.length === 0 ? (a(), d("div", Ee, [
-          V(h, {
-            icon: "lucide:search-x",
-            class: "w-8 h-8 mx-auto mb-3 opacity-50"
-          }),
-          i("p", {
-            class: u(x.value)
-          }, "No permissions match your filters.", 2)
-        ])) : (a(), d("div", je, [
-          (a(!0), d(k, null, M(O.value, (e, o) => (a(), d(k, {
-            key: e.key
-          }, [
-            i("div", {
-              class: u([
-                Q.value,
-                "flex items-center justify-between bg-muted cursor-pointer select-none",
-                o > 0 ? "border-t" : ""
-              ]),
-              onClick: (s) => q(e.key)
-            }, [
-              i("div", Ke, [
-                r.collapsible ? (a(), m(h, {
-                  key: 0,
-                  icon: "lucide:chevron-right",
-                  class: u(["w-3.5 h-3.5 transition-transform duration-200 text-muted-foreground", { "rotate-90": !b.value.has(e.key) }])
-                }, null, 8, ["class"])) : f("", !0),
-                e.icon ? (a(), m(h, {
-                  key: 1,
-                  icon: e.icon,
-                  class: "w-4 h-4 text-muted-foreground"
-                }, null, 8, ["icon"])) : f("", !0),
-                i("span", {
-                  class: u([x.value, "font-semibold text-foreground"])
-                }, v(e.label), 3),
-                i("span", {
-                  class: u([r.size === "sm" ? "text-[10px]" : "text-xs", "text-muted-foreground"])
-                }, " (" + v(e.permissions.filter((s) => $(s.key)).length) + "/" + v(e.permissions.length) + ") ", 3)
-              ]),
-              i("div", {
-                class: "flex items-center",
-                onClick: t[4] || (t[4] = D(() => {
-                }, ["stop"]))
-              }, [
-                r.toggleMode === "checkbox" ? (a(), m(U, {
-                  key: 0,
-                  "model-value": S(e) === "all",
-                  indeterminate: S(e) === "indeterminate",
-                  disabled: r.readonly,
-                  size: r.size === "sm" ? "xs" : "sm",
-                  "onUpdate:modelValue": (s) => H(e)
-                }, null, 8, ["model-value", "indeterminate", "disabled", "size", "onUpdate:modelValue"])) : (a(), m(E, {
-                  key: 1,
-                  "model-value": S(e) === "all",
-                  disabled: r.readonly,
-                  "onUpdate:modelValue": (s) => H(e)
-                }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
-              ])
-            ], 10, Ne),
-            b.value.has(e.key) ? f("", !0) : (a(), d("div", De, [
-              (a(!0), d(k, null, M(e.permissions, (s, c) => (a(), d("div", {
-                key: s.key,
-                class: u([
-                  Q.value,
-                  "flex items-center justify-between border-t hover:bg-accent/40 transition-colors duration-100"
-                ])
-              }, [
-                i("div", Fe, [
-                  i("span", {
-                    class: u([x.value, "text-foreground"])
-                  }, v(s.label), 3),
-                  s.description ? (a(), m(Y, {
-                    key: 0,
-                    content: s.description,
-                    placement: "top"
-                  }, {
-                    default: G(() => [
-                      V(h, {
-                        icon: "lucide:info",
-                        class: "w-3 h-3 text-muted-foreground cursor-auto shrink-0"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["content"])) : f("", !0)
-                ]),
-                i("div", qe, [
-                  r.toggleMode === "checkbox" ? (a(), m(U, {
-                    key: 0,
-                    "model-value": $(s.key),
-                    disabled: r.readonly,
-                    size: r.size === "sm" ? "xs" : "sm",
-                    "onUpdate:modelValue": (z) => R(s.key)
-                  }, null, 8, ["model-value", "disabled", "size", "onUpdate:modelValue"])) : (a(), m(E, {
-                    key: 1,
-                    "model-value": $(s.key),
-                    disabled: r.readonly,
-                    "onUpdate:modelValue": (z) => R(s.key)
-                  }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]))
-                ])
-              ], 2))), 128))
-            ]))
-          ], 64))), 128))
-        ]))
-      ], 64))
+      Q(U, {
+        searchQuery: r.value,
+        "onUpdate:searchQuery": e[0] || (e[0] = (o) => r.value = o),
+        selectedGroupKeys: d.value,
+        "onUpdate:selectedGroupKeys": e[1] || (e[1] = (o) => d.value = o),
+        searchable: s.searchable,
+        size: s.size,
+        readonly: s.readonly,
+        "total-perms": L.value,
+        "selected-count": s.modelValue.length,
+        "group-options": x.value,
+        onSelectAll: M,
+        onClearAll: S
+      }, null, 8, ["searchQuery", "selectedGroupKeys", "searchable", "size", "readonly", "total-perms", "selected-count", "group-options"]),
+      i.value ? (g(), b(q, {
+        key: 0,
+        "matrix-groups": V.value,
+        "model-value": s.modelValue,
+        "collapsed-groups": n.value,
+        "toggle-mode": s.toggleMode,
+        readonly: s.readonly,
+        size: s.size,
+        collapsible: s.collapsible,
+        "onUpdate:modelValue": e[2] || (e[2] = (o) => l.$emit("update:modelValue", o)),
+        onToggleCollapse: w
+      }, null, 8, ["matrix-groups", "model-value", "collapsed-groups", "toggle-mode", "readonly", "size", "collapsible"])) : (g(), b(P, {
+        key: 1,
+        groups: G.value,
+        "model-value": s.modelValue,
+        "collapsed-groups": n.value,
+        "toggle-mode": s.toggleMode,
+        readonly: s.readonly,
+        size: s.size,
+        collapsible: s.collapsible,
+        "onUpdate:modelValue": e[3] || (e[3] = (o) => l.$emit("update:modelValue", o)),
+        onToggleCollapse: w
+      }, null, 8, ["groups", "model-value", "collapsed-groups", "toggle-mode", "readonly", "size", "collapsible"]))
     ], 2));
   }
 });
 export {
-  Ye as default
+  D as default
 };