@element-plus/nightly 0.0.20241026 → 0.0.20241027

package/es/components/time-picker/src/common/picker-range-trigger.vue.d.ts

@@ -0,0 +1,78 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    readonly id: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly name: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly modelValue: {
+        readonly type: import("vue").PropType<import("../../../../utils").EpPropMergeType<(new (...args: any[]) => import("./props").UserInput & {}) | (() => import("./props").UserInput) | ((new (...args: any[]) => import("./props").UserInput & {}) | (() => import("./props").UserInput))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly startPlaceholder: StringConstructor;
+    readonly endPlaceholder: StringConstructor;
+}, {
+    focus: () => void;
+    blur: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+    mouseenter: (...args: any[]) => void;
+    mouseleave: (...args: any[]) => void;
+    touchstart: (...args: any[]) => void;
+    startInput: (...args: any[]) => void;
+    endInput: (...args: any[]) => void;
+    startChange: (...args: any[]) => void;
+    endChange: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly id: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly name: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly modelValue: {
+        readonly type: import("vue").PropType<import("../../../../utils").EpPropMergeType<(new (...args: any[]) => import("./props").UserInput & {}) | (() => import("./props").UserInput) | ((new (...args: any[]) => import("./props").UserInput & {}) | (() => import("./props").UserInput))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly startPlaceholder: StringConstructor;
+    readonly endPlaceholder: StringConstructor;
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    onMouseenter?: ((...args: any[]) => any) | undefined;
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+    onTouchstart?: ((...args: any[]) => any) | undefined;
+    onStartInput?: ((...args: any[]) => any) | undefined;
+    onEndInput?: ((...args: any[]) => any) | undefined;
+    onStartChange?: ((...args: any[]) => any) | undefined;
+    onEndChange?: ((...args: any[]) => any) | undefined;
+}, {}>, {
+    prefix?(_: {}): any;
+    "range-separator"?(_: {}): any;
+    suffix?(_: {}): any;
+}>;
+export default _default;
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/time-picker/src/common/picker.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, useAttrs, inject, ref, computed, watch, nextTick, unref, onBeforeUnmount, provide, openBlock, createBlock, mergeProps, withCtx, normalizeClass, normalizeStyle, withModifiers, resolveDynamicComponent, createCommentVNode, createElementBlock, createElementVNode, renderSlot, toDisplayString } from 'vue';
+import { defineComponent, useAttrs, inject, ref, computed, watch, nextTick, unref, onBeforeUnmount, provide, openBlock, createBlock, mergeProps, withCtx, normalizeClass, normalizeStyle, withModifiers, resolveDynamicComponent, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from 'vue';
 import { isEqual } from 'lodash-unified';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, unrefElement } from '@vueuse/core';
 import '../../../../hooks/index.mjs';
 import '../../../form/index.mjs';
 import { ElInput } from '../../../input/index.mjs';
@@ -11,15 +11,17 @@ import '../../../../constants/index.mjs';
 import { Clock, Calendar } from '@element-plus/icons-vue';
 import { valueEquals, formatter, parseDate } from '../utils.mjs';
 import { timePickerDefaultProps } from './props.mjs';
+import PickerRangeTrigger from './picker-range-trigger.mjs';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
 import { useLocale } from '../../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
 import { useFormItem } from '../../../form/src/hooks/use-form-item.mjs';
 import { useEmptyValues } from '../../../../hooks/use-empty-values/index.mjs';
+import { useFocusController } from '../../../../hooks/use-focus-controller/index.mjs';
 import { debugWarn } from '../../../../utils/error.mjs';
-import { isArray } from '@vue/shared';
-import { EVENT_CODE } from '../../../../constants/aria.mjs';
+import { isArray, NOOP } from '@vue/shared';
 import { useFormSize } from '../../../form/src/hooks/use-form-common-props.mjs';
+import { EVENT_CODE } from '../../../../constants/aria.mjs';
 
 const __default__ = defineComponent({
   name: "Picker"
@@ -54,7 +56,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const pickerActualVisible = ref(false);
     const valueOnOpen = ref(null);
     let hasJustTabExitedInput = false;
-    let ignoreFocusEvent = false;
+    const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
+      beforeFocus() {
+        return !props.editable || props.readonly || pickerDisabled.value;
+      },
+      afterFocus() {
+        pickerVisible.value = true;
+      },
+      beforeBlur(event) {
+        var _a;
+        return !hasJustTabExitedInput && ((_a = refPopper.value) == null ? void 0 : _a.isFocusInsideContent(event));
+      },
+      afterBlur() {
+        handleChange();
+        pickerVisible.value = false;
+        hasJustTabExitedInput = false;
+        props.validateEvent && (formItem == null ? void 0 : formItem.validate("blur").catch((err) => debugWarn(err)));
+      }
+    });
     const rangeInputKls = computed(() => [
       nsDate.b("editor"),
       nsDate.bm("editor", props.type),
@@ -106,8 +125,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const refInput = computed(() => {
       if (inputRef.value) {
-        const _r = isRangeInput.value ? inputRef.value : inputRef.value.$el;
-        return Array.from(_r.querySelectorAll("input"));
+        return Array.from(inputRef.value.$el.querySelectorAll("input"));
       }
       return [];
     });
@@ -123,16 +141,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         _inputs[1].focus();
       }
     };
