@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RangeField/RangeSlider/types.ts

@@ -0,0 +1,15 @@
+import { type MaybeRef } from 'vue'
+
+export interface Range {
+	selectedMin: MaybeRef<number>
+	selectedMax: MaybeRef<number>
+	rangeMin: MaybeRef<number>
+	rangeMax: MaybeRef<number>
+	step: MaybeRef<number>
+}
+
+export interface PropsStyle {
+	'thumb-color'?: string
+	'track-color'?: string
+	'track-fill-color'?: string
+}

package/src/components/RangeField/RangeSlider/useMouseSlide.ts

@@ -0,0 +1,109 @@
+import { onMounted, ref, toValue, type MaybeRef } from 'vue'
+
+/**
+ * Custom hook to handle mouse dragging functionality for a slider component.
+ *
+ * @param track - The track element of the slider.
+ * @param currentValue - The current range value of the slider.
+ * @param rangeStart - The minimal value of the slider range.
+ * @param rangeEnd - The maximal value of the slider range.
+ * @param step - The step value for the slider.
+ * @param minSelectableValue - The minimum currently selectable value for the slider.
+ * @param maxSelectableValue - The maximum currently selectable value for the slider.
+ * @param callback - The callback function to be called with the new value when the slider is dragged.
+ *
+ * @returns An object containing the `startDrag` function to initiate the dragging.
+ */
+export default function useMouseSlide(
+	thumb: MaybeRef<HTMLElement>,
+	track: MaybeRef<HTMLElement>,
+	currentValue: Readonly<MaybeRef<number>>,
+	rangeStart: MaybeRef<number>,
+	rangeEnd: MaybeRef<number>,
+	step: MaybeRef<number>,
+	minSelectableValue: MaybeRef<number>,
+	maxSelectableValue: MaybeRef<number>,
+	callback: (value: number) => void,
+) {
+	const inProgress = ref(false)
+	let effectedChange = 0
+	let startX: null | number = null
+
+	onMounted(() => {
+		toValue(thumb).addEventListener('mousedown', startDrag)
+		toValue(thumb).addEventListener('touchstart', startDrag)
+	})
+
+	function startDrag() {
+		inProgress.value = true
+		document.addEventListener('mousemove', drag)
+		document.addEventListener('mouseup', stopDrag)
+
+		document.addEventListener('touchmove', drag)
+		document.addEventListener('touchend', stopDrag)
+		document.addEventListener('touchcancel', stopDrag)
+	}
+
+	function stopDrag() {
+		document.removeEventListener('mousemove', drag)
+		document.removeEventListener('mouseup', stopDrag)
+
+		document.removeEventListener('touchmove', drag)
+		document.removeEventListener('touchend', stopDrag)
+		document.removeEventListener('touchcancel', stopDrag)
+
+		effectedChange = 0
+		startX = null
+
+		// avoid click on track after dragging
+		setTimeout(() => {
+			inProgress.value = false
+		}, 100)
+	}
+
+	function drag(event: MouseEvent | TouchEvent) {
+		event.stopPropagation()
+		const pointerPositionX = ('touches' in event) ? event.touches[0].clientX : event.clientX
+		if (startX === null) {
+			startX = pointerPositionX
+			return
+		}
+		const curStep = toValue(step)
+		const curValue = Math.round(toValue(currentValue) / curStep) * curStep
+
+		const trackRect = toValue(track).getBoundingClientRect()
+		const trackWidth = trackRect.width
+		const dx = pointerPositionX - startX
+
+		const percentChange = dx * 100 / trackWidth
+		const percentStep = curStep * 100 / (toValue(rangeEnd) - toValue(rangeStart))
+		const stepsChange = Math.round(percentChange / percentStep)
+
+		const theoreticalTotalChange = stepsChange * curStep
+		const theoreticalCurrentChange = theoreticalTotalChange - effectedChange
+		const theoreticalNewValue = curValue + theoreticalCurrentChange
+
+		const clampedNewValue = clamp(
+			toValue(minSelectableValue),
+			theoreticalNewValue,
+			toValue(maxSelectableValue),
+		)
+
+		const currentChange = clampedNewValue - curValue
+
+		if (currentChange === 0) {
+			return
+		}
+
+		effectedChange += currentChange
+		callback(clampedNewValue)
+	}
+
+	return {
+		inProgress,
+	}
+}
+
+function clamp(min: number, value: number, max: number) {
+	return Math.max(min, Math.min(value, max))
+}

