codevdesign 0.0.43 → 0.0.45

package/composants/csqcEntete.vue

@@ -25,26 +25,33 @@
               @click="retournerMenu"
           /></slot>
 
-          <!-- Titre -->
-          <slot name="titre"
-            ><span class="pl-3"> {{ props.titre }}</span></slot
-          >
-
-          <!-- État -->
-          <slot name="etat">
-            <span
-              v-if="monEtat?.afficher"
-              class="pl-10"
+          <div class="titre-bloc">
+            <!-- Titre -->
+            <slot name="titre"
+              ><span class="pl-3"> {{ props.titre }}</span></slot
             >
-              <v-btn
-                size="small"
-                :color="monEtat.couleur"
-                variant="tonal"
+
+            <!-- État -->
+            <slot name="etat">
+              <span
+                v-if="monEtat?.afficher"
+                class="pl-10"
               >
-                {{ monEtat.texte }}
-              </v-btn>
-            </span></slot
-          >
+                <v-btn
+                  size="small"
+                  :color="monEtat.couleur"
+                  variant="tonal"
+                >
+                  {{ monEtat.texte }}
+                </v-btn>
+              </span></slot
+            >
+
+            <!-- Sous-titre -->
+            <slot name="soustitre"
+              ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
+            >
+          </div>
         </v-toolbar-title>
       </v-col>
     </v-row>
@@ -68,6 +75,7 @@
 
   const props = defineProps<{
     titre: string
+    soustitre?: string
     retour?: string
     etat?: EnteteEtat
   }>()
@@ -102,6 +110,17 @@
     font-weight: bold;
     margin-bottom: 15px;
   }
+  .soustitre {
+    display: block;
+    font-size: 1rem;
+    color: #223654;
+    font-weight: normal;
+  }
+  .titre-bloc {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 12px;
+  }
   .v-icon:hover {
     color: #095797 !important;
   }

package/composants/csqcTexteBilingue.vue

@@ -67,6 +67,8 @@
   import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
   import { ChoixLangue } from '@/enums/choixLangue'
   import { computed, type PropType, toRefs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n({ useScope: 'global' })
 
   const props = defineProps<{
     textarea?: boolean
@@ -106,21 +108,26 @@
       )
     }
 
-    if (estRequis.value) _regles.push(v => estRequisRegle(v))
+    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,
-        }),
+        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!))
+    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
 
-    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!))
+    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
 
     return _regles
   })

package/composants/validateurs.ts

@@ -1,5 +1,4 @@
 import { ChoixLangue } from '@/enums/choixLangue'
-import i18n from '@/plugins/i18n'
 
 /**
  * Valide que le champ contient une valeur définie et non vide.
@@ -7,10 +6,9 @@ import i18n from '@/plugins/i18n'
  * et toute autre valeur définie (ex. objets sélectionnés dans un v-select).
  *
  * @param valeur La valeur saisie ou sélectionnée dans le champ.
- * @returns `true` si la valeur est considérée comme valide, sinon retourne un message d'erreur.
+ * @returns true si la valeur est considérée comme valide, sinon retourne un message d'erreur.
  */
-export function estRequis(valeur: unknown): true | string {
-  const { t } = i18n.global
+export function estRequis(valeur: unknown, t: (key: string, params?: any) => string): true | string {
   if (valeur == null) return t('validateurs.estRequis')
 
   if (typeof valeur === 'number' && isNaN(valeur)) return t('validateurs.estRequis')
@@ -26,27 +24,25 @@ export function estRequis(valeur: unknown): true | string {
  * Valide que le champ contient une valeur qui est d'une longeur minimale.
  * @param valeur La valeur saisie du champ texte.
  * @param min La longeur minimale de la valeur.
- * @returns `true` si la longeur de la valeur est égale ou supérieure au minimum, sinon retourne un message d'erreur.
+ * @returns true si la longeur de la valeur est égale ou supérieure au minimum, sinon retourne un message d'erreur.
  */
-export function estMinimumLongueur(valeur: string, min: number) {
-  const { t } = i18n.global
+export function estMinimumLongueur(valeur: string, min: number, t: (key: string, params?: any) => string) {
   if (min <= 0) {
     min = 1
     console.warn(
       '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('validateurs.estMinimumLongueur', { nbCaracteres: min }, min)
+  return (valeur && valeur.trim().length >= min) || t('validateurs.estMinimumLongueur', { nbCaracteres: min })
 }
 
 /**
  * Valide que le champ contient une valeur qui ne dépasse pas une longeur maximale.
  * @param valeur La valeur saisie du champ texte.
  * @param max La longeur maximale (inclusive) de la valeur.
- * @returns `true` si la longeur de la valeur est inférieure ou égale au maximum, sinon retourne un message d'erreur.
+ * @returns true si la longeur de la valeur est inférieure ou égale au maximum, sinon retourne un message d'erreur.
  */
-export function estMaximumLongueur(valeur: string, max: number) {
-  const { t } = i18n.global
+export function estMaximumLongueur(valeur: string, max: number, t: (key: string, params?: any) => string) {
   if (max < 1) {
     max = 1
     console.warn(
@@ -54,7 +50,7 @@ export function estMaximumLongueur(valeur: string, max: number) {
     )
   }
 
-  return (valeur && valeur.trim().length <= max) || t('validateurs.estMaximumLongueur', { nbCaracteres: max }, max)
+  return (valeur && valeur.trim().length <= max) || t('validateurs.estMaximumLongueur', { nbCaracteres: max })
 }
 
 /**
@@ -69,8 +65,8 @@ export function estUniqueBilingue<T extends ModeleAvecId>(
   valeur: string,
   modele: T,
   options: EstUniqueOptionsBilingue<T>,
+  t: (key: string, params?: any) => string,
 ) {
-  const { t } = i18n.global
   // Affectations valeurs par défaut
   const { champs, langueCss, valeurs } = options
   if (!langueCss) options.langueCss = ChoixLangue.Francais
@@ -142,8 +138,12 @@ export function estUniqueBilingue<T extends ModeleAvecId>(
  * @param options Les configurations de la fonction
  * @returns Vrai si la valeur est unique, ou une string d'erreur si un doublon est trouvé.
  */
-export function estUnique<T extends ModeleAvecId>(valeur: string, modele: T, options: EstUniqueOptions<T>) {
-  const { t } = i18n.global
+export function estUnique<T extends ModeleAvecId>(
+  valeur: string,
+  modele: T,
+  options: EstUniqueOptions<T>,
+  t: (key: string, params?: any) => string,
+) {
   const { champ, valeurs } = options
   return (
     !valeurs.some(

package/package.json

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