codevdesign 0.0.84 → 0.0.86

package/composants/csqcEntete.vue

@@ -1,8 +1,13 @@
 <template>
   <v-app-bar
-    color="white"
+    :color="barreCouleur"
     class="px-0 mx-0"
-    :style="{ position: 'sticky' }"
+    :style="{
+      position: 'sticky',
+      // variables CSS pour les couleurs dynamiques
+      '--entete-texte': texteCouleur,
+      '--entete-icone': iconeCouleur,
+    }"
     height="82px"
   >
     <v-row
@@ -20,16 +25,17 @@
               v-if="retour"
               size="large"
               start
-              color="grisMoyen"
+              :color="iconeCouleur"
               icon="mdi-arrow-left-thin"
               @click="retournerMenu"
-          /></slot>
+            />
+          </slot>
 
           <div class="titre-bloc">
             <!-- Titre -->
-            <slot name="titre"
-              ><span class="pl-3"> {{ props.titre }}</span></slot
-            >
+            <slot name="titre">
+              <span class="pl-3 titre-texte">{{ props.titre }}</span>
+            </slot>
 
             <!-- État -->
             <slot name="etat">
@@ -44,9 +50,10 @@
                 >
                   {{ monEtat.texte }}
                 </v-btn>
-              </span></slot
-            >
-            <!-- État secondaire-->
+              </span>
+            </slot>
+
+            <!-- État secondaire -->
             <slot name="etatSecondaire">
               <span
                 v-if="monEtatSecondaire?.afficher"
@@ -59,16 +66,18 @@
                 >
                   {{ monEtatSecondaire.texte }}
                 </v-btn>
-              </span></slot
-            >
+              </span>
+            </slot>
+
             <!-- Sous-titre -->
-            <slot name="soustitre"
-              ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
-            >
+            <slot name="soustitre">
+              <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
+            </slot>
           </div>
         </v-toolbar-title>
       </v-col>
     </v-row>
+
     <!-- Barre en bas -->
     <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
   </v-app-bar>
@@ -78,7 +87,6 @@
   import { useRouter } from 'vue-router'
   import { ref, computed } from 'vue'
 
-  // Déclaration de l'interface
   interface EnteteEtat {
     afficher: boolean
     couleur: string
@@ -98,61 +106,58 @@
     soustitre?: string
     retour?: string
     etat?: EnteteEtat
+    couleur?: string // couleur de la barre (Vuetify color/hex)
+    couleurTexte?: string
+    couleurIcone?: string
     etatSecondaire?: EnteteEtatSecondaire
   }>()
 
   const titreCol = ref(12)
 
-  // État calculé basé sur la prop, avec fallback
-  const monEtat = computed<EnteteEtat>(() => {
-    return (
-      props.etat ?? {
-        afficher: false,
-        couleur: 'primary',
-        texte: 'test',
-      }
-    )
-  })
+  // Fallbacks (tes valeurs actuelles)
+  const barreCouleur = computed(() => props.couleur ?? 'white')
+  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
+  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
 
-  const monEtatSecondaire = computed<EnteteEtatSecondaire>(() => {
-    return (
-      props.etatSecondaire ?? {
-        afficher: false,
-        couleur: 'primary',
-        texte: 'test',
-      }
-    )
-  })
+  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
+  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
+    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
+  )
 
   function retournerMenu() {
-    if (props.retour) {
-      router.push({ name: props.retour })
-    }
+    if (props.retour) router.push({ name: props.retour })
   }
-
   function controlAffichage() {
-    // logique à l’événement de redimensionnement
+    /* logique resize */
   }
 </script>
-<style lang="css" scoped>
+
+<style scoped>
   .titre {
     font-size: 1.85rem;
-    color: #223654;
     font-weight: bold;
     margin-bottom: 15px;
   }
-  .soustitre {
+  .titre-texte {
+    color: var(--entete-texte, #223654);
+  }
+  .soustitre-texte {
     display: block;
     font-size: 1rem;
-    color: #223654;
     font-weight: normal;
+    color: var(--entete-texte, #223654);
   }
   .titre-bloc {
     display: inline-block;
     vertical-align: middle;
     padding-left: 12px;
   }
+  /* Couleur de l’icône (retour) + hover */
+  .v-icon {
+    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
+  }
   .v-icon:hover {
-    color: #095797 !important;
+    /* tu peux garder une couleur fixe ou calculer une teinte plus foncée si besoin */
+    filter: brightness(0.85);
   }
 </style>

package/locales/en.json

@@ -31,23 +31,23 @@
       "titre": "Tracking Preference"
     },
     "csqcEmploisEmploye": {
-      "dateDebut": "Date de début",
-      "dateFin": "Date de fin",
-      "etat": "État",
-      "etatActif": "Actif",
-      "lieuPrincipal": "Lieu principal",
-      "lieuSecondaire": "Lieu secondaire|Lieux secondaires",
+      "dateDebut": "Start Date",
+      "dateFin": "End Date",
+      "etat": "Status",
+      "etatActif": "Active",
+      "lieuPrincipal": "Primary Location",
+      "lieuSecondaire": "Secondary Location|Secondary Locations",
       "principal": {
         "libelle": "Principal",
-        "non": "Non",
-        "oui": "Oui"
+        "non": "No",
+        "oui": "Yes"
       },
-      "statut": "Statut",
-      "titre": "Emplois de l'employé"
+      "statut": "Status",
+      "titre": "Employee Jobs"
     },
     "csqcImportCSV": {
       "erreur": {
-        "erreur": "Importation Error.",
+        "erreur": "Import Error.",
         "lectureFichier": "Error reading CSV file."
       }
     },
@@ -57,7 +57,9 @@
     "csqcRechercheUtilisateur": {
       "ajouterUtilisateurInfo": "You can enter here the Office 365 identifier or the employee’s payroll number. Then click on the magnifying glass. If this information is found in the payroll system, the user will be added. Note that the user must have a valid portal email address in the payroll system.",
       "aucunEmploi": "No job found",
+      "aucunResultat": "No result found",
       "corpsEmploi": "Job category",
+      "erreur": " An error occurred while searching for the user.",
       "identifiantOuMatricule": "Office 365 identifier or payroll number",
       "placeholderRechercheUtilisateur": "Search for a user",
       "revenirRecherche": "Back to search",

package/locales/fr.json

@@ -57,14 +57,14 @@
     "csqcRechercheUtilisateur": {
       "ajouterUtilisateurInfo": "Vous pouvez entrer ici l’ID Office 365 ou le numéro d’employé, puis cliquer sur la loupe. Si cette information existe dans le système de paie, l’utilisateur sera ajouté. Veuillez noter que l’utilisateur doit avoir une adresse courriel valide du portail dans le système de paie.",
       "aucunEmploi": "Aucun emploi",
+      "aucunResultat": "Aucun résultat trouvé",
       "corpsEmploi": "Corps d'emploi",
+      "erreur": "Une erreur est survenue lors de la recherche de l'utilisateur.",
       "identifiantOuMatricule": "identifiant Office 365 ou le matricule employé",
       "placeholderRechercheUtilisateur": "Rechercher un utilisateur",
       "revenirRecherche": "Retour à la recherche",
       "utilisateurIntrouvable": "Employé introuvable",
-      "utilisateurs": "Employé",
-      "aucunResultat": "Aucun résultat trouvé",
-      "erreur": "Une erreur est survenue lors de la recherche de l'utilisateur."
+      "utilisateurs": "Employé"
     },
     "label": {
       "actif": "Actif",

package/package.json

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