@fe6/water-pro/es/table-pro/src/components/table-card.js

An enterprise-class UI design language and Vue-based implementation

import { createVNode as _createVNode, resolveComponent as _resolveComponent } from "vue";
import { defineComponent } from 'vue';
import useConfigInject from '../../../_util/hooks/useConfigInject';
import { errImage } from './error-image';
export default defineComponent({
  name: 'ATableCard',
  props: {
    imgSize: {
      type: Number,
      default: 80
    },
    imgUrl: {
      type: String,
      default: ''
    },
    imgBorderd: {
      type: Boolean,
      default: true
    },
    imgPreview: {
      type: Boolean,
      default: false
    },
    imgErrorImage: {
      type: String,
      default: errImage
    },
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    descMaxLength: {
      type: Number,
      default: 14
    },
    titleMaxLength: {
      type: Number,
      default: 14
    },
    prefixCls: String
  },
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('table-pro-card', props),
        prefixClsNew = _useConfigInject.prefixCls;

    return {
      prefixClsNew: prefixClsNew
    };
  },
  render: function render() {
    var _a, _b, _c;

    var titleNode = null;
    var titleSuffixNodes = (_b = (_a = this.$slots).titleSuffix) === null || _b === void 0 ? void 0 : _b.call(_a);
    var hasTitleSuffixNode = ((_c = titleSuffixNodes === null || titleSuffixNodes === void 0 ? void 0 : titleSuffixNodes[0]) === null || _c === void 0 ? void 0 : _c.shapeFlag) !== 8;

    if (this.title) {
      titleNode = _createVNode(_resolveComponent("a-typography-text"), {
        "style": {
          width: hasTitleSuffixNode ? 'calc(100% - 32px)' : '100%'
        },
        "class": "".concat(this.prefixClsNew, "-text"),
        "ellipsis": this.title.length > this.titleMaxLength ? {
          tooltip: this.title
        } : false,
        "content": this.title
      }, null);
    }

    var descNode = null;

    if (this.desc) {
      descNode = _createVNode(_resolveComponent("a-typography-text"), {
        "class": "".concat(this.prefixClsNew, "-text"),
        "ellipsis": this.desc.length > this.descMaxLength ? {
          tooltip: this.desc
        } : false,
        "type": "secondary",
        "size": "small",
        "content": this.desc
      }, null);
    }

    return _createVNode("div", {
      "class": this.prefixClsNew
    }, [_createVNode(_resolveComponent("a-image"), {
      "width": this.imgSize,
      "height": this.imgSize,
      "src": this.imgUrl,
      "class": "voucher-list-img",
      "preview": this.imgPreview,
      "bordered": this.imgBorderd,
      "fallback": this.imgErrorImage
    }, null), _createVNode("div", {
      "class": "".concat(this.prefixClsNew, "-core"),
      "style": this.desc ? "width: calc(100% - ".concat(this.imgSize, "px)") : "width: calc(100% - ".concat(this.imgSize, "px);line-height: ").concat(this.imgSize, "px")
    }, [_createVNode("div", {
      "class": ["".concat(this.prefixClsNew, "-title")]
    }, [titleNode, titleSuffixNodes]), descNode])]);
  }
});