vlite3 0.6.8 → 0.6.9

package/components/SidebarMenu/SidebarMenuItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as X, inject as Y, computed as c, resolveComponent as Z, openBlock as r, createElementBlock as f, normalizeClass as u, createBlock as h, unref as n, withCtx as b, createElementVNode as p, normalizeStyle as M, createCommentVNode as d, toDisplayString as g, createVNode as S, resolveDynamicComponent as B, mergeProps as D, createTextVNode as ee, Fragment as V, withKeys as te, withModifiers as ae, Transition as ne, renderList as ie } from "vue";
+import { defineComponent as X, inject as Y, computed as s, resolveComponent as Z, openBlock as r, createElementBlock as f, normalizeClass as u, createBlock as h, unref as n, withCtx as b, createElementVNode as v, normalizeStyle as M, createCommentVNode as d, toDisplayString as g, createVNode as S, resolveDynamicComponent as B, mergeProps as D, createTextVNode as ee, Fragment as V, withKeys as te, withModifiers as ae, Transition as ne, renderList as ie } from "vue";
 import { useRouter as oe } from "vue-router";
 import w from "../Icon.vue.js";
 import K from "../Tooltip.vue.js";
@@ -8,7 +8,7 @@ import { $t as O } from "../../utils/i18n.js";
 const re = {
   key: 0,
   class: "px-3 py-1.5 text-sm flex items-center gap-2 font-medium border-b bg-muted-light rounded-t-md text-center truncate"
-}, se = { class: "w-full" }, ce = { class: "flex items-center w-full gap-2 text-sm" }, ue = { class: "truncate flex-1 font-medium" }, de = ["onKeydown"], me = {
+}, ce = { class: "w-full" }, se = { class: "flex items-center w-full gap-2 text-sm" }, ue = { class: "truncate flex-1 font-medium" }, de = ["onKeydown"], me = {
   key: 0,
   class: "overflow-hidden transition-all duration-300 ease-in-out relative"
 }, fe = { class: "mt-0.5 space-y-0.5" }, we = /* @__PURE__ */ X({
@@ -19,13 +19,13 @@ const re = {
     menuOffset: {},
     itemClass: {}
   },
-  setup(s) {
-    const t = s, e = Y("sidebar-menu-ctx"), k = oe();
+  setup(c) {
+    const t = c, e = Y("sidebar-menu-ctx"), k = oe();
     if (!e)
       throw new Error("SidebarMenuItem must be used within a SidebarMenu");
-    const i = c(
+    const i = s(
       () => e.currentOrientation === "horizontal" && t.depth === 0
-    ), v = c(() => !!t.item.children?.length), R = c(() => i.value && v.value || e.compact && v.value ? "popover" : t.item.renderMode || e.renderMode || "tree"), I = c(() => e.renderNestedTabs && t.depth === 0 ? !1 : R.value === "popover" && v.value), y = c(() => t.item.id ? t.item.id : t.item.to && typeof t.item.to == "string" ? t.item.to : t.item.label), E = c(() => I.value || e.renderNestedTabs && t.depth === 0 ? !1 : e.expandedItems.includes(y.value)), j = c(() => !(!v.value || e.renderNestedTabs && t.depth === 0)), z = c(() => e.activeItem === y.value), L = (o) => {
+    ), p = s(() => !!t.item.children?.length), R = s(() => i.value && p.value || e.compact && p.value ? "popover" : t.item.renderMode || e.renderMode || "tree"), I = s(() => e.renderNestedTabs && t.depth === 0 ? !1 : R.value === "popover" && p.value), y = s(() => t.item.id ? t.item.id : t.item.to && typeof t.item.to == "string" ? t.item.to : t.item.label), E = s(() => I.value || e.renderNestedTabs && t.depth === 0 ? !1 : e.expandedItems.includes(y.value)), j = s(() => !(!p.value || e.renderNestedTabs && t.depth === 0)), z = s(() => e.activeItem === y.value), L = (o) => {
       if (!t.item.disabled) {
         if (e.renderNestedTabs && t.depth === 0) {
           if (t.item.action && t.item.action(t.item), t.item.to)
@@ -33,7 +33,7 @@ const re = {
             });
           else if (t.item.href)
             window.open(t.item.href, "_blank");
-          else if (v.value) {
+          else if (p.value) {
             const a = t.item.children?.[0];
             a && (a.to ? k.push(a.to).catch(() => {
             }) : a.href && window.open(a.href, "_blank"));
@@ -41,7 +41,7 @@ const re = {
           e.setActive(y.value);
           return;
         }
-        v.value && !t.item.to && !t.item.href && (I.value || e.toggleExpand(y.value)), t.item.action && t.item.action(t.item), (!v.value || t.item.to) && e.setActive(y.value);
+        p.value && !t.item.to && !t.item.href && (I.value || e.toggleExpand(y.value)), t.item.action && t.item.action(t.item), (!p.value || t.item.to) && e.setActive(y.value);
       }
     }, N = (o) => {
       if (o.stopPropagation(), e.renderNestedTabs && t.depth === 0) {
@@ -50,7 +50,7 @@ const re = {
           });
         else if (t.item.href)
           window.open(t.item.href, "_blank");
-        else if (v.value) {
+        else if (p.value) {
           const a = t.item.children?.[0];
           a && (a.to ? k.push(a.to).catch(() => {
           }) : a.href && window.open(a.href, "_blank"));
@@ -59,14 +59,14 @@ const re = {
         return;
       }
       I.value || e.toggleExpand(y.value);
-    }, $ = c(() => e.indentSize || 12), T = c(() => i.value ? {} : e.compact ? { width: "100%" } : {
+    }, $ = s(() => e.indentSize || 12), T = s(() => i.value ? {} : e.compact ? { width: "100%" } : {
       marginLeft: `${t.depth * $.value}px`,
       width: `calc(100% - ${t.depth * $.value}px)`
-    }), _ = c(() => {
-      const a = `group flex items-center justify-between font-medium rounded-md transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 relative border border-transparent select-none cursor-pointer ${i.value ? "w-auto" : "w-full"} ${t?.itemClass || ""} ${e.labelClass}`, x = e.compact ? `justify-center ${e.compactItemPadding}` : `justify-between ${e.itemPadding}`;
+    }), _ = s(() => {
+      const a = `group flex items-center justify-between font-medium rounded-md  focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 relative border border-transparent select-none cursor-pointer ${i.value ? "w-auto" : "w-full"} ${t?.itemClass || ""} ${e.labelClass}`, x = e.compact ? `justify-center ${e.compactItemPadding}` : `justify-between ${e.itemPadding}`;
       let l = "";
       return z.value ? l = "bg-primary-light text-primary-fg-light" : l = "text-muted hover:bg-accent/80 hover:text-foreground", t.item.disabled && (l = "opacity-50 cursor-not-allowed pointer-events-none"), `${a} ${x} ${l} ${t.item.class || ""}`;
-    }), m = c(() => e.compact && e.showCompactLabels), C = c(
+    }), m = s(() => e.compact && e.showCompactLabels), C = s(
       () => t.item.labelI18n ? O(t.item.labelI18n) : t.item.label
     ), A = (o) => ({
       label: o.labelI18n ? O(o.labelI18n) : o.label,
@@ -75,7 +75,7 @@ const re = {
       disabled: o.disabled,
       children: o.children ? o.children.map(A) : void 0,
       data: o
-    }), F = c(() => t.item.children ? t.item.children.map(A) : []), W = (o) => {
+    }), F = s(() => t.item.children ? t.item.children.map(A) : []), W = (o) => {
       const a = o.data;
       if (a) {
         a.action && a.action(a);
@@ -98,7 +98,7 @@ const re = {
     }, U = (o) => {
       const a = o;
       a.style.height = "0", a.style.opacity = "0";
-    }, H = c(() => t.item.to ? "router-link" : t.item.href ? "a" : "button"), P = c(() => t.item.to ? { to: t.item.to } : t.item.href ? {
+    }, H = s(() => t.item.to ? "router-link" : t.item.href ? "a" : "button"), P = s(() => t.item.to ? { to: t.item.to } : t.item.href ? {
       href: t.item.href,
       target: "_blank",
       rel: "noopener noreferrer"
@@ -111,7 +111,7 @@ const re = {
         I.value ? (r(), h(n(le), {
           key: 0,
           position: i.value ? "bottom-start" : "right-start",
-          offset: s.menuOffset,
+          offset: c.menuOffset,
           class: "w-full block",
           searchable: !1,
           width: n(e).nestedMenuWidth,
@@ -121,9 +121,9 @@ const re = {
         }, {
           header: b(() => [
             n(e).compact && !i.value ? (r(), f("div", re, [
-              s.item.icon ? (r(), h(w, {
+              c.item.icon ? (r(), h(w, {
                 key: 0,
-                icon: s.item.icon,
+                icon: c.item.icon,
                 class: "shrink-0 transition-colors opacity-80 group-hover:opacity-100"
               }, null, 8, ["icon"])) : d("", !0),
               ee(" " + g(C.value), 1)
@@ -138,7 +138,7 @@ const re = {
               class: "w-full block"
             }, {
               default: b(() => [
-                p("div", se, [
+                v("div", ce, [
                   (r(), h(B(H.value), D(P.value, {
                     class: [_.value, l ? "bg-muted text-foreground" : ""],
                     style: T.value,
@@ -147,36 +147,36 @@ const re = {
                     onClick: L
                   }), {
                     default: b(() => [
-                      p("div", {
+                      v("div", {
                         class: u(["min-w-0 flex-1 flex", [
                           m.value && !i.value ? "flex-col items-center justify-center gap-1" : n(e).compact && !i.value ? "justify-center" : "items-center gap-2.5"
                         ]])
                       }, [
-                        s.item.icon ? (r(), h(w, {
+                        c.item.icon ? (r(), h(w, {
                           key: 0,
-                          icon: s.item.icon,
+                          icon: c.item.icon,
                           class: u(["shrink-0 transition-colors opacity-80 group-hover:opacity-100", [z.value || l ? "opacity-100" : ""]]),
                           style: M({
                             width: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize,
                             height: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize
                           })
                         }, null, 8, ["icon", "class", "style"])) : d("", !0),
-                        p("span", {
-                          class: u(["truncate leading-none pt-0.5", {
+                        v("span", {
+                          class: u(["truncate leading-none pt-0.5 text-wrap", {
                             [n(e).compactLabelClass]: m.value && !i.value,
                             hidden: n(e).compact && !m.value && !i.value,
                             "md:hidden": n(e).compact && !m.value && !i.value
                           }])
                         }, g(C.value), 3),
-                        s.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
+                        c.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
                           key: 1,
                           class: u(["ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium", [
-                            s.item.badgeClass || "bg-muted text-muted-foreground",
+                            c.item.badgeClass || "bg-muted text-muted-foreground",
                             { "md:hidden": n(e).compact && !i.value }
                           ]])
-                        }, g(s.item.badge), 3)) : d("", !0)
+                        }, g(c.item.badge), 3)) : d("", !0)
                       ], 2),
-                      p("div", {
+                      v("div", {
                         class: u(["ml-1.5 flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", { "md:hidden": n(e).compact && !i.value }])
                       }, [
                         S(w, {
@@ -193,14 +193,14 @@ const re = {
             }, 1032, ["content", "placement", "disabled"])
           ]),
           item: b(({ option: l }) => [
-            p("div", ce, [
+            v("div", se, [
               l.icon ? (r(), h(w, {
                 key: 0,
                 icon: l.icon,
                 class: "shrink-0 opacity-80",
                 style: M({ width: n(e).iconSize, height: n(e).iconSize })
               }, null, 8, ["icon", "style"])) : d("", !0),
-              p("span", ue, g(l.label), 1),
+              v("span", ue, g(l.label), 1),
               l.data?.badge ? (r(), f("span", {
                 key: 1,
                 class: u(["ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium", l.data?.badgeClass || "bg-muted text-muted-foreground"])
@@ -224,34 +224,34 @@ const re = {
                 onClick: L
               }), {
                 default: b(() => [
-                  p("div", {
+                  v("div", {
                     class: u(["min-w-0 flex-1 flex py-0.5", [
                       m.value && !i.value ? "flex-col items-center justify-center gap-1" : n(e).compact && !i.value ? "justify-center" : "items-center gap-2.5"
                     ]])
                   }, [
-                    s.item.icon ? (r(), h(w, {
+                    c.item.icon ? (r(), h(w, {
                       key: 0,
-                      icon: s.item.icon,
+                      icon: c.item.icon,
                       class: u(["shrink-0 transition-colors opacity-80 group-hover:opacity-100", [z.value ? "opacity-100" : ""]]),
                       style: M({
                         width: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize,
                         height: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize
                       })
                     }, null, 8, ["icon", "class", "style"])) : d("", !0),
-                    p("span", {
+                    v("span", {
                       class: u(["truncate leading-none pt-0.5 wrap-break-word flex-wrap text-wrap", {
                         [n(e).compactLabelClass]: m.value && !i.value,
                         hidden: n(e).compact && !m.value && !i.value,
                         "md:hidden": n(e).compact && !m.value && !i.value
                       }])
                     }, g(C.value), 3),
-                    s.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
+                    c.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
                       key: 1,
                       class: u(["ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium", [
-                        s.item.badgeClass || "bg-muted text-muted-foreground",
+                        c.item.badgeClass || "bg-muted text-muted-foreground",
                         { "md:hidden": n(e).compact && !i.value }
                       ]])
-                    }, g(s.item.badge), 3)) : d("", !0)
+                    }, g(c.item.badge), 3)) : d("", !0)
                   ], 2),
                   j.value ? (r(), f("div", {
                     key: 0,
@@ -281,19 +281,19 @@ const re = {
             onLeave: U
           }, {
             default: b(() => [
-              v.value && E.value && !i.value ? (r(), f("div", me, [
+              p.value && E.value && !i.value ? (r(), f("div", me, [
                 n(e).variant === "default" ? (r(), f("div", {
                   key: 0,
                   class: "absolute top-0 bottom-2 w-px bg-border",
                   style: M({
-                    left: `${(s.depth + 1) * $.value - $.value / 2}px`
+                    left: `${(c.depth + 1) * $.value - $.value / 2}px`
                   })
                 }, null, 4)) : d("", !0),
-                p("div", fe, [
-                  (r(!0), f(V, null, ie(s.item.children, (l) => (r(), h(x, {
+                v("div", fe, [
+                  (r(!0), f(V, null, ie(c.item.children, (l) => (r(), h(x, {
                     key: l.id || l.label,
                     item: l,
-                    depth: s.depth + 1
+                    depth: c.depth + 1
                   }, null, 8, ["item", "depth"]))), 128))
                 ])
               ])) : d("", !0)

package/components/Tabes/Tabes.vue.d.ts

@@ -6,6 +6,11 @@ interface Props {
     variant?: TabesVariant;
     block?: boolean;
     textClass?: string;
+    /**
+     * When true, tabs wrap to multiple rows on small screens instead of scrolling.
+     * Default: false (horizontal scroll behavior)
+     */
+    wrap?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: string | number) => any;
@@ -17,6 +22,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     variant: TabesVariant;
     size: TabesSize;
     block: boolean;
+    wrap: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
 }, HTMLDivElement>;

package/components/Tabes/Tabes.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as E, ref as b, watch as l, onMounted as _, computed as g, openBlock as i, createElementBlock as p, normalizeClass as c, normalizeStyle as D, createCommentVNode as y, Fragment as N, renderList as O, createBlock as x, resolveDynamicComponent as P, mergeProps as T, withCtx as F, createElementVNode as q, toDisplayString as G, nextTick as H } from "vue";
+import { defineComponent as E, ref as b, watch as l, onMounted as D, computed as g, openBlock as i, createElementBlock as p, normalizeClass as u, normalizeStyle as N, createCommentVNode as y, Fragment as O, renderList as P, createBlock as x, resolveDynamicComponent as T, mergeProps as F, withCtx as _, createElementVNode as q, toDisplayString as G, nextTick as H } from "vue";
 import { useResizeObserver as J } from "@vueuse/core";
 import K from "../Icon.vue.js";
 import { $t as Q } from "../../utils/i18n.js";
@@ -10,84 +10,91 @@ const Z = /* @__PURE__ */ E({
     size: { default: "md" },
     variant: { default: "surface" },
     block: { type: Boolean, default: !1 },
-    textClass: {}
+    textClass: {},
+    wrap: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "change"],
   setup(s, { emit: h }) {
-    const n = s, v = h, u = b(null), d = b(/* @__PURE__ */ new Map()), k = (e, a) => {
-      e ? d.value.set(a, e) : d.value.delete(a);
-    }, f = b({
+    const n = s, v = h, d = b(null), f = b(/* @__PURE__ */ new Map()), k = (e, a) => {
+      e ? f.value.set(a, e) : f.value.delete(a);
+    }, m = b({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
     }), o = async () => {
       await H();
-      const e = u.value, a = d.value.get(n.modelValue);
+      const e = d.value, a = f.value.get(n.modelValue);
       if (!e || !a) {
-        f.value.opacity = 0;
+        m.value.opacity = 0;
         return;
       }
-      const r = e.getBoundingClientRect(), t = a.getBoundingClientRect(), m = t.left - r.left, M = t.top - r.top, j = t.width, A = t.height;
-      f.value = {
+      const t = e.getBoundingClientRect(), r = a.getBoundingClientRect(), c = r.left - t.left, M = r.top - t.top, j = r.width, A = r.height;
+      m.value = {
         width: `${j}px`,
         height: `${A}px`,
-        transform: `translate(${m}px, ${M}px)`,
+        transform: `translate(${c}px, ${M}px)`,
         opacity: 1
       };
     };
-    J(u, o), l(() => n.modelValue, o), l(() => n.options, o, { deep: !0 }), l(() => n.size, o), l(() => n.block, o), _(o);
+    J(d, o), l(() => n.modelValue, o), l(() => n.options, o, { deep: !0 }), l(() => n.size, o), l(() => n.block, o), l(() => n.wrap, o), D(o);
     const C = (e) => {
       e.disabled || (v("update:modelValue", e.value), v("change", e.value));
-    }, w = g(() => ["inline-flex rounded-lg relative isolate", {
-      surface: "bg-secondary/80 p-1",
-      primary: "bg-secondary p-1",
-      secondary: "bg-secondary p-1",
-      danger: "bg-danger/10 p-1",
-      success: "bg-success/10 p-1",
-      outline: "bg-transparent border border-border p-1",
-      line: "bg-transparent gap-6 rounded-none p-0 border-b border-border w-full"
-    }[n.variant], n.block ? "flex w-full" : ""]), z = {
+    }, w = g(() => {
+      const e = n.variant === "line", a = {
+        surface: "bg-secondary/80 p-1",
+        primary: "bg-secondary p-1",
+        secondary: "bg-secondary p-1",
+        danger: "bg-danger/10 p-1",
+        success: "bg-success/10 p-1",
+        outline: "bg-transparent border border-border p-1",
+        line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
+      }, t = n.wrap && !e ? "flex-wrap" : "";
+      return [`${n.block || e ? "flex w-full" : "inline-flex"} rounded-lg relative isolate ${t}`, a[n.variant]];
+    }), z = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, V = g(() => [n.variant === "line" ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex-1 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50"]), $ = (e) => {
-      const a = e.value === n.modelValue, r = n.variant === "line";
-      let t = "";
+    }, $ = g(() => {
+      const e = n.variant === "line", a = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50", t = (n.block || n.wrap) && !e ? "flex-1" : "";
+      return [a, t];
+    }), V = (e) => {
+      const a = e.value === n.modelValue, t = n.variant === "line";
+      let r = "";
       if (a)
-        if (r)
-          t = "text-primary";
+        if (t)
+          r = "text-primary";
         else
           switch (n.variant) {
             case "surface":
-              t = "text-foreground";
+              r = "text-foreground";
               break;
             case "primary":
-              t = "text-primary-foreground";
+              r = "text-primary-foreground";
               break;
             case "secondary":
-              t = "text-secondary";
+              r = "text-secondary";
               break;
             case "danger":
-              t = "text-danger-fg";
+              r = "text-danger-fg";
               break;
             case "success":
-              t = "text-success-fg";
+              r = "text-success-fg";
               break;
             case "outline":
-              t = "text-accent-foreground";
+              r = "text-accent-foreground";
               break;
             default:
-              t = "text-foreground";
+              r = "text-foreground";
           }
       else
-        t = r ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const m = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [V.value, t, m].join(" ");
+        r = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+      const c = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [$.value, r, c].join(" ");
     }, R = g(() => {
       const e = "absolute left-0 top-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] z-0 pointer-events-none";
       return n.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
-    }), S = () => ({
+    }), B = () => ({
       surface: "bg-background",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -95,38 +102,38 @@ const Z = /* @__PURE__ */ E({
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[n.variant], B = (e) => e.labelI18n ? Q(e.labelI18n) : e.label, I = (e) => e.to ? "router-link" : e.href ? "a" : "button", L = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
+    })[n.variant], S = (e) => e.labelI18n ? Q(e.labelI18n) : e.label, I = (e) => e.to ? "router-link" : e.href ? "a" : "button", L = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
     return (e, a) => (i(), p("div", {
       ref_key: "containerRef",
-      ref: u,
-      class: c(w.value),
+      ref: d,
+      class: u(w.value),
       role: "tablist"
     }, [
-      s.modelValue !== void 0 ? (i(), p("div", {
+      s.modelValue !== void 0 && !s.wrap ? (i(), p("div", {
         key: 0,
-        class: c([R.value, S()]),
-        style: D(f.value)
+        class: u([R.value, B()]),
+        style: N(m.value)
       }, null, 6)) : y("", !0),
-      (i(!0), p(N, null, O(s.options, (r) => (i(), x(P(I(r)), T({
-        key: r.value,
+      (i(!0), p(O, null, P(s.options, (t) => (i(), x(T(I(t)), F({
+        key: t.value,
         ref_for: !0,
-        ref: (t) => k(t?.$el || t, r.value),
+        ref: (r) => k(r?.$el || r, t.value),
         role: "tab",
-        "aria-selected": s.modelValue === r.value,
-        disabled: r.disabled,
-        class: [$(r), z[n.size]]
-      }, { ref_for: !0 }, L(r), {
-        onClick: (t) => C(r)
+        "aria-selected": s.modelValue === t.value,
+        disabled: t.disabled,
+        class: [V(t), z[n.size]]
+      }, { ref_for: !0 }, L(t), {
+        onClick: (r) => C(t)
       }), {
-        default: F(() => [
-          r.icon ? (i(), x(K, {
+        default: _(() => [
+          t.icon ? (i(), x(K, {
             key: 0,
-            icon: r.icon,
-            class: c(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+            icon: t.icon,
+            class: u(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
           }, null, 8, ["icon", "class"])) : y("", !0),
           q("span", {
-            class: c(["whitespace-nowrap z-20 relative", s.textClass])
-          }, G(B(r)), 3)
+            class: u(["whitespace-nowrap z-20 relative", s.textClass])
+          }, G(S(t)), 3)
         ]),
         _: 2
       }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))

package/core/config.d.ts

@@ -30,10 +30,17 @@ export declare const configState: {
             rounded?: import('..').InputRounded;
             showRequiredAsterisk?: boolean;
         };
+        price?: {
+            currency?: string;
+        };
+        date?: {
+            format?: string;
+        };
     };
 };
 /**
- * Helper to update the global configuration.
+ * Helper to update the global configuration safely.
+ * Uses deep merge to preserve existing nested objects.
  */
 export declare function updateConfig(updates: Partial<VLiteConfig>): void;
 /**
@@ -61,5 +68,11 @@ export declare function useVLiteConfig(): {
             rounded?: import('..').InputRounded;
             showRequiredAsterisk?: boolean;
         };
+        price?: {
+            currency?: string;
+        };
+        date?: {
+            format?: string;
+        };
     };
 };

package/core/config.js

@@ -1,15 +1,21 @@
-import { reactive as o, inject as t } from "vue";
-const e = /* @__PURE__ */ Symbol("vlite-config"), n = {
+import { reactive as t, inject as e } from "vue";
+const o = /* @__PURE__ */ Symbol("vlite-config"), n = {
   services: {},
   components: {
-    form: {}
+    form: {},
+    price: {
+      currency: "USD"
+    },
+    date: {
+      format: "MM/DD/YYYY"
+    }
   }
-}, i = o({ ...n });
-function f() {
-  return t(e, i);
+}, c = t({ ...n });
+function r() {
+  return e(o, c);
 }
 export {
-  e as VLITE_CONFIG_KEY,
-  i as configState,
-  f as useVLiteConfig
+  o as VLITE_CONFIG_KEY,
+  c as configState,
+  r as useVLiteConfig
 };

package/core/index.d.ts

@@ -2,28 +2,6 @@ import { App } from 'vue';
 import { VLiteConfig } from '../types/config.type';
 /**
  * Creates the VLite plugin instance.
- *
- * @example
- * // main.ts
- * import { createApp } from 'vue'
- * import { createVLite } from 'vlite3'
- *
- * const app = createApp(App)
- *
- * const vlite = createVLite({
- * services: {
- * upload: async (file) => {
- * // Custom API call here
- * const formData = new FormData()
- * formData.append('file', file)
- * const res = await axios.post('/api/upload', formData)
- * return res.data.url
- * }
- * }
- * })
- *
- * app.use(vlite)
- * app.mount('#app')
  */
 export declare function createVLite(options?: VLiteConfig): {
     install(app: App): void;

package/core/index.js

@@ -1,22 +1,30 @@
 import { configState as e, VLITE_CONFIG_KEY as a } from "./config.js";
-import { useVLiteConfig as f } from "./config.js";
-function m(r = {}) {
+import { useVLiteConfig as n } from "./config.js";
+function o(t = {}) {
   return {
-    install(t) {
-      r && (r.services && (e.services = { ...e.services, ...r.services }), r.importData && (e.importData = { ...e.importData, ...r.importData }), r.exportData && (e.exportData = { ...e.exportData, ...r.exportData }), r.components && (e.components = {
+    install(r) {
+      t && (t.services && (e.services = { ...e.services, ...t.services }), t.importData && (e.importData = { ...e.importData, ...t.importData }), t.exportData && (e.exportData = { ...e.exportData, ...t.exportData }), t.components && (e.components = {
         ...e.components,
-        ...r.components,
+        ...t.components,
         form: {
           ...e.components?.form || {},
-          ...r.components.form || {}
+          ...t.components.form || {}
+        },
+        price: {
+          ...e.components?.price || {},
+          ...t.components.price || {}
+        },
+        date: {
+          ...e.components?.date || {},
+          ...t.components.date || {}
         }
-      })), t.provide(a, e), t.config.globalProperties.$vlite = e;
+      })), r.provide(a, e), r.config.globalProperties.$vlite = e;
     }
   };
 }
 export {
   a as VLITE_CONFIG_KEY,
   e as configState,
-  m as createVLite,
-  f as useVLiteConfig
+  o as createVLite,
+  n as useVLiteConfig
 };

package/index.d.ts

@@ -72,3 +72,5 @@ export { $t } from './utils/i18n';
 export { createVLite, useVLiteConfig } from './core';
 export { GoogleSignInPlugin };
 export * from './components/StatusChip';
+export * from './components/Price';
+export * from './components/Date';