codevdesign 1.0.78 → 2.0.0

package/composants/csqcTiroir.vue

@@ -1,197 +1,197 @@
-<template>
-  <v-navigation-drawer
-    v-model="visible"
-    location="right"
-    temporary
-    class="pa-0 elevation-2 csqc-ligneBleue"
-    :persistent="persistant"
-    v-bind="$attrs"
-    :width="grosseurTiroir"
-    @keydown.esc="!persistant ? fermeture : ''"
-    @click:outside="!persistant ? fermeture : ''"
-  >
-    <v-card class="pa-0 ma-0 pl-8 pt-8">
-      <!-- Bouton en haut à droite -->
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        class="position-absolute iconeHover"
-        style="top: 5px; right: 5px"
-        @click="fermeture"
-      ></v-btn>
-
-      <v-card-title
-        class="pa-0 ma-0 pb-6 text-wrap"
-        style="font-size: 24px"
-      >
-        <slot name="titre"></slot>
-        <div text-h5>{{ titre }}</div>
-      </v-card-title>
-
-      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
-        <v-container>
-          <slot></slot>
-          <slot name="content"></slot>
-        </v-container>
-      </v-card-text>
-      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
-        <slot name="actions"></slot>
-        <v-btn
-          v-if="btnAnnuler"
-          color="primary"
-          variant="text"
-          :loading="operationEnCours"
-          @click="fermeture"
-        >
-          {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          color="primary"
-          variant="flat"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver || operationEnCours"
-          @click="okBouton"
-        >
-          {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-navigation-drawer>
-  <Teleport to="body">
-    <v-fab
-      v-if="retourEnHaut && afficherBoutonHaut"
-      style="position: fixed; bottom: 24px; right: 24px; z-index: 2000"
-      elevation="8"
-      color="primary"
-      icon="mdi-arrow-up"
-      @click="allerEnHaut"
-    />
-  </Teleport>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, watch, nextTick, useAttrs } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const visible = ref(false)
-  const display = useDisplay()
-  const attrs = useAttrs()
-
-  // Déclaration des props
-  const props = defineProps({
-    titre: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    btnAnnuler: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-    btnOk: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-    btnAnnulerTexte: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    btnOkDesactiver: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    operationEnCours: { type: Boolean, default: false },
-    persistant: { type: Boolean, default: true },
-    btnOkTexte: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    retourEnHaut: {
-      type: Boolean,
-      default: true,
-    },
-  })
-
-  // Déclaration des événements
-  const emit = defineEmits(['fermer', 'ok'])
-
-  // Back to top
-  const afficherBoutonHaut = ref(false)
-  let conteneurScroll: Element | null = null
-
-  function onScroll() {
-    afficherBoutonHaut.value = (conteneurScroll?.scrollTop ?? 0) > 350
-  }
-
-  function allerEnHaut() {
-    conteneurScroll?.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
-  watch(visible, async val => {
-    if (!props.retourEnHaut) return
-    if (val) {
-      await nextTick()
-      conteneurScroll = document.querySelector('.v-navigation-drawer--active .v-navigation-drawer__content')
-      conteneurScroll?.addEventListener('scroll', onScroll)
-    } else {
-      conteneurScroll?.removeEventListener('scroll', onScroll)
-      conteneurScroll = null
-      afficherBoutonHaut.value = false
-    }
-  })
-
-  // Méthodes
-  const ouvrir = () => {
-    visible.value = true
-  }
-
-  const fermer = () => {
-    visible.value = false
-  }
-
-  const fermeture = () => {
-    emit('fermer')
-    fermer()
-  }
-
-  const okBouton = () => {
-    emit('ok')
-    fermer()
-  }
-
-  // Calcul des tailles du tiroir en fonction du breakpoint
-  const grosseurTiroir = computed(() => {
-    if (attrs.width !== undefined && attrs.width !== null) return attrs.width as string | number
-    switch (display.name.value) {
-      case 'xs':
-        return ''
-      case 'sm':
-        return 0.95 * display.width.value
-      case 'md':
-        return 0.8 * display.width.value
-      case 'lg':
-        return 0.7 * display.width.value
-      case 'xl':
-        return 0.6 * display.width.value
-      case 'xxl':
-        return 0.5 * display.width.value
-      default:
-        return ''
-    }
-  })
-
-  defineExpose({ ouvrir, fermer })
-</script>
-
-<style>
-  .csqc-ligneBleue {
-    border-left: 30px #095797 solid !important;
-  }
-</style>
+<template>
+  <v-navigation-drawer
+    v-model="visible"
+    location="right"
+    temporary
+    class="pa-0 elevation-2 csqc-ligneBleue"
+    :persistent="persistant"
+    v-bind="$attrs"
+    :width="grosseurTiroir"
+    @keydown.esc="!persistant ? fermeture : ''"
+    @click:outside="!persistant ? fermeture : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute iconeHover"
+        style="right: 5px; top: 5px"
+        @click="fermeture"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6 text-wrap"
+        style="font-size: 24px"
+      >
+        <slot name="titre"></slot>
+        <div text-h5>{{ titre }}</div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <v-btn
+          v-if="btnAnnuler"
+          color="primary"
+          variant="text"
+          :loading="operationEnCours"
+          @click="fermeture"
+        >
+          {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          variant="flat"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver || operationEnCours"
+          @click="okBouton"
+        >
+          {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-navigation-drawer>
+  <Teleport to="body">
+    <v-fab
+      v-if="retourEnHaut && afficherBoutonHaut"
+      style="bottom: 24px; position: fixed; right: 24px; z-index: 2000"
+      elevation="8"
+      color="primary"
+      icon="mdi-arrow-up"
+      @click="allerEnHaut"
+    />
+  </Teleport>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, watch, nextTick, useAttrs } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const visible = ref(false)
+  const display = useDisplay()
+  const attrs = useAttrs()
+
+  // Déclaration des props
+  const props = defineProps({
+    titre: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnAnnuler: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnOk: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnAnnulerTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnOkDesactiver: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    operationEnCours: { type: Boolean, default: false },
+    persistant: { type: Boolean, default: true },
+    btnOkTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    retourEnHaut: {
+      type: Boolean,
+      default: true,
+    },
+  })
+
+  // Déclaration des événements
+  const emit = defineEmits(['fermer', 'ok'])
+
+  // Back to top
+  const afficherBoutonHaut = ref(false)
+  let conteneurScroll: Element | null = null
+
+  function onScroll() {
+    afficherBoutonHaut.value = (conteneurScroll?.scrollTop ?? 0) > 350
+  }
+
+  function allerEnHaut() {
+    conteneurScroll?.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  watch(visible, async val => {
+    if (!props.retourEnHaut) return
+    if (val) {
+      await nextTick()
+      conteneurScroll = document.querySelector('.v-navigation-drawer--active .v-navigation-drawer__content')
+      conteneurScroll?.addEventListener('scroll', onScroll)
+    } else {
+      conteneurScroll?.removeEventListener('scroll', onScroll)
+      conteneurScroll = null
+      afficherBoutonHaut.value = false
+    }
+  })
+
+  // Méthodes
+  const ouvrir = () => {
+    visible.value = true
+  }
+
+  const fermer = () => {
+    visible.value = false
+  }
+
+  const fermeture = () => {
+    emit('fermer')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+    fermer()
+  }
+
+  // Calcul des tailles du tiroir en fonction du breakpoint
+  const grosseurTiroir = computed(() => {
+    if (attrs.width !== undefined && attrs.width !== null) return attrs.width as string | number
+    switch (display.name.value) {
+      case 'xs':
+        return ''
+      case 'sm':
+        return 0.95 * display.width.value
+      case 'md':
+        return 0.8 * display.width.value
+      case 'lg':
+        return 0.7 * display.width.value
+      case 'xl':
+        return 0.6 * display.width.value
+      case 'xxl':
+        return 0.5 * display.width.value
+      default:
+        return ''
+    }
+  })
+
+  defineExpose({ ouvrir, fermer })
+</script>
+
+<style>
+  .csqc-ligneBleue {
+    border-left: 30px #095797 solid !important;
+  }
+</style>

package/composants/gabarit/csqcMenu.vue

@@ -238,9 +238,9 @@
   }
   /* desktop */
   .params_item {
-    font-weight: 400;
-    color: white !important;
     background-color: #223654 !important;
+    color: white !important;
+    font-weight: 400;
   }
   /* desktop */
   .params_item.v-btn--active {
@@ -249,8 +249,8 @@
   }
   /* desktop */
   .params_item.v-btn--active:hover {
-    color: white !important;
     background-color: #223654 !important;
+    color: white !important;
   }
   /* desktop */
   .params_item.v-btn--active:hover::before {
@@ -258,10 +258,10 @@
   }
   /* desktop */
   .params_item.v-btn--active::before {
-    opacity: 0.24;
     border-radius: 0;
     color: #ffffff80 !important;
     margin-top: 1px !important;
+    opacity: 0.24;
   }
 
   /* mobile couleur du texte de la barre, marge du haut, padding */

package/composants/gabarit/pivEntete.vue

@@ -5,8 +5,7 @@
     elevation="1"
   >
     <v-row
-      class="pl-6 pr-6"
-      align="center"
+      class="pl-6 pr-6 align-center"
       no-gutters
     >
       <!-- Première colonne : Logo -->
@@ -24,8 +23,8 @@
           <!-- On ne rend l'image qu'une fois la source choisie -->
           <img
             v-else
-            class="logo-img"
             id="pivImage"
+            class="logo-img"
             :src="currentSrc!"
             :alt="$t('csqc.pivFooter.logoAlt')"
             decoding="async"
@@ -52,6 +51,7 @@
       <v-col class="d-none d-flex justify-end">
         <!-- langue -->
         <v-btn
+          v-if="props.estVisibleLangue"
           variant="text"
           @click="enregistrerLangue()"
           >{{ $t('csqc.pivEntete.langue') }}
@@ -92,6 +92,7 @@
   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: '' },
@@ -197,9 +198,9 @@
     width: 180px;
   }
   .logo-img {
+    display: block;
     height: 72px;
-    transition: opacity 0.15s;
     opacity: 1;
-    display: block;
+    transition: opacity 0.15s;
   }
 </style>

package/composants/gabarit/pivPiedPage.vue

@@ -1,33 +1,48 @@
 <template>
   <footer>
-    <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 }}
+    <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>
 
