vxe-table 4.13.1 → 4.13.2

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

@@ -95,6 +95,16 @@ hooks.add('tableFilterModule', {
           filterStore.visible = false;
         } else {
           const el = refElem.value;
+          const {
+            scrollTop,
+            scrollLeft,
+            visibleHeight,
+            visibleWidth
+          } = (0, _dom.getDomNode)();
+          const filterOpts = computeFilterOpts.value;
+          const {
+            transfer
+          } = filterOpts;
           const tableRect = el.getBoundingClientRect();
           const btnElem = evnt.currentTarget;
           const {
@@ -137,28 +147,42 @@ hooks.add('tableFilterModule', {
               return;
             }
             const tableFilter = refTableFilter.value;
-            const filterWrapperElem = tableFilter ? tableFilter.$el : null;
+            const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value : null;
             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 filterWidth = filterWrapperElem.offsetWidth;
             const centerWidth = filterWidth / 2;
-            let left = btnRect.left - tableRect.left - centerWidth;
-            const top = btnRect.top - tableRect.top + btnElem.clientHeight;
-            // 判断面板不能大于表格高度
-            const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
-            if (left < 1) {
-              left = 1;
-            } else if (left > el.clientWidth - filterWidth - 1) {
-              left = el.clientWidth - filterWidth - 1;
+            let left = 0;
+            let top = 0;
+            let maxHeight = 0;
+            if (transfer) {
+              left = btnRect.left - centerWidth + scrollLeft;
+              top = btnRect.top + btnElem.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;
+              } else if (left > visibleWidth - filterWidth - 16) {
+                left = visibleWidth - filterWidth - 16;
+              }
+            } else {
+              left = btnRect.left - tableRect.left - centerWidth;
+              top = btnRect.top - tableRect.top + btnElem.clientHeight;
+              maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+              if (left < 1) {
+                left = 1;
+              } else if (left > el.clientWidth - filterWidth - 1) {
+                left = el.clientWidth - filterWidth - 1;
+              }
             }
             filterStore.style = {
               top: (0, _dom.toCssUnit)(top),
               left: (0, _dom.toCssUnit)(left)
             };
+            // 判断面板不能大于表格高度
             filterStore.maxHeight = maxHeight;
           });
         }

package/lib/table/module/filter/hook.min.js

@@ -1 +1 @@
-var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_util=require("../../src/util"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,hooks}=_ui.VxeUI,tableFilterMethodKeys=["openFilter","setFilter","clearFilter","saveFilterPanel","resetFilterPanel","getCheckedFilters","updateFilterOptionStatus"];hooks.add("tableFilterModule",{setupTable(f){let{props:d,reactData:p,internalData:v}=f,{refElem:m,refTableFilter:F}=f.getRefMaps(),{computeFilterOpts:h,computeMouseOpts:_}=f.getComputeMaps(),i=e=>{var t=p.filterStore;t.options.forEach(e=>{e.checked=e._checked}),f.confirmFilterEvent(e)},n=(e,t,l)=>{var r=p.filterStore;r.options.forEach(e=>{e._checked=!1}),l._checked=t,f.checkFilterOptions(),i(e)},a=(e,t,l)=>{l._checked=t,f.checkFilterOptions()},e=e=>{var t=p.filterStore;f.handleClearFilter(t.column),f.confirmFilterEvent(e)},o={checkFilterOptions(){var e=p.filterStore;e.isAllSelected=e.options.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&e.options.some(e=>e._checked)},triggerFilterEvent(e,i,t){let{initStore:l,filterStore:c}=p,s=v.elemStore;if(c.column===i&&c.visible)c.visible=!1;else{let a=m.value,o=a.getBoundingClientRect(),u=e.currentTarget;var{filters:n,filterMultiple:d,filterRender:h}=i,h=(0,_utils.isEnableConf)(h)?renderer.get(h.name):null;let r=i.filterRecoverMethod||(h?h.tableFilterRecoverMethod||h.filterRecoverMethod:null);v._currFilterParams=t,Object.assign(c,{multiple:d,options:n,column:i,style:null}),c.options.forEach(e=>{var{_checked:t,checked:l}=e;(e._checked=l)||t===l||r&&r({option:e,column:i,$table:f})}),this.checkFilterOptions(),c.visible=!0,l.filter=!0,(0,_vue.nextTick)(()=>{if((0,_util.getRefElem)(s["main-header-scroll"])){var t=F.value,t=t?t.$el:null;if(t){var l=u.getBoundingClientRect(),r=t.offsetWidth,i=t.querySelector(".vxe-table--filter-header"),t=t.querySelector(".vxe-table--filter-footer"),n=r/2;let e=l.left-o.left-n;n=l.top-o.top+u.clientHeight,l=Math.max(40,a.clientHeight-n-(i?i.clientHeight:0)-(t?t.clientHeight:0)-14);e<1?e=1:e>a.clientWidth-r-1&&(e=a.clientWidth-r-1),c.style={top:(0,_dom.toCssUnit)(n),left:(0,_dom.toCssUnit)(e)},c.maxHeight=l}}})}f.dispatchEvent("filter-visible",{column:i,field:i.field,property:i.field,filterList:f.getCheckedFilters(),visible:c.visible},e)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){r=(0,_utils.isEnableConf)(r)?renderer.get(r.name):null;let t=e.filterResetMethod||(r?r.tableFilterResetMethod||r.filterResetMethod:null);l.forEach(e=>{e._checked=!1,e.checked=!1,t||(e.data=_xeUtils.default.clone(e.resetValue,!0))}),t&&t({options:l,column:e,$table:f})}}},handleColumnConfirmFilter(e,t){var l=d.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=p;var n=h.value,a=_.value,o=e.field;let u=[],c=[];e.filters.forEach(e=>{e.checked&&(u.push(e.value),c.push(e.data))});var s=f.getCheckedFilters(),e={$table:f,$event:t,column:e,field:o,property:o,values:u,datas:c,filters:s,filterList:s};return n.remote||(f.handleTableData(!0),f.checkSelectionStatus()),l&&a.area&&f.handleFilterEvent&&f.handleFilterEvent(t,e),t&&f.dispatchEvent("filter-change",e,t),f.closeFilter(),f.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=p;if(r||e||i||t)return(r||e)&&f.updateScrollXSpace(),(i||t)&&f.updateScrollYSpace(),f.refreshScroll()}).then(()=>(f.updateCellAreas(),f.recalculate(!0))).then(()=>{setTimeout(()=>f.recalculate(),50)})},confirmFilterEvent(e){var t=p.filterStore,t=t.column;f.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption:n,handleFilterChangeMultipleOption:a,handleFilterChangeOption(e,t,l){var r=p.filterStore;r.multiple?a(0,t,l):n(e,t,l)},handleFilterConfirmFilter:i,handleFilterResetFilter:e};return Object.assign(Object.assign({},{openFilter(e){let r=(0,_util.handleFieldOrColumn)(f,e);if(r&&r.filters){let t=v.elemStore,l=r.fixed;return f.scrollToColumn(r).then(()=>{var e=(0,_util.getRefElem)(t[`${l||"main"}-header-wrapper`]||t["main-header-wrapper"]);e&&(e=e.querySelector(`.vxe-header--column.${r.id} .vxe-cell--filter`),(0,_dom.triggerEvent)(e,"click"))})}return(0,_vue.nextTick)()},setFilter(e,t,l){e=(0,_util.handleFieldOrColumn)(f,e);return e&&e.filters&&(e.filters=(0,_util.toFilters)(t||[]),l)?f.handleColumnConfirmFilter(e,new Event("click")):(0,_vue.nextTick)()},clearFilter(e){var t=p.filterStore,l=v.tableFullColumn,r=h.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(f,e))&&o.handleClearFilter(i):l.forEach(o.handleClearFilter),e&&i===t.column||Object.assign(t,{isAllSelected:!1,isIndeterminate:!1,style:null,options:[],column:null,multiple:!1,visible:!1}),r.remote?(0,_vue.nextTick)():f.updateData()},saveFilterPanel(){return i(null),(0,_vue.nextTick)()},resetFilterPanel(){return e(null),(0,_vue.nextTick)()},getCheckedFilters(){var e=v.tableFullColumn;let n=[];return e.forEach(e=>{var{field:t,filters:l}=e;let r=[],i=[];l&&l.length&&(l.forEach(e=>{e.checked&&(r.push(e.value),i.push(e.data))}),r.length)&&n.push({column:e,field:t,property:t,values:r,datas:i})}),n},updateFilterOptionStatus(e,t){return e._checked=t,e.checked=t,(0,_vue.nextTick)()}}),o)},setupGrid(e){return e.extendTableMethods(tableFilterMethodKeys)}});
+var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_util=require("../../src/util"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,hooks}=_ui.VxeUI,tableFilterMethodKeys=["openFilter","setFilter","clearFilter","saveFilterPanel","resetFilterPanel","getCheckedFilters","updateFilterOptionStatus"];hooks.add("tableFilterModule",{setupTable(g){let{props:d,reactData:h,internalData:_}=g,{refElem:k,refTableFilter:C}=g.getRefMaps(),{computeFilterOpts:b,computeMouseOpts:f}=g.getComputeMaps(),i=e=>{var t=h.filterStore;t.options.forEach(e=>{e.checked=e._checked}),g.confirmFilterEvent(e)},a=(e,t,l)=>{var r=h.filterStore;r.options.forEach(e=>{e._checked=!1}),l._checked=t,g.checkFilterOptions(),i(e)},n=(e,t,l)=>{l._checked=t,g.checkFilterOptions()},e=e=>{var t=h.filterStore;g.handleClearFilter(t.column),g.confirmFilterEvent(e)},o={checkFilterOptions(){var e=h.filterStore;e.isAllSelected=e.options.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&e.options.some(e=>e._checked)},triggerFilterEvent(e,i,t){let{initStore:l,filterStore:m}=h,F=_.elemStore;if(m.column===i&&m.visible)m.visible=!1;else{let c=k.value,{scrollTop:u,scrollLeft:s,visibleHeight:d,visibleWidth:h}=(0,_dom.getDomNode)();let f=b.value.transfer,p=c.getBoundingClientRect(),v=e.currentTarget;var{filters:a,filterMultiple:n,filterRender:o}=i,o=(0,_utils.isEnableConf)(o)?renderer.get(o.name):null;let r=i.filterRecoverMethod||(o?o.tableFilterRecoverMethod||o.filterRecoverMethod:null);_._currFilterParams=t,Object.assign(m,{multiple:n,options:a,column:i,style:null}),m.options.forEach(e=>{var{_checked:t,checked:l}=e;(e._checked=l)||t===l||r&&r({option:e,column:i,$table:g})}),this.checkFilterOptions(),m.visible=!0,l.filter=!0,(0,_vue.nextTick)(()=>{if((0,_util.getRefElem)(F["main-header-scroll"])){var r=C.value,r=r?r.getRefMaps().refElem.value:null;if(r){var i=v.getBoundingClientRect(),a=r.querySelector(".vxe-table--filter-header"),n=r.querySelector(".vxe-table--filter-footer"),r=r.offsetWidth,o=r/2;let e=0,t=0,l=0;f?(e=i.left-o+s,t=i.top+v.clientHeight+u,l=Math.min(Math.max(p.height,Math.floor(d/2)),Math.max(80,d-t-(a?a.clientHeight:0)-(n?n.clientHeight:0)-28)),e<16?e=16:e>h-r-16&&(e=h-r-16)):(e=i.left-p.left-o,t=i.top-p.top+v.clientHeight,l=Math.max(40,c.clientHeight-t-(a?a.clientHeight:0)-(n?n.clientHeight:0)-14),e<1?e=1:e>c.clientWidth-r-1&&(e=c.clientWidth-r-1)),m.style={top:(0,_dom.toCssUnit)(t),left:(0,_dom.toCssUnit)(e)},m.maxHeight=l}}})}g.dispatchEvent("filter-visible",{column:i,field:i.field,property:i.field,filterList:g.getCheckedFilters(),visible:m.visible},e)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){r=(0,_utils.isEnableConf)(r)?renderer.get(r.name):null;let t=e.filterResetMethod||(r?r.tableFilterResetMethod||r.filterResetMethod:null);l.forEach(e=>{e._checked=!1,e.checked=!1,t||(e.data=_xeUtils.default.clone(e.resetValue,!0))}),t&&t({options:l,column:e,$table:g})}}},handleColumnConfirmFilter(e,t){var l=d.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=h;var a=b.value,n=f.value,o=e.field;let c=[],u=[];e.filters.forEach(e=>{e.checked&&(c.push(e.value),u.push(e.data))});var s=g.getCheckedFilters(),e={$table:g,$event:t,column:e,field:o,property:o,values:c,datas:u,filters:s,filterList:s};return a.remote||(g.handleTableData(!0),g.checkSelectionStatus()),l&&n.area&&g.handleFilterEvent&&g.handleFilterEvent(t,e),t&&g.dispatchEvent("filter-change",e,t),g.closeFilter(),g.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=h;if(r||e||i||t)return(r||e)&&g.updateScrollXSpace(),(i||t)&&g.updateScrollYSpace(),g.refreshScroll()}).then(()=>(g.updateCellAreas(),g.recalculate(!0))).then(()=>{setTimeout(()=>g.recalculate(),50)})},confirmFilterEvent(e){var t=h.filterStore,t=t.column;g.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption:a,handleFilterChangeMultipleOption:n,handleFilterChangeOption(e,t,l){var r=h.filterStore;r.multiple?n(0,t,l):a(e,t,l)},handleFilterConfirmFilter:i,handleFilterResetFilter:e};return Object.assign(Object.assign({},{openFilter(e){let r=(0,_util.handleFieldOrColumn)(g,e);if(r&&r.filters){let t=_.elemStore,l=r.fixed;return g.scrollToColumn(r).then(()=>{var e=(0,_util.getRefElem)(t[`${l||"main"}-header-wrapper`]||t["main-header-wrapper"]);e&&(e=e.querySelector(`.vxe-header--column.${r.id} .vxe-cell--filter`),(0,_dom.triggerEvent)(e,"click"))})}return(0,_vue.nextTick)()},setFilter(e,t,l){e=(0,_util.handleFieldOrColumn)(g,e);return e&&e.filters&&(e.filters=(0,_util.toFilters)(t||[]),l)?g.handleColumnConfirmFilter(e,new Event("click")):(0,_vue.nextTick)()},clearFilter(e){var t=h.filterStore,l=_.tableFullColumn,r=b.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(g,e))&&o.handleClearFilter(i):l.forEach(o.handleClearFilter),e&&i===t.column||Object.assign(t,{isAllSelected:!1,isIndeterminate:!1,style:null,options:[],column:null,multiple:!1,visible:!1}),r.remote?(0,_vue.nextTick)():g.updateData()},saveFilterPanel(){return i(null),(0,_vue.nextTick)()},resetFilterPanel(){return e(null),(0,_vue.nextTick)()},getCheckedFilters(){var e=_.tableFullColumn;let a=[];return e.forEach(e=>{var{field:t,filters:l}=e;let r=[],i=[];l&&l.length&&(l.forEach(e=>{e.checked&&(r.push(e.value),i.push(e.data))}),r.length)&&a.push({column:e,field:t,property:t,values:r,datas:i})}),a},updateFilterOptionStatus(e,t){return e._checked=t,e.checked=t,(0,_vue.nextTick)()}}),o)},setupGrid(e){return e.extendTableMethods(tableFilterMethodKeys)}});

