@element-plus/nightly 0.0.20230802 → 0.0.20230804

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20230802 */
+/*! Element Plus v0.0.20230804 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11246,7 +11246,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20230802";
+  const version$1 = "0.0.20230804";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -15874,10 +15874,11 @@
           open.value = false;
         }
       });
-      const isFocusInsideContent = () => {
+      const isFocusInsideContent = (event) => {
         var _a, _b;
         const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef;
-        return popperContent && popperContent.contains(document.activeElement);
+        const activeElement = (event == null ? void 0 : event.relatedTarget) || document.activeElement;
+        return popperContent && popperContent.contains(activeElement);
       };
       vue.onDeactivated(() => open.value && hide());
       expose({
@@ -33330,10 +33331,10 @@
       menuVisibleOnFocus: false,
       isOnComposition: false,
       prefixWidth: 11,
-      mouseEnter: false
+      mouseEnter: false,
+      focused: false
     });
   }
-  let ignoreFocusEvent = false;
   const useSelect$3 = (props, states, ctx) => {
     const { t } = useLocale();
     const ns = useNamespace("select");
@@ -33367,6 +33368,7 @@
     });
     const iconComponent = vue.computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
     const iconReverse = vue.computed(() => ns.is("reverse", iconComponent.value && states.visible && props.suffixTransition));
+    const showStatusIconAndState = vue.computed(() => (form == null ? void 0 : form.statusIcon) && (formItem == null ? void 0 : formItem.validateState) && ValidateComponentsMap[formItem == null ? void 0 : formItem.validateState]);
     const debounce$1 = vue.computed(() => props.remote ? 300 : 0);
     const emptyText = vue.computed(() => {
       if (props.loading) {
@@ -33460,7 +33462,6 @@
             props.remoteMethod("");
           }
         }
-        input.value && input.value.blur();
         states.query = "";
         states.previousQuery = null;
         states.selectedLabel = "";
@@ -33733,6 +33734,7 @@
         ctx.emit("remove-tag", tag.value);
       }
       event.stopPropagation();
+      focus();
     };
     const deleteSelected = (event) => {
       event.stopPropagation();
@@ -33748,6 +33750,7 @@
       states.hoverIndex = -1;
       states.visible = false;
       ctx.emit("clear");
+      focus();
     };
     const handleOptionSelect = (option) => {
       var _a;
@@ -33864,16 +33867,23 @@
       vue.nextTick(() => scrollToOption(states.selected));
     };
     const handleFocus = (event) => {
-      if (!ignoreFocusEvent) {
+      if (!states.focused) {
         if (props.automaticDropdown || props.filterable) {
           if (props.filterable && !states.visible) {
             states.menuVisibleOnFocus = true;
           }
           states.visible = true;
         }
+        states.focused = true;
         ctx.emit("focus", event);
+      }
+    };
+    const focus = () => {
+      var _a, _b;
+      if (states.visible) {
+        (_a = input.value || reference.value) == null ? void 0 : _a.focus();
       } else {
-        ignoreFocusEvent = false;
+        (_b = reference.value) == null ? void 0 : _b.focus();
       }
     };
     const blur = () => {
@@ -33883,15 +33893,13 @@
       (_c = (_b = iOSInput.value) == null ? void 0 : _b.blur) == null ? void 0 : _c.call(_b);
     };
     const handleBlur = (event) => {
-      setTimeout(() => {
-        var _a, _b;
-        if (((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent()) || ((_b = selectWrapper.value) == null ? void 0 : _b.contains(event.relatedTarget))) {
-          ignoreFocusEvent = true;
-          return;
-        }
-        states.visible && handleClose();
-        ctx.emit("blur", event);
-      });
+      var _a, _b, _c;
+      if (((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event)) || ((_c = selectWrapper.value) == null ? void 0 : _c.contains(event.relatedTarget))) {
+        return;
+      }
+      states.visible && handleClose();
+      states.focused = false;
+      ctx.emit("blur", event);
     };
     const handleClearClick = (event) => {
       deleteSelected(event);
@@ -33907,7 +33915,6 @@
       }
     };
     const toggleMenu = (e) => {
-      var _a;
       if (e && !states.mouseEnter) {
         return;
       }
@@ -33919,9 +33926,7 @@
             states.visible = !states.visible;
           }
         }
-        if (states.visible) {
-          (_a = input.value || reference.value) == null ? void 0 : _a.focus();
-        }
+        focus();
       }
     };
     const selectOption = () => {
@@ -33978,6 +33983,10 @@
       deleteTag(event, tag);
       (_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
     };
+    const selectTagsStyle = vue.computed(() => ({
+      maxWidth: `${vue.unref(states.inputWidth) - 32 - (showStatusIconAndState.value ? 22 : 0)}px`,
+      width: "100%"
+    }));
     return {
       optionList,
       optionsArray,
@@ -34008,6 +34017,7 @@
       onOptionDestroy,
       handleMenuEnter,
       handleFocus,
+      focus,
       blur,
       handleBlur,
       handleClearClick,
@@ -34023,6 +34033,7 @@
       groupQueryChange,
       showTagList,
       collapseTagList,
+      selectTagsStyle,
       reference,
       input,
       iOSInput,
@@ -34242,6 +34253,7 @@
         onOptionDestroy,
         handleMenuEnter,
         handleFocus,
+        focus,
         blur,
         handleBlur,
         handleClearClick,
@@ -34266,9 +34278,9 @@
         handleMouseEnter,
         handleMouseLeave,
         showTagList,
-        collapseTagList
+        collapseTagList,
+        selectTagsStyle
       } = useSelect$3(props, states, ctx);
-      const { focus } = useFocus(reference);
       const {
         inputWidth,
         selected,
@@ -34319,10 +34331,6 @@
       const scrollbarKls = vue.computed(() => [
         nsSelect.is("empty", !props.allowCreate && Boolean(vue.unref(query)) && vue.unref(filteredOptionsCount) === 0)
       ]);
-      const selectTagsStyle = vue.computed(() => ({
-        maxWidth: `${vue.unref(inputWidth) - 32}px`,
-        width: "100%"
-      }));
       const tagTextStyle = vue.computed(() => {
         const maxWidth = vue.unref(inputWidth) > 123 ? vue.unref(inputWidth) - 123 : vue.unref(inputWidth) - 75;
         return { maxWidth: `${maxWidth}px` };
@@ -34426,6 +34434,7 @@
         handleComposition,
         handleMenuEnter,
         handleFocus,
+        focus,
         blur,
         handleBlur,
         handleClearClick,
@@ -34436,7 +34445,6 @@
         getValueKey,
         navigateOptions,
         dropMenuVisible,
-        focus,
         reference,
         input,
         iOSInput,
@@ -34479,9 +34487,9 @@
     return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
       ref: "selectWrapper",
       class: vue.normalizeClass(_ctx.wrapperKls),
-      onMouseenter: _cache[21] || (_cache[21] = (...args) => _ctx.handleMouseEnter && _ctx.handleMouseEnter(...args)),
-      onMouseleave: _cache[22] || (_cache[22] = (...args) => _ctx.handleMouseLeave && _ctx.handleMouseLeave(...args)),
-      onClick: _cache[23] || (_cache[23] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
+      onMouseenter: _cache[22] || (_cache[22] = (...args) => _ctx.handleMouseEnter && _ctx.handleMouseEnter(...args)),
+      onMouseleave: _cache[23] || (_cache[23] = (...args) => _ctx.handleMouseLeave && _ctx.handleMouseLeave(...args)),
+      onClick: _cache[24] || (_cache[24] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
     }, [
       vue.createVNode(_component_el_tooltip, {
         ref: "tooltipRef",
@@ -34503,14 +34511,16 @@
         default: vue.withCtx(() => [
           vue.createElementVNode("div", {
             class: "select-trigger",
-            onMouseenter: _cache[19] || (_cache[19] = ($event) => _ctx.inputHovering = true),
-            onMouseleave: _cache[20] || (_cache[20] = ($event) => _ctx.inputHovering = false)
+            onMouseenter: _cache[20] || (_cache[20] = ($event) => _ctx.inputHovering = true),
+            onMouseleave: _cache[21] || (_cache[21] = ($event) => _ctx.inputHovering = false)
           }, [
             _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               ref: "tags",
+              tabindex: "-1",
               class: vue.normalizeClass(_ctx.tagsKls),
-              style: vue.normalizeStyle(_ctx.selectTagsStyle)
+              style: vue.normalizeStyle(_ctx.selectTagsStyle),
+              onClick: _cache[15] || (_cache[15] = (...args) => _ctx.focus && _ctx.focus(...args))
             }, [
               _ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createBlock(vue.Transition, {
                 key: 0,
@@ -34679,7 +34689,7 @@
               id: _ctx.id,
               ref: "reference",
               modelValue: _ctx.selectedLabel,
-              "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => _ctx.selectedLabel = $event),
+              "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => _ctx.selectedLabel = $event),
               type: "text",
               placeholder: typeof _ctx.currentPlaceholder === "function" ? _ctx.currentPlaceholder() : _ctx.currentPlaceholder,
               name: _ctx.name,
@@ -34698,11 +34708,11 @@
               onCompositionupdate: _ctx.handleComposition,
               onCompositionend: _ctx.handleComposition,
               onKeydown: [
-                _cache[16] || (_cache[16] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
-                _cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
+                _cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
+                _cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
                 vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
                 vue.withKeys(_ctx.handleKeydownEscape, ["esc"]),
-                _cache[18] || (_cache[18] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
+                _cache[19] || (_cache[19] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
               ]
             }, vue.createSlots({
               suffix: vue.withCtx(() => [