@headlessui-float/vue
Version:
Easily use Headless UI for Vue 3 with Floating UI (Popper.js)
1,023 lines (1,022 loc) • 28.2 kB
JavaScript
var he = Object.defineProperty;
var pe = (e, r, o) => r in e ? he(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o;
var G = (e, r, o) => pe(e, typeof r != "symbol" ? r + "" : r, o);
import { ref as h, unref as ye, Fragment as we, watch as P, onMounted as U, onBeforeUnmount as be, computed as O, watchEffect as te, defineComponent as R, mergeProps as N, cloneVNode as k, h as b, toRef as J, shallowRef as Fe, nextTick as Ce, provide as $, createCommentVNode as M, Transition as Te, inject as W } from "vue";
import { Portal as xe, TransitionChild as Ee, TransitionRoot as Ae } from "@headlessui/vue";
import { arrow as Pe, useFloating as Oe } from "@floating-ui/vue";
import { offset as Re, flip as Se, shift as Ne, autoPlacement as je, hide as Be, autoUpdate as Ve } from "@floating-ui/dom";
function B(e) {
return e == null || e.value == null ? null : e.value instanceof Node ? e.value : "$el" in e.value && e.value.$el ? B(h(e.value.$el)) : "getBoundingClientRect" in e.value ? e.value : null;
}
function He(e) {
return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1;
}
function K(e, r) {
const o = He(e);
return Math.round(r * o) / o;
}
function L(e) {
return e.reduce((r, o) => o.type === we ? r.concat(L(o.children)) : r.concat(o), []);
}
function I(e) {
return e == null ? !1 : typeof e.type == "string" || typeof e.type == "object" || typeof e.type == "function";
}
function Q(e) {
return e = ye(e), e && (e == null ? void 0 : e.nodeType) !== Node.COMMENT_NODE;
}
class Ie {
constructor() {
G(this, "current", this.detect());
}
set(r) {
this.current !== r && (this.current = r);
}
reset() {
this.set(this.detect());
}
get isServer() {
return this.current === "server";
}
get isClient() {
return this.current === "client";
}
detect() {
return typeof window > "u" || typeof document > "u" ? "server" : "client";
}
}
const X = new Ie();
function ne(e) {
if (X.isServer) return null;
if (e instanceof Node) return e.ownerDocument;
if (e && Object.prototype.hasOwnProperty.call(e, "value")) {
const r = B(e);
if (r) return r.ownerDocument;
}
return document;
}
function Y(e, r) {
!r.vueTransition && (r.transitionName || r.transitionType) && console.warn(`[headlessui-float]: <${e} /> pass "transition-name" or "transition-type" prop, must be set "vue-transition" prop.`);
}
function Ue(e, r, o, a, t) {
P([
() => t.offset,
() => t.flip,
() => t.shift,
() => t.autoPlacement,
() => t.arrow,
() => t.hide,
() => t.middleware
], () => {
const i = [];
(typeof t.offset == "number" || typeof t.offset == "object" || typeof t.offset == "function") && i.push(Re(t.offset)), (t.flip === !0 || typeof t.flip == "number" || typeof t.flip == "object") && i.push(Se({
padding: typeof t.flip == "number" ? t.flip : void 0,
...typeof t.flip == "object" ? t.flip : {}
})), (t.shift === !0 || typeof t.shift == "number" || typeof t.shift == "object") && i.push(Ne({
padding: typeof t.shift == "number" ? t.shift : void 0,
...typeof t.shift == "object" ? t.shift : {}
})), (t.autoPlacement === !0 || typeof t.autoPlacement == "object") && i.push(je(
typeof t.autoPlacement == "object" ? t.autoPlacement : void 0
)), i.push(...typeof t.middleware == "function" ? t.middleware({
referenceEl: r,
floatingEl: o
}) : t.middleware || []), (t.arrow === !0 || typeof t.arrow == "number") && i.push(Pe({
element: a,
padding: t.arrow === !0 ? 0 : t.arrow
})), (t.hide === !0 || typeof t.hide == "object" || Array.isArray(t.hide)) && (Array.isArray(t.hide) ? t.hide : [t.hide]).forEach((u) => {
i.push(Be(
typeof u == "object" ? u : void 0
));
}), e.value = i;
}, { immediate: !0 });
}
function ze(e, r, o) {
let a = () => {
};
U(() => {
if (e && X.isClient && typeof ResizeObserver < "u" && r.value && r.value instanceof Element) {
const t = new ResizeObserver(([i]) => {
o.value = i.borderBoxSize.reduce((u, { inlineSize: s }) => u + s, 0);
});
t.observe(r.value), a = () => {
t.disconnect(), o.value = null;
};
}
}), be(() => {
a();
});
}
const st = [
"origin-bottom",
"origin-top",
"origin-right",
"origin-left",
"origin-bottom-left",
"origin-bottom-right",
"origin-top-left",
"origin-top-right"
], De = (e) => {
switch (e) {
case "top":
return "origin-bottom";
case "bottom":
return "origin-top";
case "left":
return "origin-right";
case "right":
return "origin-left";
case "top-start":
case "right-end":
return "origin-bottom-left";
case "top-end":
case "left-end":
return "origin-bottom-right";
case "right-start":
case "bottom-start":
return "origin-top-left";
case "left-start":
case "bottom-end":
return "origin-top-right";
default:
return "origin-center";
}
}, ut = [
"origin-bottom",
"origin-top",
"ltr:origin-right rtl:origin-left",
"ltr:origin-left rtl:origin-right",
"ltr:origin-bottom-left rtl:origin-bottom-right",
"ltr:origin-bottom-right rtl:origin-bottom-left",
"ltr:origin-top-left rtl:origin-top-right",
"ltr:origin-top-right rtl:origin-top-left"
], ft = (e) => {
switch (e) {
case "top":
return "origin-bottom";
case "bottom":
return "origin-top";
case "left":
return "ltr:origin-right rtl:origin-left";
case "right":
return "ltr:origin-left rtl:origin-right";
case "top-start":
case "right-end":
return "ltr:origin-bottom-left rtl:origin-bottom-right";
case "top-end":
case "left-end":
return "ltr:origin-bottom-right rtl:origin-bottom-left";
case "right-start":
case "bottom-start":
return "ltr:origin-top-left rtl:origin-top-right";
case "left-start":
case "bottom-end":
return "ltr:origin-top-right rtl:origin-top-left";
default:
return "origin-center";
}
};
function Me(e, r) {
const o = O(() => {
if (typeof e.originClass == "function")
return e.originClass(r.value);
if (typeof e.originClass == "string")
return e.originClass;
if (e.tailwindcssOriginClass)
return De(r.value);
}), a = O(
() => e.enter || o.value ? `${e.enter || ""} ${o.value || ""}` : void 0
), t = O(
() => e.leave || o.value ? `${e.leave || ""} ${o.value || ""}` : void 0
);
return { originClassRef: o, enterActiveClassRef: a, leaveActiveClassRef: t };
}
function re(e, r, ...o) {
if (e in r) {
const t = r[e];
return typeof t == "function" ? t(...o) : t;
}
const a = new Error(
`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(
r
).map((t) => `"${t}"`).join(", ")}.`
);
throw Error.captureStackTrace && Error.captureStackTrace(a, re), a;
}
const Z = [
"[contentEditable=true]",
"[tabindex]",
"a[href]",
"area[href]",
"button:not([disabled])",
"iframe",
"input:not([disabled])",
"select:not([disabled])",
"textarea:not([disabled])"
].map(
// TODO: Remove this once JSDOM fixes the issue where an element that is
// "hidden" can be the document.activeElement, because this is not possible
// in real browsers.
process.env.NODE_ENV === "test" ? (e) => `${e}:not([tabindex='-1']):not([style*='display: none'])` : (e) => `${e}:not([tabindex='-1'])`
).join(",");
var oe = /* @__PURE__ */ ((e) => (e[e.Strict = 0] = "Strict", e[e.Loose = 1] = "Loose", e))(oe || {});
function $e(e, r = 0) {
var o;
return e === ((o = ne(e)) == null ? void 0 : o.body) ? !1 : re(r, {
0() {
return e.matches(Z);
},
1() {
let a = e;
for (; a !== null; ) {
if (a.matches(Z)) return !0;
a = a.parentElement;
}
return !1;
}
});
}
function C(e, r, o) {
X.isServer || te((a) => {
document.addEventListener(e, r, o), a(() => document.removeEventListener(e, r, o));
});
}
function ke(e, r, o = O(() => !0)) {
function a(i, u) {
if (!o.value || i.defaultPrevented) return;
const s = u(i);
if (s === null || !s.getRootNode().contains(s)) return;
const d = function f(c) {
return typeof c == "function" ? f(c()) : Array.isArray(c) || c instanceof Set ? c : [c];
}(e);
for (const f of d) {
if (f === null) continue;
const c = f instanceof HTMLElement ? f : B(f);
if (c != null && c.contains(s) || i.composed && i.composedPath().includes(c))
return;
}
return (
// This check alllows us to know whether or not we clicked on a "focusable" element like a
// button or an input. This is a backwards compatibility check so that you can open a <Menu
// /> and click on another <Menu /> which should close Menu A and open Menu B. We might
// revisit that so that you will require 2 clicks instead.
!$e(s, oe.Loose) && // This could be improved, but the `Combobox.Button` adds tabIndex={-1} to make it
// unfocusable via the keyboard so that tabbing to the next item from the input doesn't
// first go to the button.
s.tabIndex !== -1 && i.preventDefault(), r(i, s)
);
}
const t = h(null);
C("mousedown", (i) => {
var u, s;
o.value && (t.value = ((s = (u = i.composedPath) == null ? void 0 : u.call(i)) == null ? void 0 : s[0]) || i.target);
}, !0), C(
"click",
(i) => {
t.value && (a(i, () => t.value), t.value = null);
},
// We will use the `capture` phase so that layers in between with `event.stopPropagation()`
// don't "cancel" this outside click check. E.g.: A `Menu` inside a `DialogPanel` if the `Menu`
// is open, and you click outside of it in the `DialogPanel` the `Menu` should close. However,
// the `DialogPanel` has a `onClick(e) { e.stopPropagation() }` which would cancel this.
!0
), C("blur", (i) => a(
i,
() => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null
), !0);
}
const ae = Symbol("ReferenceContext"), ie = Symbol("FloatingContext"), le = Symbol("ArrowContext");
function se(e) {
const r = W(ae, null);
if (r === null) {
const o = new Error(`<${e} /> must be in the <Float /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(o, se), o;
}
return r;
}
function ue(e) {
const r = W(ie, null);
if (r === null) {
const o = new Error(`<${e} /> must be in the <Float /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(o, ue), o;
}
return r;
}
function fe(e) {
const r = W(le, null);
if (r === null) {
const o = new Error(`<${e} /> must be in the <Float /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(o, fe), o;
}
return r;
}
const n = {
as: {
type: [String, Function],
default: "template"
},
floatingAs: {
type: [String, Function],
default: "div"
},
show: {
type: Boolean,
default: null
},
placement: {
type: String,
default: "bottom-start"
},
strategy: {
type: String,
default: "absolute"
},
offset: [Number, Function, Object],
shift: {
type: [Boolean, Number, Object],
default: !1
},
flip: {
type: [Boolean, Number, Object],
default: !1
},
arrow: {
type: [Boolean, Number],
default: !1
},
autoPlacement: {
type: [Boolean, Object],
default: !1
},
hide: {
type: [Boolean, Object, Array],
default: !1
},
referenceHiddenClass: String,
escapedClass: String,
autoUpdate: {
type: [Boolean, Object],
default: !0
},
zIndex: {
type: [Number, String],
default: 9999
},
vueTransition: {
type: Boolean,
default: !1
},
transitionName: String,
transitionType: String,
enter: String,
enterFrom: String,
enterTo: String,
leave: String,
leaveFrom: String,
leaveTo: String,
originClass: [String, Function],
tailwindcssOriginClass: {
type: Boolean,
default: !1
},
portal: {
type: Boolean,
default: !1
},
transform: {
type: Boolean,
default: !1
},
adaptiveWidth: {
type: [Boolean, Object],
default: !1
},
composable: {
type: Boolean,
default: !1
},
dialog: {
type: Boolean,
default: !1
},
middleware: {
type: [Array, Function],
default: () => []
}
};
function ce(e, r, o, a) {
const { referenceRef: t } = a, i = r, u = N(o, {
ref: t
}), s = k(
e,
i.as === "template" ? u : {}
);
return i.as === "template" ? s : typeof i.as == "string" ? b(i.as, u, [s]) : b(i.as, u, () => [s]);
}
function _(e, r, o, a) {
const { floatingRef: t, props: i, mounted: u, show: s, referenceHidden: d, escaped: f, placement: c, floatingStyles: p, referenceElWidth: y, updateFloating: T } = a, l = N(
{ ...i, as: i.floatingAs },
r
), { enterActiveClassRef: g, leaveActiveClassRef: m } = Me(l, c), F = {
show: u.value ? l.show : !1,
enter: g.value,
enterFrom: l.enterFrom,
enterTo: l.enterTo,
leave: m.value,
leaveFrom: l.leaveFrom,
leaveTo: l.leaveTo,
onBeforeEnter() {
s.value = !0;
},
onAfterLeave() {
s.value = !1;
}
}, x = {
name: l.transitionName,
type: l.transitionType,
appear: !0,
...l.transitionName ? {} : {
enterActiveClass: g.value,
enterFromClass: l.enterFrom,
enterToClass: l.enterTo,
leaveActiveClass: m.value,
leaveFromClass: l.leaveFrom,
leaveToClass: l.leaveTo
},
onBeforeEnter() {
s.value = !0;
},
onAfterLeave() {
s.value = !1;
}
}, E = {
class: [
d.value ? l.referenceHiddenClass : void 0,
f.value ? l.escapedClass : void 0
].filter((v) => !!v).join(" "),
style: {
...p.value,
zIndex: l.zIndex
}
};
if (l.adaptiveWidth && typeof y.value == "number") {
const v = {
attribute: "width",
...typeof l.adaptiveWidth == "object" ? l.adaptiveWidth : {}
};
E.style[v.attribute] = `${y.value}px`;
}
function z(v) {
return l.portal ? u.value ? b(xe, () => v) : M() : v;
}
function D(v) {
const A = N(
E,
o,
l.dialog ? {} : { ref: t }
);
return l.as === "template" ? v : typeof l.as == "string" ? b(l.as, A, v) : b(l.as, A, () => v);
}
function V() {
function v() {
var H;
const A = l.as === "template" ? N(
E,
o,
l.dialog ? {} : { ref: t }
) : null, j = k(e, A);
return ((H = e.props) == null ? void 0 : H.unmount) === !1 ? (T(), j) : l.vueTransition && l.show === !1 ? M() : j;
}
return u.value ? l.vueTransition ? b(Te, {
...l.dialog ? { ref: t } : {},
...x
}, v) : b(l.transitionChild ? Ee : Ae, {
key: `placement-${c.value}`,
...l.dialog ? { ref: t } : {},
as: "template",
...F
}, v) : M();
}
return z(
D(
V()
)
);
}
function de(e, r, o, a, t) {
const i = h(!1), u = J(a, "placement"), s = J(a, "strategy"), d = Fe({}), f = h(void 0), c = h(void 0), p = h(null), y = h(void 0), T = h(void 0), l = O(() => B(r)), g = O(() => B(o)), m = O(
() => Q(l) && Q(g)
), { placement: F, middlewareData: x, isPositioned: E, floatingStyles: z, update: D } = Oe(l, g, {
placement: u,
strategy: s,
middleware: d,
// If enable dialog mode, then set `transform` to false.
transform: a.dialog ? !1 : a.transform,
// Fix transition not smooth bug when dialog mode enabled.
whileElementsMounted: a.dialog ? () => () => {
} : void 0
}), V = h(null);
U(() => {
i.value = !0;
}), P(e, (w, S) => {
w && !S ? t("show") : !w && S && t("hide");
}, { immediate: !0 });
function v() {
m.value && (D(), t("update"));
}
P([u, s, d], v, { flush: "sync" }), Ue(
d,
l,
g,
p,
a
), P([x, () => a.hide, E], () => {
var w, S;
(a.hide === !0 || typeof a.hide == "object" || Array.isArray(a.hide)) && (f.value = ((w = x.value.hide) == null ? void 0 : w.referenceHidden) || !E.value, c.value = (S = x.value.hide) == null ? void 0 : S.escaped);
}), P(x, () => {
const w = x.value.arrow;
y.value = w == null ? void 0 : w.x, T.value = w == null ? void 0 : w.y;
}), ze(!!a.adaptiveWidth, l, V), P([e, m], async (w, S, ve) => {
if (await Ce(), e.value && m.value && a.autoUpdate) {
const ge = Ve(
l.value,
g.value,
v,
typeof a.autoUpdate == "object" ? a.autoUpdate : void 0
);
ve(ge);
}
}, { flush: "post", immediate: !0 });
const A = h(!0);
P(l, () => {
!(l.value instanceof Element) && m.value && A.value && (A.value = !1, window.requestAnimationFrame(() => {
A.value = !0, v();
}));
}, { flush: "sync" });
const j = {
referenceRef: r,
placement: F
}, H = {
floatingRef: o,
props: a,
mounted: i,
show: e,
referenceHidden: f,
escaped: c,
placement: F,
floatingStyles: z,
referenceElWidth: V,
updateFloating: v
}, q = {
ref: p,
placement: F,
x: y,
y: T
};
return $(le, q), { referenceApi: j, floatingApi: H, arrowApi: q, placement: F, referenceEl: l, floatingEl: g, middlewareData: x, update: v };
}
const We = R({
name: "Float",
inheritAttrs: !1,
props: n,
emits: ["show", "hide", "update"],
setup(e, { emit: r, slots: o, attrs: a }) {
Y("Float", e);
const t = h(e.show ?? !1), i = h(null), u = h(null), {
referenceApi: s,
floatingApi: d,
placement: f
} = de(t, i, u, e, r);
function c(y) {
return e.as === "template" ? y : typeof e.as == "string" ? b(e.as, a, y) : b(e.as, a, () => y);
}
const p = {
placement: f.value
};
return e.composable || e.dialog ? ($(ae, s), $(ie, d), () => {
if (o.default)
return c(o.default(p));
}) : () => {
if (!o.default) return;
const [y, T] = L(o.default(p)).filter(I);
if (!I(y))
return;
const l = ce(
y,
{ as: "template" },
{},
s
), g = _(
T,
{ as: e.floatingAs },
{},
d
);
return c([
l,
g
]);
};
}
}), Le = We, Xe = {
as: n.as
}, Ye = R({
name: "FloatReference",
inheritAttrs: !1,
props: Xe,
setup(e, { slots: r, attrs: o }) {
const a = se("FloatReference"), { placement: t } = a;
return () => {
if (!r.default) return;
const i = {
placement: t.value
};
return ce(
r.default(i)[0],
e,
o,
a
);
};
}
}), ct = Ye, ee = {
as: n.floatingAs,
vueTransition: n.vueTransition,
transitionName: n.transitionName,
transitionType: n.transitionType,
enter: n.enter,
enterFrom: n.enterFrom,
enterTo: n.enterTo,
leave: n.leave,
leaveFrom: n.leaveFrom,
leaveTo: n.leaveTo,
originClass: n.originClass,
tailwindcssOriginClass: n.tailwindcssOriginClass,
transitionChild: {
type: Boolean,
default: !1
}
}, _e = R({
name: "FloatContent",
inheritAttrs: !1,
props: ee,
setup(e, { slots: r, attrs: o }) {
Y("FloatContent", e);
const a = ue("FloatContent"), { placement: t } = a;
return () => {
if (!r.default) return;
const i = {
placement: t.value
}, u = Object.entries(e).reduce((s, [d, f]) => {
const c = ee;
return (typeof c[d] == "object" && f === c[d].default || f === void 0) && delete s[d], s;
}, { ...e });
return _(
r.default(i)[0],
u,
o,
a
);
};
}
}), dt = _e, qe = {
as: {
...n.as,
default: "div"
},
offset: {
type: Number,
default: 4
}
}, Ge = R({
name: "FloatArrow",
props: qe,
setup(e, { slots: r, attrs: o }) {
const { ref: a, placement: t, x: i, y: u } = fe("FloatArrow");
return () => {
var f;
const s = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}[t.value.split("-")[0]], d = {
left: a.value && typeof i.value == "number" ? `${K(a.value, i.value)}px` : void 0,
top: a.value && typeof u.value == "number" ? `${K(a.value, u.value)}px` : void 0,
right: void 0,
bottom: void 0,
[s]: `${e.offset * -1}px`
};
if (e.as === "template") {
const c = {
placement: t.value
}, p = (f = r.default) == null ? void 0 : f.call(r, c)[0];
return !p || !I(p) ? void 0 : k(p, { ref: a, style: d });
}
return b(e.as, N(o, { ref: a, style: d }));
};
}
}), mt = Ge, Je = {
as: n.as,
show: n.show,
placement: n.placement,
strategy: n.strategy,
offset: n.offset,
shift: n.shift,
flip: n.flip,
arrow: n.arrow,
autoPlacement: n.autoPlacement,
autoUpdate: n.autoUpdate,
zIndex: n.zIndex,
vueTransition: n.vueTransition,
transitionName: n.transitionName,
transitionType: n.transitionType,
enter: n.enter,
enterFrom: n.enterFrom,
enterTo: n.enterTo,
leave: n.leave,
leaveFrom: n.leaveFrom,
leaveTo: n.leaveTo,
originClass: n.originClass,
tailwindcssOriginClass: n.tailwindcssOriginClass,
portal: n.portal,
transform: n.transform,
middleware: n.middleware
}, Ke = R({
name: "FloatVirtual",
inheritAttrs: !1,
props: Je,
emits: ["initial", "show", "hide", "update"],
setup(e, { emit: r, slots: o, attrs: a }) {
Y("FloatVirtual", e);
const t = h(e.show ?? !1), i = h({
getBoundingClientRect() {
return {
x: 0,
y: 0,
top: 0,
left: 0,
bottom: 0,
right: 0,
width: 0,
height: 0
};
}
}), u = h(null), {
floatingApi: s,
placement: d
} = de(t, i, u, e, r);
P(() => e.show, () => {
t.value = e.show ?? !1;
});
function f() {
t.value = !1;
}
return r("initial", {
show: t,
placement: d,
reference: i,
floating: u
}), () => {
if (!o.default) return;
const c = {
placement: d.value,
close: f
}, [p] = L(o.default(c)).filter(I);
return _(
p,
{
as: e.as,
show: t.value
},
a,
s
);
};
}
}), me = Ke, Qe = {
as: n.as,
placement: n.placement,
strategy: n.strategy,
offset: n.offset,
shift: n.shift,
flip: {
...n.flip,
default: !0
},
arrow: n.arrow,
autoPlacement: n.autoPlacement,
autoUpdate: n.autoUpdate,
zIndex: n.zIndex,
vueTransition: n.vueTransition,
transitionName: n.transitionName,
transitionType: n.transitionType,
enter: n.enter,
enterFrom: n.enterFrom,
enterTo: n.enterTo,
leave: n.leave,
leaveFrom: n.leaveFrom,
leaveTo: n.leaveTo,
originClass: n.originClass,
tailwindcssOriginClass: n.tailwindcssOriginClass,
transform: n.transform,
middleware: n.middleware
}, Ze = R({
name: "FloatContextMenu",
inheritAttrs: !1,
props: Qe,
emits: ["show", "hide", "update"],
setup(e, { emit: r, slots: o, attrs: a }) {
const t = h(!1);
function i({ show: u, reference: s, floating: d }) {
C("contextmenu", (f) => {
f.preventDefault(), s.value = {
getBoundingClientRect() {
return {
width: 0,
height: 0,
x: f.clientX,
y: f.clientY,
top: f.clientY,
left: f.clientX,
right: f.clientX,
bottom: f.clientY
};
}
}, u.value = !0;
}), ke(d, () => {
u.value = !1;
}, O(() => u.value));
}
return U(() => {
t.value = !0;
}), () => {
if (o.default && t.value)
return b(me, {
...e,
...a,
portal: !0,
onInitial: i,
onShow: () => r("show"),
onHide: () => r("hide"),
onUpdate: () => r("update")
}, o.default);
};
}
}), vt = Ze, et = {
as: n.as,
placement: n.placement,
strategy: n.strategy,
offset: n.offset,
shift: n.shift,
flip: n.flip,
arrow: n.arrow,
autoPlacement: n.autoPlacement,
autoUpdate: n.autoUpdate,
zIndex: n.zIndex,
vueTransition: n.vueTransition,
transitionName: n.transitionName,
transitionType: n.transitionType,
enter: n.enter,
enterFrom: n.enterFrom,
enterTo: n.enterTo,
leave: n.leave,
leaveFrom: n.leaveFrom,
leaveTo: n.leaveTo,
originClass: n.originClass,
tailwindcssOriginClass: n.tailwindcssOriginClass,
transform: n.transform,
middleware: n.middleware,
globalHideCursor: {
type: Boolean,
default: !0
}
}, tt = R({
name: "FloatCursor",
inheritAttrs: !1,
props: et,
emits: ["show", "hide", "update"],
setup({ globalHideCursor: e, ...r }, { emit: o, slots: a, attrs: t }) {
const i = h(!1);
function u({ show: s, reference: d, floating: f }) {
function c() {
s.value = !0;
}
function p() {
s.value = !1;
}
function y(m) {
d.value = {
getBoundingClientRect() {
return {
width: 0,
height: 0,
x: m.clientX,
y: m.clientY,
top: m.clientY,
left: m.clientX,
right: m.clientX,
bottom: m.clientY
};
}
};
}
function T(m) {
c(), y(m);
}
function l(m) {
c(), y(m.touches[0]);
}
const g = ne(f);
g && (te((m) => {
if (e && !g.getElementById("headlesui-float-cursor-style")) {
const F = g.createElement("style");
(g.head || g.getElementsByTagName("head")[0]).appendChild(F), F.id = "headlesui-float-cursor-style", F.appendChild(g.createTextNode([
"*, *::before, *::after {",
" cursor: none !important;",
"}",
".headlesui-float-cursor-root {",
" pointer-events: none !important;",
"}"
].join(`
`))), m(() => {
var E;
return (E = g.getElementById("headlesui-float-cursor-style")) == null ? void 0 : E.remove();
});
}
}, { flush: "post" }), "ontouchstart" in window || navigator.maxTouchPoints > 0 ? (C("touchstart", l), C("touchend", p), C("touchmove", l)) : (C("mouseenter", T), C("mouseleave", p), C("mousemove", T)));
}
return U(() => {
i.value = !0;
}), () => {
if (a.default && i.value)
return b(me, {
...r,
...t,
portal: !0,
class: "headlesui-float-cursor-root",
onInitial: u,
onShow: () => o("show"),
onHide: () => o("hide"),
onUpdate: () => o("update")
}, a.default);
};
}
}), gt = tt;
function ht(e) {
return R({
name: "HighOrderFloat",
setup(o, { slots: a }) {
return () => b(Le, N(
e,
o
), a);
}
});
}
const nt = [
"Float",
"FloatArrow",
"FloatContent",
"FloatReference"
];
function pt(e = {}) {
const { prefix: r = "" } = e;
return {
type: "component",
resolve: (o) => {
if (o.startsWith(r)) {
const a = o.substring(r.length);
if (nt.includes(a))
return {
name: a,
from: "@headlessui-float/vue"
};
}
}
};
}
export {
Le as Float,
mt as FloatArrow,
qe as FloatArrowPropsValidators,
dt as FloatContent,
ee as FloatContentPropsValidators,
vt as FloatContextMenu,
Qe as FloatContextMenuPropsValidators,
gt as FloatCursor,
et as FloatCursorPropsValidators,
n as FloatPropsValidators,
ct as FloatReference,
Xe as FloatReferencePropsValidators,
me as FloatVirtual,
Je as FloatVirtualPropsValidators,
pt as HeadlessUiFloatResolver,
ht as createHighOrderFloatComponent,
_ as renderFloatingElement,
ce as renderReferenceElement,
De as tailwindcssOriginClassResolver,
st as tailwindcssOriginSafelist,
ft as tailwindcssRtlOriginClassResolver,
ut as tailwindcssRtlOriginSafelist,
de as useFloat,
ke as useOutsideClick
};