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

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

@@ -1,7 +1,7 @@
 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 } = VxeUI;
 export default {
@@ -18,7 +18,7 @@ export default {
                 return this.scrollToColumn(column).then(() => {
                     const headerWrapperElem = 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');
                     }
                 });
@@ -70,11 +70,9 @@ export default {
                     filterStore.visible = false;
                 }
                 else {
-                    const { clientY, pageX } = evnt;
                     const el = $xeTable.$refs.refElem;
                     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);
@@ -108,44 +106,19 @@ export default {
                         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;
                     });
                 }

package/es/table/src/cell.js

@@ -885,19 +885,19 @@ export const Cell = {
                 h('span', {
                     class: ['vxe-cell--filter', {
                             'is--active': filterStore.visible && filterStore.column === column
-                        }]
+                        }],
+                    on: {
+                        click(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)],
                         attrs: {
                             title: getI18n('vxe.table.filter')
-                        },
-                        on: {
-                            click(evnt) {
-                                if ($table.triggerFilterEvent) {
-                                    $table.triggerFilterEvent(evnt, params.column, params);
-                                }
-                            }
                         }
                     })
                 ])

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.15.0-beta.2";
+export const version = "3.15.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${"3.15.0-beta.2"}`;
+const version = `table v${"3.15.0-beta.3"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.15.0-beta.2";
+const version = "3.15.0-beta.3";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2843,7 +2843,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.15.0-beta.2"}`;
+const log_version = `table v${"3.15.0-beta.3"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -4734,12 +4734,7 @@ const Cell = {
       return [h('span', {
         class: ['vxe-cell--filter', {
           'is--active': filterStore.visible && filterStore.column === column
-        }]
-      }, [h('i', {
-        class: ['vxe-filter--btn', hasFilter ? iconMatch || cell_getIcon().TABLE_FILTER_MATCH : iconNone || cell_getIcon().TABLE_FILTER_NONE],
-        attrs: {
-          title: cell_getI18n('vxe.table.filter')
-        },
+        }],
         on: {
           click(evnt) {
             if ($table.triggerFilterEvent) {
@@ -4747,6 +4742,11 @@ const Cell = {
             }
           }
         }
+      }, [h('i', {
+        class: ['vxe-filter--btn', hasFilter ? iconMatch || cell_getIcon().TABLE_FILTER_MATCH : iconNone || cell_getIcon().TABLE_FILTER_NONE],
+        attrs: {
+          title: cell_getI18n('vxe.table.filter')
+        }
       })])];
     }
     return [];
@@ -20563,7 +20563,7 @@ const {
         return this.scrollToColumn(column).then(() => {
           const headerWrapperElem = 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');
           }
         });
@@ -20622,16 +20622,9 @@ const {
         if (filterStore.column === column && filterStore.visible) {
           filterStore.visible = false;
         } else {
-          const {
-            clientY,
-            pageX
-          } = evnt;
           const el = $xeTable.$refs.refElem;
           const tableRect = el.getBoundingClientRect();
-          const targetElem = evnt.target;
-          const {
-            visibleWidth
-          } = getDomNode();
+          const btnElem = evnt.currentTarget;
           const {
             filters,
             filterMultiple,
@@ -20676,41 +20669,19 @@ const {
             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;
           });
         }