element-pe 1.0.8 → 1.0.9-alpha.12

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

@@ -57,7 +57,7 @@ export declare const timePickerDefaultProps: {
         default: () => {};
     };
     modelValue: {
-        type: PropType<string | Date | Date[]>;
+        type: PropType<string | Date | (number | Date)[]>;
         default: string;
     };
     rangeSeparator: {

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

@@ -1,5 +1,5 @@
 import { isValidComponentSize } from '../../../../utils/validators.mjs';
-import { CircleClose } from '@element-plus/icons';
+import { CircleClose } from '@element-plus/icons-vue';
 
 const timePickerDefaultProps = {
   name: {

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

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/props.ts"],"sourcesContent":["import { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { Options } from '@popperjs/core'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport const timePickerDefaultProps = {\n  name: {\n    type: [Array, String],\n    default: '',\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  format: {\n    type: String,\n  },\n  valueFormat: {\n    type: String as PropType<string>,\n  },\n  type: {\n    type: String,\n    default: '',\n  },\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  clearIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: CircleClose,\n  },\n  editable: {\n    type: Boolean,\n    default: true,\n  },\n  prefixIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: '',\n  },\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n  },\n  popperOptions: {\n    type: Object as PropType<Partial<Options>>,\n    default: () => ({}),\n  },\n  modelValue: {\n    type: [Date, Array, String] as PropType<string | Date | Date[]>,\n    default: '',\n  },\n  rangeSeparator: {\n    type: String,\n    default: '-',\n  },\n  startPlaceholder: String,\n  endPlaceholder: String,\n  defaultValue: {\n    type: [Date, Array] as PropType<Date | Date[]>,\n  },\n  defaultTime: {\n    type: [Date, Array] as PropType<Date | Date[]>,\n  },\n  isRange: {\n    type: Boolean,\n    default: false,\n  },\n  disabledHours: {\n    type: Function,\n  },\n  disabledMinutes: {\n    type: Function,\n  },\n  disabledSeconds: {\n    type: Function,\n  },\n  disabledDate: {\n    type: Function,\n  },\n  cellClassName: {\n    type: Function,\n  },\n  shortcuts: {\n    type: Array,\n    default: () => [],\n  },\n  arrowControl: {\n    type: Boolean,\n    default: false,\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  unlinkPanels: Boolean,\n}\n"],"names":[],"mappings":";;;MAOa,yBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,MAAM,CAAC,OAAO;AAAA,IACd,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA;AAAA,EAER,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,EAEb,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAO;AAAA,EAElB,YAAY;AAAA,IACV,MAAM,CAAC,MAAM,OAAO;AAAA,IACpB,SAAS;AAAA;AAAA,EAEX,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACZ,MAAM,CAAC,MAAM;AAAA;AAAA,EAEf,aAAa;AAAA,IACX,MAAM,CAAC,MAAM;AAAA;AAAA,EAEf,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA;AAAA,EAER,iBAAiB;AAAA,IACf,MAAM;AAAA;AAAA,EAER,iBAAiB;AAAA,IACf,MAAM;AAAA;AAAA,EAER,cAAc;AAAA,IACZ,MAAM;AAAA;AAAA,EAER,eAAe;AAAA,IACb,MAAM;AAAA;AAAA,EAER,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS,MAAM;AAAA;AAAA,EAEjB,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA;;;;"}
+{"version":3,"file":"props.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/props.ts"],"sourcesContent":["import { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { Options } from '@popperjs/core'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport const timePickerDefaultProps = {\n  name: {\n    type: [Array, String],\n    default: '',\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  format: {\n    type: String,\n  },\n  valueFormat: {\n    type: String as PropType<string>,\n  },\n  type: {\n    type: String,\n    default: '',\n  },\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  clearIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: CircleClose,\n  },\n  editable: {\n    type: Boolean,\n    default: true,\n  },\n  prefixIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: '',\n  },\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n  },\n  popperOptions: {\n    type: Object as PropType<Partial<Options>>,\n    default: () => ({}),\n  },\n  modelValue: {\n    type: [Date, Array, String] as PropType<string | Date | (number | Date)[]>,\n    default: '',\n  },\n  rangeSeparator: {\n    type: String,\n    default: '-',\n  },\n  startPlaceholder: String,\n  endPlaceholder: String,\n  defaultValue: {\n    type: [Date, Array] as PropType<Date | Date[]>,\n  },\n  defaultTime: {\n    type: [Date, Array] as PropType<Date | Date[]>,\n  },\n  isRange: {\n    type: Boolean,\n    default: false,\n  },\n  disabledHours: {\n    type: Function,\n  },\n  disabledMinutes: {\n    type: Function,\n  },\n  disabledSeconds: {\n    type: Function,\n  },\n  disabledDate: {\n    type: Function,\n  },\n  cellClassName: {\n    type: Function,\n  },\n  shortcuts: {\n    type: Array,\n    default: () => [],\n  },\n  arrowControl: {\n    type: Boolean,\n    default: false,\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  unlinkPanels: Boolean,\n}\n"],"names":[],"mappings":";;;MAOa,yBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,MAAM,CAAC,OAAO;AAAA,IACd,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA;AAAA,EAER,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,EAEb,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAO;AAAA,EAElB,YAAY;AAAA,IACV,MAAM,CAAC,MAAM,OAAO;AAAA,IACpB,SAAS;AAAA;AAAA,EAEX,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACZ,MAAM,CAAC,MAAM;AAAA;AAAA,EAEf,aAAa;AAAA,IACX,MAAM,CAAC,MAAM;AAAA;AAAA,EAEf,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA;AAAA,EAER,iBAAiB;AAAA,IACf,MAAM;AAAA;AAAA,EAER,iBAAiB;AAAA,IACf,MAAM;AAAA;AAAA,EAER,cAAc;AAAA,IACZ,MAAM;AAAA;AAAA,EAER,eAAe;AAAA,IACb,MAAM;AAAA;AAAA,EAER,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS,MAAM;AAAA;AAAA,EAEjB,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA;;;;"}

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

@@ -1,6 +1,6 @@
-import script from './basic-time-spinner.vue_vue&type=script&lang.mjs';
-export { default } from './basic-time-spinner.vue_vue&type=script&lang.mjs';
-import { render } from './basic-time-spinner.vue_vue&type=template&id=4fb3c576&lang.mjs';
+import script from './basic-time-spinner.vue_vue_type_script_lang.mjs';
+export { default } from './basic-time-spinner.vue_vue_type_script_lang.mjs';
+import { render } from './basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue";

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

@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     disabledMinutes?: unknown;
     disabledSeconds?: unknown;
 } & {
-    arrowControl: boolean;
     role: string;
+    arrowControl: boolean;
     spinnerDate: Dayjs;
     showSeconds: boolean;
     amPmMode: string;

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

@@ -0,0 +1,278 @@
+import { defineComponent, ref, computed, nextTick, onMounted, watch } from 'vue';
+import debounce from 'lodash/debounce';
+import '../../../../directives/index.mjs';
+import { ElScrollbar } from '../../../scrollbar/index.mjs';
+import { ElIcon } from '../../../icon/index.mjs';
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
+import { getTimeLists } from './useTimePicker.mjs';
+import RepeatClick from '../../../../directives/repeat-click/index.mjs';
+
+var script = defineComponent({
+  directives: {
+    repeatClick: RepeatClick
+  },
+  components: {
+    ElScrollbar,
+    ElIcon,
+    ArrowUp,
+    ArrowDown
+  },
+  props: {
+    role: {
+      type: String,
+      required: true
+    },
+    spinnerDate: {
+      type: Object,
+      required: true
+    },
+    showSeconds: {
+      type: Boolean,
+      default: true
+    },
+    arrowControl: Boolean,
+    amPmMode: {
+      type: String,
+      default: ""
+    },
+    disabledHours: {
+      type: Function
+    },
+    disabledMinutes: {
+      type: Function
+    },
+    disabledSeconds: {
+      type: Function
+    }
+  },
+  emits: ["change", "select-range", "set-option"],
+  setup(props, ctx) {
+    let isScrolling = false;
+    const debouncedResetScroll = debounce((type) => {
+      isScrolling = false;
+      adjustCurrentSpinner(type);
+    }, 200);
+    const currentScrollbar = ref(null);
+    const listHoursRef = ref(null);
+    const listMinutesRef = ref(null);
+    const listSecondsRef = ref(null);
+    const listRefsMap = {
+      hours: listHoursRef,
+      minutes: listMinutesRef,
+      seconds: listSecondsRef
+    };
+    const spinnerItems = computed(() => {
+      const arr = ["hours", "minutes", "seconds"];
+      return props.showSeconds ? arr : arr.slice(0, 2);
+    });
+    const hours = computed(() => {
+      return props.spinnerDate.hour();
+    });
+    const minutes = computed(() => {
+      return props.spinnerDate.minute();
+    });
+    const seconds = computed(() => {
+      return props.spinnerDate.second();
+    });
+    const timePartsMap = computed(() => ({
+      hours,
+      minutes,
+      seconds
+    }));
+    const hoursList = computed(() => {
+      return getHoursList(props.role);
+    });
+    const minutesList = computed(() => {
+      return getMinutesList(hours.value, props.role);
+    });
+    const secondsList = computed(() => {
+      return getSecondsList(hours.value, minutes.value, props.role);
+    });
+    const listMap = computed(() => ({
+      hours: hoursList,
+      minutes: minutesList,
+      seconds: secondsList
+    }));
+    const arrowHourList = computed(() => {
+      const hour = hours.value;
+      return [
+        hour > 0 ? hour - 1 : void 0,
+        hour,
+        hour < 23 ? hour + 1 : void 0
+      ];
+    });
+    const arrowMinuteList = computed(() => {
+      const minute = minutes.value;
+      return [
+        minute > 0 ? minute - 1 : void 0,
+        minute,
+        minute < 59 ? minute + 1 : void 0
+      ];
+    });
+    const arrowSecondList = computed(() => {
+      const second = seconds.value;
+      return [
+        second > 0 ? second - 1 : void 0,
+        second,
+        second < 59 ? second + 1 : void 0
+      ];
+    });
+    const arrowListMap = computed(() => ({
+      hours: arrowHourList,
+      minutes: arrowMinuteList,
+      seconds: arrowSecondList
+    }));
+    const getAmPmFlag = (hour) => {
+      const shouldShowAmPm = !!props.amPmMode;
+      if (!shouldShowAmPm)
+        return "";
+      const isCapital = props.amPmMode === "A";
+      let content = hour < 12 ? " am" : " pm";
+      if (isCapital)
+        content = content.toUpperCase();
+      return content;
+    };
+    const emitSelectRange = (type) => {
+      if (type === "hours") {
+        ctx.emit("select-range", 0, 2);
+      } else if (type === "minutes") {
+        ctx.emit("select-range", 3, 5);
+      } else if (type === "seconds") {
+        ctx.emit("select-range", 6, 8);
+      }
+      currentScrollbar.value = type;
+    };
+    const adjustCurrentSpinner = (type) => {
+      adjustSpinner(type, timePartsMap.value[type].value);
+    };
+    const adjustSpinners = () => {
+      adjustCurrentSpinner("hours");
+      adjustCurrentSpinner("minutes");
+      adjustCurrentSpinner("seconds");
+    };
+    const adjustSpinner = (type, value) => {
+      if (props.arrowControl)
+        return;
+      const el = listRefsMap[type];
+      if (el.value) {
+        el.value.$el.querySelector(".el-scrollbar__wrap").scrollTop = Math.max(0, value * typeItemHeight(type));
+      }
+    };
+    const typeItemHeight = (type) => {
+      const el = listRefsMap[type];
+      return el.value.$el.querySelector("li").offsetHeight;
+    };
+    const onIncreaseClick = () => {
+      scrollDown(1);
+    };
+    const onDecreaseClick = () => {
+      scrollDown(-1);
+    };
+    const scrollDown = (step) => {
+      if (!currentScrollbar.value) {
+        emitSelectRange("hours");
+      }
+      const label = currentScrollbar.value;
+      let now = timePartsMap.value[label].value;
+      const total = currentScrollbar.value === "hours" ? 24 : 60;
+      now = (now + step + total) % total;
+      modifyDateField(label, now);
+      adjustSpinner(label, now);
+      nextTick(() => emitSelectRange(currentScrollbar.value));
+    };
+    const modifyDateField = (type, value) => {
+      const list = listMap.value[type].value;
+      const isDisabled = list[value];
+      if (isDisabled)
+        return;
+      switch (type) {
+        case "hours":
+          ctx.emit("change", props.spinnerDate.hour(value).minute(minutes.value).second(seconds.value));
+          break;
+        case "minutes":
+          ctx.emit("change", props.spinnerDate.hour(hours.value).minute(value).second(seconds.value));
+          break;
+        case "seconds":
+          ctx.emit("change", props.spinnerDate.hour(hours.value).minute(minutes.value).second(value));
+          break;
+      }
+    };
+    const handleClick = (type, { value, disabled }) => {
+      if (!disabled) {
+        modifyDateField(type, value);
+        emitSelectRange(type);
+        adjustSpinner(type, value);
+      }
+    };
+    const handleScroll = (type) => {
+      isScrolling = true;
+      debouncedResetScroll(type);
+      const value = Math.min(Math.round((listRefsMap[type].value.$el.querySelector(".el-scrollbar__wrap").scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59);
+      modifyDateField(type, value);
+    };
+    const scrollBarHeight = (type) => {
+      return listRefsMap[type].value.$el.offsetHeight;
+    };
+    const bindScrollEvent = () => {
+      const bindFuntion = (type) => {
+        if (listRefsMap[type].value) {
+          listRefsMap[type].value.$el.querySelector(".el-scrollbar__wrap").onscroll = () => {
+            handleScroll(type);
+          };
+        }
+      };
+      bindFuntion("hours");
+      bindFuntion("minutes");
+      bindFuntion("seconds");
+    };
+    onMounted(() => {
+      nextTick(() => {
+        !props.arrowControl && bindScrollEvent();
+        adjustSpinners();
+        if (props.role === "start")
+          emitSelectRange("hours");
+      });
+    });
+    const getRefId = (item) => {
+      return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`;
+    };
+    ctx.emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
+    ctx.emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
+    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
+    watch(() => props.spinnerDate, () => {
+      if (isScrolling)
+        return;
+      adjustSpinners();
+    });
+    return {
+      getRefId,
+      spinnerItems,
+      currentScrollbar,
+      hours,
+      minutes,
+      seconds,
+      hoursList,
+      minutesList,
+      arrowHourList,
+      arrowMinuteList,
+      arrowSecondList,
+      getAmPmFlag,
+      emitSelectRange,
+      adjustCurrentSpinner,
+      typeItemHeight,
+      listHoursRef,
+      listMinutesRef,
+      listSecondsRef,
+      onIncreaseClick,
+      onDecreaseClick,
+      handleClick,
+      secondsList,
+      timePartsMap,
+      arrowListMap,
+      listMap
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=basic-time-spinner.vue_vue_type_script_lang.mjs.map

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,92 @@
+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: _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(createVNode(_component_el_icon, { class: "el-time-spinner__arrow arrow-up" }, {
+          default: withCtx(() => [
+            createVNode(_component_arrow_up)
+          ]),
+          _: 1
+        }, 512), [
+          [_directive_repeat_click, _ctx.onDecreaseClick]
+        ]),
+        withDirectives(createVNode(_component_el_icon, { class: "el-time-spinner__arrow arrow-down" }, {
+          default: withCtx(() => [
+            createVNode(_component_arrow_down)
+          ]),
+          _: 1
+        }, 512), [
+          [_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":["_createElementBlock","_createBlock","_createVNode","_createElementVNode"],"mappings":";;;;qBAmDY,OAAM;;;;;;;sBAlDhBA;IAAK,uBAAM,oCAA2C;;KACnC,sCACfA,oDACiB,oBAAR;0BADTC;QAEG,KAAK;AAAA,QACL,KAAK,cAAS;AAAA,QACf,OAAM;AAAA,QACN,cAAW;AAAA,QACX,cAAW;AAAA,QACX,UAAA;AAAA,QACA,KAAI;AAAA,QACH,0BAAY,qBAAgB;AAAA,QAC5B,yBAAW,0BAAqB;AAAA;yBAG/B;4BADFD,8CAC4B,aAAQ,MAAM,QAAhC,UAAU;gCADpBA;cAEG;AAAA,cACD,uBAAM,mCACY,QAAQ,kBAAa,MAAM,OAAO;AAAA,cACnD,qBAAO,iBAAY,eAAe,KAAK;AAAA;cAExB,iCAAhBA;wEACwB,iBAAiB,MAAM,6BACxC,iBAAY;wCAEnBA;uDACY,KAAK;;;;;;;;IAKP,sCACdA,oDACiB,oBAAR;0BADTA;QAEG,KAAK;AAAA,QACN,OAAM;AAAA,QACL,0BAAY,qBAAgB;AAAA;uBAE7BE,kCAEE,OAAM;2BAEN;YAAAA;;;;oCAHgB;;uBAKlBA,kCAEE,OAAM;2BAEN;YAAAA;;;;oCAHgB;;QAKlBC,yBAAA;4BACEH,8CACwB,kBAAa,MAAM,QAAjC,MAAM;gCADhBA;cAEG;AAAA,cACD,uBAAM;;;;;cAMU,qBAAhBA;gBACkB,iCAAhBA;0EACwB,kBAAkB,OAAO,6BAC1C,iBAAY;0CAEnBA;yDACY,MAAM;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-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';
+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";

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

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