bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
183 lines (182 loc) • 5.42 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_useShowHide = require("./useShowHide-BTCaeU5j.js");
let vue = require("vue");
//#endregion
//#region src/components/BCollapse/BCollapse.vue
var BCollapse_default = /* @__PURE__ */ (0, vue.defineComponent)({
inheritAttrs: false,
__name: "BCollapse",
props: /* @__PURE__ */ (0, vue.mergeModels)({
horizontal: {
type: Boolean,
default: false
},
id: { default: void 0 },
isNav: {
type: Boolean,
default: false
},
tag: { default: "div" },
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)([
"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, "BCollapse");
const emit = __emit;
const modelValue = (0, vue.useModel)(__props, "modelValue");
const computedId = require_useId.useId(() => props.id, "collapse");
const element = (0, vue.useTemplateRef)("_element");
let inCollapse = false;
const onEnter = (el) => {
inCollapse = true;
requestAnimationFrame(() => {
if (props.horizontal) el.style.width = `${el.scrollWidth}px`;
else el.style.height = `${el.scrollHeight}px`;
});
};
const onBeforeLeave = (el) => {
if (inCollapse) return;
if (props.horizontal) el.style.width = `${el.scrollWidth}px`;
else el.style.height = `${el.scrollHeight}px`;
el.offsetHeight;
};
const onLeave = (el) => {
requestAnimationFrame(() => {
if (props.horizontal) el.style.width = ``;
else el.style.height = ``;
});
};
const onAfterEnter = (el) => {
el.style.height = ``;
el.style.width = ``;
inCollapse = false;
};
const onAfterLeave = (el) => {
el.style.height = ``;
el.style.width = ``;
inCollapse = false;
};
const { showRef, renderRef, hide, show, toggle, isActive, computedNoAnimation, contentShowing, transitionProps } = require_useShowHide.useShowHide(modelValue, props, emit, element, computedId, { transitionProps: {
onBeforeLeave,
onEnter,
onLeave,
onAfterEnter,
onAfterLeave,
enterToClass: "",
leaveToClass: "",
enterFromClass: "",
leaveFromClass: "",
enterActiveClass: "",
leaveActiveClass: ""
} });
const computedClasses = (0, vue.computed)(() => ({
"show": isActive.value,
"navbar-collapse": props.isNav,
"collapse-horizontal": props.horizontal
}));
const sharedSlots = (0, vue.computed)(() => ({
toggle,
show,
hide,
id: computedId.value,
visible: showRef.value,
active: isActive.value
}));
__expose({
hide,
isNav: props.isNav,
show,
toggle,
visible: (0, vue.readonly)(showRef)
});
(0, vue.provide)(require_keys.collapseInjectionKey, {
id: computedId,
hide,
show,
toggle,
visible: (0, vue.readonly)(showRef),
isNav: (0, vue.toRef)(() => props.isNav)
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
(0, vue.renderSlot)(_ctx.$slots, "header", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value))),
(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), {
"enter-active-class": (0, vue.unref)(computedNoAnimation) ? "" : "collapsing",
"leave-active-class": (0, vue.unref)(computedNoAnimation) ? "" : "collapsing",
appear: modelValue.value || (0, vue.unref)(props).visible
}), {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).tag), (0, vue.mergeProps)({
id: (0, vue.unref)(computedId),
ref: "_element",
class: ["collapse", computedClasses.value],
"is-nav": (0, vue.unref)(props).isNav
}, _ctx.$attrs), {
default: (0, vue.withCtx)(() => [(0, vue.unref)(contentShowing) ? (0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, sharedSlots.value))) : (0, vue.createCommentVNode)("", true)]),
_: 3
}, 16, [
"id",
"class",
"is-nav"
])), [[vue.vShow, (0, vue.unref)(showRef)]])]),
_: 3
}, 16, [
"enter-active-class",
"leave-active-class",
"appear"
])) : (0, vue.createCommentVNode)("", true),
(0, vue.renderSlot)(_ctx.$slots, "footer", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)))
], 64);
};
}
});
//#endregion
Object.defineProperty(exports, "BCollapse_default", {
enumerable: true,
get: function() {
return BCollapse_default;
}
});
//# sourceMappingURL=BCollapse-DZ1z2c8U.js.map