codevdesign 1.0.77 → 1.0.79

package/composants/csqcTexteBilingue.vue

@@ -1,175 +1,175 @@
-<template>
-  <v-row dense>
-    <v-col
-      v-if="afficherChampFr"
-      cols="12"
-    >
-      <label
-        v-if="!libelleInterieur"
-        :for="`saisieChampFr-${cleTradFr}`"
-        :class="{ libelle: true, required: estRequis }"
-        >{{ $t(cleTradFr) }}
-      </label>
-      <csqcAide
-        v-if="props.aide && !libelleInterieur"
-        :aide="props.aide"
-        hover
-        :style-css="'padding-bottom:6px;padding-left:8px;'"
-      />
-      <v-textarea
-        v-if="textarea"
-        :id="`saisieChampFr-${cleTradFr}`"
-        v-model="model[champs.Francais]"
-        density="comfortable"
-        v-bind="$attrs"
-        rows="1"
-        :label="libelleInterieur ? $t(cleTradFr) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && afficherChampFr"
-      />
-      <v-text-field
-        v-else
-        :id="`saisieChampFr-${cleTradFr}`"
-        v-model="model[champs.Francais]"
-        density="comfortable"
-        v-bind="$attrs"
-        :label="libelleInterieur ? $t(cleTradFr) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && afficherChampFr"
-      />
-    </v-col>
-    <v-col
-      v-if="afficherChampEn"
-      cols="12"
-    >
-      <label
-        v-if="!libelleInterieur"
-        :for="`saisieChampEn-${cleTradEn}`"
-        :class="{ libelle: true, required: estRequis }"
-        >{{ $t(cleTradEn) }}</label
-      ><csqcAide
-        v-if="props.aide && !libelleInterieur"
-        :aide="props.aide"
-        hover
-        :style-css="'padding-bottom:6px;padding-left:8px;'"
-      />
-      <v-textarea
-        v-if="textarea"
-        :id="`saisieChampEn-${cleTradEn}`"
-        v-model="model[champs.Anglais]"
-        rows="1"
-        v-bind="$attrs"
-        density="comfortable"
-        :label="libelleInterieur ? $t(cleTradEn) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && !afficherChampFr"
-      />
-      <v-text-field
-        v-else
-        :id="`saisieChampEn-${cleTradEn}`"
-        v-model="model[champs.Anglais]"
-        density="comfortable"
-        v-bind="$attrs"
-        :label="libelleInterieur ? $t(cleTradEn) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && !afficherChampFr"
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts" generic="T extends { id: number }">
-  import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
-  import { ChoixLangue } from '@/enums/choixLangue'
-  import csqcAide from './csqcAide.vue'
-  import { computed, type PropType, toRefs } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  const { t } = useI18n({ useScope: 'global' })
-
-  const props = defineProps<{
-    aide?: string
-    textarea?: boolean
-    libelleInterieur?: boolean
-    estRequis?: boolean
-    autofocus?: boolean
-    estUniqueValeurs?: T[]
-    minimumLongueur?: number
-    maximumLongueur?: number
-    regles?: ((v: string) => string | true)[]
-    langue: ChoixLangue
-    i18nLibelleRacine: string
-    champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
-  }>()
-
-  const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
-    toRefs(props)
-
-  const minimumLongueur = computed(() => props.minimumLongueur)
-  const maximumLongueur = computed(() => props.maximumLongueur)
-  const estRequis = computed(() => props.estRequis)
-
-  const model = defineModel({
-    type: Object as PropType<T>,
-    required: true,
-  })
-
-  const reglesInterne = computed(() => {
-    const _regles: ((v: string) => string | true)[] = regles.value ?? []
-
-    if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
-      console.error(
-        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
-      )
-      throw Error(
-        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
-      )
-    }
-
-    if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
-
-    if (estUniqueValeurs.value) {
-      _regles.push(v =>
-        estUniqueBilingue(
-          v,
-          model.value,
-          {
-            champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
-            valeurs: estUniqueValeurs.value!,
-            langueCss: langue.value,
-          },
-          t,
-        ),
-      )
-    }
-
-    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
-
-    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
-
-    return _regles
-  })
-
-  // Clés i18n
-  const cleTradEn = computed(() => {
-    switch (langue.value) {
-      case ChoixLangue.Bilingue:
-      case ChoixLangue.Anglais:
-        return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
-      default:
-        return 'cle_manquante'
-    }
-  })
-
-  const cleTradFr = computed(() => {
-    switch (langue.value) {
-      case ChoixLangue.Bilingue:
-      case ChoixLangue.Francais:
-        return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
-      default:
-        return 'cle_manquante'
-    }
-  })
-
-  const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
-  const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
-</script>
+<template>
+  <v-row dense>
+    <v-col
+      v-if="afficherChampFr"
+      cols="12"
+    >
+      <label
+        v-if="!libelleInterieur"
+        :for="`saisieChampFr-${cleTradFr}`"
+        :class="{ libelle: true, required: estRequis }"
+        >{{ $t(cleTradFr) }}
+      </label>
+      <csqcAide
+        v-if="props.aide && !libelleInterieur"
+        :aide="props.aide"
+        hover
+        :style-css="'padding-bottom:6px;padding-left:8px;'"
+      />
+      <v-textarea
+        v-if="textarea"
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-model="model[champs.Francais]"
+        density="comfortable"
+        v-bind="$attrs"
+        rows="1"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-model="model[champs.Francais]"
+        density="comfortable"
+        v-bind="$attrs"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+    </v-col>
+    <v-col
+      v-if="afficherChampEn"
+      cols="12"
+    >
+      <label
+        v-if="!libelleInterieur"
+        :for="`saisieChampEn-${cleTradEn}`"
+        :class="{ libelle: true, required: estRequis }"
+        >{{ $t(cleTradEn) }}</label
+      ><csqcAide
+        v-if="props.aide && !libelleInterieur"
+        :aide="props.aide"
+        hover
+        :style-css="'padding-bottom:6px;padding-left:8px;'"
+      />
+      <v-textarea
+        v-if="textarea"
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-model="model[champs.Anglais]"
+        rows="1"
+        v-bind="$attrs"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-model="model[champs.Anglais]"
+        density="comfortable"
+        v-bind="$attrs"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts" generic="T extends { id: number }">
+  import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
+  import { ChoixLangue } from '@/enums/choixLangue'
+  import csqcAide from './csqcAide.vue'
+  import { computed, type PropType, toRefs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n({ useScope: 'global' })
+
+  const props = defineProps<{
+    aide?: string
+    textarea?: boolean
+    libelleInterieur?: boolean
+    estRequis?: boolean
+    autofocus?: boolean
+    estUniqueValeurs?: T[]
+    minimumLongueur?: number
+    maximumLongueur?: number
+    regles?: ((v: string) => string | true)[]
+    langue: ChoixLangue
+    i18nLibelleRacine: string
+    champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
+  }>()
+
+  const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
+    toRefs(props)
+
+  const minimumLongueur = computed(() => props.minimumLongueur)
+  const maximumLongueur = computed(() => props.maximumLongueur)
+  const estRequis = computed(() => props.estRequis)
+
+  const model = defineModel({
+    type: Object as PropType<T>,
+    required: true,
+  })
+
+  const reglesInterne = computed(() => {
+    const _regles: ((v: string) => string | true)[] = regles.value ?? []
+
+    if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
+      console.error(
+        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
+      )
+      throw Error(
+        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
+      )
+    }
+
+    if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
+
+    if (estUniqueValeurs.value) {
+      _regles.push(v =>
+        estUniqueBilingue(
+          v,
+          model.value,
+          {
+            champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
+            valeurs: estUniqueValeurs.value!,
+            langueCss: langue.value,
+          },
+          t,
+        ),
+      )
+    }
+
+    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
+
+    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
+
+    return _regles
+  })
+
+  // Clés i18n
+  const cleTradEn = computed(() => {
+    switch (langue.value) {
+      case ChoixLangue.Bilingue:
+      case ChoixLangue.Anglais:
+        return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
+      default:
+        return 'cle_manquante'
+    }
+  })
+
+  const cleTradFr = computed(() => {
+    switch (langue.value) {
+      case ChoixLangue.Bilingue:
+      case ChoixLangue.Francais:
+        return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
+      default:
+        return 'cle_manquante'
+    }
+  })
+
+  const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
+  const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
+</script>

