sb-floating-panel-vue 1.0.0 → 4.0.0

package/dist/sb-floating-panel.es.js

@@ -1,219 +1,376 @@
-import { useFloating as V, autoUpdate as B, offset as M, flip as T, shift as W, arrow as D } from "@floating-ui/vue";
-import { ref as c, computed as u, watch as S, onMounted as E, onUnmounted as K, nextTick as N, defineComponent as k, createElementBlock as x, openBlock as v, renderSlot as z, normalizeProps as U, guardReactiveProps as j, createBlock as A, resolveDynamicComponent as q, mergeProps as $, withKeys as _, withModifiers as w, withCtx as C, useAttrs as G, Teleport as H, createVNode as J, Transition as L, createCommentVNode as R, unref as Q, normalizeStyle as X } from "vue";
-function Y(a) {
-  const e = c(null), l = c(null), r = c(null), o = c(!1), s = c(null);
-  let t = !1;
-  const { floatingStyles: f, placement: i, middlewareData: m } = V(e, l, {
-    open: o,
-    placement: a.placement,
-    strategy: a.strategy,
-    transform: !1,
-    middleware: [M(a.offsetValue), T(), W(), D({ element: r })],
-    whileElementsMounted: B
-  }), d = (n) => {
-    o.value = n;
-  }, b = () => d(!0), y = () => d(!1), h = () => d(!o.value), g = () => {
-    l.value && e.value && (l.value.style.width = `${e.value.offsetWidth}px`);
-  }, O = u(() => ({
-    ...f.value
-  })), P = u(() => {
-    const n = m.value.arrow, F = i.value.split("-")[0], p = {
-      position: "absolute",
-      transform: "rotate(45deg)",
-      background: "inherit",
-      width: "8px",
-      height: "8px",
-      left: (n == null ? void 0 : n.x) != null ? `${n.x}px` : "",
-      top: (n == null ? void 0 : n.y) != null ? `${n.y}px` : ""
-    };
-    switch (F) {
-      case "top":
-        p.bottom = "-4px";
-        break;
-      case "bottom":
-        p.top = "-4px";
-        break;
-      case "left":
-        p.right = "-4px";
-        break;
-      case "right":
-        p.left = "-4px";
-        break;
-    }
-    return p;
-  });
-  return S(o, async (n) => {
-    n && a.hasResize && t && (await N(), g());
-  }), S(e, (n) => {
-    n && a.hasResize && !t && (t = !0, s.value = new ResizeObserver(g), s.value.observe(n));
-  }), E(() => {
-    a.hasResize && e.value && (t = !0, s.value = new ResizeObserver(g), s.value.observe(e.value));
-  }), K(() => {
-    var n;
-    a.hasResize && ((n = s.value) == null || n.disconnect());
-  }), {
-    reference: e,
-    floating: l,
-    floatingArrow: r,
-    floatingPlacement: i,
-    floatingStyle: O,
-    floatingArrowStyle: P,
-    isOpen: o,
-    toggle: h,
-    open: b,
-    close: y
-  };
-}
-const Z = { class: "floating-container" }, ee = /* @__PURE__ */ k({
-  __name: "SbContainer",
-  props: {
-    placement: { default: "bottom-start" },
-    strategy: { default: "absolute" },
-    offsetValue: { default: 15 },
-    hasArrow: { type: Boolean, default: !1 },
-    hasResize: { type: Boolean, default: !1 }
-  },
-  setup(a) {
-    const e = a, {
-      isOpen: l,
-      reference: r,
-      floating: o,
-      floatingArrow: s,
-      floatingPlacement: t,
-      floatingStyle: f,
-      floatingArrowStyle: i,
-      toggle: m,
-      open: d,
-      close: b
-    } = Y({
-      placement: e.placement,
-      strategy: e.strategy,
-      offsetValue: e.offsetValue,
-      hasArrow: e.hasArrow,
-      hasResize: e.hasResize
-    }), y = {
-      reference: r,
-      floating: o,
-      floatingArrow: s,
-      floatingPlacement: t,
-      floatingStyle: f,
-      floatingArrowStyle: i,
-      isOpen: l,
-      toggle: m,
-      open: d,
-      close: b
-    };
-    return (h, g) => (v(), x("div", Z, [
-      z(h.$slots, "default", U(j(y)), void 0, !0)
-    ]));
-  }
-}), I = (a, e) => {
-  const l = a.__vccOpts || a;
-  for (const [r, o] of e)
-    l[r] = o;
-  return l;
-}, ae = /* @__PURE__ */ I(ee, [["__scopeId", "data-v-33e40585"]]), le = /* @__PURE__ */ k({
-  __name: "SbReference",
-  props: {
-    referenceRef: {},
-    as: { default: "button" },
-    onClick: { type: Function, default: void 0 }
-  },
-  setup(a) {
-    const e = a, l = u(() => e.as === "button" || e.as === "a");
-    return (r, o) => (v(), A(q(e.as), $(r.$attrs, {
-      ref: e.referenceRef,
-      role: l.value ? "button" : void 0,
-      tabindex: l.value ? 0 : void 0,
-      onClick: o[0] || (o[0] = w((s) => {
-        var t;
-        return (t = e.onClick) == null ? void 0 : t.call(e);
-      }, ["stop"])),
-      onKeydown: [
-        o[1] || (o[1] = _(w((s) => {
-          var t;
-          return l.value && ((t = e.onClick) == null ? void 0 : t.call(e));
-        }, ["prevent", "stop"]), ["space"])),
-        o[2] || (o[2] = _(w((s) => {
-          var t;
-          return l.value && ((t = e.onClick) == null ? void 0 : t.call(e));
-        }, ["prevent", "stop"]), ["enter"]))
-      ]
-    }), {
-      default: C(() => [
-        z(r.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["role", "tabindex"]));
-  }
-}), te = /* @__PURE__ */ k({
-  inheritAttrs: !1,
-  __name: "SbFloating",
-  props: {
-    floatingRef: {},
-    floatingArrowRef: { default: () => c(null) },
-    isOpen: { type: Boolean },
-    floatingPlacement: {},
-    floatingStyle: {},
-    floatingArrowStyle: { default: void 0 },
-    arrowDimensions: { default: void 0 },
-    zIndex: { default: void 0 },
-    animation: { default: "scale-fade" },
-    duration: { default: 300 }
-  },
-  setup(a) {
-    const e = a, l = G(), r = u(() => {
-      const t = {
-        ...e.floatingStyle,
-        "--sb-transition-duration": e.duration + "ms"
-      };
-      return e.zIndex !== void 0 && (t.zIndex = e.zIndex), t;
-    }), o = u(() => {
-      const t = { ...e.floatingArrowStyle || {} };
-      if (e.arrowDimensions) {
-        const f = e.arrowDimensions, i = `-${f / 2}px`;
-        switch (e.floatingPlacement.split("-")[0]) {
-          case "top":
-            t.bottom = i;
-            break;
-          case "bottom":
-            t.top = i;
-            break;
-          case "left":
-            t.right = i;
-            break;
-          case "right":
-            t.left = i;
-            break;
-        }
-        t.width = `${f}px`, t.height = `${f}px`;
-      }
-      return e.zIndex !== void 0 && (t.zIndex = e.zIndex), t;
-    }), s = u(() => e.animation === "fade" ? "fade" : e.animation === "scale-fade" ? "scale-fade" : "");
-    return (t, f) => (v(), A(H, { to: "body" }, [
-      J(L, { name: s.value }, {
-        default: C(() => [
-          e.isOpen ? (v(), x("div", $({
-            key: 0,
-            ref: e.floatingRef,
-            style: r.value
-          }, Q(l)), [
-            z(t.$slots, "default", {}, void 0, !0),
-            e.floatingArrowRef ? (v(), x("div", {
-              key: 0,
-              ref: e.floatingArrowRef,
-              style: X(o.value)
-            }, null, 4)) : R("", !0)
-          ], 16)) : R("", !0)
-        ]),
-        _: 3
-      }, 8, ["name"])
-    ]));
-  }
-}), se = /* @__PURE__ */ I(te, [["__scopeId", "data-v-366682ad"]]);
-export {
-  ae as SbContainer,
-  se as SbFloating,
-  le as SbReference,
-  Y as useSbFloatingPanel
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeStyle as f, onBeforeUnmount as p, onScopeDispose as m, openBlock as h, provide as g, ref as _, renderSlot as v, resolveDynamicComponent as y, toRef as b, toValue as x, unref as S, useAttrs as C, useId as w, useModel as T, watch as E, watchEffect as D, withCtx as O } from "vue";
+import { autoUpdate as k, flip as A, hide as j, limitShift as M, offset as N, shift as P, size as F, useFloating as I } from "@floating-ui/vue";
+//#region src/composables/useSbFloatingPanel.ts
+var L = (e) => `${Math.max(0, e)}px`, R = (e) => {
+	let [t, n] = e.split("-"), r = n === "start" ? "0%" : n === "end" ? "100%" : "50%";
+	return t === "top" ? `${r} 100%` : t === "bottom" ? `${r} 0%` : t === "left" ? `100% ${r}` : `0% ${r}`;
 };
+function z(e) {
+	let t = _(null), r = _(null), i = n(() => {
+		let t = x(e.padding), n = x(e.matchWidth), r = x(e.placement).includes("-"), i = A({
+			padding: t,
+			crossAxis: "alignment",
+			fallbackAxisSideDirection: "end"
+		}), a = P({
+			padding: t,
+			limiter: M()
+		}), o = [
+			N(x(e.offset)),
+			...r ? [i, a] : [a, i],
+			F({
+				padding: t,
+				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
+					let { style: o } = t.floating, s = L(e.reference.width);
+					o.setProperty("--sbf-reference-width", s), o.setProperty("--sbf-transform-origin", R(a)), o.setProperty("--sbf-available-width", L(r)), o.setProperty("--sbf-available-height", L(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
+				}
+			})
+		];
+		return x(e.hideWhenDetached) && o.push(j({ padding: t })), o;
+	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = I(t, r, {
+		open: () => x(e.isOpen),
+		placement: () => x(e.placement),
+		strategy: () => x(e.strategy),
+		middleware: i,
+		whileElementsMounted: k
+	});
+	return {
+		reference: t,
+		floating: r,
+		floatingStyles: n(() => ({
+			...a.value,
+			...o.value.hide?.referenceHidden ? { visibility: "hidden" } : {}
+		})),
+		placement: s,
+		side: n(() => s.value.split("-")[0]),
+		align: n(() => s.value.split("-")[1]),
+		isPositioned: c,
+		update: l
+	};
+}
+//#endregion
+//#region src/context.ts
+var B = {
+	dialog: "dialog",
+	alertdialog: "dialog",
+	menu: "menu",
+	listbox: "listbox",
+	tree: "tree",
+	grid: "grid"
+}, V = Symbol("SbFloatingContext");
+function H(e) {
+	let t = c(V, null);
+	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
+	return t;
+}
+//#endregion
+//#region src/focus.ts
+var U = "data-sbf-focus-guard", W = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"summary",
+	"audio[controls]",
+	"video[controls]",
+	"[tabindex]",
+	"[contenteditable=\"true\"]"
+].join(","), G = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function K(e) {
+	let t = e instanceof Element ? e.closest(W) : null;
+	return !!t && !t.closest("[inert]");
+}
+function q(e) {
+	return [...e.querySelectorAll(W)].filter(G);
+}
+function J(e, t) {
+	return q(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+}
+//#endregion
+//#region src/components/SbContainer.vue?vue&type=script&setup=true&lang.ts
+var Y = [], X = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "SbContainer",
+	props: /*@__PURE__*/ l({
+		placement: { default: "bottom-start" },
+		strategy: { default: "absolute" },
+		offset: { default: 8 },
+		padding: { default: 8 },
+		matchWidth: {
+			type: [Boolean, String],
+			default: !1
+		},
+		hideWhenDetached: {
+			type: Boolean,
+			default: !1
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		trigger: { default: "click" },
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnClickOutside: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnFocusOut: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
+	setup(e, { expose: t, emit: r }) {
+		let i = e, a = T(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u = (e) => {
+			e && i.disabled || e !== l.value && (a.value = e);
+		}, d = () => u(!0), f = () => u(!1), p = () => u(!l.value), h = z({
+			isOpen: l,
+			placement: () => i.placement,
+			strategy: () => i.strategy,
+			offset: () => i.offset,
+			padding: () => i.padding,
+			matchWidth: () => i.matchWidth,
+			hideWhenDetached: () => i.hideWhenDetached
+		}), y = /* @__PURE__ */ new Set(), x = {
+			...h,
+			isOpen: l,
+			disabled: b(i, "disabled"),
+			trigger: b(i, "trigger"),
+			floatingId: `${w()}-floating`,
+			referenceId: _(),
+			floatingRole: _("dialog"),
+			skipFocusReturn: !1,
+			open: d,
+			close: f,
+			toggle: p,
+			contains: (e) => e instanceof Node ? h.reference.value?.contains(e) || h.floating.value?.contains(e) ? !0 : [...y].some((t) => t.contains(e)) : !1,
+			registerChild: (e) => (y.add(e), () => y.delete(e))
+		}, C = c(V, null);
+		C && m(C.registerChild(x)), g(V, x);
+		let D = (e) => {
+			e.key === "Escape" && Y[Y.length - 1] === x && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), f()));
+		}, O = (e) => {
+			x.contains(e) || (x.skipFocusReturn = K(e), f());
+		}, k, A = (e) => {
+			if (k?.(), !i.closeOnClickOutside) return;
+			let t = e.composedPath()[0] ?? e.target;
+			if (e.pointerType !== "touch") {
+				O(t);
+				return;
+			}
+			if (x.contains(t)) return;
+			let n = (e) => {
+				k?.(), O(e.composedPath()[0] ?? e.target);
+			};
+			document.addEventListener("click", n, !0), k = () => {
+				document.removeEventListener("click", n, !0), k = void 0;
+			};
+		}, j = (e) => {
+			i.closeOnFocusOut && (x.contains(e.composedPath()[0] ?? e.target) || f());
+		};
+		return E(l, (e, t, n) => {
+			e && typeof document < "u" && (Y.push(x), document.addEventListener("keydown", D), document.addEventListener("pointerdown", A, !0), document.addEventListener("focusin", j), n(() => {
+				document.removeEventListener("keydown", D), document.removeEventListener("pointerdown", A, !0), document.removeEventListener("focusin", j), k?.(), Y.splice(Y.indexOf(x), 1);
+			}));
+		}, { immediate: !0 }), E(l, (e) => o(e ? "open" : "close")), E(() => i.disabled, (e) => {
+			e && (a.value ?? s) && (a.value = !1);
+		}), t({
+			open: d,
+			close: f,
+			toggle: p,
+			update: h.update
+		}), (e, t) => v(e.$slots, "default", {
+			isOpen: l.value,
+			open: d,
+			close: f,
+			toggle: p,
+			placement: S(h).placement.value,
+			side: S(h).side.value,
+			align: S(h).align.value
+		});
+	}
+}), Z = /* @__PURE__ */ s({
+	__name: "SbReference",
+	props: {
+		as: { default: "button" },
+		id: { default: void 0 },
+		ariaHaspopup: { default: void 0 }
+	},
+	setup(e) {
+		let t = e, i = C(), a = H("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = () => typeof t.as != "string" || t.as === "button" || t.as === "a" && i.href != null, d = `${w()}-reference`, f = n(() => t.id ?? d);
+		D(() => {
+			a.referenceId.value = f.value;
+		}), p(() => {
+			a.referenceId.value === f.value && (a.referenceId.value = void 0);
+		});
+		let m = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(B, l.value) ? B[l.value] : void 0)), g = (e) => {
+			let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
+			a.reference.value = t instanceof HTMLElement ? t : null;
+		}, _ = () => {
+			a.trigger.value === "click" && a.toggle();
+		}, b = (e) => {
+			let t = a.floating.value, n = t && q(t)[0];
+			n && (e.preventDefault(), n.focus());
+		}, x = (e) => {
+			e.key === "Tab" && !e.shiftKey && o.value ? b(e) : u() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), _());
+		};
+		return (e, n) => (h(), r(y(t.as), {
+			id: f.value,
+			ref: g,
+			type: t.as === "button" ? "button" : void 0,
+			role: u() ? void 0 : "button",
+			tabindex: u() ? void 0 : S(s) ? -1 : 0,
+			disabled: t.as === "button" && S(s) ? !0 : void 0,
+			"aria-disabled": t.as !== "button" && S(s) ? "true" : void 0,
+			"aria-haspopup": m.value,
+			"aria-expanded": S(o) ? "true" : "false",
+			"aria-controls": S(o) ? S(c) : void 0,
+			"data-sbf-state": S(o) ? "open" : "closed",
+			onClick: _,
+			onKeydown: x
+		}, {
+			default: O(() => [v(e.$slots, "default")]),
+			_: 3
+		}, 40, [
+			"id",
+			"type",
+			"role",
+			"tabindex",
+			"disabled",
+			"aria-disabled",
+			"aria-haspopup",
+			"aria-expanded",
+			"aria-controls",
+			"data-sbf-state"
+		]));
+	}
+}), Q = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "SbFloating",
+	props: {
+		as: { default: "div" },
+		role: { default: "dialog" },
+		transition: { default: void 0 },
+		teleportTo: { default: "body" },
+		teleportDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		zIndex: { default: void 0 },
+		autoFocus: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["after-enter", "after-leave"],
+	setup(s, { emit: c }) {
+		let l = s, p = c, m = C(), g = H("SbFloating"), { isOpen: b, floatingId: x, referenceId: w, side: T, align: k } = g;
+		D(() => {
+			g.floatingRole.value = l.role;
+		});
+		let A = _(b.value), j = _(null), M = (e) => {
+			g.floating.value = e instanceof HTMLElement ? e : null;
+		}, N = (e) => {
+			j.value = e instanceof HTMLElement ? e : null;
+		}, P = n(() => ({
+			...g.floatingStyles.value,
+			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
+		})), F = () => ({
+			"aria-labelledby": l.role && Object.hasOwn(B, l.role) && m["aria-label"] == null ? w.value : void 0,
+			...m
+		}), I = n(() => b.value && !l.teleportDisabled), L = {
+			[U]: "",
+			tabindex: 0,
+			style: {
+				position: "fixed",
+				opacity: 0,
+				outline: "none",
+				pointerEvents: "none"
+			}
+		}, R = n(() => {
+			let { transition: e } = l;
+			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
+		}), z = (e) => e.setAttribute("data-sbf-state", "closed"), V = () => p("after-enter"), W = () => {
+			b.value || (A.value = !1), p("after-leave");
+		}, G = (e) => e instanceof Node && !!j.value?.contains(e), K = (e) => {
+			let t = j.value;
+			if (!t) return;
+			let n = q(t);
+			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
+		}, Y = (e) => {
+			G(e.relatedTarget) ? g.reference.value?.focus() : K("first");
+		}, X = (e) => {
+			if (!G(e.relatedTarget)) {
+				K("last");
+				return;
+			}
+			let t = g.reference.value;
+			((t && J(t, (e) => g.contains(e))) ?? t)?.focus();
+		}, Z = () => {
+			let e = j.value;
+			e && (e.querySelector("[autofocus]") ?? q(e)[0] ?? e).focus({ preventScroll: !0 });
+		};
+		return E(b, (e) => {
+			let t = g.skipFocusReturn;
+			if (g.skipFocusReturn = !1, e) {
+				A.value = !0;
+				return;
+			}
+			let n = document.activeElement;
+			!t && n && g.floating.value?.contains(n) && g.reference.value?.focus({ preventScroll: !0 });
+		}), E(() => b.value && g.isPositioned.value, async (e) => {
+			e && l.autoFocus && (await d(), Z());
+		}), (n, s) => (h(), r(e, {
+			to: l.teleportTo,
+			disabled: l.teleportDisabled
+		}, [A.value ? (h(), a("div", {
+			key: 0,
+			ref: M,
+			style: f(P.value)
+		}, [
+			I.value ? (h(), a("span", u({ key: 0 }, L, { onFocus: Y }), null, 16)) : i("", !0),
+			o(t, u(R.value, {
+				appear: "",
+				onBeforeLeave: z,
+				onAfterEnter: V,
+				onAfterLeave: W
+			}), {
+				default: O(() => [S(b) ? (h(), r(y(l.as), u({ key: 0 }, F(), {
+					id: S(x),
+					ref: N,
+					role: l.role ?? void 0,
+					tabindex: l.autoFocus ? -1 : void 0,
+					"data-sbf-state": "open",
+					"data-sbf-side": S(T),
+					"data-sbf-align": S(k)
+				}), {
+					default: O(() => [v(n.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"id",
+					"role",
+					"tabindex",
+					"data-sbf-side",
+					"data-sbf-align"
+				])) : i("", !0)]),
+				_: 3
+			}, 16),
+			I.value ? (h(), a("span", u({ key: 1 }, L, { onFocus: X }), null, 16)) : i("", !0)
+		], 4)) : i("", !0)], 8, ["to", "disabled"]));
+	}
+});
+//#endregion
+export { X as SbContainer, Q as SbFloating, Z as SbReference };

package/dist/sb-floating-panel.umd.js

@@ -1 +1 @@
-(function(s,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("@floating-ui/vue"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@floating-ui/vue","vue"],c):(s=typeof globalThis<"u"?globalThis:s||self,c(s.SbFloatingPanelVue={},s.FloatingUIVue,s.Vue))})(this,function(s,c,e){"use strict";function k(l){const t=e.ref(null),i=e.ref(null),f=e.ref(null),n=e.ref(!1),r=e.ref(null);let o=!1;const{floatingStyles:p,placement:d,middlewareData:g}=c.useFloating(t,i,{open:n,placement:l.placement,strategy:l.strategy,transform:!1,middleware:[c.offset(l.offsetValue),c.flip(),c.shift(),c.arrow({element:f})],whileElementsMounted:c.autoUpdate}),u=a=>{n.value=a},h=()=>u(!0),y=()=>u(!1),w=()=>u(!n.value),b=()=>{i.value&&t.value&&(i.value.style.width=`${t.value.offsetWidth}px`)},C=e.computed(()=>({...p.value})),B=e.computed(()=>{const a=g.value.arrow,P=d.value.split("-")[0],m={position:"absolute",transform:"rotate(45deg)",background:"inherit",width:"8px",height:"8px",left:(a==null?void 0:a.x)!=null?`${a.x}px`:"",top:(a==null?void 0:a.y)!=null?`${a.y}px`:""};switch(P){case"top":m.bottom="-4px";break;case"bottom":m.top="-4px";break;case"left":m.right="-4px";break;case"right":m.left="-4px";break}return m});return e.watch(n,async a=>{a&&l.hasResize&&o&&(await e.nextTick(),b())}),e.watch(t,a=>{a&&l.hasResize&&!o&&(o=!0,r.value=new ResizeObserver(b),r.value.observe(a))}),e.onMounted(()=>{l.hasResize&&t.value&&(o=!0,r.value=new ResizeObserver(b),r.value.observe(t.value))}),e.onUnmounted(()=>{var a;l.hasResize&&((a=r.value)==null||a.disconnect())}),{reference:t,floating:i,floatingArrow:f,floatingPlacement:d,floatingStyle:C,floatingArrowStyle:B,isOpen:n,toggle:w,open:h,close:y}}const x={class:"floating-container"},_=e.defineComponent({__name:"SbContainer",props:{placement:{default:"bottom-start"},strategy:{default:"absolute"},offsetValue:{default:15},hasArrow:{type:Boolean,default:!1},hasResize:{type:Boolean,default:!1}},setup(l){const t=l,{isOpen:i,reference:f,floating:n,floatingArrow:r,floatingPlacement:o,floatingStyle:p,floatingArrowStyle:d,toggle:g,open:u,close:h}=k({placement:t.placement,strategy:t.strategy,offsetValue:t.offsetValue,hasArrow:t.hasArrow,hasResize:t.hasResize}),y={reference:f,floating:n,floatingArrow:r,floatingPlacement:o,floatingStyle:p,floatingArrowStyle:d,isOpen:i,toggle:g,open:u,close:h};return(w,b)=>(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(w.$slots,"default",e.normalizeProps(e.guardReactiveProps(y)),void 0,!0)]))}}),S=(l,t)=>{const i=l.__vccOpts||l;for(const[f,n]of t)i[f]=n;return i},z=S(_,[["__scopeId","data-v-33e40585"]]),R=e.defineComponent({__name:"SbReference",props:{referenceRef:{},as:{default:"button"},onClick:{type:Function,default:void 0}},setup(l){const t=l,i=e.computed(()=>t.as==="button"||t.as==="a");return(f,n)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),e.mergeProps(f.$attrs,{ref:t.referenceRef,role:i.value?"button":void 0,tabindex:i.value?0:void 0,onClick:n[0]||(n[0]=e.withModifiers(r=>{var o;return(o=t.onClick)==null?void 0:o.call(t)},["stop"])),onKeydown:[n[1]||(n[1]=e.withKeys(e.withModifiers(r=>{var o;return i.value&&((o=t.onClick)==null?void 0:o.call(t))},["prevent","stop"]),["space"])),n[2]||(n[2]=e.withKeys(e.withModifiers(r=>{var o;return i.value&&((o=t.onClick)==null?void 0:o.call(t))},["prevent","stop"]),["enter"]))]}),{default:e.withCtx(()=>[e.renderSlot(f.$slots,"default")]),_:3},16,["role","tabindex"]))}}),A=S(e.defineComponent({inheritAttrs:!1,__name:"SbFloating",props:{floatingRef:{},floatingArrowRef:{default:()=>e.ref(null)},isOpen:{type:Boolean},floatingPlacement:{},floatingStyle:{},floatingArrowStyle:{default:void 0},arrowDimensions:{default:void 0},zIndex:{default:void 0},animation:{default:"scale-fade"},duration:{default:300}},setup(l){const t=l,i=e.useAttrs(),f=e.computed(()=>{const o={...t.floatingStyle,"--sb-transition-duration":t.duration+"ms"};return t.zIndex!==void 0&&(o.zIndex=t.zIndex),o}),n=e.computed(()=>{const o={...t.floatingArrowStyle||{}};if(t.arrowDimensions){const p=t.arrowDimensions,d=`-${p/2}px`;switch(t.floatingPlacement.split("-")[0]){case"top":o.bottom=d;break;case"bottom":o.top=d;break;case"left":o.right=d;break;case"right":o.left=d;break}o.width=`${p}px`,o.height=`${p}px`}return t.zIndex!==void 0&&(o.zIndex=t.zIndex),o}),r=e.computed(()=>t.animation==="fade"?"fade":t.animation==="scale-fade"?"scale-fade":"");return(o,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:r.value},{default:e.withCtx(()=>[t.isOpen?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref:t.floatingRef,style:f.value},e.unref(i)),[e.renderSlot(o.$slots,"default",{},void 0,!0),t.floatingArrowRef?(e.openBlock(),e.createElementBlock("div",{key:0,ref:t.floatingArrowRef,style:e.normalizeStyle(n.value)},null,4)):e.createCommentVNode("",!0)],16)):e.createCommentVNode("",!0)]),_:3},8,["name"])]))}}),[["__scopeId","data-v-366682ad"]]);s.SbContainer=z,s.SbFloating=A,s.SbReference=R,s.useSbFloatingPanel=k,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@floating-ui/vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@floating-ui/vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SbFloatingPanelVue={},e.Vue,e.FloatingUIVue))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=e=>`${Math.max(0,e)}px`,i=e=>{let[t,n]=e.split(`-`),r=n===`start`?`0%`:n===`end`?`100%`:`50%`;return t===`top`?`${r} 100%`:t===`bottom`?`${r} 0%`:t===`left`?`100% ${r}`:`0% ${r}`};function a(e){let a=(0,t.ref)(null),o=(0,t.ref)(null),s=(0,t.computed)(()=>{let a=(0,t.toValue)(e.padding),o=(0,t.toValue)(e.matchWidth),s=(0,t.toValue)(e.placement).includes(`-`),c=(0,n.flip)({padding:a,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),l=(0,n.shift)({padding:a,limiter:(0,n.limitShift)()}),u=[(0,n.offset)((0,t.toValue)(e.offset)),...s?[c,l]:[l,c],(0,n.size)({padding:a,apply({rects:e,elements:t,availableWidth:n,availableHeight:a,placement:s}){let{style:c}=t.floating,l=r(e.reference.width);c.setProperty(`--sbf-reference-width`,l),c.setProperty(`--sbf-transform-origin`,i(s)),c.setProperty(`--sbf-available-width`,r(n)),c.setProperty(`--sbf-available-height`,r(a)),c.width=o===!0?l:``,c.minWidth=o===`min`?l:``}})];return(0,t.toValue)(e.hideWhenDetached)&&u.push((0,n.hide)({padding:a})),u}),{floatingStyles:c,middlewareData:l,placement:u,isPositioned:d,update:f}=(0,n.useFloating)(a,o,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:s,whileElementsMounted:n.autoUpdate});return{reference:a,floating:o,floatingStyles:(0,t.computed)(()=>({...c.value,...l.value.hide?.referenceHidden?{visibility:`hidden`}:{}})),placement:u,side:(0,t.computed)(()=>u.value.split(`-`)[0]),align:(0,t.computed)(()=>u.value.split(`-`)[1]),isPositioned:d,update:f}}var o={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},s=Symbol(`SbFloatingContext`);function c(e){let n=(0,t.inject)(s,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var l=`data-sbf-focus-guard`,u=[`a[href]`,`button:not([disabled])`,`input:not([disabled]):not([type="hidden"])`,`select:not([disabled])`,`textarea:not([disabled])`,`summary`,`audio[controls]`,`video[controls]`,`[tabindex]`,`[contenteditable="true"]`].join(`,`),d=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function f(e){let t=e instanceof Element?e.closest(u):null;return!!t&&!t.closest(`[inert]`)}function p(e){return[...e.querySelectorAll(u)].filter(d)}function m(e,t){return p(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var h=[],g=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbContainer`,props:(0,t.mergeModels)({placement:{default:`bottom-start`},strategy:{default:`absolute`},offset:{default:8},padding:{default:8},matchWidth:{type:[Boolean,String],default:!1},hideWhenDetached:{type:Boolean,default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},closeOnFocusOut:{type:Boolean,default:!0}},{open:{type:Boolean,default:void 0},openModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:open`]),setup(e,{expose:n,emit:r}){let i=e,o=(0,t.useModel)(e,`open`),c=r,l=i.defaultOpen,u=(0,t.computed)(()=>!i.disabled&&(o.value??l)),d=e=>{e&&i.disabled||e!==u.value&&(o.value=e)},p=()=>d(!0),m=()=>d(!1),g=()=>d(!u.value),_=a({isOpen:u,placement:()=>i.placement,strategy:()=>i.strategy,offset:()=>i.offset,padding:()=>i.padding,matchWidth:()=>i.matchWidth,hideWhenDetached:()=>i.hideWhenDetached}),v=new Set,y={..._,isOpen:u,disabled:(0,t.toRef)(i,`disabled`),trigger:(0,t.toRef)(i,`trigger`),floatingId:`${(0,t.useId)()}-floating`,referenceId:(0,t.ref)(),floatingRole:(0,t.ref)(`dialog`),skipFocusReturn:!1,open:p,close:m,toggle:g,contains:e=>e instanceof Node?_.reference.value?.contains(e)||_.floating.value?.contains(e)?!0:[...v].some(t=>t.contains(e)):!1,registerChild:e=>(v.add(e),()=>v.delete(e))},b=(0,t.inject)(s,null);b&&(0,t.onScopeDispose)(b.registerChild(y)),(0,t.provide)(s,y);let x=e=>{e.key===`Escape`&&h[h.length-1]===y&&(!i.closeOnEscape||e.defaultPrevented||e.isComposing||(e.preventDefault(),m()))},S=e=>{y.contains(e)||(y.skipFocusReturn=f(e),m())},C,w=e=>{if(C?.(),!i.closeOnClickOutside)return;let t=e.composedPath()[0]??e.target;if(e.pointerType!==`touch`){S(t);return}if(y.contains(t))return;let n=e=>{C?.(),S(e.composedPath()[0]??e.target)};document.addEventListener(`click`,n,!0),C=()=>{document.removeEventListener(`click`,n,!0),C=void 0}},T=e=>{i.closeOnFocusOut&&(y.contains(e.composedPath()[0]??e.target)||m())};return(0,t.watch)(u,(e,t,n)=>{e&&typeof document<`u`&&(h.push(y),document.addEventListener(`keydown`,x),document.addEventListener(`pointerdown`,w,!0),document.addEventListener(`focusin`,T),n(()=>{document.removeEventListener(`keydown`,x),document.removeEventListener(`pointerdown`,w,!0),document.removeEventListener(`focusin`,T),C?.(),h.splice(h.indexOf(y),1)}))},{immediate:!0}),(0,t.watch)(u,e=>c(e?`open`:`close`)),(0,t.watch)(()=>i.disabled,e=>{e&&(o.value??l)&&(o.value=!1)}),n({open:p,close:m,toggle:g,update:_.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:u.value,open:p,close:m,toggle:g,placement:(0,t.unref)(_).placement.value,side:(0,t.unref)(_).side.value,align:(0,t.unref)(_).align.value})}}),_=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},id:{default:void 0},ariaHaspopup:{default:void 0}},setup(e){let n=e,r=(0,t.useAttrs)(),i=c(`SbReference`),{isOpen:a,disabled:s,floatingId:l,floatingRole:u}=i,d=()=>typeof n.as!=`string`||n.as===`button`||n.as===`a`&&r.href!=null,f=`${(0,t.useId)()}-reference`,m=(0,t.computed)(()=>n.id??f);(0,t.watchEffect)(()=>{i.referenceId.value=m.value}),(0,t.onBeforeUnmount)(()=>{i.referenceId.value===m.value&&(i.referenceId.value=void 0)});let h=(0,t.computed)(()=>n.ariaHaspopup??(u.value&&Object.hasOwn(o,u.value)?o[u.value]:void 0)),g=e=>{let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;i.reference.value=t instanceof HTMLElement?t:null},_=()=>{i.trigger.value===`click`&&i.toggle()},v=e=>{let t=i.floating.value,n=t&&p(t)[0];n&&(e.preventDefault(),n.focus())},y=e=>{e.key===`Tab`&&!e.shiftKey&&a.value?v(e):d()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),_())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{id:m.value,ref:g,type:n.as===`button`?`button`:void 0,role:d()?void 0:`button`,tabindex:d()?void 0:(0,t.unref)(s)?-1:0,disabled:n.as===`button`&&(0,t.unref)(s)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(s)?`true`:void 0,"aria-haspopup":h.value,"aria-expanded":(0,t.unref)(a)?`true`:`false`,"aria-controls":(0,t.unref)(a)?(0,t.unref)(l):void 0,"data-sbf-state":(0,t.unref)(a)?`open`:`closed`,onClick:_,onKeydown:y},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`id`,`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`data-sbf-state`]))}}),v=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{default:void 0},teleportTo:{default:`body`},teleportDisabled:{type:Boolean,default:!1},zIndex:{default:void 0},autoFocus:{type:Boolean,default:!0}},emits:[`after-enter`,`after-leave`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.useAttrs)(),s=c(`SbFloating`),{isOpen:u,floatingId:d,referenceId:f,side:h,align:g}=s;(0,t.watchEffect)(()=>{s.floatingRole.value=r.role});let _=(0,t.ref)(u.value),v=(0,t.ref)(null),y=e=>{s.floating.value=e instanceof HTMLElement?e:null},b=e=>{v.value=e instanceof HTMLElement?e:null},x=(0,t.computed)(()=>({...s.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),S=()=>({"aria-labelledby":r.role&&Object.hasOwn(o,r.role)&&a[`aria-label`]==null?f.value:void 0,...a}),C=(0,t.computed)(()=>u.value&&!r.teleportDisabled),w={[l]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},T=(0,t.computed)(()=>{let{transition:e}=r;return e?typeof e==`string`?{name:e}:e:{css:!1}}),E=e=>e.setAttribute(`data-sbf-state`,`closed`),D=()=>i(`after-enter`),O=()=>{u.value||(_.value=!1),i(`after-leave`)},k=e=>e instanceof Node&&!!v.value?.contains(e),A=e=>{let t=v.value;if(!t)return;let n=p(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},j=e=>{k(e.relatedTarget)?s.reference.value?.focus():A(`first`)},M=e=>{if(!k(e.relatedTarget)){A(`last`);return}let t=s.reference.value;((t&&m(t,e=>s.contains(e)))??t)?.focus()},N=()=>{let e=v.value;e&&(e.querySelector(`[autofocus]`)??p(e)[0]??e).focus({preventScroll:!0})};return(0,t.watch)(u,e=>{let t=s.skipFocusReturn;if(s.skipFocusReturn=!1,e){_.value=!0;return}let n=document.activeElement;!t&&n&&s.floating.value?.contains(n)&&s.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>u.value&&s.isPositioned.value,async e=>{e&&r.autoFocus&&(await(0,t.nextTick)(),N())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:r.teleportTo,disabled:r.teleportDisabled},[_.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:y,style:(0,t.normalizeStyle)(x.value)},[C.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},w,{onFocus:j}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(T.value,{appear:``,onBeforeLeave:E,onAfterEnter:D,onAfterLeave:O}),{default:(0,t.withCtx)(()=>[(0,t.unref)(u)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},S(),{id:(0,t.unref)(d),ref:b,role:r.role??void 0,tabindex:r.autoFocus?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(h),"data-sbf-align":(0,t.unref)(g)}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},16),C.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},w,{onFocus:M}),null,16)):(0,t.createCommentVNode)(``,!0)],4)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});e.SbContainer=g,e.SbFloating=v,e.SbReference=_});