codevdesign 2.0.18 → 2.0.20

package/composants/gabarit/pivEntete.vue

@@ -1,206 +1,206 @@
-<template>
-  <v-toolbar
-    color="#095797"
-    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
-            id="pivImage"
-            class="logo-img"
-            :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
-          v-if="props.estVisibleLangue"
-          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 },
-    estVisibleLangue: { type: Boolean, default: true },
-    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 = '/portail/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: rgb(var(--v-theme-primary));
-
-    color: rgb(var(--v-theme-blanc));
-  }
-  .logo-placeholder {
-    height: 72px;
-    width: 180px;
-  }
-  .logo-img {
-    display: block;
-    height: 72px;
-    opacity: 1;
-    transition: opacity 0.15s;
-  }
-</style>
+<template>
+  <v-toolbar
+    color="#095797"
+    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
+            id="pivImage"
+            class="logo-img"
+            :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
+          v-if="props.estVisibleLangue"
+          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 },
+    estVisibleLangue: { type: Boolean, default: true },
+    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 = '/portail/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: rgb(var(--v-theme-primary));
+
+    color: rgb(var(--v-theme-blanc));
+  }
+  .logo-placeholder {
+    height: 72px;
+    width: 180px;
+  }
+  .logo-img {
+    display: block;
+    height: 72px;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
+</style>

package/composants/gabarit/pivPiedPage.vue

@@ -1,95 +1,95 @@
-<template>
-  <footer>
-    <v-row>
-      <!-- slot gauche -->
-      <v-col cols="3">
-        <slot name="gauche" />
-      </v-col>
-
-      <!-- colonne centrale pour logo Quebec et versions -->
-      <v-col cols="6">
-        <div class="footer-content">
-          <a href="https://quebec.ca">
-            <img
-              id="logoFooter"
-              alt="Gouvernement du Québec."
-              src="/images/QUEBEC_couleur.svg"
-              width="117"
-              height="35"
-            />
-          </a>
-          <div>
-            <small>
-              <a
-                href="http://www.droitauteur.gouv.qc.ca/copyright.php"
-                target="_blank"
-                >© Gouvernement du Québec {{ anneeEnCours }}
-              </a>
-
-              <a
-                v-if="props.version"
-                :href="props.lien"
-                target="_blank"
-                ><br />
-                version <span v-html="props.version"
-              /></a>
-            </small>
-          </div>
-        </div>
-      </v-col>
-
-      <!-- slot droite -->
-      <v-col cols="3">
-        <slot name="droite" />
-      </v-col>
-    </v-row>
-  </footer>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue'
-  import { useTheme } from 'vuetify'
-
-  const props = defineProps<{
-    version?: string
-    lien?: string
-  }>()
-
-  const theme = useTheme()
-
-  // dark theme... trouble de lien en prod avec le computed
-  /* const logoSrc = computed(
-    () =>
-      `${import.meta.env.BASE_URL}/images/${theme.global.current.value.dark ? 'QUEBEC_blanc.svg' : 'QUEBEC_couleur.svg'}`,
-  )*/
-
-  const anneeEnCours = computed<number>(() => {
-    return new Date().getFullYear()
-  })
-</script>
-
-<style scoped>
-  footer {
-    align-items: center; /* Centrer verticalement */
-    display: flex;
-    height: 100px; /* Ajuster la hauteur du footer */
-    justify-content: center; /* Centrer horizontalement */
-    text-align: center; /* Centrer le texte à l'intérieur des éléments */
-  }
-
-  .footer-content {
-    align-items: center; /* Centrer horizontalement à l'intérieur de .footer-content */
-    display: flex;
-    flex-direction: column; /* Disposer les éléments les uns sous les autres */
-    justify-content: center; /* Centrer verticalement à l'intérieur de .footer-content */
-  }
-
-  footer a {
-    color: #095797;
-    text-decoration: none;
-  }
-
-  footer small {
-    margin-top: 10px; /* Ajouter de l'espace entre l'image et le texte */
-  }
-</style>
+<template>
+  <footer>
+    <v-row>
+      <!-- slot gauche -->
+      <v-col cols="3">
+        <slot name="gauche" />
+      </v-col>
+
+      <!-- colonne centrale pour logo Quebec et versions -->
+      <v-col cols="6">
+        <div class="footer-content">
+          <a href="https://quebec.ca">
+            <img
+              id="logoFooter"
+              alt="Gouvernement du Québec."
+              src="/images/QUEBEC_couleur.svg"
+              width="117"
+              height="35"
+            />
+          </a>
+          <div>
+            <small>
+              <a
+                href="http://www.droitauteur.gouv.qc.ca/copyright.php"
+                target="_blank"
+                >© Gouvernement du Québec {{ anneeEnCours }}
+              </a>
+
+              <a
+                v-if="props.version"
+                :href="props.lien"
+                target="_blank"
+                ><br />
+                version <span v-html="props.version"
+              /></a>
+            </small>
+          </div>
+        </div>
+      </v-col>
+
+      <!-- slot droite -->
+      <v-col cols="3">
+        <slot name="droite" />
+      </v-col>
+    </v-row>
+  </footer>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useTheme } from 'vuetify'
+
+  const props = defineProps<{
+    version?: string
+    lien?: string
+  }>()
+
+  const theme = useTheme()
+
+  // dark theme... trouble de lien en prod avec le computed
+  /* const logoSrc = computed(
+    () =>
+      `${import.meta.env.BASE_URL}/images/${theme.global.current.value.dark ? 'QUEBEC_blanc.svg' : 'QUEBEC_couleur.svg'}`,
+  )*/
+
+  const anneeEnCours = computed<number>(() => {
+    return new Date().getFullYear()
+  })
+</script>
+
+<style scoped>
+  footer {
+    align-items: center; /* Centrer verticalement */
+    display: flex;
+    height: 100px; /* Ajuster la hauteur du footer */
+    justify-content: center; /* Centrer horizontalement */
+    text-align: center; /* Centrer le texte à l'intérieur des éléments */
+  }
+
+  .footer-content {
+    align-items: center; /* Centrer horizontalement à l'intérieur de .footer-content */
+    display: flex;
+    flex-direction: column; /* Disposer les éléments les uns sous les autres */
+    justify-content: center; /* Centrer verticalement à l'intérieur de .footer-content */
+  }
+
+  footer a {
+    color: #095797;
+    text-decoration: none;
+  }
+
+  footer small {
+    margin-top: 10px; /* Ajouter de l'espace entre l'image et le texte */
+  }
+</style>

package/editeur.ts

@@ -1 +1 @@
-export { default as csqcEditeurTexteRiche } from './composants/csqcEditeurTexteRiche.vue'
+export { default as csqcEditeurTexteRiche } from './composants/csqcEditeurTexteRiche.vue'

package/importCSV.ts

@@ -1 +1 @@
-export { default as csqcImportCSV } from './composants/csqcImportCSV.vue'
+export { default as csqcImportCSV } from './composants/csqcImportCSV.vue'