@element-plus/nightly 0.0.20220117 → 0.0.20220118

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

@@ -155,9 +155,8 @@ declare const _default: import("vue").DefineComponent<{
             style: import("vue").StyleValue;
             transition: string;
             offset: number;
-            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
-            content: string;
             effect: string;
+            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
             arrowOffset: number;
             boundariesPadding: number;
             fallbackPlacements: import("@popperjs/core").Placement[];
@@ -220,6 +219,7 @@ declare const _default: import("vue").DefineComponent<{
             popperStyle: import("vue").StyleValue;
             referenceEl: HTMLElement;
             stopPopperMouseEvent: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+            content: string;
             showAfter: number;
             hideAfter: number;
             appendTo: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
@@ -273,9 +273,8 @@ declare const _default: import("vue").DefineComponent<{
             style: import("vue").StyleValue;
             transition: string;
             offset: number;
-            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
-            content: string;
             effect: string;
+            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
             arrowOffset: number;
             boundariesPadding: number;
             fallbackPlacements: import("@popperjs/core").Placement[];
@@ -338,6 +337,7 @@ declare const _default: import("vue").DefineComponent<{
             popperStyle: import("vue").StyleValue;
             referenceEl: HTMLElement;
             stopPopperMouseEvent: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+            content: string;
             showAfter: number;
             hideAfter: number;
             appendTo: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
@@ -355,7 +355,7 @@ declare const _default: import("vue").DefineComponent<{
             virtualTriggering?: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
         }> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "effect" | "visible" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "content" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -410,9 +410,8 @@ declare const _default: import("vue").DefineComponent<{
             style: import("vue").StyleValue;
             transition: string;
             offset: number;
-            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
-            content: string;
             effect: string;
+            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
             arrowOffset: number;
             boundariesPadding: number;
             fallbackPlacements: import("@popperjs/core").Placement[];
@@ -475,6 +474,7 @@ declare const _default: import("vue").DefineComponent<{
             popperStyle: import("vue").StyleValue;
             referenceEl: HTMLElement;
             stopPopperMouseEvent: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+            content: string;
             showAfter: number;
             hideAfter: number;
             appendTo: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
@@ -534,6 +534,7 @@ declare const _default: import("vue").DefineComponent<{
                 $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
             } & Readonly<{} & {} & {}> & import("vue").ShallowUnwrapRef<import("../../..").ElPopperInjectionContext> & {} & {} & import("vue").ComponentCustomProperties) | null>;
             open: import("vue").Ref<boolean>;
+            hide: () => void;
             updatePopper: () => void;
             onOpen: () => void;
             onClose: () => void;
@@ -542,9 +543,8 @@ declare const _default: import("vue").DefineComponent<{
             style: import("vue").StyleValue;
             transition: string;
             offset: number;
-            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
-            content: string;
             effect: string;
+            visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
             arrowOffset: number;
             boundariesPadding: number;
             fallbackPlacements: import("@popperjs/core").Placement[];
@@ -607,6 +607,7 @@ declare const _default: import("vue").DefineComponent<{
             popperStyle: import("vue").StyleValue;
             referenceEl: HTMLElement;
             stopPopperMouseEvent: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+            content: string;
             showAfter: number;
             hideAfter: number;
             appendTo: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
@@ -680,9 +681,8 @@ declare const _default: import("vue").DefineComponent<{
         style: import("vue").StyleValue;
         transition: string;
         offset: number;
-        visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
-        content: string;
         effect: string;
+        visible: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<boolean | null>, unknown, unknown>;
         arrowOffset: number;
         boundariesPadding: number;
         fallbackPlacements: import("@popperjs/core").Placement[];
@@ -745,6 +745,7 @@ declare const _default: import("vue").DefineComponent<{
         popperStyle: import("vue").StyleValue;
         referenceEl: HTMLElement;
         stopPopperMouseEvent: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+        content: string;
         showAfter: number;
         hideAfter: number;
         appendTo: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
@@ -804,6 +805,7 @@ declare const _default: import("vue").DefineComponent<{
             $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
         } & Readonly<{} & {} & {}> & import("vue").ShallowUnwrapRef<import("../../..").ElPopperInjectionContext> & {} & {} & import("vue").ComponentCustomProperties) | null>;
         open: import("vue").Ref<boolean>;
+        hide: () => void;
         updatePopper: () => void;
         onOpen: () => void;
         onClose: () => void;
@@ -812,8 +814,9 @@ declare const _default: import("vue").DefineComponent<{
     pickerDisabled: import("vue").ComputedRef<boolean | undefined>;
     onSetPickerOption: <T extends keyof PickerOptions>(e: [T, PickerOptions[T]]) => void;
     onCalendarChange: (e: any) => void;
+    onPanelChange: (value: any, mode: any, view: any) => void;
     focus: (focusStartInput?: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus" | "calendar-change")[], "update:modelValue" | "change" | "blur" | "focus" | "calendar-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus" | "calendar-change" | "panel-change")[], "update:modelValue" | "change" | "blur" | "focus" | "calendar-change" | "panel-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     id?: unknown;
     name?: unknown;
     popperClass?: unknown;
@@ -884,6 +887,7 @@ declare const _default: import("vue").DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onCalendar-change"?: ((...args: any[]) => any) | undefined;
+    "onPanel-change"?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
     disabled: boolean;

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

@@ -59,7 +59,14 @@ var script = defineComponent({
     ElIcon
   },
   props: timePickerDefaultProps,
-  emits: ["update:modelValue", "change", "focus", "blur", "calendar-change"],
+  emits: [
+    "update:modelValue",
+    "change",
+    "focus",
+    "blur",
+    "calendar-change",
+    "panel-change"
+  ],
   setup(props, ctx) {
     const { lang } = useLocale();
     const elForm = inject(elFormKey, {});
@@ -381,6 +388,9 @@ var script = defineComponent({
     const onCalendarChange = (e) => {
       ctx.emit("calendar-change", e);
     };
+    const onPanelChange = (value, mode, view) => {
+      ctx.emit("panel-change", value, mode, view);
+    };
     provide("EP_PICKER_BASE", {
       props
     });
@@ -416,6 +426,7 @@ var script = defineComponent({
       pickerDisabled,
       onSetPickerOption,
       onCalendarChange,
+      onPanelChange,
       focus
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"picker.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    effect=\"light\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    append-to-body\n    transition=\"el-zoom-in-top\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    :hide-after=\"0\"\n    persistent\n    @show=\"pickerActualVisible = true\"\n    @hide=\"pickerActualVisible = false\"\n  >\n    <template #default>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"id\"\n        ref=\"inputRef\"\n        :model-value=\"displayValue\"\n        :name=\"name\"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        class=\"el-date-editor\"\n        :class=\"['el-date-editor--' + type, $attrs.class || undefined]\"\n        :style=\"$attrs.style || undefined\"\n        :readonly=\"!editable || readonly || isDatesPicker || type === 'week'\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @keydown=\"handleKeydown\"\n        @change=\"handleChange\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @click.stop\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            class=\"el-input__icon\"\n            @click=\"handleFocus\"\n          >\n            <component :is=\"triggerIcon\"></component>\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClose && clearIcon\"\n            class=\"el-input__icon clear-icon\"\n            @click=\"onClearIconClick\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <div\n        v-else\n        ref=\"inputRef\"\n        class=\"el-date-editor el-range-editor el-input__inner\"\n        :class=\"[\n          'el-date-editor--' + type,\n          pickerSize ? `el-range-editor--${pickerSize}` : '',\n          pickerDisabled ? 'is-disabled' : '',\n          pickerVisible ? 'is-active' : '',\n          $attrs.class || undefined,\n        ]\"\n        :style=\"$attrs.style || undefined\"\n        @click=\"handleFocus\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"handleKeydown\"\n      >\n        <el-icon\n          v-if=\"triggerIcon\"\n          class=\"el-input__icon el-range__icon\"\n          @click=\"handleFocus\"\n        >\n          <component :is=\"triggerIcon\"></component>\n        </el-icon>\n        <input\n          :id=\"id && id[0]\"\n          autocomplete=\"off\"\n          :name=\"name && name[0]\"\n          :placeholder=\"startPlaceholder\"\n          :value=\"displayValue && displayValue[0]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @input=\"handleStartInput\"\n          @change=\"handleStartChange\"\n          @focus=\"handleFocus\"\n        />\n        <slot name=\"range-separator\">\n          <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n        </slot>\n        <input\n          :id=\"id && id[1]\"\n          autocomplete=\"off\"\n          :name=\"name && name[1]\"\n          :placeholder=\"endPlaceholder\"\n          :value=\"displayValue && displayValue[1]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @focus=\"handleFocus\"\n          @input=\"handleEndInput\"\n          @change=\"handleEndChange\"\n        />\n        <el-icon\n          v-if=\"clearIcon\"\n          class=\"el-input__icon el-range__close-icon\"\n          :class=\"{\n            'el-range__close-icon--hidden': !showClose,\n          }\"\n          @click=\"onClearIconClick\"\n        >\n          <component :is=\"clearIcon\" />\n        </el-icon>\n      </div>\n    </template>\n    <template #content>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @mousedown.stop\n      ></slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n  unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n  isValidValue: (date: Dayjs) => boolean\n  handleKeydown: (event: KeyboardEvent) => void\n  parseUserInput: (value: Dayjs) => dayjs.Dayjs\n  formatToString: (value: Dayjs) => string | string[]\n  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n  getDefaultValue: () => Dayjs\n  panelReady: boolean\n  handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date | any, b: Date | any) {\n  const aIsDate = a instanceof Date\n  const bIsDate = b instanceof Date\n  if (aIsDate && bIsDate) {\n    return a.getTime() === b.getTime()\n  }\n  if (!aIsDate && !bIsDate) {\n    return a === b\n  }\n  return false\n}\n\nconst valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {\n  const aIsArray = a instanceof Array\n  const bIsArray = b instanceof Array\n  if (aIsArray && bIsArray) {\n    if (a.length !== b.length) {\n      return false\n    }\n    return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n  }\n  if (!aIsArray && !bIsArray) {\n    return dateEquals(a, b)\n  }\n  return false\n}\n\nconst parser = function (\n  date: Date | string,\n  format: string,\n  lang: string\n): Dayjs {\n  const day =\n    isEmpty(format) || format === 'x'\n      ? dayjs(date).locale(lang)\n      : dayjs(date, format).locale(lang)\n  return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number | Date, format: string, lang: string) {\n  if (isEmpty(format)) return date\n  if (format === 'x') return +date\n  return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElTooltip,\n    ElIcon,\n  },\n  props: timePickerDefaultProps,\n  emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],\n  setup(props, ctx) {\n    const { lang } = useLocale()\n\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n    const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n    const refPopper = ref<InstanceType<typeof ElTooltip>>()\n    const inputRef = ref<HTMLElement | ComponentPublicInstance>()\n    const pickerVisible = ref(false)\n    const pickerActualVisible = ref(false)\n    const valueOnOpen = ref(null)\n\n    watch(pickerVisible, (val) => {\n      if (!val) {\n        userInput.value = null\n        nextTick(() => {\n          emitChange(props.modelValue)\n        })\n        ctx.emit('blur')\n        blurInput()\n        props.validateEvent && elFormItem.validate?.('blur')\n      } else {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n    const emitChange = (val, isClear?: boolean) => {\n      // determine user real change only\n      if (isClear || !valueEquals(val, valueOnOpen.value)) {\n        ctx.emit('change', val)\n        props.validateEvent && elFormItem.validate?.('change')\n      }\n    }\n    const emitInput = (val) => {\n      if (!valueEquals(props.modelValue, val)) {\n        let formatValue\n        if (Array.isArray(val)) {\n          formatValue = val.map((_) =>\n            formatter(_, props.valueFormat, lang.value)\n          )\n        } else if (val) {\n          formatValue = formatter(val, props.valueFormat, lang.value)\n        }\n        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n      }\n    }\n    const refInput = computed<HTMLInputElement[]>(() => {\n      if (inputRef.value) {\n        const _r = isRangeInput.value\n          ? inputRef.value\n          : (inputRef.value as any as ComponentPublicInstance).$el\n        return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\n      }\n      return []\n    })\n    const refStartInput = computed(() => {\n      return refInput?.value[0]\n    })\n    const refEndInput = computed(() => {\n      return refInput?.value[1]\n    })\n    const setSelectionRange = (start, end, pos) => {\n      const _inputs = refInput.value\n      if (!_inputs.length) return\n      if (!pos || pos === 'min') {\n        _inputs[0].setSelectionRange(start, end)\n        _inputs[0].focus()\n      } else if (pos === 'max') {\n        _inputs[1].setSelectionRange(start, end)\n        _inputs[1].focus()\n      }\n    }\n    const onPick = (date: any = '', visible = false) => {\n      pickerVisible.value = visible\n      let result\n      if (Array.isArray(date)) {\n        result = date.map((_) => _.toDate())\n      } else {\n        // clear btn emit null\n        result = date ? date.toDate() : date\n      }\n      userInput.value = null\n      emitInput(result)\n    }\n\n    const focus = (focusStartInput = true) => {\n      let input = refStartInput.value\n      if (!focusStartInput && isRangeInput.value) {\n        input = refEndInput.value\n      }\n      if (input) {\n        input.focus()\n      }\n    }\n\n    const handleFocus = (e) => {\n      if (props.readonly || pickerDisabled.value || pickerVisible.value) return\n      pickerVisible.value = true\n      ctx.emit('focus', e)\n    }\n\n    const handleBlur = () => {\n      refPopper.value?.onClose()\n      blurInput()\n    }\n\n    const pickerDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const parsedValue = computed(() => {\n      let result\n      if (valueIsEmpty.value) {\n        if (pickerOptions.value.getDefaultValue) {\n          result = pickerOptions.value.getDefaultValue()\n        }\n      } else {\n        if (Array.isArray(props.modelValue)) {\n          result = props.modelValue.map((_) =>\n            parser(_, props.valueFormat, lang.value)\n          )\n        } else {\n          result = parser(props.modelValue, props.valueFormat, lang.value)\n        }\n      }\n\n      if (pickerOptions.value.getRangeAvailableTime) {\n        const availableResult =\n          pickerOptions.value.getRangeAvailableTime(result)\n        if (!isEqual(availableResult, result)) {\n          result = availableResult\n          emitInput(\n            Array.isArray(result)\n              ? result.map((_) => _.toDate())\n              : result.toDate()\n          )\n        }\n      }\n      if (Array.isArray(result) && result.some((_) => !_)) {\n        result = []\n      }\n      return result\n    })\n\n    const displayValue = computed(() => {\n      if (!pickerOptions.value.panelReady) return\n      const formattedValue = formatDayjsToString(parsedValue.value)\n      if (Array.isArray(userInput.value)) {\n        return [\n          userInput.value[0] || (formattedValue && formattedValue[0]) || '',\n          userInput.value[1] || (formattedValue && formattedValue[1]) || '',\n        ]\n      } else if (userInput.value !== null) {\n        return userInput.value\n      }\n      if (!isTimePicker.value && valueIsEmpty.value) return\n      if (!pickerVisible.value && valueIsEmpty.value) return\n      if (formattedValue) {\n        return isDatesPicker.value\n          ? (formattedValue as Array<string>).join(', ')\n          : formattedValue\n      }\n      return ''\n    })\n\n    const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n    const isTimePicker = computed(() => props.type.startsWith('time'))\n\n    const isDatesPicker = computed(() => props.type === 'dates')\n\n    const triggerIcon = computed(\n      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n    )\n\n    const showClose = ref(false)\n\n    const onClearIconClick = (event) => {\n      if (props.readonly || pickerDisabled.value) return\n      if (showClose.value) {\n        event.stopPropagation()\n        emitInput(null)\n        emitChange(null, true)\n        showClose.value = false\n        pickerVisible.value = false\n        pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n      }\n    }\n    const valueIsEmpty = computed(() => {\n      return (\n        !props.modelValue ||\n        (Array.isArray(props.modelValue) && !props.modelValue.length)\n      )\n    })\n    const onMouseEnter = () => {\n      if (props.readonly || pickerDisabled.value) return\n      if (!valueIsEmpty.value && props.clearable) {\n        showClose.value = true\n      }\n    }\n    const onMouseLeave = () => {\n      showClose.value = false\n    }\n    const isRangeInput = computed(() => {\n      return props.type.indexOf('range') > -1\n    })\n\n    const pickerSize = useSize()\n\n    const popperPaneRef = computed(() => {\n      return refPopper.value?.popperRef?.contentRef\n    })\n\n    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n    const actualInputRef = computed(() => {\n      if (unref(isRangeInput)) {\n        return unref(inputRef)\n      }\n\n      return (unref(inputRef) as ComponentPublicInstance)?.$el\n    })\n\n    onClickOutside(actualInputRef, (e: PointerEvent) => {\n      const unrefedPopperEl = unref(popperEl)\n      const inputEl = unref(actualInputRef)\n      if (\n        (unrefedPopperEl &&\n          (e.target === unrefedPopperEl ||\n            e.composedPath().includes(unrefedPopperEl))) ||\n        e.target === inputEl ||\n        e.composedPath().includes(inputEl)\n      )\n        return\n      pickerVisible.value = false\n    })\n\n    const userInput = ref(null)\n\n    const handleChange = () => {\n      if (userInput.value) {\n        const value = parseUserInputToDayjs(displayValue.value)\n        if (value) {\n          if (isValidValue(value)) {\n            emitInput(\n              Array.isArray(value)\n                ? value.map((_) => _.toDate())\n                : value.toDate()\n            )\n            userInput.value = null\n          }\n        }\n      }\n      if (userInput.value === '') {\n        emitInput(null)\n        emitChange(null)\n        userInput.value = null\n      }\n    }\n\n    const blurInput = () => {\n      refInput.value.forEach((input) => input.blur())\n    }\n\n    const parseUserInputToDayjs = (value) => {\n      if (!value) return null\n      return pickerOptions.value.parseUserInput(value)\n    }\n\n    const formatDayjsToString = (value) => {\n      if (!value) return null\n      return pickerOptions.value.formatToString(value)\n    }\n\n    const isValidValue = (value) => {\n      return pickerOptions.value.isValidValue(value)\n    }\n\n    const handleKeydown = (event) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.esc) {\n        pickerVisible.value = false\n        event.stopPropagation()\n        return\n      }\n\n      if (code === EVENT_CODE.tab) {\n        if (!isRangeInput.value) {\n          handleChange()\n          pickerVisible.value = false\n          event.stopPropagation()\n        } else {\n          // user may change focus between two input\n          setTimeout(() => {\n            if (refInput.value.indexOf(document.activeElement) === -1) {\n              pickerVisible.value = false\n              blurInput()\n            }\n          }, 0)\n        }\n        return\n      }\n\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n        if (\n          userInput.value === null ||\n          userInput.value === '' ||\n          isValidValue(parseUserInputToDayjs(displayValue.value))\n        ) {\n          handleChange()\n          pickerVisible.value = false\n        }\n        event.stopPropagation()\n        return\n      }\n\n      // if user is typing, do not let picker handle key input\n      if (userInput.value) {\n        event.stopPropagation()\n        return\n      }\n\n      if (pickerOptions.value.handleKeydown) {\n        pickerOptions.value.handleKeydown(event)\n      }\n    }\n    const onUserInput = (e) => {\n      userInput.value = e\n    }\n\n    const handleStartInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [event.target.value, userInput.value[1]]\n      } else {\n        userInput.value = [event.target.value, null]\n      }\n    }\n\n    const handleEndInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [userInput.value[0], event.target.value]\n      } else {\n        userInput.value = [null, event.target.value]\n      }\n    }\n\n    const handleStartChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n      if (value && value.isValid()) {\n        userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n        const newValue = [value, parsedValue.value && parsedValue.value[1]]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const handleEndChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n      if (value && value.isValid()) {\n        userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n        const newValue = [parsedValue.value && parsedValue.value[0], value]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const pickerOptions = ref<Partial<PickerOptions>>({})\n    const onSetPickerOption = <T extends keyof PickerOptions>(\n      e: [T, PickerOptions[T]]\n    ) => {\n      pickerOptions.value[e[0]] = e[1]\n      pickerOptions.value.panelReady = true\n    }\n\n    const onCalendarChange = (e) => {\n      ctx.emit('calendar-change', e)\n    }\n\n    provide('EP_PICKER_BASE', {\n      props,\n    })\n\n    return {\n      // injected popper options\n      elPopperOptions,\n\n      isDatesPicker,\n      handleEndChange,\n      handleStartChange,\n      handleStartInput,\n      handleEndInput,\n      onUserInput,\n      handleChange,\n      handleKeydown,\n      popperPaneRef,\n      onClickOutside,\n      pickerSize,\n      isRangeInput,\n      onMouseLeave,\n      onMouseEnter,\n      onClearIconClick,\n      showClose,\n      triggerIcon,\n      onPick,\n      handleFocus,\n      handleBlur,\n      pickerVisible,\n      pickerActualVisible,\n      displayValue,\n      parsedValue,\n      setSelectionRange,\n      refPopper,\n      inputRef,\n      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"picker.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    effect=\"light\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    append-to-body\n    transition=\"el-zoom-in-top\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    :hide-after=\"0\"\n    persistent\n    @show=\"pickerActualVisible = true\"\n    @hide=\"pickerActualVisible = false\"\n  >\n    <template #default>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"id\"\n        ref=\"inputRef\"\n        :model-value=\"displayValue\"\n        :name=\"name\"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        class=\"el-date-editor\"\n        :class=\"['el-date-editor--' + type, $attrs.class || undefined]\"\n        :style=\"$attrs.style || undefined\"\n        :readonly=\"!editable || readonly || isDatesPicker || type === 'week'\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @keydown=\"handleKeydown\"\n        @change=\"handleChange\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @click.stop\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            class=\"el-input__icon\"\n            @click=\"handleFocus\"\n          >\n            <component :is=\"triggerIcon\"></component>\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClose && clearIcon\"\n            class=\"el-input__icon clear-icon\"\n            @click=\"onClearIconClick\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <div\n        v-else\n        ref=\"inputRef\"\n        class=\"el-date-editor el-range-editor el-input__inner\"\n        :class=\"[\n          'el-date-editor--' + type,\n          pickerSize ? `el-range-editor--${pickerSize}` : '',\n          pickerDisabled ? 'is-disabled' : '',\n          pickerVisible ? 'is-active' : '',\n          $attrs.class || undefined,\n        ]\"\n        :style=\"$attrs.style || undefined\"\n        @click=\"handleFocus\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"handleKeydown\"\n      >\n        <el-icon\n          v-if=\"triggerIcon\"\n          class=\"el-input__icon el-range__icon\"\n          @click=\"handleFocus\"\n        >\n          <component :is=\"triggerIcon\"></component>\n        </el-icon>\n        <input\n          :id=\"id && id[0]\"\n          autocomplete=\"off\"\n          :name=\"name && name[0]\"\n          :placeholder=\"startPlaceholder\"\n          :value=\"displayValue && displayValue[0]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @input=\"handleStartInput\"\n          @change=\"handleStartChange\"\n          @focus=\"handleFocus\"\n        />\n        <slot name=\"range-separator\">\n          <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n        </slot>\n        <input\n          :id=\"id && id[1]\"\n          autocomplete=\"off\"\n          :name=\"name && name[1]\"\n          :placeholder=\"endPlaceholder\"\n          :value=\"displayValue && displayValue[1]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @focus=\"handleFocus\"\n          @input=\"handleEndInput\"\n          @change=\"handleEndChange\"\n        />\n        <el-icon\n          v-if=\"clearIcon\"\n          class=\"el-input__icon el-range__close-icon\"\n          :class=\"{\n            'el-range__close-icon--hidden': !showClose,\n          }\"\n          @click=\"onClearIconClick\"\n        >\n          <component :is=\"clearIcon\" />\n        </el-icon>\n      </div>\n    </template>\n    <template #content>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @panel-change=\"onPanelChange\"\n        @mousedown.stop\n      ></slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n  unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n  isValidValue: (date: Dayjs) => boolean\n  handleKeydown: (event: KeyboardEvent) => void\n  parseUserInput: (value: Dayjs) => dayjs.Dayjs\n  formatToString: (value: Dayjs) => string | string[]\n  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n  getDefaultValue: () => Dayjs\n  panelReady: boolean\n  handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date | any, b: Date | any) {\n  const aIsDate = a instanceof Date\n  const bIsDate = b instanceof Date\n  if (aIsDate && bIsDate) {\n    return a.getTime() === b.getTime()\n  }\n  if (!aIsDate && !bIsDate) {\n    return a === b\n  }\n  return false\n}\n\nconst valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {\n  const aIsArray = a instanceof Array\n  const bIsArray = b instanceof Array\n  if (aIsArray && bIsArray) {\n    if (a.length !== b.length) {\n      return false\n    }\n    return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n  }\n  if (!aIsArray && !bIsArray) {\n    return dateEquals(a, b)\n  }\n  return false\n}\n\nconst parser = function (\n  date: Date | string,\n  format: string,\n  lang: string\n): Dayjs {\n  const day =\n    isEmpty(format) || format === 'x'\n      ? dayjs(date).locale(lang)\n      : dayjs(date, format).locale(lang)\n  return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number | Date, format: string, lang: string) {\n  if (isEmpty(format)) return date\n  if (format === 'x') return +date\n  return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElTooltip,\n    ElIcon,\n  },\n  props: timePickerDefaultProps,\n  emits: [\n    'update:modelValue',\n    'change',\n    'focus',\n    'blur',\n    'calendar-change',\n    'panel-change',\n  ],\n  setup(props, ctx) {\n    const { lang } = useLocale()\n\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n    const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n    const refPopper = ref<InstanceType<typeof ElTooltip>>()\n    const inputRef = ref<HTMLElement | ComponentPublicInstance>()\n    const pickerVisible = ref(false)\n    const pickerActualVisible = ref(false)\n    const valueOnOpen = ref(null)\n\n    watch(pickerVisible, (val) => {\n      if (!val) {\n        userInput.value = null\n        nextTick(() => {\n          emitChange(props.modelValue)\n        })\n        ctx.emit('blur')\n        blurInput()\n        props.validateEvent && elFormItem.validate?.('blur')\n      } else {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n    const emitChange = (val, isClear?: boolean) => {\n      // determine user real change only\n      if (isClear || !valueEquals(val, valueOnOpen.value)) {\n        ctx.emit('change', val)\n        props.validateEvent && elFormItem.validate?.('change')\n      }\n    }\n    const emitInput = (val) => {\n      if (!valueEquals(props.modelValue, val)) {\n        let formatValue\n        if (Array.isArray(val)) {\n          formatValue = val.map((_) =>\n            formatter(_, props.valueFormat, lang.value)\n          )\n        } else if (val) {\n          formatValue = formatter(val, props.valueFormat, lang.value)\n        }\n        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n      }\n    }\n    const refInput = computed<HTMLInputElement[]>(() => {\n      if (inputRef.value) {\n        const _r = isRangeInput.value\n          ? inputRef.value\n          : (inputRef.value as any as ComponentPublicInstance).$el\n        return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\n      }\n      return []\n    })\n    const refStartInput = computed(() => {\n      return refInput?.value[0]\n    })\n    const refEndInput = computed(() => {\n      return refInput?.value[1]\n    })\n    const setSelectionRange = (start, end, pos) => {\n      const _inputs = refInput.value\n      if (!_inputs.length) return\n      if (!pos || pos === 'min') {\n        _inputs[0].setSelectionRange(start, end)\n        _inputs[0].focus()\n      } else if (pos === 'max') {\n        _inputs[1].setSelectionRange(start, end)\n        _inputs[1].focus()\n      }\n    }\n    const onPick = (date: any = '', visible = false) => {\n      pickerVisible.value = visible\n      let result\n      if (Array.isArray(date)) {\n        result = date.map((_) => _.toDate())\n      } else {\n        // clear btn emit null\n        result = date ? date.toDate() : date\n      }\n      userInput.value = null\n      emitInput(result)\n    }\n\n    const focus = (focusStartInput = true) => {\n      let input = refStartInput.value\n      if (!focusStartInput && isRangeInput.value) {\n        input = refEndInput.value\n      }\n      if (input) {\n        input.focus()\n      }\n    }\n\n    const handleFocus = (e) => {\n      if (props.readonly || pickerDisabled.value || pickerVisible.value) return\n      pickerVisible.value = true\n      ctx.emit('focus', e)\n    }\n\n    const handleBlur = () => {\n      refPopper.value?.onClose()\n      blurInput()\n    }\n\n    const pickerDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const parsedValue = computed(() => {\n      let result\n      if (valueIsEmpty.value) {\n        if (pickerOptions.value.getDefaultValue) {\n          result = pickerOptions.value.getDefaultValue()\n        }\n      } else {\n        if (Array.isArray(props.modelValue)) {\n          result = props.modelValue.map((_) =>\n            parser(_, props.valueFormat, lang.value)\n          )\n        } else {\n          result = parser(props.modelValue, props.valueFormat, lang.value)\n        }\n      }\n\n      if (pickerOptions.value.getRangeAvailableTime) {\n        const availableResult =\n          pickerOptions.value.getRangeAvailableTime(result)\n        if (!isEqual(availableResult, result)) {\n          result = availableResult\n          emitInput(\n            Array.isArray(result)\n              ? result.map((_) => _.toDate())\n              : result.toDate()\n          )\n        }\n      }\n      if (Array.isArray(result) && result.some((_) => !_)) {\n        result = []\n      }\n      return result\n    })\n\n    const displayValue = computed(() => {\n      if (!pickerOptions.value.panelReady) return\n      const formattedValue = formatDayjsToString(parsedValue.value)\n      if (Array.isArray(userInput.value)) {\n        return [\n          userInput.value[0] || (formattedValue && formattedValue[0]) || '',\n          userInput.value[1] || (formattedValue && formattedValue[1]) || '',\n        ]\n      } else if (userInput.value !== null) {\n        return userInput.value\n      }\n      if (!isTimePicker.value && valueIsEmpty.value) return\n      if (!pickerVisible.value && valueIsEmpty.value) return\n      if (formattedValue) {\n        return isDatesPicker.value\n          ? (formattedValue as Array<string>).join(', ')\n          : formattedValue\n      }\n      return ''\n    })\n\n    const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n    const isTimePicker = computed(() => props.type.startsWith('time'))\n\n    const isDatesPicker = computed(() => props.type === 'dates')\n\n    const triggerIcon = computed(\n      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n    )\n\n    const showClose = ref(false)\n\n    const onClearIconClick = (event) => {\n      if (props.readonly || pickerDisabled.value) return\n      if (showClose.value) {\n        event.stopPropagation()\n        emitInput(null)\n        emitChange(null, true)\n        showClose.value = false\n        pickerVisible.value = false\n        pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n      }\n    }\n    const valueIsEmpty = computed(() => {\n      return (\n        !props.modelValue ||\n        (Array.isArray(props.modelValue) && !props.modelValue.length)\n      )\n    })\n    const onMouseEnter = () => {\n      if (props.readonly || pickerDisabled.value) return\n      if (!valueIsEmpty.value && props.clearable) {\n        showClose.value = true\n      }\n    }\n    const onMouseLeave = () => {\n      showClose.value = false\n    }\n    const isRangeInput = computed(() => {\n      return props.type.indexOf('range') > -1\n    })\n\n    const pickerSize = useSize()\n\n    const popperPaneRef = computed(() => {\n      return refPopper.value?.popperRef?.contentRef\n    })\n\n    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n    const actualInputRef = computed(() => {\n      if (unref(isRangeInput)) {\n        return unref(inputRef)\n      }\n\n      return (unref(inputRef) as ComponentPublicInstance)?.$el\n    })\n\n    onClickOutside(actualInputRef, (e: PointerEvent) => {\n      const unrefedPopperEl = unref(popperEl)\n      const inputEl = unref(actualInputRef)\n      if (\n        (unrefedPopperEl &&\n          (e.target === unrefedPopperEl ||\n            e.composedPath().includes(unrefedPopperEl))) ||\n        e.target === inputEl ||\n        e.composedPath().includes(inputEl)\n      )\n        return\n      pickerVisible.value = false\n    })\n\n    const userInput = ref(null)\n\n    const handleChange = () => {\n      if (userInput.value) {\n        const value = parseUserInputToDayjs(displayValue.value)\n        if (value) {\n          if (isValidValue(value)) {\n            emitInput(\n              Array.isArray(value)\n                ? value.map((_) => _.toDate())\n                : value.toDate()\n            )\n            userInput.value = null\n          }\n        }\n      }\n      if (userInput.value === '') {\n        emitInput(null)\n        emitChange(null)\n        userInput.value = null\n      }\n    }\n\n    const blurInput = () => {\n      refInput.value.forEach((input) => input.blur())\n    }\n\n    const parseUserInputToDayjs = (value) => {\n      if (!value) return null\n      return pickerOptions.value.parseUserInput(value)\n    }\n\n    const formatDayjsToString = (value) => {\n      if (!value) return null\n      return pickerOptions.value.formatToString(value)\n    }\n\n    const isValidValue = (value) => {\n      return pickerOptions.value.isValidValue(value)\n    }\n\n    const handleKeydown = (event) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.esc) {\n        pickerVisible.value = false\n        event.stopPropagation()\n        return\n      }\n\n      if (code === EVENT_CODE.tab) {\n        if (!isRangeInput.value) {\n          handleChange()\n          pickerVisible.value = false\n          event.stopPropagation()\n        } else {\n          // user may change focus between two input\n          setTimeout(() => {\n            if (refInput.value.indexOf(document.activeElement) === -1) {\n              pickerVisible.value = false\n              blurInput()\n            }\n          }, 0)\n        }\n        return\n      }\n\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n        if (\n          userInput.value === null ||\n          userInput.value === '' ||\n          isValidValue(parseUserInputToDayjs(displayValue.value))\n        ) {\n          handleChange()\n          pickerVisible.value = false\n        }\n        event.stopPropagation()\n        return\n      }\n\n      // if user is typing, do not let picker handle key input\n      if (userInput.value) {\n        event.stopPropagation()\n        return\n      }\n\n      if (pickerOptions.value.handleKeydown) {\n        pickerOptions.value.handleKeydown(event)\n      }\n    }\n    const onUserInput = (e) => {\n      userInput.value = e\n    }\n\n    const handleStartInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [event.target.value, userInput.value[1]]\n      } else {\n        userInput.value = [event.target.value, null]\n      }\n    }\n\n    const handleEndInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [userInput.value[0], event.target.value]\n      } else {\n        userInput.value = [null, event.target.value]\n      }\n    }\n\n    const handleStartChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n      if (value && value.isValid()) {\n        userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n        const newValue = [value, parsedValue.value && parsedValue.value[1]]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const handleEndChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n      if (value && value.isValid()) {\n        userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n        const newValue = [parsedValue.value && parsedValue.value[0], value]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const pickerOptions = ref<Partial<PickerOptions>>({})\n    const onSetPickerOption = <T extends keyof PickerOptions>(\n      e: [T, PickerOptions[T]]\n    ) => {\n      pickerOptions.value[e[0]] = e[1]\n      pickerOptions.value.panelReady = true\n    }\n\n    const onCalendarChange = (e) => {\n      ctx.emit('calendar-change', e)\n    }\n\n    const onPanelChange = (value, mode, view) => {\n      ctx.emit('panel-change', value, mode, view)\n    }\n\n    provide('EP_PICKER_BASE', {\n      props,\n    })\n\n    return {\n      // injected popper options\n      elPopperOptions,\n\n      isDatesPicker,\n      handleEndChange,\n      handleStartChange,\n      handleStartInput,\n      handleEndInput,\n      onUserInput,\n      handleChange,\n      handleKeydown,\n      popperPaneRef,\n      onClickOutside,\n      pickerSize,\n      isRangeInput,\n      onMouseLeave,\n      onMouseEnter,\n      onClearIconClick,\n      showClose,\n      triggerIcon,\n      onPick,\n      handleFocus,\n      handleBlur,\n      pickerVisible,\n      pickerActualVisible,\n      displayValue,\n      parsedValue,\n      setSelectionRange,\n      refPopper,\n      inputRef,\n      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n      onPanelChange,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

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

@@ -10,7 +10,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_el_tooltip, mergeProps({
     ref: "refPopper",
     visible: _ctx.pickerVisible,
-    "onUpdate:visible": _cache[16] || (_cache[16] = ($event) => _ctx.pickerVisible = $event),
+    "onUpdate:visible": _cache[17] || (_cache[17] = ($event) => _ctx.pickerVisible = $event),
     effect: "light",
     pure: "",
     trigger: "click"
@@ -24,8 +24,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "stop-popper-mouse-event": false,
     "hide-after": 0,
     persistent: "",
-    onShow: _cache[17] || (_cache[17] = ($event) => _ctx.pickerActualVisible = true),
-    onHide: _cache[18] || (_cache[18] = ($event) => _ctx.pickerActualVisible = false)
+    onShow: _cache[18] || (_cache[18] = ($event) => _ctx.pickerActualVisible = true),
+    onHide: _cache[19] || (_cache[19] = ($event) => _ctx.pickerActualVisible = false)
   }), {
     default: withCtx(() => [
       !_ctx.isRangeInput ? (openBlock(), createBlock(_component_el_input, {
@@ -156,7 +156,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onSelectRange: _cache[12] || (_cache[12] = (...args) => _ctx.setSelectionRange && _ctx.setSelectionRange(...args)),
         onSetPickerOption: _cache[13] || (_cache[13] = (...args) => _ctx.onSetPickerOption && _ctx.onSetPickerOption(...args)),
         onCalendarChange: _cache[14] || (_cache[14] = (...args) => _ctx.onCalendarChange && _ctx.onCalendarChange(...args)),
-        onMousedown: _cache[15] || (_cache[15] = withModifiers(() => {
+        onPanelChange: _cache[15] || (_cache[15] = (...args) => _ctx.onPanelChange && _ctx.onPanelChange(...args)),
+        onMousedown: _cache[16] || (_cache[16] = withModifiers(() => {
         }, ["stop"]))
       })
     ]),

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

@@ -1 +1 @@
-{"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue?vue&type=template&id=1d54be91&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    effect=\"light\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    append-to-body\n    transition=\"el-zoom-in-top\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    :hide-after=\"0\"\n    persistent\n    @show=\"pickerActualVisible = true\"\n    @hide=\"pickerActualVisible = false\"\n  >\n    <template #default>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"id\"\n        ref=\"inputRef\"\n        :model-value=\"displayValue\"\n        :name=\"name\"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        class=\"el-date-editor\"\n        :class=\"['el-date-editor--' + type, $attrs.class || undefined]\"\n        :style=\"$attrs.style || undefined\"\n        :readonly=\"!editable || readonly || isDatesPicker || type === 'week'\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @keydown=\"handleKeydown\"\n        @change=\"handleChange\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @click.stop\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            class=\"el-input__icon\"\n            @click=\"handleFocus\"\n          >\n            <component :is=\"triggerIcon\"></component>\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClose && clearIcon\"\n            class=\"el-input__icon clear-icon\"\n            @click=\"onClearIconClick\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <div\n        v-else\n        ref=\"inputRef\"\n        class=\"el-date-editor el-range-editor el-input__inner\"\n        :class=\"[\n          'el-date-editor--' + type,\n          pickerSize ? `el-range-editor--${pickerSize}` : '',\n          pickerDisabled ? 'is-disabled' : '',\n          pickerVisible ? 'is-active' : '',\n          $attrs.class || undefined,\n        ]\"\n        :style=\"$attrs.style || undefined\"\n        @click=\"handleFocus\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"handleKeydown\"\n      >\n        <el-icon\n          v-if=\"triggerIcon\"\n          class=\"el-input__icon el-range__icon\"\n          @click=\"handleFocus\"\n        >\n          <component :is=\"triggerIcon\"></component>\n        </el-icon>\n        <input\n          :id=\"id && id[0]\"\n          autocomplete=\"off\"\n          :name=\"name && name[0]\"\n          :placeholder=\"startPlaceholder\"\n          :value=\"displayValue && displayValue[0]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @input=\"handleStartInput\"\n          @change=\"handleStartChange\"\n          @focus=\"handleFocus\"\n        />\n        <slot name=\"range-separator\">\n          <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n        </slot>\n        <input\n          :id=\"id && id[1]\"\n          autocomplete=\"off\"\n          :name=\"name && name[1]\"\n          :placeholder=\"endPlaceholder\"\n          :value=\"displayValue && displayValue[1]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @focus=\"handleFocus\"\n          @input=\"handleEndInput\"\n          @change=\"handleEndChange\"\n        />\n        <el-icon\n          v-if=\"clearIcon\"\n          class=\"el-input__icon el-range__close-icon\"\n          :class=\"{\n            'el-range__close-icon--hidden': !showClose,\n          }\"\n          @click=\"onClearIconClick\"\n        >\n          <component :is=\"clearIcon\" />\n        </el-icon>\n      </div>\n    </template>\n    <template #content>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @mousedown.stop\n      ></slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n  unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n  isValidValue: (date: Dayjs) => boolean\n  handleKeydown: (event: KeyboardEvent) => void\n  parseUserInput: (value: Dayjs) => dayjs.Dayjs\n  formatToString: (value: Dayjs) => string | string[]\n  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n  getDefaultValue: () => Dayjs\n  panelReady: boolean\n  handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date | any, b: Date | any) {\n  const aIsDate = a instanceof Date\n  const bIsDate = b instanceof Date\n  if (aIsDate && bIsDate) {\n    return a.getTime() === b.getTime()\n  }\n  if (!aIsDate && !bIsDate) {\n    return a === b\n  }\n  return false\n}\n\nconst valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {\n  const aIsArray = a instanceof Array\n  const bIsArray = b instanceof Array\n  if (aIsArray && bIsArray) {\n    if (a.length !== b.length) {\n      return false\n    }\n    return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n  }\n  if (!aIsArray && !bIsArray) {\n    return dateEquals(a, b)\n  }\n  return false\n}\n\nconst parser = function (\n  date: Date | string,\n  format: string,\n  lang: string\n): Dayjs {\n  const day =\n    isEmpty(format) || format === 'x'\n      ? dayjs(date).locale(lang)\n      : dayjs(date, format).locale(lang)\n  return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number | Date, format: string, lang: string) {\n  if (isEmpty(format)) return date\n  if (format === 'x') return +date\n  return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElTooltip,\n    ElIcon,\n  },\n  props: timePickerDefaultProps,\n  emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],\n  setup(props, ctx) {\n    const { lang } = useLocale()\n\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n    const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n    const refPopper = ref<InstanceType<typeof ElTooltip>>()\n    const inputRef = ref<HTMLElement | ComponentPublicInstance>()\n    const pickerVisible = ref(false)\n    const pickerActualVisible = ref(false)\n    const valueOnOpen = ref(null)\n\n    watch(pickerVisible, (val) => {\n      if (!val) {\n        userInput.value = null\n        nextTick(() => {\n          emitChange(props.modelValue)\n        })\n        ctx.emit('blur')\n        blurInput()\n        props.validateEvent && elFormItem.validate?.('blur')\n      } else {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n    const emitChange = (val, isClear?: boolean) => {\n      // determine user real change only\n      if (isClear || !valueEquals(val, valueOnOpen.value)) {\n        ctx.emit('change', val)\n        props.validateEvent && elFormItem.validate?.('change')\n      }\n    }\n    const emitInput = (val) => {\n      if (!valueEquals(props.modelValue, val)) {\n        let formatValue\n        if (Array.isArray(val)) {\n          formatValue = val.map((_) =>\n            formatter(_, props.valueFormat, lang.value)\n          )\n        } else if (val) {\n          formatValue = formatter(val, props.valueFormat, lang.value)\n        }\n        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n      }\n    }\n    const refInput = computed<HTMLInputElement[]>(() => {\n      if (inputRef.value) {\n        const _r = isRangeInput.value\n          ? inputRef.value\n          : (inputRef.value as any as ComponentPublicInstance).$el\n        return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\n      }\n      return []\n    })\n    const refStartInput = computed(() => {\n      return refInput?.value[0]\n    })\n    const refEndInput = computed(() => {\n      return refInput?.value[1]\n    })\n    const setSelectionRange = (start, end, pos) => {\n      const _inputs = refInput.value\n      if (!_inputs.length) return\n      if (!pos || pos === 'min') {\n        _inputs[0].setSelectionRange(start, end)\n        _inputs[0].focus()\n      } else if (pos === 'max') {\n        _inputs[1].setSelectionRange(start, end)\n        _inputs[1].focus()\n      }\n    }\n    const onPick = (date: any = '', visible = false) => {\n      pickerVisible.value = visible\n      let result\n      if (Array.isArray(date)) {\n        result = date.map((_) => _.toDate())\n      } else {\n        // clear btn emit null\n        result = date ? date.toDate() : date\n      }\n      userInput.value = null\n      emitInput(result)\n    }\n\n    const focus = (focusStartInput = true) => {\n      let input = refStartInput.value\n      if (!focusStartInput && isRangeInput.value) {\n        input = refEndInput.value\n      }\n      if (input) {\n        input.focus()\n      }\n    }\n\n    const handleFocus = (e) => {\n      if (props.readonly || pickerDisabled.value || pickerVisible.value) return\n      pickerVisible.value = true\n      ctx.emit('focus', e)\n    }\n\n    const handleBlur = () => {\n      refPopper.value?.onClose()\n      blurInput()\n    }\n\n    const pickerDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const parsedValue = computed(() => {\n      let result\n      if (valueIsEmpty.value) {\n        if (pickerOptions.value.getDefaultValue) {\n          result = pickerOptions.value.getDefaultValue()\n        }\n      } else {\n        if (Array.isArray(props.modelValue)) {\n          result = props.modelValue.map((_) =>\n            parser(_, props.valueFormat, lang.value)\n          )\n        } else {\n          result = parser(props.modelValue, props.valueFormat, lang.value)\n        }\n      }\n\n      if (pickerOptions.value.getRangeAvailableTime) {\n        const availableResult =\n          pickerOptions.value.getRangeAvailableTime(result)\n        if (!isEqual(availableResult, result)) {\n          result = availableResult\n          emitInput(\n            Array.isArray(result)\n              ? result.map((_) => _.toDate())\n              : result.toDate()\n          )\n        }\n      }\n      if (Array.isArray(result) && result.some((_) => !_)) {\n        result = []\n      }\n      return result\n    })\n\n    const displayValue = computed(() => {\n      if (!pickerOptions.value.panelReady) return\n      const formattedValue = formatDayjsToString(parsedValue.value)\n      if (Array.isArray(userInput.value)) {\n        return [\n          userInput.value[0] || (formattedValue && formattedValue[0]) || '',\n          userInput.value[1] || (formattedValue && formattedValue[1]) || '',\n        ]\n      } else if (userInput.value !== null) {\n        return userInput.value\n      }\n      if (!isTimePicker.value && valueIsEmpty.value) return\n      if (!pickerVisible.value && valueIsEmpty.value) return\n      if (formattedValue) {\n        return isDatesPicker.value\n          ? (formattedValue as Array<string>).join(', ')\n          : formattedValue\n      }\n      return ''\n    })\n\n    const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n    const isTimePicker = computed(() => props.type.startsWith('time'))\n\n    const isDatesPicker = computed(() => props.type === 'dates')\n\n    const triggerIcon = computed(\n      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n    )\n\n    const showClose = ref(false)\n\n    const onClearIconClick = (event) => {\n      if (props.readonly || pickerDisabled.value) return\n      if (showClose.value) {\n        event.stopPropagation()\n        emitInput(null)\n        emitChange(null, true)\n        showClose.value = false\n        pickerVisible.value = false\n        pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n      }\n    }\n    const valueIsEmpty = computed(() => {\n      return (\n        !props.modelValue ||\n        (Array.isArray(props.modelValue) && !props.modelValue.length)\n      )\n    })\n    const onMouseEnter = () => {\n      if (props.readonly || pickerDisabled.value) return\n      if (!valueIsEmpty.value && props.clearable) {\n        showClose.value = true\n      }\n    }\n    const onMouseLeave = () => {\n      showClose.value = false\n    }\n    const isRangeInput = computed(() => {\n      return props.type.indexOf('range') > -1\n    })\n\n    const pickerSize = useSize()\n\n    const popperPaneRef = computed(() => {\n      return refPopper.value?.popperRef?.contentRef\n    })\n\n    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n    const actualInputRef = computed(() => {\n      if (unref(isRangeInput)) {\n        return unref(inputRef)\n      }\n\n      return (unref(inputRef) as ComponentPublicInstance)?.$el\n    })\n\n    onClickOutside(actualInputRef, (e: PointerEvent) => {\n      const unrefedPopperEl = unref(popperEl)\n      const inputEl = unref(actualInputRef)\n      if (\n        (unrefedPopperEl &&\n          (e.target === unrefedPopperEl ||\n            e.composedPath().includes(unrefedPopperEl))) ||\n        e.target === inputEl ||\n        e.composedPath().includes(inputEl)\n      )\n        return\n      pickerVisible.value = false\n    })\n\n    const userInput = ref(null)\n\n    const handleChange = () => {\n      if (userInput.value) {\n        const value = parseUserInputToDayjs(displayValue.value)\n        if (value) {\n          if (isValidValue(value)) {\n            emitInput(\n              Array.isArray(value)\n                ? value.map((_) => _.toDate())\n                : value.toDate()\n            )\n            userInput.value = null\n          }\n        }\n      }\n      if (userInput.value === '') {\n        emitInput(null)\n        emitChange(null)\n        userInput.value = null\n      }\n    }\n\n    const blurInput = () => {\n      refInput.value.forEach((input) => input.blur())\n    }\n\n    const parseUserInputToDayjs = (value) => {\n      if (!value) return null\n      return pickerOptions.value.parseUserInput(value)\n    }\n\n    const formatDayjsToString = (value) => {\n      if (!value) return null\n      return pickerOptions.value.formatToString(value)\n    }\n\n    const isValidValue = (value) => {\n      return pickerOptions.value.isValidValue(value)\n    }\n\n    const handleKeydown = (event) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.esc) {\n        pickerVisible.value = false\n        event.stopPropagation()\n        return\n      }\n\n      if (code === EVENT_CODE.tab) {\n        if (!isRangeInput.value) {\n          handleChange()\n          pickerVisible.value = false\n          event.stopPropagation()\n        } else {\n          // user may change focus between two input\n          setTimeout(() => {\n            if (refInput.value.indexOf(document.activeElement) === -1) {\n              pickerVisible.value = false\n              blurInput()\n            }\n          }, 0)\n        }\n        return\n      }\n\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n        if (\n          userInput.value === null ||\n          userInput.value === '' ||\n          isValidValue(parseUserInputToDayjs(displayValue.value))\n        ) {\n          handleChange()\n          pickerVisible.value = false\n        }\n        event.stopPropagation()\n        return\n      }\n\n      // if user is typing, do not let picker handle key input\n      if (userInput.value) {\n        event.stopPropagation()\n        return\n      }\n\n      if (pickerOptions.value.handleKeydown) {\n        pickerOptions.value.handleKeydown(event)\n      }\n    }\n    const onUserInput = (e) => {\n      userInput.value = e\n    }\n\n    const handleStartInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [event.target.value, userInput.value[1]]\n      } else {\n        userInput.value = [event.target.value, null]\n      }\n    }\n\n    const handleEndInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [userInput.value[0], event.target.value]\n      } else {\n        userInput.value = [null, event.target.value]\n      }\n    }\n\n    const handleStartChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n      if (value && value.isValid()) {\n        userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n        const newValue = [value, parsedValue.value && parsedValue.value[1]]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const handleEndChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n      if (value && value.isValid()) {\n        userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n        const newValue = [parsedValue.value && parsedValue.value[0], value]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const pickerOptions = ref<Partial<PickerOptions>>({})\n    const onSetPickerOption = <T extends keyof PickerOptions>(\n      e: [T, PickerOptions[T]]\n    ) => {\n      pickerOptions.value[e[0]] = e[1]\n      pickerOptions.value.panelReady = true\n    }\n\n    const onCalendarChange = (e) => {\n      ctx.emit('calendar-change', e)\n    }\n\n    provide('EP_PICKER_BASE', {\n      props,\n    })\n\n    return {\n      // injected popper options\n      elPopperOptions,\n\n      isDatesPicker,\n      handleEndChange,\n      handleStartChange,\n      handleStartInput,\n      handleEndInput,\n      onUserInput,\n      handleChange,\n      handleKeydown,\n      popperPaneRef,\n      onClickOutside,\n      pickerSize,\n      isRangeInput,\n      onMouseLeave,\n      onMouseEnter,\n      onClearIconClick,\n      showClose,\n      triggerIcon,\n      onPick,\n      handleFocus,\n      handleBlur,\n      pickerVisible,\n      pickerActualVisible,\n      displayValue,\n      parsedValue,\n      setSelectionRange,\n      refPopper,\n      inputRef,\n      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;0BAmGqB;;;;;;;;wBAlGnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA;IACA,gCAA8B;IAC9B,cAAY,CAAC;IACd;IACC;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;uBAEI;;;YAGA;;;;wBAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;eAMjBA;iBACE;;;;;;;iBAQC;mBACA;;;8DAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;mBAQC,aAAQ;+CACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;6DAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}
+{"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue?vue&type=template&id=1d54be91&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    effect=\"light\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    append-to-body\n    transition=\"el-zoom-in-top\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    :hide-after=\"0\"\n    persistent\n    @show=\"pickerActualVisible = true\"\n    @hide=\"pickerActualVisible = false\"\n  >\n    <template #default>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"id\"\n        ref=\"inputRef\"\n        :model-value=\"displayValue\"\n        :name=\"name\"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        class=\"el-date-editor\"\n        :class=\"['el-date-editor--' + type, $attrs.class || undefined]\"\n        :style=\"$attrs.style || undefined\"\n        :readonly=\"!editable || readonly || isDatesPicker || type === 'week'\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @keydown=\"handleKeydown\"\n        @change=\"handleChange\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @click.stop\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            class=\"el-input__icon\"\n            @click=\"handleFocus\"\n          >\n            <component :is=\"triggerIcon\"></component>\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClose && clearIcon\"\n            class=\"el-input__icon clear-icon\"\n            @click=\"onClearIconClick\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <div\n        v-else\n        ref=\"inputRef\"\n        class=\"el-date-editor el-range-editor el-input__inner\"\n        :class=\"[\n          'el-date-editor--' + type,\n          pickerSize ? `el-range-editor--${pickerSize}` : '',\n          pickerDisabled ? 'is-disabled' : '',\n          pickerVisible ? 'is-active' : '',\n          $attrs.class || undefined,\n        ]\"\n        :style=\"$attrs.style || undefined\"\n        @click=\"handleFocus\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"handleKeydown\"\n      >\n        <el-icon\n          v-if=\"triggerIcon\"\n          class=\"el-input__icon el-range__icon\"\n          @click=\"handleFocus\"\n        >\n          <component :is=\"triggerIcon\"></component>\n        </el-icon>\n        <input\n          :id=\"id && id[0]\"\n          autocomplete=\"off\"\n          :name=\"name && name[0]\"\n          :placeholder=\"startPlaceholder\"\n          :value=\"displayValue && displayValue[0]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @input=\"handleStartInput\"\n          @change=\"handleStartChange\"\n          @focus=\"handleFocus\"\n        />\n        <slot name=\"range-separator\">\n          <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n        </slot>\n        <input\n          :id=\"id && id[1]\"\n          autocomplete=\"off\"\n          :name=\"name && name[1]\"\n          :placeholder=\"endPlaceholder\"\n          :value=\"displayValue && displayValue[1]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @focus=\"handleFocus\"\n          @input=\"handleEndInput\"\n          @change=\"handleEndChange\"\n        />\n        <el-icon\n          v-if=\"clearIcon\"\n          class=\"el-input__icon el-range__close-icon\"\n          :class=\"{\n            'el-range__close-icon--hidden': !showClose,\n          }\"\n          @click=\"onClearIconClick\"\n        >\n          <component :is=\"clearIcon\" />\n        </el-icon>\n      </div>\n    </template>\n    <template #content>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @panel-change=\"onPanelChange\"\n        @mousedown.stop\n      ></slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n  unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n  isValidValue: (date: Dayjs) => boolean\n  handleKeydown: (event: KeyboardEvent) => void\n  parseUserInput: (value: Dayjs) => dayjs.Dayjs\n  formatToString: (value: Dayjs) => string | string[]\n  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n  getDefaultValue: () => Dayjs\n  panelReady: boolean\n  handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date | any, b: Date | any) {\n  const aIsDate = a instanceof Date\n  const bIsDate = b instanceof Date\n  if (aIsDate && bIsDate) {\n    return a.getTime() === b.getTime()\n  }\n  if (!aIsDate && !bIsDate) {\n    return a === b\n  }\n  return false\n}\n\nconst valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {\n  const aIsArray = a instanceof Array\n  const bIsArray = b instanceof Array\n  if (aIsArray && bIsArray) {\n    if (a.length !== b.length) {\n      return false\n    }\n    return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n  }\n  if (!aIsArray && !bIsArray) {\n    return dateEquals(a, b)\n  }\n  return false\n}\n\nconst parser = function (\n  date: Date | string,\n  format: string,\n  lang: string\n): Dayjs {\n  const day =\n    isEmpty(format) || format === 'x'\n      ? dayjs(date).locale(lang)\n      : dayjs(date, format).locale(lang)\n  return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number | Date, format: string, lang: string) {\n  if (isEmpty(format)) return date\n  if (format === 'x') return +date\n  return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElTooltip,\n    ElIcon,\n  },\n  props: timePickerDefaultProps,\n  emits: [\n    'update:modelValue',\n    'change',\n    'focus',\n    'blur',\n    'calendar-change',\n    'panel-change',\n  ],\n  setup(props, ctx) {\n    const { lang } = useLocale()\n\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n    const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n    const refPopper = ref<InstanceType<typeof ElTooltip>>()\n    const inputRef = ref<HTMLElement | ComponentPublicInstance>()\n    const pickerVisible = ref(false)\n    const pickerActualVisible = ref(false)\n    const valueOnOpen = ref(null)\n\n    watch(pickerVisible, (val) => {\n      if (!val) {\n        userInput.value = null\n        nextTick(() => {\n          emitChange(props.modelValue)\n        })\n        ctx.emit('blur')\n        blurInput()\n        props.validateEvent && elFormItem.validate?.('blur')\n      } else {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n    const emitChange = (val, isClear?: boolean) => {\n      // determine user real change only\n      if (isClear || !valueEquals(val, valueOnOpen.value)) {\n        ctx.emit('change', val)\n        props.validateEvent && elFormItem.validate?.('change')\n      }\n    }\n    const emitInput = (val) => {\n      if (!valueEquals(props.modelValue, val)) {\n        let formatValue\n        if (Array.isArray(val)) {\n          formatValue = val.map((_) =>\n            formatter(_, props.valueFormat, lang.value)\n          )\n        } else if (val) {\n          formatValue = formatter(val, props.valueFormat, lang.value)\n        }\n        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n      }\n    }\n    const refInput = computed<HTMLInputElement[]>(() => {\n      if (inputRef.value) {\n        const _r = isRangeInput.value\n          ? inputRef.value\n          : (inputRef.value as any as ComponentPublicInstance).$el\n        return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\n      }\n      return []\n    })\n    const refStartInput = computed(() => {\n      return refInput?.value[0]\n    })\n    const refEndInput = computed(() => {\n      return refInput?.value[1]\n    })\n    const setSelectionRange = (start, end, pos) => {\n      const _inputs = refInput.value\n      if (!_inputs.length) return\n      if (!pos || pos === 'min') {\n        _inputs[0].setSelectionRange(start, end)\n        _inputs[0].focus()\n      } else if (pos === 'max') {\n        _inputs[1].setSelectionRange(start, end)\n        _inputs[1].focus()\n      }\n    }\n    const onPick = (date: any = '', visible = false) => {\n      pickerVisible.value = visible\n      let result\n      if (Array.isArray(date)) {\n        result = date.map((_) => _.toDate())\n      } else {\n        // clear btn emit null\n        result = date ? date.toDate() : date\n      }\n      userInput.value = null\n      emitInput(result)\n    }\n\n    const focus = (focusStartInput = true) => {\n      let input = refStartInput.value\n      if (!focusStartInput && isRangeInput.value) {\n        input = refEndInput.value\n      }\n      if (input) {\n        input.focus()\n      }\n    }\n\n    const handleFocus = (e) => {\n      if (props.readonly || pickerDisabled.value || pickerVisible.value) return\n      pickerVisible.value = true\n      ctx.emit('focus', e)\n    }\n\n    const handleBlur = () => {\n      refPopper.value?.onClose()\n      blurInput()\n    }\n\n    const pickerDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const parsedValue = computed(() => {\n      let result\n      if (valueIsEmpty.value) {\n        if (pickerOptions.value.getDefaultValue) {\n          result = pickerOptions.value.getDefaultValue()\n        }\n      } else {\n        if (Array.isArray(props.modelValue)) {\n          result = props.modelValue.map((_) =>\n            parser(_, props.valueFormat, lang.value)\n          )\n        } else {\n          result = parser(props.modelValue, props.valueFormat, lang.value)\n        }\n      }\n\n      if (pickerOptions.value.getRangeAvailableTime) {\n        const availableResult =\n          pickerOptions.value.getRangeAvailableTime(result)\n        if (!isEqual(availableResult, result)) {\n          result = availableResult\n          emitInput(\n            Array.isArray(result)\n              ? result.map((_) => _.toDate())\n              : result.toDate()\n          )\n        }\n      }\n      if (Array.isArray(result) && result.some((_) => !_)) {\n        result = []\n      }\n      return result\n    })\n\n    const displayValue = computed(() => {\n      if (!pickerOptions.value.panelReady) return\n      const formattedValue = formatDayjsToString(parsedValue.value)\n      if (Array.isArray(userInput.value)) {\n        return [\n          userInput.value[0] || (formattedValue && formattedValue[0]) || '',\n          userInput.value[1] || (formattedValue && formattedValue[1]) || '',\n        ]\n      } else if (userInput.value !== null) {\n        return userInput.value\n      }\n      if (!isTimePicker.value && valueIsEmpty.value) return\n      if (!pickerVisible.value && valueIsEmpty.value) return\n      if (formattedValue) {\n        return isDatesPicker.value\n          ? (formattedValue as Array<string>).join(', ')\n          : formattedValue\n      }\n      return ''\n    })\n\n    const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n    const isTimePicker = computed(() => props.type.startsWith('time'))\n\n    const isDatesPicker = computed(() => props.type === 'dates')\n\n    const triggerIcon = computed(\n      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n    )\n\n    const showClose = ref(false)\n\n    const onClearIconClick = (event) => {\n      if (props.readonly || pickerDisabled.value) return\n      if (showClose.value) {\n        event.stopPropagation()\n        emitInput(null)\n        emitChange(null, true)\n        showClose.value = false\n        pickerVisible.value = false\n        pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n      }\n    }\n    const valueIsEmpty = computed(() => {\n      return (\n        !props.modelValue ||\n        (Array.isArray(props.modelValue) && !props.modelValue.length)\n      )\n    })\n    const onMouseEnter = () => {\n      if (props.readonly || pickerDisabled.value) return\n      if (!valueIsEmpty.value && props.clearable) {\n        showClose.value = true\n      }\n    }\n    const onMouseLeave = () => {\n      showClose.value = false\n    }\n    const isRangeInput = computed(() => {\n      return props.type.indexOf('range') > -1\n    })\n\n    const pickerSize = useSize()\n\n    const popperPaneRef = computed(() => {\n      return refPopper.value?.popperRef?.contentRef\n    })\n\n    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n    const actualInputRef = computed(() => {\n      if (unref(isRangeInput)) {\n        return unref(inputRef)\n      }\n\n      return (unref(inputRef) as ComponentPublicInstance)?.$el\n    })\n\n    onClickOutside(actualInputRef, (e: PointerEvent) => {\n      const unrefedPopperEl = unref(popperEl)\n      const inputEl = unref(actualInputRef)\n      if (\n        (unrefedPopperEl &&\n          (e.target === unrefedPopperEl ||\n            e.composedPath().includes(unrefedPopperEl))) ||\n        e.target === inputEl ||\n        e.composedPath().includes(inputEl)\n      )\n        return\n      pickerVisible.value = false\n    })\n\n    const userInput = ref(null)\n\n    const handleChange = () => {\n      if (userInput.value) {\n        const value = parseUserInputToDayjs(displayValue.value)\n        if (value) {\n          if (isValidValue(value)) {\n            emitInput(\n              Array.isArray(value)\n                ? value.map((_) => _.toDate())\n                : value.toDate()\n            )\n            userInput.value = null\n          }\n        }\n      }\n      if (userInput.value === '') {\n        emitInput(null)\n        emitChange(null)\n        userInput.value = null\n      }\n    }\n\n    const blurInput = () => {\n      refInput.value.forEach((input) => input.blur())\n    }\n\n    const parseUserInputToDayjs = (value) => {\n      if (!value) return null\n      return pickerOptions.value.parseUserInput(value)\n    }\n\n    const formatDayjsToString = (value) => {\n      if (!value) return null\n      return pickerOptions.value.formatToString(value)\n    }\n\n    const isValidValue = (value) => {\n      return pickerOptions.value.isValidValue(value)\n    }\n\n    const handleKeydown = (event) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.esc) {\n        pickerVisible.value = false\n        event.stopPropagation()\n        return\n      }\n\n      if (code === EVENT_CODE.tab) {\n        if (!isRangeInput.value) {\n          handleChange()\n          pickerVisible.value = false\n          event.stopPropagation()\n        } else {\n          // user may change focus between two input\n          setTimeout(() => {\n            if (refInput.value.indexOf(document.activeElement) === -1) {\n              pickerVisible.value = false\n              blurInput()\n            }\n          }, 0)\n        }\n        return\n      }\n\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n        if (\n          userInput.value === null ||\n          userInput.value === '' ||\n          isValidValue(parseUserInputToDayjs(displayValue.value))\n        ) {\n          handleChange()\n          pickerVisible.value = false\n        }\n        event.stopPropagation()\n        return\n      }\n\n      // if user is typing, do not let picker handle key input\n      if (userInput.value) {\n        event.stopPropagation()\n        return\n      }\n\n      if (pickerOptions.value.handleKeydown) {\n        pickerOptions.value.handleKeydown(event)\n      }\n    }\n    const onUserInput = (e) => {\n      userInput.value = e\n    }\n\n    const handleStartInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [event.target.value, userInput.value[1]]\n      } else {\n        userInput.value = [event.target.value, null]\n      }\n    }\n\n    const handleEndInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [userInput.value[0], event.target.value]\n      } else {\n        userInput.value = [null, event.target.value]\n      }\n    }\n\n    const handleStartChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n      if (value && value.isValid()) {\n        userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n        const newValue = [value, parsedValue.value && parsedValue.value[1]]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const handleEndChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n      if (value && value.isValid()) {\n        userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n        const newValue = [parsedValue.value && parsedValue.value[0], value]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const pickerOptions = ref<Partial<PickerOptions>>({})\n    const onSetPickerOption = <T extends keyof PickerOptions>(\n      e: [T, PickerOptions[T]]\n    ) => {\n      pickerOptions.value[e[0]] = e[1]\n      pickerOptions.value.panelReady = true\n    }\n\n    const onCalendarChange = (e) => {\n      ctx.emit('calendar-change', e)\n    }\n\n    const onPanelChange = (value, mode, view) => {\n      ctx.emit('panel-change', value, mode, view)\n    }\n\n    provide('EP_PICKER_BASE', {\n      props,\n    })\n\n    return {\n      // injected popper options\n      elPopperOptions,\n\n      isDatesPicker,\n      handleEndChange,\n      handleStartChange,\n      handleStartInput,\n      handleEndInput,\n      onUserInput,\n      handleChange,\n      handleKeydown,\n      popperPaneRef,\n      onClickOutside,\n      pickerSize,\n      isRangeInput,\n      onMouseLeave,\n      onMouseEnter,\n      onClearIconClick,\n      showClose,\n      triggerIcon,\n      onPick,\n      handleFocus,\n      handleBlur,\n      pickerVisible,\n      pickerActualVisible,\n      displayValue,\n      parsedValue,\n      setSelectionRange,\n      refPopper,\n      inputRef,\n      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n      onPanelChange,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;0BAmGqB;;;;;;;;wBAlGnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA;IACA,gCAA8B;IAC9B,cAAY,CAAC;IACd;IACC;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;uBAEI;;;YAGA;;;;wBAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;eAMjBA;iBACE;;;;;;;iBAQC;mBACA;;;8DAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;mBAQC,aAAQ;+CACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;6DAGI;;aAGH;;;;;;;;;;;;;;;;;;QAaP;qBACc;QACd;;QAEA;;;;;;"}

package/es/components/time-picker/src/time-picker-com/basic-time-spinner.vue.d.ts

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
     };
 }, {
-    getRefId: (item: any) => string;
+    setRef: (scrollbar: any, type: any) => void;
     spinnerItems: import("vue").ComputedRef<string[]>;
     currentScrollbar: Ref<null>;
     hours: import("vue").ComputedRef<number>;

package/es/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_script_lang.mjs

@@ -154,13 +154,13 @@ var script = defineComponent({
       if (props.arrowControl)
         return;
       const el = listRefsMap[type];
-      if (el.value) {
-        el.value.$el.querySelector(".el-scrollbar__wrap").scrollTop = Math.max(0, value * typeItemHeight(type));
+      if (el && el.$el) {
+        el.$el.querySelector(".el-scrollbar__wrap").scrollTop = Math.max(0, value * typeItemHeight(type));
       }
     };
     const typeItemHeight = (type) => {
       const el = listRefsMap[type];
-      return el.value.$el.querySelector("li").offsetHeight;
+      return el.$el.querySelector("li").offsetHeight;
     };
     const onIncreaseClick = () => {
       scrollDown(1);
@@ -207,16 +207,16 @@ var script = defineComponent({
     const handleScroll = (type) => {
       isScrolling = true;
       debouncedResetScroll(type);
-      const value = Math.min(Math.round((listRefsMap[type].value.$el.querySelector(".el-scrollbar__wrap").scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59);
+      const value = Math.min(Math.round((listRefsMap[type].$el.querySelector(".el-scrollbar__wrap").scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59);
       modifyDateField(type, value);
     };
     const scrollBarHeight = (type) => {
-      return listRefsMap[type].value.$el.offsetHeight;
+      return listRefsMap[type].$el.offsetHeight;
     };
     const bindScrollEvent = () => {
       const bindFuntion = (type) => {
-        if (listRefsMap[type].value) {
-          listRefsMap[type].value.$el.querySelector(".el-scrollbar__wrap").onscroll = () => {
+        if (listRefsMap[type] && listRefsMap[type].$el) {
+          listRefsMap[type].$el.querySelector(".el-scrollbar__wrap").onscroll = () => {
             handleScroll(type);
           };
         }
@@ -233,8 +233,8 @@ var script = defineComponent({
           emitSelectRange("hours");
       });
     });
-    const getRefId = (item) => {
-      return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`;
+    const setRef = (scrollbar, type) => {
+      listRefsMap[type] = scrollbar;
     };
     ctx.emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
     ctx.emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
@@ -245,7 +245,7 @@ var script = defineComponent({
       adjustSpinners();
     });
     return {
-      getRefId,
+      setRef,
       spinnerItems,
       currentScrollbar,
       hours,

package/es/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"basic-time-spinner.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n  <div class=\"el-time-spinner\" :class=\"{ 'has-seconds': showSeconds }\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"getRefId(item)\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in listMap[item].value\"\n          :key=\"key\"\n          class=\"el-time-spinner__item\"\n          :class=\"{ active: key === timePartsMap[item].value, disabled }\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        class=\"el-time-spinner__wrapper is-arrow\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecreaseClick\"\n          class=\"el-time-spinner__arrow arrow-up\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncreaseClick\"\n          class=\"el-time-spinner__arrow arrow-down\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul class=\"el-time-spinner__list\">\n          <li\n            v-for=\"(time, key) in arrowListMap[item].value\"\n            :key=\"key\"\n            class=\"el-time-spinner__item\"\n            :class=\"{\n              active: time === timePartsMap[item].value,\n              disabled: listMap[item].value[time],\n            }\"\n          >\n            <template v-if=\"typeof time === 'number'\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, nextTick, computed, onMounted, watch } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { RepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowUp, ArrowDown } from '@element-plus/icons-vue'\nimport { getTimeLists } from './useTimePicker'\n\nimport type { PropType, Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  directives: {\n    repeatClick: RepeatClick,\n  },\n\n  components: {\n    ElScrollbar,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n  },\n\n  props: {\n    role: {\n      type: String,\n      required: true,\n    },\n    spinnerDate: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    showSeconds: {\n      type: Boolean,\n      default: true,\n    },\n    arrowControl: Boolean,\n    amPmMode: {\n      type: String,\n      default: '', // 'a': am/pm; 'A': AM/PM\n    },\n    disabledHours: {\n      type: Function,\n    },\n    disabledMinutes: {\n      type: Function,\n    },\n    disabledSeconds: {\n      type: Function,\n    },\n  },\n\n  emits: ['change', 'select-range', 'set-option'],\n\n  setup(props, ctx) {\n    // data\n    let isScrolling = false\n    const debouncedResetScroll = debounce((type) => {\n      isScrolling = false\n      adjustCurrentSpinner(type)\n    }, 200)\n    const currentScrollbar = ref(null)\n    const listHoursRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listMinutesRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listSecondsRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listRefsMap = {\n      hours: listHoursRef,\n      minutes: listMinutesRef,\n      seconds: listSecondsRef,\n    }\n\n    // computed\n    const spinnerItems = computed(() => {\n      const arr = ['hours', 'minutes', 'seconds']\n      return props.showSeconds ? arr : arr.slice(0, 2)\n    })\n    const hours = computed(() => {\n      return props.spinnerDate.hour()\n    })\n    const minutes = computed(() => {\n      return props.spinnerDate.minute()\n    })\n    const seconds = computed(() => {\n      return props.spinnerDate.second()\n    })\n    const timePartsMap = computed(() => ({\n      hours,\n      minutes,\n      seconds,\n    }))\n    const hoursList = computed(() => {\n      return getHoursList(props.role)\n    })\n    const minutesList = computed(() => {\n      return getMinutesList(hours.value, props.role)\n    })\n    const secondsList = computed(() => {\n      return getSecondsList(hours.value, minutes.value, props.role)\n    })\n    const listMap = computed(() => ({\n      hours: hoursList,\n      minutes: minutesList,\n      seconds: secondsList,\n    }))\n    const arrowHourList = computed(() => {\n      const hour = hours.value\n      return [\n        hour > 0 ? hour - 1 : undefined,\n        hour,\n        hour < 23 ? hour + 1 : undefined,\n      ]\n    })\n    const arrowMinuteList = computed(() => {\n      const minute = minutes.value\n      return [\n        minute > 0 ? minute - 1 : undefined,\n        minute,\n        minute < 59 ? minute + 1 : undefined,\n      ]\n    })\n    const arrowSecondList = computed(() => {\n      const second = seconds.value\n      return [\n        second > 0 ? second - 1 : undefined,\n        second,\n        second < 59 ? second + 1 : undefined,\n      ]\n    })\n    const arrowListMap = computed(() => ({\n      hours: arrowHourList,\n      minutes: arrowMinuteList,\n      seconds: arrowSecondList,\n    }))\n    const getAmPmFlag = (hour) => {\n      const shouldShowAmPm = !!props.amPmMode\n      if (!shouldShowAmPm) return ''\n      const isCapital = props.amPmMode === 'A'\n      // todo locale\n      let content = hour < 12 ? ' am' : ' pm'\n      if (isCapital) content = content.toUpperCase()\n      return content\n    }\n\n    const emitSelectRange = (type) => {\n      if (type === 'hours') {\n        ctx.emit('select-range', 0, 2)\n      } else if (type === 'minutes') {\n        ctx.emit('select-range', 3, 5)\n      } else if (type === 'seconds') {\n        ctx.emit('select-range', 6, 8)\n      }\n      currentScrollbar.value = type\n    }\n\n    const adjustCurrentSpinner = (type) => {\n      adjustSpinner(type, timePartsMap.value[type].value)\n    }\n\n    // NOTE: used by datetime / date-range panel\n    //       renamed from adjustScrollTop\n    //       should try to refactory it\n    const adjustSpinners = () => {\n      adjustCurrentSpinner('hours')\n      adjustCurrentSpinner('minutes')\n      adjustCurrentSpinner('seconds')\n    }\n\n    const adjustSpinner = (type, value) => {\n      if (props.arrowControl) return\n      const el = listRefsMap[type]\n      if (el.value) {\n        el.value.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(\n          0,\n          value * typeItemHeight(type)\n        )\n      }\n    }\n\n    const typeItemHeight = (type) => {\n      const el = listRefsMap[type]\n      return el.value.$el.querySelector('li').offsetHeight\n    }\n\n    const onIncreaseClick = () => {\n      scrollDown(1)\n    }\n\n    const onDecreaseClick = () => {\n      scrollDown(-1)\n    }\n\n    const scrollDown = (step) => {\n      if (!currentScrollbar.value) {\n        emitSelectRange('hours')\n      }\n\n      const label = currentScrollbar.value\n      let now = timePartsMap.value[label].value\n      const total = currentScrollbar.value === 'hours' ? 24 : 60\n      now = (now + step + total) % total\n\n      modifyDateField(label, now)\n      adjustSpinner(label, now)\n      nextTick(() => emitSelectRange(currentScrollbar.value))\n    }\n\n    const modifyDateField = (type, value) => {\n      const list = listMap.value[type].value\n      const isDisabled = list[value]\n      if (isDisabled) return\n      switch (type) {\n        case 'hours':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(value)\n              .minute(minutes.value)\n              .second(seconds.value)\n          )\n          break\n        case 'minutes':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(value)\n              .second(seconds.value)\n          )\n          break\n        case 'seconds':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(minutes.value)\n              .second(value)\n          )\n          break\n      }\n    }\n\n    const handleClick = (type, { value, disabled }) => {\n      if (!disabled) {\n        modifyDateField(type, value)\n        emitSelectRange(type)\n        adjustSpinner(type, value)\n      }\n    }\n\n    const handleScroll = (type) => {\n      isScrolling = true\n      debouncedResetScroll(type)\n      const value = Math.min(\n        Math.round(\n          (listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap')\n            .scrollTop -\n            (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n            3) /\n            typeItemHeight(type)\n        ),\n        type === 'hours' ? 23 : 59\n      )\n      modifyDateField(type, value)\n    }\n\n    const scrollBarHeight = (type) => {\n      return listRefsMap[type].value.$el.offsetHeight\n    }\n\n    const bindScrollEvent = () => {\n      const bindFuntion = (type) => {\n        if (listRefsMap[type].value) {\n          listRefsMap[type].value.$el.querySelector(\n            '.el-scrollbar__wrap'\n          ).onscroll = () => {\n            // TODO: scroll is emitted when set scrollTop programatically\n            // should find better solutions in the future!\n            handleScroll(type)\n          }\n        }\n      }\n      bindFuntion('hours')\n      bindFuntion('minutes')\n      bindFuntion('seconds')\n    }\n\n    onMounted(() => {\n      nextTick(() => {\n        !props.arrowControl && bindScrollEvent()\n        adjustSpinners()\n        // set selection on the first hour part\n        if (props.role === 'start') emitSelectRange('hours')\n      })\n    })\n\n    const getRefId = (item) => {\n      return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`\n    }\n\n    ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown])\n    ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\n    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n      props.disabledHours,\n      props.disabledMinutes,\n      props.disabledSeconds\n    )\n\n    watch(\n      () => props.spinnerDate,\n      () => {\n        if (isScrolling) return\n        adjustSpinners()\n      }\n    )\n\n    return {\n      getRefId,\n      spinnerItems,\n      currentScrollbar,\n      hours,\n      minutes,\n      seconds,\n      hoursList,\n      minutesList,\n      arrowHourList,\n      arrowMinuteList,\n      arrowSecondList,\n      getAmPmFlag,\n      emitSelectRange,\n      adjustCurrentSpinner,\n      typeItemHeight,\n      listHoursRef,\n      listMinutesRef,\n      listSecondsRef,\n      onIncreaseClick,\n      onDecreaseClick,\n      handleClick,\n      secondsList,\n      timePartsMap,\n      arrowListMap,\n      listMap,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"basic-time-spinner.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n  <div class=\"el-time-spinner\" :class=\"{ 'has-seconds': showSeconds }\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"(scollbar) => setRef(scollbar, item)\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in listMap[item].value\"\n          :key=\"key\"\n          class=\"el-time-spinner__item\"\n          :class=\"{ active: key === timePartsMap[item].value, disabled }\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        class=\"el-time-spinner__wrapper is-arrow\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecreaseClick\"\n          class=\"el-time-spinner__arrow arrow-up\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncreaseClick\"\n          class=\"el-time-spinner__arrow arrow-down\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul class=\"el-time-spinner__list\">\n          <li\n            v-for=\"(time, key) in arrowListMap[item].value\"\n            :key=\"key\"\n            class=\"el-time-spinner__item\"\n            :class=\"{\n              active: time === timePartsMap[item].value,\n              disabled: listMap[item].value[time],\n            }\"\n          >\n            <template v-if=\"typeof time === 'number'\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, nextTick, computed, onMounted, watch } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { RepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowUp, ArrowDown } from '@element-plus/icons-vue'\nimport { getTimeLists } from './useTimePicker'\n\nimport type { PropType, Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  directives: {\n    repeatClick: RepeatClick,\n  },\n\n  components: {\n    ElScrollbar,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n  },\n\n  props: {\n    role: {\n      type: String,\n      required: true,\n    },\n    spinnerDate: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    showSeconds: {\n      type: Boolean,\n      default: true,\n    },\n    arrowControl: Boolean,\n    amPmMode: {\n      type: String,\n      default: '', // 'a': am/pm; 'A': AM/PM\n    },\n    disabledHours: {\n      type: Function,\n    },\n    disabledMinutes: {\n      type: Function,\n    },\n    disabledSeconds: {\n      type: Function,\n    },\n  },\n\n  emits: ['change', 'select-range', 'set-option'],\n\n  setup(props, ctx) {\n    // data\n    let isScrolling = false\n    const debouncedResetScroll = debounce((type) => {\n      isScrolling = false\n      adjustCurrentSpinner(type)\n    }, 200)\n    const currentScrollbar = ref(null)\n    const listHoursRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listMinutesRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listSecondsRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listRefsMap = {\n      hours: listHoursRef,\n      minutes: listMinutesRef,\n      seconds: listSecondsRef,\n    }\n\n    // computed\n    const spinnerItems = computed(() => {\n      const arr = ['hours', 'minutes', 'seconds']\n      return props.showSeconds ? arr : arr.slice(0, 2)\n    })\n    const hours = computed(() => {\n      return props.spinnerDate.hour()\n    })\n    const minutes = computed(() => {\n      return props.spinnerDate.minute()\n    })\n    const seconds = computed(() => {\n      return props.spinnerDate.second()\n    })\n    const timePartsMap = computed(() => ({\n      hours,\n      minutes,\n      seconds,\n    }))\n    const hoursList = computed(() => {\n      return getHoursList(props.role)\n    })\n    const minutesList = computed(() => {\n      return getMinutesList(hours.value, props.role)\n    })\n    const secondsList = computed(() => {\n      return getSecondsList(hours.value, minutes.value, props.role)\n    })\n    const listMap = computed(() => ({\n      hours: hoursList,\n      minutes: minutesList,\n      seconds: secondsList,\n    }))\n    const arrowHourList = computed(() => {\n      const hour = hours.value\n      return [\n        hour > 0 ? hour - 1 : undefined,\n        hour,\n        hour < 23 ? hour + 1 : undefined,\n      ]\n    })\n    const arrowMinuteList = computed(() => {\n      const minute = minutes.value\n      return [\n        minute > 0 ? minute - 1 : undefined,\n        minute,\n        minute < 59 ? minute + 1 : undefined,\n      ]\n    })\n    const arrowSecondList = computed(() => {\n      const second = seconds.value\n      return [\n        second > 0 ? second - 1 : undefined,\n        second,\n        second < 59 ? second + 1 : undefined,\n      ]\n    })\n    const arrowListMap = computed(() => ({\n      hours: arrowHourList,\n      minutes: arrowMinuteList,\n      seconds: arrowSecondList,\n    }))\n    const getAmPmFlag = (hour) => {\n      const shouldShowAmPm = !!props.amPmMode\n      if (!shouldShowAmPm) return ''\n      const isCapital = props.amPmMode === 'A'\n      // todo locale\n      let content = hour < 12 ? ' am' : ' pm'\n      if (isCapital) content = content.toUpperCase()\n      return content\n    }\n\n    const emitSelectRange = (type) => {\n      if (type === 'hours') {\n        ctx.emit('select-range', 0, 2)\n      } else if (type === 'minutes') {\n        ctx.emit('select-range', 3, 5)\n      } else if (type === 'seconds') {\n        ctx.emit('select-range', 6, 8)\n      }\n      currentScrollbar.value = type\n    }\n\n    const adjustCurrentSpinner = (type) => {\n      adjustSpinner(type, timePartsMap.value[type].value)\n    }\n\n    // NOTE: used by datetime / date-range panel\n    //       renamed from adjustScrollTop\n    //       should try to refactory it\n    const adjustSpinners = () => {\n      adjustCurrentSpinner('hours')\n      adjustCurrentSpinner('minutes')\n      adjustCurrentSpinner('seconds')\n    }\n\n    const adjustSpinner = (type, value) => {\n      if (props.arrowControl) return\n      const el = listRefsMap[type]\n      if (el && el.$el) {\n        el.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(\n          0,\n          value * typeItemHeight(type)\n        )\n      }\n    }\n\n    const typeItemHeight = (type) => {\n      const el = listRefsMap[type]\n      return el.$el.querySelector('li').offsetHeight\n    }\n\n    const onIncreaseClick = () => {\n      scrollDown(1)\n    }\n\n    const onDecreaseClick = () => {\n      scrollDown(-1)\n    }\n\n    const scrollDown = (step) => {\n      if (!currentScrollbar.value) {\n        emitSelectRange('hours')\n      }\n\n      const label = currentScrollbar.value\n      let now = timePartsMap.value[label].value\n      const total = currentScrollbar.value === 'hours' ? 24 : 60\n      now = (now + step + total) % total\n\n      modifyDateField(label, now)\n      adjustSpinner(label, now)\n      nextTick(() => emitSelectRange(currentScrollbar.value))\n    }\n\n    const modifyDateField = (type, value) => {\n      const list = listMap.value[type].value\n      const isDisabled = list[value]\n      if (isDisabled) return\n      switch (type) {\n        case 'hours':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(value)\n              .minute(minutes.value)\n              .second(seconds.value)\n          )\n          break\n        case 'minutes':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(value)\n              .second(seconds.value)\n          )\n          break\n        case 'seconds':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(minutes.value)\n              .second(value)\n          )\n          break\n      }\n    }\n\n    const handleClick = (type, { value, disabled }) => {\n      if (!disabled) {\n        modifyDateField(type, value)\n        emitSelectRange(type)\n        adjustSpinner(type, value)\n      }\n    }\n\n    const handleScroll = (type) => {\n      isScrolling = true\n      debouncedResetScroll(type)\n      const value = Math.min(\n        Math.round(\n          (listRefsMap[type].$el.querySelector('.el-scrollbar__wrap')\n            .scrollTop -\n            (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n            3) /\n            typeItemHeight(type)\n        ),\n        type === 'hours' ? 23 : 59\n      )\n      modifyDateField(type, value)\n    }\n\n    const scrollBarHeight = (type) => {\n      return listRefsMap[type].$el.offsetHeight\n    }\n\n    const bindScrollEvent = () => {\n      const bindFuntion = (type) => {\n        if (listRefsMap[type] && listRefsMap[type].$el) {\n          listRefsMap[type].$el.querySelector('.el-scrollbar__wrap').onscroll =\n            () => {\n              // TODO: scroll is emitted when set scrollTop programatically\n              // should find better solutions in the future!\n              handleScroll(type)\n            }\n        }\n      }\n      bindFuntion('hours')\n      bindFuntion('minutes')\n      bindFuntion('seconds')\n    }\n\n    onMounted(() => {\n      nextTick(() => {\n        !props.arrowControl && bindScrollEvent()\n        adjustSpinners()\n        // set selection on the first hour part\n        if (props.role === 'start') emitSelectRange('hours')\n      })\n    })\n\n    const setRef = (scrollbar, type) => {\n      listRefsMap[type] = scrollbar\n    }\n\n    ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown])\n    ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\n    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n      props.disabledHours,\n      props.disabledMinutes,\n      props.disabledSeconds\n    )\n\n    watch(\n      () => props.spinnerDate,\n      () => {\n        if (isScrolling) return\n        adjustSpinners()\n      }\n    )\n\n    return {\n      setRef,\n      spinnerItems,\n      currentScrollbar,\n      hours,\n      minutes,\n      seconds,\n      hoursList,\n      minutesList,\n      arrowHourList,\n      arrowMinuteList,\n      arrowSecondList,\n      getAmPmFlag,\n      emitSelectRange,\n      adjustCurrentSpinner,\n      typeItemHeight,\n      listHoursRef,\n      listMinutesRef,\n      listSecondsRef,\n      onIncreaseClick,\n      onDecreaseClick,\n      handleClick,\n      secondsList,\n      timePartsMap,\n      arrowListMap,\n      listMap,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.mjs

@@ -16,7 +16,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_el_scrollbar, {
         key: item,
         ref_for: true,
-        ref: _ctx.getRefId(item),
+        ref: (scollbar) => _ctx.setRef(scollbar, item),
         class: "el-time-spinner__wrapper",
         "wrap-style": "max-height: inherit;",
         "view-class": "el-time-spinner__list",