song-ui-u/lib/components/collapse/src/collapse-item.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var constants = require('../constants.cjs');
var index = require('../../../hook/use-namespace/index.cjs');
require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');

var collapseItem = /* @__PURE__ */ vue.defineComponent({
  name: "x-collapse-item",
  props: {
    name: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ""
    }
  },
  setup(props, {
    slots
  }) {
    const collapseCtx = vue.inject(constants.COLLAPSE_KEY);
    const contentHeight = vue.ref("0px");
    const contentRef = vue.ref(null);
    const isTransitioning = vue.ref(false);
    vue.provide(constants.COLLAPSE_ITEM_KEY, {
      props
    });
    const ns = index.useNamespace("collapse-item");
    const isActive = vue.computed(() => {
      return collapseCtx?.isItemActive(props.name);
    });
    const handleHeaderClick = () => {
      if (props.disabled) return;
      collapseCtx?.handleItemClick(props.name);
    };
    const setContentHeight = async () => {
      if (!contentRef.value) return;
      isTransitioning.value = true;
      if (isActive.value) {
        contentHeight.value = "auto";
        await vue.nextTick();
        const height = contentRef.value.offsetHeight;
        contentHeight.value = "0px";
        await new Promise((resolve) => requestAnimationFrame(resolve));
        contentHeight.value = `${height}px`;
      } else {
        const height = contentRef.value.offsetHeight;
        contentHeight.value = `${height}px`;
        await new Promise((resolve) => requestAnimationFrame(resolve));
        contentHeight.value = "0px";
      }
      setTimeout(() => {
        isTransitioning.value = false;
        if (isActive.value) {
          contentHeight.value = "auto";
        }
      }, 300);
    };
    const watchActiveChange = vue.computed(() => {
      setContentHeight();
      return isActive.value;
    });
    vue.onMounted(() => {
      collapseCtx?.setCollapseItems({
        name: props.name,
        title: props.title
      });
      if (isActive.value) {
        vue.nextTick(() => {
          contentHeight.value = "auto";
        });
      }
    });
    return () => {
      watchActiveChange.value;
      return vue.createVNode("div", {
        "class": [ns.b(), isActive.value ? ns.is("active") : ""]
      }, [vue.createVNode("div", {
        "class": [ns.e("title"), isActive.value ? ns.is("active") : "", props.disabled ? ns.is("disabled") : ""],
        "onClick": handleHeaderClick
      }, [props.icon && vue.createVNode("i", {
        "class": props.icon
      }, null), props.title || slots.title?.(), vue.createVNode("i", {
        "class": [ns.e("title-arrow"), "x-icon-arrow-right"]
      }, null)]), vue.createVNode("div", {
        "class": ns.e("content"),
        "style": {
          height: contentHeight.value
        },
        "ref": contentRef
      }, [vue.createVNode("div", {
        "class": ns.e("content-box")
      }, [slots.default?.()])])]);
    };
  }
});

module.exports = collapseItem;
//# sourceMappingURL=collapse-item.cjs.map