@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/RangeField/RangeField.stories.ts

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import RangeField from './RangeField.vue'
+
+const meta = {
+	title: 'Composants/Formulaires/RangeField',
+	component: RangeField,
+	argTypes: {
+		'min': {
+			control: 'number',
+			description: 'Valeur minimale du champ',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+		'max': {
+			control: 'number',
+			description: 'Valeur maximale du champ',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+		'step': {
+			control: 'number',
+			description: 'Le pas du slider',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+		'modelValue': {
+			control: 'object',
+			description: 'Valeur du champ',
+			defaultValue: [0, 0],
+			table: {
+				category: 'props',
+				type: {
+					summary: '[number, number]',
+				},
+			},
+		},
+		'onUpdate:modelValue': {
+			action: 'update:modelValue',
+			description: 'Événement émis lors de la modification de la valeur du champ',
+			table: {
+				category: 'events',
+				type: {
+					summary: '[number, number]',
+				},
+			},
+		},
+		'vuetifyOptions': {
+			control: 'object',
+			description: 'Personnalisation des composants Vuetify internes',
+			table: {
+				category: 'props',
+				defaultValue: {
+					detail: `
+					{
+						textField: {
+							hideDetails: true,
+							class: 'ma-3',
+							variant: 'outlined',
+						},
+					}`,
+				},
+				type: {
+					summary: 'Record<string, any>',
+					detail: `
+					{
+	textField?: Record<string, any>,
+	rangeSlider?: Record<string, any>,
+}
+					`,
+				},
+			},
+		},
+	},
+} satisfies Meta<typeof RangeField>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div style="width: 300px;">
+		<RangeField v-model="range" />
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { RangeField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const range = ref([0, 100])
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const OtherRange: Story = {
+	args: {
+		min: -50,
+		max: 50,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div style="width: 300px;">
+		<RangeField v-model="modelValue" :min="-50" :max="50" />
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { RangeField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+	const modelValue = ref([50, 80])
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const Customization: Story = {
+	args: {
+		vuetifyOptions: {
+			textField: {
+				variant: 'plain',
+			},
+			rangeSlider: {
+				'thumb-color': 'purple',
+				'track-color': 'LightSteelBlue',
+				'track-fill-color': 'purple',
+			},
+		},
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div style="width: 300px;">
+		<RangeField vuetifyOptions="vuetifyOptions" v-model="range" />
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { RangeField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+	const vuetifyOptions = {
+		textField: {
+			variant: 'plain',
+		},
+		rangeSlider: {
+			'thumb-color': 'purple',
+			'track-color': 'LightSteelBlue',
+			'track-fill-color': 'purple',
+		},
+	}
+	const range = ref([0, 100])
+</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/RangeField/RangeField.vue

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { vMaska } from 'maska/vue'
+	import { computed, ref, watch } from 'vue'
+	import { useDisplay } from 'vuetify'
+	import RangeSlider from './RangeSlider/RangeSlider.vue'
+	import { config } from './config'
+	import { locales } from './locales'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		min?: number
+		max?: number
+		step?: number
+	}>(), {
+		min: 0,
+		max: 100,
+		step: 1,
+	})
+
+	const options = useCustomizableOptions(config, props)
+
+	const model = defineModel<
+		Array<number>
+	>()
+
+	const innerValue = computed(() => {
+		return model.value ? model.value : [props.min, props.max]
+	})
+
+	const fieldMin = ref<string | number>(innerValue.value[0])
+	const fieldMax = ref<string | number>(innerValue.value[1])
+
+	watch(model, (value) => {
+		if (!Array.isArray(value)) {
+			model.value = [
+				props.min,
+				props.max,
+			]
+			return
+		}
+
+		const start = clamp(value[0]), end = clamp(value[1])
+		fieldMin.value = start
+		fieldMax.value = end
+		if (start !== value[0] || end !== value[1]) {
+			model.value = [start, end]
+		}
+	}, {
+		immediate: true,
+		deep: true,
+	})
+
+	const display = useDisplay()
+
+	const mask = {
+		tokens: {
+			'N': { pattern: /-/, optional: true },
+			'n': { pattern: /\d/, multiple: true, optional: true },
+			'.': { pattern: /\./, optional: true },
+			'd': { pattern: /\d/, multiple: true, optional: true },
+		},
+		mask: 'Nn.d',
+	}
+
+	function clamp(value: number | string) {
+		value = Math.round(Number(value))
+		if (isNaN(value)) return props.min
+		return Math.min(Math.max(value, props.min), props.max)
+	}
+
+	function updateMin(value: string) {
+		if (value === '') {
+			return
+		}
+		const newValue = Number(value)
+		if (
+			!isNaN(newValue)
+			&& isFinite(newValue)
+			&& newValue >= props.min
+			&& newValue <= model.value![1]
+		) {
+			model.value = [newValue, innerValue.value[1]]
+		}
+	}
+
+	function updateMax(value: string) {
+		if (value === '') {
+			return
+		}
+		const newValue = Number(value)
+		if (
+			!isNaN(newValue)
+			&& isFinite(newValue)
+			&& newValue <= props.max
+			&& newValue >= innerValue.value[0]
+		) {
+			model.value = [innerValue.value[0], newValue]
+		}
+	}
+
+	function validateMin(focus: boolean) {
+		if (!focus) {
+			fieldMin.value = innerValue.value[0]
+		}
+	}
+
+	function validateMax(focus: boolean) {
+		if (!focus) {
+			fieldMax.value = innerValue.value[1]
+		}
+	}
+</script>
+
+<template>
+	<div class="vd-range-field">
+		<div class="mt-10 mb-2 mx-3">
+			<RangeSlider
+				:model-value="innerValue"
+				v-bind="options.rangeSlider"
+				:max="max"
+				:min="min"
+				:step="step"
+				class="mt-8 mb-2"
+				@update:model-value="model = $event"
+			/>
+		</div>
+		<div
+			:class="{ 'flex-column': display.xs.value }"
+			class="d-flex flex-wrap max-width-none"
+		>
+			<VTextField
+				v-model="fieldMin"
+				v-maska="mask"
+				v-bind="options.textField"
+				:label="locales.minLabel"
+				:aria-label="locales.minLabel"
+				inputmode="numeric"
+				color="primary"
+				:title="locales.minLabel"
+				@update:model-value="updateMin"
+				@update:focused="validateMin"
+			/>
+			<VTextField
+				v-model="fieldMax"
+				v-maska="mask"
+				v-bind="options.textField"
+				:label="locales.maxLabel"
+				:aria-label="locales.maxLabel"
+				inputmode="numeric"
+				color="primary"
+				:title="locales.maxLabel"
+				@update:model-value="updateMax"
+				@update:focused="validateMax"
+			/>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,387 @@
+// @see
+// https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/
+// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
+
+<script setup lang="ts">
+	import { cnamColorsTokens } from '@/designTokens'
+	import { computed, ref, toRef, watch, type Ref } from 'vue'
+	import Tooltip from './Tooltip/Tooltip.vue'
+	import type { PropsStyle } from './types'
+	import useMouseSlide from './useMouseSlide'
+	import useDoubleSlider from './useRangeSlider'
+	import useThumb from './useThumb'
+	import useThumbKeyboard from './useThumbKeyboard'
+	import useTooltipsNudge from './useTooltipsNudge'
+	import useTrack from './useTrack'
+	import { vAnimateClick } from './vAnimateClick'
+
+	const props = withDefaults(
+		defineProps<
+			PropsStyle &
+			{
+				modelValue?: Array<number | string>
+				min?: number | string
+				max?: number | string
+				step?: number | string
+				minLabel?: string
+				maxLabel?: string
+			}>(),
+		{
+			'modelValue': () => [],
+			'min': 0,
+			'max': 100,
+			'step': 1,
+			'minLabel': 'Minimum',
+			'maxLabel': 'Maximum',
+			'thumb-color': cnamColorsTokens.blue.base,
+			'track-color': cnamColorsTokens.blue.lighten80,
+			'track-fill-color': cnamColorsTokens.blue.lighten40,
+		},
+	)
+
+	const range = useDoubleSlider(
+		toRef(props, 'min'),
+		toRef(props, 'max'),
+		toRef(props, 'step'),
+		toRef(props, 'modelValue'),
+	)
+
+	const emits = defineEmits<{
+		(e: 'update:modelValue', value: number[]): void
+	}>()
+
+	const {
+		thumbStyle: thumbMinStyle,
+	} = useThumb(
+		range.selectedMin,
+		range.rangeMin,
+		range.rangeMax,
+	)
+
+	const {
+		thumbStyle: thumbMaxStyle,
+	} = useThumb(
+		range.selectedMax,
+		range.rangeMin,
+		range.rangeMax,
+	)
+
+	const filledTrackStyle = computed(() => {
+		const rangeMin = range.rangeMin.value
+		const rangeMax = range.rangeMax.value
+		const selectedMin = range.selectedMin.value
+		const selectedMax = range.selectedMax.value
+
+		const rangeWidth = rangeMax - rangeMin
+		const left = (selectedMin - rangeMin) * 100 / rangeWidth
+		const width = (selectedMax - rangeMin) * 100 / rangeWidth - left
+
+		return {
+			left: `${left}%`,
+			width: `${width}%`,
+		}
+	})
+
+	const track = ref<HTMLElement | null>(null)
+	const thumbMin = ref<HTMLElement | null>(null)
+	const thumbMax = ref<HTMLElement | null>(null)
+
+	const { inProgress: minThumbDrag } = useMouseSlide(
+		thumbMin as Ref<HTMLElement>,
+		track as Ref<HTMLElement>,
+		range.selectedMin,
+		range.rangeMin,
+		range.rangeMax,
+		range.step,
+		range.rangeMin,
+		range.selectedMax,
+		(value: number) => range.selectedMin.value = value,
+	)
+
+	const { inProgress: maxThumbDrag } = useMouseSlide(
+		thumbMax as Ref<HTMLElement>,
+		track as Ref<HTMLElement>,
+		range.selectedMax,
+		range.rangeMin,
+		range.rangeMax,
+		range.step,
+		range.selectedMin,
+		range.rangeMax,
+		(value: number) => range.selectedMax.value = value,
+	)
+
+	const dragInProgress = computed(() => minThumbDrag.value || maxThumbDrag.value)
+
+	useTrack(
+		track as Ref<HTMLElement>,
+		range,
+		(value: number) => range.selectedMin.value = value,
+		(value: number) => range.selectedMax.value = value,
+		dragInProgress,
+	)
+
+	useThumbKeyboard(
+		thumbMin as Ref<HTMLElement>,
+		range.selectedMin,
+		range.rangeMin,
+		range.selectedMax,
+		range.step,
+		(value: number) => range.selectedMin.value = value,
+	)
+
+	useThumbKeyboard(
+		thumbMax as Ref<HTMLElement>,
+		range.selectedMax,
+		range.selectedMin,
+		range.rangeMax,
+		range.step,
+		(value: number) => range.selectedMax.value = value,
+	)
+
+	const hiddenTooltipMin = ref<typeof Tooltip | null>(null)
+	const hiddenTooltipMax = ref<typeof Tooltip | null>(null)
+	const tooltipMin = ref<typeof Tooltip | null>(null)
+	const tooltipMax = ref<typeof Tooltip | null>(null)
+
+	const {
+		nudgeMinThumb,
+		nudgeMaxThumb,
+	} = useTooltipsNudge(
+		tooltipMin,
+		tooltipMax,
+		hiddenTooltipMin,
+		hiddenTooltipMax,
+		range,
+	)
+
+	watch(() => [range.selectedMin.value, range.selectedMax.value], (value) => {
+		if (
+			value[0] !== Number(props.modelValue[0])
+			|| value[1] !== Number(props.modelValue[1])
+		) {
+			emits('update:modelValue', value)
+		}
+	})
+
+</script>
+
+<template>
+	<div class="wrapper">
+		<div
+			ref="track"
+			class="track"
+		>
+			<button
+				ref="thumbMin"
+				v-animate-click
+				class="thumb-min"
+				:style="thumbMinStyle"
+				role="slider"
+				:aria-valuenow="range.selectedMin.value"
+				tabindex="0"
+				:aria-valuemin="range.rangeMin.value"
+				:aria-valuemax="range.selectedMax.value"
+				aria-orientation="horizontal"
+				:aria-label="minLabel"
+				:title="minLabel"
+			>
+				<Tooltip
+					ref="tooltipMin"
+					:nudge-right="nudgeMinThumb"
+				>
+					{{ range.selectedMin.value }}
+				</Tooltip>
+				<span class="inner-thumb" />
+			</button>
+			<button
+				ref="thumbMax"
+				v-animate-click
+				role="slider"
+				class="thumb-max"
+				:style="thumbMaxStyle"
+				:aria-valuenow="range.selectedMax.value"
+				tabindex="0"
+				:aria-valuemin="range.selectedMin.value"
+				:aria-valuemax="range.rangeMax.value"
+				aria-orientation="horizontal"
+				:aria-label="maxLabel"
+				:title="maxLabel"
+			>
+				<Tooltip
+					ref="tooltipMax"
+					:nudge-left="nudgeMaxThumb"
+				>
+					{{ range.selectedMax.value }}
+				</Tooltip>
+				<span class="inner-thumb" />
+			</button>
+			<div
+				class="fake-thumb thumb-min"
+				aria-hidden="true"
+				:style="thumbMinStyle"
+			>
+				<Tooltip
+					ref="hiddenTooltipMin"
+				>
+					{{ range.selectedMin.value }}
+				</Tooltip>
+			</div>
+			<div
+				class="fake-thumb thumb-max"
+				aria-hidden="true"
+				:style="thumbMaxStyle"
+			>
+				<Tooltip
+					ref="hiddenTooltipMax"
+				>
+					{{ range.selectedMax.value }}
+				</Tooltip>
+			</div>
+			<div
+				class="filled-track"
+				:style="filledTrackStyle"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+$virtual-thumb-size: 40px;
+
+.wrapper {
+	--sy-track-height: 4px;
+	--sy-thumb-size: 20px;
+	--sy-thumb-color: v-bind(props.thumbColor);
+	--sy-track-color: v-bind(props.trackColor);
+	--sy-track-fill-color: v-bind(props.trackFillColor);
+
+	position: relative;
+	margin-inline: var(--sy-thumb-size);
+	width: calc(100% - var(--sy-thumb-size) * 2);
+}
+
+.track {
+	height: 32px;
+	cursor: pointer;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 0;
+		transform: translate(0, -50%);
+		width: 100%;
+		height: var(--sy-track-height);
+		background-color: var(--sy-track-color);
+	}
+}
+
+.thumb-min,
+.thumb-max {
+	cursor: pointer;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	z-index: 2;
+	width: $virtual-thumb-size;
+	height: $virtual-thumb-size;
+	border-radius: 50%;
+	transition: left 0.1s;
+	will-change: left;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: var(--sy-thumb-size);
+		height: var(--sy-thumb-size);
+		background-color: var(--sy-thumb-color);
+		border-radius: 50%;
+		transform-origin: bottom right;
+		transition: transform 0.1s;
+		opacity: 0.4;
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: var(--sy-thumb-size);
+		height: var(--sy-thumb-size);
+		background-color: var(--sy-thumb-color);
+		opacity: 0.4;
+		border-radius: 50%;
+		transform-origin: bottom right;
+		transition: transform 0.1s ease-in, opacity 0.1s ease-in;
+	}
+
+	&:focus,
+	&:hover {
+		&::before {
+			transform: scale(2);
+		}
+	}
+}
+
+.inner-thumb {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	z-index: 2;
+	transform: translate(-50%, -50%);
+	width: var(--sy-thumb-size);
+	height: var(--sy-thumb-size);
+	background-color: var(--sy-thumb-color);
+	border-radius: 50%;
+	box-shadow: 0 1px 5px 0 #0000001f, 0 2px 2px 0 #00000024, 0 3px 1px -2px #0003;
+}
+
+.thumb-min {
+	transform:
+		translate(
+			calc(
+				($virtual-thumb-size / 2 + var(--sy-thumb-size) / 2) * -1
+			),
+			-50%
+		);
+}
+
+.thumb-max {
+	transform:
+		translate(
+			calc((var(--sy-thumb-size) - $virtual-thumb-size) / 2),
+			-50%
+		);
+}
+
+.filled-track {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	transform: translate(0, -50%);
+	width: 100%;
+	height: var(--sy-track-height);
+	background-color: var(--sy-track-fill-color);
+	transition: all 0.1s;
+}
+
+.animate-click::after {
+	transform: scale(2);
+	opacity: 0.4;
+	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
+}
+
+.fake-thumb {
+	visibility: hidden;
+	transition: none !important;
+	cursor: default;
+	z-index: -1;
+	user-select: none;
+}
+</style>