@geelato/web-vue 2.57.0 → 2.58.1

package/es/switch/switch.d.ts

@@ -118,9 +118,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{
     onFocus?: ((ev: FocusEvent) => any) | undefined;
-    onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
     onBlur?: ((ev: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+    onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
 }>, {
     disabled: boolean;
     type: "round" | "circle" | "line";

package/es/table/context.d.ts

@@ -7,7 +7,10 @@ export interface TableContext {
     slots: Slots;
     sorter: Sorter | undefined;
     currentAllEnabledRowKeys: BaseType[];
+    currentAllEnabledRowKeySet?: Set<BaseType>;
     currentSelectedRowKeys: BaseType[];
+    currentSelectedRowKeySet?: Set<BaseType>;
+    selectedRowKeySet?: Set<BaseType>;
     checkStrictly: boolean;
     filters: Filters;
     filterIconAlignLeft: boolean;

package/es/table/hooks/use-row-selection.js

@@ -23,9 +23,11 @@ const useRowSelection = ({
       return (_c2 = (_b2 = selectedKeys.value) != null ? _b2 : (_a2 = rowSelection.value) == null ? void 0 : _a2.selectedRowKeys) != null ? _c2 : _selectedRowKeys.value;
     }
   );
-  const currentSelectedRowKeys = computed(
-    () => selectedRowKeys.value.filter((key) => currentAllRowKeys.value.includes(key))
-  );
+  const currentAllRowKeySet = computed(() => new Set(currentAllRowKeys.value));
+  const currentSelectedRowKeys = computed(() => {
+    const allKeySet = currentAllRowKeySet.value;
+    return selectedRowKeys.value.filter((key) => allKeySet.has(key));
+  });
   const handleSelectAll = (checked) => {
     const newKeys = union(
       selectedRowKeys.value,

package/es/table/interface.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, RenderFunction, Slots, VNodeChild } from 'vue';
 import { BaseType, ClassName, Data } from '../_utils/types';
 import { TriggerProps } from '../trigger';
 export declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
-export declare type TablePagePosition = typeof TABLE_PAGE_POSITION[number];
+export declare type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
 export interface TableData {
     key?: string;
     expand?: string | RenderFunction;

package/es/table/style/index.css

@@ -275,6 +275,24 @@
   justify-content: center;
   padding: 0;
 }
+.arco-table-th.arco-table-operation.arco-table-checkbox .arco-table-cell,
+.arco-table-td.arco-table-operation.arco-table-checkbox .arco-table-cell,
+.arco-table-th.arco-table-operation.arco-table-radio .arco-table-cell,
+.arco-table-td.arco-table-operation.arco-table-radio .arco-table-cell {
+  padding: 0 4px;
+}
+.arco-table-th.arco-table-operation.arco-table-checkbox,
+.arco-table-td.arco-table-operation.arco-table-checkbox {
+  position: relative;
+  z-index: 11;
+}
+.arco-table-th.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-left,
+.arco-table-td.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-left,
+.arco-table-th.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-right,
+.arco-table-td.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-right {
+  position: sticky !important;
+  z-index: 12;
+}
 .arco-table-radio,
 .arco-table-checkbox {
   justify-content: center;
@@ -665,13 +683,10 @@
 .arco-table-virtualized .arco-table-element {
   table-layout: fixed;
 }
-.arco-table-virtualized div.arco-table-body div.arco-table-tr {
-  display: flex;
-}
-.arco-table-virtualized div.arco-table-body div.arco-table-td {
-  display: flex;
-  flex: 1;
-  align-items: center;
+.arco-table-virtualized .arco-table-body .arco-table-td.arco-table-col-fixed-left,
+.arco-table-virtualized .arco-table-body .arco-table-td.arco-table-col-fixed-right {
+  position: sticky;
+  z-index: 10;
 }
 .arco-table-pagination {
   display: flex;

package/es/table/style/index.less

@@ -349,6 +349,25 @@
     padding: 0;
   }
 
+  &-th&-operation&-checkbox &-cell,
+  &-td&-operation&-checkbox &-cell,
+  &-th&-operation&-radio &-cell,
+  &-td&-operation&-radio &-cell {
+    padding: 0 @spacing-2;
+  }
+
+  &-th&-operation&-checkbox,
+  &-td&-operation&-checkbox {
+    position: relative;
+    z-index: 11;
+
+    &.@{table-prefix-cls}-col-fixed-left,
+    &.@{table-prefix-cls}-col-fixed-right {
+      position: sticky !important;
+      z-index: 12;
+    }
+  }
+
   &-radio,
   &-checkbox {
     justify-content: center;
@@ -824,14 +843,12 @@
     table-layout: fixed;
   }
 
-  &-virtualized div&-body div&-tr {
-    display: flex;
-  }
-
-  &-virtualized div&-body div&-td {
-    display: flex;
-    flex: 1;
-    align-items: center;
+  &-virtualized .@{table-prefix-cls}-body .@{table-prefix-cls}-td {
+    &.@{table-prefix-cls}-col-fixed-left,
+    &.@{table-prefix-cls}-col-fixed-right {
+      position: sticky;
+      z-index: 10;
+    }
   }
 }
 

package/es/table/table-operation-td.d.ts

@@ -105,8 +105,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>> & Readonly<{
-            onChange?: ((value: boolean | (string | number | boolean)[], ev: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: boolean | (string | number | boolean)[]) => any) | undefined;
+            onChange?: ((value: boolean | (string | number | boolean)[], ev: Event) => any) | undefined;
         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'update:modelValue': (value: boolean | (string | number | boolean)[]) => true;
             change: (value: boolean | (string | number | boolean)[], ev: Event) => true;
@@ -180,8 +180,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>> & Readonly<{
-            onChange?: ((value: boolean | (string | number | boolean)[], ev: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: boolean | (string | number | boolean)[]) => any) | undefined;
+            onChange?: ((value: boolean | (string | number | boolean)[], ev: Event) => any) | undefined;
         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
             disabled: boolean;
             modelValue: boolean | (string | number | boolean)[];
@@ -217,8 +217,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>> & Readonly<{
-        onChange?: ((value: boolean | (string | number | boolean)[], ev: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean | (string | number | boolean)[]) => any) | undefined;
+        onChange?: ((value: boolean | (string | number | boolean)[], ev: Event) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:modelValue': (value: boolean | (string | number | boolean)[]) => true;
         change: (value: boolean | (string | number | boolean)[], ev: Event) => true;
@@ -311,12 +311,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>> & Readonly<{
-            onChange?: ((value: (string | number | boolean)[], ev: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+            onChange?: ((value: (string | number | boolean)[], ev: Event) => any) | undefined;
         }>, {
             disabled: boolean;
-            defaultValue: (string | number | boolean)[];
             modelValue: (string | number | boolean)[];
+            defaultValue: (string | number | boolean)[];
             direction: "horizontal" | "vertical";
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         install: (app: import("vue").App<any>, options?: import("../_utils/types").ArcoOptions | undefined) => void;
@@ -348,16 +348,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>> & Readonly<{
-            onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+            onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'update:modelValue': (value: string | number | boolean) => true;
             change: (value: string | number | boolean, ev: Event) => true;
         }, import("vue").PublicProps, {
             disabled: boolean;
             type: "button" | "radio";
-            value: string | number | boolean;
             modelValue: string | number | boolean;
+            value: string | number | boolean;
             defaultChecked: boolean;
             uninjectGroupContext: boolean;
         }, true, {}, {}, {
@@ -424,13 +424,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>> & Readonly<{
-            onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+            onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
             disabled: boolean;
             type: "button" | "radio";
-            value: string | number | boolean;
             modelValue: string | number | boolean;
+            value: string | number | boolean;
             defaultChecked: boolean;
             uninjectGroupContext: boolean;
         }>;
@@ -463,16 +463,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>> & Readonly<{
-        onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+        onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:modelValue': (value: string | number | boolean) => true;
         change: (value: string | number | boolean, ev: Event) => true;
     }, string, {
         disabled: boolean;
         type: "button" | "radio";
-        value: string | number | boolean;
         modelValue: string | number | boolean;
+        value: string | number | boolean;
         defaultChecked: boolean;
         uninjectGroupContext: boolean;
     }, {}, string, {}, {
@@ -565,13 +565,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>> & Readonly<{
-            onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+            onChange?: ((value: string | number | boolean, ev: Event) => any) | undefined;
         }>, {
             disabled: boolean;
             type: "button" | "radio";
-            defaultValue: string | number | boolean;
             modelValue: string | number | boolean;
+            defaultValue: string | number | boolean;
             direction: "horizontal" | "vertical";
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         install: (app: import("vue").App<any>, options?: import("../_utils/types").ArcoOptions | undefined) => void;

package/es/table/table-operation-td.js

@@ -67,11 +67,11 @@ var OperationTd = defineComponent({
     }, ...getOperationFixedCls(prefixCls, props.operationColumn)]);
     const leafKeys = computed(() => getLeafKeys(props.record));
     const selectionStatus = computed(() => {
-      var _a;
-      return getSelectionStatus((_a = tableCtx.currentSelectedRowKeys) != null ? _a : [], leafKeys.value);
+      var _a, _b;
+      return getSelectionStatus((_b = (_a = tableCtx.currentSelectedRowKeySet) != null ? _a : tableCtx.currentSelectedRowKeys) != null ? _b : [], leafKeys.value);
     });
     const renderContent = () => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       if (props.summary) {
         return null;
       }
@@ -94,7 +94,7 @@ var OperationTd = defineComponent({
           }, null);
         }
         return createVNode(Checkbox, {
-          "modelValue": (_b = (_a = props.selectedRowKeys) == null ? void 0 : _a.includes(value)) != null ? _b : false,
+          "modelValue": (_d = (_c = (_a = tableCtx.selectedRowKeySet) == null ? void 0 : _a.has(value)) != null ? _c : (_b = props.selectedRowKeys) == null ? void 0 : _b.includes(value)) != null ? _d : false,
           "disabled": Boolean(props.record.disabled),
           "uninjectGroupContext": true,
           "onChange": (checked) => {
@@ -107,7 +107,7 @@ var OperationTd = defineComponent({
       if (props.operationColumn.name === "selection-radio") {
         const value = props.record.key;
         return createVNode(Radio, {
-          "modelValue": (_d = (_c = props.selectedRowKeys) == null ? void 0 : _c.includes(value)) != null ? _d : false,
+          "modelValue": (_h = (_g = (_e = tableCtx.selectedRowKeySet) == null ? void 0 : _e.has(value)) != null ? _g : (_f = props.selectedRowKeys) == null ? void 0 : _f.includes(value)) != null ? _h : false,
           "disabled": Boolean(props.record.disabled),
           "uninjectGroupContext": true,
           "onChange": (checked) => {
@@ -124,7 +124,7 @@ var OperationTd = defineComponent({
         return null;
       }
       if (props.operationColumn.name === "drag-handle") {
-        return (_f = (_e = slots["drag-handle-icon"]) == null ? void 0 : _e.call(slots)) != null ? _f : createVNode(IconDragDotVertical, null, null);
+        return (_j = (_i = slots["drag-handle-icon"]) == null ? void 0 : _i.call(slots)) != null ? _j : createVNode(IconDragDotVertical, null, null);
       }
       return null;
     };

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

@@ -28,15 +28,27 @@ var OperationTh = defineComponent({
     const prefixCls = getPrefixCls("table");
     const tableCtx = inject(tableInjectionKey, {});
     const checkboxStatus = 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/es/table/table-td.js

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