yuang-framework-ui-pc/lib/ele-card/index.cjs

yuang-framework-ui-pc Library

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