@element-plus/nightly 0.0.20260304 → 0.0.20260306

package/lib/components/time-picker/src/composables/use-time-picker.js

@@ -42,9 +42,15 @@ const buildAvailableTimeSlotGetter = (disabledHours, disabledMinutes, disabledSe
 		getAvailableSeconds
 	};
 };
-const useOldValue = (props) => {
+const useOldValue = (props, options) => {
 	const oldValue = (0, vue.ref)(props.parsedValue);
 	(0, vue.watch)(() => props.visible, (val) => {
+		const modelValue = (0, vue.toValue)(options.modelValue);
+		const valueOnClear = (0, vue.toValue)(options.valueOnClear);
+		if (val && modelValue === valueOnClear) {
+			oldValue.value = valueOnClear;
+			return;
+		}
 		if (!val) oldValue.value = props.parsedValue;
 	});
 	return oldValue;

package/lib/components/time-picker/src/composables/use-time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-time-picker.js","names":["makeList"],"sources":["../../../../../../../packages/components/time-picker/src/composables/use-time-picker.ts"],"sourcesContent":["import { ref, watch } from 'vue'\nimport { makeList } from '../utils'\n\nimport type { Dayjs } from 'dayjs'\nimport type {\n  GetDisabledHours,\n  GetDisabledMinutes,\n  GetDisabledSeconds,\n} from '../common/props'\n\nconst makeAvailableArr = (disabledList: boolean[]): number[] => {\n  const trueOrNumber = (isDisabled: boolean, index: number) =>\n    isDisabled || index\n\n  const getNumber = (predicate: number | true): predicate is number =>\n    predicate !== true\n\n  return disabledList.map(trueOrNumber).filter(getNumber)\n}\n\nexport const getTimeLists = (\n  disabledHours?: GetDisabledHours,\n  disabledMinutes?: GetDisabledMinutes,\n  disabledSeconds?: GetDisabledSeconds\n) => {\n  const getHoursList = (role: string, compare?: Dayjs) => {\n    return makeList(24, disabledHours && (() => disabledHours?.(role, compare)))\n  }\n\n  const getMinutesList = (hour: number, role: string, compare?: Dayjs) => {\n    return makeList(\n      60,\n      disabledMinutes && (() => disabledMinutes?.(hour, role, compare))\n    )\n  }\n\n  const getSecondsList = (\n    hour: number,\n    minute: number,\n    role: string,\n    compare?: Dayjs\n  ) => {\n    return makeList(\n      60,\n      disabledSeconds && (() => disabledSeconds?.(hour, minute, role, compare))\n    )\n  }\n\n  return {\n    getHoursList,\n    getMinutesList,\n    getSecondsList,\n  }\n}\n\nexport const buildAvailableTimeSlotGetter = (\n  disabledHours: GetDisabledHours,\n  disabledMinutes: GetDisabledMinutes,\n  disabledSeconds: GetDisabledSeconds\n) => {\n  const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n    disabledHours,\n    disabledMinutes,\n    disabledSeconds\n  )\n\n  const getAvailableHours: GetDisabledHours = (role, compare?) => {\n    return makeAvailableArr(getHoursList(role, compare))\n  }\n\n  const getAvailableMinutes: GetDisabledMinutes = (hour, role, compare?) => {\n    return makeAvailableArr(getMinutesList(hour, role, compare))\n  }\n\n  const getAvailableSeconds: GetDisabledSeconds = (\n    hour,\n    minute,\n    role,\n    compare?\n  ) => {\n    return makeAvailableArr(getSecondsList(hour, minute, role, compare))\n  }\n\n  return {\n    getAvailableHours,\n    getAvailableMinutes,\n    getAvailableSeconds,\n  }\n}\n\nexport const useOldValue = (props: {\n  parsedValue?: string | Dayjs | Dayjs[]\n  visible: boolean\n}) => {\n  const oldValue = ref(props.parsedValue)\n\n  watch(\n    () => props.visible,\n    (val) => {\n      if (!val) {\n        oldValue.value = props.parsedValue\n      }\n    }\n  )\n\n  return oldValue\n}\n"],"mappings":";;;;;;AAUA,MAAM,oBAAoB,iBAAsC;CAC9D,MAAM,gBAAgB,YAAqB,UACzC,cAAc;CAEhB,MAAM,aAAa,cACjB,cAAc;AAEhB,QAAO,aAAa,IAAI,aAAa,CAAC,OAAO,UAAU;;AAGzD,MAAa,gBACX,eACA,iBACA,oBACG;CACH,MAAM,gBAAgB,MAAc,YAAoB;AACtD,SAAOA,uBAAS,IAAI,wBAAwB,gBAAgB,MAAM,QAAQ,EAAE;;CAG9E,MAAM,kBAAkB,MAAc,MAAc,YAAoB;AACtE,SAAOA,uBACL,IACA,0BAA0B,kBAAkB,MAAM,MAAM,QAAQ,EACjE;;CAGH,MAAM,kBACJ,MACA,QACA,MACA,YACG;AACH,SAAOA,uBACL,IACA,0BAA0B,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,EACzE;;AAGH,QAAO;EACL;EACA;EACA;EACD;;AAGH,MAAa,gCACX,eACA,iBACA,oBACG;CACH,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,aACvD,eACA,iBACA,gBACD;CAED,MAAM,qBAAuC,MAAM,YAAa;AAC9D,SAAO,iBAAiB,aAAa,MAAM,QAAQ,CAAC;;CAGtD,MAAM,uBAA2C,MAAM,MAAM,YAAa;AACxE,SAAO,iBAAiB,eAAe,MAAM,MAAM,QAAQ,CAAC;;CAG9D,MAAM,uBACJ,MACA,QACA,MACA,YACG;AACH,SAAO,iBAAiB,eAAe,MAAM,QAAQ,MAAM,QAAQ,CAAC;;AAGtE,QAAO;EACL;EACA;EACA;EACD;;AAGH,MAAa,eAAe,UAGtB;CACJ,MAAM,wBAAe,MAAM,YAAY;AAEvC,sBACQ,MAAM,UACX,QAAQ;AACP,MAAI,CAAC,IACH,UAAS,QAAQ,MAAM;GAG5B;AAED,QAAO"}
+{"version":3,"file":"use-time-picker.js","names":["makeList"],"sources":["../../../../../../../packages/components/time-picker/src/composables/use-time-picker.ts"],"sourcesContent":["import { ref, toValue, watch } from 'vue'\nimport { makeList } from '../utils'\n\nimport type { MaybeRefOrGetter } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type {\n  GetDisabledHours,\n  GetDisabledMinutes,\n  GetDisabledSeconds,\n} from '../common/props'\n\nconst makeAvailableArr = (disabledList: boolean[]): number[] => {\n  const trueOrNumber = (isDisabled: boolean, index: number) =>\n    isDisabled || index\n\n  const getNumber = (predicate: number | true): predicate is number =>\n    predicate !== true\n\n  return disabledList.map(trueOrNumber).filter(getNumber)\n}\n\nexport const getTimeLists = (\n  disabledHours?: GetDisabledHours,\n  disabledMinutes?: GetDisabledMinutes,\n  disabledSeconds?: GetDisabledSeconds\n) => {\n  const getHoursList = (role: string, compare?: Dayjs) => {\n    return makeList(24, disabledHours && (() => disabledHours?.(role, compare)))\n  }\n\n  const getMinutesList = (hour: number, role: string, compare?: Dayjs) => {\n    return makeList(\n      60,\n      disabledMinutes && (() => disabledMinutes?.(hour, role, compare))\n    )\n  }\n\n  const getSecondsList = (\n    hour: number,\n    minute: number,\n    role: string,\n    compare?: Dayjs\n  ) => {\n    return makeList(\n      60,\n      disabledSeconds && (() => disabledSeconds?.(hour, minute, role, compare))\n    )\n  }\n\n  return {\n    getHoursList,\n    getMinutesList,\n    getSecondsList,\n  }\n}\n\nexport const buildAvailableTimeSlotGetter = (\n  disabledHours: GetDisabledHours,\n  disabledMinutes: GetDisabledMinutes,\n  disabledSeconds: GetDisabledSeconds\n) => {\n  const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n    disabledHours,\n    disabledMinutes,\n    disabledSeconds\n  )\n\n  const getAvailableHours: GetDisabledHours = (role, compare?) => {\n    return makeAvailableArr(getHoursList(role, compare))\n  }\n\n  const getAvailableMinutes: GetDisabledMinutes = (hour, role, compare?) => {\n    return makeAvailableArr(getMinutesList(hour, role, compare))\n  }\n\n  const getAvailableSeconds: GetDisabledSeconds = (\n    hour,\n    minute,\n    role,\n    compare?\n  ) => {\n    return makeAvailableArr(getSecondsList(hour, minute, role, compare))\n  }\n\n  return {\n    getAvailableHours,\n    getAvailableMinutes,\n    getAvailableSeconds,\n  }\n}\n\nexport const useOldValue = (\n  props: {\n    parsedValue?: string | Dayjs | Dayjs[]\n    visible: boolean\n  },\n  options: {\n    modelValue: MaybeRefOrGetter<unknown>\n    valueOnClear: MaybeRefOrGetter<unknown>\n  }\n) => {\n  const oldValue = ref(props.parsedValue)\n\n  watch(\n    () => props.visible,\n    (val) => {\n      const modelValue = toValue(options.modelValue)\n      const valueOnClear = toValue(options.valueOnClear)\n      if (val && modelValue === valueOnClear) {\n        oldValue.value = valueOnClear as typeof oldValue.value\n        return\n      }\n      if (!val) {\n        oldValue.value = props.parsedValue\n      }\n    }\n  )\n\n  return oldValue\n}\n"],"mappings":";;;;;;AAWA,MAAM,oBAAoB,iBAAsC;CAC9D,MAAM,gBAAgB,YAAqB,UACzC,cAAc;CAEhB,MAAM,aAAa,cACjB,cAAc;AAEhB,QAAO,aAAa,IAAI,aAAa,CAAC,OAAO,UAAU;;AAGzD,MAAa,gBACX,eACA,iBACA,oBACG;CACH,MAAM,gBAAgB,MAAc,YAAoB;AACtD,SAAOA,uBAAS,IAAI,wBAAwB,gBAAgB,MAAM,QAAQ,EAAE;;CAG9E,MAAM,kBAAkB,MAAc,MAAc,YAAoB;AACtE,SAAOA,uBACL,IACA,0BAA0B,kBAAkB,MAAM,MAAM,QAAQ,EACjE;;CAGH,MAAM,kBACJ,MACA,QACA,MACA,YACG;AACH,SAAOA,uBACL,IACA,0BAA0B,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,EACzE;;AAGH,QAAO;EACL;EACA;EACA;EACD;;AAGH,MAAa,gCACX,eACA,iBACA,oBACG;CACH,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,aACvD,eACA,iBACA,gBACD;CAED,MAAM,qBAAuC,MAAM,YAAa;AAC9D,SAAO,iBAAiB,aAAa,MAAM,QAAQ,CAAC;;CAGtD,MAAM,uBAA2C,MAAM,MAAM,YAAa;AACxE,SAAO,iBAAiB,eAAe,MAAM,MAAM,QAAQ,CAAC;;CAG9D,MAAM,uBACJ,MACA,QACA,MACA,YACG;AACH,SAAO,iBAAiB,eAAe,MAAM,QAAQ,MAAM,QAAQ,CAAC;;AAGtE,QAAO;EACL;EACA;EACA;EACD;;AAGH,MAAa,eACX,OAIA,YAIG;CACH,MAAM,wBAAe,MAAM,YAAY;AAEvC,sBACQ,MAAM,UACX,QAAQ;EACP,MAAM,8BAAqB,QAAQ,WAAW;EAC9C,MAAM,gCAAuB,QAAQ,aAAa;AAClD,MAAI,OAAO,eAAe,cAAc;AACtC,YAAS,QAAQ;AACjB;;AAEF,MAAI,CAAC,IACH,UAAS,QAAQ,MAAM;GAG5B;AAED,QAAO"}

package/lib/components/time-picker/src/time-picker-com/basic-time-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-time-spinner.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b('spinner'), { 'has-seconds': showSeconds }]\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"(scrollbar: unknown) => setRef(scrollbar as any, item)\"\n        :class=\"ns.be('spinner', 'wrapper')\"\n        wrap-style=\"max-height: inherit;\"\n        :view-class=\"ns.be('spinner', 'list')\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in timeList[item]\"\n          :key=\"key\"\n          :class=\"[\n            ns.be('spinner', 'item'),\n            ns.is('active', key === timePartials[item]),\n            ns.is('disabled', disabled),\n          ]\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :class=\"[ns.be('spinner', 'wrapper'), ns.is('arrow')]\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecrement\"\n          :class=\"['arrow-up', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncrement\"\n          :class=\"['arrow-down', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul :class=\"ns.be('spinner', 'list')\">\n          <li\n            v-for=\"(time, key) in arrowControlTimeList[item]\"\n            :key=\"key\"\n            :class=\"[\n              ns.be('spinner', 'item'),\n              ns.is('active', time === timePartials[item]),\n              ns.is('disabled', timeList[item][time!]),\n            ]\"\n          >\n            <template v-if=\"isNumber(time)\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, ref, unref, watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { vRepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowDown, ArrowUp } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport {\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  timeUnits,\n} from '../constants'\nimport { buildTimeList } from '../utils'\nimport { basicTimeSpinnerProps } from '../props/basic-time-spinner'\nimport { getTimeLists } from '../composables/use-time-picker'\n\nimport type { Ref } from 'vue'\nimport type { ScrollbarInstance } from '@element-plus/components/scrollbar'\nimport type { TimeUnit } from '../constants'\nimport type { TimeList } from '../utils'\n\nconst props = defineProps(basicTimeSpinnerProps)\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { isRange, format } = pickerBase.props\nconst emit = defineEmits([CHANGE_EVENT, 'select-range', 'set-option'])\n\nconst ns = useNamespace('time')\n\nconst { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n  props.disabledHours,\n  props.disabledMinutes,\n  props.disabledSeconds\n)\n\n// data\nlet isScrolling = false\n\nconst currentScrollbar = ref<TimeUnit>()\nconst listHoursRef = ref<ScrollbarInstance>()\nconst listMinutesRef = ref<ScrollbarInstance>()\nconst listSecondsRef = ref<ScrollbarInstance>()\nconst listRefsMap: Record<TimeUnit, Ref<ScrollbarInstance | undefined>> = {\n  hours: listHoursRef,\n  minutes: listMinutesRef,\n  seconds: listSecondsRef,\n}\n\n// computed\nconst spinnerItems = computed(() => {\n  return props.showSeconds ? timeUnits : timeUnits.slice(0, 2)\n})\n\nconst timePartials = computed<Record<TimeUnit, number>>(() => {\n  const { spinnerDate } = props\n  const hours = spinnerDate.hour()\n  const minutes = spinnerDate.minute()\n  const seconds = spinnerDate.second()\n  return { hours, minutes, seconds }\n})\n\nconst timeList = computed(() => {\n  const { hours, minutes } = unref(timePartials)\n  const { role, spinnerDate } = props\n  const compare = !isRange ? spinnerDate : undefined\n  return {\n    hours: getHoursList(role, compare),\n    minutes: getMinutesList(hours, role, compare),\n    seconds: getSecondsList(hours, minutes, role, compare),\n  }\n})\n\nconst arrowControlTimeList = computed<Record<TimeUnit, TimeList>>(() => {\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  return {\n    hours: buildTimeList(hours, 23),\n    minutes: buildTimeList(minutes, 59),\n    seconds: buildTimeList(seconds, 59),\n  }\n})\n\nconst debouncedResetScroll = debounce((type) => {\n  isScrolling = false\n  adjustCurrentSpinner(type)\n}, 200)\n\nconst getAmPmFlag = (hour: number) => {\n  const shouldShowAmPm = !!props.amPmMode\n  if (!shouldShowAmPm) return ''\n  const isCapital = props.amPmMode === 'A'\n  // todo locale\n  let content = hour < 12 ? ' am' : ' pm'\n  if (isCapital) content = content.toUpperCase()\n  return content\n}\n\nconst emitSelectRange = (type: TimeUnit) => {\n  let range = [0, 0]\n  const actualFormat = format || DEFAULT_FORMATS_TIME\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  switch (type) {\n    case 'hours':\n      if (hourIndex !== -1) {\n        range = [hourIndex, hourIndex + 2]\n      }\n      break\n    case 'minutes':\n      if (minuteIndex !== -1) {\n        range = [minuteIndex, minuteIndex + 2]\n      }\n      break\n    case 'seconds':\n      if (secondIndex !== -1) {\n        range = [secondIndex, secondIndex + 2]\n      }\n      break\n  }\n  const [left, right] = range\n\n  emit('select-range', left, right)\n  currentScrollbar.value = type\n}\n\nconst adjustCurrentSpinner = (type: TimeUnit) => {\n  adjustSpinner(type, unref(timePartials)[type])\n}\n\nconst adjustSpinners = () => {\n  adjustCurrentSpinner('hours')\n  adjustCurrentSpinner('minutes')\n  adjustCurrentSpinner('seconds')\n}\n\nconst getScrollbarElement = (el: HTMLElement) =>\n  el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement\n\nconst adjustSpinner = (type: TimeUnit, value: number) => {\n  if (props.arrowControl) return\n  const scrollbar = unref(listRefsMap[type])\n  if (scrollbar && scrollbar.$el) {\n    getScrollbarElement(scrollbar.$el).scrollTop = Math.max(\n      0,\n      value * typeItemHeight(type)\n    )\n  }\n}\n\nconst typeItemHeight = (type: TimeUnit): number => {\n  const scrollbar = unref(listRefsMap[type])\n  const listItem = scrollbar?.$el.querySelector('li')\n  if (listItem) {\n    return Number.parseFloat(getStyle(listItem, 'height')) || 0\n  }\n  return 0\n}\n\nconst onIncrement = () => {\n  scrollDown(1)\n}\n\nconst onDecrement = () => {\n  scrollDown(-1)\n}\n\nconst scrollDown = (step: number) => {\n  if (!currentScrollbar.value) {\n    emitSelectRange('hours')\n  }\n\n  const label = currentScrollbar.value!\n  const now = unref(timePartials)[label]\n  const total = currentScrollbar.value === 'hours' ? 24 : 60\n  const next = findNextUnDisabled(label, now, step, total)\n\n  modifyDateField(label, next)\n  adjustSpinner(label, next)\n  nextTick(() => emitSelectRange(label))\n}\n\nconst findNextUnDisabled = (\n  type: TimeUnit,\n  now: number,\n  step: number,\n  total: number\n) => {\n  let next = (now + step + total) % total\n  const list = unref(timeList)[type]\n  while (list[next] && next !== now) {\n    next = (next + step + total) % total\n  }\n  return next\n}\n\nconst modifyDateField = (type: TimeUnit, value: number) => {\n  const list = unref(timeList)[type]\n  const isDisabled = list[value]\n  if (isDisabled) return\n\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  let changeTo\n  switch (type) {\n    case 'hours':\n      changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds)\n      break\n    case 'minutes':\n      changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds)\n      break\n    case 'seconds':\n      changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value)\n      break\n  }\n  emit(CHANGE_EVENT, changeTo)\n}\n\nconst handleClick = (\n  type: TimeUnit,\n  { value, disabled }: { value: number; disabled: boolean }\n) => {\n  if (!disabled) {\n    modifyDateField(type, value)\n    emitSelectRange(type)\n    adjustSpinner(type, value)\n  }\n}\n\nconst handleScroll = (type: TimeUnit) => {\n  const scrollbar = unref(listRefsMap[type])\n  if (!scrollbar) return\n\n  isScrolling = true\n  debouncedResetScroll(type)\n  const value = Math.min(\n    Math.round(\n      (getScrollbarElement(scrollbar.$el).scrollTop -\n        (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n        3) /\n        typeItemHeight(type)\n    ),\n    type === 'hours' ? 23 : 59\n  )\n  modifyDateField(type, value)\n}\n\nconst scrollBarHeight = (type: TimeUnit) => {\n  return unref(listRefsMap[type])!.$el.offsetHeight\n}\n\nconst bindScrollEvent = () => {\n  const bindFunction = (type: TimeUnit) => {\n    const scrollbar = unref(listRefsMap[type])\n    if (scrollbar && scrollbar.$el) {\n      getScrollbarElement(scrollbar.$el).onscroll = () => {\n        // TODO: scroll is emitted when set scrollTop programmatically\n        // should find better solutions in the future!\n        handleScroll(type)\n      }\n    }\n  }\n  bindFunction('hours')\n  bindFunction('minutes')\n  bindFunction('seconds')\n}\n\nonMounted(() => {\n  nextTick(() => {\n    !props.arrowControl && bindScrollEvent()\n    adjustSpinners()\n    // set selection on the first hour part\n    if (props.role === 'start') emitSelectRange('hours')\n  })\n})\n\nconst setRef = (scrollbar: ScrollbarInstance | null, type: TimeUnit) => {\n  listRefsMap[type].value = scrollbar ?? undefined\n}\n\nemit('set-option', [`${props.role}_scrollDown`, scrollDown])\nemit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\nwatch(\n  () => props.spinnerDate,\n  () => {\n    if (isScrolling) return\n    adjustSpinners()\n  }\n)\n</script>\n"],"mappings":""}
+{"version":3,"file":"basic-time-spinner.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b('spinner'), { 'has-seconds': showSeconds }]\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"(scrollbar: unknown) => setRef(scrollbar as any, item)\"\n        :class=\"ns.be('spinner', 'wrapper')\"\n        wrap-style=\"max-height: inherit;\"\n        :view-class=\"ns.be('spinner', 'list')\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in timeList[item]\"\n          :key=\"key\"\n          :class=\"[\n            ns.be('spinner', 'item'),\n            ns.is('active', key === timePartials[item]),\n            ns.is('disabled', disabled),\n          ]\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :class=\"[ns.be('spinner', 'wrapper'), ns.is('arrow')]\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecrement\"\n          :class=\"['arrow-up', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncrement\"\n          :class=\"['arrow-down', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul :class=\"ns.be('spinner', 'list')\">\n          <li\n            v-for=\"(time, key) in arrowControlTimeList[item]\"\n            :key=\"key\"\n            :class=\"[\n              ns.be('spinner', 'item'),\n              ns.is('active', time === timePartials[item]),\n              ns.is('disabled', timeList[item][time!]),\n            ]\"\n          >\n            <template v-if=\"isNumber(time)\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, ref, unref, watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { vRepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowDown, ArrowUp } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle, isNumber, rAF } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport {\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  timeUnits,\n} from '../constants'\nimport { buildTimeList } from '../utils'\nimport { basicTimeSpinnerProps } from '../props/basic-time-spinner'\nimport { getTimeLists } from '../composables/use-time-picker'\n\nimport type { Ref } from 'vue'\nimport type { ScrollbarInstance } from '@element-plus/components/scrollbar'\nimport type { TimeUnit } from '../constants'\nimport type { TimeList } from '../utils'\n\nconst props = defineProps(basicTimeSpinnerProps)\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { isRange, format, saveOnBlur } = pickerBase.props\nconst emit = defineEmits([CHANGE_EVENT, 'select-range', 'set-option'])\n\nconst ns = useNamespace('time')\n\nconst { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n  props.disabledHours,\n  props.disabledMinutes,\n  props.disabledSeconds\n)\n\n// data\nlet isScrolling = false\nconst ignoreScroll = {\n  hours: false,\n  minutes: false,\n  seconds: false,\n}\n\nconst currentScrollbar = ref<TimeUnit>()\nconst listHoursRef = ref<ScrollbarInstance>()\nconst listMinutesRef = ref<ScrollbarInstance>()\nconst listSecondsRef = ref<ScrollbarInstance>()\nconst listRefsMap: Record<TimeUnit, Ref<ScrollbarInstance | undefined>> = {\n  hours: listHoursRef,\n  minutes: listMinutesRef,\n  seconds: listSecondsRef,\n}\n\n// computed\nconst spinnerItems = computed(() => {\n  return props.showSeconds ? timeUnits : timeUnits.slice(0, 2)\n})\n\nconst timePartials = computed<Record<TimeUnit, number>>(() => {\n  const { spinnerDate } = props\n  const hours = spinnerDate.hour()\n  const minutes = spinnerDate.minute()\n  const seconds = spinnerDate.second()\n  return { hours, minutes, seconds }\n})\n\nconst timeList = computed(() => {\n  const { hours, minutes } = unref(timePartials)\n  const { role, spinnerDate } = props\n  const compare = !isRange ? spinnerDate : undefined\n  return {\n    hours: getHoursList(role, compare),\n    minutes: getMinutesList(hours, role, compare),\n    seconds: getSecondsList(hours, minutes, role, compare),\n  }\n})\n\nconst arrowControlTimeList = computed<Record<TimeUnit, TimeList>>(() => {\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  return {\n    hours: buildTimeList(hours, 23),\n    minutes: buildTimeList(minutes, 59),\n    seconds: buildTimeList(seconds, 59),\n  }\n})\n\nconst debouncedResetScroll = debounce((type) => {\n  isScrolling = false\n  adjustCurrentSpinner(type)\n}, 200)\n\nconst getAmPmFlag = (hour: number) => {\n  const shouldShowAmPm = !!props.amPmMode\n  if (!shouldShowAmPm) return ''\n  const isCapital = props.amPmMode === 'A'\n  // todo locale\n  let content = hour < 12 ? ' am' : ' pm'\n  if (isCapital) content = content.toUpperCase()\n  return content\n}\n\nconst emitSelectRange = (type: TimeUnit) => {\n  let range = [0, 0]\n  const actualFormat = format || DEFAULT_FORMATS_TIME\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  switch (type) {\n    case 'hours':\n      if (hourIndex !== -1) {\n        range = [hourIndex, hourIndex + 2]\n      }\n      break\n    case 'minutes':\n      if (minuteIndex !== -1) {\n        range = [minuteIndex, minuteIndex + 2]\n      }\n      break\n    case 'seconds':\n      if (secondIndex !== -1) {\n        range = [secondIndex, secondIndex + 2]\n      }\n      break\n  }\n  const [left, right] = range\n\n  emit('select-range', left, right)\n  currentScrollbar.value = type\n}\n\nconst adjustCurrentSpinner = (type: TimeUnit) => {\n  adjustSpinner(type, unref(timePartials)[type])\n}\n\nconst adjustSpinners = () => {\n  adjustCurrentSpinner('hours')\n  adjustCurrentSpinner('minutes')\n  adjustCurrentSpinner('seconds')\n}\n\nconst getScrollbarElement = (el: HTMLElement) =>\n  el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement\n\nconst adjustSpinner = (type: TimeUnit, value: number) => {\n  if (props.arrowControl) return\n  const scrollbar = unref(listRefsMap[type])\n  if (scrollbar && scrollbar.$el) {\n    if (!saveOnBlur) {\n      ignoreScroll[type] = true\n      rAF(() => {\n        ignoreScroll[type] = false\n      })\n    }\n    getScrollbarElement(scrollbar.$el).scrollTop = Math.max(\n      0,\n      value * typeItemHeight(type)\n    )\n  }\n}\n\nconst typeItemHeight = (type: TimeUnit): number => {\n  const scrollbar = unref(listRefsMap[type])\n  const listItem = scrollbar?.$el.querySelector('li')\n  if (listItem) {\n    return Number.parseFloat(getStyle(listItem, 'height')) || 0\n  }\n  return 0\n}\n\nconst onIncrement = () => {\n  scrollDown(1)\n}\n\nconst onDecrement = () => {\n  scrollDown(-1)\n}\n\nconst scrollDown = (step: number) => {\n  if (!currentScrollbar.value) {\n    emitSelectRange('hours')\n  }\n\n  const label = currentScrollbar.value!\n  const now = unref(timePartials)[label]\n  const total = currentScrollbar.value === 'hours' ? 24 : 60\n  const next = findNextUnDisabled(label, now, step, total)\n\n  modifyDateField(label, next)\n  adjustSpinner(label, next)\n  nextTick(() => emitSelectRange(label))\n}\n\nconst findNextUnDisabled = (\n  type: TimeUnit,\n  now: number,\n  step: number,\n  total: number\n) => {\n  let next = (now + step + total) % total\n  const list = unref(timeList)[type]\n  while (list[next] && next !== now) {\n    next = (next + step + total) % total\n  }\n  return next\n}\n\nconst modifyDateField = (type: TimeUnit, value: number) => {\n  const list = unref(timeList)[type]\n  const isDisabled = list[value]\n  if (isDisabled) return\n\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  let changeTo\n  switch (type) {\n    case 'hours':\n      changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds)\n      break\n    case 'minutes':\n      changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds)\n      break\n    case 'seconds':\n      changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value)\n      break\n  }\n  emit(CHANGE_EVENT, changeTo)\n}\n\nconst handleClick = (\n  type: TimeUnit,\n  { value, disabled }: { value: number; disabled: boolean }\n) => {\n  if (!disabled) {\n    modifyDateField(type, value)\n    emitSelectRange(type)\n    adjustSpinner(type, value)\n  }\n}\n\nconst handleScroll = (type: TimeUnit) => {\n  if (!saveOnBlur && ignoreScroll[type]) return\n  const scrollbar = unref(listRefsMap[type])\n  if (!scrollbar) return\n\n  isScrolling = true\n  debouncedResetScroll(type)\n  const value = Math.min(\n    Math.round(\n      (getScrollbarElement(scrollbar.$el).scrollTop -\n        (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n        3) /\n        typeItemHeight(type)\n    ),\n    type === 'hours' ? 23 : 59\n  )\n  modifyDateField(type, value)\n}\n\nconst scrollBarHeight = (type: TimeUnit) => {\n  return unref(listRefsMap[type])!.$el.offsetHeight\n}\n\nconst bindScrollEvent = () => {\n  const bindFunction = (type: TimeUnit) => {\n    const scrollbar = unref(listRefsMap[type])\n    if (scrollbar && scrollbar.$el) {\n      getScrollbarElement(scrollbar.$el).onscroll = () => {\n        // TODO: scroll is emitted when set scrollTop programmatically\n        // should find better solutions in the future!\n        handleScroll(type)\n      }\n    }\n  }\n  bindFunction('hours')\n  bindFunction('minutes')\n  bindFunction('seconds')\n}\n\nonMounted(() => {\n  nextTick(() => {\n    !props.arrowControl && bindScrollEvent()\n    adjustSpinners()\n    // set selection on the first hour part\n    if (props.role === 'start') emitSelectRange('hours')\n  })\n})\n\nconst setRef = (scrollbar: ScrollbarInstance | null, type: TimeUnit) => {\n  listRefsMap[type].value = scrollbar ?? undefined\n}\n\nemit('set-option', [`${props.role}_scrollDown`, scrollDown])\nemit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\nwatch(\n  () => props.spinnerDate,\n  () => {\n    if (isScrolling) return\n    adjustSpinners()\n  }\n)\n</script>\n"],"mappings":""}

