bootstrap-vue-next
Version:
BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.
1,964 lines • 68.8 kB
JavaScript
import { computed, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly, unref, defineComponent, mergeModels, useModel, watchEffect, toRef, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, renderSlot, createVNode, withCtx, mergeProps, normalizeClass, normalizeStyle, createTextVNode, toDisplayString, createCommentVNode, render, h as h$1 } from "vue";
import { p as useMouseInElement, d as onClickOutside } from "./index-DngH9Pjm.mjs";
import { u as useDefaults } from "./useDefaults-BYx9NNxn.mjs";
import { u as useId } from "./useId-BrAgQfKM.mjs";
import { a as BvTriggerableEvent } from "./classes-IC0yVJlq.mjs";
import { g as getTransitionDelay } from "./dom-B-SQyhbA.mjs";
import { g as getElement } from "./getElement-D_JPfLJS.mjs";
import { I as IS_BROWSER } from "./event-aFP-C_yt.mjs";
import { _ as _sfc_main$1 } from "./ConditionalTeleport.vue_vue_type_script_lang-CBHk9gJ3.mjs";
import { u as useToNumber } from "./index-DlGgXMQF.mjs";
const sides = ["top", "right", "bottom", "left"];
const alignments = ["start", "end"];
const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
const min = Math.min;
const max = Math.max;
const oppositeSideMap = {
left: "right",
right: "left",
bottom: "top",
top: "bottom"
};
const oppositeAlignmentMap = {
start: "end",
end: "start"
};
function clamp(start, value, end) {
return max(start, min(value, end));
}
function evaluate(value, param) {
return typeof value === "function" ? value(param) : value;
}
function getSide(placement) {
return placement.split("-")[0];
}
function getAlignment(placement) {
return placement.split("-")[1];
}
function getOppositeAxis(axis) {
return axis === "x" ? "y" : "x";
}
function getAxisLength(axis) {
return axis === "y" ? "height" : "width";
}
function getSideAxis(placement) {
return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
}
function getSideList(side, isStart, rtl) {
const lr = ["left", "right"];
const rl = ["right", "left"];
const tb = ["top", "bottom"];
const bt = ["bottom", "top"];
switch (side) {
case "top":
case "bottom":
if (rtl) return isStart ? rl : lr;
return isStart ? lr : rl;
case "left":
case "right":
return isStart ? tb : bt;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === "start", rtl);
if (alignment) {
list = list.map((side) => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement(placement) {
return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== "number" ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect(rect) {
const {
x: x2,
y: y2,
width,
height
} = rect;
return {
width,
height,
top: y2,
left: x2,
right: x2 + width,
bottom: y2 + height,
x: x2,
y: y2
};
}
function computeCoordsFromPlacement(_ref, placement, rtl) {
let {
reference,
floating
} = _ref;
const sideAxis = getSideAxis(placement);
const alignmentAxis = getAlignmentAxis(placement);
const alignLength = getAxisLength(alignmentAxis);
const side = getSide(placement);
const isVertical = sideAxis === "y";
const commonX = reference.x + reference.width / 2 - floating.width / 2;
const commonY = reference.y + reference.height / 2 - floating.height / 2;
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
let coords;
switch (side) {
case "top":
coords = {
x: commonX,
y: reference.y - floating.height
};
break;
case "bottom":
coords = {
x: commonX,
y: reference.y + reference.height
};
break;
case "right":
coords = {
x: reference.x + reference.width,
y: commonY
};
break;
case "left":
coords = {
x: reference.x - floating.width,
y: commonY
};
break;
default:
coords = {
x: reference.x,
y: reference.y
};
}
switch (getAlignment(placement)) {
case "start":
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
break;
case "end":
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
break;
}
return coords;
}
const computePosition = async (reference, floating, config) => {
const {
placement = "bottom",
strategy = "absolute",
middleware = [],
platform
} = config;
const validMiddleware = middleware.filter(Boolean);
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
let rects = await platform.getElementRects({
reference,
floating,
strategy
});
let {
x: x2,
y: y2
} = computeCoordsFromPlacement(rects, placement, rtl);
let statefulPlacement = placement;
let middlewareData = {};
let resetCount = 0;
for (let i2 = 0; i2 < validMiddleware.length; i2++) {
const {
name,
fn
} = validMiddleware[i2];
const {
x: nextX,
y: nextY,
data,
reset
} = await fn({
x: x2,
y: y2,
initialPlacement: placement,
placement: statefulPlacement,
strategy,
middlewareData,
rects,
platform,
elements: {
reference,
floating
}
});
x2 = nextX != null ? nextX : x2;
y2 = nextY != null ? nextY : y2;
middlewareData = {
...middlewareData,
[name]: {
...middlewareData[name],
...data
}
};
if (reset && resetCount <= 50) {
resetCount++;
if (typeof reset === "object") {
if (reset.placement) {
statefulPlacement = reset.placement;
}
if (reset.rects) {
rects = reset.rects === true ? await platform.getElementRects({
reference,
floating,
strategy
}) : reset.rects;
}
({
x: x2,
y: y2
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
}
i2 = -1;
}
}
return {
x: x2,
y: y2,
placement: statefulPlacement,
strategy,
middlewareData
};
};
async function detectOverflow(state, options) {
var _await$platform$isEle;
if (options === void 0) {
options = {};
}
const {
x: x2,
y: y2,
platform,
rects,
elements,
strategy
} = state;
const {
boundary = "clippingAncestors",
rootBoundary = "viewport",
elementContext = "floating",
altBoundary = false,
padding = 0
} = evaluate(options, state);
const paddingObject = getPaddingObject(padding);
const altContext = elementContext === "floating" ? "reference" : "floating";
const element = elements[altBoundary ? altContext : elementContext];
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating)),
boundary,
rootBoundary,
strategy
}));
const rect = elementContext === "floating" ? {
x: x2,
y: y2,
width: rects.floating.width,
height: rects.floating.height
} : rects.reference;
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
const offsetScale = await (platform.isElement == null ? void 0 : platform.isElement(offsetParent)) ? await (platform.getScale == null ? void 0 : platform.getScale(offsetParent)) || {
x: 1,
y: 1
} : {
x: 1,
y: 1
};
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
elements,
rect,
offsetParent,
strategy
}) : rect);
return {
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
};
}
const arrow$1 = (options) => ({
name: "arrow",
options,
async fn(state) {
const {
x: x2,
y: y2,
placement,
rects,
platform,
elements,
middlewareData
} = state;
const {
element,
padding = 0
} = evaluate(options, state) || {};
if (element == null) {
return {};
}
const paddingObject = getPaddingObject(padding);
const coords = {
x: x2,
y: y2
};
const axis = getAlignmentAxis(placement);
const length = getAxisLength(axis);
const arrowDimensions = await platform.getDimensions(element);
const isYAxis = axis === "y";
const minProp = isYAxis ? "top" : "left";
const maxProp = isYAxis ? "bottom" : "right";
const clientProp = isYAxis ? "clientHeight" : "clientWidth";
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
const startDiff = coords[axis] - rects.reference[axis];
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
if (!clientSize || !await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent))) {
clientSize = elements.floating[clientProp] || rects.floating[length];
}
const centerToReference = endDiff / 2 - startDiff / 2;
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
const min$1 = minPadding;
const max2 = clientSize - arrowDimensions[length] - maxPadding;
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
const offset2 = clamp(min$1, center, max2);
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
return {
[axis]: coords[axis] + alignmentOffset,
data: {
[axis]: offset2,
centerOffset: center - offset2 - alignmentOffset,
...shouldAddOffset && {
alignmentOffset
}
},
reset: shouldAddOffset
};
}
});
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter((placement) => getAlignment(placement) === alignment), ...allowedPlacements.filter((placement) => getAlignment(placement) !== alignment)] : allowedPlacements.filter((placement) => getSide(placement) === placement);
return allowedPlacementsSortedByAlignment.filter((placement) => {
if (alignment) {
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
}
return true;
});
}
const autoPlacement = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "autoPlacement",
options,
async fn(state) {
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
const {
rects,
middlewareData,
placement,
platform,
elements
} = state;
const {
crossAxis = false,
alignment,
allowedPlacements = placements,
autoAlignment = true,
...detectOverflowOptions
} = evaluate(options, state);
const placements$1 = alignment !== void 0 || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
const overflow = await detectOverflow(state, detectOverflowOptions);
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
const currentPlacement = placements$1[currentIndex];
if (currentPlacement == null) {
return {};
}
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
if (placement !== currentPlacement) {
return {
reset: {
placement: placements$1[0]
}
};
}
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
const allOverflows = [...((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || [], {
placement: currentPlacement,
overflows: currentOverflows
}];
const nextPlacement = placements$1[currentIndex + 1];
if (nextPlacement) {
return {
data: {
index: currentIndex + 1,
overflows: allOverflows
},
reset: {
placement: nextPlacement
}
};
}
const placementsSortedByMostSpace = allOverflows.map((d2) => {
const alignment2 = getAlignment(d2.placement);
return [d2.placement, alignment2 && crossAxis ? (
// Check along the mainAxis and main crossAxis side.
d2.overflows.slice(0, 2).reduce((acc, v2) => acc + v2, 0)
) : (
// Check only the mainAxis.
d2.overflows[0]
), d2.overflows];
}).sort((a2, b2) => a2[1] - b2[1]);
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter((d2) => d2[2].slice(
0,
// Aligned placements should not check their opposite crossAxis
// side.
getAlignment(d2[0]) ? 2 : 3
).every((v2) => v2 <= 0));
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
if (resetPlacement !== placement) {
return {
data: {
index: currentIndex + 1,
overflows: allOverflows
},
reset: {
placement: resetPlacement
}
};
}
return {};
}
};
};
const flip = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "flip",
options,
async fn(state) {
var _middlewareData$arrow, _middlewareData$flip;
const {
placement,
middlewareData,
rects,
initialPlacement,
platform,
elements
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = true,
fallbackPlacements: specifiedFallbackPlacements,
fallbackStrategy = "bestFit",
fallbackAxisSideDirection = "none",
flipAlignment = true,
...detectOverflowOptions
} = evaluate(options, state);
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
const side = getSide(placement);
const initialSideAxis = getSideAxis(initialPlacement);
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
}
const placements2 = [initialPlacement, ...fallbackPlacements];
const overflow = await detectOverflow(state, detectOverflowOptions);
const overflows = [];
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
if (checkMainAxis) {
overflows.push(overflow[side]);
}
if (checkCrossAxis) {
const sides2 = getAlignmentSides(placement, rects, rtl);
overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
}
overflowsData = [...overflowsData, {
placement,
overflows
}];
if (!overflows.every((side2) => side2 <= 0)) {
var _middlewareData$flip2, _overflowsData$filter;
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
const nextPlacement = placements2[nextIndex];
if (nextPlacement) {
return {
data: {
index: nextIndex,
overflows: overflowsData
},
reset: {
placement: nextPlacement
}
};
}
let resetPlacement = (_overflowsData$filter = overflowsData.filter((d2) => d2.overflows[0] <= 0).sort((a2, b2) => a2.overflows[1] - b2.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
if (!resetPlacement) {
switch (fallbackStrategy) {
case "bestFit": {
var _overflowsData$filter2;
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d2) => {
if (hasFallbackAxisSideDirection) {
const currentSideAxis = getSideAxis(d2.placement);
return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
// reading directions favoring greater width.
currentSideAxis === "y";
}
return true;
}).map((d2) => [d2.placement, d2.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a2, b2) => a2[1] - b2[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
if (placement2) {
resetPlacement = placement2;
}
break;
}
case "initialPlacement":
resetPlacement = initialPlacement;
break;
}
}
if (placement !== resetPlacement) {
return {
reset: {
placement: resetPlacement
}
};
}
}
return {};
}
};
};
function getSideOffsets(overflow, rect) {
return {
top: overflow.top - rect.height,
right: overflow.right - rect.width,
bottom: overflow.bottom - rect.height,
left: overflow.left - rect.width
};
}
function isAnySideFullyClipped(overflow) {
return sides.some((side) => overflow[side] >= 0);
}
const hide = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "hide",
options,
async fn(state) {
const {
rects
} = state;
const {
strategy = "referenceHidden",
...detectOverflowOptions
} = evaluate(options, state);
switch (strategy) {
case "referenceHidden": {
const overflow = await detectOverflow(state, {
...detectOverflowOptions,
elementContext: "reference"
});
const offsets = getSideOffsets(overflow, rects.reference);
return {
data: {
referenceHiddenOffsets: offsets,
referenceHidden: isAnySideFullyClipped(offsets)
}
};
}
case "escaped": {
const overflow = await detectOverflow(state, {
...detectOverflowOptions,
altBoundary: true
});
const offsets = getSideOffsets(overflow, rects.floating);
return {
data: {
escapedOffsets: offsets,
escaped: isAnySideFullyClipped(offsets)
}
};
}
default: {
return {};
}
}
}
};
};
function getBoundingRect(rects) {
const minX = min(...rects.map((rect) => rect.left));
const minY = min(...rects.map((rect) => rect.top));
const maxX = max(...rects.map((rect) => rect.right));
const maxY = max(...rects.map((rect) => rect.bottom));
return {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
};
}
function getRectsByLine(rects) {
const sortedRects = rects.slice().sort((a2, b2) => a2.y - b2.y);
const groups = [];
let prevRect = null;
for (let i2 = 0; i2 < sortedRects.length; i2++) {
const rect = sortedRects[i2];
if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
groups.push([rect]);
} else {
groups[groups.length - 1].push(rect);
}
prevRect = rect;
}
return groups.map((rect) => rectToClientRect(getBoundingRect(rect)));
}
const inline = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "inline",
options,
async fn(state) {
const {
placement,
elements,
rects,
platform,
strategy
} = state;
const {
padding = 2,
x: x2,
y: y2
} = evaluate(options, state);
const nativeClientRects = Array.from(await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference)) || []);
const clientRects = getRectsByLine(nativeClientRects);
const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
const paddingObject = getPaddingObject(padding);
function getBoundingClientRect() {
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x2 != null && y2 != null) {
return clientRects.find((rect) => x2 > rect.left - paddingObject.left && x2 < rect.right + paddingObject.right && y2 > rect.top - paddingObject.top && y2 < rect.bottom + paddingObject.bottom) || fallback;
}
if (clientRects.length >= 2) {
if (getSideAxis(placement) === "y") {
const firstRect = clientRects[0];
const lastRect = clientRects[clientRects.length - 1];
const isTop = getSide(placement) === "top";
const top2 = firstRect.top;
const bottom2 = lastRect.bottom;
const left2 = isTop ? firstRect.left : lastRect.left;
const right2 = isTop ? firstRect.right : lastRect.right;
const width2 = right2 - left2;
const height2 = bottom2 - top2;
return {
top: top2,
bottom: bottom2,
left: left2,
right: right2,
width: width2,
height: height2,
x: left2,
y: top2
};
}
const isLeftSide = getSide(placement) === "left";
const maxRight = max(...clientRects.map((rect) => rect.right));
const minLeft = min(...clientRects.map((rect) => rect.left));
const measureRects = clientRects.filter((rect) => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
const top = measureRects[0].top;
const bottom = measureRects[measureRects.length - 1].bottom;
const left = minLeft;
const right = maxRight;
const width = right - left;
const height = bottom - top;
return {
top,
bottom,
left,
right,
width,
height,
x: left,
y: top
};
}
return fallback;
}
const resetRects = await platform.getElementRects({
reference: {
getBoundingClientRect
},
floating: elements.floating,
strategy
});
if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
return {
reset: {
rects: resetRects
}
};
}
return {};
}
};
};
async function convertValueToCoords(state, options) {
const {
placement,
platform,
elements
} = state;
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
const side = getSide(placement);
const alignment = getAlignment(placement);
const isVertical = getSideAxis(placement) === "y";
const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
const crossAxisMulti = rtl && isVertical ? -1 : 1;
const rawValue = evaluate(options, state);
let {
mainAxis,
crossAxis,
alignmentAxis
} = typeof rawValue === "number" ? {
mainAxis: rawValue,
crossAxis: 0,
alignmentAxis: null
} : {
mainAxis: 0,
crossAxis: 0,
alignmentAxis: null,
...rawValue
};
if (alignment && typeof alignmentAxis === "number") {
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
}
return isVertical ? {
x: crossAxis * crossAxisMulti,
y: mainAxis * mainAxisMulti
} : {
x: mainAxis * mainAxisMulti,
y: crossAxis * crossAxisMulti
};
}
const offset = function(options) {
if (options === void 0) {
options = 0;
}
return {
name: "offset",
options,
async fn(state) {
var _middlewareData$offse, _middlewareData$arrow;
const {
x: x2,
y: y2,
placement,
middlewareData
} = state;
const diffCoords = await convertValueToCoords(state, options);
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
return {
x: x2 + diffCoords.x,
y: y2 + diffCoords.y,
data: {
...diffCoords,
placement
}
};
}
};
};
const shift = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "shift",
options,
async fn(state) {
const {
x: x2,
y: y2,
placement
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = false,
limiter = {
fn: (_ref) => {
let {
x: x3,
y: y3
} = _ref;
return {
x: x3,
y: y3
};
}
},
...detectOverflowOptions
} = evaluate(options, state);
const coords = {
x: x2,
y: y2
};
const overflow = await detectOverflow(state, detectOverflowOptions);
const crossAxis = getSideAxis(getSide(placement));
const mainAxis = getOppositeAxis(crossAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
if (checkMainAxis) {
const minSide = mainAxis === "y" ? "top" : "left";
const maxSide = mainAxis === "y" ? "bottom" : "right";
const min2 = mainAxisCoord + overflow[minSide];
const max2 = mainAxisCoord - overflow[maxSide];
mainAxisCoord = clamp(min2, mainAxisCoord, max2);
}
if (checkCrossAxis) {
const minSide = crossAxis === "y" ? "top" : "left";
const maxSide = crossAxis === "y" ? "bottom" : "right";
const min2 = crossAxisCoord + overflow[minSide];
const max2 = crossAxisCoord - overflow[maxSide];
crossAxisCoord = clamp(min2, crossAxisCoord, max2);
}
const limitedCoords = limiter.fn({
...state,
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord
});
return {
...limitedCoords,
data: {
x: limitedCoords.x - x2,
y: limitedCoords.y - y2
}
};
}
};
};
const size = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "size",
options,
async fn(state) {
const {
placement,
rects,
platform,
elements
} = state;
const {
apply = () => {
},
...detectOverflowOptions
} = evaluate(options, state);
const overflow = await detectOverflow(state, detectOverflowOptions);
const side = getSide(placement);
const alignment = getAlignment(placement);
const isYAxis = getSideAxis(placement) === "y";
const {
width,
height
} = rects.floating;
let heightSide;
let widthSide;
if (side === "top" || side === "bottom") {
heightSide = side;
widthSide = alignment === (await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
} else {
widthSide = side;
heightSide = alignment === "end" ? "top" : "bottom";
}
const maximumClippingHeight = height - overflow.top - overflow.bottom;
const maximumClippingWidth = width - overflow.left - overflow.right;
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
const noShift = !state.middlewareData.shift;
let availableHeight = overflowAvailableHeight;
let availableWidth = overflowAvailableWidth;
if (isYAxis) {
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
} else {
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
}
if (noShift && !alignment) {
const xMin = max(overflow.left, 0);
const xMax = max(overflow.right, 0);
const yMin = max(overflow.top, 0);
const yMax = max(overflow.bottom, 0);
if (isYAxis) {
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
} else {
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
}
}
await apply({
...state,
availableWidth,
availableHeight
});
const nextDimensions = await platform.getDimensions(elements.floating);
if (width !== nextDimensions.width || height !== nextDimensions.height) {
return {
reset: {
rects: true
}
};
}
return {};
}
};
};
function n(t) {
var e;
return (null == (e = t.ownerDocument) ? void 0 : e.defaultView) || window;
}
function o(t) {
return n(t).getComputedStyle(t);
}
const i = Math.min, r = Math.max, l = Math.round;
function c(t) {
const e = o(t);
let n2 = parseFloat(e.width), i2 = parseFloat(e.height);
const r2 = t.offsetWidth, c2 = t.offsetHeight, s2 = l(n2) !== r2 || l(i2) !== c2;
return s2 && (n2 = r2, i2 = c2), { width: n2, height: i2, fallback: s2 };
}
function s(t) {
return h(t) ? (t.nodeName || "").toLowerCase() : "";
}
let f;
function u() {
if (f) return f;
const t = navigator.userAgentData;
return t && Array.isArray(t.brands) ? (f = t.brands.map((t2) => t2.brand + "/" + t2.version).join(" "), f) : navigator.userAgent;
}
function a(t) {
return t instanceof n(t).HTMLElement;
}
function d(t) {
return t instanceof n(t).Element;
}
function h(t) {
return t instanceof n(t).Node;
}
function p(t) {
if ("undefined" == typeof ShadowRoot) return false;
return t instanceof n(t).ShadowRoot || t instanceof ShadowRoot;
}
function g(t) {
const { overflow: e, overflowX: n2, overflowY: i2, display: r2 } = o(t);
return /auto|scroll|overlay|hidden|clip/.test(e + i2 + n2) && !["inline", "contents"].includes(r2);
}
function m(t) {
return ["table", "td", "th"].includes(s(t));
}
function y(t) {
const e = /firefox/i.test(u()), n2 = o(t), i2 = n2.backdropFilter || n2.WebkitBackdropFilter;
return "none" !== n2.transform || "none" !== n2.perspective || !!i2 && "none" !== i2 || e && "filter" === n2.willChange || e && !!n2.filter && "none" !== n2.filter || ["transform", "perspective"].some((t2) => n2.willChange.includes(t2)) || ["paint", "layout", "strict", "content"].some((t2) => {
const e2 = n2.contain;
return null != e2 && e2.includes(t2);
});
}
function x() {
return !/^((?!chrome|android).)*safari/i.test(u());
}
function w(t) {
return ["html", "body", "#document"].includes(s(t));
}
function v(t) {
return d(t) ? t : t.contextElement;
}
const b = { x: 1, y: 1 };
function L(t) {
const e = v(t);
if (!a(e)) return b;
const n2 = e.getBoundingClientRect(), { width: o2, height: i2, fallback: r2 } = c(e);
let s2 = (r2 ? l(n2.width) : n2.width) / o2, f2 = (r2 ? l(n2.height) : n2.height) / i2;
return s2 && Number.isFinite(s2) || (s2 = 1), f2 && Number.isFinite(f2) || (f2 = 1), { x: s2, y: f2 };
}
function E(t, e, o2, i2) {
var r2, l2;
void 0 === e && (e = false), void 0 === o2 && (o2 = false);
const c2 = t.getBoundingClientRect(), s2 = v(t);
let f2 = b;
e && (i2 ? d(i2) && (f2 = L(i2)) : f2 = L(t));
const u2 = s2 ? n(s2) : window, a2 = !x() && o2;
let h2 = (c2.left + (a2 && (null == (r2 = u2.visualViewport) ? void 0 : r2.offsetLeft) || 0)) / f2.x, p2 = (c2.top + (a2 && (null == (l2 = u2.visualViewport) ? void 0 : l2.offsetTop) || 0)) / f2.y, g2 = c2.width / f2.x, m2 = c2.height / f2.y;
if (s2) {
const t2 = n(s2), e2 = i2 && d(i2) ? n(i2) : i2;
let o3 = t2.frameElement;
for (; o3 && i2 && e2 !== t2; ) {
const t3 = L(o3), e3 = o3.getBoundingClientRect(), i3 = getComputedStyle(o3);
e3.x += (o3.clientLeft + parseFloat(i3.paddingLeft)) * t3.x, e3.y += (o3.clientTop + parseFloat(i3.paddingTop)) * t3.y, h2 *= t3.x, p2 *= t3.y, g2 *= t3.x, m2 *= t3.y, h2 += e3.x, p2 += e3.y, o3 = n(o3).frameElement;
}
}
return { width: g2, height: m2, top: p2, right: h2 + g2, bottom: p2 + m2, left: h2, x: h2, y: p2 };
}
function R(t) {
return ((h(t) ? t.ownerDocument : t.document) || window.document).documentElement;
}
function T(t) {
return d(t) ? { scrollLeft: t.scrollLeft, scrollTop: t.scrollTop } : { scrollLeft: t.pageXOffset, scrollTop: t.pageYOffset };
}
function C(t) {
return E(R(t)).left + T(t).scrollLeft;
}
function F(t) {
if ("html" === s(t)) return t;
const e = t.assignedSlot || t.parentNode || p(t) && t.host || R(t);
return p(e) ? e.host : e;
}
function W(t) {
const e = F(t);
return w(e) ? e.ownerDocument.body : a(e) && g(e) ? e : W(e);
}
function D(t, e) {
var o2;
void 0 === e && (e = []);
const i2 = W(t), r2 = i2 === (null == (o2 = t.ownerDocument) ? void 0 : o2.body), l2 = n(i2);
return r2 ? e.concat(l2, l2.visualViewport || [], g(i2) ? i2 : []) : e.concat(i2, D(i2));
}
function S(e, i2, l2) {
return "viewport" === i2 ? rectToClientRect(function(t, e2) {
const o2 = n(t), i3 = R(t), r2 = o2.visualViewport;
let l3 = i3.clientWidth, c2 = i3.clientHeight, s2 = 0, f2 = 0;
if (r2) {
l3 = r2.width, c2 = r2.height;
const t2 = x();
(t2 || !t2 && "fixed" === e2) && (s2 = r2.offsetLeft, f2 = r2.offsetTop);
}
return { width: l3, height: c2, x: s2, y: f2 };
}(e, l2)) : d(i2) ? rectToClientRect(function(t, e2) {
const n2 = E(t, true, "fixed" === e2), o2 = n2.top + t.clientTop, i3 = n2.left + t.clientLeft, r2 = a(t) ? L(t) : { x: 1, y: 1 };
return { width: t.clientWidth * r2.x, height: t.clientHeight * r2.y, x: i3 * r2.x, y: o2 * r2.y };
}(i2, l2)) : rectToClientRect(function(t) {
const e2 = R(t), n2 = T(t), i3 = t.ownerDocument.body, l3 = r(e2.scrollWidth, e2.clientWidth, i3.scrollWidth, i3.clientWidth), c2 = r(e2.scrollHeight, e2.clientHeight, i3.scrollHeight, i3.clientHeight);
let s2 = -n2.scrollLeft + C(t);
const f2 = -n2.scrollTop;
return "rtl" === o(i3).direction && (s2 += r(e2.clientWidth, i3.clientWidth) - l3), { width: l3, height: c2, x: s2, y: f2 };
}(R(e)));
}
function A(t) {
return a(t) && "fixed" !== o(t).position ? t.offsetParent : null;
}
function H(t) {
const e = n(t);
let i2 = A(t);
for (; i2 && m(i2) && "static" === o(i2).position; ) i2 = A(i2);
return i2 && ("html" === s(i2) || "body" === s(i2) && "static" === o(i2).position && !y(i2)) ? e : i2 || function(t2) {
let e2 = F(t2);
for (; a(e2) && !w(e2); ) {
if (y(e2)) return e2;
e2 = F(e2);
}
return null;
}(t) || e;
}
function O(t, e, n2) {
const o2 = a(e), i2 = R(e), r2 = E(t, true, "fixed" === n2, e);
let l2 = { scrollLeft: 0, scrollTop: 0 };
const c2 = { x: 0, y: 0 };
if (o2 || !o2 && "fixed" !== n2) if (("body" !== s(e) || g(i2)) && (l2 = T(e)), a(e)) {
const t2 = E(e, true);
c2.x = t2.x + e.clientLeft, c2.y = t2.y + e.clientTop;
} else i2 && (c2.x = C(i2));
return { x: r2.left + l2.scrollLeft - c2.x, y: r2.top + l2.scrollTop - c2.y, width: r2.width, height: r2.height };
}
const P = { getClippingRect: function(t) {
let { element: e, boundary: n2, rootBoundary: l2, strategy: c2 } = t;
const f2 = "clippingAncestors" === n2 ? function(t2, e2) {
const n3 = e2.get(t2);
if (n3) return n3;
let i2 = D(t2).filter((t3) => d(t3) && "body" !== s(t3)), r2 = null;
const l3 = "fixed" === o(t2).position;
let c3 = l3 ? F(t2) : t2;
for (; d(c3) && !w(c3); ) {
const t3 = o(c3), e3 = y(c3);
(l3 ? e3 || r2 : e3 || "static" !== t3.position || !r2 || !["absolute", "fixed"].includes(r2.position)) ? r2 = t3 : i2 = i2.filter((t4) => t4 !== c3), c3 = F(c3);
}
return e2.set(t2, i2), i2;
}(e, this._c) : [].concat(n2), u2 = [...f2, l2], a2 = u2[0], h2 = u2.reduce((t2, n3) => {
const o2 = S(e, n3, c2);
return t2.top = r(o2.top, t2.top), t2.right = i(o2.right, t2.right), t2.bottom = i(o2.bottom, t2.bottom), t2.left = r(o2.left, t2.left), t2;
}, S(e, a2, c2));
return { width: h2.right - h2.left, height: h2.bottom - h2.top, x: h2.left, y: h2.top };
}, convertOffsetParentRelativeRectToViewportRelativeRect: function(t) {
let { rect: e, offsetParent: n2, strategy: o2 } = t;
const i2 = a(n2), r2 = R(n2);
if (n2 === r2) return e;
let l2 = { scrollLeft: 0, scrollTop: 0 }, c2 = { x: 1, y: 1 };
const f2 = { x: 0, y: 0 };
if ((i2 || !i2 && "fixed" !== o2) && (("body" !== s(n2) || g(r2)) && (l2 = T(n2)), a(n2))) {
const t2 = E(n2);
c2 = L(n2), f2.x = t2.x + n2.clientLeft, f2.y = t2.y + n2.clientTop;
}
return { width: e.width * c2.x, height: e.height * c2.y, x: e.x * c2.x - l2.scrollLeft * c2.x + f2.x, y: e.y * c2.y - l2.scrollTop * c2.y + f2.y };
}, isElement: d, getDimensions: function(t) {
return a(t) ? c(t) : t.getBoundingClientRect();
}, getOffsetParent: H, getDocumentElement: R, getScale: L, async getElementRects(t) {
let { reference: e, floating: n2, strategy: o2 } = t;
const i2 = this.getOffsetParent || H, r2 = this.getDimensions;
return { reference: O(e, await i2(n2), o2), floating: { x: 0, y: 0, ...await r2(n2) } };
}, getClientRects: (t) => Array.from(t.getClientRects()), isRTL: (t) => "rtl" === o(t).direction };
function z(t, e, n2, o2) {
void 0 === o2 && (o2 = {});
const { ancestorScroll: i2 = true, ancestorResize: r2 = true, elementResize: l2 = true, animationFrame: c2 = false } = o2, s2 = i2 && !c2, f2 = s2 || r2 ? [...d(t) ? D(t) : t.contextElement ? D(t.contextElement) : [], ...D(e)] : [];
f2.forEach((t2) => {
s2 && t2.addEventListener("scroll", n2, { passive: true }), r2 && t2.addEventListener("resize", n2);
});
let u2, a2 = null;
if (l2) {
let o3 = true;
a2 = new ResizeObserver(() => {
o3 || n2(), o3 = false;
}), d(t) && !c2 && a2.observe(t), d(t) || !t.contextElement || c2 || a2.observe(t.contextElement), a2.observe(e);
}
let h2 = c2 ? E(t) : null;
return c2 && function e2() {
const o3 = E(t);
!h2 || o3.x === h2.x && o3.y === h2.y && o3.width === h2.width && o3.height === h2.height || n2();
h2 = o3, u2 = requestAnimationFrame(e2);
}(), n2(), () => {
var t2;
f2.forEach((t3) => {
s2 && t3.removeEventListener("scroll", n2), r2 && t3.removeEventListener("resize", n2);
}), null == (t2 = a2) || t2.disconnect(), a2 = null, c2 && cancelAnimationFrame(u2);
};
}
const B = (t, n2, o2) => {
const i2 = /* @__PURE__ */ new Map(), r2 = { platform: P, ...o2 }, l2 = { ...r2.platform, _c: i2 };
return computePosition(t, n2, { ...r2, platform: l2 });
};
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || "").toLowerCase();
}
return "#document";
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function isNode(value) {
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isComponentPublicInstance(target) {
return target != null && typeof target === "object" && "$el" in target;
}
function unwrapElement(target) {
if (isComponentPublicInstance(target)) {
const element = target.$el;
return isNode(element) && getNodeName(element) === "#comment" ? null : element;
}
return target;
}
function toValue(source) {
return typeof source === "function" ? source() : unref(source);
}
function arrow(options) {
return {
name: "arrow",
options,
fn(args) {
const element = unwrapElement(toValue(options.element));
if (element == null) {
return {};
}
return arrow$1({
element,
padding: options.padding
}).fn(args);
}
};
}
function getDPR(element) {
if (typeof window === "undefined") {
return 1;
}
const win = element.ownerDocument.defaultView || window;
return win.devicePixelRatio || 1;
}
function roundByDPR(element, value) {
const dpr = getDPR(element);
return Math.round(value * dpr) / dpr;
}
function useFloating(reference, floating, options) {
if (options === void 0) {
options = {};
}
const whileElementsMountedOption = options.whileElementsMounted;
const openOption = computed(() => {
var _toValue;
return (_toValue = toValue(options.open)) != null ? _toValue : true;
});
const middlewareOption = computed(() => toValue(options.middleware));
const placementOption = computed(() => {
var _toValue2;
return (_toValue2 = toValue(options.placement)) != null ? _toValue2 : "bottom";
});
const strategyOption = computed(() => {
var _toValue3;
return (_toValue3 = toValue(options.strategy)) != null ? _toValue3 : "absolute";
});
const transformOption = computed(() => {
var _toValue4;
return (_toValue4 = toValue(options.transform)) != null ? _toValue4 : true;
});
const referenceElement = computed(() => unwrapElement(reference.value));
const floatingElement = computed(() => unwrapElement(floating.value));
const x2 = ref(0);
const y2 = ref(0);
const strategy = ref(strategyOption.value);
const placement = ref(placementOption.value);
const middlewareData = shallowRef({});
const isPositioned = ref(false);
const floatingStyles = computed(() => {
const initialStyles = {
position: strategy.value,
left: "0",
top: "0"
};
if (!floatingElement.value) {
return initialStyles;
}
const xVal = roundByDPR(floatingElement.value, x2.value);
const yVal = roundByDPR(floatingElement.value, y2.value);
if (transformOption.value) {
return {
...initialStyles,
transform: "translate(" + xVal + "px, " + yVal + "px)",
...getDPR(floatingElement.value) >= 1.5 && {
willChange: "transform"
}
};
}
return {
position: strategy.value,
left: xVal + "px",
top: yVal + "px"
};
});
let whileElementsMountedCleanup;
function update() {
if (referenceElement.value == null || floatingElement.value == null) {
return;
}
B(referenceElement.value, floatingElement.value, {
middleware: middlewareOption.value,
placement: placementOption.value,
strategy: strategyOption.value
}).then((position) => {
x2.value = position.x;
y2.value = position.y;
strategy.value = position.strategy;
placement.value = position.placement;
middlewareData.value = position.middlewareData;
isPositioned.value = true;
});
}
function cleanup() {
if (typeof whileElementsMountedCleanup === "function") {
whileElementsMountedCleanup();
whileElementsMountedCleanup = void 0;
}
}
function attach() {
cleanup();
if (whileElementsMountedOption === void 0) {
update();
return;
}
if (referenceElement.value != null && floatingElement.value != null) {
whileElementsMountedCleanup = whileElementsMountedOption(referenceElement.value, floatingElement.value, update);
return;
}
}
function reset() {
if (!openOption.value) {
isPositioned.value = false;
}
}
watch([middlewareOption, placementOption, strategyOption], update, {
flush: "sync"
});
watch([referenceElement, floatingElement], attach, {
flush: "sync"
});
watch(openOption, reset, {
flush: "sync"
});
if (getCurrentScope()) {
onScopeDispose(cleanup);
}
return {
x: shallowReadonly(x2),
y: shallowReadonly(y2),
strategy: shallowReadonly(strategy),
placement: shallowReadonly(placement),
middlewareData: shallowReadonly(middlewareData),
isPositioned: shallowReadonly(isPositioned),
floatingStyles,
update
};
}
const uriAttributes = /* @__PURE__ */ new Set([
"background",
"cite",
"href",
"itemtype",
"longdesc",
"poster",
"src",
"xlink:href"
]);
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i;
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(
SAFE_URL_PATTERN.test(attribute.nodeValue || "") || DATA_URL_PATTERN.test(attribute.nodeValue || "")
);
}
return true;
}
return allowedAttributeList.filter((attributeRegex) => attributeRegex instanceof RegExp).some((regex) => regex.test(attributeName));
};
const DefaultAllowlist = {
// Global attributes allowed on any supplied element below.
"*": ["class", "dir", "id", "lang", "role", ARIA_ATTRIBUTE_PATTERN],
"a": ["target", "href", "title", "rel"],
"area": [],
"b": [],
"br": [],
"col": [],
"code": [],
"div": [],
"em": [],
"hr": [],
"h1": [],
"h2": [],
"h3": [],
"h4": [],
"h5": [],
"h6": [],
"i": [],
"img": ["src", "srcset", "alt", "title", "width", "height"],
"li": [],
"ol": [],
"p": [],
"pre": [],
"s": [],
"small": [],
"span": [],
"sub": [],
"sup": [],
"strong": [],
"u": [],
"ul": []
};
const sanitizeHtml = (unsafeHtml, allowList, sanitizeFunction) => {
if (!unsafeHtml.length) {
return unsafeHtml;
}
const domParser = new window.DOMParser();
const createdDocument = domParser.parseFromString(unsafeHtml, "text/html");
const elements = createdDocument.body.querySelectorAll("*");
for (const element of elements) {
const elementName = element.nodeName.toLowerCase();
if (!Object.keys(allowList).includes(elementName)) {
element.remove();
continue;
}
const attributeList = element.attributes;
const allowedAttributes = [...allowList["*"] || [], ...allowList[elementName] || []];
for (const attribute of attributeList) {
if (!allowedAttribute(attribute, allowedAttributes)) {
element.removeAttribute(attribute.nodeName);
}
}
}
return createdDocument.body.innerHTML;
};
const _hoisted_1 = ["id"];
const _hoisted_2 = ["id"];
const _hoisted_3 = ["innerHTML"];
const _hoisted_4 = ["innerHTML"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
inheritAttrs: false
},
__name: "BPopover",
props: /* @__PURE__ */ mergeModels({
boundary: { default: "clippingAncestors" },
boundaryPadding: { default: void 0 },
click: { type: Boolean, default: false },
closeOnHide: { type: Boolean, default: false },
content: { default: void 0 },
customClass: { default: "" },
delay: { default: () => ({ show: 100, hide: 300 }) },
floatingMiddleware: { default: void 0 },
html: { type: Boolean, default: false },
id: { default: void 0 },
inline: { type: Boolean, default: false },
manual: { type: Boolean, default: false },
noAutoClose: { type: Boolean, default: false },
noFade: { type: Boolean, default: false },
noFlip: { type: Boolean, default: false },
noHide: { type: Boolean, default: false },
noShift: { type: Boolean, default: false },
noSize: { type: Boolean, default: false },
noninteractive: { type: Boolean, default: false },
offset: { default: null },
placement: { default: "top" },
persistent: { type: Boolean, default: false },
realtime: { type: Boolean, default: false },
reference: { default: null },
strategy: { default: "absolute" },
target: { default: null },
title: { default: void 0 },
tooltip: { type: Boolean, default: false },
variant: { default: null },
teleportDisabled: { type: Boolean, default: false },
teleportTo: { default: void 0 }
}, {
"modelValue": { type: Boolean, ...{
default: false
} },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["hidden", "hide", "hide-prevented", "show", "show-prevented", "shown"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const _props = __props;
const props = useDefaults(_props, "BPopover");
const emit = __emit;
const modelValue = useModel(__props, "modelValue");
const showState = ref(modelValue.value);
const showStateInternal = ref(modelValue.value);
watchEffect(() => {
modelValue.value = showState.value;
});
watch(modelValue, (newValue) => {
if (newValue === showState.value) return;
newValue ? show() : hide$1(new Event("update:modelValue"));
});
const computedId = useId(() => props.id, "popover");
const hidden = ref(false);
const element = ref(null);
const targetTrigger = ref(null);
const arrow$12 = ref(null);
const trigger = ref(null);
const placeholder = ref(null);
const sanitizedTitle = computed(
() => props.title ? sanitizeHtml(props.title, DefaultAllowlist) : ""
);
const sanitizedContent = computed(
() => props.content ? sanitizeHtml(props.content, DefaultAllowlist) : ""
);
const isAutoPlacement = computed(() => props.placement.startsWith("auto"));
const offsetNumber = useToNumber(() => props.offset ?? NaN);
const boundary = computed(
() => isBoundary(props.boundary) ? props.boundary : void 0
);
const rootBoundary = computed(
() => isRootBoundary(props.boundary) ? props.boundary : void 0
);
const sizeStyles = ref({});
const floatingMiddleware = computed(() => {
if (props.floatingMiddleware !== void 0) {
return props.floatingMiddleware;
}
const off = props.offset !== null ? offsetNumber.value : props.tooltip ? 6 : 8;
const arr = [offset(off)];
if (props.noFlip === false && !isAutoPlacement.value) {
arr.push(
flip({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
})
);
}
if (isAutoPlacement.value) {
arr.push(
autoPlacement({
alignment: props.placement.split("-")[1] || void 0,
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
})
);
}
if (props.noShift === false) {
arr.push(
shift({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
})
);
}
if (props.noHide === false) {
arr.push(
hide({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
})
);
}
if (props.inline === true) {
arr.push(inline());
}
arr.push(arrow({ element: arrow$12, padding: 10 }));
if (props.noSize === false) {
arr.push(
size({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding,
apply({ availableWidth, availableHeight }) {
sizeStyles.value = {
maxHeight: availableHeight ? `${availableHeight}px` : void 0,
maxWidth: availableWidth ? `${availableWidth}px` : void 0
};
}
})
);
}
return arr;
});
const placementRef = computed(
() => isAutoPlacement.value ? void 0 : props.placement
);
const { floatingStyles, middlewareData, placement, update } = useFloating(targetTrigger, element, {
placement: placementRef,
middleware: floatingMiddleware,
strategy: toRef(() => props.strategy),
whileElementsMounted: (...args) => {
const cleanup = z(...args, { animationFrame: props.realtime });
return cleanup;
}
});
const arrowStyle = ref({ position: "absolute" });
watch(middlewareData, (newValue) => {
var _a;
if (props.noHide === false) {
hidden.value = !!((_a = newValue.hide) == null ? void 0 : _a.referenceHidden);
if (props.closeOnHide && hidden.value && !props.noAutoClose && !props.manual) {
hide$1(new Event("closeOnHide"));
}
}
if (newValue.arrow) {
const { x: x2, y: y2 } = newValue.arrow;
arrowStyle.value = {
position: "absolute",
top: y2 ? `${y2}px` : "",
left: x2 ? `${x2}px` : ""
};
}
});
const computedClasses = computed(() => {
const type = props.tooltip ? "tooltip" : "popover";
return [
type,
`b-${type}`,
{
[`b-${type}-${props.variant}`]: props.variant !== null,
show: showState.value && !hidden.value,
["pe-none"]: !showState.value,
fade: !props.noFade,
["d-none"]: !showState.value && props.noFade,
[`${props.customClass}`]: props.customClass !== void 0,
[`bs-${type}-${resolveBootstrapPlacement(placement.value)}`]: placement.value !== void 0
}
];
});
const { isOutside } = useMouseInElement(element);
const { isOutside: triggerIsOutside } = useMouseInElement(trigger);
const toggle = (e) => {
const event = e ?? new Event("click");
showState.value ? hide$1(event) : show();
};
const buildTriggerableEvent = (type, opts = {}) => new BvTriggerableEvent(type, {
cancelable: false,
target: element.value || null,
relatedTarget: null,
trigger: null,
...opts,
componentId: computedId.value
});
let showTimeout;
const show = () => {
const event = buildTriggerableEvent("show", { cancelable: true });
emit("show", event);
if (event.defaultPrevented) {
emit("show-prevented");
return;
}
showStateInternal.value = true;
nextTick(() => {
var _a;
update();
showTimeout = setTimeout(
() => {
update();
showState.value = true;
nextTick(() => {
emit("shown", buildTriggerableEvent("shown"));
});
},
typeof props.delay === "number" ? props.delay : ((_a = props.delay) == null ? void 0 : _a.show) || 0
);
});
};
const hide$1 = (e) => {
var _a;
const event = buildTriggerableEvent("hide", { cancelable: true });
emit("hide", event);
if (event.defaultPrevented) {
emit("hide-prevented");
return;
}
if (showTimeout) {
clearTimeout(showTimeout);
showTimeout = void 0;
}
const delay = typeof props.delay === "number" ? props.delay : ((_a = props.delay) == null ? void 0 : _a.hide) || 0;
setTimeout(() => {
var _a2, _b;
if ((e == null ? void 0 : e.type) === "click" || (e == null ? void 0 : e.type) === "forceHide" || (e == null ? void 0 : e.type) === "closeOnHide" || (e == null ? void 0 : e.type) === "update:modelValue" && props.manual || !props.noninteractive && isOutside.value && triggerIsOutside.value && !((_a2 = element.value) == null ? void 0 : _a2.contains(document == null ? void 0 : document.activeElement)) && !((_b = trigger.value) == null ? void 0 : _b.contains(document == null ? void 0 : document.activeElement)) || props.noninteractive && triggerIsOutside.value) {
showState.value = false;
nextTick(() => {
setTimeout(
() => {
showStateInternal.value = false;
},
element.value ? getTransitionDelay(element.value) : 150
);
emit("hidden", buildTriggerableEvent("hidden"));
});
} else {
setTimeout(
() => {
hide$1(e);
},
delay < 50 ? 50 : delay
);
}
}, delay);
};
__expose({
hide: hide$1,
show,
toggle
});
const bind2 = () => {
var _a;
if (props.target) {
const elem = getElement(props.target);
if (elem) {
trigger.value = elem;
} else {
console.warn("Target element not found", props.target);
}
} else {
trigger.value = (_a = placeholder.value) == null ? void 0 : _a.nextElementSibling;
}
if (props.reference) {
const elem = getElement(props.reference);
if (elem) {
targetTrigger.value = elem;
} else {
console.warn("Reference element not found", props.reference);
}
} else {
targetTrigger.value = trigger.value;
}
if (!trigger.value || props.manual) {
return;
}
if (!IS_BROWSER) return;
trigger.value.addEventListener("forceHide", hide$1);
if (props.click) {
trigger.value.addEventListener("click", toggle);
return;
}
trigger.value.addEventListener("pointerenter", show);
trigger.value.addEventListener("pointerleave", hide$1);
trigger.value.addEventListener("focus", show);
trigger.value.addEventListener("blur", hide$1);
};
const unbind2 = () => {
if (trigger.value) {
trigger.value.removeEventListener("forceHide", hide$1);
trigger.value.removeEventListener("click", toggle);
trigger.value.removeEventListener("pointerenter", show);
trigger.value.removeEventListener("pointerleave", hide$1);
trigger.value.removeEventListener("focus", show);
trigger.value.removeEventListener("blur", hide$1);
}
};
onClickOutside(
element,
() => {
if (showState.value && props.click && !props.noAutoClose && !props.manual)
hide$1(new Event("clickOutside"));
},
{ ignore: [trigger] }
);
watch([() => props.click, () => props.target, () => props.reference], () => {
unbind2();
bind2();
});
onMounted(bind2);
onBeforeUnmount(unbind2);
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("span", {
id: unref(computedId) + "_placeholder",
ref_key: "placeholder",
ref: placeholder
}, null, 8, _hoisted_1),
renderSlot(_ctx.$slots, "target", {
show,
hide: hide$1,
toggle,
showState: showState.value
}),
createVNode(_sfc_main$1, {
to: unref(props).teleportTo,
disabled: !unref(props).teleportTo || unref(props).teleportDisabled
}, {
default: withCtx(() => [
showStateInternal.value || unref(props).persistent ? (openBlock(), createElementBlock("div", mergeProps({
key: 0,
id: unref(computedId)
}, _ctx.$attrs, {
ref_key: "element",
ref: element,
class: computedClasses.value,
role: "tooltip",
tabindex: "-1",
style: unref(floatingStyles)
}), [
createElementVNode("div", {
ref_key: "arrow",
ref: arrow$12,
class: normalizeClass(`${unref(props).tooltip ? "tooltip" : "popover"}-arrow`),
style: normalizeStyle(arrowStyle.value),
"data-popper-arrow": ""
}, null, 6),
createElementVNode("div", {
class: "overflow-auto",
style: normalizeStyle(sizeStyles.value)
}, [
unref(props).title || _ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
!unref(props).html ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["position-sticky top-0", unref(props).tooltip ? "tooltip-inner" : "popover-header"])
}, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(unref(props).title), 1)
])
], 2)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["position-sticky top-0", unref(props).tooltip ? "tooltip-inner" : "popover-header"]),
innerHTML: sanitizedTitle.value
}, null, 10, _hoisted_3))
], 64)) : createCommentVNode("", true),
unref(props).tooltip && !_ctx.$slots.title && !unref(props).title || !unref(props).tooltip ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
!unref(props).html ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(props).tooltip ? "tooltip-inner" : "popover-body")
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(unref(props).content), 1)
])
], 2)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(unref(props).tooltip ? "tooltip-inner" : "popover-body"),
innerHTML: sanitizedContent.value
}, null, 10, _hoisted_4))
], 64)) : createCommentVNode("", true)
], 4)
], 16, _hoisted_2)) : createCommentVNode("", true)
]),
_: 3
}, 8, ["to", "disabled"])
], 64);
};
}
});
const resolveFloatingPlacement = ({
top,
end,
start,
alignCenter,
alignEnd
}) => {
const direction = top ? "top" : start ? "left" : end ? "right" : "bottom";
const align = alignEnd ? "end" : alignCenter ? null : "start";
return `${direction}${align ? `-${align}` : ""}`;
};
const resolveBootstrapPlacement = (placement) => {
const [_placement] = placement.split("-");
switch (_placement) {
case "left":
return "start";
case "right":
return "end";
default:
return _placement;
}
};
const resolveActiveStatus = (values) => typeof values !== "object" || values.active !== false;
const resolveContent = (values, el) => {
const isActive = resolveActiveStatus(values);
if (!isActive) return {};
const missingBindingValue = typeof values === "undefined" || typeof values === "object" && !values.title && !values.content;
const title = el.getAttribute("title") || el.getAttribute("data-original-title");
if (missingBindingValue) {
if (title) {
el.removeAttribute("title");
el.setAttribute("data-original-title", title);
return {
content: sanitizeHtml(title, DefaultAllowlist)
};
}
return {};
}
if (typeof values === "string") {
return {
content: sanitizeHtml(values, DefaultAllowlist)
};
}
return {
title: (values == null ? void 0 : values.title) ? sanitizeHtml(values == null ? void 0 : values.title, DefaultAllowlist) : void 0,
content: (values == null ? void 0 : values.content) ? sanitizeHtml(values == null ? void 0 : values.content, DefaultAllowlist) : void 0
};
};
const resolveDirectiveProps = (binding, el) => ({
target: el,
modelValue: binding.modifiers.show,
inline: binding.modifiers.inline,
click: binding.modifiers.click,
realtime: binding.modifiers.realtime,
persistent: binding.modifiers.persistent,
placement: binding.modifiers.left ? "left" : binding.modifiers.right ? "right" : binding.modifiers.bottom ? "bottom" : binding.modifiers.top ? "top" : void 0,
html: true,
...typeof binding.value === "object" ? binding.value : {},
...binding.modifiers.interactive ? { noninteractive: false } : {},
title: null,
content: null
});
const bind = (el, binding, props) => {
var _a;
const div = document.createElement("span");
if (binding.modifiers.body) document.body.appendChild(div);
else if (binding.modifiers.child) el.appendChild(div);
else (_a = el.parentNode) == null ? void 0 : _a.insertBefore(div, el.nextSibling);
render(h$1(_sfc_main, props), div);
el.$__element = div;
};
const unbind = (el) => {
const div = el.$__element;
if (div) render(null, div);
setTimeout(() => {
div == null ? void 0 : div.remove();
}, 0);
delete el.$__element;
};
const isBoundary = (input) => input === "clippingAncestors" || input instanceof Element || Array.isArray(input);
const isRootBoundary = (input) => !isBoundary(input);
export {
_sfc_main as _,
resolveContent as a,
bind as b,
resolveDirectiveProps as c,
isRootBoundary as d,
resolveFloatingPlacement as e,
flip as f,
size as g,
useFloating as h,
isBoundary as i,
offset as o,
resolveActiveStatus as r,
shift as s,
unbind as u,
z
};
//# sourceMappingURL=floatingUi-gCdP78vZ.mjs.map