@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/MonthPicker/MonthPickerText/useTextField.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue'
+
+export type TextFieldProps = {
+	label: string
+	density?: 'default' | 'comfortable' | 'compact'
+	hint?: string | false
+	placeholder?: string
+	disabled?: boolean
+	readonly?: boolean
+}
+
+export const defaultTextFieldProps = {
+	density: 'default',
+	disabled: false,
+	readonly: false,
+} as const satisfies Partial<TextFieldProps>
+
+export function useTextField(props: TextFieldProps) {
+	return computed(() => ({
+		label: props.label,
+		density: props.density,
+		hint: props.hint || undefined,
+		placeholder: props.placeholder,
+		disabled: props.disabled ? true : undefined,
+		readonly: props.readonly ? true : undefined,
+	}))
+}

package/src/components/MonthPicker/MonthPickerVisual/MonthPickerVisual.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+	import { computed, inject, ref, useId, watch, type ComponentPublicInstance } from 'vue'
+	import MonthSelector from './MonthSelector.vue'
+	import YearSelector from './YearSelector.vue'
+	import VisualpickerHeader from './VisualPickerHeader.vue'
+	import VisualPickerFooter from './VisualPickerFooter.vue'
+	import { locales as defaultLocales, localesKey } from '../locales'
+	import { parseMonthYearString } from './utils'
+	import type { MonthPickerVisualProps } from './MonthPickerVisualProps'
+
+	const props = defineProps<{
+		textInput: ComponentPublicInstance | null
+		toggleBtn: HTMLElement | null
+		modelValue: string | undefined
+		readonly: boolean
+		disabled: boolean
+	} & MonthPickerVisualProps>()
+
+	const emits = defineEmits<{
+		(e: 'update:modelValue', value: string | undefined): void
+		(e: 'update:year', value: number | undefined): void
+		(e: 'update:month', value: number | undefined): void
+		(e: 'update:open', value: boolean): void
+	}>()
+
+	const locales = inject<typeof defaultLocales>(localesKey)!
+
+	const view = ref<'months' | 'years'>(props.initialView)
+	const open = ref(false)
+	watch(open, (newValue) => {
+		if (newValue) {
+			view.value = props.initialView
+			draftMonth.value = undefined
+			draftYear.value = undefined
+		}
+		else {
+			props.toggleBtn!.focus()
+		}
+		emits('update:open', newValue)
+	})
+
+	const initValue = computed(() => parseMonthYearString(props.modelValue))
+	const draftMonth = ref<number | undefined>(undefined)
+	const draftYear = ref<number | undefined>(undefined)
+
+	function setYear(value: number | undefined) {
+		draftYear.value = value
+		emits('update:year', draftYear.value)
+		if (draftMonth.value === undefined) {
+			view.value = 'months'
+		}
+		else {
+			open.value = false
+		}
+	}
+
+	function setMonth(value: number | undefined) {
+		draftMonth.value = value
+		emits('update:month', draftMonth.value)
+		if (draftYear.value === undefined) {
+			view.value = 'years'
+		}
+		else {
+			open.value = false
+		}
+	}
+
+	function emitModelValue(value: string) {
+		if (!props.readonly && !props.disabled) {
+			emits('update:modelValue', value)
+		}
+	}
+
+	function setDate(value: string) {
+		emitModelValue(value)
+		open.value = false
+	}
+
+	watch(
+		[draftMonth, draftYear],
+		() => {
+			const oldValue = parseMonthYearString(props.modelValue)
+			if (draftMonth.value !== undefined && draftYear.value !== undefined && (draftMonth.value !== oldValue[0] || draftYear.value !== oldValue[1])) {
+				emitModelValue(`${String(draftMonth.value).padStart(2, '0')}/${draftYear.value}`)
+			}
+		},
+		{ immediate: true },
+	)
+
+	const id = useId()
+
+</script>
+<template>
+	<VMenu
+		v-model="open"
+		:target="(textInput as ComponentPublicInstance)"
+		:activator="(toggleBtn as HTMLElement)"
+		:close-on-content-click="false"
+		:max-width="328"
+		:min-width="328"
+		:min-height="455"
+		disable-initial-focus
+		:retain-focus="false"
+		:disabled="props.disabled"
+		transition="fade-transition"
+		:activator-props="{
+			'aria-haspopup': 'dialog',
+			'disabled': props.disabled ? 'true' : undefined,
+		}"
+		role="dialog"
+		:aria-labelledby="`${id}-title`"
+	>
+		<div
+			class="month-picker-menu"
+			:class="{ 'month-picker-menu--readonly': props.readonly }"
+		>
+			<VisualpickerHeader
+				:id
+				v-model:view="view"
+				:title="view === 'months' ? locales.headerSelectMonth : locales.headerSelectYear"
+				:model-value="modelValue"
+				:min-year
+				:max-year
+			/>
+			<YearSelector
+				v-if="view === 'years'"
+				:model-value="draftYear || initValue[1]"
+				:min="minYear"
+				:max="maxYear"
+				:order="yearsOrder"
+				@update:model-value="setYear"
+			/>
+			<MonthSelector
+				v-else-if="view === 'months'"
+				:model-value="draftMonth || initValue[0]"
+				@update:model-value="setMonth"
+			/>
+			<VisualPickerFooter
+				@update:model-value="setDate"
+			/>
+		</div>
+	</VMenu>
+</template>
+<style scoped lang="scss">
+.month-picker-menu {
+	overflow-y: auto;
+	background-color: white;
+	border-radius: 4px;
+	box-shadow:
+		0 1px 5px 0 #0000001f,
+		0 2px 2px 0 #00000024,
+		0 3px 1px -2px #0003;
+}
+</style>

