sb-floating-panel-vue 1.0.0 → 3.0.0

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

@@ -1,219 +1,270 @@
-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
-  };
+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, onScopeDispose as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toRef as y, toValue as b, unref as x, useId as S, useModel as C, watch as w, withCtx as T } from "vue";
+import { autoUpdate as E, flip as D, hide as O, limitShift as k, offset as A, shift as j, size as M, useFloating as N } from "@floating-ui/vue";
+//#region src/composables/useSbFloatingPanel.ts
+var P = (e) => `${Math.max(0, e)}px`;
+function F(e) {
+	let t = g(null), r = g(null), i = n(() => {
+		let t = b(e.padding), n = b(e.matchWidth), r = b(e.placement).includes("-"), i = D({
+			padding: t,
+			crossAxis: "alignment",
+			fallbackAxisSideDirection: "end"
+		}), a = j({
+			padding: t,
+			limiter: k()
+		}), o = [
+			A(b(e.offset)),
+			...r ? [i, a] : [a, i],
+			M({
+				padding: t,
+				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i }) {
+					let { style: a } = t.floating, o = P(e.reference.width);
+					a.setProperty("--sbf-reference-width", o), a.setProperty("--sbf-available-width", P(r)), a.setProperty("--sbf-available-height", P(i)), a.width = n === !0 ? o : "", a.minWidth = n === "min" ? o : "";
+				}
+			})
+		];
+		return b(e.hideWhenDetached) && o.push(O({ padding: t })), o;
+	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = N(t, r, {
+		open: () => b(e.isOpen),
+		placement: () => b(e.placement),
+		strategy: () => b(e.strategy),
+		middleware: i,
+		whileElementsMounted: E
+	});
+	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
+	};
 }
