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

<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>

"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 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 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,
            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;