vxe-table 4.23.0-beta.2 → 4.23.0-beta.4

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.23.0-beta.2";
+export const version = "4.23.0-beta.4";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -163,7 +163,7 @@ VxeUI.setConfig({
             destroyOnClose: true,
             multiple: true,
             showIcon: true,
-            maxHeight: 280
+            maxHeight: 320
         },
         floatingFilterConfig: {
         // enabled: false

package/es/ui/src/dom.js

@@ -253,7 +253,8 @@ export function wheelScrollTopTo(diffNum, cb) {
  * 通用定位计算
  */
 export function updatePanelPlacement(targetElem, panelElem, options) {
-    const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+    const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+        appendTo: '',
         teleportTo: false,
         marginSize: 18,
         isMinWidth: true
@@ -267,7 +268,7 @@ export function updatePanelPlacement(targetElem, panelElem, options) {
     const stys = {};
     if (panelElem && targetElem) {
         const bodyEl = document.body;
-        const parentWrapperEl = getPopupWrapperElement(panelElem);
+        const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem);
         if (parentWrapperEl) {
             const targetWidth = targetElem.offsetWidth;
             const targetHeight = targetElem.offsetHeight;
@@ -278,14 +279,16 @@ export function updatePanelPlacement(targetElem, panelElem, options) {
             const targetRect = targetElem.getBoundingClientRect();
             const visibleHeight = bodyEl.clientHeight;
             const visibleWidth = bodyEl.clientWidth;
-            const offsetLeft = parentWrapperRect.left;
-            const offsetTop = parentWrapperRect.top;
+            const parentWrapperScrollLeft = parentWrapperEl.scrollLeft;
+            const parentWrapperScrollTop = parentWrapperEl.scrollTop;
+            const parentWrapperOffsetLeft = parentWrapperRect.left;
+            const parentWrapperOffsetTop = parentWrapperRect.top;
             const targetLeft = targetRect.left;
             const targetTop = targetRect.top;
             minWidth = targetElem.offsetWidth;
             if (teleportTo) {
-                left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2);
-                top = defaultTop || (targetTop + targetHeight);
+                left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft;
+                top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop;
                 if (placement === 'top') {
                     panelPlacement = 'top';
                     top = targetTop - panelHeight;
@@ -329,8 +332,8 @@ export function updatePanelPlacement(targetElem, panelElem, options) {
                     left = marginSize;
                 }
                 // 偏移
-                top -= offsetTop;
-                left -= offsetLeft;
+                top -= parentWrapperOffsetTop;
+                left -= parentWrapperOffsetLeft;
             }
             else {
                 if (placement === 'top') {

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.2"}`;
+const tableVersion = `table v${"4.23.0-beta.4"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';

package/es/vxe-table/style.css

@@ -1606,6 +1606,7 @@
 .vxe-table--filter-wrapper {
   display: none;
   position: absolute;
+  flex-direction: column;
   top: 0;
   min-width: 100px;
   font-size: var(--vxe-ui-font-size-default);
@@ -1615,16 +1616,30 @@
   color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 15;
+  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
 }
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-header,
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-body {
   text-align: center;
 }
 .vxe-table--filter-wrapper.is--active {
-  display: block;
+  display: flex;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li {
+.vxe-table--filter-wrapper .vxe-table--filter-body,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
+  overflow: auto;
+  flex-grow: 1;
+}
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
+  display: flex;
+  flex-direction: column;
+}
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--scrollbar-filter-body-view {
+  flex-grow: 1;
+}
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1632,22 +1647,25 @@
   padding: 0.25em 0.8em;
   cursor: pointer;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li.is--checked,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li.is--checked {
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option.is--checked,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option.is--checked,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option.is--checked {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li:hover,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li:hover {
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option:hover,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option:hover,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option:hover {
   background-color: var(--vxe-ui-table-row-hover-background-color);
 }
 .vxe-table--filter-wrapper .vxe-table--filter-header {
   padding-top: 0.2em;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-body {
-  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
+.vxe-table--filter-wrapper .vxe-table--filter-body,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
   padding-bottom: 0.2em;
 }
-.vxe-table--filter-wrapper > ul {
+.vxe-table--filter-wrapper .vxe-table--filter-header,
+.vxe-table--filter-wrapper .vxe-table--filter-body {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1657,8 +1675,9 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-table--filter-wrapper.is--multiple > ul > li {
-  padding: 0.25em 0.8em 0.25em 1em;
+.vxe-table--filter-wrapper .vxe-table--filter-header,
+.vxe-table--filter-wrapper .vxe-table--filter-footer {
+  flex-shrink: 0;
 }
 .vxe-table--filter-wrapper .vxe-table--filter-footer {
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);