ivue-material-plus/dist/unplugin-vue-components/lib/components/ivue-table/table-column/render.js

A high quality UI components Library with Vue.js

'use strict';

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

var vue = require('vue');
var config = require('../config.js');
var utils = require('../utils.js');

const prefixCls = "ivue-table";
function useRender(props, slots, parentDom) {
  const vm = vue.getCurrentInstance();
  const columnId = vue.ref("");
  const isSubColumn = vue.ref(false);
  const align = vue.ref();
  const headerAlign = vue.ref();
  const columnWidth = vue.ref(utils.parseWidth(props.width));
  const columnMinWidth = vue.ref(utils.parseMinWidth(props.minWidth));
  const columnParent = vue.computed(() => {
    let parent = vm.vnode.vParent || vm.parent;
    while (parent && !parent.tableId && !parent.columnId) {
      parent = parent.vnode.vParent || parent.parent;
    }
    return parent;
  });
  const hasTreeColumn = vue.computed(() => {
    const { store } = vm.parent;
    if (!store) {
      return false;
    }
    const { treeData } = store.states;
    const treeDataValue = treeData.value;
    return treeDataValue && Object.keys(treeDataValue).length > 0;
  });
  const getPropsData = (...propsKey) => {
    return propsKey.reduce((prev, cur) => {
      if (Array.isArray(cur)) {
        cur.forEach((key) => {
          prev[key] = props[key];
        });
      }
      return prev;
    }, {});
  };
  const checkSubColumn = (children) => {
    if (Array.isArray(children)) {
      children.forEach((child) => check(child));
    } else {
      check(children);
    }
    function check(item) {
      var _a;
      if (((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.name) === `${prefixCls}-column`) {
        item.vParent = vm;
      }
    }
  };
  const columnRender = (column) => {
    if (!props.renderHeader && column.type !== "selection" && column.type !== "index") {
      column.renderHeader = (scope) => {
        vm.columnConfig.value["label"];
        const renderHeader = slots.header;
        return renderHeader ? renderHeader(scope) : column.label;
      };
    }
    let originRenderCell = column.renderCell;
    const hasTreeColumnValue = hasTreeColumn.value;
    if (column.type === "expand") {
      column.renderCell = (data) => {
        return vue.h(
          "div",
          {
            class: "cell"
          },
          [originRenderCell(data)]
        );
      };
      parentDom.value.renderExpanded = (data) => {
        return slots.default ? slots.default(data) : slots.default;
      };
    } else {
      originRenderCell = originRenderCell || config.defaultRenderCell;
      column.renderCell = (data) => {
        let children = null;
        if (slots.default) {
          const vnode = slots.default(data);
          children = vnode.some((v) => v.type !== vue.Comment) ? vnode : originRenderCell(data);
        } else {
          children = originRenderCell(data);
        }
        const shouldCreatePlaceholder = hasTreeColumnValue && data.cellIndex === 0;
        const prefix = config.treeCellPrefix(data, shouldCreatePlaceholder);
        const props2 = {
          class: "cell",
          style: {}
        };
        if (column.showOverflowTooltip) {
          props2.class = `${props2.class} ${prefixCls}-tooltip`;
          props2.style = {
            width: `${(data.column.columnWidth || Number(data.column.width)) - 1}px`
          };
        }
        checkSubColumn(children);
        return vue.h("div", props2, [prefix, children]);
      };
    }
    return column;
  };
  const setColumnWidth = (column) => {
    if (columnWidth.value) {
      column.width = columnWidth.value;
    }
    if (columnMinWidth.value) {
      column.minWidth = columnMinWidth.value;
    }
    if (!column.minWidth) {
      column.minWidth = 80;
    }
    column.columnWidth = Number(
      column.width === void 0 ? column.minWidth : column.width
    );
    return column;
  };
  const setColumnProps = (column) => {
    const type = column.type;
    const source = config.cellForced[type] || {};
    Object.keys(source).forEach((prop) => {
      const value = source[prop];
      if (prop !== "className" && value !== void 0) {
        column[prop] = value;
      }
    });
    const className = config.getDefaultClassName(type);
    if (className) {
      column.className = column.className ? `${column.className} ${className}` : className;
    }
    return column;
  };
  const getColumnDomIndex = (children, el) => {
    return Array.prototype.indexOf.call(children, el);
  };
  vue.watchEffect(() => {
    align.value = props.align ? `is-${props.align}` : "";
    return align.value;
  });
  vue.watchEffect(() => {
    headerAlign.value = props.headerAlign ? `is-${props.headerAlign}` : align.value;
    return headerAlign.value;
  });
  return {
    columnId,
    isSubColumn,
    align,
    headerAlign,
    columnParent,
    getPropsData,
    getColumnDomIndex,
    columnRender,
    setColumnWidth,
    setColumnProps
  };
}

exports["default"] = useRender;
//# sourceMappingURL=render.js.map