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

A high quality UI components Library with Vue.js

'use strict';

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

var vue = require('vue');
var styles = require('./styles.js');
var events = require('./events.js');
var utils = require('../utils.js');
var error = require('../../../utils/error.js');
var defaults = require('../table/defaults.js');

useRender;
function useRender(props) {
  const IvueTable = vue.inject(defaults.TableContextKey);
  const { getRowClass, getRowStyle, getTableSpan, getCellClass, getCellStyle } = styles["default"](props);
  const {
    handleClickTr,
    handleCellMouseEnter,
    handleCellMouseLeave,
    handleMouseEnter,
    handleMouseLeave
  } = events["default"](props);
  const firstDefaultColumnIndex = vue.computed(() => {
    var _a;
    return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(
      ({ type }) => type === "default"
    );
  });
  const getRowKey = (row, index) => {
    const rowKey = IvueTable.props.rowKey;
    if (rowKey) {
      return utils.getRowIdentity(row, rowKey);
    }
    return index;
  };
  const rowRender = (row, $index, treeRowData, expanded = false) => {
    const { store } = props;
    const { columns, indent } = store.states;
    const rowClasses = getRowClass(row, $index);
    let display = true;
    if (treeRowData) {
      rowClasses.push(`ivue-table-level-${treeRowData.level}`);
      display = treeRowData.display;
    }
    const displayStyle = display ? null : {
      display: "none"
    };
    return vue.h(
      "tr",
      {
        class: rowClasses,
        style: [displayStyle, getRowStyle(row, $index)],
        key: getRowKey(row, $index),
        onClick: ($event) => {
          handleClickTr($event, row);
        },
        onMouseenter: () => {
          handleMouseEnter($index);
        },
        onMouseleave: () => {
          handleMouseLeave();
        }
      },
      columns.value.map((column, cellIndex) => {
        const { rowspan, colspan } = getTableSpan(
          row,
          column,
          $index,
          cellIndex
        );
        if (!rowspan || !colspan) {
          return null;
        }
        const baseKey = `${$index},${cellIndex}`;
        const columnData = { ...column };
        const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
        const data = {
          store: props == null ? void 0 : props.store,
          _self: props.context || IvueTable,
          column: columnData,
          row,
          $index,
          cellIndex,
          expanded
        };
        if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
          data.treeNode = {
            indent: treeRowData.level * indent.value,
            level: treeRowData.level
          };
          if (typeof treeRowData.expanded === "boolean") {
            data.treeNode.expanded = treeRowData.expanded;
            if ("loading" in treeRowData) {
              data.treeNode.loading = treeRowData.loading;
            }
            if ("noLazyChildren" in treeRowData) {
              data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
            }
          }
        }
        return vue.h(
          "td",
          {
            class: getCellClass($index, cellIndex, row, column),
            style: getCellStyle($index, cellIndex, row, column),
            rowspan,
            colspan,
            key: `${patchKey}${baseKey}`,
            onMouseenter: (event) => {
              handleCellMouseEnter(event, row);
            },
            onMouseleave: (event) => {
              handleCellMouseLeave(event);
            }
          },
          [
            column.renderCell(data)
          ]
        );
      })
    );
  };
  const wrappedRowRender = (row, $index) => {
    const store = props.store;
    const { isRowExpanded, assertRowKey } = store;
    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
    const columns = store == null ? void 0 : store.states.columns.value;
    const hasExpandColumn = columns.some(({ type }) => type === "expand");
    if (hasExpandColumn) {
      const expanded = isRowExpanded(row);
      const tr = rowRender(
        row,
        $index,
        void 0,
        expanded
      );
      const renderExpanded = IvueTable.renderExpanded;
      if (expanded) {
        if (!renderExpanded) {
          console.error("[Error]renderExpanded is required.");
          return tr;
        }
        return [
          [
            tr,
            vue.h(
              "tr",
              {
                key: `expanded-row__${tr.key}`
              },
              [
                vue.h(
                  "td",
                  {
                    colspan: columns.length,
                    class: ["ivue-table-cell", "ivue-table--expand-cell"]
                  },
                  [
                    renderExpanded({
                      row,
                      $index,
                      store,
                      expanded
                    })
                  ]
                )
              ]
            )
          ]
        ];
      } else {
        return [[tr]];
      }
    } else if (Object.keys(treeData.value).length) {
      assertRowKey();
      const rowKeyData = utils.getRowIdentity(row, rowKey.value);
      let childrenData = treeData.value[rowKeyData];
      let treeRowData = null;
      if (childrenData) {
        treeRowData = {
          expanded: childrenData.expanded,
          level: childrenData.level,
          display: true
        };
        if (typeof childrenData.lazy === "boolean") {
          if (typeof childrenData.loaded === "boolean" && childrenData.loaded) {
            treeRowData.noLazyChildren = !(childrenData.children && childrenData.children.length);
          }
          treeRowData.loading = childrenData.loading;
        }
      }
      const dom = [rowRender(row, $index, treeRowData)];
      if (childrenData) {
        let i = 0;
        const traverse = (children, parent) => {
          if (!(children && children.length && parent)) {
            return;
          }
          children.forEach((node) => {
            const innerTreeRowData = {
              display: parent.display && parent.expanded,
              level: parent.level + 1,
              expanded: false,
              noLazyChildren: false,
              loading: false
            };
            const childKey = utils.getRowIdentity(node, rowKey.value);
            if (childKey === void 0 || childKey === null) {
              error.throwError(
                "ivue-table",
                "For nested data item, row-key is required"
              );
            }
            childrenData = { ...treeData.value[childKey] };
            if (childrenData) {
              innerTreeRowData.expanded = childrenData.expanded;
              childrenData.level = childrenData.level || innerTreeRowData.level;
              childrenData.display = !!(childrenData.expanded && innerTreeRowData.display);
              if (typeof childrenData.lazy === "boolean") {
                if (typeof childrenData.loaded === "boolean" && childrenData.loaded) {
                  innerTreeRowData.noLazyChildren = !(childrenData.children && childrenData.children.length);
                }
                innerTreeRowData.loading = childrenData.loading;
              }
            }
            i++;
            dom.push(rowRender(node, $index + i, innerTreeRowData));
            if (childrenData) {
              const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
              traverse(nodes2, childrenData);
            }
          });
        };
        childrenData.display = true;
        const nodes = lazyTreeNodeMap.value[rowKeyData] || row[childrenColumnName.value];
        traverse(nodes, childrenData);
      }
      return dom;
    } else {
      return rowRender(row, $index);
    }
  };
  return {
    wrappedRowRender
  };
}

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