element-ps 1.0.0-alpha.6 → 1.0.1

package/lib/packages/components/table/src/table-body/render-helper.js

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var util = require('../util.js');
+var eventsHelper = require('./events-helper.js');
+var stylesHelper = require('./styles-helper.js');
+
+function useRender(props) {
+  const instance = vue.getCurrentInstance();
+  const parent = instance.parent;
+  const {
+    handleDoubleClick,
+    handleClick,
+    handleContextMenu,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleCellMouseEnter,
+    handleCellMouseLeave,
+    tooltipContent,
+    tooltipTrigger
+  } = eventsHelper["default"](props);
+  const {
+    getRowStyle,
+    getRowClass,
+    getCellStyle,
+    getCellClass,
+    getSpan,
+    getColspanRealWidth
+  } = stylesHelper["default"](props);
+  const firstDefaultColumnIndex = vue.computed(() => {
+    return props.store.states.columns.value.findIndex(({ type }) => type === "default");
+  });
+  const getKeyOfRow = (row, index) => {
+    const rowKey = parent.props.rowKey;
+    if (rowKey) {
+      return util.getRowIdentity(row, rowKey);
+    }
+    return index;
+  };
+  const rowRender = (row, $index, treeRowData) => {
+    const { tooltipEffect, store } = props;
+    const { indent, columns } = store.states;
+    const rowClasses = getRowClass(row, $index);
+    let display = true;
+    if (treeRowData) {
+      rowClasses.push(`el-table__row--level-${treeRowData.level}`);
+      display = treeRowData.display;
+    }
+    const displayStyle = display ? null : {
+      display: "none"
+    };
+    return vue.h("tr", {
+      style: [displayStyle, getRowStyle(row, $index)],
+      class: rowClasses,
+      key: getKeyOfRow(row, $index),
+      onDblclick: ($event) => handleDoubleClick($event, row),
+      onClick: ($event) => handleClick($event, row),
+      onContextmenu: ($event) => handleContextMenu($event, row),
+      onMouseenter: () => handleMouseEnter($index),
+      onMouseleave: handleMouseLeave
+    }, columns.value.map((column, cellIndex) => {
+      const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
+      if (!rowspan || !colspan) {
+        return null;
+      }
+      const columnData = { ...column };
+      columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
+      const data = {
+        store: props.store,
+        _self: props.context || parent,
+        column: columnData,
+        row,
+        $index
+      };
+      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;
+          }
+        }
+      }
+      const baseKey = `${$index},${cellIndex}`;
+      const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
+      return vue.h("td", {
+        style: getCellStyle($index, cellIndex, row, column),
+        class: getCellClass($index, cellIndex, row, column),
+        key: `${patchKey}${baseKey}`,
+        rowspan,
+        colspan,
+        onMouseenter: ($event) => handleCellMouseEnter($event, { ...row, tooltipEffect }),
+        onMouseleave: handleCellMouseLeave,
+        widget: column.widget
+      }, [column.renderCell(data)]);
+    }));
+  };
+  const wrappedRowRender = (row, $index) => {
+    const store = props.store;
+    const { isRowExpanded, assertRowKey } = store;
+    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
+    const hasExpandColumn = store.states.columns.value.some(({ type }) => type === "expand");
+    if (hasExpandColumn && isRowExpanded(row)) {
+      const renderExpanded = parent.renderExpanded;
+      const tr = rowRender(row, $index, void 0);
+      if (!renderExpanded) {
+        console.error("[Element Error]renderExpanded is required.");
+        return tr;
+      }
+      return [
+        [
+          tr,
+          vue.h("tr", {
+            key: `expanded-row__${tr.key}`
+          }, [
+            vue.h("td", {
+              colspan: store.states.columns.value.length,
+              class: "el-table__cell el-table__expanded-cell"
+            }, [renderExpanded({ row, $index, store })])
+          ])
+        ]
+      ];
+    } else if (Object.keys(treeData.value).length) {
+      assertRowKey();
+      const key = util.getRowIdentity(row, rowKey.value);
+      let cur = treeData.value[key];
+      let treeRowData = null;
+      if (cur) {
+        treeRowData = {
+          expanded: cur.expanded,
+          level: cur.level,
+          display: true
+        };
+        if (typeof cur.lazy === "boolean") {
+          if (typeof cur.loaded === "boolean" && cur.loaded) {
+            treeRowData.noLazyChildren = !(cur.children && cur.children.length);
+          }
+          treeRowData.loading = cur.loading;
+        }
+      }
+      const tmp = [rowRender(row, $index, treeRowData)];
+      if (cur) {
+        let i = 0;
+        const traverse = (children, parent2) => {
+          if (!(children && children.length && parent2))
+            return;
+          children.forEach((node) => {
+            const innerTreeRowData = {
+              display: parent2.display && parent2.expanded,
+              level: parent2.level + 1,
+              expanded: false,
+              noLazyChildren: false,
+              loading: false
+            };
+            const childKey = util.getRowIdentity(node, rowKey.value);
+            if (childKey === void 0 || childKey === null) {
+              throw new Error("For nested data item, row-key is required.");
+            }
+            cur = { ...treeData.value[childKey] };
+            if (cur) {
+              innerTreeRowData.expanded = cur.expanded;
+              cur.level = cur.level || innerTreeRowData.level;
+              cur.display = !!(cur.expanded && innerTreeRowData.display);
+              if (typeof cur.lazy === "boolean") {
+                if (typeof cur.loaded === "boolean" && cur.loaded) {
+                  innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
+                }
+                innerTreeRowData.loading = cur.loading;
+              }
+            }
+            i++;
+            tmp.push(rowRender(node, $index + i, innerTreeRowData));
+            if (cur) {
+              const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
+              traverse(nodes2, cur);
+            }
+          });
+        };
+        cur.display = true;
+        const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
+        traverse(nodes, cur);
+      }
+      return tmp;
+    } else {
+      return rowRender(row, $index, void 0);
+    }
+  };
+  return {
+    wrappedRowRender,
+    tooltipContent,
+    tooltipTrigger
+  };
+}
+
+exports["default"] = useRender;
+//# sourceMappingURL=render-helper.js.map

