@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RatingPicker/EmotionPicker/EmotionPicker.vue

@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+	import { type PropType, computed, onMounted } from 'vue'
+	import { RatingEnum, useRating } from '../Rating'
+	import { locales } from './locales'
+	import { propValidator } from '@/utils/propValidator'
+	import {
+		mdiEmoticonHappyOutline,
+		mdiEmoticonSadOutline,
+		mdiEmoticonNeutralOutline,
+	} from '@mdi/js'
+
+	import { useDisplay } from 'vuetify'
+
+	const { smAndDown } = useDisplay()
+	const isMobile = computed(() => smAndDown.value)
+
+	const props = defineProps({
+		label: {
+			type: String as PropType<string | null>,
+			default: RatingEnum.EMOTION,
+		},
+		length: {
+			type: Number,
+			default: 3,
+			validator: (value: number) => propValidator('length', ['2', '3'], value.toString()),
+		},
+		itemLabels: {
+			type: Array as PropType<string[]>,
+			default: () => locales.defaultEmotionLabels,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Number,
+			default: -1,
+		},
+	})
+
+	const sadIcon = mdiEmoticonSadOutline
+	const neutralIcon = mdiEmoticonNeutralOutline
+	const happyIcon = mdiEmoticonHappyOutline
+
+	const btnSize = computed(() => {
+		return isMobile.value ? '70px' : '88px'
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+	const { hasAnswered, emitInputEvent } = useRating(props, emit)
+
+	const isActive = (index: number) => {
+		return index === props.modelValue - 1
+	}
+
+	const getIcon = (index: number) => {
+		if (index === 0) {
+			return sadIcon
+		}
+		if (index === 1 && props.length === 3) {
+			return neutralIcon
+		}
+		return happyIcon
+	}
+
+	const getColor = (index: number) => {
+		const colors = ['sad', 'neutral', 'happy']
+		if (props.length === 2) {
+			const filteredColors = colors.filter(item => item !== 'neutral')
+			return filteredColors[index]
+		}
+		return colors[index]
+	}
+
+	const getEmotionLabel = (value: number) => {
+		if (props.length === 2) {
+			const filteredLabels = props.itemLabels.filter((_, index) => index !== 1)
+			return filteredLabels[value]
+		}
+		return props.itemLabels[value]
+	}
+
+	onMounted(() => {
+		const hiddenInputs = document.querySelectorAll('.v-rating__hidden')
+		hiddenInputs.forEach((input) => {
+			(input as HTMLElement).setAttribute('aria-hidden', 'true')
+		})
+	})
+</script>
+
+<template>
+	<fieldset class="vd-emotion-picker">
+		<legend class="text-h6 mb-6">
+			<slot name="label">
+				{{ props.label }}
+			</slot>
+		</legend>
+
+		<VRating
+			:model-value="props.modelValue"
+			:length="props.length"
+			:readonly="props.readonly"
+			class="max-width-none mx-n1 mx-sm-n2"
+			@update:model-value="(value) => emit('update:modelValue', value)"
+		>
+			<template #item="{ index }">
+				<VBtn
+					:disabled="props.readonly || hasAnswered"
+					:title="getEmotionLabel(index)"
+					:aria-pressed="isActive(index).toString()"
+					:class="[getColor(index), { 'v-btn--active': isActive(index) }]"
+					:min-height="btnSize"
+					:min-width="btnSize"
+					variant="text"
+					class="rounded-lg px-1 px-sm-4 mx-1 mx-sm-2"
+					@click="emitInputEvent(index + 1)"
+				>
+					<VIcon
+						size="40"
+						color="currentColor"
+						class="pa-0"
+					>
+						{{ getIcon(index) }}
+					</VIcon>
+
+					<span
+						v-if="getEmotionLabel(index)"
+						:class="{ 'text-secondary': !isActive(index) }"
+						class="text-subtitle-2 mt-1"
+					>
+						{{ getEmotionLabel(index) }}
+					</span>
+				</VBtn>
+			</template>
+		</VRating>
+	</fieldset>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.vd-emotion-picker {
+	border: 0;
+}
+
+.v-rating .v-btn {
+	transition: 0.2s;
+	border: 1px solid transparent;
+	opacity: 1;
+	background: transparent;
+
+	:deep(.v-btn__content) {
+		flex-direction: column;
+	}
+
+	.text-secondary {
+		color: tokens.$grey-darken-20 !important;
+	}
+
+	&.sad {
+		color: tokens.$orange-darken-40 !important;
+	}
+
+	&.neutral {
+		color: tokens.$yellow-darken-40 !important;
+	}
+
+	&.happy {
+		color: tokens.$turquoise-darken-40 !important;
+	}
+
+	&--active.v-btn--disabled .v-icon {
+		color: currentcolor !important;
+	}
+
+	&:focus,
+	&--active {
+		border-color: currentcolor !important;
+	}
+
+	&:hover,
+	&:focus,
+	&--active {
+		:deep(.v-btn__overlay, .v-btn__underlay) {
+			display: none;
+		}
+
+		&.sad {
+			background: tokens.$orange-lighten-90;
+		}
+
+		&.neutral {
+			background: tokens.$yellow-lighten-90;
+		}
+
+		&.happy {
+			background: tokens.$turquoise-lighten-90;
+		}
+	}
+}
+
+.v-theme--light.v-btn--disabled :deep(.v-icon) {
+	color: tokens.$grey-lighten-20 !important;
+}
+</style>

package/src/components/RatingPicker/EmotionPicker/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	defaultEmotionLabels: ['Pas du tout', 'Moyen', 'Parfait !'],
+}

package/src/components/RatingPicker/EmotionPicker/tests/EmotionPicker.spec.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import EmotionPicker from '../EmotionPicker.vue'
+
+describe('EmotionPicker', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(EmotionPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				label: 'Pourriez-vous donner une note ?',
+				itemLabels: ['Pas du tout', 'Peut-être', 'Oui super'],
+			},
+		})
+
+		expect(wrapper.html()).toContain('Pourriez-vous donner une note ?')
+		expect(wrapper.html()).toContain('Pas du tout')
+		expect(wrapper.html()).toContain('Peut-être')
+		expect(wrapper.html()).toContain('Oui super')
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with only 2 items', () => {
+		const wrapper = mount(EmotionPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				label: 'Pourriez-vous donner une note ?',
+				itemLabels: ['Pas du tout', 'Not used', 'Oui super'],
+				length: 2,
+			},
+		})
+
+		expect(wrapper.html()).toContain('Pourriez-vous donner une note ?')
+		expect(wrapper.html()).toContain('Pas du tout')
+		expect(wrapper.html()).toContain('Oui super')
+		expect(wrapper.html()).not.toContain('Not used')
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders in mobile mode', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(600)
+
+		const wrapper = mount(EmotionPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				label: 'Pourriez-vous donner une note ?',
+				itemLabels: ['Pas du tout', 'Peut-être', 'Oui super'],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.html()).toContain('70px')
+	})
+
+	it('emit the right value when an item is clicked', async () => {
+		const wrapper = mount(EmotionPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const items = wrapper.findAll('button')
+		await items[0].trigger('click')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(1)
+	})
+
+	it('have no labels when no labels are provided', () => {
+		const wrapper = mount(EmotionPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				itemLabels: [],
+			},
+		})
+
+		wrapper.findAll('button').forEach((button) => {
+			expect(button.text()).toBe('')
+		})
+	})
+
+	it('change the style of the buttons when an item is clicked', async () => {
+		const wrapper = mount(EmotionPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const items = wrapper.findAll('button')
+
+		await wrapper.setProps({ modelValue: 1 })
+		expect(items[0].classes()).toContain('v-btn--active')
+	})
+})

