UNPKG

@extclp/vexip-ui

Version:

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

1 lines 12.5 kB
{"version":3,"file":"time-wheel.vue2.mjs","sources":["../../../components/date-picker/time-wheel.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Wheel } from '@/components/wheel'\r\n\r\nimport { ref, watch } from 'vue'\r\n\r\nimport { useNameHelper } from '@vexip-ui/config'\r\nimport { USE_TOUCH, doubleDigits, range } from '@vexip-ui/utils'\r\n\r\nimport type { WheelExposed } from '@/components/wheel'\r\nimport type { PropType } from 'vue'\r\nimport type { DisabledTime, TimeType, TimeWheelSlots } from './symbol'\r\n\r\ndefineOptions({ name: 'TimeWheel' })\r\n\r\nconst props = defineProps({\r\n noArrow: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hour: {\r\n type: Number,\r\n default: 0,\r\n validator: (value: number) => value >= 0 && value <= 23,\r\n },\r\n minute: {\r\n type: Number,\r\n default: 0,\r\n validator: (value: number) => value >= 0 && value <= 59,\r\n },\r\n second: {\r\n type: Number,\r\n default: 0,\r\n validator: (value: number) => value >= 0 && value <= 59,\r\n },\r\n candidate: {\r\n default: 2 as 0 | 1 | 2 | 3,\r\n validator: (value: number) => [0, 1, 2, 3].includes(value),\r\n },\r\n steps: {\r\n type: Array as PropType<number[]>,\r\n default: () => [1, 1, 1],\r\n validator: (value: [number, number, number]) => {\r\n if (value[0] && 24 % value[0] !== 0) {\r\n return false\r\n }\r\n\r\n for (let i = 1; i < 3; ++i) {\r\n if (value[i] && 60 % value[i] !== 0) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n },\r\n },\r\n pointer: {\r\n type: Boolean,\r\n default: USE_TOUCH,\r\n },\r\n disabledTime: {\r\n type: Object as PropType<DisabledTime>,\r\n default: () => ({}),\r\n },\r\n noTransition: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n})\r\n\r\nconst emit = defineEmits(['change', 'toggle-col', 'update:hour', 'update:minute', 'update:second'])\r\n\r\ndefineSlots<TimeWheelSlots>()\r\n\r\nconst nh = useNameHelper('time-picker')\r\n\r\nconst currentHour = ref(props.hour)\r\nconst currentMinute = ref(props.minute)\r\nconst currentSecond = ref(props.second)\r\nconst hourRange = ref<number[]>([])\r\nconst minuteRange = ref<number[]>([])\r\nconst secondRange = ref<number[]>([])\r\n\r\nconst hourWheel = ref<WheelExposed>()\r\nconst minuteWheel = ref<WheelExposed>()\r\nconst secondWheel = ref<WheelExposed>()\r\n\r\nwatch(() => props.steps, updateTimeRange, { immediate: true })\r\nwatch(\r\n () => props.hour,\r\n value => {\r\n currentHour.value = value\r\n },\r\n)\r\nwatch(\r\n () => props.minute,\r\n value => {\r\n currentMinute.value = value\r\n },\r\n)\r\nwatch(\r\n () => props.second,\r\n value => {\r\n currentSecond.value = value\r\n },\r\n)\r\nwatch(currentHour, value => {\r\n emit('update:hour', value)\r\n emit('change', 'hour', value)\r\n})\r\nwatch(currentMinute, value => {\r\n emit('update:minute', value)\r\n emit('change', 'minute', value)\r\n})\r\nwatch(currentSecond, value => {\r\n emit('update:second', value)\r\n emit('change', 'second', value)\r\n})\r\n\r\ndefineExpose({ refreshWheel })\r\n\r\nfunction isHourDisabled(hour: number) {\r\n return typeof props.disabledTime.hour === 'function' && props.disabledTime.hour(hour)\r\n}\r\n\r\nfunction isMinuteDisabled(minute: number) {\r\n return (\r\n typeof props.disabledTime.minute === 'function' &&\r\n props.disabledTime.minute(currentHour.value, minute)\r\n )\r\n}\r\n\r\nfunction isSecondDisabled(second: number) {\r\n return (\r\n typeof props.disabledTime.second === 'function' &&\r\n props.disabledTime.second(currentHour.value, currentMinute.value, second)\r\n )\r\n}\r\n\r\nfunction updateTimeRange() {\r\n const [hourStep = 1, minuteStep = 1, secondStep = 1] = props.steps\r\n\r\n hourRange.value = range(24 / hourStep, 0, hourStep)\r\n minuteRange.value = range(60 / minuteStep, 0, minuteStep)\r\n secondRange.value = range(60 / secondStep, 0, secondStep)\r\n}\r\n\r\nfunction handleToggleColumn(type: TimeType) {\r\n emit('toggle-col', type)\r\n}\r\n\r\nfunction refreshWheel() {\r\n ;[hourWheel.value, minuteWheel.value, secondWheel.value].forEach(wheel => {\r\n wheel?.refreshScroll()\r\n })\r\n}\r\n</script>\r\n\r\n<template>\r\n <div :class=\"nh.be('wheel')\">\r\n <Wheel\r\n ref=\"hourWheel\"\r\n v-model:value=\"currentHour\"\r\n inherit\r\n :class=\"nh.be('hour-wheel')\"\r\n :pointer=\"pointer\"\r\n :arrow=\"!noArrow\"\r\n :candidate=\"candidate\"\r\n :options=\"hourRange\"\r\n tabindex=\"-1\"\r\n :no-transition=\"noTransition\"\r\n @mouseenter=\"handleToggleColumn('hour')\"\r\n @touchstart=\"handleToggleColumn('hour')\"\r\n @keydown.stop\r\n @item-click=\"currentHour = $event\"\r\n >\r\n <template #default=\"{ option, index }\">\r\n <span\r\n :class=\"[\r\n nh.be('option'),\r\n nh.be('hour'),\r\n isHourDisabled(option.value as number) && nh.bem('option', 'disabled')\r\n ]\"\r\n >\r\n <slot name=\"hour\" :option=\"option\" :index=\"index\">\r\n {{ doubleDigits(option.value as number) }}\r\n </slot>\r\n </span>\r\n </template>\r\n </Wheel>\r\n <Wheel\r\n ref=\"minuteWheel\"\r\n v-model:value=\"currentMinute\"\r\n inherit\r\n :class=\"nh.be('minute-wheel')\"\r\n :pointer=\"pointer\"\r\n :arrow=\"!noArrow\"\r\n :candidate=\"candidate\"\r\n :options=\"minuteRange\"\r\n tabindex=\"-1\"\r\n :no-transition=\"noTransition\"\r\n @mouseenter=\"handleToggleColumn('minute')\"\r\n @touchstart=\"handleToggleColumn('minute')\"\r\n @keydown.stop\r\n @item-click=\"currentMinute = $event\"\r\n >\r\n <template #default=\"{ option, index }\">\r\n <span\r\n :class=\"[\r\n nh.be('option'),\r\n nh.be('minute'),\r\n isMinuteDisabled(option.value as number) && nh.bem('option', 'disabled')\r\n ]\"\r\n >\r\n <slot name=\"minute\" :option=\"option\" :index=\"index\">\r\n {{ doubleDigits(option.value as number) }}\r\n </slot>\r\n </span>\r\n </template>\r\n </Wheel>\r\n <Wheel\r\n ref=\"secondWheel\"\r\n v-model:value=\"currentSecond\"\r\n inherit\r\n :class=\"nh.be('second-wheel')\"\r\n :pointer=\"pointer\"\r\n :arrow=\"!noArrow\"\r\n :candidate=\"candidate\"\r\n :options=\"secondRange\"\r\n tabindex=\"-1\"\r\n :no-transition=\"noTransition\"\r\n @mouseenter=\"handleToggleColumn('second')\"\r\n @touchstart=\"handleToggleColumn('second')\"\r\n @keydown.stop\r\n @item-click=\"currentSecond = $event\"\r\n >\r\n <template #default=\"{ option, index }\">\r\n <span\r\n :class=\"[\r\n nh.be('option'),\r\n nh.be('second'),\r\n isSecondDisabled(option.value as number) && nh.bem('option', 'disabled')\r\n ]\"\r\n >\r\n <slot name=\"second\" :option=\"option\" :index=\"index\">\r\n {{ doubleDigits(option.value as number) }}\r\n </slot>\r\n </span>\r\n </template>\r\n </Wheel>\r\n </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","currentHour","ref","currentMinute","currentSecond","hourRange","minuteRange","secondRange","hourWheel","minuteWheel","secondWheel","watch","updateTimeRange","value","__expose","refreshWheel","isHourDisabled","hour","isMinuteDisabled","minute","isSecondDisabled","second","hourStep","minuteStep","secondStep","range","handleToggleColumn","type","wheel","_createElementBlock","_normalizeClass","_unref","_createVNode","Wheel","$event","_cache","_withCtx","option","index","_createElementVNode","_renderSlot","_ctx","doubleDigits"],"mappings":"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"}