vlite3 0.1.6 → 0.1.7

package/components/Navbar/Navbar.vue.js

@@ -1,15 +1,27 @@
-import { defineComponent as j, ref as v, useSlots as T, onMounted as L, onUnmounted as M, computed as m, provide as N, watch as P, openBlock as n, createElementBlock as d, normalizeClass as a, Fragment as w, createElementVNode as o, renderSlot as s, createVNode as p, createBlock as k, resolveDynamicComponent as E, withCtx as h, createCommentVNode as y, toDisplayString as V, createTextVNode as A } from "vue";
+import { defineComponent as j, ref as y, useSlots as T, onMounted as L, onUnmounted as M, computed as g, provide as N, watch as P, openBlock as s, createElementBlock as r, normalizeClass as d, Fragment as k, createElementVNode as n, renderSlot as o, createVNode as h, createBlock as w, resolveDynamicComponent as E, withCtx as v, createCommentVNode as a, toDisplayString as V, createTextVNode as A } from "vue";
 import { useRoute as H } from "vue-router";
 import $ from "../Icon.vue.js";
 import O from "../SidePanel.vue.js";
 import D from "../Logo.vue.js";
-const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { class: "shrink-0" }, R = { key: 1 }, Y = { key: 2 }, q = { class: "h-16 flex items-center px-6 shrink-0 z-10" }, G = { class: "flex-1 px-4 py-4 overflow-y-auto space-y-4 scrollbar-thin" }, I = { class: "p-4 border-t border-border shrink-0 bg-background mt-auto" }, J = { class: "flex flex-col space-y-6 pt-4 h-full" }, K = {
+const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = {
+  key: 0,
+  class: "shrink-0"
+}, R = { key: 1 }, Y = { key: 2 }, q = {
+  key: 0,
+  class: "h-16 flex items-center px-6 z-10"
+}, G = { class: "flex-1 px-4 py-4 overflow-y-auto space-y-4 scrollbar-thin" }, I = {
+  key: 1,
+  class: "p-4 border-t border-border shrink-0 bg-background mt-auto"
+}, J = { class: "flex flex-col space-y-6 pt-4 h-full" }, K = {
   key: 0,
   class: "flex flex-col space-y-1"
 }, Q = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto"
-}, W = { class: "mt-auto pt-4 border-t border-border" }, oe = /* @__PURE__ */ j({
+}, W = {
+  key: 2,
+  class: "mt-auto pt-4 border-t border-border"
+}, oe = /* @__PURE__ */ j({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
@@ -27,47 +39,47 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { class: "shri
     mobileBreakpoint: { default: "md" }
   },
   emits: ["toggle-mobile"],
-  setup(u, { emit: X }) {
-    const e = u, f = v(!1), g = v(!1);
+  setup(f, { emit: X }) {
+    const l = f, m = y(!1), b = y(!1);
     T();
     const x = () => {
-      g.value = window.scrollY > 10;
+      b.value = window.scrollY > 10;
     };
     L(() => {
       window.addEventListener("scroll", x, { passive: !0 });
     }), M(() => {
       window.removeEventListener("scroll", x);
     });
-    const C = m(() => {
-      const l = e.variant === "sidebar", t = {
+    const C = g(() => {
+      const e = l.variant === "sidebar", t = {
         fixed: "fixed top-0 left-0 z-40",
         sticky: "sticky top-0 z-40",
         relative: "relative z-10",
         absolute: "absolute top-0 left-0 w-full z-40"
-      }, i = "bg-body", b = [
-        e.glass && (g.value || l || e.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
-        e.border && !e.floating ? l ? "border-r border-border" : "border-b border-border" : "",
-        e.floating ? "m-4 rounded-xl shadow-lg border border-border/50" : "",
-        g.value && !e.floating && !l && e.position === "sticky" ? "shadow-sm" : ""
+      }, u = "bg-body", p = [
+        l.glass && (b.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
+        l.border && !l.floating ? e ? "border-r border-border" : "border-b border-border" : "",
+        l.floating ? "m-4 rounded-xl shadow-lg border border-border/50" : "",
+        b.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
       ];
       let c = "";
-      return l ? c = r.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${e.height}`, [i, t[e.position], ...b, c, e.class].join(" ");
-    }), r = m(() => {
-      const l = e.mobileBreakpoint || "md", t = {
+      return e ? c = i.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [u, t[l.position], ...p, c, l.class].join(" ");
+    }), i = g(() => {
+      const e = l.mobileBreakpoint || "md", t = {
         sm: "sm:hidden",
         md: "md:hidden",
         lg: "lg:hidden",
         xl: "xl:hidden"
-      }, i = {
+      }, u = {
         sm: "hidden sm:flex",
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
-      }, b = {
-        sm: `flex flex-col max-sm:w-full ${e.compact ? "w-20" : e.width} h-auto sm:h-full sm:max-h-screen`,
-        md: `flex flex-col max-md:w-full ${e.compact ? "w-20" : e.width} h-auto md:h-full md:max-h-screen`,
-        lg: `flex flex-col max-lg:w-full ${e.compact ? "w-20" : e.width} h-auto lg:h-full lg:max-h-screen`,
-        xl: `flex flex-col max-xl:w-full ${e.compact ? "w-20" : e.width} h-auto xl:h-full xl:max-h-screen`
+      }, p = {
+        sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : l.width} h-auto sm:h-full sm:max-h-screen`,
+        md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : l.width} h-auto md:h-full md:max-h-screen`,
+        lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : l.width} h-auto lg:h-full lg:max-h-screen`,
+        xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : l.width} h-auto xl:h-full xl:max-h-screen`
       }, c = {
         sm: "sm:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         md: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
@@ -80,161 +92,163 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { class: "shri
         xl: "hidden xl:flex flex-col h-full w-full overflow-hidden"
       };
       return {
-        mobileTrigger: t[l],
-        desktopContent: i[l],
-        sidebarLayout: b[l],
-        mobileHeader: c[l],
-        desktopSidebar: S[l]
+        mobileTrigger: t[e],
+        desktopContent: u[e],
+        sidebarLayout: p[e],
+        mobileHeader: c[e],
+        desktopSidebar: S[e]
       };
-    }), B = m(() => {
-      if (e.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
-      switch (e.centerPosition) {
+    }), B = g(() => {
+      if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
+      switch (l.centerPosition) {
         case "left":
           return "flex items-center justify-start";
         case "right":
           return "flex items-center justify-end ml-auto";
         default:
-          return `${r.value.desktopContent} items-center justify-center mx-auto`;
+          return `${i.value.desktopContent} items-center justify-center mx-auto`;
       }
     });
     N("navbar-context", {
-      compact: m(() => e.compact)
+      compact: g(() => l.compact)
     });
     const z = H();
     return P(
       () => z.path,
       () => {
-        f.value = !1;
+        m.value = !1;
       }
-    ), (l, t) => (n(), d("nav", {
-      class: a(C.value),
+    ), (e, t) => (s(), r("nav", {
+      class: d(C.value),
       role: "navigation"
     }, [
-      u.variant === "header" ? (n(), d(w, { key: 0 }, [
-        o("div", U, [
-          s(l.$slots, "mobile-trigger", {}, () => [
-            o("button", {
+      f.variant === "header" ? (s(), r(k, { key: 0 }, [
+        n("div", U, [
+          o(e.$slots, "mobile-trigger", {}, () => [
+            n("button", {
               type: "button",
-              class: a(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", r.value.mobileTrigger]),
-              onClick: t[0] || (t[0] = (i) => f.value = !0)
+              class: d(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", i.value.mobileTrigger]),
+              onClick: t[0] || (t[0] = (u) => m.value = !0)
             }, [
-              p($, {
+              h($, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              t[3] || (t[3] = o("span", { class: "sr-only" }, "Open Menu", -1))
+              t[3] || (t[3] = n("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ]),
-          o("div", F, [
-            s(l.$slots, "logo", {}, () => [
-              (n(), k(E(e.logo ? "img" : "div"), {
-                src: e.logo,
+          e.$slots?.logo ? (s(), r("div", F, [
+            o(e.$slots, "logo", {}, () => [
+              (s(), w(E(l.logo ? "img" : "div"), {
+                src: l.logo,
                 class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
               }, {
-                default: h(() => [
-                  e.logo ? y("", !0) : (n(), k(D, {
+                default: v(() => [
+                  l.logo ? a("", !0) : (s(), w(D, {
                     key: 0,
                     class: "h-6 w-6"
                   })),
-                  !e.logo && e.logoAlt ? (n(), d("span", R, V(e.logoAlt), 1)) : e.logo ? y("", !0) : (n(), d("span", Y, "Brand"))
+                  !l.logo && l.logoAlt ? (s(), r("span", R, V(l.logoAlt), 1)) : l.logo ? a("", !0) : (s(), r("span", Y, "Brand"))
                 ]),
                 _: 1
               }, 8, ["src"]))
             ])
-          ]),
-          o("div", {
-            class: a(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", r.value.desktopContent])
+          ])) : a("", !0),
+          e.$slots?.left ? (s(), r("div", {
+            key: 1,
+            class: d(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", i.value.desktopContent])
           }, [
-            s(l.$slots, "left")
-          ], 2)
+            o(e.$slots, "left")
+          ], 2)) : a("", !0)
         ]),
-        o("div", {
-          class: a([
+        e.$slots?.center ? (s(), r("div", {
+          key: 0,
+          class: d([
             B.value,
             // Width constraint to ensure it doesn't crush others, but allows simple resizing
             "max-w-full"
           ])
         }, [
-          s(l.$slots, "center")
-        ], 2),
-        o("div", {
-          class: a(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", {
+          o(e.$slots, "center")
+        ], 2)) : a("", !0),
+        n("div", {
+          class: d(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", {
             // Always push to end unless Center is pushing it.
             // If Center is 'center' (mx-auto) or 'right' (ml-auto), this naturally falls to end.
             // If Center is 'left', we MUST have ml-auto here.
-            "ml-auto": u.centerPosition === "left" || u.centerPosition === "center"
+            "ml-auto": f.centerPosition === "left" || f.centerPosition === "center"
             // If center is 'right', Center has ml-auto. Right just sits next to it.
             // But if we add ml-auto here too, they might split space? No, flexbox parses strictly.
           }])
         }, [
-          s(l.$slots, "right")
+          o(e.$slots, "right")
         ], 2)
-      ], 64)) : (n(), d(w, { key: 1 }, [
-        o("div", {
-          class: a(r.value.mobileHeader)
+      ], 64)) : (s(), r(k, { key: 1 }, [
+        n("div", {
+          class: d(i.value.mobileHeader)
         }, [
-          s(l.$slots, "logo", {}, () => [
-            t[4] || (t[4] = o("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
-          ]),
-          o("button", {
+          e.$slots?.right ? o(e.$slots, "logo", { key: 0 }, () => [
+            t[4] || (t[4] = n("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+          ]) : a("", !0),
+          n("button", {
             type: "button",
             class: "p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md",
-            onClick: t[1] || (t[1] = (i) => f.value = !0)
+            onClick: t[1] || (t[1] = (u) => m.value = !0)
           }, [
-            p($, {
+            h($, {
               icon: "lucide:menu",
               class: "w-5 h-5"
             }),
-            t[5] || (t[5] = o("span", { class: "sr-only" }, "Open Menu", -1))
+            t[5] || (t[5] = n("span", { class: "sr-only" }, "Open Menu", -1))
           ])
         ], 2),
-        o("div", {
-          class: a(r.value.desktopSidebar)
+        n("div", {
+          class: d(i.value.desktopSidebar)
         }, [
-          o("div", q, [
-            s(l.$slots, "logo", {}, () => [
-              t[6] || (t[6] = o("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+          e.$slots?.logo ? (s(), r("div", q, [
+            o(e.$slots, "logo", {}, () => [
+              t[6] || (t[6] = n("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
             ])
+          ])) : a("", !0),
+          n("div", G, [
+            o(e.$slots, "left"),
+            o(e.$slots, "default"),
+            o(e.$slots, "center")
           ]),
-          o("div", G, [
-            s(l.$slots, "left"),
-            s(l.$slots, "default"),
-            s(l.$slots, "center")
-          ]),
-          o("div", I, [
-            s(l.$slots, "right")
-          ])
+          e.$slots?.right ? (s(), r("div", I, [
+            o(e.$slots, "right")
+          ])) : a("", !0)
         ], 2)
       ], 64)),
-      p(O, {
-        show: f.value,
-        "onUpdate:show": t[2] || (t[2] = (i) => f.value = i),
+      h(O, {
+        show: m.value,
+        "onUpdate:show": t[2] || (t[2] = (u) => m.value = u),
         position: "left",
         size: "sm",
-        triggerClass: r.value.mobileTrigger,
-        class: a(["z-60", r.value.mobileTrigger])
+        triggerClass: i.value.mobileTrigger,
+        class: d(["z-60", i.value.mobileTrigger])
       }, {
-        header: h(() => [
-          s(l.$slots, "logo", {}, () => [
+        header: v(() => [
+          o(e.$slots, "logo", {}, () => [
             t[7] || (t[7] = A("Brand", -1))
           ])
         ]),
-        default: h(() => [
-          o("div", J, [
-            u.variant === "header" ? (n(), d("div", K, [
-              s(l.$slots, "mobile-menu", {}, () => [
-                s(l.$slots, "left"),
-                t[8] || (t[8] = o("div", { class: "h-px bg-border my-2" }, null, -1)),
-                s(l.$slots, "center")
+        default: v(() => [
+          n("div", J, [
+            f.variant === "header" ? (s(), r("div", K, [
+              o(e.$slots, "mobile-menu", {}, () => [
+                o(e.$slots, "left"),
+                t[8] || (t[8] = n("div", { class: "h-px bg-border my-2" }, null, -1)),
+                o(e.$slots, "center")
               ])
-            ])) : (n(), d("div", Q, [
-              s(l.$slots, "left"),
-              s(l.$slots, "default"),
-              s(l.$slots, "center")
+            ])) : (s(), r("div", Q, [
+              o(e.$slots, "left"),
+              o(e.$slots, "default"),
+              o(e.$slots, "center")
             ])),
-            o("div", W, [
-              s(l.$slots, "right")
-            ])
+            e.$slots?.right ? (s(), r("div", W, [
+              o(e.$slots, "right")
+            ])) : a("", !0)
           ])
         ]),
         _: 3

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "main": "index.js",
   "module": "index.js",