package/lib/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
 const require_event = require('../../../../constants/event.js');
 const require_types = require('../../../../utils/types.js');
+const require_raf = require('../../../../utils/raf.js');
 const require_style = require('../../../../utils/dom/style.js');
 const require_index = require('../../../../hooks/use-namespace/index.js');
 const require_index$1 = require('../../../icon/index.js');
@@ -27,11 +28,16 @@ var basic_time_spinner_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const { isRange, format } = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY).props;
+		const { isRange, format, saveOnBlur } = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY).props;
 		const emit = __emit;
 		const ns = require_index.useNamespace("time");
 		const { getHoursList, getMinutesList, getSecondsList } = require_use_time_picker.getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
 		let isScrolling = false;
+		const ignoreScroll = {
+			hours: false,
+			minutes: false,
+			seconds: false
+		};
 		const currentScrollbar = (0, vue.ref)();
 		const listRefsMap = {
 			hours: (0, vue.ref)(),
@@ -111,7 +117,15 @@ var basic_time_spinner_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		const adjustSpinner = (type, value) => {
 			if (props.arrowControl) return;
 			const scrollbar = (0, vue.unref)(listRefsMap[type]);
-			if (scrollbar && scrollbar.$el) getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
+			if (scrollbar && scrollbar.$el) {
+				if (!saveOnBlur) {
+					ignoreScroll[type] = true;
+					require_raf.rAF(() => {
+						ignoreScroll[type] = false;
+					});
+				}
+				getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
+			}
 		};
 		const typeItemHeight = (type) => {
 			const listItem = (0, vue.unref)(listRefsMap[type])?.$el.querySelector("li");
@@ -164,6 +178,7 @@ var basic_time_spinner_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			}
 		};
 		const handleScroll = (type) => {
+			if (!saveOnBlur && ignoreScroll[type]) return;
 			const scrollbar = (0, vue.unref)(listRefsMap[type]);
 			if (!scrollbar) return;
 			isScrolling = true;

package/lib/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-time-spinner.vue_vue_type_script_setup_true_lang.js","names":["showSeconds","arrowControl","amPmMode"],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b('spinner'), { 'has-seconds': showSeconds }]\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"(scrollbar: unknown) => setRef(scrollbar as any, item)\"\n        :class=\"ns.be('spinner', 'wrapper')\"\n        wrap-style=\"max-height: inherit;\"\n        :view-class=\"ns.be('spinner', 'list')\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in timeList[item]\"\n          :key=\"key\"\n          :class=\"[\n            ns.be('spinner', 'item'),\n            ns.is('active', key === timePartials[item]),\n            ns.is('disabled', disabled),\n          ]\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :class=\"[ns.be('spinner', 'wrapper'), ns.is('arrow')]\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecrement\"\n          :class=\"['arrow-up', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncrement\"\n          :class=\"['arrow-down', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul :class=\"ns.be('spinner', 'list')\">\n          <li\n            v-for=\"(time, key) in arrowControlTimeList[item]\"\n            :key=\"key\"\n            :class=\"[\n              ns.be('spinner', 'item'),\n              ns.is('active', time === timePartials[item]),\n              ns.is('disabled', timeList[item][time!]),\n            ]\"\n          >\n            <template v-if=\"isNumber(time)\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, ref, unref, watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { vRepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowDown, ArrowUp } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport {\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  timeUnits,\n} from '../constants'\nimport { buildTimeList } from '../utils'\nimport { basicTimeSpinnerProps } from '../props/basic-time-spinner'\nimport { getTimeLists } from '../composables/use-time-picker'\n\nimport type { Ref } from 'vue'\nimport type { ScrollbarInstance } from '@element-plus/components/scrollbar'\nimport type { TimeUnit } from '../constants'\nimport type { TimeList } from '../utils'\n\nconst props = defineProps(basicTimeSpinnerProps)\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { isRange, format } = pickerBase.props\nconst emit = defineEmits([CHANGE_EVENT, 'select-range', 'set-option'])\n\nconst ns = useNamespace('time')\n\nconst { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n  props.disabledHours,\n  props.disabledMinutes,\n  props.disabledSeconds\n)\n\n// data\nlet isScrolling = false\n\nconst currentScrollbar = ref<TimeUnit>()\nconst listHoursRef = ref<ScrollbarInstance>()\nconst listMinutesRef = ref<ScrollbarInstance>()\nconst listSecondsRef = ref<ScrollbarInstance>()\nconst listRefsMap: Record<TimeUnit, Ref<ScrollbarInstance | undefined>> = {\n  hours: listHoursRef,\n  minutes: listMinutesRef,\n  seconds: listSecondsRef,\n}\n\n// computed\nconst spinnerItems = computed(() => {\n  return props.showSeconds ? timeUnits : timeUnits.slice(0, 2)\n})\n\nconst timePartials = computed<Record<TimeUnit, number>>(() => {\n  const { spinnerDate } = props\n  const hours = spinnerDate.hour()\n  const minutes = spinnerDate.minute()\n  const seconds = spinnerDate.second()\n  return { hours, minutes, seconds }\n})\n\nconst timeList = computed(() => {\n  const { hours, minutes } = unref(timePartials)\n  const { role, spinnerDate } = props\n  const compare = !isRange ? spinnerDate : undefined\n  return {\n    hours: getHoursList(role, compare),\n    minutes: getMinutesList(hours, role, compare),\n    seconds: getSecondsList(hours, minutes, role, compare),\n  }\n})\n\nconst arrowControlTimeList = computed<Record<TimeUnit, TimeList>>(() => {\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  return {\n    hours: buildTimeList(hours, 23),\n    minutes: buildTimeList(minutes, 59),\n    seconds: buildTimeList(seconds, 59),\n  }\n})\n\nconst debouncedResetScroll = debounce((type) => {\n  isScrolling = false\n  adjustCurrentSpinner(type)\n}, 200)\n\nconst getAmPmFlag = (hour: number) => {\n  const shouldShowAmPm = !!props.amPmMode\n  if (!shouldShowAmPm) return ''\n  const isCapital = props.amPmMode === 'A'\n  // todo locale\n  let content = hour < 12 ? ' am' : ' pm'\n  if (isCapital) content = content.toUpperCase()\n  return content\n}\n\nconst emitSelectRange = (type: TimeUnit) => {\n  let range = [0, 0]\n  const actualFormat = format || DEFAULT_FORMATS_TIME\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  switch (type) {\n    case 'hours':\n      if (hourIndex !== -1) {\n        range = [hourIndex, hourIndex + 2]\n      }\n      break\n    case 'minutes':\n      if (minuteIndex !== -1) {\n        range = [minuteIndex, minuteIndex + 2]\n      }\n      break\n    case 'seconds':\n      if (secondIndex !== -1) {\n        range = [secondIndex, secondIndex + 2]\n      }\n      break\n  }\n  const [left, right] = range\n\n  emit('select-range', left, right)\n  currentScrollbar.value = type\n}\n\nconst adjustCurrentSpinner = (type: TimeUnit) => {\n  adjustSpinner(type, unref(timePartials)[type])\n}\n\nconst adjustSpinners = () => {\n  adjustCurrentSpinner('hours')\n  adjustCurrentSpinner('minutes')\n  adjustCurrentSpinner('seconds')\n}\n\nconst getScrollbarElement = (el: HTMLElement) =>\n  el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement\n\nconst adjustSpinner = (type: TimeUnit, value: number) => {\n  if (props.arrowControl) return\n  const scrollbar = unref(listRefsMap[type])\n  if (scrollbar && scrollbar.$el) {\n    getScrollbarElement(scrollbar.$el).scrollTop = Math.max(\n      0,\n      value * typeItemHeight(type)\n    )\n  }\n}\n\nconst typeItemHeight = (type: TimeUnit): number => {\n  const scrollbar = unref(listRefsMap[type])\n  const listItem = scrollbar?.$el.querySelector('li')\n  if (listItem) {\n    return Number.parseFloat(getStyle(listItem, 'height')) || 0\n  }\n  return 0\n}\n\nconst onIncrement = () => {\n  scrollDown(1)\n}\n\nconst onDecrement = () => {\n  scrollDown(-1)\n}\n\nconst scrollDown = (step: number) => {\n  if (!currentScrollbar.value) {\n    emitSelectRange('hours')\n  }\n\n  const label = currentScrollbar.value!\n  const now = unref(timePartials)[label]\n  const total = currentScrollbar.value === 'hours' ? 24 : 60\n  const next = findNextUnDisabled(label, now, step, total)\n\n  modifyDateField(label, next)\n  adjustSpinner(label, next)\n  nextTick(() => emitSelectRange(label))\n}\n\nconst findNextUnDisabled = (\n  type: TimeUnit,\n  now: number,\n  step: number,\n  total: number\n) => {\n  let next = (now + step + total) % total\n  const list = unref(timeList)[type]\n  while (list[next] && next !== now) {\n    next = (next + step + total) % total\n  }\n  return next\n}\n\nconst modifyDateField = (type: TimeUnit, value: number) => {\n  const list = unref(timeList)[type]\n  const isDisabled = list[value]\n  if (isDisabled) return\n\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  let changeTo\n  switch (type) {\n    case 'hours':\n      changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds)\n      break\n    case 'minutes':\n      changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds)\n      break\n    case 'seconds':\n      changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value)\n      break\n  }\n  emit(CHANGE_EVENT, changeTo)\n}\n\nconst handleClick = (\n  type: TimeUnit,\n  { value, disabled }: { value: number; disabled: boolean }\n) => {\n  if (!disabled) {\n    modifyDateField(type, value)\n    emitSelectRange(type)\n    adjustSpinner(type, value)\n  }\n}\n\nconst handleScroll = (type: TimeUnit) => {\n  const scrollbar = unref(listRefsMap[type])\n  if (!scrollbar) return\n\n  isScrolling = true\n  debouncedResetScroll(type)\n  const value = Math.min(\n    Math.round(\n      (getScrollbarElement(scrollbar.$el).scrollTop -\n        (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n        3) /\n        typeItemHeight(type)\n    ),\n    type === 'hours' ? 23 : 59\n  )\n  modifyDateField(type, value)\n}\n\nconst scrollBarHeight = (type: TimeUnit) => {\n  return unref(listRefsMap[type])!.$el.offsetHeight\n}\n\nconst bindScrollEvent = () => {\n  const bindFunction = (type: TimeUnit) => {\n    const scrollbar = unref(listRefsMap[type])\n    if (scrollbar && scrollbar.$el) {\n      getScrollbarElement(scrollbar.$el).onscroll = () => {\n        // TODO: scroll is emitted when set scrollTop programmatically\n        // should find better solutions in the future!\n        handleScroll(type)\n      }\n    }\n  }\n  bindFunction('hours')\n  bindFunction('minutes')\n  bindFunction('seconds')\n}\n\nonMounted(() => {\n  nextTick(() => {\n    !props.arrowControl && bindScrollEvent()\n    adjustSpinners()\n    // set selection on the first hour part\n    if (props.role === 'start') emitSelectRange('hours')\n  })\n})\n\nconst setRef = (scrollbar: ScrollbarInstance | null, type: TimeUnit) => {\n  listRefsMap[type].value = scrollbar ?? undefined\n}\n\nemit('set-option', [`${props.role}_scrollDown`, scrollDown])\nemit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\nwatch(\n  () => props.spinnerDate,\n  () => {\n    if (isScrolling) return\n    adjustSpinners()\n  }\n)\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"basic-time-spinner.vue_vue_type_script_setup_true_lang.js","names":["showSeconds","arrowControl","amPmMode"],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b('spinner'), { 'has-seconds': showSeconds }]\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"(scrollbar: unknown) => setRef(scrollbar as any, item)\"\n        :class=\"ns.be('spinner', 'wrapper')\"\n        wrap-style=\"max-height: inherit;\"\n        :view-class=\"ns.be('spinner', 'list')\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in timeList[item]\"\n          :key=\"key\"\n          :class=\"[\n            ns.be('spinner', 'item'),\n            ns.is('active', key === timePartials[item]),\n            ns.is('disabled', disabled),\n          ]\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :class=\"[ns.be('spinner', 'wrapper'), ns.is('arrow')]\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecrement\"\n          :class=\"['arrow-up', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncrement\"\n          :class=\"['arrow-down', ns.be('spinner', 'arrow')]\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul :class=\"ns.be('spinner', 'list')\">\n          <li\n            v-for=\"(time, key) in arrowControlTimeList[item]\"\n            :key=\"key\"\n            :class=\"[\n              ns.be('spinner', 'item'),\n              ns.is('active', time === timePartials[item]),\n              ns.is('disabled', timeList[item][time!]),\n            ]\"\n          >\n            <template v-if=\"isNumber(time)\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, ref, unref, watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { vRepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowDown, ArrowUp } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle, isNumber, rAF } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport {\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  timeUnits,\n} from '../constants'\nimport { buildTimeList } from '../utils'\nimport { basicTimeSpinnerProps } from '../props/basic-time-spinner'\nimport { getTimeLists } from '../composables/use-time-picker'\n\nimport type { Ref } from 'vue'\nimport type { ScrollbarInstance } from '@element-plus/components/scrollbar'\nimport type { TimeUnit } from '../constants'\nimport type { TimeList } from '../utils'\n\nconst props = defineProps(basicTimeSpinnerProps)\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { isRange, format, saveOnBlur } = pickerBase.props\nconst emit = defineEmits([CHANGE_EVENT, 'select-range', 'set-option'])\n\nconst ns = useNamespace('time')\n\nconst { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n  props.disabledHours,\n  props.disabledMinutes,\n  props.disabledSeconds\n)\n\n// data\nlet isScrolling = false\nconst ignoreScroll = {\n  hours: false,\n  minutes: false,\n  seconds: false,\n}\n\nconst currentScrollbar = ref<TimeUnit>()\nconst listHoursRef = ref<ScrollbarInstance>()\nconst listMinutesRef = ref<ScrollbarInstance>()\nconst listSecondsRef = ref<ScrollbarInstance>()\nconst listRefsMap: Record<TimeUnit, Ref<ScrollbarInstance | undefined>> = {\n  hours: listHoursRef,\n  minutes: listMinutesRef,\n  seconds: listSecondsRef,\n}\n\n// computed\nconst spinnerItems = computed(() => {\n  return props.showSeconds ? timeUnits : timeUnits.slice(0, 2)\n})\n\nconst timePartials = computed<Record<TimeUnit, number>>(() => {\n  const { spinnerDate } = props\n  const hours = spinnerDate.hour()\n  const minutes = spinnerDate.minute()\n  const seconds = spinnerDate.second()\n  return { hours, minutes, seconds }\n})\n\nconst timeList = computed(() => {\n  const { hours, minutes } = unref(timePartials)\n  const { role, spinnerDate } = props\n  const compare = !isRange ? spinnerDate : undefined\n  return {\n    hours: getHoursList(role, compare),\n    minutes: getMinutesList(hours, role, compare),\n    seconds: getSecondsList(hours, minutes, role, compare),\n  }\n})\n\nconst arrowControlTimeList = computed<Record<TimeUnit, TimeList>>(() => {\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  return {\n    hours: buildTimeList(hours, 23),\n    minutes: buildTimeList(minutes, 59),\n    seconds: buildTimeList(seconds, 59),\n  }\n})\n\nconst debouncedResetScroll = debounce((type) => {\n  isScrolling = false\n  adjustCurrentSpinner(type)\n}, 200)\n\nconst getAmPmFlag = (hour: number) => {\n  const shouldShowAmPm = !!props.amPmMode\n  if (!shouldShowAmPm) return ''\n  const isCapital = props.amPmMode === 'A'\n  // todo locale\n  let content = hour < 12 ? ' am' : ' pm'\n  if (isCapital) content = content.toUpperCase()\n  return content\n}\n\nconst emitSelectRange = (type: TimeUnit) => {\n  let range = [0, 0]\n  const actualFormat = format || DEFAULT_FORMATS_TIME\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  switch (type) {\n    case 'hours':\n      if (hourIndex !== -1) {\n        range = [hourIndex, hourIndex + 2]\n      }\n      break\n    case 'minutes':\n      if (minuteIndex !== -1) {\n        range = [minuteIndex, minuteIndex + 2]\n      }\n      break\n    case 'seconds':\n      if (secondIndex !== -1) {\n        range = [secondIndex, secondIndex + 2]\n      }\n      break\n  }\n  const [left, right] = range\n\n  emit('select-range', left, right)\n  currentScrollbar.value = type\n}\n\nconst adjustCurrentSpinner = (type: TimeUnit) => {\n  adjustSpinner(type, unref(timePartials)[type])\n}\n\nconst adjustSpinners = () => {\n  adjustCurrentSpinner('hours')\n  adjustCurrentSpinner('minutes')\n  adjustCurrentSpinner('seconds')\n}\n\nconst getScrollbarElement = (el: HTMLElement) =>\n  el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement\n\nconst adjustSpinner = (type: TimeUnit, value: number) => {\n  if (props.arrowControl) return\n  const scrollbar = unref(listRefsMap[type])\n  if (scrollbar && scrollbar.$el) {\n    if (!saveOnBlur) {\n      ignoreScroll[type] = true\n      rAF(() => {\n        ignoreScroll[type] = false\n      })\n    }\n    getScrollbarElement(scrollbar.$el).scrollTop = Math.max(\n      0,\n      value * typeItemHeight(type)\n    )\n  }\n}\n\nconst typeItemHeight = (type: TimeUnit): number => {\n  const scrollbar = unref(listRefsMap[type])\n  const listItem = scrollbar?.$el.querySelector('li')\n  if (listItem) {\n    return Number.parseFloat(getStyle(listItem, 'height')) || 0\n  }\n  return 0\n}\n\nconst onIncrement = () => {\n  scrollDown(1)\n}\n\nconst onDecrement = () => {\n  scrollDown(-1)\n}\n\nconst scrollDown = (step: number) => {\n  if (!currentScrollbar.value) {\n    emitSelectRange('hours')\n  }\n\n  const label = currentScrollbar.value!\n  const now = unref(timePartials)[label]\n  const total = currentScrollbar.value === 'hours' ? 24 : 60\n  const next = findNextUnDisabled(label, now, step, total)\n\n  modifyDateField(label, next)\n  adjustSpinner(label, next)\n  nextTick(() => emitSelectRange(label))\n}\n\nconst findNextUnDisabled = (\n  type: TimeUnit,\n  now: number,\n  step: number,\n  total: number\n) => {\n  let next = (now + step + total) % total\n  const list = unref(timeList)[type]\n  while (list[next] && next !== now) {\n    next = (next + step + total) % total\n  }\n  return next\n}\n\nconst modifyDateField = (type: TimeUnit, value: number) => {\n  const list = unref(timeList)[type]\n  const isDisabled = list[value]\n  if (isDisabled) return\n\n  const { hours, minutes, seconds } = unref(timePartials)\n\n  let changeTo\n  switch (type) {\n    case 'hours':\n      changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds)\n      break\n    case 'minutes':\n      changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds)\n      break\n    case 'seconds':\n      changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value)\n      break\n  }\n  emit(CHANGE_EVENT, changeTo)\n}\n\nconst handleClick = (\n  type: TimeUnit,\n  { value, disabled }: { value: number; disabled: boolean }\n) => {\n  if (!disabled) {\n    modifyDateField(type, value)\n    emitSelectRange(type)\n    adjustSpinner(type, value)\n  }\n}\n\nconst handleScroll = (type: TimeUnit) => {\n  if (!saveOnBlur && ignoreScroll[type]) return\n  const scrollbar = unref(listRefsMap[type])\n  if (!scrollbar) return\n\n  isScrolling = true\n  debouncedResetScroll(type)\n  const value = Math.min(\n    Math.round(\n      (getScrollbarElement(scrollbar.$el).scrollTop -\n        (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n        3) /\n        typeItemHeight(type)\n    ),\n    type === 'hours' ? 23 : 59\n  )\n  modifyDateField(type, value)\n}\n\nconst scrollBarHeight = (type: TimeUnit) => {\n  return unref(listRefsMap[type])!.$el.offsetHeight\n}\n\nconst bindScrollEvent = () => {\n  const bindFunction = (type: TimeUnit) => {\n    const scrollbar = unref(listRefsMap[type])\n    if (scrollbar && scrollbar.$el) {\n      getScrollbarElement(scrollbar.$el).onscroll = () => {\n        // TODO: scroll is emitted when set scrollTop programmatically\n        // should find better solutions in the future!\n        handleScroll(type)\n      }\n    }\n  }\n  bindFunction('hours')\n  bindFunction('minutes')\n  bindFunction('seconds')\n}\n\nonMounted(() => {\n  nextTick(() => {\n    !props.arrowControl && bindScrollEvent()\n    adjustSpinners()\n    // set selection on the first hour part\n    if (props.role === 'start') emitSelectRange('hours')\n  })\n})\n\nconst setRef = (scrollbar: ScrollbarInstance | null, type: TimeUnit) => {\n  listRefsMap[type].value = scrollbar ?? undefined\n}\n\nemit('set-option', [`${props.role}_scrollDown`, scrollDown])\nemit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\nwatch(\n  () => props.spinnerDate,\n  () => {\n    if (isScrolling) return\n    adjustSpinners()\n  }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwGA,MAAM,QAAQ;EAEd,MAAM,EAAE,SAAS,QAAQ,+BADC,4CAA0B,CACD;EACnD,MAAM,OAAO;EAEb,MAAM,KAAK,2BAAa,OAAM;EAE9B,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,qCACvD,MAAM,eACN,MAAM,iBACN,MAAM,gBACR;EAGA,IAAI,cAAc;EAClB,MAAM,eAAe;GACnB,OAAO;GACP,SAAS;GACT,SAAS;GACX;EAEA,MAAM,iCAAiC;EAIvC,MAAM,cAAoE;GACxE,qBAJ0C;GAK1C,uBAJ4C;GAK5C,uBAJ4C;GAK9C;EAGA,MAAM,uCAA8B;AAClC,UAAO,MAAM,cAAc,8BAAY,4BAAU,MAAM,GAAG,EAAC;IAC5D;EAED,MAAM,uCAAwD;GAC5D,MAAM,EAAE,gBAAgB;AAIxB,UAAO;IAAE,OAHK,YAAY,MAAK;IAGf,SAFA,YAAY,QAAO;IAEV,SADT,YAAY,QAAO;IACF;IAClC;EAED,MAAM,mCAA0B;GAC9B,MAAM,EAAE,OAAO,2BAAkB,aAAY;GAC7C,MAAM,EAAE,MAAM,gBAAgB;GAC9B,MAAM,UAAU,CAAC,UAAU,cAAc;AACzC,UAAO;IACL,OAAO,aAAa,MAAM,QAAQ;IAClC,SAAS,eAAe,OAAO,MAAM,QAAQ;IAC7C,SAAS,eAAe,OAAO,SAAS,MAAM,QAAQ;IACxD;IACD;EAED,MAAM,+CAAkE;GACtE,MAAM,EAAE,OAAO,SAAS,2BAAkB,aAAY;AAEtD,UAAO;IACL,OAAO,4BAAc,OAAO,GAAG;IAC/B,SAAS,4BAAc,SAAS,GAAG;IACnC,SAAS,4BAAc,SAAS,GAAG;IACrC;IACD;EAED,MAAM,qDAAiC,SAAS;AAC9C,iBAAc;AACd,wBAAqB,KAAI;KACxB,IAAG;EAEN,MAAM,eAAe,SAAiB;AAEpC,OAAI,CADmB,CAAC,CAAC,MAAM,SACV,QAAO;GAC5B,MAAM,YAAY,MAAM,aAAa;GAErC,IAAI,UAAU,OAAO,KAAK,QAAQ;AAClC,OAAI,UAAW,WAAU,QAAQ,aAAY;AAC7C,UAAO;;EAGT,MAAM,mBAAmB,SAAmB;GAC1C,IAAI,QAAQ,CAAC,GAAG,EAAC;GACjB,MAAM,eAAe,UAAU;GAC/B,MAAM,YAAY,aAAa,QAAQ,KAAI;GAC3C,MAAM,cAAc,aAAa,QAAQ,KAAI;GAC7C,MAAM,cAAc,aAAa,QAAQ,KAAI;AAC7C,WAAQ,MAAR;IACE,KAAK;AACH,SAAI,cAAc,GAChB,SAAQ,CAAC,WAAW,YAAY,EAAC;AAEnC;IACF,KAAK;AACH,SAAI,gBAAgB,GAClB,SAAQ,CAAC,aAAa,cAAc,EAAC;AAEvC;IACF,KAAK;AACH,SAAI,gBAAgB,GAClB,SAAQ,CAAC,aAAa,cAAc,EAAC;AAEvC;;GAEJ,MAAM,CAAC,MAAM,SAAS;AAEtB,QAAK,gBAAgB,MAAM,MAAK;AAChC,oBAAiB,QAAQ;;EAG3B,MAAM,wBAAwB,SAAmB;AAC/C,iBAAc,qBAAY,aAAa,CAAC,MAAK;;EAG/C,MAAM,uBAAuB;AAC3B,wBAAqB,QAAO;AAC5B,wBAAqB,UAAS;AAC9B,wBAAqB,UAAS;;EAGhC,MAAM,uBAAuB,OAC3B,GAAG,cAAc,IAAI,GAAG,UAAU,MAAM,kBAAkB;EAE5D,MAAM,iBAAiB,MAAgB,UAAkB;AACvD,OAAI,MAAM,aAAc;GACxB,MAAM,2BAAkB,YAAY,MAAK;AACzC,OAAI,aAAa,UAAU,KAAK;AAC9B,QAAI,CAAC,YAAY;AACf,kBAAa,QAAQ;AACrB,2BAAU;AACR,mBAAa,QAAQ;OACtB;;AAEH,wBAAoB,UAAU,IAAI,CAAC,YAAY,KAAK,IAClD,GACA,QAAQ,eAAe,KAAI,CAC7B;;;EAIJ,MAAM,kBAAkB,SAA2B;GAEjD,MAAM,0BADkB,YAAY,MAAK,EACb,IAAI,cAAc,KAAI;AAClD,OAAI,SACF,QAAO,OAAO,WAAW,uBAAS,UAAU,SAAS,CAAC,IAAI;AAE5D,UAAO;;EAGT,MAAM,oBAAoB;AACxB,cAAW,EAAC;;EAGd,MAAM,oBAAoB;AACxB,cAAW,GAAE;;EAGf,MAAM,cAAc,SAAiB;AACnC,OAAI,CAAC,iBAAiB,MACpB,iBAAgB,QAAO;GAGzB,MAAM,QAAQ,iBAAiB;GAC/B,MAAM,qBAAY,aAAa,CAAC;GAEhC,MAAM,OAAO,mBAAmB,OAAO,KAAK,MAD9B,iBAAiB,UAAU,UAAU,KAAK,GACD;AAEvD,mBAAgB,OAAO,KAAI;AAC3B,iBAAc,OAAO,KAAI;AACzB,2BAAe,gBAAgB,MAAM,CAAA;;EAGvC,MAAM,sBACJ,MACA,KACA,MACA,UACG;GACH,IAAI,QAAQ,MAAM,OAAO,SAAS;GAClC,MAAM,sBAAa,SAAS,CAAC;AAC7B,UAAO,KAAK,SAAS,SAAS,IAC5B,SAAQ,OAAO,OAAO,SAAS;AAEjC,UAAO;;EAGT,MAAM,mBAAmB,MAAgB,UAAkB;AAGzD,sBAFmB,SAAS,CAAC,MACL,OACR;GAEhB,MAAM,EAAE,OAAO,SAAS,2BAAkB,aAAY;GAEtD,IAAI;AACJ,WAAQ,MAAR;IACE,KAAK;AACH,gBAAW,MAAM,YAAY,KAAK,MAAM,CAAC,OAAO,QAAQ,CAAC,OAAO,QAAO;AACvE;IACF,KAAK;AACH,gBAAW,MAAM,YAAY,KAAK,MAAM,CAAC,OAAO,MAAM,CAAC,OAAO,QAAO;AACrE;IACF,KAAK;AACH,gBAAW,MAAM,YAAY,KAAK,MAAM,CAAC,OAAO,QAAQ,CAAC,OAAO,MAAK;AACrE;;AAEJ,QAAK,4BAAc,SAAQ;;EAG7B,MAAM,eACJ,MACA,EAAE,OAAO,eACN;AACH,OAAI,CAAC,UAAU;AACb,oBAAgB,MAAM,MAAK;AAC3B,oBAAgB,KAAI;AACpB,kBAAc,MAAM,MAAK;;;EAI7B,MAAM,gBAAgB,SAAmB;AACvC,OAAI,CAAC,cAAc,aAAa,MAAO;GACvC,MAAM,2BAAkB,YAAY,MAAK;AACzC,OAAI,CAAC,UAAW;AAEhB,iBAAc;AACd,wBAAqB,KAAI;AAUzB,mBAAgB,MATF,KAAK,IACjB,KAAK,OACF,oBAAoB,UAAU,IAAI,CAAC,aACjC,gBAAgB,KAAK,GAAG,KAAM,MAAM,eAAe,KAAK,GACzD,KACA,eAAe,KAAI,CACtB,EACD,SAAS,UAAU,KAAK,GAC1B,CAC2B;;EAG7B,MAAM,mBAAmB,SAAmB;AAC1C,yBAAa,YAAY,MAAM,CAAE,IAAI;;EAGvC,MAAM,wBAAwB;GAC5B,MAAM,gBAAgB,SAAmB;IACvC,MAAM,2BAAkB,YAAY,MAAK;AACzC,QAAI,aAAa,UAAU,IACzB,qBAAoB,UAAU,IAAI,CAAC,iBAAiB;AAGlD,kBAAa,KAAI;;;AAIvB,gBAAa,QAAO;AACpB,gBAAa,UAAS;AACtB,gBAAa,UAAS;;AAGxB,2BAAgB;AACd,2BAAe;AACb,KAAC,MAAM,gBAAgB,iBAAgB;AACvC,oBAAe;AAEf,QAAI,MAAM,SAAS,QAAS,iBAAgB,QAAO;KACpD;IACF;EAED,MAAM,UAAU,WAAqC,SAAmB;AACtE,eAAY,MAAM,QAAQ,aAAa;;AAGzC,OAAK,cAAc,CAAC,GAAG,MAAM,KAAK,cAAc,WAAW,CAAA;AAC3D,OAAK,cAAc,CAAC,GAAG,MAAM,KAAK,mBAAmB,gBAAgB,CAAA;AAErE,uBACQ,MAAM,mBACN;AACJ,OAAI,YAAa;AACjB,mBAAe;IAEnB;;4DAlTQ,OAAA,EA5EA,+BAAK,gBAAG,GAAE,CAAC,EAAC,UAAA,EAAA,EAAA,eAA8BA,KAAAA,aAAW,CAAA,CAAA,MACxCC,KAAAA,sEA+BA,cAAA,EAAA,KAAA,GAAA,sBA7BE,aAAA,QAAR,SAAI;qEA6BE,4BAAA,EAAA;KA5BZ,KAAK;;KACL,MAAM,cAAuB,OAAO,WAAkB,KAAI;KAC1D,8CAAO,GAAE,CAAC,GAAE,WAAA,UAAA,CAAA;KACb,cAAW;KACV,6BAAY,GAAE,CAAC,GAAE,WAAA,OAAA;KAClB,UAAA;KACA,KAAI;KACH,eAAU,WAAE,gBAAgB,KAAI;KAChC,cAAS,WAAE,qBAAqB,KAAI;;qCAGM,wDAgBtC,cAAA,0BAhBuB,SAAA,MAAS,QAA3B,UAAU,QAAG;+DAgBlB,MAAA;OAfG;OACL,+BAAK;uBAAgB,GAAE,CAAC,GAAE,WAAA,OAAA;uBAAiC,GAAE,CAAC,GAAE,UAAW,QAAQ,aAAA,MAAa,MAAI;uBAAgB,GAAE,CAAC,GAAE,YAAa,SAAQ;;OAK9I,UAAK,WAAE,YAAY,MAAI;QAAA,OAAW;QAAK;QAAQ,CAAA;UAEhC,SAAI,6DAGT,cAAA,EAAA,KAAA,GAAA,EAAA,2DAFEC,KAAAA,WAAW,MAAG,MAAA,KAAc,MAAM,MAAK,GAAA,CAAA,4BAC7C,YAAY,IAAG,CAAA,EAAA,EAAA,6DAIX,cAAA,EAAA,KAAA,GAAA,EAAA,0DADC,KAAK,MAAK,GAAA,CAAA,EAAA,EAAA;;;;;;;;;0DAKZD,KAAAA,sEAwCR,cAAA,EAAA,KAAA,GAAA,sBAtCW,aAAA,QAAR,SAAI;6DAsCP,OAAA;KArCH,KAAK;KACL,+BAAK,gBAAG,GAAE,CAAC,GAAE,WAAA,UAAA,iBAAwB,GAAE,CAAC,GAAE,QAAA,CAAA,CAAA;KAC1C,eAAU,WAAE,gBAAgB,KAAI;;wFAOvB,uBAAA,EAAA,EAHP,+BAAK,CAAA,2BAAe,GAAE,CAAC,GAAE,WAAA,QAAA,CAAA,CAAA;sCAEd,qCAAA,gCAAA,CAAA;;wEAHI,YAAW;wFAUnB,uBAAA,EAAA,EAHP,+BAAK,CAAA,6BAAiB,GAAE,CAAC,GAAE,WAAA,QAAA,CAAA,CAAA;sCAEd,qCAAA,kCAAA,CAAA;;wEAHE,YAAW;iCAyBxB,MAAA,EApBA,8CAAO,GAAE,CAAC,GAAE,WAAA,OAAA,CAAA,4DAmBV,cAAA,0BAjBmB,qBAAA,MAAqB,QAAnC,MAAM,QAAG;+DAiBd,MAAA;OAhBG;OACL,+BAAK;uBAAkB,GAAE,CAAC,GAAE,WAAA,OAAA;uBAAmC,GAAE,CAAC,GAAE,UAAW,SAAS,aAAA,MAAa,MAAI;uBAAkB,GAAE,CAAC,GAAE,YAAa,SAAA,MAAS,MAAM,MAAI;;yBAMjJ,uBAAQ,CAAC,KAAI,sDAQlB,cAAA,EAAA,KAAA,GAAA,EAAA,CAPO,SAAI,6DAGT,cAAA,EAAA,KAAA,GAAA,EAAA,2DAFEC,KAAAA,WAAW,OAAI,MAAA,KAAc,OAAO,MAAK,GAAA,CAAA,4BAC/C,YAAY,KAAI,CAAA,EAAA,EAAA,6DAIZ,cAAA,EAAA,KAAA,GAAA,EAAA,0DADC,MAAM,MAAK,GAAA,CAAA,EAAA,EAAA"}

