@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RangeField/RangeSlider/Tooltip/Tooltip.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+
+	const props = withDefaults(defineProps<{
+		nudgeLeft?: number
+		nudgeRight?: number
+	}>(), {
+		nudgeLeft: 0,
+		nudgeRight: 0,
+	})
+
+	const tooltipStyle = computed(() => {
+		const correction = props.nudgeLeft ? props.nudgeLeft : props.nudgeRight * -1
+		return {
+			transform: `translateX(calc(-50% + ${Math.ceil(correction)}px))`,
+		}
+	})
+
+	const tooltip = ref<HTMLElement | null>(null)
+
+	defineExpose({
+		element: tooltip,
+	})
+</script>
+
+<template>
+	<div class="tooltip-wrapper">
+		<div
+			ref="tooltip"
+			class="tooltip"
+			:style="tooltipStyle"
+		>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.tooltip-wrapper {
+	position: absolute;
+	top: 0;
+	left: 20px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translate(-50%, 0);
+		border: 6px solid transparent;
+		border-top-color: rgb(0 0 0 / 70%);
+	}
+}
+
+.tooltip {
+	position: absolute;
+	bottom: 0;
+	background-color: rgb(0 0 0 / 70%);
+	color: #fff;
+	padding: 4px 8px;
+	border-radius: 4px;
+	will-change: transform;
+}
+</style>

