hongluan-ui/lib/components/simple-table/src/body/cell.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index$2 = require('../../../popover/index.js');
var index$1 = require('../../../icon/index.js');
var index = require('../../../spinner/index.js');
require('../../../system-icon/index.js');
var defaultCellContent = require('./default-cell-content.js');
var simpleTable = require('../simple-table2.js');
var arrowRight = require('../../../system-icon/src/arrow-right.js');

var Cell = vue.defineComponent({
  props: {
    row: {
      type: Object,
      required: true
    },
    column: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number,
      required: true
    },
    columnIndex: {
      type: Number,
      required: true
    },
    width: String,
    minWidth: String,
    maxWidth: String,
    expanded: Boolean,
    showTooltip: Boolean,
    hasChildren: Boolean,
    hasTreeData: Boolean,
    isLoading: Boolean,
    treeExpanded: Boolean,
    firstColumnIndex: Number,
    cellClassName: {
      type: [String, Function],
      default: ""
    },
    cellStyle: {
      type: [Object, Function],
      default: () => ({})
    },
    span: Object
  },
  emits: ["mouseover", "mouseleave", "expand", "tree-expand", "cell-click"],
  setup(props, { emit, slots }) {
    const { row, column, rowIndex, columnIndex } = vue.toRefs(props);
    const cellClassName = typeof props.cellClassName === "string" ? props.cellClassName : props.cellClassName({ row: row.value, column: column.value, rowIndex: rowIndex.value, columnIndex: columnIndex.value });
    const cellStyle = typeof props.cellStyle === "function" ? props.cellStyle({ row: row.value, column: column.value, rowIndex: rowIndex.value, columnIndex: columnIndex.value }) : props.cellStyle;
    const { $parent } = vue.getCurrentInstance().proxy;
    const { isShowCol, getColFixed, hoverColIndex } = vue.inject(simpleTable.simpleTableContextKey);
    return () => {
      var _a, _b, _c, _d, _e, _f, _g, _h;
      const width = (_a = props.width) != null ? _a : column.value.width ? column.value.width : false;
      const minWidth = (_b = props.minWidth) != null ? _b : column.value.minWidth ? column.value.minWidth : false;
      const maxWidth = (_c = props.maxWidth) != null ? _c : column.value.maxWidth ? column.value.maxWidth : false;
      const align = column.value.align ? column.value.align : false;
      let treeNode = null;
      if (props.columnIndex === props.firstColumnIndex) {
        if (props.isLoading) {
          treeNode = vue.h("div", { class: "expand-icon" }, [vue.h(index.HlSpinner)]);
        } else if (props.hasChildren) {
          treeNode = vue.h("div", {
            class: "expand-icon cursor-pointer",
            onClick: () => emit("tree-expand")
          }, [
            vue.h(index$1.HlIcon, null, { default: () => [vue.h(arrowRight["default"])] })
          ]);
        } else if ($parent.$props.level) {
          treeNode = vue.h("div", {
            class: "placeholder-icon"
          });
        } else if (!$parent.$props.level && props.hasTreeData) {
          treeNode = vue.h("div", {
            class: "placeholder-icon"
          });
        }
      }
      let child = null;
      if (!column.value.slotName) {
        const defaultCellContent$1 = vue.h(defaultCellContent["default"], {
          row: row.value,
          column: column.value,
          onCellClick: ($event) => emit("cell-click", $event),
          onExpand: () => emit("expand")
        }, treeNode ? {
          "expand-icon": () => vue.h(treeNode)
        } : {});
        if (props.showTooltip) {
          child = vue.h(index$2.HlPopover, {
            content: row.value[column.value.prop],
            placement: "top",
            effect: "dark",
            tooltip: true,
            ...column.value.tooltipProps
          }, {
            reference: () => defaultCellContent$1
          });
        } else {
          child = defaultCellContent$1;
        }
      } else {
        child = vue.h("div", {
          class: "cell",
          style: [
            {
              "justify-content": align
            }
          ],
          onClick: ($event) => emit("cell-click", $event)
        }, [treeNode, (_d = slots.default) == null ? void 0 : _d.call(slots)]);
      }
      const TdNode = vue.withDirectives(vue.h("td", {
        rowspan: (_e = props.span) == null ? void 0 : _e.rowspan,
        colspan: (_f = props.span) == null ? void 0 : _f.colspan,
        class: [
          align ? `align-${align}` : "",
          {
            "show-tooltip": column.value.showTooltip,
            ["fixed-" + getColFixed(column.value).position]: !!column.value.fixed,
            "show-shadow": getColFixed(column.value).hasShadow,
            "expanded": props.expanded,
            "first-column-index": props.columnIndex === props.firstColumnIndex,
            "tree-expanded": props.columnIndex === props.firstColumnIndex && props.treeExpanded
          },
          cellClassName
        ],
        style: [
          {
            "width": width,
            "min-width": minWidth,
            "max-width": maxWidth
          },
          !!column.value.fixed && getColFixed(column.value, props.columnIndex).distance ? "--table-fixed-distance:" + getColFixed(column.value, props.columnIndex).distance : "",
          cellStyle
        ],
        onMouseover: ($event) => {
          hoverColIndex.value = props.columnIndex;
          emit("mouseover", $event);
        },
        onMouseleave: ($event) => emit("mouseleave", $event)
      }, [
        child
      ]), [[vue.vShow, isShowCol(column.value)]]);
      if (!((_g = props.span) == null ? void 0 : _g.rowspan) || !((_h = props.span) == null ? void 0 : _h.rowspan))
        return null;
      else
        return TdNode;
    };
  }
});

exports["default"] = Cell;
//# sourceMappingURL=cell.js.map