-    const focusOnInputBox = () => {
-      focus(true, true);
-      nextTick(() => {
-        ignoreFocusEvent = false;
-      });
-    };
     const onPick = (date = "", visible = false) => {
-      if (!visible) {
-        ignoreFocusEvent = true;
-      }
       pickerVisible.value = visible;
       let result;
       if (isArray(date)) {
@@ -149,15 +158,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onShow = () => {
       emit("visible-change", true);
     };
-    const onKeydownPopperContent = (event) => {
-      if ((event == null ? void 0 : event.key) === EVENT_CODE.esc) {
-        focus(true, true);
-      }
-    };
     const onHide = () => {
       pickerActualVisible.value = false;
       pickerVisible.value = false;
-      ignoreFocusEvent = false;
       emit("visible-change", false);
     };
     const handleOpen = () => {
@@ -166,45 +169,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleClose = () => {
       pickerVisible.value = false;
     };
-    const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
-      ignoreFocusEvent = isIgnoreFocusEvent;
-      const [leftInput, rightInput] = unref(refInput);
-      let input = leftInput;
-      if (!focusStartInput && isRangeInput.value) {
-        input = rightInput;
-      }
-      if (input) {
-        input.focus();
-      }
-    };
-    const handleFocusInput = (e) => {
-      if (props.readonly || pickerDisabled.value || pickerVisible.value || ignoreFocusEvent) {
-        return;
-      }
-      pickerVisible.value = true;
-      emit("focus", e);
-    };
-    let currentHandleBlurDeferCallback = void 0;
-    const handleBlurInput = (e) => {
-      const handleBlurDefer = async () => {
-        setTimeout(() => {
-          var _a;
-          if (currentHandleBlurDeferCallback === handleBlurDefer) {
-            if (!(((_a = refPopper.value) == null ? void 0 : _a.isFocusInsideContent()) && !hasJustTabExitedInput) && refInput.value.filter((input) => {
-              return input.contains(document.activeElement);
-            }).length === 0) {
-              handleChange();
-              pickerVisible.value = false;
-              emit("blur", e);
-              props.validateEvent && (formItem == null ? void 0 : formItem.validate("blur").catch((err) => debugWarn(err)));
-            }
-            hasJustTabExitedInput = false;
-          }
-        }, 0);
-      };
-      currentHandleBlurDeferCallback = handleBlurDefer;
-      handleBlurDefer();
-    };
     const pickerDisabled = computed(() => {
       return props.disabled || (form == null ? void 0 : form.disabled);
     });
@@ -268,7 +232,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       if (showClose.value) {
         event.stopPropagation();
-        focusOnInputBox();
         if (pickerOptions.value.handleClear) {
           pickerOptions.value.handleClear();
         } else {
@@ -288,7 +251,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       if (props.readonly || pickerDisabled.value)
         return;
-      if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
+      if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || isFocused.value) {
         pickerVisible.value = true;
       }
     };
@@ -306,7 +269,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       if (props.readonly || pickerDisabled.value)
         return;
-      if (((_a = event.touches[0].target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
+      if (((_a = event.touches[0].target) == null ? void 0 : _a.tagName) !== "INPUT" || isFocused.value) {
         pickerVisible.value = true;
       }
     };
@@ -318,17 +281,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
-    const actualInputRef = computed(() => {
-      var _a;
-      if (unref(isRangeInput)) {
-        return unref(inputRef);
-      }
-      return (_a = unref(inputRef)) == null ? void 0 : _a.$el;
-    });
-    const stophandle = onClickOutside(actualInputRef, (e) => {
+    const stophandle = onClickOutside(inputRef, (e) => {
       const unrefedPopperEl = unref(popperEl);
-      const inputEl = unref(actualInputRef);
-      if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl))
+      const inputEl = unrefElement(inputRef);
+      if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || inputEl && e.composedPath().includes(inputEl))
         return;
       pickerVisible.value = false;
     });
@@ -479,13 +435,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onPanelChange = (value, mode, view) => {
       emit("panel-change", value, mode, view);
     };
+    const focus = () => {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    };
+    const blur = () => {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    };
     provide("EP_PICKER_BASE", {
       props
     });
     expose({
       focus,
-      handleFocusInput,
-      handleBlurInput,
+      blur,
       handleOpen,
       handleClose,
       onPick
@@ -533,8 +496,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             tabindex: _ctx.tabindex,
             "validate-event": false,
             onInput: onUserInput,
-            onFocus: handleFocusInput,
-            onBlur: handleBlurInput,
+            onFocus: unref(handleFocus),
+            onBlur: unref(handleBlur),
             onKeydown: handleKeydownInput,
             onChange: handleChange,
             onMousedown: onMouseDownInput,
@@ -561,84 +524,79 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               showClose.value && _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
                 key: 0,
                 class: normalizeClass(`${unref(nsInput).e("icon")} clear-icon`),
-                onClick: withModifiers(onClearIconClick, ["stop"])
+                onMousedown: withModifiers(unref(NOOP), ["prevent"]),
+                onClick: onClearIconClick
               }, {
                 default: withCtx(() => [
                   (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
                 ]),
                 _: 1
-              }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
+              }, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
             ]),
             _: 1
-          }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onKeydown", "onClick"])) : (openBlock(), createElementBlock("div", {
+          }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur", "onClick"])) : (openBlock(), createBlock(PickerRangeTrigger, {
             key: 1,
