vxe-table 4.7.3 → 4.7.5

package/packages/table/module/export/export-panel.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, createCommentVNode, ref, Ref, computed, reactive, inject, nextTick, resolveComponent } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import XEUtils from 'xe-utils'
 import { formatText } from '../../../ui/src/utils'
 

package/packages/table/module/export/hook.ts

@@ -1,6 +1,6 @@
 import { inject, nextTick } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../src/util'
 import { parseFile, formatText } from '../../../ui/src/utils'
 import { createHtmlPage, getExportBlobByContent } from './util'

package/packages/table/module/export/import-panel.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, ref, Ref, computed, inject, reactive, nextTick, resolveComponent } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import XEUtils from 'xe-utils'
 import { parseFile } from '../../../ui/src/utils'
 

package/packages/table/module/filter/hook.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import { toFilters, handleFieldOrColumn } from '../../src/util'
 import { getDomNode, triggerEvent } from '../../../ui/src/dom'
 

package/packages/table/module/filter/panel.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, computed, inject } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import { formatText } from '../../../ui/src/utils'
 import { getPropClass } from '../../../ui/src/dom'
 import { getSlotVNs } from '../../../ui/src/vn'

package/packages/table/module/menu/hook.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import { getDomNode, getAbsolutePos, getEventTargetNode } from '../../../ui/src/dom'
 import { isEnableConf, hasChildrenList } from '../../../ui/src/utils'
 

package/packages/table/module/validator/hook.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../../ui'
 import { getFuncText, eqEmptyValue } from '../../../ui/src/utils'
 import { scrollToView } from '../../../ui/src/dom'
 import { handleFieldOrColumn, getRowid } from '../../src/util'

package/packages/table/render/index.ts

@@ -1,6 +1,6 @@
 import { h, resolveComponent, ComponentOptions } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 import { getCellValue, setCellValue } from '../../table/src/util'
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils'
 import { getOnName } from '../../ui/src/vn'

package/packages/table/src/body.ts

