codevdesign 1.0.47 → 1.0.49

package/composants/csqcEntete.vue

@@ -19,60 +19,66 @@
         class="pr-0 mr-0 pl-5"
       >
         <v-toolbar-title class="titre">
-          <!-- Barre de retour -->
-          <slot name="retour">
-            <v-icon
-              v-if="retour"
-              size="large"
-              start
-              :color="iconeCouleur"
-              icon="mdi-arrow-left-thin"
-              @click="retournerMenu"
-            />
-          </slot>
-
-          <div class="titre-bloc">
-            <!-- Titre -->
-            <slot name="titre">
-              <span class="pl-3 titre-texte">{{ props.titre }}</span>
-            </slot>
-
-            <!-- État -->
-            <slot name="etat">
-              <span
-                v-if="monEtat?.afficher"
-                class="pl-10"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtat.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtat.texte }}
-                </v-btn>
-              </span>
-            </slot>
-
-            <!-- État secondaire -->
-            <slot name="etatSecondaire">
-              <span
-                v-if="monEtatSecondaire?.afficher"
-                class="pl-3"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtatSecondaire.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtatSecondaire.texte }}
-                </v-btn>
-              </span>
-            </slot>
-
-            <!-- Sous-titre -->
-            <slot name="soustitre">
-              <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
-            </slot>
+          <div class="entete-ligne">
+            <!-- GAUCHE -->
+            <div class="entete-gauche">
+              <!-- Barre de retour -->
+              <slot name="retour">
+                <v-icon
+                  v-if="retour"
+                  size="large"
+                  start
+                  :color="iconeCouleur"
+                  icon="mdi-arrow-left-thin"
+                  @click="retournerMenu"
+                />
+              </slot>
+
+              <div class="titre-bloc">
+                <slot name="titre">
+                  <span class="pl-3 titre-texte">{{ props.titre }}</span>
+                </slot>
+
+                <slot name="etat">
+                  <span
+                    v-if="monEtat?.afficher"
+                    class="pl-10"
+                  >
+                    <v-btn
+                      size="small"
+                      :color="monEtat.couleur"
+                      variant="tonal"
+                    >
+                      {{ monEtat.texte }}
+                    </v-btn>
+                  </span>
+                </slot>
+
+                <slot name="etatSecondaire">
+                  <span
+                    v-if="monEtatSecondaire?.afficher"
+                    class="pl-3"
+                  >
+                    <v-btn
+                      size="small"
+                      :color="monEtatSecondaire.couleur"
+                      variant="tonal"
+                    >
+                      {{ monEtatSecondaire.texte }}
+                    </v-btn>
+                  </span>
+                </slot>
+
+                <slot name="soustitre">
+                  <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
+                </slot>
+              </div>
+            </div>
+
+            <!-- DROITE -->
+            <div class="entete-droite">
+              <slot name="droite" />
+            </div>
           </div>
         </v-toolbar-title>
       </v-col>
@@ -157,7 +163,25 @@
     color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
   }
   .v-icon:hover {
-    /* tu peux garder une couleur fixe ou calculer une teinte plus foncée si besoin */
     filter: brightness(0.85);
   }
