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

package/es/table/module/filter/hook.js

@@ -2,7 +2,7 @@ import { nextTick } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util';
-import { getDomNode, triggerEvent } from '../../../ui/src/dom';
+import { toCssUnit, triggerEvent } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer, hooks } = VxeUI;
 const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'resetFilterPanel', 'getCheckedFilters', 'updateFilterOptionStatus'];
@@ -66,11 +66,9 @@ hooks.add('tableFilterModule', {
                     filterStore.visible = false;
                 }
                 else {
-                    const { clientY, pageX } = evnt;
                     const el = refElem.value;
                     const tableRect = el.getBoundingClientRect();
-                    const targetElem = evnt.target;
-                    const { visibleWidth } = getDomNode();
+                    const btnElem = evnt.currentTarget;
                     const { filters, filterMultiple, filterRender } = column;
                     const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
                     const frMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
@@ -104,44 +102,19 @@ hooks.add('tableFilterModule', {
                         if (!filterWrapperElem) {
                             return;
                         }
+                        const btnRect = btnElem.getBoundingClientRect();
                         const filterWidth = filterWrapperElem.offsetWidth;
                         const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
                         const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
                         const centerWidth = filterWidth / 2;
-                        const minMargin = 10;
-                        const maxLeft = el.clientWidth - filterWidth - minMargin;
-                        let left, right;
-                        const thEl = targetElem.offsetParent;
-                        const trEl = thEl.offsetParent;
-                        const style = {
-                            top: `${targetElem.offsetTop + thEl.offsetTop + targetElem.offsetHeight}px`
-                        };
+                        const left = btnRect.left - tableRect.left - centerWidth;
+                        const top = btnRect.top - tableRect.top + btnElem.clientHeight;
                         // 判断面板不能大于表格高度
-                        const maxHeight = Math.max(40, el.clientHeight - (clientY - tableRect.y) - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
-                        if (column.fixed === 'left') {
-                            left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth;
-                        }
-                        else if (column.fixed === 'right') {
-                            right = (thEl.offsetWidth - targetElem.offsetLeft) + (trEl.offsetWidth - trEl.offsetLeft) - column.renderWidth - centerWidth;
-                        }
-                        else {
-                            left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth - headerScrollElem.scrollLeft;
-                        }
-                        if (left) {
-                            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
-                            if (overflowWidth > 0) {
-                                left -= overflowWidth;
-                            }
-                            style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
-                        }
-                        else if (right) {
-                            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
-                            if (overflowWidth > 0) {
-                                right += overflowWidth;
-                            }
-                            style.right = `${Math.max(minMargin, right)}px`;
-                        }
-                        filterStore.style = style;
+                        const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                        filterStore.style = {
+                            top: toCssUnit(top),
+                            left: toCssUnit(left)
+                        };
                         filterStore.maxHeight = maxHeight;
                     });
                 }
@@ -251,7 +224,7 @@ hooks.add('tableFilterModule', {
                     return $xeTable.scrollToColumn(column).then(() => {
                         const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']);
                         if (headerWrapperElem) {
-                            const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-filter--btn`);
+                            const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-cell--filter`);
                             triggerEvent(filterBtnElem, 'click');
                         }
                     });

package/es/table/src/cell.js

@@ -882,16 +882,16 @@ export const Cell = {
                 h('span', {
                     class: ['vxe-cell--filter', {
                             'is--active': filterStore.visible && filterStore.column === column
-                        }]
+                        }],
+                    onClick(evnt) {
+                        if ($table.triggerFilterEvent) {
+                            $table.triggerFilterEvent(evnt, params.column, params);
+                        }
+                    }
                 }, [
                     h('i', {
                         class: ['vxe-filter--btn', hasFilter ? (iconMatch || getIcon().TABLE_FILTER_MATCH) : (iconNone || getIcon().TABLE_FILTER_NONE)],
-                        title: getI18n('vxe.table.filter'),
-                        onClick(evnt) {
-                            if ($table.triggerFilterEvent) {
-                                $table.triggerFilterEvent(evnt, params.column, params);
-                            }
-                        }
+                        title: getI18n('vxe.table.filter')
                     })
                 ])
             ];

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.13.0-beta.2";
+export const version = "4.13.0-beta.3";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"4.13.0-beta.2"}`;
+const version = `table v${"4.13.0-beta.3"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/index.umd.js

@@ -3138,7 +3138,7 @@ function eqEmptyValue(cellValue) {
 ;// ./packages/ui/index.ts
 
 
-const version = "4.13.0-beta.2";
+const version = "4.13.0-beta.3";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -3587,7 +3587,7 @@ var esnext_iterator_some = __webpack_require__(7550);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.13.0-beta.2"}`;
+const log_version = `table v${"4.13.0-beta.3"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// ./packages/table/src/columnInfo.ts
@@ -5806,15 +5806,15 @@ const Cell = {
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
         class: ['vxe-cell--filter', {
           'is--active': filterStore.visible && filterStore.column === column
-        }]
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: ['vxe-filter--btn', hasFilter ? iconMatch || cell_getIcon().TABLE_FILTER_MATCH : iconNone || cell_getIcon().TABLE_FILTER_NONE],
-        title: cell_getI18n('vxe.table.filter'),
+        }],
         onClick(evnt) {
           if ($table.triggerFilterEvent) {
             $table.triggerFilterEvent(evnt, params.column, params);
           }
         }
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: ['vxe-filter--btn', hasFilter ? iconMatch || cell_getIcon().TABLE_FILTER_MATCH : iconNone || cell_getIcon().TABLE_FILTER_NONE],
+        title: cell_getI18n('vxe.table.filter')
       })])];
     }
     return [];
@@ -13664,16 +13664,9 @@ hook_hooks.add('tableFilterModule', {
         if (filterStore.column === column && filterStore.visible) {
           filterStore.visible = false;
         } else {
-          const {
-            clientY,
-            pageX
-          } = evnt;
           const el = refElem.value;
           const tableRect = el.getBoundingClientRect();
-          const targetElem = evnt.target;
-          const {
-            visibleWidth
-          } = getDomNode();
+          const btnElem = evnt.currentTarget;
           const {
             filters,
             filterMultiple,
@@ -13718,41 +13711,19 @@ hook_hooks.add('tableFilterModule', {
             if (!filterWrapperElem) {
               return;
             }
+            const btnRect = btnElem.getBoundingClientRect();
             const filterWidth = filterWrapperElem.offsetWidth;
             const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
             const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
             const centerWidth = filterWidth / 2;
-            const minMargin = 10;
-            const maxLeft = el.clientWidth - filterWidth - minMargin;
-            let left, right;
-            const thEl = targetElem.offsetParent;
-            const trEl = thEl.offsetParent;
-            const style = {
-              top: `${targetElem.offsetTop + thEl.offsetTop + targetElem.offsetHeight}px`
-            };
+            const left = btnRect.left - tableRect.left - centerWidth;
+            const top = btnRect.top - tableRect.top + btnElem.clientHeight;
             // 判断面板不能大于表格高度
-            const maxHeight = Math.max(40, el.clientHeight - (clientY - tableRect.y) - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
-            if (column.fixed === 'left') {
-              left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth;
-            } else if (column.fixed === 'right') {
-              right = thEl.offsetWidth - targetElem.offsetLeft + (trEl.offsetWidth - trEl.offsetLeft) - column.renderWidth - centerWidth;
-            } else {
-              left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth - headerScrollElem.scrollLeft;
-            }
-            if (left) {
-              const overflowWidth = pageX + filterWidth - centerWidth + minMargin - visibleWidth;
-              if (overflowWidth > 0) {
-                left -= overflowWidth;
-              }
-              style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
-            } else if (right) {
-              const overflowWidth = pageX + filterWidth - centerWidth + minMargin - visibleWidth;
-              if (overflowWidth > 0) {
-                right += overflowWidth;
-              }
-              style.right = `${Math.max(minMargin, right)}px`;
-            }
-            filterStore.style = style;
+            const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+            filterStore.style = {
+              top: toCssUnit(top),
+              left: toCssUnit(left)
+            };
             filterStore.maxHeight = maxHeight;
           });
         }
@@ -13904,7 +13875,7 @@ hook_hooks.add('tableFilterModule', {
           return $xeTable.scrollToColumn(column).then(() => {
             const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']);
             if (headerWrapperElem) {
-              const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-filter--btn`);
+              const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-cell--filter`);
               triggerEvent(filterBtnElem, 'click');
             }
           });