vlite3 1.1.2 → 1.1.5

package/components/Screen/Screen.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Fe, useSlots as Be, computed as i, markRaw as T, ref as m, provide as U, watch as N, openBlock as r, createElementBlock as y, normalizeClass as M, createVNode as C, createSlots as Te, withCtx as X, renderSlot as d, normalizeProps as x, guardReactiveProps as $, createElementVNode as Q, createBlock as V, createCommentVNode as h, isRef as Re, unref as Y, mergeProps as g, Fragment as G, resolveDynamicComponent as qe, toDisplayString as Ee } from "vue";
+import { defineComponent as Fe, useSlots as Be, computed as i, markRaw as T, ref as m, provide as U, watch as N, openBlock as r, createElementBlock as y, normalizeClass as M, createVNode as S, createSlots as Te, withCtx as X, renderSlot as d, normalizeProps as x, guardReactiveProps as $, createElementVNode as Q, createBlock as V, createCommentVNode as g, isRef as Re, unref as Y, mergeProps as h, Fragment as G, resolveDynamicComponent as qe, toDisplayString as Ee } from "vue";
 import Qe from "../Input.vue.js";
 /* empty css            */
 import J from "../Button.vue.js";
@@ -26,7 +26,7 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
 }, at = {
   key: 3,
   class: "-mt-2"
-}, nt = { key: 5 }, St = /* @__PURE__ */ Fe({
+}, nt = { key: 5 }, Ct = /* @__PURE__ */ Fe({
   __name: "Screen",
   props: {
     name: { default: "" },
@@ -130,10 +130,10 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
       }), e;
     });
     i(() => D.value.map((e) => e.key));