package/lib/components/time-picker/src/time-picker-com/panel-time-pick.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-time-pick.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"],"sourcesContent":["<template>\n  <transition :name=\"transitionName\">\n    <div v-if=\"actualVisible || visible\" :class=\"ns.b('panel')\">\n      <div :class=\"[ns.be('panel', 'content'), { 'has-seconds': showSeconds }]\">\n        <time-spinner\n          ref=\"spinner\"\n          :role=\"datetimeRole || 'start'\"\n          :arrow-control=\"arrowControl\"\n          :show-seconds=\"showSeconds\"\n          :am-pm-mode=\"amPmMode\"\n          :spinner-date=\"\n            // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n            parsedValue as any\n          \"\n          :disabled-hours=\"disabledHours\"\n          :disabled-minutes=\"disabledMinutes\"\n          :disabled-seconds=\"disabledSeconds\"\n          @change=\"handleChange\"\n          @set-option=\"onSetOption\"\n          @select-range=\"setSelectionRange\"\n        />\n      </div>\n      <div :class=\"ns.be('panel', 'footer')\">\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'cancel']\"\n          @click=\"handleCancel\"\n        >\n          {{ t('el.datepicker.cancel') }}\n        </button>\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'confirm']\"\n          @click=\"handleConfirm()\"\n        >\n          {{ t('el.datepicker.confirm') }}\n        </button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isUndefined } from '@element-plus/utils'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimePickerProps } from '../props/panel-time-picker'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimePickerProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\n// Injections\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds)\n\nconst ns = useNamespace('time')\nconst { t, lang } = useLocale()\n// data\nconst selectionRange = ref([0, 2])\nconst oldValue = useOldValue(props)\n// computed\nconst transitionName = computed(() => {\n  return isUndefined(props.actualVisible)\n    ? `${ns.namespace.value}-zoom-in-top`\n    : ''\n})\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n// method\nconst isValidValue = (_date: Dayjs) => {\n  const parsedDate = dayjs(_date).locale(lang.value)\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate.isSame(result)\n}\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\nconst handleConfirm = (visible = false, first = false) => {\n  if (first) return\n  emit('pick', props.parsedValue, visible)\n}\nconst handleChange = (_date: Dayjs) => {\n  // visible avoids edge cases, when use scrolls during panel closing animation\n  if (!props.visible) {\n    return\n  }\n  const result = getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', result, true)\n}\n\nconst setSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end)\n  selectionRange.value = [start, end]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const actualFormat = props.format\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  const list: number[] = []\n  const mapping: string[] = []\n  if (hourIndex !== -1) {\n    list.push(hourIndex)\n    mapping.push('hours')\n  }\n  if (minuteIndex !== -1) {\n    list.push(minuteIndex)\n    mapping.push('minutes')\n  }\n  if (secondIndex !== -1 && showSeconds.value) {\n    list.push(secondIndex)\n    mapping.push('seconds')\n  }\n\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  timePickerOptions['start_emitSelectRange'](mapping[next])\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    timePickerOptions['start_scrollDown'](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst getRangeAvailableTime = (date: Dayjs) => {\n  return getAvailableTime(date, props.datetimeRole || '', true)\n}\n\nconst parseUserInput = (value: Dayjs) => {\n  if (!value) return null\n  return dayjs(value, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  return dayjs(defaultValue).locale(lang.value)\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\n</script>\n"],"mappings":""}
+{"version":3,"file":"panel-time-pick.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"],"sourcesContent":["<template>\n  <transition :name=\"transitionName\">\n    <div v-if=\"actualVisible || visible\" :class=\"ns.b('panel')\">\n      <div :class=\"[ns.be('panel', 'content'), { 'has-seconds': showSeconds }]\">\n        <time-spinner\n          ref=\"spinner\"\n          :role=\"datetimeRole || 'start'\"\n          :arrow-control=\"arrowControl\"\n          :show-seconds=\"showSeconds\"\n          :am-pm-mode=\"amPmMode\"\n          :spinner-date=\"\n            // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n            parsedValue as any\n          \"\n          :disabled-hours=\"disabledHours\"\n          :disabled-minutes=\"disabledMinutes\"\n          :disabled-seconds=\"disabledSeconds\"\n          @change=\"handleChange\"\n          @set-option=\"onSetOption\"\n          @select-range=\"setSelectionRange\"\n        />\n      </div>\n      <div :class=\"ns.be('panel', 'footer')\">\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'cancel']\"\n          @click=\"handleCancel\"\n        >\n          {{ t('el.datepicker.cancel') }}\n        </button>\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'confirm']\"\n          @click=\"handleConfirm()\"\n        >\n          {{ t('el.datepicker.confirm') }}\n        </button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isUndefined } from '@element-plus/utils'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimePickerProps } from '../props/panel-time-picker'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimePickerProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\n// Injections\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds)\n\nconst ns = useNamespace('time')\nconst { t, lang } = useLocale()\n// data\nconst selectionRange = ref([0, 2])\n\nconst oldValue = useOldValue(props, {\n  modelValue: computed(() => pickerBase.props.modelValue),\n  valueOnClear: computed(() =>\n    pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.value : null\n  ),\n})\n\n// computed\nconst transitionName = computed(() => {\n  return isUndefined(props.actualVisible)\n    ? `${ns.namespace.value}-zoom-in-top`\n    : ''\n})\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n// method\nconst isValidValue = (_date: Dayjs) => {\n  const parsedDate = dayjs(_date).locale(lang.value)\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate.isSame(result)\n}\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\nconst handleConfirm = (visible = false, first = false) => {\n  if (first) return\n  emit('pick', props.parsedValue, visible)\n}\nconst handleChange = (_date: Dayjs) => {\n  // visible avoids edge cases, when use scrolls during panel closing animation\n  if (!props.visible) {\n    return\n  }\n  const result = getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', result, true)\n}\n\nconst setSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end)\n  selectionRange.value = [start, end]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const actualFormat = props.format\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  const list: number[] = []\n  const mapping: string[] = []\n  if (hourIndex !== -1) {\n    list.push(hourIndex)\n    mapping.push('hours')\n  }\n  if (minuteIndex !== -1) {\n    list.push(minuteIndex)\n    mapping.push('minutes')\n  }\n  if (secondIndex !== -1 && showSeconds.value) {\n    list.push(secondIndex)\n    mapping.push('seconds')\n  }\n\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  timePickerOptions['start_emitSelectRange'](mapping[next])\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    timePickerOptions['start_scrollDown'](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst getRangeAvailableTime = (date: Dayjs) => {\n  return getAvailableTime(date, props.datetimeRole || '', true)\n}\n\nconst parseUserInput = (value: Dayjs) => {\n  if (!value) return null\n  return dayjs(value, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  return dayjs(defaultValue).locale(lang.value)\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\nemit('set-picker-option', ['handleCancel', handleCancel])\n</script>\n"],"mappings":""}

package/lib/components/time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_setup_true_lang.js

@@ -25,12 +25,16 @@ var panel_time_pick_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY).props;
+		const pickerBase = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY);
+		const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props;
 		const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = require_use_time_picker.buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
 		const ns = require_index$1.useNamespace("time");
 		const { t, lang } = require_index.useLocale();
 		const selectionRange = (0, vue.ref)([0, 2]);
-		const oldValue = require_use_time_picker.useOldValue(props);
+		const oldValue = require_use_time_picker.useOldValue(props, {
+			modelValue: (0, vue.computed)(() => pickerBase.props.modelValue),
+			valueOnClear: (0, vue.computed)(() => pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.value : null)
+		});
 		const transitionName = (0, vue.computed)(() => {
 			return require_types.isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
 		});
@@ -123,6 +127,7 @@ var panel_time_pick_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
 		emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
 		emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
+		emit("set-picker-option", ["handleCancel", handleCancel]);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, { name: transitionName.value }, {
 				default: (0, vue.withCtx)(() => [_ctx.actualVisible || _ctx.visible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {

package/lib/components/time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-time-pick.vue_vue_type_script_setup_true_lang.js","names":["actualVisible","visible","datetimeRole","parsedValue"],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"],"sourcesContent":["<template>\n  <transition :name=\"transitionName\">\n    <div v-if=\"actualVisible || visible\" :class=\"ns.b('panel')\">\n      <div :class=\"[ns.be('panel', 'content'), { 'has-seconds': showSeconds }]\">\n        <time-spinner\n          ref=\"spinner\"\n          :role=\"datetimeRole || 'start'\"\n          :arrow-control=\"arrowControl\"\n          :show-seconds=\"showSeconds\"\n          :am-pm-mode=\"amPmMode\"\n          :spinner-date=\"\n            // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n            parsedValue as any\n          \"\n          :disabled-hours=\"disabledHours\"\n          :disabled-minutes=\"disabledMinutes\"\n          :disabled-seconds=\"disabledSeconds\"\n          @change=\"handleChange\"\n          @set-option=\"onSetOption\"\n          @select-range=\"setSelectionRange\"\n        />\n      </div>\n      <div :class=\"ns.be('panel', 'footer')\">\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'cancel']\"\n          @click=\"handleCancel\"\n        >\n          {{ t('el.datepicker.cancel') }}\n        </button>\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'confirm']\"\n          @click=\"handleConfirm()\"\n        >\n          {{ t('el.datepicker.confirm') }}\n        </button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isUndefined } from '@element-plus/utils'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimePickerProps } from '../props/panel-time-picker'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimePickerProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\n// Injections\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds)\n\nconst ns = useNamespace('time')\nconst { t, lang } = useLocale()\n// data\nconst selectionRange = ref([0, 2])\nconst oldValue = useOldValue(props)\n// computed\nconst transitionName = computed(() => {\n  return isUndefined(props.actualVisible)\n    ? `${ns.namespace.value}-zoom-in-top`\n    : ''\n})\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n// method\nconst isValidValue = (_date: Dayjs) => {\n  const parsedDate = dayjs(_date).locale(lang.value)\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate.isSame(result)\n}\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\nconst handleConfirm = (visible = false, first = false) => {\n  if (first) return\n  emit('pick', props.parsedValue, visible)\n}\nconst handleChange = (_date: Dayjs) => {\n  // visible avoids edge cases, when use scrolls during panel closing animation\n  if (!props.visible) {\n    return\n  }\n  const result = getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', result, true)\n}\n\nconst setSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end)\n  selectionRange.value = [start, end]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const actualFormat = props.format\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  const list: number[] = []\n  const mapping: string[] = []\n  if (hourIndex !== -1) {\n    list.push(hourIndex)\n    mapping.push('hours')\n  }\n  if (minuteIndex !== -1) {\n    list.push(minuteIndex)\n    mapping.push('minutes')\n  }\n  if (secondIndex !== -1 && showSeconds.value) {\n    list.push(secondIndex)\n    mapping.push('seconds')\n  }\n\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  timePickerOptions['start_emitSelectRange'](mapping[next])\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    timePickerOptions['start_scrollDown'](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst getRangeAvailableTime = (date: Dayjs) => {\n  return getAvailableTime(date, props.datetimeRole || '', true)\n}\n\nconst parseUserInput = (value: Dayjs) => {\n  if (!value) return null\n  return dayjs(value, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  return dayjs(defaultValue).locale(lang.value)\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"panel-time-pick.vue_vue_type_script_setup_true_lang.js","names":["actualVisible","visible","datetimeRole","parsedValue"],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"],"sourcesContent":["<template>\n  <transition :name=\"transitionName\">\n    <div v-if=\"actualVisible || visible\" :class=\"ns.b('panel')\">\n      <div :class=\"[ns.be('panel', 'content'), { 'has-seconds': showSeconds }]\">\n        <time-spinner\n          ref=\"spinner\"\n          :role=\"datetimeRole || 'start'\"\n          :arrow-control=\"arrowControl\"\n          :show-seconds=\"showSeconds\"\n          :am-pm-mode=\"amPmMode\"\n          :spinner-date=\"\n            // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n            parsedValue as any\n          \"\n          :disabled-hours=\"disabledHours\"\n          :disabled-minutes=\"disabledMinutes\"\n          :disabled-seconds=\"disabledSeconds\"\n          @change=\"handleChange\"\n          @set-option=\"onSetOption\"\n          @select-range=\"setSelectionRange\"\n        />\n      </div>\n      <div :class=\"ns.be('panel', 'footer')\">\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'cancel']\"\n          @click=\"handleCancel\"\n        >\n          {{ t('el.datepicker.cancel') }}\n        </button>\n        <button\n          type=\"button\"\n          :class=\"[ns.be('panel', 'btn'), 'confirm']\"\n          @click=\"handleConfirm()\"\n        >\n          {{ t('el.datepicker.confirm') }}\n        </button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isUndefined } from '@element-plus/utils'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimePickerProps } from '../props/panel-time-picker'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimePickerProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\n// Injections\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds)\n\nconst ns = useNamespace('time')\nconst { t, lang } = useLocale()\n// data\nconst selectionRange = ref([0, 2])\n\nconst oldValue = useOldValue(props, {\n  modelValue: computed(() => pickerBase.props.modelValue),\n  valueOnClear: computed(() =>\n    pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.value : null\n  ),\n})\n\n// computed\nconst transitionName = computed(() => {\n  return isUndefined(props.actualVisible)\n    ? `${ns.namespace.value}-zoom-in-top`\n    : ''\n})\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n// method\nconst isValidValue = (_date: Dayjs) => {\n  const parsedDate = dayjs(_date).locale(lang.value)\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate.isSame(result)\n}\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\nconst handleConfirm = (visible = false, first = false) => {\n  if (first) return\n  emit('pick', props.parsedValue, visible)\n}\nconst handleChange = (_date: Dayjs) => {\n  // visible avoids edge cases, when use scrolls during panel closing animation\n  if (!props.visible) {\n    return\n  }\n  const result = getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', result, true)\n}\n\nconst setSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end)\n  selectionRange.value = [start, end]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const actualFormat = props.format\n  const hourIndex = actualFormat.indexOf('HH')\n  const minuteIndex = actualFormat.indexOf('mm')\n  const secondIndex = actualFormat.indexOf('ss')\n  const list: number[] = []\n  const mapping: string[] = []\n  if (hourIndex !== -1) {\n    list.push(hourIndex)\n    mapping.push('hours')\n  }\n  if (minuteIndex !== -1) {\n    list.push(minuteIndex)\n    mapping.push('minutes')\n  }\n  if (secondIndex !== -1 && showSeconds.value) {\n    list.push(secondIndex)\n    mapping.push('seconds')\n  }\n\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  timePickerOptions['start_emitSelectRange'](mapping[next])\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    timePickerOptions['start_scrollDown'](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst getRangeAvailableTime = (date: Dayjs) => {\n  return getAvailableTime(date, props.datetimeRole || '', true)\n}\n\nconst parseUserInput = (value: Dayjs) => {\n  if (!value) return null\n  return dayjs(value, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  return dayjs(defaultValue).locale(lang.value)\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\nemit('set-picker-option', ['handleCancel', handleCancel])\n</script>\n"],"mappings":"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"}

package/lib/components/time-picker/src/time-picker-com/panel-time-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-time-range.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-range.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"actualVisible\"\n    :class=\"[nsTime.b('range-picker'), nsPicker.b('panel')]\"\n  >\n    <div :class=\"nsTime.be('range-picker', 'content')\">\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.startTime') }}\n        </div>\n        <div :class=\"startContainerKls\">\n          <time-spinner\n            ref=\"minSpinner\"\n            role=\"start\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"startTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMinChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMinSelectionRange\"\n          />\n        </div>\n      </div>\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.endTime') }}\n        </div>\n        <div :class=\"endContainerKls\">\n          <time-spinner\n            ref=\"maxSpinner\"\n            role=\"end\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"endTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMaxChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMaxSelectionRange\"\n          />\n        </div>\n      </div>\n    </div>\n    <div :class=\"nsTime.be('panel', 'footer')\">\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'cancel']\"\n        @click=\"handleCancel()\"\n      >\n        {{ t('el.datepicker.cancel') }}\n      </button>\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'confirm']\"\n        :disabled=\"btnConfirmDisabled\"\n        @click=\"handleConfirm()\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref, unref } from 'vue'\nimport dayjs from 'dayjs'\nimport { union } from 'lodash-unified'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isArray } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimeRangeProps } from '../props/panel-time-range'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimeRangeProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\nconst makeSelectRange = (start: number, end: number) => {\n  const result: number[] = []\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n  return result\n}\n\nconst { t, lang } = useLocale()\nconst nsTime = useNamespace('time')\nconst nsPicker = useNamespace('picker')\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\n\nconst startContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\nconst endContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\n\nconst startTime = computed(() => props.parsedValue![0])\nconst endTime = computed(() => props.parsedValue![1])\nconst oldValue = useOldValue(props)\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n\nconst handleConfirm = (visible = false) => {\n  emit('pick', [startTime.value, endTime.value], visible)\n}\n\nconst handleMinChange = (date: Dayjs) => {\n  handleChange(date.millisecond(0), endTime.value)\n}\nconst handleMaxChange = (date: Dayjs) => {\n  handleChange(startTime.value, date.millisecond(0))\n}\n\nconst isValidValue = (_date: Dayjs[]) => {\n  const parsedDate = _date.map((_) => dayjs(_).locale(lang.value))\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])\n}\n\nconst handleChange = (start: Dayjs, end: Dayjs) => {\n  if (!props.visible) {\n    return\n  }\n  // todo getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', [start, end], true)\n}\nconst btnConfirmDisabled = computed(() => {\n  return startTime.value > endTime.value\n})\n\nconst selectionRange = ref([0, 2])\nconst setMinSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'min')\n  selectionRange.value = [start, end]\n}\n\nconst offset = computed(() => (showSeconds.value ? 11 : 8))\nconst setMaxSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'max')\n  const _offset = unref(offset)\n  selectionRange.value = [start + _offset, end + _offset]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]\n  const mapping = ['hours', 'minutes'].concat(\n    showSeconds.value ? ['seconds'] : []\n  )\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  const half = list.length / 2\n  if (next < half) {\n    timePickerOptions['start_emitSelectRange'](mapping[next])\n  } else {\n    timePickerOptions['end_emitSelectRange'](mapping[next - half])\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    const role = selectionRange.value[0] < offset.value ? 'start' : 'end'\n    timePickerOptions[`${role}_scrollDown`](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst disabledHours_ = (role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledHours ? disabledHours(role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const nextDisable = isStart\n    ? makeSelectRange(compareHour + 1, 23)\n    : makeSelectRange(0, compareHour - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledMinutes_ = (hour: number, role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  if (hour !== compareHour) {\n    return defaultDisable\n  }\n  const compareMinute = compareDate.minute()\n  const nextDisable = isStart\n    ? makeSelectRange(compareMinute + 1, 59)\n    : makeSelectRange(0, compareMinute - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledSeconds_ = (\n  hour: number,\n  minute: number,\n  role: string,\n  compare?: Dayjs\n) => {\n  const defaultDisable = disabledSeconds\n    ? disabledSeconds(hour, minute, role)\n    : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const compareMinute = compareDate.minute()\n  if (hour !== compareHour || minute !== compareMinute) {\n    return defaultDisable\n  }\n  const compareSecond = compareDate.second()\n  const nextDisable = isStart\n    ? makeSelectRange(compareSecond + 1, 59)\n    : makeSelectRange(0, compareSecond - 1)\n  return union(defaultDisable, nextDisable)\n}\n\nconst getRangeAvailableTime = ([start, end]: Array<Dayjs>) => {\n  return [\n    getAvailableTime(start, 'start', true, end),\n    getAvailableTime(end, 'end', false, start),\n  ] as const\n}\n\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(\n    disabledHours_,\n    disabledMinutes_,\n    disabledSeconds_\n  )\n\nconst {\n  timePickerOptions,\n\n  getAvailableTime,\n  onSetOption,\n} = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst parseUserInput = (days: Dayjs[] | Dayjs) => {\n  if (!days) return null\n  if (isArray(days)) {\n    return days.map((d) => dayjs(d, props.format).locale(lang.value))\n  }\n  return dayjs(days, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  if (isArray(defaultValue)) {\n    return defaultValue.map((d: Date) => dayjs(d).locale(lang.value))\n  }\n  const defaultDay = dayjs(defaultValue).locale(lang.value)\n  return [defaultDay, defaultDay.add(60, 'm')]\n}\n\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\n</script>\n"],"mappings":""}
+{"version":3,"file":"panel-time-range.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-range.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"actualVisible\"\n    :class=\"[nsTime.b('range-picker'), nsPicker.b('panel')]\"\n  >\n    <div :class=\"nsTime.be('range-picker', 'content')\">\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.startTime') }}\n        </div>\n        <div :class=\"startContainerKls\">\n          <time-spinner\n            ref=\"minSpinner\"\n            role=\"start\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"startTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMinChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMinSelectionRange\"\n          />\n        </div>\n      </div>\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.endTime') }}\n        </div>\n        <div :class=\"endContainerKls\">\n          <time-spinner\n            ref=\"maxSpinner\"\n            role=\"end\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"endTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMaxChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMaxSelectionRange\"\n          />\n        </div>\n      </div>\n    </div>\n    <div :class=\"nsTime.be('panel', 'footer')\">\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'cancel']\"\n        @click=\"handleCancel()\"\n      >\n        {{ t('el.datepicker.cancel') }}\n      </button>\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'confirm']\"\n        :disabled=\"btnConfirmDisabled\"\n        @click=\"handleConfirm()\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref, unref } from 'vue'\nimport dayjs from 'dayjs'\nimport { union } from 'lodash-unified'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isArray } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimeRangeProps } from '../props/panel-time-range'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimeRangeProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\nconst makeSelectRange = (start: number, end: number) => {\n  const result: number[] = []\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n  return result\n}\n\nconst { t, lang } = useLocale()\nconst nsTime = useNamespace('time')\nconst nsPicker = useNamespace('picker')\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\n\nconst startContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\nconst endContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\n\nconst startTime = computed(() => props.parsedValue![0])\nconst endTime = computed(() => props.parsedValue![1])\nconst oldValue = useOldValue(props, {\n  modelValue: computed(() => pickerBase.props.modelValue),\n  valueOnClear: computed(() =>\n    pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.value : null\n  ),\n})\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\n\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n\nconst handleConfirm = (visible = false) => {\n  emit('pick', [startTime.value, endTime.value], visible)\n}\n\nconst handleMinChange = (date: Dayjs) => {\n  handleChange(date.millisecond(0), endTime.value)\n}\nconst handleMaxChange = (date: Dayjs) => {\n  handleChange(startTime.value, date.millisecond(0))\n}\n\nconst isValidValue = (_date: Dayjs[]) => {\n  const parsedDate = _date.map((_) => dayjs(_).locale(lang.value))\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])\n}\n\nconst handleChange = (start: Dayjs, end: Dayjs) => {\n  if (!props.visible) {\n    return\n  }\n  // todo getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', [start, end], true)\n}\nconst btnConfirmDisabled = computed(() => {\n  return startTime.value > endTime.value\n})\n\nconst selectionRange = ref([0, 2])\nconst setMinSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'min')\n  selectionRange.value = [start, end]\n}\n\nconst offset = computed(() => (showSeconds.value ? 11 : 8))\nconst setMaxSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'max')\n  const _offset = unref(offset)\n  selectionRange.value = [start + _offset, end + _offset]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]\n  const mapping = ['hours', 'minutes'].concat(\n    showSeconds.value ? ['seconds'] : []\n  )\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  const half = list.length / 2\n  if (next < half) {\n    timePickerOptions['start_emitSelectRange'](mapping[next])\n  } else {\n    timePickerOptions['end_emitSelectRange'](mapping[next - half])\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    const role = selectionRange.value[0] < offset.value ? 'start' : 'end'\n    timePickerOptions[`${role}_scrollDown`](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst disabledHours_ = (role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledHours ? disabledHours(role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const nextDisable = isStart\n    ? makeSelectRange(compareHour + 1, 23)\n    : makeSelectRange(0, compareHour - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledMinutes_ = (hour: number, role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  if (hour !== compareHour) {\n    return defaultDisable\n  }\n  const compareMinute = compareDate.minute()\n  const nextDisable = isStart\n    ? makeSelectRange(compareMinute + 1, 59)\n    : makeSelectRange(0, compareMinute - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledSeconds_ = (\n  hour: number,\n  minute: number,\n  role: string,\n  compare?: Dayjs\n) => {\n  const defaultDisable = disabledSeconds\n    ? disabledSeconds(hour, minute, role)\n    : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const compareMinute = compareDate.minute()\n  if (hour !== compareHour || minute !== compareMinute) {\n    return defaultDisable\n  }\n  const compareSecond = compareDate.second()\n  const nextDisable = isStart\n    ? makeSelectRange(compareSecond + 1, 59)\n    : makeSelectRange(0, compareSecond - 1)\n  return union(defaultDisable, nextDisable)\n}\n\nconst getRangeAvailableTime = ([start, end]: Array<Dayjs>) => {\n  return [\n    getAvailableTime(start, 'start', true, end),\n    getAvailableTime(end, 'end', false, start),\n  ] as const\n}\n\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(\n    disabledHours_,\n    disabledMinutes_,\n    disabledSeconds_\n  )\n\nconst {\n  timePickerOptions,\n\n  getAvailableTime,\n  onSetOption,\n} = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst parseUserInput = (days: Dayjs[] | Dayjs) => {\n  if (!days) return null\n  if (isArray(days)) {\n    return days.map((d) => dayjs(d, props.format).locale(lang.value))\n  }\n  return dayjs(days, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  if (isArray(defaultValue)) {\n    return defaultValue.map((d: Date) => dayjs(d).locale(lang.value))\n  }\n  const defaultDay = dayjs(defaultValue).locale(lang.value)\n  return [defaultDay, defaultDay.add(60, 'm')]\n}\n\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['handleCancel', handleCancel])\n</script>\n"],"mappings":""}

