@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

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)
+	})
+})

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

@@ -0,0 +1,105 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NumberPicker > renders correctly 1`] = `
+"<fieldset data-v-30bbac4d="" class="vd-number-picker">
+  <legend data-v-30bbac4d="" class="d-sr-only">Pourriez-vous donner une note ?</legend>
+  <legend data-v-30bbac4d="" class="text-h6 mb-6">Pourriez-vous donner une note ?</legend>
+  <div data-v-30bbac4d="" class="d-inline-block">
+    <div data-v-30bbac4d="" class="v-rating v-theme--light d-flex flex-wrap max-width-none"><label for="v-rating-0-0" class=""><span class="v-rating__hidden">Rating 0 of 10</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 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 1 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">1</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 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 2 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">2</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 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 3 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">3</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 class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-4" class=""><span class="v-rating__hidden">Rating 4 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 4 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">4</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-4" type="radio" tabindex="-1" value="4"></div>
+        <!---->
+      </div>
+      <div class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-5" class=""><span class="v-rating__hidden">Rating 5 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 5 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">5</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-5" type="radio" tabindex="-1" value="5"></div>
+        <!---->
+      </div>
+      <div class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-6" class=""><span class="v-rating__hidden">Rating 6 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 6 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">6</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-6" type="radio" tabindex="-1" value="6"></div>
+        <!---->
+      </div>
+      <div class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-7" class=""><span class="v-rating__hidden">Rating 7 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 7 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">7</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-7" type="radio" tabindex="-1" value="7"></div>
+        <!---->
+      </div>
+      <div class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-8" class=""><span class="v-rating__hidden">Rating 8 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 8 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">8</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-8" type="radio" tabindex="-1" value="8"></div>
+        <!---->
+      </div>
+      <div class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-9" class=""><span class="v-rating__hidden">Rating 9 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 9 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">9</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-9" type="radio" tabindex="-1" value="9"></div>
+        <!---->
+      </div>
+      <div class="v-rating__wrapper">
+        <!---->
+        <div class="v-rating__item"><label for="v-rating-0-10" class=""><span class="v-rating__hidden">Rating 10 of 10</span><button data-v-30bbac4d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-x-small v-btn--variant-outlined text-body-2 pa-0 mr-2" style="height: 36px;" aria-label="Note de 10 sur 10."><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">10</span>
+              <!---->
+              <!---->
+            </button></label><input class="v-rating__hidden" name="v-rating-0" id="v-rating-0-10" type="radio" tabindex="-1" value="10"></div>
+        <!---->
+      </div>
+    </div>
+    <!--v-if-->
+  </div>
+</fieldset>"
+`;

package/src/components/RatingPicker/Rating.ts

@@ -0,0 +1,45 @@
+import { ref, computed } from 'vue'
+
+export interface RatingInterface {
+	emitInputEvent(event: string | number): void
+}
+
+export enum RatingEnum {
+	EMOTION = 'emotion',
+	NUMBER = 'number',
+	STARS = 'stars',
+}
+
+export const RATING_ENUM_VALUES = Object.values(RatingEnum)
+
+export enum AlertTypeEnum {
+	INFO = 'info',
+	SUCCESS = 'success',
+	WARNING = 'warning',
+	ERROR = 'error',
+}
+
+export const ALERT_TYPE_ENUM_VALUES = Object.values(AlertTypeEnum)
+
+export function useRating(props: {
+	label: string | null | undefined
+	readonly: boolean
+	modelValue: number
+}, emit: (event: 'update:modelValue', value: number) => void) {
+	const internalValue = ref<number>(props.modelValue)
+
+	const hasAnswered = computed(() => internalValue.value !== -1)
+
+	function emitInputEvent(value: string | number): void {
+		if (!props.readonly) {
+			internalValue.value = typeof value === 'number' ? value : parseInt(value, 10)
+			emit('update:modelValue', internalValue.value) // Emit the updated value
+		}
+	}
+
+	return {
+		internalValue,
+		hasAnswered,
+		emitInputEvent,
+	}
+}

package/src/components/RatingPicker/RatingPicker.mdx

@@ -0,0 +1,56 @@
+import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
+import * as RatingPickerStories from './RatingPicker.stories';
+import RatingPicker from './RatingPicker.vue';
+
+<Meta title="Composants/Feedback/RatingPicker" component={RatingPicker}/>
+
+# RatingPicker
+
+L’élément `RatingPicker` permet de recueillir l’avis d’un utilisateur.
+
+<Canvas story={{height: '150px'}} of={RatingPickerStories.Default}/>
+
+# API
+
+<Controls of={RatingPickerStories.Default}/>
+
+## Utilisation de base
+
+    <Source
+        dark
+        code={`
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { RatingPicker } from '@cnamts/synapse'
+
+    const ratingEmotion = ref(-1)
+    const ratingNumber = ref(-1)
+    const ratingStars = ref(-1)
+</script>
+
+<template>
+   {{ ratingEmotion }}
+    <RatingPicker
+        v-model="ratingEmotion"
+        label="Êtes-vous satisfait de ce service ?"
+        type="emotion"
+    />
+    <br>
+    {{ ratingNumber }}
+    <RatingPicker
+        v-model="ratingNumber"
+        label="Êtes-vous satisfait de ce service ?"
+        type="number"
+    />
+    <br>
+    {{ ratingStars }}
+    <RatingPicker
+        v-model="ratingStars"
+        label="Êtes-vous satisfait de ce service ?"
+        type="stars"
+    />
+</template>
+`}
+/>
+
+