package/lib/table/module/filter/panel.js

@@ -9,6 +9,8 @@ var _ui = require("../../../ui");
 var _utils = require("../../../ui/src/utils");
 var _dom = require("../../../ui/src/dom");
 var _vn = require("../../../ui/src/vn");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
   getI18n,
   getIcon,
@@ -19,7 +21,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
   props: {
     filterStore: Object
   },
-  setup(props) {
+  setup(props, context) {
+    const xID = _xeUtils.default.uniqueId();
     const $xeTable = (0, _vue.inject)('$xeTable', {});
     const {
       reactData: tableReactData,
@@ -29,6 +32,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const {
       computeFilterOpts
     } = getComputeMaps();
+    const refElem = (0, _vue.ref)();
+    const refMaps = {
+      refElem
+    };
+    const $xeFilterPanel = {
+      xID,
+      props,
+      context,
+      getRefMaps: () => refMaps
+    };
     const computeHasCheckOption = (0, _vue.computed)(() => {
       const {
         filterStore
@@ -87,7 +100,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     /*************************
      * Publish methods
      *************************/
-    const $panel = {
+    const filterPanelMethods = {
       changeRadioOption,
       changeMultipleOption,
       changeAllOption,
@@ -95,6 +108,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       confirmFilter,
       resetFilter
     };
+    Object.assign($xeFilterPanel, filterPanelMethods);
     const renderOptions = (filterRender, compConf) => {
       const {
         filterStore
@@ -107,7 +121,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const slots = column ? column.slots : null;
       const filterSlot = slots ? slots.filter : null;
       const params = Object.assign({}, tableInternalData._currFilterParams, {
-        $panel,
+        $panel: $xeFilterPanel,
         $table: $xeTable
       });
       const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
@@ -209,22 +223,37 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const compConf = (0, _utils.isEnableConf)(filterRender) ? renderer.get(filterRender.name) : null;
       const filterClassName = compConf ? compConf.tableFilterClassName || compConf.filterClassName : '';
       const params = Object.assign({}, tableInternalData._currFilterParams, {
-        $panel,
+        $panel: $xeFilterPanel,
         $table: $xeTable
       });
+      const tableProps = $xeTable.props;
+      const {
+        computeSize
+      } = $xeTable.getComputeMaps();
+      const vSize = computeSize.value;
       const filterOpts = computeFilterOpts.value;
       const {
+        transfer,
         destroyOnClose
       } = filterOpts;
-      return (0, _vue.h)('div', {
+      return (0, _vue.h)(_vue.Teleport, {
+        to: 'body',
+        disabled: !transfer
+      }, [(0, _vue.h)('div', {
+        ref: refElem,
         class: ['vxe-table--filter-wrapper', 'filter--prevent-default', (0, _dom.getPropClass)(filterClassName, params), {
-          'is--animat': $xeTable.props.animat,
+          [`size--${vSize}`]: vSize,
+          'is--animat': tableProps.animat,
           'is--multiple': multiple,
           'is--active': visible
         }],
         style: filterStore.style
-      }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : []);
+      }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])]);
     };
-    return renderVN;
+    $xeFilterPanel.renderVN = renderVN;
+    return $xeFilterPanel;
+  },
+  render() {
+    return this.renderVN();
   }
 });

package/lib/table/module/filter/panel.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../../ui"),_utils=require("../../../ui/src/utils"),_dom=require("../../../ui/src/dom"),_vn=require("../../../ui/src/vn");let{getI18n,getIcon,renderer}=_ui.VxeUI;var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTableFilterPanel",props:{filterStore:Object},setup(u){let v=(0,_vue.inject)("$xeTable",{}),{reactData:d,internalData:p,getComputeMaps:e}=v,_=e().computeFilterOpts,h=(0,_vue.computed)(()=>{var e=u.filterStore;return e&&e.options.some(e=>e.checked)}),i=(e,t)=>{var l=u.filterStore;l.options.forEach(e=>{e._checked=t,e.checked=t}),l.isAllSelected=t,l.isIndeterminate=!1},m=e=>{v.handleFilterConfirmFilter(e)};let b=e=>{v.handleFilterResetFilter(e)};let x=(e,t,l)=>{v.handleFilterChangeOption(e,t,l)},f=(e,t)=>{var l=u.filterStore;l.multiple?i(0,t):b(e)},C={changeRadioOption:(e,t,l)=>{v.handleFilterChangeRadioOption(e,t,l)},changeMultipleOption:(e,t,l)=>{v.handleFilterChangeMultipleOption(e,t,l)},changeAllOption:f,changeOption:x,confirmFilter:m,resetFilter:b};return()=>{var e=u.filterStore,t=d.initStore,{visible:l,multiple:i,column:r}=e,a=r?r.filterRender:null,n=(0,_utils.isEnableConf)(a)?renderer.get(a.name):null,s=n?n.tableFilterClassName||n.filterClassName:"",o=Object.assign({},p._currFilterParams,{$panel:C,$table:v}),c=_.value.destroyOnClose;return(0,_vue.h)("div",{class:["vxe-table--filter-wrapper","filter--prevent-default",(0,_dom.getPropClass)(s,o),{"is--animat":v.props.animat,"is--multiple":i,"is--active":l}],style:e.style},t.filter&&(!c||l)&&r?((e,t)=>{let l=u.filterStore,{column:i,multiple:r,maxHeight:a}=l;var n=i?i.slots:null,n=n?n.filter:null,s=Object.assign({},p._currFilterParams,{$panel:C,$table:v}),t=t?t.renderTableFilter||t.renderFilter:null;return n?[(0,_vue.h)("div",{class:"vxe-table--filter-template",style:a?{maxHeight:a+"px"}:{}},v.callSlot(n,s))]:t?[(0,_vue.h)("div",{class:"vxe-table--filter-template",style:a?{maxHeight:a+"px"}:{}},(0,_vn.getSlotVNs)(t(e,s)))]:(n=r?l.isAllSelected:!l.options.some(e=>e._checked),t=r&&l.isIndeterminate,[(0,_vue.h)("ul",{class:"vxe-table--filter-header"},[(0,_vue.h)("li",{class:["vxe-table--filter-option",{"is--checked":n,"is--indeterminate":t}],title:getI18n(r?"vxe.table.allTitle":"vxe.table.allFilter"),onClick:e=>{f(e,!l.isAllSelected)}},(r?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",t?getIcon().TABLE_CHECKBOX_INDETERMINATE:n?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},getI18n("vxe.table.allFilter"))]))]),(0,_vue.h)("ul",{class:"vxe-table--filter-body",style:a?{maxHeight:a+"px"}:{}},l.options.map(t=>{var e=t._checked;return(0,_vue.h)("li",{class:["vxe-table--filter-option",{"is--checked":t._checked}],title:t.label,onClick:e=>{x(e,!t._checked,t)}},(r?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",e?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},(0,_utils.formatText)(t.label,1))]))}))])})(a,n).concat((()=>{var e=u.filterStore,{column:t,multiple:l}=e,i=_.value,r=h.value,t=t.filterRender,t=(0,_utils.isEnableConf)(t)?renderer.get(t.name):null,r=!r&&!e.isAllSelected&&!e.isIndeterminate;return l&&(!t||!1!==t.showTableFilterFooter&&!1!==t.showFilterFooter&&!1!==t.isFooter)?[(0,_vue.h)("div",{class:"vxe-table--filter-footer"},[(0,_vue.h)("button",{class:{"is--disabled":r},disabled:r,onClick:m},i.confirmButtonText||getI18n("vxe.table.confirmFilter")),(0,_vue.h)("button",{onClick:b},i.resetButtonText||getI18n("vxe.table.resetFilter"))])]:[]})()):[])}}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../../ui"),_utils=require("../../../ui/src/utils"),_dom=require("../../../ui/src/dom"),_vn=require("../../../ui/src/vn"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getI18n,getIcon,renderer}=_ui.VxeUI;var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTableFilterPanel",props:{filterStore:Object},setup(p,e){var t=_xeUtils.default.uniqueId();let _=(0,_vue.inject)("$xeTable",{}),{reactData:h,internalData:f,getComputeMaps:l}=_,m=l().computeFilterOpts,b=(0,_vue.ref)(),r={refElem:b},x={xID:t,props:p,context:e,getRefMaps:()=>r},C=(0,_vue.computed)(()=>{var e=p.filterStore;return e&&e.options.some(e=>e.checked)}),i=(e,t)=>{var l=p.filterStore;l.options.forEach(e=>{e._checked=t,e.checked=t}),l.isAllSelected=t,l.isIndeterminate=!1},g=e=>{_.handleFilterConfirmFilter(e)};let E=e=>{_.handleFilterResetFilter(e)};let F=(e,t,l)=>{_.handleFilterChangeOption(e,t,l)},I=(e,t)=>{var l=p.filterStore;l.multiple?i(0,t):E(e)};t={changeRadioOption:(e,t,l)=>{_.handleFilterChangeRadioOption(e,t,l)},changeMultipleOption:(e,t,l)=>{_.handleFilterChangeMultipleOption(e,t,l)},changeAllOption:I,changeOption:F,confirmFilter:g,resetFilter:E};Object.assign(x,t);return x.renderVN=()=>{var e=p.filterStore,t=h.initStore,{visible:l,multiple:r,column:i}=e,a=i?i.filterRender:null,n=(0,_utils.isEnableConf)(a)?renderer.get(a.name):null,s=n?n.tableFilterClassName||n.filterClassName:"",o=Object.assign({},f._currFilterParams,{$panel:x,$table:_}),u=_.props,c=_.getComputeMaps().computeSize,c=c.value,{transfer:v,destroyOnClose:d}=m.value;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!v},[(0,_vue.h)("div",{ref:b,class:["vxe-table--filter-wrapper","filter--prevent-default",(0,_dom.getPropClass)(s,o),{["size--"+c]:c,"is--animat":u.animat,"is--multiple":r,"is--active":l}],style:e.style},t.filter&&(!d||l)&&i?((e,t)=>{let l=p.filterStore,{column:r,multiple:i,maxHeight:a}=l;var n=r?r.slots:null,n=n?n.filter:null,s=Object.assign({},f._currFilterParams,{$panel:x,$table:_}),t=t?t.renderTableFilter||t.renderFilter:null;return n?[(0,_vue.h)("div",{class:"vxe-table--filter-template",style:a?{maxHeight:a+"px"}:{}},_.callSlot(n,s))]:t?[(0,_vue.h)("div",{class:"vxe-table--filter-template",style:a?{maxHeight:a+"px"}:{}},(0,_vn.getSlotVNs)(t(e,s)))]:(n=i?l.isAllSelected:!l.options.some(e=>e._checked),t=i&&l.isIndeterminate,[(0,_vue.h)("ul",{class:"vxe-table--filter-header"},[(0,_vue.h)("li",{class:["vxe-table--filter-option",{"is--checked":n,"is--indeterminate":t}],title:getI18n(i?"vxe.table.allTitle":"vxe.table.allFilter"),onClick:e=>{I(e,!l.isAllSelected)}},(i?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",t?getIcon().TABLE_CHECKBOX_INDETERMINATE:n?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},getI18n("vxe.table.allFilter"))]))]),(0,_vue.h)("ul",{class:"vxe-table--filter-body",style:a?{maxHeight:a+"px"}:{}},l.options.map(t=>{var e=t._checked;return(0,_vue.h)("li",{class:["vxe-table--filter-option",{"is--checked":t._checked}],title:t.label,onClick:e=>{F(e,!t._checked,t)}},(i?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",e?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},(0,_utils.formatText)(t.label,1))]))}))])})(a,n).concat((()=>{var e=p.filterStore,{column:t,multiple:l}=e,r=m.value,i=C.value,t=t.filterRender,t=(0,_utils.isEnableConf)(t)?renderer.get(t.name):null,i=!i&&!e.isAllSelected&&!e.isIndeterminate;return l&&(!t||!1!==t.showTableFilterFooter&&!1!==t.showFilterFooter&&!1!==t.isFooter)?[(0,_vue.h)("div",{class:"vxe-table--filter-footer"},[(0,_vue.h)("button",{class:{"is--disabled":i},disabled:i,onClick:g},r.confirmButtonText||getI18n("vxe.table.confirmFilter")),(0,_vue.h)("button",{onClick:E},r.resetButtonText||getI18n("vxe.table.resetFilter"))])]:[]})()):[])])},x},render(){return this.renderVN()}});

