Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.lib.labs.VTimePicker.VTimePickerClock.mjs.map Maven / Gradle / Ivy
{"version":3,"file":"VTimePickerClock.mjs","names":["useBackgroundColor","useTextColor","computed","ref","toRef","watch","genericComponent","propsFactory","useRender","makeVTimePickerClockProps","allowedValues","Function","ampm","Boolean","color","String","disabled","displayedValue","double","format","type","default","val","max","Number","required","min","scrollable","readonly","rotate","step","modelValue","VTimePickerClock","name","props","emits","change","input","setup","_ref","emit","clockRef","innerClockRef","inputValue","undefined","isDragging","valueOnMouseDown","valueOnMouseUp","textColorClasses","textColorStyles","backgroundColorClasses","backgroundColorStyles","count","roundCount","value","degreesPerUnit","degrees","Math","PI","innerRadiusScale","genChildren","children","push","update","isAllowed","wheel","e","preventDefault","delta","sign","deltaY","isInner","handScale","getPosition","rotateRadians","x","sin","y","cos","angleToValue","angle","insideClick","round","getTransform","i","left","top","euclidean","p0","p1","dx","dy","sqrt","center","atan2","abs","setMouseDownValue","onDragMove","width","getBoundingClientRect","innerWidth","clientX","clientY","touches","coords","handAngle","checksCount","ceil","onMouseDown","window","addEventListener","onMouseUp","stopPropagation","removeEventListener","_createVNode","transform","map","isActive"],"sources":["../../../src/labs/VTimePicker/VTimePickerClock.tsx"],"sourcesContent":["// StylesthisValue\n// Styles\nimport './VTimePickerClock.sass'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\ninterface Point {\n x: number\n y: number\n}\n\nexport const makeVTimePickerClockProps = propsFactory({\n allowedValues: Function as PropType<(value: number) => boolean>,\n ampm: Boolean,\n color: String,\n disabled: Boolean,\n displayedValue: null,\n double: Boolean,\n format: {\n type: Function,\n default: (val: string | number) => val,\n },\n max: {\n type: Number,\n required: true,\n },\n min: {\n type: Number,\n required: true,\n },\n scrollable: Boolean,\n readonly: Boolean,\n rotate: {\n type: Number,\n default: 0,\n },\n step: {\n type: Number,\n default: 1,\n },\n modelValue: {\n type: Number,\n },\n}, 'VTimePickerClock')\n\nexport const VTimePickerClock = genericComponent()({\n name: 'VTimePickerClock',\n\n props: makeVTimePickerClockProps(),\n\n emits: {\n change: (val: number) => true,\n input: (val: number) => true,\n },\n\n setup (props, { emit }) {\n const clockRef = ref(null)\n const innerClockRef = ref(null)\n const inputValue = ref(undefined)\n const isDragging = ref(false)\n const valueOnMouseDown = ref(null as number | null)\n const valueOnMouseUp = ref(null as number | null)\n\n const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n\n const count = computed(() => props.max - props.min + 1)\n const roundCount = computed(() => props.double ? (count.value / 2) : count.value)\n const degreesPerUnit = computed(() => 360 / roundCount.value)\n const degrees = computed(() => degreesPerUnit.value * Math.PI / 180)\n const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue)\n const innerRadiusScale = computed(() => 0.62)\n\n const genChildren = computed(() => {\n const children = []\n for (let value = props.min; value <= props.max; value = value + props.step) {\n children.push(value)\n }\n return children\n })\n\n watch(() => props.modelValue, val => {\n inputValue.value = val\n })\n\n function update (value: number) {\n if (inputValue.value !== value) {\n inputValue.value = value\n }\n emit('input', value)\n }\n\n function isAllowed (value: number) {\n return !props.allowedValues || props.allowedValues(value)\n }\n\n function wheel (e: WheelEvent) {\n if (!props.scrollable || props.disabled) return\n\n e.preventDefault()\n\n const delta = Math.sign(-e.deltaY || 1)\n let value = displayedValue.value\n do {\n value = value + delta\n value = (value - props.min + count.value) % count.value + props.min\n } while (!isAllowed(value) && value !== displayedValue.value)\n\n if (value !== props.displayedValue) {\n update(value)\n }\n }\n\n function isInner (value: number) {\n return props.double && (value - props.min >= roundCount.value)\n }\n\n function handScale (value: number) {\n return isInner(value) ? innerRadiusScale.value : 1\n }\n\n function getPosition (value: number) {\n const rotateRadians = props.rotate * Math.PI / 180\n return {\n x: Math.sin((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n y: -Math.cos((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n }\n }\n\n function angleToValue (angle: number, insideClick: boolean): number {\n const value = (\n Math.round(angle / degreesPerUnit.value) +\n (insideClick ? roundCount.value : 0)\n ) % count.value + props.min\n\n // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock\n if (angle < (360 - degreesPerUnit.value / 2)) return value\n\n return insideClick ? props.max - roundCount.value + 1 : props.min\n }\n\n function getTransform (i: number) {\n const { x, y } = getPosition(i)\n return {\n left: `${50 + x * 50}%`,\n top: `${50 + y * 50}%`,\n }\n }\n\n function euclidean (p0: Point, p1: Point) {\n const dx = p1.x - p0.x\n const dy = p1.y - p0.y\n\n return Math.sqrt(dx * dx + dy * dy)\n }\n\n function angle (center: Point, p1: Point) {\n const value = 2 * Math.atan2(p1.y - center.y - euclidean(center, p1), p1.x - center.x)\n return Math.abs(value * 180 / Math.PI)\n }\n\n function setMouseDownValue (value: number) {\n if (valueOnMouseDown.value === null) {\n valueOnMouseDown.value = value\n }\n\n valueOnMouseUp.value = value\n update(value)\n }\n\n function onDragMove (e: MouseEvent | TouchEvent) {\n e.preventDefault()\n if ((!isDragging.value && e.type !== 'click') || !clockRef.value) return\n const { width, top, left } = clockRef.value?.getBoundingClientRect()\n const { width: innerWidth }: DOMRect = innerClockRef.value?.getBoundingClientRect() ?? { width: 0 } as DOMRect\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e\n const center = { x: width / 2, y: -width / 2 }\n const coords = { x: clientX - left, y: top - clientY }\n const handAngle = Math.round(angle(center, coords) - props.rotate + 360) % 360\n const insideClick = props.double && euclidean(center, coords) < (innerWidth as number + innerWidth * innerRadiusScale.value) / 4\n const checksCount = Math.ceil(15 / degreesPerUnit.value)\n let value\n\n for (let i = 0; i < checksCount; i++) {\n value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick)\n if (isAllowed(value)) return setMouseDownValue(value)\n\n value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick)\n if (isAllowed(value)) return setMouseDownValue(value)\n }\n }\n\n function onMouseDown (e: MouseEvent | TouchEvent) {\n if (props.disabled) return\n\n e.preventDefault()\n\n window.addEventListener('mousemove', onDragMove)\n window.addEventListener('touchmove', onDragMove)\n window.addEventListener('mouseup', onMouseUp)\n window.addEventListener('touchend', onMouseUp)\n valueOnMouseDown.value = null\n valueOnMouseUp.value = null\n isDragging.value = true\n onDragMove(e)\n }\n\n function onMouseUp (e: MouseEvent | TouchEvent) {\n e.stopPropagation()\n window.removeEventListener('mousemove', onDragMove)\n window.removeEventListener('touchmove', onDragMove)\n window.removeEventListener('mouseup', onMouseUp)\n window.removeEventListener('touchend', onMouseUp)\n\n isDragging.value = false\n if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {\n emit('change', valueOnMouseUp.value)\n }\n }\n\n useRender(() => {\n return (\n \n \n
\n\n {\n genChildren.value.map(value => {\n const isActive = value === displayedValue.value\n\n return (\n
\n { props.format(value) } \n 