vxe-table 3.5.9-beta.2 → 3.5.9-beta.5

package/packages/grid/src/grid.js

@@ -226,7 +226,7 @@ export default {
         }
       }
       if (editConfig) {
-        tableProps.editConfig = Object.assign({}, editConfig, { activeMethod: this.handleActiveMethod })
+        tableProps.editConfig = Object.assign({}, editConfig, { beforeEditMethod: this.handleBeforeEditMethod })
       }
       return tableProps
     }
@@ -400,10 +400,13 @@ export default {
       clss.push(rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : '')
       return clss
     },
-    handleActiveMethod (params) {
+    handleBeforeEditMethod (params) {
       const { editConfig } = this
-      const activeMethod = editConfig ? editConfig.activeMethod : null
-      return this.pendingRecords.indexOf(params.row) === -1 && (!activeMethod || activeMethod({ ...params, $grid: this }))
+      const beforeEditMethod = editConfig ? (editConfig.beforeEditMethod || editConfig.activeMethod) : null
+      if (this.pendingRecords.indexOf(params.row) === -1) {
+        return !beforeEditMethod || beforeEditMethod({ ...params, $grid: this })
+      }
+      return false
     },
     initToolbar () {
       this.$nextTick(() => {

package/packages/list/src/list.js

@@ -4,6 +4,7 @@ import vSize from '../../mixins/size'
 import { createResizeEvent } from '../../tools/resize'
 import { GlobalEvent } from '../../tools/event'
 import { browse } from '../../tools/dom'
+import VxeLoading from '../../loading/index'
 
 export default {
   name: 'VxeList',
@@ -113,15 +114,15 @@ export default {
           }
         }, $scopedSlots.default ? $scopedSlots.default.call(this, { items, $list: this }, h) : [])
       ]),
-      h('div', {
-        class: ['vxe-list--loading vxe-loading', {
-          'is--visible': loading
-        }]
-      }, [
-        h('div', {
-          class: 'vxe-loading--spinner'
-        })
-      ])
+      /**
+       * 加载中
+       */
+      h(VxeLoading, {
+        class: 'vxe-list--loading',
+        props: {
+          loading
+        }
+      })
     ])
   },
   methods: {

package/packages/loading/index.js

@@ -0,0 +1,9 @@
+import VxeLoading from './src/loading'
+
+export const Loading = Object.assign(VxeLoading, {
+  install (Vue) {
+    Vue.component(VxeLoading.name, VxeLoading)
+  }
+})
+
+export default VxeLoading

package/packages/loading/src/loading.js

@@ -0,0 +1,31 @@
+import GlobalConfig from '../../v-x-e-table/src/conf'
+
+export default {
+  name: 'VxeLoading',
+  props: {
+    loading: Boolean
+  },
+  render (h) {
+    const icon = GlobalConfig.icon.LOADING
+    const loadingText = GlobalConfig.loadingText
+    const text = loadingText === null ? loadingText : GlobalConfig.i18n('vxe.loading.text')
+    return h('div', {
+      class: ['vxe-loading', {
+        'is--visible': this.loading
+      }]
+    }, [
+      h('div', {
+        class: 'vxe-loading--chunk'
+      }, [
+        icon ? h('i', {
+          class: icon
+        }) : h('div', {
+          class: 'vxe-loading--spinner'
+        }),
+        text ? h('div', {
+          class: 'vxe-loading--text'
+        }, `${text}`) : null
+      ])
+    ])
+  }
+}

package/packages/locale/lang/en-US.js

@@ -1,5 +1,8 @@
 export default {
   vxe: {
+    loading: {
+      text: 'Loading'
+    },
     error: {
       groupFixed: 'If you use group headers, the fixed columns must be set by group.',
       groupMouseRange: 'Grouping headers and "{0}" cannot be used at the same time, which may cause errors.',

package/packages/locale/lang/ja-JP.js

@@ -1,5 +1,8 @@
 export default {
   vxe: {
+    loading: {
+      text: 'Loading'
+    },
     error: {
       groupFixed: 'グループのヘッダを使用すると、固定列はグループで設定しなければなりません',
       groupMouseRange: 'グループ化ヘッダーと「{0}」は同時に使用できません。これによりエラーが発生する可能性があります',

package/packages/locale/lang/zh-CN.js

@@ -1,5 +1,8 @@
 export default {
   vxe: {
+    loading: {
+      text: '加载中'
+    },
     error: {
       groupFixed: '如果使用分组表头，固定列必须按组设置',
       groupMouseRange: '分组表头与 "{0}" 不能同时使用，这可能会出现错误',

package/packages/locale/lang/zh-TC.js

@@ -1,5 +1,8 @@
 export default {
   vxe: {
+    loading: {
+      text: '加載中'
+    },
     error: {
       groupFixed: '如果使用分組表頭，固定列必須按組設定',
       groupMouseRange: '分组表頭與 "{0}" 不能同時使用，這可能會出現錯誤',

package/packages/modal/src/modal.js

@@ -5,6 +5,7 @@ import UtilTools, { getFuncText } from '../../tools/utils'
 import DomTools from '../../tools/dom'
 import { GlobalEvent } from '../../tools/event'
 import { errLog } from '../../tools/log'
+import VxeLoading from '../../loading/index'
 
 export const allActivedModals = []
 export const msgQueue = []
@@ -203,15 +204,15 @@ export default {
           h('div', {
             class: 'vxe-modal--content'
           }, defaultSlot ? (!inited || (destroyOnClose && !visible) ? [] : defaultSlot.call(this, { $modal: this }, h)) : getFuncText(content)),
-          !isMsg ? h('div', {
-            class: ['vxe-loading', {
-              'is--visible': loading
-            }]
-          }, [
-            h('div', {
-              class: 'vxe-loading--spinner'
-            })
-          ]) : null
+          /**
+           * 加载中
+           */
+          !isMsg ? h(VxeLoading, {
+            class: 'vxe-modal--loading',
+            props: {
+              loading
+            }
+          }) : null
         ]),
         showFooter ? h('div', {
           class: 'vxe-modal--footer'

package/packages/table/src/methods.js

@@ -1312,8 +1312,9 @@ const Methods = {
    * 根据行的唯一主键获取行
    * @param {String/Number} rowid 行主键
    */
-  getRowById (rowid) {
+  getRowById (cellValue) {
     const fullDataRowIdData = this.fullDataRowIdData
+    const rowid = XEUtils.eqNull(cellValue) ? '' : encodeURIComponent(cellValue)
     return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].row : null
   },
   /**
@@ -2472,7 +2473,8 @@ const Methods = {
           // }
           // 如果是按下非功能键之外允许直接编辑
           if (selected.column && selected.row && isEnableConf(selected.column.editRender)) {
-            if (!editOpts.activeMethod || editOpts.activeMethod({ ...selected.args, $table: this })) {
+            const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
+            if (!beforeEditMethod || beforeEditMethod({ ...selected.args, $table: this })) {
               if (editMethod) {
                 editMethod({
                   row: selected.row,

package/packages/table/src/table.js

@@ -9,6 +9,7 @@ import { createResizeEvent } from '../../tools/resize'
 import { GlobalEvent } from '../../tools/event'
 import methods from './methods'
 import { warnLog, errLog } from '../../tools/log'
+import VxeLoading from '../../loading/index'
 
 /**
  * 渲染浮固定列
@@ -829,6 +830,9 @@ export default {
       if (this.emptyRender && !XEUtils.isObject(this.emptyRender)) {
         warnLog('vxe.error.errProp', [`table.empty-render=${this.emptyRender}`, 'table.empty-render={}'])
       }
+      // if (this.editConfig && this.editConfig.activeMethod) {
+      //   warnLog('vxe.error.delProp', ['table.edit-config.activeMethod', 'table.edit-config.beforeEditMethod'])
+      // }
     }
 
     // 检查是否有安装需要的模块
@@ -1083,15 +1087,12 @@ export default {
       /**
        * 加载中
        */
-      h('div', {
-        class: ['vxe-table--loading vxe-loading', {
-          'is--visible': loading
-        }]
-      }, [
-        h('div', {
-          class: 'vxe-loading--spinner'
-        })
-      ]),
+      h(VxeLoading, {
+        class: 'vxe-table--loading',
+        props: {
+          loading
+        }
+      }),
       /**
        * 筛选
        */

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

@@ -6,6 +6,7 @@ export default {
   version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   // resizeInterval: 500,
   emptyCell: '　',
+  loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
   table: {
     fit: true,
     showHeader: true,
@@ -123,6 +124,9 @@ export default {
     types: {}
   },
   icon: {
+    // loading
+    // LOADING: iconPrefix + 'refresh roll vxe-loading--default-icon',
+
     // table
     TABLE_SORT_ASC: iconPrefix + 'caret-top',
     TABLE_SORT_DESC: iconPrefix + 'caret-bottom',

package/styles/{base/loading.scss → loading.scss}

@@ -12,13 +12,26 @@
   &.is--visible {
     display: block;
   }
+  & > .vxe-loading--chunk {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    text-align: center;
+    color: $vxe-primary-color;
+  }
+  .vxe-loading--default-icon {
+    font-size: 1.2em;
+  }
+  .vxe-loading--text {
+    padding: 0.4em 0;
+  }
   .vxe-loading--spinner {
+    display: inline-block;
+    position: relative;
     width: 56px;
     height: 56px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     &:before,
     &:after {
       content: "";

package/styles/modules.scss

@@ -1,4 +1,5 @@
 @import './icon.scss';
+@import './loading.scss';
 @import './table.scss';
 @import './column.scss';
 @import './colgroup.scss';

package/styles/select.scss

@@ -1,6 +1,5 @@
 /**Variable**/
 @import './helpers/mixin.scss';
-@import './base/loading.scss';
 
 .vxe-select {
   position: relative;

package/styles/table.scss

@@ -2,7 +2,6 @@
 @import './helpers/mixin.scss';
 @import './base/checked.scss';
 @import './base/common.scss';
-@import './base/loading.scss';
 
 %DefaultColumnHeight {
   height: $vxe-table-row-height-default;

package/styles/toolbar.scss

@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin: 0.6em 0;
   color: $vxe-font-color;
   font-family: $vxe-font-family;
   background-color: $vxe-toolbar-background-color;
@@ -64,12 +65,19 @@
       justify-content: center;
     }
   }
+  .vxe-buttons--wrapper,
   .vxe-tools--wrapper,
   .vxe-tools--operate {
     display: flex;
-    flex-shrink: 0;
     align-items: center;
   }
+  .vxe-buttons--wrapper,
+  .vxe-tools--wrapper {
+    flex-wrap: wrap;
+  }
+  .vxe-tools--operate {
+    flex-shrink: 0;
+  }
   .vxe-custom--wrapper {
     position: relative;
     margin-left: 0.8em;
@@ -171,7 +179,6 @@
 
 .vxe-toolbar {
   font-size: $vxe-font-size;
-  height: $vxe-toolbar-height-default;
   .vxe-custom--option {
     & > .vxe-checkbox--icon {
       font-size: $vxe-checkbox-font-size-default;
@@ -179,7 +186,6 @@
   }
   &.size--medium {
     font-size: $vxe-font-size-medium;
-    height: $vxe-toolbar-height-medium;
     .vxe-custom--option {
       & > .vxe-checkbox--icon {
         font-size: $vxe-checkbox-font-size-medium;
@@ -188,7 +194,6 @@
   }
   &.size--small {
     font-size: $vxe-font-size-small;
-    height: $vxe-toolbar-height-small;
     .vxe-custom--option {
       & > .vxe-checkbox--icon {
         font-size: $vxe-checkbox-font-size-small;
@@ -197,7 +202,6 @@
   }
   &.size--mini {
     font-size: $vxe-font-size-mini;
-    height: $vxe-toolbar-height-mini;
     .vxe-custom--option {
       & > .vxe-checkbox--icon {
         font-size: $vxe-checkbox-font-size-mini;

package/styles/v-x-e-table.scss

@@ -1 +1,3 @@
 /**Variable**/
+@import './icon.scss';
+@import './loading.scss';

package/styles/variable.scss

@@ -121,10 +121,6 @@ $vxe-grid-maximize-background-color: #fff !default;
 
 /*toolbar*/
 $vxe-toolbar-background-color: #fff !default;
-$vxe-toolbar-height-default: 52px !default;
-$vxe-toolbar-height-medium: 50px !default;
-$vxe-toolbar-height-small: 48px !default;
-$vxe-toolbar-height-mini: 46px !default;
 $vxe-toolbar-custom-active-background-color: #D9DADB !default;
 $vxe-toolbar-panel-background-color: #fff !default;
 

package/types/table.d.ts

@@ -1426,6 +1426,11 @@ export interface TableEditConfig {
   /**
    * 该方法的返回值用来决定该单元格是否允许编辑
    */
+  beforeEditMethod?(params: { row: RowInfo, rowIndex: number, column: ColumnInfo, columnIndex: number }): boolean;
+  /**
+   * 请使用 beforeEditMethod
+   * @deprecated
+   */
   activeMethod?(params: { row: RowInfo, rowIndex: number, column: ColumnInfo, columnIndex: number }): boolean;
 }
 export interface EditConfig extends TableEditConfig {}