codevdesign 1.0.49 → 1.0.51

package/composants/csqcEntete.vue

@@ -1,187 +1,187 @@
-<template>
-  <v-app-bar
-    :color="barreCouleur"
-    class="px-0 mx-0"
-    :style="{
-      position: 'sticky',
-      // variables CSS pour les couleurs dynamiques
-      '--entete-texte': texteCouleur,
-      '--entete-icone': iconeCouleur,
-    }"
-    height="82px"
-  >
-    <v-row
-      class="pt-2"
-      @resize="controlAffichage"
-    >
-      <v-col
-        :cols="titreCol"
-        class="pr-0 mr-0 pl-5"
-      >
-        <v-toolbar-title class="titre">
-          <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>
-    </v-row>
-
-    <!-- Barre en bas -->
-    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { ref, computed } from 'vue'
-
-  interface EnteteEtat {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  interface EnteteEtatSecondaire {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  const router = useRouter()
-
-  const props = defineProps<{
-    titre: string
-    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)
-
-  // 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 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 })
-  }
-  function controlAffichage() {
-    /* logique resize */
-  }
-</script>
-
-<style scoped>
-  .titre {
-    font-size: 1.85rem;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
-  .titre-texte {
-    color: var(--entete-texte, #223654);
-  }
-  .soustitre-texte {
-    display: block;
-    font-size: 1rem;
-    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 {
-    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>
+<template>
+  <v-app-bar
+    :color="barreCouleur"
+    class="px-0 mx-0"
+    :style="{
+      position: 'sticky',
+      // variables CSS pour les couleurs dynamiques
+      '--entete-texte': texteCouleur,
+      '--entete-icone': iconeCouleur,
+    }"
+    height="82px"
+  >
+    <v-row
+      class="pt-2"
+      @resize="controlAffichage"
+    >
+      <v-col
+        :cols="titreCol"
+        class="pr-0 mr-0 pl-5"
+      >
+        <v-toolbar-title class="titre">
+          <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>
+    </v-row>
+
+    <!-- Barre en bas -->
+    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref, computed } from 'vue'
+
+  interface EnteteEtat {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  interface EnteteEtatSecondaire {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  const router = useRouter()
+
+  const props = defineProps<{
+    titre: string
+    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)
+
+  // 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 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 })
+  }
+  function controlAffichage() {
+    /* logique resize */
+  }
+</script>
+
+<style scoped>
+  .titre {
+    font-size: 1.85rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .titre-texte {
+    color: var(--entete-texte, #223654);
+  }
+  .soustitre-texte {
+    display: block;
+    font-size: 1rem;
+    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 {
+    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>