+            id: _ctx.id,
             ref_key: "inputRef",
             ref: inputRef,
+            "model-value": unref(displayValue),
+            name: _ctx.name,
+            disabled: unref(pickerDisabled),
+            readonly: !_ctx.editable || _ctx.readonly,
+            "start-placeholder": _ctx.startPlaceholder,
+            "end-placeholder": _ctx.endPlaceholder,
             class: normalizeClass(unref(rangeInputKls)),
             style: normalizeStyle(_ctx.$attrs.style),
-            onClick: handleFocusInput,
+            "aria-label": _ctx.ariaLabel,
+            tabindex: _ctx.tabindex,
+            autocomplete: "off",
+            role: "combobox",
+            onClick: onMouseDownInput,
+            onFocus: unref(handleFocus),
+            onBlur: unref(handleBlur),
+            onStartInput: handleStartInput,
+            onStartChange: handleStartChange,
+            onEndInput: handleEndInput,
+            onEndChange: handleEndChange,
+            onMousedown: onMouseDownInput,
             onMouseenter: onMouseEnter,
             onMouseleave: onMouseLeave,
             onTouchstartPassive: onTouchStartInput,
             onKeydown: handleKeydownInput
-          }, [
-            unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
-              key: 0,
-              class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")]),
-              onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
-              onTouchstartPassive: onTouchStartInput
-            }, {
-              default: withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
-              ]),
-              _: 1
-            }, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
-            createElementVNode("input", {
-              id: _ctx.id && _ctx.id[0],
-              autocomplete: "off",
-              name: _ctx.name && _ctx.name[0],
-              placeholder: _ctx.startPlaceholder,
-              value: unref(displayValue) && unref(displayValue)[0],
-              disabled: unref(pickerDisabled),
-              readonly: !_ctx.editable || _ctx.readonly,
-              class: normalizeClass(unref(nsRange).b("input")),
-              onMousedown: onMouseDownInput,
-              onInput: handleStartInput,
-              onChange: handleStartChange,
-              onFocus: handleFocusInput,
-              onBlur: handleBlurInput
-            }, null, 42, ["id", "name", "placeholder", "value", "disabled", "readonly"]),
-            renderSlot(_ctx.$slots, "range-separator", {}, () => [
-              createElementVNode("span", {
-                class: normalizeClass(unref(nsRange).b("separator"))
-              }, toDisplayString(_ctx.rangeSeparator), 3)
+          }, {
+            prefix: withCtx(() => [
+              unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
+                key: 0,
+                class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")])
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
+                ]),
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("v-if", true)
+            ]),
+            "range-separator": withCtx(() => [
+              renderSlot(_ctx.$slots, "range-separator", {}, () => [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(nsRange).b("separator"))
+                }, toDisplayString(_ctx.rangeSeparator), 3)
+              ])
+            ]),
+            suffix: withCtx(() => [
+              _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
+                key: 0,
+                class: normalizeClass(unref(clearIconKls)),
+                onMousedown: withModifiers(unref(NOOP), ["prevent"]),
+                onClick: onClearIconClick
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
+                ]),
+                _: 1
+              }, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
             ]),
-            createElementVNode("input", {
-              id: _ctx.id && _ctx.id[1],
-              autocomplete: "off",
-              name: _ctx.name && _ctx.name[1],
-              placeholder: _ctx.endPlaceholder,
-              value: unref(displayValue) && unref(displayValue)[1],
-              disabled: unref(pickerDisabled),
-              readonly: !_ctx.editable || _ctx.readonly,
-              class: normalizeClass(unref(nsRange).b("input")),
-              onMousedown: onMouseDownInput,
-              onFocus: handleFocusInput,
-              onBlur: handleBlurInput,
-              onInput: handleEndInput,
-              onChange: handleEndChange
-            }, null, 42, ["id", "name", "placeholder", "value", "disabled", "readonly"]),
-            _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
-              key: 1,
-              class: normalizeClass(unref(clearIconKls)),
-              onClick: onClearIconClick
-            }, {
-              default: withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
-              ]),
-              _: 1
-            }, 8, ["class"])) : createCommentVNode("v-if", true)
-          ], 38))
+            _: 3
+          }, 8, ["id", "model-value", "name", "disabled", "readonly", "start-placeholder", "end-placeholder", "class", "style", "aria-label", "tabindex", "onFocus", "onBlur"]))
         ]),
         content: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {
@@ -657,7 +615,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onSetPickerOption,
             onCalendarChange,
             onPanelChange,
-            onKeydown: onKeydownPopperContent,
             onMousedown: withModifiers(() => {
             }, ["stop"])
           })