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

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/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'
 
 /**
  * 渲染浮固定列
@@ -1083,15 +1084,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/v-x-e-table.scss

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