vxe-table 4.6.5 → 4.6.6

package/styles/custom.scss

@@ -1,5 +1,6 @@
 /**Variable**/
 @import './helpers/mixin.scss';
+@import './base/common.scss';
 
 .vxe-table-custom--option {
   display: flex;
@@ -20,60 +21,64 @@
   &.is--active {
     display: block;
   }
-  .vxe-table-custom--header,
-  .vxe-table-custom--body {
-    list-style-type: none;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 0;
-    padding: 0;
-    user-select: none;
-    & > li {
-      max-width: 18em;
-      min-width: 14em;
-      padding: 0.2em 1em 0.2em 1em;
-      @for $i from 2 through 8 {
-        $interval: $i - 1 + 0.2;
-        &.level--#{$i}{
-          padding-left: #{$interval + 2.3}em;
-          .vxe-checkbox--icon {
-            left: #{$interval + 0.6}em;
-          }
+}
+
+.vxe-table-custom--header,
+.vxe-table-custom--body {
+  list-style-type: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  & > li {
+    max-width: 18em;
+    min-width: 14em;
+    padding: 0.2em 1em 0.2em 1em;
+    @for $i from 2 through 8 {
+      $interval: $i - 1 + 0.2;
+      &.level--#{$i}{
+        padding-left: #{$interval + 2.3}em;
+        .vxe-checkbox--icon {
+          left: #{$interval + 0.6}em;
         }
       }
     }
   }
-  .vxe-table-custom--header {
-    padding: 0.28em 0;
-    font-weight: 700;
-    border-bottom: 1px solid var(--vxe-table-popup-border-color);
-  }
-  .vxe-table-custom--body {
-    padding: 0.2em 0;
-    max-height: 20em;
-    .vxe-table-custom--checkbox-option {
-      &:hover {
-        background-color: var(--vxe-table-row-hover-background-color);
-      }
+}
+
+.vxe-table-custom--header {
+  padding: 0.28em 0;
+  font-weight: 700;
+  border-bottom: 1px solid var(--vxe-table-popup-border-color);
+}
+
+.vxe-table-custom--body {
+  padding: 0.2em 0;
+  max-height: 20em;
+  .vxe-table-custom--checkbox-option {
+    &:hover {
+      background-color: var(--vxe-table-row-hover-background-color);
     }
   }
-  .vxe-table-custom--footer {
-    border-top: 1px solid var(--vxe-table-popup-border-color);
-    text-align: right;
-    button {
-      background-color: transparent;
-      width: 50%;
-      height: 2.5em;
-      border: 0;
-      color: var(--vxe-font-color);
-      text-align: center;
-      cursor: pointer;
-      &:focus {
-        outline: none;
-      }
-      &:hover {
-        color: var(--vxe-primary-color);
-      }
+}
+
+.vxe-table-custom--footer {
+  border-top: 1px solid var(--vxe-table-popup-border-color);
+  text-align: right;
+  button {
+    background-color: transparent;
+    width: 50%;
+    height: 2.5em;
+    border: 0;
+    color: var(--vxe-font-color);
+    text-align: center;
+    cursor: pointer;
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      color: var(--vxe-primary-color);
     }
   }
 }
@@ -92,46 +97,31 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  .vxe-table-custom--fixed-left-option,
-  .vxe-table-custom--fixed-right-option {
-    line-height: 1.34em;
-    font-size: 1.1em;
-    padding: 0 0.2em;
-    cursor: pointer;
-    &.is--checked,
-    &:hover {
-      color: var(--vxe-primary-color);
-    }
-    &.is--disabled {
-      cursor: no-drop;
-      color: var(--vxe-input-disabled-color);
-    }
+}
+
+.vxe-table-custom--fixed-left-option,
+.vxe-table-custom--fixed-right-option {
+  line-height: 1.34em;
+  font-size: 1.1em;
+  padding: 0 0.2em;
+  cursor: pointer;
+  &.is--checked,
+  &:hover {
+    color: var(--vxe-primary-color);
+  }
+  &.is--disabled {
+    cursor: no-drop;
+    color: var(--vxe-input-disabled-color);
   }
 }
 
 .vxe-table-custom-popup--body {
   overflow: auto;
   height: 100%;
-  border: 1px solid var(--vxe-table-border-color);
-  .vxe-table-custom-popup--name {
-    max-width: 360px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  @for $index from 2 to 10 {
-    $paddingLeft: ($index - 1) * 24px;
-    .vxe-table-custom-popup--row-level#{$index} {
-      .vxe-table-custom-popup--name {
-        padding-left: $paddingLeft;
-        max-width: 260px - $paddingLeft;
-      }
-    }
-  }
-  .vxe-table-custom-popup--column-visible,
-  .vxe-table-custom-popup--column-fixed {
-    text-align: center;
-  }
+}
+
+.vxe-table-custom-popup--table-wrapper {
+  border-bottom: 1px solid var(--vxe-table-border-color);
   table {
     width: 100%;
     border: 0;
@@ -141,16 +131,15 @@
       position: sticky;
       top: 0;
       text-align: left;
+      border-top: 1px solid var(--vxe-table-border-color);
       border-bottom: 1px solid var(--vxe-table-border-color);
       border-left: 1px solid var(--vxe-table-border-color);
       background-color: var(--vxe-table-header-background-color);
+      z-index: 7;
     }
     td {
       border-top: 1px solid var(--vxe-table-border-color);
       border-left: 1px solid var(--vxe-table-border-color);
-      &:nth-child(2) {
-        text-align: center;
-      }
     }
     tr {
       &:first-child {
@@ -163,6 +152,123 @@
     td {
       height: 44px;
       padding: 0 0.6em;
+      &:last-child {
+        border-right: 1px solid var(--vxe-table-border-color);
+      }
+    }
+  }
+}
+
+.vxe-table-custom-popup--drag-hint {
+  @extend %TextEllipsis;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.6em 1em 0.6em 1.8em;
+  max-width: 300px;
+  border-radius: var(--vxe-border-radius);
+  user-select: none;
+  pointer-events: none;
+  background-color: var(--vxe-table-body-background-color);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  z-index: 33;
+}
+
+.vxe-table-custom-popup--name {
+  max-width: 360px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@for $index from 2 to 10 {
+  $paddingLeft: ($index - 1) * 24px;
+  .vxe-table-custom-popup--row {
+    &.level--#{$index} {
+      .vxe-table-custom-popup--name {
+        padding-left: $paddingLeft;
+        max-width: 260px - $paddingLeft;
+      }
+    }
+  }
+}
+
+.vxe-table-custom-popup--column-item {
+  position: relative;
+  &.col--sort,
+  &.col--visible,
+  &.col--fixed {
+    text-align: center;
+  }
+}
+
+.vxe-table-custom-popup--row {
+  &.active--drag-target {
+    &[drag-pos="top"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          display: block;
+          top: -2px;
+        }
+      }
+    }
+    &[drag-pos="bottom"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          display: block;
+          bottom: -2px;
+        }
+      }
+    }
+  }
+  &:first-child {
+    &[drag-pos="top"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          top: 0;
+        }
+      }
+    }
+  }
+  &:last-child {
+    &[drag-pos="bottom"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          bottom: 0;
+        }
+      }
     }
   }
