element-plus
Version:
A Component Library for Vue 3
1 lines • 17.4 kB
Source Map (JSON)
{"version":3,"file":"basic-time-spinner.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"],"sourcesContent":["<template>\n <div class=\"el-time-spinner\" :class=\"{ 'has-seconds': showSeconds }\">\n <template v-if=\"!arrowControl\">\n <el-scrollbar\n v-for=\"item in spinnerItems\"\n :key=\"item\"\n :ref=\"(scollbar) => setRef(scollbar, item)\"\n class=\"el-time-spinner__wrapper\"\n wrap-style=\"max-height: inherit;\"\n view-class=\"el-time-spinner__list\"\n noresize\n tag=\"ul\"\n @mouseenter=\"emitSelectRange(item)\"\n @mousemove=\"adjustCurrentSpinner(item)\"\n >\n <li\n v-for=\"(disabled, key) in listMap[item].value\"\n :key=\"key\"\n class=\"el-time-spinner__item\"\n :class=\"{ active: key === timePartsMap[item].value, disabled }\"\n @click=\"handleClick(item, { value: key, disabled })\"\n >\n <template v-if=\"item === 'hours'\">\n {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n }}{{ getAmPmFlag(key) }}\n </template>\n <template v-else>\n {{ ('0' + key).slice(-2) }}\n </template>\n </li>\n </el-scrollbar>\n </template>\n <template v-if=\"arrowControl\">\n <div\n v-for=\"item in spinnerItems\"\n :key=\"item\"\n class=\"el-time-spinner__wrapper is-arrow\"\n @mouseenter=\"emitSelectRange(item)\"\n >\n <el-icon\n v-repeat-click=\"onDecreaseClick\"\n class=\"el-time-spinner__arrow arrow-up\"\n >\n <arrow-up />\n </el-icon>\n <el-icon\n v-repeat-click=\"onIncreaseClick\"\n class=\"el-time-spinner__arrow arrow-down\"\n >\n <arrow-down />\n </el-icon>\n <ul class=\"el-time-spinner__list\">\n <li\n v-for=\"(time, key) in arrowListMap[item].value\"\n :key=\"key\"\n class=\"el-time-spinner__item\"\n :class=\"{\n active: time === timePartsMap[item].value,\n disabled: listMap[item].value[time],\n }\"\n >\n <template v-if=\"typeof time === 'number'\">\n <template v-if=\"item === 'hours'\">\n {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n }}{{ getAmPmFlag(time) }}\n </template>\n <template v-else>\n {{ ('0' + time).slice(-2) }}\n </template>\n </template>\n </li>\n </ul>\n </div>\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, nextTick, computed, onMounted, watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { RepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowUp, ArrowDown } from '@element-plus/icons-vue'\nimport { getTimeLists } from './useTimePicker'\n\nimport type { PropType, Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { Nullable } from '@element-plus/utils'\n\nexport default defineComponent({\n directives: {\n repeatClick: RepeatClick,\n },\n\n components: {\n ElScrollbar,\n ElIcon,\n ArrowUp,\n ArrowDown,\n },\n\n props: {\n role: {\n type: String,\n required: true,\n },\n spinnerDate: {\n type: Object as PropType<Dayjs>,\n required: true,\n },\n showSeconds: {\n type: Boolean,\n default: true,\n },\n arrowControl: Boolean,\n amPmMode: {\n type: String,\n default: '', // 'a': am/pm; 'A': AM/PM\n },\n disabledHours: {\n type: Function,\n },\n disabledMinutes: {\n type: Function,\n },\n disabledSeconds: {\n type: Function,\n },\n },\n\n emits: ['change', 'select-range', 'set-option'],\n\n setup(props, ctx) {\n // data\n let isScrolling = false\n const debouncedResetScroll = debounce((type) => {\n isScrolling = false\n adjustCurrentSpinner(type)\n }, 200)\n const currentScrollbar = ref(null)\n const listHoursRef: Ref<Nullable<HTMLElement>> = ref(null)\n const listMinutesRef: Ref<Nullable<HTMLElement>> = ref(null)\n const listSecondsRef: Ref<Nullable<HTMLElement>> = ref(null)\n const listRefsMap = {\n hours: listHoursRef,\n minutes: listMinutesRef,\n seconds: listSecondsRef,\n }\n\n // computed\n const spinnerItems = computed(() => {\n const arr = ['hours', 'minutes', 'seconds']\n return props.showSeconds ? arr : arr.slice(0, 2)\n })\n const hours = computed(() => {\n return props.spinnerDate.hour()\n })\n const minutes = computed(() => {\n return props.spinnerDate.minute()\n })\n const seconds = computed(() => {\n return props.spinnerDate.second()\n })\n const timePartsMap = computed(() => ({\n hours,\n minutes,\n seconds,\n }))\n const hoursList = computed(() => {\n return getHoursList(props.role)\n })\n const minutesList = computed(() => {\n return getMinutesList(hours.value, props.role)\n })\n const secondsList = computed(() => {\n return getSecondsList(hours.value, minutes.value, props.role)\n })\n const listMap = computed(() => ({\n hours: hoursList,\n minutes: minutesList,\n seconds: secondsList,\n }))\n const arrowHourList = computed(() => {\n const hour = hours.value\n return [\n hour > 0 ? hour - 1 : undefined,\n hour,\n hour < 23 ? hour + 1 : undefined,\n ]\n })\n const arrowMinuteList = computed(() => {\n const minute = minutes.value\n return [\n minute > 0 ? minute - 1 : undefined,\n minute,\n minute < 59 ? minute + 1 : undefined,\n ]\n })\n const arrowSecondList = computed(() => {\n const second = seconds.value\n return [\n second > 0 ? second - 1 : undefined,\n second,\n second < 59 ? second + 1 : undefined,\n ]\n })\n const arrowListMap = computed(() => ({\n hours: arrowHourList,\n minutes: arrowMinuteList,\n seconds: arrowSecondList,\n }))\n const getAmPmFlag = (hour) => {\n const shouldShowAmPm = !!props.amPmMode\n if (!shouldShowAmPm) return ''\n const isCapital = props.amPmMode === 'A'\n // todo locale\n let content = hour < 12 ? ' am' : ' pm'\n if (isCapital) content = content.toUpperCase()\n return content\n }\n\n const emitSelectRange = (type) => {\n if (type === 'hours') {\n ctx.emit('select-range', 0, 2)\n } else if (type === 'minutes') {\n ctx.emit('select-range', 3, 5)\n } else if (type === 'seconds') {\n ctx.emit('select-range', 6, 8)\n }\n currentScrollbar.value = type\n }\n\n const adjustCurrentSpinner = (type) => {\n adjustSpinner(type, timePartsMap.value[type].value)\n }\n\n // NOTE: used by datetime / date-range panel\n // renamed from adjustScrollTop\n // should try to refactory it\n const adjustSpinners = () => {\n adjustCurrentSpinner('hours')\n adjustCurrentSpinner('minutes')\n adjustCurrentSpinner('seconds')\n }\n\n const adjustSpinner = (type, value) => {\n if (props.arrowControl) return\n const el = listRefsMap[type]\n if (el && el.$el) {\n el.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(\n 0,\n value * typeItemHeight(type)\n )\n }\n }\n\n const typeItemHeight = (type) => {\n const el = listRefsMap[type]\n return el.$el.querySelector('li').offsetHeight\n }\n\n const onIncreaseClick = () => {\n scrollDown(1)\n }\n\n const onDecreaseClick = () => {\n scrollDown(-1)\n }\n\n const scrollDown = (step) => {\n if (!currentScrollbar.value) {\n emitSelectRange('hours')\n }\n\n const label = currentScrollbar.value\n let now = timePartsMap.value[label].value\n const total = currentScrollbar.value === 'hours' ? 24 : 60\n now = (now + step + total) % total\n\n modifyDateField(label, now)\n adjustSpinner(label, now)\n nextTick(() => emitSelectRange(currentScrollbar.value))\n }\n\n const modifyDateField = (type, value) => {\n const list = listMap.value[type].value\n const isDisabled = list[value]\n if (isDisabled) return\n switch (type) {\n case 'hours':\n ctx.emit(\n 'change',\n props.spinnerDate\n .hour(value)\n .minute(minutes.value)\n .second(seconds.value)\n )\n break\n case 'minutes':\n ctx.emit(\n 'change',\n props.spinnerDate\n .hour(hours.value)\n .minute(value)\n .second(seconds.value)\n )\n break\n case 'seconds':\n ctx.emit(\n 'change',\n props.spinnerDate\n .hour(hours.value)\n .minute(minutes.value)\n .second(value)\n )\n break\n }\n }\n\n const handleClick = (type, { value, disabled }) => {\n if (!disabled) {\n modifyDateField(type, value)\n emitSelectRange(type)\n adjustSpinner(type, value)\n }\n }\n\n const handleScroll = (type) => {\n isScrolling = true\n debouncedResetScroll(type)\n const value = Math.min(\n Math.round(\n (listRefsMap[type].$el.querySelector('.el-scrollbar__wrap')\n .scrollTop -\n (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n 3) /\n typeItemHeight(type)\n ),\n type === 'hours' ? 23 : 59\n )\n modifyDateField(type, value)\n }\n\n const scrollBarHeight = (type) => {\n return listRefsMap[type].$el.offsetHeight\n }\n\n const bindScrollEvent = () => {\n const bindFuntion = (type) => {\n if (listRefsMap[type] && listRefsMap[type].$el) {\n listRefsMap[type].$el.querySelector('.el-scrollbar__wrap').onscroll =\n () => {\n // TODO: scroll is emitted when set scrollTop programatically\n // should find better solutions in the future!\n handleScroll(type)\n }\n }\n }\n bindFuntion('hours')\n bindFuntion('minutes')\n bindFuntion('seconds')\n }\n\n onMounted(() => {\n nextTick(() => {\n !props.arrowControl && bindScrollEvent()\n adjustSpinners()\n // set selection on the first hour part\n if (props.role === 'start') emitSelectRange('hours')\n })\n })\n\n const setRef = (scrollbar, type) => {\n listRefsMap[type] = scrollbar\n }\n\n ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown])\n ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\n const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n props.disabledHours,\n props.disabledMinutes,\n props.disabledSeconds\n )\n\n watch(\n () => props.spinnerDate,\n () => {\n if (isScrolling) return\n adjustSpinners()\n }\n )\n\n return {\n setRef,\n spinnerItems,\n currentScrollbar,\n hours,\n minutes,\n seconds,\n hoursList,\n minutesList,\n arrowHourList,\n arrowMinuteList,\n arrowSecondList,\n getAmPmFlag,\n emitSelectRange,\n adjustCurrentSpinner,\n typeItemHeight,\n listHoursRef,\n listMinutesRef,\n listSecondsRef,\n onIncreaseClick,\n onDecreaseClick,\n handleClick,\n secondsList,\n timePartsMap,\n arrowListMap,\n listMap,\n }\n },\n})\n</script>\n"],"names":["_openBlock","_Fragment","_createBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_withCtx"],"mappings":"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"}