vxe-table 3.8.24 → 3.8.26

package/packages/table/src/methods.js

@@ -1904,7 +1904,7 @@ const Methods = {
     const leftList = []
     const centerList = []
     const rightList = []
-    const { collectColumn, tableFullColumn, isGroup, columnStore, sXOpts, scrollXStore } = this
+    const { collectColumn, tableFullColumn, isGroup, columnStore, sXOpts, scrollXStore, fullColumnIdData } = this
     // 如果是分组表头，如果子列全部被隐藏，则根列也隐藏
     if (isGroup) {
       const leftGroupList = []
@@ -1989,6 +1989,13 @@ const Methods = {
       this.clearMergeFooterItems()
     }
     this.scrollXLoad = scrollXLoad
+    visibleColumn.forEach((column, index) => {
+      const colid = column.id
+      const rest = fullColumnIdData[colid]
+      if (rest) {
+        rest._index = index
+      }
+    })
     this.visibleColumn = visibleColumn
     this.handleTableColumn()
     return this.updateFooter().then(() => {

package/styles/all.scss

@@ -1,33 +1,33 @@
-@import './variable.scss';
-// @import './css-variable.scss';
+@use './variable.scss';
+// @use './css-variable.scss';
 
-@import './filter.scss';
-@import './menu.scss';
-@import './export.scss';
-@import './custom.scss';
+@use './filter.scss';
+@use './menu.scss';
+@use './export.scss';
+@use './custom.scss';
 
-@import './icon.scss';
-@import './table.scss';
-@import './grid.scss';
-@import './toolbar.scss';
-@import './pager.scss';
-@import './checkbox.scss';
-@import './checkbox-group.scss';
-@import './radio.scss';
-@import './radio-group.scss';
-@import './radio-button.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './button.scss';
-@import './button-group.scss';
-@import './modal.scss';
-@import './tooltip.scss';
-@import './form.scss';
-@import './form-item.scss';
-@import './form-gather.scss';
-@import './select.scss';
-@import './optgroup.scss';
-@import './option.scss';
-@import './switch.scss';
-@import './list.scss';
-@import './pulldown.scss';
+@use './icon.scss';
+@use './table.scss';
+@use './grid.scss';
+@use './toolbar.scss';
+@use './pager.scss';
+@use './checkbox.scss';
+@use './checkbox-group.scss';
+@use './radio.scss';
+@use './radio-group.scss';
+@use './radio-button.scss';
+@use './input.scss';
+@use './textarea.scss';
+@use './button.scss';
+@use './button-group.scss';
+@use './modal.scss';
+@use './tooltip.scss';
+@use './form.scss';
+@use './form-item.scss';
+@use './form-gather.scss';
+@use './select.scss';
+@use './optgroup.scss';
+@use './option.scss';
+@use './switch.scss';
+@use './list.scss';
+@use './pulldown.scss';

package/styles/base/common.scss

@@ -1,3 +1,7 @@
+@use 'sass:list';
+@use '../variable.scss' as *;
+@use '../helpers/baseMixin.scss';
+
 %boxSizing {
   box-sizing: border-box;
 }
@@ -50,10 +54,10 @@
     overflow: hidden;
     visibility: hidden;
   }
-  @for $index from 0 to length($spans) {
+  @for $index from 0 to list.length($spans) {
     & > .vxe-col--#{$index + 1} {
       float: left;
-      width: nth($spans, $index + 1);
+      width: list.nth($spans, $index + 1);
     }
   }
 }
@@ -65,23 +69,23 @@
   .vxe-filter--btn {
     &:before,
     &:after {
-      @include createAnimationTransition(border);
+      @include baseMixin.createAnimationTransition(border);
     }
   }
   .vxe-input--wrapper {
     .vxe-input {
-      @include createAnimationTransition(border);
+      @include baseMixin.createAnimationTransition(border);
     }
   }
   .vxe-table--expand-btn,
   .vxe-tree--node-btn {
-    @include createAnimationTransition(transform);
+    @include baseMixin.createAnimationTransition(transform);
   }
   .vxe-checkbox,
   .vxe-radio {
     > input {
       &:checked+span {
-        @include createAnimationTransition(background-color);
+        @include baseMixin.createAnimationTransition(background-color);
       }
     }
   }

package/styles/button-group.scss

@@ -1,5 +1,3 @@
-/**Variable**/
-
 .vxe-button-group {
   display: inline-flex;
 }

package/styles/button.scss

@@ -1,5 +1,7 @@
-/**Variable**/
-@import './helpers/mixin.scss';
+@use 'sass:map';
+@use 'sass:list';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
 
 $btnThemeList: (
   (
@@ -66,7 +68,7 @@ $btnThemeList: (
   white-space: nowrap;
   user-select: none;
   appearance: none;
-  @include createAnimationTransition(border, .2s);
+  @include baseMixin.createAnimationTransition(border, .2s);
   &.align--left {
     text-align: left;
   }
@@ -116,23 +118,23 @@ $btnThemeList: (
         color: $vxe-primary-darken-color;
       }
     }
-    @for $index from 0 to length($btnThemeList) {
-      $item: nth($btnThemeList, $index + 1);
-      &.theme--#{map-get($item, name)} {
-        color: map-get($item, textColor);
+    @for $index from 0 to list.length($btnThemeList) {
+      $item: list.nth($btnThemeList, $index + 1);
+      &.theme--#{map.get($item, name)} {
+        color: map.get($item, textColor);
         &:not(.is--disabled) {
           &:focus {
-            color: map-get($item, btnDarkenColor);
+            color: map.get($item, btnDarkenColor);
           }
           &:hover {
-            color: map-get($item, btnLightenColor);
+            color: map.get($item, btnLightenColor);
           }
           &:active {
-            color: map-get($item, btnDarkenColor);
+            color: map.get($item, btnDarkenColor);
           }
         }
         &.is--disabled {
-          color: map-get($item, btnDisabledColor);
+          color: map.get($item, btnDisabledColor);
         }
       }
     }
@@ -169,29 +171,29 @@ $btnThemeList: (
         background-color: $vxe-button-default-background-color;
       }
     }
-    @for $index from 0 to length($btnThemeList) {
-      $item: nth($btnThemeList, $index + 1);
-      $textColor: map-get($item, textColor);
-      $btnColor: map-get($item, btnColor);
-      &.theme--#{map-get($item, name)} {
+    @for $index from 0 to list.length($btnThemeList) {
+      $item: list.nth($btnThemeList, $index + 1);
+      $textColor: map.get($item, textColor);
+      $btnColor: map.get($item, btnColor);
+      &.theme--#{map.get($item, name)} {
         color: $btnColor;
         &:not(.is--disabled) {
           border-color: $textColor;
           background-color: $textColor;
           &:hover {
             color: $btnColor;
-            background-color: map-get($item, btnLightenColor);
-            border-color: map-get($item, btnLightenColor);
+            background-color: map.get($item, btnLightenColor);
+            border-color: map.get($item, btnLightenColor);
           }
           &:active {
             color: $btnColor;
-            background-color: map-get($item, btnDarkenColor);
-            border-color: map-get($item, btnDarkenColor);
+            background-color: map.get($item, btnDarkenColor);
+            border-color: map.get($item, btnDarkenColor);
           }
         }
         &.is--disabled {
-          border-color: map-get($item, btnDisabledColor);
-          background-color: map-get($item, btnDisabledColor);
+          border-color: map.get($item, btnDisabledColor);
+          background-color: map.get($item, btnDisabledColor);
         }
         &.is--loading {
           border-color: $textColor;
@@ -279,10 +281,10 @@ $btnThemeList: (
   }
   & > .vxe-button {
     &.type--button {
-      @for $index from 0 to length($btnThemeList) {
-        $item: nth($btnThemeList, $index + 1);
-        $btnColor: map-get($item, btnColor);
-        &.theme--#{map-get($item, name)} {
+      @for $index from 0 to list.length($btnThemeList) {
+        $item: list.nth($btnThemeList, $index + 1);
+        $btnColor: map.get($item, btnColor);
+        &.theme--#{map.get($item, name)} {
           color: $btnColor;
         }
       }
@@ -294,20 +296,20 @@ $btnThemeList: (
         color: $vxe-primary-lighten-color;
       }
       &.type--text {
-        @for $index from 0 to length($btnThemeList) {
-          $item: nth($btnThemeList, $index + 1);
-          &.theme--#{map-get($item, name)} {
-            color: map-get($item, btnLightenColor);
+        @for $index from 0 to list.length($btnThemeList) {
+          $item: list.nth($btnThemeList, $index + 1);
+          &.theme--#{map.get($item, name)} {
+            color: map.get($item, btnLightenColor);
           }
         }
       }
       &.type--button {
-        @for $index from 0 to length($btnThemeList) {
-          $item: nth($btnThemeList, $index + 1);
-          &.theme--#{map-get($item, name)} {
-            color: map-get($item, btnColor);
-            background-color: map-get($item, btnLightenColor);
-            border-color: map-get($item, btnLightenColor);
+        @for $index from 0 to list.length($btnThemeList) {
+          $item: list.nth($btnThemeList, $index + 1);
+          &.theme--#{map.get($item, name)} {
+            color: map.get($item, btnColor);
+            background-color: map.get($item, btnLightenColor);
+            border-color: map.get($item, btnLightenColor);
           }
         }
       }
@@ -322,7 +324,7 @@ $btnThemeList: (
   display: inline-block;
   font-size: 12px;
   margin-left: 4px;
-  @include createAnimationTransition(transform, .2s);
+  @include baseMixin.createAnimationTransition(transform, .2s);
 }
 
 .vxe-button--dropdown-panel {

package/styles/checkbox-group.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/checkbox.scss

@@ -1,6 +1,6 @@
-/**Variable**/
-@import './helpers/mixin.scss';
-@import './base/common.scss';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
+@use './base/common.scss';
 
 /*checkbox-group*/
 .vxe-checkbox-group {
@@ -15,7 +15,7 @@
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1;
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
   &+.vxe-checkbox {
     margin-left: 10px;
   }

package/styles/colgroup.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/column.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/css-variable.scss

@@ -1,4 +1,4 @@
-/**Variable**/
+@use './variable.scss' as *;
 
 :root {
   /*font*/

package/styles/cssvar.scss

@@ -1,2 +1,2 @@
-@import './variable.scss';
-@import './css-variable.scss';
+@use './variable.scss';
+@use './css-variable.scss';

package/styles/custom.scss

@@ -1,6 +1,6 @@
-/**Variable**/
-@import './helpers/mixin.scss';
-@import './base/common.scss';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
+@use './base/common.scss';
 
 .vxe-table-custom--option {
   position: relative;
@@ -153,7 +153,7 @@
 }
 
 .vxe-table-custom--checkbox-option {
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
 }
 .vxe-table-custom--checkbox-option,
 .vxe-table-custom--sort-option {

package/styles/default.scss

@@ -1 +1 @@
-@import './modules.scss';
+@use './modules.scss';

package/styles/edit.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/export.scss

@@ -1,5 +1,5 @@
-/**Variable**/
-@import './helpers/mixin.scss';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
 
 .vxe-export--panel-column > ul {
   list-style-type: none;
@@ -122,5 +122,5 @@
 }
 
 .vxe-export--panel-column-option {
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
 }

package/styles/filter.scss

@@ -1,5 +1,5 @@
-/**Variable**/
-@import './helpers/mixin.scss';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
 
 /*筛选*/
 .vxe-cell--filter {
@@ -109,5 +109,5 @@
 }
 
 .vxe-table--filter-option {
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
 }

package/styles/footer.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/form-gather.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/form-item.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/form.scss

@@ -1,4 +1,6 @@
-/**Variable**/
+@use 'sass:list';
+@use './variable.scss' as *;
+
 %ButtonHover {
   color: $vxe-primary-lighten-color;
   border-color: $vxe-primary-lighten-color;
@@ -20,9 +22,9 @@
   $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
           37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
           70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
-  @for $index from 0 to length($spans) {
+  @for $index from 0 to list.length($spans) {
     & > .vxe-form--item-col_#{$index + 1} {
-      width: nth($spans, $index + 1);
+      width: list.nth($spans, $index + 1);
     }
   }
 }

package/styles/grid.scss

@@ -1,4 +1,4 @@
-/**Variable**/
+@use './variable.scss' as *;
 
 .vxe-grid {
   position: relative;

package/styles/header.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/helpers/{mixin.scss → baseMixin.scss}

@@ -1,3 +1,5 @@
+@use '../variable.scss' as *;
+
 @mixin createAnimationTransition ($property, $duration: .1s, $func: ease-in-out) {
   transition: $property $duration $func;
 }

package/styles/icon.scss

@@ -1,5 +1,7 @@
-/**Variable**/
-@import './old-icon.scss';
+@use 'sass:map';
+@use 'sass:list';
+@use './variable.scss' as *;
+@use './old-icon.scss';
 
 @font-face {
   font-family: "vxeiconfont";
@@ -70,10 +72,10 @@ $btnThemeList: (
   &.roll {
     animation: rollCircle 1s infinite linear;
   }
-  @for $index from 0 to length($btnThemeList) {
-    $item: nth($btnThemeList, $index + 1);
-    &.theme--#{map-get($item, name)} {
-      color: map-get($item, textColor);
+  @for $index from 0 to list.length($btnThemeList) {
+    $item: list.nth($btnThemeList, $index + 1);
+    &.theme--#{map.get($item, name)} {
+      color: map.get($item, textColor);
     }
   }
 }

package/styles/index.scss

@@ -1,4 +1,4 @@
 // 该文件已废弃，请使用 vxe-table/style/all.scss
 
-@import './variable.scss';
-@import './default.scss';
+@use './variable.scss';
+@use './default.scss';

package/styles/input.scss

@@ -1,5 +1,6 @@
-/**Variable**/
-@import './helpers/mixin.scss';
+@use 'sass:list';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
 
 $iconWidth: 1.6em;
 
@@ -272,7 +273,7 @@ $iconWidth: 1.6em;
     align-items: center;
     justify-content: center;
     .vxe-input--panel-icon {
-      @include createAnimationTransition(transform, .2s);
+      @include baseMixin.createAnimationTransition(transform, .2s);
     }
   }
 
@@ -768,7 +769,7 @@ $iconWidth: 1.6em;
   $quarterRowHeightList: $vxe-input-date-quarter-row-height-default, $vxe-input-date-quarter-row-height-medium, $vxe-input-date-quarter-row-height-small, $vxe-input-date-quarter-row-height-mini;
   $titleRowHeightList: $vxe-input-date-title-height-default, $vxe-input-date-title-height-medium, $vxe-input-date-title-height-small, $vxe-input-date-title-height-mini;
   
-  font-size: nth($fontSizeList, $sizeIndex);
+  font-size: list.nth($fontSizeList, $sizeIndex);
   .vxe-input--panel-wrapper {
     max-height: 400px - $sizeIndex * 20;
   }
@@ -788,25 +789,25 @@ $iconWidth: 1.6em;
   &.type--year {
     .vxe-input--panel-wrapper {
       $widthList: 336px, 336px, 312px, 288px;
-      width: nth($widthList, $sizeIndex);
+      width: list.nth($widthList, $sizeIndex);
     }
   }
   &.type--week {
     .vxe-input--panel-wrapper {
       $widthList: 380px, 380px, 354px, 326px;
-      width: nth($widthList, $sizeIndex);
+      width: list.nth($widthList, $sizeIndex);
     }
   }
   &.type--time {
     .vxe-input--panel-wrapper {
       $widthList: 170px, 168px, 154px, 146px;
-      width: nth($widthList, $sizeIndex);
+      width: list.nth($widthList, $sizeIndex);
     }
   }
   &.type--datetime {
     .vxe-input--panel-left-wrapper {
       $widthList: 336px, 336px, 312px, 288px;
-      width: nth($widthList, $sizeIndex);
+      width: list.nth($widthList, $sizeIndex);
     }
     .vxe-input--panel-left-wrapper,
     .vxe-input--panel-right-wrapper {
@@ -844,20 +845,20 @@ $iconWidth: 1.6em;
   .vxe-input--time-picker-header,
   .vxe-input--date-picker-header {
     $paddingBottomList: 8px, 7px, 6px, 5px;
-    padding-bottom: nth($paddingBottomList, $sizeIndex);
+    padding-bottom: list.nth($paddingBottomList, $sizeIndex);
   }
   .vxe-input--date-picker-body table,
   .vxe-input--time-picker-body {
-    height: nth($timeWeekRowHeightList, $sizeIndex) * 6 + nth($titleRowHeightList, $sizeIndex);
+    height: list.nth($timeWeekRowHeightList, $sizeIndex) * 6 + list.nth($titleRowHeightList, $sizeIndex);
   }
   .vxe-input--time-picker-body {
     $ulWidthList: 48px, 48px, 44px, 42px;
     & > ul {
-      width: nth($ulWidthList, $sizeIndex);
+      width: list.nth($ulWidthList, $sizeIndex);
       &:before,
       &:after {
         $heightList: 120px, 120px, 110px, 100px;
-        height: nth($heightList, $sizeIndex);
+        height: list.nth($heightList, $sizeIndex);
       }
       & > li {
         height: 26px;
@@ -865,32 +866,32 @@ $iconWidth: 1.6em;
       }
     }
     .vxe-input--time-picker-minute-list {
-      left: nth($ulWidthList, $sizeIndex);
+      left: list.nth($ulWidthList, $sizeIndex);
     }
     .vxe-input--time-picker-second-list {
-      left: nth($ulWidthList, $sizeIndex) * 2;
+      left: list.nth($ulWidthList, $sizeIndex) * 2;
     }
   }
   .vxe-input--date-day-view,
   .vxe-input--date-week-view {
     td {
-      height: nth($timeWeekRowHeightList, $sizeIndex);
+      height: list.nth($timeWeekRowHeightList, $sizeIndex);
     }
   }
   .vxe-input--date-quarter-view {
     td {
-      height: nth($quarterRowHeightList, $sizeIndex);
+      height: list.nth($quarterRowHeightList, $sizeIndex);
     }
   }
   .vxe-input--date-month-view,
   .vxe-input--date-year-view {
     td {
-      height: nth($monthYearRowHeightList, $sizeIndex);
+      height: list.nth($monthYearRowHeightList, $sizeIndex);
     }
   }
   .vxe-input--date-picker-body {
     th {
-      height: nth($titleRowHeightList, $sizeIndex);
+      height: list.nth($titleRowHeightList, $sizeIndex);
     }
   }
   .vxe-input--time-picker-confirm,
@@ -899,7 +900,7 @@ $iconWidth: 1.6em;
     padding: 0 10px - $sizeIndex;
   }
   .vxe-input--date-label {
-    line-height: nth($fontSizeList, $sizeIndex) + 1px;
+    line-height: list.nth($fontSizeList, $sizeIndex) + 1px;
   }
 }
 

package/styles/keyboard.scss

@@ -1 +0,0 @@
-/**Variable**/

package/styles/list.scss

@@ -1,4 +1,4 @@
-/**Variable**/
+@use './variable.scss' as *;
 
 .vxe-list {
   position: relative;

package/styles/loading.scss

@@ -1,4 +1,4 @@
-/**Variable**/
+@use './variable.scss' as *;
 
 /*加载中*/
 .vxe-loading {

package/styles/menu.scss

@@ -1,4 +1,4 @@
-/**Variable**/
+@use './variable.scss' as *;
 
 /*快捷菜单*/
 .vxe-table--context-menu-wrapper {

package/styles/modal.scss

@@ -1,5 +1,5 @@
-/**Variable**/
-@import './helpers/mixin.scss';
+@use './variable.scss' as *;
+@use './helpers/baseMixin.scss';
 
 .vxe-modal--wrapper {
   display: none;
@@ -83,13 +83,13 @@
   &.is--animat {
     &.is--mask {
       &:before {
-        @include createAnimationTransition(background-color, .2s);
+        @include baseMixin.createAnimationTransition(background-color, .2s);
       }
     }
     &.type--message {
       .vxe-modal--box {
         &:not(.is--drag) {
-          @include createAnimationTransition(all, .4s, ease-out);
+          @include baseMixin.createAnimationTransition(all, .4s, ease-out);
         }
       }
     }