package/src/components/RangeField/RangeSlider/useRangeSlider.ts

@@ -0,0 +1,126 @@
+import { ref, watch, toValue, type MaybeRef } from 'vue'
+
+/**
+ * Handle the incoming values for a range slider.
+ *
+ * @param min The minimum value of the range.
+ * @param max The maximum value of the range.
+ * @param step The step value for the slider.
+ * @param value {[number, number]} The current value of the slider.
+ * @returns An reactive object containing the selected min and max values, the range min and max values, and the step value.
+ */
+export default function useRangeSlider(
+	min: MaybeRef<number | string>,
+	max: MaybeRef<number | string>,
+	step: MaybeRef<number | string>,
+	value: MaybeRef<Array<number | string>>,
+) {
+	if (toValue(min) > toValue(max)) {
+		[min, max] = [max, min]
+	}
+
+	const range = {
+		selectedMin: ref(Number(toValue(min))),
+		selectedMax: ref(Number(toValue(max))),
+		rangeMin: ref(Number(toValue(min))),
+		rangeMax: ref(Number(toValue(max))),
+		step: ref(Number(toValue(step))),
+	}
+
+	// if min change, the other values must be coherent
+	watch(
+		() => toValue(min),
+		(newVal) => {
+			newVal = Number(newVal)
+
+			if (isNaN(newVal) || !isFinite(newVal)) {
+				return
+			}
+			if (newVal > range.rangeMax.value) {
+				return
+			}
+			if (range.selectedMin.value < newVal) {
+				range.selectedMin.value = newVal
+			}
+			if (range.selectedMax.value < newVal) {
+				range.selectedMax.value = newVal
+			}
+
+			range.rangeMin.value = newVal
+		},
+	)
+
+	// if max change, the other values must be coherent
+	watch(
+		() => toValue(max),
+		(newVal) => {
+			newVal = Number(newVal)
+
+			if (isNaN(newVal) || !isFinite(newVal)) {
+				return
+			}
+			if (newVal < range.rangeMin.value) {
+				return
+			}
+			if (range.selectedMin.value > newVal) {
+				range.selectedMin.value = newVal
+			}
+			if (range.selectedMax.value > newVal) {
+				range.selectedMax.value = newVal
+			}
+
+			range.rangeMax.value = newVal
+		},
+	)
+
+	watch(
+		() => toValue(step),
+		(newVal) => {
+			newVal = Number(newVal)
+			if (!isStepValid(newVal, range.rangeMin.value, range.rangeMax.value)) {
+				return
+			}
+			range.step.value = Math.abs(newVal)
+		},
+	)
+
+	// the selected values must be in the bounds and coherent
+	watch(
+		() => toValue(value),
+		(newVal) => {
+			const newValCasted = newVal.map(Number)
+
+			if (!isValidNumber(newValCasted[0]) || !isValidNumber(newValCasted[1])) {
+				return
+			}
+			if (newValCasted[0] > newValCasted[1]) {
+				return
+			}
+			if (newValCasted[0] < range.rangeMin.value) {
+				range.selectedMin.value = range.rangeMin.value
+			}
+			else {
+				range.selectedMin.value = newValCasted[0]
+			}
+			if (newValCasted[1] > range.rangeMax.value) {
+				range.selectedMax.value = range.rangeMax.value
+			}
+			else {
+				range.selectedMax.value = newValCasted[1]
+			}
+		},
+		{ immediate: true },
+	)
+
+	return range
+}
+
+function isValidNumber(value: number) {
+	return !isNaN(value) && isFinite(value)
+}
+
+function isStepValid(step: number, rangeStart: number, rangeEnd: number) {
+	return (
+		!isNaN(step) && isFinite(step) && step != 0 && step <= rangeEnd - rangeStart
+	)
+}

