vxe-table 4.18.0-beta.1 → 4.18.0-beta.2

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

@@ -6,6 +6,7 @@ import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer, hooks } = VxeUI;
 const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilter', 'saveFilterByEvent', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilter', 'resetFilterByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus'];
+const sourceType = 'table';
 hooks.add('tableFilterModule', {
     setupTable($xeTable) {
         const $xeGrid = $xeTable.xeGrid;
@@ -24,16 +25,7 @@ hooks.add('tableFilterModule', {
                     filterStore.isIndeterminate = !filterStore.isAllSelected && filterOptions.some((item) => item._checked);
                 }
             },
-            /**
-             * 点击筛选事件
-             * 当筛选图标被点击时触发
-             * 更新选项是否全部状态
-             * 打开筛选面板
-             * @param {Event} evnt 事件
-             * @param {ColumnInfo} column 列配置
-             * @param {Object} params 参数
-             */
-            triggerFilterEvent(evnt, column, params) {
+            handleOpenFilterColumn(evnt, btnEl, colEl, column, params) {
                 const { initStore, filterStore } = reactData;
                 const { elemStore } = internalData;
                 if (filterStore.column === column && filterStore.visible) {
@@ -44,8 +36,8 @@ hooks.add('tableFilterModule', {
                     const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
                     const filterOpts = computeFilterOpts.value;
                     const { transfer } = filterOpts;
+                    const currEl = btnEl || colEl;
                     const tableRect = tableEl.getBoundingClientRect();
-                    const btnElem = evnt.currentTarget;
                     const filterRender = column ? column.filterRender : null;
                     const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
                     $xeTable.handleFilterOptions(column);
@@ -63,17 +55,21 @@ hooks.add('tableFilterModule', {
                         if (!filterWrapperElem) {
                             return;
                         }
-                        const btnRect = btnElem.getBoundingClientRect();
+                        const btnRect = currEl.getBoundingClientRect();
                         const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
                         const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
                         const filterWidth = filterWrapperElem.offsetWidth;
-                        const centerWidth = filterWidth / 2;
+                        const centerWidth = btnEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
                         let left = 0;
                         let top = 0;
                         let maxHeight = 0;
+                        /**
+                         * 是否显示筛选按钮图标
+                         * 如果不存在图标，则相对单元格居中显示
+                         */
                         if (transfer) {
                             left = btnRect.left - centerWidth + scrollLeft;
-                            top = btnRect.top + btnElem.clientHeight + scrollTop;
+                            top = btnRect.top + currEl.clientHeight + scrollTop;
                             maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
                             if (left < 16) {
                                 left = 16;
@@ -84,7 +80,7 @@ hooks.add('tableFilterModule', {
                         }
                         else {
                             left = btnRect.left - tableRect.left - centerWidth;
-                            top = btnRect.top - tableRect.top + btnElem.clientHeight;
+                            top = btnRect.top - tableRect.top + currEl.clientHeight;
                             maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
                             if (left < 1) {
                                 left = 1;
@@ -114,6 +110,23 @@ hooks.add('tableFilterModule', {
                 }
                 $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt);
             },
+            /**
+             * 点击筛选事件
+             * 当筛选图标被点击时触发
+             * 更新选项是否全部状态
+             * 打开筛选面板
+             * @param {Event} evnt 事件
+             * @param {ColumnInfo} column 列配置
+             * @param {Object} params 参数
+             */
+            triggerFilterEvent(evnt, column, params) {
+                const { elemStore } = internalData;
+                const { fixed } = column;
+                const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']);
+                const btnElem = evnt.currentTarget;
+                const colEl = headerWrapperElem ? headerWrapperElem.querySelector(`.vxe-header--column.${column.id}`) : null;
+                $xeTable.handleOpenFilterColumn(evnt, btnElem, colEl || btnElem, column, params);
+            },
             handleClearFilter(column) {
                 if (column) {
                     const { filters, filterRender } = column;
@@ -263,12 +276,40 @@ hooks.add('tableFilterModule', {
                 const column = handleFieldOrColumn($xeTable, fieldOrColumn);
                 if (column && column.filters) {
                     const { elemStore } = internalData;
-                    const { fixed } = column;
+                    const { fixed, filters } = column;
                     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-cell--filter`);
-                            triggerEvent(filterBtnElem, 'click');
+                            if (filterBtnElem) {
+                                triggerEvent(filterBtnElem, 'click');
+                            }
+                            else {
+                                const colEl = headerWrapperElem.querySelector(`.vxe-header--column.${column.id}`);
+                                if (colEl) {
+                                    let firstFilterOption = null;
+                                    if (filters) {
+                                        firstFilterOption = filters[0];
+                                    }
+                                    const params = {
+                                        $table: $xeTable,
+                                        $grid: $xeGrid,
+                                        $gantt: $xeGantt,
+                                        $rowIndex: -1,
+                                        column,
+                                        columnIndex: $xeTable.getColumnIndex(column),
+                                        $columnIndex: $xeTable.getVMColumnIndex(column),
+                                        _columnIndex: $xeTable.getVTColumnIndex(column),
+                                        firstFilterOption: firstFilterOption,
+                                        fixed,
+                                        source: sourceType,
+                                        type: 'header'
+                                        // isHidden
+                                        // hasFilter
+                                    };
+                                    $xeTable.handleOpenFilterColumn(new Event('click'), null, colEl, column, params);
+                                }
+                            }
                         }
                     });
                 }

package/es/table/src/footer.js

@@ -111,10 +111,10 @@ export default defineVxeComponent({
                     };
                 }
                 tfOns.onClick = (evnt) => {
-                    $xeTable.dispatchEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+                    $xeTable.triggerFooterCellClickEvent(evnt, cellParams);
                 };
                 tfOns.onDblclick = (evnt) => {
-                    $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+                    $xeTable.triggerFooterCellDblclickEvent(evnt, cellParams);
                 };
                 let isMergeCell = false;
                 // 合并行或列

package/es/table/src/table.js

@@ -9634,6 +9634,10 @@ export default defineVxeComponent({
                 if (sortOpts.trigger === 'cell' && !(triggerResizable || triggerSort || triggerFilter)) {
                     $xeTable.triggerSortEvent(evnt, column, getNextSortOrder(column));
                 }
+                if ($xeGantt) {
+                    const ganttReactData = $xeGantt.reactData;
+                    ganttReactData.activeBarRowid = null;
+                }
                 dispatchEvent('header-cell-click', Object.assign({ triggerResizable, triggerSort, triggerFilter, cell }, params), evnt);
                 if ((columnOpts.isCurrent || props.highlightCurrentColumn) && (!currentColumnOpts.trigger || ['header', 'default'].includes(currentColumnOpts.trigger))) {
                     $xeTable.triggerCurrentColumnEvent(evnt, params);
@@ -9753,6 +9757,10 @@ export default defineVxeComponent({
                         }
                     }
                 }
+                if ($xeGantt) {
+                    const ganttReactData = $xeGantt.reactData;
+                    ganttReactData.activeBarRowid = null;
+                }
                 dispatchEvent('cell-click', params, evnt);
             },
             /**
@@ -9789,6 +9797,20 @@ export default defineVxeComponent({
                 }
                 dispatchEvent('cell-dblclick', params, evnt);
             },
+            triggerFooterCellClickEvent(evnt, params) {
+                const cell = evnt.currentTarget;
+                params = Object.assign({ cell }, params);
+                if ($xeGantt) {
+                    const ganttReactData = $xeGantt.reactData;
+                    ganttReactData.activeBarRowid = null;
+                }
+                $xeTable.dispatchEvent('footer-cell-click', params, evnt);
+            },
+            triggerFooterCellDblclickEvent(evnt, params) {
+                const cell = evnt.currentTarget;
+                params = Object.assign({ cell }, params);
+                $xeTable.dispatchEvent('footer-cell-dblclick', params, evnt);
+            },
             handleToggleCheckRowEvent(evnt, params) {
                 const { selectCheckboxMaps } = internalData;
                 const checkboxOpts = computeCheckboxOpts.value;

package/es/ui/index.js

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