vxe-table 3.6.0-beta.0 → 3.6.0-beta.11

package/styles/radio.scss

@@ -1,6 +1,7 @@
 /**Variable**/
 @import './helpers/mixin.scss';
 @import './base/common.scss';
+@import './base/checked.scss';
 
 /*radio-group*/
 .vxe-radio-group {
@@ -15,13 +16,11 @@
 
 /*radio*/
 .vxe-radio {
+  @extend %XERadioIcon;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
-  user-select: none;
   line-height: 1;
-  cursor: pointer;
-  color: $vxe-font-color;
   > input {
     &[type="radio"] {
       position: absolute;
@@ -30,75 +29,20 @@
       border: 0;
       appearance: none;
     }
-    &+.vxe-radio--icon {
-      position: relative;
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      border: $vxe-radio-border-width solid $vxe-input-border-color;
-      background-color: $vxe-radio-icon-background-color;
-      vertical-align: middle;
-      border-radius: 50%;
-    }
-    &:checked+.vxe-radio--icon {
-      background-color: $vxe-primary-color;
-      border-color: $vxe-primary-color;
-      &:before {
-        content: "";
-        position: absolute;
-        background-color: $vxe-radio-checked-icon-background-color;
-        border-radius: 50%;
-        height: 0.25em;
-        width: 0.25em;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%);
-      }
-      &+.vxe-radio--label {
-        color: $vxe-primary-color;
-      }
-    }
-  }
-  &:not(.is--disabled) {
-    & > input {
-      &:focus {
-        &+.vxe-radio--icon {
-          border-color: $vxe-primary-color;
-          box-shadow: 0 0 0.2em 0 $vxe-primary-color;
-        }
-      }
-    }
-    &:hover {
-      > input {
-        &+.vxe-radio--icon {
-          border-color: $vxe-primary-color;
-        }
-      }
-    }
-  }
-  &.is--disabled {
-    cursor: not-allowed;
-    > input {
-      &+.vxe-radio--icon {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-        &:before {
-          border-color: $vxe-primary-disabled-color;
-          background-color: $vxe-primary-disabled-color;
-        }
-        &+.vxe-radio--label {
-          color: $vxe-disabled-color;
-        }
-      }
-    }
   }
   .vxe-radio--label {
-    padding-left: 0.5em;
     vertical-align: middle;
     display: inline-block;
     max-width: 50em;
     @extend %TextEllipsis;
   }
+  &:not(.is--disabled) {
+    > input {
+      &:focus+.vxe-radio--icon {
+        color: $vxe-primary-color;
+      }
+    }
+  }
   &:not(.vxe-radio-button) {
     &+.vxe-radio {
       margin-left: 10px;
@@ -192,25 +136,13 @@
 
 .vxe-radio {
   font-size: $vxe-font-size;
-  .vxe-radio--icon {
-    font-size: $vxe-radio-font-size-default;
-  }
   &.size--medium {
     font-size: $vxe-font-size-medium;
-    .vxe-radio--icon {
-      font-size: $vxe-radio-font-size-medium;
-    }
   }
   &.size--small {
     font-size: $vxe-font-size-small;
-    .vxe-radio--icon {
-      font-size: $vxe-radio-font-size-small;
-    }
   }
   &.size--mini {
     font-size: $vxe-font-size-mini;
-    .vxe-radio--icon {
-      font-size: $vxe-radio-font-size-mini;
-    }
   }
 }

package/styles/select.scss

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

package/styles/table.scss

@@ -335,10 +335,12 @@
   .vxe-sort--asc-btn,
   .vxe-sort--desc-btn {
     position: absolute;
-    left: 0.35em;
+    left: 0.2em;
     color: $vxe-table-column-icon-border-color;
     width: 1em;
     text-align: center;
+    height: 0.8em;
+    line-height: 0.8em;
     cursor: pointer;
     &:hover {
       color: $vxe-table-font-color;
@@ -348,10 +350,10 @@
     }
   }
   .vxe-sort--asc-btn {
-    top: -0.15em;
+    top: -0.1em;
   }
   .vxe-sort--desc-btn {
-    bottom: -0.15em;
+    bottom: -0.2em;
   }
 }
 
@@ -686,7 +688,7 @@
       background-position: right top, right bottom;
     }
     .vxe-table--fixed-left-wrapper {
-      // border-right: $vxe-table-border-width solid $vxe-table-border-color;
+      // border-right: 1px solid $vxe-table-border-color;
       .vxe-body--column{
         border-right-color: $vxe-table-border-color;
       }
@@ -730,9 +732,6 @@
     .vxe-table--header-border-line {
       display: none;
     }
-    .vxe-table--footer-wrapper {
-      border-top: 0;
-    }
   }
   
   &.size--medium {
@@ -827,23 +826,10 @@
 
   // 单选框和复选框
   .vxe-cell--radio {
-    @extend %XERadio;
+    @extend %XERadioIcon;
   }
   .vxe-cell--checkbox {
-    @extend %XECheckbox;
-  }
-  .vxe-cell--radio .vxe-radio--icon,
-  .vxe-cell--checkbox .vxe-checkbox--icon {
-    left: 0;
-    top: 0.1em;
-  }
-  .vxe-cell--radio .vxe-radio--label,
-  .vxe-cell--checkbox .vxe-checkbox--label {
-    padding-left: 0.5em;
-  }
-  .vxe-cell--radio,
-  .vxe-cell--checkbox {
-    padding-left: 1.2em;
+    @extend %XECheckboxIcon;
   }
 
   .fixed--hidden {
@@ -1044,6 +1030,9 @@
   .vxe-body--expanded-cell {
     position: relative;
     z-index: 1;
+    &.is--ellipsis {
+      overflow: auto;
+    }
   }
 
   /*设置列高度*/
@@ -1095,10 +1084,10 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon {
+    .vxe-cell--checkbox {
       font-size: $vxe-checkbox-font-size-medium;
     }
-    .vxe-cell--radio .vxe-radio--icon {
+    .vxe-cell--radio {
       font-size: $vxe-radio-font-size-medium;
     }
   }
@@ -1113,10 +1102,10 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon {
+    .vxe-cell--checkbox {
       font-size: $vxe-checkbox-font-size-small;
     }
-    .vxe-cell--radio .vxe-radio--icon {
+    .vxe-cell--radio {
       font-size: $vxe-radio-font-size-small;
     }
   }
@@ -1131,10 +1120,10 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon {
+    .vxe-cell--checkbox {
       font-size: $vxe-checkbox-font-size-mini;
     }
-    .vxe-cell--radio .vxe-radio--icon {
+    .vxe-cell--radio {
       font-size: $vxe-radio-font-size-mini;
     }
   }

package/styles/toolbar.scss

@@ -120,7 +120,7 @@
       & > li {
         max-width: 16em;
         min-width: 12.5em;
-        padding: 0.2em 1em 0.2em 2.3em;
+        padding: 0.2em 1em 0.2em 1em;
         @for $i from 2 through 8 {
           $interval: $i - 1 + 0.2;
           &.level--#{$i}{
@@ -170,42 +170,18 @@
 }
 
 .vxe-custom--option {
-  @extend %XECheckbox;
-  .vxe-checkbox--icon {
-    left: 0.6em;
-    top: 0.38em;
-  }
+  @extend %XECheckboxIcon;
 }
 
 .vxe-toolbar {
   font-size: $vxe-font-size;
-  .vxe-custom--option {
-    & > .vxe-checkbox--icon {
-      font-size: $vxe-checkbox-font-size-default;
-    }
-  }
   &.size--medium {
     font-size: $vxe-font-size-medium;
-    .vxe-custom--option {
-      & > .vxe-checkbox--icon {
-        font-size: $vxe-checkbox-font-size-medium;
-      }
-    }
   }
   &.size--small {
     font-size: $vxe-font-size-small;
-    .vxe-custom--option {
-      & > .vxe-checkbox--icon {
-        font-size: $vxe-checkbox-font-size-small;
-      }
-    }
   }
   &.size--mini {
     font-size: $vxe-font-size-mini;
-    .vxe-custom--option {
-      & > .vxe-checkbox--icon {
-        font-size: $vxe-checkbox-font-size-mini;
-      }
-    }
   }
 }

package/styles/variable.scss

@@ -83,7 +83,7 @@ $vxe-table-cell-dirty-update-color: #f56c6c !default;
 $vxe-table-cell-dirty-insert-color: #19A15F !default;
 $vxe-table-cell-area-border-color: $vxe-primary-color !default;
 $vxe-table-cell-area-border-width: 1px !default;
-$vxe-table-cell-main-area-extension-border-color: #fff !default;
+$vxe-table-cell-main-area-extension-border-color: #fff;
 $vxe-table-cell-main-area-extension-background-color: $vxe-primary-color !default;
 $vxe-table-cell-extend-area-border-width: 2px !default;
 $vxe-table-cell-copy-area-border-width: 3px !default;
@@ -108,7 +108,8 @@ $vxe-table-menu-item-width: 178px !default;
 $vxe-table-menu-background-color: #fff !default;
 
 /*loading*/
-$vxe-loading-background-color: rgba(0, 0, 0, 0.3) !default;
+$vxe-loading-color: $vxe-primary-color !default;
+$vxe-loading-background-color: rgba(255, 255, 255, 0.5) !default;
 $vxe-loading-z-index: 999 !default;
 
 /*validate*/
@@ -142,10 +143,10 @@ $vxe-modal-body-background-color: #fff !default;
 $vxe-modal-border-color: #ebeef5 !default;
 
 /*checkbox*/
-$vxe-checkbox-font-size-default: 16px !default;
-$vxe-checkbox-font-size-medium: 15px !default;
-$vxe-checkbox-font-size-small: 14px !default;
-$vxe-checkbox-font-size-mini: 14px !default;
+$vxe-checkbox-font-size-default: 15px !default;
+$vxe-checkbox-font-size-medium: 14px !default;
+$vxe-checkbox-font-size-small: 13px !default;
+$vxe-checkbox-font-size-mini: 12px !default;
 $vxe-checkbox-checked-width: 0.32em !default;
 $vxe-checkbox-checked-height: 0.64em !default;
 $vxe-checkbox-indeterminate-width: 0.6em !default;
@@ -194,19 +195,19 @@ $vxe-input-date-picker-festival-selected-color: $vxe-input-date-picker-selected-
 $vxe-input-date-picker-notice-selected-background-color: $vxe-input-date-picker-selected-color !default;
 $vxe-input-date-extra-color: #67c23a !default;
 $vxe-input-date-extra-important-color: #fd2222 !default;
-$vxe-input-date-title-height-default: 34px !default;
+$vxe-input-date-title-height-default: 30px !default;
 $vxe-input-date-title-height-medium: 29px !default;
 $vxe-input-date-title-height-small: 28px !default;
 $vxe-input-date-title-height-mini: 26px !default;
-$vxe-input-date-time-week-row-height-default: 42px !default;
+$vxe-input-date-time-week-row-height-default: 38px !default;
 $vxe-input-date-time-week-row-height-medium: 36px !default;
 $vxe-input-date-time-week-row-height-small: 34px !default;
 $vxe-input-date-time-week-row-height-mini: 32px !default;
-$vxe-input-date-month-year-row-height-default: 52px !default;
+$vxe-input-date-month-year-row-height-default: 48px !default;
 $vxe-input-date-month-year-row-height-medium: 46px !default;
 $vxe-input-date-month-year-row-height-small: 44px !default;
 $vxe-input-date-month-year-row-height-mini: 42px !default;
-$vxe-input-date-quarter-row-height-default: 64px !default;
+$vxe-input-date-quarter-row-height-default: 60px !default;
 $vxe-input-date-quarter-row-height-medium: 58px !default;
 $vxe-input-date-quarter-row-height-small: 56px !default;
 $vxe-input-date-quarter-row-height-mini: 54px !default;

package/types/table.d.ts

@@ -859,41 +859,79 @@ export declare class Table extends VXETableComponent {
    */
   getUpdateRecords(): RowInfo[];
   /**
-   * 手动清除单元格激活状态
+   * 请使用 clearEdit
+   * @deprecated
    */
-  clearActived(): Promise<any>;
+  clearActived(evnt?: Event): Promise<any>
+   /**
+    * 手动清除单元格激活状态
+    */
+  clearEdit(evnt?: Event): Promise<any>
   /**
    * 用于 mouse-config.area，用于清除鼠标选择的区域，可以指定清除的区域
    */
   clearCellAreas(area?: number | MouseCellArea): Promise<any>;
   /**
-   * 用于 edit-config，获取已激活的行数据
+   * 请使用 getEditRecord
+   * @deprecated
    */
   getActiveRecord(): {
-    row: RowInfo;
-    rowIndex: number;
-    $rowIndex: number;
-    column: ColumnInfo;
-    columnIndex: number;
-    $columnIndex: number;
-    cell: HTMLElement;
-  };
+    row: any
+    rowIndex: number
+    $rowIndex: number
+    column: ColumnInfo
+    columnIndex: number
+    $columnIndex: number
+    cell: HTMLElement
+  }
   /**
-   * 用于 edit-config，判断行是否为激活编辑状态
-   * @param row 指定行
+   * 用于 edit-config，获取已激活的行数据
+   */
+  getEditRecord(): {
+    row: any
+    rowIndex: number
+    $rowIndex: number
+    column: ColumnInfo
+    columnIndex: number
+    $columnIndex: number
+    cell: HTMLElement
+  }
+  /**
+   * 请使用 isEditByRow
+   * @deprecated
    */
-  isActiveByRow(row: RowInfo): boolean;
+  isActiveByRow(row: any): boolean
+   /**
+    * 用于 edit-config，判断行是否为激活编辑状态
+    * @param row 指定行
+    */
+  isEditByRow(row: any): boolean
   /**
    * 用于 edit-config，激活行编辑并激活第一个单元格
    * @param row 指定行
    */
   setActiveRow(row: RowInfo): Promise<any>;
   /**
-   * 用于 edit-config，激活单元格编辑
-   * @param row 指定行
-   * @param field 字段名
+   * 请使用 setEditRow
+   * @deprecated
    */
-  setActiveCell(row: RowInfo, field: string): Promise<any>;
+  setActiveRow(row: any): Promise<any>
+   /**
+    * 用于 edit-config，激活行编辑并激活第一个单元格
+    * @param row 指定行
+    */
+  setEditRow(row: any): Promise<any>
+   /**
+    * 请使用 setEditCell
+    * @deprecated
+    */
+  setActiveCell(row: any, fieldOrColumn: string | ColumnInfo): Promise<any>
+   /**
+    * 用于 edit-config，激活单元格编辑
+    * @param row 指定行
+    * @param field 字段名
+    */
+  setEditCell(row: any, fieldOrColumn: string | ColumnInfo): Promise<any>
   /**
    * 用于 mouse-config.mouse-config，选中某个单元格
    * @param row 指定行
@@ -1236,6 +1274,7 @@ export interface TableExpandConfig {
   accordion?: boolean;
   trigger?: 'default' | 'cell' | 'row';
   lazy?: boolean;
+  height?: number
   loadMethod?(params: { row: RowInfo, rowIndex: number, $rowIndex: number }): Promise<any>;
   toggleMethod?(params: { expanded: boolean, row: RowInfo, column: ColumnInfo, columnIndex: number, $columnIndex: number }): boolean;
   visibleMethod?(params: { expanded: boolean, row: RowInfo, column: ColumnInfo, columnIndex: number, $columnIndex: number }): boolean;

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

@@ -101,7 +101,7 @@ export interface VXETableCore {
 }
 
 /**
- * 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...  
+ * 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项等...  
  */
  export const VXETable: VXETableCore