@opensig/opendesign/lib/collapse/OCollapseItem.vue.js

"use strict";
const vue = require("vue");
const types = require("./types.js");
const icons = require("../_utils/icons.js");
const provide = require("./provide.js");
const is = require("../_utils/is.js");
const _hoisted_1 = { class: "o-collapse-item-icon" };
const _hoisted_2 = {
  key: 0,
  class: "o-collapse-item-title"
};
const _hoisted_3 = { class: "o-collapse-item-body" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OCollapseItem",
  props: types.collapseItemProps,
  setup(__props) {
    const props = __props;
    const collapseInjection = vue.inject(provide.collapseInjectKey, null);
    const isExpanded = vue.computed(() => {
      if (is.isUndefined(props.value)) {
        return false;
      }
      if (collapseInjection) {
        return collapseInjection.computedValue.value.includes(props.value);
      }
      return false;
    });
    const onClick = (evt) => {
      evt.stopPropagation();
      if (is.isUndefined(props.value)) {
        return;
      }
      collapseInjection == null ? void 0 : collapseInjection.handleItemClick(props.value, evt);
    };
    const resetStyle = (el) => {
      el.style.maxHeight = "";
      el.style.overflow = el.dataset.oldOverflow ?? "";
      el.style.marginBottom = el.dataset.oldMarginBottom ?? "";
    };
    const onBeforeEnter = (el) => {
      const target = el;
      target.dataset.oldOverflow = target.style.overflow;
      target.dataset.oldMarginBottom = target.style.marginBottom;
      target.style.maxHeight = "0";
      target.style.marginBottom = "0";
      target.style.overflow = "hidden";
    };
    const onEnter = (el) => {
      const target = el;
      target.style.maxHeight = `${target.scrollHeight !== 0 ? target.scrollHeight : 0}px`;
      target.style.marginBottom = target.dataset.oldMarginBottom ?? "";
    };
    const onAfterEnter = (el) => {
      resetStyle(el);
    };
    const onBeforeLeave = (el) => {
      const target = el;
      target.dataset.oldOverflow = target.style.overflow;
      target.dataset.oldMarginBottom = target.style.marginBottom;
      target.style.maxHeight = `${target.scrollHeight}px`;
      target.style.overflow = "hidden";
    };
    const onLeave = (el) => {
      const target = el;
      if (target.scrollHeight !== 0) {
        target.style.maxHeight = "0";
        target.style.marginBottom = "0";
      }
    };
    const onAfterLeave = (el) => {
      resetStyle(el);
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["o-collapse-item", { "o-collapse-item-expanded": isExpanded.value }])
        },
        [
          vue.createElementVNode("div", {
            class: "o-collapse-item-header",
            onClick
          }, [
            vue.createElementVNode("span", _hoisted_1, [
              vue.createVNode(vue.unref(icons.IconChevronRight))
            ]),
            props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, [
              vue.renderSlot(_ctx.$slots, "title", {}, () => [
                vue.createTextVNode(
                  vue.toDisplayString(props.title),
                  1
                  /* TEXT */
                )
              ])
            ])) : vue.createCommentVNode("v-if", true)
          ]),
          vue.createVNode(vue.Transition, {
            onBeforeEnter,
            onEnter,
            onAfterEnter,
            onBeforeLeave,
            onLeave,
            onAfterLeave,
            persisted: ""
          }, {
            default: vue.withCtx(() => [
              vue.withDirectives(vue.createElementVNode(
                "div",
                _hoisted_3,
                [
                  vue.renderSlot(_ctx.$slots, "default")
                ],
                512
                /* NEED_PATCH */
              ), [
                [vue.vShow, isExpanded.value]
              ])
            ]),
            _: 3
            /* FORWARDED */
          })
        ],
        2
        /* CLASS */
      );
    };
  }
});
module.exports = _sfc_main;