package/src/components/RangeField/RangeSlider/useThumb.ts

@@ -0,0 +1,18 @@
+import { computed, toValue, type MaybeRef } from 'vue'
+
+export default function useThumb(
+	selected: MaybeRef<number>,
+	rangeMin: MaybeRef<number>,
+	rangeMax: MaybeRef<number>,
+) {
+	const thumbStyle = computed(() => {
+		const currentValue = toValue(selected)
+		const rangeWidth = toValue(rangeMax) - toValue(rangeMin)
+		const percent = rangeWidth == 0 ? 100 : (currentValue - toValue(rangeMin)) / rangeWidth * 100
+		return {
+			left: `${percent}%`,
+		}
+	})
+
+	return { thumbStyle }
+}

package/src/components/RangeField/RangeSlider/useThumbKeyboard.ts

@@ -0,0 +1,84 @@
+import { onMounted, toValue, type MaybeRef, type Ref } from 'vue'
+
+/**
+ * Custom hook to handle keyboard events for a slider thumb.
+ *
+ * @param thumb The thumb element of the slider.
+ * @param value The current value of the slider.
+ * @param minSelectableValue The minimum currently selectable value for the slider.
+ * @param maxSelectableValue The maximum currently selectable value for the slider.
+ * @param step The step displacement for the slider.
+ * @param setValue The function to set the value of the slider.
+ */
+export default function useThumbKeyboard(
+	thumb: MaybeRef<HTMLElement>,
+	value: Ref<number>,
+	minSelectableValue: MaybeRef<number>,
+	maxSelectableValue: MaybeRef<number>,
+	step: MaybeRef<number>,
+	setValue: (value: number) => void,
+) {
+	onMounted(() => {
+		toValue(thumb).addEventListener('keydown', handleKeyDown)
+	})
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			const curStep = toValue(step)
+			const curValue = normalizePositionByStep(toValue(value), curStep)
+
+			const newValue = curValue - curStep
+			if (newValue >= toValue(minSelectableValue)) {
+				setValue(newValue)
+			}
+		}
+		else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+			event.preventDefault()
+			const curStep = toValue(step)
+			const curValue = normalizePositionByStep(toValue(value), curStep)
+			const newValue = curValue + curStep
+			if (newValue <= toValue(maxSelectableValue)) {
+				setValue(newValue)
+			}
+		}
+		else if (event.key === 'Home') {
+			event.preventDefault()
+			setValue(toValue(minSelectableValue))
+		}
+		else if (event.key === 'End') {
+			event.preventDefault()
+			setValue(toValue(maxSelectableValue))
+		}
+		else if (event.key === 'PageDown') {
+			event.preventDefault()
+			const curStep = toValue(step)
+			const curValue = normalizePositionByStep(toValue(value), curStep)
+
+			const newValue = curValue - curStep * 10
+			if (newValue >= toValue(minSelectableValue)) {
+				setValue(newValue)
+			}
+			else {
+				setValue(toValue(minSelectableValue))
+			}
+		}
+		else if (event.key === 'PageUp') {
+			event.preventDefault()
+			const curStep = toValue(step)
+			const curValue = normalizePositionByStep(toValue(value), curStep)
+
+			const newValue = curValue + curStep * 10
+			if (newValue <= toValue(maxSelectableValue)) {
+				setValue(newValue)
+			}
+			else {
+				setValue(toValue(maxSelectableValue))
+			}
+		}
+	}
+}
+
+function normalizePositionByStep(position: number, step: number) {
+	return Math.round(position / step) * step
+}

package/src/components/RangeField/RangeSlider/useTooltipsNudge.ts

