vxe-table 3.8.21 → 3.8.23

package/packages/select/src/select.js

@@ -552,19 +552,20 @@ export default {
      */
     refreshOption () {
       const { isGroup, fullOptionList, fullGroupList, filterable, filterMethod, searchValue, labelField, groupLabelField } = this
+      const searchStr = `${searchValue || ''}`.toLowerCase()
       if (isGroup) {
         if (filterable && filterMethod) {
-          this.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && filterMethod({ group, option: null, searchValue }))
+          this.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && filterMethod({ group, option: null, searchValue: searchStr }))
         } else if (filterable) {
-          this.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && (!searchValue || `${group[groupLabelField]}`.indexOf(searchValue) > -1))
+          this.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && (!searchStr || `${group[groupLabelField]}`.toLowerCase().indexOf(searchStr) > -1))
         } else {
           this.visibleGroupList = fullGroupList.filter(isOptionVisible)
         }
       } else {
         if (filterable && filterMethod) {
-          this.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && filterMethod({ group: null, option, searchValue }))
+          this.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && filterMethod({ group: null, option, searchValue: searchStr }))
         } else if (filterable) {
-          this.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && (!searchValue || `${option[labelField]}`.indexOf(searchValue) > -1))
+          this.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && (!searchStr || `${option[labelField]}`.toLowerCase().indexOf(searchStr) > -1))
         } else {
           this.visibleOptionList = fullOptionList.filter(isOptionVisible)
         }

package/packages/table/src/header.js