-    const ae = i(() => D.value.length > 1), ne = i(() => D.value.length > 0 ? D.value[0].key : "table"), c = Me(`view-mode-${Z.value}`, ne.value), L = i(() => D.value.find((a) => a.key === c.value)?.component ?? null), F = i(() => c.value === "table" && v.table ? "table" : c.value === "list" && v.list ? "list" : c.value === "list" && v.grid ? "grid" : c.value === "kanban" && v.kanban ? "kanban" : c.value === "calendar" && v.calendar ? "calendar" : null), w = m(""), p = m({}), P = m({ field: "", order: "" }), S = m(l.pageInfo?.currentPage || 1), R = m(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), o = m([]), q = m([]), B = m(!1), f = m(
+    const ae = i(() => D.value.length > 1), ne = i(() => D.value.length > 0 ? D.value[0].key : "table"), c = Me(`view-mode-${Z.value}`, ne.value), L = i(() => D.value.find((a) => a.key === c.value)?.component ?? null), F = i(() => c.value === "table" && v.table ? "table" : c.value === "list" && v.list ? "list" : c.value === "list" && v.grid ? "grid" : c.value === "kanban" && v.kanban ? "kanban" : c.value === "calendar" && v.calendar ? "calendar" : null), w = m(""), p = m({}), P = m({ field: "", order: "" }), C = m(l.pageInfo?.currentPage || 1), R = m(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), o = m([]), q = m([]), B = m(!1), f = m(
       l.defaultQuickFilter !== void 0 ? l.defaultQuickFilter : l.quickFilters && l.quickFilters.length > 0 ? l.quickFilters[0].value : ""
     ), ie = i(() => !l.quickFilters || l.quickFilters.length === 0 ? !1 : l.skipQuickFilterViews && l.skipQuickFilterViews.length > 0 ? !l.skipQuickFilterViews.includes(c.value) : !0), oe = (e) => {
-      f.value = e, S.value = 1, b();
+      f.value = e, C.value = 1, b();
     }, O = i(() => w.value && w.value.trim() !== "" || f.value !== "" && f.value !== null && f.value !== void 0 ? !0 : p.value ? Object.keys(p.value).some(
       (e) => p.value[e] !== "" && p.value[e] !== null && p.value[e] !== void 0
     ) : !1), z = i(() => l.data && l.data.length > 0), re = i(() => !l.skipEmptyViews || l.skipEmptyViews.length === 0 ? !1 : l.skipEmptyViews.includes(c.value)), s = i(() => ({
@@ -142,14 +142,13 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
       activeFilters: p.value,
       activeQuickFilter: f.value,
       activeSort: P.value,
-      page: S.value,
+      page: C.value,
       limit: R.value,
       selectedRows: o.value,
       isFiltered: O.value,
       hasData: z.value,
       loading: l.loading
     })), se = {
-      disableSearch: !0,
       forceSelectable: !l.hideSelectable,
       onTableChange: (e) => {
         P.value = { field: e.sort.field, order: e.sort.order }, b();
@@ -166,7 +165,7 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
     N(
       () => l.pageInfo?.currentPage,
       (e) => {
-        e && (S.value = e);
+        e && (C.value = e);
       }
     ), N(
       () => l.pageInfo?.itemsPerPage,
@@ -177,19 +176,19 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
     let A = null;
     N(w, () => {
       A && clearTimeout(A), A = setTimeout(() => {
-        S.value = 1, b();
+        C.value = 1, b();
       }, 300);
     });
     const ce = (e) => {
-      S.value = e, b();
+      C.value = e, b();
     }, me = (e) => {
-      R.value = e, S.value = 1, b();
+      R.value = e, C.value = 1, b();
     }, b = () => {
       if (!l.refetch) return;
       const e = { ...p.value };
       f.value !== "" && f.value !== null && f.value !== void 0 && (e[l.quickFilterKey] = f.value);
       const a = P.value.field && P.value.order ? { field: P.value.field, order: P.value.order } : void 0, n = {
-        pagination: { page: S.value, limit: R.value },
+        pagination: { page: C.value, limit: R.value },
         search: w.value,
         filter: e
       };
@@ -203,10 +202,10 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
     }), pe = i(() => {
       const e = u("vlite.screen.searchPlaceholder");
       return e !== "vlite.screen.searchPlaceholder" ? e : "Search...";
-    }), he = i(() => {
+    }), ge = i(() => {
       const e = u("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), ge = i(() => {
+    }), he = i(() => {
       const e = u("vlite.screen.confirmDeleteDesc", { count: q.value.length });
       return e !== "vlite.screen.confirmDeleteDesc" ? e : `Are you sure you want to delete the selected ${q.value.length > 1 ? "items" : "item"}?`;
     }), ye = i(() => {
@@ -225,12 +224,12 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
       return e !== "vlite.screen.importData" ? e : "Import Data";
     }), xe = m(null), E = m(!1), j = m(!1), Ve = (e) => {
       e.value === "export" ? E.value = !0 : e.value === "import" && (j.value = !0);
-    }, Se = i(
+    }, Ce = i(
       () => (l.exportSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field
       }))
-    ), Ce = i(
+    ), Se = i(
       () => (l.importSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field,
@@ -257,11 +256,11 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
       );
     };
     return (e, a) => (r(), y("div", We, [
-      t.customHeader ? d(e.$slots, "custom-header", x(g({ key: 1 }, s.value))) : (r(), y("div", {
+      t.customHeader ? d(e.$slots, "custom-header", x(h({ key: 1 }, s.value))) : (r(), y("div", {
         key: 0,
         class: M([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
       }, [
-        C(Oe, {
+        S(Oe, {
           title: t.title,
           "title-i18n": t.titleI18n,
           "title-class": t.titleClass,
@@ -295,13 +294,13 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
               icon: "lucide:trash-2",
               title: fe.value,
               onClick: a[0] || (a[0] = (n) => k(o.value))
-            }, null, 8, ["title"])) : h("", !0),
+            }, null, 8, ["title"])) : g("", !0),
             ae.value ? (r(), V(ze, {
               key: 1,
               modelValue: Y(c),
               "onUpdate:modelValue": a[1] || (a[1] = (n) => Re(c) ? c.value = n : null),
               views: D.value
-            }, null, 8, ["modelValue", "views"])) : h("", !0),
+            }, null, 8, ["modelValue", "views"])) : g("", !0),
             d(e.$slots, "before-search", x($(s.value))),
             t.showRefresh ? (r(), V(J, {
               key: 2,
@@ -312,7 +311,7 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
               title: ve.value,
               disabled: t.loading,
               onClick: b
-            }, null, 8, ["title", "disabled"])) : h("", !0),
+            }, null, 8, ["title", "disabled"])) : g("", !0),
             t.filterSchema && t.filterSchema.length > 0 ? (r(), V(Ue, {
               key: 3,
               schema: t.filterSchema,
@@ -320,9 +319,9 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
               modelValue: p.value,
               "onUpdate:modelValue": a[2] || (a[2] = (n) => p.value = n),
               onChange: b
-            }, null, 8, ["schema", "type", "modelValue"])) : h("", !0),
+            }, null, 8, ["schema", "type", "modelValue"])) : g("", !0),
             t.canSearch ? (r(), y("div", et, [
-              C(Qe, {
+              S(Qe, {
                 lazy: "",
                 modelValue: w.value,
                 "onUpdate:modelValue": a[3] || (a[3] = (n) => w.value = n),
@@ -332,11 +331,11 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
                 class: "bg-background w-full",
                 "show-clear-button": !0
               }, null, 8, ["modelValue", "placeholder"])
-            ])) : h("", !0)
+            ])) : g("", !0)
           ]),
           Q("div", tt, [
             d(e.$slots, "actions", x($(s.value)), () => [
-              C(Xe, {
+              S(Xe, {
                 "can-add": t.canAdd,
                 "add-component": t.addComponent,
                 "add-btn": t.addBtn,
@@ -351,7 +350,7 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
               "export-props": t.exportProps,
               "import-props": t.importProps,
               onSelect: Ve
-            }, null, 8, ["export-props", "import-props"])) : h("", !0),
+            }, null, 8, ["export-props", "import-props"])) : g("", !0),
             d(e.$slots, "after-add", x($(s.value)))
           ])
         ])
