vxe-table 3.6.0-beta.1 → 3.6.0-beta.10

package/packages/select/src/select.js

@@ -125,21 +125,35 @@ function getSelectLabel (_vm, value) {
   return XEUtils.toValueString(item ? item[_vm.labelField] : value)
 }
 
+function checkOptionDisabled (_vm, isSelected, option, group) {
+  if (option.disabled) {
+    return true
+  }
+  if (group && group.disabled) {
+    return true
+  }
+  if (_vm.isMaximize && !isSelected) {
+    return true
+  }
+  return false
+}
+
 export function renderOption (h, _vm, list, group) {
   const { isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm
   const { useKey } = optionOpts
   return list.map((option, cIndex) => {
     const { slots } = option
-    const isVisible = !isGroup || isOptionVisible(option)
-    const isDisabled = (group && group.disabled) || option.disabled
     const optionValue = option[valueField]
+    const isSelected = multiple ? (value && value.indexOf(optionValue) > -1) : value === optionValue
+    const isVisible = !isGroup || isOptionVisible(option)
+    const isDisabled = checkOptionDisabled(_vm, isSelected, option, group)
     const optid = getOptid(_vm, option)
     const defaultSlot = slots ? slots.default : null
     return isVisible ? h('div', {
       key: useKey || optionKey ? optid : cIndex,
       class: ['vxe-select-option', option.className, {
         'is--disabled': isDisabled,
-        'is--selected': multiple ? (value && value.indexOf(optionValue) > -1) : value === optionValue,
+        'is--selected': isSelected,
         'is--hover': currentValue === optionValue
       }],
       attrs: {
@@ -240,6 +254,7 @@ export default {
     optionGroupProps: Object,
     optionConfig: Object,
     className: [String, Function],
+    max: [String, Number],
     size: { type: String, default: () => GlobalConfig.select.size || GlobalConfig.size },
     filterable: Boolean,
     filterMethod: Function,
@@ -336,6 +351,13 @@ export default {
         return getRemoteSelectLabel(this, value)
       }
       return getSelectLabel(this, value)
+    },
+    isMaximize () {
+      const { value, multiple, max } = this
+      if (multiple && max) {
+        return (value ? value.length : 0) >= XEUtils.toNumber(max)
+      }
+      return false
     }
   },
   watch: {

package/packages/table/src/body.js

@@ -298,6 +298,7 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
     showOverflow: allColumnOverflow,
     treeConfig,
     treeOpts,
+    expandOpts,
     editOpts,
     treeExpandeds,
     scrollYLoad,
@@ -379,11 +380,13 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
     )
     // 如果行被展开了
     if (isExpandRow) {
-      let cellStyle
+      const { height: expandHeight } = expandOpts
+      const cellStyle = {}
+      if (expandHeight) {
+        cellStyle.height = `${expandHeight}px`
+      }
       if (treeConfig) {
-        cellStyle = {
-          paddingLeft: `${(rowLevel * treeOpts.indent) + 30}px`
-        }
+        cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
       }
       const { showOverflow } = expandColumn
       const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow
@@ -396,16 +399,20 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
           on: trOn
         }, [
           h('td', {
-            class: ['vxe-body--expanded-column', {
+            class: {
+              'vxe-body--expanded-column': 1,
               'fixed--hidden': fixedType && !hasFixedColumn,
               'col--ellipsis': hasEllipsis
-            }],
+            },
             attrs: {
               colspan: tableColumn.length
             }
           }, [
             h('div', {
-              class: 'vxe-body--expanded-cell',
+              class: {
+                'vxe-body--expanded-cell': 1,
+                'is--ellipsis': expandHeight
+              },
               style: cellStyle
             }, [
               expandColumn.renderData(h, expandParams)

package/packages/table/src/cell.js

@@ -321,10 +321,7 @@ export const Cell = {
     if (isVisible) {
       radioVNs.push(
         h('span', {
-          class: 'vxe-radio--icon vxe-radio--checked-icon'
-        }),
-        h('span', {
-          class: 'vxe-radio--icon vxe-radio--unchecked-icon'
+          class: ['vxe-radio--icon', isChecked ? GlobalConfig.icon.TABLE_RADIO_CHECKED : GlobalConfig.icon.TABLE_RADIO_UNCHECKED]
         })
       )
     }
@@ -394,13 +391,7 @@ export const Cell = {
         on
       }, [
         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', isAllCheckboxIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
         })
       ].concat(titleSlot || headerTitle ? [
         h('span', {
@@ -445,13 +436,7 @@ export const Cell = {
     if (isVisible) {
       checkVNs.push(
         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', indeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
         })
       )
     }
@@ -512,13 +497,7 @@ export const Cell = {
     if (isVisible) {
       checkVNs.push(
         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', indeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
         })
       )
     }

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'

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

@@ -140,6 +140,11 @@ export default {
     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-down',

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

@@ -86,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%);
@@ -98,6 +98,9 @@ $btnThemeList: (
       &.theme--#{map-get($item, name)} {
         color: $textColor;
         &:not(.is--disabled) {
+          &:focus {
+            color: darken($textColor, 10%);
+          }
           &:hover {
             color: lighten($textColor, 10%);
           }
@@ -133,7 +136,6 @@ $btnThemeList: (
       }
       &:focus {
         border-color: $vxe-primary-color;
-        box-shadow: 0 0 0.25em 0 $vxe-primary-color;
       }
       &:active {
         color: darken($vxe-primary-color, 3%);

package/styles/checkbox.scss

@@ -1,6 +1,7 @@
 /**Variable**/
 @import './helpers/mixin.scss';
 @import './base/common.scss';
+@import './base/checked.scss';
 
 /*checkbox-group*/
 .vxe-checkbox-group {
@@ -11,13 +12,11 @@
 
 /*checkbox*/
 .vxe-checkbox {
+  @extend %XECheckboxIcon;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
-  user-select: none;
   line-height: 1;
-  cursor: pointer;
-  color: $vxe-font-color;
   &+.vxe-checkbox {
     margin-left: 10px;
   }
@@ -29,53 +28,12 @@
       border: 0;
       appearance: none;
     }
-    &+.vxe-checkbox--icon {
-      position: relative;
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      background-color: $vxe-checkbox-icon-background-color;
-      vertical-align: middle;
-      border-radius: $vxe-checkbox-border-radius;
-      border: $vxe-checkbox-border-width solid $vxe-input-border-color;
-      &:before {
-        content: "";
-        position: absolute;
-      }
-    }
-    &:checked+.vxe-checkbox--icon {
-      background-color: $vxe-primary-color;
-      border-color: $vxe-primary-color;
-      &:before {
-        height: $vxe-checkbox-checked-height;
-        width: $vxe-checkbox-checked-width;
-        left: 50%;
-        top: 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--label {
-        color: $vxe-primary-color;
-      }
-    }
   }
   &.is--indeterminate {
     > input {
       &:not(:checked) {
         &+.vxe-checkbox--icon {
-          background-color: $vxe-primary-color;
-          border-color: $vxe-primary-color;
-          &:before {
-            border: 0;
-            left: 50%;
-            top: 50%;
-            height: $vxe-checkbox-indeterminate-height;
-            width: $vxe-checkbox-indeterminate-width;
-            background-color: $vxe-checkbox-indeterminate-icon-background-color;
-            transform: translate(-50%, -50%);
-          }
+          color: $vxe-primary-color;
         }
       }
     }
@@ -84,7 +42,7 @@
     & > input {
       &:focus {
         &+.vxe-checkbox--icon {
-          border-color: $vxe-primary-color;
+          color: $vxe-primary-color;
           box-shadow: 0 0 0.2em 0 $vxe-primary-color;
         }
       }
@@ -101,18 +59,13 @@
     cursor: not-allowed;
     > input {
       &+.vxe-checkbox--icon {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-        &:before {
-          border-color: $vxe-primary-disabled-color;
-        }
+        color: $vxe-input-disabled-color;
         &+.vxe-checkbox--label {
           color: $vxe-disabled-color;
         }
       }
       &:checked+.vxe-checkbox--icon {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
+        color: $vxe-input-disabled-color;
       }
     }
   }
@@ -127,25 +80,13 @@
 
 .vxe-checkbox {
   font-size: $vxe-font-size;
-  .vxe-checkbox--icon {
-    font-size: $vxe-checkbox-font-size-default;
-  }
   &.size--medium {
     font-size: $vxe-font-size-medium;
-    .vxe-checkbox--icon {
-      font-size: $vxe-checkbox-font-size-medium;
-    }
   }
   &.size--small {
     font-size: $vxe-font-size-small;
-    .vxe-checkbox--icon {
-      font-size: $vxe-checkbox-font-size-small;
-    }
   }
   &.size--mini {
     font-size: $vxe-font-size-mini;
-    .vxe-checkbox--icon {
-      font-size: $vxe-checkbox-font-size-mini;
-    }
   }
 }