@element-plus/nightly 0.0.20220120 → 0.0.20220124

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

@@ -42,7 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     clearIcon: {
         type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     editable: {
         type: BooleanConstructor;
@@ -852,7 +852,7 @@ declare const _default: import("vue").DefineComponent<{
         onOpen: () => void;
         onClose: () => void;
     }> & {} & {} & import("vue").ComponentCustomProperties) | undefined>;
-    inputRef: import("vue").Ref<HTMLElement | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | undefined>;
+    inputRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | HTMLElement | undefined>;
     pickerDisabled: import("vue").ComputedRef<boolean | undefined>;
     onSetPickerOption: <T extends keyof PickerOptions>(e: [T, PickerOptions[T]]) => void;
     onCalendarChange: (e: any) => void;
@@ -886,7 +886,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     clearIcon: {
         type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     editable: {
         type: BooleanConstructor;
@@ -974,8 +974,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: string;
     disabled: boolean;
-    modelValue: string | number | Date | (string | number | Date)[];
     name: string | unknown[];
+    modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
     popperOptions: Partial<Options>;
     popperClass: string;

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

@@ -29,7 +29,7 @@ export declare const timePickerDefaultProps: {
     };
     clearIcon: {
         type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     editable: {
         type: BooleanConstructor;

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

@@ -1,7 +1,368 @@
-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 { defineComponent, ref, computed, nextTick, onMounted, watch, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createVNode, createElementVNode } 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 _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
+import RepeatClick from '../../../../directives/repeat-click/index.mjs';
 
-script.render = render;
-script.__file = "packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue";
+const _sfc_main = 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 && el.$el) {
+        el.$el.querySelector(".el-scrollbar__wrap").scrollTop = Math.max(0, value * typeItemHeight(type));
+      }
+    };
+    const typeItemHeight = (type) => {
+      const el = listRefsMap[type];
+      return el.$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].$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].$el.offsetHeight;
+    };
+    const bindScrollEvent = () => {
+      const bindFuntion = (type) => {
+        if (listRefsMap[type] && listRefsMap[type].$el) {
+          listRefsMap[type].$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 setRef = (scrollbar, type) => {
+      listRefsMap[type] = scrollbar;
+    };
+    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 {
+      setRef,
+      spinnerItems,
+      currentScrollbar,
+      hours,
+      minutes,
+      seconds,
+      hoursList,
+      minutesList,
+      arrowHourList,
+      arrowMinuteList,
+      arrowSecondList,
+      getAmPmFlag,
+      emitSelectRange,
+      adjustCurrentSpinner,
+      typeItemHeight,
+      listHoursRef,
+      listMinutesRef,
+      listSecondsRef,
+      onIncreaseClick,
+      onDecreaseClick,
+      handleClick,
+      secondsList,
+      timePartsMap,
+      arrowListMap,
+      listMap
+    };
+  }
+});
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onMouseenter"];
+const _hoisted_3 = { class: "el-time-spinner__list" };
+function _sfc_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: (scollbar) => _ctx.setRef(scollbar, 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]
+              }])
+            }, [
+              typeof time === "number" ? (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);
+}
+var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { TimeSpinner as default };
 //# sourceMappingURL=basic-time-spinner.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"basic-time-spinner.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"basic-time-spinner.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=\"(scollbar) => setRef(scollbar, 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=\"typeof time === 'number'\">\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 && el.$el) {\n        el.$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.$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].$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].$el.offsetHeight\n    }\n\n    const bindScrollEvent = () => {\n      const bindFuntion = (type) => {\n        if (listRefsMap[type] && listRefsMap[type].$el) {\n          listRefsMap[type].$el.querySelector('.el-scrollbar__wrap').onscroll =\n            () => {\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 setRef = (scrollbar, type) => {\n      listRefsMap[type] = scrollbar\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      setRef,\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":["_openBlock","_Fragment","_createBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_withCtx"],"mappings":"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"}