@geelato/web-vue 2.57.1 → 2.58.1

package/lib/table/table-operation-th.js

@@ -29,15 +29,27 @@ var OperationTh = vue.defineComponent({
     const prefixCls = globalConfig.getPrefixCls("table");
     const tableCtx = vue.inject(context.tableInjectionKey, {});
     const checkboxStatus = vue.computed(() => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       let checked = false;
       let indeterminate = false;
-      const currentSelectedEnabledRowKeys = (_b = (_a = tableCtx.currentSelectedRowKeys) == null ? void 0 : _a.filter((key) => {
-        var _a2, _b2;
-        return (_b2 = (_a2 = tableCtx.currentAllEnabledRowKeys) == null ? void 0 : _a2.includes(key)) != null ? _b2 : true;
-      })) != null ? _b : [];
-      const selectedNumber = currentSelectedEnabledRowKeys.length;
-      const totalEnabledNumber = (_d = (_c = tableCtx.currentAllEnabledRowKeys) == null ? void 0 : _c.length) != null ? _d : 0;
+      const totalEnabledNumber = (_b = (_a = tableCtx.currentAllEnabledRowKeys) == null ? void 0 : _a.length) != null ? _b : 0;
+      if (totalEnabledNumber === 0) {
+        return {
+          checked,
+          indeterminate
+        };
+      }
+      const enabledKeySet = (_d = tableCtx.currentAllEnabledRowKeySet) != null ? _d : new Set((_c = tableCtx.currentAllEnabledRowKeys) != null ? _c : []);
+      const currentSelectedRowKeys = (_e = tableCtx.currentSelectedRowKeys) != null ? _e : [];
+      let selectedNumber = 0;
+      for (const key of currentSelectedRowKeys) {
+        if (enabledKeySet.has(key)) {
+          selectedNumber += 1;
+          if (selectedNumber >= totalEnabledNumber) {
+            break;
+          }
+        }
+      }
       if (selectedNumber > 0) {
         if (selectedNumber >= totalEnabledNumber) {
           checked = true;

package/lib/table/table-td.js

@@ -107,13 +107,13 @@ var Td = vue.defineComponent({
     };
     const style = vue.computed(() => {
       var _a;
-      const style2 = utils.getStyle(props.column, {
+      const fixedStyle = utils.getStyle(props.column, {
         dataColumns: props.dataColumns,
         operations: props.operations
       });
       const customStyle = getCustomStyle();
       return {
-        ...style2,
+        ...fixedStyle,
         ...(_a = props.column) == null ? void 0 : _a.cellStyle,
         ...customStyle
       };

package/lib/table/table.js

@@ -280,7 +280,7 @@ var _Table = vue.defineComponent({
     const {
       componentRef: virtualComRef,
       elementRef: virtualRef
-    } = useComponentRef.useComponentRef("viewportRef");
+    } = useComponentRef.useComponentRef("containerRef");
     const {
       componentRef: theadComRef,
       elementRef: theadRef
@@ -476,6 +476,9 @@ var _Table = vue.defineComponent({
       currentAllEnabledRowKeys,
       emit
     });
+    const currentAllEnabledRowKeySet = vue.computed(() => new Set(currentAllEnabledRowKeys.value));
+    const currentSelectedRowKeySet = vue.computed(() => new Set(currentSelectedRowKeys.value));
+    const selectedRowKeySet = vue.computed(() => new Set(selectedRowKeys.value));
     const {
       expandedRowKeys,
       handleExpand,
@@ -531,18 +534,27 @@ var _Table = vue.defineComponent({
             expand: _record.expand,
             isLeaf: _record.isLeaf
           };
-          if (_record.children) {
-            record.isLeaf = false;
-            record.children = travel(_record.children);
+          const recordChildren = _record.children;
+          if (Array.isArray(recordChildren)) {
+            if (recordChildren.length > 0) {
+              record.isLeaf = false;
+              record.children = travel(recordChildren);
+            } else if (showEmptyTree.value) {
+              record.isLeaf = false;
+              record.children = [];
+            } else {
+              record.isLeaf = true;
+            }
           } else if (props.loadMore && !_record.isLeaf) {
             record.isLeaf = false;
-            if (lazyLoadData[record.key]) {
-              record.children = travel(lazyLoadData[record.key]);
+            const lazyChildren = lazyLoadData[record.key];
+            if (lazyChildren) {
+              record.children = travel(lazyChildren);
             }
           } else {
             record.isLeaf = true;
           }
-          record.hasSubtree = Boolean(record.children ? props.hideExpandButtonOnEmpty ? record.children.length > 0 : true : props.loadMore && !record.isLeaf);
+          record.hasSubtree = Boolean(record.children ? props.hideExpandButtonOnEmpty ? record.children.length > 0 : showEmptyTree.value || record.children.length > 0 : props.loadMore && !record.isLeaf);
           result.push(record);
         }
         return result;
@@ -860,7 +872,10 @@ var _Table = vue.defineComponent({
       resizingColumn,
       checkStrictly,
       currentAllEnabledRowKeys,
+      currentAllEnabledRowKeySet,
       currentSelectedRowKeys,
+      currentSelectedRowKeySet,
+      selectedRowKeySet,
       addColumn,
       removeColumn,
       onSelectAll: handleSelectAll,
@@ -880,7 +895,8 @@ var _Table = vue.defineComponent({
       [`${prefixCls}-dragging`]: dragState.dragging,
       [`${prefixCls}-type-selection`]: Boolean(props.rowSelection),
       [`${prefixCls}-empty`]: props.data && flattenData.value.length === 0,
-      [`${prefixCls}-layout-fixed`]: props.tableLayoutFixed || isScroll.value.x || splitTable.value || hasEllipsis.value
+      [`${prefixCls}-layout-fixed`]: props.tableLayoutFixed || isScroll.value.x || splitTable.value || hasEllipsis.value,
+      [`${prefixCls}-virtualized`]: Boolean(props.virtualListProps)
     }]);
     const paginationCls = vue.computed(() => [`${prefixCls}-pagination`, {
       [`${prefixCls}-pagination-left`]: props.pagePosition === "tl" || props.pagePosition === "bl",
@@ -907,6 +923,13 @@ var _Table = vue.defineComponent({
       }
       thWidth.value = width;
     };
+    vue.watch(columnWidth, () => {
+      if (isVirtualList.value) {
+        vue.nextTick(getThWidth);
+      }
+    }, {
+      deep: true
+    });
     const hasScrollBar = vue.ref(false);
     const isTbodyHasScrollBar = () => {
       if (tbodyRef.value) {
@@ -979,11 +1002,16 @@ var _Table = vue.defineComponent({
       columns: allColumns
     });
     const getVirtualColumnStyle = (name) => {
-      if (!isVirtualList.value || !name || !thWidth.value[name]) {
+      var _a;
+      if (!isVirtualList.value || !name) {
+        return void 0;
+      }
+      const width = (_a = columnWidth[name]) != null ? _a : thWidth.value[name];
+      if (!width) {
         return void 0;
       }
       return {
-        width: `${thWidth.value[name]}px`
+        width: `${width}px`
       };
     };
     const renderSummaryRow = (record, rowIndex) => {
@@ -1099,16 +1127,14 @@ var _Table = vue.defineComponent({
       }
       return null;
     };
-    const renderRecord = (record, rowIndex, {
+    const renderRecordRow = (record, rowIndex, {
       indentSize = 0,
       indexPath,
       allowDrag = true
     } = {}) => {
-      var _a;
       const currentKey = record.key;
       const currentPath = (indexPath != null ? indexPath : []).concat(rowIndex);
       const expandContent = renderExpandContent(record);
-      const showExpand = expandedRowKeys.value.includes(currentKey);
       const isDragTarget = dragState.sourceKey === record.key;
       const dragSourceEvent = dragType.value ? {
         draggable: allowDrag,
@@ -1141,7 +1167,7 @@ var _Table = vue.defineComponent({
           handleDrop(ev);
         }
       } : {};
-      return vue.createVNode(vue.Fragment, null, [vue.createVNode(tableTr, vue.mergeProps({
+      return vue.createVNode(tableTr, vue.mergeProps({
         "key": currentKey,
         "class": [{
           [`${prefixCls}-tr-draggable`]: dragType.value === "row",
@@ -1149,15 +1175,15 @@ var _Table = vue.defineComponent({
         }, is.isFunction(props.rowClass) ? props.rowClass(record.raw, rowIndex) : props.rowClass],
         "rowIndex": rowIndex,
         "record": record,
-        "checked": props.rowSelection && ((_a = selectedRowKeys.value) == null ? void 0 : _a.includes(currentKey)),
+        "checked": props.rowSelection && selectedRowKeySet.value.has(currentKey),
         "onClick": (ev) => handleRowClick(record, ev),
         "onDblclick": (ev) => handleRowDblclick(record, ev),
         "onContextmenu": (ev) => handleRowContextMenu(record, ev)
       }, dragType.value === "row" ? dragSourceEvent : {}, dragTargetEvent), {
         default: () => [operations.value.map((operation, index2) => {
-          var _a2;
+          var _a;
           const cellId = `${rowIndex}-${index2}-${record.key}`;
-          const [rowspan, colspan] = props.spanAll ? (_a2 = tableSpan.value[cellId]) != null ? _a2 : [1, 1] : [1, 1];
+          const [rowspan, colspan] = props.spanAll ? (_a = tableSpan.value[cellId]) != null ? _a : [1, 1] : [1, 1];
           if (props.spanAll && removedCells.value.includes(cellId)) {
             return null;
           }
@@ -1177,9 +1203,9 @@ var _Table = vue.defineComponent({
             "drag-handle-icon": slots["drag-handle-icon"]
           });
         }), dataColumns.value.map((column, index2) => {
-          var _a2;
+          var _a;
           const cellId = `${rowIndex}-${props.spanAll ? operations.value.length + index2 : index2}-${record.key}`;
-          const [rowspan, colspan] = (_a2 = tableSpan.value[cellId]) != null ? _a2 : [1, 1];
+          const [rowspan, colspan] = (_a = tableSpan.value[cellId]) != null ? _a : [1, 1];
           if (removedCells.value.includes(cellId)) {
             return null;
           }
@@ -1210,13 +1236,123 @@ var _Table = vue.defineComponent({
           });
         })],
         tr: slots.tr
+      });
+    };
+    const renderRecord = (record, rowIndex, {
+      indentSize = 0,
+      indexPath,
+      allowDrag = true
+    } = {}) => {
+      const currentKey = record.key;
+      const currentPath = (indexPath != null ? indexPath : []).concat(rowIndex);
+      const expandContent = renderExpandContent(record);
+      const showExpand = expandedRowKeys.value.includes(currentKey);
+      return vue.createVNode(vue.Fragment, null, [renderRecordRow(record, rowIndex, {
+        indentSize,
+        indexPath,
+        allowDrag
       }), showExpand && renderExpand(record, {
         indentSize: indentSize + props.indentSize,
         indexPath: currentPath,
-        allowDrag: allowDrag && !isDragTarget,
+        allowDrag,
         expandContent
       })]);
     };
+    const renderVirtualEmptyRow = (key) => {
+      return vue.createVNode(tableTr, {
+        "key": key,
+        "empty": true
+      }, {
+        default: () => [vue.createVNode(tableTd, {
+          "colSpan": dataColumns.value.length + operations.value.length
+        }, {
+          default: () => {
+            var _a, _b, _c, _d, _e;
+            return [(_e = (_d = (_a = slots.empty) == null ? void 0 : _a.call(slots)) != null ? _d : (_c = configCtx == null ? void 0 : (_b = configCtx.slots).empty) == null ? void 0 : _c.call(_b, {
+              component: "table"
+            })) != null ? _e : vue.createVNode(index$3, null, null)];
+          }
+        })]
+      });
+    };
+    const virtualListData = vue.computed(() => {
+      if (!isVirtualList.value || flattenData.value.length === 0) {
+        return [];
+      }
+      const hasSubData = flattenData.value.some((record) => Boolean(record.hasSubtree));
+      const baseIndentSize = hasSubData ? 20 : 0;
+      const expandedKeySet = new Set(expandedRowKeys.value);
+      const list = [];
+      let recordIndex = 0;
+      const travel = (data, indentSize, indexPath) => {
+        data.forEach((record, index2) => {
+          var _a;
+          const currentPath = indexPath.concat(index2);
+          list.push({
+            type: "record",
+            _key: `r-${String(record.key)}`,
+            record,
+            rowIndex: recordIndex,
+            indentSize,
+            indexPath: currentPath
+          });
+          recordIndex += 1;
+          if (!expandedKeySet.has(record.key))
+            return;
+          if (record.hasSubtree) {
+            if (((_a = record.children) == null ? void 0 : _a.length) === 0 && showEmptyTree.value) {
+              list.push({
+                type: "empty-subtree",
+                _key: `empty-subtree-${String(record.key)}`
+              });
+              return;
+            }
+            if (record.children && record.children.length > 0) {
+              travel(record.children, indentSize + props.indentSize, currentPath);
+            }
+            return;
+          }
+          const expandContent = renderExpandContent(record);
+          if (expandContent) {
+            list.push({
+              type: "expand",
+              _key: `expand-${String(record.key)}`,
+              record
+            });
+          }
+        });
+      };
+      travel(flattenData.value, baseIndentSize, []);
+      return list;
+    });
+    const renderVirtualItem = (item) => {
+      if (item.type === "record") {
+        return renderRecordRow(item.record, item.rowIndex, {
+          indentSize: item.indentSize,
+          indexPath: item.indexPath
+        });
+      }
+      if (item.type === "empty-subtree") {
+        return renderVirtualEmptyRow(item._key);
+      }
+      const expandContent = renderExpandContent(item.record);
+      if (!expandContent) {
+        return null;
+      }
+      const scrollContainer = containerElement.value;
+      return vue.createVNode(tableTr, {
+        "key": `${item.record.key}-expand`,
+        "expand": true
+      }, {
+        default: () => [vue.createVNode(tableTd, {
+          "isFixedExpand": hasLeftFixedColumn.value || hasRightFixedColumn.value,
+          "containerWidth": scrollContainer == null ? void 0 : scrollContainer.clientWidth,
+          "colSpan": dataColumns.value.length + operations.value.length
+        }, _isSlot(expandContent) ? expandContent : {
+          default: () => [expandContent]
+        })]
+      });
+    };
     const renderBody = () => {
       const hasSubData = flattenData.value.some((record) => Boolean(record.hasSubtree));
       return vue.createVNode(tableTbody, null, {
@@ -1245,7 +1381,7 @@ var _Table = vue.defineComponent({
             "rowSpan": groupColumns.value.length
           }, null);
         }), row.map((column, index3) => {
-          const resizable = props.columnResizable && Boolean(column.dataIndex) && index3 < row.length - 1;
+          const resizable = props.columnResizable && Boolean(column.dataIndex) && index3 < row.length - 1 && !column.fixed;
           return vue.createVNode(tableTh, {
             "key": `th-${index3}`,
             "ref": (ins) => {
@@ -1308,14 +1444,11 @@ var _Table = vue.defineComponent({
           "onResize": handleTbodyResize
         }, {
           default: () => {
-            var _a2, _b2;
+            var _a2, _b2, _c, _d;
             return [isVirtualList.value && flattenData.value.length ? vue.createVNode(virtualList, vue.mergeProps({
-              "ref": (ins) => {
-                if (ins == null ? void 0 : ins.$el)
-                  tbodyRef.value = ins.$el;
-              },
+              "ref": virtualComRef.value,
               "class": `${prefixCls}-body`,
-              "data": flattenData.value,
+              "data": virtualListData.value,
               "itemKey": "_key",
               "component": {
                 list: "table",
@@ -1326,19 +1459,18 @@ var _Table = vue.defineComponent({
                 style: contentStyle.value
               },
               "paddingPosition": "list",
-              "height": "auto"
+              "height": (_b2 = (_a2 = props.scroll) == null ? void 0 : _a2.y) != null ? _b2 : "auto"
             }, props.virtualListProps, {
               "onScroll": onTbodyScroll
             }), {
               item: ({
-                item,
-                index: index2
-              }) => renderRecord(item, index2)
+                item
+              }) => renderVirtualItem(item)
             }) : vue.createVNode(Component, vue.mergeProps({
               "ref": tbodyComRef,
               "class": `${prefixCls}-body`,
               "style": {
-                maxHeight: is.isNumber((_a2 = props.scroll) == null ? void 0 : _a2.y) ? `${(_b2 = props.scroll) == null ? void 0 : _b2.y}px` : "100%"
+                maxHeight: is.isNumber((_c = props.scroll) == null ? void 0 : _c.y) ? `${(_d = props.scroll) == null ? void 0 : _d.y}px` : "100%"
               }
             }, scrollbar.value ? {
               outerStyle: {

package/lib/table/utils.js

@@ -261,11 +261,15 @@ const getLeafKeys = (record) => {
 const getSelectionStatus = (selectedRowKeys, leafKeys) => {
   let checked = false;
   let indeterminate = false;
-  const selectedLeafKeys = leafKeys.filter(
-    (key) => selectedRowKeys.includes(key)
-  );
-  if (selectedLeafKeys.length > 0) {
-    if (selectedLeafKeys.length >= leafKeys.length) {
+  const selectedSet = selectedRowKeys instanceof Set ? selectedRowKeys : new Set(selectedRowKeys);
+  let selectedLeafCount = 0;
+  for (const key of leafKeys) {
+    if (selectedSet.has(key)) {
+      selectedLeafCount += 1;
+    }
+  }
+  if (selectedLeafCount > 0) {
+    if (selectedLeafCount >= leafKeys.length) {
       checked = true;
     } else {
       indeterminate = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geelato/web-vue",
-  "version": "2.57.1",
+  "version": "2.58.1",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",
@@ -29,6 +29,25 @@
     "lib/**/style/*",
     "*.less"
   ],
+  "scripts": {
+    "init": "pnpm run icongen && pnpm run lessgen && arco-vue-scripts build:component",
+    "start": "arco-vue-scripts dev:component",
+    "docgen": "arco-vue-scripts docgen",
+    "icongen": "arco-vue-scripts icongen && pnpm run dtsgen:icon",
+    "lessgen": "arco-vue-scripts lessgen",
+    "jsongen": "arco-vue-scripts jsongen",
+    "build": "pnpm run build:component && pnpm run build:style && pnpm run dtsgen && pnpm run jsongen",
+    "build:component": "arco-vue-scripts build:component -u",
+    "build:module": "arco-vue-scripts build:component",
+    "build:style": "arco-vue-scripts build:style",
+    "dtsgen": "arco-vue-scripts dtsgen 'components/**/*.{ts,tsx,vue}'",
+    "dtsgen:icon": "arco-vue-scripts dtsgen 'components/icon/**/*.{ts,tsx,vue}' -o 'components/icon/@types'",
+    "test": "arco-vue-scripts test --coverage",
+    "test:update": "arco-vue-scripts test --coverage -u",
+    "test:screenshot": "arco-vue-scripts test:screenshot -o ./__screenshots__/",
+    "changelog": "arco-vue-scripts changelog",
+    "lint-staged": "npx lint-staged"
+  },
   "peerDependencies": {
     "vue": ">=3.1.0"
   },
@@ -43,6 +62,7 @@
     ]
   },
   "devDependencies": {
+    "@arco-design/arco-vue-scripts": "workspace:*",
     "@babel/core": "^7.26.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -69,8 +89,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "typescript": "^4.9.5",
-    "vue-jest": "5.0.0-alpha.10",
-    "@arco-design/arco-vue-scripts": "0.2.10"
+    "vue-jest": "5.0.0-alpha.10"
   },
   "dependencies": {
     "@arco-design/color": "^0.4.0",
@@ -87,27 +106,9 @@
     "tags": "json/vetur-tags.json",
     "attributes": "json/vetur-attributes.json"
   },
-  "web-types": "json/web-types.json",
+  "web-types": "json/web-types.json"
+  ,
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "init": "pnpm run icongen && pnpm run lessgen && arco-vue-scripts build:component",
-    "start": "arco-vue-scripts dev:component",
-    "docgen": "arco-vue-scripts docgen",
-    "icongen": "arco-vue-scripts icongen && pnpm run dtsgen:icon",
-    "lessgen": "arco-vue-scripts lessgen",
-    "jsongen": "arco-vue-scripts jsongen",
-    "build": "pnpm run build:component && pnpm run build:style && pnpm run dtsgen && pnpm run jsongen",
-    "build:component": "arco-vue-scripts build:component -u",
-    "build:module": "arco-vue-scripts build:component",
-    "build:style": "arco-vue-scripts build:style",
-    "dtsgen": "arco-vue-scripts dtsgen 'components/**/*.{ts,tsx,vue}'",
-    "dtsgen:icon": "arco-vue-scripts dtsgen 'components/icon/**/*.{ts,tsx,vue}' -o 'components/icon/@types'",
-    "test": "arco-vue-scripts test --coverage",
-    "test:update": "arco-vue-scripts test --coverage -u",
-    "test:screenshot": "arco-vue-scripts test:screenshot -o ./__screenshots__/",
-    "changelog": "arco-vue-scripts changelog",
-    "lint-staged": "npx lint-staged"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Bytedance, Inc. and its affiliates.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.