-}
+}
+
+.vxe-table-custom-popup--column-item {
+  &::after {
+    display: none;
+    content: "";
+    position: absolute;
+    left: -1px;
+    width: calc(100% + 1px);
+    height: 3px;
+    background-color: var(--vxe-primary-color);
+    z-index: 12;
+  }
+  &:last-child {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+.vxe-table-custom--flip-move {
+  transition: transform 0.35s;
+}
+
+.vxe-table-custom-popup--column-sort-btn {
+  font-size: 1.2em;
+  padding: 0.2em 0.5em;
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+}

package/styles/helpers/mixin.scss

@@ -1,4 +1,4 @@
-@mixin animatTransition ($property, $duration: .1s, $func: ease-in-out) {
+@mixin createAnimationTransition ($property, $duration: .1s, $func: ease-in-out) {
   transition: $property $duration $func;
 }
 

package/styles/input.scss

@@ -272,7 +272,7 @@ $iconWidth: 1.6em;
     align-items: center;
     justify-content: center;
     .vxe-input--panel-icon {
-      @include animatTransition(transform, .2s);
+      @include createAnimationTransition(transform, .2s);
     }
   }
 
@@ -463,7 +463,6 @@ $iconWidth: 1.6em;
 }
 .vxe-input--date-picker-label,
 .vxe-input--date-picker-btn {
-  display: inline-block;
   display: flex;
   align-items: center;
   justify-content: center;

package/styles/loading.scss

@@ -15,7 +15,7 @@
     display: block;
   }
   & > .vxe-loading--chunk,
-  & > .vxe-loading--warpper {
+  & > .vxe-loading--wrapper {
     width: 100%;
     position: absolute;
     top: 50%;

package/styles/modal.scss

@@ -82,13 +82,13 @@
   &.is--animat {
     &.is--mask {
       &:before {
-        @include animatTransition(background-color, .2s);
+        @include createAnimationTransition(background-color, .2s);
       }
     }
     &.type--message {
       .vxe-modal--box {
         &:not(.is--drag) {
-          @include animatTransition(all, .4s, ease-out);
+          @include createAnimationTransition(all, .4s, ease-out);
         }
       }
     }

package/styles/select.scss

@@ -30,7 +30,7 @@
     width: 100%;
     .vxe-input--suffix-icon {
       display: inline-block;
-      @include animatTransition(transform, .2s);
+      @include createAnimationTransition(transform, .2s);
     }
   }
   &.is--active {

package/styles/table.scss

@@ -1210,7 +1210,7 @@
 
     }
   }
-  &.vaild-msg--single {
+  &.valid-msg--single {
     .vxe-body--row {
       &:last-child {
         .vxe-cell--valid-error-hint {
@@ -1224,7 +1224,7 @@
       }
     }
   }
-  &.vaild-msg--full {
+  &.valid-msg--full {
     .vxe-body--row {
       &:last-child {
         .vxe-cell--valid-error-hint {

package/types/table.d.ts

@@ -240,7 +240,7 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 用于 edit-config，判断行是否为新增的临时数据
    * @param row 指定行
    */
-  isInsertByRow(row: any): boolean
+  isInsertByRow(row: any | null): boolean
   /**
    * 删除所有新增的临时数据
    */
@@ -250,7 +250,7 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * @param row 指定行
    * @param field 指定字段
    */
-  isUpdateByRow(row: any, field?: string): boolean
+  isUpdateByRow(row: any, field?: string | null): boolean
   /**
    * 获取表格的可视列，也可以指定索引获取列
    * @param columnIndex 列索引
@@ -261,12 +261,12 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 根据列的唯一主键获取列
    * @param colid 列主键
    */
-  getColumnById(colid: string): VxeTableDefines.ColumnInfo<DT> | null
+  getColumnById(colid: string | null): VxeTableDefines.ColumnInfo<DT> | null
   /**
    * 根据列的字段名获取列
    * @param field 字段名
    */
-  getColumnByField(field: string): VxeTableDefines.ColumnInfo<DT> | null
+  getColumnByField(field: string | null): VxeTableDefines.ColumnInfo<DT> | null
   /**
    * 获取当前表格的列
    * 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列
@@ -294,12 +294,12 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 根据行的唯一主键获取行
    * @param rowid 行主键
    */
-  getRowById(rowid: string | number): DT | null
+  getRowById(rowid: string | number | null): DT | null
   /**
    * 根据行获取行的唯一主键
    * @param row 行对象
    */
-  getRowid(row: any): string
+  getRowid(row: any | null): string
   /**
    * 获取当前表格的数据
    * 完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据
@@ -355,8 +355,9 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
   /**
    * 刷新列配置
    * 对于动态修改属性、显示/隐藏列等场景下可能会用到
+   * 如果传 true 则会检查列顺序并排序
    */
-  refreshColumn(): Promise<void>
+  refreshColumn(resiveOrder?: boolean): Promise<void>
   /**
    * 刷新滚动操作，手动同步滚动相关位置
    * 对于某些特殊的操作，比如滚动条错位、固定列不同步
@@ -448,7 +449,7 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 用于 type=radio，判断单选行数据是否勾选
    * @param row 指定行
    */
-  isCheckedByRadioRow(row: any): boolean
+  isCheckedByRadioRow(row: any | null): boolean
   /**
    * 用于 type=radio，设置某一行为选中状态
    * @param row 指定行
@@ -550,17 +551,17 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 已废弃，请使用 isActiveFilterByColumn
    * @deprecated
    */
-  isFilter(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): boolean
+  isFilter(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any> | null): boolean
   /**
    * 判断指定列是否为筛选状态，如果为空则判断所有列
    * @param columnOrField 列对象或字段名
    */
-  isActiveFilterByColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): boolean
+  isActiveFilterByColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any> | null): boolean
   /**
    * 用于 expand-config.lazy，用于懒加载展开行，判断展开行是否懒加载完成
    * @param row 指定行
    */
-  isRowExpandLoaded(row: any): boolean
+  isRowExpandLoaded(row: any | null): boolean
   /**
    * 用于 expand-config.lazy，手动清空懒加载展开行的状态，数据会恢复成未展开的状态，当再次展开时会重新加载
    */
@@ -595,11 +596,11 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 用于 expand-config，判断行是否为展开状态
    * @param row 指定行
    */
-  isRowExpandByRow(row: any): boolean
+  isRowExpandByRow(row: any | null): boolean
   /**
    * @deprecated 已废弃，请使用 isRowExpandByRow
    */
-  isExpandByRow(row: any): boolean
+  isExpandByRow(row: any | null): boolean
   /**
    * 用于 type=expand，手动清空展开行状态，数据会恢复成未展开的状态
    */
@@ -620,7 +621,7 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
   /**
    * 用于 tree-config.lazy，用于懒加载树表格，判断树节点是否懒加载完成
    */
-  isTreeExpandLoaded(row: any): boolean
+  isTreeExpandLoaded(row: any | null): boolean
   /**
    * 用于 tree-config.lazy，手动清空懒加载树节点的状态，数据会恢复成未展开的状态，当再次展开时会重新加载
    */
@@ -655,7 +656,7 @@ export interface TablePublicMethods<DT = VxeTableDataRow> {
    * 用于 tree-config，判断行是否为树形节点展开状态
    * @param row 指定行
    */
-  isTreeExpandByRow(row: any): boolean
+  isTreeExpandByRow(row: any | null): boolean
   /**
    * 用于 tree-config，手动清空树形节点的展开状态，数据会恢复成未展开的状态
    */
@@ -891,6 +892,7 @@ export interface TableReactData<D = VxeTableDataRow> {
   },
   // 自定义列相关的信息
   customStore: VxeTableCustomStoreObj,
+  customColumnList: VxeTableDefines.ColumnInfo<D>[]
   // 当前选中的筛选列
   filterStore: {
     isAllSelected: boolean
@@ -1035,6 +1037,13 @@ export interface VxeTableCustomStoreObj {
   maxHeight: number
 }
 
+export interface VxeTableCustomStorageObj {
+  visible?: boolean
+  resizable?: boolean
+  fixed?: boolean
+  sort?: boolean
+}
+
 export interface TableInternalData<D = VxeTableDataRow> {
   tZindex: number
   elemStore: {
@@ -1450,12 +1459,7 @@ export namespace VxeTablePropTypes {
     /**
      * 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
      */
-    storage?: boolean | {
-      visible?: boolean
-      resizable?: boolean
-      fixed?: boolean
-      order?: boolean
-    }
+    storage?: boolean | VxeTableCustomStorageObj
     mode?: 'simple' | 'popup' | '' | null
     trigger?: string,
     immediate?: boolean
@@ -2954,9 +2958,15 @@ export namespace VxeTableDefines {
     checked: boolean
     halfChecked: boolean
     disabled: boolean
+
+    // 数据排序
     order: VxeTablePropTypes.SortOrder
     sortTime: number
-    customOrder: number
+
+    // 列排序
+    sortNumber: number
+    renderSortNumber: number
+
     renderWidth: number
     renderHeight: number
     resizeWidth: number

package/types/v-x-e-table/renderer.d.ts

@@ -248,6 +248,7 @@ export namespace VxeGlobalRendererHandles {
   export interface RenderOptionProps {
     value?: string
     label?: string
+    disabled?: string
     key?: string
   }