vlite3 1.4.39 → 1.4.41

package/components/AppShell/AppShellLayoutHeaderShell.vue.js

@@ -1,21 +1,20 @@
-import { defineComponent as _, inject as N, openBlock as a, createElementBlock as o, createVNode as m, Transition as R, withCtx as p, withDirectives as g, createElementVNode as t, normalizeClass as b, unref as e, renderSlot as r, createCommentVNode as i, vShow as y, isRef as w, createSlots as B, createTextVNode as E } from "vue";
-import H from "../SidePanel.vue.js";
-import L from "../Navbar/NavbarTabs.vue.js";
-/* empty css                        */
-import M from "../Breadcrumb/Breadcrumb.vue.js";
+import { defineComponent as _, inject as R, openBlock as r, createElementBlock as o, createVNode as m, Transition as B, unref as e, withCtx as v, withDirectives as y, createElementVNode as t, normalizeClass as b, renderSlot as a, createCommentVNode as i, vShow as w, isRef as k, createSlots as E, createTextVNode as H } from "vue";
+import L from "../SidePanel.vue.js";
+import M from "../Navbar/NavbarTabs.vue.js";
+import P from "../Breadcrumb/Breadcrumb.vue.js";
 import "@iconify/vue";
 /* empty css                                */
-import { APPSHELL_LAYOUT_KEY as P } from "./useAppShell.js";
-const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background overflow-hidden" }, O = {
+import { APPSHELL_LAYOUT_KEY as A } from "./useAppShell.js";
+const O = { class: "vlite-app-layout flex w-full h-full bg-background overflow-hidden" }, U = {
   key: 0,
   class: "flex items-center"
-}, U = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden gap-2 max-sm:p-0 max-sm:gap-0" }, D = {
+}, D = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden gap-2 max-sm:p-0 max-sm:gap-0" }, I = {
   key: 0,
   class: "w-full shrink-0 z-20 px-5 pt-2 border-hidden"
