@element-plus/nightly 0.0.20230712 → 0.0.20230713

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20230712 */
+/*! Element Plus v0.0.20230713 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11088,6 +11088,45 @@
     });
   };
 
+  function useFocusController(target, { afterFocus, afterBlur } = {}) {
+    const instance = vue.getCurrentInstance();
+    const { emit } = instance;
+    const wrapperRef = vue.shallowRef();
+    const isFocused = vue.ref(false);
+    const handleFocus = (event) => {
+      if (isFocused.value)
+        return;
+      isFocused.value = true;
+      emit("focus", event);
+      afterFocus == null ? void 0 : afterFocus();
+    };
+    const handleBlur = (event) => {
+      var _a;
+      if (event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
+        return;
+      isFocused.value = false;
+      emit("blur", event);
+      afterBlur == null ? void 0 : afterBlur();
+    };
+    const handleClick = () => {
+      var _a;
+      (_a = target.value) == null ? void 0 : _a.focus();
+    };
+    vue.watch(wrapperRef, (el) => {
+      if (el) {
+        el.setAttribute("role", "button");
+        el.setAttribute("tabindex", "-1");
+      }
+    });
+    useEventListener(wrapperRef, "click", handleClick);
+    return {
+      wrapperRef,
+      isFocused,
+      handleFocus,
+      handleBlur
+    };
+  }
+
   const configProviderContextKey = Symbol();
 
   const globalConfig = vue.ref();
@@ -11208,7 +11247,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20230712";
+  const version$1 = "0.0.20230713";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -13534,7 +13573,7 @@
       ]);
       const wrapperKls = vue.computed(() => [
         nsInput.e("wrapper"),
-        nsInput.is("focus", focused.value)
+        nsInput.is("focus", isFocused.value)
       ]);
       const attrs = useAttrs({
         excludeKeys: vue.computed(() => {
@@ -13551,13 +13590,20 @@
       const nsTextarea = useNamespace("textarea");
       const input = vue.shallowRef();
       const textarea = vue.shallowRef();
-      const focused = vue.ref(false);
       const hovering = vue.ref(false);
       const isComposing = vue.ref(false);
       const passwordVisible = vue.ref(false);
       const countStyle = vue.ref();
       const textareaCalcStyle = vue.shallowRef(props.inputStyle);
       const _ref = vue.computed(() => input.value || textarea.value);
+      const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
+        afterBlur() {
+          var _a;
+          if (props.validateEvent) {
+            (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
+          }
+        }
+      });
       const needStatusIcon = vue.computed(() => {
         var _a;
         return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
@@ -13575,8 +13621,8 @@
         { resize: props.resize }
       ]);
       const nativeInputValue = vue.computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
-      const showClear = vue.computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (focused.value || hovering.value));
-      const showPwdVisible = vue.computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || focused.value));
+      const showClear = vue.computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
+      const showPwdVisible = vue.computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || isFocused.value));
       const isWordLimitVisible = vue.computed(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
       const textLength = vue.computed(() => nativeInputValue.value.length);
       const inputExceed = vue.computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
@@ -13687,18 +13733,6 @@
         var _a;
         return (_a = _ref.value) == null ? void 0 : _a.blur();
       };
-      const handleFocus = (event) => {
-        focused.value = true;
-        emit("focus", event);
-      };
-      const handleBlur = (event) => {
-        var _a;
-        focused.value = false;
-        emit("blur", event);
-        if (props.validateEvent) {
-          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
-        }
-      };
       const handleMouseLeave = (evt) => {
         hovering.value = false;
         emit("mouseleave", evt);
@@ -13768,6 +13802,8 @@
               vue.renderSlot(_ctx.$slots, "prepend")
             ], 2)) : vue.createCommentVNode("v-if", true),
             vue.createElementVNode("div", {
+              ref_key: "wrapperRef",
+              ref: wrapperRef,
               class: vue.normalizeClass(vue.unref(wrapperKls))
             }, [
               vue.createCommentVNode(" prefix slot "),
@@ -13776,8 +13812,7 @@
                 class: vue.normalizeClass(vue.unref(nsInput).e("prefix"))
               }, [
                 vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner")),
-                  onClick: focus
+                  class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner"))
                 }, [
                   vue.renderSlot(_ctx.$slots, "prefix"),
                   _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
@@ -13812,8 +13847,8 @@
                 onCompositionupdate: handleCompositionUpdate,
                 onCompositionend: handleCompositionEnd,
                 onInput: handleInput,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
+                onFocus: _cache[0] || (_cache[0] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
+                onBlur: _cache[1] || (_cache[1] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
                 onChange: handleChange,
                 onKeydown: handleKeydown
               }), null, 16, _hoisted_2$G),
@@ -13823,8 +13858,7 @@
                 class: vue.normalizeClass(vue.unref(nsInput).e("suffix"))
               }, [
                 vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(nsInput).e("suffix-inner")),
-                  onClick: focus
+                  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 }, [
                     vue.renderSlot(_ctx.$slots, "suffix"),
@@ -13910,8 +13944,8 @@
               onCompositionupdate: handleCompositionUpdate,
               onCompositionend: handleCompositionEnd,
               onInput: handleInput,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
+              onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
+              onBlur: _cache[3] || (_cache[3] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
               onChange: handleChange,
               onKeydown: handleKeydown
             }), null, 16, _hoisted_3$l),
@@ -56444,6 +56478,7 @@
   exports.useFloating = useFloating;
   exports.useFloatingProps = useFloatingProps;
   exports.useFocus = useFocus;
+  exports.useFocusController = useFocusController;
   exports.useFormDisabled = useFormDisabled;
   exports.useFormItem = useFormItem;
   exports.useFormItemInputId = useFormItemInputId;