vxe-table 3.15.0 → 3.15.2

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.15.0";
+const version = "3.15.2";
 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"}`;
+const log_version = `table v${"3.15.2"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -3357,7 +3357,8 @@ function getColReMinWidth(params) {
 const lineOffsetSizes = {
   mini: 3,
   small: 2,
-  medium: 1
+  medium: 1,
+  large: 0
 };
 function countTreeExpand(prevRow, params) {
   let count = 1;
@@ -8475,7 +8476,11 @@ const Methods = {
       handleReserveStatus($xeTable);
       $xeTable.checkSelectionStatus();
       return new Promise(resolve => {
-        this.$nextTick().then(() => $xeTable.recalculate()).then(() => {
+        this.$nextTick().then(() => handleRecalculateLayout($xeTable, false)).then(() => {
+          calcCellHeight($xeTable);
+          updateRowOffsetTop($xeTable);
+          return handleRecalculateLayout($xeTable, false);
+        }).then(() => {
           let targetScrollLeft = lastScrollLeft;
           let targetScrollTop = lastScrollTop;
           const virtualXOpts = $xeTable.computeVirtualXOpts;
@@ -8488,8 +8493,7 @@ const Methods = {
             targetScrollTop = 0;
           }
           reactData.isRowLoading = false;
-          calcCellHeight($xeTable);
-          updateRowOffsetTop($xeTable);
+          handleRecalculateLayout($xeTable, false);
           // 是否变更虚拟滚动
           if (oldScrollYLoad === sYLoad) {
             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -12644,6 +12648,12 @@ const Methods = {
     const {
       column: newValue
     } = params;
+    const {
+      trigger
+    } = currentColumnOpts;
+    if (trigger === 'manual') {
+      return;
+    }
     const isChange = oldValue !== newValue;
     if (!beforeRowMethod || beforeRowMethod({
       column: newValue,
@@ -12673,6 +12683,12 @@ const Methods = {
     const {
       row: newValue
     } = params;
+    const {
+      trigger
+    } = currentRowOpts;
+    if (trigger === 'manual') {
+      return;
+    }
     const isChange = oldValue !== newValue;
     if (!beforeRowMethod || beforeRowMethod({
       row: newValue,
@@ -14253,12 +14269,10 @@ const Methods = {
       column,
       visible
     } = filterStore;
-    Object.assign(filterStore, {
-      isAllSelected: false,
-      isIndeterminate: false,
-      options: [],
-      visible: false
-    });
+    filterStore.isAllSelected = false;
+    filterStore.isIndeterminate = false;
+    filterStore.options = [];
+    filterStore.visible = false;
     if (visible) {
       $xeTable.dispatchEvent('filter-visible', {
         column,
@@ -14692,7 +14706,8 @@ const Methods = {
     const $xeTable = this;
     const internalData = $xeTable;
     const {
-      treeExpandLazyLoadedMaps
+      treeExpandLazyLoadedMaps,
+      treeEATime
     } = internalData;
     const treeOpts = $xeTable.computeTreeOpts;
     const {
@@ -14701,7 +14716,8 @@ const Methods = {
     } = params;
     const {
       lazy,
-      trigger
+      trigger,
+      accordion
     } = treeOpts;
     if (trigger === 'manual') {
       return;
@@ -14712,7 +14728,17 @@ const Methods = {
       const expanded = !$xeTable.isTreeExpandByRow(row);
       const columnIndex = $xeTable.getColumnIndex(column);
       const $columnIndex = $xeTable.getVMColumnIndex(column);
-      $xeTable.setTreeExpand(row, expanded);
+      if (treeEATime) {
+        clearTimeout(treeEATime);
+      }
+      $xeTable.setTreeExpand(row, expanded).then(() => {
+        if (accordion) {
+          internalData.treeEATime = setTimeout(() => {
+            internalData.treeEATime = undefined;
+            $xeTable.scrollToRow(row);
+          }, 20);
+        }
+      });
       $xeTable.dispatchEvent('toggle-tree-expand', {
         expanded,
         column,
@@ -15062,6 +15088,9 @@ const Methods = {
     };
     updateRowExpandStyle($xeTable);
     checkLastSyncScroll($xeTable, isRollX, isRollY);
+    if (isRollX) {
+      $xeTable.closeFilter();
+    }
     if (rowOpts.isHover || highlightHoverRow) {
       $xeTable.clearHoverRow();
     }
@@ -15592,7 +15621,8 @@ const Methods = {
       if (isScrollXBig && mouseOpts.area) {
         errLog('vxe.error.notProp', ['mouse-config.area']);
       }
-      $xeTable.$nextTick(() => {
+      calcScrollbar($xeTable);
+      return $xeTable.$nextTick(() => {
         updateStyle($xeTable);
       });
     }
@@ -15711,6 +15741,7 @@ const Methods = {
     if (isScrollYBig && mouseOpts.area) {
       errLog('vxe.error.notProp', ['mouse-config.area']);
     }
+    calcScrollbar($xeTable);
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable);
     });
@@ -19491,28 +19522,169 @@ const renderPopupPanel = (h, _vm) => {
 const {
   getI18n: filter_panel_getI18n,
   getIcon: filter_panel_getIcon,
-  renderer: panel_renderer
+  renderer: panel_renderer,
+  globalMixins
 } = core_.VxeUI;
+function renderOptions($xeFilterPanel, h, filterRender, compConf) {
+  const props = $xeFilterPanel;
+  const $xeTable = $xeFilterPanel.$xeTable;
+  const tableInternalData = $xeTable;
+  const {
+    filterStore
+  } = props;
+  const {
+    column,
+    multiple,
+    maxHeight
+  } = filterStore;
+  const slots = column ? column.slots : null;
+  const filterSlot = slots ? slots.filter : null;
+  const params = Object.assign({}, tableInternalData._currFilterParams, {
+    $panel: $xeFilterPanel,
+    $table: $xeTable
+  });
+  const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
+  if (filterSlot) {
+    return [h('div', {
+      class: 'vxe-table--filter-template',
+      style: maxHeight ? {
+        maxHeight: `${maxHeight}px`
+      } : {}
+    }, $xeTable.callSlot(filterSlot, params, h))];
+  } else if (rtFilter) {
+    return [h('div', {
+      class: 'vxe-table--filter-template',
+      style: maxHeight ? {
+        maxHeight: `${maxHeight}px`
+      } : {}
+    }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))];
+  }
+  const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(item => item._checked);
+  const isAllIndeterminate = multiple && filterStore.isIndeterminate;
+  return [h('ul', {
+    class: 'vxe-table--filter-header'
+  }, [h('li', {
+    class: ['vxe-table--filter-option', {
+      'is--checked': isAllChecked,
+      'is--indeterminate': isAllIndeterminate
+    }],
+    attrs: {
+      title: filter_panel_getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+    },
+    on: {
+      click: evnt => {
+        $xeFilterPanel.changeAllOption(evnt, !filterStore.isAllSelected);
+      }
+    }
+  }, (multiple ? [h('span', {
+    class: ['vxe-checkbox--icon', isAllIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
+  })] : []).concat([h('span', {
+    class: 'vxe-checkbox--label'
+  }, filter_panel_getI18n('vxe.table.allFilter'))]))]), h('ul', {
+    class: 'vxe-table--filter-body',
+    style: maxHeight ? {
+      maxHeight: `${maxHeight}px`
+    } : {}
+  }, filterStore.options.map(item => {
+    const isChecked = item._checked;
+    const isIndeterminate = false;
+    return h('li', {
+      class: ['vxe-table--filter-option', {
+        'is--checked': isChecked
+      }],
+      attrs: {
+        title: item.label
+      },
+      on: {
+        click: evnt => {
+          $xeFilterPanel.changeOption(evnt, !item._checked, item);
+        }
+      }
+    }, (multiple ? [h('span', {
+      class: ['vxe-checkbox--icon', isIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
+    })] : []).concat([h('span', {
+      class: 'vxe-checkbox--label'
+    }, formatText(item.label, 1))]));
+  }))];
+}
+function renderFooter($xeFilterPanel, h) {
+  const props = $xeFilterPanel;
+  const $xeTable = $xeFilterPanel.$xeTable;
+  const {
+    filterStore
+  } = props;
+  const {
+    column,
+    multiple
+  } = filterStore;
+  const filterOpts = $xeTable.computeFilterOpts;
+  const hasCheckOption = $xeFilterPanel.computeHasCheckOption;
+  const filterRender = column.filterRender;
+  const compConf = isEnableConf(filterRender) ? panel_renderer.get(filterRender.name) : null;
+  const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
+  return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true) ? [h('div', {
+    class: 'vxe-table--filter-footer'
+  }, [h('button', {
+    class: {
+      'is--disabled': isDisabled
+    },
+    attrs: {
+      disabled: isDisabled
+    },
+    on: {
+      click: $xeFilterPanel.confirmFilter
+    }
+  }, filterOpts.confirmButtonText || filter_panel_getI18n('vxe.table.confirmFilter')), h('button', {
+    on: {
+      click: $xeFilterPanel.resetFilter
+    }
+  }, filterOpts.resetButtonText || filter_panel_getI18n('vxe.table.resetFilter'))])] : [];
+}
 /* harmony default export */ var filter_panel = ({
   name: 'VxeTableFilterPanel',
+  mixins: [globalMixins.sizeMixin],
   props: {
     filterStore: Object
   },
+  inject: {
+    $xeTable: {
+      default: null
+    }
+  },
   computed: {
-    hasCheckOption() {
+    computeHasCheckOption() {
       const {
         filterStore
       } = this;
       return filterStore && filterStore.options.some(option => option.checked);
     }
   },
+  mounted() {
+    const $xeFilterPanel = this;
+    const $xeTable = $xeFilterPanel.$xeTable;
+    const filterOpts = $xeTable.computeFilterOpts;
+    const {
+      transfer
+    } = filterOpts;
+    const el = this.$refs.refElem;
+    if (transfer && el) {
+      document.body.appendChild(el);
+    }
+  },
+  beforeDestroy() {
+    const el = this.$refs.refElem;
+    if (el && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  },
   render(h) {
-    const $panel = this;
-    const $xeTable = this.$parent;
+    const $xeFilterPanel = this;
+    const props = $xeFilterPanel;
+    const $xeTable = $xeFilterPanel.$xeTable;
     const tableInternalData = $xeTable;
     const {
       filterStore
-    } = this;
+    } = props;
     const {
       visible,
       multiple,
@@ -19522,137 +19694,27 @@ const {
     const compConf = isEnableConf(filterRender) ? panel_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;
+    const vSize = $xeFilterPanel.computeSize;
     const filterOpts = $xeTable.computeFilterOpts;
     const {
       destroyOnClose
     } = filterOpts;
     return h('div', {
+      ref: 'refElem',
       class: ['vxe-table--filter-wrapper', 'filter--prevent-default', compConf && compConf.className ? compConf.className : '', getClass(filterClassName, params), {
-        'is--animat': $xeTable.animat,
+        [`size--${vSize}`]: vSize,
+        'is--animat': tableProps.animat,
         'is--multiple': multiple,
         'is--active': visible
       }],
       style: filterStore.style
-    }, filterStore.visible && (destroyOnClose ? visible : true) && column ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : []);
+    }, filterStore.visible && (destroyOnClose ? visible : true) && column ? renderOptions($xeFilterPanel, h, filterRender, compConf).concat(renderFooter($xeFilterPanel, h)) : []);
   },
   methods: {
-    renderOptions(h, filterRender, compConf) {
-      const $panel = this;
-      const $xeTable = this.$parent;
-      const tableInternalData = $xeTable;
-      const {
-        filterStore
-      } = this;
-      const {
-        column,
-        multiple,
-        maxHeight
-      } = filterStore;
-      const slots = column ? column.slots : null;
-      const filterSlot = slots ? slots.filter : null;
-      const params = Object.assign({}, tableInternalData._currFilterParams, {
-        $panel,
-        $table: $xeTable
-      });
-      const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
-      if (filterSlot) {
-        return [h('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: `${maxHeight}px`
-          } : {}
-        }, $xeTable.callSlot(filterSlot, params, h))];
-      } else if (rtFilter) {
-        return [h('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: `${maxHeight}px`
-          } : {}
-        }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))];
-      }
-      const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(item => item._checked);
-      const isAllIndeterminate = multiple && filterStore.isIndeterminate;
-      return [h('ul', {
-        class: 'vxe-table--filter-header'
-      }, [h('li', {
-        class: ['vxe-table--filter-option', {
-          'is--checked': isAllChecked,
-          'is--indeterminate': isAllIndeterminate
-        }],
-        attrs: {
-          title: filter_panel_getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
-        },
-        on: {
-          click: evnt => {
-            this.changeAllOption(evnt, !filterStore.isAllSelected);
-          }
-        }
-      }, (multiple ? [h('span', {
-        class: ['vxe-checkbox--icon', isAllIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })] : []).concat([h('span', {
-        class: 'vxe-checkbox--label'
-      }, filter_panel_getI18n('vxe.table.allFilter'))]))]), h('ul', {
-        class: 'vxe-table--filter-body',
-        style: maxHeight ? {
-          maxHeight: `${maxHeight}px`
-        } : {}
-      }, filterStore.options.map(item => {
-        const isChecked = item._checked;
-        const isIndeterminate = false;
-        return h('li', {
-          class: ['vxe-table--filter-option', {
-            'is--checked': isChecked
-          }],
-          attrs: {
-            title: item.label
-          },
-          on: {
-            click: evnt => {
-              this.changeOption(evnt, !item._checked, item);
-            }
-          }
-        }, (multiple ? [h('span', {
-          class: ['vxe-checkbox--icon', isIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-        })] : []).concat([h('span', {
-          class: 'vxe-checkbox--label'
-        }, formatText(item.label, 1))]));
-      }))];
-    },
-    renderFooter(h) {
-      const $xeTable = this.$parent;
-      const {
-        hasCheckOption,
-        filterStore
-      } = this;
-      const {
-        column,
-        multiple
-      } = filterStore;
-      const filterOpts = $xeTable.computeFilterOpts;
-      const filterRender = column.filterRender;
-      const compConf = isEnableConf(filterRender) ? panel_renderer.get(filterRender.name) : null;
-      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
-      return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true) ? [h('div', {
-        class: 'vxe-table--filter-footer'
-      }, [h('button', {
-        class: {
-          'is--disabled': isDisabled
-        },
-        attrs: {
-          disabled: isDisabled
-        },
-        on: {
-          click: this.confirmFilter
-        }
-      }, filterOpts.confirmButtonText || filter_panel_getI18n('vxe.table.confirmFilter')), h('button', {
-        on: {
-          click: this.resetFilter
-        }
-      }, filterOpts.resetButtonText || filter_panel_getI18n('vxe.table.resetFilter'))])] : [];
-    },
     // 全部筛选事件
     filterCheckAllEvent(evnt, value) {
       const filterStore = this.filterStore;
@@ -19723,12 +19785,12 @@ const {
 const {
   getI18n: import_panel_getI18n,
   getIcon: import_panel_getIcon,
-  globalMixins,
+  globalMixins: import_panel_globalMixins,
   renderEmptyElement: import_panel_renderEmptyElement
 } = core_.VxeUI;
 /* harmony default export */ var import_panel = ({
   name: 'VxeTableImportPanel',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [import_panel_globalMixins.sizeMixin],
   props: {
     defaultOptions: Object,
     storeData: Object
@@ -20666,6 +20728,16 @@ const {
           filterStore.visible = false;
         } else {
           const el = $xeTable.$refs.refElem;
+          const {
+            scrollTop,
+            scrollLeft,
+            visibleHeight,
+            visibleWidth
+          } = getDomNode();
+          const filterOpts = $xeTable.computeFilterOpts;
+          const {
+            transfer
+          } = filterOpts;
           const tableRect = el.getBoundingClientRect();
           const btnElem = evnt.currentTarget;
           const {
@@ -20713,18 +20785,37 @@ const {
               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;
-            const 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);
+            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: toCssUnit(top),
               left: toCssUnit(left)
             };
+            // 判断面板不能大于表格高度
             filterStore.maxHeight = maxHeight;
           });
         }
@@ -26619,6 +26710,7 @@ function renderBody(h, $xeTable) {
       mergeBodyFlag: 1,
       mergeFootFlag: 1,
       rowHeightStore: {
+        large: 52,
         default: 48,
         medium: 44,
         small: 40,