vxe-table 3.5.9 → 3.6.0-beta.10

package/packages/table/src/table.js

@@ -234,6 +234,8 @@ export default {
     validConfig: Object,
     // 校验规则配置项
     editRules: Object,
+    // 加载中配置项
+    loadingConfig: Object,
     // 空内容渲染配置项
     emptyRender: [Boolean, Object],
     // 自定义列配置项
@@ -569,6 +571,9 @@ export default {
     emptyOpts () {
       return Object.assign({}, GlobalConfig.table.emptyRender, this.emptyRender)
     },
+    loadingOpts () {
+      return Object.assign({}, GlobalConfig.table.loadingConfig, this.loadingConfig)
+    },
     cellOffsetWidth () {
       return this.border ? Math.max(2, Math.ceil(this.scrollbarWidth / this.tableColumn.length)) : 1
     },
@@ -965,7 +970,8 @@ export default {
       footerTableData,
       hasTip,
       columnOpts,
-      rowOpts
+      rowOpts,
+      loadingOpts
     } = this
     const { leftList, rightList } = columnStore
     return h('div', {
@@ -1090,7 +1096,9 @@ export default {
       h(VxeLoading, {
         class: 'vxe-table--loading',
         props: {
-          loading
+          value: loading,
+          icon: loadingOpts.icon,
+          text: loadingOpts.text
         }
       }),
       /**

package/packages/toolbar/src/toolbar.js

@@ -150,12 +150,14 @@ function renderCustoms (h, _vm) {
     const isColGroup = column.children && column.children.length
     const isDisabled = checkMethod ? !checkMethod({ column }) : false
     if (isColGroup || colKey) {
+      const isChecked = column.visible
+      const isIndeterminate = column.halfVisible
       cols.push(
         h('li', {
           class: ['vxe-custom--option', `level--${column.level}`, {
             'is--group': isColGroup,
-            'is--checked': column.visible,
-            'is--indeterminate': column.halfVisible,
+            'is--checked': isChecked,
+            'is--indeterminate': isIndeterminate,
             'is--disabled': isDisabled
           }],
           attrs: {
@@ -170,13 +172,7 @@ function renderCustoms (h, _vm) {
           }
         }, [
           h('span', {
-            class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
-          }),
-          h('span', {
-            class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
-          }),
-          h('span', {
-            class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
+            class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
           }),
           h('span', {
             class: 'vxe-checkbox--label'
@@ -185,6 +181,8 @@ function renderCustoms (h, _vm) {
       )
     }
   })
+  const isAllChecked = customStore.isAll
+  const isAllIndeterminate = customStore.isIndeterminate
   return h('div', {
     class: ['vxe-custom--wrapper', {
       'is--active': customStore.visible
@@ -209,8 +207,8 @@ function renderCustoms (h, _vm) {
       }, [
         h('li', {
           class: ['vxe-custom--option', {
-            'is--checked': customStore.isAll,
-            'is--indeterminate': customStore.isIndeterminate
+            'is--checked': isAllChecked,
+            'is--indeterminate': isAllIndeterminate
           }],
           attrs: {
             title: GlobalConfig.i18n('vxe.table.allTitle')
@@ -220,13 +218,7 @@ function renderCustoms (h, _vm) {
           }
         }, [
           h('span', {
-            class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
-          }),
-          h('span', {
-            class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
-          }),
-          h('span', {
-            class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
+            class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
           }),
           h('span', {
             class: 'vxe-checkbox--label'
@@ -409,7 +401,7 @@ export default {
         zoom && $xegrid ? h('vxe-button', {
           props: {
             circle: true,
-            icon: $xegrid.isMaximized() ? (zoomOpts.iconOut || GlobalConfig.icon.TOOLBAR_TOOLS_ZOOM_OUT) : (zoomOpts.iconIn || GlobalConfig.icon.TOOLBAR_TOOLS_ZOOM_IN)
+            icon: $xegrid.isMaximized() ? (zoomOpts.iconOut || GlobalConfig.icon.TOOLBAR_TOOLS_MINIMIZE) : (zoomOpts.iconIn || GlobalConfig.icon.TOOLBAR_TOOLS_FULLSCREEN)
           },
           attrs: {
             title: GlobalConfig.i18n(`vxe.toolbar.zoom${$xegrid.isMaximized() ? 'Out' : 'In'}`)

package/packages/v-x-e-table/src/conf.js

@@ -1,4 +1,4 @@
-const iconPrefix = 'vxe-icon--'
+const iconPrefix = 'vxe-icon-'
 
 export default {
   size: null, // 全局尺寸
@@ -6,7 +6,7 @@ export default {
   version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   // resizeInterval: 500,
   emptyCell: '　',
-  loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
+  // loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
   table: {
     fit: true,
     showHeader: true,
@@ -125,73 +125,78 @@ export default {
   },
   icon: {
     // loading
-    // LOADING: iconPrefix + 'refresh roll vxe-loading--default-icon',
+    LOADING: iconPrefix + 'spinner roll vxe-loading--default-icon',
 
     // table
-    TABLE_SORT_ASC: iconPrefix + 'caret-top',
-    TABLE_SORT_DESC: iconPrefix + 'caret-bottom',
+    TABLE_SORT_ASC: iconPrefix + 'caret-up',
+    TABLE_SORT_DESC: iconPrefix + 'caret-down',
     TABLE_FILTER_NONE: iconPrefix + 'funnel',
     TABLE_FILTER_MATCH: iconPrefix + 'funnel',
-    TABLE_EDIT: iconPrefix + 'edit-outline',
-    TABLE_HELP: iconPrefix + 'question',
-    TABLE_TREE_LOADED: iconPrefix + 'refresh roll',
+    TABLE_EDIT: iconPrefix + 'edit',
+    TABLE_HELP: iconPrefix + 'question-circle-fill',
+    TABLE_TREE_LOADED: iconPrefix + 'spinner roll',
     TABLE_TREE_OPEN: iconPrefix + 'caret-right rotate90',
     TABLE_TREE_CLOSE: iconPrefix + 'caret-right',
-    TABLE_EXPAND_LOADED: iconPrefix + 'refresh roll',
+    TABLE_EXPAND_LOADED: iconPrefix + 'spinner roll',
     TABLE_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
     TABLE_EXPAND_CLOSE: iconPrefix + 'arrow-right',
+    TABLE_CHECKBOX_CHECKED: iconPrefix + 'checkbox-checked',
+    TABLE_CHECKBOX_UNCHECKED: iconPrefix + 'checkbox-unchecked',
+    TABLE_CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate',
+    TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked',
+    TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
 
     // button
-    BUTTON_DROPDOWN: iconPrefix + 'arrow-bottom',
-    BUTTON_LOADING: iconPrefix + 'refresh roll',
+    BUTTON_DROPDOWN: iconPrefix + 'arrow-down',
+    BUTTON_LOADING: iconPrefix + 'spinner roll',
 
     // select
-    SELECT_LOADED: iconPrefix + 'refresh roll',
-    SELECT_OPEN: iconPrefix + 'caret-bottom rotate180',
-    SELECT_CLOSE: iconPrefix + 'caret-bottom',
+    SELECT_LOADED: iconPrefix + 'spinner roll',
+    SELECT_OPEN: iconPrefix + 'caret-down rotate180',
+    SELECT_CLOSE: iconPrefix + 'caret-down',
 
     // pager
-    PAGER_JUMP_PREV: iconPrefix + 'd-arrow-left',
-    PAGER_JUMP_NEXT: iconPrefix + 'd-arrow-right',
+    PAGER_JUMP_PREV: iconPrefix + 'arrow-double-left',
+    PAGER_JUMP_NEXT: iconPrefix + 'arrow-double-right',
     PAGER_PREV_PAGE: iconPrefix + 'arrow-left',
     PAGER_NEXT_PAGE: iconPrefix + 'arrow-right',
-    PAGER_JUMP_MORE: iconPrefix + 'more',
+    PAGER_JUMP_MORE: iconPrefix + 'ellipsis-h',
 
     // input
-    INPUT_CLEAR: iconPrefix + 'close',
-    INPUT_PWD: iconPrefix + 'eye-slash',
-    INPUT_SHOW_PWD: iconPrefix + 'eye',
-    INPUT_PREV_NUM: iconPrefix + 'caret-top',
-    INPUT_NEXT_NUM: iconPrefix + 'caret-bottom',
+    INPUT_CLEAR: iconPrefix + 'error-circle-fill',
+    INPUT_PWD: iconPrefix + 'eye-fill',
+    INPUT_SHOW_PWD: iconPrefix + 'eye-fill-close',
+    INPUT_PREV_NUM: iconPrefix + 'caret-up',
+    INPUT_NEXT_NUM: iconPrefix + 'caret-down',
     INPUT_DATE: iconPrefix + 'calendar',
     INPUT_SEARCH: iconPrefix + 'search',
 
     // modal
     MODAL_ZOOM_IN: iconPrefix + 'square',
-    MODAL_ZOOM_OUT: iconPrefix + 'zoomout',
+    MODAL_ZOOM_OUT: iconPrefix + 'maximize',
     MODAL_CLOSE: iconPrefix + 'close',
-    MODAL_INFO: iconPrefix + 'info',
-    MODAL_SUCCESS: iconPrefix + 'success',
-    MODAL_WARNING: iconPrefix + 'warning',
-    MODAL_ERROR: iconPrefix + 'error',
-    MODAL_QUESTION: iconPrefix + 'question',
-    MODAL_LOADING: iconPrefix + 'refresh roll',
+    MODAL_INFO: iconPrefix + 'info-circle-fill',
+    MODAL_SUCCESS: iconPrefix + 'success-circle-fill',
+    MODAL_WARNING: iconPrefix + 'warnion-circle-fill',
+    MODAL_ERROR: iconPrefix + 'error-circle-fill',
+    MODAL_QUESTION: iconPrefix + 'question-circle-fill',
+    MODAL_LOADING: iconPrefix + 'spinner roll',
 
     // toolbar
-    TOOLBAR_TOOLS_REFRESH: iconPrefix + 'refresh',
-    TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'refresh roll',
+    TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
+    TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
     TOOLBAR_TOOLS_IMPORT: iconPrefix + 'upload',
     TOOLBAR_TOOLS_EXPORT: iconPrefix + 'download',
     TOOLBAR_TOOLS_PRINT: iconPrefix + 'print',
-    TOOLBAR_TOOLS_ZOOM_IN: iconPrefix + 'zoomin',
-    TOOLBAR_TOOLS_ZOOM_OUT: iconPrefix + 'zoomout',
-    TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'menu',
+    TOOLBAR_TOOLS_FULLSCREEN: iconPrefix + 'fullscreen',
+    TOOLBAR_TOOLS_MINIMIZE: iconPrefix + 'minimize',
+    TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'custom-column',
 
     // form
-    FORM_PREFIX: iconPrefix + 'question',
-    FORM_SUFFIX: iconPrefix + 'question',
-    FORM_FOLDING: iconPrefix + 'arrow-top rotate180',
-    FORM_UNFOLDING: iconPrefix + 'arrow-top'
+    FORM_PREFIX: iconPrefix + 'question-circle-fill',
+    FORM_SUFFIX: iconPrefix + 'question-circle-fill',
+    FORM_FOLDING: iconPrefix + 'arrow-up rotate180',
+    FORM_UNFOLDING: iconPrefix + 'arrow-up'
   },
   grid: {
     // size: null,

package/styles/base/checked.scss

@@ -1,179 +1,75 @@
-// 单选框和复选框
-%RadioAndCheckboxSpan {
-  position: relative;
-  user-select: none;
-  cursor: pointer;
-}
-%RadioAndCheckboxIcon {
-  display: none;
-  position: absolute;
-  height: 1em;
-  width: 1em;
-}
-
-%XERadio {
-  @extend %RadioAndCheckboxSpan;
-  .vxe-radio--icon {
-    @extend %RadioAndCheckboxIcon;
-    font-size: $vxe-radio-font-size-default;
-    &:before {
-      content: "";
-      position: absolute;
-      height: 1em;
-      width: 1em;
-      top: 0;
-      left: 0;
-      border: $vxe-radio-border-width solid $vxe-input-border-color;
-      background-color: $vxe-radio-icon-background-color;
-      border-radius: 50%;
-    }
-  }
-  .vxe-radio--unchecked-icon {
-    display: inline-block;
+%XECheckboxIcon {
+  .vxe-checkbox--icon {
+    font-size: 1.34em;
   }
-  .vxe-radio--checked-icon {
-    &:after {
-      content: "";
-      position: absolute;
-      height: 0.25em;
-      width: 0.25em;
-      top: 0.4em;
-      left: 0.4em;
-      border-radius: 50%;
-      background-color: $vxe-radio-checked-icon-background-color;
-    }
+  .vxe-checkbox--icon {
+    color: $vxe-input-border-color;
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
   }
-  &.is--checked {
+  &.is--checked,
+  &.is--indeterminate {
     color: $vxe-primary-color;
-    .vxe-radio--unchecked-icon {
-      display: none;
-    }
-    .vxe-radio--checked-icon {
-      display: inline-block;
-      &:before {
-        border-color: $vxe-primary-color;
-        background-color: $vxe-primary-color;
-      }
+    .vxe-checkbox--icon {
+      color: $vxe-primary-color;
     }
   }
   &:not(.is--disabled) {
+    cursor: pointer;
     &:hover {
-      .vxe-radio--icon {
-        &:before {
-          border-color: $vxe-primary-color;
-        }
+      .vxe-checkbox--icon {
+        color: $vxe-primary-color;
       }
     }
   }
   &.is--disabled {
-    cursor: not-allowed;
     color: $vxe-disabled-color;
-    .vxe-radio--icon {
-      &:before {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-      }
-      &:after {
-        background-color: $vxe-primary-disabled-color;
-      }
+    cursor: not-allowed;
+    .vxe-checkbox--icon {
+      color: $vxe-input-disabled-color;
     }
   }
+  .vxe-checkbox--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
 }
 
-%XECheckbox {
-  @extend %RadioAndCheckboxSpan;
-  .vxe-checkbox--icon {
-    @extend %RadioAndCheckboxIcon;
-    font-size: $vxe-checkbox-font-size-default;
-    &:before {
-      content: "";
-      position: absolute;
-      height: 1em;
-      width: 1em;
-      top: 0;
-      left: 0;
-      background-color: $vxe-checkbox-icon-background-color;
-      border-radius: $vxe-checkbox-border-radius;
-      border: $vxe-checkbox-border-width solid $vxe-input-border-color;
-    }
-  }
-  .vxe-checkbox--unchecked-icon {
-    display: inline-block;
-  }
-  .vxe-checkbox--checked-icon {
-    &:after {
-      content: "";
-      position: absolute;
-      height: $vxe-checkbox-checked-height;
-      width: $vxe-checkbox-checked-width;
-      top: 50%;
-      left: 50%;
-      border: $vxe-checkbox-border-width solid $vxe-checkbox-checked-icon-border-color;
-      border-left: 0;
-      border-top: 0;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
-  .vxe-checkbox--indeterminate-icon {
-    &:after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      height: $vxe-checkbox-indeterminate-height;
-      width: $vxe-checkbox-indeterminate-width;
-      background-color: $vxe-checkbox-indeterminate-icon-background-color;
-      transform: translate(-50%, -50%);
-    }
+%XERadioIcon {
+  cursor: pointer;
+  .vxe-radio--icon {
+    font-size: 1.4em;
   }
-  &.is--checked,
-  &.is--indeterminate {
-    color: $vxe-primary-color;
-    .vxe-checkbox--unchecked-icon {
-      display: none;
-    }
-    .vxe-checkbox--icon {
-      &:before {
-        border-color: $vxe-primary-color;
-        background-color: $vxe-primary-color;
-      }
-    }
+  .vxe-radio--icon {
+    color: $vxe-input-border-color;
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
   }
   &.is--checked {
-    .vxe-checkbox--checked-icon {
-      display: inline-block;
-    }
-  }
-  &.is--indeterminate {
-    .vxe-checkbox--indeterminate-icon {
-      display: inline-block;
+    color: $vxe-primary-color;
+    .vxe-radio--icon {
+      color: $vxe-primary-color;
     }
   }
   &:not(.is--disabled) {
+    cursor: pointer;
     &:hover {
-      .vxe-checkbox--icon {
-        &:before {
-          border-color: $vxe-primary-color;
-        }
+      .vxe-radio--icon {
+        color: $vxe-primary-color;
       }
     }
   }
   &.is--disabled {
-    cursor: not-allowed;
     color: $vxe-disabled-color;
-    .vxe-checkbox--icon {
-      &:before {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-      }
-      &:after {
-        border-color: $vxe-primary-disabled-color;
-      }
-    }
-    .vxe-checkbox--indeterminate-icon {
-      &:after {
-        background-color: $vxe-primary-disabled-color;
-      }
+    cursor: not-allowed;
+    .vxe-radio--icon {
+      color: $vxe-input-disabled-color;
     }
   }
+  .vxe-radio--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
 }

package/styles/button.scss

@@ -58,11 +58,6 @@ $btnThemeList: (
   &:not(.is--disabled) {
     color: $vxe-font-color;
     cursor: pointer;
-    .vxe-button--icon {
-      &.vxe-icon--zoomin {
-        border-color: $vxe-font-color;
-      }
-    }
   }
   &.is--loading {
     cursor: progress;
@@ -80,11 +75,6 @@ $btnThemeList: (
   }
   &.is--disabled {
     color: $vxe-disabled-color;
-    .vxe-button--icon {
-      &.vxe-icon--zoomin {
-        border-color: $vxe-disabled-color;
-      }
-    }
     &:not(.is--loading) {
       cursor: no-drop;
     }
@@ -96,7 +86,7 @@ $btnThemeList: (
     background-color: transparent;
     &:not(.is--disabled) {
       &:focus {
-        box-shadow: 0 0 0.25em 0 $vxe-primary-color;
+        color: darken($vxe-font-color, 20%);
       }
       &:hover {
         color: lighten($vxe-primary-color, 10%);
@@ -108,6 +98,9 @@ $btnThemeList: (
       &.theme--#{map-get($item, name)} {
         color: $textColor;
         &:not(.is--disabled) {
+          &:focus {
+            color: darken($textColor, 10%);
+          }
           &:hover {
             color: lighten($textColor, 10%);
           }
@@ -140,30 +133,14 @@ $btnThemeList: (
     &:not(.is--disabled) {
       &:hover {
         color: lighten($vxe-primary-color, 6%);
-        .vxe-button--icon {
-          &.vxe-icon--zoomin {
-            border-color: lighten($vxe-primary-color, 6%);
-          }
-        }
       }
       &:focus {
         border-color: $vxe-primary-color;
-        box-shadow: 0 0 0.25em 0 $vxe-primary-color;
       }
       &:active {
         color: darken($vxe-primary-color, 3%);
         border-color: darken($vxe-primary-color, 3%);
         background-color: darken($vxe-button-default-background-color, 3%);
-        .vxe-button--icon {
-          &.vxe-icon--zoomin {
-            background-color: darken($vxe-button-default-background-color, 3%);
-          }
-          &.vxe-icon--zoomout {
-            &:after {
-              background-color: darken($vxe-button-default-background-color, 3%);
-            }
-          }
-        }
       }
     }
     @for $index from 0 to length($btnThemeList) {
@@ -172,11 +149,6 @@ $btnThemeList: (
       $btnBackground: map-get($item, btnBackground);
       &.theme--#{map-get($item, name)} {
         color: $btnColor;
-        .vxe-button--icon {
-          &.vxe-icon--zoomin {
-            border-color: $btnColor;
-          }
-        }
         &:not(.is--disabled) {
           border-color: $btnBackground;
           background-color: $btnBackground;
@@ -184,24 +156,11 @@ $btnThemeList: (
             color: $btnColor;
             background-color: lighten($btnBackground, 6%);
             border-color: lighten($btnBackground, 6%);
-            .vxe-button--icon {
-              &.vxe-icon--zoomin {
-                border-color: lighten($btnBackground, 6%);
-              }
-            }
           }
           &:active {
             color: $btnColor;
             background-color: darken($btnBackground, 3%);
             border-color: darken($btnBackground, 3%);
-            &.vxe-icon--zoomin {
-              background-color: darken($btnBackground, 3%);
-            }
-            &.vxe-icon--zoomout {
-              &:after {
-                background-color: darken($btnBackground, 3%);
-              }
-            }
           }
         }
         &.is--disabled {
@@ -333,6 +292,7 @@ $btnThemeList: (
 }
 
 .vxe-button--dropdown-arrow {
+  display: inline-block;
   font-size: 12px;
   margin-left: 4px;
   @include animatTransition(transform, .2s);