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

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

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 onBeforeEnter = (el) => {
      el.style.height = "0px";
    };
    const onEnter = (el) => {
      el.style.height = `${el.scrollHeight}px`;
    };
    const onAfterEnter = (el) => {
      el.style.height = "auto";
    };
    const onBeforeLeave = (el) => {
      el.style.height = `${el.offsetHeight}px`;
    };
    const onLeave = (el) => {
      el.style.height = "0px";
    };
    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,
            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
};