element-plus 2.4.3 → 2.4.4

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.4.3 */
+/*! Element Plus v2.4.4 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11197,7 +11197,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "2.4.3";
+  const version$1 = "2.4.4";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -24193,20 +24193,26 @@
             el.dataset = {};
           el.dataset.oldPaddingTop = el.style.paddingTop;
           el.dataset.oldPaddingBottom = el.style.paddingBottom;
+          if (el.style.height)
+            el.dataset.elExistsHeight = el.style.height;
           el.style.maxHeight = 0;
           el.style.paddingTop = 0;
           el.style.paddingBottom = 0;
         },
         enter(el) {
-          el.dataset.oldOverflow = el.style.overflow;
-          if (el.scrollHeight !== 0) {
-            el.style.maxHeight = `${el.scrollHeight}px`;
-          } else {
-            el.style.maxHeight = 0;
-          }
-          el.style.paddingTop = el.dataset.oldPaddingTop;
-          el.style.paddingBottom = el.dataset.oldPaddingBottom;
-          el.style.overflow = "hidden";
+          requestAnimationFrame(() => {
+            el.dataset.oldOverflow = el.style.overflow;
+            if (el.dataset.elExistsHeight) {
+              el.style.maxHeight = el.dataset.elExistsHeight;
+            } else if (el.scrollHeight !== 0) {
+              el.style.maxHeight = `${el.scrollHeight}px`;
+            } else {
+              el.style.maxHeight = 0;
+            }
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            el.style.overflow = "hidden";
+          });
         },
         afterEnter(el) {
           el.style.maxHeight = "";
@@ -26425,19 +26431,13 @@
         const {
           cell
         } = props;
-        if (slots.default) {
-          const list = slots.default(cell).filter((item) => {
-            return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)" && item.type.toString() !== "Symbol(v-cmt)";
-          });
-          if (list.length) {
-            return list;
-          }
-        }
-        return vue.createVNode("div", {
+        return vue.renderSlot(slots, "default", {
+          ...cell
+        }, () => [vue.createVNode("div", {
           "class": ns.b()
         }, [vue.createVNode("span", {
           "class": ns.e("text")
-        }, [cell == null ? void 0 : cell.text])]);
+        }, [cell == null ? void 0 : cell.text])])]);
       };
     }
   });
@@ -26634,7 +26634,7 @@
         if (!props.rangeState.selecting)
           return;
         let target = event.target;
-        if (target.tagName === "A") {
+        if (target.tagName === "SPAN") {
           target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
         }
         if (target.tagName === "DIV") {
@@ -26912,6 +26912,9 @@
           }
           innerDate.value = newDate;
           emit(newDate, showTime.value || keepOpen);
+          if (props.type === "datetime") {
+            handleFocusPicker();
+          }
         } else if (selectionMode.value === "week") {
           emit(value.date);
         } else if (selectionMode.value === "dates") {
@@ -31941,17 +31944,16 @@
       };
       const handleBlur = (event) => {
         var _a;
+        data.userInput = null;
         emit("blur", event);
         if (props.validateEvent) {
           (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
         }
       };
-      vue.watch(() => props.modelValue, (value) => {
-        const userInput = verifyValue(data.userInput);
+      vue.watch(() => props.modelValue, (value, oldValue) => {
         const newValue = verifyValue(value, true);
-        if (!isNumber(userInput) && (!userInput || userInput !== newValue)) {
+        if (data.userInput === null && newValue !== oldValue) {
           data.currentValue = newValue;
-          data.userInput = null;
         }
       }, { immediate: true });
       vue.onMounted(() => {
@@ -32389,7 +32391,7 @@
     },
     popperOffset: {
       type: Number,
-      default: 6
+      default: void 0
     },
     expandCloseIcon: {
       type: iconPropType
@@ -32484,6 +32486,10 @@
         active
       });
       const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
+      const subMenuPopperOffset = vue.computed(() => {
+        var _a;
+        return (_a = props.popperOffset) != null ? _a : rootMenu.props.popperOffset;
+      });
       const doDestroy = () => {
         var _a, _b, _c;
         return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy();
@@ -32508,6 +32514,7 @@
           return;
         }
         if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) {
+          subMenu.mouseInChild.value = true;
           return;
         }
         subMenu.mouseInChild.value = true;
@@ -32522,6 +32529,7 @@
       const handleMouseleave = (deepDispatch = false) => {
         var _a, _b;
         if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
+          subMenu.mouseInChild.value = false;
           return;
         }
         timeout == null ? void 0 : timeout();
@@ -32578,7 +32586,7 @@
           visible: opened.value,
           effect: "light",
           pure: true,
-          offset: props.popperOffset,
+          offset: subMenuPopperOffset.value,
           showArrow: false,
           persistent: true,
           popperClass: props.popperClass,
@@ -32674,6 +32682,7 @@
     backgroundColor: String,
     textColor: String,
     activeTextColor: String,
+    closeOnClickOutside: Boolean,
     collapseTransition: {
       type: Boolean,
       default: true
@@ -32682,6 +32691,14 @@
       type: Boolean,
       default: true
     },
+    popperOffset: {
+      type: Number,
+      default: 6
+    },
+    ellipsisIcon: {
+      type: iconPropType,
+      default: () => more_default
+    },
     popperEffect: {
       type: String,
       values: ["dark", "light"],
@@ -32800,6 +32817,7 @@
         });
         return sliceIndex2 === items2.length ? -1 : sliceIndex2;
       };
+      const getIndexPath = (index) => subMenus.value[index].indexPath;
       const debounce = (fn, wait = 33.34) => {
         let timmer;
         return () => {
@@ -32838,6 +32856,7 @@
         else
           resizeStopper == null ? void 0 : resizeStopper();
       });
+      const mouseInChild = vue.ref(false);
       {
         const addSubMenu = (item) => {
           subMenus.value[item.index] = item;
@@ -32870,7 +32889,7 @@
         vue.provide(`subMenu:${instance.uid}`, {
           addSubMenu,
           removeSubMenu,
-          mouseInChild: vue.ref(false),
+          mouseInChild,
           level: 0
         });
       }
@@ -32902,17 +32921,33 @@
             slot = slotDefault;
             vShowMore.push(vue.h(SubMenu, {
               index: "sub-menu-more",
-              class: nsSubMenu.e("hide-arrow")
+              class: nsSubMenu.e("hide-arrow"),
+              popperOffset: props.popperOffset
             }, {
               title: () => vue.h(ElIcon, {
                 class: nsSubMenu.e("icon-more")
-              }, { default: () => vue.h(more_default) }),
+              }, {
+                default: () => vue.h(props.ellipsisIcon)
+              }),
               default: () => slotMore
             }));
           }
         }
         const ulStyle = useMenuCssVar(props, 0);
-        const vMenu = vue.h("ul", {
+        const directives = props.closeOnClickOutside ? [
+          [
+            ClickOutside,
+            () => {
+              if (!openedMenus.value.length)
+                return;
+              if (!mouseInChild.value) {
+                openedMenus.value.forEach((openedMenu) => emit("close", openedMenu, getIndexPath(openedMenu)));
+                openedMenus.value = [];
+              }
+            }
+          ]
+        ] : [];
+        const vMenu = vue.withDirectives(vue.h("ul", {
           key: String(props.collapse),
           role: "menubar",
           ref: menu,
@@ -32922,7 +32957,7 @@
             [nsMenu.m(props.mode)]: true,
             [nsMenu.m("collapse")]: props.collapse
           }
-        }, [...slot, ...vShowMore]);
+        }, [...slot, ...vShowMore]), directives);
         if (props.collapseTransition && props.mode === "vertical") {
           return vue.h(ElMenuCollapseTransition, () => vMenu);
         }
@@ -35585,6 +35620,7 @@
     "update:current-page": (val) => isNumber(val),
     "update:page-size": (val) => isNumber(val),
     "size-change": (val) => isNumber(val),
+    change: (currentPage, pageSize) => isNumber(currentPage) && isNumber(pageSize),
     "current-change": (val) => isNumber(val),
     "prev-click": (val) => isNumber(val),
     "next-click": (val) => isNumber(val)
@@ -35668,6 +35704,9 @@
         if (currentPageBridge.value > val)
           currentPageBridge.value = val;
       });
+      vue.watch([currentPageBridge, pageSizeBridge], (value) => {
+        emit("change", ...value);
+      }, { flush: "post" });
       function handleCurrentChange(val) {
         currentPageBridge.value = val;
       }
@@ -39220,7 +39259,7 @@
     const expanded = vue.ref(false);
     const selectDisabled = vue.computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
     const popupHeight = vue.computed(() => {
-      const totalHeight = filteredOptions.value.length * 34;
+      const totalHeight = filteredOptions.value.length * props.itemHeight;
       return totalHeight > props.height ? props.height : totalHeight;
     });
     const hasModelValue = vue.computed(() => {
@@ -42251,17 +42290,21 @@
                   vue.createVNode(vue.unref(loading_default))
                 ]),
                 _: 1
-              }, 8, ["class"])) : _ctx.activeActionIcon && vue.unref(checked) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeActionIcon)))
-                ]),
-                _: 1
-              })) : _ctx.inactiveActionIcon && !vue.unref(checked) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 2 }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveActionIcon)))
-                ]),
-                _: 1
-              })) : vue.createCommentVNode("v-if", true)
+              }, 8, ["class"])) : vue.unref(checked) ? vue.renderSlot(_ctx.$slots, "active-action", { key: 1 }, () => [
+                _ctx.activeActionIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeActionIcon)))
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("v-if", true)
+              ]) : !vue.unref(checked) ? vue.renderSlot(_ctx.$slots, "inactive-action", { key: 2 }, () => [
+                _ctx.inactiveActionIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveActionIcon)))
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("v-if", true)
+              ]) : vue.createCommentVNode("v-if", true)
             ], 2)
           ], 6),
           !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -42589,9 +42632,26 @@
       arrow.className = `${ns}-popper__arrow`;
       return arrow;
     }
+    function togglePopperVisible(display) {
+      return {
+        name: "updateState",
+        enabled: true,
+        phase: "beforeWrite",
+        fn: ({ state }) => {
+          state.styles.popper.display = display;
+        },
+        requires: ["computeStyles"]
+      };
+    }
     function showPopper() {
-      popperInstance && popperInstance.update();
+      if (tooltipOptions.showAfter) {
+        popperInstance == null ? void 0 : popperInstance.setOptions({
+          modifiers: [togglePopperVisible("block")]
+        });
+      }
+      popperInstance == null ? void 0 : popperInstance.update();
     }
+    const triggerChanged = (removePopper == null ? void 0 : removePopper.trigger) !== trigger;
     removePopper == null ? void 0 : removePopper();
     removePopper = () => {
       try {
@@ -42604,20 +42664,19 @@
       } catch (e) {
       }
     };
+    removePopper.trigger = trigger;
     let popperInstance = null;
-    let onOpen = showPopper;
-    let onClose = removePopper;
+    const { onOpen, onClose } = useDelayedToggle({
+      showAfter: tooltipOptions.showAfter,
+      hideAfter: tooltipOptions.hideAfter,
+      open: showPopper,
+      close: removePopper
+    });
+    const content = renderContent();
     if (tooltipOptions.enterable) {
-      ({ onOpen, onClose } = useDelayedToggle({
-        showAfter: tooltipOptions.showAfter,
-        hideAfter: tooltipOptions.hideAfter,
-        open: showPopper,
-        close: removePopper
-      }));
+      content.onmouseenter = onOpen;
+      content.onmouseleave = onClose;
     }
-    const content = renderContent();
-    content.onmouseenter = onOpen;
-    content.onmouseleave = onClose;
     const modifiers = [];
     if (tooltipOptions.offset) {
       modifiers.push({
@@ -42637,6 +42696,9 @@
         }
       });
     }
+    if (tooltipOptions.showAfter && triggerChanged) {
+      modifiers.push(togglePopperVisible("none"));
+    }
     const popperOptions = tooltipOptions.popperOptions || {};
     popperInstance = yn(trigger, content, {
       placement: tooltipOptions.placement || "top",
@@ -42647,6 +42709,7 @@
     trigger.addEventListener("mouseenter", onOpen);
     trigger.addEventListener("mouseleave", onClose);
     scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
+    onOpen();
     return popperInstance;
   }
   function getCurrentColumns(column) {
@@ -46526,8 +46589,7 @@
       if (props.renderHeader) ; else if (column.type !== "selection") {
         column.renderHeader = (scope) => {
           instance.columnConfig.value["label"];
-          const renderHeader = slots.header;
-          return renderHeader ? renderHeader(scope) : column.label;
+          return vue.renderSlot(slots, "header", scope, () => [column.label]);
         };
       }
       let originRenderCell = column.renderCell;
@@ -47637,11 +47699,12 @@
       style
     } = props;
     const displayText = ((_a = cellData == null ? void 0 : cellData.toString) == null ? void 0 : _a.call(cellData)) || "";
+    const defaultSlot = vue.renderSlot(slots, "default", props, () => [displayText]);
     return vue.createVNode("div", {
       "class": props.class,
       "title": displayText,
       "style": style
-    }, [slots.default ? slots.default(props) : displayText]);
+    }, [defaultSlot]);
   };
   TableV2Cell.displayName = "ElTableV2Cell";
   TableV2Cell.inheritAttrs = false;
@@ -47649,13 +47712,13 @@
 
   const HeaderCell = (props, {
     slots
-  }) => {
+  }) => vue.renderSlot(slots, "default", props, () => {
     var _a, _b;
-    return slots.default ? slots.default(props) : vue.createVNode("div", {
+    return [vue.createVNode("div", {
       "class": props.class,
       "title": (_a = props.column) == null ? void 0 : _a.title
-    }, [(_b = props.column) == null ? void 0 : _b.title]);
-  };
+    }, [(_b = props.column) == null ? void 0 : _b.title])];
+  });
   HeaderCell.displayName = "ElTableV2HeaderCell";
   HeaderCell.inheritAttrs = false;
   var HeaderCell$1 = HeaderCell;
@@ -48409,8 +48472,6 @@
       dataKey,
       dataGetter
     } = column;
-    const columnCellRenderer = componentToSlot(cellRenderer);
-    const CellComponent = columnCellRenderer || slots.default || ((props) => vue.createVNode(TableCell, props, null));
     const cellData = isFunction$1(dataGetter) ? dataGetter({
       columns,
       column,
@@ -48436,7 +48497,8 @@
       rowData,
       rowIndex
     };
-    const Cell = CellComponent(cellProps);
+    const columnCellRenderer = componentToSlot(cellRenderer);
+    const Cell = columnCellRenderer ? columnCellRenderer(cellProps) : vue.renderSlot(slots, "default", cellProps, () => [vue.createVNode(TableCell, cellProps, null)]);
     const kls = [ns.e("row-cell"), column.class, column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right")];
     const expandable = rowIndex >= 0 && expandColumnKey && column.key === expandColumnKey;
     const expanded = rowIndex >= 0 && expandedRowKeys.includes(rowData[rowKey]);
@@ -48525,8 +48587,8 @@
       ...props,
       class: ns.e("header-cell-text")
     };
-    const cellRenderer = componentToSlot(headerCellRenderer) || slots.default || ((props2) => vue.createVNode(HeaderCell$1, props2, null));
-    const Cell = cellRenderer(cellProps);
+    const columnCellRenderer = componentToSlot(headerCellRenderer);
+    const Cell = columnCellRenderer ? columnCellRenderer(cellProps) : vue.renderSlot(slots, "default", cellProps, () => [vue.createVNode(HeaderCell$1, cellProps, null)]);
     const {
       sortBy,
       sortState,
@@ -48571,10 +48633,11 @@
   const Footer = (props, {
     slots
   }) => {
+    const defaultSlot = vue.renderSlot(slots, "default", {}, () => [vue.createVNode(ElEmpty, null, null)]);
     return vue.createVNode("div", {
       "class": props.class,
       "style": props.style
-    }, [slots.default ? slots.default() : vue.createVNode(ElEmpty, null, null)]);
+    }, [defaultSlot]);
   };
   Footer.displayName = "ElTableV2Empty";
 
@@ -54929,7 +54992,7 @@
             const metrics = ctx.measureText(item);
             return [
               metrics.width,
-              metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent
+              metrics.fontBoundingBoxAscent !== void 0 ? metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
             ];
           });
           defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
@@ -55002,7 +55065,9 @@
         });
       };
       useMutationObserver(containerRef, onMutate, {
-        attributes: true
+        attributes: true,
+        subtree: true,
+        childList: true
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {