@element-plus/nightly 0.0.20211230

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

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

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

@@ -0,0 +1,93 @@
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createVNode, createElementVNode } from 'vue';
+
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onMouseenter"];
+const _hoisted_3 = { class: "el-time-spinner__list" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_scrollbar = resolveComponent("el-scrollbar");
+  const _component_arrow_up = resolveComponent("arrow-up");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_arrow_down = resolveComponent("arrow-down");
+  const _directive_repeat_click = resolveDirective("repeat-click");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-time-spinner", { "has-seconds": _ctx.showSeconds }])
+  }, [
+    !_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.spinnerItems, (item) => {
+      return openBlock(), createBlock(_component_el_scrollbar, {
+        key: item,
+        ref_for: true,
+        ref: _ctx.getRefId(item),
+        class: "el-time-spinner__wrapper",
+        "wrap-style": "max-height: inherit;",
+        "view-class": "el-time-spinner__list",
+        noresize: "",
+        tag: "ul",
+        onMouseenter: ($event) => _ctx.emitSelectRange(item),
+        onMousemove: ($event) => _ctx.adjustCurrentSpinner(item)
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listMap[item].value, (disabled, key) => {
+            return openBlock(), createElementBlock("li", {
+              key,
+              class: normalizeClass(["el-time-spinner__item", { active: key === _ctx.timePartsMap[item].value, disabled }]),
+              onClick: ($event) => _ctx.handleClick(item, { value: key, disabled })
+            }, [
+              item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + toDisplayString(_ctx.getAmPmFlag(key)), 1)
+              ], 2112)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(("0" + key).slice(-2)), 1)
+              ], 2112))
+            ], 10, _hoisted_1);
+          }), 128))
+        ]),
+        _: 2
+      }, 1032, ["onMouseenter", "onMousemove"]);
+    }), 128)) : createCommentVNode("v-if", true),
+    _ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.spinnerItems, (item) => {
+      return openBlock(), createElementBlock("div", {
+        key: item,
+        class: "el-time-spinner__wrapper is-arrow",
+        onMouseenter: ($event) => _ctx.emitSelectRange(item)
+      }, [
+        withDirectives((openBlock(), createBlock(_component_el_icon, { class: "el-time-spinner__arrow arrow-up" }, {
+          default: withCtx(() => [
+            createVNode(_component_arrow_up)
+          ]),
+          _: 1
+        })), [
+          [_directive_repeat_click, _ctx.onDecreaseClick]
+        ]),
+        withDirectives((openBlock(), createBlock(_component_el_icon, { class: "el-time-spinner__arrow arrow-down" }, {
+          default: withCtx(() => [
+            createVNode(_component_arrow_down)
+          ]),
+          _: 1
+        })), [
+          [_directive_repeat_click, _ctx.onIncreaseClick]
+        ]),
+        createElementVNode("ul", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.arrowListMap[item].value, (time, key) => {
+            return openBlock(), createElementBlock("li", {
+              key,
+              class: normalizeClass(["el-time-spinner__item", {
+                active: time === _ctx.timePartsMap[item].value,
+                disabled: _ctx.listMap[item].value[time]
+              }])
+            }, [
+              time ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + toDisplayString(_ctx.getAmPmFlag(time)), 1)
+                ], 2112)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(("0" + time).slice(-2)), 1)
+                ], 2112))
+              ], 2112)) : createCommentVNode("v-if", true)
+            ], 2);
+          }), 128))
+        ])
+      ], 40, _hoisted_2);
+    }), 128)) : createCommentVNode("v-if", true)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.mjs.map

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

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

package/es/components/time-picker/src/time-picker-com/panel-time-pick.mjs

@@ -0,0 +1,7 @@
+import script from './panel-time-pick.vue_vue_type_script_lang.mjs';
+export { default } from './panel-time-pick.vue_vue_type_script_lang.mjs';
+import { render } from './panel-time-pick.vue_vue_type_template_id_3b3cfa6a_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/time-picker/src/time-picker-com/panel-time-pick.vue";
+//# sourceMappingURL=panel-time-pick.mjs.map

package/es/components/time-picker/src/time-picker-com/panel-time-pick.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-time-pick.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,56 @@
+import dayjs from 'dayjs';
+import type { PropType } from 'vue';
+import type { Dayjs } from 'dayjs';
+declare const _default: import("vue").DefineComponent<{
+    visible: BooleanConstructor;
+    actualVisible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    datetimeRole: {
+        type: StringConstructor;
+    };
+    parsedValue: {
+        type: PropType<string | dayjs.Dayjs>;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    transitionName: import("vue").ComputedRef<"" | "el-zoom-in-top">;
+    arrowControl: any;
+    onSetOption: (e: any) => void;
+    t: import("element-plus/es/hooks").Translator;
+    handleConfirm: (visible?: boolean, first?: boolean) => void;
+    handleChange: (_date: Dayjs) => void;
+    setSelectionRange: (start: any, end: any) => void;
+    amPmMode: import("vue").ComputedRef<"" | "a" | "A">;
+    showSeconds: import("vue").ComputedRef<boolean>;
+    handleCancel: () => void;
+    disabledHours: any;
+    disabledMinutes: any;
+    disabledSeconds: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    visible?: unknown;
+    actualVisible?: unknown;
+    datetimeRole?: unknown;
+    parsedValue?: unknown;
+    format?: unknown;
+} & {
+    visible: boolean;
+    format: string;
+} & {
+    parsedValue?: string | dayjs.Dayjs | undefined;
+    actualVisible?: boolean | undefined;
+    datetimeRole?: string | undefined;
+}> & {
+    onPick?: ((...args: any[]) => any) | undefined;
+    "onSelect-range"?: ((...args: any[]) => any) | undefined;
+    "onSet-picker-option"?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    format: string;
+    actualVisible: boolean;
+}>;
+export default _default;

package/es/components/time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_lang.mjs

@@ -0,0 +1,174 @@
+import { defineComponent, ref, computed, inject } from 'vue';
+import dayjs from 'dayjs';
+import { EVENT_CODE } from '../../../../utils/aria.mjs';
+import '../../../../hooks/index.mjs';
+import './basic-time-spinner.mjs';
+import { useOldValue, getAvailableArrs } from './useTimePicker.mjs';
+import script$1 from './basic-time-spinner.vue_vue_type_script_lang.mjs';
+import { useLocale } from '../../../../hooks/use-locale/index.mjs';
+
+var script = defineComponent({
+  components: {
+    TimeSpinner: script$1
+  },
+  props: {
+    visible: Boolean,
+    actualVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    datetimeRole: {
+      type: String
+    },
+    parsedValue: {
+      type: [Object, String]
+    },
+    format: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["pick", "select-range", "set-picker-option"],
+  setup(props, ctx) {
+    const { t, lang } = useLocale();
+    const selectionRange = ref([0, 2]);
+    const oldValue = useOldValue(props);
+    const transitionName = computed(() => {
+      return props.actualVisible === void 0 ? "el-zoom-in-top" : "";
+    });
+    const showSeconds = computed(() => {
+      return props.format.includes("ss");
+    });
+    const amPmMode = computed(() => {
+      if (props.format.includes("A"))
+        return "A";
+      if (props.format.includes("a"))
+        return "a";
+      return "";
+    });
+    const isValidValue = (_date) => {
+      const parsedDate = dayjs(_date).locale(lang.value);
+      const result = getRangeAvailableTime(parsedDate);
+      return parsedDate.isSame(result);
+    };
+    const handleCancel = () => {
+      ctx.emit("pick", oldValue.value, false);
+    };
+    const handleConfirm = (visible = false, first = false) => {
+      if (first)
+        return;
+      ctx.emit("pick", props.parsedValue, visible);
+    };
+    const handleChange = (_date) => {
+      if (!props.visible) {
+        return;
+      }
+      const result = getRangeAvailableTime(_date).millisecond(0);
+      ctx.emit("pick", result, true);
+    };
+    const setSelectionRange = (start, end) => {
+      ctx.emit("select-range", start, end);
+      selectionRange.value = [start, end];
+    };
+    const changeSelectionRange = (step) => {
+      const list = [0, 3].concat(showSeconds.value ? [6] : []);
+      const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
+      const index = list.indexOf(selectionRange.value[0]);
+      const next = (index + step + list.length) % list.length;
+      timePickerOptions["start_emitSelectRange"](mapping[next]);
+    };
+    const handleKeydown = (event) => {
+      const code = event.code;
+      if (code === EVENT_CODE.left || code === EVENT_CODE.right) {
+        const step = code === EVENT_CODE.left ? -1 : 1;
+        changeSelectionRange(step);
+        event.preventDefault();
+        return;
+      }
+      if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
+        const step = code === EVENT_CODE.up ? -1 : 1;
+        timePickerOptions["start_scrollDown"](step);
+        event.preventDefault();
+        return;
+      }
+    };
+    const getRangeAvailableTime = (date) => {
+      const availableMap = {
+        hour: getAvailableHours,
+        minute: getAvailableMinutes,
+        second: getAvailableSeconds
+      };
+      let result = date;
+      ["hour", "minute", "second"].forEach((_) => {
+        if (availableMap[_]) {
+          let availableArr;
+          const method = availableMap[_];
+          if (_ === "minute") {
+            availableArr = method(result.hour(), props.datetimeRole);
+          } else if (_ === "second") {
+            availableArr = method(result.hour(), result.minute(), props.datetimeRole);
+          } else {
+            availableArr = method(props.datetimeRole);
+          }
+          if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {
+            result = result[_](availableArr[0]);
+          }
+        }
+      });
+      return result;
+    };
+    const parseUserInput = (value) => {
+      if (!value)
+        return null;
+      return dayjs(value, props.format).locale(lang.value);
+    };
+    const formatToString = (value) => {
+      if (!value)
+        return null;
+      return value.format(props.format);
+    };
+    const getDefaultValue = () => {
+      return dayjs(defaultValue).locale(lang.value);
+    };
+    ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
+    ctx.emit("set-picker-option", ["formatToString", formatToString]);
+    ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
+    ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
+    ctx.emit("set-picker-option", [
+      "getRangeAvailableTime",
+      getRangeAvailableTime
+    ]);
+    ctx.emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
+    const timePickerOptions = {};
+    const onSetOption = (e) => {
+      timePickerOptions[e[0]] = e[1];
+    };
+    const pickerBase = inject("EP_PICKER_BASE");
+    const {
+      arrowControl,
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds,
+      defaultValue
+    } = pickerBase.props;
+    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds);
+    return {
+      transitionName,
+      arrowControl,
+      onSetOption,
+      t,
+      handleConfirm,
+      handleChange,
+      setSelectionRange,
+      amPmMode,
+      showSeconds,
+      handleCancel,
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=panel-time-pick.vue_vue_type_script_lang.mjs.map

package/es/components/time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-time-pick.vue_vue_type_script_lang.mjs","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=\"el-time-panel\">\n      <div\n        class=\"el-time-panel__content\"\n        :class=\"{ 'has-seconds': showSeconds }\"\n      >\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=\"parsedValue\"\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=\"el-time-panel__footer\">\n        <button\n          type=\"button\"\n          class=\"el-time-panel__btn cancel\"\n          @click=\"handleCancel\"\n        >\n          {{ t('el.datepicker.cancel') }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"el-time-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\">\nimport { defineComponent, ref, computed, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { useLocale } from '@element-plus/hooks'\nimport TimeSpinner from './basic-time-spinner.vue'\nimport { getAvailableArrs, useOldValue } from './useTimePicker'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: {\n    TimeSpinner,\n  },\n\n  props: {\n    visible: Boolean,\n    actualVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    datetimeRole: {\n      type: String,\n    },\n    parsedValue: {\n      type: [Object, String] as PropType<string | Dayjs>,\n    },\n    format: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: ['pick', 'select-range', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    // data\n    const selectionRange = ref([0, 2])\n    const oldValue = useOldValue(props)\n    // computed\n    const transitionName = computed(() => {\n      return props.actualVisible === undefined ? 'el-zoom-in-top' : ''\n    })\n    const showSeconds = computed(() => {\n      return props.format.includes('ss')\n    })\n    const amPmMode = computed(() => {\n      if (props.format.includes('A')) return 'A'\n      if (props.format.includes('a')) return 'a'\n      return ''\n    })\n    // method\n    const isValidValue = (_date: Dayjs) => {\n      const parsedDate = dayjs(_date).locale(lang.value)\n      const result = getRangeAvailableTime(parsedDate)\n      return parsedDate.isSame(result)\n    }\n    const handleCancel = () => {\n      ctx.emit('pick', oldValue.value, false)\n    }\n    const handleConfirm = (visible = false, first = false) => {\n      if (first) return\n      ctx.emit('pick', props.parsedValue, visible)\n    }\n    const 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      ctx.emit('pick', result, true)\n    }\n\n    const setSelectionRange = (start, end) => {\n      ctx.emit('select-range', start, end)\n      selectionRange.value = [start, end]\n    }\n\n    const changeSelectionRange = (step: number) => {\n      const list = [0, 3].concat(showSeconds.value ? [6] : [])\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      timePickerOptions['start_emitSelectRange'](mapping[next])\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.left || code === EVENT_CODE.right) {\n        const step = code === EVENT_CODE.left ? -1 : 1\n        changeSelectionRange(step)\n        event.preventDefault()\n        return\n      }\n\n      if (code === EVENT_CODE.up || code === EVENT_CODE.down) {\n        const step = code === EVENT_CODE.up ? -1 : 1\n        timePickerOptions['start_scrollDown'](step)\n        event.preventDefault()\n        return\n      }\n    }\n\n    const getRangeAvailableTime = (date: Dayjs) => {\n      const availableMap = {\n        hour: getAvailableHours,\n        minute: getAvailableMinutes,\n        second: getAvailableSeconds,\n      }\n      let result = date\n      ;['hour', 'minute', 'second'].forEach((_) => {\n        if (availableMap[_]) {\n          let availableArr\n          const method = availableMap[_]\n          if (_ === 'minute') {\n            availableArr = method(result.hour(), props.datetimeRole)\n          } else if (_ === 'second') {\n            availableArr = method(\n              result.hour(),\n              result.minute(),\n              props.datetimeRole\n            )\n          } else {\n            availableArr = method(props.datetimeRole)\n          }\n          if (\n            availableArr &&\n            availableArr.length &&\n            !availableArr.includes(result[_]())\n          ) {\n            result = result[_](availableArr[0])\n          }\n        }\n      })\n      return result\n    }\n\n    const parseUserInput = (value: Dayjs) => {\n      if (!value) return null\n      return dayjs(value, props.format).locale(lang.value)\n    }\n\n    const formatToString = (value: Dayjs) => {\n      if (!value) return null\n      return value.format(props.format)\n    }\n\n    const getDefaultValue = () => {\n      return dayjs(defaultValue).locale(lang.value)\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n    ctx.emit('set-picker-option', [\n      'getRangeAvailableTime',\n      getRangeAvailableTime,\n    ])\n    ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])\n    const timePickerOptions = {} as any\n    const onSetOption = (e) => {\n      timePickerOptions[e[0]] = e[1]\n    }\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const {\n      arrowControl,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n      defaultValue,\n    } = pickerBase.props\n    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n      getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds)\n\n    return {\n      transitionName,\n      arrowControl,\n      onSetOption,\n      t,\n      handleConfirm,\n      handleChange,\n      setSelectionRange,\n      amPmMode,\n      showSeconds,\n      handleCancel,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n    }\n  },\n})\n</script>\n"],"names":["TimeSpinner"],"mappings":"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"}

package/es/components/time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_template_id_3b3cfa6a_lang.mjs

@@ -0,0 +1,50 @@
+import { resolveComponent, openBlock, createBlock, Transition, withCtx, createElementBlock, createElementVNode, normalizeClass, createVNode, toDisplayString, createCommentVNode } from 'vue';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "el-time-panel"
+};
+const _hoisted_2 = { class: "el-time-panel__footer" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_time_spinner = resolveComponent("time-spinner");
+  return openBlock(), createBlock(Transition, { name: _ctx.transitionName }, {
+    default: withCtx(() => [
+      _ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["el-time-panel__content", { "has-seconds": _ctx.showSeconds }])
+        }, [
+          createVNode(_component_time_spinner, {
+            ref: "spinner",
+            role: _ctx.datetimeRole || "start",
+            "arrow-control": _ctx.arrowControl,
+            "show-seconds": _ctx.showSeconds,
+            "am-pm-mode": _ctx.amPmMode,
+            "spinner-date": _ctx.parsedValue,
+            "disabled-hours": _ctx.disabledHours,
+            "disabled-minutes": _ctx.disabledMinutes,
+            "disabled-seconds": _ctx.disabledSeconds,
+            onChange: _ctx.handleChange,
+            onSetOption: _ctx.onSetOption,
+            onSelectRange: _ctx.setSelectionRange
+          }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
+        ], 2),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("button", {
+            type: "button",
+            class: "el-time-panel__btn cancel",
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
+          }, toDisplayString(_ctx.t("el.datepicker.cancel")), 1),
+          createElementVNode("button", {
+            type: "button",
+            class: "el-time-panel__btn confirm",
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleConfirm())
+          }, toDisplayString(_ctx.t("el.datepicker.confirm")), 1)
+        ])
+      ])) : createCommentVNode("v-if", true)
+    ]),
+    _: 1
+  }, 8, ["name"]);
+}
+
+export { render };
+//# sourceMappingURL=panel-time-pick.vue_vue_type_template_id_3b3cfa6a_lang.mjs.map

package/es/components/time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_template_id_3b3cfa6a_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-time-pick.vue_vue_type_template_id_3b3cfa6a_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-pick.vue?vue&type=template&id=3b3cfa6a&lang.js"],"sourcesContent":["<template>\n  <transition :name=\"transitionName\">\n    <div v-if=\"actualVisible || visible\" class=\"el-time-panel\">\n      <div\n        class=\"el-time-panel__content\"\n        :class=\"{ 'has-seconds': showSeconds }\"\n      >\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=\"parsedValue\"\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=\"el-time-panel__footer\">\n        <button\n          type=\"button\"\n          class=\"el-time-panel__btn cancel\"\n          @click=\"handleCancel\"\n        >\n          {{ t('el.datepicker.cancel') }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"el-time-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\">\nimport { defineComponent, ref, computed, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { useLocale } from '@element-plus/hooks'\nimport TimeSpinner from './basic-time-spinner.vue'\nimport { getAvailableArrs, useOldValue } from './useTimePicker'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: {\n    TimeSpinner,\n  },\n\n  props: {\n    visible: Boolean,\n    actualVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    datetimeRole: {\n      type: String,\n    },\n    parsedValue: {\n      type: [Object, String] as PropType<string | Dayjs>,\n    },\n    format: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: ['pick', 'select-range', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    // data\n    const selectionRange = ref([0, 2])\n    const oldValue = useOldValue(props)\n    // computed\n    const transitionName = computed(() => {\n      return props.actualVisible === undefined ? 'el-zoom-in-top' : ''\n    })\n    const showSeconds = computed(() => {\n      return props.format.includes('ss')\n    })\n    const amPmMode = computed(() => {\n      if (props.format.includes('A')) return 'A'\n      if (props.format.includes('a')) return 'a'\n      return ''\n    })\n    // method\n    const isValidValue = (_date: Dayjs) => {\n      const parsedDate = dayjs(_date).locale(lang.value)\n      const result = getRangeAvailableTime(parsedDate)\n      return parsedDate.isSame(result)\n    }\n    const handleCancel = () => {\n      ctx.emit('pick', oldValue.value, false)\n    }\n    const handleConfirm = (visible = false, first = false) => {\n      if (first) return\n      ctx.emit('pick', props.parsedValue, visible)\n    }\n    const 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      ctx.emit('pick', result, true)\n    }\n\n    const setSelectionRange = (start, end) => {\n      ctx.emit('select-range', start, end)\n      selectionRange.value = [start, end]\n    }\n\n    const changeSelectionRange = (step: number) => {\n      const list = [0, 3].concat(showSeconds.value ? [6] : [])\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      timePickerOptions['start_emitSelectRange'](mapping[next])\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.left || code === EVENT_CODE.right) {\n        const step = code === EVENT_CODE.left ? -1 : 1\n        changeSelectionRange(step)\n        event.preventDefault()\n        return\n      }\n\n      if (code === EVENT_CODE.up || code === EVENT_CODE.down) {\n        const step = code === EVENT_CODE.up ? -1 : 1\n        timePickerOptions['start_scrollDown'](step)\n        event.preventDefault()\n        return\n      }\n    }\n\n    const getRangeAvailableTime = (date: Dayjs) => {\n      const availableMap = {\n        hour: getAvailableHours,\n        minute: getAvailableMinutes,\n        second: getAvailableSeconds,\n      }\n      let result = date\n      ;['hour', 'minute', 'second'].forEach((_) => {\n        if (availableMap[_]) {\n          let availableArr\n          const method = availableMap[_]\n          if (_ === 'minute') {\n            availableArr = method(result.hour(), props.datetimeRole)\n          } else if (_ === 'second') {\n            availableArr = method(\n              result.hour(),\n              result.minute(),\n              props.datetimeRole\n            )\n          } else {\n            availableArr = method(props.datetimeRole)\n          }\n          if (\n            availableArr &&\n            availableArr.length &&\n            !availableArr.includes(result[_]())\n          ) {\n            result = result[_](availableArr[0])\n          }\n        }\n      })\n      return result\n    }\n\n    const parseUserInput = (value: Dayjs) => {\n      if (!value) return null\n      return dayjs(value, props.format).locale(lang.value)\n    }\n\n    const formatToString = (value: Dayjs) => {\n      if (!value) return null\n      return value.format(props.format)\n    }\n\n    const getDefaultValue = () => {\n      return dayjs(defaultValue).locale(lang.value)\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n    ctx.emit('set-picker-option', [\n      'getRangeAvailableTime',\n      getRangeAvailableTime,\n    ])\n    ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])\n    const timePickerOptions = {} as any\n    const onSetOption = (e) => {\n      timePickerOptions[e[0]] = e[1]\n    }\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const {\n      arrowControl,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n      defaultValue,\n    } = pickerBase.props\n    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n      getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds)\n\n    return {\n      transitionName,\n      arrowControl,\n      onSetOption,\n      t,\n      handleConfirm,\n      handleChange,\n      setSelectionRange,\n      amPmMode,\n      showSeconds,\n      handleCancel,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;EAEyC;;4CAoBD;;;;;;;;;YAnBlC;;;;;;;8BAQiB,EAAE;8BACF;;;;;;0BAMF,kBAAa;4BACX;;;YAGjB;;;gBAGI;;;;;;;;;;;;;"}

package/es/components/time-picker/src/time-picker-com/panel-time-range.mjs

@@ -0,0 +1,7 @@
+import script from './panel-time-range.vue_vue_type_script_lang.mjs';
+export { default } from './panel-time-range.vue_vue_type_script_lang.mjs';
+import { render } from './panel-time-range.vue_vue_type_template_id_57d94b44_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/time-picker/src/time-picker-com/panel-time-range.vue";
+//# sourceMappingURL=panel-time-range.mjs.map

package/es/components/time-picker/src/time-picker-com/panel-time-range.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-time-range.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,53 @@
+import dayjs from 'dayjs';
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    visible: BooleanConstructor;
+    actualVisible: BooleanConstructor;
+    parsedValue: {
+        type: PropType<dayjs.Dayjs[]>;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    arrowControl: any;
+    onSetOption: (e: any) => void;
+    setMaxSelectionRange: (start: any, end: any) => void;
+    setMinSelectionRange: (start: any, end: any) => void;
+    btnConfirmDisabled: import("vue").ComputedRef<boolean>;
+    handleCancel: () => void;
+    handleConfirm: (visible?: boolean) => void;
+    t: import("element-plus/es/hooks").Translator;
+    showSeconds: import("vue").ComputedRef<boolean>;
+    minDate: import("vue").ComputedRef<dayjs.Dayjs>;
+    maxDate: import("vue").ComputedRef<dayjs.Dayjs>;
+    amPmMode: import("vue").ComputedRef<"" | "a" | "A">;
+    handleMinChange: (date: any) => void;
+    handleMaxChange: (date: any) => void;
+    minSelectableRange: import("vue").Ref<never[]>;
+    maxSelectableRange: import("vue").Ref<never[]>;
+    disabledHours_: (role: any, compare: any) => never[];
+    disabledMinutes_: (hour: any, role: any, compare: any) => any;
+    disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    visible?: unknown;
+    actualVisible?: unknown;
+    parsedValue?: unknown;
+    format?: unknown;
+} & {
+    visible: boolean;
+    format: string;
+    actualVisible: boolean;
+} & {
+    parsedValue?: dayjs.Dayjs[] | undefined;
+}> & {
+    onPick?: ((...args: any[]) => any) | undefined;
+    "onSelect-range"?: ((...args: any[]) => any) | undefined;
+    "onSet-picker-option"?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    format: string;
+    actualVisible: boolean;
+}>;
+export default _default;