package/lib/components/time-picker/src/time-picker-com/panel-time-range.vue_vue_type_script_setup_true_lang.js

@@ -35,7 +35,8 @@ var panel_time_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const { t, lang } = require_index.useLocale();
 		const nsTime = require_index$1.useNamespace("time");
 		const nsPicker = require_index$1.useNamespace("picker");
-		const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY).props;
+		const pickerBase = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY);
+		const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props;
 		const startContainerKls = (0, vue.computed)(() => [
 			nsTime.be("range-picker", "body"),
 			nsTime.be("panel", "content"),
@@ -50,7 +51,10 @@ var panel_time_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		]);
 		const startTime = (0, vue.computed)(() => props.parsedValue[0]);
 		const endTime = (0, vue.computed)(() => props.parsedValue[1]);
-		const oldValue = require_use_time_picker.useOldValue(props);
+		const oldValue = require_use_time_picker.useOldValue(props, {
+			modelValue: (0, vue.computed)(() => pickerBase.props.modelValue),
+			valueOnClear: (0, vue.computed)(() => pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.value : null)
+		});
 		const handleCancel = () => {
 			const old = oldValue.value;
 			emit("pick", old, false);
@@ -181,6 +185,7 @@ var panel_time_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
 		emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
 		emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
+		emit("set-picker-option", ["handleCancel", handleCancel]);
 		return (_ctx, _cache) => {
 			return _ctx.actualVisible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,

package/lib/components/time-picker/src/time-picker-com/panel-time-range.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-time-range.vue_vue_type_script_setup_true_lang.js","names":["actualVisible"],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-range.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"actualVisible\"\n    :class=\"[nsTime.b('range-picker'), nsPicker.b('panel')]\"\n  >\n    <div :class=\"nsTime.be('range-picker', 'content')\">\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.startTime') }}\n        </div>\n        <div :class=\"startContainerKls\">\n          <time-spinner\n            ref=\"minSpinner\"\n            role=\"start\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"startTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMinChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMinSelectionRange\"\n          />\n        </div>\n      </div>\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.endTime') }}\n        </div>\n        <div :class=\"endContainerKls\">\n          <time-spinner\n            ref=\"maxSpinner\"\n            role=\"end\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"endTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMaxChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMaxSelectionRange\"\n          />\n        </div>\n      </div>\n    </div>\n    <div :class=\"nsTime.be('panel', 'footer')\">\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'cancel']\"\n        @click=\"handleCancel()\"\n      >\n        {{ t('el.datepicker.cancel') }}\n      </button>\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'confirm']\"\n        :disabled=\"btnConfirmDisabled\"\n        @click=\"handleConfirm()\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref, unref } from 'vue'\nimport dayjs from 'dayjs'\nimport { union } from 'lodash-unified'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isArray } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimeRangeProps } from '../props/panel-time-range'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimeRangeProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\nconst makeSelectRange = (start: number, end: number) => {\n  const result: number[] = []\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n  return result\n}\n\nconst { t, lang } = useLocale()\nconst nsTime = useNamespace('time')\nconst nsPicker = useNamespace('picker')\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\n\nconst startContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\nconst endContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\n\nconst startTime = computed(() => props.parsedValue![0])\nconst endTime = computed(() => props.parsedValue![1])\nconst oldValue = useOldValue(props)\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n\nconst handleConfirm = (visible = false) => {\n  emit('pick', [startTime.value, endTime.value], visible)\n}\n\nconst handleMinChange = (date: Dayjs) => {\n  handleChange(date.millisecond(0), endTime.value)\n}\nconst handleMaxChange = (date: Dayjs) => {\n  handleChange(startTime.value, date.millisecond(0))\n}\n\nconst isValidValue = (_date: Dayjs[]) => {\n  const parsedDate = _date.map((_) => dayjs(_).locale(lang.value))\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])\n}\n\nconst handleChange = (start: Dayjs, end: Dayjs) => {\n  if (!props.visible) {\n    return\n  }\n  // todo getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', [start, end], true)\n}\nconst btnConfirmDisabled = computed(() => {\n  return startTime.value > endTime.value\n})\n\nconst selectionRange = ref([0, 2])\nconst setMinSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'min')\n  selectionRange.value = [start, end]\n}\n\nconst offset = computed(() => (showSeconds.value ? 11 : 8))\nconst setMaxSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'max')\n  const _offset = unref(offset)\n  selectionRange.value = [start + _offset, end + _offset]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]\n  const mapping = ['hours', 'minutes'].concat(\n    showSeconds.value ? ['seconds'] : []\n  )\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  const half = list.length / 2\n  if (next < half) {\n    timePickerOptions['start_emitSelectRange'](mapping[next])\n  } else {\n    timePickerOptions['end_emitSelectRange'](mapping[next - half])\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    const role = selectionRange.value[0] < offset.value ? 'start' : 'end'\n    timePickerOptions[`${role}_scrollDown`](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst disabledHours_ = (role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledHours ? disabledHours(role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const nextDisable = isStart\n    ? makeSelectRange(compareHour + 1, 23)\n    : makeSelectRange(0, compareHour - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledMinutes_ = (hour: number, role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  if (hour !== compareHour) {\n    return defaultDisable\n  }\n  const compareMinute = compareDate.minute()\n  const nextDisable = isStart\n    ? makeSelectRange(compareMinute + 1, 59)\n    : makeSelectRange(0, compareMinute - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledSeconds_ = (\n  hour: number,\n  minute: number,\n  role: string,\n  compare?: Dayjs\n) => {\n  const defaultDisable = disabledSeconds\n    ? disabledSeconds(hour, minute, role)\n    : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const compareMinute = compareDate.minute()\n  if (hour !== compareHour || minute !== compareMinute) {\n    return defaultDisable\n  }\n  const compareSecond = compareDate.second()\n  const nextDisable = isStart\n    ? makeSelectRange(compareSecond + 1, 59)\n    : makeSelectRange(0, compareSecond - 1)\n  return union(defaultDisable, nextDisable)\n}\n\nconst getRangeAvailableTime = ([start, end]: Array<Dayjs>) => {\n  return [\n    getAvailableTime(start, 'start', true, end),\n    getAvailableTime(end, 'end', false, start),\n  ] as const\n}\n\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(\n    disabledHours_,\n    disabledMinutes_,\n    disabledSeconds_\n  )\n\nconst {\n  timePickerOptions,\n\n  getAvailableTime,\n  onSetOption,\n} = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst parseUserInput = (days: Dayjs[] | Dayjs) => {\n  if (!days) return null\n  if (isArray(days)) {\n    return days.map((d) => dayjs(d, props.format).locale(lang.value))\n  }\n  return dayjs(days, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  if (isArray(defaultValue)) {\n    return defaultValue.map((d: Date) => dayjs(d).locale(lang.value))\n  }\n  const defaultDay = dayjs(defaultValue).locale(lang.value)\n  return [defaultDay, defaultDay.add(60, 'm')]\n}\n\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"panel-time-range.vue_vue_type_script_setup_true_lang.js","names":["actualVisible"],"sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-range.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"actualVisible\"\n    :class=\"[nsTime.b('range-picker'), nsPicker.b('panel')]\"\n  >\n    <div :class=\"nsTime.be('range-picker', 'content')\">\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.startTime') }}\n        </div>\n        <div :class=\"startContainerKls\">\n          <time-spinner\n            ref=\"minSpinner\"\n            role=\"start\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"startTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMinChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMinSelectionRange\"\n          />\n        </div>\n      </div>\n      <div :class=\"nsTime.be('range-picker', 'cell')\">\n        <div :class=\"nsTime.be('range-picker', 'header')\">\n          {{ t('el.datepicker.endTime') }}\n        </div>\n        <div :class=\"endContainerKls\">\n          <time-spinner\n            ref=\"maxSpinner\"\n            role=\"end\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"endTime\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMaxChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMaxSelectionRange\"\n          />\n        </div>\n      </div>\n    </div>\n    <div :class=\"nsTime.be('panel', 'footer')\">\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'cancel']\"\n        @click=\"handleCancel()\"\n      >\n        {{ t('el.datepicker.cancel') }}\n      </button>\n      <button\n        type=\"button\"\n        :class=\"[nsTime.be('panel', 'btn'), 'confirm']\"\n        :disabled=\"btnConfirmDisabled\"\n        @click=\"handleConfirm()\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref, unref } from 'vue'\nimport dayjs from 'dayjs'\nimport { union } from 'lodash-unified'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getEventCode, isArray } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { PICKER_BASE_INJECTION_KEY } from '../constants'\nimport { panelTimeRangeProps } from '../props/panel-time-range'\nimport { useTimePanel } from '../composables/use-time-panel'\nimport {\n  buildAvailableTimeSlotGetter,\n  useOldValue,\n} from '../composables/use-time-picker'\nimport TimeSpinner from './basic-time-spinner.vue'\n\nimport type { Dayjs } from 'dayjs'\n\nconst props = defineProps(panelTimeRangeProps)\nconst emit = defineEmits(['pick', 'select-range', 'set-picker-option'])\n\nconst makeSelectRange = (start: number, end: number) => {\n  const result: number[] = []\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n  return result\n}\n\nconst { t, lang } = useLocale()\nconst nsTime = useNamespace('time')\nconst nsPicker = useNamespace('picker')\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst {\n  arrowControl,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  defaultValue,\n} = pickerBase.props\n\nconst startContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\nconst endContainerKls = computed(() => [\n  nsTime.be('range-picker', 'body'),\n  nsTime.be('panel', 'content'),\n  nsTime.is('arrow', arrowControl),\n  showSeconds.value ? 'has-seconds' : '',\n])\n\nconst startTime = computed(() => props.parsedValue![0])\nconst endTime = computed(() => props.parsedValue![1])\nconst oldValue = useOldValue(props, {\n  modelValue: computed(() => pickerBase.props.modelValue),\n  valueOnClear: computed(() =>\n    pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.value : null\n  ),\n})\nconst handleCancel = () => {\n  const old = oldValue.value\n  emit('pick', old, false)\n  nextTick(() => {\n    oldValue.value = old\n  })\n}\n\nconst showSeconds = computed(() => {\n  return props.format.includes('ss')\n})\nconst amPmMode = computed(() => {\n  if (props.format.includes('A')) return 'A'\n  if (props.format.includes('a')) return 'a'\n  return ''\n})\n\nconst handleConfirm = (visible = false) => {\n  emit('pick', [startTime.value, endTime.value], visible)\n}\n\nconst handleMinChange = (date: Dayjs) => {\n  handleChange(date.millisecond(0), endTime.value)\n}\nconst handleMaxChange = (date: Dayjs) => {\n  handleChange(startTime.value, date.millisecond(0))\n}\n\nconst isValidValue = (_date: Dayjs[]) => {\n  const parsedDate = _date.map((_) => dayjs(_).locale(lang.value))\n  const result = getRangeAvailableTime(parsedDate)\n  return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])\n}\n\nconst handleChange = (start: Dayjs, end: Dayjs) => {\n  if (!props.visible) {\n    return\n  }\n  // todo getRangeAvailableTime(_date).millisecond(0)\n  emit('pick', [start, end], true)\n}\nconst btnConfirmDisabled = computed(() => {\n  return startTime.value > endTime.value\n})\n\nconst selectionRange = ref([0, 2])\nconst setMinSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'min')\n  selectionRange.value = [start, end]\n}\n\nconst offset = computed(() => (showSeconds.value ? 11 : 8))\nconst setMaxSelectionRange = (start: number, end: number) => {\n  emit('select-range', start, end, 'max')\n  const _offset = unref(offset)\n  selectionRange.value = [start + _offset, end + _offset]\n}\n\nconst changeSelectionRange = (step: number) => {\n  const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]\n  const mapping = ['hours', 'minutes'].concat(\n    showSeconds.value ? ['seconds'] : []\n  )\n  const index = list.indexOf(selectionRange.value[0])\n  const next = (index + step + list.length) % list.length\n  const half = list.length / 2\n  if (next < half) {\n    timePickerOptions['start_emitSelectRange'](mapping[next])\n  } else {\n    timePickerOptions['end_emitSelectRange'](mapping[next - half])\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const { left, right, up, down } = EVENT_CODE\n\n  if ([left, right].includes(code)) {\n    const step = code === left ? -1 : 1\n    changeSelectionRange(step)\n    event.preventDefault()\n    return\n  }\n\n  if ([up, down].includes(code)) {\n    const step = code === up ? -1 : 1\n    const role = selectionRange.value[0] < offset.value ? 'start' : 'end'\n    timePickerOptions[`${role}_scrollDown`](step)\n    event.preventDefault()\n    return\n  }\n}\n\nconst disabledHours_ = (role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledHours ? disabledHours(role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const nextDisable = isStart\n    ? makeSelectRange(compareHour + 1, 23)\n    : makeSelectRange(0, compareHour - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledMinutes_ = (hour: number, role: string, compare?: Dayjs) => {\n  const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  if (hour !== compareHour) {\n    return defaultDisable\n  }\n  const compareMinute = compareDate.minute()\n  const nextDisable = isStart\n    ? makeSelectRange(compareMinute + 1, 59)\n    : makeSelectRange(0, compareMinute - 1)\n  return union(defaultDisable, nextDisable)\n}\nconst disabledSeconds_ = (\n  hour: number,\n  minute: number,\n  role: string,\n  compare?: Dayjs\n) => {\n  const defaultDisable = disabledSeconds\n    ? disabledSeconds(hour, minute, role)\n    : []\n  const isStart = role === 'start'\n  const compareDate = compare || (isStart ? endTime.value : startTime.value)\n  const compareHour = compareDate.hour()\n  const compareMinute = compareDate.minute()\n  if (hour !== compareHour || minute !== compareMinute) {\n    return defaultDisable\n  }\n  const compareSecond = compareDate.second()\n  const nextDisable = isStart\n    ? makeSelectRange(compareSecond + 1, 59)\n    : makeSelectRange(0, compareSecond - 1)\n  return union(defaultDisable, nextDisable)\n}\n\nconst getRangeAvailableTime = ([start, end]: Array<Dayjs>) => {\n  return [\n    getAvailableTime(start, 'start', true, end),\n    getAvailableTime(end, 'end', false, start),\n  ] as const\n}\n\nconst { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n  buildAvailableTimeSlotGetter(\n    disabledHours_,\n    disabledMinutes_,\n    disabledSeconds_\n  )\n\nconst {\n  timePickerOptions,\n\n  getAvailableTime,\n  onSetOption,\n} = useTimePanel({\n  getAvailableHours,\n  getAvailableMinutes,\n  getAvailableSeconds,\n})\n\nconst parseUserInput = (days: Dayjs[] | Dayjs) => {\n  if (!days) return null\n  if (isArray(days)) {\n    return days.map((d) => dayjs(d, props.format).locale(lang.value))\n  }\n  return dayjs(days, props.format).locale(lang.value)\n}\n\nconst getDefaultValue = () => {\n  if (isArray(defaultValue)) {\n    return defaultValue.map((d: Date) => dayjs(d).locale(lang.value))\n  }\n  const defaultDay = dayjs(defaultValue).locale(lang.value)\n  return [defaultDay, defaultDay.add(60, 'm')]\n}\n\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['handleKeydownInput', handleKeydown])\nemit('set-picker-option', ['getDefaultValue', getDefaultValue])\nemit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])\nemit('set-picker-option', ['handleCancel', handleCancel])\n</script>\n"],"mappings":"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"}

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