package/lib/packages/components/table/src/table-body/render-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-helper.js","sources":["../../../../../../../../packages/components/table/src/table-body/render-helper.ts"],"sourcesContent":["import { h, getCurrentInstance, computed } from 'vue'\nimport { getRowIdentity } from '../util'\nimport useEvents from './events-helper'\nimport useStyles from './styles-helper'\n\nimport type { TableBodyProps } from './defaults'\nimport type {\n  RenderRowData,\n  Table,\n  TreeNode,\n  TableProps,\n} from '../table/defaults'\n\nfunction useRender<T>(props: Partial<TableBodyProps<T>>) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\n  const {\n    handleDoubleClick,\n    handleClick,\n    handleContextMenu,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    tooltipContent,\n    tooltipTrigger,\n  } = useEvents(props)\n  const {\n    getRowStyle,\n    getRowClass,\n    getCellStyle,\n    getCellClass,\n    getSpan,\n    getColspanRealWidth,\n  } = useStyles(props)\n  const firstDefaultColumnIndex = computed(() => {\n    return props.store.states.columns.value.findIndex(\n      ({ type }) => type === 'default'\n    )\n  })\n  const getKeyOfRow = (row: T, index: number) => {\n    const rowKey = (parent.props as Partial<TableProps<T>>).rowKey\n    if (rowKey) {\n      return getRowIdentity(row, rowKey)\n    }\n    return index\n  }\n  const rowRender = (row: T, $index: number, treeRowData?: TreeNode) => {\n    const { tooltipEffect, store } = props\n    const { indent, columns } = store.states\n    const rowClasses = getRowClass(row, $index)\n    let display = true\n    if (treeRowData) {\n      rowClasses.push(`el-table__row--level-${treeRowData.level}`)\n      display = treeRowData.display\n    }\n    const displayStyle = display\n      ? null\n      : {\n          display: 'none',\n        }\n    return h(\n      'tr',\n      {\n        style: [displayStyle, getRowStyle(row, $index)],\n        class: rowClasses,\n        key: getKeyOfRow(row, $index),\n        onDblclick: ($event) => handleDoubleClick($event, row),\n        onClick: ($event) => handleClick($event, row),\n        onContextmenu: ($event) => handleContextMenu($event, row),\n        onMouseenter: () => handleMouseEnter($index),\n        onMouseleave: handleMouseLeave,\n      },\n      columns.value.map((column, cellIndex) => {\n        const { rowspan, colspan } = getSpan(row, column, $index, cellIndex)\n        if (!rowspan || !colspan) {\n          return null\n        }\n        const columnData = { ...column }\n        columnData.realWidth = getColspanRealWidth(\n          columns.value,\n          colspan,\n          cellIndex\n        )\n        const data: RenderRowData<T> = {\n          store: props.store,\n          _self: props.context || parent,\n          column: columnData,\n          row,\n          $index,\n        }\n        if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {\n          data.treeNode = {\n            indent: treeRowData.level * indent.value,\n            level: treeRowData.level,\n          }\n          if (typeof treeRowData.expanded === 'boolean') {\n            data.treeNode.expanded = treeRowData.expanded\n            // 表明是懒加载\n            if ('loading' in treeRowData) {\n              data.treeNode.loading = treeRowData.loading\n            }\n            if ('noLazyChildren' in treeRowData) {\n              data.treeNode.noLazyChildren = treeRowData.noLazyChildren\n            }\n          }\n        }\n        const baseKey = `${$index},${cellIndex}`\n        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''\n        return h(\n          'td',\n          {\n            style: getCellStyle($index, cellIndex, row, column),\n            class: getCellClass($index, cellIndex, row, column),\n            key: `${patchKey}${baseKey}`,\n            rowspan,\n            colspan,\n            onMouseenter: ($event) =>\n              handleCellMouseEnter($event, { ...row, tooltipEffect }),\n            onMouseleave: handleCellMouseLeave,\n            widget: column.widget,\n          },\n          [column.renderCell(data)]\n        )\n      })\n    )\n  }\n  const wrappedRowRender = (row: T, $index: number) => {\n    const store = props.store\n    const { isRowExpanded, assertRowKey } = store\n    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } =\n      store.states\n    const hasExpandColumn = store.states.columns.value.some(\n      ({ type }) => type === 'expand'\n    )\n    if (hasExpandColumn && isRowExpanded(row)) {\n      const renderExpanded = parent.renderExpanded\n      const tr = rowRender(row, $index, undefined)\n      if (!renderExpanded) {\n        console.error('[Element Error]renderExpanded is required.')\n        return tr\n      }\n      // 使用二维数组，避免修改 $index\n      // Use a two dimensional array avoid modifying $index\n      return [\n        [\n          tr,\n          h(\n            'tr',\n            {\n              key: `expanded-row__${tr.key as string}`,\n            },\n            [\n              h(\n                'td',\n                {\n                  colspan: store.states.columns.value.length,\n                  class: 'el-table__cell el-table__expanded-cell',\n                },\n                [renderExpanded({ row, $index, store })]\n              ),\n            ]\n          ),\n        ],\n      ]\n    } else if (Object.keys(treeData.value).length) {\n      assertRowKey()\n      // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算\n      // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作\n      const key = getRowIdentity(row, rowKey.value)\n      let cur = treeData.value[key]\n      let treeRowData = null\n      if (cur) {\n        treeRowData = {\n          expanded: cur.expanded,\n          level: cur.level,\n          display: true,\n        }\n        if (typeof cur.lazy === 'boolean') {\n          if (typeof cur.loaded === 'boolean' && cur.loaded) {\n            treeRowData.noLazyChildren = !(cur.children && cur.children.length)\n          }\n          treeRowData.loading = cur.loading\n        }\n      }\n      const tmp = [rowRender(row, $index, treeRowData)]\n      // 渲染嵌套数据\n      if (cur) {\n        // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index\n        let i = 0\n        const traverse = (children, parent) => {\n          if (!(children && children.length && parent)) return\n          children.forEach((node) => {\n            // 父节点的 display 状态影响子节点的显示状态\n            const innerTreeRowData = {\n              display: parent.display && parent.expanded,\n              level: parent.level + 1,\n              expanded: false,\n              noLazyChildren: false,\n              loading: false,\n            }\n            const childKey = getRowIdentity(node, rowKey.value)\n            if (childKey === undefined || childKey === null) {\n              throw new Error('For nested data item, row-key is required.')\n            }\n            cur = { ...treeData.value[childKey] }\n            // 对于当前节点，分成有无子节点两种情况。\n            // 如果包含子节点的，设置 expanded 属性。\n            // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。\n            if (cur) {\n              innerTreeRowData.expanded = cur.expanded\n              // 懒加载的某些节点，level 未知\n              cur.level = cur.level || innerTreeRowData.level\n              cur.display = !!(cur.expanded && innerTreeRowData.display)\n              if (typeof cur.lazy === 'boolean') {\n                if (typeof cur.loaded === 'boolean' && cur.loaded) {\n                  innerTreeRowData.noLazyChildren = !(\n                    cur.children && cur.children.length\n                  )\n                }\n                innerTreeRowData.loading = cur.loading\n              }\n            }\n            i++\n            tmp.push(rowRender(node, $index + i, innerTreeRowData))\n            if (cur) {\n              const nodes =\n                lazyTreeNodeMap.value[childKey] ||\n                node[childrenColumnName.value]\n              traverse(nodes, cur)\n            }\n          })\n        }\n        // 对于 root 节点，display 一定为 true\n        cur.display = true\n        const nodes =\n          lazyTreeNodeMap.value[key] || row[childrenColumnName.value]\n        traverse(nodes, cur)\n      }\n      return tmp\n    } else {\n      return rowRender(row, $index, undefined)\n    }\n  }\n\n  return {\n    wrappedRowRender,\n    tooltipContent,\n    tooltipTrigger,\n  }\n}\n\nexport default useRender\n"],"names":["getCurrentInstance","useEvents","useStyles","computed","getRowIdentity","h"],"mappings":"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"}

package/lib/packages/components/table/src/table-body/styles-helper.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function useStyles(props) {
+  const instance = vue.getCurrentInstance();
+  const parent = instance.parent;
+  const isColumnHidden = (index) => {
+    if (props.fixed === "left") {
+      return index >= props.store.states.fixedLeafColumnsLength.value;
+    } else if (props.fixed === "right") {
+      return index < props.store.states.columns.value.length - props.store.states.rightFixedLeafColumnsLength.value;
+    } else {
+      return index < props.store.states.fixedLeafColumnsLength.value || index >= props.store.states.columns.value.length - props.store.states.rightFixedLeafColumnsLength.value;
+    }
+  };
+  const getRowStyle = (row, rowIndex) => {
+    const rowStyle = parent.props.rowStyle;
+    if (typeof rowStyle === "function") {
+      return rowStyle.call(null, {
+        row,
+        rowIndex
+      });
+    }
+    return rowStyle || null;
+  };
+  const getRowClass = (row, rowIndex) => {
+    const classes = ["el-table__row"];
+    if (parent.props.highlightCurrentRow && row === props.store.states.currentRow.value) {
+      classes.push("current-row");
+    }
+    if (props.stripe && rowIndex % 2 === 1) {
+      classes.push("el-table__row--striped");
+    }
+    const rowClassName = parent.props.rowClassName;
+    if (typeof rowClassName === "string") {
+      classes.push(rowClassName);
+    } else if (typeof rowClassName === "function") {
+      classes.push(rowClassName.call(null, {
+        row,
+        rowIndex
+      }));
+    }
+    if (props.store.states.expandRows.value.indexOf(row) > -1) {
+      classes.push("expanded");
+    }
+    return classes;
+  };
+  const getCellStyle = (rowIndex, columnIndex, row, column) => {
+    const cellStyle = parent.props.cellStyle;
+    if (typeof cellStyle === "function") {
+      return cellStyle.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column
+      });
+    }
+    return cellStyle;
+  };
+  const getCellClass = (rowIndex, columnIndex, row, column) => {
+    const classes = [column.id, column.align, column.className];
+    if (isColumnHidden(columnIndex)) {
+      classes.push("is-hidden");
+    }
+    const cellClassName = parent.props.cellClassName;
+    if (typeof cellClassName === "string") {
+      classes.push(cellClassName);
+    } else if (typeof cellClassName === "function") {
+      classes.push(cellClassName.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column
+      }));
+    }
+    classes.push("el-table__cell");
+    return classes.join(" ");
+  };
+  const getSpan = (row, column, rowIndex, columnIndex) => {
+    let rowspan = 1;
+    let colspan = 1;
+    const fn = parent.props.spanMethod;
+    if (typeof fn === "function") {
+      const result = fn({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      });
+      if (Array.isArray(result)) {
+        rowspan = result[0];
+        colspan = result[1];
+      } else if (typeof result === "object") {
+        rowspan = result.rowspan;
+        colspan = result.colspan;
+      }
+    }
+    return { rowspan, colspan };
+  };
+  const getColspanRealWidth = (columns, colspan, index) => {
+    if (colspan < 1) {
+      return columns[index].realWidth;
+    }
+    const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
+    return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
+  };
+  return {
+    getRowStyle,
+    getRowClass,
+    getCellStyle,
+    getCellClass,
+    getSpan,
+    getColspanRealWidth,
+    isColumnHidden
+  };
+}
+
+exports["default"] = useStyles;
+//# sourceMappingURL=styles-helper.js.map

package/lib/packages/components/table/src/table-body/styles-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-helper.js","sources":["../../../../../../../../packages/components/table/src/table-body/styles-helper.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { Table } from '../table/defaults'\nimport type { TableBodyProps } from './defaults'\n\nfunction useStyles<T>(props: Partial<TableBodyProps<T>>) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\n  const isColumnHidden = (index) => {\n    if (props.fixed === 'left') {\n      return index >= props.store.states.fixedLeafColumnsLength.value\n    } else if (props.fixed === 'right') {\n      return (\n        index <\n        props.store.states.columns.value.length -\n          props.store.states.rightFixedLeafColumnsLength.value\n      )\n    } else {\n      return (\n        index < props.store.states.fixedLeafColumnsLength.value ||\n        index >=\n          props.store.states.columns.value.length -\n            props.store.states.rightFixedLeafColumnsLength.value\n      )\n    }\n  }\n  const getRowStyle = (row: T, rowIndex: number) => {\n    const rowStyle = parent.props.rowStyle\n    if (typeof rowStyle === 'function') {\n      return rowStyle.call(null, {\n        row,\n        rowIndex,\n      })\n    }\n    return rowStyle || null\n  }\n\n  const getRowClass = (row: T, rowIndex: number) => {\n    const classes = ['el-table__row']\n    if (\n      parent.props.highlightCurrentRow &&\n      row === props.store.states.currentRow.value\n    ) {\n      classes.push('current-row')\n    }\n\n    if (props.stripe && rowIndex % 2 === 1) {\n      classes.push('el-table__row--striped')\n    }\n    const rowClassName = parent.props.rowClassName\n    if (typeof rowClassName === 'string') {\n      classes.push(rowClassName)\n    } else if (typeof rowClassName === 'function') {\n      classes.push(\n        rowClassName.call(null, {\n          row,\n          rowIndex,\n        })\n      )\n    }\n\n    if (props.store.states.expandRows.value.indexOf(row) > -1) {\n      classes.push('expanded')\n    }\n\n    return classes\n  }\n\n  const getCellStyle = (\n    rowIndex: number,\n    columnIndex: number,\n    row: T,\n    column: TableColumnCtx<T>\n  ) => {\n    const cellStyle = parent.props.cellStyle\n    if (typeof cellStyle === 'function') {\n      return cellStyle.call(null, {\n        rowIndex,\n        columnIndex,\n        row,\n        column,\n      })\n    }\n    return cellStyle\n  }\n\n  const getCellClass = (\n    rowIndex: number,\n    columnIndex: number,\n    row: T,\n    column: TableColumnCtx<T>\n  ) => {\n    const classes = [column.id, column.align, column.className]\n\n    if (isColumnHidden(columnIndex)) {\n      classes.push('is-hidden')\n    }\n\n    const cellClassName = parent.props.cellClassName\n    if (typeof cellClassName === 'string') {\n      classes.push(cellClassName)\n    } else if (typeof cellClassName === 'function') {\n      classes.push(\n        cellClassName.call(null, {\n          rowIndex,\n          columnIndex,\n          row,\n          column,\n        })\n      )\n    }\n\n    classes.push('el-table__cell')\n\n    return classes.join(' ')\n  }\n  const getSpan = (\n    row: T,\n    column: TableColumnCtx<T>,\n    rowIndex: number,\n    columnIndex: number\n  ) => {\n    let rowspan = 1\n    let colspan = 1\n    const fn = parent.props.spanMethod\n    if (typeof fn === 'function') {\n      const result = fn({\n        row,\n        column,\n        rowIndex,\n        columnIndex,\n      })\n      if (Array.isArray(result)) {\n        rowspan = result[0]\n        colspan = result[1]\n      } else if (typeof result === 'object') {\n        rowspan = result.rowspan\n        colspan = result.colspan\n      }\n    }\n    return { rowspan, colspan }\n  }\n  const getColspanRealWidth = (\n    columns: TableColumnCtx<T>[],\n    colspan: number,\n    index: number\n  ): number => {\n    if (colspan < 1) {\n      return columns[index].realWidth\n    }\n    const widthArr = columns\n      .map(({ realWidth, width }) => realWidth || width)\n      .slice(index, index + colspan)\n    return Number(\n      widthArr.reduce((acc, width) => Number(acc) + Number(width), -1)\n    )\n  }\n\n  return {\n    getRowStyle,\n    getRowClass,\n    getCellStyle,\n    getCellClass,\n    getSpan,\n    getColspanRealWidth,\n    isColumnHidden,\n  }\n}\n\nexport default useStyles\n"],"names":["getCurrentInstance"],"mappings":"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"}

package/lib/packages/components/table/src/table-column/defaults.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defaultProps = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  label: String,
+  className: String,
+  labelClassName: String,
+  property: String,
+  prop: String,
+  width: {
+    type: [String, Number],
+    default: ""
+  },
+  minWidth: {
+    type: [String, Number],
+    default: ""
+  },
+  renderHeader: Function,
+  sortable: {
+    type: [Boolean, String],
+    default: false
+  },
+  sortMethod: Function,
+  sortBy: [String, Function, Array],
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  columnKey: String,
+  align: String,
+  headerAlign: String,
+  showTooltipWhenOverflow: Boolean,
+  showOverflowTooltip: Boolean,
+  fixed: [Boolean, String],
+  formatter: Function,
+  selectable: Function,
+  reserveSelection: Boolean,
+  filterMethod: Function,
+  filteredValue: Array,
+  filters: Array,
+  filterPlacement: String,
+  filterMultiple: {
+    type: Boolean,
+    default: true
+  },
+  index: [Number, Function],
+  sortOrders: {
+    type: Array,
+    default: () => {
+      return ["ascending", "descending", null];
+    },
+    validator: (val) => {
+      return val.every((order) => ["ascending", "descending", null].indexOf(order) > -1);
+    }
+  },
+  widget: String
+};
+
+exports["default"] = defaultProps;
+//# sourceMappingURL=defaults.js.map

