codevdesign 0.0.97 → 0.0.98

package/composants/csqcTable/csqcTable.vue

@@ -1,386 +1,382 @@
-<template>
-  <div>
-    <v-row v-if="barreHautAfficher">
-      <slot name="ligne" />
-      <!-- Affichage de la boite de recherche-->
-      <v-col>
-        <slot name="recherche"></slot>
-        <Recherche
-          :afficher="rechercheAfficher"
-          :recherche-texte="rechercheTexte"
-          :chargement="chargementListe"
-          :recherche="recherche"
-          :recherche-avancee="rechercheAvancee"
-          :recherche-avancee-texte="rechercheAvanceeTexte"
-          :recherche-avancee-largeur="rechercheAvanceeLargeur"
-          :recherche-avancee-style="rechercheAvanceeStyle"
-          class="flex-grow-1"
-          @update:recherche="chargerRecherche"
-        >
-          <template #milieu>
-            <slot name="milieu" />
-          </template>
-
-          <template #droite>
-            <slot name="droite" />
-            <v-btn
-              v-if="btnAjouter"
-              color="primary"
-              class="ml-1 float-right"
-              @click.stop="ajouter"
-            >
-              {{ props.btnAjouterTexte ? props.btnAjouterTexte : $t('csqc.bouton.ajouter') }}
-            </v-btn>
-
-            <exportExcelComponent
-              v-if="excel"
-              :liste="filteredItems"
-              :chargement-liste="chargementListe"
-              :nom-fichier="excelNomFichier"
-              class="mt-1 ml-1 float-right"
-            />
-          </template>
-          <template #rechercheAvanceeTitre>
-            <slot name="rechercheAvanceeTitre" />
-          </template>
-          <template #rechercheAvanceeApresTitre>
-            <slot name="rechercheAvanceeApresTitre" />
-          </template>
-          <template #rechercheAvancee>
-            <slot name="rechercheAvancee" />
-          </template>
-        </Recherche>
-      </v-col>
-    </v-row>
-
-    <!-- datatable-->
-    <v-row>
-      <v-col
-        cols="12"
-        class="d-flex ControlesDatatable flex-wrap"
-      >
-        <v-data-table
-          ref="datatable"
-          color="green"
-          :headers="colonnes"
-          :item-key="itemKey"
-          :items="liste"
-          :search="recherche"
-          :loading="chargementListe"
-          :hover="hover"
-          :density="densite"
-          :items-per-page="itemsParPage"
-          :item-per-page-options="itemsParPageOptions"
-          :sort-by="triDepart"
-          :multi-sort="estMultiTriActif"
-          @click:row="cliqueLigne"
-        >
-          <!-- utilisation des slots via le component parent-->
-          <!-- eslint-disable-next-line -->
-          <template
-            v-for="(_, slot) of $slots"
-            :key="slot"
-            #[slot]="scope"
-          >
-            <slot
-              :name="slot"
-              v-bind="scope"
-            />
-          </template>
-
-          <!-- boutons supprimer et modifier -->
-          <!-- eslint-disable-next-line -->
-          <template v-slot:item.action="{ item }">
-            <slot name="actionsCustom"></slot>
-            <v-icon
-              v-if="props.btnSupprimer"
-              size="large"
-              class="iconeSupprimer float-right"
-              @click.stop.prevent="ouvrirModaleSupprimer(item)"
-            >
-              mdi-delete
-            </v-icon>
-
-            <v-icon
-              v-if="props.btnModifier"
-              size="large"
-              class="iconeEditer float-right"
-              @click.stop.prevent="modifier(item)"
-            >
-              mdi-pencil
-            </v-icon>
-          </template>
-        </v-data-table>
-
-        <!-- Fenêtre de suppression -->
-        <confirmation
-          v-if="props.btnSupprimer"
-          ref="modaleSupprimer"
-          :texte="supprimerTexte"
-          :titre="supprimerTitreTexte"
-          :largeur="modaleSupprimerLargeur"
-          @confirmer="supprimer"
-        />
-      </v-col>
-    </v-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-
-  import { ref, computed, type Slots, type PropType } from 'vue'
-  import Recherche from '../csqcRecherche.vue'
-  import confirmation from '../csqcConfirmation.vue'
-  import exportExcelComponent from './csqcTableExportExcel.vue'
-  //import ModaleChoix from './csqc-table-modale-choix-colonnes.vue';
-  //import axios from 'axios'
-  import { useI18n } from 'vue-i18n'
-  import Colonne from '../../modeles/composants/datatableColonne'
-  import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
-
-  // Props
-  const props = defineProps({
-    barreHautAfficher: { type: Boolean, default: true },
-    btnAjouter: { type: Boolean, default: true },
-    btnAjouterTexte: { type: String, default: '' },
-    btnModifier: { type: Boolean, default: true },
-    btnSupprimer: { type: Boolean, default: true },
-    chargementListe: { type: Boolean, default: false },
-    operationEnCours: { type: Boolean, default: false },
-    //choixSwitchOptionDepart: { type: Boolean, default: false },
-    // classeRangee: { type: String, default: '' },
-    colonnes: {
-      type: Array as PropType<Colonne[]>,
-      default: () => [],
-    },
-    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
-    excel: { type: Boolean, default: false },
-    excelNomFichier: { type: String, default: 'csqc' },
-    //filtresDepart: { type: Object, default: null },
-    //flechesTri: { type: Boolean, default: false },
-    formulaireId: { type: Number, default: -1 },
-    identifiant: {
-      type: [String, null] as PropType<string | null>,
-      default: null,
-    },
-    itemKey: { type: String, default: 'id' },
-    itemsParPage: { type: Number, default: 10 },
-    liste: {
-      type: Array as PropType<Record<string, any>[]>,
-      default: () => [],
-    },
-    hover: { type: Boolean, default: false },
-    // modulerDense: { type: Boolean, default: false },
-    // multifiltre: { type: Boolean, default: false },
-    itemsParPageOptions: { type: Array, default: () => [10, 25, 30, -1] },
-    //pageCourante: { type: Number, default: 1 },
-    //paginationBottom: { type: Boolean, default: true },
-    // paginationTop: { type: Boolean, default: false },
-    //  permettreChoixColonnes: { type: Boolean, default: false },
-    // rechercheDepart: { type: String, default: '' },
-    rechercheTexte: { type: String, default: '' },
-    rechercheAfficher: { type: Boolean, default: true },
-    rechercheAvancee: { type: Boolean, default: false },
-    rechercheAvanceeTexte: { type: String, default: '' },
-    rechercheAvanceeLargeur: { type: Number, default: 12 },
-    rechercheAvanceeStyle: { type: String, default: '' },
-    // selectionChoixColonnesDepart: { type: String, default: '' },
-    // showSelect: { type: Boolean, default: false },
-
-    modaleSupprimerChamp: { type: String, default: '' },
-    modaleSupprimerTexte: { type: String, default: '' },
-    modaleSupprimerTitre: { type: String, default: '' },
-    modaleSupprimerLargeur: { type: String, default: '525px' },
-    triDescDepart: { type: Boolean, default: false },
-    triParDepart: {
-      type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
-      default: undefined,
-    },
-    //urlbase: { type: String, default: '' },
-  })
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const slots = defineSlots<Slots>()
-  const { t } = useI18n({ useScope: 'global' })
-  const itemSelectionne = ref(null)
-  const modaleSupprimer = ref<InstanceType<typeof confirmation> | null>(null)
-  const supprimerTexte = computed(() => {
-    if (itemSelectionne.value == null) return ''
-
-    if (props.modaleSupprimerTexte != null && props.modaleSupprimerTexte != '') return props.modaleSupprimerTexte
-
-    return t('csqc.message.supprimerMessage', { nom: itemSelectionne?.value[props.modaleSupprimerChamp] ?? '' })
-  })
-
-  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.supprimerTitre'))
-
-  // Fonction pour ouvrir le dialogue pour un item spécifique
-  const ouvrirModaleSupprimer = (item: any) => {
-    itemSelectionne.value = item
-
-    //modaleSupprimer.value?.ouvrir()
-    emit('supprimer', itemSelectionne.value)
-  }
-
-  const supprimer = () => {
-    emit('supprimer', itemSelectionne.value)
-  }
-
-  const recherche = ref<string>('')
-  const chargerRecherche = (val: string) => {
-    recherche.value = val
-  }
-
-  const ajouter = () => {
-    emit('ajouter')
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const cliqueLigne = (e: Event, { item }: { item: any }) => {
-    emit('cliqueLigne', item)
-  }
-
-  const modifier = (item: any) => {
-    emit('modifier', item)
-  }
-  const filteredItems = computed(() => {
-    if (!recherche.value) return props.liste // Si rien écrit, affiche tout
-
-    return props.liste.filter(item =>
-      Object.values(item).some(val => String(val).toLowerCase().includes(recherche.value.toLowerCase())),
-    )
-  })
-
-  const triDepart = computed<SortItem[] | undefined>(() => {
-    if (props.triParDepart == null) return undefined
-
-    const ordre = props.triDescDepart ? 'desc' : 'asc'
-
-    if (typeof props.triParDepart === 'string') return [{ key: props.triParDepart, order: ordre }]
-
-    //On a un tableau de tri
-    let retour: SortItem[] = []
-    for (let i = 0; i < props.triParDepart.length; i += 1) {
-      const tri = props.triParDepart[i]!
-      if (typeof tri == 'string') retour.push({ key: tri, order: ordre })
-      else retour.push(tri) //C'est un SortItem déjà bâti
-    }
-    return retour
-  })
-
-  const estMultiTriActif = computed(() => {
-    if (props.triParDepart == null) return false
-
-    if (typeof props.triParDepart === 'string') return false
-
-    return true
-  })
-
-  const onPanelChange = (val: unknown) => {
-    if (typeof val === 'string' || typeof val === 'number' || val === null) {
-      const isOpen = val !== null && val !== ''
-      emit('panneau:etat', isOpen)
-    } else {
-      emit('panneau:etat', false)
-    }
-  }
-  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees', 'panneau:etat'])
-</script>
-
-<style scoped lang="css">
-  .ControlesDatatable {
-    gap: 4px;
-  }
-
-  /* barre de recherche design QC*/
-  .BarreRecherche {
-    min-height: 40px;
-  }
-
-  .BarreRechercheBackIcone {
-    border-right: 1px solid #808a9d;
-    border-top: 1px solid #808a9d;
-    border-bottom: 1px solid #808a9d;
-    background-color: #095797 !important;
-    height: 40px !important;
-    width: 40px !important;
-    max-width: 40px !important;
-    min-width: 40px !important;
-    padding-right: 0 !important;
-    padding-left: 0 !important;
-    border-radius: 0;
-    margin-left: -16px;
-  }
-
-  /* icone loupe */
-  .BarreRechercheIcone {
-    font-size: 34px !important;
-    margin-left: 1px !important;
-    margin-top: 2px !important;
-    color: white !important;
-  }
-
-  /* datatable contour */
-  .v-data-table {
-    border: 1px solid #d3d3d3;
-    border-radius: 5px;
-    overflow: hidden;
-  }
-
-  /* hover */
-  .v-data-table:hover {
-    cursor: pointer !important;
-  }
-
-  /* datatable row */
-  .v-data-table .v-table__wrapper > table > thead > tr > td,
-  .v-data-table .v-table__wrapper > table > thead > tr th,
-  .v-data-table .v-table__wrapper > table tbody > tr > td,
-  .v-data-table .v-table__wrapper > table tbody > tr th {
-    background-color: #d3d3d375 !important;
-  }
-
-  /* datatable header contour */
-  .v-data-table .v-table__wrapper > table > thead > tr > th,
-  .v-data-table .v-table__wrapper > table tbody > tr > th {
-    background-color: white !important;
-    border-bottom: 4px #223654 solid !important;
-  }
-
-  /* datatable header intérieur*/
-  .v-data-table-header__content {
-    background-color: white !important;
-    color: #223654 !important;
-    font-weight: 600;
-    font-size: 15px;
-    height: 46px;
-  }
-
-  /* datatable footer */
-  .v-data-table-footer {
-    background-color: white !important;
-    border-top: 4px #223654 solid !important;
-  }
-
-  /* datatable row hover */
-  .v-data-table .v-table__wrapper > table tbody > tr:hover > td,
-  .v-data-table .v-table__wrapper > table tbody > tr:hover {
-    background-color: #e0e0e0 !important;
-  }
-
-  .iconeSupprimer:hover {
-    color: red;
-  }
-  .v-icon.v-icon.v-icon--link.iconeSupprimer:hover {
-    color: red !important;
-  }
-  .iconeEditer:hover {
-    color: #095797;
-  }
-
-  /* hover icone à droite du ajouter*/
-  .text-grisMoyen:hover {
-    color: #095797 !important;
-  }
-</style>
+<template>
+  <div>
+    <v-row v-if="barreHautAfficher">
+      <slot name="ligne" />
+      <!-- Affichage de la boite de recherche-->
+      <v-col>
+        <slot name="recherche"></slot>
+        <Recherche
+          :afficher="rechercheAfficher"
+          :recherche-texte="rechercheTexte"
+          :chargement="chargementListe"
+          :recherche="recherche"
+          :recherche-avancee="rechercheAvancee"
+          :recherche-avancee-texte="rechercheAvanceeTexte"
+          :recherche-avancee-largeur="rechercheAvanceeLargeur"
+          :recherche-avancee-style="rechercheAvanceeStyle"
+          class="flex-grow-1"
+          @update:recherche="chargerRecherche"
+          @panneau:etat="onPanelChange"
+        >
+          <template #milieu>
+            <slot name="milieu" />
+          </template>
+
+          <template #droite>
+            <slot name="droite" />
+            <v-btn
+              v-if="btnAjouter"
+              color="primary"
+              class="ml-1 float-right"
+              @click.stop="ajouter"
+            >
+              {{ props.btnAjouterTexte ? props.btnAjouterTexte : $t('csqc.bouton.ajouter') }}
+            </v-btn>
+
+            <exportExcelComponent
+              v-if="excel"
+              :liste="filteredItems"
+              :chargement-liste="chargementListe"
+              :nom-fichier="excelNomFichier"
+              class="mt-1 ml-1 float-right"
+            />
+          </template>
+          <template #rechercheAvanceeTitre>
+            <slot name="rechercheAvanceeTitre" />
+          </template>
+          <template #rechercheAvanceeApresTitre>
+            <slot name="rechercheAvanceeApresTitre" />
+          </template>
+          <template #rechercheAvancee>
+            <slot name="rechercheAvancee" />
+          </template>
+        </Recherche>
+      </v-col>
+    </v-row>
+
+    <!-- datatable-->
+    <v-row>
+      <v-col
+        cols="12"
+        class="d-flex ControlesDatatable flex-wrap"
+      >
+        <v-data-table
+          ref="datatable"
+          color="green"
+          :headers="colonnes"
+          :item-key="itemKey"
+          :items="liste"
+          :search="recherche"
+          :loading="chargementListe"
+          :hover="hover"
+          :density="densite"
+          :items-per-page="itemsParPage"
+          :item-per-page-options="itemsParPageOptions"
+          :sort-by="triDepart"
+          :multi-sort="estMultiTriActif"
+          @click:row="cliqueLigne"
+        >
+          <!-- utilisation des slots via le component parent-->
+          <!-- eslint-disable-next-line -->
+          <template
+            v-for="(_, slot) of $slots"
+            :key="slot"
+            #[slot]="scope"
+          >
+            <slot
+              :name="slot"
+              v-bind="scope"
+            />
+          </template>
+
+          <!-- boutons supprimer et modifier -->
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.action="{ item }">
+            <slot name="actionsCustom"></slot>
+            <v-icon
+              v-if="props.btnSupprimer"
+              size="large"
+              class="iconeSupprimer float-right"
+              @click.stop.prevent="ouvrirModaleSupprimer(item)"
+            >
+              mdi-delete
+            </v-icon>
+
+            <v-icon
+              v-if="props.btnModifier"
+              size="large"
+              class="iconeEditer float-right"
+              @click.stop.prevent="modifier(item)"
+            >
+              mdi-pencil
+            </v-icon>
+          </template>
+        </v-data-table>
+
+        <!-- Fenêtre de suppression -->
+        <confirmation
+          v-if="props.btnSupprimer"
+          ref="modaleSupprimer"
+          :texte="supprimerTexte"
+          :titre="supprimerTitreTexte"
+          :largeur="modaleSupprimerLargeur"
+          @confirmer="supprimer"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  import { ref, computed, type Slots, type PropType } from 'vue'
+  import Recherche from '../csqcRecherche.vue'
+  import confirmation from '../csqcConfirmation.vue'
+  import exportExcelComponent from './csqcTableExportExcel.vue'
+  //import ModaleChoix from './csqc-table-modale-choix-colonnes.vue';
+  //import axios from 'axios'
+  import { useI18n } from 'vue-i18n'
+  import Colonne from '../../modeles/composants/datatableColonne'
+  import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
+
+  // Props
+  const props = defineProps({
+    barreHautAfficher: { type: Boolean, default: true },
+    btnAjouter: { type: Boolean, default: true },
+    btnAjouterTexte: { type: String, default: '' },
+    btnModifier: { type: Boolean, default: true },
+    btnSupprimer: { type: Boolean, default: true },
+    chargementListe: { type: Boolean, default: false },
+    operationEnCours: { type: Boolean, default: false },
+    //choixSwitchOptionDepart: { type: Boolean, default: false },
+    // classeRangee: { type: String, default: '' },
+    colonnes: {
+      type: Array as PropType<Colonne[]>,
+      default: () => [],
+    },
+    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
+    excel: { type: Boolean, default: false },
+    excelNomFichier: { type: String, default: 'csqc' },
+    //filtresDepart: { type: Object, default: null },
+    //flechesTri: { type: Boolean, default: false },
+    formulaireId: { type: Number, default: -1 },
+    identifiant: {
+      type: [String, null] as PropType<string | null>,
+      default: null,
+    },
+    itemKey: { type: String, default: 'id' },
+    itemsParPage: { type: Number, default: 10 },
+    liste: {
+      type: Array as PropType<Record<string, any>[]>,
+      default: () => [],
+    },
+    hover: { type: Boolean, default: false },
+    // modulerDense: { type: Boolean, default: false },
+    // multifiltre: { type: Boolean, default: false },
+    itemsParPageOptions: { type: Array, default: () => [10, 25, 30, -1] },
+    //pageCourante: { type: Number, default: 1 },
+    //paginationBottom: { type: Boolean, default: true },
+    // paginationTop: { type: Boolean, default: false },
+    //  permettreChoixColonnes: { type: Boolean, default: false },
+    // rechercheDepart: { type: String, default: '' },
+    rechercheTexte: { type: String, default: '' },
+    rechercheAfficher: { type: Boolean, default: true },
+    rechercheAvancee: { type: Boolean, default: false },
+    rechercheAvanceeTexte: { type: String, default: '' },
+    rechercheAvanceeLargeur: { type: Number, default: 12 },
+    rechercheAvanceeStyle: { type: String, default: '' },
+    // selectionChoixColonnesDepart: { type: String, default: '' },
+    // showSelect: { type: Boolean, default: false },
+
+    modaleSupprimerChamp: { type: String, default: '' },
+    modaleSupprimerTexte: { type: String, default: '' },
+    modaleSupprimerTitre: { type: String, default: '' },
+    modaleSupprimerLargeur: { type: String, default: '525px' },
+    triDescDepart: { type: Boolean, default: false },
+    triParDepart: {
+      type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
+      default: undefined,
+    },
+    //urlbase: { type: String, default: '' },
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const slots = defineSlots<Slots>()
+  const { t } = useI18n({ useScope: 'global' })
+  const itemSelectionne = ref(null)
+  const modaleSupprimer = ref<InstanceType<typeof confirmation> | null>(null)
+  const supprimerTexte = computed(() => {
+    if (itemSelectionne.value == null) return ''
+
+    if (props.modaleSupprimerTexte != null && props.modaleSupprimerTexte != '') return props.modaleSupprimerTexte
+
+    return t('csqc.message.supprimerMessage', { nom: itemSelectionne?.value[props.modaleSupprimerChamp] ?? '' })
+  })
+
+  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.supprimerTitre'))
+
+  // Fonction pour ouvrir le dialogue pour un item spécifique
+  const ouvrirModaleSupprimer = (item: any) => {
+    itemSelectionne.value = item
+
+    //modaleSupprimer.value?.ouvrir()
+    emit('supprimer', itemSelectionne.value)
+  }
+
+  const supprimer = () => {
+    emit('supprimer', itemSelectionne.value)
+  }
+
+  const recherche = ref<string>('')
+  const chargerRecherche = (val: string) => {
+    recherche.value = val
+  }
+
+  const ajouter = () => {
+    emit('ajouter')
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const cliqueLigne = (e: Event, { item }: { item: any }) => {
+    emit('cliqueLigne', item)
+  }
+
+  const modifier = (item: any) => {
+    emit('modifier', item)
+  }
+  const filteredItems = computed(() => {
+    if (!recherche.value) return props.liste // Si rien écrit, affiche tout
+
+    return props.liste.filter(item =>
+      Object.values(item).some(val => String(val).toLowerCase().includes(recherche.value.toLowerCase())),
+    )
+  })
+
+  const triDepart = computed<SortItem[] | undefined>(() => {
+    if (props.triParDepart == null) return undefined
+
+    const ordre = props.triDescDepart ? 'desc' : 'asc'
+
+    if (typeof props.triParDepart === 'string') return [{ key: props.triParDepart, order: ordre }]
+
+    //On a un tableau de tri
+    let retour: SortItem[] = []
+    for (let i = 0; i < props.triParDepart.length; i += 1) {
+      const tri = props.triParDepart[i]!
+      if (typeof tri == 'string') retour.push({ key: tri, order: ordre })
+      else retour.push(tri) //C'est un SortItem déjà bâti
+    }
+    return retour
+  })
+
+  const estMultiTriActif = computed(() => {
+    if (props.triParDepart == null) return false
+
+    if (typeof props.triParDepart === 'string') return false
+
+    return true
+  })
+
+  const onPanelChange = (val: boolean) => {
+    emit('panneau:etat', val)
+  }
+  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees', 'panneau:etat'])
+</script>
+
+<style scoped lang="css">
+  .ControlesDatatable {
+    gap: 4px;
+  }
+
+  /* barre de recherche design QC*/
+  .BarreRecherche {
+    min-height: 40px;
+  }
+
+  .BarreRechercheBackIcone {
+    border-right: 1px solid #808a9d;
+    border-top: 1px solid #808a9d;
+    border-bottom: 1px solid #808a9d;
+    background-color: #095797 !important;
+    height: 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    min-width: 40px !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    border-radius: 0;
+    margin-left: -16px;
+  }
+
+  /* icone loupe */
+  .BarreRechercheIcone {
+    font-size: 34px !important;
+    margin-left: 1px !important;
+    margin-top: 2px !important;
+    color: white !important;
+  }
+
+  /* datatable contour */
+  .v-data-table {
+    border: 1px solid #d3d3d3;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  /* hover */
+  .v-data-table:hover {
+    cursor: pointer !important;
+  }
+
+  /* datatable row */
+  .v-data-table .v-table__wrapper > table > thead > tr > td,
+  .v-data-table .v-table__wrapper > table > thead > tr th,
+  .v-data-table .v-table__wrapper > table tbody > tr > td,
+  .v-data-table .v-table__wrapper > table tbody > tr th {
+    background-color: #d3d3d375 !important;
+  }
+
+  /* datatable header contour */
+  .v-data-table .v-table__wrapper > table > thead > tr > th,
+  .v-data-table .v-table__wrapper > table tbody > tr > th {
+    background-color: white !important;
+    border-bottom: 4px #223654 solid !important;
+  }
+
+  /* datatable header intérieur*/
+  .v-data-table-header__content {
+    background-color: white !important;
+    color: #223654 !important;
+    font-weight: 600;
+    font-size: 15px;
+    height: 46px;
+  }
+
+  /* datatable footer */
+  .v-data-table-footer {
+    background-color: white !important;
+    border-top: 4px #223654 solid !important;
+  }
+
+  /* datatable row hover */
+  .v-data-table .v-table__wrapper > table tbody > tr:hover > td,
+  .v-data-table .v-table__wrapper > table tbody > tr:hover {
+    background-color: #e0e0e0 !important;
+  }
+
+  .iconeSupprimer:hover {
+    color: red;
+  }
+  .v-icon.v-icon.v-icon--link.iconeSupprimer:hover {
+    color: red !important;
+  }
+  .iconeEditer:hover {
+    color: #095797;
+  }
+
+  /* hover icone à droite du ajouter*/
+  .text-grisMoyen:hover {
+    color: #095797 !important;
+  }
+</style>