codevdesign 2.0.11 → 2.0.13

package/composants/csqcDialogue.vue

@@ -1,120 +1,117 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    class="pa-0 ma-0"
-    :width="largeur"
-    :fullscreen="display.xs.value"
-    max-width="650"
-    :persistent="props.persistant"
-    v-bind="$attrs"
-    @keydown.esc="!persistant ? annuler : ''"
-    @click:outside="!persistant ? annuler : ''"
-  >
-    <v-card class="pa-0 ma-0 pl-8 pt-8">
-      <!-- Bouton en haut à droite -->
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        class="position-absolute iconeHover"
-        color="primary"
-        style="right: 5px; top: 5px"
-        @click="annuler"
-      ></v-btn>
-
-      <v-card-title
-        class="pa-0 ma-0 pb-6 headline"
-        style="font-size: 24px; white-space: normal; word-break: break-word"
-      >
-        <slot name="titre"></slot>
-        <div text-h5><span v-html="titre"></span></div>
-      </v-card-title>
-
-      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
-        <v-container>
-          <slot></slot>
-          <slot name="content"></slot>
-        </v-container>
-      </v-card-text>
-      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
-        <slot name="actions"></slot>
-        <v-btn
-          v-if="btnAnnuler"
-          color="primary"
-          :loading="operationEnCours"
-          variant="text"
-          @click="annuler"
-        >
-          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          :color="props.estDialogueAlerte ? 'rouge' : 'primary'"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver"
-          variant="flat"
-          @click="okBouton"
-        >
-          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const display = useDisplay()
-
-  // Déclaration des props
-  const props = defineProps({
-    largeur: { type: String, default: '50vw' },
-    persistant: { type: Boolean, default: true },
-    operationEnCours: { type: Boolean, default: false },
-    btnAnnuler: { type: Boolean, default: true },
-    btnOk: { type: Boolean, default: true },
-    btnAnnulerTexte: { type: String, default: '' },
-    btnOkTexte: { type: String, default: '' },
-    titre: { type: String, default: '' },
-    btnOkDesactiver: { type: Boolean, default: false },
-    estDialogueAlerte: { type: Boolean, default: false },
-  })
-
-  // Déclaration des événements émis
-  const emit = defineEmits(['annuler', 'ok'])
-
-  // Gestion de l'état du dialogue
-  const dialog = ref(false)
-
-  // Méthodes pour gérer l'ouverture et la fermeture
-  const ouvrir = () => {
-    dialog.value = true
-  }
-
-  const fermer = () => {
-    dialog.value = false
-  }
-
-  // Gestion des actions des boutons
-  const annuler = () => {
-    emit('annuler')
-    fermer()
-  }
-
-  const okBouton = () => {
-    emit('ok')
-  }
-
-  // permet d'exporter les 2 actions
-  defineExpose({ ouvrir, fermer })
-</script>
-
-<style lang="css" scoped>
-  .v-card__text,
-  .v-card__title {
-    word-break: normal; /* empeche le wrap de couper un mot en XS  */
-  }
-</style>
+<template>
+  <v-dialog
+    v-model="dialog"
+    class="pa-0 ma-0"
+    :width="largeur"
+    :fullscreen="display.xs.value"
+    max-width="650"
+    :persistent="props.persistant"
+    v-bind="$attrs"
+    @keydown.esc="!persistant ? annuler : ''"
+    @click:outside="!persistant ? annuler : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute iconeHover"
+        color="primary"
+        style="right: 5px; top: 5px"
+        @click="annuler"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6 headline"
+        style="font-size: 24px; white-space: normal; word-break: break-word"
+      >
+        <slot name="titre"></slot>
+        <div text-h5><span v-html="titre"></span></div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <bouton-tertiaire
+          v-if="btnAnnuler"
+          :loading="operationEnCours"
+          @click="annuler"
+        >
+          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
+        </bouton-tertiaire>
+
+        <bouton-primaire
+          v-if="btnOk"
+          class="Gouttiere"
+          :color="props.estDialogueAlerte ? 'rouge' : 'primary'"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver"
+          @click="okBouton"
+        >
+          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
+        </bouton-primaire>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    largeur: { type: String, default: '50vw' },
+    persistant: { type: Boolean, default: true },
+    operationEnCours: { type: Boolean, default: false },
+    btnAnnuler: { type: Boolean, default: true },
+    btnOk: { type: Boolean, default: true },
+    btnAnnulerTexte: { type: String, default: '' },
+    btnOkTexte: { type: String, default: '' },
+    titre: { type: String, default: '' },
+    btnOkDesactiver: { type: Boolean, default: false },
+    estDialogueAlerte: { type: Boolean, default: false },
+  })
+
+  // Déclaration des événements émis
+  const emit = defineEmits(['annuler', 'ok'])
+
+  // Gestion de l'état du dialogue
+  const dialog = ref(false)
+
+  // Méthodes pour gérer l'ouverture et la fermeture
+  const ouvrir = () => {
+    dialog.value = true
+  }
+
+  const fermer = () => {
+    dialog.value = false
+  }
+
+  // Gestion des actions des boutons
+  const annuler = () => {
+    emit('annuler')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+  }
+
+  // permet d'exporter les 2 actions
+  defineExpose({ ouvrir, fermer })
+</script>
+
+<style lang="css" scoped>
+  .v-card__text,
+  .v-card__title {
+    word-break: normal; /* empeche le wrap de couper un mot en XS  */
+  }
+</style>

package/composants/csqcImportCSV.vue

@@ -1,126 +1,124 @@
-<template>
-  <div>
-    <v-btn
-      color="success"
-      variant="outlined"
-      :loading="chargement"
-      class="elevation-0 BoutonCSQCCompact"
-      v-bind="$attrs"
-      @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.value || t('csqc.csqcImportCSV.erreur.lectureFichier'))
-        }
-      }
-
-      reader.onerror = () => {
-        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
-      }
-
-      reader.readAsText(file)
-    } else {
-      const message = erreurTexte.value || 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>
+    <bouton-secondaire
+      color="success"
+      :loading="chargement"
+      v-bind="$attrs"
+      @click="importCsv"
+    >
+      {{ boutonTexte }}
+      <template #append>
+        <v-icon icon="mdi-microsoft-excel"></v-icon>
+      </template>
+    </bouton-secondaire>
+
+    <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.value || t('csqc.csqcImportCSV.erreur.lectureFichier'))
+        }
+      }
+
+      reader.onerror = () => {
+        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
+      }
+
+      reader.readAsText(file)
+    } else {
+      const message = erreurTexte.value || 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>