@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

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>
+`}
+/>
+
+