@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RatingPicker/StarsPicker/StarsPicker.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+	import { ref, type PropType, onMounted } from 'vue'
+	import { RatingEnum, useRating } from '../Rating'
+	import { mdiStarOutline, mdiStar } from '@mdi/js'
+
+	const props = defineProps({
+		label: {
+			type: String as PropType<string | null>,
+			default: RatingEnum.STARS,
+		},
+		length: {
+			type: Number,
+			default: 5,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Number,
+			default: -1,
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+	const { hasAnswered, emitInputEvent } = useRating(props, emit)
+
+	const starOutlineIcon = mdiStarOutline
+	const starIcon = mdiStar
+	const hoverIndex = ref<number | null>(-1)
+
+	function isActive(index: number): boolean {
+		return props.modelValue - 1 === index
+	}
+
+	function isFilled(index: number): boolean {
+		const isHovered = hoverIndex.value !== null && hoverIndex.value >= index
+		const isActive = props.modelValue - 1 >= index
+		return isHovered || isActive
+	}
+
+	onMounted(() => {
+		const hiddenInputs = document.querySelectorAll('.v-rating__hidden')
+		hiddenInputs.forEach((input) => {
+			(input as HTMLElement).setAttribute('aria-hidden', 'true')
+		})
+	})
+</script>
+
+<template>
+	<fieldset class="vd-stars-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 || hasAnswered"
+			class="d-flex flex-wrap max-width-none mx-n3"
+			@update:model-value="(value) => emit('update:modelValue', value)"
+		>
+			<template #item="{ index }">
+				<button
+					:disabled="props.readonly"
+					:aria-pressed="isActive(index)"
+					:aria-label="`${index + 1} star`"
+					@mouseover="hoverIndex = index"
+					@focus="hoverIndex = index"
+					@mouseleave="hoverIndex = -1"
+					@blur="hoverIndex = -1"
+					@click="emitInputEvent(index + 1)"
+				>
+					<VIcon
+						:class="
+							isFilled(index)
+								? 'text-primary'
+								: 'text-blue-lighten'
+						"
+						size="36px"
+						class="py-0 px-2"
+					>
+						{{ isFilled(index) ? starIcon : starOutlineIcon }}
+					</VIcon>
+				</button>
+			</template>
+		</VRating>
+	</fieldset>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.vd-stars-picker {
+	border: 0;
+}
+
+.v-rating .v-icon {
+	width: 52px !important;
+	height: 36px !important;
+
+	&--disabled.text-primary {
+		color: tokens.$primary-base !important;
+	}
+
+	&.text-blue-lighten {
+		color: tokens.$blue-lighten-60 !important;
+	}
+
+	&--disabled.text-blue-lighten {
+		color: tokens.$blue-lighten-60 !important;
+	}
+}
+</style>

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

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import StarsPicker from '../StarsPicker.vue'
+import { VIcon } from 'vuetify/components'
+import { mdiStarOutline, mdiStar } from '@mdi/js'
+
+describe('StarsPicker', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(StarsPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				label: 'Pourriez-vous donner une note ?',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('emits an event when a number is selected', async () => {
+		const wrapper = mount(StarsPicker, {
+			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(StarsPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				modelValue: 3,
+			},
+		})
+
+		await wrapper.setProps({ modelValue: 4 })
+		expect(wrapper.findAll('button')[3].attributes('aria-pressed')).toBe(
+			'true',
+		)
+		await wrapper.setProps({ modelValue: 1 })
+		expect(wrapper.findAll('button')[3].attributes('aria-pressed')).toBe(
+			'false',
+		)
+		expect(wrapper.findAll('button')[0].attributes('aria-pressed')).toBe(
+			'true',
+		)
+	})
+
+	it('change the style of the stars on hover', async () => {
+		const wrapper = mount(StarsPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const buttons = wrapper.findAll('button')
+		await buttons.at(3)!.trigger('mouseover')
+
+		const icon = buttons!.at(3)!.findComponent(VIcon)
+		let slotContent = icon.vm.$slots.default!()![0].children
+		expect(slotContent).toContain(mdiStar)
+
+		await buttons.at(3)!.trigger('mouseleave')
+		slotContent = icon.vm.$slots.default!()![0].children
+		expect(slotContent).toContain(mdiStarOutline)
+	})
+
+	it('change the style of the stars on focus', async () => {
+		const wrapper = mount(StarsPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const buttons = wrapper.findAll('button')
+		await buttons.at(3)!.trigger('focus')
+
+		const icon = buttons!.at(3)!.findComponent(VIcon)
+		let slotContent = icon.vm.$slots.default!()![0].children
+		expect(slotContent).toContain(mdiStar)
+
+		await buttons.at(3)!.trigger('blur')
+		slotContent = icon.vm.$slots.default!()![0].children
+		expect(slotContent).toContain(mdiStarOutline)
+	})
+})

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

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StarsPicker > renders correctly 1`] = `
+"<fieldset data-v-b11635b9="" class="vd-stars-picker">
+  <legend data-v-b11635b9="" class="text-h6 mb-6">Pourriez-vous donner une note ?</legend>
+  <div data-v-b11635b9="" class="v-rating v-theme--light d-flex flex-wrap max-width-none mx-n3"><label for="v-rating-0-0" class=""><span class="v-rating__hidden">Rating 0 of 5</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 5</span><button data-v-b11635b9="" aria-pressed="false" aria-label="1 star"><i data-v-b11635b9="" class="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z mdi v-icon notranslate v-theme--light text-blue-lighten py-0 px-2" style="font-size: 36px; height: 36px; width: 36px;" aria-hidden="true"></i></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 5</span><button data-v-b11635b9="" aria-pressed="false" aria-label="2 star"><i data-v-b11635b9="" class="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z mdi v-icon notranslate v-theme--light text-blue-lighten py-0 px-2" style="font-size: 36px; height: 36px; width: 36px;" aria-hidden="true"></i></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 5</span><button data-v-b11635b9="" aria-pressed="false" aria-label="3 star"><i data-v-b11635b9="" class="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z mdi v-icon notranslate v-theme--light text-blue-lighten py-0 px-2" style="font-size: 36px; height: 36px; width: 36px;" aria-hidden="true"></i></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 5</span><button data-v-b11635b9="" aria-pressed="false" aria-label="4 star"><i data-v-b11635b9="" class="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z mdi v-icon notranslate v-theme--light text-blue-lighten py-0 px-2" style="font-size: 36px; height: 36px; width: 36px;" aria-hidden="true"></i></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 5</span><button data-v-b11635b9="" aria-pressed="false" aria-label="5 star"><i data-v-b11635b9="" class="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z mdi v-icon notranslate v-theme--light text-blue-lighten py-0 px-2" style="font-size: 36px; height: 36px; width: 36px;" aria-hidden="true"></i></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>
+</fieldset>"
+`;

package/src/components/RatingPicker/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	thanks: 'Merci pour votre réponse',
+}

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

@@ -0,0 +1,104 @@
+import { defineComponent } from 'vue'
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import { useRating } from '../Rating'
+
+/** Create the test component */
+function createTestComponent() {
+	return defineComponent({
+		props: {
+			label: {
+				type: String,
+				default: null,
+			},
+			readonly: {
+				type: Boolean,
+				default: false,
+			},
+			modelValue: {
+				type: Number,
+				default: -1,
+			},
+		},
+		emits: ['update:modelValue'],
+		setup(props, { emit }) {
+			const { internalValue, hasAnswered, emitInputEvent } = useRating(props, emit)
+
+			return {
+				internalValue,
+				hasAnswered,
+				emitInputEvent,
+			}
+		},
+		template: '<div />', // Placeholder template for the test
+	})
+}
+
+describe('useRating', () => {
+	const label = 'Pouvez-vous nous en dire plus ?'
+
+	it('verifies props', () => {
+		const testComponent = createTestComponent()
+
+		const wrapper = mount(testComponent, {
+			props: {
+				label,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.props('label')).toBe(label)
+		expect(wrapper.props('readonly')).toBe(false) // Ensure default prop value
+		expect(wrapper.props('modelValue')).toBe(-1) // Ensure default model value
+	})
+
+	it('emits input event', async () => {
+		const testComponent = createTestComponent()
+
+		const wrapper = mount(testComponent, {
+			props: {
+				label,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Call the composable's emitInputEvent method
+		wrapper.vm.emitInputEvent(3)
+
+		await wrapper.vm.$nextTick() // Wait for any asynchronous updates
+
+		// Check that the emit occurred
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([3])
+	})
+
+	it('checks hasAnswered computed property', async () => {
+		const testComponent = createTestComponent()
+
+		const wrapper = mount(testComponent, {
+			props: {
+				label,
+				modelValue: 3, // Set modelValue to a non-default value
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Ensure hasAnswered reflects the proper state
+		expect(wrapper.vm.hasAnswered).toBe(true)
+
+		// Modify the modelValue
+		wrapper.vm.emitInputEvent(-1)
+		await wrapper.vm.$nextTick()
+
+		// Ensure hasAnswered updates accordingly
+		expect(wrapper.vm.hasAnswered).toBe(false)
+	})
+})

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

@@ -0,0 +1,187 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import RatingPicker from '../RatingPicker.vue'
+import { RatingEnum } from '../Rating'
+import NumberPicker from '../NumberPicker/NumberPicker.vue'
+import EmotionPicker from '../EmotionPicker/EmotionPicker.vue'
+import StarsPicker from '../StarsPicker/StarsPicker.vue'
+
+import { locales as emotionPickerlocales } from '../EmotionPicker/locales'
+import { locales } from '../locales'
+
+describe('RatingPicker', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				NumberPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.NUMBER,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders with additional content with the NumberPicker', async () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				NumberPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.NUMBER,
+			},
+			slots: {
+				default: '<div>Additional content</div>',
+			},
+		})
+
+		wrapper.findComponent(NumberPicker).vm.$emit('update:modelValue', 5)
+		await wrapper.setProps({ modelValue: 5 })
+
+		expect(wrapper.text()).toContain(locales.thanks)
+		expect(wrapper.text()).toContain('Additional content')
+	})
+
+	it('renders with additional content with the StarsPicker', async () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				StarsPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.STARS,
+			},
+			slots: {
+				default: '<div>Additional content</div>',
+			},
+		})
+
+		wrapper.findComponent(StarsPicker).vm.$emit('update:modelValue', 3)
+		await wrapper.setProps({ modelValue: 3 })
+
+		expect(wrapper.text()).toContain(locales.thanks)
+		expect(wrapper.text()).toContain('Additional content')
+	})
+
+	it('renders with additional content with the EmotionPicker', async () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				EmotionPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.EMOTION,
+			},
+			slots: {
+				default: '<div>Additional content</div>',
+			},
+		})
+
+		wrapper.findComponent(EmotionPicker).vm.$emit('update:modelValue', 2)
+		await wrapper.setProps({ modelValue: 2 })
+
+		expect(wrapper.text()).toContain(locales.thanks)
+		expect(wrapper.text()).toContain('Additional content')
+	})
+
+	it('renders with additional content with the EmotionPicker when twoEmotions is true', async () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				EmotionPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.EMOTION,
+				twoEmotions: true,
+			},
+			slots: {
+				default: '<div>Additional content</div>',
+			},
+		})
+
+		wrapper.findComponent(EmotionPicker).vm.$emit('update:modelValue', 1)
+		await wrapper.setProps({ modelValue: 1 })
+
+		expect(wrapper.text()).toContain(locales.thanks)
+		expect(wrapper.text()).toContain('Additional content')
+	})
+
+	it('do not render the additional content when the rating is good', async () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				NumberPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.NUMBER,
+			},
+			slots: {
+				default: '<div>Additional content</div>',
+			},
+		})
+
+		wrapper.findComponent(NumberPicker).vm.$emit('update:modelValue', 8)
+		await wrapper.setProps({ modelValue: 8 })
+		expect(wrapper.text()).toContain(locales.thanks)
+		expect(wrapper.text()).not.toContain('Additional content')
+	})
+
+	it('sends the correct values to the EmotionPicker', async () => {
+		const wrapper = mount(RatingPicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			stubs: {
+				EmotionPicker: {
+					template: '<div />',
+				},
+			},
+			propsData: {
+				type: RatingEnum.EMOTION,
+				itemLabels: ['label1', 'label3'],
+				twoEmotions: true,
+			},
+		})
+
+		expect(wrapper.findComponent(EmotionPicker).props('length')).toBe(2)
+		expect(
+			wrapper.findComponent(EmotionPicker).props('itemLabels'),
+		).toEqual(['label1', 'label3'])
+
+		await wrapper.setProps({ twoEmotions: false })
+		await wrapper.setProps({ itemLabels: undefined })
+		expect(wrapper.findComponent(EmotionPicker).props('length')).toBe(3)
+		expect(
+			wrapper.findComponent(EmotionPicker).props('itemLabels'),
+		).toEqual(emotionPickerlocales.defaultEmotionLabels)
+	})
+})

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

@@ -0,0 +1,108 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RatingPicker > renders correctly 1`] = `
+"<div class="vd-rating-picker">
+  <fieldset data-v-30bbac4d="" class="vd-number-picker">
+    <legend data-v-30bbac4d="" class="d-sr-only"></legend>
+    <legend data-v-30bbac4d="" class="text-h6 mb-6"></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>
+  <!--v-if-->
+</div>"
+`;