"use strict";
const vue = require("vue");
const useDefaults = require("./useDefaults-YXpmugKp.js");
const useId = require("./useId-Dl8Hi5_U.js");
const keys = require("./keys-D70E9HED.js");
const useShowHide = require("./useShowHide-b1MKf6Ye.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    inheritAttrs: false
  },
  __name: "BCollapse",
  props: /* @__PURE__ */ 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__ */ vue.mergeModels(["hide", "hide-prevented", "hidden", "show", "show-prevented", "shown", "toggle", "toggle-prevented"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const _props = __props;
    const props = useDefaults.useDefaults(_props, "BCollapse");
    const emit = __emit;
    const modelValue = vue.useModel(__props, "modelValue");
    const computedId = useId.useId(() => props.id, "collapse");
    const element = 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
    } = useShowHide.useShowHide(modelValue, props, emit, element, computedId, {
      // addShowClass: false,
      transitionProps: {
        onBeforeLeave,
        onEnter,
        onLeave,
        onAfterEnter,
        onAfterLeave,
        enterToClass: "",
        leaveToClass: "",
        enterFromClass: "",
        leaveFromClass: "",
        enterActiveClass: "",
        leaveActiveClass: ""
      }
    });
    const computedClasses = vue.computed(() => ({
      "show": isActive.value,
      "navbar-collapse": props.isNav,
      "collapse-horizontal": props.horizontal
    }));
    const sharedSlots = vue.computed(() => ({
      toggle,
      show,
      hide,
      id: computedId.value,
      visible: showRef.value,
      active: isActive.value
    }));
    __expose({
      hide,
      isNav: props.isNav,
      show,
      toggle,
      visible: vue.readonly(showRef)
    });
    vue.provide(keys.collapseInjectionKey, {
      id: computedId,
      hide,
      show,
      toggle,
      visible: vue.readonly(showRef),
      isNav: vue.toRef(() => props.isNav)
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
        vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps(sharedSlots.value))),
        vue.unref(renderRef) || vue.unref(contentShowing) ? (vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ key: 0 }, vue.unref(transitionProps), {
          "enter-active-class": vue.unref(computedNoAnimation) ? "" : "collapsing",
          "leave-active-class": vue.unref(computedNoAnimation) ? "" : "collapsing",
          appear: modelValue.value || vue.unref(props).visible
        }), {
          default: vue.withCtx(() => [
            vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(props).tag), vue.mergeProps({
              id: vue.unref(computedId),
              ref: "_element",
              class: ["collapse", computedClasses.value],
              "is-nav": vue.unref(props).isNav
            }, _ctx.$attrs), {
              default: vue.withCtx(() => [
                vue.unref(contentShowing) ? vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({ key: 0 }, sharedSlots.value))) : vue.createCommentVNode("", true)
              ]),
              _: 3
            }, 16, ["id", "class", "is-nav"])), [
              [vue.vShow, vue.unref(showRef)]
            ])
          ]),
          _: 3
        }, 16, ["enter-active-class", "leave-active-class", "appear"])) : vue.createCommentVNode("", true),
        vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps(sharedSlots.value)))
      ], 64);
    };
  }
});
exports._sfc_main = _sfc_main;
//# sourceMappingURL=BCollapse.vue_vue_type_script_setup_true_lang-Cq0pRoa5.js.map
