bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
315 lines (314 loc) • 13.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_BButton = require("./BButton-DBRs8Pz_.js");
const require_BCloseButton = require("./BCloseButton-CN__Jjcj.js");
const require_ConditionalTeleport = require("./ConditionalTeleport-BJZk6HAx.js");
const require_getElement = require("./getElement-CxWWOx3K.js");
const require_useSafeScrollLock = require("./useSafeScrollLock-Bm9RxDoY.js");
let vue = require("vue");
//#region src/components/BOffcanvas/BOffcanvas.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["id", "aria-labelledby"];
var _hoisted_2 = ["id"];
var fallbackClassSelector = "offcanvas-fallback-focus";
//#endregion
//#region src/components/BOffcanvas/BOffcanvas.vue
var BOffcanvas_default = /* @__PURE__ */ (0, vue.defineComponent)({
inheritAttrs: false,
__name: "BOffcanvas",
props: /* @__PURE__ */ (0, vue.mergeModels)({
noBackdrop: {
type: Boolean,
default: false
},
backdropFirst: {
type: Boolean,
default: false
},
bodyAttrs: { default: void 0 },
bodyClass: { default: void 0 },
bodyScrolling: {
type: Boolean,
default: false
},
focus: {
type: [
String,
Boolean,
Object,
null
],
default: void 0
},
footerClass: { default: void 0 },
headerAttrs: { default: void 0 },
headerClass: { default: void 0 },
headerCloseClass: { default: void 0 },
headerCloseLabel: { default: "Close" },
headerCloseVariant: { default: "secondary" },
id: { default: void 0 },
noCloseOnBackdrop: {
type: Boolean,
default: false
},
noCloseOnEsc: {
type: Boolean,
default: false
},
noHeader: {
type: Boolean,
default: false
},
noTrap: {
type: Boolean,
default: false
},
noHeaderClose: {
type: Boolean,
default: false
},
placement: { default: "start" },
shadow: {
type: [String, Boolean],
default: false
},
title: { default: void 0 },
responsive: {},
width: { default: void 0 },
teleportDisabled: {
type: Boolean,
default: false
},
teleportTo: { default: "body" },
initialAnimation: {
type: Boolean,
default: false
},
noAnimation: {
type: Boolean,
default: false
},
noFade: { type: Boolean },
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)([
"close",
"esc",
"backdrop",
"breakpoint",
"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, "BOffcanvas");
const emit = __emit;
const slots = (0, vue.useSlots)();
const modelValue = (0, vue.useModel)(__props, "modelValue");
const computedId = require_useId.useId(() => props.id, "offcanvas");
const element = (0, vue.useTemplateRef)("_element");
const fallbackFocusElement = (0, vue.useTemplateRef)("_fallbackFocusElement");
const closeButton = (0, vue.useTemplateRef)("_close");
const pickFocusItem = () => {
if (props.focus && typeof props.focus !== "boolean") {
if (props.focus === "close") return closeButton;
return require_getElement.getElement(props.focus, element.value ?? void 0);
}
return element;
};
const onAfterEnter = () => {
(0, vue.nextTick)(() => {
if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) require_dist.unrefElement(pickFocusItem())?.focus();
});
};
const { showRef, renderRef, renderBackdropRef, hide, show, toggle, computedNoAnimation, contentShowing, transitionProps, backdropReady, backdropTransitionProps, backdropVisible, isVisible, buildTriggerableEvent, isLeaving, trapActive, setLocalNoAnimation } = require_useShowHide.useShowHide(modelValue, props, emit, element, computedId, { transitionProps: {
onAfterEnter,
enterToClass: "showing",
leaveToClass: "hiding",
enterActiveClass: "",
leaveActiveClass: "",
enterFromClass: "",
leaveFromClass: ""
} });
const smallerOrEqualToBreakpoint = require_dist.useBreakpoints(require_dist.breakpointsBootstrapV5).smallerOrEqual(() => props.responsive ?? "xs");
const isOpenByBreakpoint = (0, vue.ref)(false);
(0, vue.onMounted)(() => {
if (props.responsive !== void 0) {
isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value;
emit("breakpoint", buildTriggerableEvent("breakpoint"), isOpenByBreakpoint.value);
}
});
require_useSafeScrollLock.useSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value);
require_dist.onKeyStroke("Escape", () => {
hide("esc");
}, {
target: element,
passive: true
});
const { needsFallback } = require_useSafeScrollLock.useActivatedFocusTrap({
element,
isActive: trapActive,
noTrap: () => props.noTrap || isOpenByBreakpoint.value,
fallbackFocus: {
classSelector: fallbackClassSelector,
ref: fallbackFocusElement
},
focus: () => props.focus === false || isOpenByBreakpoint.value ? false : require_dist.unrefElement(pickFocusItem()) ?? void 0
});
const showBackdrop = (0, vue.computed)(() => (props.responsive === void 0 || !isOpenByBreakpoint.value) && props.noBackdrop === false && (showRef.value === true || isLeaving.value && props.backdropFirst && !computedNoAnimation.value));
const hasHeaderCloseSlot = (0, vue.computed)(() => !require_dom.isEmptySlot(slots["header-close"]));
const headerCloseClasses = (0, vue.computed)(() => [{ "text-reset": !hasHeaderCloseSlot.value }, props.headerCloseClass]);
const headerCloseAttrs = (0, vue.computed)(() => ({
variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : void 0,
class: headerCloseClasses.value
}));
const hasFooterSlot = (0, vue.computed)(() => !require_dom.isEmptySlot(slots.footer));
const computedClasses = (0, vue.computed)(() => [
props.responsive === void 0 ? "offcanvas" : `offcanvas-${props.responsive}`,
`offcanvas-${props.placement}`,
{
"show": isVisible.value,
[`shadow-${props.shadow}`]: !!props.shadow,
"no-transition": computedNoAnimation.value
}
]);
const computedStyles = (0, vue.computed)(() => ({ width: props.width }));
const sharedSlots = (0, vue.computed)(() => ({
visible: isVisible.value,
placement: props.placement,
hide,
show,
toggle,
id: computedId.value,
active: trapActive.value
}));
(0, vue.watch)(smallerOrEqualToBreakpoint, (newValue) => {
if (props.responsive === void 0) return;
if (newValue === true) {
const opened = false;
setLocalNoAnimation(true);
requestAnimationFrame(() => {
isOpenByBreakpoint.value = opened;
});
emit("breakpoint", buildTriggerableEvent("breakpoint"), opened);
emit("hide", buildTriggerableEvent("hide"));
} else {
const opened = true;
setLocalNoAnimation(true);
requestAnimationFrame(() => {
isOpenByBreakpoint.value = opened;
});
emit("breakpoint", buildTriggerableEvent("breakpoint"), opened);
emit("show", buildTriggerableEvent("show"));
}
});
__expose({
hide,
show,
toggle,
isOpenByBreakpoint
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(require_ConditionalTeleport.ConditionalTeleport_default, {
to: (0, vue.unref)(props).teleportTo,
disabled: (0, vue.unref)(props).teleportDisabled || isOpenByBreakpoint.value
}, {
default: (0, vue.withCtx)(() => [(0, vue.unref)(renderRef) || (0, vue.unref)(contentShowing) || isOpenByBreakpoint.value ? ((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),
ref: "_element",
"aria-modal": "true",
role: "dialog",
class: computedClasses.value,
style: computedStyles.value,
tabindex: "-1",
"aria-labelledby": `${(0, vue.unref)(computedId)}-offcanvas-label`,
"data-bs-backdrop": "false"
}, _ctx.$attrs), [(0, vue.unref)(contentShowing) || isOpenByBreakpoint.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [
!(0, vue.unref)(props).noHeader ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
key: 0,
class: ["offcanvas-header", (0, vue.unref)(props).headerClass]
}, (0, vue.unref)(props).headerAttrs), [(0, vue.renderSlot)(_ctx.$slots, "header", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createElementVNode)("h5", {
id: `${(0, vue.unref)(computedId)}-offcanvas-label`,
class: "offcanvas-title"
}, [(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)])], 8, _hoisted_2), !(0, vue.unref)(props).noHeaderClose ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [hasHeaderCloseSlot.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BButton.BButton_default, (0, vue.mergeProps)({
key: 0,
ref: "_close"
}, headerCloseAttrs.value, { onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(hide)("close")) }), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "header-close", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)))]),
_: 3
}, 16)) : ((0, vue.openBlock)(), (0, vue.createBlock)(require_BCloseButton.BCloseButton_default, (0, vue.mergeProps)({
key: 1,
ref: "_close",
"aria-label": (0, vue.unref)(props).headerCloseLabel
}, headerCloseAttrs.value, { onClick: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(hide)("close")) }), null, 16, ["aria-label"]))], 64)) : (0, vue.createCommentVNode)("", true)])], 16)) : (0, vue.createCommentVNode)("", true),
(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ class: ["offcanvas-body", (0, vue.unref)(props).bodyClass] }, (0, vue.unref)(props).bodyAttrs), [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)))], 16),
hasFooterSlot.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)((0, vue.unref)(props).footerClass)
}, [(0, vue.renderSlot)(_ctx.$slots, "footer", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)))], 2)) : (0, vue.createCommentVNode)("", true)
], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.unref)(needsFallback) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
ref: "_fallbackFocusElement",
class: (0, vue.normalizeClass)(fallbackClassSelector),
tabindex: "0",
style: {
"width": "0",
"height": "0",
"overflow": "hidden"
}
}, null, 512)) : (0, vue.createCommentVNode)("", true)], 16, _hoisted_1), [[vue.vShow, (0, vue.unref)(showRef) && ((0, vue.unref)(backdropReady) && (0, vue.unref)(props).backdropFirst || !(0, vue.unref)(props).backdropFirst) || isOpenByBreakpoint.value]])]),
_: 3
}, 16, ["appear"])) : (0, vue.createCommentVNode)("", true), !(0, vue.unref)(props).noBackdrop ? (0, vue.renderSlot)(_ctx.$slots, "backdrop", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, sharedSlots.value)), () => [(0, vue.unref)(renderBackdropRef) ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(backdropTransitionProps))), {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
class: (0, vue.normalizeClass)(["offcanvas-backdrop", {
fade: !(0, vue.unref)(computedNoAnimation),
show: (0, vue.unref)(backdropVisible) || (0, vue.unref)(computedNoAnimation)
}]),
onClick: _cache[2] || (_cache[2] = ($event) => (0, vue.unref)(hide)("backdrop"))
}, null, 2), [[vue.vShow, showBackdrop.value]])]),
_: 1
}, 16)) : (0, vue.createCommentVNode)("", true)]) : (0, vue.createCommentVNode)("", true)]),
_: 3
}, 8, ["to", "disabled"]);
};
}
});
//#endregion
Object.defineProperty(exports, "BOffcanvas_default", {
enumerable: true,
get: function() {
return BOffcanvas_default;
}
});
//# sourceMappingURL=BOffcanvas-D33pEfZe.js.map