@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

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

@@ -1,108 +1,543 @@
 // 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="vd-rating-picker">
+  <fieldset class="vd-number-picker">
+    <legend class="d-sr-only"></legend>
+    <legend class="
+      mb-6
+      text-h6
+    "></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
+          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>
-  <!--v-if-->
-</div>"
+  <!-- v-if -->
+</div>
 `;

package/src/components/SearchListField/SearchListField.stories.ts

@@ -88,9 +88,9 @@ export const Default: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import SearchListField from '@cnamts/synapse'
+import { SearchListField } from '@cnamts/synapse'
 
-const modelValue = ref('')
+const modelValue = ref([])
 
 const items = [
   {

package/src/components/SelectBtnField/SelectBtnField.stories.ts

@@ -60,7 +60,7 @@ const meta = {
 				type: {
 					summary: 'object',
 					detail: `{
-btnToggle: 'VBtnToggle',
+	btnToggle: 'VBtnToggle',
 	btn: 'VBtn',
 	spacer: 'VSpacer',
 	icon: 'VIcon'

package/src/components/SelectBtnField/SelectBtnField.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { mdiCheck } from '@mdi/js'
-	import { ref, computed, watch } from 'vue'
+	import { ref, computed, onMounted, watch } from 'vue'
 	import { useTheme } from 'vuetify'
 	import { config } from './config'
 	import type { SelectBtnItem, SelectBtnValue } from './types'
@@ -33,7 +33,14 @@
 	const emits = defineEmits(['update:modelValue', 'update:error', 'update:error-messages'])
 	const checkIcon = ref(mdiCheck)
 	const internalValue = ref<SelectBtnValue>(null)
-	const darktheme = ref<boolean>(useTheme().current.value.dark)
+	const darktheme = ref<boolean>(false)
+
+	onMounted(() => {
+		const theme = useTheme().current
+		if (theme && theme.value) {
+			darktheme.value = theme.value.dark
+		}
+	})
 
 	watch(() => props.modelValue, (value) => {
 		if (value === null && props.multiple) {
@@ -113,7 +120,6 @@
 		class="select-btn-field"
 	>
 		<VBtnToggle
-			v-bind="options.btnToggle"
 			tag="ul"
 			:model-value="internalValue"
 			:multiple="multiple"
@@ -138,6 +144,8 @@
 						'text-error': error && !isSelected(item.value),
 						'justify-start': !isSelected(item.value),
 						'justify-space-between': isSelected(item.value),
+						'mr-2': inline,
+						'mr-0': !inline,
 					}"
 					:label="isSelected(item.value) ? 'Sélectionné' : ''"
 					@click="toggleItem(item)"
@@ -195,18 +203,6 @@
 	.v-btn:not(:first-child) {
 		border-inline-start: inherit;
 	}
-
-	.v-btn:last-child {
-		border-end-end-radius: 4px;
-		border-start-end-radius: 4px;
-		margin-right: 0;
-	}
-
-	.v-btn:first-child {
-		border-start-start-radius: 4px;
-		border-end-start-radius: 4px;
-		margin-right: 8px;
-	}
 }
 
 .select-btn-field-toggle {

package/src/components/SelectBtnField/config.ts

@@ -3,7 +3,7 @@ export const config = {
 		height: 'auto',
 		minHeight: '40px',
 		activeClass: 'text-white',
-		class: 'py-2 d-flex align-items-center',
+		class: 'py-2 mr-0 d-flex align-items-center',
 	},
 	icon: {
 		class: 'text-white flex-shrink-0 ml-1',