package/lib/packages/components/table/src/table-column/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sources":["../../../../../../../../packages/components/table/src/table-column/defaults.ts"],"sourcesContent":["import type { PropType, ComponentInternalInstance, Ref, VNode } from 'vue'\nimport type { DefaultRow, Table } from '../table/defaults'\n\ntype CI<T> = { column: TableColumnCtx<T>; $index: number }\n\ntype Filters = {\n  text: string\n  value: string\n}[]\n\ntype FilterMethods<T> = (value, row: T, column: TableColumnCtx<T>) => void\n\ntype ValueOf<T> = T[keyof T]\n\ninterface TableColumnCtx<T> {\n  id: string\n  realWidth: number\n  type: string\n  label: string\n  className: string\n  labelClassName: string\n  property: string\n  prop: string\n  width: string | number\n  minWidth: string | number\n  renderHeader: (data: CI<T>) => VNode\n  sortable: boolean | string\n  sortMethod: (a: T, b: T) => number\n  sortBy: string | ((row: T, index: number) => string) | string[]\n  resizable: boolean\n  columnKey: string\n  rawColumnKey: string\n  align: string\n  headerAlign: string\n  showTooltipWhenOverflow: boolean\n  showOverflowTooltip: boolean\n  fixed: boolean | string\n  formatter: (\n    row: T,\n    column: TableColumnCtx<T>,\n    cellValue,\n    index: number\n  ) => VNode\n  selectable: (row: T, index: number) => boolean\n  reserveSelection: boolean\n  filterMethod: FilterMethods<T>\n  filteredValue: string[]\n  filters: Filters\n  filterPlacement: string\n  filterMultiple: boolean\n  index: number | ((index: number) => number)\n  sortOrders: ('ascending' | 'descending' | null)[]\n  renderCell: (data: any) => void\n  colSpan: number\n  rowSpan: number\n  children?: TableColumnCtx<T>[]\n  level: number\n  filterable: boolean | FilterMethods<T> | Filters\n  order: string\n  isColumnGroup: boolean\n  columns: TableColumnCtx<T>[]\n  getColumnIndex: () => number\n  no: number\n  widget: string\n  filterOpened?: boolean\n}\n\ninterface TableColumn<T> extends ComponentInternalInstance {\n  vnode: {\n    vParent: TableColumn<T> | Table<T>\n  } & VNode\n  vParent: TableColumn<T> | Table<T>\n  columnId: string\n  columnConfig: Ref<Partial<TableColumnCtx<T>>>\n}\n\nexport type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf }\n\nexport default {\n  type: {\n    type: String,\n    default: 'default',\n  },\n  label: String,\n  className: String,\n  labelClassName: String,\n  property: String,\n  prop: String,\n  width: {\n    type: [String, Number],\n    default: '',\n  },\n  minWidth: {\n    type: [String, Number],\n    default: '',\n  },\n  renderHeader: Function as PropType<\n    TableColumnCtx<DefaultRow>['renderHeader']\n  >,\n  sortable: {\n    type: [Boolean, String],\n    default: false,\n  },\n  sortMethod: Function as PropType<TableColumnCtx<DefaultRow>['sortMethod']>,\n  sortBy: [String, Function, Array] as PropType<\n    TableColumnCtx<DefaultRow>['sortBy']\n  >,\n  resizable: {\n    type: Boolean,\n    default: true,\n  },\n  columnKey: String,\n  align: String,\n  headerAlign: String,\n  showTooltipWhenOverflow: Boolean,\n  showOverflowTooltip: Boolean,\n  fixed: [Boolean, String],\n  formatter: Function as PropType<TableColumnCtx<DefaultRow>['formatter']>,\n  selectable: Function as PropType<TableColumnCtx<DefaultRow>['selectable']>,\n  reserveSelection: Boolean,\n  filterMethod: Function as PropType<\n    TableColumnCtx<DefaultRow>['filterMethod']\n  >,\n  filteredValue: Array as PropType<TableColumnCtx<DefaultRow>['filteredValue']>,\n  filters: Array as PropType<TableColumnCtx<DefaultRow>['filters']>,\n  filterPlacement: String,\n  filterMultiple: {\n    type: Boolean,\n    default: true,\n  },\n  index: [Number, Function] as PropType<TableColumnCtx<DefaultRow>['index']>,\n  sortOrders: {\n    type: Array as PropType<TableColumnCtx<DefaultRow>['sortOrders']>,\n    default: () => {\n      return ['ascending', 'descending', null]\n    },\n    validator: (val: TableColumnCtx<unknown>['sortOrders']) => {\n      return val.every(\n        (order: string) => ['ascending', 'descending', null].indexOf(order) > -1\n      )\n    },\n  },\n  widget: String,\n}\n"],"names":[],"mappings":";;;;AA8EA,mBAAe;AAAA,EACb,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,EAGd,UAAU;AAAA,IACR,MAAM,CAAC,SAAS;AAAA,IAChB,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,EACZ,QAAQ,CAAC,QAAQ,UAAU;AAAA,EAG3B,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AAAA,EACb,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,OAAO,CAAC,SAAS;AAAA,EACjB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,cAAc;AAAA,EAGd,eAAe;AAAA,EACf,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,OAAO,CAAC,QAAQ;AAAA,EAChB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS,MAAM;AACb,aAAO,CAAC,aAAa,cAAc;AAAA;AAAA,IAErC,WAAW,CAAC,QAA+C;AACzD,aAAO,IAAI,MACT,CAAC,UAAkB,CAAC,aAAa,cAAc,MAAM,QAAQ,SAAS;AAAA;AAAA;AAAA,EAI5E,QAAQ;AAAA;;;;"}