-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
-};
+//#endregion
+//#region src/context.ts
+var I = Symbol("SbFloatingContext");
+function L(e) {
+	let t = c(I, null);
+	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
+	return t;
+}
+//#endregion
+//#region src/components/SbContainer.vue?vue&type=script&setup=true&lang.ts
+var R = /* @__PURE__ */ new WeakSet(), z = /* @__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
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
+	setup(e, { expose: t, emit: r }) {
+		let i = e, a = C(e, "open"), o = r, s = n(() => !i.disabled && (a.value ?? i.defaultOpen)), l = (e) => {
+			e && i.disabled || e !== s.value && (a.value = e);
+		}, u = () => l(!0), d = () => l(!1), f = () => l(!s.value), m = F({
+			isOpen: s,
+			placement: () => i.placement,
+			strategy: () => i.strategy,
+			offset: () => i.offset,
+			padding: () => i.padding,
+			matchWidth: () => i.matchWidth,
+			hideWhenDetached: () => i.hideWhenDetached
+		}), g = /* @__PURE__ */ new Set(), v = {
+			...m,
+			isOpen: s,
+			disabled: y(i, "disabled"),
+			trigger: y(i, "trigger"),
+			floatingId: `${S()}-floating`,
+			open: u,
+			close: d,
+			toggle: f,
+			contains: (e) => e instanceof Node ? m.reference.value?.contains(e) || m.floating.value?.contains(e) ? !0 : [...g].some((t) => t.contains(e)) : !1,
+			hasOpenChild: () => [...g].some((e) => e.isOpen.value || e.hasOpenChild()),
+			registerChild: (e) => (g.add(e), () => g.delete(e))
+		}, b = c(I, null);
+		b && p(b.registerChild(v)), h(I, v);
+		let T = (e) => {
+			e.key === "Escape" && i.closeOnEscape && !v.hasOpenChild() && (R.has(e) || (R.add(e), d()));
+		}, E = (e) => {
+			i.closeOnClickOutside && (v.contains(e.composedPath()[0] ?? e.target) || d());
+		};
+		return w(s, (e, t, n) => {
+			e && typeof document < "u" && (document.addEventListener("keydown", T), document.addEventListener("pointerdown", E, !0), n(() => {
+				document.removeEventListener("keydown", T), document.removeEventListener("pointerdown", E, !0);
+			}));
+		}, { immediate: !0 }), w(s, (e) => o(e ? "open" : "close")), w(() => i.disabled, (e) => {
+			e && a.value && (a.value = !1);
+		}), t({
+			open: u,
+			close: d,
+			toggle: f,
+			update: m.update
+		}), (e, t) => _(e.$slots, "default", {
+			isOpen: s.value,
+			open: u,
+			close: d,
+			toggle: f,
+			placement: x(m).placement.value,
+			side: x(m).side.value
+		});
+	}
+}), B = /* @__PURE__ */ s({
+	__name: "SbReference",
+	props: {
+		as: { default: "button" },
+		ariaHaspopup: { default: "dialog" }
+	},
+	setup(e) {
+		let t = e, i = L("SbReference"), { isOpen: a, disabled: o, floatingId: s } = i, c = n(() => t.as === "button" || t.as === "a"), l = (e) => {
+			i.reference.value = e instanceof HTMLElement ? e : null;
+		}, u = () => {
+			i.trigger.value === "click" && i.toggle();
+		}, d = (e) => {
+			c.value || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), u());
+		};
+		return (e, n) => (m(), r(v(t.as), {
+			ref: l,
+			type: t.as === "button" ? "button" : void 0,
+			role: c.value ? void 0 : "button",
+			tabindex: c.value ? void 0 : x(o) ? -1 : 0,
+			disabled: t.as === "button" && x(o) ? !0 : void 0,
+			"aria-disabled": !c.value && x(o) ? "true" : void 0,
+			"aria-haspopup": t.ariaHaspopup,
+			"aria-expanded": x(a) ? "true" : "false",
+			"aria-controls": x(a) ? x(s) : void 0,
+			"data-sbf-state": x(a) ? "open" : "closed",
+			onClick: u,
+			onKeydown: d
+		}, {
+			default: T(() => [_(e.$slots, "default")]),
+			_: 3
+		}, 40, [
+			"type",
+			"role",
+			"tabindex",
+			"disabled",
+			"aria-disabled",
+			"aria-haspopup",
+			"aria-expanded",
+			"aria-controls",
+			"data-sbf-state"
+		]));
+	}
+}), V = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", H = /* @__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: !1
+		}
+	},
+	emits: ["after-enter", "after-leave"],
+	setup(s, { emit: c }) {
+		let l = s, p = c, h = L("SbFloating"), { isOpen: y, floatingId: b, side: S, align: C } = h, E = g(y.value), D = g(null), O = (e) => {
+			h.floating.value = e instanceof HTMLElement ? e : null;
+		}, k = (e) => {
+			D.value = e instanceof HTMLElement ? e : null;
+		}, A = n(() => ({
+			...h.floatingStyles.value,
+			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
+		})), j = () => p("after-enter"), M = () => {
+			y.value || (E.value = !1), p("after-leave");
+		}, N = () => {
+			let e = D.value;
+			e && (e.querySelector("[autofocus]") ?? e.querySelector(V) ?? e).focus({ preventScroll: !0 });
+		};
+		return w(y, (e) => {
+			if (e) {
+				E.value = !0;
+				return;
+			}
+			let t = document.activeElement;
+			t && h.floating.value?.contains(t) && h.reference.value?.focus();
+		}), w(() => y.value && h.isPositioned.value, async (e) => {
+			e && l.autoFocus && (await d(), N());
+		}), (n, s) => (m(), r(e, {
+			to: l.teleportTo,
+			disabled: l.teleportDisabled
+		}, [E.value ? (m(), a("div", {
+			key: 0,
+			ref: O,
+			style: f(A.value)
+		}, [o(t, {
+			name: l.transition,
+			css: !!l.transition,
+			appear: "",
+			onAfterEnter: j,
+			onAfterLeave: M
+		}, {
+			default: T(() => [x(y) ? (m(), r(v(l.as), u({ key: 0 }, n.$attrs, {
+				id: x(b),
+				ref: k,
+				role: l.role,
+				tabindex: l.autoFocus ? -1 : void 0,
+				"data-sbf-state": x(y) ? "open" : "closed",
+				"data-sbf-side": x(S),
+				"data-sbf-align": x(C)
+			}), {
+				default: T(() => [_(n.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"id",
+				"role",
+				"tabindex",
+				"data-sbf-state",
+				"data-sbf-side",
+				"data-sbf-align"
+			])) : i("", !0)]),
+			_: 3
+		}, 8, ["name", "css"])], 4)) : i("", !0)], 8, ["to", "disabled"]));
+	}
+});
+//#endregion
+export { z as SbContainer, H as SbFloating, B 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`;function i(e){let i=(0,t.ref)(null),a=(0,t.ref)(null),o=(0,t.computed)(()=>{let i=(0,t.toValue)(e.padding),a=(0,t.toValue)(e.matchWidth),o=(0,t.toValue)(e.placement).includes(`-`),s=(0,n.flip)({padding:i,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),c=(0,n.shift)({padding:i,limiter:(0,n.limitShift)()}),l=[(0,n.offset)((0,t.toValue)(e.offset)),...o?[s,c]:[c,s],(0,n.size)({padding:i,apply({rects:e,elements:t,availableWidth:n,availableHeight:i}){let{style:o}=t.floating,s=r(e.reference.width);o.setProperty(`--sbf-reference-width`,s),o.setProperty(`--sbf-available-width`,r(n)),o.setProperty(`--sbf-available-height`,r(i)),o.width=a===!0?s:``,o.minWidth=a===`min`?s:``}})];return(0,t.toValue)(e.hideWhenDetached)&&l.push((0,n.hide)({padding:i})),l}),{floatingStyles:s,middlewareData:c,placement:l,isPositioned:u,update:d}=(0,n.useFloating)(i,a,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:o,whileElementsMounted:n.autoUpdate});return{reference:i,floating:a,floatingStyles:(0,t.computed)(()=>({...s.value,...c.value.hide?.referenceHidden?{visibility:`hidden`}:{}})),placement:l,side:(0,t.computed)(()=>l.value.split(`-`)[0]),align:(0,t.computed)(()=>l.value.split(`-`)[1]),isPositioned:u,update:d}}var a=Symbol(`SbFloatingContext`);function o(e){let n=(0,t.inject)(a,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var s=new WeakSet,c=(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}},{open:{type:Boolean,default:void 0},openModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:open`]),setup(e,{expose:n,emit:r}){let o=e,c=(0,t.useModel)(e,`open`),l=r,u=(0,t.computed)(()=>!o.disabled&&(c.value??o.defaultOpen)),d=e=>{e&&o.disabled||e!==u.value&&(c.value=e)},f=()=>d(!0),p=()=>d(!1),m=()=>d(!u.value),h=i({isOpen:u,placement:()=>o.placement,strategy:()=>o.strategy,offset:()=>o.offset,padding:()=>o.padding,matchWidth:()=>o.matchWidth,hideWhenDetached:()=>o.hideWhenDetached}),g=new Set,_={...h,isOpen:u,disabled:(0,t.toRef)(o,`disabled`),trigger:(0,t.toRef)(o,`trigger`),floatingId:`${(0,t.useId)()}-floating`,open:f,close:p,toggle:m,contains:e=>e instanceof Node?h.reference.value?.contains(e)||h.floating.value?.contains(e)?!0:[...g].some(t=>t.contains(e)):!1,hasOpenChild:()=>[...g].some(e=>e.isOpen.value||e.hasOpenChild()),registerChild:e=>(g.add(e),()=>g.delete(e))},v=(0,t.inject)(a,null);v&&(0,t.onScopeDispose)(v.registerChild(_)),(0,t.provide)(a,_);let y=e=>{e.key===`Escape`&&o.closeOnEscape&&!_.hasOpenChild()&&(s.has(e)||(s.add(e),p()))},b=e=>{o.closeOnClickOutside&&(_.contains(e.composedPath()[0]??e.target)||p())};return(0,t.watch)(u,(e,t,n)=>{e&&typeof document<`u`&&(document.addEventListener(`keydown`,y),document.addEventListener(`pointerdown`,b,!0),n(()=>{document.removeEventListener(`keydown`,y),document.removeEventListener(`pointerdown`,b,!0)}))},{immediate:!0}),(0,t.watch)(u,e=>l(e?`open`:`close`)),(0,t.watch)(()=>o.disabled,e=>{e&&c.value&&(c.value=!1)}),n({open:f,close:p,toggle:m,update:h.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:u.value,open:f,close:p,toggle:m,placement:(0,t.unref)(h).placement.value,side:(0,t.unref)(h).side.value})}}),l=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},ariaHaspopup:{default:`dialog`}},setup(e){let n=e,r=o(`SbReference`),{isOpen:i,disabled:a,floatingId:s}=r,c=(0,t.computed)(()=>n.as===`button`||n.as===`a`),l=e=>{r.reference.value=e instanceof HTMLElement?e:null},u=()=>{r.trigger.value===`click`&&r.toggle()},d=e=>{c.value||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),u())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{ref:l,type:n.as===`button`?`button`:void 0,role:c.value?void 0:`button`,tabindex:c.value?void 0:(0,t.unref)(a)?-1:0,disabled:n.as===`button`&&(0,t.unref)(a)?!0:void 0,"aria-disabled":!c.value&&(0,t.unref)(a)?`true`:void 0,"aria-haspopup":n.ariaHaspopup,"aria-expanded":(0,t.unref)(i)?`true`:`false`,"aria-controls":(0,t.unref)(i)?(0,t.unref)(s):void 0,"data-sbf-state":(0,t.unref)(i)?`open`:`closed`,onClick:u,onKeydown:d},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`data-sbf-state`]))}}),u=`a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]`,d=(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:!1}},emits:[`after-enter`,`after-leave`],setup(e,{emit:n}){let r=e,i=n,a=o(`SbFloating`),{isOpen:s,floatingId:c,side:l,align:d}=a,f=(0,t.ref)(s.value),p=(0,t.ref)(null),m=e=>{a.floating.value=e instanceof HTMLElement?e:null},h=e=>{p.value=e instanceof HTMLElement?e:null},g=(0,t.computed)(()=>({...a.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),_=()=>i(`after-enter`),v=()=>{s.value||(f.value=!1),i(`after-leave`)},y=()=>{let e=p.value;e&&(e.querySelector(`[autofocus]`)??e.querySelector(u)??e).focus({preventScroll:!0})};return(0,t.watch)(s,e=>{if(e){f.value=!0;return}let t=document.activeElement;t&&a.floating.value?.contains(t)&&a.reference.value?.focus()}),(0,t.watch)(()=>s.value&&a.isPositioned.value,async e=>{e&&r.autoFocus&&(await(0,t.nextTick)(),y())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:r.teleportTo,disabled:r.teleportDisabled},[f.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:m,style:(0,t.normalizeStyle)(g.value)},[(0,t.createVNode)(t.Transition,{name:r.transition,css:!!r.transition,appear:``,onAfterEnter:_,onAfterLeave:v},{default:(0,t.withCtx)(()=>[(0,t.unref)(s)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},e.$attrs,{id:(0,t.unref)(c),ref:h,role:r.role,tabindex:r.autoFocus?-1:void 0,"data-sbf-state":(0,t.unref)(s)?`open`:`closed`,"data-sbf-side":(0,t.unref)(l),"data-sbf-align":(0,t.unref)(d)}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-state`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},8,[`name`,`css`])],4)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});e.SbContainer=c,e.SbFloating=d,e.SbReference=l});