npm - @element-plus/nightly - Versions diffs - 0.0.20220109 → 0.0.20220113 - Mend

@element-plus/nightly 0.0.20220109 → 0.0.20220113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (216) hide show

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

	@@ -1 +1 @@
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-tooltip\n ref=\"refPopper\"\n v-model:visible=\"pickerVisible\"\n effect=\"light\"\n pure\n trigger=\"click\"\n v-bind=\"$attrs\"\n append-to-body\n transition=\"el-zoom-in-top\"\n :popper-class=\"`el-picker__popper ${popperClass}`\"\n :popper-options=\"elPopperOptions\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :stop-popper-mouse-event=\"false\"\n :hide-after=\"0\"\n persistent\n @show=\"pickerActualVisible = true\"\n @hide=\"pickerActualVisible = false\"\n >\n <template #default>\n <el-input\n v-if=\"!isRangeInput\"\n :id=\"id\"\n ref=\"inputRef\"\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, $attrs.class \|\| undefined]\"\n :style=\"$attrs.style \|\| undefined\"\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 @click.stop\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 ref=\"inputRef\"\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 #content>\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-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n ref,\n computed,\n nextTick,\n inject,\n watch,\n provide,\n unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\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 { ComponentPublicInstance } from 'vue'\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 =\n isEmpty(format) \|\| format === 'x'\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 if (isEmpty(format)) return date\n if (format === 'x') return +date\n return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n name: 'Picker',\n components: {\n ElInput,\n ElTooltip,\n ElIcon,\n },\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<InstanceType<typeof ElTooltip>>()\n const inputRef = ref<HTMLElement \| ComponentPublicInstance>()\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 (inputRef.value) {\n const _r = isRangeInput.value\n ? inputRef.value\n : (inputRef.value as any as ComponentPublicInstance).$el\n return Array.from<HTMLInputElement>(_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 refPopper.value?.onClose()\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?.contentRef\n })\n\n const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n const actualInputRef = computed(() => {\n if (unref(isRangeInput)) {\n return unref(inputRef)\n }\n\n return (unref(inputRef) as ComponentPublicInstance)?.$el\n })\n\n onClickOutside(actualInputRef, (e: PointerEvent) => {\n const unrefedPopperEl = unref(popperEl)\n const inputEl = unref(actualInputRef)\n if (\n (unrefedPopperEl &&\n (e.target === unrefedPopperEl \|\|\n e.composedPath().includes(unrefedPopperEl))) \|\|\n e.target === inputEl \|\|\n e.composedPath().includes(inputEl)\n )\n 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 // 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 inputRef,\n pickerDisabled,\n onSetPickerOption,\n onCalendarChange,\n focus,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;0BAiGqB;;;;;;;;wBAhGnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA;IACA,gCAA8B;IAC9B,cAAY,CAAC;IACd;IACC;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;2BAEI;;;YAGA;;;;4BAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;;oCAOd;;;;;;mBAOA;;;0EAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;uBAQC,aAAQ;mDACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;yEAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}
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-tooltip\n ref=\"refPopper\"\n v-model:visible=\"pickerVisible\"\n effect=\"light\"\n pure\n trigger=\"click\"\n v-bind=\"$attrs\"\n append-to-body\n transition=\"el-zoom-in-top\"\n :popper-class=\"`el-picker__popper ${popperClass}`\"\n :popper-options=\"elPopperOptions\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :stop-popper-mouse-event=\"false\"\n :hide-after=\"0\"\n persistent\n @show=\"pickerActualVisible = true\"\n @hide=\"pickerActualVisible = false\"\n >\n <template #default>\n <el-input\n v-if=\"!isRangeInput\"\n :id=\"id\"\n ref=\"inputRef\"\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, $attrs.class \|\| undefined]\"\n :style=\"$attrs.style \|\| undefined\"\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 @click.stop\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 ref=\"inputRef\"\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 $attrs.class \|\| undefined,\n ]\"\n :style=\"$attrs.style \|\| undefined\"\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 #content>\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-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n ref,\n computed,\n nextTick,\n inject,\n watch,\n provide,\n unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\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 { ComponentPublicInstance } from 'vue'\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 =\n isEmpty(format) \|\| format === 'x'\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 if (isEmpty(format)) return date\n if (format === 'x') return +date\n return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n name: 'Picker',\n components: {\n ElInput,\n ElTooltip,\n ElIcon,\n },\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<InstanceType<typeof ElTooltip>>()\n const inputRef = ref<HTMLElement \| ComponentPublicInstance>()\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 (inputRef.value) {\n const _r = isRangeInput.value\n ? inputRef.value\n : (inputRef.value as any as ComponentPublicInstance).$el\n return Array.from<HTMLInputElement>(_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 refPopper.value?.onClose()\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?.contentRef\n })\n\n const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n const actualInputRef = computed(() => {\n if (unref(isRangeInput)) {\n return unref(inputRef)\n }\n\n return (unref(inputRef) as ComponentPublicInstance)?.$el\n })\n\n onClickOutside(actualInputRef, (e: PointerEvent) => {\n const unrefedPopperEl = unref(popperEl)\n const inputEl = unref(actualInputRef)\n if (\n (unrefedPopperEl &&\n (e.target === unrefedPopperEl \|\|\n e.composedPath().includes(unrefedPopperEl))) \|\|\n e.target === inputEl \|\|\n e.composedPath().includes(inputEl)\n )\n 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 // 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 inputRef,\n pickerDisabled,\n onSetPickerOption,\n onCalendarChange,\n focus,\n }\n },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;;;;;0BAmGqB;;;;;;;;wBAlGnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA;IACA,gCAA8B;IAC9B,cAAY,CAAC;IACd;IACC;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;2BAEI;;;YAGA;;;;4BAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;eAMjBA;iBACE;;;;;;;iBAQC;mBACA;;;0EAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;uBAQC,aAAQ;mDACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;yEAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}

