vlite3 1.1.11 → 1.2.2

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/AppShell/AppShellLayoutClassic.vue.js

@@ -0,0 +1,279 @@
+import { defineComponent as B, inject as E, ref as $, openBlock as a, createElementBlock as n, renderSlot as l, unref as e, createCommentVNode as b, createElementVNode as i, createVNode as u, Transition as L, withCtx as g, withDirectives as A, normalizeStyle as H, normalizeClass as d, Fragment as y, vShow as U, isRef as w, createBlock as D, createSlots as I, createTextVNode as Y } from "vue";
+import { onClickOutside as j } from "@vueuse/core";
+import C from "../Icon.vue.js";
+import F from "../SidePanel.vue.js";
+import K from "../Navbar/NavbarTabs.vue.js";
+/* empty css                        */
+import q from "../Breadcrumb/Breadcrumb.vue.js";
+/* empty css                                */
+import { APPSHELL_LAYOUT_KEY as G } from "./useAppShell.js";
+const J = { class: "vlite-app-layout flex flex-col w-full h-full bg-body overflow-hidden" }, Q = {
+  key: 0,
+  class: "w-full shrink-0 z-50 flex flex-col relative border-b"
+}, W = { class: "flex flex-1 w-full overflow-hidden relative" }, X = { class: "flex items-center gap-4 shrink-0 z-10" }, Z = {
+  key: 0,
+  class: "shrink-0 w-full"
+}, _ = {
+  class: "flex flex-col max-h-[80vh] overflow-y-auto scrollbar-thin",
+  style: { "will-change": "transform", contain: "layout style" }
+}, ee = { class: "space-y-1 p-2" }, se = { class: "space-y-1 p-2" }, le = { class: "flex flex-col space-y-6 pt-4 h-full" }, oe = {
+  key: 0,
+  class: "flex flex-col space-y-1"
+}, re = {
+  key: 1,
+  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" }
+}, te = {
+  key: 2,
+  class: "mt-auto pt-2 border-t border-border px-3! py-2!"
+}, ve = /* @__PURE__ */ B({
+  __name: "AppShellLayoutClassic",
+  setup(ae) {
+    const T = E(G), {
+      props: o,
+      sidebarHidden: S,
+      isMobileMenuOpen: r,
+      isSidebarVisible: z,
+      toggleSidebar: V,
+      pageTitle: R,
+      breadcrumbData: c,
+      breakpointClasses: f,
+      containerClasses: x,
+      centerClasses: M,
+      nestedTabsItems: h,
+      activeNestedTab: p,
+      handleNestedTabClick: O,
+      mainScrollRef: N,
+      layoutMainRef: P
+    } = T, k = $(null), v = $(null);
+    return j(
+      k,
+      () => {
+        r.value = !1;
+      },
+      { ignore: [v] }
+    ), (s, t) => (a(), n("div", J, [
+      s.$slots.header ? (a(), n("header", Q, [
+        l(s.$slots, "header", {
+          isOpen: e(r),
+          toggle: () => r.value = !e(r),
+          sidebarVisible: e(z),
+          toggleSidebar: e(V),
+          breadcrumbItems: e(c).items.value,
+          pageTitle: e(R)
+        })
+      ])) : b("", !0),
+      i("div", W, [
+        u(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",
+          "enter-to-class": "opacity-100",
+          "leave-from-class": "opacity-100",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: g(() => [
+            A(i("nav", {
+              class: d(e(x)),
+              role: "navigation",
+              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", X, [
+                  l(s.$slots, "mobile-trigger", {
+                    isOpen: e(r),
+                    toggle: () => r.value = !e(r)
+                  }, () => [
+                    i("button", {
+                      type: "button",
+                      ref_key: "mobileTriggerRef",
+                      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))
+                    }, [
+                      u(C, {
+                        icon: "lucide:menu",
+                        class: "w-5 h-5"
+                      }),
+                      t[4] || (t[4] = i("span", { class: "sr-only" }, "Open Menu", -1))
+                    ], 2)
+                  ]),
+                  s.$slots?.left ? (a(), n("div", {
+                    key: 0,
+                    class: d(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", e(f).desktopContent])
+                  }, [
+                    l(s.$slots, "left")
+                  ], 2)) : b("", !0)
+                ]),
+                s.$slots?.center ? (a(), n("div", {
+                  key: 0,
+                  class: d([e(M), "max-w-full", e(o).contentClass])
+                }, [
+                  l(s.$slots, "center")
+                ], 2)) : b("", !0),
+                i("div", {
+                  class: d(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
+                    {
+                      "ml-auto": e(o).centerPosition === "left" || e(o).centerPosition === "center"
+                    },
+                    e(o).rightClass
+                  ]])
+                }, [
+                  l(s.$slots, "right")
+                ], 2)
+              ], 64)) : (a(), n(y, { key: 1 }, [
+                s.$slots.header ? b("", !0) : (a(), n("div", {
+                  key: 0,
+                  class: d(e(f).mobileHeader)
+                }, [
+                  l(s.$slots, "mobile-trigger", {
+                    isOpen: e(r),
+                    toggle: () => r.value = !e(r)
+                  }, () => [
+                    i("button", {
+                      type: "button",
+                      ref_key: "mobileTriggerRef",
+                      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))
+                    }, [
+                      u(C, {
+                        icon: "lucide:menu",
+                        class: "w-5 h-5"
+                      }),
+                      t[5] || (t[5] = i("span", { class: "sr-only" }, "Open Menu", -1))
+                    ], 2)
+                  ])
+                ], 2)),
+                i("div", {
+                  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]),
+                    style: { "will-change": "transform", contain: "layout style" }
+                  }, [
+                    l(s.$slots, "left"),
+                    l(s.$slots, "sidebar"),
+                    l(s.$slots, "center")
+                  ], 2),
+                  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])
+                  }, [
+                    l(s.$slots, "sidebar-footer")
+                  ], 2)) : b("", !0)
+                ], 2)
+              ], 64))
+            ], 6), [
+              [U, !e(S)]
+            ])
+          ]),
+          _: 3
+        }),
+        s.$slots.main ? (a(), n("main", {
+          key: 0,
+          ref_key: "layoutMainRef",
+          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", Z, [
+            u(K, {
+              modelValue: e(p),
+              "onUpdate:modelValue": t[2] || (t[2] = (m) => w(p) ? p.value = m : null),
+              onChange: e(O),
+              items: e(h)
+            }, null, 8, ["modelValue", "onChange", "items"])
+          ])) : 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])
+          }, [
+            u(e(q), {
+              items: e(c).items.value,
+              variant: e(o).breadcrumbVariant,
+              separator: e(o).breadcrumbSeparator,
+              size: e(o).breadcrumbSize
+            }, null, 8, ["items", "variant", "separator", "size"])
+          ], 2)) : b("", !0),
+          i("div", {
+            ref_key: "mainScrollRef",
+            ref: N,
+            style: { "will-change": "transform", contain: "layout style" },
+            class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
+          }, [
+            l(s.$slots, "main")
+          ], 512)
+        ], 512)) : b("", !0),
+        e(o).mobileMenuVariant === "dropdown" ? (a(), n(y, { key: 1 }, [
+          e(r) ? (a(), n("div", {
+            key: 0,
+            ref_key: "mobileMenuRef",
+            ref: k,
+            class: d(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", e(o).menuClass])
+          }, [
+            i("div", _, [
+              l(s.$slots, "mobile-menu", {}, () => [
+                i("div", ee, [
+                  l(s.$slots, "left")
+                ]),
+                t[6] || (t[6] = i("div", { class: "h-px bg-border my-1 mx-2" }, null, -1)),
+                i("div", se, [
+                  l(s.$slots, "center")
+                ])
+              ])
+            ])
+          ], 2)) : b("", !0)
+        ], 64)) : (a(), D(F, {
+          key: 2,
+          show: e(r),
+          "onUpdate:show": t[3] || (t[3] = (m) => w(r) ? r.value = m : null),
+          position: "left",
+          size: "sm",
+          triggerClass: e(f).mobileTrigger,
+          class: d(["z-60", e(f).mobileTrigger]),
+          headerClass: "pl-3! pr-4.5! py-3!",
+          bodyClass: "p-0!"
+        }, I({
+          default: g(() => [
+            i("div", le, [
+              e(o).variant === "header" ? (a(), n("div", oe, [
+                l(s.$slots, "mobile-menu", {}, () => [
+                  l(s.$slots, "left"),
+                  t[8] || (t[8] = i("div", { class: "h-px bg-border my-2" }, null, -1)),
+                  l(s.$slots, "center")
+                ])
+              ])) : (a(), n("div", re, [
+                l(s.$slots, "left"),
+                l(s.$slots, "mobile-sidebar", {}, () => [
+                  l(s.$slots, "sidebar")
+                ]),
+                l(s.$slots, "center")
+              ])),
+              s.$slots?.["mobile-sidebar-footer"] || s.$slots?.["sidebar-footer"] ? (a(), n("div", te, [
+                l(s.$slots, "mobile-sidebar-footer", {}, () => [
+                  l(s.$slots, "sidebar-footer")
+                ])
+              ])) : b("", !0)
+            ])
+          ]),
+          _: 2
+        }, [
+          s.$slots["mobile-sidebar-header"] || s.$slots["sidebar-header"] ? {
+            name: "header",
+            fn: g(() => [
+              l(s.$slots, "mobile-sidebar-header", {}, () => [
+                l(s.$slots, "sidebar-header", {}, () => [
+                  t[7] || (t[7] = Y("Brand", -1))
+                ])
+              ])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["show", "triggerClass", "class"]))
+      ])
+    ]));
+  }
+});
+export {
+  ve as default
+};

package/components/AppShell/AppShellLayoutClassic.vue2.js

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

package/components/AppShell/AppShellLayoutDashboard.vue.js

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

package/components/AppShell/AppShellLayoutDashboard.vue2.js

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