codevdesign 1.0.24 → 1.0.26

package/composants/csqcCodeBudgetaireGenerique.vue

@@ -37,296 +37,300 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, nextTick, watch } from 'vue'
-  import type { VForm } from 'vuetify/components'
-
-  const emit = defineEmits<{
-    'update:modelValue': [string | null]
-    'update:codeBudgetairesProp': [CodeBudgetaireItem[]]
-    'update:valide': [boolean]
-  }>()
-  type CodeBudgetaireItem = string | [string, string]
-
-  const props = withDefaults(
-    defineProps<{
-      codeBudgetairesProp: CodeBudgetaireItem[]
-      modelValue: string | null
-      afficherHint?: boolean
-      regleMessageErreur: string
-      format?: string
-      activerExtension?: boolean
-      reglesSupp?: ((v: string) => true | string)[]
-    }>(),
-    {
-      afficherHint: false,
-      format: '999-9-99999-999',
-      activerExtension: false,
-      reglesSupp: () => [],
-    },
-  )
+      import { ref, computed, onMounted, nextTick, watch } from 'vue'
+      import type { VForm } from 'vuetify/components'
+
+      const emit = defineEmits<{
+        'update:modelValue': [string | null]
+        'update:codeBudgetairesProp': [CodeBudgetaireItem[]]
+        'update:valide': [boolean]
+      }>()
+      type CodeBudgetaireItem = string | [string, string]
+
+      const props = withDefaults(
+        defineProps<{
+          codeBudgetairesProp: CodeBudgetaireItem[]
+          modelValue: string | null
+          afficherHint?: boolean
+          regleMessageErreur: string
+          format?: string
+          activerExtension?: boolean
+          reglesSupp?: ((v: string) => true | string)[]
+        }>(),
+        {
+          afficherHint: false,
+          format: '999-9-99999-999',
+          activerExtension: false,
+          reglesSupp: () => [],
+        },
+      )
+
+      const formValide = ref(false)
+      const form = ref<VForm | null>(null)
+      const codeBudgetaire = ref(props.modelValue ?? '')
+      const derniereValeurSauvegardee = ref<string | null>(null)
+      const format = props.format
+      const activerExtension = props.activerExtension
+
+      onMounted(() => {
+        derniereValeurSauvegardee.value = codeBudgetaire.value
+      })
 
-  const formValide = ref(false)
-  const form = ref<VForm | null>(null)
-  const codeBudgetaire = ref(props.modelValue ?? '')
-  const derniereValeurSauvegardee = ref<string | null>(null)
-  const format = props.format
-  const activerExtension = props.activerExtension
-
-  onMounted(() => {
-    derniereValeurSauvegardee.value = codeBudgetaire.value
-  })
-
-  const itemsCombobox = computed(() => {
-    return props.codeBudgetairesProp.map(item => {
-      if (typeof item === 'string') {
-        return {
-          code: item,
-          nom: '', // pas de nom
-        }
-      }
+      const itemsCombobox = computed(() => {
+        return props.codeBudgetairesProp.map(item => {
+          if (typeof item === 'string') {
+            return {
+              code: item,
+              nom: '', // pas de nom
+            }
+          }
 
-      const [code, nomBrut] = item
-      const nom = (nomBrut ?? '').toString().trim()
+          const [code, nomBrut] = item
+          const nom = (nomBrut ?? '').toString().trim()
 
-      return { code, nom }
-    })
-  })
+          return { code, nom }
+        })
+      })
 
-  const placeholder = computed(() => {
-    const base = format.replace(/9/g, '0')
-    const extension = activerExtension ? '-XXX/XXX' : ''
-    return base + extension
-  })
+      const placeholder = computed(() => {
+        const base = format.replace(/9/g, '0')
+        const extension = activerExtension ? '-XXX/XXX' : ''
+        return base + extension
+      })
 