package/lib/packages/components/table/src/table-column/index.js

@@ -0,0 +1,138 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index = require('../../../checkbox/index.js');
+var config = require('../config.js');
+var util = require('../util.js');
+var watcherHelper = require('./watcher-helper.js');
+var renderHelper = require('./render-helper.js');
+var defaults = require('./defaults.js');
+
+let columnIdSeed = 1;
+var PsTableColumn = vue.defineComponent({
+  name: "PsTableColumn",
+  components: {
+    PsCheckbox: index.PsCheckbox
+  },
+  props: defaults["default"],
+  setup(props, { slots }) {
+    const instance = vue.getCurrentInstance();
+    const columnConfig = vue.ref({});
+    const owner = vue.computed(() => {
+      let parent2 = instance.parent;
+      while (parent2 && !parent2.tableId) {
+        parent2 = parent2.parent;
+      }
+      return parent2;
+    });
+    const { registerNormalWatchers, registerComplexWatchers } = watcherHelper["default"](owner, props);
+    const {
+      columnId,
+      isSubColumn,
+      realHeaderAlign,
+      columnOrTableParent,
+      setColumnWidth,
+      setColumnForcedProps,
+      setColumnRenders,
+      getPropsData,
+      getColumnElIndex,
+      realAlign
+    } = renderHelper["default"](props, slots, owner);
+    const parent = columnOrTableParent.value;
+    columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`;
+    vue.onBeforeMount(() => {
+      isSubColumn.value = owner.value !== parent;
+      const type = props.type || "default";
+      const sortable = props.sortable === "" ? true : props.sortable;
+      const defaults = {
+        ...config.cellStarts[type],
+        id: columnId.value,
+        type,
+        property: props.prop || props.property,
+        align: realAlign,
+        headerAlign: realHeaderAlign,
+        showOverflowTooltip: props.showOverflowTooltip || props.showTooltipWhenOverflow,
+        filterable: props.filters || props.filterMethod,
+        filteredValue: [],
+        filterPlacement: "",
+        isColumnGroup: false,
+        filterOpened: false,
+        sortable,
+        index: props.index,
+        rawColumnKey: instance.vnode.key
+      };
+      const basicProps = [
+        "columnKey",
+        "label",
+        "className",
+        "labelClassName",
+        "type",
+        "renderHeader",
+        "formatter",
+        "fixed",
+        "resizable",
+        "widget"
+      ];
+      const sortProps = ["sortMethod", "sortBy", "sortOrders"];
+      const selectProps = ["selectable", "reserveSelection"];
+      const filterProps = [
+        "filterMethod",
+        "filters",
+        "filterMultiple",
+        "filterOpened",
+        "filteredValue",
+        "filterPlacement"
+      ];
+      let column = getPropsData(basicProps, sortProps, selectProps, filterProps);
+      column = util.mergeOptions(defaults, column);
+      const chains = util.compose(setColumnRenders, setColumnWidth, setColumnForcedProps);
+      column = chains(column);
+      columnConfig.value = column;
+      registerNormalWatchers();
+      registerComplexWatchers();
+    });
+    vue.onMounted(() => {
+      var _a;
+      const parent2 = columnOrTableParent.value;
+      const children = isSubColumn.value ? parent2.vnode.el.children : (_a = parent2.refs.hiddenColumns) == null ? void 0 : _a.children;
+      const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el);
+      columnConfig.value.getColumnIndex = getColumnIndex;
+      const columnIndex = getColumnIndex();
+      columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? parent2.columnConfig.value : null);
+    });
+    vue.onBeforeUnmount(() => {
+      owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null);
+    });
+    instance.columnId = columnId.value;
+    instance.columnConfig = columnConfig;
+    return;
+  },
+  render() {
+    var _a, _b, _c;
+    let children = [];
+    try {
+      const renderDefault = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
+        row: {},
+        column: {},
+        $index: -1
+      });
+      if (renderDefault instanceof Array) {
+        for (const childNode of renderDefault) {
+          if (((_c = childNode.type) == null ? void 0 : _c.name) === "PsTableColumn" || childNode.shapeFlag & 2) {
+            children.push(childNode);
+          } else if (childNode.type === vue.Fragment && childNode.children instanceof Array) {
+            children.push(...childNode.children);
+          }
+        }
+      }
+    } catch (e) {
+      children = [];
+    }
+    return vue.h("div", children);
+  }
+});
+
+exports["default"] = PsTableColumn;
+//# sourceMappingURL=index.js.map

package/lib/packages/components/table/src/table-column/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../packages/components/table/src/table-column/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  ref,\n  onBeforeMount,\n  onMounted,\n  computed,\n  getCurrentInstance,\n  h,\n  onBeforeUnmount,\n  Fragment,\n} from 'vue'\nimport PsCheckbox from '@element-ps/components/checkbox'\nimport { cellStarts } from '../config'\nimport { mergeOptions, compose } from '../util'\nimport useWatcher from './watcher-helper'\nimport useRender from './render-helper'\nimport defaultProps from './defaults'\nimport type { TableColumn, TableColumnCtx } from './defaults'\n\nimport type { DefaultRow } from '../table/defaults'\n\nlet columnIdSeed = 1\n\nexport default defineComponent({\n  name: 'PsTableColumn',\n  components: {\n    PsCheckbox,\n  },\n  props: defaultProps,\n  setup(props, { slots }) {\n    const instance = getCurrentInstance() as TableColumn<DefaultRow>\n    const columnConfig = ref<Partial<TableColumnCtx<DefaultRow>>>({})\n    const owner = computed(() => {\n      let parent = instance.parent as any\n      while (parent && !parent.tableId) {\n        parent = parent.parent\n      }\n      return parent\n    })\n\n    const { registerNormalWatchers, registerComplexWatchers } = useWatcher(\n      owner,\n      props\n    )\n    const {\n      columnId,\n      isSubColumn,\n      realHeaderAlign,\n      columnOrTableParent,\n      setColumnWidth,\n      setColumnForcedProps,\n      setColumnRenders,\n      getPropsData,\n      getColumnElIndex,\n      realAlign,\n    } = useRender(props as unknown as TableColumnCtx<unknown>, slots, owner)\n\n    const parent = columnOrTableParent.value\n    columnId.value = `${\n      parent.tableId || parent.columnId\n    }_column_${columnIdSeed++}`\n    onBeforeMount(() => {\n      isSubColumn.value = owner.value !== parent\n\n      const type = props.type || 'default'\n      const sortable = props.sortable === '' ? true : props.sortable\n      const defaults = {\n        ...cellStarts[type],\n        id: columnId.value,\n        type,\n        property: props.prop || props.property,\n        align: realAlign,\n        headerAlign: realHeaderAlign,\n        showOverflowTooltip:\n          props.showOverflowTooltip || props.showTooltipWhenOverflow,\n        // filter 相关属性\n        filterable: props.filters || props.filterMethod,\n        filteredValue: [],\n        filterPlacement: '',\n        isColumnGroup: false,\n        filterOpened: false,\n        // sort 相关属性\n        sortable,\n        // index 列\n        index: props.index,\n        // <el-table-column key=\"xxx\" />\n        rawColumnKey: instance.vnode.key,\n      }\n\n      const basicProps = [\n        'columnKey',\n        'label',\n        'className',\n        'labelClassName',\n        'type',\n        'renderHeader',\n        'formatter',\n        'fixed',\n        'resizable',\n        'widget',\n      ]\n      const sortProps = ['sortMethod', 'sortBy', 'sortOrders']\n      const selectProps = ['selectable', 'reserveSelection']\n      const filterProps = [\n        'filterMethod',\n        'filters',\n        'filterMultiple',\n        'filterOpened',\n        'filteredValue',\n        'filterPlacement',\n      ]\n\n      let column = getPropsData(basicProps, sortProps, selectProps, filterProps)\n\n      column = mergeOptions(defaults, column)\n      // 注意 compose 中函数执行的顺序是从右到左\n      const chains = compose(\n        setColumnRenders,\n        setColumnWidth,\n        setColumnForcedProps\n      )\n      column = chains(column)\n      columnConfig.value = column\n\n      // 注册 watcher\n      registerNormalWatchers()\n      registerComplexWatchers()\n    })\n    onMounted(() => {\n      const parent = columnOrTableParent.value\n      const children = isSubColumn.value\n        ? parent.vnode.el.children\n        : parent.refs.hiddenColumns?.children\n      const getColumnIndex = () =>\n        getColumnElIndex(children || [], instance.vnode.el)\n      columnConfig.value.getColumnIndex = getColumnIndex\n      const columnIndex = getColumnIndex()\n      columnIndex > -1 &&\n        owner.value.store.commit(\n          'insertColumn',\n          columnConfig.value,\n          isSubColumn.value ? parent.columnConfig.value : null\n        )\n    })\n    onBeforeUnmount(() => {\n      owner.value.store.commit(\n        'removeColumn',\n        columnConfig.value,\n        isSubColumn.value ? parent.columnConfig.value : null\n      )\n    })\n    instance.columnId = columnId.value\n\n    // eslint-disable-next-line\n    instance.columnConfig = columnConfig\n    return\n  },\n  render() {\n    let children = []\n    try {\n      const renderDefault = this.$slots.default?.({\n        row: {},\n        column: {},\n        $index: -1,\n      })\n      if (renderDefault instanceof Array) {\n        for (const childNode of renderDefault) {\n          if (\n            childNode.type?.name === 'PsTableColumn' ||\n            childNode.shapeFlag & 2\n          ) {\n            children.push(childNode)\n          } else if (\n            childNode.type === Fragment &&\n            childNode.children instanceof Array\n          ) {\n            children.push(...childNode.children)\n          }\n        }\n      }\n    } catch {\n      children = []\n    }\n    return h('div', children)\n  },\n})\n"],"names":["defineComponent","PsCheckbox","defaultProps","getCurrentInstance","ref","computed","useWatcher","useRender","cellStarts","mergeOptions","compose","Fragment","h"],"mappings":"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"}