-}, I = { class: "w-full shrink-0 z-20 bg-background overflow-hidden rounded-xl max-sm:rounded-none border border-border max-sm:border-0" }, Y = {
+}, Y = { class: "w-full shrink-0 z-20 bg-background overflow-hidden rounded-xl max-sm:rounded-none border border-border max-sm:border-0" }, j = {
   key: 0,
   class: "shrink-0 w-full px-6"
-}, j = { class: "flex flex-col h-full" }, K = {
+}, F = { class: "flex flex-col h-full" }, K = {
   class: "flex-1 overflow-y-auto scrollbar-thin scrollbar-stable",
   style: { "will-change": "transform", contain: "layout style" }
 }, q = {
@@ -23,96 +22,97 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
   class: "mt-auto"
 }, le = /* @__PURE__ */ _({
   __name: "AppShellLayoutHeaderShell",
-  setup(F) {
-    const k = N(P), {
+  setup(G) {
+    const $ = R(A), {
       props: l,
-      sidebarHidden: $,
+      sidebarHidden: C,
       isMobileMenuOpen: d,
-      isSidebarVisible: x,
-      toggleSidebar: C,
-      pageTitle: S,
+      isSidebarVisible: S,
+      toggleSidebar: x,
+      pageTitle: T,
       breadcrumbData: f,
       breakpointClasses: u,
-      nestedTabsItems: v,
+      nestedTabsItems: p,
       activeNestedTab: c,
-      handleNestedTabClick: T,
-      mainScrollRef: V,
-      layoutMainRef: z
-    } = k;
-    return (s, n) => (a(), o("div", A, [
-      m(R, {
+      handleNestedTabClick: V,
+      mainScrollRef: z,
+      layoutMainRef: N,
+      sidebarSlideFromClass: g
+    } = $;
+    return (s, n) => (r(), o("div", O, [
+      m(B, {
         "enter-active-class": "transition-all duration-300 ease-in-out",
         "leave-active-class": "transition-all duration-300 ease-in-out",
-        "enter-from-class": "opacity-0 -translate-x-2",
+        "enter-from-class": e(g),
         "enter-to-class": "opacity-100 translate-x-0",
         "leave-from-class": "opacity-100 translate-x-0",
-        "leave-to-class": "opacity-0 -translate-x-2"
+        "leave-to-class": e(g)
       }, {
-        default: p(() => [
-          g(t("nav", {
+        default: v(() => [
+          y(t("nav", {
             class: b([
-              "shrink-0 h-full flex flex-col bg-background border-r border-border  overflow-hidden z-30",
+              "shrink-0 h-full flex flex-col bg-background border-e border-border  overflow-hidden z-30",
               e(u).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
               e(l).class
             ]),
             role: "navigation",
             "aria-label": "Sidebar"
           }, [
-            s.$slots["sidebar-header"] ? (a(), o("div", O, [
-              r(s.$slots, "sidebar-header")
+            s.$slots["sidebar-header"] ? (r(), o("div", U, [
+              a(s.$slots, "sidebar-header")
             ])) : i("", !0),
             t("div", {
               class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(l).contentClass]),
               style: { "will-change": "transform", contain: "layout style" }
             }, [
-              r(s.$slots, "sidebar")
+              a(s.$slots, "sidebar")
             ], 2),
-            s.$slots["sidebar-footer"] ? (a(), o("div", {
+            s.$slots["sidebar-footer"] ? (r(), o("div", {
               key: 1,
               class: b(["shrink-0", e(l).rightClass])
             }, [
-              r(s.$slots, "sidebar-footer")
+              a(s.$slots, "sidebar-footer")
             ], 2)) : i("", !0)
           ], 2), [
-            [y, !e($)]
+            [w, !e(C)]
           ])
         ]),
         _: 3
-      }),
-      t("div", U, [
-        s.$slots.header ? g((a(), o("header", D, [
-          t("div", I, [
-            r(s.$slots, "header", {
+      }, 8, ["enter-from-class", "leave-to-class"]),
+      t("div", D, [
+        s.$slots.header ? y((r(), o("header", I, [
+          t("div", Y, [
+            a(s.$slots, "header", {
               isOpen: e(d),
               toggle: () => d.value = !e(d),
-              sidebarVisible: e(x),
-              toggleSidebar: e(C),
+              sidebarVisible: e(S),
+              toggleSidebar: e(x),
               breadcrumbItems: e(f).items.value,
-              pageTitle: e(S)
+              pageTitle: e(T)
             })
           ])
         ], 512)), [
-          [y, !e(l).hideHeader]
+          [w, !e(l).hideHeader]
         ]) : i("", !0),
-        s.$slots.main ? (a(), o("main", {
+        s.$slots.main ? (r(), o("main", {
           key: 1,
           ref_key: "layoutMainRef",
-          ref: z,
+          ref: N,
           class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0 bg-background"
         }, [
-          e(l).renderNestedTabs && e(v).length > 0 ? (a(), o("div", Y, [
-            m(L, {
+          e(l).renderNestedTabs && e(p).length > 0 ? (r(), o("div", j, [
+            m(M, {
               modelValue: e(c),
-              "onUpdate:modelValue": n[0] || (n[0] = (h) => w(c) ? c.value = h : null),
-              onChange: e(T),
-              items: e(v)
+              "onUpdate:modelValue": n[0] || (n[0] = (h) => k(c) ? c.value = h : null),
+              onChange: e(V),
+              items: e(p)
             }, null, 8, ["modelValue", "onChange", "items"])
           ])) : i("", !0),
-          e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(f).items.value.length > 1 ? (a(), o("div", {
+          e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(f).items.value.length > 1 ? (r(), o("div", {
             key: 1,
             class: b(["shrink-0 w-full border-b border-border px-6 py-2", e(l).breadcrumbClass])
           }, [
-            m(e(M), {
+            m(e(P), {
               items: e(f).items.value,
               variant: e(l).breadcrumbVariant,
               separator: e(l).breadcrumbSeparator,
@@ -121,34 +121,34 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
           ], 2)) : i("", !0),
           t("div", {
             ref_key: "mainScrollRef",
-            ref: V,
+            ref: z,
             style: { "will-change": "transform", contain: "layout style" },
             class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
           }, [
-            r(s.$slots, "main")
+            a(s.$slots, "main")
           ], 512)
         ], 512)) : i("", !0)
       ]),
-      m(H, {
+      m(L, {
         show: e(d),
-        "onUpdate:show": n[1] || (n[1] = (h) => w(d) ? d.value = h : null),
+        "onUpdate:show": n[1] || (n[1] = (h) => k(d) ? d.value = h : null),
         position: "left",
         size: "sm",
         triggerClass: e(u).mobileTrigger,
         class: b(["z-60", e(u).mobileTrigger]),
-        headerClass: "pl-3! pr-4.5! py-3!",
+        headerClass: "ps-3! pe-4.5! py-3!",
         bodyClass: "p-0!"
-      }, B({
-        default: p(() => [
-          t("div", j, [
+      }, E({
+        default: v(() => [
+          t("div", F, [
             t("div", K, [
-              r(s.$slots, "mobile-sidebar", {}, () => [
-                r(s.$slots, "sidebar")
+              a(s.$slots, "mobile-sidebar", {}, () => [
+                a(s.$slots, "sidebar")
               ])
             ]),
-            s.$slots["mobile-sidebar-footer"] || s.$slots["sidebar-footer"] ? (a(), o("div", q, [
-              r(s.$slots, "mobile-sidebar-footer", {}, () => [
-                r(s.$slots, "sidebar-footer")
+            s.$slots["mobile-sidebar-footer"] || s.$slots["sidebar-footer"] ? (r(), o("div", q, [
+              a(s.$slots, "mobile-sidebar-footer", {}, () => [
+                a(s.$slots, "sidebar-footer")
               ])
             ])) : i("", !0)
           ])
@@ -157,10 +157,10 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
       }, [
         s.$slots["mobile-sidebar-header"] || s.$slots["sidebar-header"] ? {
           name: "header",
-          fn: p(() => [
-            r(s.$slots, "mobile-sidebar-header", {}, () => [
-              r(s.$slots, "sidebar-header", {}, () => [
-                n[2] || (n[2] = E("Brand", -1))
+          fn: v(() => [
+            a(s.$slots, "mobile-sidebar-header", {}, () => [
+              a(s.$slots, "sidebar-header", {}, () => [
+                n[2] || (n[2] = H("Brand", -1))
               ])
             ])
           ]),

package/components/AppShell/AppShellLayoutSidebarFirst.vue.d.ts

@@ -24,13 +24,13 @@ declare function __VLS_template(): {
         layoutMainRef: HTMLElement;
         mainScrollRef: HTMLDivElement;
     };
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     layoutMainRef: HTMLElement;
     mainScrollRef: HTMLDivElement;
-}, HTMLDivElement>;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/AppShell/AppShellLayoutSidebarFirst.vue.js

@@ -1,15 +1,14 @@
-import { defineComponent as N, inject as R, openBlock as r, createElementBlock as o, createVNode as m, Transition as _, withCtx as p, withDirectives as y, createElementVNode as d, normalizeClass as b, unref as e, renderSlot as a, createCommentVNode as t, vShow as g, isRef as w, createSlots as B, createTextVNode as E } from "vue";
-import L from "../SidePanel.vue.js";
-import M from "../Navbar/NavbarTabs.vue.js";
-/* empty css                        */
-import P from "../Breadcrumb/Breadcrumb.vue.js";
+import { defineComponent as R, inject as B, openBlock as r, createElementBlock as o, createVNode as m, Transition as E, unref as e, withCtx as v, withDirectives as g, createElementVNode as n, normalizeClass as b, renderSlot as a, createCommentVNode as t, vShow as w, isRef as k, createSlots as L, createTextVNode as M } from "vue";
+import P from "../SidePanel.vue.js";
+import A from "../Navbar/NavbarTabs.vue.js";
+import H from "../Breadcrumb/Breadcrumb.vue.js";
 import "@iconify/vue";
 /* empty css                                */
-import { APPSHELL_LAYOUT_KEY as A } from "./useAppShell.js";
-const H = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflow-hidden" }, O = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, U = {
+import { APPSHELL_LAYOUT_KEY as O } from "./useAppShell.js";
+const U = { class: "vlite-app-layout flex w-full h-full bg-body overflow-hidden" }, _ = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, D = {
   key: 0,
   class: "w-full shrink-0 z-20 border-b bg-background"
-}, D = {
+}, F = {
   key: 0,
   class: "shrink-0 w-full"
 }, I = { class: "flex flex-col h-full" }, Y = {
@@ -18,142 +17,143 @@ const H = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflo
 }, j = {
   key: 0,
   class: "mt-auto"
-}, ee = /* @__PURE__ */ N({
+}, ee = /* @__PURE__ */ R({
   __name: "AppShellLayoutSidebarFirst",
-  setup(F) {
-    const k = R(A), {
-      props: s,
-      sidebarHidden: $,
+  setup(K) {
+    const $ = B(O), {
+      props: l,
+      sidebarHidden: C,
       isMobileMenuOpen: i,
-      isSidebarVisible: C,
-      toggleSidebar: S,
-      pageTitle: T,
+      isSidebarVisible: S,
+      toggleSidebar: T,
+      pageTitle: V,
       breadcrumbData: f,
       breakpointClasses: u,
-      nestedTabsItems: v,
+      nestedTabsItems: p,
       activeNestedTab: c,
-      handleNestedTabClick: V,
-      mainScrollRef: x,
-      layoutMainRef: z
-    } = k;
-    return (l, n) => (r(), o("div", H, [
-      m(_, {
+      handleNestedTabClick: z,
+      mainScrollRef: N,
+      layoutMainRef: x,
+      sidebarSlideFromClass: y
+    } = $;
+    return (s, d) => (r(), o("div", U, [
+      m(E, {
         "enter-active-class": "transition-all duration-300 ease-in-out",
         "leave-active-class": "transition-all duration-300 ease-in-out",
-        "enter-from-class": "opacity-0 -translate-x-2",
+        "enter-from-class": e(y),
         "enter-to-class": "opacity-100 translate-x-0",
         "leave-from-class": "opacity-100 translate-x-0",
-        "leave-to-class": "opacity-0 -translate-x-2"
+        "leave-to-class": e(y)
       }, {
-        default: p(() => [
-          y(d("nav", {
+        default: v(() => [
+          g(n("nav", {
             class: b([
-              "shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
+              "shrink-0 h-full flex flex-col bg-background border-e border-border overflow-hidden z-30",
               e(u).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
-              e(s).class
+              e(l).class
             ]),
             role: "navigation",
             "aria-label": "Sidebar"
           }, [
-            l.$slots["sidebar-header"] ? a(l.$slots, "sidebar-header", { key: 0 }) : t("", !0),
-            d("div", {
-              class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(s).contentClass]),
+            s.$slots["sidebar-header"] ? a(s.$slots, "sidebar-header", { key: 0 }) : t("", !0),
+            n("div", {
+              class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(l).contentClass]),
               style: { "will-change": "transform", contain: "layout style" }
             }, [
-              a(l.$slots, "sidebar")
+              a(s.$slots, "sidebar")
             ], 2),
-            l.$slots["sidebar-footer"] ? (r(), o("div", {
+            s.$slots["sidebar-footer"] ? (r(), o("div", {
               key: 1,
-              class: b(["shrink-0", e(s).rightClass])
+              class: b(["shrink-0", e(l).rightClass])
             }, [
-              a(l.$slots, "sidebar-footer")
+              a(s.$slots, "sidebar-footer")
             ], 2)) : t("", !0)
           ], 2), [
-            [g, !e($)]
+            [w, !e(C)]
           ])
         ]),
         _: 3
-      }),
-      d("div", O, [
-        l.$slots.header ? y((r(), o("header", U, [
-          a(l.$slots, "header", {
+      }, 8, ["enter-from-class", "leave-to-class"]),
+      n("div", _, [
+        s.$slots.header ? g((r(), o("header", D, [
+          a(s.$slots, "header", {
             isOpen: e(i),
             toggle: () => i.value = !e(i),
-            sidebarVisible: e(C),
-            toggleSidebar: e(S),
+            sidebarVisible: e(S),
+            toggleSidebar: e(T),
             breadcrumbItems: e(f).items.value,
-            pageTitle: e(T)
+            pageTitle: e(V)
           })
         ], 512)), [
-          [g, !e(s).hideHeader]
+          [w, !e(l).hideHeader]
         ]) : t("", !0),
-        l.$slots.main ? (r(), o("main", {
+        s.$slots.main ? (r(), o("main", {
           key: 1,
           ref_key: "layoutMainRef",
-          ref: z,
+          ref: x,
           class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0 scrollbar-thin scrollbar-stable"
         }, [
-          e(s).renderNestedTabs && e(v).length > 0 ? (r(), o("div", D, [
-            m(M, {
+          e(l).renderNestedTabs && e(p).length > 0 ? (r(), o("div", F, [
+            m(A, {
               modelValue: e(c),
-              "onUpdate:modelValue": n[0] || (n[0] = (h) => w(c) ? c.value = h : null),
-              onChange: e(V),
-              items: e(v)
+              "onUpdate:modelValue": d[0] || (d[0] = (h) => k(c) ? c.value = h : null),
+              onChange: e(z),
+              items: e(p)
             }, null, 8, ["modelValue", "onChange", "items"])
           ])) : t("", !0),
-          e(s).breadcrumb && e(s).breadcrumbPosition === "main" && e(f).items.value.length > 1 ? (r(), o("div", {
+          e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(f).items.value.length > 1 ? (r(), o("div", {
             key: 1,
-            class: b(["shrink-0 w-full border-b border-border px-6 py-2", e(s).breadcrumbClass])
+            class: b(["shrink-0 w-full border-b border-border px-6 py-2", e(l).breadcrumbClass])
           }, [
-            m(e(P), {
+            m(e(H), {
               items: e(f).items.value,
-              variant: e(s).breadcrumbVariant,
-              separator: e(s).breadcrumbSeparator,
-              size: e(s).breadcrumbSize
+              variant: e(l).breadcrumbVariant,
+              separator: e(l).breadcrumbSeparator,
+              size: e(l).breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
           ], 2)) : t("", !0),
-          d("div", {
+          n("div", {
             ref_key: "mainScrollRef",
-            ref: x,
+            ref: N,
             style: { "will-change": "transform", contain: "layout style" },
             class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
           }, [
-            a(l.$slots, "main")
+            a(s.$slots, "main")
           ], 512)
         ], 512)) : t("", !0)
       ]),
-      m(L, {
+      m(P, {
         show: e(i),
-        "onUpdate:show": n[1] || (n[1] = (h) => w(i) ? i.value = h : null),
+        "onUpdate:show": d[1] || (d[1] = (h) => k(i) ? i.value = h : null),
         position: "left",
         size: "sm",
         triggerClass: e(u).mobileTrigger,
         class: b(["z-60", e(u).mobileTrigger]),
-        headerClass: "pl-3! pr-4.5! py-3!",
+        headerClass: "ps-3! pe-4.5! py-3!",
         bodyClass: "p-0!"
-      }, B({
-        default: p(() => [
-          d("div", I, [
-            d("div", Y, [
-              a(l.$slots, "mobile-sidebar", {}, () => [
-                a(l.$slots, "sidebar")
+      }, L({
+        default: v(() => [
+          n("div", I, [
+            n("div", Y, [
+              a(s.$slots, "mobile-sidebar", {}, () => [
+                a(s.$slots, "sidebar")
               ])
             ]),
-            l.$slots["mobile-sidebar-footer"] || l.$slots["sidebar-footer"] ? (r(), o("div", j, [
-              a(l.$slots, "mobile-sidebar-footer", {}, () => [
-                a(l.$slots, "sidebar-footer")
+            s.$slots["mobile-sidebar-footer"] || s.$slots["sidebar-footer"] ? (r(), o("div", j, [
+              a(s.$slots, "mobile-sidebar-footer", {}, () => [
+                a(s.$slots, "sidebar-footer")
               ])
             ])) : t("", !0)
           ])
         ]),
         _: 2
       }, [
-        l.$slots["mobile-sidebar-header"] || l.$slots["sidebar-header"] ? {
+        s.$slots["mobile-sidebar-header"] || s.$slots["sidebar-header"] ? {
           name: "header",
-          fn: p(() => [
-            a(l.$slots, "mobile-sidebar-header", {}, () => [
-              a(l.$slots, "sidebar-header", {}, () => [
-                n[2] || (n[2] = E("Brand", -1))
+          fn: v(() => [
+            a(s.$slots, "mobile-sidebar-header", {}, () => [
+              a(s.$slots, "sidebar-header", {}, () => [
+                d[2] || (d[2] = M("Brand", -1))
               ])
             ])
           ]),

package/components/AppShell/AppShellLayoutStorefront.vue.js

@@ -1,8 +1,7 @@
-import { defineComponent as z, inject as T, computed as v, openBlock as t, createElementBlock as i, renderSlot as l, createCommentVNode as d, withDirectives as _, createElementVNode as a, normalizeClass as n, unref as e, createVNode as f, vShow as R, isRef as y, createSlots as P, withCtx as w } from "vue";
+import { defineComponent as T, inject as z, computed as v, openBlock as t, createElementBlock as i, renderSlot as l, createCommentVNode as d, withDirectives as R, createElementVNode as a, normalizeClass as n, unref as e, createVNode as f, vShow as P, isRef as y, createSlots as _, withCtx as w } from "vue";
 import V from "../Icon.vue.js";
-import j from "../SidePanel.vue.js";
-import N from "../Navbar/NavbarTabs.vue.js";
-/* empty css                        */
+import N from "../SidePanel.vue.js";
+import j from "../Navbar/NavbarTabs.vue.js";
 import B from "../Breadcrumb/Breadcrumb.vue.js";
 /* empty css                                */
 import { APPSHELL_LAYOUT_KEY as E } from "./useAppShell.js";
@@ -25,10 +24,10 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
 }, F = {
   key: 0,
   class: "mt-auto border-t border-border px-3.5 py-3"
-}, ae = /* @__PURE__ */ z({
+}, ie = /* @__PURE__ */ T({
   __name: "AppShellLayoutStorefront",
   setup(G) {
-    const k = T(E), {
+    const k = z(E), {
       props: s,
       isMobileMenuOpen: r,
       isSidebarVisible: J,
@@ -44,10 +43,10 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
     } = k, S = v(() => [
       "w-full shrink-0 bg-background transition-shadow duration-200",
       {
-        fixed: "fixed top-0 left-0 z-50",
+        fixed: "fixed top-0 start-0 z-50",
         sticky: "sticky top-0 z-50",
         relative: "relative z-20",
-        absolute: "absolute top-0 left-0 w-full z-50"
+        absolute: "absolute top-0 start-0 w-full z-50"
       }[s.position || "sticky"],
       s.border ? "border-b border-border" : "",
       s.glass ? "bg-background/90 backdrop-blur-md" : "",
@@ -58,7 +57,7 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       o.$slots.announcement ? (t(), i("div", O, [
         l(o.$slots, "announcement")
       ])) : d("", !0),
-      _(a("header", {
+      R(a("header", {
         class: n(S.value)
       }, [
         a("div", A, [
@@ -111,7 +110,7 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
           ])
         ], 2)) : d("", !0)
       ], 2), [
-        [R, !e(s).hideHeader]
+        [P, !e(s).hideHeader]
       ]),
       o.$slots.main ? (t(), i("main", {
         key: 1,
@@ -120,7 +119,7 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
         class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0"
       }, [
         e(s).renderNestedTabs && e(g).length > 0 ? (t(), i("div", Y, [
-          f(N, {
+          f(j, {
             modelValue: e(c),
             "onUpdate:modelValue": u[1] || (u[1] = (b) => y(c) ? c.value = b : null),
             onChange: e($),
@@ -150,16 +149,16 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       o.$slots.footer ? (t(), i("footer", I, [
         l(o.$slots, "footer")
       ])) : d("", !0),
-      f(j, {
+      f(N, {
         show: e(r),
         "onUpdate:show": u[2] || (u[2] = (b) => y(r) ? r.value = b : null),
         position: "left",
         size: "sm",
         triggerClass: e(m).mobileTrigger,
         class: n(["z-60", e(m).mobileTrigger]),
-        headerClass: "pl-3! pr-4.5! py-3!",
+        headerClass: "ps-3! pe-4.5! py-3!",
         bodyClass: "p-0!"
-      }, P({
+      }, _({
         default: w(() => [
           a("div", K, [
             a("div", q, [
@@ -184,5 +183,5 @@ const M = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
   }
 });
 export {
-  ae as default
+  ie as default
 };

package/components/AppShell/useAppShell.d.ts

@@ -11,6 +11,10 @@ export interface AppShellLayoutContext {
     sidebarHidden: ComputedRef<boolean>;
     pageTitle: ComputedRef<string>;
     isScrolled: Ref<boolean>;
+    /** Document / shell reading direction */
+    isRtl: ComputedRef<boolean>;
+    /** Sidebar show/hide slide: enter-from / leave-to classes */
+    sidebarSlideFromClass: ComputedRef<string>;
     mainScrollRef: Ref<HTMLElement | null>;
     layoutMainRef: Ref<HTMLElement | null>;
     toggleSidebar: () => void;