@geelato/web-vue 2.57.1 → 2.58.1

package/es/modal/modal.vue_vue_type_script_lang.js

@@ -4,6 +4,8 @@ import ClientOnly from "../_components/client-only.js";
 import IconHover from "../_components/icon-hover.js";
 import Button from "../button/index.js";
 import IconClose from "../icon/icon-close/index.js";
+import IconFullscreen from "../icon/icon-fullscreen/index.js";
+import IconFullscreenExit from "../icon/icon-fullscreen-exit/index.js";
 import IconInfoCircleFill from "../icon/icon-info-circle-fill/index.js";
 import IconCheckCircleFill from "../icon/icon-check-circle-fill/index.js";
 import IconExclamationCircleFill from "../icon/icon-exclamation-circle-fill/index.js";
@@ -23,6 +25,8 @@ var _sfc_main = defineComponent({
     ArcoButton: Button,
     IconHover,
     IconClose,
+    IconFullscreen,
+    IconFullscreenExit,
     IconInfoCircleFill,
     IconCheckCircleFill,
     IconExclamationCircleFill,
@@ -129,6 +133,10 @@ var _sfc_main = defineComponent({
       type: Boolean,
       default: false
     },
+    showFullscreen: {
+      type: Boolean,
+      default: false
+    },
     maskAnimationName: {
       type: String,
       default: (props) => {
@@ -163,6 +171,7 @@ var _sfc_main = defineComponent({
   },
   emits: {
     "update:visible": (visible) => true,
+    "update:fullscreen": (fullscreen) => true,
     "ok": (e) => true,
     "cancel": (e) => true,
     "open": () => true,
@@ -191,6 +200,11 @@ var _sfc_main = defineComponent({
     });
     const _okLoading = ref(false);
     const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);
+    const _fullscreen = ref(props.fullscreen);
+    const mergedFullscreen = computed(() => {
+      var _a;
+      return (_a = props.fullscreen) != null ? _a : _fullscreen.value;
+    });
     const mergedDraggable = computed(() => props.draggable && !props.fullscreen);
     const {
       teleportContainer,
@@ -353,7 +367,15 @@ var _sfc_main = defineComponent({
       if (position.value) {
         position.value = void 0;
       }
+      if (_fullscreen.value !== fullscreen.value) {
+        _fullscreen.value = !!fullscreen.value;
+      }
     });
+    const toggleFullscreen = () => {
+      const next = !mergedFullscreen.value;
+      _fullscreen.value = next;
+      emit("update:fullscreen", next);
+    };
     const wrapperCls = computed(() => [`${prefixCls}-wrapper`, {
       [`${prefixCls}-wrapper-align-center`]: props.alignCenter && !props.fullscreen,
       [`${prefixCls}-wrapper-moved`]: Boolean(position.value)
@@ -361,7 +383,7 @@ var _sfc_main = defineComponent({
     const modalCls = computed(() => [`${prefixCls}`, props.modalClass, {
       [`${prefixCls}-simple`]: props.simple,
       [`${prefixCls}-draggable`]: mergedDraggable.value,
-      [`${prefixCls}-fullscreen`]: props.fullscreen
+      [`${prefixCls}-fullscreen`]: mergedFullscreen.value
     }]);
     const mergedModalStyle = computed(() => {
       var _a;
@@ -400,7 +422,9 @@ var _sfc_main = defineComponent({
       wrapperCls,
       modalCls,
       teleportContainer,
-      handleMoveDown
+      handleMoveDown,
+      mergedFullscreen,
+      toggleFullscreen
     };
   }
 });

package/es/modal/style/index.css

@@ -116,7 +116,13 @@
   margin-left: 12px;
 }
 .arco-modal-close-btn {
-  margin-left: -12px;
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
+.arco-modal-fullscreen-btn {
+  margin-left: 8px;
   color: var(--color-text-1);
   font-size: 12px;
   cursor: pointer;

package/es/modal/style/index.less

@@ -127,7 +127,14 @@
   }
 
   &-close-btn {
-    margin-left: -@modal-font-size-close-icon;
+    margin-left: 8px;
+    color: @modal-color-header-text;
+    font-size: @modal-font-size-close-icon;
+    cursor: pointer;
+  }
+
+  &-fullscreen-btn {
+    margin-left: 8px;
     color: @modal-color-header-text;
     font-size: @modal-font-size-close-icon;
     cursor: pointer;

package/es/pagination/index.d.ts

@@ -75,8 +75,8 @@ declare const Pagination: {
         };
     }>> & Readonly<{
         onChange?: ((current: number) => any) | undefined;
-        onPageSizeChange?: ((pageSize: number) => any) | undefined;
         "onUpdate:current"?: ((current: number) => any) | undefined;
+        onPageSizeChange?: ((pageSize: number) => any) | undefined;
         "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:current': (current: number) => true;
@@ -177,8 +177,8 @@ declare const Pagination: {
         };
     }>> & Readonly<{
         onChange?: ((current: number) => any) | undefined;
-        onPageSizeChange?: ((pageSize: number) => any) | undefined;
         "onUpdate:current"?: ((current: number) => any) | undefined;
+        onPageSizeChange?: ((pageSize: number) => any) | undefined;
         "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, {
         disabled: boolean;
@@ -271,8 +271,8 @@ declare const Pagination: {
     };
 }>> & Readonly<{
     onChange?: ((current: number) => any) | undefined;
-    onPageSizeChange?: ((pageSize: number) => any) | undefined;
     "onUpdate:current"?: ((current: number) => any) | undefined;
+    onPageSizeChange?: ((pageSize: number) => any) | undefined;
     "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
 }>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:current': (current: number) => true;

package/es/pagination/pagination.d.ts

@@ -149,8 +149,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{
     onChange?: ((current: number) => any) | undefined;
-    onPageSizeChange?: ((pageSize: number) => any) | undefined;
     "onUpdate:current"?: ((current: number) => any) | undefined;
+    onPageSizeChange?: ((pageSize: number) => any) | undefined;
     "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
 }>, {
     disabled: boolean;

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.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
       };