package/src/components/MonthPicker/MonthPickerVisual/MonthPickerVisualProps.ts

@@ -0,0 +1,13 @@
+export type MonthPickerVisualProps = {
+	minYear: number
+	maxYear: number
+	yearsOrder: 'asc' | 'desc'
+	initialView: 'months' | 'years'
+}
+
+export const defaultMonthPickerVisualProps = {
+	minYear: 1900,
+	maxYear: 2100,
+	yearsOrder: 'asc',
+	initialView: 'months',
+} as const satisfies Partial<MonthPickerVisualProps>

package/src/components/MonthPicker/MonthPickerVisual/MonthSelector.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+	import { onMounted, onUnmounted, useTemplateRef, inject } from 'vue'
+	import { useMonthGrid } from './useMonthGrid'
+	import { localesKey, type locales as defaultLocales } from '../locales'
+
+	const props = defineProps<{
+		modelValue: number | undefined
+	}>()
+
+	const emits = defineEmits<{
+		(event: 'update:modelValue', value: number): void
+	}>()
+
+	function getMonthName(monthIndex: number): string {
+		return Intl.DateTimeFormat(navigator.language, { month: 'long' }).format(
+			new Date(0, monthIndex - 1),
+		)
+	}
+
+	function getMonthShortName(monthIndex: number): string {
+		return Intl.DateTimeFormat(navigator.language, { month: 'short' }).format(
+			new Date(0, monthIndex - 1),
+		)
+	}
+
+	const monthSelector = useTemplateRef<HTMLElement>('monthSelector')
+
+	const initialFocusedMonth = (props.modelValue && props.modelValue >= 1 && props.modelValue <= 12)
+		? props.modelValue
+		: new Date().getMonth() + 1
+
+	const {
+		activeMonth,
+		selectNextMonth,
+		selectPreviousMonth,
+		selectNextRow,
+		selectPreviousRow,
+	} = useMonthGrid(
+		monthSelector,
+		initialFocusedMonth,
+	)
+
+	let focusTimeout: ReturnType<typeof setTimeout> | undefined
+
+	onMounted(() => {
+		const selectedMonthElement = monthSelector.value!.querySelector<HTMLElement>(`.month-${initialFocusedMonth}`)
+		selectedMonthElement!.focus()
+
+		// When the menu opens, the transition can cause the focus to be lost, so we ensure it is set after the transition begins.
+		focusTimeout = setTimeout(() => {
+			selectedMonthElement!.focus()
+		}, 0)
+	})
+
+	onUnmounted(() => {
+		clearTimeout(focusTimeout)
+	})
+
+	const locales = inject<typeof defaultLocales>(localesKey)!
+
+</script>
+
+<template>
+	<div
+		ref="monthSelector"
+		class="month-selector"
+		role="group"
+		:aria-label="locales.monthSelectorLabel"
+	>
+		<button
+			v-for="monthIndex in 12"
+			:key="monthIndex"
+			:tabindex="monthIndex === activeMonth ? 0 : -1"
+			class="month-selector__month"
+			:class="[`month-${monthIndex}`, {
+				'month-selector__month--active': monthIndex === activeMonth,
+				'month-selector__month--selected': monthIndex === props.modelValue,
+			}]"
+			:aria-label="getMonthName(monthIndex)"
+			:aria-pressed="monthIndex === props.modelValue"
+			@click="() => emits('update:modelValue', monthIndex)"
+			@keydown.left.prevent="selectPreviousMonth"
+			@keydown.right.prevent="selectNextMonth"
+			@keydown.up.prevent="selectPreviousRow"
+			@keydown.down.prevent="selectNextRow"
+			@keydown.enter.stop
+			@keydown.space.stop
+		>
+			{{ getMonthShortName(monthIndex) }}
+		</button>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.month-selector {
+	height: 288px;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	align-items: center;
+	grid-gap: 0 24px;
+	padding-inline: 32px;
+}
+
+.month-selector__month {
+	height: 40px;
+	padding-inline: 16px;
+	border: 2px solid #fff;
+	cursor: pointer;
+	text-align: center;
+	min-width: 33px;
+	font-size: var(--v-typography-body2-font-size, 1rem);
+	border-radius: 99px;
+	font-weight: bold;
+
+	&:hover {
+		/* stylelint-disable-next-line custom-property-pattern */
+		background-color: rgb(var(--v-theme-interactiveHover, 227, 234, 252));
+	}
+}
+
+.month-selector__month--selected {
+	/* stylelint-disable-next-line custom-property-pattern */
+	background-color: rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	color: white;
+
+	&:hover {
+		/* stylelint-disable-next-line custom-property-pattern */
+		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+	}
+}
+
+.month-selector__month--active:focus {
+	/* stylelint-disable-next-line custom-property-pattern */
+	outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+}
+</style>

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerFooter.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+	import { mdiCalendarMonthOutline } from '@mdi/js'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+
+	const emits = defineEmits<{
+		(e: 'update:modelValue', value: string): void
+	}>()
+
+	function selectCurrentMonth() {
+		const currentMonth = new Date().getMonth() + 1
+		const currentYear = new Date().getFullYear()
+		emits('update:modelValue', `${String(currentMonth).padStart(2, '0')}/${currentYear}`)
+	}
+
+	const btnText = 'Mois actuel'
+	const btnLabel = `Sélectionner le mois en cours`
+</script>
+
+<template>
+	<div class="month-picker-footer">
+		<button
+			class="month-picker-footer__current-month-btn"
+			type="button"
+			:aria-label="btnLabel"
+			:title="btnLabel"
+			@click="selectCurrentMonth"
+		>
+			<SyIcon
+				:icon="mdiCalendarMonthOutline"
+				decorative
+			/>
+			{{ btnText }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.month-picker-footer {
+	padding: 0 12px 12px;
+}
+
+.month-picker-footer__current-month-btn {
+	display: flex;
+	gap: 8px;
+	margin: auto;
+	margin-block: 8px;
+	padding: 8px;
+	text-align: center;
+	font-weight: bold;
+	font-size: var(--v-typography-body2-font-size, 1rem);
+	border-radius: 99px;
+	color: rgb(var(--v-theme-primary, 12, 65, 154));
+	margin-bottom: 2px;
+
+	&:focus-visible {
+		/* stylelint-disable-next-line custom-property-pattern */
+		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	}
+}
+</style>

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { mdiChevronDown } from '@mdi/js'
+	import { computed, inject, type ComputedRef } from 'vue'
+	import { locales as defaultLocales, localesKey } from '../locales'
+	import { dateToString } from './utils'
+
+	const props = defineProps<{
+		modelValue: string | undefined
+		view: 'months' | 'years'
+		title: string
+		minYear: number
+		maxYear: number
+		id: string
+	}>()
+
+	const emits = defineEmits<{
+		(e: 'update:view', value: 'months' | 'years'): void
+	}>()
+
+	const localeDate = computed(() => {
+		const [month, year] = (props.modelValue || '').split('/').map(Number)
+		const isYearValid = year && !isNaN(year)
+		const isMonthValid = month && !isNaN(month) && month >= 1 && month <= 12
+		if (isMonthValid && isYearValid) {
+			return dateToString(new Date(year, month - 1))
+		}
+		else return dateToString(new Date())
+	})
+
+	const formatter = Intl.DateTimeFormat(navigator.language, { month: 'long' })
+
+	const locales = inject<ComputedRef<typeof defaultLocales>>(localesKey)!
+
+	const btnLabel = computed(() => {
+		if (props.view === 'months') {
+			return props.modelValue ? parseInt(props.modelValue.split('/')[1] || '', 10) : (new Date().getFullYear())
+		}
+		else {
+			const month = props.modelValue ? parseInt(props.modelValue.split('/')[0] || '', 10) : (new Date().getMonth() + 1)
+			return formatter.format(new Date(2000, month - 1))
+		}
+	})
+
+	const btnAriaLabel = computed(() => {
+		const labels = locales.value
+		if (props.view === 'months') {
+			const selectedYear = props.modelValue ? parseInt(props.modelValue.split('/')[1] || '', 10) : undefined
+			if (selectedYear && !isNaN(selectedYear) && selectedYear >= props.minYear && selectedYear <= props.maxYear) {
+				return labels.yearBtnLabelSelected(String(selectedYear))
+			}
+			else {
+				return labels.yearBtnLabelUnselected(String(new Date().getFullYear()))
+			}
+		}
+		else {
+			const selectedMonth = props.modelValue ? parseInt(props.modelValue.split('/')[0] || '', 10) : undefined
+			if (selectedMonth && !isNaN(selectedMonth)) {
+				const monthName = formatter.format(new Date(2000, selectedMonth - 1))
+				return labels.monthBtnLabelSelected(monthName)
+			}
+			else {
+				const currentMonthName = formatter.format(new Date())
+				return labels.monthBtnLabelUnselected(currentMonthName)
+			}
+		}
+	})
+
+</script>
+
+<template>
+	<div class="visual-picker-header">
+		<div
+			:id="`${props.id}-title`"
+			class="visual-picker-header__title"
+		>
+			{{ title }}
+		</div>
+		<div class="visual-picker-header__date">
+			{{ localeDate }}
+		</div>
+	</div>
+	<div
+		class="visual-picker-subheader"
+	>
+		<button
+			type="button"
+			class="visual-picker-year-btn"
+			:title="btnAriaLabel"
+			:aria-label="btnAriaLabel"
+			@click="emits('update:view', props.view === 'months' ? 'years' : 'months')"
+		>
+			{{ btnLabel }}
+			<SyIcon
+				:icon="mdiChevronDown"
+				decorative
+			/>
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.visual-picker-header {
+	padding-block: 16px;
+	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
+	color: #fff;
+}
+
+.visual-picker-header__title {
+	padding-inline: 24px 12px;
+	padding-bottom: 16px;
+	font-size: var(--v-typography-caption-font-size, 0.875rem);
+	font-weight: 400;
+	letter-spacing: 0.125rem;
+	line-height: 150%;
+}
+
+.visual-picker-header__date {
+	font-size: var(--v-typography-h3-font-size, 1.5rem);
+	font-weight: var(--v-typography-h3-font-weight, 700);
+	line-height: var(--v-typography-h3-line-height, 130%);
+	letter-spacing: var(--v-typography-h3-letter-spacing, 0%);
+	text-transform: capitalize;
+	margin-left: 20px;
+}
+
+.visual-picker-subheader {
+	height: 56px;
+	padding: 4px;
+	display: flex;
+	justify-content: center;
+}
+
+.visual-picker-year-btn {
+	display: flex;
+	gap: 4px;
+	margin: auto;
+	padding: 0.2rem 0.5rem;
+	border-radius: 99px;
+	font-size: var(--v-typography-body1-font-size, 1.125rem);
+	font-weight: bold;
+	cursor: pointer;
+
+	&:focus-visible {
+		/* stylelint-disable-next-line custom-property-pattern */
+		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	}
+}
+</style>

package/src/components/MonthPicker/MonthPickerVisual/YearSelector.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+	import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+	import { useYearGrid } from './useYearGrid'
+	import { localesKey, type locales as defaultLocales } from '../locales'
+
+	const props = defineProps<{
+		min: number
+		max: number
+		order: 'asc' | 'desc'
+		modelValue?: number
+	}>()
+
+	const yearSelector = ref<HTMLElement | null>(null)
+
+	const emits = defineEmits<{
+		(event: 'update:modelValue', value: number): void
+	}>()
+
+	function getFocusedYear() {
+		if (props.modelValue && props.modelValue >= props.min && props.modelValue <= props.max) {
+			return props.modelValue
+		}
+		const currentYear = new Date().getFullYear()
+		if (currentYear >= props.min && currentYear <= props.max) {
+			return currentYear
+		}
+		else {
+			return props.order === 'asc' ? props.min : props.max
+		}
+	}
+
+	const {
+		activeYear,
+		selectNextYear,
+		selectPreviousYear,
+		selectNextRow,
+		selectPreviousRow,
+	} = useYearGrid(
+		yearSelector,
+		computed(() => props.min),
+		computed(() => props.max),
+		getFocusedYear(),
+	)
+
+	let focusTimeout: ReturnType<typeof setTimeout> | undefined
+
+	onMounted(() => {
+		const selectedYearElement = yearSelector.value!.querySelector<HTMLElement>(`.year-${getFocusedYear()}`)
+		selectedYearElement!.focus()
+
+		// When the menu opens, the transition can cause the focus to be lost, so we ensure it is set after the transition begins.
+		focusTimeout = setTimeout(() => {
+			selectedYearElement!.focus()
+		}, 0)
+	})
+
+	watch(() => props.order, () => {
+		const selectedYearElement = yearSelector.value!.querySelector<HTMLElement>(`.year-${getFocusedYear()}`)
+		selectedYearElement!.focus()
+	})
+
+	onUnmounted(() => {
+		clearTimeout(focusTimeout)
+	})
+
+	const locales = inject<typeof defaultLocales>(localesKey)!
+
+</script>
+
+<template>
+	<div
+		ref="yearSelector"
+		class="year-selector"
+		role="group"
+		:aria-label="locales.yearSelectorLabel"
+	>
+		<button
+			v-for="year of Array.from({ length: props.max - props.min + 1 }, (_, i) => props.order === 'asc' ? props.min + i : props.max - i)"
+			:key="year"
+			:tabindex="year === activeYear ? 0 : -1"
+			class="year-selector__year"
+			:class="[`year-${year}`, {
+				'year-selector__year--active': year === activeYear,
+				'year-selector__year--selected': year === props.modelValue,
+			}]"
+			:aria-pressed="year === props.modelValue"
+			@click="() => emits('update:modelValue', year)"
+			@keydown.left.prevent="props.order === 'asc' ? selectPreviousYear() : selectNextYear()"
+			@keydown.right.prevent="props.order === 'asc' ? selectNextYear() : selectPreviousYear()"
+			@keydown.up.prevent="props.order === 'asc' ? selectPreviousRow() : selectNextRow()"
+			@keydown.down.prevent="props.order === 'asc' ? selectNextRow() : selectPreviousRow()"
+			@keydown.enter.stop
+			@keydown.space.stop
+		>
+			{{ year }}
+		</button>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.year-selector {
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	max-height: 288px;
+	grid-gap: 0 24px;
+	padding-inline: 32px;
+	overflow: auto;
+}
+
+.year-selector__year {
+	height: 40px;
+	margin-block: 2px;
+	border: 2px solid #fff;
+	cursor: pointer;
+	text-align: center;
+	min-width: 33px;
+	font-size: var(--v-typography-body2-font-size, 1rem);
+	border-radius: 99px;
+	font-weight: bold;
+
+	&:hover {
+		/* stylelint-disable-next-line custom-property-pattern */
+		background-color: rgb(var(--v-theme-interactiveHover, 227, 234, 252));
+	}
+}
+
+.year-selector__year--selected {
+	/* stylelint-disable-next-line custom-property-pattern */
+	background-color: rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	color: white;
+
+	&:hover {
+		/* stylelint-disable-next-line custom-property-pattern */
+		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+	}
+}
+
+.year-selector__year--active:focus {
+	/* stylelint-disable-next-line custom-property-pattern */
+	outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+}
+</style>