@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/MonthPicker/MonthPicker.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+	import { computed, provide, ref, useAttrs, type ComponentPublicInstance } from 'vue'
+	import MonthPickerInput from './MonthPickerText/MonthPickerInput.vue'
+	import MonthPickerVisual from './MonthPickerVisual/MonthPickerVisual.vue'
+	import { watch } from 'vue'
+	import { locales as defaultLocales, localesKey } from './locales'
+	import { defaultTextFieldProps, useTextField, type TextFieldProps } from './MonthPickerText/useTextField'
+	import { defaultMonthPickerVisualProps, type MonthPickerVisualProps } from './MonthPickerVisual/MonthPickerVisualProps'
+	import { useMonthPickerValidation, type ValidationProps } from './useMonthPickerValidation'
+
+	const props = withDefaults(defineProps<{
+		modelValue?: string
+		locales?: typeof defaultLocales
+		disabled?: boolean
+		readonly?: boolean
+	} & TextFieldProps & ValidationProps & Partial<MonthPickerVisualProps>>(), {
+		modelValue: undefined,
+		locales: () => defaultLocales,
+		hint: 'Format MM/AAAA',
+		showSuccessMessages: false,
+		...defaultMonthPickerVisualProps,
+		...defaultTextFieldProps,
+		disabled: false,
+		readonly: false,
+	})
+
+	provide(localesKey, computed(() => props.locales))
+
+	const emits = defineEmits<{
+		(e: 'update:modelValue', value: string | undefined): void
+		(e: 'update:open', value: boolean): void
+	}>()
+
+	const attrs = useAttrs()
+	const textInput = ref<ComponentPublicInstance<typeof MonthPickerInput> | null>(null)
+	const toggleBtn = computed(() => textInput.value?.toggleBtn)
+
+	const internalValue = ref<string | undefined>(undefined)
+
+	watch(
+		() => props.modelValue,
+		(newValue) => {
+			internalValue.value = newValue
+		},
+		{ immediate: true },
+	)
+
+	watch(internalValue, (newValue) => {
+		if (!props.readonly && !props.disabled) {
+			emits('update:modelValue', newValue)
+		}
+	})
+</script>
+
+<template>
+	<div class="month-picker">
+		<MonthPickerInput
+			ref="textInput"
+			v-model="internalValue"
+			v-bind="{
+				...attrs,
+				...useTextField(props).value,
+				...useMonthPickerValidation(props).value
+			}"
+		/>
+		<MonthPickerVisual
+			v-model="internalValue"
+			:text-input
+			:toggle-btn
+			:min-year
+			:max-year
+			:years-order
+			:initial-view
+			:disabled
+			:readonly
+			@update:open="emits('update:open', $event)"
+		/>
+	</div>
+</template>

package/src/components/MonthPicker/MonthPickerText/MonthPickerInput.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+	import { mdiCalendar } from '@mdi/js'
+	import { vMaska } from 'maska/vue'
+	import { nextTick, inject, ref, watch } from 'vue'
+	import { locales as defaultLocales, localesKey } from '../locales'
+	import type { TextFieldProps } from './useTextField'
+	import { useTextField } from './useTextField'
+	import { useMonthPickerValidation, type ValidationProps } from '../useMonthPickerValidation'
+
+	const props = defineProps<{
+		modelValue: string | undefined
+	} & TextFieldProps & ValidationProps>()
+
+	const emits = defineEmits<{
+		(e: 'update:modelValue', value: string | undefined): void
+	}>()
+
+	const locales = inject<typeof defaultLocales>(localesKey)!
+	const input = ref<InstanceType<typeof SyTextField>>()
+
+	const mask = '##/####'
+
+	const innerValue = ref<string | undefined>(props.modelValue)
+	watch(
+		() => props.modelValue,
+		async (newValue) => {
+			const shouldValidate = newValue !== innerValue.value
+			innerValue.value = newValue
+			if (shouldValidate) {
+				await nextTick()
+				input.value?.validateOnSubmit()
+			}
+		},
+	)
+
+	watch(innerValue, async (newValue) => {
+		if (newValue?.length === mask.length) {
+			await nextTick()
+			input.value?.validateOnSubmit()
+		}
+
+		emits('update:modelValue', newValue)
+	})
+
+	const toggleBtn = ref<HTMLButtonElement | null>(null)
+	defineExpose({
+		toggleBtn,
+	})
+</script>
+
+<template>
+	<SyTextField
+		ref="input"
+		v-model="innerValue"
+		v-maska="mask"
+		v-bind="{
+			...useTextField(props).value,
+			...useMonthPickerValidation(props).value
+		}"
+	>
+		<template #append>
+			<button
+				ref="toggleBtn"
+				type="button"
+				class="month-picker-input__toggle-btn"
+				:title="locales.btnLabel"
+				:aria-label="locales.btnLabel"
+			>
+				<SyIcon
+					:icon="mdiCalendar"
+					decorative
+				/>
+			</button>
+		</template>
+	</SyTextField>
+</template>
+
+<style scoped lang="scss">
+.error-field .month-picker-input__toggle-btn :deep(svg) {
+	color: rgb(var(--v-theme-error, 179, 63, 46));
+}
+
+.warning-field .month-picker-input__toggle-btn :deep(svg) {
+	color: rgb(var(--v-theme-warning, 96, 72, 14));
+}
+
+</style>

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>