@@ -359,21 +358,21 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
       d(e.$slots, "sub-header", x($(s.value))),
       ie.value ? (r(), y("div", {
         key: 2,
-        class: M(["-mt-1.5 max-sm:hidden!", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-3" : "mb-3.5"])
+        class: M(["-mt-1 max-sm:hidden!", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-3" : "mb-3.5"])
       }, [
-        C(Je, {
+        S(Je, {
           modelValue: f.value,
           "onUpdate:modelValue": a[5] || (a[5] = (n) => f.value = n),
           options: t.quickFilters,
           variant: t.quickFilterVariant,
           onChange: oe
         }, null, 8, ["modelValue", "options", "variant"])
-      ], 2)) : h("", !0),
+      ], 2)) : g("", !0),
       Q("div", {
         class: M(["flex-1 w-full relative", t.containerClass])
       }, [
         !z.value && !t.loading && !re.value ? (r(), y(G, { key: 0 }, [
-          e.$slots.empty ? d(e.$slots, "empty", x(g({ key: 0 }, s.value))) : (r(), V(Ye, {
+          e.$slots.empty ? d(e.$slots, "empty", x(h({ key: 0 }, s.value))) : (r(), V(Ye, {
             key: 1,
             "empty-title": t.emptyTitle,
             "empty-title-i18n": t.emptyTitleI18n,
@@ -386,42 +385,42 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
             "add-btn": t.addBtn
           }, null, 8, ["empty-title", "empty-title-i18n", "empty-description", "empty-description-i18n", "empty-icon", "is-filtered", "can-add", "add-component", "add-btn"]))
         ], 64)) : (r(), y(G, { key: 1 }, [
-          F.value === "table" ? d(e.$slots, "table", g({
+          F.value === "table" ? d(e.$slots, "table", h({
             key: 0,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: k,
             updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "list" ? d(e.$slots, "list", g({
+          }, s.value)) : F.value === "list" ? d(e.$slots, "list", h({
             key: 1,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: k,
             updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "grid" ? d(e.$slots, "grid", g({
+          }, s.value)) : F.value === "grid" ? d(e.$slots, "grid", h({
             key: 2,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: k,
             updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "kanban" ? d(e.$slots, "kanban", g({
+          }, s.value)) : F.value === "kanban" ? d(e.$slots, "kanban", h({
             key: 3,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: k,
             updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "calendar" ? d(e.$slots, "calendar", g({
+          }, s.value)) : F.value === "calendar" ? d(e.$slots, "calendar", h({
             key: 4,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: k,
             updateSelectedRows: (n) => o.value = n
-          }, s.value)) : L.value ? (r(), V(qe(L.value), g({
+          }, s.value)) : L.value ? (r(), V(qe(L.value), h({
             key: 5,
             data: t.data,
             loading: t.loading,
@@ -434,7 +433,7 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
         ], 64))
       ], 2),
       t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (r(), y("div", at, [
-        C(Y(je), g({
+        S(Y(je), h({
           "current-page": t.pageInfo.currentPage,
           "total-pages": t.pageInfo.totalPages,
           "total-items": t.pageInfo.totalItems
@@ -442,12 +441,12 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
           onChange: ce,
           "onUpdate:itemsPerPage": me
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : h("", !0),
-      C(Ae, {
+      ])) : g("", !0),
+      S(Ae, {
         show: B.value,
         "onUpdate:show": a[7] || (a[7] = (n) => B.value = n),
-        title: he.value,
-        description: ge.value,
+        title: ge.value,
+        description: he.value,
         "confirm-text": ye.value,
         "cancel-text": we.value,
         variant: "danger",
@@ -459,28 +458,28 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
         show: E.value,
         "onUpdate:show": a[9] || (a[9] = (n) => E.value = n),
         data: t.data || [],
-        fields: Se.value,
+        fields: Ce.value,
         mode: $e.value,
         "export-props": t.exportProps,
         "on-export": Ie
-      }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : h("", !0),
+      }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : g("", !0),
       H.value ? (r(), y("div", nt, [
-        C(Ne, g({
+        S(Ne, h({
           show: j.value,
           "onUpdate:show": a[10] || (a[10] = (n) => j.value = n),
           ref_key: "importDataRef",
           ref: xe,
-          fields: Ce.value,
+          fields: Se.value,
           processBatch: De,
           onComplete: Pe
         }, typeof t.importProps == "object" ? t.importProps : {}, {
           title: be.value,
           class: "hidden!"
         }), null, 16, ["show", "fields", "title"])
-      ])) : h("", !0)
+      ])) : g("", !0)
     ]));
   }
 });
 export {
-  St as default
+  Ct as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -14,7 +14,7 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                        */

package/components/SidePanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./SidePanel.vue2.js";
 /* empty css               */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-00b21f72"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3446a690"]]);
 export {
-  f as default
+  m as default
 };

package/components/SidePanel.vue2.js

@@ -1,11 +1,11 @@
-import { defineComponent as D, ref as V, inject as j, computed as u, markRaw as K, watch as h, onMounted as M, onUnmounted as F, openBlock as l, createElementBlock as r, Fragment as L, createElementVNode as y, mergeProps as w, withModifiers as R, renderSlot as f, createCommentVNode as a, createBlock as v, Teleport as U, createVNode as k, Transition as x, withCtx as $, normalizeClass as c, toDisplayString as B, resolveDynamicComponent as q } from "vue";
+import { defineComponent as D, ref as L, inject as V, computed as f, markRaw as j, watch as h, onMounted as K, onUnmounted as M, openBlock as l, createElementBlock as d, Fragment as F, createElementVNode as y, mergeProps as w, withModifiers as R, renderSlot as c, createCommentVNode as a, createBlock as g, Teleport as U, createVNode as $, Transition as k, withCtx as x, normalizeClass as m, toDisplayString as B, resolveDynamicComponent as q } from "vue";
 import G from "./Button.vue.js";
 import { useKeyStroke as H } from "../composables/useKeyStroke.js";
 import { $t as T } from "../utils/i18n.js";
-const J = { class: "text-lg font-bold text-foreground" }, Q = {
+const J = ["data-testid"], Q = ["data-testid"], W = { class: "text-lg font-bold text-foreground" }, X = {
   key: 0,
   class: "mt-1 text-sm text-muted-foreground"
-}, _ = /* @__PURE__ */ D({
+}, te = /* @__PURE__ */ D({
   inheritAttrs: !1,
   __name: "SidePanel",
   props: {
@@ -30,51 +30,53 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
   },
   emits: ["close", "update:show", "onOpen", "onAfterOpen", "onAfterClose"],
   setup(o, { emit: z }) {
-    const t = o, p = z, s = V(t.show);
-    let d = null;
-    const n = j("dropdown-context", null), b = u(() => t.body ? K(t.body) : void 0);
+    const t = o, v = z, s = L(t.show);
+    let u = null;
+    const i = V("dropdown-context", null), C = f(() => t.body ? j(t.body) : void 0);
     h(
       () => t.show,
       (e) => {
-        s.value = e, e && (p("onOpen"), n?.close());
+        s.value = e, e && (v("onOpen"), i?.close());
       }
     );
     const A = () => {
-      s.value = !0, n?.close();
-    }, i = () => {
-      s.value = !1, p("update:show", !1), p("close");
+      s.value = !0, i?.close();
+    }, n = () => {
+      s.value = !1, v("update:show", !1), v("close");
     }, O = () => {
-      t.closeOutside && i();
-    }, { onKeyStroke: I } = H();
-    I("Escape", i), h(s, (e) => {
-      d && clearTimeout(d), e ? (n?.onChildToggle?.(!0), document.body.style.overflow = "hidden") : (document.body.style.overflow = "", d = setTimeout(() => {
-        n?.onChildToggle?.(!1);
+      t.closeOutside && n();
+    }, { onKeyStroke: S } = H();
+    S("Escape", n), h(s, (e) => {
+      u && clearTimeout(u), e ? (i?.onChildToggle?.(!0), document.body.style.overflow = "hidden") : (document.body.style.overflow = "", u = setTimeout(() => {
+        i?.onChildToggle?.(!1);
       }, 300));
+    }), K(() => {
+      s.value && i?.onChildToggle?.(!0);
     }), M(() => {
-      s.value && n?.onChildToggle?.(!0);
-    }), F(() => {
-      d && clearTimeout(d), s.value && n?.onChildToggle?.(!1), document.body.style.overflow = "";
+      u && clearTimeout(u), s.value && i?.onChildToggle?.(!1), document.body.style.overflow = "";
     });
-    const S = {
+    const I = {
       sm: "max-w-sm",
       md: "max-w-md",
       lg: "max-w-lg",
       xl: "max-w-xl",
       full: "max-w-full"
-    }, E = u(() => t.position === "left" ? "left-0" : "right-0"), N = u(() => t.position === "left" ? "slide-left" : "slide-right"), C = u(() => t.titleI18n ? T(t.titleI18n) : t.title), g = u(
+    }, E = f(() => t.position === "left" ? "left-0" : "right-0"), N = f(() => t.position === "left" ? "slide-left" : "slide-right"), r = f(() => t.titleI18n ? T(t.titleI18n) : t.title), b = f(
       () => t.descriptionI18n ? T(t.descriptionI18n) : t.description
     );
-    return (e, m) => (l(), r(L, null, [
+    return (e, p) => (l(), d(F, null, [
       y("span", w({
         onClick: R(A, ["stop"]),
         class: `${o.triggerClass}`
-      }, e.$attrs), [
-        f(e.$slots, "trigger", {}, () => [
-          o.body ? f(e.$slots, "default", { key: 0 }, void 0, !0) : a("", !0)
+      }, e.$attrs, {
+        "data-testid": e.$attrs["data-testid"] ? `${e.$attrs["data-testid"]}-trigger` : r.value ? `sidepanel-trigger-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "sidepanel-trigger"
+      }), [
+        c(e.$slots, "trigger", {}, () => [
+          o.body ? c(e.$slots, "default", { key: 0 }, void 0, !0) : a("", !0)
         ], !0)
-      ], 16),
-      (l(), v(U, { to: "body" }, [
-        k(x, {
+      ], 16, J),
+      (l(), g(U, { to: "body" }, [
+        $(k, {
           "enter-active-class": "transition-opacity duration-300 ease-out",
           "enter-from-class": "opacity-0",
           "enter-to-class": "opacity-100",
@@ -82,60 +84,64 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: $(() => [
-            s.value ? (l(), r("div", {
+          default: x(() => [
+            s.value ? (l(), d("div", {
               key: 0,
-              class: c(["fixed inset-0 z-50 v-sidepanel-overlay", o.overlayClass]),
+              class: m(["fixed inset-0 z-50 v-sidepanel-overlay", o.overlayClass]),
               onClick: O
             }, null, 2)) : a("", !0)
           ]),
           _: 1
         }),
-        k(x, {
+        $(k, {
           name: N.value,
-          onAfterEnter: m[0] || (m[0] = (P) => e.$emit("onAfterOpen")),
-          onAfterLeave: m[1] || (m[1] = (P) => e.$emit("onAfterClose"))
+          onAfterEnter: p[0] || (p[0] = (P) => e.$emit("onAfterOpen")),
+          onAfterLeave: p[1] || (p[1] = (P) => e.$emit("onAfterClose"))
         }, {
-          default: $(() => [
-            s.value ? (l(), r("div", {
+          default: x(() => [
+            s.value ? (l(), d("div", {
               key: 0,
-              class: c(["sidepanel-body fixed inset-y-0 z-50 flex flex-col bg-body shadow-sm border transition-transform duration-300 ease-in-out w-full", [S[o.size], E.value, t.class]])
+              role: "dialog",
+              "aria-modal": "true",
+              class: m(["sidepanel-body fixed inset-y-0 z-50 flex flex-col bg-body shadow-sm border transition-transform duration-300 ease-in-out w-full", [I[o.size], E.value, t.class]]),
+              "data-testid": e.$attrs["data-testid"] || (r.value ? `sidepanel-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "sidepanel")
             }, [
-              C.value || e.$slots.header ? (l(), r("div", {
+              r.value || e.$slots.header ? (l(), d("div", {
                 key: 0,
-                class: c([o.headerClass, "flex-none flex items-center justify-between px-5 py-2 border-b border-border"])
+                class: m([o.headerClass, "flex-none flex items-center justify-between px-5 py-2 border-b border-border"])
               }, [
-                f(e.$slots, "header", {}, () => [
+                c(e.$slots, "header", {}, () => [
                   y("div", null, [
-                    y("h3", J, B(C.value), 1),
-                    g.value ? (l(), r("p", Q, B(g.value), 1)) : a("", !0)
+                    y("h3", W, B(r.value), 1),
+                    b.value ? (l(), d("p", X, B(b.value), 1)) : a("", !0)
                   ])
                 ], !0),
-                o.hideCloseButton ? a("", !0) : (l(), v(G, {
+                o.hideCloseButton ? a("", !0) : (l(), g(G, {
                   key: 0,
                   rounded: "full",
                   size: "sm",
                   variant: "ghost",
                   icon: "lucide:x",
-                  onClick: i,
-                  class: "-mr-2"
+                  onClick: n,
+                  class: "-mr-2",
+                  "data-testid": "sidepanel-close-btn"
                 }))
               ], 2)) : a("", !0),
               y("div", {
-                class: c(["flex-1 overflow-y-auto px-6 py-4 scrollbar-thin scrollbar-stable", o.bodyClass])
+                class: m(["flex-1 overflow-y-auto px-6 py-4 scrollbar-thin scrollbar-stable", o.bodyClass])
               }, [
-                b.value ? (l(), v(q(b.value), w({ key: 0 }, { ...o.bodyProps, ...e.$attrs }, { close: i }), null, 16)) : f(e.$slots, "default", {
+                C.value ? (l(), g(q(C.value), w({ key: 0 }, { ...o.bodyProps, ...e.$attrs }, { close: n }), null, 16)) : c(e.$slots, "default", {
                   key: 1,
-                  close: i
+                  close: n
                 }, void 0, !0)
               ], 2),
-              e.$slots.footer ? (l(), r("div", {
+              e.$slots.footer ? (l(), d("div", {
                 key: 1,
-                class: c(["flex-none px-6 py-3 border-t border-border", o.footerClass])
+                class: m(["flex-none px-6 py-3 border-t border-border", o.footerClass])
               }, [
-                f(e.$slots, "footer", { close: i }, void 0, !0)
+                c(e.$slots, "footer", { close: n }, void 0, !0)
               ], 2)) : a("", !0)
-            ], 2)) : a("", !0)
+            ], 10, Q)) : a("", !0)
           ]),
           _: 3
         }, 8, ["name"])
@@ -144,5 +150,5 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
   }
 });
 export {
-  _ as default
+  te as default
 };

package/components/SidebarMenu/SidebarMenu.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<SidebarMenuProps, {}, {},
     indentSize: number;
     defaultExpanded: string[];
     showCompactLabels: boolean;
-    renderMode: "tree" | "popover";
+    renderMode: "tree" | "popover" | "drilldown";
     compactIconSize: string;
     labelClass: string;
     compactLabelClass: string;