vxe-table 4.17.29 → 4.17.31

package/packages/table/src/table.ts

@@ -31,7 +31,6 @@ import '../module/custom/hook'
 import '../render'
 
 import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType } from 'vxe-pc-ui'
-import type { VxeGanttConstructor, VxeGanttPrivateMethods } from 'vxe-pc-ui/types/components/gantt'
 import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes, VxeTableCustomPanelConstructor } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
@@ -66,7 +65,7 @@ export default defineVxeComponent({
     const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
     const $xeParentTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
     const $xeGrid = inject<(VxeGridConstructor & VxeGridPrivateMethods) | null>('$xeGrid', null)
-    const $xeGantt = inject<(VxeGanttConstructor & VxeGanttPrivateMethods) | null>('$xeGantt', null)
+    const $xeGantt = inject<VxeTableDefines.InjectGanttType | null>('$xeGantt', null)
     const $xeGGWrapper = $xeGrid || $xeGantt
 
     const { computeSize } = useFns.useSize(props)
@@ -8131,6 +8130,10 @@ export default defineVxeComponent({
       }
     }
 
+    const contextMenuEvent = (evnt: MouseEvent) => {
+      dispatchEvent('context-menu', {}, evnt)
+    }
+
     /**
      * 全局键盘事件
      */
@@ -9075,6 +9078,10 @@ export default defineVxeComponent({
         Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList })
       },
       handleColResizeMousedownEvent (evnt, fixedType, params) {
+        const isLeftBtn = evnt.button === 0
+        if (!isLeftBtn) {
+          return
+        }
         evnt.stopPropagation()
         evnt.preventDefault()
         const { column } = params
@@ -12942,10 +12949,12 @@ export default defineVxeComponent({
       const scrollbarYToLeft = computeScrollbarYToLeft.value
       const { isCrossTableDrag } = rowDragOpts
       const tbOns: {
+        onContextmenu: (...args: any[]) => void
         onKeydown: (...args: any[]) => void
         onDragover?: (...args: any[]) => void
       } = {
-        onKeydown: keydownEvent
+        onKeydown: keydownEvent,
+        onContextmenu: contextMenuEvent
       }
       if (isCrossTableDrag && !tableData.length) {
         tbOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent
@@ -12967,7 +12976,9 @@ export default defineVxeComponent({
           'checkbox--range': checkboxOpts.range,
           'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
           'is--header': showHeader,
+          'not--header': !showHeader,
           'is--footer': showFooter,
+          'not--footer': !showFooter,
           'is--group': isGroup,
           'is-row-group': isRowGroupStatus,
           'is--tree-line': treeConfig && (treeOpts.showLine || treeOpts.line),
@@ -12979,7 +12990,9 @@ export default defineVxeComponent({
           'is--loading': currLoading,
           'is--empty': !currLoading && !tableData.length,
           'is--scroll-y': overflowY,
+          'not--scroll-y': !overflowY,
           'is--scroll-x': overflowX,
+          'not--scroll-x': !overflowX,
           'is--virtual-x': scrollXLoad,
           'is--virtual-y': scrollYLoad
         }],

package/styles/components/table.scss

@@ -544,107 +544,300 @@ $btnThemeList: (
       border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
     }
     @extend %AllRadius;
-    .vxe-table--border-line {
-      @extend %AllRadius;
-    }
-    &.is--header {
-      &:not(.is--footer) {
-        .vxe-table--body-wrapper {
-          &.fixed-left--wrapper {
-            @extend %BottomLeftRadius;
-          }
-          &.body--wrapper {
-            @extend %BottomRadius;
+    &.sy-pos--right {
+      &.sx-pos--bottom {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+            }
           }
-          &.fixed-right--wrapper {
-            @extend %BottomRightRadius;
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
+            }
           }
         }
-      }
-      .vxe-table--header-wrapper {
-        &.fixed-left--wrapper {
-          @extend %TopLeftRadius;
-        }
-        &.body--wrapper {
-          @extend %TopRadius;
-        }
-        &.fixed-right--wrapper {
-          @extend %TopRightRadius;
-        }
-      }
-    }
-    &:not(.is--header) {
-      &:not(.is--footer) {
-        .vxe-table--body-wrapper {
-          &.body--wrapper {
-            @extend %AllRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
           }
         }
       }
-    }
-    &.is--footer {
-      &:not(.is--header) {
-        .vxe-table--body-wrapper {
-          &.fixed-left--wrapper {
-            @extend %BottomLeftRadius;
-          }
-          &.body--wrapper {
-            @extend %TopRadius;
+      &.sx-pos--top {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+            }
           }
-          &.fixed-right--wrapper {
-            @extend %BottomRightRadius;
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
+            }
           }
         }
-      }
-      .vxe-table--footer-wrapper {
-        &.fixed-left--wrapper {
-          @extend %BottomLeftRadius;
-        }
-        &.body--wrapper {
-          @extend %BottomRadius;
-        }
-        &.fixed-right--wrapper {
-          @extend %BottomRightRadius;
-        }
-      }
-    }
-    &.sx-pos--top {
-      .vxe-table--scroll-x-left-corner {
-        &::before {
-          @extend %TopLeftRadius;
-        }
-      }
-      .vxe-table--scroll-x-right-corner {
-        &::before {
-          @extend %TopRightRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
+          }
         }
       }
     }
-    &.sx-pos--bottom {
-      &.sy-pos--right {
-        .vxe-table--scroll-y-top-corner {
-          @extend %TopRightRadius;
-          &::before {
-            @extend %TopRightRadius;
+    &.sy-pos--left {
+      &.sx-pos--bottom {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--border-line {
+              border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
+            }
           }
         }
-      }
-      &.sy-pos--left {
-        .vxe-table--scroll-y-top-corner {
-          @extend %TopLeftRadius;
-          &::before {
-            @extend %TopLeftRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
           }
         }
       }
-      .vxe-table--scroll-x-left-corner {
-        &::before {
-          @extend %BottomLeftRadius;
+      &.sx-pos--top {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
+            }
+          }
         }
-      }
-      .vxe-table--scroll-x-right-corner {
-        &::before {
-          @extend %BottomRightRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
+          }
         }
       }
     }
@@ -757,7 +950,7 @@ $btnThemeList: (
       position: absolute;
       top: 0;
       left: 0;
-      width: 100%;
+      width: calc(100% + var(--vxe-ui-table-border-width));
       height: 100%;
       z-index: 1;
       border-width: var(--vxe-ui-table-border-width);
@@ -772,16 +965,38 @@ $btnThemeList: (
     right: 0;
   }
   &.sy-pos--right {
+    .vxe-table--scroll-y-top-corner,
+    .vxe-table--scroll-y-bottom-corner {
+      right: 0;
+      width: calc(100% + var(--vxe-ui-table-border-width));
+    }
+    .vxe-table--scroll-x-right-corner {
+      &::before {
+        left: calc(var(--vxe-ui-table-border-width) * -1);
+      }
+    }
     .vxe-table--scroll-x-right-corner {
-      right: 1px;
       &::before {
         border-right: 0;
       }
     }
   }
+  &.sy-pos--left {
+    .vxe-table--scroll-y-top-corner,
+    .vxe-table--scroll-y-bottom-corner {
+      left: 0;
+      width: calc(100% + var(--vxe-ui-table-border-width));
+    }
+    .vxe-table--scroll-x-left-corner {
+      &::before {
+        top: calc(var(--vxe-ui-table-border-width) * -1);
+        height: calc(100% + var(--vxe-ui-table-border-width));
+      }
+    }
+  }
   &.sx-pos--bottom {
     .vxe-table--scroll-x-right-corner {
-      bottom: 1px;
+      bottom: var(--vxe-ui-table-border-width);
       &::before {
         border-bottom: 0;
       }
@@ -793,12 +1008,10 @@ $btnThemeList: (
   .vxe-table--scroll-y-top-corner,
   .vxe-table--scroll-y-bottom-corner {
     top: 0;
-    right: 0;
-    width: 100%;
     height: 0;
   }
   .vxe-table--scroll-y-bottom-corner {
-    margin-top: -1px;
+    margin-top: calc(var(--vxe-ui-table-border-width) * -1);
   }
 }
 
@@ -1457,28 +1670,33 @@ $btnThemeList: (
   &.border--full,
   &.border--outer,
   &.border--inner {
-    .vxe-table--scroll-y-top-corner,
-    .vxe-table--scroll-y-bottom-corner {
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        border-width: 0;
-        border-style: solid;
-        border-color: var(--vxe-ui-table-border-color);
+    &.sy-pos--right {
+      .vxe-table--scroll-y-top-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: left top, left bottom;
       }
-    }
-    .vxe-table--scroll-y-top-corner {
-      &::before {
-        border-bottom-width: var(--vxe-ui-table-border-width);
+      .vxe-table--scroll-y-bottom-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: left top, left top;
       }
     }
-    .vxe-table--scroll-y-bottom-corner {
-      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    &.sy-pos--left {
+      .vxe-table--scroll-y-top-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: right top, left bottom;
+      }
+      .vxe-table--scroll-y-bottom-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: right top, left top;
+      }
     }
     .vxe-table--scroll-x-handle-appearance {
       position: absolute;
@@ -1551,27 +1769,6 @@ $btnThemeList: (
   }
   &.border--default,
   &.border--full {
-    .vxe-table--scroll-y-top-corner {
-      &::before {
-        border-left-width: var(--vxe-ui-table-border-width);
-        border-right-width: var(--vxe-ui-table-border-width);
-      }
-    }
-    .vxe-table--scroll-y-bottom-corner {
-      &::before {
-        border-left-width: var(--vxe-ui-table-border-width);
-        border-right-width: var(--vxe-ui-table-border-width);
-      }
-    }
-    &.sy-pos--right {
-      .vxe-table--scroll-y-top-corner,
-      .vxe-table--scroll-y-bottom-corner {
-        &::before {
-          width: calc(100% + 1px);
-          left: -1px;
-        }
-      }
-    }
     .vxe-table--scroll-y-handle-appearance {
       position: absolute;
       top: 0;