bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
177 lines (176 loc) • 5.12 kB
JavaScript
import { c as collapseInjectionKey } from "./keys-CQKrwmvN.mjs";
import { t as useId$1 } from "./useId-CCwnEmGh.mjs";
import { t as useDefaults } from "./useDefaults-CCWS15M8.mjs";
import { t as useShowHide } from "./useShowHide-wBe7O9iE.mjs";
import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, provide, readonly, renderSlot, resolveDynamicComponent, toRef, unref, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
//#endregion
//#region src/components/BCollapse/BCollapse.vue
var BCollapse_default = /* @__PURE__ */ defineComponent({
inheritAttrs: false,
__name: "BCollapse",
props: /* @__PURE__ */ 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__ */ mergeModels([
"hide",
"hide-prevented",
"hidden",
"show",
"show-prevented",
"shown",
"toggle",
"toggle-prevented"
], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = useDefaults(__props, "BCollapse");
const emit = __emit;
const modelValue = useModel(__props, "modelValue");
const computedId = useId$1(() => props.id, "collapse");
const element = 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 } = useShowHide(modelValue, props, emit, element, computedId, { transitionProps: {
onBeforeLeave,
onEnter,
onLeave,
onAfterEnter,
onAfterLeave,
enterToClass: "",
leaveToClass: "",
enterFromClass: "",
leaveFromClass: "",
enterActiveClass: "",
leaveActiveClass: ""
} });
const computedClasses = computed(() => ({
"show": isActive.value,
"navbar-collapse": props.isNav,
"collapse-horizontal": props.horizontal
}));
const sharedSlots = computed(() => ({
toggle,
show,
hide,
id: computedId.value,
visible: showRef.value,
active: isActive.value
}));
__expose({
hide,
isNav: props.isNav,
show,
toggle,
visible: readonly(showRef)
});
provide(collapseInjectionKey, {
id: computedId,
hide,
show,
toggle,
visible: readonly(showRef),
isNav: toRef(() => props.isNav)
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(sharedSlots.value))),
unref(renderRef) || unref(contentShowing) ? (openBlock(), createBlock(Transition, mergeProps({ key: 0 }, unref(transitionProps), {
"enter-active-class": unref(computedNoAnimation) ? "" : "collapsing",
"leave-active-class": unref(computedNoAnimation) ? "" : "collapsing",
appear: modelValue.value || unref(props).visible
}), {
default: withCtx(() => [withDirectives((openBlock(), createBlock(resolveDynamicComponent(unref(props).tag), mergeProps({
id: unref(computedId),
ref: "_element",
class: ["collapse", computedClasses.value],
"is-nav": unref(props).isNav
}, _ctx.$attrs), {
default: withCtx(() => [unref(contentShowing) ? renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 0 }, sharedSlots.value))) : createCommentVNode("", true)]),
_: 3
}, 16, [
"id",
"class",
"is-nav"
])), [[vShow, unref(showRef)]])]),
_: 3
}, 16, [
"enter-active-class",
"leave-active-class",
"appear"
])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(sharedSlots.value)))
], 64);
};
}
});
//#endregion
export { BCollapse_default as t };
//# sourceMappingURL=BCollapse-DqeS5WyB.mjs.map