vlite3 1.1.10 → 1.2.1

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

@@ -0,0 +1,39 @@
+import { AppShellProps } from '../../types/appshell.type';
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<AppShellProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "toggle-mobile": () => any;
+}, string, import('vue').PublicProps, Readonly<AppShellProps> & Readonly<{
+    "onToggle-mobile"?: () => any;
+}>, {
+    class: string;
+    height: string;
+    border: boolean;
+    variant: import('../../types/appshell.type').AppShellVariant;
+    floating: boolean;
+    compact: boolean;
+    position: import('../../types/appshell.type').AppShellPosition;
+    contentClass: string;
+    centerPosition: import('../../types/appshell.type').AppShellCenterPosition;
+    glass: boolean;
+    mobileBreakpoint: "sm" | "md" | "lg" | "xl";
+    menuClass: string;
+    rightClass: string;
+    mobileTriggerClass: string;
+    mobileMenuVariant: "sidepanel" | "dropdown";
+    breadcrumb: boolean;
+    renderNestedTabs: boolean;
+    logoClass: string;
+    sidebarToggle: boolean;
+    breadcrumbVariant: import('../Breadcrumb').BreadcrumbVariant;
+    breadcrumbSeparator: import('../Breadcrumb').BreadcrumbSeparator;
+    breadcrumbSize: import('../Breadcrumb').BreadcrumbSize;
+    breadcrumbHomeIcon: string;
+    breadcrumbPosition: "header" | "main";
+    breadcrumbClass: string;
+    layoutMode: import('../../types/appshell.type').AppShellLayoutMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Partial<Record<number, (_: any) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/AppShell/AppShell.vue.js

@@ -0,0 +1,76 @@
+import { defineComponent as u, computed as d, markRaw as e, openBlock as f, createBlock as i, resolveDynamicComponent as m, createSlots as c, renderList as p, withCtx as b, renderSlot as _, normalizeProps as g, guardReactiveProps as h } from "vue";
+import { useAppShell as y } from "./useAppShell.js";
+import o from "./AppShellLayoutSidebarFirst.vue.js";
+import v from "./AppShellLayoutDashboard.vue.js";
+import B from "./AppShellLayoutDock.vue.js";
+import C from "./AppShellLayoutClassic.vue.js";
+import $ from "./AppShellLayoutHeaderShell.vue.js";
+const S = {
+  inheritAttrs: !1
+}, V = /* @__PURE__ */ u({
+  ...S,
+  __name: "AppShell",
+  props: {
+    variant: { default: "sidebar" },
+    position: { default: "sticky" },
+    centerPosition: { default: "center" },
+    glass: { type: Boolean, default: !1 },
+    border: { type: Boolean, default: !0 },
+    floating: { type: Boolean, default: !1 },
+    class: { default: "" },
+    height: { default: "h-16" },
+    compact: { type: Boolean, default: !1 },
+    renderNestedTabs: { type: Boolean, default: !1 },
+    logo: {},
+    logoAlt: {},
+    mobileBreakpoint: { default: "md" },
+    logoClass: { default: "" },
+    contentClass: { default: "" },
+    menuClass: { default: "" },
+    rightClass: { default: "" },
+    mobileTriggerClass: { default: "" },
+    mobileMenuVariant: { default: "sidepanel" },
+    sidebarToggle: { type: Boolean, default: !1 },
+    breadcrumb: { type: Boolean, default: !1 },
+    breadcrumbPosition: { default: "header" },
+    breadcrumbVariant: { default: "default" },
+    breadcrumbSeparator: { default: "chevron" },
+    breadcrumbSize: { default: "sm" },
+    breadcrumbLabels: {},
+    breadcrumbHomeIcon: { default: "lucide:home" },
+    breadcrumbClass: { default: "" },
+    layoutMode: { default: "variant1" }
+  },
+  emits: ["toggle-mobile"],
+  setup(l) {
+    const a = l;
+    y(a, !0);
+    const s = d(() => {
+      switch (a.layoutMode) {
+        case "variant1":
+          return e(o);
+        case "variant2":
+          return e(v);
+        case "variant3":
+          return e(B);
+        case "variant4":
+          return e(C);
+        case "variant5":
+          return e($);
+        default:
+          return e(o);
+      }
+    });
+    return (t, k) => (f(), i(m(s.value), null, c({ _: 2 }, [
+      p(t.$slots, (A, r) => ({
+        name: r,
+        fn: b((n) => [
+          _(t.$slots, r, g(h(n ?? {})))
+        ])
+      }))
+    ]), 1024));
+  }
+});
+export {
+  V as default
+};

package/components/AppShell/AppShell.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AppShell.vue.js";
+export {
+  f as default
+};

package/components/{Navbar/NavbarLayoutClassic.vue.d.ts → AppShell/AppShellLayoutClassic.vue.d.ts}

@@ -28,14 +28,17 @@ declare function __VLS_template(): {
         center?(_: {}): any;
         center?(_: {}): any;
         right?(_: {}): any;
-        right?(_: {}): any;
-        right?(_: {}): any;
-        default?(_: {}): any;
-        default?(_: {}): any;
+        sidebar?(_: {}): any;
+        sidebar?(_: {}): any;
+        'sidebar-footer'?(_: {}): any;
+        'sidebar-footer'?(_: {}): any;
         main?(_: {}): any;
         'mobile-menu'?(_: {}): any;
         'mobile-menu'?(_: {}): any;
-        logo?(_: {}): any;
+        'mobile-sidebar-header'?(_: {}): any;
+        'sidebar-header'?(_: {}): any;
+        'mobile-sidebar'?(_: {}): any;
+        'mobile-sidebar-footer'?(_: {}): any;
     };
     refs: {
         mobileTriggerRef: HTMLButtonElement;

package/components/{Navbar/NavbarLayoutClassic.vue.js → AppShell/AppShellLayoutClassic.vue.js}

@@ -1,12 +1,12 @@
-import { defineComponent as P, inject as A, ref as w, openBlock as a, createElementBlock as n, renderSlot as s, unref as e, createCommentVNode as u, createElementVNode as i, createVNode as b, Transition as E, withCtx as v, withDirectives as U, normalizeStyle as D, normalizeClass as d, Fragment as y, vShow as H, isRef as $, createBlock as I, createTextVNode as L } from "vue";
+import { defineComponent as B, inject as E, ref as w, openBlock as a, createElementBlock as n, renderSlot as l, unref as e, createCommentVNode as b, createElementVNode as i, createVNode as m, Transition as L, withCtx as g, withDirectives as A, normalizeStyle as H, normalizeClass as d, Fragment as y, vShow as U, isRef as $, createBlock as D, createTextVNode as I } from "vue";
 import { onClickOutside as Y } from "@vueuse/core";
 import C from "../Icon.vue.js";
 import j from "../SidePanel.vue.js";
-import F from "./NavbarTabs.vue.js";
-/* empty css                */
+import F from "../Navbar/NavbarTabs.vue.js";
+/* empty css                        */
 import K from "../Breadcrumb/Breadcrumb.vue.js";
 /* empty css                                */
-import { NAVBAR_LAYOUT_KEY as q } from "./useNavbar.js";
+import { APPSHELL_LAYOUT_KEY as q } from "./useAppShell.js";
 const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflow-hidden" }, J = {
   key: 0,
   class: "w-full shrink-0 z-50 flex flex-col relative"
@@ -16,54 +16,55 @@ const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflo
 }, Z = {
   class: "flex flex-col max-h-[80vh] overflow-y-auto scrollbar-thin",
   style: { "will-change": "transform", contain: "layout style" }
-}, _ = { class: "space-y-1 p-2" }, ee = { class: "space-y-1 p-2" }, le = { class: "flex flex-col space-y-6 pt-4 h-full" }, se = {
+}, _ = { class: "space-y-1 p-2" }, ee = { class: "space-y-1 p-2" }, se = { class: "flex flex-col space-y-6 pt-4 h-full" }, le = {
   key: 0,
   class: "flex flex-col space-y-1"
 }, oe = {
   key: 1,
-  class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5! scrollbar-thin scrollbar-stable"
+  class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5! scrollbar-thin scrollbar-stable",
+  style: { "will-change": "transform", contain: "layout style" }
 }, re = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, pe = /* @__PURE__ */ P({
-  __name: "NavbarLayoutClassic",
+}, pe = /* @__PURE__ */ B({
+  __name: "AppShellLayoutClassic",
   setup(te) {
-    const T = A(q), {
+    const T = E(q), {
       props: o,
-      sidebarHidden: x,
+      sidebarHidden: S,
       isMobileMenuOpen: r,
-      isSidebarVisible: S,
-      toggleSidebar: V,
-      pageTitle: z,
+      isSidebarVisible: x,
+      toggleSidebar: z,
+      pageTitle: V,
       breadcrumbData: c,
       breakpointClasses: f,
       containerClasses: R,
       centerClasses: M,
       nestedTabsItems: h,
       activeNestedTab: p,
-      handleNestedTabClick: N,
-      mainScrollRef: O,
-      layoutMainRef: B
-    } = T, k = w(null), g = w(null);
+      handleNestedTabClick: O,
+      mainScrollRef: N,
+      layoutMainRef: P
+    } = T, k = w(null), v = w(null);
     return Y(
       k,
       () => {
         r.value = !1;
       },
-      { ignore: [g] }
-    ), (l, t) => (a(), n("div", G, [
-      l.$slots.header ? (a(), n("header", J, [
-        s(l.$slots, "header", {
+      { ignore: [v] }
+    ), (s, t) => (a(), n("div", G, [
+      s.$slots.header ? (a(), n("header", J, [
+        l(s.$slots, "header", {
           isOpen: e(r),
           toggle: () => r.value = !e(r),
-          sidebarVisible: e(S),
-          toggleSidebar: e(V),
+          sidebarVisible: e(x),
+          toggleSidebar: e(z),
           breadcrumbItems: e(c).items.value,
-          pageTitle: e(z)
+          pageTitle: e(V)
         })
-      ])) : u("", !0),
+      ])) : b("", !0),
       i("div", Q, [
-        b(E, {
+        m(L, {
           "enter-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "leave-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "enter-from-class": "opacity-0",
@@ -71,47 +72,47 @@ const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflo
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: v(() => [
-            U(i("nav", {
+          default: g(() => [
+            A(i("nav", {
               class: d(e(R)),
               role: "navigation",
-              style: D(
+              style: H(
                 e(o).sidebarToggle ? "transition: width 0.3s ease, opacity 0.3s ease;" : ""
               )
             }, [
               e(o).variant === "header" ? (a(), n(y, { key: 0 }, [
                 i("div", W, [
-                  s(l.$slots, "mobile-trigger", {
+                  l(s.$slots, "mobile-trigger", {
                     isOpen: e(r),
                     toggle: () => r.value = !e(r)
                   }, () => [
                     i("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: g,
+                      ref: v,
                       class: d(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [e(f).mobileTrigger, e(o).mobileTriggerClass]]),
-                      onClick: t[0] || (t[0] = (m) => r.value = !e(r))
+                      onClick: t[0] || (t[0] = (u) => r.value = !e(r))
                     }, [
-                      b(C, {
+                      m(C, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
                       t[4] || (t[4] = i("span", { class: "sr-only" }, "Open Menu", -1))
                     ], 2)
                   ]),
-                  l.$slots?.left ? (a(), n("div", {
+                  s.$slots?.left ? (a(), n("div", {
                     key: 0,
                     class: d(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", e(f).desktopContent])
                   }, [
-                    s(l.$slots, "left")
-                  ], 2)) : u("", !0)
+                    l(s.$slots, "left")
+                  ], 2)) : b("", !0)
                 ]),
-                l.$slots?.center ? (a(), n("div", {
+                s.$slots?.center ? (a(), n("div", {
                   key: 0,
                   class: d([e(M), "max-w-full", e(o).contentClass])
                 }, [
-                  s(l.$slots, "center")
-                ], 2)) : u("", !0),
+                  l(s.$slots, "center")
+                ], 2)) : b("", !0),
                 i("div", {
                   class: d(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
                     {
@@ -120,25 +121,25 @@ const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflo
                     e(o).rightClass
                   ]])
                 }, [
-                  s(l.$slots, "right")
+                  l(s.$slots, "right")
                 ], 2)
               ], 64)) : (a(), n(y, { key: 1 }, [
-                l.$slots.header ? u("", !0) : (a(), n("div", {
+                s.$slots.header ? b("", !0) : (a(), n("div", {
                   key: 0,
                   class: d(e(f).mobileHeader)
                 }, [
-                  s(l.$slots, "mobile-trigger", {
+                  l(s.$slots, "mobile-trigger", {
                     isOpen: e(r),
                     toggle: () => r.value = !e(r)
                   }, () => [
                     i("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: g,
+                      ref: v,
                       class: d(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", e(o).mobileTriggerClass]),
-                      onClick: t[1] || (t[1] = (m) => r.value = !e(r))
+                      onClick: t[1] || (t[1] = (u) => r.value = !e(r))
                     }, [
-                      b(C, {
+                      m(C, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
@@ -150,60 +151,61 @@ const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflo
                   class: d(e(f).desktopSidebar)
                 }, [
                   i("div", {
-                    class: d(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-stable", e(o).contentClass])
+                    class: d(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-stable", e(o).contentClass]),
+                    style: { "will-change": "transform", contain: "layout style" }
                   }, [
-                    s(l.$slots, "left"),
-                    s(l.$slots, "default"),
-                    s(l.$slots, "center")
+                    l(s.$slots, "left"),
+                    l(s.$slots, "sidebar"),
+                    l(s.$slots, "center")
                   ], 2),
-                  l.$slots?.right ? (a(), n("div", {
+                  s.$slots?.["sidebar-footer"] ? (a(), n("div", {
                     key: 0,
                     class: d(["p-2 border-t border-border shrink-0 bg-background mt-auto", e(o).rightClass])
                   }, [
-                    s(l.$slots, "right")
-                  ], 2)) : u("", !0)
+                    l(s.$slots, "sidebar-footer")
+                  ], 2)) : b("", !0)
                 ], 2)
               ], 64))
             ], 6), [
-              [H, !e(x)]
+              [U, !e(S)]
             ])
           ]),
           _: 3
         }),
-        l.$slots.main ? (a(), n("main", {
+        s.$slots.main ? (a(), n("main", {
           key: 0,
           ref_key: "layoutMainRef",
-          ref: B,
+          ref: P,
           class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col scrollbar-thin scrollbar-stable"
         }, [
           e(o).renderNestedTabs && e(h).length > 0 ? (a(), n("div", X, [
-            b(F, {
+            m(F, {
               modelValue: e(p),
-              "onUpdate:modelValue": t[2] || (t[2] = (m) => $(p) ? p.value = m : null),
-              onChange: e(N),
+              "onUpdate:modelValue": t[2] || (t[2] = (u) => $(p) ? p.value = u : null),
+              onChange: e(O),
               items: e(h)
             }, null, 8, ["modelValue", "onChange", "items"])
-          ])) : u("", !0),
+          ])) : b("", !0),
           e(o).breadcrumb && e(o).breadcrumbPosition === "main" && e(c).items.value.length > 1 ? (a(), n("div", {
             key: 1,
             class: d(["shrink-0 w-full border-b border-border px-6 py-2", e(o).breadcrumbClass])
           }, [
-            b(e(K), {
+            m(e(K), {
               items: e(c).items.value,
               variant: e(o).breadcrumbVariant,
               separator: e(o).breadcrumbSeparator,
               size: e(o).breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
-          ], 2)) : u("", !0),
+          ], 2)) : b("", !0),
           i("div", {
             ref_key: "mainScrollRef",
-            ref: O,
+            ref: N,
             style: { "will-change": "transform", contain: "layout style" },
             class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
           }, [
-            s(l.$slots, "main")
+            l(s.$slots, "main")
           ], 512)
-        ], 512)) : u("", !0),
+        ], 512)) : b("", !0),
         e(o).mobileMenuVariant === "dropdown" ? (a(), n(y, { key: 1 }, [
           e(r) ? (a(), n("div", {
             key: 0,
@@ -212,21 +214,21 @@ const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflo
             class: d(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", e(o).menuClass])
           }, [
             i("div", Z, [
-              s(l.$slots, "mobile-menu", {}, () => [
+              l(s.$slots, "mobile-menu", {}, () => [
                 i("div", _, [
-                  s(l.$slots, "left")
+                  l(s.$slots, "left")
                 ]),
                 t[6] || (t[6] = i("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
                 i("div", ee, [
-                  s(l.$slots, "center")
+                  l(s.$slots, "center")
                 ])
               ])
             ])
-          ], 2)) : u("", !0)
-        ], 64)) : (a(), I(j, {
+          ], 2)) : b("", !0)
+        ], 64)) : (a(), D(j, {
           key: 2,
           show: e(r),
-          "onUpdate:show": t[3] || (t[3] = (m) => $(r) ? r.value = m : null),
+          "onUpdate:show": t[3] || (t[3] = (u) => $(r) ? r.value = u : null),
           position: "left",
           size: "sm",
           triggerClass: e(f).mobileTrigger,
@@ -234,27 +236,33 @@ const G = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflo
           headerClass: "pl-3! pr-4.5! py-3!",
           bodyClass: "p-0!"
         }, {
-          header: v(() => [
-            s(l.$slots, "logo", {}, () => [
-              t[7] || (t[7] = L("Brand", -1))
+          header: g(() => [
+            l(s.$slots, "mobile-sidebar-header", {}, () => [
+              l(s.$slots, "sidebar-header", {}, () => [
+                t[7] || (t[7] = I("Brand", -1))
+              ])
             ])
           ]),
-          default: v(() => [
-            i("div", le, [
-              e(o).variant === "header" ? (a(), n("div", se, [
-                s(l.$slots, "mobile-menu", {}, () => [
-                  s(l.$slots, "left"),
+          default: g(() => [
+            i("div", se, [
+              e(o).variant === "header" ? (a(), n("div", le, [
+                l(s.$slots, "mobile-menu", {}, () => [
+                  l(s.$slots, "left"),
                   t[8] || (t[8] = i("div", { class: "h-px bg-border my-2" }, null, -1)),
-                  s(l.$slots, "center")
+                  l(s.$slots, "center")
                 ])
               ])) : (a(), n("div", oe, [
-                s(l.$slots, "left"),
-                s(l.$slots, "default"),
-                s(l.$slots, "center")
+                l(s.$slots, "left"),
+                l(s.$slots, "mobile-sidebar", {}, () => [
+                  l(s.$slots, "sidebar")
+                ]),
+                l(s.$slots, "center")
               ])),
-              l.$slots?.right ? (a(), n("div", re, [
-                s(l.$slots, "right")
-              ])) : u("", !0)
+              s.$slots?.["mobile-sidebar-footer"] || s.$slots?.["sidebar-footer"] ? (a(), n("div", re, [
+                l(s.$slots, "mobile-sidebar-footer", {}, () => [
+                  l(s.$slots, "sidebar-footer")
+                ])
+              ])) : b("", !0)
             ])
           ]),
           _: 3

package/components/AppShell/AppShellLayoutClassic.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AppShellLayoutClassic.vue.js";
+export {
+  f as default
+};

package/components/{Navbar/NavbarLayoutDashboard.vue.d.ts → AppShell/AppShellLayoutDashboard.vue.d.ts}

@@ -1,12 +1,12 @@
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        logo?(_: {}): any;
-        logo?(_: {}): any;
-        default?(_: {}): any;
-        default?(_: {}): any;
-        right?(_: {}): any;
-        right?(_: {}): any;
+        'sidebar-header'?(_: {}): any;
+        'sidebar-header'?(_: {}): any;
+        sidebar?(_: {}): any;
+        sidebar?(_: {}): any;
+        'sidebar-footer'?(_: {}): any;
+        'sidebar-footer'?(_: {}): any;
         header?(_: {
             isOpen: boolean;
             toggle: () => boolean;
@@ -16,6 +16,9 @@ declare function __VLS_template(): {
             pageTitle: string;
         }): any;
         main?(_: {}): any;
+        'mobile-sidebar-header'?(_: {}): any;
+        'mobile-sidebar'?(_: {}): any;
+        'mobile-sidebar-footer'?(_: {}): any;
     };
     refs: {
         layoutMainRef: HTMLElement;