-  const estValide = computed(() => {
-    const val = codeBudgetaire.value?.toUpperCase().trim() || ''
-    const base = val.slice(0, 15)
-    const extension = val.slice(15)
+      const estValide = computed(() => {
+        const val = codeBudgetaire.value?.toUpperCase().trim() || ''
+        const base = val.slice(0, 15)
+        const extension = val.slice(15)
 
-    if (!/^\d{3}-\d{1}-\d{5}-\d{3}$/.test(base)) return false
+        if (!/^\d{3}-\d{1}-\d{5}-\d{3}$/.test(base)) return false
 
-    if (!activerExtension) return val.length === 15
+        if (!activerExtension) return val.length === 15
+
+        if (val.length === 15) return true
+        if (val.length !== 22) return false
+        if (extension.length !== 7) return false
+
+        if (extension[3] !== '/') return false
+        if (!/^[A-Z0-9/]$/i.test(extension[0]!)) return false
+
+        const alphanumAt = [1, 2, 4, 5, 6]
+        return alphanumAt.every(i => /^[A-Z0-9]$/i.test(extension[i]!))
+      })
+
+      //  Règles Vuetify combinées (interne + supplémentaires)
+      const reglesVuetify = computed(() => [
+        // règle interne
+        () => (estValide.value ? true : props.regleMessageErreur),
+
+        // règles supplémentaires venant du parent
+        ...props.reglesSupp.map(rule => {
+          return () => rule(codeBudgetaire.value) // on passe la valeur formatée
+        }),
+      ])
+
+      //  Validité globale du composant (interne + toutes les règles supp)
+      const estValideComplet = computed(() => {
+        if (!estValide.value) return false
+        return props.reglesSupp.every(rule => rule(codeBudgetaire.value) === true)
+      })
 
-    if (val.length === 15) return true
-    if (val.length !== 22) return false
-    if (extension.length !== 7) return false
+      const caractereAutorises = (e: KeyboardEvent) => {
+        if (e.ctrlKey || e.metaKey) return
 
-    if (extension[3] !== '/') return false
-    if (!/^[A-Z0-9/]$/i.test(extension[0]!)) return false
+        const touchesSpecifiques = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End']
+        if (touchesSpecifiques.includes(e.key)) return
 
-    const alphanumAt = [1, 2, 4, 5, 6]
-    return alphanumAt.every(i => /^[A-Z0-9]$/i.test(extension[i]!))
-  })
+        const input = e.target as HTMLInputElement
+        let position = input.selectionStart ?? 0
 
-  //  Règles Vuetify combinées (interne + supplémentaires)
-  const reglesVuetify = computed(() => [
-    // règle interne
-    () => (estValide.value ? true : props.regleMessageErreur),
+        // Gestion de la partie de base (15 premiers caractères)
+        if (position < 15) {
+          if (!/^\d$/.test(e.key)) {
+            e.preventDefault()
+            return
+          }
 
-    // règles supplémentaires venant du parent
-    ...props.reglesSupp.map(rule => {
-      return () => rule(codeBudgetaire.value) // on passe la valeur formatée
-    }),
-  ])
+          // Insérer chiffre et auto-ajout des tirets
+          e.preventDefault()
 
-  //  Validité globale du composant (interne + toutes les règles supp)
-  const estValideComplet = computed(() => {
-    if (!estValide.value) return false
-    return props.reglesSupp.every(rule => rule(codeBudgetaire.value) === true)
-  })
+          const value = codeBudgetaire.value.replace(/-/g, '')
+          const clean = value.slice(0, 12) + e.key
 
-  const caractereAutorises = (e: KeyboardEvent) => {
-    if (e.ctrlKey || e.metaKey) return
+          let formatted = ''
+          if (clean.length > 0) formatted += clean.slice(0, 3)
+          if (clean.length > 3) formatted += '-' + clean.slice(3, 4)
+          if (clean.length > 4) formatted += '-' + clean.slice(4, 9)
+          if (clean.length > 9) formatted += '-' + clean.slice(9, 12)
 
-    const touchesSpecifiques = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End']
-    if (touchesSpecifiques.includes(e.key)) return
+          codeBudgetaire.value = formatted.slice(0, 15)
 
-    const input = e.target as HTMLInputElement
-    let position = input.selectionStart ?? 0
+          nextTick(() => {
+            const newPos = codeBudgetaire.value.length
+            input.selectionStart = input.selectionEnd = newPos
+          })
 
-    // Gestion de la partie de base (15 premiers caractères)
-    if (position < 15) {
-      if (!/^\d$/.test(e.key)) {
+          return
+        }
+
+        // --- Gestion de l'extension ---
+        if (!activerExtension || position >= 22 || codeBudgetaire.value.length >= 22) {
+          e.preventDefault()
+          return
+        }
+
+        const extensionPos = position - 15
+
+        // Règle 1 : extension[0] = alphanum ou /
+        if (extensionPos === 0) {
+          if (!/^[A-Z0-9/]$/i.test(e.key)) {
+            e.preventDefault()
+            return
+          }
+          return
+        }
+
+        // Règle 2 : extension[1,2,4,5,6] = alphanum
+        if ([1, 2, 4, 5, 6].includes(extensionPos)) {
+          if (!/^[A-Z0-9]$/i.test(e.key)) {
+            e.preventDefault()
+            return
+          }
+          return
+        }
+
+        // Règle 3 : slash automatique à position 3 (index 18)
+        if (extensionPos === 3) {
+          e.preventDefault()
+          const before = codeBudgetaire.value.slice(0, position)
+          const after = codeBudgetaire.value.slice(position)
+          codeBudgetaire.value = before + '/' + after
+          nextTick(() => {
+            input.selectionStart = input.selectionEnd = position + 1
+          })
+          return
+        }
+
+        // Tout autre cas = bloqué
         e.preventDefault()
-        return
       }
 
-      // Insérer chiffre et auto-ajout des tirets
-      e.preventDefault()
+      const formaterCodeBudgetaire = (valeur: string): string => {
+        if (!valeur) return ''
 
-      const value = codeBudgetaire.value.replace(/-/g, '')
-      const clean = value.slice(0, 12) + e.key
+        const upper = valeur.toUpperCase().replace(/[^A-Z0-9/]/g, '')
+        const chiffres = upper.replace(/[^0-9]/g, '').slice(0, 12)
 
-      let formatted = ''
-      if (clean.length > 0) formatted += clean.slice(0, 3)
-      if (clean.length > 3) formatted += '-' + clean.slice(3, 4)
-      if (clean.length > 4) formatted += '-' + clean.slice(4, 9)
-      if (clean.length > 9) formatted += '-' + clean.slice(9, 12)
+        let base = ''
+        if (chiffres.length > 0) base += chiffres.slice(0, 3)
+        if (chiffres.length > 3) base += '-' + chiffres.slice(3, 4)
+        if (chiffres.length > 4) base += '-' + chiffres.slice(4, 9)
+        if (chiffres.length > 9) base += '-' + chiffres.slice(9, 12)
 
-      codeBudgetaire.value = formatted.slice(0, 15)
+        if (!activerExtension || base.length < 15) return base
 
-      nextTick(() => {
-        const newPos = codeBudgetaire.value.length
-        input.selectionStart = input.selectionEnd = newPos
-      })
+        const reste = upper.slice(chiffres.length).replace(/[^A-Z0-9/]/gi, '')
 
-      return
-    }
+        // Extraire les 7 premiers caractères restants pour l’extension
+        let ext = reste.slice(0, 7).split('')
 
-    // --- Gestion de l'extension ---
-    if (!activerExtension || position >= 22 || codeBudgetaire.value.length >= 22) {
-      e.preventDefault()
-      return
-    }
+        // Ne garder que le premier slash s’il est à l’index 0 ou 3
+        ext = ext.filter((c, i) => {
+          if (c !== '/') return true
+          return i === 0 || i === 3
+        })
 
-    const extensionPos = position - 15
+        // Enlever les slash non autorisés
+        ext = ext.map((c, i) => {
+          if (c === '/' && i !== 0 && i !== 3) return ''
+          if (c !== '/' && !/^[A-Z0-9]$/i.test(c)) return ''
+          return c
+        })
 
-    // Règle 1 : extension[0] = alphanum ou /
-    if (extensionPos === 0) {
-      if (!/^[A-Z0-9/]$/i.test(e.key)) {
-        e.preventDefault()
-        return
+        // Forcer le slash à la 4e position
+        if (ext.length > 3) {
+          ext[3] = '/'
+        }
+
+        // Réduire à 7 caractères
+        ext = ext.slice(0, 7)
+
+        return (base + ext.join('')).slice(0, 22)
       }
-      return
-    }
 
-    // Règle 2 : extension[1,2,4,5,6] = alphanum
-    if ([1, 2, 4, 5, 6].includes(extensionPos)) {
-      if (!/^[A-Z0-9]$/i.test(e.key)) {
+      const gererPaste = (e: ClipboardEvent) => {
         e.preventDefault()
-        return
+        const clipboardData = e.clipboardData
+        if (!clipboardData) return
+        let pasted = clipboardData.getData('text') || ''
+        codeBudgetaire.value = formaterCodeBudgetaire(pasted)
+
+        setTimeout(() => {
+          const input = e.target as HTMLInputElement
+          input.selectionStart = input.selectionEnd = codeBudgetaire.value.length
+        }, 0)
+      }
+
+      const sauvegarder = () => {
+        codeBudgetaire.value = formaterCodeBudgetaire(codeBudgetaire.value)
+
+        if (!estValideComplet.value) return
+        if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
+
+        const codeNormalise = codeBudgetaire.value.trim().toUpperCase()
+
+        const existe = props.codeBudgetairesProp.some(item => {
+          const code = typeof item === 'string' ? item : item[0]
+          return code.trim().toUpperCase() === codeNormalise
+        })
+
+        if (!existe) {
+          const nouvelleListe = [...props.codeBudgetairesProp, codeBudgetaire.value]
+          emit('update:codeBudgetairesProp', nouvelleListe)
+        }
+
+        derniereValeurSauvegardee.value = codeBudgetaire.value
+        emit('update:modelValue', codeBudgetaire.value)
+      }
+
+      const extraireCode = (val: unknown): string => {
+        if (val == null) return ''
+        if (typeof val === 'string') return val
+
+        // Cas où Vuetify enverrait { code, label }
+        if (typeof val === 'object' && 'code' in (val as Record<string, unknown>)) {
+          const obj = val as { code?: unknown }
+          return typeof obj.code === 'string' ? obj.code : String(obj.code ?? '')
+        }
+
+        return String(val)
       }
-      return
-    }
-
-    // Règle 3 : slash automatique à position 3 (index 18)
-    if (extensionPos === 3) {
-      e.preventDefault()
-      const before = codeBudgetaire.value.slice(0, position)
-      const after = codeBudgetaire.value.slice(position)
-      codeBudgetaire.value = before + '/' + after
-      nextTick(() => {
-        input.selectionStart = input.selectionEnd = position + 1
-      })
-      return
-    }
 
-    // Tout autre cas = bloqué
-    e.preventDefault()
-  }
+      const gererChangement = (val: unknown) => {
+        const code = extraireCode(val)
+        codeBudgetaire.value = formaterCodeBudgetaire(code)
 
-  const formaterCodeBudgetaire = (valeur: string): string => {
-    if (!valeur) return ''
+        const valeurFormatee = codeBudgetaire.value.trim().toUpperCase()
 
-    const upper = valeur.toUpperCase().replace(/[^A-Z0-9/]/g, '')
-    const chiffres = upper.replace(/[^0-9]/g, '').slice(0, 12)
-
-    let base = ''
-    if (chiffres.length > 0) base += chiffres.slice(0, 3)
-    if (chiffres.length > 3) base += '-' + chiffres.slice(3, 4)
-    if (chiffres.length > 4) base += '-' + chiffres.slice(4, 9)
-    if (chiffres.length > 9) base += '-' + chiffres.slice(9, 12)
-
-    if (!activerExtension || base.length < 15) return base
-
-    const reste = upper.slice(chiffres.length).replace(/[^A-Z0-9/]/gi, '')
-
-    // Extraire les 7 premiers caractères restants pour l’extension
-    let ext = reste.slice(0, 7).split('')
-
-    // Ne garder que le premier slash s’il est à l’index 0 ou 3
-    ext = ext.filter((c, i) => {
-      if (c !== '/') return true
-      return i === 0 || i === 3
-    })
-
-    // Enlever les slash non autorisés
-    ext = ext.map((c, i) => {
-      if (c === '/' && i !== 0 && i !== 3) return ''
-      if (c !== '/' && !/^[A-Z0-9]$/i.test(c)) return ''
-      return c
-    })
-
-    // Forcer le slash à la 4e position
-    if (ext.length > 3) {
-      ext[3] = '/'
-    }
-
-    // Réduire à 7 caractères
-    ext = ext.slice(0, 7)
-
-    return (base + ext.join('')).slice(0, 22)
-  }
-
-  const gererPaste = (e: ClipboardEvent) => {
-    e.preventDefault()
-    const clipboardData = e.clipboardData
-    if (!clipboardData) return
-    let pasted = clipboardData.getData('text') || ''
-    codeBudgetaire.value = formaterCodeBudgetaire(pasted)
-
-    setTimeout(() => {
-      const input = e.target as HTMLInputElement
-      input.selectionStart = input.selectionEnd = codeBudgetaire.value.length
-    }, 0)
-  }
-
-  const sauvegarder = () => {
-    codeBudgetaire.value = formaterCodeBudgetaire(codeBudgetaire.value)
-
-    if (!estValideComplet.value) return
-    if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
-
-    const codeNormalise = codeBudgetaire.value.trim().toUpperCase()
-
-    const existe = props.codeBudgetairesProp.some(item => {
-      const code = typeof item === 'string' ? item : item[0]
-      return code.trim().toUpperCase() === codeNormalise
-    })
-
-    if (!existe) {
-      const nouvelleListe = [...props.codeBudgetairesProp, codeBudgetaire.value]
-      emit('update:codeBudgetairesProp', nouvelleListe)
-    }
-
-    derniereValeurSauvegardee.value = codeBudgetaire.value
-    emit('update:modelValue', codeBudgetaire.value)
-  }
-
-  const extraireCode = (val: unknown): string => {
-    if (val == null) return ''
-    if (typeof val === 'string') return val
-
-    // Cas où Vuetify enverrait { code, label }
-    if (typeof val === 'object' && 'code' in (val as Record<string, unknown>)) {
-      const obj = val as { code?: unknown }
-      return typeof obj.code === 'string' ? obj.code : String(obj.code ?? '')
-    }
-
-    return String(val)
-  }
-
-  const gererChangement = (val: unknown) => {
-    const code = extraireCode(val)
-    codeBudgetaire.value = formaterCodeBudgetaire(code)
-
-    const valeurFormatee = codeBudgetaire.value.trim().toUpperCase()
-
-    const estDansListe = props.codeBudgetairesProp.some(item => {
-      const codeItem = typeof item === 'string' ? item : item[0]
-      return codeItem.trim().toUpperCase() === valeurFormatee
-    })
-
-    if (
-      estDansListe &&
-      valeurFormatee !== (derniereValeurSauvegardee.value ?? '').toUpperCase() &&
-      estValideComplet.value
-    ) {
-      sauvegarder()
-    }
-  }
-
-  watch(estValideComplet, value => {
-    emit('update:valide', value)
-  })
+        const estDansListe = props.codeBudgetairesProp.some(item => {
+          const codeItem = typeof item === 'string' ? item : item[0]
+          return codeItem.trim().toUpperCase() === valeurFormatee
+        })
+
+        if (
+          estDansListe &&
+          valeurFormatee !== (derniereValeurSauvegardee.value ?? '').toUpperCase() &&
+          estValideComplet.value
+        ) {
+          sauvegarder()
+        }
+      }
+
+  watch(
+    () => codeBudgetaire.value,
+    () => {
+      emit('update:valide', estValideComplet.value)
+    },
+    { immediate: true },
+  )
 </script>

package/composants/gabarit/pivEntete.vue

@@ -1,203 +1,205 @@
-<template>
-  <v-toolbar
-    color="primary"
-    height="72px"
-    elevation="1"
-  >
-    <v-row
-      class="pl-6 pr-6"
-      align="center"
-      no-gutters
-    >
-      <!-- Première colonne : Logo -->
-      <v-col cols="auto">
-        <a
-          :href="href"
-          :target="cssUrlValide ? '_blank' : undefined"
-          :rel="cssUrlValide ? 'noopener noreferrer' : undefined"
-        >
-          <!-- Placeholder (même taille) pendant la décision -->
-          <div
-            v-if="!ready"
-            class="logo-placeholder"
-          ></div>
-          <!-- On ne rend l'image qu'une fois la source choisie -->
-          <img
-            v-else
-            class="logo-img"
-            id="pivImage"
-            :src="currentSrc!"
-            :alt="$t('csqc.pivFooter.logoAlt')"
-            decoding="async"
-            loading="eager"
-            @error="ErreurLogo"
-          />
-        </a>
-      </v-col>
-
-      <!-- Colonne pour le nom de l'application (Pour le mode desktop) -->
-      <v-col
-        v-if="!estMobile"
-        class="d-flex justify-center"
-      >
-        <v-app-bar-title
-          class="pl-12 ml-12"
-          style="font-size: 16px !important"
-        >
-          {{ formulaireNom }}
-        </v-app-bar-title>
-      </v-col>
-
-      <!-- Colonne pour le bouton de langue et icône d'aide  -->
-      <v-col class="d-none d-flex justify-end">
-        <!-- langue -->
-        <v-btn
-          variant="text"
-          @click="enregistrerLangue()"
-          >{{ $t('csqc.pivEntete.langue') }}
-        </v-btn>
-
-        <!-- icône d'aide si dispo -->
-        <v-btn
-          v-if="aideUrl"
-          icon="mdi-help-circle-outline"
-          :href="aideUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-          style="margin-top: -6px"
-        >
-        </v-btn>
-      </v-col>
-
-      <!-- Colonne pour le nom de l'application (Pour le mode mobile) -->
-      <v-col
-        v-if="props.estMobile"
-        cols="12"
-      >
-        <v-app-bar-title style="font-size: 16px !important">
-          {{ formulaireNom }}
-        </v-app-bar-title>
-      </v-col>
-    </v-row>
-  </v-toolbar>
-</template>
-
-<script setup lang="ts">
-  import { ref, watch, computed } from 'vue'
-  import { useLocale } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-
-  const { current } = useLocale()
-  const props = defineProps({
-    estMobile: { type: Boolean, default: false },
-    urlBase: { type: String, required: true },
-    aideUrl: { type: String, default: '' },
-    cssUrl: { type: String, default: '' },
-    logoUrl: { type: String, default: '' },
-    lienLogo: { type: String, default: '' },
-    formulaireId: { type: Number, default: 0 },
-    formulaireNom: { type: String, default: '' },
-  })
-  const emit = defineEmits(['changementLangue'])
-  const { t } = useI18n()
-
-  const FALLBACK = '/images/QUEBEC_blanc.svg'
-  const currentSrc = ref<string | null>(null) // pas d'image tant que null
-  const ready = ref(false)
-
-  const formulaireNom = computed(() => {
-    return props.formulaireNom || t('nom_application')
-  })
-
-  const href = computed(() => (props.cssUrl?.trim() ? props.cssUrl.trim() : '/'))
-  const cssUrlValide = computed(() => /^https?:\/\//i.test(href.value))
-
-  let loadToken = 0 // ← identifiant de “requête” pour annuler logiquement
-
-  // Sur changement de l’URL du logo, on tente de le charger, sinon fallback apres 3.5 secs
-  watch(
-    () => props.logoUrl,
-    async (nouvelle, ancienne) => {
-      const url = (nouvelle ?? '').trim()
-
-      // même URL → ne rien faire
-      if (url === (ancienne ?? '').trim() && currentSrc.value !== null) return
-
-      // pas d’URL → fallback immédiat
-      if (!url) {
-        currentSrc.value = FALLBACK
-        ready.value = true
-        return
-      }
-
-      // nouvelle tentative (avec “annulation logique”)
-      const token = ++loadToken
-      ready.value = false
-      const ok = await loadWithTimeout(url, 3500)
-      if (token !== loadToken) return // une nouvelle tentative a démarré entre-temps
-
-      currentSrc.value = ok ? url : FALLBACK
-      ready.value = true
-    },
-    { immediate: true },
-  )
-
-  // Charge une image avec un timeout
-  function loadWithTimeout(url: string, timeoutMs: number): Promise<boolean> {
-    return new Promise<boolean>(resolve => {
-      const img = new Image()
-      const timer = setTimeout(() => {
-        // trop long → on abandonne
-        img.src = '' // stoppe le chargement
-        resolve(false)
-      }, timeoutMs)
-
-      img.onload = () => {
-        clearTimeout(timer)
-        resolve(true)
-      }
-      img.onerror = () => {
-        clearTimeout(timer)
-        resolve(false)
-      }
-      img.src = url
-    })
-  }
-
-  // Si l'image choisie a un problème, switch sur le fallback
-  function ErreurLogo() {
-    if (currentSrc.value !== FALLBACK) currentSrc.value = FALLBACK
-  }
-
-  const enregistrerLangue = (): void => {
-    const langueDispo: string = current.value === 'fr' ? 'en' : 'fr'
-    let returnUrl = window.location.pathname + window.location.search
-    if (import.meta.env.MODE === 'development') {
-      returnUrl = '/'
-    }
-    window.location.href =
-      props.urlBase + `/Traducteur/SetLanguage?culture=${langueDispo}&returnUrl=${encodeURIComponent(returnUrl)}`
-    emit('changementLangue')
-  }
-</script>
-
-<style scoped>
-  .container {
-    max-width: none !important;
-  }
-  .theme--light.v-app-bar.v-toolbar.v-sheet {
-    background: #095797;
-
-    color: #fff;
-  }
-  .logo-placeholder {
-    height: 72px;
-    width: 180px;
-  }
-  .logo-img {
-    height: 72px;
-    transition: opacity 0.15s;
-    opacity: 1;
-    display: block;
-  }
-</style>
+<template>
+  <v-toolbar
+    color="primary"
+    height="72px"
+    elevation="1"
+  >
+    <v-row
+      class="pl-6 pr-6"
+      align="center"
+      no-gutters
+    >
+      <!-- Première colonne : Logo -->
+      <v-col cols="auto">
+        <a
+          :href="href"
+          :target="cssUrlValide ? '_blank' : undefined"
+          :rel="cssUrlValide ? 'noopener noreferrer' : undefined"
+        >
+          <!-- Placeholder (même taille) pendant la décision -->
+          <div
+            v-if="!ready"
+            class="logo-placeholder"
+          ></div>
+          <!-- On ne rend l'image qu'une fois la source choisie -->
+          <img
+            v-else
+            class="logo-img"
+            id="pivImage"
+            :src="currentSrc!"
+            :alt="$t('csqc.pivFooter.logoAlt')"
+            decoding="async"
+            loading="eager"
+            @error="ErreurLogo"
+          />
+        </a>
+      </v-col>
+
+      <!-- Colonne pour le nom de l'application (Pour le mode desktop) -->
+      <v-col
+        v-if="!estMobile"
+        class="d-flex justify-center"
+      >
+        <v-app-bar-title
+          class="pl-12 ml-12"
+          style="font-size: 16px !important"
+        >
+          {{ formulaireNom }}
+        </v-app-bar-title>
+      </v-col>
+
+      <!-- Colonne pour le bouton de langue et icône d'aide  -->
+      <v-col class="d-none d-flex justify-end">
+        <!-- langue -->
+        <v-btn
+          variant="text"
+          @click="enregistrerLangue()"
+          >{{ $t('csqc.pivEntete.langue') }}
+        </v-btn>
+
+        <!-- icône d'aide si dispo -->
+        <v-btn
+          v-if="aideUrl"
+          icon="mdi-help-circle-outline"
+          :href="aideUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          style="margin-top: -6px"
+        >
+        </v-btn>
+
+        <slot name="droite"></slot>
+      </v-col>
+
+      <!-- Colonne pour le nom de l'application (Pour le mode mobile) -->
+      <v-col
+        v-if="props.estMobile"
+        cols="12"
+      >
+        <v-app-bar-title style="font-size: 16px !important">
+          {{ formulaireNom }}
+        </v-app-bar-title>
+      </v-col>
+    </v-row>
+  </v-toolbar>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { useLocale } from 'vuetify'
+  import { useI18n } from 'vue-i18n'
+
+  const { current } = useLocale()
+  const props = defineProps({
+    estMobile: { type: Boolean, default: false },
+    urlBase: { type: String, required: true },
+    aideUrl: { type: String, default: '' },
+    cssUrl: { type: String, default: '' },
+    logoUrl: { type: String, default: '' },
+    lienLogo: { type: String, default: '' },
+    formulaireId: { type: Number, default: 0 },
+    formulaireNom: { type: String, default: '' },
+  })
+  const emit = defineEmits(['changementLangue'])
+  const { t } = useI18n()
+
+  const FALLBACK = '/images/QUEBEC_blanc.svg'
+  const currentSrc = ref<string | null>(null) // pas d'image tant que null
+  const ready = ref(false)
+
+  const formulaireNom = computed(() => {
+    return props.formulaireNom || t('nom_application')
+  })
+
+  const href = computed(() => (props.cssUrl?.trim() ? props.cssUrl.trim() : '/'))
+  const cssUrlValide = computed(() => /^https?:\/\//i.test(href.value))
+
+  let loadToken = 0 // ← identifiant de “requête” pour annuler logiquement
+
+  // Sur changement de l’URL du logo, on tente de le charger, sinon fallback apres 3.5 secs
+  watch(
+    () => props.logoUrl,
+    async (nouvelle, ancienne) => {
+      const url = (nouvelle ?? '').trim()
+
+      // même URL → ne rien faire
+      if (url === (ancienne ?? '').trim() && currentSrc.value !== null) return
+
+      // pas d’URL → fallback immédiat
+      if (!url) {
+        currentSrc.value = FALLBACK
+        ready.value = true
+        return
+      }
+
+      // nouvelle tentative (avec “annulation logique”)
+      const token = ++loadToken
+      ready.value = false
+      const ok = await loadWithTimeout(url, 3500)
+      if (token !== loadToken) return // une nouvelle tentative a démarré entre-temps
+
+      currentSrc.value = ok ? url : FALLBACK
+      ready.value = true
+    },
+    { immediate: true },
+  )
+
+  // Charge une image avec un timeout
+  function loadWithTimeout(url: string, timeoutMs: number): Promise<boolean> {
+    return new Promise<boolean>(resolve => {
+      const img = new Image()
+      const timer = setTimeout(() => {
+        // trop long → on abandonne
+        img.src = '' // stoppe le chargement
+        resolve(false)
+      }, timeoutMs)
+
+      img.onload = () => {
+        clearTimeout(timer)
+        resolve(true)
+      }
+      img.onerror = () => {
+        clearTimeout(timer)
+        resolve(false)
+      }
+      img.src = url
+    })
+  }
+
+  // Si l'image choisie a un problème, switch sur le fallback
+  function ErreurLogo() {
+    if (currentSrc.value !== FALLBACK) currentSrc.value = FALLBACK
+  }
+
+  const enregistrerLangue = (): void => {
+    const langueDispo: string = current.value === 'fr' ? 'en' : 'fr'
+    let returnUrl = window.location.pathname + window.location.search
+    if (import.meta.env.MODE === 'development') {
+      returnUrl = '/'
+    }
+    window.location.href =
+      props.urlBase + `/Traducteur/SetLanguage?culture=${langueDispo}&returnUrl=${encodeURIComponent(returnUrl)}`
+    emit('changementLangue')
+  }
+</script>
+
+<style scoped>
+  .container {
+    max-width: none !important;
+  }
+  .theme--light.v-app-bar.v-toolbar.v-sheet {
+    background: #095797;
+
+    color: #fff;
+  }
+  .logo-placeholder {
+    height: 72px;
+    width: 180px;
+  }
+  .logo-img {
+    height: 72px;
+    transition: opacity 0.15s;
+    opacity: 1;
+    display: block;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",