@element-plus/nightly 0.0.20211230

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.mjs","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        :id=\"id\"\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          :id=\"id && id[0]\"\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          :id=\"id && id[1]\"\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<HTMLInputElement[]>(() => {\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 refStartInput = computed(() => {\n      return refInput?.value[0]\n    })\n    const refEndInput = computed(() => {\n      return refInput?.value[1]\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\n    const focus = (focusStartInput = true) => {\n      let input = refStartInput.value\n      if (!focusStartInput && isRangeInput.value) {\n        input = refEndInput.value\n      }\n      if (input) {\n        input.focus()\n      }\n    }\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      focus,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;0BA8FqB;;;;;;;;;wBA7FnB,mCAAA;IACE;IACQ;;IACR;UACO;IACP;IACA;;IAEC;IACA,kBAAgB;IAChB;IACD;IACC,yBAAuB;IACvB;IACD;IACC;;;;QAKU;;;gBACF,OAAE;yBAEK;;gBAEP,EAAE;sBACI;;iBAEN;uBAEO;;;;;0BAKC;YACZ;;YAEU;;;;;;;;;;;;;;YASA,gBACT;eACQA;;;2BACA;;;;;;;;;;;;;;;;iBAUL;;;;;;;;;YAUJ;;;;;;yBAKO;;;;;;;;;;;;;;cAUL;sBACQ;cACT,OAAM;qBACA;sBACC;;;;0CAIP;;;;0BAIYA;;;0CAGY,iBAAY;;;;;;;;;;;;;;iBAcnC;;;;;;;;;sCAvD6B,qBAAjB;;;;;QA+Dd;;QAEA;;;;;;"}

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

