@opensig/opendesign/es/collapse/OCollapseItem.vue.mjs

import { defineComponent, inject, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, unref, renderSlot, createTextVNode, toDisplayString, Transition, withCtx, withDirectives, vShow } from "vue";
import { collapseItemProps } from "./types.mjs";
import { IconChevronRight } from "../_utils/icons.mjs";
import { collapseInjectKey } from "./provide.mjs";
import { isUndefined } from "../_utils/is.mjs";
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__ */ defineComponent({
  __name: "OCollapseItem",
  props: collapseItemProps,
  setup(__props) {
    const props = __props;
    const collapseInjection = inject(collapseInjectKey, null);
    const isExpanded = computed(() => {
      if (isUndefined(props.value)) {
        return false;
      }
      if (collapseInjection) {
        return collapseInjection.computedValue.value.includes(props.value);
      }
      return false;
    });
    const onClick = (evt) => {
      evt.stopPropagation();
      if (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 openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-collapse-item", { "o-collapse-item-expanded": isExpanded.value }])
        },
        [
          createElementVNode("div", {
            class: "o-collapse-item-header",
            onClick
          }, [
            createElementVNode("span", _hoisted_1, [
              createVNode(unref(IconChevronRight))
            ]),
            props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_2, [
              renderSlot(_ctx.$slots, "title", {}, () => [
                createTextVNode(
                  toDisplayString(props.title),
                  1
                  /* TEXT */
                )
              ])
            ])) : createCommentVNode("v-if", true)
          ]),
          createVNode(Transition, {
            onBeforeEnter,
            onEnter,
            onAfterEnter,
            onBeforeLeave,
            onLeave,
            onAfterLeave,
            persisted: ""
          }, {
            default: withCtx(() => [
              withDirectives(createElementVNode(
                "div",
                _hoisted_3,
                [
                  renderSlot(_ctx.$slots, "default")
                ],
                512
                /* NEED_PATCH */
              ), [
                [vShow, isExpanded.value]
              ])
            ]),
            _: 3
            /* FORWARDED */
          })
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};