bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
584 lines (583 loc) • 20.1 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_dist = require("./dist-BJ15ThEs.js");
const require_dom = require("./dom-Bs6DzM72.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_useShowHide = require("./useShowHide-BTCaeU5j.js");
const require_ConditionalTeleport = require("./ConditionalTeleport-BJZk6HAx.js");
const require_floating_ui_vue = require("./floating-ui.vue-GXIS2sFG.js");
const require_getElement = require("./getElement-CxWWOx3K.js");
let vue = require("vue");
//#region src/composables/useMouse.ts
var useMouse = require_dist.createSharedComposable(require_dist.useMouse);
//#endregion
//#region src/components/BPopover/BPopover.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["id"];
var _hoisted_2 = ["id"];
//#endregion
//#region src/components/BPopover/BPopover.vue
var BPopover_default = /* @__PURE__ */ (0, vue.defineComponent)({
inheritAttrs: false,
__name: "BPopover",
props: /* @__PURE__ */ (0, vue.mergeModels)({
body: { default: void 0 },
bodyClass: { default: void 0 },
boundary: { default: "clippingAncestors" },
boundaryPadding: { default: void 0 },
click: {
type: Boolean,
default: void 0
},
closeOnHide: {
type: Boolean,
default: false
},
focus: {
type: Boolean,
default: void 0
},
hover: {
type: Boolean,
default: void 0
},
delay: { default: () => ({
show: 100,
hide: 300
}) },
floatingMiddleware: { default: void 0 },
hideMargin: { default: 2 },
id: { default: void 0 },
inline: {
type: Boolean,
default: false
},
manual: {
type: Boolean,
default: false
},
noAutoClose: {
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" },
realtime: {
type: Boolean,
default: false
},
reference: {
type: [
String,
Object,
null,
Function
],
default: null
},
strategy: { default: "absolute" },
target: {
type: [
String,
Object,
null,
Function
],
default: null
},
title: { default: void 0 },
titleClass: { default: void 0 },
tooltip: {
type: Boolean,
default: false
},
teleportDisabled: {
type: Boolean,
default: false
},
teleportTo: { default: void 0 },
initialAnimation: {
type: Boolean,
default: false
},
noAnimation: { type: Boolean },
noFade: {
type: Boolean,
default: false
},
lazy: {
type: Boolean,
default: false
},
unmountLazy: {
type: Boolean,
default: false
},
show: {
type: Boolean,
default: false
},
transProps: {},
visible: {
type: Boolean,
default: false
}
}, {
"modelValue": {
type: Boolean,
default: false
},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ (0, vue.mergeModels)([
"click",
"pointerleave",
"blur",
"click-outside",
"close-on-hide",
"hide",
"hide-prevented",
"hidden",
"show",
"show-prevented",
"shown",
"toggle",
"toggle-prevented"
], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = require_useDefaults.useDefaults(__props, "BPopover");
const emit = __emit;
const slots = (0, vue.useSlots)();
const attrs = (0, vue.useAttrs)();
const modelValue = (0, vue.useModel)(__props, "modelValue");
const computedId = require_useId.useId(() => props.id, "popover");
const hidden = (0, vue.ref)(false);
const floatingElement = (0, vue.useTemplateRef)("_element");
const content = (0, vue.useTemplateRef)("_content");
const arrow$1 = (0, vue.useTemplateRef)("_arrow");
const placeholder = (0, vue.useTemplateRef)("_placeholder");
const referenceElement = (0, vue.ref)(null);
const triggerElement = (0, vue.ref)(null);
const isAutoPlacement = (0, vue.computed)(() => props.placement.startsWith("auto"));
const offsetNumber = require_dist.useToNumber(() => props.offset ?? NaN);
const boundary = (0, vue.computed)(() => isBoundary(props.boundary) ? props.boundary : void 0);
const rootBoundary = (0, vue.computed)(() => isRootBoundary(props.boundary) ? props.boundary : void 0);
const sizeStyles = (0, vue.ref)({});
const floatingMiddleware = (0, vue.computed)(() => {
if (props.floatingMiddleware !== void 0) return props.floatingMiddleware;
const arr = [require_floating_ui_vue.offset(props.offset !== null ? offsetNumber.value : props.tooltip ? 6 : 8)];
if (props.noFlip === false && !isAutoPlacement.value) arr.push(require_floating_ui_vue.flip({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
}));
if (isAutoPlacement.value) arr.push(require_floating_ui_vue.autoPlacement({
alignment: props.placement.split("-")[1] || void 0,
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
}));
if (props.noShift === false) arr.push(require_floating_ui_vue.shift({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
}));
if (props.noHide === false) arr.push(require_floating_ui_vue.hide({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding
}));
if (props.inline === true) arr.push(require_floating_ui_vue.inline());
arr.push(require_floating_ui_vue.arrow({
element: arrow$1,
padding: 10
}));
if (props.noSize === false) arr.push(require_floating_ui_vue.size({
boundary: boundary.value,
rootBoundary: rootBoundary.value,
padding: props.boundaryPadding,
apply({ availableWidth, availableHeight }) {
sizeStyles.value = {
"--bv-floating-max-height": availableHeight >= (content.value?.scrollHeight ?? 0) ? void 0 : availableHeight ? `${Math.max(0, availableHeight)}px` : void 0,
"--bv-floating-max-width": availableWidth >= (content.value?.scrollWidth ?? 0) ? void 0 : availableWidth ? `${Math.max(0, availableWidth)}px` : void 0
};
}
}));
return arr;
});
const { floatingStyles, middlewareData, placement, update } = require_floating_ui_vue.useFloating(referenceElement, floatingElement, {
placement: (0, vue.computed)(() => isAutoPlacement.value ? void 0 : props.placement),
middleware: floatingMiddleware,
strategy: (0, vue.toRef)(() => props.strategy)
});
const arrowStyle = (0, vue.ref)({ position: "absolute" });
let cleanup;
const { showRef, hide: hide$1, show, toggle, throttleHide, computedNoAnimation, transitionProps, contentShowing, isVisible, isActive, renderRef, localTemporaryHide, setLocalTemporaryHide } = require_useShowHide.useShowHide(modelValue, props, emit, floatingElement, computedId, {
showFn: () => {
update();
(0, vue.nextTick)(() => {
cleanup = require_floating_ui_vue.autoUpdate(referenceElement.value, floatingElement.value, update, { animationFrame: props.realtime });
});
},
hideFn: () => {
if (cleanup) {
cleanup();
cleanup = void 0;
}
}
});
(0, vue.watch)(middlewareData, (newValue) => {
if (props.noHide === false) {
if (newValue.hide?.referenceHidden && !hidden.value && showRef.value) if (props.closeOnHide && !props.noAutoClose && !props.manual) throttleHide("close-on-hide");
else {
setLocalTemporaryHide(true);
hidden.value = true;
}
else if (localTemporaryHide.value && !newValue.hide?.referenceHidden) {
setLocalTemporaryHide(false);
hidden.value = false;
}
}
if (newValue.arrow) {
const { x, y } = newValue.arrow;
arrowStyle.value = {
position: "absolute",
top: y ? `${y}px` : "",
left: x ? `${x}px` : ""
};
}
});
const computedClasses = (0, vue.computed)(() => {
const type = props.tooltip ? "tooltip" : "popover";
return [
type,
`b-${type}`,
{
show: isVisible.value && !hidden.value,
fade: !computedNoAnimation.value,
[`bs-${type}-${resolveBootstrapPlacement(placement.value)}`]: placement.value !== void 0
}
];
});
const { x, y } = useMouse();
const isElementAndTriggerOutside = () => {
const triggerRect = triggerElement.value?.getBoundingClientRect();
const elementRect = floatingElement.value?.getBoundingClientRect();
const margin = Number.parseInt(props.hideMargin, 10) || 0;
const offsetX = require_dom.getSafeWindow()?.scrollX || 0;
const offsetY = require_dom.getSafeWindow()?.scrollY || 0;
return {
triggerIsOutside: !triggerRect || x.value < triggerRect.left + offsetX - margin || x.value > triggerRect.right + offsetX + margin || y.value < triggerRect.top + offsetY - margin || y.value > triggerRect.bottom + offsetY + margin,
isOutside: !elementRect || x.value < elementRect.left + offsetX - margin || x.value > elementRect.right + offsetX + margin || y.value < elementRect.top + offsetY - margin || y.value > elementRect.bottom + offsetY + margin
};
};
let looptimeout;
const tryHide = (e) => {
const { triggerIsOutside, isOutside } = isElementAndTriggerOutside();
const doc = require_dom.getSafeDocument();
if (!props.noninteractive && isOutside && triggerIsOutside && doc && !floatingElement.value?.contains(doc.activeElement) && (!computedTriggers.value.focus || !triggerElement.value?.contains(doc.activeElement)) || props.noninteractive && triggerIsOutside) hide$1(e?.type);
else {
if (looptimeout) clearTimeout(looptimeout);
looptimeout = setTimeout(() => {
tryHide(e);
}, 50);
}
};
(0, vue.watch)(isVisible, () => {
update();
});
__expose({
hide: hide$1,
show,
toggle
});
const localToggle = (e) => {
if (showRef.value) hide$1(e.type === "click" ? "click" : "toggle");
else show();
};
const localShow = () => {
show();
};
const computedTriggers = (0, vue.computed)(() => {
if (props.manual) return {
hover: false,
focus: false,
click: false
};
if (props.hover !== void 0 || props.focus !== void 0 || props.click !== void 0) return {
hover: props.hover ?? false,
focus: props.focus ?? false,
click: props.click ?? false
};
return {
hover: true,
focus: true,
click: false
};
});
const bind = () => {
if (props.target) {
const elem = require_getElement.getElement((0, vue.toValue)(props.target));
if (elem) triggerElement.value = elem;
else console.warn("Target element not found", props.target);
} else triggerElement.value = placeholder.value?.nextElementSibling;
if (props.reference) {
const elem = require_getElement.getElement((0, vue.toValue)(props.reference));
if (elem) referenceElement.value = elem;
else console.warn("Reference element not found", props.reference);
} else referenceElement.value = triggerElement.value;
if (!triggerElement.value || props.manual) return;
const triggers = computedTriggers.value;
if (triggers.click) triggerElement.value.addEventListener("click", localToggle);
if (triggers.hover) {
triggerElement.value.addEventListener("pointerenter", localShow);
triggerElement.value.addEventListener("pointerleave", tryHide);
}
if (triggers.focus) {
triggerElement.value.addEventListener("focus", localShow);
triggerElement.value.addEventListener("blur", tryHide);
}
};
const unbind = () => {
if (triggerElement.value) {
triggerElement.value.removeEventListener("click", localToggle);
triggerElement.value.removeEventListener("pointerenter", localShow);
triggerElement.value.removeEventListener("pointerleave", tryHide);
triggerElement.value.removeEventListener("focus", localShow);
triggerElement.value.removeEventListener("blur", tryHide);
}
};
require_dist.onClickOutside(floatingElement, () => {
if (showRef.value && computedTriggers.value.click && !props.noAutoClose && !props.manual) hide$1("click-outside");
}, { ignore: [triggerElement] });
(0, vue.watch)([
() => props.click,
() => props.hover,
() => props.focus,
() => props.manual,
() => props.target,
() => props.reference
], () => {
unbind();
bind();
});
const sharedSlots = (0, vue.computed)(() => ({
toggle,
show,
hide: hide$1,
id: computedId.value,
visible: isVisible.value,
active: isActive.value
}));
(0, vue.onMounted)(() => {
bind();
(0, vue.nextTick)(() => {
update();
});
});
(0, vue.onBeforeUnmount)(unbind);
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
(0, vue.createElementVNode)("span", {
id: (0, vue.unref)(computedId) + "_placeholder",
ref: "_placeholder",
style: { "display": "none" }
}, null, 8, _hoisted_1),
(0, vue.renderSlot)(_ctx.$slots, "target", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value))),
(0, vue.createVNode)(require_ConditionalTeleport.ConditionalTeleport_default, {
to: (0, vue.unref)(props).teleportTo,
disabled: !(0, vue.unref)(props).teleportTo || (0, vue.unref)(props).teleportDisabled
}, {
default: (0, vue.withCtx)(() => [(0, vue.unref)(renderRef) || (0, vue.unref)(contentShowing) ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(transitionProps), { appear: modelValue.value || (0, vue.unref)(props).visible }), {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", (0, vue.mergeProps)({ id: (0, vue.unref)(computedId) }, (0, vue.unref)(attrs), {
ref: "_element",
class: computedClasses.value,
role: "tooltip",
tabindex: "-1",
style: (0, vue.unref)(floatingStyles)
}), [(0, vue.createElementVNode)("div", {
ref: "_arrow",
class: (0, vue.normalizeClass)(`${(0, vue.unref)(props).tooltip ? "tooltip" : "popover"}-arrow`),
style: (0, vue.normalizeStyle)(arrowStyle.value),
"data-popper-arrow": ""
}, null, 6), (0, vue.createElementVNode)("div", {
ref: "_content",
class: "overflow-auto b-floating-size",
style: (0, vue.normalizeStyle)(sizeStyles.value)
}, [(0, vue.unref)(props).title || slots.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)(["position-sticky top-0", [(0, vue.unref)(props).tooltip ? "tooltip-inner" : "popover-header", (0, vue.unref)(props).titleClass]])
}, [(0, vue.renderSlot)(_ctx.$slots, "title", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).title), 1)])], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.unref)(props).tooltip && !slots.title && !(0, vue.unref)(props).title || !(0, vue.unref)(props).tooltip ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)([(0, vue.unref)(props).tooltip ? "tooltip-inner" : "popover-body", (0, vue.unref)(props).bodyClass])
}, [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).body) + (0, vue.toDisplayString)((0, vue.unref)(attrs).content), 1)])], 2)) : (0, vue.createCommentVNode)("", true)], 4)], 16, _hoisted_2), [[vue.vShow, (0, vue.unref)(showRef) && !hidden.value]])]),
_: 3
}, 16, ["appear"])) : (0, vue.createCommentVNode)("", true)]),
_: 3
}, 8, ["to", "disabled"])
], 64);
};
}
});
//#endregion
//#region src/utils/floatingUi.ts
var resolveBootstrapPlacement = (placement) => {
const [_placement] = placement.split("-");
switch (_placement) {
case "left": return "start";
case "right": return "end";
default: return _placement || "start";
}
};
var resolveBootstrapCaret = (placement) => {
const [_placement] = placement.split("-");
switch (_placement) {
case "left": return "start";
case "right": return "end";
case "top": return "up";
case "bottom": return "down";
default: return _placement || "start";
}
};
var resolveActiveStatus = (values) => typeof values !== "object" || values.active !== false;
var resolveContent = (values, el) => {
if (!resolveActiveStatus(values)) return {};
const missingBindingValue = typeof values === "undefined" || typeof values === "object" && !values.title && !values.content && !values.body;
if (require_dom.getSafeDocument() !== null) {
const titleAttr = el.getAttribute("title") || el.getAttribute("data-original-title");
if (titleAttr) {
el.removeAttribute("title");
el.setAttribute("data-original-title", titleAttr);
}
if (missingBindingValue) {
if (titleAttr) return { body: titleAttr };
return {};
}
if (typeof values === "string") return {
title: titleAttr || void 0,
body: values
};
} else if (missingBindingValue) return {};
if (typeof values === "string") return { body: values };
if (values?.content) console.warn("v-b-popover/v-b-tooltip: `content` is deprecated, use `body` instead");
return {
title: values?.title ? values?.title : void 0,
body: values?.body ? values?.body : values?.content ? values?.content : void 0
};
};
var resolveDirectiveProps = (binding, el) => ({
target: el,
modelValue: binding.modifiers.show,
inline: binding.modifiers.inline,
click: binding.modifiers.click,
hover: binding.modifiers.hover,
focus: binding.modifiers.focus,
manual: binding.modifiers.manual,
realtime: binding.modifiers.realtime,
lazy: binding.modifiers.lazy,
placement: binding.modifiers.left ? "left" : binding.modifiers.right ? "right" : binding.modifiers.bottom ? "bottom" : binding.modifiers.top ? "top" : void 0,
...typeof binding.value === "object" ? binding.value : void 0,
...binding.modifiers.interactive ? { noninteractive: false } : void 0,
title: null,
body: null
});
var bind = (el, binding, props) => {
const doc = require_dom.getSafeDocument();
if (doc === null) return;
const div = doc.createElement("span");
if (binding.modifiers.body) doc.body.appendChild(div);
else if (binding.modifiers.child) el.appendChild(div);
else el.parentNode?.insertBefore(div, el.nextSibling);
(0, vue.render)((0, vue.h)(BPopover_default, props), div);
el.$__element = div;
};
var unbind = (el) => {
const div = el.$__element;
if (!div) return;
(0, vue.render)(null, div);
if (require_dom.getSafeDocument() !== null) {
delete el.$__element;
return;
}
queueMicrotask(() => {
div.remove();
if (el.$__element === div) delete el.$__element;
});
};
var isBoundary = (input) => input === "clippingAncestors" || input instanceof Element || Array.isArray(input);
var isRootBoundary = (input) => !isBoundary(input);
//#endregion
Object.defineProperty(exports, "BPopover_default", {
enumerable: true,
get: function() {
return BPopover_default;
}
});
Object.defineProperty(exports, "bind", {
enumerable: true,
get: function() {
return bind;
}
});
Object.defineProperty(exports, "isBoundary", {
enumerable: true,
get: function() {
return isBoundary;
}
});
Object.defineProperty(exports, "isRootBoundary", {
enumerable: true,
get: function() {
return isRootBoundary;
}
});
Object.defineProperty(exports, "resolveActiveStatus", {
enumerable: true,
get: function() {
return resolveActiveStatus;
}
});
Object.defineProperty(exports, "resolveBootstrapCaret", {
enumerable: true,
get: function() {
return resolveBootstrapCaret;
}
});
Object.defineProperty(exports, "resolveContent", {
enumerable: true,
get: function() {
return resolveContent;
}
});
Object.defineProperty(exports, "resolveDirectiveProps", {
enumerable: true,
get: function() {
return resolveDirectiveProps;
}
});
Object.defineProperty(exports, "unbind", {
enumerable: true,
get: function() {
return unbind;
}
});
//# sourceMappingURL=floatingUi-Cs4rDXmO.js.map