@@ -117,6 +117,7 @@ export default {
           }, cols.map((column, $columnIndex) => {
             const { type, showHeaderOverflow, headerAlign, align, headerClassName } = column
             // const { enabled } = tooltipOpts
+            const colid = column.id
             const isColGroup = column.children && column.children.length
             const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
             const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
@@ -145,7 +146,7 @@ export default {
               thOns.mousedown = evnt => $xetable.triggerHeaderCellMousedownEvent(evnt, params)
             }
             return h('th', {
-              class: ['vxe-header--column', column.id, {
+              class: ['vxe-header--column', colid, {
                 [`col--${headAlign}`]: headAlign,
                 [`col--${type}`]: type,
                 'col--last': $columnIndex === cols.length - 1,
@@ -159,13 +160,13 @@ export default {
                 'col--current': currentColumn === column
               }, UtilTools.getClass(headerClassName, params), UtilTools.getClass(headerCellClassName, params)],
               attrs: {
-                colid: column.id,
+                colid,
                 colspan: column.colSpan > 1 ? column.colSpan : null,
                 rowspan: column.rowSpan > 1 ? column.rowSpan : null
               },
               style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
               on: thOns,
-              key: columnKey || columnOpts.useKey || isColGroup ? column.id : $columnIndex
+              key: columnKey || columnOpts.useKey || isColGroup ? colid : $columnIndex
             }, [
               h('div', {
                 class: ['vxe-cell', {

package/packages/table/src/methods.js

@@ -1371,7 +1371,7 @@ const Methods = {
             const { filterMethod, filterRender, field } = column
             const compConf = isEnableConf(filterRender) ? VXETable.renderer.get(filterRender.name) : null
             const compFilterMethod = compConf && compConf.renderFilter ? (compConf.tableFilterMethod || compConf.filterMethod) : null
-            const defaultFilterMethod = compConf ? (compConf.defaultTableFilterMethod || compConf.defaultFilterMethod) : null
+            const defaultFilterMethod = compConf ? (compConf.tableFilterDefaultMethod || compConf.defaultTableFilterMethod || compConf.defaultFilterMethod) : null
             const cellValue = UtilTools.getCellValue(row, column)
             if (filterMethod) {
               return itemList.some((item) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }))
@@ -2773,7 +2773,6 @@ const Methods = {
         const isEditStatus = isEnableConf(editConfig) && actived.column && actived.row
         const childrenField = treeOpts.children || treeOpts.childrenField
         const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
-        let params
         if (filterStore.visible) {
           if (isEsc) {
             this.closeFilter()
@@ -2819,7 +2818,7 @@ const Methods = {
           if (hasCtrlKey) {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
-              params = actived.args
+              const params = actived.args
               this.clearEdit(evnt)
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
@@ -2849,7 +2848,7 @@ const Methods = {
               if (childrens && childrens.length) {
                 evnt.preventDefault()
                 const targetRow = childrens[0]
-                params = { $table: this, row: targetRow }
+                const params = { $table: this, row: targetRow }
                 this.setTreeExpand(currentRow, true)
                   .then(() => this.scrollToRow(targetRow))
                   .then(() => this.triggerCurrentRowEvent(evnt, params))
@@ -2877,23 +2876,24 @@ const Methods = {
           // 如果是删除键
           if (!isEditStatus) {
             const { delMethod } = keyboardOpts
-            const delPaqrams = {
+            const params = {
               row: selected.row,
               rowIndex: this.getRowIndex(selected.row),
               column: selected.column,
               columnIndex: this.getColumnIndex(selected.column),
-              $table: this
+              $table: this,
+              $grid: this.$xegrid
             }
             // 是否被禁用
             if (!beforeEditMethod || beforeEditMethod(params)) {
               if (delMethod) {
-                delMethod(delPaqrams)
+                delMethod(params)
               } else {
                 setCellValue(selected.row, selected.column, null)
               }
               // 如果按下 del 键，更新表尾数据
               this.updateFooter()
-              this.emitEvent('cell-delete-value', delPaqrams, evnt)
+              this.emitEvent('cell-delete-value', params, evnt)
             }
           }
         } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selected.column)) {
@@ -2901,28 +2901,23 @@ const Methods = {
             const { backMethod } = keyboardOpts
             // 如果是删除键
             if (keyboardOpts.isDel && isEnableConf(editConfig) && (selected.row || selected.column)) {
-              const delPaqrams = {
+              const params = {
                 row: selected.row,
                 rowIndex: this.getRowIndex(selected.row),
                 column: selected.column,
                 columnIndex: this.getColumnIndex(selected.column),
-                $table: this
+                $table: this,
+                $grid: this.$xegrid
               }
               // 是否被禁用
               if (!beforeEditMethod || beforeEditMethod(params)) {
                 if (backMethod) {
-                  backMethod({
-                    row: selected.row,
-                    rowIndex: this.getRowIndex(selected.row),
-                    column: selected.column,
-                    columnIndex: this.getColumnIndex(selected.column),
-                    $table: this
-                  })
+                  backMethod(params)
                 } else {
                   setCellValue(selected.row, selected.column, null)
                   this.handleActived(selected.args, evnt)
                 }
-                this.emitEvent('cell-backspace-value', delPaqrams, evnt)
+                this.emitEvent('cell-backspace-value', params, evnt)
               }
             }
           }
@@ -2931,11 +2926,12 @@ const Methods = {
           const { parent: parentRow } = XEUtils.findTree(this.afterTreeFullData, item => item === currentRow, { children: childrenField })
           if (parentRow) {
             evnt.preventDefault()
-            params = {
-              $table: this,
+            const params = {
               row: parentRow,
               rowIndex: this.getRowIndex(parentRow),
-              $rowIndex: this.getVMRowIndex(parentRow)
+              $rowIndex: this.getVMRowIndex(parentRow),
+              $table: this,
+              $grid: this.$xegrid
             }
             this.setTreeExpand(parentRow, false)
               .then(() => this.scrollToRow(parentRow))
@@ -2950,16 +2946,17 @@ const Methods = {
           // 如果是按下非功能键之外允许直接编辑
           if (selected.column && selected.row && isEnableConf(selected.column.editRender)) {
             const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
-            if (!beforeEditMethod || beforeEditMethod({ ...selected.args, $table: this, $grid: this.$xegrid })) {
+            const params = {
+              row: selected.row,
+              rowIndex: this.getRowIndex(selected.row),
+              column: selected.column,
+              columnIndex: this.getColumnIndex(selected.column),
+              $table: this,
+              $grid: this.$xegrid
+            }
+            if (!beforeEditMethod || beforeEditMethod(params)) {
               if (editMethod) {
-                editMethod({
-                  row: selected.row,
-                  rowIndex: this.getRowIndex(selected.row),
-                  column: selected.column,
-                  columnIndex: this.getColumnIndex(selected.column),
-                  $table: this,
-                  $grid: this.$xegrid
-                })
+                editMethod(params)
               } else {
                 setCellValue(selected.row, selected.column, null)
                 this.handleActived(selected.args, evnt)
@@ -2967,14 +2964,7 @@ const Methods = {
               const afterEditMethod = editOpts.afterEditMethod
               if (afterEditMethod) {
                 this.$nextTick(() => {
-                  afterEditMethod({
-                    row: selected.row,
-                    rowIndex: this.getRowIndex(selected.row),
-                    column: selected.column,
-                    columnIndex: this.getColumnIndex(selected.column),
-                    $table: this,
-                    $grid: this.$xegrid
-                  })
+                  afterEditMethod(params)
                 })
               }
             }

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

@@ -185,6 +185,7 @@ export default {
     TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
     TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
     TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
+    TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
 
     // button
     BUTTON_DROPDOWN: iconPrefix + 'arrow-down',

package/styles/button.scss

@@ -67,6 +67,15 @@ $btnThemeList: (
   user-select: none;
   appearance: none;
   @include createAnimationTransition(border, .2s);
+  &.align--left {
+    text-align: left;
+  }
+  &.align--center {
+    text-align: center;
+  }
+  &.align--right {
+    text-align: right;
+  }
   &:not(.is--disabled) {
     color: $vxe-font-color;
     cursor: pointer;
@@ -262,6 +271,7 @@ $btnThemeList: (
 }
 .vxe-button--dropdown {
   position: relative;
+  outline: 0;
   &+.vxe-button-wrapper,
   &+.vxe-button.type--button,
   &+.vxe-button--dropdown {

package/styles/custom.scss

@@ -100,6 +100,7 @@
   flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
+  outline: 0;
 }
 
 .vxe-table-custom--header,
@@ -145,21 +146,9 @@
   flex-direction: row;
   flex-shrink: 0;
   border-top: 1px solid $vxe-table-popup-border-color;
-  text-align: right;
   button {
-    background-color: transparent;
-    width: 50%;
+    flex-grow: 1;
     height: 2.8em;
-    border: 0;
-    color: $vxe-font-color;
-    text-align: center;
-    cursor: pointer;
-    &:focus {
-      outline: none;
-    }
-    &:hover {
-      color: $vxe-primary-color;
-    }
   }
 }
 
@@ -181,9 +170,15 @@
 .vxe-table-custom--sort-btn {
   padding-left: 0.2em;
   padding-right: 0.4em;
-  cursor: grabbing;
-  &:hover {
-    color: $vxe-primary-color;
+  &:not(.is--disabled) {
+    cursor: grabbing;
+    &:hover {
+      color: $vxe-primary-color;
+    }
+  }
+  &.is--disabled {
+    color: $vxe-input-disabled-color;
+    cursor: not-allowed;
   }
 }
 .vxe-table-custom--checkbox-label  {
@@ -202,25 +197,10 @@
   user-select: none;
 }
 
-.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: $vxe-primary-color;
-  }
-  &.is--disabled {
-    cursor: no-drop;
-    color: $vxe-input-disabled-color;
-  }
-}
-
 .vxe-table-custom-popup--body {
   overflow: auto;
   height: 100%;
+  outline: 0;
 }
 
 .vxe-table-custom-popup--table-wrapper {
@@ -381,12 +361,18 @@
 .vxe-table-custom-popup--column-sort-btn {
   font-size: 1.2em;
   padding: 0.2em 0.5em;
-  cursor: grab;
-  &:hover {
-    color:  $vxe-primary-color;
+  &:not(.is--disabled) {
+    cursor: grab;
+    &:hover {
+      color:  $vxe-primary-color;
+    }
+    &:active {
+      cursor: grabbing;
+    }
   }
-  &:active {
-    cursor: grabbing;
+  &.is--disabled {
+    color: $vxe-input-disabled-color;
+    cursor: not-allowed;
   }
 }
 

package/styles/grid.scss

@@ -42,6 +42,7 @@
   .vxe-grid--right-wrapper {
     flex-shrink: 0;
     overflow: auto;
+    outline: 0;
   }
   .vxe-grid--table-wrapper {
     flex-grow: 1;

package/styles/input.scss

@@ -86,10 +86,10 @@ $iconWidth: 1.6em;
   top: 1px;
   right: 0.5em;
   height: calc(100% - 2px);
-  color: var($vxe-input-count-color);
-  background-color: var($vxe-input-count-background-color);
+  color: $vxe-input-count-color;
+  background-color: $vxe-input-count-background-color;
   &.is--error {
-    color: var($vxe-input-count-error-color);
+    color: $vxe-input-count-error-color;
   }
 }
 

package/styles/menu.scss

@@ -21,46 +21,28 @@
   font-family: $vxe-font-family;
   background-color: $vxe-table-menu-background-color;
 }
-.vxe-context-menu--link {
-  display: block;
-  padding: 0 2.5em;
-  width: $vxe-table-menu-item-width;
-  line-height: 26px;
-  color: $vxe-font-color;
-  cursor: pointer;
-  .vxe-context-menu--link-prefix,
-  .vxe-context-menu--link-suffix {
-    position: absolute;
-    top: 5px;
-    margin-right: 5px;
-    font-size: 16px;
-  }
-  .vxe-context-menu--link-prefix {
-    left: 5px;
-  }
-  .vxe-context-menu--link-suffix {
-    right: 5px;
-    &.suffix--haschild {
-      top: 8px;
-      &:before {
-        position: absolute;
-        content: "";
-        border: 4px solid transparent;
-        border-left-color: #727272;
-      }
-    }
-  }
-  .vxe-context-menu--link-content {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-.vxe-table--context-menu-clild-wrapper {
   .vxe-context-menu--link {
-    padding: 0 2em 0 2.5em;
-  }
+    display: flex;
+    flex-direction: row;
+    width: $vxe-table-menu-item-width;
+    line-height: 26px;
+    padding: 0 0.8em;
+    color: $vxe-font-color;
+    cursor: pointer;
+    .vxe-context-menu--link-prefix,
+    .vxe-context-menu--link-suffix {
+      min-width: 2em;
+      flex-shrink: 0;
+      text-align: center;
+      padding: 0 0.2em;
+    }
+    .vxe-context-menu--link-content {
+      flex-grow: 1;
+      padding: 0 0.2em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 }
 .vxe-context-menu--option-wrapper,
 .vxe-table--context-menu-clild-wrapper {

package/styles/modal.scss

@@ -12,6 +12,7 @@
   color: $vxe-font-color;
   font-family: $vxe-font-family;
   transition: top .4s ease-in-out;
+  outline: 0;
   &.is--active {
     display: block;
   }
@@ -166,6 +167,7 @@
     text-align: left;
     pointer-events: auto;
     opacity: 0;
+    outline: 0;
     &.is--drag {
       cursor: move;
      .vxe-modal--body,
@@ -231,6 +233,7 @@
   .vxe-modal--body {
     display: flex;
     flex-grow: 1;
+    outline: 0;
   }
   .vxe-modal--header {
     display: flex;

package/styles/old-icon.scss

@@ -92,7 +92,7 @@
     border-width: 0.1em;
     border-style: solid;
     border-color: inherit;
-    background-color: var(--vxe-ui-layout-background-color);
+    background-color: $vxe-layout-background-color;
   }
 }
 

package/styles/pager.scss

@@ -152,11 +152,6 @@
     line-height: 2em;
     display: inline-block;
   }
-  .vxe-pager--jump .vxe-pager--goto,
-  .vxe-pager--sizes > .vxe-input {
-    height: 2.15em;
-    line-height: 2.15em;
-  }
   .vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
     text-align: center;
   }
@@ -244,18 +239,6 @@
       }
     }
   }
-  .vxe-pager--jump .vxe-pager--goto {
-    border-radius: $vxe-border-radius;
-    border: 1px solid $vxe-input-border-color;
-    color: $vxe-font-color;
-    transition: border .2s ease-in-out;
-    padding: 0 0.4em;
-    background-color: $vxe-input-background-color;
-    &:focus {
-      border: 1px solid $vxe-primary-color;
-      outline: 0;
-    }
-  }
   .vxe-pager--jump {
     .vxe-pager--goto-text {
       margin-right: 0.25em;
@@ -264,8 +247,7 @@
       margin-left: 0.25em;
     }
     .vxe-pager--goto {
-      width: 3.2em;
-      text-align: center;
+      width: 4em;
     }
   }
 }

package/styles/pulldown.scss

@@ -16,6 +16,7 @@
   padding: 4px 0;
   color: $vxe-font-color;
   text-align: left;
+  outline: 0;
   &:not(.is--transfer) {
     min-width: 100%;
   }
@@ -39,7 +40,7 @@
   }
 }
 .vxe-pulldown--panel-wrapper {
-  background-color: var(--vxe-pulldown-panel-background-color);
+  background-color: $vxe-pulldown-panel-background-color;
 }
 
 .vxe-pulldown,

package/styles/select.scss

@@ -110,6 +110,7 @@
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
+  outline: 0;
   padding: 4px 0;
   max-height: 200px;
 }

package/styles/table.scss

@@ -44,6 +44,7 @@
 .vxe-table--fixed-right-body-wrapper {
   overflow-y: auto;
   overflow-x: auto;
+  outline: 0;
 }
 
 /*默认的渲染*/
@@ -51,7 +52,7 @@
 .vxe-table--filter-template {
   .vxe-default-input,
   .vxe-default-textarea {
-    background-color: var(--vxe-ui-layout-background-color);
+    background-color: $vxe-layout-background-color;
   }
   .vxe-default-input,
   .vxe-default-textarea,
@@ -59,21 +60,21 @@
     outline: 0;
     padding: 0 2px;
     width: 100%;
-    color: var(--vxe-ui-font-color);
-    border-radius: var(--vxe-ui-border-radius);
-    border: 1px solid var(--vxe-ui-input-border-color);
+    color: $vxe-font-color;
+    border-radius: $vxe-border-radius;
+    border: 1px solid $vxe-input-border-color;
     &:focus {
-      border: 1px solid var(--vxe-ui-font-primary-color);
+      border: 1px solid $vxe-primary-color;
     }
     &[disabled] {
       cursor: not-allowed;
-      background-color: var(--vxe-ui-input-disabled-background-color);
+      background-color: $vxe-input-disabled-background-color;
     }
   }
   .vxe-default-input,
   .vxe-default-textarea,
   .vxe-default-select {
-    height: var(--vxe-ui-input-height-default);
+    height: $vxe-input-height-default;
   }
   .vxe-default-input {
     &[type="date"]::-webkit-inner-spin-button {
@@ -84,7 +85,7 @@
       height: 24px;
     }
     &::placeholder {
-      color: var(--vxe-ui-input-placeholder-color);
+      color: $vxe-input-placeholder-color;
     }
   }
   .vxe-default-textarea {
@@ -900,6 +901,7 @@
     overflow: hidden;
     background-color: inherit;
     transition: 0.3s box-shadow;
+    outline: 0;
     .vxe-table--body-wrapper {
       overflow-x: hidden;
     }
@@ -940,6 +942,7 @@
     &.fixed-right--wrapper {
       position: absolute;
       top: 0;
+      outline: 0;
     }
     &.fixed-left--wrapper {
       left: 0;
@@ -1099,6 +1102,7 @@
     z-index: 1;
     &.is--ellipsis {
       overflow: auto;
+      outline: 0;
     }
   }
 
@@ -1205,6 +1209,7 @@
     overflow: hidden;
     width: 100%;
     pointer-events: none;
+    outline: 0;
   }
   .vxe-table--empty-block {
     display: none;
@@ -1452,6 +1457,7 @@
   margin-top: -1px;
   &.body--wrapper{
     overflow-x: auto;
+    outline: 0;
   }
 }
 

package/styles/variable.scss

@@ -20,6 +20,9 @@ $vxe-info-color: #909399 !default;
 $vxe-warning-color: #e6a23c !default;
 $vxe-danger-color: #f56c6c !default;
 
+/*layout*/
+$vxe-layout-background-color: #fff !default;
+
 $vxe-font-lighten-color: lighten($vxe-font-color, 10%) !default;
 $vxe-primary-lighten-color: lighten($vxe-primary-color, 10%) !default;
 $vxe-success-lighten-color: lighten($vxe-success-color, 10%) !default;
@@ -102,6 +105,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-area-status-border-width: $vxe-table-cell-area-border-width !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;
@@ -126,7 +130,7 @@ $vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgba(0, 0, 0, 0.
 $vxe-table-filter-panel-background-color: #fff !default;
 
 /*menu*/
-$vxe-table-menu-item-width: 178px !default;
+$vxe-table-menu-item-width: 198px !default;
 $vxe-table-menu-background-color: #fff !default;
 
 /*loading*/