fix: 🏷️ améliore le typage

Author: laruiss

src/components/DsfrHeader/DsfrHeader.vue

@@ -37,9 +37,12 @@ const props = withDefaults(defineProps<DsfrHeaderProps>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', payload: string): void
-  (e: 'search', payload: string): void
-  (e: 'languageSelect', payload: DsfrLanguageSelectorElement): void
+  /** Émis lors du changement de la valeur de recherche */
+  'update:modelValue': [payload: string | number | undefined]
+  /** Émis lors de la validation de la recherche */
+  search: [payload: string]
+  /** Émis lors de la sélection d'une langue */
+  languageSelect: [payload: DsfrLanguageSelectorElement]
 }>()
 
 const slots = defineSlots<{
@@ -240,10 +243,10 @@ provide(registerNavigationLinkKey, () => {
               <DsfrSearchBar
                 :id="searchbarId"
                 :label="searchLabel"
-                :model-value="modelValue"
+                :model-value="String(modelValue || '')"
                 :placeholder="placeholder"
                 style="justify-content: flex-end"
-                @update:model-value="emit('update:modelValue', $event)"
+                @update:model-value="emit('update:modelValue', $event!)"
                 @search="emit('search', $event)"
               />
             </div>
@@ -308,7 +311,7 @@ provide(registerNavigationLinkKey, () => {
               >
                 <DsfrSearchBar
                   :searchbar-id="searchbarId"
-                  :model-value="modelValue"
+                  :model-value="String(modelValue || '')"
                   :placeholder="placeholder"
                   @update:model-value="emit('update:modelValue', $event)"
                   @search="emit('search', $event)"

src/components/DsfrModal/DsfrModal.vue

@@ -33,7 +33,7 @@ defineSlots<{
    * Slot pour le pied-de-page de la modale.
    * Sera dans `<div class="fr-modal__footer">`
    */
-  footer: () => any
+  footer?: () => any
 }>()
 
 const closeIfEscape = ($event: KeyboardEvent) => {

src/components/DsfrRange/DsfrRange.vue

@@ -31,7 +31,7 @@ defineSlots<{
   /** Pour remplacer l’astérisque par autre chose pour un champ requis */
   'required-tip': (props: Record<string, never>) => any
   /** Pour les messages d’erreur ou de succès */
-  messages: (props: Record<string, never>) => any
+  messages?: (props: Record<string, never>) => any
 }>()
 const input = ref<HTMLInputElement>()
 const output = ref<HTMLSpanElement>()

src/components/DsfrTag/DsfrTag.vue

@@ -48,7 +48,7 @@ const iconProps = computed(() => typeof props.icon === 'string'
     }"
     :aria-pressed="selectable ? selected : undefined"
     v-bind="{ ...linkProps, ...$attrs }"
-    @click="!disabled && $emit('select', [value, selected])"
+    @click="!disabled && selectable && $emit('select', [value, selected || false])"
   >
     <VIcon
       v-if="props.icon && !dsfrIcon"

src/components/DsfrTag/DsfrTags.types.ts

@@ -10,7 +10,7 @@ export type DsfrTagProps<T = string> = {
   iconOnly?: boolean
 } & ({
   selectable: true
-  selected: boolean
+  selected: boolean | undefined
   value: T
 } | {
   selectable?: false

src/components/DsfrTag/DsfrTags.vue

@@ -18,7 +18,7 @@ function onSelect ([value, selected]: [string, boolean]) {
     return
   }
   if (selected) {
-    const newValue = new Set([...props.modelValue])
+    const newValue = new Set(props.modelValue)
     newValue.delete(value)
     emit('update:modelValue', [...newValue])
     return
@@ -31,15 +31,20 @@ function onSelect ([value, selected]: [string, boolean]) {
 <template>
   <ul class="fr-tags-group">
     <li
-      v-for="({ icon, label, ...tagProps }, i) in tags"
+      v-for="(tag, i) in tags"
       :key="i"
     >
       <DsfrTag
-        v-bind="tagProps"
-        :icon="icon"
-        :label="label"
-        :selectable="tagProps.selectable"
-        :selected="tagProps.selectable ? modelValue?.includes(tagProps.value as string) : undefined"
+        :label="tag.label"
+        :link="tag.link"
+        :tag-name="tag.tagName"
+        :icon="tag.icon"
+        :disabled="tag.disabled"
+        :small="tag.small"
+        :icon-only="tag.iconOnly"
+        :selectable="tag.selectable"
+        :selected="tag.selectable ? modelValue?.includes(tag.value as string) : undefined"
+        :value="tag.selectable ? tag.value : undefined"
         @select="onSelect($event as [string, boolean])"
       />
     </li>