@element-plus/nightly 0.0.20220102 → 0.0.20220106

package/lib/components/time-picker/src/common/picker.vue_vue_type_script_lang.js

@@ -5,21 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var dayjs = require('dayjs');
 var isEqual = require('lodash/isEqual');
+var core = require('@vueuse/core');
 require('../../../../hooks/index.js');
-require('../../../../directives/index.js');
 require('../../../../tokens/index.js');
 var index = require('../../../input/index.js');
 var index$2 = require('../../../icon/index.js');
-var index$1 = require('../../../popper/index.js');
+var index$1 = require('../../../tooltip/index.js');
 var aria = require('../../../../utils/aria.js');
 var util = require('../../../../utils/util.js');
 var iconsVue = require('@element-plus/icons-vue');
 var props = require('./props.js');
-var index$3 = require('../../../../directives/click-outside/index.js');
-var index$4 = require('../../../../hooks/use-locale/index.js');
+var index$3 = require('../../../../hooks/use-locale/index.js');
 var form = require('../../../../tokens/form.js');
-var index$5 = require('../../../../hooks/use-common-props/index.js');
-var defaults = require('../../../popper/src/use-popper/defaults.js');
+var index$4 = require('../../../../hooks/use-common-props/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,18 +60,18 @@ var script = vue.defineComponent({
   name: "Picker",
   components: {
     ElInput: index.ElInput,
-    ElPopper: index$1["default"],
+    ElTooltip: index$1.ElTooltip,
     ElIcon: index$2.ElIcon
   },
-  directives: { clickoutside: index$3["default"] },
   props: props.timePickerDefaultProps,
   emits: ["update:modelValue", "change", "focus", "blur", "calendar-change"],
   setup(props, ctx) {
-    const { lang } = index$4.useLocale();
+    const { lang } = index$3.useLocale();
     const elForm = vue.inject(form.elFormKey, {});
     const elFormItem = vue.inject(form.elFormItemKey, {});
     const elPopperOptions = vue.inject("ElPopperOptions", {});
-    const refPopper = vue.ref(null);
+    const refPopper = vue.ref();
+    const inputRef = vue.ref();
     const pickerVisible = vue.ref(false);
     const pickerActualVisible = vue.ref(false);
     const valueOnOpen = vue.ref(null);
@@ -110,9 +108,9 @@ var script = vue.defineComponent({
       }
     };
     const refInput = vue.computed(() => {
-      if (refPopper.value.triggerRef) {
-        const _r = isRangeInput.value ? refPopper.value.triggerRef : refPopper.value.triggerRef.$el;
-        return [].slice.call(_r.querySelectorAll("input"));
+      if (inputRef.value) {
+        const _r = isRangeInput.value ? inputRef.value : inputRef.value.$el;
+        return Array.from(_r.querySelectorAll("input"));
       }
       return [];
     });
@@ -161,7 +159,8 @@ var script = vue.defineComponent({
       ctx.emit("focus", e);
     };
     const handleBlur = () => {
-      pickerVisible.value = false;
+      var _a;
+      (_a = refPopper.value) == null ? void 0 : _a.onClose();
       blurInput();
     };
     const pickerDisabled = vue.computed(() => {
@@ -246,16 +245,29 @@ var script = vue.defineComponent({
     const isRangeInput = vue.computed(() => {
       return props.type.indexOf("range") > -1;
     });
-    const pickerSize = index$5.useSize();
+    const pickerSize = index$4.useSize();
     const popperPaneRef = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = refPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
+    });
+    const popperEl = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = vue.unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
+    });
+    const actualInputRef = vue.computed(() => {
       var _a;
-      return (_a = refPopper.value) == null ? void 0 : _a.popperRef;
+      if (vue.unref(isRangeInput)) {
+        return vue.unref(inputRef);
+      }
+      return (_a = vue.unref(inputRef)) == null ? void 0 : _a.$el;
     });
-    const onClickOutside = () => {
-      if (!pickerVisible.value)
+    core.onClickOutside(actualInputRef, (e) => {
+      const unrefedPopperEl = vue.unref(popperEl);
+      const inputEl = vue.unref(actualInputRef);
+      if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl))
         return;
       pickerVisible.value = false;
-    };
+    });
     const userInput = vue.ref(null);
     const handleChange = () => {
       if (userInput.value) {
@@ -378,7 +390,6 @@ var script = vue.defineComponent({
       props
     });
     return {
-      Effect: defaults.Effect,
       elPopperOptions,
       isDatesPicker,
       handleEndChange,
@@ -389,7 +400,7 @@ var script = vue.defineComponent({
       handleChange,
       handleKeydown,
       popperPaneRef,
-      onClickOutside,
+      onClickOutside: core.onClickOutside,
       pickerSize,
       isRangeInput,
       onMouseLeave,
@@ -406,6 +417,7 @@ var script = vue.defineComponent({
       parsedValue,
       setSelectionRange,
       refPopper,
+      inputRef,
       pickerDisabled,
       onSetPickerOption,
       onCalendarChange,

package/lib/components/time-picker/src/common/picker.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    manual-mode\n    :effect=\"Effect.LIGHT\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    append-to-body\n    @before-enter=\"pickerActualVisible = true\"\n    @after-leave=\"pickerActualVisible = false\"\n  >\n    <template #trigger>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"id\"\n        v-clickoutside:[popperPaneRef]=\"onClickOutside\"\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\"\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      >\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        v-clickoutside:[popperPaneRef]=\"onClickOutside\"\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        ]\"\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 #default>\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-popper>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\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 { 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 = isEmpty(format)\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  return isEmpty(format) ? date : dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { clickoutside: ClickOutside },\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(null)\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 (refPopper.value.triggerRef) {\n        const _r = isRangeInput.value\n          ? refPopper.value.triggerRef\n          : refPopper.value.triggerRef.$el\n        return [].slice.call(_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      pickerVisible.value = false\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\n    })\n\n    const onClickOutside = () => {\n      if (!pickerVisible.value) 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      Effect,\n\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      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["isEmpty","dayjs","defineComponent","ElPopper","ElIcon","ClickOutside","timePickerDefaultProps","ref","watch","computed","isEqual","EVENT_CODE","Effect"],"mappings":"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"}
+{"version":3,"file":"picker.vue_vue_type_script_lang.js","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    @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        ]\"\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 = isEmpty(format)\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  return isEmpty(format) ? date : 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":["isEmpty","defineComponent","ElInput","ElIcon","ref","watch","computed","isEqual","unref","onClickOutside","EVENT_CODE"],"mappings":"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"}

package/lib/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.js

@@ -10,44 +10,47 @@ const _hoisted_3 = ["id", "name", "placeholder", "value", "disabled", "readonly"
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = vue.resolveComponent("el-icon");
   const _component_el_input = vue.resolveComponent("el-input");
-  const _component_el_popper = vue.resolveComponent("el-popper");
-  const _directive_clickoutside = vue.resolveDirective("clickoutside");
-  return vue.openBlock(), vue.createBlock(_component_el_popper, vue.mergeProps({
+  const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+  return vue.openBlock(), vue.createBlock(_component_el_tooltip, vue.mergeProps({
     ref: "refPopper",
     visible: _ctx.pickerVisible,
-    "onUpdate:visible": _cache[15] || (_cache[15] = ($event) => _ctx.pickerVisible = $event),
-    "manual-mode": "",
-    effect: _ctx.Effect.LIGHT,
+    "onUpdate:visible": _cache[16] || (_cache[16] = ($event) => _ctx.pickerVisible = $event),
+    effect: "light",
     pure: "",
     trigger: "click"
   }, _ctx.$attrs, {
+    "append-to-body": "",
+    transition: "el-zoom-in-top",
     "popper-class": `el-picker__popper ${_ctx.popperClass}`,
     "popper-options": _ctx.elPopperOptions,
     "fallback-placements": ["bottom", "top", "right", "left"],
-    transition: "el-zoom-in-top",
     "gpu-acceleration": false,
     "stop-popper-mouse-event": false,
-    "append-to-body": "",
-    onBeforeEnter: _cache[16] || (_cache[16] = ($event) => _ctx.pickerActualVisible = true),
-    onAfterLeave: _cache[17] || (_cache[17] = ($event) => _ctx.pickerActualVisible = false)
+    "hide-after": 0,
+    onShow: _cache[17] || (_cache[17] = ($event) => _ctx.pickerActualVisible = true),
+    onHide: _cache[18] || (_cache[18] = ($event) => _ctx.pickerActualVisible = false)
   }), {
-    trigger: vue.withCtx(() => [
-      !_ctx.isRangeInput ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_input, {
+    default: vue.withCtx(() => [
+      !_ctx.isRangeInput ? (vue.openBlock(), vue.createBlock(_component_el_input, {
         key: 0,
         id: _ctx.id,
+        ref: "inputRef",
         "model-value": _ctx.displayValue,
         name: _ctx.name,
         size: _ctx.pickerSize,
         disabled: _ctx.pickerDisabled,
         placeholder: _ctx.placeholder,
-        class: vue.normalizeClass(["el-date-editor", "el-date-editor--" + _ctx.type]),
+        class: vue.normalizeClass(["el-date-editor", ["el-date-editor--" + _ctx.type, _ctx.$attrs.class || void 0]]),
+        style: vue.normalizeStyle(_ctx.$attrs.style || void 0),
         readonly: !_ctx.editable || _ctx.readonly || _ctx.isDatesPicker || _ctx.type === "week",
         onInput: _ctx.onUserInput,
         onFocus: _ctx.handleFocus,
         onKeydown: _ctx.handleKeydown,
         onChange: _ctx.handleChange,
         onMouseenter: _ctx.onMouseEnter,
-        onMouseleave: _ctx.onMouseLeave
+        onMouseleave: _ctx.onMouseLeave,
+        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+        }, ["stop"]))
       }, {
         prefix: vue.withCtx(() => [
           _ctx.triggerIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
@@ -74,20 +77,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
         ]),
         _: 1
-      }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "readonly", "onInput", "onFocus", "onKeydown", "onChange", "onMouseenter", "onMouseleave"])), [
-        [_directive_clickoutside, _ctx.onClickOutside, _ctx.popperPaneRef]
-      ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+      }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "onInput", "onFocus", "onKeydown", "onChange", "onMouseenter", "onMouseleave"])) : (vue.openBlock(), vue.createElementBlock("div", {
         key: 1,
+        ref: "inputRef",
         class: vue.normalizeClass(["el-date-editor el-range-editor el-input__inner", [
           "el-date-editor--" + _ctx.type,
           _ctx.pickerSize ? `el-range-editor--${_ctx.pickerSize}` : "",
           _ctx.pickerDisabled ? "is-disabled" : "",
           _ctx.pickerVisible ? "is-active" : ""
         ]]),
-        onClick: _cache[6] || (_cache[6] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-        onMouseenter: _cache[7] || (_cache[7] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
-        onMouseleave: _cache[8] || (_cache[8] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
-        onKeydown: _cache[9] || (_cache[9] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
+        onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+        onMouseenter: _cache[8] || (_cache[8] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
+        onMouseleave: _cache[9] || (_cache[9] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
+        onKeydown: _cache[10] || (_cache[10] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
       }, [
         _ctx.triggerIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 0,
@@ -108,9 +110,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           disabled: _ctx.pickerDisabled,
           readonly: !_ctx.editable || _ctx.readonly,
           class: "el-range-input",
-          onInput: _cache[0] || (_cache[0] = (...args) => _ctx.handleStartInput && _ctx.handleStartInput(...args)),
-          onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleStartChange && _ctx.handleStartChange(...args)),
-          onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
+          onInput: _cache[1] || (_cache[1] = (...args) => _ctx.handleStartInput && _ctx.handleStartInput(...args)),
+          onChange: _cache[2] || (_cache[2] = (...args) => _ctx.handleStartChange && _ctx.handleStartChange(...args)),
+          onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
         }, null, 40, _hoisted_1),
         vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
           vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(_ctx.rangeSeparator), 1)
@@ -124,9 +126,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           disabled: _ctx.pickerDisabled,
           readonly: !_ctx.editable || _ctx.readonly,
           class: "el-range-input",
-          onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-          onInput: _cache[4] || (_cache[4] = (...args) => _ctx.handleEndInput && _ctx.handleEndInput(...args)),
-          onChange: _cache[5] || (_cache[5] = (...args) => _ctx.handleEndChange && _ctx.handleEndChange(...args))
+          onFocus: _cache[4] || (_cache[4] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+          onInput: _cache[5] || (_cache[5] = (...args) => _ctx.handleEndInput && _ctx.handleEndInput(...args)),
+          onChange: _cache[6] || (_cache[6] = (...args) => _ctx.handleEndChange && _ctx.handleEndChange(...args))
         }, null, 40, _hoisted_3),
         _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 1,
@@ -140,11 +142,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
         }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
-      ], 34)), [
-        [_directive_clickoutside, _ctx.onClickOutside, _ctx.popperPaneRef]
-      ])
+      ], 34))
     ]),
-    default: vue.withCtx(() => [
+    content: vue.withCtx(() => [
       vue.renderSlot(_ctx.$slots, "default", {
         visible: _ctx.pickerVisible,
         actualVisible: _ctx.pickerActualVisible,
@@ -153,16 +153,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         unlinkPanels: _ctx.unlinkPanels,
         type: _ctx.type,
         defaultValue: _ctx.defaultValue,
-        onPick: _cache[10] || (_cache[10] = (...args) => _ctx.onPick && _ctx.onPick(...args)),
-        onSelectRange: _cache[11] || (_cache[11] = (...args) => _ctx.setSelectionRange && _ctx.setSelectionRange(...args)),
-        onSetPickerOption: _cache[12] || (_cache[12] = (...args) => _ctx.onSetPickerOption && _ctx.onSetPickerOption(...args)),
-        onCalendarChange: _cache[13] || (_cache[13] = (...args) => _ctx.onCalendarChange && _ctx.onCalendarChange(...args)),
-        onMousedown: _cache[14] || (_cache[14] = vue.withModifiers(() => {
+        onPick: _cache[11] || (_cache[11] = (...args) => _ctx.onPick && _ctx.onPick(...args)),
+        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] = vue.withModifiers(() => {
         }, ["stop"]))
       })
     ]),
     _: 3
-  }, 16, ["visible", "effect", "popper-class", "popper-options"]);
+  }, 16, ["visible", "popper-class", "popper-options"]);
 }
 
 exports.render = render;

package/lib/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.js","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue?vue&type=template&id=1d54be91&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    manual-mode\n    :effect=\"Effect.LIGHT\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    append-to-body\n    @before-enter=\"pickerActualVisible = true\"\n    @after-leave=\"pickerActualVisible = false\"\n  >\n    <template #trigger>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"id\"\n        v-clickoutside:[popperPaneRef]=\"onClickOutside\"\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\"\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      >\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        v-clickoutside:[popperPaneRef]=\"onClickOutside\"\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        ]\"\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 #default>\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-popper>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\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 { 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 = isEmpty(format)\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  return isEmpty(format) ? date : dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { clickoutside: ClickOutside },\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(null)\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 (refPopper.value.triggerRef) {\n        const _r = isRangeInput.value\n          ? refPopper.value.triggerRef\n          : refPopper.value.triggerRef.$el\n        return [].slice.call(_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      pickerVisible.value = false\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\n    })\n\n    const onClickOutside = () => {\n      if (!pickerVisible.value) 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      Effect,\n\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      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;0BA8FqB;;;;;;;;;wBA7FnB,mCAAA;IACE;IACQ;;IACR;UACO;IACP;IACA;;IAEC;IACA,kBAAgB;IAChB;IACD;IACC,yBAAuB;IACvB;IACD;IACC;;;;QAKU;;;gBACF,OAAE;yBAEK;;gBAEP,EAAE;sBACI;;iBAEN;uBAEO;;;;;0BAKC;YACZ;;YAEU;;;;;;;;;;;;;;YASA,oBACT;eACQA;;;2BACA;;;;;;;;;;;;;;;;iBAUL;;;;;;;;;YAUJ;;;;;;yBAKO;;;;;;;;;;;;;;cAUL;sBACQ;cACT,OAAM;qBACA;sBACC;;;;0CAIP;;;;0BAIYA;;;0CAGY,iBAAY;;;;;;;;;;;;;;qBAcnC;;;;;;;;;sCAvD6B,qBAAjB;;;;;QA+Dd;;QAEA;;;;;;"}
+{"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.js","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    @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        ]\"\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 = isEmpty(format)\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  return isEmpty(format) ? date : 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":";;;;;;;;0BAgGqB;;;;;;;;wBA/FnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA,kBAAgB;IAChB,gCAA8B;IAC9B;IACA;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;2BAEI;;;YAGA;;;;4BAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;;oCAOd;;;;;;mBAOA;;;0EAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;uBAQC,aAAQ;mDACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;yEAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}

package/lib/components/time-picker/src/time-picker.d.ts

@@ -144,8 +144,8 @@ declare const _default: import("vue").DefineComponent<{
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;
@@ -179,8 +179,8 @@ declare const _default: import("vue").DefineComponent<{
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;

package/lib/components/time-select/index.d.ts

@@ -93,9 +93,9 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     modelValue?: string | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: import("element-plus/es/utils/types").ComponentSize;
     disabled: boolean;
@@ -206,9 +206,9 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     modelValue?: string | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: import("element-plus/es/utils/types").ComponentSize;
     disabled: boolean;

package/lib/components/time-select/src/time-select.vue.d.ts

@@ -94,9 +94,9 @@ declare const _default: import("vue").DefineComponent<{
     modelValue?: string | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ComponentSize;
     disabled: boolean;