package/src/components/RangeField/RangeSlider/tests/__snapshots__/rangeSlider.spec.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RangeField component > should render the component 1`] = `
+"<div data-v-cfbfc2ef="" class="wrapper">
+  <div data-v-cfbfc2ef="" class="track"><button data-v-cfbfc2ef="" class="thumb-min" style="left: 25%;" role="slider" aria-valuenow="25" tabindex="0" aria-valuemin="0" aria-valuemax="75" aria-orientation="horizontal" aria-label="Minimum" title="Minimum">
+      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">25</div>
+      </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+    </button><button data-v-cfbfc2ef="" role="slider" class="thumb-max" style="left: 75%;" aria-valuenow="75" tabindex="0" aria-valuemin="25" aria-valuemax="100" aria-orientation="horizontal" aria-label="Maximum" title="Maximum">
+      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">75</div>
+      </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+    </button>
+    <div data-v-cfbfc2ef="" class="fake-thumb thumb-min" aria-hidden="true" style="left: 25%;">
+      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">25</div>
+      </div>
+    </div>
+    <div data-v-cfbfc2ef="" class="fake-thumb thumb-max" aria-hidden="true" style="left: 75%;">
+      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">75</div>
+      </div>
+    </div>
+    <div data-v-cfbfc2ef="" class="filled-track" style="left: 25%; width: 50%;"></div>
+  </div>
+</div>"
+`;

package/src/components/RangeField/RangeSlider/tests/rangeSlider.spec.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import RangeSlider from '../RangeSlider.vue'
+
+describe('RangeField component', () => {
+	it('should render the component', () => {
+		const wrapper = mount(RangeSlider, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				min: 0,
+				max: 100,
+				modelValue: [25, 75],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+
+		const minThumb = wrapper.find('.thumb-min')
+		expect(minThumb.attributes('style')).toBe('left: 25%;')
+		expect(minThumb.attributes('aria-valuenow')).toBe('25')
+		expect(minThumb.text()).toBe('25')
+
+		const maxThumb = wrapper.find('.thumb-max')
+		expect(maxThumb.attributes('style')).toBe('left: 75%;')
+		expect(maxThumb.attributes('aria-valuenow')).toBe('75')
+		expect(maxThumb.text()).toBe('75')
+	})
+
+	it('should update the model value on thumb drag', async () => {
+		const wrapper = mount(RangeSlider, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				min: 0,
+				max: 100,
+				modelValue: [25, 75],
+			},
+		})
+
+		const minThumb = wrapper.find('.thumb-min')
+		await minThumb.trigger('keydown', { key: 'ArrowRight' })
+
+		expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[26, 75]])
+	})
+
+	it('should update the range when the modelValue is updated', async () => {
+		const wrapper = mount(RangeSlider, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				min: 0,
+				max: 100,
+				modelValue: [25, 75],
+			},
+		})
+
+		await wrapper.setProps({ modelValue: [30, 70] })
+
+		const minThumb = wrapper.find('.thumb-min')
+		expect(minThumb.attributes('style')).toBe('left: 30%;')
+		expect(minThumb.attributes('aria-valuenow')).toBe('30')
+		expect(minThumb.text()).toBe('30')
+
+		const maxThumb = wrapper.find('.thumb-max')
+		expect(maxThumb.attributes('style')).toBe('left: 70%;')
+		expect(maxThumb.attributes('aria-valuenow')).toBe('70')
+		expect(maxThumb.text()).toBe('70')
+	})
+
+	it('emit an event when the track is clicked', async () => {
+		const wrapper = mount(RangeSlider, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				min: 0,
+				max: 100,
+				modelValue: [25, 75],
+			},
+		})
+
+		const track = wrapper.find('.track')
+
+		vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+			left: 0,
+			width: 100,
+		} as DOMRect)
+
+		await wrapper.find('.track').trigger('click', { clientX: 33 })
+
+		expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[33, 75]])
+	})
+})

package/src/components/RangeField/RangeSlider/tests/useDoubleSlider.spec.ts

@@ -0,0 +1,246 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick, ref } from 'vue'
+import useDoubleSlider from '../useRangeSlider'
+
+describe('useDoubleSlider', () => {
+	it('return a correct object', () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		expect(range.rangeMin.value).toBe(0)
+		expect(range.rangeMax.value).toBe(100)
+		expect(range.step.value).toBe(1)
+		expect(range.selectedMin.value).toBe(25)
+		expect(range.selectedMax.value).toBe(75)
+	})
+
+	it('update the values', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		expect(range.rangeMin.value).toBe(0)
+		expect(range.rangeMax.value).toBe(100)
+		expect(range.step.value).toBe(1)
+		expect(range.selectedMin.value).toBe(25)
+		expect(range.selectedMax.value).toBe(75)
+
+		min.value = -100
+		max.value = 200
+		step.value = 2
+		value.value = [-50, 150]
+
+		await nextTick()
+
+		expect(range.rangeMin.value).toBe(-100)
+		expect(range.rangeMax.value).toBe(200)
+		expect(range.step.value).toBe(2)
+		expect(range.selectedMin.value).toBe(-50)
+		expect(range.selectedMax.value).toBe(150)
+	})
+
+	it('do not accept out of bounds values', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		value.value = [-50, 100]
+
+		await nextTick()
+
+		expect(range.selectedMax.value).toBe(100)
+		expect(range.selectedMin.value).not.toBe(-50)
+		expect(range.selectedMin.value).toBe(0)
+	})
+
+	it('do not accept a min bound superior than a max bound', () => {
+		const min = ref(100)
+		const max = ref(-100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		expect(range.rangeMin.value).toBe(-100)
+		expect(range.rangeMax.value).toBe(100)
+	})
+
+	it('do not accept an invalide value', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		value.value = [NaN, NaN]
+		await nextTick()
+		expect(range.selectedMin.value).toBe(25)
+		expect(range.selectedMax.value).toBe(75)
+
+		value.value = [-Infinity, +Infinity]
+		await nextTick()
+		expect(range.selectedMin.value).toBe(25)
+		expect(range.selectedMax.value).toBe(75)
+
+		value.value = [60, 40]
+		await nextTick()
+		expect(range.selectedMin.value).toBe(25)
+		expect(range.selectedMax.value).toBe(75)
+	})
+
+	it('set automatically the selected value in bounds', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		value.value = [-50, 150]
+
+		await nextTick()
+
+		expect(range.selectedMin.value).toBe(0)
+		expect(range.selectedMax.value).toBe(100)
+	})
+
+	it('do not accept an invalide min and max limit value', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([25, 75])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		min.value = NaN
+		await nextTick()
+		expect(range.rangeMin.value).toBe(0)
+
+		min.value = -Infinity
+		await nextTick()
+		expect(range.rangeMin.value).toBe(0)
+
+		min.value = 150
+		await nextTick()
+		expect(range.rangeMin.value).toBe(0)
+
+		max.value = NaN
+		await nextTick()
+		expect(range.rangeMax.value).toBe(100)
+
+		max.value = -Infinity
+		await nextTick()
+		expect(range.rangeMax.value).toBe(100)
+
+		max.value = -1
+		await nextTick()
+		expect(range.rangeMax.value).toBe(100)
+	})
+
+	it('set automatically the selected value in bounds (min and max)', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([10, 90])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		min.value = 20
+		max.value = 80
+
+		await nextTick()
+
+		expect(range.selectedMin.value).toBe(20)
+		expect(range.selectedMax.value).toBe(80)
+	})
+
+	it('set automatically the selected value in bounds (min)', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([10, 20])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		min.value = 40
+
+		await nextTick()
+
+		expect(range.selectedMin.value).toBe(40)
+		expect(range.selectedMax.value).toBe(40)
+	})
+
+	it('set automatically the selected value in bounds (max)', async () => {
+		const min = ref(0)
+		const max = ref(100)
+		const step = ref(1)
+		const value = ref([80, 90])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		max.value = 60
+
+		await nextTick()
+
+		expect(range.selectedMin.value).toBe(60)
+		expect(range.selectedMax.value).toBe(60)
+	})
+
+	it('do not take into account an invalide step', async () => {
+		const min = ref(100)
+		const max = ref(200)
+		const step = ref(1)
+		const value = ref([80, 90])
+
+		const range = useDoubleSlider(
+			min, max, step, value,
+		)
+
+		step.value = NaN
+		await nextTick()
+		expect(range.step.value).toBe(1)
+
+		step.value = +Infinity
+		await nextTick()
+		expect(range.step.value).toBe(1)
+
+		step.value = 0
+		await nextTick()
+		expect(range.step.value).toBe(1)
+
+		step.value = 150
+		await nextTick()
+		expect(range.step.value).toBe(1)
+	})
+})

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

@@ -0,0 +1,204 @@
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import useMouseSlide from '../useMouseSlide'
+
+import { defineComponent, onMounted, ref, type Ref } from 'vue'
+import { mount } from '@vue/test-utils'
+
+describe('useMouseSlide', () => {
+	let callbackFn = vi.fn()
+	const TestComponent = defineComponent({
+		setup() {
+			const track = ref<HTMLElement | null>(null)
+			const thumb = ref<HTMLElement | null>(null)
+
+			onMounted(() => {
+				const mockRect = vi.spyOn((track.value as HTMLElement), 'getBoundingClientRect')
+				mockRect.mockReturnValue({
+					left: 0,
+					width: 200,
+				} as DOMRect)
+			})
+
+			const {
+				inProgress,
+			} = useMouseSlide(
+				thumb as Ref<HTMLElement>,
+				track as Ref<HTMLElement>,
+				ref(50),
+				0,
+				100,
+				1,
+				0,
+				100,
+				callbackFn,
+			)
+			return { track, thumb, inProgress }
+		},
+		template: `
+		<div ref="track">
+			<div ref="thumb" class="thumb"></div>
+		</div>`,
+	})
+
+	afterEach(() => {
+		callbackFn = vi.fn()
+	})
+
+	it('calls the callback function when the mouse is down', async () => {
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('mousedown')
+		await thumb.trigger('mousemove', {
+			clientX: 100,
+		})
+		await thumb.trigger('mousemove', {
+			clientX: 150,
+		})
+		await thumb.trigger('mouseup')
+
+		expect(callbackFn).toHaveBeenCalledWith(75) // 50 + 25
+
+		wrapper.unmount()
+	})
+
+	it('handle touch events', async () => {
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('touchstart')
+		await thumb.trigger('touchmove', {
+			touches: [{ clientX: 100 }],
+		})
+		await thumb.trigger('touchmove', {
+			touches: [{ clientX: 150 }],
+		})
+		await thumb.trigger('touchend')
+
+		expect(callbackFn).toHaveBeenCalledWith(75) // 50 + 25
+
+		wrapper.unmount()
+	})
+
+	it('handle going backward', async () => {
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('mousedown')
+		await thumb.trigger('mousemove', {
+			clientX: 100,
+		})
+		await thumb.trigger('mousemove', {
+			clientX: 50,
+		})
+		await thumb.trigger('mouseup')
+
+		expect(callbackFn).toHaveBeenCalledWith(25) // 50 - 25
+
+		wrapper.unmount()
+	})
+
+	it('do not call the callback function when the mouse have not moved', async () => {
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('mousedown')
+		await thumb.trigger('mousemove', {
+			clientX: 100,
+		})
+		await thumb.trigger('mousemove', {
+			clientX: 100,
+		})
+		await thumb.trigger('mouseup')
+
+		expect(callbackFn).not.toHaveBeenCalled()
+
+		wrapper.unmount()
+	})
+
+	it('set the inProgress to false after 100ms', async () => {
+		vi.useFakeTimers()
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('mousedown')
+		await thumb.trigger('mousemove', {
+			clientX: 100,
+		})
+		await thumb.trigger('mousemove', {
+			clientX: 150,
+		})
+		await thumb.trigger('mouseup')
+
+		expect(wrapper.vm.inProgress).toBe(true)
+
+		await thumb.trigger('mousemove', {
+			clientX: 100,
+		})
+
+		expect(wrapper.vm.inProgress).toBe(true)
+
+		vi.advanceTimersByTime(100)
+
+		expect(wrapper.vm.inProgress).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('do not overstep the minSelectableValue', async () => {
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('mousedown')
+		await thumb.trigger('mousemove', {
+			clientX: 0,
+		})
+		await thumb.trigger('mousemove', {
+			clientX: -300,
+		})
+		await thumb.trigger('mouseup')
+
+		expect(callbackFn).toHaveBeenCalledWith(0)
+
+		wrapper.unmount()
+	})
+
+	it('do not overstep the maxSelectableValue', async () => {
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		const thumb = wrapper.find('div.thumb')
+
+		await thumb.trigger('mousedown')
+		await thumb.trigger('mousemove', {
+			clientX: 200,
+		})
+		await thumb.trigger('mousemove', {
+			clientX: 500,
+		})
+		await thumb.trigger('mouseup')
+
+		expect(callbackFn).toHaveBeenCalledWith(100)
+
+		wrapper.unmount()
+	})
+})

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

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import useThumb from '../useThumb'
+
+describe('useThumb', () => {
+	it('should return the correct thumb style', () => {
+		const { thumbStyle } = useThumb(10, -60, 40)
+
+		expect(thumbStyle.value.left).toBe('70%')
+	})
+
+	it('should return the correct thumb style with a negative value', () => {
+		const { thumbStyle } = useThumb(-60, -100, 0)
+
+		expect(thumbStyle.value.left).toBe('40%')
+	})
+
+	it('should return the correct thumb style with a range of 0', () => {
+		const { thumbStyle } = useThumb(0, 0, 0)
+
+		expect(thumbStyle.value.left).toBe('100%')
+	})
+})