@@ -0,0 +1,110 @@
+import type { PropType, Component } from 'vue';
+import type { Options } from '@popperjs/core';
+import type { ComponentSize } from 'element-plus/es/utils/types';
+export declare const timePickerDefaultProps: {
+    id: {
+        type: (StringConstructor | ArrayConstructor)[];
+    };
+    name: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    valueFormat: {
+        type: PropType<string>;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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<{}>, {}>;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: {
+        type: PropType<Partial<Options>>;
+        default: () => {};
+    };
+    modelValue: {
+        type: PropType<string | Date | (number | Date)[]>;
+        default: string;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: StringConstructor;
+    endPlaceholder: StringConstructor;
+    defaultValue: {
+        type: PropType<Date | Date[]>;
+    };
+    defaultTime: {
+        type: PropType<Date | Date[]>;
+    };
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+    disabledDate: {
+        type: FunctionConstructor;
+    };
+    cellClassName: {
+        type: FunctionConstructor;
+    };
+    shortcuts: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    arrowControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unlinkPanels: BooleanConstructor;
+};

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

@@ -0,0 +1,113 @@
+import { isValidComponentSize } from '../../../../utils/validators.mjs';
+import { CircleClose } from '@element-plus/icons-vue';
+
+const timePickerDefaultProps = {
+  id: {
+    type: [Array, String]
+  },
+  name: {
+    type: [Array, String],
+    default: ""
+  },
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  format: {
+    type: String
+  },
+  valueFormat: {
+    type: String
+  },
+  type: {
+    type: String,
+    default: ""
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  clearIcon: {
+    type: [String, Object],
+    default: CircleClose
+  },
+  editable: {
+    type: Boolean,
+    default: true
+  },
+  prefixIcon: {
+    type: [String, Object],
+    default: ""
+  },
+  size: {
+    type: String,
+    validator: isValidComponentSize
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  popperOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  modelValue: {
+    type: [Date, Array, String],
+    default: ""
+  },
+  rangeSeparator: {
+    type: String,
+    default: "-"
+  },
+  startPlaceholder: String,
+  endPlaceholder: String,
+  defaultValue: {
+    type: [Date, Array]
+  },
+  defaultTime: {
+    type: [Date, Array]
+  },
+  isRange: {
+    type: Boolean,
+    default: false
+  },
+  disabledHours: {
+    type: Function
+  },
+  disabledMinutes: {
+    type: Function
+  },
+  disabledSeconds: {
+    type: Function
+  },
+  disabledDate: {
+    type: Function
+  },
+  cellClassName: {
+    type: Function
+  },
+  shortcuts: {
+    type: Array,
+    default: () => []
+  },
+  arrowControl: {
+    type: Boolean,
+    default: false
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  unlinkPanels: Boolean
+};
+
+export { timePickerDefaultProps };
+//# sourceMappingURL=props.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"props.mjs","sources":["../../../../../../../packages/components/time-picker/src/common/props.ts"],"sourcesContent":["import { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose } from '@element-plus/icons-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  id: {\n    type: [Array, String],\n  },\n  name: {\n    type: [Array, String],\n    default: '',\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  format: {\n    type: String,\n  },\n  valueFormat: {\n    type: String as PropType<string>,\n  },\n  type: {\n    type: String,\n    default: '',\n  },\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  clearIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: CircleClose,\n  },\n  editable: {\n    type: Boolean,\n    default: true,\n  },\n  prefixIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: '',\n  },\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n  },\n  popperOptions: {\n    type: Object as PropType<Partial<Options>>,\n    default: () => ({}),\n  },\n  modelValue: {\n    type: [Date, Array, String] as PropType<string | Date | (number | Date)[]>,\n    default: '',\n  },\n  rangeSeparator: {\n    type: String,\n    default: '-',\n  },\n  startPlaceholder: String,\n  endPlaceholder: String,\n  defaultValue: {\n    type: [Date, Array] as PropType<Date | Date[]>,\n  },\n  defaultTime: {\n    type: [Date, Array] as PropType<Date | Date[]>,\n  },\n  isRange: {\n    type: Boolean,\n    default: false,\n  },\n  disabledHours: {\n    type: Function,\n  },\n  disabledMinutes: {\n    type: Function,\n  },\n  disabledSeconds: {\n    type: Function,\n  },\n  disabledDate: {\n    type: Function,\n  },\n  cellClassName: {\n    type: Function,\n  },\n  shortcuts: {\n    type: Array,\n    default: () => [],\n  },\n  arrowControl: {\n    type: Boolean,\n    default: false,\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  unlinkPanels: Boolean,\n}\n"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,100 @@
+import type { PropType, Ref } from 'vue';
+import type { Dayjs } from 'dayjs';
+import type { Nullable } from 'element-plus/es/utils/types';
+declare const _default: import("vue").DefineComponent<{
+    role: {
+        type: StringConstructor;
+        required: true;
+    };
+    spinnerDate: {
+        type: PropType<Dayjs>;
+        required: true;
+    };
+    showSeconds: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    arrowControl: BooleanConstructor;
+    amPmMode: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabledHours: {
+        type: FunctionConstructor;
+    };
+    disabledMinutes: {
+        type: FunctionConstructor;
+    };
+    disabledSeconds: {
+        type: FunctionConstructor;
+    };
+}, {
+    getRefId: (item: any) => string;
+    spinnerItems: import("vue").ComputedRef<string[]>;
+    currentScrollbar: Ref<null>;
+    hours: import("vue").ComputedRef<number>;
+    minutes: import("vue").ComputedRef<number>;
+    seconds: import("vue").ComputedRef<number>;
+    hoursList: import("vue").ComputedRef<never[]>;
+    minutesList: import("vue").ComputedRef<never[]>;
+    arrowHourList: import("vue").ComputedRef<(number | undefined)[]>;
+    arrowMinuteList: import("vue").ComputedRef<(number | undefined)[]>;
+    arrowSecondList: import("vue").ComputedRef<(number | undefined)[]>;
+    getAmPmFlag: (hour: any) => string;
+    emitSelectRange: (type: any) => void;
+    adjustCurrentSpinner: (type: any) => void;
+    typeItemHeight: (type: any) => any;
+    listHoursRef: Ref<Nullable<HTMLElement>>;
+    listMinutesRef: Ref<Nullable<HTMLElement>>;
+    listSecondsRef: Ref<Nullable<HTMLElement>>;
+    onIncreaseClick: () => void;
+    onDecreaseClick: () => void;
+    handleClick: (type: any, { value, disabled }: {
+        value: any;
+        disabled: any;
+    }) => void;
+    secondsList: import("vue").ComputedRef<never[]>;
+    timePartsMap: import("vue").ComputedRef<{
+        hours: import("vue").ComputedRef<number>;
+        minutes: import("vue").ComputedRef<number>;
+        seconds: import("vue").ComputedRef<number>;
+    }>;
+    arrowListMap: import("vue").ComputedRef<{
+        hours: import("vue").ComputedRef<(number | undefined)[]>;
+        minutes: import("vue").ComputedRef<(number | undefined)[]>;
+        seconds: import("vue").ComputedRef<(number | undefined)[]>;
+    }>;
+    listMap: import("vue").ComputedRef<{
+        hours: import("vue").ComputedRef<never[]>;
+        minutes: import("vue").ComputedRef<never[]>;
+        seconds: import("vue").ComputedRef<never[]>;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "select-range" | "set-option")[], "change" | "select-range" | "set-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    role?: unknown;
+    spinnerDate?: unknown;
+    showSeconds?: unknown;
+    arrowControl?: unknown;
+    amPmMode?: unknown;
+    disabledHours?: unknown;
+    disabledMinutes?: unknown;
+    disabledSeconds?: unknown;
+} & {
+    role: string;
+    arrowControl: boolean;
+    spinnerDate: Dayjs;
+    showSeconds: boolean;
+    amPmMode: string;
+} & {
+    disabledHours?: Function | undefined;
+    disabledMinutes?: Function | undefined;
+    disabledSeconds?: Function | undefined;
+}> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onSelect-range"?: ((...args: any[]) => any) | undefined;
+    "onSet-option"?: ((...args: any[]) => any) | undefined;
+}, {
+    arrowControl: boolean;
+    showSeconds: boolean;
+    amPmMode: string;
+}>;
+export default _default;

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

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