@sabrenski/spire-ui-vue 0.2.6 → 0.2.8

package/dist/spire-ui.js

@@ -498,7 +498,7 @@ const I1 = /* @__PURE__ */ Q({
       lg: "md",
       xl: "lg"
     }, C = L(() => e.href ? "a" : "button"), k = L(() => c[t]), u = L(() => [
-      "inline-flex items-center justify-center font-medium rounded-button",
+      "inline-flex items-center justify-center font-medium rounded-button shrink-0",
       "transition-colors duration-150",
       "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-ring-offset",
       i[r],
@@ -2022,6 +2022,7 @@ const vb1 = {
         "aria-labelledby": l,
         "aria-multiselectable": o.multiple || void 0,
         "data-spire-placement": "bottom-start",
+        "data-spire-strategy": "fixed",
         class: N(PH1.value),
         style: x1({ "--trigger-width": y.value?.offsetWidth + "px" }),
         tabindex: "-1",
@@ -3631,6 +3632,7 @@ const aV1 = ["x", "y", "width", "height", "rx", "ry", "fill", "opacity"], dV1 =
         "aria-multiselectable": o.multiple || void 0,
         "aria-activedescendant": I(V1),
         "data-spire-placement": "bottom-start",
+        "data-spire-strategy": "fixed",
         class: N(j1.value),
         style: x1({ "--trigger-width": l.value?.offsetWidth + "px" }),
         tabindex: "-1",
@@ -16038,7 +16040,7 @@ const Vf1 = Symbol("popover"), kw1 = ["aria-expanded", "aria-disabled", "data-sp
     placement: { default: "bottom" },
     showDelay: { default: 0 },
     hideDelay: { default: 200 },
-    strategy: { default: "absolute" },
+    strategy: { default: "fixed" },
     disabled: { type: Boolean, default: !1 },
     closeOnClickOutside: { type: Boolean, default: !0 },
     closeOnEscape: { type: Boolean, default: !0 }
@@ -17019,6 +17021,7 @@ const Vf1 = Symbol("popover"), kw1 = ["aria-expanded", "aria-disabled", "data-sp
         role: "dialog",
         "aria-modal": "true",
         "data-spire-placement": "bottom-start",
+        "data-spire-strategy": "fixed",
         class: N(F.value),
         tabindex: "-1",
         onToggle: m,
@@ -17584,7 +17587,7 @@ const Vf1 = Symbol("popover"), kw1 = ["aria-expanded", "aria-disabled", "data-sp
     closeOnSelect: { type: Boolean, default: !0 },
     placement: { default: "bottom-start" },
     offset: { default: 4 },
-    strategy: { default: "absolute" }
+    strategy: { default: "fixed" }
   },
   emits: ["update:open", "action", "open", "close"],
   setup(o, { expose: e, emit: r }) {
@@ -18106,6 +18109,7 @@ const Vf1 = Symbol("popover"), kw1 = ["aria-expanded", "aria-disabled", "data-sp
         role: "menu",
         "aria-labelledby": n,
         "data-spire-placement": "right-start",
+        "data-spire-strategy": "fixed",
         class: N(v.value),
         onMouseenter: u,
         onMouseleave: y,
@@ -18760,7 +18764,8 @@ const Vf1 = Symbol("popover"), kw1 = ["aria-expanded", "aria-disabled", "data-sp
         popover: "hint",
         role: "tooltip",
         class: N(l.value),
-        "data-spire-placement": o.placement
+        "data-spire-placement": o.placement,
+        "data-spire-strategy": "fixed"
       }, [
         A(m.$slots, "content", {}, () => [
           W1(G(o.content), 1)
@@ -24694,8 +24699,8 @@ const bN1 = { class: "line-chart-path" }, VN1 = ["d", "fill", "fill-opacity"], F
       bottom: "fixed inset-x-0 bottom-0 top-auto m-0 w-full max-h-none max-w-none rounded-none rounded-t-xl"
     }, f = {
       center: "m-auto rounded-xl",
-      left: "fixed top-4 left-4 bottom-4 right-auto m-0 h-auto max-h-none rounded-xl",
-      right: "fixed top-4 right-4 bottom-4 left-auto m-0 h-auto max-h-none rounded-xl",
+      left: "fixed top-4 left-4 bottom-4 right-auto m-0 rounded-xl",
+      right: "fixed top-4 right-4 bottom-4 left-auto m-0 rounded-xl",
       top: "fixed top-4 left-4 right-4 bottom-auto m-0 w-auto max-w-none rounded-xl",
       bottom: "fixed bottom-4 left-4 right-4 top-auto m-0 w-auto max-w-none rounded-xl"
     }, j = {
@@ -24736,11 +24741,13 @@ const bN1 = { class: "line-chart-path" }, VN1 = ["d", "fill", "fill-opacity"], F
       t.backdrop ? "backdrop:bg-overlay backdrop:backdrop-blur-sm" : "backdrop:bg-transparent"
     ]), H = L(() => [
       "flex flex-col",
-      u.value && (t.placement === "left" || t.placement === "right") ? "h-full" : "max-h-[calc(100vh-4rem)]"
+      u.value && (t.placement === "left" || t.placement === "right") ? "h-full max-h-full" : "max-h-[calc(100vh-4rem)]"
     ]);
     function b() {
       if (!(!s.value || i.value)) {
-        if (s.value.showModal(), i.value = !0, l.value) {
+        if (document.querySelectorAll("[popover]:popover-open").forEach((B) => {
+          B.hidePopover();
+        }), s.value.showModal(), i.value = !0, l.value) {
           const B = h();
           document.body.style.paddingRight = `${B}px`, document.body.style.overflow = "hidden";
         }
@@ -26431,6 +26438,7 @@ const Wx1 = Symbol("phone-input"), gx1 = { class: "relative" }, jx1 = ["data-spi
         popover: "auto",
         role: "listbox",
         "data-spire-placement": "bottom-start",
+        "data-spire-strategy": "fixed",
         class: N(v1.value),
         style: x1({ "--trigger-width": h.value?.offsetWidth + "px" }),
         tabindex: "-1",
@@ -28043,6 +28051,7 @@ const Bx1 = ["transform"], Rx1 = ["d", "fill", "opacity"], Dx1 = /* @__PURE__ */
         },
         popover: "manual",
         "data-spire-placement": "bottom-start",
+        "data-spire-strategy": "fixed",
         class: N(Z.value),
         style: x1({ minWidth: j.value }),
         role: "listbox",
@@ -28402,7 +28411,7 @@ const ZK1 = ["aria-label"], AK1 = ["aria-expanded"], TK1 = {
     as: { default: "a" }
   },
   setup(o) {
-    const e = o, r = H1(i5), t = L(() => r?.isMini.value ?? !1), n = Ok(() => e.as, "a"), s = L(() => e.href ? n.value : "div"), i = L(() => e.href ? e.as === "a" ? { href: e.href } : e.as === "router-link" || e.as === "inertia-link" ? { to: e.href } : { href: e.href } : {}), a = L(() => [
+    const e = o, r = H1(i5), t = L(() => r?.isMini.value ?? !1), n = Ok(() => e.as, "a"), s = L(() => e.href ? n.value : "div"), i = L(() => e.href ? e.as === "router-link" ? { to: e.href } : { href: e.href } : {}), a = L(() => [
       "flex items-center py-4",
       "border-b border-border",
       "min-h-[64px]",
@@ -28561,7 +28570,7 @@ const ZK1 = ["aria-label"], AK1 = ["aria-expanded"], TK1 = {
   setup(o, { emit: e }) {
     const r = o, t = e, n = H1(i5), s = L(() => n?.isMini.value ?? !1), i = R1();
     L(() => r.itemKey ?? i);
-    const a = L(() => r.isActive ? !0 : n?.activeKey.value && r.itemKey ? n.activeKey.value === r.itemKey : !1), d = Ok(() => r.as, "a"), c = L(() => r.isDisabled ? "span" : r.href ? d.value : "button"), C = L(() => r.isDisabled || !r.href ? {} : r.as === "a" ? { href: r.href } : r.as === "router-link" || r.as === "inertia-link" ? { to: r.href } : { href: r.href }), k = L(() => s.value ? r.tooltip ?? r.label ?? "" : "");
+    const a = L(() => r.isActive ? !0 : n?.activeKey.value && r.itemKey ? n.activeKey.value === r.itemKey : !1), d = Ok(() => r.as, "a"), c = L(() => r.isDisabled ? "span" : r.href ? d.value : "button"), C = L(() => r.isDisabled || !r.href ? {} : r.as === "router-link" ? { to: r.href } : { href: r.href }), k = L(() => s.value ? r.tooltip ?? r.label ?? "" : "");
     function u(y) {
       if (r.isDisabled) {
         y.preventDefault();
@@ -28670,7 +28679,7 @@ const ZK1 = ["aria-label"], AK1 = ["aria-expanded"], TK1 = {
     function u() {
       i.value = !1, a.value = !1;
     }
-    const l = L(() => s.value ? "button" : r.href && r.as === "div" ? "a" : r.as), h = L(() => r.href ? r.as === "a" || r.as === "div" ? { href: r.href } : r.as === "router-link" || r.as === "inertia-link" ? { to: r.href } : { href: r.href } : {}), p = L(() => [
+    const l = L(() => s.value ? "button" : r.href && r.as === "div" ? "a" : r.as), h = L(() => r.href ? r.as === "router-link" ? { to: r.href } : { href: r.href } : {}), p = L(() => [
       "inline-flex items-center gap-3",
       "transition-colors duration-150",
       r.isFocusable ? "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-lg" : "",
@@ -28877,7 +28886,7 @@ const ZK1 = ["aria-label"], AK1 = ["aria-expanded"], TK1 = {
     as: { default: "a" }
   },
   setup(o) {
-    const e = o, r = H1(i5), t = L(() => r?.isMini.value ?? !1), n = Ok(() => e.as, "a"), s = L(() => e.href ? n.value : "div"), i = L(() => e.href ? e.as === "a" ? { href: e.href } : e.as === "router-link" || e.as === "inertia-link" ? { to: e.href } : { href: e.href } : {}), a = L(() => [
+    const e = o, r = H1(i5), t = L(() => r?.isMini.value ?? !1), n = Ok(() => e.as, "a"), s = L(() => e.href ? n.value : "div"), i = L(() => e.href ? e.as === "router-link" ? { to: e.href } : { href: e.href } : {}), a = L(() => [
       "flex items-center",
       "transition-all duration-150",
       t.value ? "justify-center" : "gap-3",
@@ -54739,6 +54748,7 @@ const yU1 = { class: "flex gap-0.5 p-2" }, MU1 = ["onClick"], mU1 = ["onClick"],
         role: "dialog",
         "aria-modal": "true",
         "data-spire-placement": "bottom-start",
+        "data-spire-strategy": "fixed",
         class: N(l1.value),
         tabindex: "-1",
         onToggle: x,
@@ -55311,62 +55321,67 @@ const yU1 = { class: "flex gap-0.5 p-2" }, MU1 = ["onClick"], mU1 = ["onClick"],
       "bottom-left": "animate-toast-slide-out-left",
       "bottom-center": "animate-toast-slide-out-bottom",
       "bottom-right": "animate-toast-slide-out-right"
-    }, a = L(() => qu.value.toasts), d = L(() => a.value.filter((f) => f.placement === r.placement).slice(0, r.maxVisibleToasts)), c = L(() => [
+    }, a = L(() => qu.value.toasts), d = L(() => a.value.filter((j) => j.placement === r.placement).slice(0, r.maxVisibleToasts)), c = L(() => [
       "fixed z-50 flex flex-col p-4 pointer-events-none",
       n[r.placement]
     ]), C = L(() => {
-      const m = r.offset ?? { x: 0, y: 0 };
+      const f = r.offset ?? { x: 0, y: 0 };
       return {
+        position: "fixed",
+        inset: "unset",
         gap: `${r.gap}px`,
-        ...m.x ? { [r.placement.includes("left") ? "left" : "right"]: `${m.x}px` } : {},
-        ...m.y ? { [r.placement.includes("top") ? "top" : "bottom"]: `${m.y}px` } : {}
+        ...f.x ? { [r.placement.includes("left") ? "left" : "right"]: `${f.x}px` } : {},
+        ...f.y ? { [r.placement.includes("top") ? "top" : "bottom"]: `${f.y}px` } : {}
       };
-    }), k = L(() => r.placement.includes("bottom"));
-    function u(m) {
-      ZC(m), t("toastDismiss", m);
+    }), k = L(() => r.placement.includes("bottom")), u = S(null);
+    function l(f) {
+      ZC(f), t("toastDismiss", f);
     }
-    function l(m) {
-      const f = Ho({ ...m, placement: m.placement ?? r.placement });
-      return t("toastAdd", f), f;
+    function h(f) {
+      const j = Ho({ ...f, placement: f.placement ?? r.placement });
+      return t("toastAdd", j), j;
     }
-    const h = {
-      add: l,
+    const p = {
+      add: h,
       dismiss: ZC,
       dismissAll: XW1,
       update: Cd,
       toasts: L(() => qu.value.toasts),
       defaultPlacement: r.placement
     };
-    r2(QU1, h), T1(() => {
-      Qc({
+    r2(QU1, p), T1(() => {
+      u.value?.showPopover(), Qc({
         defaultPlacement: r.placement,
         maxVisibleToasts: r.maxVisibleToasts
       });
-    }), M1(() => r.placement, (m) => {
-      Qc({ defaultPlacement: m });
-    }), M1(() => r.maxVisibleToasts, (m) => {
-      Qc({ maxVisibleToasts: m });
+    }), M1(() => r.placement, (f) => {
+      Qc({ defaultPlacement: f });
+    }), M1(() => r.maxVisibleToasts, (f) => {
+      Qc({ maxVisibleToasts: f });
     });
-    let p = null;
-    async function y() {
+    let y = null;
+    async function m() {
       try {
-        let m = function() {
-          const H = v.props.flash;
-          H?.toast && l(H.toast);
+        let f = function() {
+          const b = H.props.flash;
+          b?.toast && h(b.toast);
         };
-        const { usePage: f, router: j } = await import("@inertiajs/vue3"), v = f();
-        m(), j.on("finish", m), p = () => {
-          j.off("finish", m);
+        const { usePage: j, router: v } = await import("@inertiajs/vue3"), H = j();
+        f(), v.on("finish", f), y = () => {
+          v.off("finish", f);
         };
       } catch {
       }
     }
     return T1(() => {
-      y();
+      m();
     }), U1(() => {
-      p && p();
-    }), (m, f) => (M(), $(Dk, { to: "body" }, [
+      y && y();
+    }), (f, j) => (M(), $(Dk, { to: "body" }, [
       g("div", {
+        ref_key: "containerRef",
+        ref: u,
+        popover: "manual",
         class: N(c.value),
         style: x1(C.value),
         role: "region",
@@ -55380,31 +55395,31 @@ const yU1 = { class: "flex gap-0.5 p-2" }, MU1 = ["onClick"], mU1 = ["onClick"],
           "move-class": "transition-transform duration-300 ease-smooth"
         }, {
           default: t1(() => [
-            (M(!0), W(u1, null, b1(k.value ? [...d.value].reverse() : d.value, (j) => (M(), $(JU1, {
-              key: j.id,
-              id: j.id,
-              title: j.props.title,
-              description: j.props.description,
-              color: j.props.color,
-              variant: j.props.variant,
-              "hide-icon": j.props.hideIcon,
-              timeout: j.remainingTime,
-              closable: j.props.closable,
-              draggable: j.props.draggable,
-              "show-progress": j.props.showProgress,
-              "pause-on-hover": j.props.pauseOnHover,
-              actions: j.props.actions,
-              "promise-state": j.props.promiseState,
+            (M(!0), W(u1, null, b1(k.value ? [...d.value].reverse() : d.value, (v) => (M(), $(JU1, {
+              key: v.id,
+              id: v.id,
+              title: v.props.title,
+              description: v.props.description,
+              color: v.props.color,
+              variant: v.props.variant,
+              "hide-icon": v.props.hideIcon,
+              timeout: v.remainingTime,
+              closable: v.props.closable,
+              draggable: v.props.draggable,
+              "show-progress": v.props.showProgress,
+              "pause-on-hover": v.props.pauseOnHover,
+              actions: v.props.actions,
+              "promise-state": v.props.promiseState,
               placement: o.placement,
               class: "pointer-events-auto",
-              onDismiss: (v) => u(j.id),
-              onClick: (v) => j.props.onClick?.(j.id)
+              onDismiss: (H) => l(v.id),
+              onClick: (H) => v.props.onClick?.(v.id)
             }, null, 8, ["id", "title", "description", "color", "variant", "hide-icon", "timeout", "closable", "draggable", "show-progress", "pause-on-hover", "actions", "promise-state", "placement", "onDismiss", "onClick"]))), 128))
           ]),
           _: 1
         }, 8, ["enter-active-class", "leave-active-class"])
       ], 14, YU1),
-      A(m.$slots, "default")
+      A(f.$slots, "default")
     ]));
   }
 }), ZH1 = Symbol("tree"), XU1 = ["aria-expanded", "aria-selected", "aria-disabled", "tabindex", "onKeydown"], _U1 = ["aria-label"], eG1 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sabrenski/spire-ui-vue",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "A modern, themeable Vue 3 component library with 57+ components, TypeScript support, and Tailwind CSS v4",
   "type": "module",
   "author": "Spire UI Contributors",