package/composants/csqcTiroir.vue

@@ -3,10 +3,10 @@
     v-model="visible"
     location="right"
     temporary
-    v-bind="$attrs"
-    :width="grosseurTiroir"
     class="pa-0 elevation-2 csqc-ligneBleue"
     :persistent="persistant"
+    v-bind="$attrs"
+    :width="grosseurTiroir"
     @keydown.esc="!persistant ? fermeture : ''"
     @click:outside="!persistant ? fermeture : ''"
   >
@@ -16,7 +16,7 @@
         icon="mdi-close"
         variant="text"
         class="position-absolute iconeHover"
-        style="top: 5px; right: 5px"
+        style="right: 5px; top: 5px"
         @click="fermeture"
       ></v-btn>
 
@@ -63,7 +63,7 @@
   <Teleport to="body">
     <v-fab
       v-if="retourEnHaut && afficherBoutonHaut"
-      style="position: fixed; bottom: 24px; right: 24px; z-index: 2000"
+      style="bottom: 24px; position: fixed; right: 24px; z-index: 2000"
       elevation="8"
       color="primary"
       icon="mdi-arrow-up"
@@ -72,11 +72,12 @@
   </Teleport>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, watch, nextTick } from 'vue'
+  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({
@@ -167,6 +168,7 @@
 
   // 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 ''

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

@@ -24,8 +24,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 +52,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 +93,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 +199,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'