@@ -190,6 +190,7 @@ declare const _default: vue.DefineComponent<{
     __epPropKey: true;
   };
   editable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+  saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | ((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component))[], unknown, unknown, "", boolean>;
   size: {
     readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -400,6 +401,7 @@ declare const _default: vue.DefineComponent<{
     __epPropKey: true;
   };
   editable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+  saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | ((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component))[], unknown, unknown, "", boolean>;
   size: {
     readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -445,6 +447,7 @@ declare const _default: vue.DefineComponent<{
   valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown>;
   automaticDropdown: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   editable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  saveOnBlur: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   rangeSeparator: string;
   shortcuts: unknown[];
   showNow: EpPropMergeType<BooleanConstructor, unknown, unknown>;

package/lib/components/tooltip/src/tooltip.vue.d.ts

@@ -72,9 +72,9 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
    */
   hide: (event?: Event) => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  close: (...args: any[]) => void;
-  hide: (...args: any[]) => void;
   show: (...args: any[]) => void;
+  hide: (...args: any[]) => void;
+  close: (...args: any[]) => void;
   open: (...args: any[]) => void;
   "update:visible": (...args: any[]) => void;
   "before-show": (...args: any[]) => void;

package/lib/version.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#region ../../packages/element-plus/version.ts
-const version = "0.0.20260304";
+const version = "0.0.20260306";
 
 //#endregion
 exports.version = version;

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20260304'\n"],"mappings":";;;AAAA,MAAa,UAAU"}
+{"version":3,"file":"version.js","names":[],"sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20260306'\n"],"mappings":";;;AAAA,MAAa,UAAU"}