element-plus 1.3.0-beta.3 → 1.3.0-beta.4

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

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

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

@@ -1,6 +1,6 @@
 import type { PropType, Component } from 'vue';
 import type { Options } from '@popperjs/core';
-import type { ComponentSize } from 'element-plus/es/utils/types';
+import type { ComponentSize } from '@element-plus/utils/types';
 export declare const timePickerDefaultProps: {
     id: {
         type: (StringConstructor | ArrayConstructor)[];

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

@@ -1,6 +1,6 @@
 import type { PropType, Ref } from 'vue';
 import type { Dayjs } from 'dayjs';
-import type { Nullable } from 'element-plus/es/utils/types';
+import type { Nullable } from '@element-plus/utils/types';
 declare const _default: import("vue").DefineComponent<{
     role: {
         type: StringConstructor;

package/es/components/time-picker/src/time-picker-com/panel-time-pick.vue.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     transitionName: import("vue").ComputedRef<"" | "el-zoom-in-top">;
     arrowControl: any;
     onSetOption: (e: any) => void;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     handleConfirm: (visible?: boolean, first?: boolean) => void;
     handleChange: (_date: Dayjs) => void;
     setSelectionRange: (start: any, end: any) => void;
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     disabledHours: any;
     disabledMinutes: any;
     disabledSeconds: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "select-range" | "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     visible?: unknown;
     actualVisible?: unknown;
     datetimeRole?: unknown;

package/es/components/time-picker/src/time-picker-com/panel-time-range.vue.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     btnConfirmDisabled: import("vue").ComputedRef<boolean>;
     handleCancel: () => void;
     handleConfirm: (visible?: boolean) => void;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     showSeconds: import("vue").ComputedRef<boolean>;
     minDate: import("vue").ComputedRef<dayjs.Dayjs>;
     maxDate: import("vue").ComputedRef<dayjs.Dayjs>;
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     disabledHours_: (role: any, compare: any) => never[];
     disabledMinutes_: (hour: any, role: any, compare: any) => any;
     disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "select-range" | "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     visible?: unknown;
     actualVisible?: unknown;
     parsedValue?: unknown;

package/es/components/time-picker/src/time-picker-com/useTimePicker.d.ts

@@ -54,7 +54,7 @@ export declare const useOldValue: (props: {
     startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     format: (template?: string | undefined) => string;
-    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
     valueOf: () => number;
     unix: () => number;
     daysInMonth: () => number;
@@ -124,7 +124,7 @@ export declare const useOldValue: (props: {
     startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     format: (template?: string | undefined) => string;
-    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
     valueOf: () => number;
     unix: () => number;
     daysInMonth: () => number;

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

@@ -140,17 +140,17 @@ declare const _default: import("vue").DefineComponent<{
     unlinkPanels?: unknown;
 } & {
     type: string;
+    name: string | unknown[];
     disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
     modelValue: string | number | Date | (string | number | Date)[];
-    name: string | unknown[];
     editable: boolean;
-    popperOptions: Partial<import("@popperjs/core").Options>;
-    popperClass: string;
-    placeholder: string;
-    readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     validateEvent: boolean;
+    popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     rangeSeparator: string;
     isRange: boolean;
@@ -158,8 +158,8 @@ declare const _default: import("vue").DefineComponent<{
     arrowControl: boolean;
     unlinkPanels: boolean;
 } & {
-    size?: import("../../../utils/types").ComponentSize | undefined;
     id?: string | unknown[] | undefined;
+    size?: import("../../../utils/types").ComponentSize | undefined;
     format?: string | undefined;
     valueFormat?: string | undefined;
     startPlaceholder?: string | undefined;
@@ -175,17 +175,17 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
+    name: string | unknown[];
     disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
     modelValue: string | number | Date | (string | number | Date)[];
-    name: string | unknown[];
     editable: boolean;
-    popperOptions: Partial<import("@popperjs/core").Options>;
-    popperClass: string;
-    placeholder: string;
-    readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     validateEvent: boolean;
+    popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     rangeSeparator: string;
     isRange: boolean;

package/es/components/time-picker/style/css.d.ts

@@ -1,5 +1,5 @@
-import 'element-plus/es/components/base/style/css';
-import 'element-plus/theme-chalk/el-time-picker.css';
-import 'element-plus/es/components/input/style/css';
-import 'element-plus/es/components/scrollbar/style/css';
-import 'element-plus/es/components/popper/style/css';
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-time-picker.css';
+import '@element-plus/components/input/style/css';
+import '@element-plus/components/scrollbar/style/css';
+import '@element-plus/components/popper/style/css';

package/es/components/time-picker/style/index.d.ts

@@ -1,5 +1,5 @@
-import 'element-plus/es/components/base/style';
-import 'element-plus/theme-chalk/src/time-picker.scss';
-import 'element-plus/es/components/input/style/index';
-import 'element-plus/es/components/scrollbar/style/index';
-import 'element-plus/es/components/popper/style/index';
+import '@element-plus/components/base/style';
+import '@element-plus/theme-chalk/src/time-picker.scss';
+import '@element-plus/components/input/style/index';
+import '@element-plus/components/scrollbar/style/index';
+import '@element-plus/components/popper/style/index';

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

@@ -1,4 +1,4 @@
-import type { SFCWithInstall } from 'element-plus/es/utils/types';
+import type { SFCWithInstall } from '@element-plus/utils/types';
 declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     modelValue: StringConstructor;
     disabled: {
@@ -14,7 +14,7 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -60,7 +60,7 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     items: import("vue").ComputedRef<never[]>;
     blur: () => void;
     focus: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus")[], "update:modelValue" | "change" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "update:modelValue")[], "blur" | "change" | "focus" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     disabled?: unknown;
     editable?: unknown;
@@ -76,38 +76,38 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     prefixIcon?: unknown;
     clearIcon?: unknown;
 } & {
-    size: import("element-plus/es/utils/types").ComponentSize;
-    disabled: boolean;
-    name: string;
-    editable: boolean;
     end: string;
     start: string;
+    name: string;
+    disabled: boolean;
+    size: import("@element-plus/utils/types").ComponentSize;
+    step: string;
     placeholder: string;
+    editable: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    step: string;
     minTime: string;
     maxTime: string;
 } & {
     modelValue?: string | undefined;
 }> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("element-plus/es/utils/types").ComponentSize;
-    disabled: boolean;
-    name: string;
-    editable: boolean;
     end: string;
     start: string;
+    name: string;
+    disabled: boolean;
+    size: import("@element-plus/utils/types").ComponentSize;
+    step: string;
     placeholder: string;
+    editable: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    step: string;
     minTime: string;
     maxTime: string;
 }>>;
@@ -127,7 +127,7 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -173,7 +173,7 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     items: import("vue").ComputedRef<never[]>;
     blur: () => void;
     focus: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus")[], "update:modelValue" | "change" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "update:modelValue")[], "blur" | "change" | "focus" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     disabled?: unknown;
     editable?: unknown;
@@ -189,38 +189,38 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     prefixIcon?: unknown;
     clearIcon?: unknown;
 } & {
-    size: import("element-plus/es/utils/types").ComponentSize;
-    disabled: boolean;
-    name: string;
-    editable: boolean;
     end: string;
     start: string;
+    name: string;
+    disabled: boolean;
+    size: import("@element-plus/utils/types").ComponentSize;
+    step: string;
     placeholder: string;
+    editable: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    step: string;
     minTime: string;
     maxTime: string;
 } & {
     modelValue?: string | undefined;
 }> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("element-plus/es/utils/types").ComponentSize;
-    disabled: boolean;
-    name: string;
-    editable: boolean;
     end: string;
     start: string;
+    name: string;
+    disabled: boolean;
+    size: import("@element-plus/utils/types").ComponentSize;
+    step: string;
     placeholder: string;
+    editable: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    step: string;
     minTime: string;
     maxTime: string;
 }>>;

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

@@ -1,5 +1,5 @@
 import type { PropType, Component } from 'vue';
-import type { ComponentSize } from 'element-plus/es/utils/types';
+import type { ComponentSize } from '@element-plus/utils/types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: StringConstructor;
     disabled: {
@@ -61,7 +61,7 @@ declare const _default: import("vue").DefineComponent<{
     items: import("vue").ComputedRef<never[]>;
     blur: () => void;
     focus: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus")[], "update:modelValue" | "change" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "update:modelValue")[], "blur" | "change" | "focus" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     disabled?: unknown;
     editable?: unknown;
@@ -77,38 +77,38 @@ declare const _default: import("vue").DefineComponent<{
     prefixIcon?: unknown;
     clearIcon?: unknown;
 } & {
-    size: ComponentSize;
-    disabled: boolean;
-    name: string;
-    editable: boolean;
     end: string;
     start: string;
+    name: string;
+    disabled: boolean;
+    size: ComponentSize;
+    step: string;
     placeholder: string;
+    editable: boolean;
     clearable: boolean;
     prefixIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    step: string;
     minTime: string;
     maxTime: string;
 } & {
     modelValue?: string | undefined;
 }> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    size: ComponentSize;
-    disabled: boolean;
-    name: string;
-    editable: boolean;
     end: string;
     start: string;
+    name: string;
+    disabled: boolean;
+    size: ComponentSize;
+    step: string;
     placeholder: string;
+    editable: boolean;
     clearable: boolean;
     prefixIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    step: string;
     minTime: string;
     maxTime: string;
 }>;

package/es/components/time-select/style/css.d.ts

@@ -1,7 +1,7 @@
-import 'element-plus/es/components/base/style/css';
-import 'element-plus/theme-chalk/el-time-select.css';
-import 'element-plus/es/components/scrollbar/style/css';
-import 'element-plus/es/components/popper/style/css';
-import 'element-plus/es/components/input/style/css';
-import 'element-plus/es/components/select/style/css';
-import 'element-plus/es/components/option/style/css';
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-time-select.css';
+import '@element-plus/components/scrollbar/style/css';
+import '@element-plus/components/popper/style/css';
+import '@element-plus/components/input/style/css';
+import '@element-plus/components/select/style/css';
+import '@element-plus/components/option/style/css';

package/es/components/time-select/style/index.d.ts

@@ -1,7 +1,7 @@
-import 'element-plus/es/components/base/style';
-import 'element-plus/theme-chalk/src/time-select.scss';
-import 'element-plus/es/components/scrollbar/style/index';
-import 'element-plus/es/components/popper/style/index';
-import 'element-plus/es/components/input/style/index';
-import 'element-plus/es/components/select/style/index';
-import 'element-plus/es/components/option/style/index';
+import '@element-plus/components/base/style';
+import '@element-plus/theme-chalk/src/time-select.scss';
+import '@element-plus/components/scrollbar/style/index';
+import '@element-plus/components/popper/style/index';
+import '@element-plus/components/input/style/index';
+import '@element-plus/components/select/style/index';
+import '@element-plus/components/option/style/index';

package/es/components/timeline/index.d.ts

@@ -50,20 +50,20 @@ export declare const ElTimeline: import("../../utils/types").SFCWithInstall<impo
         hollow?: unknown;
     } & {
         type: string;
-        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-        size: string;
-        color: string;
         center: boolean;
+        color: string;
+        size: string;
+        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
         placement: string;
         timestamp: string;
         hideTimestamp: boolean;
         hollow: boolean;
     } & {}>, {
         type: string;
-        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-        size: string;
-        color: string;
         center: boolean;
+        color: string;
+        size: string;
+        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
         placement: string;
         timestamp: string;
         hideTimestamp: boolean;
@@ -120,20 +120,20 @@ export declare const ElTimelineItem: import("../../utils/types").SFCWithInstall<
     hollow?: unknown;
 } & {
     type: string;
-    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    size: string;
-    color: string;
     center: boolean;
+    color: string;
+    size: string;
+    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     placement: string;
     timestamp: string;
     hideTimestamp: boolean;
     hollow: boolean;
 } & {}>, {
     type: string;
-    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    size: string;
-    color: string;
     center: boolean;
+    color: string;
+    size: string;
+    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     placement: string;
     timestamp: string;
     hideTimestamp: boolean;

package/es/components/timeline/src/item.vue.d.ts

@@ -48,20 +48,20 @@ declare const _default: import("vue").DefineComponent<{
     hollow?: unknown;
 } & {
     type: string;
-    icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    size: string;
-    color: string;
     center: boolean;
+    color: string;
+    size: string;
+    icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     placement: string;
     timestamp: string;
     hideTimestamp: boolean;
     hollow: boolean;
 } & {}>, {
     type: string;
-    icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    size: string;
-    color: string;
     center: boolean;
+    color: string;
+    size: string;
+    icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     placement: string;
     timestamp: string;
     hideTimestamp: boolean;

package/es/components/timeline/style/css.d.ts

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/base/style/css';
-import 'element-plus/theme-chalk/el-timeline.css';
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-timeline.css';

package/es/components/timeline/style/index.d.ts

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/base/style';
-import 'element-plus/theme-chalk/src/timeline.scss';
+import '@element-plus/components/base/style';
+import '@element-plus/theme-chalk/src/timeline.scss';

package/es/components/timeline-item/style/css.d.ts

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/base/style/css';
-import 'element-plus/theme-chalk/el-timeline-item.css';
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-timeline-item.css';

package/es/components/timeline-item/style/index.d.ts

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/base/style';
-import 'element-plus/theme-chalk/src/timeline-item.scss';
+import '@element-plus/components/base/style';
+import '@element-plus/theme-chalk/src/timeline-item.scss';