@@ -0,0 +1,92 @@
+import {
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	toValue,
+	watch,
+	type Ref,
+} from 'vue'
+import type Tooltip from './Tooltip/Tooltip.vue'
+import type { Range } from './types'
+
+/**
+ * Handles nudging the tooltips when they overlap.
+ *
+ * @param minThumb The min thumb tooltip.
+ * @param maxThumb The max thumb tooltip.
+ * @param placeholderMinThumb A fake min thumb tooltip with no animations that is used to calculate the nudge.
+ * @param placeholderMaxThumb A fake max thumb tooltip with no animations that is used to calculate the nudge.
+ * @param range The range informations.
+ */
+export default function useTooltipsNudge(
+	minThumb: Ref<typeof Tooltip | null>,
+	maxThumb: Ref<typeof Tooltip | null>,
+	placeholderMinThumb: Ref<typeof Tooltip | null>,
+	placeholderMaxThumb: Ref<typeof Tooltip | null>,
+	range: Range,
+) {
+	const nudgeMinThumb = ref(0)
+	const nudgeMaxThumb = ref(0)
+
+	async function calculateNudges() {
+		await nextTick()
+
+		const rectMin: DOMRect = placeholderMinThumb.value!.element.getBoundingClientRect()
+		const rectMax: DOMRect = placeholderMaxThumb.value!.element.getBoundingClientRect()
+
+		const tooltipsOverlaps = rectMin.right - rectMax.left
+
+		if (tooltipsOverlaps >= 0) {
+			const tooltipArrowWidth = 12
+
+			const minOverflow = rectMin.width / 2 - tooltipArrowWidth
+			const maxOverflow = rectMax.width / 2 - tooltipArrowWidth
+
+			const overflowDiff = Math.abs(minOverflow - maxOverflow)
+
+			let nudgeMin = 0, nudgeMax = 0
+
+			if (minOverflow > maxOverflow) {
+				nudgeMin = Math.min(tooltipsOverlaps, overflowDiff)
+			}
+			else {
+				nudgeMax = Math.min(tooltipsOverlaps, overflowDiff)
+			}
+
+			if (tooltipsOverlaps > overflowDiff) {
+				const residualDifference = tooltipsOverlaps - overflowDiff
+				const gap = Math.ceil(residualDifference / 2)
+				nudgeMin += gap
+				nudgeMax += gap
+			}
+
+			nudgeMinThumb.value = nudgeMin + 1
+			nudgeMaxThumb.value = nudgeMax + 1
+		}
+		else {
+			nudgeMinThumb.value = 0
+			nudgeMaxThumb.value = 0
+		}
+	}
+
+	onMounted(() => {
+		minThumb.value!.element.style.transition = 'transform 0.1s'
+		maxThumb.value!.element.style.transition = 'transform 0.1s'
+		watch(
+			() => [toValue(range.selectedMin), toValue(range.selectedMax)],
+			calculateNudges,
+			{ immediate: true },
+		)
+		window.addEventListener('resize', calculateNudges)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('resize', calculateNudges)
+	})
+
+	return {
+		nudgeMinThumb,
+		nudgeMaxThumb,
+	}
+}

package/src/components/RangeField/RangeSlider/useTrack.ts

