yuang-framework-ui-pc/es/ele-card/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withModifiers, createVNode, withCtx, Transition, withDirectives, vShow } from "vue";
import { ElIcon } from "element-plus";
import { ArrowUp } from "../icons";
import { useCollapseAnim } from "../utils/hook";
import { cardProps, cardEmits } from "./props";
const _sfc_main = defineComponent({
  name: "EleCard",
  components: { ElIcon, ArrowUp },
  props: cardProps,
  emits: cardEmits,
  setup(props, { emit }) {
    const {
      handleBeforeEnter,
      handleEnter,
      handleAfterEnter,
      handleBeforeLeave,
      handleLeave,
      handleAfterLeave
    } = useCollapseAnim();
    const isCollapse = ref(!!props.collapse);
    const handleCollapseClick = () => {
      isCollapse.value = !isCollapse.value;
      emit("collapseChange", isCollapse.value);
    };
    const handleHeaderClick = () => {
      if (props.collapsable === "header") {
        handleCollapseClick();
      }
    };
    watch(
      () => props.collapse,
      (collapse) => {
        if (isCollapse.value !== !!collapse) {
          isCollapse.value = !!collapse;
        }
      }
    );
    return {
      isCollapse,
      handleBeforeLeave,
      handleLeave,
      handleAfterLeave,
      handleBeforeEnter,
      handleEnter,
      handleAfterEnter,
      handleCollapseClick,
      handleHeaderClick
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ArrowUp = resolveComponent("ArrowUp");
  const _component_ElIcon = resolveComponent("ElIcon");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass([
      "ele-card",
      { "is-border": _ctx.bordered },
      { "is-shadow": _ctx.shadow === "always" },
      { "is-hover-shadow": _ctx.shadow === "hover" },
      { "is-collapse": _ctx.isCollapse },
      { "is-flex-table": _ctx.flexTable }
    ])
  }, [
    _ctx.header || _ctx.$slots.header || _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: "ele-card-header",
      style: normalizeStyle(_ctx.headerStyle),
      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleHeaderClick && _ctx.handleHeaderClick(...args))
    }, [
      createElementVNode("div", {
        class: "ele-card-title",
        style: normalizeStyle(_ctx.titleStyle)
      }, [
        renderSlot(_ctx.$slots, "header", {}, () => [
          createTextVNode(toDisplayString(_ctx.header), 1)
        ])
      ], 4),
      _ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", { key: 0 }) : createCommentVNode("", true),
      _ctx.collapsable ? (openBlock(), createElementBlock("div", {
        key: 1,
        style: normalizeStyle(_ctx.collapseIconStyle),
        class: "ele-card-collapse-icon",
        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleCollapseClick && _ctx.handleCollapseClick(...args), ["stop"]))
      }, [
        renderSlot(_ctx.$slots, "collapseIcon", { collapse: _ctx.isCollapse }, () => [
          createVNode(_component_ElIcon, null, {
            default: withCtx(() => [
              createVNode(_component_ArrowUp)
            ]),
            _: 1
          })
        ])
      ], 4)) : createCommentVNode("", true)
    ], 4)) : createCommentVNode("", true),
    createVNode(Transition, {
      name: "ele-card-slide",
      onBeforeLeave: _ctx.handleBeforeLeave,
      onLeave: _ctx.handleLeave,
      onAfterLeave: _ctx.handleAfterLeave,
      onBeforeEnter: _ctx.handleBeforeEnter,
      onEnter: _ctx.handleEnter,
      onAfterEnter: _ctx.handleAfterEnter
    }, {
      default: withCtx(() => [
        withDirectives(createElementVNode("div", {
          class: normalizeClass(["ele-card-body", _ctx.bodyClass]),
          style: normalizeStyle(_ctx.bodyStyle)
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 6), [
          [vShow, !_ctx.isCollapse]
        ])
      ]),
      _: 3
    }, 8, ["onBeforeLeave", "onLeave", "onAfterLeave", "onBeforeEnter", "onEnter", "onAfterEnter"]),
    _ctx.footer || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
      key: 1,
      class: "ele-card-footer",
      style: normalizeStyle(_ctx.footerStyle)
    }, [
      renderSlot(_ctx.$slots, "footer", {}, () => [
        createTextVNode(toDisplayString(_ctx.footer), 1)
      ])
    ], 4)) : createCommentVNode("", true)
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};