@@ -1,6 +1,6 @@
 import { createCommentVNode, defineComponent, h, ref, Ref, PropType, inject, nextTick, ComputedRef, onBeforeUnmount, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 import { mergeBodyMethod, getRowid, removeScrollListener, restoreScrollListener, XEBodyScrollElement } from './util'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'

package/packages/table/src/cell.ts

@@ -1,6 +1,6 @@
 import { h, VNode } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { updateCellTitle } from '../../ui/src/dom'
 import { createColumn, getRowid } from './util'

package/packages/table/src/columnInfo.ts

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 import { toFilters } from './util'
 import { getFuncText } from '../../ui/src/utils'
 
@@ -102,6 +102,7 @@ export class ColumnInfo {
       halfVisible: false,
       defaultVisible: visible,
       defaultFixed: _vm.fixed,
+
       checked: false,
       halfChecked: false,
       disabled: false,
@@ -120,6 +121,9 @@ export class ColumnInfo {
       sortNumber: 0, // 用于记录自定义列顺序
       renderSortNumber: 0, // 用于记录自定义列顺序
 
+      renderFixed: '',
+      renderVisible: false,
+
       renderWidth: 0,
       renderHeight: 0,
       resizeWidth: 0, // 手动调整

package/packages/table/src/props.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 
 import type { VxeTablePropTypes } from '../../../types'
 

package/packages/table/src/table.ts

@@ -2,7 +2,7 @@ import { defineComponent, h, createCommentVNode, ComponentPublicInstance, resolv
 import XEUtils from 'xe-utils'
 import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 import Cell from './cell'
 import TableBodyComponent from './body'
 import TableHeaderComponent from './header'
@@ -125,7 +125,10 @@ export default defineComponent({
         activeBtn: false,
         activeWrapper: false,
         visible: false,
-        maxHeight: 0
+        maxHeight: 0,
+        oldSortMaps: {},
+        oldFixedMaps: {},
+        oldVisibleMaps: {}
       },
       customColumnList: [],
       // 当前选中的筛选列
@@ -887,13 +890,16 @@ export default defineComponent({
     const restoreCustomStorage = () => {
       const { id, customConfig } = props
       const customOpts = computeCustomOpts.value
-      const { storage } = customOpts
+      const { storage, restoreStore } = customOpts
       const isAllCustom = storage === true
       const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {})
       const isCustomResizable = isAllCustom || storageOpts.resizable
       const isCustomVisible = isAllCustom || storageOpts.visible
       const isCustomFixed = isAllCustom || storageOpts.fixed
       const isCustomSort = isAllCustom || storageOpts.sort
+      if (storage && id && restoreStore) {
+        restoreStore({ id })
+      }
       if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
         const customMap: {
           [key: string]: {

package/packages/toolbar/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../ui'
 import VxeToolbarComponent from './src/toolbar'
 
 export const VxeToolbar = Object.assign({}, VxeToolbarComponent, {

package/packages/toolbar/src/toolbar.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, Ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType, resolveComponent } from 'vue'
 import XEUtils from 'xe-utils'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 
 import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeButtonComponent } from '../../../types'
@@ -129,7 +129,7 @@ export default defineComponent({
       customStore.activeBtn = false
       setTimeout(() => {
         if (!customStore.activeBtn && !customStore.activeWrapper) {
-          $xeTable.customColseEvent($event)
+          $xeTable.customCloseEvent($event)
         }
       }, 350)
     }

package/packages/ui/index.ts

@@ -59,6 +59,7 @@ VxeUI.setConfig({
     // },
     customConfig: {
       allowFixed: true,
+      allowSort: true,
       showFooter: true
       //  storage: false,
       //  checkMethod () {}
@@ -218,6 +219,7 @@ VxeUI.setIcon({
   TABLE_CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate-fill',
   TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
   TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
+  TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

package/styles/components/table-module/custom.scss

@@ -1,8 +1,52 @@
 @import '../../helpers/mixin.scss';
 
 .vxe-table-custom--option {
+  position: relative;
   display: flex;
   flex-direction: row;
+  &.active--drag-target {
+    &[drag-pos="top"] {
+      &::after {
+        display: block;
+        top: -2px;
+      }
+    }
+    &[drag-pos="bottom"] {
+      &::after {
+        display: block;
+        bottom: -2px;
+      }
+    }
+  }
+  &:first-child {
+    &[drag-pos="top"] {
+      &::after {
+        top: 0;
+      }
+    }
+  }
+  &:last-child {
+    &[drag-pos="bottom"] {
+      &::after {
+        bottom: 0;
+      }
+    }
+  }
+  &::after {
+    display: none;
+    content: "";
+    position: absolute;
+    left: -1px;
+    width: calc(100% + 1px);
+    height: 3px;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 12;
+  }
+  &:last-child {
+    &::after {
+      width: 100%;
+    }
+  }
 }
 
 .vxe-table-custom-wrapper {
@@ -21,6 +65,10 @@
   }
 }
 
+.vxe-table-custom--list-wrapper {
+  display: block;
+}
+
 .vxe-table-custom--header,
 .vxe-table-custom--body {
   list-style-type: none;
@@ -30,8 +78,8 @@
   padding: 0;
   user-select: none;
   & > li {
-    max-width: 18em;
-    min-width: 14em;
+    max-width: 26em;
+    min-width: 17em;
     padding: 0.2em 1em 0.2em 1em;
     @for $i from 2 through 8 {
       $interval: $i - 1 + 0.2;
@@ -62,12 +110,14 @@
 }
 
 .vxe-table-custom--footer {
+  display: flex;
+  flex-direction: row;
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);
   text-align: right;
   button {
     background-color: transparent;
     width: 50%;
-    height: 2.5em;
+    height: 2.8em;
     border: 0;
     color: var(--vxe-ui-font-color);
     text-align: center;
@@ -83,10 +133,31 @@
 
 .vxe-table-custom--checkbox-option {
   @include createCheckboxIcon();
+}
+.vxe-table-custom--checkbox-option,
+.vxe-table-custom--sort-option {
+  padding-right: 0.4em;
+  flex-shrink: 0;
+}
+.vxe-table-custom--sort-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.vxe-table-custom--sort-btn {
+  padding-left: 0.1em;
+  padding-right: 0.3em;
+  cursor: grabbing;
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+  }
+}
+.vxe-table-custom--checkbox-label  {
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex-grow: 1;
 }
 
 .vxe-table-custom--fixed-option {
@@ -271,6 +342,9 @@
   font-size: 1.2em;
   padding: 0.2em 0.5em;
   cursor: grab;
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+  }
   &:active {
     cursor: grabbing;
   }