element-plus 2.1.8 → 2.1.9

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.1.8 */
+/*! Element Plus v2.1.9 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -2138,7 +2138,12 @@
     };
   }
 
-  function useElementBounding(target) {
+  function useElementBounding(target, options = {}) {
+    const {
+      reset = true,
+      windowResize = true,
+      windowScroll = true
+    } = options;
     const height = vue.ref(0);
     const bottom = vue.ref(0);
     const left = vue.ref(0);
@@ -2150,14 +2155,16 @@
     function update() {
       const el = unrefElement(target);
       if (!el) {
-        height.value = 0;
-        bottom.value = 0;
-        left.value = 0;
-        right.value = 0;
-        top.value = 0;
-        width.value = 0;
-        x.value = 0;
-        y.value = 0;
+        if (reset) {
+          height.value = 0;
+          bottom.value = 0;
+          left.value = 0;
+          right.value = 0;
+          top.value = 0;
+          width.value = 0;
+          x.value = 0;
+          y.value = 0;
+        }
         return;
       }
       const rect = el.getBoundingClientRect();
@@ -2170,9 +2177,12 @@
       x.value = rect.x;
       y.value = rect.y;
     }
-    useEventListener("scroll", update, true);
     useResizeObserver(target, update);
     vue.watch(() => unrefElement(target), (ele) => !ele && update());
+    if (windowScroll)
+      useEventListener("scroll", update, { passive: true });
+    if (windowResize)
+      useEventListener("resize", update, { passive: true });
     return {
       height,
       bottom,
@@ -3439,6 +3449,14 @@
   const INPUT_EVENT = "input";
 
   const componentSizes = ["", "default", "small", "large"];
+  const componentSizeMap = {
+    large: 40,
+    default: 32,
+    small: 24
+  };
+  const getComponentSize = (size = "default") => {
+    return componentSizeMap[size || "default"];
+  };
 
   const isValidComponentSize = (val) => ["", ...componentSizes].includes(val);
   const isValidDatePickType = (val) => [...datePickTypes].includes(val);
@@ -4249,15 +4267,18 @@
   let cachedContainer;
   const POPPER_CONTAINER_ID = `el-popper-container-${generateId()}`;
   const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`;
+  const createContainer = () => {
+    const container = document.createElement("div");
+    container.id = POPPER_CONTAINER_ID;
+    document.body.appendChild(container);
+    return container;
+  };
   const usePopperContainer = () => {
     vue.onBeforeMount(() => {
       if (!isClient)
         return;
-      if (!cachedContainer) {
-        const container = document.createElement("div");
-        container.id = POPPER_CONTAINER_ID;
-        document.body.appendChild(container);
-        cachedContainer = container;
+      if (!cachedContainer || !document.body.querySelector(POPPER_CONTAINER_SELECTOR)) {
+        cachedContainer = createContainer();
       }
     });
   };
@@ -5175,7 +5196,7 @@
     };
   };
 
-  const version$1 = "2.1.8";
+  const version$1 = "2.1.9";
 
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   const makeInstaller = (components = []) => {
@@ -5849,7 +5870,30 @@
         resizeTextarea();
         updateIconOffset();
       });
+      const innerSuffixRef = vue.ref();
+      const innerPrefixRef = vue.ref();
+      const inputStyleInner = vue.ref({});
+      const getSuffixOrPrefixWidth = (slotElm, defaultVal) => {
+        if (slotElm.value) {
+          const slotElmWidth = slotElm.value.offsetWidth;
+          return slotElmWidth > 0 ? slotElmWidth + 16 : defaultVal;
+        }
+        return defaultVal;
+      };
+      const setInputPadding = () => {
+        inputStyleInner.value = {
+          paddingRight: `${getSuffixOrPrefixWidth(innerSuffixRef, 0)}px`,
+          paddingLeft: `${getSuffixOrPrefixWidth(innerPrefixRef, 11)}px`,
+          ...props.inputStyle
+        };
+      };
+      vue.watch(showClear, () => {
+        vue.nextTick(() => {
+          setInputPadding();
+        });
+      });
       vue.onMounted(async () => {
+        setInputPadding();
         setNativeInputValue();
         updateIconOffset();
         await vue.nextTick();
@@ -5913,7 +5957,7 @@
               tabindex: _ctx.tabindex,
               "aria-label": _ctx.label,
               placeholder: _ctx.placeholder,
-              style: _ctx.inputStyle,
+              style: inputStyleInner.value,
               onCompositionstart: handleCompositionStart,
               onCompositionupdate: handleCompositionUpdate,
               onCompositionend: handleCompositionEnd,
@@ -5929,6 +5973,8 @@
               class: vue.normalizeClass(vue.unref(nsInput).e("prefix"))
             }, [
               vue.createElementVNode("span", {
+                ref_key: "innerPrefixRef",
+                ref: innerPrefixRef,
                 class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner"))
               }, [
                 vue.renderSlot(_ctx.$slots, "prefix"),
@@ -5949,6 +5995,8 @@
               class: vue.normalizeClass(vue.unref(nsInput).e("suffix"))
             }, [
               vue.createElementVNode("span", {
+                ref_key: "innerSuffixRef",
+                ref: innerSuffixRef,
                 class: vue.normalizeClass(vue.unref(nsInput).e("suffix-inner"))
               }, [
                 !vue.unref(showClear) || !vue.unref(showPwdVisible) || !vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -6436,6 +6484,7 @@
         if (!props.native)
           vue.nextTick(() => update());
       });
+      vue.onUpdated(() => update());
       return {
         ns,
         scrollbar$,
@@ -8219,7 +8268,7 @@
       const updatePopper = () => {
         var _a;
         (_a = vue.unref(popperInstanceRef)) == null ? void 0 : _a.update();
-        contentZIndex.value = props.zIndex || nextZIndex();
+        contentZIndex.value = props.zIndex || contentZIndex.value || nextZIndex();
       };
       const togglePopperAlive = () => {
         var _a, _b;
@@ -9605,6 +9654,54 @@
   });
   const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem);
 
+  const buttonTypes = [
+    "default",
+    "primary",
+    "success",
+    "warning",
+    "info",
+    "danger",
+    "text",
+    ""
+  ];
+  const buttonNativeTypes = ["button", "submit", "reset"];
+  const buttonProps = buildProps({
+    size: useSizeProp,
+    disabled: Boolean,
+    type: {
+      type: String,
+      values: buttonTypes,
+      default: ""
+    },
+    icon: {
+      type: iconPropType,
+      default: ""
+    },
+    nativeType: {
+      type: String,
+      values: buttonNativeTypes,
+      default: "button"
+    },
+    loading: Boolean,
+    loadingIcon: {
+      type: iconPropType,
+      default: () => loading
+    },
+    plain: Boolean,
+    autofocus: Boolean,
+    round: Boolean,
+    circle: Boolean,
+    color: String,
+    dark: Boolean,
+    autoInsertSpace: {
+      type: Boolean,
+      default: void 0
+    }
+  });
+  const buttonEmits = {
+    click: (evt) => evt instanceof MouseEvent
+  };
+
   function bound01$1(n, max) {
     if (isOnePointZero$1(n)) {
       n = "100%";
@@ -10478,52 +10575,58 @@
     return TinyColor2;
   }();
 
-  const buttonTypes = [
-    "default",
-    "primary",
-    "success",
-    "warning",
-    "info",
-    "danger",
-    "text",
-    ""
-  ];
-  const buttonNativeTypes = ["button", "submit", "reset"];
-  const buttonProps = buildProps({
-    size: useSizeProp,
-    disabled: Boolean,
-    type: {
-      type: String,
-      values: buttonTypes,
-      default: ""
-    },
-    icon: {
-      type: iconPropType,
-      default: ""
-    },
-    nativeType: {
-      type: String,
-      values: buttonNativeTypes,
-      default: "button"
-    },
-    loading: Boolean,
-    loadingIcon: {
-      type: iconPropType,
-      default: () => loading
-    },
-    plain: Boolean,
-    autofocus: Boolean,
-    round: Boolean,
-    circle: Boolean,
-    color: String,
-    autoInsertSpace: {
-      type: Boolean,
-      default: void 0
-    }
-  });
-  const buttonEmits = {
-    click: (evt) => evt instanceof MouseEvent
-  };
+  function darken(color, amount = 20) {
+    return color.mix("#141414", amount).toString();
+  }
+  function useButtonCustomStyle(props) {
+    const _disabled = useDisabled$1();
+    return vue.computed(() => {
+      let styles = {};
+      const buttonColor = props.color;
+      if (buttonColor) {
+        const color = new TinyColor(buttonColor);
+        const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
+        if (props.plain) {
+          styles = {
+            "--el-button-bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(),
+            "--el-button-text-color": buttonColor,
+            "--el-button-border-color": props.dark ? darken(color, 50) : color.tint(50).toString(),
+            "--el-button-hover-text-color": "var(--el-color-white)",
+            "--el-button-hover-bg-color": buttonColor,
+            "--el-button-hover-border-color": buttonColor,
+            "--el-button-active-bg-color": activeBgColor,
+            "--el-button-active-text-color": "var(--el-color-white)",
+            "--el-button-active-border-color": activeBgColor
+          };
+          if (_disabled.value) {
+            styles["--el-button-disabled-bg-color"] = props.dark ? darken(color, 90) : color.tint(90).toString();
+            styles["--el-button-disabled-text-color"] = props.dark ? darken(color, 50) : color.tint(50).toString();
+            styles["--el-button-disabled-border-color"] = props.dark ? darken(color, 80) : color.tint(80).toString();
+          }
+        } else {
+          const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
+          const textColor = color.isDark() ? "var(--el-color-white)" : "var(--el-color-black)";
+          styles = {
+            "--el-button-bg-color": buttonColor,
+            "--el-button-text-color": textColor,
+            "--el-button-border-color": buttonColor,
+            "--el-button-hover-bg-color": hoverBgColor,
+            "--el-button-hover-text-color": textColor,
+            "--el-button-hover-border-color": hoverBgColor,
+            "--el-button-active-bg-color": activeBgColor,
+            "--el-button-active-border-color": activeBgColor
+          };
+          if (_disabled.value) {
+            const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString();
+            styles["--el-button-disabled-bg-color"] = disabledButtonColor;
+            styles["--el-button-disabled-text-color"] = props.dark ? "rgba(255, 255, 255, 0.5)" : "var(--el-color-white)";
+            styles["--el-button-disabled-border-color"] = disabledButtonColor;
+          }
+        }
+      }
+      return styles;
+    });
+  }
 
   const _hoisted_1$V = ["disabled", "autofocus", "type"];
   const __default__$y = {
@@ -10560,42 +10663,7 @@
         }
         return false;
       });
-      const buttonStyle = vue.computed(() => {
-        let styles = {};
-        const buttonColor = props.color;
-        if (buttonColor) {
-          const color = new TinyColor(buttonColor);
-          const shadeBgColor = color.shade(20).toString();
-          if (props.plain) {
-            styles = {
-              "--el-button-bg-color": color.tint(90).toString(),
-              "--el-button-text-color": buttonColor,
-              "--el-button-hover-text-color": "var(--el-color-white)",
-              "--el-button-hover-bg-color": buttonColor,
-              "--el-button-hover-border-color": buttonColor,
-              "--el-button-active-bg-color": shadeBgColor,
-              "--el-button-active-text-color": "var(--el-color-white)",
-              "--el-button-active-border-color": shadeBgColor
-            };
-          } else {
-            const tintBgColor = color.tint(30).toString();
-            styles = {
-              "--el-button-bg-color": buttonColor,
-              "--el-button-border-color": buttonColor,
-              "--el-button-hover-bg-color": tintBgColor,
-              "--el-button-hover-border-color": tintBgColor,
-              "--el-button-active-bg-color": shadeBgColor,
-              "--el-button-active-border-color": shadeBgColor
-            };
-          }
-          if (_disabled.value) {
-            const disabledButtonColor = color.tint(50).toString();
-            styles["--el-button-disabled-bg-color"] = disabledButtonColor;
-            styles["--el-button-disabled-border-color"] = disabledButtonColor;
-          }
-        }
-        return styles;
-      });
+      const buttonStyle = useButtonCustomStyle(props);
       const handleClick = (evt) => {
         if (props.nativeType === "reset") {
           form == null ? void 0 : form.resetFields();
@@ -25195,6 +25263,10 @@
     initialIndex: {
       type: Number,
       default: 0
+    },
+    infinite: {
+      type: Boolean,
+      default: true
     }
   });
   const imageEmits = {
@@ -25398,6 +25470,7 @@
               key: 0,
               "z-index": _ctx.zIndex,
               "initial-index": vue.unref(imageIndex),
+              infinite: _ctx.infinite,
               "url-list": _ctx.previewSrcList,
               "hide-on-click-modal": _ctx.hideOnClickModal,
               teleported: vue.unref(teleported),
@@ -25410,7 +25483,7 @@
                 ])) : vue.createCommentVNode("v-if", true)
               ]),
               _: 3
-            }, 8, ["z-index", "initial-index", "url-list", "hide-on-click-modal", "teleported"])) : vue.createCommentVNode("v-if", true)
+            }, 8, ["z-index", "initial-index", "infinite", "url-list", "hide-on-click-modal", "teleported"])) : vue.createCommentVNode("v-if", true)
           ], 2112)) : vue.createCommentVNode("v-if", true)
         ], 6);
       };
@@ -27355,7 +27428,7 @@
         const inputChildNodes = reference.value.$el.childNodes;
         const input2 = Array.from(inputChildNodes).find((item) => item.tagName === "INPUT");
         const _tags = tags.value;
-        const sizeInMap = states.initialInputHeight || 40;
+        const sizeInMap = states.initialInputHeight || getComponentSize(selectSize.value || elForm.size);
         input2.style.height = states.selected.length === 0 ? `${sizeInMap}px` : `${Math.max(_tags ? _tags.clientHeight + (_tags.clientHeight > sizeInMap ? 6 : 0) : 0, sizeInMap)}px`;
         states.tagInMultiLine = Number.parseFloat(input2.style.height) >= sizeInMap;
         if (states.visible && emptyText.value !== false) {
@@ -28025,13 +28098,8 @@
         }
         addResizeListener(selectWrapper.value, handleResize);
         if (reference.value && reference.value.$el) {
-          const sizeMap = {
-            large: 36,
-            default: 32,
-            small: 28
-          };
           const input2 = reference.value.input;
-          states.initialInputHeight = input2.getBoundingClientRect().height || sizeMap[selectSize.value];
+          states.initialInputHeight = input2.getBoundingClientRect().height || getComponentSize(selectSize.value);
         }
         if (props.remote && props.multiple) {
           resetInputHeight();
@@ -29419,6 +29487,7 @@
         emit("after-enter");
       };
       const afterLeave = () => {
+        emit("update:visible", false);
         emit("after-leave");
       };
       return {
@@ -29764,7 +29833,7 @@
           vue.createElementVNode("path", {
             class: vue.normalizeClass(_ctx.ns.be("circle", "track")),
             d: _ctx.trackPath,
-            stroke: "#e5e9f2",
+            stroke: "var(--el-fill-color-light, #e5e9f2)",
             "stroke-width": _ctx.relativeStrokeWidth,
             fill: "none",
             style: vue.normalizeStyle(_ctx.trailPathStyle)
@@ -31385,7 +31454,16 @@
               columnVisibleEnd
             ] = vue.unref(columnsToRender);
             const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = vue.unref(rowsToRender);
-            emit(ITEM_RENDER_EVT, columnCacheStart, columnCacheEnd, rowCacheStart, rowCacheEnd, columnVisibleStart, columnVisibleEnd, rowVisibleStart, rowVisibleEnd);
+            emit(ITEM_RENDER_EVT, {
+              columnCacheStart,
+              columnCacheEnd,
+              rowCacheStart,
+              rowCacheEnd,
+              columnVisibleStart,
+              columnVisibleEnd,
+              rowVisibleStart,
+              rowVisibleEnd
+            });
           }
           const {
             scrollLeft,
@@ -35713,6 +35791,7 @@
         _currentRow = (vue.unref(data) || []).find((item) => getRowIdentity(item, rowKey.value) === key);
       }
       currentRow.value = _currentRow;
+      instance.emit("current-change", currentRow.value, null);
     };
     const updateCurrentRow = (_currentRow) => {
       const oldCurrentRow = currentRow.value;
@@ -39270,6 +39349,12 @@
     return ele;
   }
 
+  function getAllAliases(props, aliases) {
+    return props.reduce((prev, cur) => {
+      prev[cur] = cur;
+      return prev;
+    }, aliases);
+  }
   function useWatcher(owner, props_) {
     const instance = vue.getCurrentInstance();
     const registerComplexWatchers = () => {
@@ -39278,10 +39363,7 @@
         realWidth: "width",
         realMinWidth: "minWidth"
       };
-      const allAliases = props.reduce((prev, cur) => {
-        prev[cur] = cur;
-        return prev;
-      }, aliases);
+      const allAliases = getAllAliases(props, aliases);
       Object.keys(allAliases).forEach((key) => {
         const columnKey = aliases[key];
         if (hasOwn(props_, columnKey)) {
@@ -39318,10 +39400,7 @@
         align: "realAlign",
         headerAlign: "realHeaderAlign"
       };
-      const allAliases = props.reduce((prev, cur) => {
-        prev[cur] = cur;
-        return prev;
-      }, aliases);
+      const allAliases = getAllAliases(props, aliases);
       Object.keys(allAliases).forEach((key) => {
         const columnKey = aliases[key];
         if (hasOwn(props_, columnKey)) {
@@ -47149,6 +47228,7 @@
   exports.collapseEmits = collapseEmits;
   exports.collapseItemProps = collapseItemProps;
   exports.collapseProps = collapseProps;
+  exports.componentSizeMap = componentSizeMap;
   exports.componentSizes = componentSizes;
   exports.configProviderContextKey = configProviderContextKey;
   exports.configProviderProps = configProviderProps;
@@ -47177,6 +47257,7 @@
   exports.formItemValidateStates = formItemValidateStates;
   exports.formProps = formProps;
   exports.genFileId = genFileId;
+  exports.getComponentSize = getComponentSize;
   exports.getPositionDataWithUnit = getPositionDataWithUnit;
   exports.iconProps = iconProps;
   exports.imageEmits = imageEmits;