@element-plus/nightly 0.0.20220710 → 0.0.20220711

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220710 */
+/*! Element Plus v0.0.20220711 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -10734,7 +10734,7 @@
     return [recordCursor, setCursor];
   }
 
-  const version$1 = "0.0.20220710";
+  const version$1 = "0.0.20220711";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -12036,7 +12036,9 @@
       }));
       vue.onMounted(() => {
         if (!props.native)
-          vue.nextTick(() => update());
+          vue.nextTick(() => {
+            update();
+          });
       });
       vue.onUpdated(() => update());
       expose({
@@ -20968,9 +20970,8 @@
     }
   });
   const _hoisted_1$M = { key: 0 };
-  const _hoisted_2$x = { class: "el-cascader__collapse-tags" };
-  const _hoisted_3$k = ["placeholder"];
-  const _hoisted_4$d = ["onClick"];
+  const _hoisted_2$x = ["placeholder"];
+  const _hoisted_3$k = ["onClick"];
   function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_circle_close = vue.resolveComponent("circle-close");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -21092,11 +21093,13 @@
                       vue.createElementVNode("span", null, vue.toDisplayString(tag.text), 1)
                     ]),
                     content: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_2$x, [
+                      vue.createElementVNode("div", {
+                        class: vue.normalizeClass(_ctx.nsCascader.e("collapse-tags"))
+                      }, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.allPresentTags, (tag2, idx) => {
                           return vue.openBlock(), vue.createElementBlock("div", {
                             key: idx,
-                            class: "el-cascader__collapse-tag"
+                            class: vue.normalizeClass(_ctx.nsCascader.e("collapse-tag"))
                           }, [
                             (vue.openBlock(), vue.createBlock(_component_el_tag, {
                               key: tag2.key,
@@ -21113,9 +21116,9 @@
                               ]),
                               _: 2
                             }, 1032, ["type", "size", "hit", "closable", "onClose"]))
-                          ]);
+                          ], 2);
                         }), 128))
-                      ])
+                      ], 2)
                     ]),
                     _: 2
                   }, 1032, ["disabled"]))
@@ -21135,7 +21138,7 @@
               onCompositionstart: _cache[8] || (_cache[8] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
               onCompositionupdate: _cache[9] || (_cache[9] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
               onCompositionend: _cache[10] || (_cache[10] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args))
-            }, null, 42, _hoisted_3$k)), [
+            }, null, 42, _hoisted_2$x)), [
               [vue.vModelText, _ctx.searchInputValue]
             ]) : vue.createCommentVNode("v-if", true)
           ], 2)) : vue.createCommentVNode("v-if", true)
@@ -21183,7 +21186,7 @@
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("v-if", true)
-              ], 10, _hoisted_4$d);
+              ], 10, _hoisted_3$k);
             }), 128)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
               vue.createElementVNode("li", {
                 class: vue.normalizeClass(_ctx.nsCascader.e("empty-text"))
@@ -40518,11 +40521,9 @@
       try {
         popperInstance && popperInstance.destroy();
         content && (parentNode == null ? void 0 : parentNode.removeChild(content));
-        off(trigger, "mouseenter", showPopper);
-        off(trigger, "mouseleave", removePopper);
-        if (scrollContainer) {
-          off(scrollContainer, "scroll", removePopper);
-        }
+        trigger.removeEventListener("mouseenter", showPopper);
+        trigger.removeEventListener("mouseleave", removePopper);
+        scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
         removePopper = void 0;
       } catch (e) {
       }
@@ -40550,11 +40551,9 @@
       ],
       ...popperOptions
     });
-    on$1(trigger, "mouseenter", showPopper);
-    on$1(trigger, "mouseleave", removePopper);
-    if (scrollContainer) {
-      on$1(scrollContainer, "scroll", removePopper);
-    }
+    trigger.addEventListener("mouseenter", showPopper);
+    trigger.addEventListener("mouseleave", removePopper);
+    scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
     return popperInstance;
   }
   const isFixedColumn = (index, fixed, store, realColumns) => {
@@ -41612,14 +41611,6 @@
       this.bodyWidth = vue.ref(null);
       this.fixedWidth = vue.ref(null);
       this.rightFixedWidth = vue.ref(null);
-      this.tableHeight = vue.ref(null);
-      this.headerHeight = vue.ref(44);
-      this.appendHeight = vue.ref(0);
-      this.footerHeight = vue.ref(44);
-      this.viewportHeight = vue.ref(null);
-      this.bodyHeight = vue.ref(null);
-      this.bodyScrollHeight = vue.ref(0);
-      this.fixedBodyHeight = vue.ref(null);
       this.gutterWidth = 0;
       for (const name in options) {
         if (hasOwn(options, name)) {
@@ -41641,15 +41632,11 @@
       const height = this.height.value;
       if (height === null)
         return false;
-      const bodyWrapper = this.table.refs.bodyWrapper;
-      if (this.table.vnode.el && bodyWrapper) {
+      const scrollBarRef = this.table.refs.scrollBarRef;
+      if (this.table.vnode.el && scrollBarRef) {
         let scrollY = true;
         const prevScrollY = this.scrollY.value;
-        if (this.bodyHeight.value === null) {
-          scrollY = false;
-        } else {
-          scrollY = bodyWrapper.scrollHeight > this.bodyHeight.value;
-        }
+        scrollY = scrollBarRef.wrap$.scrollHeight > scrollBarRef.wrap$.clientHeight;
         this.scrollY.value = scrollY;
         return prevScrollY !== scrollY;
       }
@@ -41687,43 +41674,6 @@
       return flattenColumns;
     }
     updateElsHeight() {
-      var _a, _b;
-      if (!this.table.$ready)
-        return vue.nextTick(() => this.updateElsHeight());
-      const {
-        tableWrapper,
-        headerWrapper,
-        appendWrapper,
-        footerWrapper,
-        tableHeader,
-        tableBody
-      } = this.table.refs;
-      if (tableWrapper && tableWrapper.style.display === "none") {
-        return;
-      }
-      const { tableLayout } = this.table.props;
-      this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0;
-      if (this.showHeader && !headerWrapper && tableLayout === "fixed") {
-        return;
-      }
-      const headerTrElm = tableHeader ? tableHeader : null;
-      const noneHeader = this.headerDisplayNone(headerTrElm);
-      const headerWrapperOffsetHeight = (headerWrapper == null ? void 0 : headerWrapper.offsetHeight) || 0;
-      const headerHeight = this.headerHeight.value = !this.showHeader ? 0 : headerWrapperOffsetHeight;
-      if (this.showHeader && !noneHeader && headerWrapperOffsetHeight > 0 && (this.table.store.states.columns.value || []).length > 0 && headerHeight < 2) {
-        return vue.nextTick(() => this.updateElsHeight());
-      }
-      const tableHeight = this.tableHeight.value = (_b = (_a = this.table) == null ? void 0 : _a.vnode.el) == null ? void 0 : _b.clientHeight;
-      const footerHeight = this.footerHeight.value = footerWrapper ? footerWrapper.offsetHeight : 0;
-      if (this.height.value !== null) {
-        if (this.bodyHeight.value === null) {
-          requestAnimationFrame(() => this.updateElsHeight());
-        }
-        this.bodyHeight.value = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
-        this.bodyScrollHeight.value = tableBody == null ? void 0 : tableBody.scrollHeight;
-      }
-      this.fixedBodyHeight.value = this.scrollX.value ? this.bodyHeight.value - this.gutterWidth : this.bodyHeight.value;
-      this.viewportHeight.value = this.scrollX.value ? tableHeight - this.gutterWidth : tableHeight;
       this.updateScrollY();
       this.notifyObservers("scrollable");
     }
@@ -43359,14 +43309,18 @@
     };
     const resizeState = vue.ref({
       width: null,
-      height: null
+      height: null,
+      headerHeight: null
     });
     const isGroup = vue.ref(false);
     const scrollbarViewStyle = {
-      display: "block",
+      display: "inline-block",
       verticalAlign: "middle"
     };
     const tableWidth = vue.ref();
+    const tableScrollHeight = vue.ref(0);
+    const bodyScrollHeight = vue.ref(0);
+    const headerScrollHeight = vue.ref(0);
     vue.watchEffect(() => {
       layout.setHeight(props.height);
     });
@@ -43423,12 +43377,14 @@
       bindEvents();
       requestAnimationFrame(doLayout);
       const el = table.vnode.el;
+      const tableHeader = table.refs.headerWrapper;
       if (props.flexible && el && el.parentElement) {
         el.parentElement.style.minWidth = "0";
       }
       resizeState.value = {
         width: tableWidth.value = el.offsetWidth,
-        height: el.offsetHeight
+        height: el.offsetHeight,
+        headerHeight: props.showHeader && tableHeader ? tableHeader.offsetHeight : null
       };
       store.states.columns.value.forEach((column) => {
         if (column.filteredValue && column.filteredValue.length) {
@@ -43499,23 +43455,36 @@
       }
     };
     const resizeListener = () => {
+      var _a;
       if (!table.$ready)
         return;
       let shouldUpdateLayout = false;
       const el = table.vnode.el;
-      const { width: oldWidth, height: oldHeight } = resizeState.value;
+      const {
+        width: oldWidth,
+        height: oldHeight,
+        headerHeight: oldHeaderHeight
+      } = resizeState.value;
       const width = tableWidth.value = el.offsetWidth;
       if (oldWidth !== width) {
         shouldUpdateLayout = true;
       }
-      const height2 = el.offsetHeight;
-      if ((props.height || shouldUpdateHeight.value) && oldHeight !== height2) {
+      const height = el.offsetHeight;
+      if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
         shouldUpdateLayout = true;
       }
+      const tableHeader = table.refs.headerWrapper;
+      if (props.showHeader && tableHeader.offsetHeight !== oldHeaderHeight) {
+        shouldUpdateLayout = true;
+      }
+      tableScrollHeight.value = table.refs.tableWrapper.scrollHeight;
+      headerScrollHeight.value = ((_a = table.refs.headerWrapper) == null ? void 0 : _a.scrollHeight) || 0;
+      bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value;
       if (shouldUpdateLayout) {
         resizeState.value = {
           width,
-          height: height2
+          height,
+          headerHeight: props.showHeader ? tableHeader.offsetHeight : null
         };
         doLayout();
       }
@@ -43530,57 +43499,57 @@
         return "fixed";
       return props.tableLayout;
     });
-    function calcMaxHeight(maxHeight, footerHeight, headerHeight) {
-      const parsedMaxHeight = parseHeight(maxHeight);
-      const tableHeaderHeight = props.showHeader ? headerHeight : 0;
-      if (parsedMaxHeight === null)
-        return;
-      if (isString(parsedMaxHeight)) {
-        return `calc(${parsedMaxHeight} - ${footerHeight}px - ${tableHeaderHeight}px)`;
+    const emptyBlockStyle = vue.computed(() => {
+      if (props.data && props.data.length)
+        return null;
+      let height = "100%";
+      if (bodyScrollHeight.value) {
+        height = `${bodyScrollHeight.value}px`;
       }
-      return parsedMaxHeight - footerHeight - tableHeaderHeight;
-    }
-    const height = vue.computed(() => {
-      const headerHeight = layout.headerHeight.value || 0;
-      const bodyHeight2 = layout.bodyHeight.value;
-      const footerHeight = layout.footerHeight.value || 0;
+      const width = tableWidth.value;
+      return {
+        width: width ? `${width}px` : "",
+        height
+      };
+    });
+    const tableInnerStyle = vue.computed(() => {
       if (props.height) {
-        return bodyHeight2 ? bodyHeight2 : void 0;
-      } else if (props.maxHeight) {
-        return calcMaxHeight(props.maxHeight, footerHeight, headerHeight);
+        return {
+          height: !Number.isNaN(Number(props.height)) ? `${props.height}px` : props.height
+        };
       }
-      return void 0;
+      if (props.maxHeight) {
+        return {
+          maxHeight: !Number.isNaN(Number(props.maxHeight)) ? `${props.maxHeight}px` : props.maxHeight
+        };
+      }
+      return {};
     });
-    const bodyHeight = vue.computed(() => {
-      const headerHeight = layout.headerHeight.value || 0;
-      const bodyHeight2 = layout.bodyHeight.value;
-      const footerHeight = layout.footerHeight.value || 0;
+    const scrollbarStyle = vue.computed(() => {
+      var _a;
       if (props.height) {
         return {
-          height: bodyHeight2 ? `${bodyHeight2}px` : ""
+          height: "100%"
         };
-      } else if (props.maxHeight) {
-        const maxHeight = calcMaxHeight(props.maxHeight, footerHeight, headerHeight);
-        if (maxHeight !== null) {
+      }
+      if (props.maxHeight) {
+        if (!Number.isNaN(Number(props.maxHeight))) {
+          const headerHeight = ((_a = table.refs.headerWrapper) == null ? void 0 : _a.scrollHeight) || 0;
+          const maxHeight = props.maxHeight;
+          const reachMaxHeight = tableScrollHeight.value >= Number(maxHeight);
+          if (reachMaxHeight) {
+            return {
+              maxHeight: `${tableScrollHeight.value - headerHeight}px`
+            };
+          }
+        } else {
           return {
-            "max-height": `${maxHeight}${isNumber(maxHeight) ? "px" : ""}`
+            maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value}px)`
           };
         }
       }
       return {};
     });
-    const emptyBlockStyle = vue.computed(() => {
-      if (props.data && props.data.length)
-        return null;
-      let height2 = "100%";
-      if (layout.appendHeight.value) {
-        height2 = `calc(100% - ${layout.appendHeight.value}px)`;
-      }
-      return {
-        width: tableWidth.value ? `${tableWidth.value}px` : "",
-        height: height2
-      };
-    });
     const handleFixedMousewheel = (event, data) => {
       const bodyWrapper = table.refs.bodyWrapper;
       if (Math.abs(data.spinY) > 0) {
@@ -43596,47 +43565,6 @@
         bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
       }
     };
-    const fixedHeight = vue.computed(() => {
-      if (props.maxHeight) {
-        if (props.showSummary) {
-          return {
-            bottom: 0
-          };
-        }
-        return {
-          bottom: layout.scrollX.value && props.data.length ? `${layout.gutterWidth}px` : ""
-        };
-      } else {
-        if (props.showSummary) {
-          return {
-            height: layout.tableHeight.value ? `${layout.tableHeight.value}px` : ""
-          };
-        }
-        return {
-          height: layout.viewportHeight.value ? `${layout.viewportHeight.value}px` : ""
-        };
-      }
-    });
-    const fixedBodyHeight = vue.computed(() => {
-      if (props.height) {
-        return {
-          height: layout.fixedBodyHeight.value ? `${layout.fixedBodyHeight.value}px` : ""
-        };
-      } else if (props.maxHeight) {
-        let maxHeight = parseHeight(props.maxHeight);
-        if (typeof maxHeight === "number") {
-          maxHeight = layout.scrollX.value ? maxHeight - layout.gutterWidth : maxHeight;
-          if (props.showHeader) {
-            maxHeight -= layout.headerHeight.value;
-          }
-          maxHeight -= layout.footerHeight.value;
-          return {
-            "max-height": `${maxHeight}px`
-          };
-        }
-      }
-      return {};
-    });
     return {
       isHidden,
       renderExpanded,
@@ -43645,19 +43573,17 @@
       handleMouseLeave,
       handleHeaderFooterMousewheel,
       tableSize,
-      bodyHeight,
-      height,
       emptyBlockStyle,
       handleFixedMousewheel,
-      fixedHeight,
-      fixedBodyHeight,
       resizeProxyVisible,
       bodyWidth,
       resizeState,
       doLayout,
       tableBodyStyles,
       tableLayout,
-      scrollbarViewStyle
+      scrollbarViewStyle,
+      tableInnerStyle,
+      scrollbarStyle
     };
   }
 
@@ -43832,19 +43758,17 @@
         handleMouseLeave,
         handleHeaderFooterMousewheel,
         tableSize,
-        bodyHeight,
-        height,
         emptyBlockStyle,
         handleFixedMousewheel,
-        fixedHeight,
-        fixedBodyHeight,
         resizeProxyVisible,
         bodyWidth,
         resizeState,
         doLayout,
         tableBodyStyles,
         tableLayout,
-        scrollbarViewStyle
+        scrollbarViewStyle,
+        tableInnerStyle,
+        scrollbarStyle
       } = useStyle(props, layout, store, table);
       const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar$1();
       const debouncedUpdateLayout = debounce(doLayout, 50);
@@ -43875,14 +43799,10 @@
         resizeState,
         isGroup,
         bodyWidth,
-        bodyHeight,
-        height,
         tableBodyStyles,
         emptyBlockStyle,
         debouncedUpdateLayout,
         handleFixedMousewheel,
-        fixedHeight,
-        fixedBodyHeight,
         setCurrentRow,
         getSelectionRows,
         toggleRowSelection,
@@ -43900,6 +43820,8 @@
         computedEmptyText,
         tableLayout,
         scrollbarViewStyle,
+        tableInnerStyle,
+        scrollbarStyle,
         scrollBarRef,
         scrollTo,
         setScrollLeft,
@@ -43945,7 +43867,8 @@
       onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave())
     }, [
       vue.createElementVNode("div", {
-        class: vue.normalizeClass(_ctx.ns.e("inner-wrapper"))
+        class: vue.normalizeClass(_ctx.ns.e("inner-wrapper")),
+        style: vue.normalizeStyle(_ctx.tableInnerStyle)
       }, [
         vue.createElementVNode("div", _hoisted_2$7, [
           vue.renderSlot(_ctx.$slots, "default")
@@ -43980,14 +43903,12 @@
         ]) : vue.createCommentVNode("v-if", true),
         vue.createElementVNode("div", {
           ref: "bodyWrapper",
-          style: vue.normalizeStyle(_ctx.bodyHeight),
           class: vue.normalizeClass(_ctx.ns.e("body-wrapper"))
         }, [
           vue.createVNode(_component_el_scrollbar, {
             ref: "scrollBarRef",
-            height: _ctx.maxHeight ? void 0 : _ctx.height,
-            "max-height": _ctx.maxHeight ? _ctx.height : void 0,
             "view-style": _ctx.scrollbarViewStyle,
+            "wrap-style": _ctx.scrollbarStyle,
             always: _ctx.scrollbarAlwaysOn
           }, {
             default: vue.withCtx(() => [
@@ -44046,30 +43967,30 @@
               ], 2)) : vue.createCommentVNode("v-if", true)
             ]),
             _: 3
-          }, 8, ["height", "max-height", "view-style", "always"])
-        ], 6),
-        _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
+          }, 8, ["view-style", "wrap-style", "always"])
+        ], 2),
+        _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
+          ref: "footerWrapper",
+          class: vue.normalizeClass(_ctx.ns.e("footer-wrapper"))
+        }, [
+          vue.createVNode(_component_table_footer, {
+            border: _ctx.border,
+            "default-sort": _ctx.defaultSort,
+            store: _ctx.store,
+            style: vue.normalizeStyle(_ctx.tableBodyStyles),
+            "sum-text": _ctx.computedSumText,
+            "summary-method": _ctx.summaryMethod
+          }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
+        ], 2)), [
+          [vue.vShow, !_ctx.isEmpty],
+          [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
+        ]) : vue.createCommentVNode("v-if", true),
+        _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 2,
           class: vue.normalizeClass(_ctx.ns.e("border-left-patch"))
         }, null, 2)) : vue.createCommentVNode("v-if", true)
-      ], 2),
-      _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        ref: "footerWrapper",
-        class: vue.normalizeClass(_ctx.ns.e("footer-wrapper"))
-      }, [
-        vue.createVNode(_component_table_footer, {
-          border: _ctx.border,
-          "default-sort": _ctx.defaultSort,
-          store: _ctx.store,
-          style: vue.normalizeStyle(_ctx.tableBodyStyles),
-          "sum-text": _ctx.computedSumText,
-          "summary-method": _ctx.summaryMethod
-        }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
-      ], 2)), [
-        [vue.vShow, !_ctx.isEmpty],
-        [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
-      ]) : vue.createCommentVNode("v-if", true),
+      ], 6),
       vue.withDirectives(vue.createElementVNode("div", {
         ref: "resizeProxy",
         class: vue.normalizeClass(_ctx.ns.e("column-resize-proxy"))