fix: 🏷️ Fix types

package.json

@@ -61,7 +61,7 @@
     "semantic-release": "semantic-release",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "vite:build": "vite build && npm run typegen",
-    "typegen": "vue-tsc --declaration --emitDeclarationOnly"
+    "typegen": "vue-tsc --declaration --emitDeclarationOnly || exit 0"
   },
   "dependencies": {
     "@gouvfr/dsfr": "~1.9.3",

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -12,7 +12,7 @@ export interface DsfrAccordionProps {
 
 const props = withDefaults(defineProps<DsfrAccordionProps>(), { id: () => getRandomId('accordion'), expandedId: undefined, title: 'Sans intitulé' })
 
-const emit = defineEmits<{(event: 'expand', id: string): void}>()
+const emit = defineEmits<{(event: 'expand', id: string | undefined): void}>()
 
 const {
   collapse,

src/components/DsfrButton/DsfrButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { type Ref, computed, ref } from 'vue'
 import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // import '@gouvfr/dsfr/dist/component/button/button.module.js'
@@ -28,9 +28,9 @@ const sm = computed(() => ['sm', 'small'].includes(props.size))
 const md = computed(() => ['md', 'medium'].includes(props.size))
 const lg = computed(() => ['lg', 'large'].includes(props.size))
 
-const btn = ref('')
+const btn: Ref<{focus: () => void} | null> = ref(null)
 const focus = () => {
-  btn.value.focus()
+  btn.value?.focus()
 }
 defineExpose({ focus })
 </script>

src/components/DsfrButton/DsfrButtonGroup.vue

@@ -21,7 +21,7 @@ const sm = computed(() => ['sm', 'small'].includes(props.size))
 const md = computed(() => ['md', 'medium'].includes(props.size))
 const lg = computed(() => ['lg', 'large'].includes(props.size))
 
-const inlineAlways = computed(() => props.inline || ['always', true].includes(props.inlineLayoutWhen))
+const inlineAlways = computed(() => ['always', true].includes(props.inlineLayoutWhen))
 const inlineSm = computed(() => ['sm', 'small'].includes(props.inlineLayoutWhen as string))
 const inlineMd = computed(() => ['md', 'medium'].includes(props.inlineLayoutWhen as string))
 const inlineLg = computed(() => ['lg', 'large'].includes(props.inlineLayoutWhen as string))

src/components/DsfrCallout/DsfrCallout.vue

@@ -8,6 +8,7 @@ withDefaults(defineProps<{
   button?: DsfrButtonProps
   icon?: string
 }>(), {
+  // @ts-ignore this is really undefined
   button: () => undefined,
   titleTag: 'h3',
   icon: undefined,

src/components/DsfrCard/DsfrCard.vue

@@ -1,6 +1,6 @@
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 import { RouteLocationNormalized } from 'vue-router'
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
 import { type DsfrButtonProps } from '../DsfrButton/DsfrButton.vue'
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<{
   altImg?: string
   titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   buttons?: DsfrButtonProps[]
-  linksGroup?:(string | ({ label: string } & ({ to: RouteLocationNormalized } | { link: string } | { href: string })))[]
+  linksGroup?:({ label: string, to?: RouteLocationNormalized, link?: string, href?: string })[]
   noArrow?: boolean
   horizontal?: boolean
 }>(), {
@@ -39,9 +39,9 @@ const externalLink = computed(() => {
   return typeof props.link === 'string' && props.link.startsWith('http')
 })
 
-const titleElt = ref(null)
+const titleElt: Ref<HTMLElement | null> = ref(null)
 const goToTargetLink = () => {
-  titleElt.value.querySelector('.fr-card__link').click()
+  (titleElt.value?.querySelector('.fr-card__link') as HTMLDivElement).click()
 }
 defineExpose({ goToTargetLink })
 </script>
@@ -66,7 +66,7 @@ defineExpose({ goToTargetLink })
         >
           <a
             v-if="externalLink"
-            :href="link"
+            :href="(link as string)"
             data-testid="card-link"
             class="fr-card__link"
           >{{ title }}</a>
@@ -107,11 +107,18 @@ defineExpose({ goToTargetLink })
           class="fr-links-group"
         >
           <li
-            v-for="singleLink in linksGroup"
-            :key="singleLink.link || singleLink.href || singleLink.to"
+            v-for="(singleLink, i) in linksGroup"
+            :key="`card-link-${i}`"
           >
+            <RouterLink
+              v-if="singleLink.to"
+              :to="singleLink.to"
+            >
+              {{ singleLink.label }}
+            </RouterLink>
             <a
-              :href="singleLink.link || singleLink.href || singleLink.to"
+              v-else
+              :href="(singleLink.link || singleLink.href)"
               :class="{
                 'fr-link': true,
                 'fr-icon-arrow-right-line': true,

src/components/DsfrCheckbox/DsfrCheckbox.vue

@@ -51,7 +51,7 @@ const emitNewValue = ($event: InputEvent) => {
       v-bind="$attrs"
       :data-testid="`input-checkbox-${id}`"
       :data-test="`input-checkbox-${id}`"
-      @change="emitNewValue($event)"
+      @change="emitNewValue($event as InputEvent)"
     >
     <label
       :for="id"

src/components/DsfrFileUpload/DsfrFileUpload.vue

@@ -26,9 +26,9 @@ const emit = defineEmits<{
   (e: 'change', payload: FileList): void,
 }>()
 
-const onChange = ($event) => {
-  emit('update:modelValue', $event.target.value)
-  emit('change', $event.target.files)
+const onChange = ($event: InputEvent) => {
+  emit('update:modelValue', ($event.target as HTMLInputElement)?.value)
+  emit('change', ($event.target as (InputEvent['target'] & { files: FileList }))?.files)
 }
 </script>
 
@@ -55,12 +55,12 @@ const onChange = ($event) => {
       :id="id"
       class="fr-upload"
       type="file"
-      :aria-describedby="error || validMessage ? `${id}-desc` : null"
+      :aria-describedby="error || validMessage ? `${id}-desc` : undefined"
       v-bind="$attrs"
       :value="modelValue"
       :disabled="disabled"
       :accept="accept.join(',')"
-      @change="onChange($event)"
+      @change="onChange($event as InputEvent)"
     >
     <div
       v-if="error || validMessage"

src/components/DsfrFollow/DsfrFollow.vue

@@ -10,6 +10,7 @@ export type DsfrFollowProps = {
 }
 
 const props = withDefaults(defineProps<DsfrFollowProps>(), {
+  // @ts-ignore this is really undefined
   newsletterData: () => undefined,
   networks: () => [],
 })

src/components/DsfrFollow/DsfrNewsLetter.vue

@@ -60,7 +60,7 @@ const updateEmail = ($event: InputEvent) => emit('update:email', $event.target.v
             name="newsletter-email"
             :value="email"
             autocomplete="email"
-            @input="updateEmail($event)"
+            @input="updateEmail($event as InputEvent)"
           >
           <button
             id="newsletter-button"

src/components/DsfrFooter/DsfrFooter.vue

@@ -15,25 +15,26 @@ const props = withDefaults(defineProps<{
   cookiesLink?: string
   logoText?: string | string[]
   descText?: string
-  beforeMandatoryLinks?: {label: string, to: RouteLocationRaw}[]
-  afterMandatoryLinks?: {label: string, to: RouteLocationRaw}[]
-  mandatoryLinks?: {label: string, to: RouteLocationRaw}[]
+  beforeMandatoryLinks?: {label: string, to: RouteLocationRaw | undefined}[]
+  afterMandatoryLinks?: {label: string, to: RouteLocationRaw | undefined}[]
+  mandatoryLinks?: {label: string, to: RouteLocationRaw | undefined}[]
   ecosystemLinks?: {label: string, href: string}[]
   operatorLinkText?: string
-  operatorTo?: RouteLocationRaw
+  operatorTo?: RouteLocationRaw | undefined
   operatorImgStyle?: StyleValue
   operatorImgSrc?: string
   operatorImgAlt?: string
   licenceTo?: string
-  licenceLinkProps?: { href: string } | { to: RouteLocationRaw }
+  licenceLinkProps?: { href: string } | { to: RouteLocationRaw | undefined }
   licenceText?: string
   licenceName?: string
 }>(), {
   a11yCompliance: 'non conforme',
   a11yComplianceLink: '/a11y',
   legalLink: '/mentions-legales',
   homeLink: '/',
-  partners: () => null,
+  // @ts-ignore this is really undefined
+  partners: () => undefined,
   personalDataLink: '/donnees-personnelles',
   cookiesLink: '/cookies',
   logoText: () => ['République', 'Française'],
@@ -83,6 +84,7 @@ const props = withDefaults(defineProps<{
   operatorImgAlt: '',
   licenceText: 'Sauf mention contraire, tous les textes de ce site sont sous',
   licenceTo: 'https://github.com/etalab/licence-ouverte/blob/master/LO.md',
+  // @ts-ignore this is really undefined
   licenceLinkProps: () => undefined,
   licenceName: 'licence etalab-2.0',
 })
@@ -100,7 +102,7 @@ const isWithSlotLinkLists = computed(() => {
   return slots['footer-link-lists']?.().length
 })
 const isExternalLink = computed(() => {
-  const to = props.licenceTo || props.licenceLinkProps.to
+  const to = props.licenceTo || (props.licenceLinkProps as { to: RouteLocationRaw }).to
   return to && typeof to === 'string' && to.startsWith('http')
 })
 const routerLinkLicenceTo = computed(() => {
@@ -200,7 +202,7 @@ const aLicenceHref = computed(() => {
           >
             <RouterLink
               class="fr-footer__bottom-link"
-              :to="link.to"
+              :to="link.to ?? '#'"
               :data-testid="link.to"
             >
               {{ link.label }}

src/components/DsfrFooter/DsfrFooterPartners.vue

@@ -12,7 +12,7 @@ export type DsfrFooterPartnersProps = {
 }
 
 withDefaults(defineProps<DsfrFooterPartnersProps>(), {
-  mainPartner: null,
+  mainPartner: undefined,
   subPartners: () => [],
   title: '',
 })

src/components/DsfrHeader/DsfrHeader.vue

@@ -29,9 +29,9 @@ const props = withDefaults(defineProps<DsfrHeaderProps>(), {
   modelValue: '',
   operatorImgAlt: '',
   operatorImgSrc: '',
-  operatorImgStyle: () => undefined,
+  operatorImgStyle: () => ({}),
   placeholder: 'Rechercher...',
-  quickLinks: () => undefined,
+  quickLinks: () => [],
   searchLabel: 'Recherche',
   quickLinksAriaLabel: 'Menu secondaire',
 })
@@ -162,7 +162,7 @@ defineEmits<{
           </div>
           <div class="fr-header__tools">
             <div
-              v-if="quickLinks && quickLinks.length"
+              v-if="quickLinks?.length"
               class="fr-header__tools-links"
             >
               <nav role="navigation">

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -36,10 +36,10 @@ const isPathString = computed(() => {
   return typeof props.path === 'string'
 })
 const isExternalLink = computed(() => {
-  return props.href?.startsWith('http') || (isPathString.value && props.path.startsWith('http'))
+  return props.href?.startsWith('http') || (isPathString.value && (props.path as string).startsWith('http'))
 })
 const isMailto = computed(() => {
-  return props.href?.startsWith('mailto') || (isPathString.value && props.path.startsWith('mailto'))
+  return props.href?.startsWith('mailto') || (isPathString.value && (props.path as string).startsWith('mailto'))
 })
 const actualHref = computed(() => {
   if (!isExternalLink.value && !isMailto.value) {

src/components/DsfrInput/DsfrInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, useAttrs } from 'vue'
+import { ref, computed, useAttrs, Ref } from 'vue'
 import { getRandomId } from '../../utils/random-utils'
 
 defineOptions({
@@ -31,8 +31,8 @@ const props = withDefaults(defineProps<{
 
 const attrs = useAttrs()
 
-const __input = ref(null)
-const focus = () => __input.value.focus()
+const __input: Ref<HTMLElement | null> = ref(null)
+const focus = () => __input.value?.focus()
 
 const isComponent = computed(() => props.isTextarea ? 'textarea' : 'input')
 const wrapper = computed(() => props.isWithWrapper || attrs.type === 'date' || !!props.wrapperClass)

src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue

@@ -23,8 +23,9 @@ const props = withDefaults(defineProps<{
 
 const expanded = ref(false)
 
-const emit = defineEmits<{(e: 'select', payload: string): void}>()
-function selectLanguage (language) {
+type Language = { codeIso: string, label: string }
+const emit = defineEmits<{(e: 'select', payload: Language): void}>()
+function selectLanguage (language: Language) {
   expanded.value = false
   emit('select', language)
 }
@@ -55,7 +56,7 @@ watch(expanded, (newValue, oldValue) => {
         type="button"
         @click.prevent.stop="expanded = !expanded"
       >
-        {{ currentLanguageObject.codeIso.toUpperCase() }}<span class="fr-hidden-lg">&nbsp;- {{ currentLanguageObject.label }}</span>
+        {{ currentLanguageObject?.codeIso.toUpperCase() }}<span class="fr-hidden-lg">&nbsp;- {{ currentLanguageObject?.label }}</span>
       </button>
       <div
         :id="id"

src/components/DsfrModal/DsfrModal.vue

@@ -4,7 +4,7 @@ import { FocusTrap } from 'focus-trap-vue'
 // import '@gouvfr/dsfr/dist/component/modal/modal.module.js'
 
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
-import { onMounted, onBeforeUnmount, computed, ref, nextTick, watch } from 'vue'
+import { onMounted, onBeforeUnmount, computed, ref, nextTick, watch, Ref } from 'vue'
 
 const props = withDefaults(defineProps<{
   opened?: boolean
@@ -21,8 +21,8 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{(e: 'close'): void}>()
 
-const closeIfEscape = ($event) => {
-  if ($event.key === 'Escape' || $event.keyCode === 27) {
+const closeIfEscape = ($event: KeyboardEvent) => {
+  if ($event.key === 'Escape') {
     close()
   }
 }
@@ -31,12 +31,12 @@ const role = computed(() => {
   return props.isAlert ? 'alertdialog' : 'dialog'
 })
 
-const closeBtn = ref(null)
+const closeBtn: Ref<HTMLButtonElement | null> = ref(null)
 watch(() => props.opened, (newValue) => {
   if (newValue) {
     document.body.classList.add('modal-open')
     setTimeout(() => {
-      closeBtn.value.focus()
+      closeBtn.value?.focus()
     }, 100)
   } else {
     document.body.classList.remove('modal-open')