package/lib/components/time-select/index.d.ts CHANGED Viewed

@@ -1,5 +1,9 @@
 import type { SFCWithInstall } from 'element-plus/es/utils/types';
 declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: StringConstructor;
     disabled: {
         type: BooleanConstructor;
@@ -61,6 +65,7 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     blur: () => void;
     focus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus")[], "update:modelValue" | "change" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    format?: unknown;
     modelValue?: unknown;
     disabled?: unknown;
     editable?: unknown;
@@ -85,6 +90,7 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    format: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     step: string;
     minTime: string;
@@ -106,6 +112,7 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    format: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     step: string;
     minTime: string;
@@ -113,6 +120,10 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
 }>>;
 export default _TimeSelect;
 export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<{
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: StringConstructor;
     disabled: {
         type: BooleanConstructor;
@@ -174,6 +185,7 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     blur: () => void;
     focus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus")[], "update:modelValue" | "change" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    format?: unknown;
     modelValue?: unknown;
     disabled?: unknown;
     editable?: unknown;
@@ -198,6 +210,7 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    format: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     step: string;
     minTime: string;
@@ -219,6 +232,7 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    format: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     step: string;
     minTime: string;

package/lib/components/time-select/src/time-select.vue.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import type { PropType, Component } from 'vue';
 import type { ComponentSize } from 'element-plus/es/utils/types';
 declare const _default: import("vue").DefineComponent<{
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: StringConstructor;
     disabled: {
         type: BooleanConstructor;
@@ -62,6 +66,7 @@ declare const _default: import("vue").DefineComponent<{
     blur: () => void;
     focus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus")[], "update:modelValue" | "change" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    format?: unknown;
     modelValue?: unknown;
     disabled?: unknown;
     editable?: unknown;
@@ -86,6 +91,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: string;
     clearable: boolean;
     prefixIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    format: string;
     clearIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     step: string;
     minTime: string;
@@ -107,6 +113,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: string;
     clearable: boolean;
     prefixIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    format: string;
     clearIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     step: string;
     minTime: string;

package/lib/components/time-select/src/time-select.vue_vue_type_script_lang.js CHANGED Viewed

@@ -3,16 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
+var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
 var index = require('../../select/index.js');
 var index$1 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var customParseFormat__default = /*#__PURE__*/_interopDefaultLegacy(customParseFormat);
+dayjs__default["default"].extend(customParseFormat__default["default"]);
 const { Option: ElOption } = index.ElSelect;
 const parseTime = (time) => {
   const values = (time || "").split(":");
   if (values.length >= 2) {
-    const hours = parseInt(values[0], 10);
+    let hours = parseInt(values[0], 10);
     const minutes = parseInt(values[1], 10);
+    const timeUpper = time.toUpperCase();
+    if (timeUpper.includes("AM") && hours === 12) {
+      hours = 0;
+    } else if (timeUpper.includes("PM") && hours !== 12) {
+      hours += 12;
+    }
     return {
       hours,
       minutes
@@ -30,8 +44,11 @@ const compareTime = (time1, time2) => {
   }
   return minutes1 > minutes2 ? 1 : -1;
 };
+const padTime = (time) => {
+  return `${time}`.padStart(2, "0");
+};
 const formatTime = (time) => {
-  return `${time.hours < 10 ? `0${time.hours}` : time.hours}:${time.minutes < 10 ? `0${time.minutes}` : time.minutes}`;
+  return `${padTime(time.hours)}:${padTime(time.minutes)}`;
 };
 const nextTime = (time, step) => {
   const timeValue = parseTime(time);
@@ -54,6 +71,10 @@ var script = vue.defineComponent({
     event: "change"
   },
   props: {
+    format: {
+      type: String,
+      default: "HH:mm"
+    },
     modelValue: String,
     disabled: {
       type: Boolean,
@@ -113,16 +134,38 @@ var script = vue.defineComponent({
   setup(props) {
     const select = vue.ref(null);
     const value = vue.computed(() => props.modelValue);
+    const start = vue.computed(() => {
+      const time = parseTime(props.start);
+      return formatTime(time);
+    });
+    const end = vue.computed(() => {
+      const time = parseTime(props.end);
+      return formatTime(time);
+    });
+    const step = vue.computed(() => {
+      const time = parseTime(props.step);
+      return formatTime(time);
+    });
+    const minTime = vue.computed(() => {
+      const time = parseTime(props.minTime);
+      return time ? formatTime(time) : null;
+    });
+    const maxTime = vue.computed(() => {
+      const time = parseTime(props.maxTime);
+      return time ? formatTime(time) : null;
+    });
     const items = vue.computed(() => {
       const result = [];
       if (props.start && props.end && props.step) {
-        let current = props.start;
-        while (compareTime(current, props.end) <= 0) {
+        let current = start.value;
+        let currentTime;
+        while (compareTime(current, end.value) <= 0) {
+          currentTime = dayjs__default["default"](current, "HH:mm").format(props.format);
           result.push({
-            value: current,
-            disabled: compareTime(current, props.minTime || "-1:-1") <= 0 || compareTime(current, props.maxTime || "100:100") >= 0
+            value: currentTime,
+            disabled: compareTime(current, minTime.value || "-1:-1") <= 0 || compareTime(current, maxTime.value || "100:100") >= 0
           });
-          current = nextTime(current, props.step);
+          current = nextTime(current, step.value);
         }
       }
       return result;

package/lib/components/time-select/src/time-select.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-select.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/time-select/src/time-select.vue"],"sourcesContent":["<template>\n <el-select\n ref=\"select\"\n :model-value=\"value\"\n :disabled=\"disabled\"\n :clearable=\"clearable\"\n :clear-icon=\"clearIcon\"\n :size=\"size\"\n :placeholder=\"placeholder\"\n default-first-option\n :filterable=\"editable\"\n @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n @change=\"(event) => $emit('change', event)\"\n @blur=\"(event) => $emit('blur', event)\"\n @focus=\"(event) => $emit('focus', event)\"\n >\n <el-option\n v-for=\"item in items\"\n :key=\"item.value\"\n :label=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n />\n <template #prefix>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </template>\n </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n hours: number\n minutes: number\n}\n\nconst parseTime = (time: string): null \| Time => {\n const values = (time \|\| '').split(':')\n if (values.length >= 2) {\n ~~const~~ hours = parseInt(values[0], 10)\n const minutes = parseInt(values[1], 10)\n return {\n hours,\n minutes,\n }\n }\n return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n const value1 = parseTime(time1)\n const value2 = parseTime(time2)\n const minutes1 = value1.minutes + value1.hours * 60\n const minutes2 = value2.minutes + value2.hours * 60\n if (minutes1 === minutes2) {\n return 0\n }\n return minutes1 > minutes2 ? 1 : -1\n}\nconst ~~formatTime~~ = (time: ~~Time):~~ string => {\n return `${time~~.hours~~ < 10 ? ~~`0${~~time~~.hours}`~~ : ~~time.hours}:$~~{\n ~~time.minutes~~ ~~< 10 ? `0$~~{time.~~minutes~~}~~` :~~ time.minutes\n }`\n}\nconst nextTime = (time: string, step: string): string => {\n const timeValue = parseTime(time)\n const stepValue = parseTime(step)\n const next = {\n hours: timeValue.hours,\n minutes: timeValue.minutes,\n }\n next.minutes += stepValue.minutes\n next.hours += stepValue.hours\n next.hours += Math.floor(next.minutes / 60)\n next.minutes = next.minutes % 60\n return formatTime(next)\n}\n\nexport default defineComponent({\n name: 'ElTimeSelect',\n components: { ElSelect, ElOption, ElIcon },\n model: {\n prop: 'value',\n event: 'change',\n },\n props: {\n modelValue: String,\n disabled: {\n type: Boolean,\n default: false,\n },\n editable: {\n type: Boolean,\n default: true,\n },\n clearable: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n default: 'default',\n validator: (value: string) =>\n !value \|\| ['large', 'default', 'small'].indexOf(value) !== -1,\n },\n placeholder: {\n type: String,\n default: '',\n },\n start: {\n type: String,\n default: '09:00',\n },\n end: {\n type: String,\n default: '18:00',\n },\n step: {\n type: String,\n default: '00:30',\n },\n minTime: {\n type: String,\n default: '',\n },\n maxTime: {\n type: String,\n default: '',\n },\n name: {\n type: String,\n default: '',\n },\n prefixIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: Clock,\n },\n clearIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: CircleClose,\n },\n },\n emits: ['change', 'blur', 'focus', 'update:modelValue'],\n setup(props) {\n // computed\n const select = ref(null)\n const value = computed(() => props.modelValue)\n const items = computed(() => {\n const result = []\n if (props.start && props.end && props.step) {\n let current = ~~props~~.~~start~~\n while (compareTime(current, ~~props~~.~~end~~) <= 0) {\n result.push({\n value: ~~current~~,\n disabled:\n compareTime(current, ~~props~~.~~minTime~~ \|\| '-1:-1') <= 0 \|\|\n compareTime(current, ~~props~~.~~maxTime~~ \|\| '100:100') >= 0,\n })\n current = nextTime(current, ~~props~~.~~step~~)\n }\n }\n return result\n })\n const blur = () => {\n select.value?.blur?.()\n }\n const focus = () => {\n select.value?.focus?.()\n }\n\n return {\n select,\n value,\n items,\n blur,\n focus,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElSelect","computed"],"mappings":"~~;;;;;;;;;AAmCA~~,~~cAAc~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~iBAAW~~,CAAC;;~~AAEtC~~,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,EAAE,~~MAAM~~,GAAG,~~EAAE~~;AACzC,EAAE,~~UAAU~~,~~OAAO~~,IAAI,CAAC,EAAE;;AAE1B,IAAI,MAAM,OAAO,GAAG,SAAS,MAAM,CAAC;;AAEpC,~~MAAM~~,~~KAAK~~;~~MACL~~,~~OAAO~~;~~KACR~~,~~CAAC~~;~~AACN~~;;AAEA,~~CAAC~~,~~CAAC~~;~~MACI~~,~~WAAW~~,~~GAAG~~,CAAC,~~KAAK,EAAE,KAAK,KAAK~~;~~EACpC~~,MAAM,~~MAAM,~~GAAG,SAAS~~;QAClB~~,~~MAAM,YAAY,~~CAAC,KAAK,CAAC,CAAC;QAC1B~~,QAAQ,SAAS,CAAC,OAAO,GAAG,MAAM~~;~~QAClC;~~MACF;WACK,CAAC,CAAC;;EAEX;EACA;AACF;AACA,EAAE,OAAO,CAAC,EAAE,IAAI,~~MAAM~~,~~GAAG~~,~~KAAK,~~CAAC,~~CAAC~~,EAAE,~~IAAI~~,CAAC,KAAK,CAAC,CAAC,~~GAAG,~~IAAI,CAAC,KAAK,CAAC~~;EAC1D;MACI~~,~~WAAW,~~CAAC,~~IAAI~~,~~EAAE~~,IAAI;~~EAC1B~~,~~MAAM~~,~~SAAS~~,~~GAAG,SAAS,CAAC,IAAI,~~EAAE;~~EAClC~~,~~MAAM~~,~~SAAS,~~GAAG,~~SAAS,CAAC,~~IAAI,~~EAAE;EAClC~~,~~MAAM~~,~~IAAI,GAAG~~;~~IACX~~,~~KAAK,EAAE;;GAER,~~CAAC;AACJ;AACA,EAAE,IAAI,CAAC,KAAK,cAAc,KAAK;EAC7B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,~~KAAK~~,CAAC,OAAO,GAAG,EAAE,CAAC~~;MACvC~~,CAAC,OAAO,~~GAAG~~,~~KAAK~~,~~OAAO~~,~~GAAG~~,~~EAAE,~~CAAC;~~EACjC~~;~~AACF;AACA~~,~~aAAeA~~,~~mBAAe~~;~~EAC5B~~,IAAI,EAAE~~,cAAc~~;~~EACpB~~,~~UAAU,~~EAAE,YAAEC,cAAQ,EAAE~~,QAAQ~~;~~EAChC~~,~~OAAO;IACL~~,~~IAAI,SAAS;IACb,~~KAAK,EAAE,QAAQ~~;;EAEjB~~,KAAK,EAAE;IACL,~~UAAU~~,EAAE,MAAM;IAClB,~~UAAU~~;MACR,IAAI,EAAE,OAAO;MACb,~~OAAO~~,EAAE,~~KAAK~~;~~AACpB;;AAEA~~,~~UAAU~~,EAAE,OAAO;~~MACb~~,~~OAAO~~,EAAE~~,IAAI~~;~~KACd;IACD;MACE~~,IAAI,EAAE;~~MACN~~,OAAO,EAAE~~,IAAI~~;;~~IAEf~~;~~MACE~~,IAAI,EAAE,MAAM;~~MACZ~~;~~MACA~~,~~SAAS~~,EAAE,~~CAAC~~;;~~IAEd~~;~~MACE~~,IAAI,EAAE;~~MACN~~,OAAO,EAAE,~~EAAE~~;;~~IAEb~~;MACE,IAAI,EAAE;MACN,OAAO,EAAE;;IAEX;MACE~~,IAAI~~;~~MACJ~~,OAAO,EAAE,~~OAAO;;QAEd,~~EAAE~~;UACA,EAAE,MAAM~~;;~~KAEb~~;~~aACQ~~;~~MACP~~,~~IAAI~~,EAAE;;~~KAEP~~;~~aACQ;MACP~~,IAAI,EAAE,~~MAAM~~;;~~KAEb~~;~~QACG~~,~~EAAE~~;~~MACJ~~,~~IAAI~~,~~EAAE,MAAM~~;;~~KAEb~~;~~cACS~~,~~EAAE~~;~~MACV~~,~~IAAI~~,~~EAAE~~,CAAC,~~MAAM~~,EAAE~~;;KAEhB~~;~~aACQ~~,~~EAAE~~;~~MACT~~,IAAI,~~EAAE~~,CAAC~~;;KAER;;OAEE~~,~~EAAE~~,CAAC~~;;IAEN~~,~~MAAM~~;~~UACA~~,~~KAAK,GAAGC~~;~~UACR~~,~~KAAK;;MAET~~,~~IAAI~~,MAAM~~;QACR~~,IAAI,~~OAAO,~~GAAG,KAAK,~~MAAM~~,CAAC;~~QAC1B~~,OAAO~~;;YAEH;YACA~~,UAAU,~~WAAW,~~CAAC,~~OAAO~~,~~EAAE~~,KAAK,~~QAAQ~~,IAAI~~;WACjD~~,CAAC,CAAC~~;;;OAGN~~;~~MACD~~,OAAO;KACR,EAAE;IACH,MAAM,IAAI,GAAG,MAAM;~~MACjB~~,~~IAAI~~,~~EAAE~~,~~EAAE~~,~~EAAE~~;~~MACV~~,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,KAAK;~~MACxB~~;~~UACI~~,~~KAAK~~,GAAG;~~UACR~~,EAAE,EAAE,EAAE,CAAC;SACR,GAAG,GAAG,GAAG,MAAM,CAAC,~~KAAK~~,SAAS,~~GAAG~~,KAAK~~,CAAC,GAAG,EAAE;;;YAGzC;;;UAGF~~;~~WACC;;;;;;;~~"}
1	+ {"version":3,"file":"time-select.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/time-select/src/time-select.vue"],"sourcesContent":["<template>\n <el-select\n ref=\"select\"\n :model-value=\"value\"\n :disabled=\"disabled\"\n :clearable=\"clearable\"\n :clear-icon=\"clearIcon\"\n :size=\"size\"\n :placeholder=\"placeholder\"\n default-first-option\n :filterable=\"editable\"\n @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n @change=\"(event) => $emit('change', event)\"\n @blur=\"(event) => $emit('blur', event)\"\n @focus=\"(event) => $emit('focus', event)\"\n >\n <el-option\n v-for=\"item in items\"\n :key=\"item.value\"\n :label=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n />\n <template #prefix>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </template>\n </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\ndayjs.extend(customParseFormat)\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n hours: number\n minutes: number\n}\n\nconst parseTime = (time: string): null \| Time => {\n const values = (time \|\| '').split(':')\n if (values.length >= 2) {\n let hours = parseInt(values[0], 10)\n const minutes = parseInt(values[1], 10)\n const timeUpper = time.toUpperCase()\n if (timeUpper.includes('AM') && hours === 12) {\n hours = 0\n } else if (timeUpper.includes('PM') && hours !== 12) {\n hours += 12\n }\n return {\n hours,\n minutes,\n }\n }\n return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n const value1 = parseTime(time1)\n const value2 = parseTime(time2)\n const minutes1 = value1.minutes + value1.hours * 60\n const minutes2 = value2.minutes + value2.hours * 60\n if (minutes1 === minutes2) {\n return 0\n }\n return minutes1 > minutes2 ? 1 : -1\n}\nconst padTime = (time: number \| string) => {\n return `${time}`.padStart(2, '0')\n}\nconst formatTime = (time: Time): string => {\n return `${padTime(time.hours)}:${padTime(time.minutes)}`\n}\nconst nextTime = (time: string, step: string): string => {\n const timeValue = parseTime(time)\n const stepValue = parseTime(step)\n const next = {\n hours: timeValue.hours,\n minutes: timeValue.minutes,\n }\n next.minutes += stepValue.minutes\n next.hours += stepValue.hours\n next.hours += Math.floor(next.minutes / 60)\n next.minutes = next.minutes % 60\n return formatTime(next)\n}\n\nexport default defineComponent({\n name: 'ElTimeSelect',\n components: { ElSelect, ElOption, ElIcon },\n model: {\n prop: 'value',\n event: 'change',\n },\n props: {\n format: {\n type: String,\n default: 'HH:mm',\n },\n modelValue: String,\n disabled: {\n type: Boolean,\n default: false,\n },\n editable: {\n type: Boolean,\n default: true,\n },\n clearable: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n default: 'default',\n validator: (value: string) =>\n !value \|\| ['large', 'default', 'small'].indexOf(value) !== -1,\n },\n placeholder: {\n type: String,\n default: '',\n },\n start: {\n type: String,\n default: '09:00',\n },\n end: {\n type: String,\n default: '18:00',\n },\n step: {\n type: String,\n default: '00:30',\n },\n minTime: {\n type: String,\n default: '',\n },\n maxTime: {\n type: String,\n default: '',\n },\n name: {\n type: String,\n default: '',\n },\n prefixIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: Clock,\n },\n clearIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: CircleClose,\n },\n },\n emits: ['change', 'blur', 'focus', 'update:modelValue'],\n setup(props) {\n // computed\n const select = ref(null)\n const value = computed(() => props.modelValue)\n const start = computed(() => {\n const time = parseTime(props.start)\n return formatTime(time)\n })\n const end = computed(() => {\n const time = parseTime(props.end)\n return formatTime(time)\n })\n const step = computed(() => {\n const time = parseTime(props.step)\n return formatTime(time)\n })\n const minTime = computed(() => {\n const time = parseTime(props.minTime)\n return time ? formatTime(time) : null\n })\n const maxTime = computed(() => {\n const time = parseTime(props.maxTime)\n return time ? formatTime(time) : null\n })\n const items = computed(() => {\n const result = []\n if (props.start && props.end && props.step) {\n let current = start.value\n let currentTime\n while (compareTime(current, end.value) <= 0) {\n currentTime = dayjs(current, 'HH:mm').format(props.format)\n result.push({\n value: currentTime,\n disabled:\n compareTime(current, minTime.value \|\| '-1:-1') <= 0 \|\|\n compareTime(current, maxTime.value \|\| '100:100') >= 0,\n })\n current = nextTime(current, step.value)\n }\n }\n return result\n })\n const blur = () => {\n select.value?.blur?.()\n }\n const focus = () => {\n select.value?.focus?.()\n }\n\n return {\n select,\n value,\n items,\n blur,\n focus,\n }\n },\n})\n</script>\n"],"names":["dayjs","customParseFormat","defineComponent","ElSelect","Clock","CircleClose","computed"],"mappings":";;;;;;;;;;;;;;;;AAqCAA,yBAAK,OAAO,CAACC,qCAAiB,CAAC,CAAC;;AAEhC,eAAe,GAAG,CAAC,SAAS;AAC5B,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACzC,EAAE,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE;;AAE1B,IAAI,MAAM,OAAO,GAAG,SAAS,MAAM,CAAC;;AAEpC,IAAI,IAAI;MACF,KAAK,GAAG;KACT,MAAM,IAAI;AACf;;AAEA,IAAI,OAAO;MACL,KAAK;MACL,OAAO;KACR,CAAC;;aAEO,CAAC;;MAER;QACE,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC1B;;QAEA;MACF;WACK,CAAC,CAAC;;EAEX;EACA;AACF;AACA,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE;EAClC;MACI,aAAa,CAAC,IAAI,KAAK;EAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,IAAI;EAC7C;MACI,WAAW,KAAK,EAAE;QAChB;EACN;EACA,UAAU,GAAG;AACf;AACA,IAAI,OAAO,YAAY,OAAO;GAC3B,CAAC;AACJ;AACA,EAAE,IAAI,CAAC,KAAK,cAAc,KAAK;EAC7B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;AAC9C;AACA,EAAE,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;EACxB;aACaC,mBAAe,CAAC;EAC7B,IAAI,EAAE;YACI,EAAE,YAAEC,cAAQ,EAAE;OACnB,EAAE;;IAEL,KAAK,EAAE,QAAQ;GAChB;EACD,KAAK,EAAE;IACL,MAAM,EAAE;MACN,IAAI,EAAE,MAAM;AAClB;;AAEA,IAAI,YAAY,MAAM;IAClB,QAAQ,EAAE;MACR,IAAI,EAAE,OAAO;MACb;KACD;IACD,QAAQ,EAAE;;MAER;KACD;aACQ,EAAE;MACT,IAAI,EAAE,OAAO;;KAEd;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;;KAEV;eACU,EAAE;MACX,IAAI,EAAE,MAAM;;KAEb;SACI;MACH,IAAI,EAAE,MAAM;;KAEb;OACE,EAAE;MACH,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE,OAAO;;IAElB;MACE,IAAI,EAAE;MACN,OAAO,EAAE;;IAEX;MACE;MACA,OAAO,EAAE,EAAE;;IAEb;MACE;MACA,OAAO,EAAE,EAAE;;IAEb;MACE,IAAI;MACJ,OAAO,EAAE,EAAE;;IAEb;MACE,IAAI,GAAG;MACP,OAAO,EAAEC;;IAEX;MACE,IAAI,GAAG;MACP,OAAO,EAAEC;;;OAGR,GAAG;OACH,CAAC,KAAK,EAAE;UACL,MAAM;IACZ;IACA,MAAM;MACJ,MAAM,IAAI,GAAG,UAAU,KAAK,CAAC,KAAK,CAAC,CAAC;MACpC,OAAO;KACR;IACD,MAAM,GAAG;MACP,MAAM,IAAI,GAAG,UAAU,KAAK,CAAC,GAAG,CAAC,CAAC;MAClC,OAAO,UAAU,CAAC;KACnB;;MAEC,MAAM,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;MACnC,OAAO;KACR,EAAE;IACH,MAAM,OAAO,GAAGC;MACd,MAAM,IAAI,GAAG,SAAS,MAAM,CAAC,OAAO,CAAC,CAAC;MACtC,OAAO,OAAO,UAAU,CAAC;MACzB,CAAC;UACG,OAAO,GAAGA,YAAQ;;MAEtB,WAAW,GAAG,WAAW;MACzB,CAAC;UACG,KAAK,GAAGA,YAAQ,CAAC;;MAErB,IAAI,KAAK,MAAM,IAAI,KAAK;QACtB,IAAI,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;QAC1B,eAAe,CAAC;;UAEd,WAAW,GAAGN,yBAAK,CAAC;UACpB,OAAO,IAAI,CAAC;8BACQ;;WAEnB,CAAC,CAAC;UACH,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,IAAI;SACjC;;MAEH,OAAO,MAAM,CAAC;MACd,CAAC;UACG,IAAI,GAAG,MAAM;UACb,EAAE,EAAE,EAAE,CAAC;SACR,GAAG,CAAC,EAAE,GAAG;;UAER,KAAK,GAAG,MAAM;UACd,EAAE,EAAE,EAAE,CAAC;YACL,CAAC,EAAE,SAAS,CAAC,KAAK;;;;WAInB;WACA;;MAEL;MACA;;;;;;"}

package/lib/components/time-select/src/time-select.vue_vue_type_template_id_5beb6389_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-select.vue_vue_type_template_id_5beb6389_lang.js","sources":["../../../../../../packages/components/time-select/src/time-select.vue?vue&type=template&id=5beb6389&lang.js"],"sourcesContent":["<template>\n <el-select\n ref=\"select\"\n :model-value=\"value\"\n :disabled=\"disabled\"\n :clearable=\"clearable\"\n :clear-icon=\"clearIcon\"\n :size=\"size\"\n :placeholder=\"placeholder\"\n default-first-option\n :filterable=\"editable\"\n @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n @change=\"(event) => $emit('change', event)\"\n @blur=\"(event) => $emit('blur', event)\"\n @focus=\"(event) => $emit('focus', event)\"\n >\n <el-option\n v-for=\"item in items\"\n :key=\"item.value\"\n :label=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n />\n <template #prefix>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </template>\n </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n hours: number\n minutes: number\n}\n\nconst parseTime = (time: string): null \| Time => {\n const values = (time \|\| '').split(':')\n if (values.length >= 2) {\n ~~const~~ hours = parseInt(values[0], 10)\n const minutes = parseInt(values[1], 10)\n return {\n hours,\n minutes,\n }\n }\n return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n const value1 = parseTime(time1)\n const value2 = parseTime(time2)\n const minutes1 = value1.minutes + value1.hours * 60\n const minutes2 = value2.minutes + value2.hours * 60\n if (minutes1 === minutes2) {\n return 0\n }\n return minutes1 > minutes2 ? 1 : -1\n}\nconst ~~formatTime~~ = (time: ~~Time):~~ string => {\n return `${time~~.hours~~ < 10 ? ~~`0${~~time~~.hours}`~~ : ~~time.hours}:$~~{\n ~~time.minutes~~ ~~< 10 ? `0$~~{time.~~minutes~~}~~` :~~ time.minutes\n }`\n}\nconst nextTime = (time: string, step: string): string => {\n const timeValue = parseTime(time)\n const stepValue = parseTime(step)\n const next = {\n hours: timeValue.hours,\n minutes: timeValue.minutes,\n }\n next.minutes += stepValue.minutes\n next.hours += stepValue.hours\n next.hours += Math.floor(next.minutes / 60)\n next.minutes = next.minutes % 60\n return formatTime(next)\n}\n\nexport default defineComponent({\n name: 'ElTimeSelect',\n components: { ElSelect, ElOption, ElIcon },\n model: {\n prop: 'value',\n event: 'change',\n },\n props: {\n modelValue: String,\n disabled: {\n type: Boolean,\n default: false,\n },\n editable: {\n type: Boolean,\n default: true,\n },\n clearable: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n default: 'default',\n validator: (value: string) =>\n !value \|\| ['large', 'default', 'small'].indexOf(value) !== -1,\n },\n placeholder: {\n type: String,\n default: '',\n },\n start: {\n type: String,\n default: '09:00',\n },\n end: {\n type: String,\n default: '18:00',\n },\n step: {\n type: String,\n default: '00:30',\n },\n minTime: {\n type: String,\n default: '',\n },\n maxTime: {\n type: String,\n default: '',\n },\n name: {\n type: String,\n default: '',\n },\n prefixIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: Clock,\n },\n clearIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: CircleClose,\n },\n },\n emits: ['change', 'blur', 'focus', 'update:modelValue'],\n setup(props) {\n // computed\n const select = ref(null)\n const value = computed(() => props.modelValue)\n const items = computed(() => {\n const result = []\n if (props.start && props.end && props.step) {\n let current = ~~props~~.~~start~~\n while (compareTime(current, ~~props~~.~~end~~) <= 0) {\n result.push({\n value: ~~current~~,\n disabled:\n compareTime(current, ~~props~~.~~minTime~~ \|\| '-1:-1') <= 0 \|\|\n compareTime(current, ~~props~~.~~maxTime~~ \|\| '100:100') >= 0,\n })\n current = nextTime(current, ~~props~~.~~step~~)\n }\n }\n return result\n })\n const blur = () => {\n select.value?.blur?.()\n }\n const focus = () => {\n select.value?.focus?.()\n }\n\n return {\n select,\n value,\n items,\n blur,\n focus,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;wBACE;IACE;IACC,eAAa,UAAK;IAClB;IACA,WAAW;IACX;IACA;IACA;IACD;IACC,UAAU;IACV,kDAAqB,KAAK,eAAU;IACpC,yDAAwB,gBAAgB;;IAExC;;;;;;;;;;;;;;;sBAGC;;;eACM,KAAK;UACV;;;;;;;;"}
1	+ {"version":3,"file":"time-select.vue_vue_type_template_id_5beb6389_lang.js","sources":["../../../../../../packages/components/time-select/src/time-select.vue?vue&type=template&id=5beb6389&lang.js"],"sourcesContent":["<template>\n <el-select\n ref=\"select\"\n :model-value=\"value\"\n :disabled=\"disabled\"\n :clearable=\"clearable\"\n :clear-icon=\"clearIcon\"\n :size=\"size\"\n :placeholder=\"placeholder\"\n default-first-option\n :filterable=\"editable\"\n @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n @change=\"(event) => $emit('change', event)\"\n @blur=\"(event) => $emit('blur', event)\"\n @focus=\"(event) => $emit('focus', event)\"\n >\n <el-option\n v-for=\"item in items\"\n :key=\"item.value\"\n :label=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n />\n <template #prefix>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </template>\n </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\ndayjs.extend(customParseFormat)\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n hours: number\n minutes: number\n}\n\nconst parseTime = (time: string): null \| Time => {\n const values = (time \|\| '').split(':')\n if (values.length >= 2) {\n let hours = parseInt(values[0], 10)\n const minutes = parseInt(values[1], 10)\n const timeUpper = time.toUpperCase()\n if (timeUpper.includes('AM') && hours === 12) {\n hours = 0\n } else if (timeUpper.includes('PM') && hours !== 12) {\n hours += 12\n }\n return {\n hours,\n minutes,\n }\n }\n return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n const value1 = parseTime(time1)\n const value2 = parseTime(time2)\n const minutes1 = value1.minutes + value1.hours * 60\n const minutes2 = value2.minutes + value2.hours * 60\n if (minutes1 === minutes2) {\n return 0\n }\n return minutes1 > minutes2 ? 1 : -1\n}\nconst padTime = (time: number \| string) => {\n return `${time}`.padStart(2, '0')\n}\nconst formatTime = (time: Time): string => {\n return `${padTime(time.hours)}:${padTime(time.minutes)}`\n}\nconst nextTime = (time: string, step: string): string => {\n const timeValue = parseTime(time)\n const stepValue = parseTime(step)\n const next = {\n hours: timeValue.hours,\n minutes: timeValue.minutes,\n }\n next.minutes += stepValue.minutes\n next.hours += stepValue.hours\n next.hours += Math.floor(next.minutes / 60)\n next.minutes = next.minutes % 60\n return formatTime(next)\n}\n\nexport default defineComponent({\n name: 'ElTimeSelect',\n components: { ElSelect, ElOption, ElIcon },\n model: {\n prop: 'value',\n event: 'change',\n },\n props: {\n format: {\n type: String,\n default: 'HH:mm',\n },\n modelValue: String,\n disabled: {\n type: Boolean,\n default: false,\n },\n editable: {\n type: Boolean,\n default: true,\n },\n clearable: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n default: 'default',\n validator: (value: string) =>\n !value \|\| ['large', 'default', 'small'].indexOf(value) !== -1,\n },\n placeholder: {\n type: String,\n default: '',\n },\n start: {\n type: String,\n default: '09:00',\n },\n end: {\n type: String,\n default: '18:00',\n },\n step: {\n type: String,\n default: '00:30',\n },\n minTime: {\n type: String,\n default: '',\n },\n maxTime: {\n type: String,\n default: '',\n },\n name: {\n type: String,\n default: '',\n },\n prefixIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: Clock,\n },\n clearIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: CircleClose,\n },\n },\n emits: ['change', 'blur', 'focus', 'update:modelValue'],\n setup(props) {\n // computed\n const select = ref(null)\n const value = computed(() => props.modelValue)\n const start = computed(() => {\n const time = parseTime(props.start)\n return formatTime(time)\n })\n const end = computed(() => {\n const time = parseTime(props.end)\n return formatTime(time)\n })\n const step = computed(() => {\n const time = parseTime(props.step)\n return formatTime(time)\n })\n const minTime = computed(() => {\n const time = parseTime(props.minTime)\n return time ? formatTime(time) : null\n })\n const maxTime = computed(() => {\n const time = parseTime(props.maxTime)\n return time ? formatTime(time) : null\n })\n const items = computed(() => {\n const result = []\n if (props.start && props.end && props.step) {\n let current = start.value\n let currentTime\n while (compareTime(current, end.value) <= 0) {\n currentTime = dayjs(current, 'HH:mm').format(props.format)\n result.push({\n value: currentTime,\n disabled:\n compareTime(current, minTime.value \|\| '-1:-1') <= 0 \|\|\n compareTime(current, maxTime.value \|\| '100:100') >= 0,\n })\n current = nextTime(current, step.value)\n }\n }\n return result\n })\n const blur = () => {\n select.value?.blur?.()\n }\n const focus = () => {\n select.value?.focus?.()\n }\n\n return {\n select,\n value,\n items,\n blur,\n focus,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;wBACE;IACE;IACC,eAAa,UAAK;IAClB;IACA,WAAW;IACX;IACA;IACA;IACD;IACC,UAAU;IACV,kDAAqB,KAAK,eAAU;IACpC,yDAAwB,gBAAgB;;IAExC;;;;;;;;;;;;;;;sBAGC;;;eACM,KAAK;UACV;;;;;;;;"}

package/lib/components/tooltip/index.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     };
     virtualRef: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").Measurable>, unknown, unknown, unknown, unknown>;
     virtualTriggering: import("../../utils/props").BuildPropReturn<BooleanConstructor, unknown, unknown, unknown, unknown>;
+    appendTo: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | HTMLElement>, string | (() => string) | undefined, unknown, unknown, unknown>;
     content: import("../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     rawContent: import("../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
     persistent: BooleanConstructor;
@@ -187,6 +188,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     trigger?: unknown;
     virtualRef?: unknown;
     virtualTriggering?: unknown;
+    appendTo?: unknown;
     content?: unknown;
     rawContent?: unknown;
     persistent?: unknown;
@@ -284,6 +286,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
+    appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     persistent: boolean;
     teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -370,6 +373,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
+    appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     persistent: boolean;
     teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -381,4 +385,5 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     showArrow: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 }>> & Record<string, any>;
 export * from './src/tooltip';
+export * from './src/tokens';
 export default ElTooltip;

package/lib/components/tooltip/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var withInstall = require('../../utils/with-install.js');
 require('./src/tooltip2.js');
 var tooltip = require('./src/tooltip.js');
+var tokens = require('./src/tokens.js');
 var tooltip_vue_vue_type_script_lang = require('./src/tooltip.vue_vue_type_script_lang.js');
 const ElTooltip = withInstall.withInstall(tooltip_vue_vue_type_script_lang["default"]);
@@ -12,6 +13,7 @@ const ElTooltip = withInstall.withInstall(tooltip_vue_vue_type_script_lang["defa
 exports.useTooltipContentProps = tooltip.useTooltipContentProps;
 exports.useTooltipProps = tooltip.useTooltipProps;
 exports.useTooltipTriggerProps = tooltip.useTooltipTriggerProps;
+exports.TOOLTIP_INJECTION_KEY = tokens.TOOLTIP_INJECTION_KEY;
 exports.ElTooltip = ElTooltip;
 exports["default"] = ElTooltip;
 //# sourceMappingURL=index.js.map

package/lib/components/tooltip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../packages/components/tooltip/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\nimport Tooltip from './src/tooltip.vue'\n\nexport const ElTooltip = withInstall(Tooltip)\nexport * from './src/tooltip'\nexport default ElTooltip\n"],"names":["withInstall","Tooltip"],"mappings":"~~;;;;;;;;;~~AAEY,MAAC,SAAS,GAAGA,uBAAW,CAACC,2CAAO~~;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../packages/components/tooltip/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\nimport Tooltip from './src/tooltip.vue'\n\nexport const ElTooltip = withInstall(Tooltip)\nexport * from './src/tooltip'\nexport * from './src/tokens'\nexport default ElTooltip\n"],"names":["withInstall","Tooltip"],"mappings":";;;;;;;;;;AAEY,MAAC,SAAS,GAAGA,uBAAW,CAACC,2CAAO;;;;;;;;;"}

package/lib/components/tooltip/src/content.vue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { nextTick } from 'vue';
 declare const _default: import("vue").DefineComponent<{
+    appendTo: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | HTMLElement>, string | (() => string) | undefined, unknown, unknown, unknown>;
     content: import("../../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     rawContent: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
     persistent: BooleanConstructor;
@@ -7,6 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     visible: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<boolean | null>, (() => null) | null | undefined, unknown, unknown, unknown>;
     transition: import("../../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     teleported: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
+    disabled: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
     style: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("vue").StyleValue>, string | import("vue").CSSProperties | (() => string) | (() => import("vue").CSSProperties) | (() => import("vue").StyleValue[]) | undefined, unknown, unknown, unknown>;
     className: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | {
         [x: string]: any;
@@ -500,7 +501,7 @@ declare const _default: import("vue").DefineComponent<{
             errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
+        $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<{
         style?: unknown;
@@ -621,15 +622,16 @@ declare const _default: import("vue").DefineComponent<{
         } | any)[])[])[])[])[])[])[])[])[])[])[])[]>;
         updatePopper: () => void;
     }> & {} & {} & import("vue").ComponentCustomProperties) | null>;
-    shouldRenderTeleport: import("vue").ComputedRef<boolean>;
-    shouldRenderPopperContent: import("vue").ComputedRef<boolean>;
-    shouldShowPopperContent: import("vue").ComputedRef<boolean>;
+    shouldRender: import("vue").ComputedRef<boolean>;
+    shouldShow: import("vue").ComputedRef<boolean>;
     open: import("vue").Ref<boolean>;
-    POPPER_CONTAINER_SELECTOR: string;
+    onAfterShow: () => void;
+    onBeforeEnter: () => void;
     onContentEnter: (event: unknown) => void;
     onContentLeave: (event: unknown) => void;
     onTransitionLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    appendTo?: unknown;
     content?: unknown;
     rawContent?: unknown;
     persistent?: unknown;
@@ -637,6 +639,7 @@ declare const _default: import("vue").DefineComponent<{
     visible?: unknown;
     transition?: unknown;
     teleported?: unknown;
+    disabled?: unknown;
     style?: unknown;
     className?: unknown;
     effect?: unknown;
@@ -657,6 +660,7 @@ declare const _default: import("vue").DefineComponent<{
     showAfter?: unknown;
     hideAfter?: unknown;
 } & {
+    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     style: import("vue").StyleValue;
     transition: string;
     offset: number;
@@ -726,6 +730,7 @@ declare const _default: import("vue").DefineComponent<{
     stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
+    appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     persistent: boolean;
     teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -733,6 +738,7 @@ declare const _default: import("vue").DefineComponent<{
     zIndex?: number | undefined;
     ariaLabel?: string | undefined;
 }>, {
+    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     style: import("vue").StyleValue;
     transition: string;
     offset: number;
@@ -802,6 +808,7 @@ declare const _default: import("vue").DefineComponent<{
     stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
+    appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     persistent: boolean;
     teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;