-          <a
-            v-if="props.version"
-            :href="props.lien"
-            target="_blank"
-            ><br />
-            version <span v-html="props.version"
-          /></a>
-        </small>
-      </div>
-    </div>
+      <!-- slot droite -->
+      <v-col cols="3">
+        <slot name="droite" />
+      </v-col>
+    </v-row>
   </footer>
 </template>
 
@@ -46,18 +61,18 @@
 
 <style scoped>
   footer {
+    align-items: center; /* Centrer verticalement */
     display: flex;
+    height: 100px; /* Ajuster la hauteur du footer */
     justify-content: center; /* Centrer horizontalement */
-    align-items: center; /* Centrer verticalement */
     text-align: center; /* Centrer le texte à l'intérieur des éléments */
-    height: 100px; /* Ajuster la hauteur du footer */
   }
 
   .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 */
-    align-items: center; /* Centrer horizontalement à l'intérieur de .footer-content */
   }
 
   footer a {

package/composants/validateurs.ts

@@ -35,7 +35,10 @@ export function estMinimumLongueur(valeur: string, min: number, t: (key: string,
       'CsqcValidateurs (estMinimumLongeur) - Une valeur négative ou égale à 0 a été reçue. Assurez-vous de passer une valeur supérieur à 0 dans la fonction estMinimumLongeur. La valeur a été mise à 1.',
     )
   }
-  return (valeur && valeur.trim().length >= min) || t('csqc.validateurs.estMinimumLongueur', { count: min, nbCaracteres: min })
+  return (
+    (valeur && valeur.trim().length >= min) ||
+    t('csqc.validateurs.estMinimumLongueur', { count: min, nbCaracteres: min })
+  )
 }
 
 /**
@@ -52,7 +55,10 @@ export function estMaximumLongueur(valeur: string, max: number, t: (key: string,
     )
   }
 
-  return (valeur && valeur.trim().length <= max) || t('csqc.validateurs.estMaximumLongueur', { count: max, nbCaracteres: max })
+  return (
+    (valeur && valeur.trim().length <= max) ||
+    t('csqc.validateurs.estMaximumLongueur', { count: max, nbCaracteres: max })
+  )
 }
 
 /**

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'