@element-plus/nightly 0.0.20221119 → 0.0.20221121

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20221119 */
+/*! Element Plus v0.0.20221121 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -9034,8 +9034,11 @@
     current: 0
   };
   const ID_INJECTION_KEY = Symbol("elIdInjection");
+  const useIdInjection = () => {
+    return vue.getCurrentInstance() ? vue.inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection;
+  };
   const useId = (deterministicId) => {
-    const idInjection = vue.inject(ID_INJECTION_KEY, defaultIdInjection);
+    const idInjection = useIdInjection();
     const namespace = useGlobalConfig("namespace", defaultNamespace);
     const idRef = vue.computed(() => vue.unref(deterministicId) || `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`);
     return idRef;
@@ -9876,12 +9879,21 @@
   };
 
   let cachedContainer;
-  const namespace = useGlobalConfig("namespace", defaultNamespace);
-  const POPPER_CONTAINER_ID = `${namespace.value}-popper-container-${generateId()}`;
-  const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`;
-  const createContainer = () => {
+  const usePopperContainerId = () => {
+    const namespace = useGlobalConfig("namespace", defaultNamespace);
+    const idInjection = useIdInjection();
+    const id = vue.computed(() => {
+      return `${namespace.value}-popper-container-${idInjection.prefix}`;
+    });
+    const selector = vue.computed(() => `#${id.value}`);
+    return {
+      id,
+      selector
+    };
+  };
+  const createContainer = (id) => {
     const container = document.createElement("div");
-    container.id = POPPER_CONTAINER_ID;
+    container.id = id;
     document.body.appendChild(container);
     return container;
   };
@@ -9889,8 +9901,9 @@
     vue.onBeforeMount(() => {
       if (!isClient)
         return;
-      if (!cachedContainer || !document.body.querySelector(POPPER_CONTAINER_SELECTOR)) {
-        cachedContainer = createContainer();
+      const { id, selector } = usePopperContainerId();
+      if (!cachedContainer && !document.body.querySelector(selector.value)) {
+        cachedContainer = createContainer(id.value);
       }
     });
   };
@@ -11103,7 +11116,7 @@
     };
   };
 
-  const version$1 = "0.0.20221119";
+  const version$1 = "0.0.20221121";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -11633,6 +11646,25 @@
         }
         return comboBoxAttrs;
       });
+      const containerKls = vue.computed(() => [
+        props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
+        nsInput.m(inputSize.value),
+        nsInput.is("disabled", inputDisabled.value),
+        nsInput.is("exceed", inputExceed.value),
+        {
+          [nsInput.b("group")]: slots.prepend || slots.append,
+          [nsInput.bm("group", "append")]: slots.append,
+          [nsInput.bm("group", "prepend")]: slots.prepend,
+          [nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
+          [nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
+          [nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value
+        },
+        rawAttrs.class
+      ]);
+      const wrapperKls = vue.computed(() => [
+        nsInput.e("wrapper"),
+        nsInput.is("focus", focused.value)
+      ]);
       const attrs = useAttrs({
         excludeKeys: vue.computed(() => {
           return Object.keys(containerAttrs.value);
@@ -11828,21 +11860,7 @@
       });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps(vue.unref(containerAttrs), {
-          class: [
-            _ctx.type === "textarea" ? vue.unref(nsTextarea).b() : vue.unref(nsInput).b(),
-            vue.unref(nsInput).m(vue.unref(inputSize)),
-            vue.unref(nsInput).is("disabled", vue.unref(inputDisabled)),
-            vue.unref(nsInput).is("exceed", vue.unref(inputExceed)),
-            {
-              [vue.unref(nsInput).b("group")]: _ctx.$slots.prepend || _ctx.$slots.append,
-              [vue.unref(nsInput).bm("group", "append")]: _ctx.$slots.append,
-              [vue.unref(nsInput).bm("group", "prepend")]: _ctx.$slots.prepend,
-              [vue.unref(nsInput).m("prefix")]: _ctx.$slots.prefix || _ctx.prefixIcon,
-              [vue.unref(nsInput).m("suffix")]: _ctx.$slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
-              [vue.unref(nsInput).bm("suffix", "password-clear")]: vue.unref(showClear) && vue.unref(showPwdVisible)
-            },
-            _ctx.$attrs.class
-          ],
+          class: vue.unref(containerKls),
           style: vue.unref(containerStyle),
           role: _ctx.containerRole,
           onMouseenter: handleMouseEnter,
@@ -11858,7 +11876,7 @@
               vue.renderSlot(_ctx.$slots, "prepend")
             ], 2)) : vue.createCommentVNode("v-if", true),
             vue.createElementVNode("div", {
-              class: vue.normalizeClass([vue.unref(nsInput).e("wrapper"), vue.unref(nsInput).is("focus", focused.value)])
+              class: vue.normalizeClass(vue.unref(wrapperKls))
             }, [
               vue.createCommentVNode(" prefix slot "),
               _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -11866,7 +11884,8 @@
                 class: vue.normalizeClass(vue.unref(nsInput).e("prefix"))
               }, [
                 vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner"))
+                  class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner")),
+                  onClick: focus
                 }, [
                   vue.renderSlot(_ctx.$slots, "prefix"),
                   _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
@@ -11912,7 +11931,8 @@
                 class: vue.normalizeClass(vue.unref(nsInput).e("suffix"))
               }, [
                 vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(nsInput).e("suffix-inner"))
+                  class: vue.normalizeClass(vue.unref(nsInput).e("suffix-inner")),
+                  onClick: focus
                 }, [
                   !vue.unref(showClear) || !vue.unref(showPwdVisible) || !vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     vue.renderSlot(_ctx.$slots, "suffix"),
@@ -13492,8 +13512,7 @@
     ...useDelayedToggleProps,
     ...popperContentProps,
     appendTo: {
-      type: definePropType([String, Object]),
-      default: POPPER_CONTAINER_SELECTOR
+      type: definePropType([String, Object])
     },
     content: {
       type: String,
@@ -13647,6 +13666,7 @@
     props: useTooltipContentProps,
     setup(__props, { expose }) {
       const props = __props;
+      const { selector } = usePopperContainerId();
       const contentRef = vue.ref(null);
       const destroyed = vue.ref(false);
       const {
@@ -13673,6 +13693,9 @@
       const shouldShow = vue.computed(() => {
         return props.disabled ? false : vue.unref(open);
       });
+      const appendTo = vue.computed(() => {
+        return props.appendTo || selector.value;
+      });
       const contentStyle = vue.computed(() => {
         var _a;
         return (_a = props.style) != null ? _a : {};
@@ -13740,7 +13763,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.Teleport, {
           disabled: !_ctx.teleported,
-          to: _ctx.appendTo
+          to: vue.unref(appendTo)
         }, [
           vue.createVNode(vue.Transition, {
             name: _ctx.transition,
@@ -13780,7 +13803,6 @@
                 onClose: vue.unref(onClose)
               }), {
                 default: vue.withCtx(() => [
-                  vue.createCommentVNode(" Workaround bug #6378 "),
                   !destroyed.value ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true)
                 ]),
                 _: 3
@@ -21880,36 +21902,36 @@
         }
         return styles;
       });
-      const classes = vue.computed(() => {
-        const classes2 = [];
+      const colKls = vue.computed(() => {
+        const classes = [];
         const pos = ["span", "offset", "pull", "push"];
         pos.forEach((prop) => {
           const size = props[prop];
           if (isNumber(size)) {
             if (prop === "span")
-              classes2.push(ns.b(`${props[prop]}`));
+              classes.push(ns.b(`${props[prop]}`));
             else if (size > 0)
-              classes2.push(ns.b(`${prop}-${props[prop]}`));
+              classes.push(ns.b(`${prop}-${props[prop]}`));
           }
         });
         const sizes = ["xs", "sm", "md", "lg", "xl"];
         sizes.forEach((size) => {
           if (isNumber(props[size])) {
-            classes2.push(ns.b(`${size}-${props[size]}`));
+            classes.push(ns.b(`${size}-${props[size]}`));
           } else if (isObject$1(props[size])) {
             Object.entries(props[size]).forEach(([prop, sizeProp]) => {
-              classes2.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
+              classes.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
             });
           }
         });
         if (gutter.value) {
-          classes2.push(ns.is("guttered"));
+          classes.push(ns.is("guttered"));
         }
-        return classes2;
+        return [ns.b(), classes];
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
-          class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(classes)]),
+          class: vue.normalizeClass(vue.unref(colKls)),
           style: vue.normalizeStyle(vue.unref(style))
         }, {
           default: vue.withCtx(() => [
@@ -31193,12 +31215,16 @@
         }
         return newVal;
       };
-      const setCurrentValue = (value) => {
+      const setCurrentValue = (value, emitChange = true) => {
         var _a;
         const oldVal = data.currentValue;
         const newVal = verifyValue(value);
         if (oldVal === newVal)
           return;
+        if (!emitChange) {
+          emit(UPDATE_MODEL_EVENT, newVal);
+          return;
+        }
         data.userInput = null;
         emit(UPDATE_MODEL_EVENT, newVal);
         emit(CHANGE_EVENT, newVal, oldVal);
@@ -31209,7 +31235,9 @@
       };
       const handleInput = (value) => {
         data.userInput = value;
-        emit(INPUT_EVENT, value === "" ? null : Number(value));
+        const newVal = value === "" ? null : Number(value);
+        emit(INPUT_EVENT, newVal);
+        setCurrentValue(newVal, false);
       };
       const handleInputChange = (value) => {
         const newVal = value !== "" ? Number(value) : "";
@@ -31237,8 +31265,12 @@
         }
       };
       vue.watch(() => props.modelValue, (value) => {
-        data.currentValue = verifyValue(value, true);
-        data.userInput = null;
+        const userInput = verifyValue(data.userInput);
+        const newValue = verifyValue(value, true);
+        if (!userInput || userInput !== newValue) {
+          data.currentValue = newValue;
+          data.userInput = null;
+        }
       }, { immediate: true });
       vue.onMounted(() => {
         var _a;
@@ -31382,18 +31414,19 @@
     setup(__props, { emit }) {
       const props = __props;
       const ns = useNamespace("link");
+      const linkKls = vue.computed(() => [
+        ns.b(),
+        ns.m(props.type),
+        ns.is("disabled", props.disabled),
+        ns.is("underline", props.underline && !props.disabled)
+      ]);
       function handleClick(event) {
         if (!props.disabled)
           emit("click", event);
       }
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("a", {
-          class: vue.normalizeClass([
-            vue.unref(ns).b(),
-            vue.unref(ns).m(_ctx.type),
-            vue.unref(ns).is("disabled", _ctx.disabled),
-            vue.unref(ns).is("underline", _ctx.underline && !_ctx.disabled)
-          ]),
+          class: vue.normalizeClass(vue.unref(linkKls)),
           href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href,
           onClick: handleClick
         }, [
@@ -31994,18 +32027,29 @@
       const activeIndex = vue.ref(props.defaultActive);
       const items = vue.ref({});
       const subMenus = vue.ref({});
+      let activeItemFirstOpend = true;
       const isMenuPopup = vue.computed(() => {
         return props.mode === "horizontal" || props.mode === "vertical" && props.collapse;
       });
       const initMenu = () => {
         const activeItem = activeIndex.value && items.value[activeIndex.value];
-        if (!activeItem || props.mode === "horizontal" || props.collapse)
+        if (!activeItem || props.mode === "horizontal" || props.collapse || props.uniqueOpened && !activeItemFirstOpend)
           return;
         const indexPath = activeItem.indexPath;
-        indexPath.forEach((index) => {
-          const subMenu = subMenus.value[index];
-          subMenu && openMenu(index, subMenu.indexPath);
-        });
+        const openAllActiveItem = () => {
+          activeItemFirstOpend = false;
+          indexPath.forEach((index) => {
+            const subMenu = subMenus.value[index];
+            subMenu && openMenu(index, subMenu.indexPath);
+          });
+        };
+        if (activeIndex.value === props.defaultActive && activeItemFirstOpend) {
+          openAllActiveItem();
+        } else {
+          if (indexPath.every((index) => openedMenus.value.includes(index))) {
+            openAllActiveItem();
+          }
+        }
       };
       const openMenu = (index, indexPath) => {
         if (openedMenus.value.includes(index))
@@ -35920,13 +35964,14 @@
         styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`;
         return styles;
       });
+      const rowKls = vue.computed(() => [
+        ns.b(),
+        ns.is(`justify-${props.justify}`, props.justify !== "start"),
+        ns.is(`align-${props.align}`, props.align !== "top")
+      ]);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
-          class: vue.normalizeClass([
-            vue.unref(ns).b(),
-            vue.unref(ns).is(`justify-${props.justify}`, _ctx.justify !== "start"),
-            vue.unref(ns).is(`align-${props.align}`, _ctx.align !== "top")
-          ]),
+          class: vue.normalizeClass(vue.unref(rowKls)),
           style: vue.normalizeStyle(vue.unref(style))
         }, {
           default: vue.withCtx(() => [
@@ -55131,8 +55176,6 @@
   exports.LAST_KEYS = LAST_KEYS;
   exports.LEFT_CHECK_CHANGE_EVENT = LEFT_CHECK_CHANGE_EVENT;
   exports.Mousewheel = Mousewheel;
-  exports.POPPER_CONTAINER_ID = POPPER_CONTAINER_ID;
-  exports.POPPER_CONTAINER_SELECTOR = POPPER_CONTAINER_SELECTOR;
   exports.POPPER_CONTENT_INJECTION_KEY = POPPER_CONTENT_INJECTION_KEY;
   exports.POPPER_INJECTION_KEY = POPPER_INJECTION_KEY;
   exports.RIGHT_CHECK_CHANGE_EVENT = RIGHT_CHECK_CHANGE_EVENT;
@@ -55360,6 +55403,7 @@
   exports.useForwardRefDirective = useForwardRefDirective;
   exports.useGlobalConfig = useGlobalConfig;
   exports.useId = useId;
+  exports.useIdInjection = useIdInjection;
   exports.useLocale = useLocale;
   exports.useLockscreen = useLockscreen;
   exports.useModal = useModal;
@@ -55370,6 +55414,7 @@
   exports.useOrderedChildren = useOrderedChildren;
   exports.usePopperArrowProps = usePopperArrowProps;
   exports.usePopperContainer = usePopperContainer;
+  exports.usePopperContainerId = usePopperContainerId;
   exports.usePopperContentEmits = usePopperContentEmits;
   exports.usePopperContentProps = usePopperContentProps;
   exports.usePopperCoreConfigProps = usePopperCoreConfigProps;