package/lib/table/module/menu/hook.js

@@ -281,7 +281,7 @@ hooks.add('tableMenuModule', {
             }
           }
         }
-        if (tableFilter && !(0, _dom.getEventTargetNode)(evnt, tableFilter.$el).flag) {
+        if (tableFilter && !(0, _dom.getEventTargetNode)(evnt, tableFilter.getRefMaps().refElem.value).flag) {
           $xeTable.closeFilter();
         }
         menuMethods.closeMenu();

package/lib/table/module/menu/hook.min.js

@@ -1 +1 @@
-var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,hooks,globalEvents,GLOBAL_EVENT_KEYS}=_ui.VxeUI,tableMenuMethodKeys=["closeMenu"];hooks.add("tableMenuModule",{setupTable(b){let{xID:m,props:p,reactData:M,internalData:E}=b,{refElem:x,refTableFilter:_,refTableMenu:C}=b.getRefMaps(),{computeMouseOpts:T,computeIsMenu:t,computeMenuOpts:y}=b.getComputeMaps(),w;var e;let L=(l,n,v)=>{let f=M.ctxMenuStore;var o=t.value,e=y.value,n=e[n];let i=e.visibleMethod;if(n){let{options:t,disabled:e}=n;e?l.preventDefault():o&&t&&t.length&&(v.options=t,b.preventEvent(l,"event.showMenu",v,()=>{if(!i||i(v)){l.preventDefault(),b.updateZindex();let{scrollTop:o,scrollLeft:i,visibleHeight:u,visibleWidth:s}=(0,_dom.getDomNode)(),r=l.clientY+o,a=l.clientX+i,n=()=>{E._currMenuParams=v,Object.assign(f,{visible:!0,list:t,selected:null,selectChild:null,showChild:!1,style:{zIndex:E.tZindex,top:r+"px",left:a+"px"}}),(0,_vue.nextTick)(()=>{var e=C.value.getRefMaps().refElem.value,t=e.clientHeight,l=e.clientWidth,{boundingTop:e,boundingLeft:n}=(0,_dom.getAbsolutePos)(e),e=e+t-u,n=n+l-s;-10<e&&(f.style.top=Math.max(o+2,r-t-2)+"px"),-10<n&&(f.style.left=Math.max(i+2,a-l-2)+"px")})},{keyboard:e,row:d,column:c}=v;e&&d&&c?b.scrollToRow(d,c).then(()=>{var e,t,l=b.getCellElement(d,c);l&&({boundingTop:e,boundingLeft:t}=(0,_dom.getAbsolutePos)(l),r=e+o+Math.floor(l.offsetHeight/2),a=t+i+Math.floor(l.offsetWidth/2)),n()}):n()}else w.closeMenu()}))}b.closeFilter()};return w={closeMenu(){return Object.assign(M.ctxMenuStore,{visible:!1,selected:null,selectChild:null,showChild:!1}),(0,_vue.nextTick)()}},e={moveCtxMenu(e,t,l,n,o,i){let u;var s=_xeUtils.default.findIndexOf(i,e=>t[l]===e);if(n)o&&(0,_utils.hasChildrenList)(t.selected)?t.showChild=!0:(t.showChild=!1,t.selectChild=null);else if(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ARROW_UP)){for(let e=s-1;0<=e;e--)if(!1!==i[e].visible){u=i[e];break}t[l]=u||i[i.length-1]}else if(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ARROW_DOWN)){for(let e=s+1;e<i.length;e++)if(!1!==i[e].visible){u=i[e];break}t[l]=u||i[0]}else t[l]&&(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ENTER)||globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.SPACEBAR))&&b.ctxMenuLinkEvent(e,t[l])},handleOpenMenuEvent:L,handleGlobalContextmenuEvent(t){var{mouseConfig:e,menuConfig:l}=p,{editStore:n,ctxMenuStore:o}=M,i=E.visibleColumn,u=_.value,s=C.value,r=T.value,a=y.value,d=x.value,n=n.selected,c=["header","body","footer"];if((0,_utils.isEnableConf)(l)){if(o.visible&&s&&(0,_dom.getEventTargetNode)(t,s.getRefMaps().refElem.value).flag)return void t.preventDefault();if(E._keyCtx){l="body",o={type:l,$table:b,keyboard:!0,columns:i.slice(0),$event:t};if(e&&r.area){s=b.getActiveCellArea();if(s&&s.row&&s.column)return o.row=s.row,o.column=s.column,void L(t,l,o)}else if(e&&r.selected&&n.row&&n.column)return o.row=n.row,o.column=n.column,void L(t,l,o)}for(let e=0;e<c.length;e++){var v=c[e],f=(0,_dom.getEventTargetNode)(t,d,`vxe-${v}--column`,e=>e.parentNode.parentNode.parentNode.getAttribute("xid")===m),g={type:v,$table:b,columns:i.slice(0),$event:t};if(f.flag){var f=f.targetElem,h=b.getColumnNode(f),h=h?h.item:null;let e=v+"-";h&&Object.assign(g,{column:h,columnIndex:b.getColumnIndex(h),cell:f}),"body"===v&&(f=(h=b.getRowNode(f.parentNode))?h.item:null,e="",f)&&(g.row=f,g.rowIndex=b.getRowIndex(f));h=e+"cell-menu";return L(t,v,g),void b.dispatchEvent(h,g,t)}if((0,_dom.getEventTargetNode)(t,d,`vxe-table--${v}-wrapper`,e=>e.getAttribute("xid")===m).flag)return void("cell"===a.trigger?t.preventDefault():L(t,v,g))}}u&&!(0,_dom.getEventTargetNode)(t,u.$el).flag&&b.closeFilter(),w.closeMenu()},ctxMenuMouseoverEvent(e,t,l){let a=e.currentTarget;var n=M.ctxMenuStore;e.preventDefault(),e.stopPropagation(),n.selected=t,(n.selectChild=l)||(n.showChild=(0,_utils.hasChildrenList)(t),n.showChild&&(0,_vue.nextTick)(()=>{var o=a.nextElementSibling;if(o){var{boundingTop:i,boundingLeft:u,visibleHeight:s,visibleWidth:r}=(0,_dom.getAbsolutePos)(a),i=i+a.offsetHeight;let e="",t="",l=(u+a.offsetWidth+o.offsetWidth>r-10&&(e="auto",t=a.offsetWidth+"px"),""),n="";i+o.offsetHeight>s-10&&(l="auto",n="0"),o.style.left=e,o.style.right=t,o.style.top=l,o.style.bottom=n}}))},ctxMenuMouseoutEvent(e,t){var l=M.ctxMenuStore;t.children||(l.selected=null),l.selectChild=null},ctxMenuLinkEvent(e,t){var l,n=b.xeGrid;t.disabled||!t.code&&t.children&&t.children.length||(l=menus.get(t.code),t=Object.assign({},E._currMenuParams,{menu:t,$table:b,$grid:n,$event:e}),(n=l?l.tableMenuMethod||l.menuMethod:null)&&n(t,e),b.dispatchEvent("menu-click",t,e),w.closeMenu())}},Object.assign(Object.assign({},w),e)},setupGrid(e){return e.extendTableMethods(tableMenuMethodKeys)}});
+var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,hooks,globalEvents,GLOBAL_EVENT_KEYS}=_ui.VxeUI,tableMenuMethodKeys=["closeMenu"];hooks.add("tableMenuModule",{setupTable(b){let{xID:m,props:p,reactData:M,internalData:E}=b,{refElem:x,refTableFilter:_,refTableMenu:C}=b.getRefMaps(),{computeMouseOpts:T,computeIsMenu:t,computeMenuOpts:y}=b.getComputeMaps(),w;var e;let L=(l,n,v)=>{let f=M.ctxMenuStore;var o=t.value,e=y.value,n=e[n];let i=e.visibleMethod;if(n){let{options:t,disabled:e}=n;e?l.preventDefault():o&&t&&t.length&&(v.options=t,b.preventEvent(l,"event.showMenu",v,()=>{if(!i||i(v)){l.preventDefault(),b.updateZindex();let{scrollTop:o,scrollLeft:i,visibleHeight:u,visibleWidth:s}=(0,_dom.getDomNode)(),r=l.clientY+o,a=l.clientX+i,n=()=>{E._currMenuParams=v,Object.assign(f,{visible:!0,list:t,selected:null,selectChild:null,showChild:!1,style:{zIndex:E.tZindex,top:r+"px",left:a+"px"}}),(0,_vue.nextTick)(()=>{var e=C.value.getRefMaps().refElem.value,t=e.clientHeight,l=e.clientWidth,{boundingTop:e,boundingLeft:n}=(0,_dom.getAbsolutePos)(e),e=e+t-u,n=n+l-s;-10<e&&(f.style.top=Math.max(o+2,r-t-2)+"px"),-10<n&&(f.style.left=Math.max(i+2,a-l-2)+"px")})},{keyboard:e,row:d,column:c}=v;e&&d&&c?b.scrollToRow(d,c).then(()=>{var e,t,l=b.getCellElement(d,c);l&&({boundingTop:e,boundingLeft:t}=(0,_dom.getAbsolutePos)(l),r=e+o+Math.floor(l.offsetHeight/2),a=t+i+Math.floor(l.offsetWidth/2)),n()}):n()}else w.closeMenu()}))}b.closeFilter()};return w={closeMenu(){return Object.assign(M.ctxMenuStore,{visible:!1,selected:null,selectChild:null,showChild:!1}),(0,_vue.nextTick)()}},e={moveCtxMenu(e,t,l,n,o,i){let u;var s=_xeUtils.default.findIndexOf(i,e=>t[l]===e);if(n)o&&(0,_utils.hasChildrenList)(t.selected)?t.showChild=!0:(t.showChild=!1,t.selectChild=null);else if(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ARROW_UP)){for(let e=s-1;0<=e;e--)if(!1!==i[e].visible){u=i[e];break}t[l]=u||i[i.length-1]}else if(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ARROW_DOWN)){for(let e=s+1;e<i.length;e++)if(!1!==i[e].visible){u=i[e];break}t[l]=u||i[0]}else t[l]&&(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ENTER)||globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.SPACEBAR))&&b.ctxMenuLinkEvent(e,t[l])},handleOpenMenuEvent:L,handleGlobalContextmenuEvent(t){var{mouseConfig:e,menuConfig:l}=p,{editStore:n,ctxMenuStore:o}=M,i=E.visibleColumn,u=_.value,s=C.value,r=T.value,a=y.value,d=x.value,n=n.selected,c=["header","body","footer"];if((0,_utils.isEnableConf)(l)){if(o.visible&&s&&(0,_dom.getEventTargetNode)(t,s.getRefMaps().refElem.value).flag)return void t.preventDefault();if(E._keyCtx){l="body",o={type:l,$table:b,keyboard:!0,columns:i.slice(0),$event:t};if(e&&r.area){s=b.getActiveCellArea();if(s&&s.row&&s.column)return o.row=s.row,o.column=s.column,void L(t,l,o)}else if(e&&r.selected&&n.row&&n.column)return o.row=n.row,o.column=n.column,void L(t,l,o)}for(let e=0;e<c.length;e++){var v=c[e],f=(0,_dom.getEventTargetNode)(t,d,`vxe-${v}--column`,e=>e.parentNode.parentNode.parentNode.getAttribute("xid")===m),g={type:v,$table:b,columns:i.slice(0),$event:t};if(f.flag){var f=f.targetElem,h=b.getColumnNode(f),h=h?h.item:null;let e=v+"-";h&&Object.assign(g,{column:h,columnIndex:b.getColumnIndex(h),cell:f}),"body"===v&&(f=(h=b.getRowNode(f.parentNode))?h.item:null,e="",f)&&(g.row=f,g.rowIndex=b.getRowIndex(f));h=e+"cell-menu";return L(t,v,g),void b.dispatchEvent(h,g,t)}if((0,_dom.getEventTargetNode)(t,d,`vxe-table--${v}-wrapper`,e=>e.getAttribute("xid")===m).flag)return void("cell"===a.trigger?t.preventDefault():L(t,v,g))}}u&&!(0,_dom.getEventTargetNode)(t,u.getRefMaps().refElem.value).flag&&b.closeFilter(),w.closeMenu()},ctxMenuMouseoverEvent(e,t,l){let a=e.currentTarget;var n=M.ctxMenuStore;e.preventDefault(),e.stopPropagation(),n.selected=t,(n.selectChild=l)||(n.showChild=(0,_utils.hasChildrenList)(t),n.showChild&&(0,_vue.nextTick)(()=>{var o=a.nextElementSibling;if(o){var{boundingTop:i,boundingLeft:u,visibleHeight:s,visibleWidth:r}=(0,_dom.getAbsolutePos)(a),i=i+a.offsetHeight;let e="",t="",l=(u+a.offsetWidth+o.offsetWidth>r-10&&(e="auto",t=a.offsetWidth+"px"),""),n="";i+o.offsetHeight>s-10&&(l="auto",n="0"),o.style.left=e,o.style.right=t,o.style.top=l,o.style.bottom=n}}))},ctxMenuMouseoutEvent(e,t){var l=M.ctxMenuStore;t.children||(l.selected=null),l.selectChild=null},ctxMenuLinkEvent(e,t){var l,n=b.xeGrid;t.disabled||!t.code&&t.children&&t.children.length||(l=menus.get(t.code),t=Object.assign({},E._currMenuParams,{menu:t,$table:b,$grid:n,$event:e}),(n=l?l.tableMenuMethod||l.menuMethod:null)&&n(t,e),b.dispatchEvent("menu-click",t,e),w.closeMenu())}},Object.assign(Object.assign({},w),e)},setupGrid(e){return e.extendTableMethods(tableMenuMethodKeys)}});