@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

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

@@ -3,12 +3,13 @@
 	import { RatingEnum, useRating } from '../Rating'
 	import { locales } from './locales'
 	import type { PropType } from 'vue'
+	import type { ItemType } from '@/components/Customs/SySelect/SySelect.vue'
 
 	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
 
 	import { useDisplay } from 'vuetify'
 
-	interface SelectItem {
+	interface SelectItem extends ItemType {
 		text: string
 		value: number
 	}

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

@@ -1,105 +1,544 @@
 // 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>
+<fieldset class="vd-number-picker">
+  <legend class="d-sr-only">
+    Pourriez-vous donner une note ?
+  </legend>
+  <legend class="
+    mb-6
+    text-h6
+  ">
+    Pourriez-vous donner une note ?
+  </legend>
+  <div class="d-inline-block">
+    <div class="
+      d-flex
+      flex-wrap
+      max-width-none
+      v-rating
+      v-theme--light
+    ">
+      <label
+        class=""
+        for="v-rating-0-0"
+      >
+        <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">
+      </label>
+      <input
+        checked=""
+        class="v-rating__hidden"
+        id="v-rating-0-0"
+        name="v-rating-0"
+        tabindex="-1"
+        type="radio"
+        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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-1"
+          >
+            <span class="v-rating__hidden">
+              Rating 1 of 10
+            </span>
+            <button
+              aria-label="Note de 1 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+              <!---->
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-1"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-2"
+          >
+            <span class="v-rating__hidden">
+              Rating 2 of 10
+            </span>
+            <button
+              aria-label="Note de 2 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-2"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-3"
+          >
+            <span class="v-rating__hidden">
+              Rating 3 of 10
+            </span>
+            <button
+              aria-label="Note de 3 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-3"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-4"
+          >
+            <span class="v-rating__hidden">
+              Rating 4 of 10
+            </span>
+            <button
+              aria-label="Note de 4 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+              <!---->
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-4"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-5"
+          >
+            <span class="v-rating__hidden">
+              Rating 5 of 10
+            </span>
+            <button
+              aria-label="Note de 5 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-5"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-6"
+          >
+            <span class="v-rating__hidden">
+              Rating 6 of 10
+            </span>
+            <button
+              aria-label="Note de 6 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+              <!---->
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-6"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-7"
+          >
+            <span class="v-rating__hidden">
+              Rating 7 of 10
+            </span>
+            <button
+              aria-label="Note de 7 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-7"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-8"
+          >
+            <span class="v-rating__hidden">
+              Rating 8 of 10
+            </span>
+            <button
+              aria-label="Note de 8 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-8"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-9"
+          >
+            <span class="v-rating__hidden">
+              Rating 9 of 10
+            </span>
+            <button
+              aria-label="Note de 9 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+              <!---->
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-9"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            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>
+        <div class="v-rating__item">
+          <label
+            class=""
+            for="v-rating-0-10"
+          >
+            <span class="v-rating__hidden">
+              Rating 10 of 10
+            </span>
+            <button
+              aria-label="Note de 10 sur 10."
+              class="
+                mr-2
+                pa-0
+                text-body-2
+                text-primary
+                v-btn
+                v-btn--density-default
+                v-btn--size-x-small
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              style="height: 36px;"
+              type="button"
+            >
+              <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>
+            </button>
+          </label>
+          <input
+            class="v-rating__hidden"
+            id="v-rating-0-10"
+            name="v-rating-0"
+            tabindex="-1"
+            type="radio"
+            value="10"
+          />
+        </div>
         <!---->
       </div>
     </div>
-    <!--v-if-->
+    <!-- v-if -->
   </div>
-</fieldset>"
+</fieldset>
 `;

package/src/components/RatingPicker/RatingPicker.stories.ts

@@ -331,7 +331,7 @@ export const ReadOnly: Story = {
 		v-model="ratingEmotion"
 		label="Êtes-vous satisfait de ce service ?"
 		type="emotion"
-		read-only
+		readonly
 	/>
 </template>
         `,