vxe-table 4.7.5 → 4.7.7

package/packages/toolbar/src/toolbar.ts

@@ -2,10 +2,11 @@ import { defineComponent, h, ref, Ref, computed, inject, createCommentVNode, VNo
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
+import { warnLog, errLog } from '../../ui/src/log'
 
 import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeButtonComponent } from '../../../types'
 
-const { getConfig, getIcon, getI18n, renderer, commands, log, createEvent, useFns } = VxeUI
+const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
 
 export default defineComponent({
   name: 'VxeToolbar',
@@ -103,7 +104,7 @@ export default defineComponent({
       if ($xeTable) {
         return true
       }
-      log.err('vxe.error.barUnableLink')
+      errLog('vxe.error.barUnableLink')
     }
 
     const handleClickSettingEvent = ({ $event }: any) => {
@@ -111,7 +112,7 @@ export default defineComponent({
         if ($xeTable.triggerCustomEvent) {
           $xeTable.triggerCustomEvent($event)
         } else {
-          log.err('vxe.error.reqModule', ['VxeTableCustomModule'])
+          errLog('vxe.error.reqModule', ['VxeTableCustomModule'])
         }
       }
     }
@@ -120,7 +121,7 @@ export default defineComponent({
       if ($xeTable) {
         $xeTable.customOpenEvent($event)
       } else {
-        log.err('vxe.error.reqModule', ['VxeTableCustomModule'])
+        errLog('vxe.error.reqModule', ['VxeTableCustomModule'])
       }
     }
 
@@ -176,7 +177,7 @@ export default defineComponent({
               gCommandOpts.commandMethod(params)
             } else {
               if (process.env.VUE_APP_VXE_ENV === 'development') {
-                log.err('vxe.error.notCommands', [code])
+                errLog('vxe.error.notCommands', [code])
               }
             }
           }
@@ -198,7 +199,7 @@ export default defineComponent({
               gCommandOpts.commandMethod(params)
             } else {
               if (process.env.VUE_APP_VXE_ENV === 'development') {
-                log.err('vxe.error.notCommands', [code])
+                errLog('vxe.error.notCommands', [code])
               }
             }
           }
@@ -459,21 +460,21 @@ export default defineComponent({
       const refreshOpts = computeRefreshOpts.value
       const queryMethod = refreshOpts.queryMethod || refreshOpts.query
       if (refresh && !$xeGrid && !queryMethod) {
-        log.warn('vxe.error.notFunc', ['queryMethod'])
+        warnLog('vxe.error.notFunc', ['queryMethod'])
       }
       const customOpts = computeCustomOpts.value
       if (process.env.VUE_APP_VXE_ENV === 'development') {
         if (customOpts.isFooter) {
-          log.warn('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter'])
+          warnLog('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter'])
         }
         if (customOpts.showFooter) {
-          log.warn('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter'])
+          warnLog('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter'])
         }
         if (customOpts.immediate) {
-          log.warn('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate'])
+          warnLog('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate'])
         }
         if (customOpts.trigger) {
-          log.warn('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger'])
+          warnLog('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger'])
         }
       }
     })

package/packages/ui/index.ts

@@ -58,9 +58,12 @@ VxeUI.setConfig({
     //   visibleMethod () {}
     // },
     customConfig: {
+      allowVisible: true,
+      allowResizable: true,
       allowFixed: true,
       allowSort: true,
-      showFooter: true
+      showFooter: true,
+      placement: 'topRight'
       //  storage: false,
       //  checkMethod () {}
     },

package/packages/ui/src/log.ts

@@ -0,0 +1,8 @@
+import { VxeUI } from 'vxe-pc-ui'
+
+const { log } = VxeUI
+
+const version = `table v${process.env.VUE_APP_VXE_VERSION}`
+
+export const warnLog = log.create('warn', version)
+export const errLog = log.create('error', version)

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

@@ -51,32 +51,58 @@
 
 .vxe-table-custom-wrapper {
   display: none;
+  flex-direction: column;
   position: absolute;
-  top: -4px;
-  right: 2px;
   text-align: left;
   background-color: var(--vxe-ui-layout-background-color);
   z-index: 19;
   border: 1px solid var(--vxe-ui-table-border-color);
   border-radius: var(--vxe-ui-border-radius);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
+  &.placement--topLeft {
+    top: 2px;
+    left: 2px;
+  }
+  &.placement--topRight {
+    top: 2px;
+    right: 2px;
+  }
+  &.placement--bottomLeft {
+    bottom: 2px;
+    left: 2px;
+  }
+  &.placement--bottomRight {
+    bottom: 2px;
+    right: 2px;
+  }
+  &.placement--left {
+    left: 2px;
+  }
+  &.placement--right {
+    right: 2px;
+  }
+  &.placement--left,
+  &.placement--right {
+    top: 2px;
+    height: calc(100% - 4px);
+  }
   &.is--active {
-    display: block;
+    display: flex;
   }
 }
 
 .vxe-table-custom--list-wrapper {
   display: block;
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .vxe-table-custom--header,
 .vxe-table-custom--body {
   list-style-type: none;
-  overflow-x: hidden;
-  overflow-y: auto;
   margin: 0;
   padding: 0;
-  user-select: none;
   & > li {
     max-width: 26em;
     min-width: 17em;
@@ -94,14 +120,15 @@
 }
 
 .vxe-table-custom--header {
+  flex-shrink: 0;
   padding: 0.28em 0;
   font-weight: 700;
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+  user-select: none;
 }
 
 .vxe-table-custom--body {
   padding: 0.2em 0;
-  max-height: 20em;
   .vxe-table-custom--checkbox-option {
     &:hover {
       background-color: var(--vxe-ui-table-row-hover-background-color);
@@ -112,6 +139,7 @@
 .vxe-table-custom--footer {
   display: flex;
   flex-direction: row;
+  flex-shrink: 0;
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);
   text-align: right;
   button {
@@ -138,6 +166,7 @@
 .vxe-table-custom--sort-option {
   padding-right: 0.4em;
   flex-shrink: 0;
+  user-select: none;
 }
 .vxe-table-custom--sort-option {
   display: flex;
@@ -146,8 +175,8 @@
   justify-content: center;
 }
 .vxe-table-custom--sort-btn {
-  padding-left: 0.1em;
-  padding-right: 0.3em;
+  padding-left: 0.2em;
+  padding-right: 0.4em;
   cursor: grabbing;
   &:hover {
     color: var(--vxe-ui-font-primary-color);
@@ -166,6 +195,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  user-select: none;
 }
 
 .vxe-table-custom--fixed-left-option,
@@ -272,9 +302,15 @@
   position: relative;
   &.col--sort,
   &.col--visible,
+  &.col--resizable,
   &.col--fixed {
     text-align: center;
   }
+  &.col--resizable {
+    & > .vxe-input {
+      width: 100%;
+    }
+  }
 }
 
 .vxe-table-custom-popup--row {

package/styles/components/table.scss

@@ -1043,6 +1043,7 @@
   }
   .vxe-body--expanded-column {
     border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
     &.col--ellipsis {
       & > .vxe-body--expanded-cell {
         overflow: hidden;