bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
1,305 lines • 56.7 kB
JavaScript
const require_chunk = require("./chunk-CoQrYLCe.js");
const require_dist = require("./dist-BJ15ThEs.js");
const require_VisuallyHidden = require("./VisuallyHidden-DaN947I0.js");
const require_useForwardExpose = require("./useForwardExpose-DrJOy0jY.js");
const require_useKbd = require("./useKbd-ZZushx7D.js");
const require_floating_ui_vue = require("./floating-ui.vue-GXIS2sFG.js");
let vue = require("vue");
vue = require_chunk.__toESM(vue);
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/handleAndDispatchCustomEvent.js
function handleAndDispatchCustomEvent(name, handler, detail) {
const target = detail.originalEvent.target;
const event = new CustomEvent(name, {
bubbles: false,
cancelable: true,
detail
});
if (handler) target.addEventListener(name, handler, { once: true });
target.dispatchEvent(event);
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useBodyScrollLock.js
var useBodyLockStackCount = require_dist.createSharedComposable(() => {
const map = (0, vue.ref)(/* @__PURE__ */ new Map());
const initialOverflow = (0, vue.ref)();
const locked = (0, vue.computed)(() => {
for (const value of map.value.values()) if (value) return true;
return false;
});
const context = require_VisuallyHidden.injectConfigProviderContext({ scrollBody: (0, vue.ref)(true) });
let stopTouchMoveListener = null;
const resetBodyStyle = () => {
document.body.style.paddingRight = "";
document.body.style.marginRight = "";
document.body.style.pointerEvents = "";
document.documentElement.style.removeProperty("--scrollbar-width");
document.body.style.overflow = initialOverflow.value ?? "";
require_dist.isIOS && stopTouchMoveListener?.();
initialOverflow.value = void 0;
};
(0, vue.watch)(locked, (val, oldVal) => {
if (!require_dist.isClient) return;
if (!val) {
if (oldVal) resetBodyStyle();
return;
}
if (initialOverflow.value === void 0) initialOverflow.value = document.body.style.overflow;
const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
const defaultConfig = {
padding: verticalScrollbarWidth,
margin: 0
};
const config = context.scrollBody?.value ? typeof context.scrollBody.value === "object" ? require_useKbd.defu({
padding: context.scrollBody.value.padding === true ? verticalScrollbarWidth : context.scrollBody.value.padding,
margin: context.scrollBody.value.margin === true ? verticalScrollbarWidth : context.scrollBody.value.margin
}, defaultConfig) : defaultConfig : {
padding: 0,
margin: 0
};
if (verticalScrollbarWidth > 0) {
document.body.style.paddingRight = typeof config.padding === "number" ? `${config.padding}px` : String(config.padding);
document.body.style.marginRight = typeof config.margin === "number" ? `${config.margin}px` : String(config.margin);
document.documentElement.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
document.body.style.overflow = "hidden";
}
if (require_dist.isIOS) stopTouchMoveListener = require_dist.useEventListener(document, "touchmove", (e) => preventDefault(e), { passive: false });
(0, vue.nextTick)(() => {
if (!locked.value) return;
document.body.style.pointerEvents = "none";
document.body.style.overflow = "hidden";
});
}, {
immediate: true,
flush: "sync"
});
return map;
});
function useBodyScrollLock(initialState) {
const id = Math.random().toString(36).substring(2, 7);
const map = useBodyLockStackCount();
map.value.set(id, initialState ?? false);
const locked = (0, vue.computed)({
get: () => map.value.get(id) ?? false,
set: (value) => map.value.set(id, value)
});
require_dist.tryOnBeforeUnmount(() => {
map.value.delete(id);
});
return locked;
}
function checkOverflowScroll(ele) {
const style = window.getComputedStyle(ele);
if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientWidth < ele.scrollWidth || style.overflowY === "auto" && ele.clientHeight < ele.scrollHeight) return true;
else {
const parent = ele.parentNode;
if (!(parent instanceof Element) || parent.tagName === "BODY") return false;
return checkOverflowScroll(parent);
}
}
function preventDefault(rawEvent) {
const e = rawEvent || window.event;
const _target = e.target;
if (_target instanceof Element && checkOverflowScroll(_target)) return false;
if (e.touches.length > 1) return true;
if (e.preventDefault && e.cancelable) e.preventDefault();
return false;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useEmitAsProps.js
/**
* The `useEmitAsProps` function is a TypeScript utility that converts emitted events into props for a
* Vue component.
* @param emit - The `emit` parameter is a function that is used to emit events from a component. It
* takes two parameters: `name` which is the name of the event to be emitted, and `...args` which are
* the arguments to be passed along with the event.
* @returns The function `useEmitAsProps` returns an object that maps event names to functions that
* call the `emit` function with the corresponding event name and arguments.
*/
function useEmitAsProps(emit) {
const vm = (0, vue.getCurrentInstance)();
const events = vm?.type.emits;
const result = {};
if (!events?.length) console.warn(`No emitted event found. Please check component: ${vm?.type.__name}`);
events?.forEach((ev) => {
result[(0, vue.toHandlerKey)((0, vue.camelize)(ev))] = (...arg) => emit(ev, ...arg);
});
return result;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useFocusGuards.js
/** Number of components which have requested interest to have focus guards */
var count$1 = 0;
/**
* Injects a pair of focus guards at the edges of the whole DOM tree
* to ensure `focusin` & `focusout` events can be caught consistently.
*/
function useFocusGuards() {
(0, vue.watchEffect)((cleanupFn) => {
if (!require_dist.isClient) return;
const edgeGuards = document.querySelectorAll("[data-reka-focus-guard]");
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
count$1++;
cleanupFn(() => {
if (count$1 === 1) document.querySelectorAll("[data-reka-focus-guard]").forEach((node) => node.remove());
count$1--;
});
});
}
function createFocusGuard() {
const element = document.createElement("span");
element.setAttribute("data-reka-focus-guard", "");
element.tabIndex = 0;
element.style.outline = "none";
element.style.opacity = "0";
element.style.position = "fixed";
element.style.pointerEvents = "none";
return element;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useForwardProps.js
/**
* The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
* that combines default props with assigned props from the current instance.
* @param {T} props - The `props` parameter is an object that represents the props passed to a
* component.
* @returns computed value that combines the default props, preserved props, and assigned props.
*/
function useForwardProps(props) {
const vm = (0, vue.getCurrentInstance)();
const defaultProps = Object.keys(vm?.type.props ?? {}).reduce((prev, curr) => {
const defaultValue = (vm?.type.props[curr]).default;
if (defaultValue !== void 0) prev[curr] = defaultValue;
return prev;
}, {});
const refProps = (0, vue.toRef)(props);
return (0, vue.computed)(() => {
const preservedProps = {};
const assignedProps = vm?.vnode.props ?? {};
Object.keys(assignedProps).forEach((key) => {
preservedProps[(0, vue.camelize)(key)] = assignedProps[key];
});
return Object.keys({
...defaultProps,
...preservedProps
}).reduce((prev, curr) => {
if (refProps.value[curr] !== void 0) prev[curr] = refProps.value[curr];
return prev;
}, {});
});
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useForwardPropsEmits.js
/**
* The function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
* computed object that combines the parsed props and emits as props.
* @param {T} props - The `props` parameter is of type `T`, which is a generic type that extends the
* parameters of the `useForwardProps` function. It represents the props object that is passed to the
* `useForwardProps` function.
* @param [emit] - The `emit` parameter is a function that can be used to emit events. It takes two
* arguments: `name`, which is the name of the event to be emitted, and `args`, which are the arguments
* to be passed along with the event.
* @returns a computed property that combines the parsed
* props and emits as props.
*/
function useForwardPropsEmits(props, emit) {
const parsedProps = useForwardProps(props);
const emitsAsProps = emit ? useEmitAsProps(emit) : {};
return (0, vue.computed)(() => ({
...parsedProps.value,
...emitsAsProps
}));
}
//#endregion
//#region ../../node_modules/.pnpm/aria-hidden@1.2.6/node_modules/aria-hidden/dist/es2015/index.js
var getDefaultParent = function(originalTarget) {
if (typeof document === "undefined") return null;
return (Array.isArray(originalTarget) ? originalTarget[0] : originalTarget).ownerDocument.body;
};
var counterMap = /* @__PURE__ */ new WeakMap();
var uncontrolledNodes = /* @__PURE__ */ new WeakMap();
var markerMap = {};
var lockCount = 0;
var unwrapHost = function(node) {
return node && (node.host || unwrapHost(node.parentNode));
};
var correctTargets = function(parent, targets) {
return targets.map(function(target) {
if (parent.contains(target)) return target;
var correctedTarget = unwrapHost(target);
if (correctedTarget && parent.contains(correctedTarget)) return correctedTarget;
console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing");
return null;
}).filter(function(x) {
return Boolean(x);
});
};
/**
* Marks everything except given node(or nodes) as aria-hidden
* @param {Element | Element[]} originalTarget - elements to keep on the page
* @param [parentNode] - top element, defaults to document.body
* @param {String} [markerName] - a special attribute to mark every node
* @param {String} [controlAttribute] - html Attribute to control
* @return {Undo} undo command
*/
var applyAttributeToOthers = function(originalTarget, parentNode, markerName, controlAttribute) {
var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
if (!markerMap[markerName]) markerMap[markerName] = /* @__PURE__ */ new WeakMap();
var markerCounter = markerMap[markerName];
var hiddenNodes = [];
var elementsToKeep = /* @__PURE__ */ new Set();
var elementsToStop = new Set(targets);
var keep = function(el) {
if (!el || elementsToKeep.has(el)) return;
elementsToKeep.add(el);
keep(el.parentNode);
};
targets.forEach(keep);
var deep = function(parent) {
if (!parent || elementsToStop.has(parent)) return;
Array.prototype.forEach.call(parent.children, function(node) {
if (elementsToKeep.has(node)) deep(node);
else try {
var attr = node.getAttribute(controlAttribute);
var alreadyHidden = attr !== null && attr !== "false";
var counterValue = (counterMap.get(node) || 0) + 1;
var markerValue = (markerCounter.get(node) || 0) + 1;
counterMap.set(node, counterValue);
markerCounter.set(node, markerValue);
hiddenNodes.push(node);
if (counterValue === 1 && alreadyHidden) uncontrolledNodes.set(node, true);
if (markerValue === 1) node.setAttribute(markerName, "true");
if (!alreadyHidden) node.setAttribute(controlAttribute, "true");
} catch (e) {
console.error("aria-hidden: cannot operate on ", node, e);
}
});
};
deep(parentNode);
elementsToKeep.clear();
lockCount++;
return function() {
hiddenNodes.forEach(function(node) {
var counterValue = counterMap.get(node) - 1;
var markerValue = markerCounter.get(node) - 1;
counterMap.set(node, counterValue);
markerCounter.set(node, markerValue);
if (!counterValue) {
if (!uncontrolledNodes.has(node)) node.removeAttribute(controlAttribute);
uncontrolledNodes.delete(node);
}
if (!markerValue) node.removeAttribute(markerName);
});
lockCount--;
if (!lockCount) {
counterMap = /* @__PURE__ */ new WeakMap();
counterMap = /* @__PURE__ */ new WeakMap();
uncontrolledNodes = /* @__PURE__ */ new WeakMap();
markerMap = {};
}
};
};
/**
* Marks everything except given node(or nodes) as aria-hidden
* @param {Element | Element[]} originalTarget - elements to keep on the page
* @param [parentNode] - top element, defaults to document.body
* @param {String} [markerName] - a special attribute to mark every node
* @return {Undo} undo command
*/
var hideOthers = function(originalTarget, parentNode, markerName) {
if (markerName === void 0) markerName = "data-aria-hidden";
var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
var activeParentNode = parentNode || getDefaultParent(originalTarget);
if (!activeParentNode) return function() {
return null;
};
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll("[aria-live], script")));
return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
};
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useHideOthers.js
/**
* The `useHideOthers` function is a TypeScript function that takes a target element reference and
* hides all other elements in ARIA when the target element is present, and restores the visibility of the
* hidden elements when the target element is removed.
* @param {MaybeElementRef} target - The `target` parameter is a reference to the element that you want
* to hide other elements when it is clicked or focused.
*/
function useHideOthers(target) {
let undo;
(0, vue.watch)(() => require_dist.unrefElement(target), (el) => {
let isInsideClosedPopover = false;
try {
isInsideClosedPopover = !!el?.closest("[popover]:not(:popover-open)");
} catch {}
if (el && !isInsideClosedPopover) undo = hideOthers(el);
else if (undo) undo();
});
(0, vue.onUnmounted)(() => {
if (undo) undo();
});
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useId.js
var count = 0;
/**
* The `useId` function generates a unique identifier using a provided deterministic ID or a default
* one prefixed with "reka-", or the provided one via `useId` props from `<ConfigProvider>`.
* @param {string | null | undefined} [deterministicId] - The `useId` function you provided takes an
* optional parameter `deterministicId`, which can be a string, null, or undefined. If
* `deterministicId` is provided, the function will return it. Otherwise, it will generate an id using
* the `useId` function obtained
*/
function useId(deterministicId, prefix = "reka") {
if (deterministicId) return deterministicId;
let id;
if ("useId" in vue) id = vue.useId?.();
else id = require_VisuallyHidden.injectConfigProviderContext({ useId: void 0 }).useId?.() ?? `${++count}`;
return prefix ? `${prefix}-${id}` : id;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useSize.js
function useSize(element) {
const size = (0, vue.ref)();
const width = (0, vue.computed)(() => size.value?.width ?? 0);
const height = (0, vue.computed)(() => size.value?.height ?? 0);
(0, vue.onMounted)(() => {
const el = require_dist.unrefElement(element);
if (el) {
size.value = {
width: el.offsetWidth,
height: el.offsetHeight
};
const resizeObserver = new ResizeObserver((entries) => {
if (!Array.isArray(entries)) return;
if (!entries.length) return;
const entry = entries[0];
let width$1;
let height$1;
if ("borderBoxSize" in entry) {
const borderSizeEntry = entry.borderBoxSize;
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
width$1 = borderSize.inlineSize;
height$1 = borderSize.blockSize;
} else {
width$1 = el.offsetWidth;
height$1 = el.offsetHeight;
}
size.value = {
width: width$1,
height: height$1
};
});
resizeObserver.observe(el, { box: "border-box" });
return () => resizeObserver.unobserve(el);
} else size.value = void 0;
});
return {
width,
height
};
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useStateMachine.js
/**
* The `useStateMachine` function is a TypeScript function that creates a state machine and returns the
* current state and a dispatch function to update the state based on events.
* @param initialState - The `initialState` parameter is the initial state of the state machine. It
* represents the starting point of the state machine's state.
* @param machine - The `machine` parameter is an object that represents a state machine. It should
* have keys that correspond to the possible states of the machine, and the values should be objects
* that represent the possible events and their corresponding next states.
* @returns The `useStateMachine` function returns an object with two properties: `state` and
* `dispatch`.
*/
function useStateMachine(initialState, machine) {
const state = (0, vue.ref)(initialState);
function reducer(event) {
return machine[state.value][event] ?? state.value;
}
const dispatch = (event) => {
state.value = reducer(event);
};
return {
state,
dispatch
};
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Presence/usePresence.js
function usePresence(present, node) {
const stylesRef = (0, vue.ref)({});
const prevAnimationNameRef = (0, vue.ref)("none");
const prevPresentRef = (0, vue.ref)(present);
const initialState = present.value ? "mounted" : "unmounted";
let timeoutId;
const ownerWindow = node.value?.ownerDocument.defaultView ?? require_dist.defaultWindow;
const { state, dispatch } = useStateMachine(initialState, {
mounted: {
UNMOUNT: "unmounted",
ANIMATION_OUT: "unmountSuspended"
},
unmountSuspended: {
MOUNT: "mounted",
ANIMATION_END: "unmounted"
},
unmounted: { MOUNT: "mounted" }
});
const dispatchCustomEvent = (name) => {
if (require_dist.isClient) {
const customEvent = new CustomEvent(name, {
bubbles: false,
cancelable: false
});
node.value?.dispatchEvent(customEvent);
}
};
(0, vue.watch)(present, async (currentPresent, prevPresent) => {
const hasPresentChanged = prevPresent !== currentPresent;
await (0, vue.nextTick)();
if (hasPresentChanged) {
const prevAnimationName = prevAnimationNameRef.value;
const currentAnimationName = getAnimationName(node.value);
if (currentPresent) {
dispatch("MOUNT");
dispatchCustomEvent("enter");
if (currentAnimationName === "none") dispatchCustomEvent("after-enter");
} else if (currentAnimationName === "none" || currentAnimationName === "undefined" || stylesRef.value?.display === "none") {
dispatch("UNMOUNT");
dispatchCustomEvent("leave");
dispatchCustomEvent("after-leave");
} else if (prevPresent && prevAnimationName !== currentAnimationName) {
dispatch("ANIMATION_OUT");
dispatchCustomEvent("leave");
} else {
dispatch("UNMOUNT");
dispatchCustomEvent("after-leave");
}
}
}, { immediate: true });
/**
* Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
* make sure we only trigger ANIMATION_END for the currently active animation.
*/
const handleAnimationEnd = (event) => {
const currentAnimationName = getAnimationName(node.value);
const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
const directionName = state.value === "mounted" ? "enter" : "leave";
if (event.target === node.value && isCurrentAnimation) {
dispatchCustomEvent(`after-${directionName}`);
dispatch("ANIMATION_END");
if (!prevPresentRef.value) {
const currentFillMode = node.value.style.animationFillMode;
node.value.style.animationFillMode = "forwards";
timeoutId = ownerWindow?.setTimeout(() => {
if (node.value?.style.animationFillMode === "forwards") node.value.style.animationFillMode = currentFillMode;
});
}
}
if (event.target === node.value && currentAnimationName === "none") dispatch("ANIMATION_END");
};
const handleAnimationStart = (event) => {
if (event.target === node.value) prevAnimationNameRef.value = getAnimationName(node.value);
};
const watcher = (0, vue.watch)(node, (newNode, oldNode) => {
if (newNode) {
stylesRef.value = getComputedStyle(newNode);
newNode.addEventListener("animationstart", handleAnimationStart);
newNode.addEventListener("animationcancel", handleAnimationEnd);
newNode.addEventListener("animationend", handleAnimationEnd);
} else {
dispatch("ANIMATION_END");
if (timeoutId !== void 0) ownerWindow?.clearTimeout(timeoutId);
oldNode?.removeEventListener("animationstart", handleAnimationStart);
oldNode?.removeEventListener("animationcancel", handleAnimationEnd);
oldNode?.removeEventListener("animationend", handleAnimationEnd);
}
}, { immediate: true });
const stateWatcher = (0, vue.watch)(state, () => {
const currentAnimationName = getAnimationName(node.value);
prevAnimationNameRef.value = state.value === "mounted" ? currentAnimationName : "none";
});
(0, vue.onUnmounted)(() => {
watcher();
stateWatcher();
});
return { isPresent: (0, vue.computed)(() => ["mounted", "unmountSuspended"].includes(state.value)) };
}
function getAnimationName(node) {
return node ? getComputedStyle(node).animationName || "none" : "none";
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Presence/Presence.js
var Presence_default = (0, vue.defineComponent)({
name: "Presence",
props: {
present: {
type: Boolean,
required: true
},
forceMount: { type: Boolean }
},
slots: {},
setup(props, { slots, expose }) {
const { present, forceMount } = (0, vue.toRefs)(props);
const node = (0, vue.ref)();
const { isPresent } = usePresence(present, node);
expose({ present: isPresent });
let children = slots.default({ present: isPresent.value });
children = require_VisuallyHidden.renderSlotFragments(children || []);
const instance = (0, vue.getCurrentInstance)();
if (children && children?.length > 1) {
const componentName = instance?.parent?.type.name ? `<${instance.parent.type.name} />` : "component";
throw new Error([
`Detected an invalid children for \`${componentName}\` for \`Presence\` component.`,
"",
"Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.",
"You can apply a few solutions:",
["Provide a single child element so that `presence` directive attach correctly.", "Ensure the first child is an actual element instead of a raw text node or comment node."].map((line) => ` - ${line}`).join("\n")
].join("\n"));
}
return () => {
if (forceMount.value || present.value || isPresent.value) return (0, vue.h)(slots.default({ present: isPresent.value })[0], { ref: (v) => {
const el = require_dist.unrefElement(v);
if (typeof el?.hasAttribute === "undefined") return el;
if (el?.hasAttribute("data-reka-popper-content-wrapper")) node.value = el.firstElementChild;
else node.value = el;
return el;
} });
else return null;
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/DismissableLayer/utils.js
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
function isLayerExist(layerElement, targetElement) {
if (!(targetElement instanceof Element)) return false;
const targetLayer = targetElement.closest("[data-dismissable-layer]");
const mainLayer = layerElement.dataset.dismissableLayer === "" ? layerElement : layerElement.querySelector("[data-dismissable-layer]");
const nodeList = Array.from(layerElement.ownerDocument.querySelectorAll("[data-dismissable-layer]"));
if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) return true;
else return false;
}
/**
* Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`
* to mimic layer dismissing behaviour present in OS.
* Returns props to pass to the node we want to check for outside events.
*/
function usePointerDownOutside(onPointerDownOutside, element, enabled = true) {
const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
const isPointerInsideDOMTree = (0, vue.ref)(false);
const handleClickRef = (0, vue.ref)(() => {});
(0, vue.watchEffect)((cleanupFn) => {
if (!require_dist.isClient || !(0, vue.toValue)(enabled)) return;
const handlePointerDown = async (event) => {
const target = event.target;
if (!element?.value || !target) return;
if (isLayerExist(element.value, target)) {
isPointerInsideDOMTree.value = false;
return;
}
if (event.target && !isPointerInsideDOMTree.value) {
const eventDetail = { originalEvent: event };
function handleAndDispatchPointerDownOutsideEvent() {
handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, onPointerDownOutside, eventDetail);
}
/**
* On touch devices, we need to wait for a click event because browsers implement
* a ~350ms delay between the time the user stops touching the display and when the
* browser executes events. We need to ensure we don't reactivate pointer-events within
* this timeframe otherwise the browser may execute events that should have been prevented.
*
* Additionally, this also lets us deal automatically with cancellations when a click event
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
*
* This is why we also continuously remove the previous listener, because we cannot be
* certain that it was raised, and therefore cleaned-up.
*/
if (event.pointerType === "touch") {
ownerDocument.removeEventListener("click", handleClickRef.value);
handleClickRef.value = handleAndDispatchPointerDownOutsideEvent;
ownerDocument.addEventListener("click", handleClickRef.value, { once: true });
} else handleAndDispatchPointerDownOutsideEvent();
} else ownerDocument.removeEventListener("click", handleClickRef.value);
isPointerInsideDOMTree.value = false;
};
/**
* if this hook executes in a component that mounts via a `pointerdown` event, the event
* would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
* this by delaying the event listener registration on the document.
* This is how the DOM works, ie:
* ```
* button.addEventListener('pointerdown', () => {
* console.log('I will log');
* document.addEventListener('pointerdown', () => {
* console.log('I will also log');
* })
* });
*/
const timerId = window.setTimeout(() => {
ownerDocument.addEventListener("pointerdown", handlePointerDown);
}, 0);
cleanupFn(() => {
window.clearTimeout(timerId);
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
ownerDocument.removeEventListener("click", handleClickRef.value);
});
});
return { onPointerDownCapture: () => {
if (!(0, vue.toValue)(enabled)) return;
isPointerInsideDOMTree.value = true;
} };
}
/**
* Listens for when focus happens outside a DOM subtree.
* Returns props to pass to the root (node) of the subtree we want to check.
*/
function useFocusOutside(onFocusOutside, element, enabled = true) {
const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
const isFocusInsideDOMTree = (0, vue.ref)(false);
(0, vue.watchEffect)((cleanupFn) => {
if (!require_dist.isClient || !(0, vue.toValue)(enabled)) return;
const handleFocus = async (event) => {
if (!element?.value) return;
await (0, vue.nextTick)();
await (0, vue.nextTick)();
const target = event.target;
if (!element.value || !target || isLayerExist(element.value, target)) return;
if (event.target && !isFocusInsideDOMTree.value) handleAndDispatchCustomEvent(FOCUS_OUTSIDE, onFocusOutside, { originalEvent: event });
};
ownerDocument.addEventListener("focusin", handleFocus);
cleanupFn(() => ownerDocument.removeEventListener("focusin", handleFocus));
});
return {
onFocusCapture: () => {
if (!(0, vue.toValue)(enabled)) return;
isFocusInsideDOMTree.value = true;
},
onBlurCapture: () => {
if (!(0, vue.toValue)(enabled)) return;
isFocusInsideDOMTree.value = false;
}
};
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/DismissableLayer/DismissableLayer.js
var context = (0, vue.reactive)({
layersRoot: /* @__PURE__ */ new Set(),
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
originalBodyPointerEvents: void 0,
branches: /* @__PURE__ */ new Set()
});
var DismissableLayer_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "DismissableLayer",
props: {
disableOutsidePointerEvents: {
type: Boolean,
required: false,
default: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
emits: [
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss"
],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const { forwardRef, currentElement: layerElement } = require_useForwardExpose.useForwardExpose();
const ownerDocument = (0, vue.computed)(() => layerElement.value?.ownerDocument ?? globalThis.document);
const layers = (0, vue.computed)(() => context.layersRoot);
const index = (0, vue.computed)(() => {
return layerElement.value ? Array.from(layers.value).indexOf(layerElement.value) : -1;
});
const isBodyPointerEventsDisabled = (0, vue.computed)(() => {
return context.layersWithOutsidePointerEventsDisabled.size > 0;
});
const isPointerEventsEnabled = (0, vue.computed)(() => {
const localLayers = Array.from(layers.value);
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex;
});
const pointerDownOutside = usePointerDownOutside(async (event) => {
const isPointerDownOnBranch = [...context.branches].some((branch) => branch?.contains(event.target));
if (!isPointerEventsEnabled.value || isPointerDownOnBranch) return;
emits("pointerDownOutside", event);
emits("interactOutside", event);
await (0, vue.nextTick)();
if (!event.defaultPrevented) emits("dismiss");
}, layerElement);
const focusOutside = useFocusOutside((event) => {
if ([...context.branches].some((branch) => branch?.contains(event.target))) return;
emits("focusOutside", event);
emits("interactOutside", event);
if (!event.defaultPrevented) emits("dismiss");
}, layerElement);
require_dist.onKeyStroke("Escape", (event) => {
if (!(index.value === layers.value.size - 1)) return;
emits("escapeKeyDown", event);
if (!event.defaultPrevented) emits("dismiss");
});
(0, vue.watchEffect)((cleanupFn) => {
if (!layerElement.value) return;
if (props.disableOutsidePointerEvents) {
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
context.originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents;
ownerDocument.value.body.style.pointerEvents = "none";
}
context.layersWithOutsidePointerEventsDisabled.add(layerElement.value);
}
layers.value.add(layerElement.value);
cleanupFn(() => {
if (props.disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1 && !require_useKbd.isNullish(context.originalBodyPointerEvents)) ownerDocument.value.body.style.pointerEvents = context.originalBodyPointerEvents;
});
});
(0, vue.watchEffect)((cleanupFn) => {
cleanupFn(() => {
if (!layerElement.value) return;
layers.value.delete(layerElement.value);
context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value);
});
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden.Primitive), {
ref: (0, vue.unref)(forwardRef),
"as-child": _ctx.asChild,
as: _ctx.as,
"data-dismissable-layer": "",
style: (0, vue.normalizeStyle)({ pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value ? "auto" : "none" : void 0 }),
onFocusCapture: (0, vue.unref)(focusOutside).onFocusCapture,
onBlurCapture: (0, vue.unref)(focusOutside).onBlurCapture,
onPointerdownCapture: (0, vue.unref)(pointerDownOutside).onPointerDownCapture
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, [
"as-child",
"as",
"style",
"onFocusCapture",
"onBlurCapture",
"onPointerdownCapture"
]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/FocusScope/stack.js
var useFocusStackState = require_dist.createGlobalState(() => {
return (0, vue.ref)([]);
});
function createFocusScopesStack() {
/** A stack of focus scopes, with the active one at the top */
const stack = useFocusStackState();
return {
add(focusScope) {
const activeFocusScope = stack.value[0];
if (focusScope !== activeFocusScope) activeFocusScope?.pause();
stack.value = arrayRemove(stack.value, focusScope);
stack.value.unshift(focusScope);
},
remove(focusScope) {
stack.value = arrayRemove(stack.value, focusScope);
stack.value[0]?.resume();
}
};
}
function arrayRemove(array, item) {
const updatedArray = [...array];
const index = updatedArray.indexOf(item);
if (index !== -1) updatedArray.splice(index, 1);
return updatedArray;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/FocusScope/utils.js
var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
var EVENT_OPTIONS = {
bubbles: false,
cancelable: true
};
/**
* Attempts focusing the first element in a list of candidates.
* Stops when focus has actually moved.
*/
function focusFirst(candidates, { select = false } = {}) {
const previouslyFocusedElement = require_useForwardExpose.getActiveElement();
for (const candidate of candidates) {
focus(candidate, { select });
if (require_useForwardExpose.getActiveElement() !== previouslyFocusedElement) return true;
}
}
/**
* Returns the first and last tabbable elements inside a container.
*/
function getTabbableEdges(container) {
const candidates = getTabbableCandidates(container);
return [findVisible(candidates, container), findVisible(candidates.reverse(), container)];
}
/**
* Returns a list of potential tabbable candidates.
*
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
*/
function getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => {
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
} });
while (walker.nextNode()) nodes.push(walker.currentNode);
return nodes;
}
/**
* Returns the first visible element in a list.
* NOTE: Only checks visibility up to the `container`.
*/
function findVisible(elements, container) {
for (const element of elements) if (!isHidden(element, { upTo: container })) return element;
}
function isHidden(node, { upTo }) {
if (getComputedStyle(node).visibility === "hidden") return true;
while (node) {
if (upTo !== void 0 && node === upTo) return false;
if (getComputedStyle(node).display === "none") return true;
node = node.parentElement;
}
return false;
}
function isSelectableInput(element) {
return element instanceof HTMLInputElement && "select" in element;
}
function focus(element, { select = false } = {}) {
if (element && element.focus) {
const previouslyFocusedElement = require_useForwardExpose.getActiveElement();
element.focus({ preventScroll: true });
if (element !== previouslyFocusedElement && isSelectableInput(element) && select) element.select();
}
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/FocusScope/FocusScope.js
var FocusScope_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "FocusScope",
props: {
loop: {
type: Boolean,
required: false,
default: false
},
trapped: {
type: Boolean,
required: false,
default: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
emits: ["mountAutoFocus", "unmountAutoFocus"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const { currentRef, currentElement } = require_useForwardExpose.useForwardExpose();
const lastFocusedElementRef = (0, vue.ref)(null);
const focusScopesStack = createFocusScopesStack();
const focusScope = (0, vue.reactive)({
paused: false,
pause() {
this.paused = true;
},
resume() {
this.paused = false;
}
});
(0, vue.watchEffect)((cleanupFn) => {
if (!require_dist.isClient) return;
const container = currentElement.value;
if (!props.trapped) return;
function handleFocusIn(event) {
if (focusScope.paused || !container) return;
const target = event.target;
if (container.contains(target)) lastFocusedElementRef.value = target;
else focus(lastFocusedElementRef.value, { select: true });
}
function handleFocusOut(event) {
if (focusScope.paused || !container) return;
const relatedTarget = event.relatedTarget;
if (relatedTarget === null) return;
if (!container.contains(relatedTarget)) focus(lastFocusedElementRef.value, { select: true });
}
function handleMutations(mutations) {
if (!container.contains(lastFocusedElementRef.value)) focus(container);
}
document.addEventListener("focusin", handleFocusIn);
document.addEventListener("focusout", handleFocusOut);
const mutationObserver = new MutationObserver(handleMutations);
if (container) mutationObserver.observe(container, {
childList: true,
subtree: true
});
cleanupFn(() => {
document.removeEventListener("focusin", handleFocusIn);
document.removeEventListener("focusout", handleFocusOut);
mutationObserver.disconnect();
});
});
(0, vue.watchEffect)(async (cleanupFn) => {
const container = currentElement.value;
await (0, vue.nextTick)();
if (!container) return;
focusScopesStack.add(focusScope);
const previouslyFocusedElement = require_useForwardExpose.getActiveElement();
if (!container.contains(previouslyFocusedElement)) {
const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev) => emits("mountAutoFocus", ev));
container.dispatchEvent(mountEvent);
if (!mountEvent.defaultPrevented) {
focusFirst(getTabbableCandidates(container), { select: true });
if (require_useForwardExpose.getActiveElement() === previouslyFocusedElement) focus(container);
}
}
cleanupFn(() => {
container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev) => emits("mountAutoFocus", ev));
const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
const unmountEventHandler = (ev) => {
emits("unmountAutoFocus", ev);
};
container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
container.dispatchEvent(unmountEvent);
setTimeout(() => {
if (!unmountEvent.defaultPrevented) focus(previouslyFocusedElement ?? document.body, { select: true });
container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
focusScopesStack.remove(focusScope);
}, 0);
});
});
function handleKeyDown(event) {
if (!props.loop && !props.trapped) return;
if (focusScope.paused) return;
const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
const focusedElement = require_useForwardExpose.getActiveElement();
if (isTabKey && focusedElement) {
const container = event.currentTarget;
const [first, last] = getTabbableEdges(container);
if (!(first && last)) {
if (focusedElement === container) event.preventDefault();
} else if (!event.shiftKey && focusedElement === last) {
event.preventDefault();
if (props.loop) focus(first, { select: true });
} else if (event.shiftKey && focusedElement === first) {
event.preventDefault();
if (props.loop) focus(last, { select: true });
}
}
}
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden.Primitive), {
ref_key: "currentRef",
ref: currentRef,
tabindex: "-1",
"as-child": _ctx.asChild,
as: _ctx.as,
onKeydown: handleKeyDown
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, ["as-child", "as"]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Teleport/Teleport.js
var Teleport_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "Teleport",
props: {
to: {
type: null,
required: false,
default: "body"
},
disabled: {
type: Boolean,
required: false
},
defer: {
type: Boolean,
required: false
},
forceMount: {
type: Boolean,
required: false
}
},
setup(__props) {
const isMounted = require_dist.useMounted();
return (_ctx, _cache) => {
return (0, vue.unref)(isMounted) || _ctx.forceMount ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
key: 0,
to: _ctx.to,
disabled: _ctx.disabled,
defer: _ctx.defer
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, [
"to",
"disabled",
"defer"
])) : (0, vue.createCommentVNode)("v-if", true);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Popper/PopperRoot.js
var [injectPopperRootContext, providePopperRootContext] = require_VisuallyHidden.createContext("PopperRoot");
var PopperRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
inheritAttrs: false,
__name: "PopperRoot",
setup(__props) {
const anchor = (0, vue.ref)();
providePopperRootContext({
anchor,
onAnchorChange: (element) => anchor.value = element
});
return (_ctx, _cache) => {
return (0, vue.renderSlot)(_ctx.$slots, "default");
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Popper/PopperAnchor.js
var PopperAnchor_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "PopperAnchor",
props: {
reference: {
type: null,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
setup(__props) {
const props = __props;
const { forwardRef, currentElement } = require_useForwardExpose.useForwardExpose();
const rootContext = injectPopperRootContext();
(0, vue.watchPostEffect)(() => {
rootContext.onAnchorChange(props.reference ?? currentElement.value);
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden.Primitive), {
ref: (0, vue.unref)(forwardRef),
as: _ctx.as,
"as-child": _ctx.asChild
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, ["as", "as-child"]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Popper/utils.js
function isNotNull(value) {
return value !== null;
}
function transformOrigin(options) {
return {
name: "transformOrigin",
options,
fn(data) {
const { placement, rects, middlewareData } = data;
const isArrowHidden = middlewareData.arrow?.centerOffset !== 0;
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const noArrowAlign = {
start: "0%",
center: "50%",
end: "100%"
}[placedAlign];
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
let x = "";
let y = "";
if (placedSide === "bottom") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${-arrowHeight}px`;
} else if (placedSide === "top") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${rects.floating.height + arrowHeight}px`;
} else if (placedSide === "right") {
x = `${-arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
} else if (placedSide === "left") {
x = `${rects.floating.width + arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
return { data: {
x,
y
} };
}
};
}
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/Popper/PopperContent.js
var PopperContentPropsDefaultValue = {
side: "bottom",
sideOffset: 0,
sideFlip: true,
align: "center",
alignOffset: 0,
alignFlip: true,
arrowPadding: 0,
hideShiftedArrow: true,
avoidCollisions: true,
collisionBoundary: () => [],
collisionPadding: 0,
sticky: "partial",
hideWhenDetached: false,
positionStrategy: "fixed",
updatePositionStrategy: "optimized",
prioritizePosition: false
};
var [injectPopperContentContext, providePopperContentContext] = require_VisuallyHidden.createContext("PopperContent");
var PopperContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
inheritAttrs: false,
__name: "PopperContent",
props: /* @__PURE__ */ (0, vue.mergeDefaults)({
side: {
type: null,
required: false
},
sideOffset: {
type: Number,
required: false
},
sideFlip: {
type: Boolean,
required: false
},
align: {
type: null,
required: false
},
alignOffset: {
type: Number,
required: false
},
alignFlip: {
type: Boolean,
required: false
},
avoidCollisions: {
type: Boolean,
required: false
},
collisionBoundary: {
type: null,
required: false
},
collisionPadding: {
type: [Number, Object],
required: false
},
arrowPadding: {
type: Number,
required: false
},
hideShiftedArrow: {
type: Boolean,
required: false
},
sticky: {
type: String,
required: false
},
hideWhenDetached: {
type: Boolean,
required: false
},
positionStrategy: {
type: String,
required: false
},
updatePositionStrategy: {
type: String,
required: false
},
disableUpdateOnLayoutShift: {
type: Boolean,
required: false
},
prioritizePosition: {
type: Boolean,
required: false
},
reference: {
type: null,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
}, { ...PopperContentPropsDefaultValue }),
emits: ["placed"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const rootContext = injectPopperRootContext();
const { forwardRef, currentElement: contentElement } = require_useForwardExpose.useForwardExpose();
const floatingRef = (0, vue.ref)();
const arrow$1 = (0, vue.ref)();
const { width: arrowWidth, height: arrowHeight } = useSize(arrow$1);
const desiredPlacement = (0, vue.computed)(() => props.side + (props.align !== "center" ? `-${props.align}` : ""));
const collisionPadding = (0, vue.computed)(() => {
return typeof props.collisionPadding === "number" ? props.collisionPadding : {
top: 0,
right: 0,
bottom: 0,
left: 0,
...props.collisionPadding
};
});
const boundary = (0, vue.computed)(() => {
return Array.isArray(props.collisionBoundary) ? props.collisionBoundary : [props.collisionBoundary];
});
const detectOverflowOptions = (0, vu