@@ -0,0 +1,116 @@
+import { onMounted, toValue, type MaybeRef } from 'vue'
+import type { Range } from './types'
+
+/**
+ * Custom hook to handle the click event on the track of a
+ * min - max slider component.
+ *
+ * @param track The track element of the slider.
+ * @param range An object containing the the following informations about the range: rangeMin, rangeMax, selectedMin, selectedMax, step.
+ * @param setMin A function to set the minimum value.
+ * @param setMax A function to set the maximum value.
+ * @param disable Temporary disable the click on the track
+ */
+export default function useTrack(
+	track: MaybeRef<HTMLElement>,
+	range: Range,
+	setMin: (value: number) => void,
+	setMax: (value: number) => void,
+	disable: MaybeRef<boolean> = false,
+) {
+	function setPosition(event: MouseEvent) {
+		if (toValue(disable)) return
+
+		const rect = toValue(track).getBoundingClientRect()
+		const rangeStartValue = toValue(range.rangeMin)
+		const rangeEndValue = toValue(range.rangeMax)
+
+		const clickX = event.clientX - rect.left
+		const clickXPercentage = (clickX / rect.width) * 100
+		const setThumb = getThumbMoveFunc(
+			clickXPercentage,
+			rangeStartValue,
+			rangeEndValue,
+			toValue(range.selectedMin),
+			toValue(range.selectedMax),
+			setMin,
+			setMax,
+		)
+		const newPosition = getClosetStep(
+			clickXPercentage,
+			rangeStartValue,
+			rangeEndValue,
+			toValue(range.step),
+		)
+
+		setThumb(newPosition)
+	}
+
+	onMounted(() => {
+		toValue(track).addEventListener('click', setPosition)
+	})
+}
+
+/**
+ * Get the closest step position to the click position.
+ *
+ * @param percentPosition The new position in percentage.
+ * @param rangeStart The start of the range.
+ * @param rangeEnd The end of the range.
+ * @param step The gap between each step.
+ * @returns The closest step position.
+ */
+function getClosetStep(
+	percentPosition: number,
+	rangeStart: number,
+	rangeEnd: number,
+	step: number,
+) {
+	const rangeWidth = rangeEnd - rangeStart
+	const percentStep = (step * 100) / rangeWidth
+	const stepsChange = Math.round(percentPosition / percentStep)
+
+	return stepsChange * step + rangeStart
+}
+
+/**
+ * Get the closest thumb to the click position.
+ *
+ * @param percentPosition The new position in percentage.
+ * @param rangeStart The start of the range.
+ * @param rangeEnd The end of the range.
+ * @param minSelectedValue The current minimum selected value.
+ * @param maxSelectedValue The current maximum selected value.
+ * @param setMin A function to set the minimum value.
+ * @param setMax A function to set the maximum value.
+ * @returns The function to set the thumb value.
+ */
+function getThumbMoveFunc(
+	percentPosition: number,
+	rangeStart: number,
+	rangeEnd: number,
+	minSelectedValue: number,
+	maxSelectedValue: number,
+	setMin: (value: number) => void,
+	setMax: (value: number) => void,
+) {
+	const rangeWidth = rangeEnd - rangeStart
+
+	const minPercent = Math.abs(
+		((minSelectedValue - rangeStart) / rangeWidth) * 100,
+	)
+	const maxPercent = Math.abs(
+		((maxSelectedValue - rangeStart) / rangeWidth) * 100,
+	)
+	const minDistance = Math.abs(minPercent - percentPosition)
+	const maxDistance = Math.abs(maxPercent - percentPosition)
+
+	if (
+		minDistance < maxDistance
+		|| (minDistance === maxDistance && percentPosition < minPercent)
+	) {
+		return setMin
+	}
+
+	return setMax
+}

package/src/components/RangeField/RangeSlider/vAnimateClick.ts

@@ -0,0 +1,19 @@
+function addClass(el: MouseEvent | TouchEvent) {
+	(el.currentTarget as HTMLElement).classList.add('animate-click')
+}
+
+function removeClass(el: MouseEvent | TouchEvent) {
+	(el.currentTarget as HTMLElement).classList.remove('animate-click')
+}
+
+export const vAnimateClick = {
+	mounted: (el: HTMLElement) => {
+		el.addEventListener('mousedown', addClass)
+		el.addEventListener('mouseup', removeClass)
+		el.addEventListener('mouseleave', removeClass)
+
+		el.addEventListener('touchstart', addClass)
+		el.addEventListener('touchend', removeClass)
+		el.addEventListener('touchcancel', removeClass)
+	},
+}

package/src/components/RangeField/config.ts

@@ -0,0 +1,7 @@
+export const config = {
+	textField: {
+		// hideDetails: true,
+		class: 'ma-3',
+		variant: 'outlined',
+	},
+} as const

package/src/components/RangeField/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	minLabel: 'Valeur min',
+	maxLabel: 'Valeur max',
+}