vxe-table 4.2.5 → 4.2.6-beta.2

package/packages/loading/src/loading.ts

@@ -0,0 +1,32 @@
+import { defineComponent, h } from 'vue'
+import GlobalConfig from '../../v-x-e-table/src/conf'
+
+export default defineComponent({
+  name: 'VxeLoading',
+  props: {
+    loading: Boolean
+  },
+  render () {
+    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.ts

@@ -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.ts

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

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

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

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

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

package/packages/modal/src/modal.ts

@@ -7,6 +7,7 @@ import { errLog } from '../../tools/log'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VxeButtonConstructor from '../../button/src/button'
+import VxeLoading from '../../loading/index'
 
 import { VxeModalConstructor, VxeModalPropTypes, ModalReactData, VxeModalEmits, ModalEventTypes, VxeButtonInstance, ModalMethods, ModalPrivateRef, VxeModalMethods } from '../../../types/all'
 
@@ -85,7 +86,7 @@ export default defineComponent({
       modalTop: 0,
       modalZindex: 0,
       zoomLocat: null,
-      firstOpen: false
+      firstOpen: true
     })
 
     const refElem = ref() as Ref<HTMLDivElement>
@@ -361,18 +362,22 @@ export default defineComponent({
           nextTick(() => {
             const { fullscreen } = props
             const { firstOpen } = reactData
-            if (!remember || !firstOpen) {
+            if (!remember || firstOpen) {
               updatePosition().then(() => {
                 setTimeout(() => updatePosition(), 20)
               })
             }
-            if (!firstOpen) {
-              reactData.firstOpen = true
+            if (firstOpen) {
+              reactData.firstOpen = false
               if (hasPosStorage()) {
                 restorePosStorage()
               } else if (fullscreen) {
                 nextTick(() => maximize())
               }
+            } else {
+              if (fullscreen) {
+                nextTick(() => maximize())
+              }
             }
           })
         }
@@ -510,6 +515,7 @@ export default defineComponent({
           }
           boxElem.style.left = `${left}px`
           boxElem.style.top = `${top}px`
+          boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag'
         }
         document.onmouseup = () => {
           document.onmousemove = domMousemove
@@ -519,6 +525,9 @@ export default defineComponent({
               savePosStorage()
             })
           }
+          setTimeout(() => {
+            boxElem.className = boxElem.className.replace(/\s?is--drag/, '')
+          }, 50)
         }
       }
     }
@@ -723,7 +732,7 @@ export default defineComponent({
         headVNs.push(
           h('div', {
             class: ['vxe-modal--header', {
-              'is--drag': draggable,
+              'is--draggable': draggable,
               'is--ellipsis': !isMsg && props.showTitleOverflow
             }],
             ...headerOns
@@ -756,16 +765,14 @@ export default defineComponent({
         }, defaultSlot ? (!reactData.inited || (props.destroyOnClose && !reactData.visible) ? [] : defaultSlot({ $modal: $xemodal })) as VNode[] : getFuncText(content))
       )
       if (!isMsg) {
+        /**
+         * 加载中
+         */
         contVNs.push(
-          h('div', {
-            class: ['vxe-loading', {
-              'is--visible': props.loading
-            }]
-          }, [
-            h('div', {
-              class: 'vxe-loading--spinner'
-            })
-          ])
+          h(VxeLoading, {
+            class: 'vxe-modal--loading',
+            loading: props.loading
+          })
         )
       }
       return [

package/packages/table/src/table.ts

@@ -13,6 +13,7 @@ import TableBodyComponent from './body'
 import TableHeaderComponent from '../../header'
 import tableProps from './props'
 import tableEmits from './emits'
+import VxeLoading from '../../loading/index'
 import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
 
 import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeMenuPanelInstance, VxeTableDefines, VxeTableProps } from '../../../types/all'
@@ -6030,15 +6031,10 @@ export default defineComponent({
         /**
          * 加载中
          */
-        h('div', {
-          class: ['vxe-table--loading vxe-loading', {
-            'is--visible': loading
-          }]
-        }, [
-          h('div', {
-            class: 'vxe-loading--spinner'
-          })
-        ]),
+        h(VxeLoading, {
+          class: 'vxe-table--loading',
+          loading
+        }),
         /**
          * 筛选
          */

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

@@ -8,6 +8,7 @@ const GlobalConfig: VXETableGlobalConfig = {
   version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   // resizeInterval: 500,
   emptyCell: '　',
+  loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
   table: {
     fit: true,
     showHeader: true,
@@ -125,6 +126,9 @@ const GlobalConfig: VXETableGlobalConfig = {
     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/form.scss

@@ -177,6 +177,7 @@
     .vxe-form--item-content {
       position: relative;
       flex-grow: 1;
+      word-break: break-all;
     }
   }
   .vxe-default-input,

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/modal.scss

@@ -246,7 +246,7 @@
     background-color: $vxe-modal-header-background-color;
     border-radius: $vxe-border-radius $vxe-border-radius 0 0;
     user-select: none;
-    &.is--drag {
+    &.is--draggable {
       cursor: move;
     }
     &.is--ellipsis {

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';