hongluan-ui/es/components/simple-table/src/body/cell.mjs

Hongluan Component Library for Vue 3

import { defineComponent, toRefs, getCurrentInstance, inject, h, withDirectives, vShow } from 'vue';
import { HlPopover } from '../../../popover/index.mjs';
import { HlIcon } from '../../../icon/index.mjs';
import { HlSpinner } from '../../../spinner/index.mjs';
import '../../../system-icon/index.mjs';
import DefaultCellContent from './default-cell-content.mjs';
import { simpleTableContextKey } from '../simple-table2.mjs';
import SystemArrowRight from '../../../system-icon/src/arrow-right.mjs';

var Cell = 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 } = 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 } = getCurrentInstance().proxy;
    const { isShowCol, getColFixed, hoverColIndex } = inject(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 = h("div", { class: "expand-icon" }, [h(HlSpinner)]);
        } else if (props.hasChildren) {
          treeNode = h("div", {
            class: "expand-icon cursor-pointer",
            onClick: () => emit("tree-expand")
          }, [
            h(HlIcon, null, { default: () => [h(SystemArrowRight)] })
          ]);
        } else if ($parent.$props.level) {
          treeNode = h("div", {
            class: "placeholder-icon"
          });
        } else if (!$parent.$props.level && props.hasTreeData) {
          treeNode = h("div", {
            class: "placeholder-icon"
          });
        }
      }
      let child = null;
      if (!column.value.slotName) {
        const defaultCellContent = h(DefaultCellContent, {
          row: row.value,
          column: column.value,
          onCellClick: ($event) => emit("cell-click", $event),
          onExpand: () => emit("expand")
        }, treeNode ? {
          "expand-icon": () => h(treeNode)
        } : {});
        if (props.showTooltip) {
          child = h(HlPopover, {
            content: row.value[column.value.prop],
            placement: "top",
            effect: "dark",
            tooltip: true,
            ...column.value.tooltipProps
          }, {
            reference: () => defaultCellContent
          });
        } else {
          child = defaultCellContent;
        }
      } else {
        child = 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 = withDirectives(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
      ]), [[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;
    };
  }
});

export { Cell as default };
//# sourceMappingURL=cell.mjs.map