package/src/components/RatingPicker/EmotionPicker/tests/__snapshots__/EmotionPicker.spec.ts.snap

@@ -0,0 +1,66 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EmotionPicker > renders correctly 1`] = `
+"<fieldset data-v-9f5befe4="" class="vd-emotion-picker">
+  <legend data-v-9f5befe4="" class="text-h6 mb-6">Pourriez-vous donner une note ?</legend>
+  <div data-v-9f5befe4="" class="v-rating v-theme--light max-width-none mx-n1 mx-sm-n2"><label for="v-rating-0-0" class=""><span class="v-rating__hidden">Rating 0 of 3</span>
+      <!---->
+    </label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-0" type="radio" checked="" tabindex="-1" value="0">
+    <div class="v-rating__wrapper">
+      <!---->
+      <div class="v-rating__item"><label for="v-rating-0-1" class=""><span class="v-rating__hidden">Rating 1 of 3</span><button data-v-9f5befe4="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text sad rounded-lg px-1 px-sm-4 mx-1 mx-sm-2" style="min-height: 88px; min-width: 88px;" title="Pas du tout" aria-pressed="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator=""><i data-v-9f5befe4="" class="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z mdi v-icon notranslate v-theme--light text-currentColor pa-0" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-9f5befe4="" class="text-secondary text-subtitle-2 mt-1">Pas du tout</span></span>
+            <!---->
+            <!---->
+          </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-1" type="radio" tabindex="-1" value="1"></div>
+      <!---->
+    </div>
+    <div class="v-rating__wrapper">
+      <!---->
+      <div class="v-rating__item"><label for="v-rating-0-2" class=""><span class="v-rating__hidden">Rating 2 of 3</span><button data-v-9f5befe4="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text neutral rounded-lg px-1 px-sm-4 mx-1 mx-sm-2" style="min-height: 88px; min-width: 88px;" title="Peut-être" aria-pressed="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator=""><i data-v-9f5befe4="" class="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M8.5,11A1.5,1.5 0 0,1 7,9.5A1.5,1.5 0 0,1 8.5,8A1.5,1.5 0 0,1 10,9.5A1.5,1.5 0 0,1 8.5,11M17,9.5A1.5,1.5 0 0,1 15.5,11A1.5,1.5 0 0,1 14,9.5A1.5,1.5 0 0,1 15.5,8A1.5,1.5 0 0,1 17,9.5M16,14V16H8V14H16Z mdi v-icon notranslate v-theme--light text-currentColor pa-0" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-9f5befe4="" class="text-secondary text-subtitle-2 mt-1">Peut-être</span></span>
+            <!---->
+            <!---->
+          </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-2" type="radio" tabindex="-1" value="2"></div>
+      <!---->
+    </div>
+    <div class="v-rating__wrapper">
+      <!---->
+      <div class="v-rating__item"><label for="v-rating-0-3" class=""><span class="v-rating__hidden">Rating 3 of 3</span><button data-v-9f5befe4="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text happy rounded-lg px-1 px-sm-4 mx-1 mx-sm-2" style="min-height: 88px; min-width: 88px;" title="Oui super" aria-pressed="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator=""><i data-v-9f5befe4="" class="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z mdi v-icon notranslate v-theme--light text-currentColor pa-0" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-9f5befe4="" class="text-secondary text-subtitle-2 mt-1">Oui super</span></span>
+            <!---->
+            <!---->
+          </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-3" type="radio" tabindex="-1" value="3"></div>
+      <!---->
+    </div>
+  </div>
+</fieldset>"
+`;
+
+exports[`EmotionPicker > renders correctly with only 2 items 1`] = `
+"<fieldset data-v-9f5befe4="" class="vd-emotion-picker">
+  <legend data-v-9f5befe4="" class="text-h6 mb-6">Pourriez-vous donner une note ?</legend>
+  <div data-v-9f5befe4="" class="v-rating v-theme--light max-width-none mx-n1 mx-sm-n2"><label for="v-rating-0-0" class=""><span class="v-rating__hidden">Rating 0 of 2</span>
+      <!---->
+    </label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-0" type="radio" checked="" tabindex="-1" value="0">
+    <div class="v-rating__wrapper">
+      <!---->
+      <div class="v-rating__item"><label for="v-rating-0-1" class=""><span class="v-rating__hidden">Rating 1 of 2</span><button data-v-9f5befe4="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text sad rounded-lg px-1 px-sm-4 mx-1 mx-sm-2" style="min-height: 88px; min-width: 88px;" title="Pas du tout" aria-pressed="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator=""><i data-v-9f5befe4="" class="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z mdi v-icon notranslate v-theme--light text-currentColor pa-0" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-9f5befe4="" class="text-secondary text-subtitle-2 mt-1">Pas du tout</span></span>
+            <!---->
+            <!---->
+          </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-1" type="radio" tabindex="-1" value="1"></div>
+      <!---->
+    </div>
+    <div class="v-rating__wrapper">
+      <!---->
+      <div class="v-rating__item"><label for="v-rating-0-2" class=""><span class="v-rating__hidden">Rating 2 of 2</span><button data-v-9f5befe4="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text happy rounded-lg px-1 px-sm-4 mx-1 mx-sm-2" style="min-height: 88px; min-width: 88px;" title="Oui super" aria-pressed="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator=""><i data-v-9f5befe4="" class="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z mdi v-icon notranslate v-theme--light text-currentColor pa-0" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-9f5befe4="" class="text-secondary text-subtitle-2 mt-1">Oui super</span></span>
+            <!---->
+            <!---->
+          </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-2" type="radio" tabindex="-1" value="2"></div>
+      <!---->
+    </div>
+  </div>
+</fieldset>"
+`;

package/src/components/RatingPicker/NumberPicker/NumberPicker.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+	import { computed, onMounted } from 'vue'
+	import { RatingEnum, useRating } from '../Rating'
+	import { locales } from './locales'
+	import type { PropType } from 'vue'
+
+	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+
+	import { useDisplay } from 'vuetify'
+
+	interface SelectItem {
+		text: string
+		value: number
+	}
+
+	const props = defineProps({
+		label: {
+			type: String as PropType<string | undefined>,
+			default: RatingEnum.NUMBER,
+		},
+		length: {
+			type: Number,
+			default: 10,
+		},
+		itemLabels: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Number,
+			default: -1,
+		},
+	})
+
+	const { smAndDown } = useDisplay()
+	const isMobile = computed(() => smAndDown.value)
+
+	const emit = defineEmits(['update:modelValue'])
+	const { hasAnswered, emitInputEvent } = useRating(props, emit)
+
+	const selectItems = computed<SelectItem[]>(() => {
+		return [...Array(props.length)].map((_, index) => ({
+			text: `${index + 1}`,
+			value: index + 1,
+		}))
+	})
+
+	const shouldDisplayLabels = computed(() => props.itemLabels.length === 2)
+
+	onMounted(() => {
+		const hiddenInputs = document.querySelectorAll('.v-rating__hidden')
+		hiddenInputs.forEach((input) => {
+			(input as HTMLElement).setAttribute('aria-hidden', 'true')
+		})
+	})
+</script>
+
+<template>
+	<fieldset class="vd-number-picker">
+		<legend class="d-sr-only">
+			<slot name="label">
+				{{ props.label }}
+			</slot>
+		</legend>
+		<SySelect
+			v-if="isMobile"
+			:model-value="props.modelValue === -1 ? undefined : props.modelValue"
+			:label="props.label"
+			:disabled="props.readonly || hasAnswered"
+			:items="selectItems"
+			@update:model-value="(value) => emit('update:modelValue', value)"
+		/>
+		<template v-else>
+			<legend class="text-h6 mb-6">
+				<slot name="label">
+					{{ props.label }}
+				</slot>
+			</legend>
+			<div
+				v-if="!hasAnswered"
+				class="d-inline-block"
+			>
+				<VRating
+					:model-value="props.modelValue"
+					:length="props.length"
+					:readonly="props.readonly || hasAnswered"
+					class="d-flex flex-wrap max-width-none"
+					@update:model-value="(value) => emit('update:modelValue', value)"
+				>
+					<template #item="{ index }">
+						<VBtn
+							:aria-label="locales.ariaLabel(index + 1, props.length)"
+							:disabled="props.readonly"
+							size="x-small"
+							variant="outlined"
+							color="primary"
+							height="36px"
+							class="text-body-2 pa-0 mr-2"
+							@click="emitInputEvent(index + 1)"
+						>
+							{{ index + 1 }}
+						</VBtn>
+					</template>
+				</VRating>
+				<div
+					v-if="shouldDisplayLabels"
+					class="d-flex justify-space-between mt-1"
+				>
+					<span
+						:aria-label="`${locales.ariaLabel(1, props.length)} ${
+							props.itemLabels[0]
+						}.`"
+						class="text-caption"
+						v-text="props.itemLabels[0]"
+					/>
+					<span
+						:aria-label="`${locales.ariaLabel(props.length, props.length)} ${
+							props.itemLabels[1]
+						}.`"
+						class="text-caption mr-2"
+						v-text="props.itemLabels[1]"
+					/>
+				</div>
+			</div>
+			<p
+				v-else
+				:aria-label="locales.ariaLabel(props.modelValue, props.length)"
+				class="mb-0 d-flex align-center"
+			>
+				<VBtn
+					aria-hidden="true"
+					:disabled="true"
+					size="x-small"
+					variant="outlined"
+					color="primary"
+					height="36px"
+					class="vd-btn-answer text-body-2 mr-1 pa-0"
+				>
+					{{ props.modelValue }}
+				</VBtn>
+				/ {{ props.length }}
+			</p>
+		</template>
+	</fieldset>
+</template>
+
+<style lang="scss" scoped>
+.vd-number-picker {
+	border: 0;
+}
+
+.vd-btn-answer.v-btn.v-btn--disabled {
+	opacity: 1;
+}
+</style>

package/src/components/RatingPicker/NumberPicker/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	ariaLabel: (index: number, length: number): string =>
+		`Note de ${index} sur ${length}.`,
+}

package/src/components/RatingPicker/NumberPicker/tests/NumberPicker.spec.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import NumberPicker from '../NumberPicker.vue'
+
+describe('NumberPicker', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(NumberPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				label: 'Pourriez-vous donner une note ?',
+			},
+		})
+
+		const btns = wrapper.findAll('button')
+
+		expect(btns).toHaveLength(10)
+		btns.forEach((btn, i) => {
+			expect(btn.text()).toBe((i + 1).toString())
+		})
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('emits an event when a number is selected', async () => {
+		const wrapper = mount(NumberPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.findAll('button')!.at(3)!.trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual([4])
+	})
+
+	it('change the displayed value when the modelValue is updated', async () => {
+		const wrapper = mount(NumberPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: 3,
+			},
+		})
+
+		const btn = wrapper.findAll('button')[0]
+
+		await wrapper.setProps({ modelValue: 4 })
+		expect(btn.text()).toBe('4')
+
+		await wrapper.setProps({ modelValue: 5 })
+		expect(btn.text()).toBe('5')
+	})
+
+	it('renders correctly in xs window', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(600)
+
+		const wrapper = mount(NumberPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.vm.$nextTick()
+
+		const select = wrapper.find('.sy-select')
+
+		expect(select.exists()).toBe(true)
+	})
+})