element-pe 1.0.8 → 1.0.9-alpha.12

package/lib/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.js","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue?vue&type=template&id=1d54be91&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"refPopper\"\n    v-model:visible=\"pickerVisible\"\n    manual-mode\n    :effect=\"Effect.LIGHT\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    :popper-class=\"`el-picker__popper ${popperClass}`\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    append-to-body\n    @before-enter=\"pickerActualVisible = true\"\n    @after-leave=\"pickerActualVisible = false\"\n  >\n    <template #trigger>\n      <el-input\n        v-if=\"!isRangeInput\"\n        v-clickoutside:[popperPaneRef]=\"onClickOutside\"\n        :model-value=\"displayValue\"\n        :name=\"name\"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        class=\"el-date-editor\"\n        :class=\"'el-date-editor--' + type\"\n        :readonly=\"!editable || readonly || isDatesPicker || type === 'week'\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @keydown=\"handleKeydown\"\n        @change=\"handleChange\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            class=\"el-input__icon\"\n            @click=\"handleFocus\"\n          >\n            <component :is=\"triggerIcon\"></component>\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClose && clearIcon\"\n            class=\"el-input__icon clear-icon\"\n            @click=\"onClearIconClick\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <div\n        v-else\n        v-clickoutside:[popperPaneRef]=\"onClickOutside\"\n        class=\"el-date-editor el-range-editor el-input__inner\"\n        :class=\"[\n          'el-date-editor--' + type,\n          pickerSize ? `el-range-editor--${pickerSize}` : '',\n          pickerDisabled ? 'is-disabled' : '',\n          pickerVisible ? 'is-active' : '',\n        ]\"\n        @click=\"handleFocus\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"handleKeydown\"\n      >\n        <el-icon\n          v-if=\"triggerIcon\"\n          class=\"el-input__icon el-range__icon\"\n          @click=\"handleFocus\"\n        >\n          <component :is=\"triggerIcon\"></component>\n        </el-icon>\n        <input\n          autocomplete=\"off\"\n          :name=\"name && name[0]\"\n          :placeholder=\"startPlaceholder\"\n          :value=\"displayValue && displayValue[0]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @input=\"handleStartInput\"\n          @change=\"handleStartChange\"\n          @focus=\"handleFocus\"\n        />\n        <slot name=\"range-separator\">\n          <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n        </slot>\n        <input\n          autocomplete=\"off\"\n          :name=\"name && name[1]\"\n          :placeholder=\"endPlaceholder\"\n          :value=\"displayValue && displayValue[1]\"\n          :disabled=\"pickerDisabled\"\n          :readonly=\"!editable || readonly\"\n          class=\"el-range-input\"\n          @focus=\"handleFocus\"\n          @input=\"handleEndInput\"\n          @change=\"handleEndChange\"\n        />\n        <el-icon\n          v-if=\"clearIcon\"\n          class=\"el-input__icon el-range__close-icon\"\n          :class=\"{\n            'el-range__close-icon--hidden': !showClose,\n          }\"\n          @click=\"onClearIconClick\"\n        >\n          <component :is=\"clearIcon\" />\n        </el-icon>\n      </div>\n    </template>\n    <template #default>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @mousedown.stop\n      ></slot>\n    </template>\n  </el-popper>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  nextTick,\n  inject,\n  watch,\n  provide,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n  isValidValue: (date: Dayjs) => boolean\n  handleKeydown: (event: KeyboardEvent) => void\n  parseUserInput: (value: Dayjs) => dayjs.Dayjs\n  formatToString: (value: Dayjs) => string | string[]\n  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n  getDefaultValue: () => Dayjs\n  panelReady: boolean\n  handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date | any, b: Date | any) {\n  const aIsDate = a instanceof Date\n  const bIsDate = b instanceof Date\n  if (aIsDate && bIsDate) {\n    return a.getTime() === b.getTime()\n  }\n  if (!aIsDate && !bIsDate) {\n    return a === b\n  }\n  return false\n}\n\nconst valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {\n  const aIsArray = a instanceof Array\n  const bIsArray = b instanceof Array\n  if (aIsArray && bIsArray) {\n    if (a.length !== b.length) {\n      return false\n    }\n    return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n  }\n  if (!aIsArray && !bIsArray) {\n    return dateEquals(a, b)\n  }\n  return false\n}\n\nconst parser = function (\n  date: Date | string,\n  format: string,\n  lang: string\n): Dayjs {\n  const day = isEmpty(format)\n    ? dayjs(date).locale(lang)\n    : dayjs(date, format).locale(lang)\n  return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number | Date, format: string, lang: string) {\n  return isEmpty(format) ? date : dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    ElInput,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { clickoutside: ClickOutside },\n  props: timePickerDefaultProps,\n  emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],\n  setup(props, ctx) {\n    const { lang } = useLocale()\n\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n    const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n    const refPopper = ref(null)\n    const pickerVisible = ref(false)\n    const pickerActualVisible = ref(false)\n    const valueOnOpen = ref(null)\n\n    watch(pickerVisible, (val) => {\n      if (!val) {\n        userInput.value = null\n        nextTick(() => {\n          emitChange(props.modelValue)\n        })\n        ctx.emit('blur')\n        blurInput()\n        props.validateEvent && elFormItem.validate?.('blur')\n      } else {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n    const emitChange = (val, isClear?: boolean) => {\n      // determine user real change only\n      if (isClear || !valueEquals(val, valueOnOpen.value)) {\n        ctx.emit('change', val)\n        props.validateEvent && elFormItem.validate?.('change')\n      }\n    }\n    const emitInput = (val) => {\n      if (!valueEquals(props.modelValue, val)) {\n        let formatValue\n        if (Array.isArray(val)) {\n          formatValue = val.map((_) =>\n            formatter(_, props.valueFormat, lang.value)\n          )\n        } else if (val) {\n          formatValue = formatter(val, props.valueFormat, lang.value)\n        }\n        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n      }\n    }\n    const refInput = computed(() => {\n      if (refPopper.value.triggerRef) {\n        const _r = isRangeInput.value\n          ? refPopper.value.triggerRef\n          : refPopper.value.triggerRef.$el\n        return [].slice.call(_r.querySelectorAll('input'))\n      }\n      return []\n    })\n    const setSelectionRange = (start, end, pos) => {\n      const _inputs = refInput.value\n      if (!_inputs.length) return\n      if (!pos || pos === 'min') {\n        _inputs[0].setSelectionRange(start, end)\n        _inputs[0].focus()\n      } else if (pos === 'max') {\n        _inputs[1].setSelectionRange(start, end)\n        _inputs[1].focus()\n      }\n    }\n    const onPick = (date: any = '', visible = false) => {\n      pickerVisible.value = visible\n      let result\n      if (Array.isArray(date)) {\n        result = date.map((_) => _.toDate())\n      } else {\n        // clear btn emit null\n        result = date ? date.toDate() : date\n      }\n      userInput.value = null\n      emitInput(result)\n    }\n    const handleFocus = (e) => {\n      if (props.readonly || pickerDisabled.value || pickerVisible.value) return\n      pickerVisible.value = true\n      ctx.emit('focus', e)\n    }\n\n    const handleBlur = () => {\n      pickerVisible.value = false\n      blurInput()\n    }\n\n    const pickerDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const parsedValue = computed(() => {\n      let result\n      if (valueIsEmpty.value) {\n        if (pickerOptions.value.getDefaultValue) {\n          result = pickerOptions.value.getDefaultValue()\n        }\n      } else {\n        if (Array.isArray(props.modelValue)) {\n          result = props.modelValue.map((_) =>\n            parser(_, props.valueFormat, lang.value)\n          )\n        } else {\n          result = parser(props.modelValue, props.valueFormat, lang.value)\n        }\n      }\n\n      if (pickerOptions.value.getRangeAvailableTime) {\n        const availableResult =\n          pickerOptions.value.getRangeAvailableTime(result)\n        if (!isEqual(availableResult, result)) {\n          result = availableResult\n          emitInput(\n            Array.isArray(result)\n              ? result.map((_) => _.toDate())\n              : result.toDate()\n          )\n        }\n      }\n      if (Array.isArray(result) && result.some((_) => !_)) {\n        result = []\n      }\n      return result\n    })\n\n    const displayValue = computed(() => {\n      if (!pickerOptions.value.panelReady) return\n      const formattedValue = formatDayjsToString(parsedValue.value)\n      if (Array.isArray(userInput.value)) {\n        return [\n          userInput.value[0] || (formattedValue && formattedValue[0]) || '',\n          userInput.value[1] || (formattedValue && formattedValue[1]) || '',\n        ]\n      } else if (userInput.value !== null) {\n        return userInput.value\n      }\n      if (!isTimePicker.value && valueIsEmpty.value) return\n      if (!pickerVisible.value && valueIsEmpty.value) return\n      if (formattedValue) {\n        return isDatesPicker.value\n          ? (formattedValue as Array<string>).join(', ')\n          : formattedValue\n      }\n      return ''\n    })\n\n    const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n    const isTimePicker = computed(() => props.type.startsWith('time'))\n\n    const isDatesPicker = computed(() => props.type === 'dates')\n\n    const triggerIcon = computed(\n      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n    )\n\n    const showClose = ref(false)\n\n    const onClearIconClick = (event) => {\n      if (props.readonly || pickerDisabled.value) return\n      if (showClose.value) {\n        event.stopPropagation()\n        emitInput(null)\n        emitChange(null, true)\n        showClose.value = false\n        pickerVisible.value = false\n        pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n      }\n    }\n    const valueIsEmpty = computed(() => {\n      return (\n        !props.modelValue ||\n        (Array.isArray(props.modelValue) && !props.modelValue.length)\n      )\n    })\n    const onMouseEnter = () => {\n      if (props.readonly || pickerDisabled.value) return\n      if (!valueIsEmpty.value && props.clearable) {\n        showClose.value = true\n      }\n    }\n    const onMouseLeave = () => {\n      showClose.value = false\n    }\n    const isRangeInput = computed(() => {\n      return props.type.indexOf('range') > -1\n    })\n\n    const pickerSize = useSize()\n\n    const popperPaneRef = computed(() => {\n      return refPopper.value?.popperRef\n    })\n\n    const onClickOutside = () => {\n      if (!pickerVisible.value) return\n      pickerVisible.value = false\n    }\n\n    const userInput = ref(null)\n\n    const handleChange = () => {\n      if (userInput.value) {\n        const value = parseUserInputToDayjs(displayValue.value)\n        if (value) {\n          if (isValidValue(value)) {\n            emitInput(\n              Array.isArray(value)\n                ? value.map((_) => _.toDate())\n                : value.toDate()\n            )\n            userInput.value = null\n          }\n        }\n      }\n      if (userInput.value === '') {\n        emitInput(null)\n        emitChange(null)\n        userInput.value = null\n      }\n    }\n\n    const blurInput = () => {\n      refInput.value.forEach((input) => input.blur())\n    }\n\n    const parseUserInputToDayjs = (value) => {\n      if (!value) return null\n      return pickerOptions.value.parseUserInput(value)\n    }\n\n    const formatDayjsToString = (value) => {\n      if (!value) return null\n      return pickerOptions.value.formatToString(value)\n    }\n\n    const isValidValue = (value) => {\n      return pickerOptions.value.isValidValue(value)\n    }\n\n    const handleKeydown = (event) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.esc) {\n        pickerVisible.value = false\n        event.stopPropagation()\n        return\n      }\n\n      if (code === EVENT_CODE.tab) {\n        if (!isRangeInput.value) {\n          handleChange()\n          pickerVisible.value = false\n          event.stopPropagation()\n        } else {\n          // user may change focus between two input\n          setTimeout(() => {\n            if (refInput.value.indexOf(document.activeElement) === -1) {\n              pickerVisible.value = false\n              blurInput()\n            }\n          }, 0)\n        }\n        return\n      }\n\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n        if (\n          userInput.value === null ||\n          userInput.value === '' ||\n          isValidValue(parseUserInputToDayjs(displayValue.value))\n        ) {\n          handleChange()\n          pickerVisible.value = false\n        }\n        event.stopPropagation()\n        return\n      }\n\n      // if user is typing, do not let picker handle key input\n      if (userInput.value) {\n        event.stopPropagation()\n        return\n      }\n\n      if (pickerOptions.value.handleKeydown) {\n        pickerOptions.value.handleKeydown(event)\n      }\n    }\n    const onUserInput = (e) => {\n      userInput.value = e\n    }\n\n    const handleStartInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [event.target.value, userInput.value[1]]\n      } else {\n        userInput.value = [event.target.value, null]\n      }\n    }\n\n    const handleEndInput = (event) => {\n      if (userInput.value) {\n        userInput.value = [userInput.value[0], event.target.value]\n      } else {\n        userInput.value = [null, event.target.value]\n      }\n    }\n\n    const handleStartChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n      if (value && value.isValid()) {\n        userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n        const newValue = [value, parsedValue.value && parsedValue.value[1]]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const handleEndChange = () => {\n      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n      if (value && value.isValid()) {\n        userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n        const newValue = [parsedValue.value && parsedValue.value[0], value]\n        if (isValidValue(newValue)) {\n          emitInput(newValue)\n          userInput.value = null\n        }\n      }\n    }\n\n    const pickerOptions = ref<Partial<PickerOptions>>({})\n    const onSetPickerOption = <T extends keyof PickerOptions>(\n      e: [T, PickerOptions[T]]\n    ) => {\n      pickerOptions.value[e[0]] = e[1]\n      pickerOptions.value.panelReady = true\n    }\n\n    const onCalendarChange = (e) => {\n      ctx.emit('calendar-change', e)\n    }\n\n    provide('EP_PICKER_BASE', {\n      props,\n    })\n\n    return {\n      Effect,\n\n      // injected popper options\n      elPopperOptions,\n\n      isDatesPicker,\n      handleEndChange,\n      handleStartChange,\n      handleStartInput,\n      handleEndInput,\n      onUserInput,\n      handleChange,\n      handleKeydown,\n      popperPaneRef,\n      onClickOutside,\n      pickerSize,\n      isRangeInput,\n      onMouseLeave,\n      onMouseEnter,\n      onClearIconClick,\n      showClose,\n      triggerIcon,\n      onPick,\n      handleFocus,\n      handleBlur,\n      pickerVisible,\n      pickerActualVisible,\n      displayValue,\n      parsedValue,\n      setSelectionRange,\n      refPopper,\n      pickerDisabled,\n      onSetPickerOption,\n      onCalendarChange,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_mergeProps","_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;;qBA4FgB,OAAM;;;;;;;0BA3FpBA,sCAAAC;IACE,KAAI;AAAA,IACI,SAAS;gEAAA;IACjB,eAAA;AAAA,IACC,QAAQ,YAAO;AAAA,IAChB,MAAA;AAAA,IACA,SAAQ;AAAA,KACA;IACP,qCAAmC;IACnC,kBAAgB;IAChB,uBAAqB;IACtB,YAAW;AAAA,IACV,oBAAkB;AAAA,IAClB,2BAAyB;AAAA,IAC1B,kBAAA;AAAA,IACC,uDAAc;IACd,sDAAa;;IAEH,qBACT;OACS,yDADTD;;QAGG,eAAa;QACb,MAAM;QACN,MAAM;QACN,UAAU;QACV,aAAa;QACd,2BAAM,uCACuB;QAC5B,WAAW,iBAAY,iBAAY,sBAAiB;QACpD,SAAO;QACP,SAAO;QACP,WAAS;QACT,UAAQ;QACR,cAAY;QACZ,cAAY;;QAEF,oBACT;UACQ,qCADRA;;YAEE,OAAM;AAAA,YACL,SAAO;;iCAER;gCAAAA,4CAAgB;;;;;QAGT,oBACT;UACQ,kBAAa,mCADrBA;;YAEE,OAAM;AAAA,YACL,SAAO;;iCAER;gCAAAA,4CAAgB;;;;;;;kCA/BY,qBAAjB;gDAmCjBE;;QAGE,2BAAM;;;;;;QAOL,gDAAO;QACP,qDAAY;QACZ,qDAAY;QACZ,kDAAS;;QAGF,qCADRF;;UAEE,OAAM;AAAA,UACL,SAAO;;+BAER;8BAAAA,4CAAgB;;;;QAElBG;UACE,cAAa;AAAA,UACZ,MAAM,aAAQ;UACd,aAAa;UACb,OAAO,qBAAgB;UACvB,UAAU;UACV,WAAW,iBAAY;UACxB,OAAM;AAAA,UACL,gDAAO;UACP,iDAAQ;UACR,gDAAO;;QAEVC,mDAAA;UACED,+BAAA,gCAAoC;;QAEtCA;UACE,cAAa;AAAA,UACZ,MAAM,aAAQ;UACd,aAAa;UACb,OAAO,qBAAgB;UACvB,UAAU;UACV,WAAW,iBAAY;UACxB,OAAM;AAAA,UACL,gDAAO;UACP,gDAAO;UACP,iDAAQ;;QAGH,mCADRH;;UAEE,2BAAM;;;UAIL,SAAO;;+BAER;8BAAAA,4CAAgB;;;;;kCAvDc,qBAAjB;;;IA2DR,qBACT;MAAAI;QACG,SAAS;QACT,eAAgB;QAChB,aAAc;QACd,QAAQ;QACR,cAAe;QACf,MAAM;QACN,cAAe;QACf,iDAAM;QACN,wDAAc;QACd,4DAAmB;QACnB,2DAAiB;QACjB,2DAAD;;;;;;;;;;"}