+  .entete-ligne {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .entete-gauche {
+    display: flex;
+    align-items: center;
+    min-width: 0; /* important pour éviter overflow */
+    flex: 1;
+  }
+
+  .entete-droite {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-right: 16px;
+  }
 </style>

package/composants/csqcImportCSV.vue

@@ -1,125 +1,125 @@
-<template>
-  <div>
-    <v-btn
-      color="success"
-      variant="outlined"
-      :loading="chargement"
-      class="elevation-0"
-      @click="importCsv"
-    >
-      {{ boutonTexte }}
-      <template #append>
-        <v-icon icon="mdi-microsoft-excel"></v-icon>
-      </template>
-    </v-btn>
-
-    <input
-      ref="fileInput"
-      type="file"
-      accept=".csv"
-      style="display: none"
-      @change="handleFileUpload"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  // Props
-  const props = withDefaults(
-    defineProps<{
-      boutonTexte?: string
-      erreurTexte?: string
-      chargement?: boolean
-    }>(),
-    {
-      chargement: false, //  défaut
-    },
-  )
-  const emit = defineEmits(['import', 'import-erreur'])
-
-  const { t } = useI18n()
-
-  const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
-  const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
-
-  // Références
-  const fileInput = ref<HTMLInputElement | null>(null)
-  const csvFile = ref<File | null>(null)
-
-  // Méthodes
-  function importCsv() {
-    fileInput.value?.click()
-  }
-
-  function handleFileUpload(event: Event) {
-    const target = event.target as HTMLInputElement
-    const file = target.files?.[0]
-
-    if (file?.name.toLowerCase().endsWith('.csv')) {
-      csvFile.value = file
-
-      const reader = new FileReader()
-
-      reader.onload = () => {
-        try {
-          let text = reader.result as string
-
-          // Supprime BOM UTF-8 si présent
-          if (text.charCodeAt(0) === 0xfeff) {
-            text = text.slice(1)
-          }
-
-          const lignes = text
-            .trim()
-            .split(/\r?\n/)
-            .filter(row => row.trim() !== '') // ignore lignes vides
-
-          if (lignes.length === 0) {
-            emit('import-erreur', 'Le fichier CSV est vide.')
-            return
-          }
-
-          //  Détection automatique du séparateur
-          const separateur = detecterSeparateur(lignes[0]!)
-
-          //  Découpage des lignes
-          const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
-
-          emit('import', data)
-        } catch (error) {
-          emit('import-erreur', erreurTexte || t('csqc.csqcImportCSV.erreur.lectureFichier'))
-        }
-      }
-
-      reader.onerror = () => {
-        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
-      }
-
-      reader.readAsText(file)
-    } else {
-      const message = erreurTexte || t('csqc.csqcImportCSV.erreur.erreur')
-      emit('import-erreur', message)
-      csvFile.value = null
-    }
-  }
-
-  //  Fonction pour détecter le séparateur le plus probable
-  function detecterSeparateur(ligne: string): string {
-    const separateursTestés = [',', ';', '\t', '|']
-    let meilleurSeparateur = ','
-    let maxColonnes = 0
-
-    for (const sep of separateursTestés) {
-      const nb = ligne.split(sep).length
-      if (nb > maxColonnes) {
-        maxColonnes = nb
-        meilleurSeparateur = sep
-      }
-    }
-
-    return meilleurSeparateur
-  }
-</script>
+<template>
+  <div>
+    <v-btn
+      color="success"
+      variant="outlined"
+      :loading="chargement"
+      class="elevation-0"
+      @click="importCsv"
+    >
+      {{ boutonTexte }}
+      <template #append>
+        <v-icon icon="mdi-microsoft-excel"></v-icon>
+      </template>
+    </v-btn>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept=".csv"
+      style="display: none"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  // Props
+  const props = withDefaults(
+    defineProps<{
+      boutonTexte?: string
+      erreurTexte?: string
+      chargement?: boolean
+    }>(),
+    {
+      chargement: false, //  défaut
+    },
+  )
+  const emit = defineEmits(['import', 'import-erreur'])
+
+  const { t } = useI18n()
+
+  const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
+  const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
+
+  // Références
+  const fileInput = ref<HTMLInputElement | null>(null)
+  const csvFile = ref<File | null>(null)
+
+  // Méthodes
+  function importCsv() {
+    fileInput.value?.click()
+  }
+
+  function handleFileUpload(event: Event) {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+
+    if (file?.name.toLowerCase().endsWith('.csv')) {
+      csvFile.value = file
+
+      const reader = new FileReader()
+
+      reader.onload = () => {
+        try {
+          let text = reader.result as string
+
+          // Supprime BOM UTF-8 si présent
+          if (text.charCodeAt(0) === 0xfeff) {
+            text = text.slice(1)
+          }
+
+          const lignes = text
+            .trim()
+            .split(/\r?\n/)
+            .filter(row => row.trim() !== '') // ignore lignes vides
+
+          if (lignes.length === 0) {
+            emit('import-erreur', 'Le fichier CSV est vide.')
+            return
+          }
+
+          //  Détection automatique du séparateur
+          const separateur = detecterSeparateur(lignes[0]!)
+
+          //  Découpage des lignes
+          const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
+
+          emit('import', data)
+        } catch (error) {
+          emit('import-erreur', erreurTexte || t('csqc.csqcImportCSV.erreur.lectureFichier'))
+        }
+      }
+
+      reader.onerror = () => {
+        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
+      }
+
+      reader.readAsText(file)
+    } else {
+      const message = erreurTexte || t('csqc.csqcImportCSV.erreur.erreur')
+      emit('import-erreur', message)
+      csvFile.value = null
+    }
+  }
+
+  //  Fonction pour détecter le séparateur le plus probable
+  function detecterSeparateur(ligne: string): string {
+    const separateursTestés = [',', ';', '\t', '|']
+    let meilleurSeparateur = ','
+    let maxColonnes = 0
+
+    for (const sep of separateursTestés) {
+      const nb = ligne.split(sep).length
+      if (nb > maxColonnes) {
+        maxColonnes = nb
+        meilleurSeparateur = sep
+      }
+    }
+
+    return meilleurSeparateur
+  }
+</script>