floating-vue
Version:
Easy Vue tooltips, dropdowns, menus & popovers using floating-ui
1,585 lines (1,584 loc) • 46.8 kB
JavaScript
import { defineComponent as O, openBlock as f, createElementBlock as T, normalizeClass as J, renderSlot as A, normalizeProps as ke, guardReactiveProps as Le, pushScopeId as De, popScopeId as Ie, nextTick as Fe, createBlock as M, withScopeId as Re, resolveComponent as P, normalizeStyle as W, withKeys as je, createElementVNode as w, Fragment as Ve, createCommentVNode as se, mergeProps as $e, withCtx as N, createVNode as ve, toDisplayString as We, ref as U, createApp as Ge, h as qe } from "vue";
import { offset as xe, autoPlacement as Ue, shift as Ye, flip as Xe, arrow as Ke, size as Je, computePosition as Qe, getOverflowAncestors as ne } from "@floating-ui/dom";
function ye(e, t) {
for (const o in t)
Object.prototype.hasOwnProperty.call(t, o) && (typeof t[o] == "object" && e[o] ? ye(e[o], t[o]) : e[o] = t[o]);
}
const h = {
// Disable popper components
disabled: !1,
// Default position offset along main axis (px)
distance: 5,
// Default position offset along cross axis (px)
skidding: 0,
// Default container where the tooltip will be appended
container: "body",
// Element used to compute position and size boundaries
boundary: void 0,
// Skip delay & CSS transitions when another popper is shown, so that the popper appear to instanly move to the new position.
instantMove: !1,
// Auto destroy tooltip DOM nodes (ms)
disposeTimeout: 150,
// Triggers on the popper itself
popperTriggers: [],
// Positioning strategy
strategy: "absolute",
// Prevent overflow
preventOverflow: !0,
// Flip to the opposite placement if needed
flip: !0,
// Shift on the cross axis to prevent the popper from overflowing
shift: !0,
// Overflow padding (px)
overflowPadding: 0,
// Arrow padding (px)
arrowPadding: 0,
// Compute arrow overflow (useful to hide it)
arrowOverflow: !0,
/**
* By default, compute autohide on 'click'.
*/
autoHideOnMousedown: !1,
// Themes
themes: {
tooltip: {
// Default tooltip placement relative to target element
placement: "top",
// Default events that trigger the tooltip
triggers: ["hover", "focus", "touch"],
// Close tooltip on click on tooltip target
hideTriggers: (e) => [...e, "click"],
// Delay (ms)
delay: {
show: 200,
hide: 0
},
// Update popper on content resize
handleResize: !1,
// Enable HTML content in directive
html: !1,
// Displayed when tooltip content is loading
loadingContent: "..."
},
dropdown: {
// Default dropdown placement relative to target element
placement: "bottom",
// Default events that trigger the dropdown
triggers: ["click"],
// Delay (ms)
delay: 0,
// Update popper on content resize
handleResize: !0,
// Hide on clock outside
autoHide: !0
},
menu: {
$extend: "dropdown",
triggers: ["hover", "focus"],
popperTriggers: ["hover"],
delay: {
show: 0,
hide: 400
}
}
}
};
function S(e, t) {
let o = h.themes[e] || {}, i;
do
i = o[t], typeof i > "u" ? o.$extend ? o = h.themes[o.$extend] || {} : (o = null, i = h[t]) : o = null;
while (o);
return i;
}
function Ze(e) {
const t = [e];
let o = h.themes[e] || {};
do
o.$extend && !o.$resetCss ? (t.push(o.$extend), o = h.themes[o.$extend] || {}) : o = null;
while (o);
return t.map((i) => `v-popper--theme-${i}`);
}
function re(e) {
const t = [e];
let o = h.themes[e] || {};
do
o.$extend ? (t.push(o.$extend), o = h.themes[o.$extend] || {}) : o = null;
while (o);
return t;
}
let $ = !1;
if (typeof window < "u") {
$ = !1;
try {
const e = Object.defineProperty({}, "passive", {
get() {
$ = !0;
}
});
window.addEventListener("test", null, e);
} catch {
}
}
let _e = !1;
typeof window < "u" && typeof navigator < "u" && (_e = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
const Te = ["auto", "top", "bottom", "left", "right"].reduce((e, t) => e.concat([
t,
`${t}-start`,
`${t}-end`
]), []), pe = {
hover: "mouseenter",
focus: "focus",
click: "click",
touch: "touchstart",
pointer: "pointerdown"
}, ae = {
hover: "mouseleave",
focus: "blur",
click: "click",
touch: "touchend",
pointer: "pointerup"
};
function de(e, t) {
const o = e.indexOf(t);
o !== -1 && e.splice(o, 1);
}
function G() {
return new Promise((e) => requestAnimationFrame(() => {
requestAnimationFrame(e);
}));
}
const d = [];
let g = null;
const le = {};
function he(e) {
let t = le[e];
return t || (t = le[e] = []), t;
}
let Y = function() {
};
typeof window < "u" && (Y = window.Element);
function n(e) {
return function(t) {
return S(t.theme, e);
};
}
const q = "__floating-vue__popper", Q = () => O({
name: "VPopper",
provide() {
return {
[q]: {
parentPopper: this
}
};
},
inject: {
[q]: { default: null }
},
props: {
theme: {
type: String,
required: !0
},
targetNodes: {
type: Function,
required: !0
},
referenceNode: {
type: Function,
default: null
},
popperNode: {
type: Function,
required: !0
},
shown: {
type: Boolean,
default: !1
},
showGroup: {
type: String,
default: null
},
// eslint-disable-next-line vue/require-prop-types
ariaId: {
default: null
},
disabled: {
type: Boolean,
default: n("disabled")
},
positioningDisabled: {
type: Boolean,
default: n("positioningDisabled")
},
placement: {
type: String,
default: n("placement"),
validator: (e) => Te.includes(e)
},
delay: {
type: [String, Number, Object],
default: n("delay")
},
distance: {
type: [Number, String],
default: n("distance")
},
skidding: {
type: [Number, String],
default: n("skidding")
},
triggers: {
type: Array,
default: n("triggers")
},
showTriggers: {
type: [Array, Function],
default: n("showTriggers")
},
hideTriggers: {
type: [Array, Function],
default: n("hideTriggers")
},
popperTriggers: {
type: Array,
default: n("popperTriggers")
},
popperShowTriggers: {
type: [Array, Function],
default: n("popperShowTriggers")
},
popperHideTriggers: {
type: [Array, Function],
default: n("popperHideTriggers")
},
container: {
type: [String, Object, Y, Boolean],
default: n("container")
},
boundary: {
type: [String, Y],
default: n("boundary")
},
strategy: {
type: String,
validator: (e) => ["absolute", "fixed"].includes(e),
default: n("strategy")
},
autoHide: {
type: [Boolean, Function],
default: n("autoHide")
},
handleResize: {
type: Boolean,
default: n("handleResize")
},
instantMove: {
type: Boolean,
default: n("instantMove")
},
eagerMount: {
type: Boolean,
default: n("eagerMount")
},
popperClass: {
type: [String, Array, Object],
default: n("popperClass")
},
computeTransformOrigin: {
type: Boolean,
default: n("computeTransformOrigin")
},
/**
* @deprecated
*/
autoMinSize: {
type: Boolean,
default: n("autoMinSize")
},
autoSize: {
type: [Boolean, String],
default: n("autoSize")
},
/**
* @deprecated
*/
autoMaxSize: {
type: Boolean,
default: n("autoMaxSize")
},
autoBoundaryMaxSize: {
type: Boolean,
default: n("autoBoundaryMaxSize")
},
preventOverflow: {
type: Boolean,
default: n("preventOverflow")
},
overflowPadding: {
type: [Number, String],
default: n("overflowPadding")
},
arrowPadding: {
type: [Number, String],
default: n("arrowPadding")
},
arrowOverflow: {
type: Boolean,
default: n("arrowOverflow")
},
flip: {
type: Boolean,
default: n("flip")
},
shift: {
type: Boolean,
default: n("shift")
},
shiftCrossAxis: {
type: Boolean,
default: n("shiftCrossAxis")
},
noAutoFocus: {
type: Boolean,
default: n("noAutoFocus")
},
disposeTimeout: {
type: Number,
default: n("disposeTimeout")
}
},
emits: {
show: () => !0,
hide: () => !0,
"update:shown": (e) => !0,
"apply-show": () => !0,
"apply-hide": () => !0,
"close-group": () => !0,
"close-directive": () => !0,
"auto-hide": () => !0,
resize: () => !0
},
data() {
return {
isShown: !1,
isMounted: !1,
skipTransition: !1,
classes: {
showFrom: !1,
showTo: !1,
hideFrom: !1,
hideTo: !0
},
result: {
x: 0,
y: 0,
placement: "",
strategy: this.strategy,
arrow: {
x: 0,
y: 0,
centerOffset: 0
},
transformOrigin: null
},
randomId: `popper_${[Math.random(), Date.now()].map((e) => e.toString(36).substring(2, 10)).join("_")}`,
shownChildren: /* @__PURE__ */ new Set(),
lastAutoHide: !0,
pendingHide: !1,
containsGlobalTarget: !1,
isDisposed: !0,
mouseDownContains: !1
};
},
computed: {
popperId() {
return this.ariaId != null ? this.ariaId : this.randomId;
},
shouldMountContent() {
return this.eagerMount || this.isMounted;
},
slotData() {
return {
popperId: this.popperId,
isShown: this.isShown,
shouldMountContent: this.shouldMountContent,
skipTransition: this.skipTransition,
autoHide: typeof this.autoHide == "function" ? this.lastAutoHide : this.autoHide,
show: this.show,
hide: this.hide,
handleResize: this.handleResize,
onResize: this.onResize,
classes: {
...this.classes,
popperClass: this.popperClass
},
result: this.positioningDisabled ? null : this.result,
attrs: this.$attrs
};
},
parentPopper() {
var e;
return (e = this[q]) == null ? void 0 : e.parentPopper;
},
hasPopperShowTriggerHover() {
var e, t;
return ((e = this.popperTriggers) == null ? void 0 : e.includes("hover")) || ((t = this.popperShowTriggers) == null ? void 0 : t.includes("hover"));
}
},
watch: {
shown: "$_autoShowHide",
disabled(e) {
e ? this.dispose() : this.init();
},
async container() {
this.isShown && (this.$_ensureTeleport(), await this.$_computePosition());
},
triggers: {
handler: "$_refreshListeners",
deep: !0
},
positioningDisabled: "$_refreshListeners",
...[
"placement",
"distance",
"skidding",
"boundary",
"strategy",
"overflowPadding",
"arrowPadding",
"preventOverflow",
"shift",
"shiftCrossAxis",
"flip"
].reduce((e, t) => (e[t] = "$_computePosition", e), {})
},
created() {
this.autoMinSize && console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.'), this.autoMaxSize && console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.");
},
mounted() {
this.init(), this.$_detachPopperNode();
},
activated() {
this.$_autoShowHide();
},
deactivated() {
this.hide();
},
beforeUnmount() {
this.dispose();
},
methods: {
show({ event: e = null, skipDelay: t = !1, force: o = !1 } = {}) {
var i, s;
(i = this.parentPopper) != null && i.lockedChild && this.parentPopper.lockedChild !== this || (this.pendingHide = !1, (o || !this.disabled) && (((s = this.parentPopper) == null ? void 0 : s.lockedChild) === this && (this.parentPopper.lockedChild = null), this.$_scheduleShow(e, t), this.$emit("show"), this.$_showFrameLocked = !0, requestAnimationFrame(() => {
this.$_showFrameLocked = !1;
})), this.$emit("update:shown", !0));
},
hide({ event: e = null, skipDelay: t = !1 } = {}) {
var o;
if (!this.$_hideInProgress) {
if (this.shownChildren.size > 0) {
this.pendingHide = !0;
return;
}
if (this.hasPopperShowTriggerHover && this.$_isAimingPopper()) {
this.parentPopper && (this.parentPopper.lockedChild = this, clearTimeout(this.parentPopper.lockedChildTimer), this.parentPopper.lockedChildTimer = setTimeout(() => {
this.parentPopper.lockedChild === this && (this.parentPopper.lockedChild.hide({ skipDelay: t }), this.parentPopper.lockedChild = null);
}, 1e3));
return;
}
((o = this.parentPopper) == null ? void 0 : o.lockedChild) === this && (this.parentPopper.lockedChild = null), this.pendingHide = !1, this.$_scheduleHide(e, t), this.$emit("hide"), this.$emit("update:shown", !1);
}
},
init() {
var e;
this.isDisposed && (this.isDisposed = !1, this.isMounted = !1, this.$_events = [], this.$_preventShow = !1, this.$_referenceNode = ((e = this.referenceNode) == null ? void 0 : e.call(this)) ?? this.$el, this.$_targetNodes = this.targetNodes().filter((t) => t.nodeType === t.ELEMENT_NODE), this.$_popperNode = this.popperNode(), this.$_innerNode = this.$_popperNode.querySelector(".v-popper__inner"), this.$_arrowNode = this.$_popperNode.querySelector(".v-popper__arrow-container"), this.$_swapTargetAttrs("title", "data-original-title"), this.$_detachPopperNode(), this.triggers.length && this.$_addEventListeners(), this.shown && this.show());
},
dispose() {
this.isDisposed || (this.isDisposed = !0, this.$_removeEventListeners(), this.hide({ skipDelay: !0 }), this.$_detachPopperNode(), this.isMounted = !1, this.isShown = !1, this.$_updateParentShownChildren(!1), this.$_swapTargetAttrs("data-original-title", "title"));
},
async onResize() {
this.isShown && (await this.$_computePosition(), this.$emit("resize"));
},
async $_computePosition() {
if (this.isDisposed || this.positioningDisabled)
return;
const e = {
strategy: this.strategy,
middleware: []
};
(this.distance || this.skidding) && e.middleware.push(xe({
mainAxis: this.distance,
crossAxis: this.skidding
}));
const t = this.placement.startsWith("auto");
if (t ? e.middleware.push(Ue({
alignment: this.placement.split("-")[1] ?? ""
})) : e.placement = this.placement, this.preventOverflow && (this.shift && e.middleware.push(Ye({
padding: this.overflowPadding,
boundary: this.boundary,
crossAxis: this.shiftCrossAxis
})), !t && this.flip && e.middleware.push(Xe({
padding: this.overflowPadding,
boundary: this.boundary
}))), e.middleware.push(Ke({
element: this.$_arrowNode,
padding: this.arrowPadding
})), this.arrowOverflow && e.middleware.push({
name: "arrowOverflow",
fn: ({ placement: i, rects: s, middlewareData: r }) => {
let p;
const { centerOffset: a } = r.arrow;
return i.startsWith("top") || i.startsWith("bottom") ? p = Math.abs(a) > s.reference.width / 2 : p = Math.abs(a) > s.reference.height / 2, {
data: {
overflow: p
}
};
}
}), this.autoMinSize || this.autoSize) {
const i = this.autoSize ? this.autoSize : this.autoMinSize ? "min" : null;
e.middleware.push({
name: "autoSize",
fn: ({ rects: s, placement: r, middlewareData: p }) => {
var u;
if ((u = p.autoSize) != null && u.skip)
return {};
let a, l;
return r.startsWith("top") || r.startsWith("bottom") ? a = s.reference.width : l = s.reference.height, this.$_innerNode.style[i === "min" ? "minWidth" : i === "max" ? "maxWidth" : "width"] = a != null ? `${a}px` : null, this.$_innerNode.style[i === "min" ? "minHeight" : i === "max" ? "maxHeight" : "height"] = l != null ? `${l}px` : null, {
data: {
skip: !0
},
reset: {
rects: !0
}
};
}
});
}
(this.autoMaxSize || this.autoBoundaryMaxSize) && (this.$_innerNode.style.maxWidth = null, this.$_innerNode.style.maxHeight = null, e.middleware.push(Je({
boundary: this.boundary,
padding: this.overflowPadding,
apply: ({ availableWidth: i, availableHeight: s }) => {
this.$_innerNode.style.maxWidth = i != null ? `${i}px` : null, this.$_innerNode.style.maxHeight = s != null ? `${s}px` : null;
}
})));
const o = await Qe(this.$_referenceNode, this.$_popperNode, e);
Object.assign(this.result, {
x: o.x,
y: o.y,
placement: o.placement,
strategy: o.strategy,
arrow: {
...o.middlewareData.arrow,
...o.middlewareData.arrowOverflow
}
});
},
$_scheduleShow(e, t = !1) {
if (this.$_updateParentShownChildren(!0), this.$_hideInProgress = !1, clearTimeout(this.$_scheduleTimer), g && this.instantMove && g.instantMove && g !== this.parentPopper) {
g.$_applyHide(!0), this.$_applyShow(!0);
return;
}
t ? this.$_applyShow() : this.$_scheduleTimer = setTimeout(this.$_applyShow.bind(this), this.$_computeDelay("show"));
},
$_scheduleHide(e, t = !1) {
if (this.shownChildren.size > 0) {
this.pendingHide = !0;
return;
}
this.$_updateParentShownChildren(!1), this.$_hideInProgress = !0, clearTimeout(this.$_scheduleTimer), this.isShown && (g = this), t ? this.$_applyHide() : this.$_scheduleTimer = setTimeout(this.$_applyHide.bind(this), this.$_computeDelay("hide"));
},
$_computeDelay(e) {
const t = this.delay;
return parseInt(t && t[e] || t || 0);
},
async $_applyShow(e = !1) {
clearTimeout(this.$_disposeTimer), clearTimeout(this.$_scheduleTimer), this.skipTransition = e, !this.isShown && (this.$_ensureTeleport(), await G(), await this.$_computePosition(), await this.$_applyShowEffect(), this.positioningDisabled || this.$_registerEventListeners([
...ne(this.$_referenceNode),
...ne(this.$_popperNode)
], "scroll", () => {
this.$_computePosition();
}));
},
async $_applyShowEffect() {
if (this.$_hideInProgress)
return;
if (this.computeTransformOrigin) {
const t = this.$_referenceNode.getBoundingClientRect(), o = this.$_popperNode.querySelector(".v-popper__wrapper"), i = o.parentNode.getBoundingClientRect(), s = t.x + t.width / 2 - (i.left + o.offsetLeft), r = t.y + t.height / 2 - (i.top + o.offsetTop);
this.result.transformOrigin = `${s}px ${r}px`;
}
this.isShown = !0, this.$_applyAttrsToTarget({
"aria-describedby": this.popperId,
"data-popper-shown": ""
});
const e = this.showGroup;
if (e) {
let t;
for (let o = 0; o < d.length; o++)
t = d[o], t.showGroup !== e && (t.hide(), t.$emit("close-group"));
}
d.push(this), document.body.classList.add("v-popper--some-open");
for (const t of re(this.theme))
he(t).push(this), document.body.classList.add(`v-popper--some-open--${t}`);
this.$emit("apply-show"), this.classes.showFrom = !0, this.classes.showTo = !1, this.classes.hideFrom = !1, this.classes.hideTo = !1, await G(), this.classes.showFrom = !1, this.classes.showTo = !0, this.noAutoFocus || this.$_popperNode.focus();
},
async $_applyHide(e = !1) {
if (this.shownChildren.size > 0) {
this.pendingHide = !0, this.$_hideInProgress = !1;
return;
}
if (clearTimeout(this.$_scheduleTimer), !this.isShown)
return;
this.skipTransition = e, de(d, this), d.length === 0 && document.body.classList.remove("v-popper--some-open");
for (const o of re(this.theme)) {
const i = he(o);
de(i, this), i.length === 0 && document.body.classList.remove(`v-popper--some-open--${o}`);
}
g === this && (g = null), this.isShown = !1, this.$_applyAttrsToTarget({
"aria-describedby": void 0,
"data-popper-shown": void 0
}), clearTimeout(this.$_disposeTimer);
const t = this.disposeTimeout;
t !== null && (this.$_disposeTimer = setTimeout(() => {
this.$_popperNode && (this.$_detachPopperNode(), this.isMounted = !1);
}, t)), this.$_removeEventListeners("scroll"), this.$emit("apply-hide"), this.classes.showFrom = !1, this.classes.showTo = !1, this.classes.hideFrom = !0, this.classes.hideTo = !1, await G(), this.classes.hideFrom = !1, this.classes.hideTo = !0;
},
$_autoShowHide() {
this.shown ? this.show() : this.hide();
},
$_ensureTeleport() {
if (this.isDisposed)
return;
let e = this.container;
if (typeof e == "string" ? e = window.document.querySelector(e) : e === !1 && (e = this.$_targetNodes[0].parentNode), !e)
throw new Error("No container for popover: " + this.container);
e.appendChild(this.$_popperNode), this.isMounted = !0;
},
$_addEventListeners() {
const e = (o) => {
this.isShown && !this.$_hideInProgress || (o.usedByTooltip = !0, !this.$_preventShow && this.show({ event: o }));
};
this.$_registerTriggerListeners(this.$_targetNodes, pe, this.triggers, this.showTriggers, e), this.$_registerTriggerListeners([this.$_popperNode], pe, this.popperTriggers, this.popperShowTriggers, e);
const t = (o) => {
o.usedByTooltip || this.hide({ event: o });
};
this.$_registerTriggerListeners(this.$_targetNodes, ae, this.triggers, this.hideTriggers, t), this.$_registerTriggerListeners([this.$_popperNode], ae, this.popperTriggers, this.popperHideTriggers, t);
},
$_registerEventListeners(e, t, o) {
this.$_events.push({ targetNodes: e, eventType: t, handler: o }), e.forEach((i) => i.addEventListener(t, o, $ ? {
passive: !0
} : void 0));
},
$_registerTriggerListeners(e, t, o, i, s) {
let r = o;
i != null && (r = typeof i == "function" ? i(r) : i), r.forEach((p) => {
const a = t[p];
a && this.$_registerEventListeners(e, a, s);
});
},
$_removeEventListeners(e) {
const t = [];
this.$_events.forEach((o) => {
const { targetNodes: i, eventType: s, handler: r } = o;
!e || e === s ? i.forEach((p) => p.removeEventListener(s, r)) : t.push(o);
}), this.$_events = t;
},
$_refreshListeners() {
this.isDisposed || (this.$_removeEventListeners(), this.$_addEventListeners());
},
$_handleGlobalClose(e, t = !1) {
this.$_showFrameLocked || (this.hide({ event: e }), e.closePopover ? this.$emit("close-directive") : this.$emit("auto-hide"), t && (this.$_preventShow = !0, setTimeout(() => {
this.$_preventShow = !1;
}, 300)));
},
$_detachPopperNode() {
this.$_popperNode.parentNode && this.$_popperNode.parentNode.removeChild(this.$_popperNode);
},
$_swapTargetAttrs(e, t) {
for (const o of this.$_targetNodes) {
const i = o.getAttribute(e);
i && (o.removeAttribute(e), o.setAttribute(t, i));
}
},
$_applyAttrsToTarget(e) {
for (const t of this.$_targetNodes)
for (const o in e) {
const i = e[o];
i == null ? t.removeAttribute(o) : t.setAttribute(o, i);
}
},
$_updateParentShownChildren(e) {
let t = this.parentPopper;
for (; t; )
e ? t.shownChildren.add(this.randomId) : (t.shownChildren.delete(this.randomId), t.pendingHide && t.hide()), t = t.parentPopper;
},
$_isAimingPopper() {
const e = this.$_referenceNode.getBoundingClientRect();
if (y >= e.left && y <= e.right && _ >= e.top && _ <= e.bottom) {
const t = this.$_popperNode.getBoundingClientRect(), o = y - c, i = _ - m, r = t.left + t.width / 2 - c + (t.top + t.height / 2) - m + t.width + t.height, p = c + o * r, a = m + i * r;
return C(c, m, p, a, t.left, t.top, t.left, t.bottom) || // Left edge
C(c, m, p, a, t.left, t.top, t.right, t.top) || // Top edge
C(c, m, p, a, t.right, t.top, t.right, t.bottom) || // Right edge
C(c, m, p, a, t.left, t.bottom, t.right, t.bottom);
}
return !1;
}
},
render() {
return this.$slots.default(this.slotData);
}
});
if (typeof document < "u" && typeof window < "u") {
if (_e) {
const e = $ ? {
passive: !0,
capture: !0
} : !0;
document.addEventListener("touchstart", (t) => ue(t, !0), e), document.addEventListener("touchend", (t) => fe(t, !0), e);
} else
window.addEventListener("mousedown", (e) => ue(e, !1), !0), window.addEventListener("click", (e) => fe(e, !1), !0);
window.addEventListener("resize", tt);
}
function ue(e, t) {
if (h.autoHideOnMousedown)
Pe(e, t);
else
for (let o = 0; o < d.length; o++) {
const i = d[o];
try {
i.mouseDownContains = i.popperNode().contains(e.target);
} catch {
}
}
}
function fe(e, t) {
h.autoHideOnMousedown || Pe(e, t);
}
function Pe(e, t) {
const o = {};
for (let i = d.length - 1; i >= 0; i--) {
const s = d[i];
try {
const r = s.containsGlobalTarget = s.mouseDownContains || s.popperNode().contains(e.target);
s.pendingHide = !1, requestAnimationFrame(() => {
if (s.pendingHide = !1, !o[s.randomId] && ce(s, r, e)) {
if (s.$_handleGlobalClose(e, t), !e.closeAllPopover && e.closePopover && r) {
let a = s.parentPopper;
for (; a; )
o[a.randomId] = !0, a = a.parentPopper;
return;
}
let p = s.parentPopper;
for (; p && ce(p, p.containsGlobalTarget, e); ) {
p.$_handleGlobalClose(e, t);
p = p.parentPopper;
}
}
});
} catch {
}
}
}
function ce(e, t, o) {
return o.closeAllPopover || o.closePopover && t || et(e, o) && !t;
}
function et(e, t) {
if (typeof e.autoHide == "function") {
const o = e.autoHide(t);
return e.lastAutoHide = o, o;
}
return e.autoHide;
}
function tt() {
for (let e = 0; e < d.length; e++)
d[e].$_computePosition();
}
function Nt() {
for (let e = 0; e < d.length; e++)
d[e].hide();
}
let c = 0, m = 0, y = 0, _ = 0;
typeof window < "u" && window.addEventListener("mousemove", (e) => {
c = y, m = _, y = e.clientX, _ = e.clientY;
}, $ ? {
passive: !0
} : void 0);
function C(e, t, o, i, s, r, p, a) {
const l = ((p - s) * (t - r) - (a - r) * (e - s)) / ((a - r) * (o - e) - (p - s) * (i - t)), u = ((o - e) * (t - r) - (i - t) * (e - s)) / ((a - r) * (o - e) - (p - s) * (i - t));
return l >= 0 && l <= 1 && u >= 0 && u <= 1;
}
const ot = {
extends: Q()
}, B = (e, t) => {
const o = e.__vccOpts || e;
for (const [i, s] of t)
o[i] = s;
return o;
};
function it(e, t, o, i, s, r) {
return f(), T("div", {
ref: "reference",
class: J(["v-popper", {
"v-popper--shown": e.slotData.isShown
}])
}, [
A(e.$slots, "default", ke(Le(e.slotData)))
], 2);
}
const st = /* @__PURE__ */ B(ot, [["render", it]]);
function nt() {
var e = window.navigator.userAgent, t = e.indexOf("MSIE ");
if (t > 0)
return parseInt(e.substring(t + 5, e.indexOf(".", t)), 10);
var o = e.indexOf("Trident/");
if (o > 0) {
var i = e.indexOf("rv:");
return parseInt(e.substring(i + 3, e.indexOf(".", i)), 10);
}
var s = e.indexOf("Edge/");
return s > 0 ? parseInt(e.substring(s + 5, e.indexOf(".", s)), 10) : -1;
}
let z;
function X() {
X.init || (X.init = !0, z = nt() !== -1);
}
var E = {
name: "ResizeObserver",
props: {
emitOnMount: {
type: Boolean,
default: !1
},
ignoreWidth: {
type: Boolean,
default: !1
},
ignoreHeight: {
type: Boolean,
default: !1
}
},
emits: [
"notify"
],
mounted() {
X(), Fe(() => {
this._w = this.$el.offsetWidth, this._h = this.$el.offsetHeight, this.emitOnMount && this.emitSize();
});
const e = document.createElement("object");
this._resizeObject = e, e.setAttribute("aria-hidden", "true"), e.setAttribute("tabindex", -1), e.onload = this.addResizeHandlers, e.type = "text/html", z && this.$el.appendChild(e), e.data = "about:blank", z || this.$el.appendChild(e);
},
beforeUnmount() {
this.removeResizeHandlers();
},
methods: {
compareAndNotify() {
(!this.ignoreWidth && this._w !== this.$el.offsetWidth || !this.ignoreHeight && this._h !== this.$el.offsetHeight) && (this._w = this.$el.offsetWidth, this._h = this.$el.offsetHeight, this.emitSize());
},
emitSize() {
this.$emit("notify", {
width: this._w,
height: this._h
});
},
addResizeHandlers() {
this._resizeObject.contentDocument.defaultView.addEventListener("resize", this.compareAndNotify), this.compareAndNotify();
},
removeResizeHandlers() {
this._resizeObject && this._resizeObject.onload && (!z && this._resizeObject.contentDocument && this._resizeObject.contentDocument.defaultView.removeEventListener("resize", this.compareAndNotify), this.$el.removeChild(this._resizeObject), this._resizeObject.onload = null, this._resizeObject = null);
}
}
};
const rt = /* @__PURE__ */ Re("data-v-b329ee4c");
De("data-v-b329ee4c");
const pt = {
class: "resize-observer",
tabindex: "-1"
};
Ie();
const at = /* @__PURE__ */ rt((e, t, o, i, s, r) => (f(), M("div", pt)));
E.render = at;
E.__scopeId = "data-v-b329ee4c";
E.__file = "src/components/ResizeObserver.vue";
const Z = (e = "theme") => ({
computed: {
themeClass() {
return Ze(this[e]);
}
}
}), dt = O({
name: "VPopperContent",
components: {
ResizeObserver: E
},
mixins: [
Z()
],
props: {
popperId: String,
theme: String,
shown: Boolean,
mounted: Boolean,
skipTransition: Boolean,
autoHide: Boolean,
handleResize: Boolean,
classes: Object,
result: Object
},
emits: [
"hide",
"resize"
],
methods: {
toPx(e) {
return e != null && !isNaN(e) ? `${e}px` : null;
}
}
}), lt = ["id", "aria-hidden", "tabindex", "data-popper-placement"], ht = {
ref: "inner",
class: "v-popper__inner"
}, ut = /* @__PURE__ */ w("div", { class: "v-popper__arrow-outer" }, null, -1), ft = /* @__PURE__ */ w("div", { class: "v-popper__arrow-inner" }, null, -1), ct = [
ut,
ft
];
function mt(e, t, o, i, s, r) {
const p = P("ResizeObserver");
return f(), T("div", {
id: e.popperId,
ref: "popover",
class: J(["v-popper__popper", [
e.themeClass,
e.classes.popperClass,
{
"v-popper__popper--shown": e.shown,
"v-popper__popper--hidden": !e.shown,
"v-popper__popper--show-from": e.classes.showFrom,
"v-popper__popper--show-to": e.classes.showTo,
"v-popper__popper--hide-from": e.classes.hideFrom,
"v-popper__popper--hide-to": e.classes.hideTo,
"v-popper__popper--skip-transition": e.skipTransition,
"v-popper__popper--arrow-overflow": e.result && e.result.arrow.overflow,
"v-popper__popper--no-positioning": !e.result
}
]]),
style: W(e.result ? {
position: e.result.strategy,
transform: `translate3d(${Math.round(e.result.x)}px,${Math.round(e.result.y)}px,0)`
} : void 0),
"aria-hidden": e.shown ? "false" : "true",
tabindex: e.autoHide ? 0 : void 0,
"data-popper-placement": e.result ? e.result.placement : void 0,
onKeyup: t[2] || (t[2] = je((a) => e.autoHide && e.$emit("hide"), ["esc"]))
}, [
w("div", {
class: "v-popper__backdrop",
onClick: t[0] || (t[0] = (a) => e.autoHide && e.$emit("hide"))
}),
w("div", {
class: "v-popper__wrapper",
style: W(e.result ? {
transformOrigin: e.result.transformOrigin
} : void 0)
}, [
w("div", ht, [
e.mounted ? (f(), T(Ve, { key: 0 }, [
w("div", null, [
A(e.$slots, "default")
]),
e.handleResize ? (f(), M(p, {
key: 0,
onNotify: t[1] || (t[1] = (a) => e.$emit("resize", a))
})) : se("", !0)
], 64)) : se("", !0)
], 512),
w("div", {
ref: "arrow",
class: "v-popper__arrow-container",
style: W(e.result ? {
left: e.toPx(e.result.arrow.x),
top: e.toPx(e.result.arrow.y)
} : void 0)
}, ct, 4)
], 4)
], 46, lt);
}
const ee = /* @__PURE__ */ B(dt, [["render", mt]]), te = {
methods: {
show(...e) {
return this.$refs.popper.show(...e);
},
hide(...e) {
return this.$refs.popper.hide(...e);
},
dispose(...e) {
return this.$refs.popper.dispose(...e);
},
onResize(...e) {
return this.$refs.popper.onResize(...e);
}
}
};
let K = function() {
};
typeof window < "u" && (K = window.Element);
const gt = O({
name: "VPopperWrapper",
components: {
Popper: st,
PopperContent: ee
},
mixins: [
te,
Z("finalTheme")
],
props: {
theme: {
type: String,
default: null
},
referenceNode: {
type: Function,
default: null
},
shown: {
type: Boolean,
default: !1
},
showGroup: {
type: String,
default: null
},
// eslint-disable-next-line vue/require-prop-types
ariaId: {
default: null
},
disabled: {
type: Boolean,
default: void 0
},
positioningDisabled: {
type: Boolean,
default: void 0
},
placement: {
type: String,
default: void 0
},
delay: {
type: [String, Number, Object],
default: void 0
},
distance: {
type: [Number, String],
default: void 0
},
skidding: {
type: [Number, String],
default: void 0
},
triggers: {
type: Array,
default: void 0
},
showTriggers: {
type: [Array, Function],
default: void 0
},
hideTriggers: {
type: [Array, Function],
default: void 0
},
popperTriggers: {
type: Array,
default: void 0
},
popperShowTriggers: {
type: [Array, Function],
default: void 0
},
popperHideTriggers: {
type: [Array, Function],
default: void 0
},
container: {
type: [String, Object, K, Boolean],
default: void 0
},
boundary: {
type: [String, K],
default: void 0
},
strategy: {
type: String,
default: void 0
},
autoHide: {
type: [Boolean, Function],
default: void 0
},
handleResize: {
type: Boolean,
default: void 0
},
instantMove: {
type: Boolean,
default: void 0
},
eagerMount: {
type: Boolean,
default: void 0
},
popperClass: {
type: [String, Array, Object],
default: void 0
},
computeTransformOrigin: {
type: Boolean,
default: void 0
},
/**
* @deprecated
*/
autoMinSize: {
type: Boolean,
default: void 0
},
autoSize: {
type: [Boolean, String],
default: void 0
},
/**
* @deprecated
*/
autoMaxSize: {
type: Boolean,
default: void 0
},
autoBoundaryMaxSize: {
type: Boolean,
default: void 0
},
preventOverflow: {
type: Boolean,
default: void 0
},
overflowPadding: {
type: [Number, String],
default: void 0
},
arrowPadding: {
type: [Number, String],
default: void 0
},
arrowOverflow: {
type: Boolean,
default: void 0
},
flip: {
type: Boolean,
default: void 0
},
shift: {
type: Boolean,
default: void 0
},
shiftCrossAxis: {
type: Boolean,
default: void 0
},
noAutoFocus: {
type: Boolean,
default: void 0
},
disposeTimeout: {
type: Number,
default: void 0
}
},
emits: {
show: () => !0,
hide: () => !0,
"update:shown": (e) => !0,
"apply-show": () => !0,
"apply-hide": () => !0,
"close-group": () => !0,
"close-directive": () => !0,
"auto-hide": () => !0,
resize: () => !0
},
computed: {
finalTheme() {
return this.theme ?? this.$options.vPopperTheme;
}
},
methods: {
getTargetNodes() {
return Array.from(this.$el.children).filter((e) => e !== this.$refs.popperContent.$el);
}
}
});
function wt(e, t, o, i, s, r) {
const p = P("PopperContent"), a = P("Popper");
return f(), M(a, $e({ ref: "popper" }, e.$props, {
theme: e.finalTheme,
"target-nodes": e.getTargetNodes,
"popper-node": () => e.$refs.popperContent.$el,
class: [
e.themeClass
],
onShow: t[0] || (t[0] = () => e.$emit("show")),
onHide: t[1] || (t[1] = () => e.$emit("hide")),
"onUpdate:shown": t[2] || (t[2] = (l) => e.$emit("update:shown", l)),
onApplyShow: t[3] || (t[3] = () => e.$emit("apply-show")),
onApplyHide: t[4] || (t[4] = () => e.$emit("apply-hide")),
onCloseGroup: t[5] || (t[5] = () => e.$emit("close-group")),
onCloseDirective: t[6] || (t[6] = () => e.$emit("close-directive")),
onAutoHide: t[7] || (t[7] = () => e.$emit("auto-hide")),
onResize: t[8] || (t[8] = () => e.$emit("resize"))
}), {
default: N(({
popperId: l,
isShown: u,
shouldMountContent: L,
skipTransition: D,
autoHide: I,
show: F,
hide: v,
handleResize: R,
onResize: j,
classes: V,
result: Ee
}) => [
A(e.$slots, "default", {
shown: u,
show: F,
hide: v
}),
ve(p, {
ref: "popperContent",
"popper-id": l,
theme: e.finalTheme,
shown: u,
mounted: L,
"skip-transition": D,
"auto-hide": I,
"handle-resize": R,
classes: V,
result: Ee,
onHide: v,
onResize: j
}, {
default: N(() => [
A(e.$slots, "popper", {
shown: u,
hide: v
})
]),
_: 2
}, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
]),
_: 3
}, 16, ["theme", "target-nodes", "popper-node", "class"]);
}
const k = /* @__PURE__ */ B(gt, [["render", wt]]), Se = {
...k,
name: "VDropdown",
vPopperTheme: "dropdown"
}, be = {
...k,
name: "VMenu",
vPopperTheme: "menu"
}, Ce = {
...k,
name: "VTooltip",
vPopperTheme: "tooltip"
}, $t = O({
name: "VTooltipDirective",
components: {
Popper: Q(),
PopperContent: ee
},
mixins: [
te
],
inheritAttrs: !1,
props: {
theme: {
type: String,
default: "tooltip"
},
html: {
type: Boolean,
default: (e) => S(e.theme, "html")
},
content: {
type: [String, Number, Function],
default: null
},
loadingContent: {
type: String,
default: (e) => S(e.theme, "loadingContent")
},
targetNodes: {
type: Function,
required: !0
}
},
data() {
return {
asyncContent: null
};
},
computed: {
isContentAsync() {
return typeof this.content == "function";
},
loading() {
return this.isContentAsync && this.asyncContent == null;
},
finalContent() {
return this.isContentAsync ? this.loading ? this.loadingContent : this.asyncContent : this.content;
}
},
watch: {
content: {
handler() {
this.fetchContent(!0);
},
immediate: !0
},
async finalContent() {
await this.$nextTick(), this.$refs.popper.onResize();
}
},
created() {
this.$_fetchId = 0;
},
methods: {
fetchContent(e) {
if (typeof this.content == "function" && this.$_isShown && (e || !this.$_loading && this.asyncContent == null)) {
this.asyncContent = null, this.$_loading = !0;
const t = ++this.$_fetchId, o = this.content(this);
o.then ? o.then((i) => this.onResult(t, i)) : this.onResult(t, o);
}
},
onResult(e, t) {
e === this.$_fetchId && (this.$_loading = !1, this.asyncContent = t);
},
onShow() {
this.$_isShown = !0, this.fetchContent();
},
onHide() {
this.$_isShown = !1;
}
}
}), vt = ["innerHTML"], yt = ["textContent"];
function _t(e, t, o, i, s, r) {
const p = P("PopperContent"), a = P("Popper");
return f(), M(a, $e({ ref: "popper" }, e.$attrs, {
theme: e.theme,
"target-nodes": e.targetNodes,
"popper-node": () => e.$refs.popperContent.$el,
onApplyShow: e.onShow,
onApplyHide: e.onHide
}), {
default: N(({
popperId: l,
isShown: u,
shouldMountContent: L,
skipTransition: D,
autoHide: I,
hide: F,
handleResize: v,
onResize: R,
classes: j,
result: V
}) => [
ve(p, {
ref: "popperContent",
class: J({
"v-popper--tooltip-loading": e.loading
}),
"popper-id": l,
theme: e.theme,
shown: u,
mounted: L,
"skip-transition": D,
"auto-hide": I,
"handle-resize": v,
classes: j,
result: V,
onHide: F,
onResize: R
}, {
default: N(() => [
e.html ? (f(), T("div", {
key: 0,
innerHTML: e.finalContent
}, null, 8, vt)) : (f(), T("div", {
key: 1,
textContent: We(e.finalContent)
}, null, 8, yt))
]),
_: 2
}, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
]),
_: 1
}, 16, ["theme", "target-nodes", "popper-node", "onApplyShow", "onApplyHide"]);
}
const ze = /* @__PURE__ */ B($t, [["render", _t]]), Ae = "v-popper--has-tooltip";
function Tt(e, t) {
let o = e.placement;
if (!o && t)
for (const i of Te)
t[i] && (o = i);
return o || (o = S(e.theme || "tooltip", "placement")), o;
}
function Ne(e, t, o) {
let i;
const s = typeof t;
return s === "string" ? i = { content: t } : t && s === "object" ? i = t : i = { content: !1 }, i.placement = Tt(i, o), i.targetNodes = () => [e], i.referenceNode = () => e, i;
}
let x, b, Pt = 0;
function St() {
if (x)
return;
b = U([]), x = Ge({
name: "VTooltipDirectiveApp",
setup() {
return {
directives: b
};
},
render() {
return this.directives.map((t) => qe(ze, {
...t.options,
shown: t.shown || t.options.shown,
key: t.id
}));
},
devtools: {
hide: !0
}
});
const e = document.createElement("div");
document.body.appendChild(e), x.mount(e);
}
function bt(e, t, o) {
St();
const i = U(Ne(e, t, o)), s = U(!1), r = {
id: Pt++,
options: i,
shown: s
};
return b.value.push(r), e.classList && e.classList.add(Ae), e.$_popper = {
options: i,
item: r,
show() {
s.value = !0;
},
hide() {
s.value = !1;
}
};
}
function He(e) {
if (e.$_popper) {
const t = b.value.indexOf(e.$_popper.item);
t !== -1 && b.value.splice(t, 1), delete e.$_popper, delete e.$_popperOldShown, delete e.$_popperMountTarget;
}
e.classList && e.classList.remove(Ae);
}
function me(e, { value: t, modifiers: o }) {
const i = Ne(e, t, o);
if (!i.content || S(i.theme || "tooltip", "disabled"))
He(e);
else {
let s;
e.$_popper ? (s = e.$_popper, s.options.value = i) : s = bt(e, t, o), typeof t.shown < "u" && t.shown !== e.$_popperOldShown && (e.$_popperOldShown = t.shown, t.shown ? s.show() : s.hide());
}
}
const oe = {
beforeMount: me,
updated: me,
beforeUnmount(e) {
He(e);
}
};
function ge(e) {
e.addEventListener("mousedown", H), e.addEventListener("click", H), e.addEventListener("touchstart", Oe, $ ? {
passive: !0
} : !1);
}
function we(e) {
e.removeEventListener("mousedown", H), e.removeEventListener("click", H), e.removeEventListener("touchstart", Oe), e.removeEventListener("touchend", Me), e.removeEventListener("touchcancel", Be);
}
function H(e) {
const t = e.currentTarget;
e.closePopover = !t.$_vclosepopover_touch, e.closeAllPopover = t.$_closePopoverModifiers && !!t.$_closePopoverModifiers.all;
}
function Oe(e) {
if (e.changedTouches.length === 1) {
const t = e.currentTarget;
t.$_vclosepopover_touch = !0;
const o = e.changedTouches[0];
t.$_vclosepopover_touchPoint = o, t.addEventListener("touchend", Me), t.addEventListener("touchcancel", Be);
}
}
function Me(e) {
const t = e.currentTarget;
if (t.$_vclosepopover_touch = !1, e.changedTouches.length === 1) {
const o = e.changedTouches[0], i = t.$_vclosepopover_touchPoint;
e.closePopover = Math.abs(o.screenY - i.screenY) < 20 && Math.abs(o.screenX - i.screenX) < 20, e.closeAllPopover = t.$_closePopoverModifiers && !!t.$_closePopoverModifiers.all;
}
}
function Be(e) {
const t = e.currentTarget;
t.$_vclosepopover_touch = !1;
}
const ie = {
beforeMount(e, { value: t, modifiers: o }) {
e.$_closePopoverModifiers = o, (typeof t > "u" || t) && ge(e);
},
updated(e, { value: t, oldValue: o, modifiers: i }) {
e.$_closePopoverModifiers = i, t !== o && (typeof t > "u" || t ? ge(e) : we(e));
},
beforeUnmount(e) {
we(e);
}
}, Ht = h, Ot = oe, Mt = oe, Bt = ie, Et = ie, kt = Se, Lt = be, Dt = Q, It = ee, Ft = te, Rt = k, jt = Z, Vt = Ce, Wt = ze;
function Ct(e, t = {}) {
e.$_vTooltipInstalled || (e.$_vTooltipInstalled = !0, ye(h, t), e.directive("tooltip", oe), e.directive("close-popper", ie), e.component("VTooltip", Ce), e.component("VDropdown", Se), e.component("VMenu", be));
}
const Gt = {
// eslint-disable-next-line no-undef
version: "5.2.2",
install: Ct,
options: h
};
export {
kt as Dropdown,
ae as HIDE_EVENT_MAP,
Lt as Menu,
Dt as Popper,
It as PopperContent,
Ft as PopperMethods,
Rt as PopperWrapper,
pe as SHOW_EVENT_MAP,
jt as ThemeClass,
Vt as Tooltip,
Wt as TooltipDirective,
Bt as VClosePopper,
Ot as VTooltip,
bt as createTooltip,
Gt as default,
He as destroyTooltip,
Nt as hideAllPoppers,
Ct as install,
Ht as options,
Te as placements,
tt as recomputeAllPoppers,
Et as vClosePopper,
Mt as vTooltip
};