package/lib/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/lib/components/time-picker/src/common/props.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var validators = require('../../../../utils/validators.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 
 const timePickerDefaultProps = {
   name: {
@@ -30,7 +30,7 @@ const timePickerDefaultProps = {
   },
   clearIcon: {
     type: [String, Object],
-    default: icons.CircleClose
+    default: iconsVue.CircleClose
   },
   editable: {
     type: Boolean,

package/lib/components/time-picker/src/common/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","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":["CircleClose","isValidComponentSize"],"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,SAASA;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,WAAWC;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.js","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":["CircleClose","isValidComponentSize"],"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,SAASA;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,WAAWC;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/lib/components/time-picker/src/time-picker-com/basic-time-spinner.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var basicTimeSpinner_vue_vue_type_script_lang = require('./basic-time-spinner.vue_vue&type=script&lang.js');
-var basicTimeSpinner_vue_vue_type_template_id_4fb3c576_lang = require('./basic-time-spinner.vue_vue&type=template&id=4fb3c576&lang.js');
+var basicTimeSpinner_vue_vue_type_script_lang = require('./basic-time-spinner.vue_vue_type_script_lang.js');
+var basicTimeSpinner_vue_vue_type_template_id_4fb3c576_lang = require('./basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.js');
 
 basicTimeSpinner_vue_vue_type_script_lang["default"].render = basicTimeSpinner_vue_vue_type_template_id_4fb3c576_lang.render;
 basicTimeSpinner_vue_vue_type_script_lang["default"].__file = "packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue";

package/lib/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/lib/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_script_lang.js

@@ -0,0 +1,286 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var debounce = require('lodash/debounce');
+require('../../../../directives/index.js');
+var index$1 = require('../../../scrollbar/index.js');
+var index$2 = require('../../../icon/index.js');
+var iconsVue = require('@element-plus/icons-vue');
+var useTimePicker = require('./useTimePicker.js');
+var index = require('../../../../directives/repeat-click/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var script = vue.defineComponent({
+  directives: {
+    repeatClick: index["default"]
+  },
+  components: {
+    ElScrollbar: index$1.ElScrollbar,
+    ElIcon: index$2.ElIcon,
+    ArrowUp: iconsVue.ArrowUp,
+    ArrowDown: iconsVue.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__default["default"]((type) => {
+      isScrolling = false;
+      adjustCurrentSpinner(type);
+    }, 200);
+    const currentScrollbar = vue.ref(null);
+    const listHoursRef = vue.ref(null);
+    const listMinutesRef = vue.ref(null);
+    const listSecondsRef = vue.ref(null);
+    const listRefsMap = {
+      hours: listHoursRef,
+      minutes: listMinutesRef,
+      seconds: listSecondsRef
+    };
+    const spinnerItems = vue.computed(() => {
+      const arr = ["hours", "minutes", "seconds"];
+      return props.showSeconds ? arr : arr.slice(0, 2);
+    });
+    const hours = vue.computed(() => {
+      return props.spinnerDate.hour();
+    });
+    const minutes = vue.computed(() => {
+      return props.spinnerDate.minute();
+    });
+    const seconds = vue.computed(() => {
+      return props.spinnerDate.second();
+    });
+    const timePartsMap = vue.computed(() => ({
+      hours,
+      minutes,
+      seconds
+    }));
+    const hoursList = vue.computed(() => {
+      return getHoursList(props.role);
+    });
+    const minutesList = vue.computed(() => {
+      return getMinutesList(hours.value, props.role);
+    });
+    const secondsList = vue.computed(() => {
+      return getSecondsList(hours.value, minutes.value, props.role);
+    });
+    const listMap = vue.computed(() => ({
+      hours: hoursList,
+      minutes: minutesList,
+      seconds: secondsList
+    }));
+    const arrowHourList = vue.computed(() => {
+      const hour = hours.value;
+      return [
+        hour > 0 ? hour - 1 : void 0,
+        hour,
+        hour < 23 ? hour + 1 : void 0
+      ];
+    });
+    const arrowMinuteList = vue.computed(() => {
+      const minute = minutes.value;
+      return [
+        minute > 0 ? minute - 1 : void 0,
+        minute,
+        minute < 59 ? minute + 1 : void 0
+      ];
+    });
+    const arrowSecondList = vue.computed(() => {
+      const second = seconds.value;
+      return [
+        second > 0 ? second - 1 : void 0,
+        second,
+        second < 59 ? second + 1 : void 0
+      ];
+    });
+    const arrowListMap = vue.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);
+      vue.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");
+    };
+    vue.onMounted(() => {
+      vue.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 } = useTimePicker.getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
+    vue.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
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=basic-time-spinner.vue_vue_type_script_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"basic-time-spinner.vue_vue_type_script_lang.js","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":["defineComponent","RepeatClick","ElScrollbar","ElIcon","ArrowUp","ArrowDown","debounce","ref","computed","getTimeLists"],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('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 = vue.resolveComponent("el-scrollbar");
+  const _component_arrow_up = vue.resolveComponent("arrow-up");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_arrow_down = vue.resolveComponent("arrow-down");
+  const _directive_repeat_click = vue.resolveDirective("repeat-click");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-time-spinner", { "has-seconds": _ctx.showSeconds }])
+  }, [
+    !_ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.spinnerItems, (item) => {
+      return vue.openBlock(), vue.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: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.listMap[item].value, (disabled, key) => {
+            return vue.openBlock(), vue.createElementBlock("li", {
+              key,
+              class: vue.normalizeClass(["el-time-spinner__item", { active: key === _ctx.timePartsMap[item].value, disabled }]),
+              onClick: ($event) => _ctx.handleClick(item, { value: key, disabled })
+            }, [
+              item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + vue.toDisplayString(_ctx.getAmPmFlag(key)), 1)
+              ], 2112)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                vue.createTextVNode(vue.toDisplayString(("0" + key).slice(-2)), 1)
+              ], 2112))
+            ], 10, _hoisted_1);
+          }), 128))
+        ]),
+        _: 2
+      }, 1032, ["onMouseenter", "onMousemove"]);
+    }), 128)) : vue.createCommentVNode("v-if", true),
+    _ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.spinnerItems, (item) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: item,
+        class: "el-time-spinner__wrapper is-arrow",
+        onMouseenter: ($event) => _ctx.emitSelectRange(item)
+      }, [
+        vue.withDirectives(vue.createVNode(_component_el_icon, { class: "el-time-spinner__arrow arrow-up" }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_arrow_up)
+          ]),
+          _: 1
+        }, 512), [
+          [_directive_repeat_click, _ctx.onDecreaseClick]
+        ]),
+        vue.withDirectives(vue.createVNode(_component_el_icon, { class: "el-time-spinner__arrow arrow-down" }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_arrow_down)
+          ]),
+          _: 1
+        }, 512), [
+          [_directive_repeat_click, _ctx.onIncreaseClick]
+        ]),
+        vue.createElementVNode("ul", _hoisted_3, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.arrowListMap[item].value, (time, key) => {
+            return vue.openBlock(), vue.createElementBlock("li", {
+              key,
+              class: vue.normalizeClass(["el-time-spinner__item", {
+                active: time === _ctx.timePartsMap[item].value,
+                disabled: _ctx.listMap[item].value[time]
+              }])
+            }, [
+              time ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + vue.toDisplayString(_ctx.getAmPmFlag(time)), 1)
+                ], 2112)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  vue.createTextVNode(vue.toDisplayString(("0" + time).slice(-2)), 1)
+                ], 2112))
+              ], 2112)) : vue.createCommentVNode("v-if", true)
+            ], 2);
+          }), 128))
+        ])
+      ], 40, _hoisted_2);
+    }), 128)) : vue.createCommentVNode("v-if", true)
+  ], 2);
+}
+
+exports.render = render;
+//# sourceMappingURL=basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.js","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;;;;;;;0BAlDhBA;IAAK,2BAAM,oCAA2C;;KACnC,0CACfA,gEACiB,oBAAR;8BADTC;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;6BAG/B;gCADFD,0DAC4B,aAAQ,MAAM,QAAhC,UAAU;oCADpBA;cAEG;AAAA,cACD,2BAAM,mCACY,QAAQ,kBAAa,MAAM,OAAO;AAAA,cACnD,qBAAO,iBAAY,eAAe,KAAK;AAAA;cAExB,qCAAhBA;gFACwB,iBAAiB,MAAM,iCACxC,iBAAY;4CAEnBA;+DACY,KAAK;;;;;;;;IAKP,0CACdA,gEACiB,oBAAR;8BADTA;QAEG,KAAK;AAAA,QACN,OAAM;AAAA,QACL,0BAAY,qBAAgB;AAAA;2BAE7BE,sCAEE,OAAM;+BAEN;YAAAA;;;;oCAHgB;;2BAKlBA,sCAEE,OAAM;+BAEN;YAAAA;;;;oCAHgB;;QAKlBC,6BAAA;gCACEH,0DACwB,kBAAa,MAAM,QAAjC,MAAM;oCADhBA;cAEG;AAAA,cACD,2BAAM;;;;;cAMU,yBAAhBA;gBACkB,qCAAhBA;kFACwB,kBAAkB,OAAO,iCAC1C,iBAAY;8CAEnBA;iEACY,MAAM;;;;;;;;;;;;;"}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var panelTimePick_vue_vue_type_script_lang = require('./panel-time-pick.vue_vue&type=script&lang.js');
-var panelTimePick_vue_vue_type_template_id_3b3cfa6a_lang = require('./panel-time-pick.vue_vue&type=template&id=3b3cfa6a&lang.js');
+var panelTimePick_vue_vue_type_script_lang = require('./panel-time-pick.vue_vue_type_script_lang.js');
+var panelTimePick_vue_vue_type_template_id_3b3cfa6a_lang = require('./panel-time-pick.vue_vue_type_template_id_3b3cfa6a_lang.js');
 
 panelTimePick_vue_vue_type_script_lang["default"].render = panelTimePick_vue_vue_type_template_id_3b3cfa6a_lang.render;
 panelTimePick_vue_vue_type_script_lang["default"].__file = "packages/components/time-picker/src/time-picker-com/panel-time-pick.vue";

package/lib/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;