codevdesign 2.0.19 → 2.0.20

package/composants/csqcTable/csqcTable.vue

@@ -1,846 +1,846 @@
-<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"
-          v-bind="$attrs"
-          @update:recherche="chargerRecherche"
-          @panneau:etat="onPanelChange"
-        >
-          <template #milieu>
-            <slot name="milieu" />
-          </template>
-
-          <template #droite>
-            <slot name="droite" />
-            <bouton-primaire
-              v-if="btnAjouter"
-              class="ml-1 float-right"
-              @click.stop="ajouter"
-            >
-              {{ props.btnAjouterTexte ? props.btnAjouterTexte : $t('csqc.bouton.ajouter') }}
-            </bouton-primaire>
-
-            <exportExcelComponent
-              v-if="excel"
-              :liste="filteredItems"
-              :chargement-liste="chargementListe"
-              :nom-fichier="excelNomFichier"
-              :colonnes="colonnesAffichees"
-              class="mt-1 ml-1 float-right"
-            />
-            <v-icon
-              v-if="permettreChoixColonnes"
-              color="grisMoyen"
-              class="mt-1 ml-1 float-right"
-              @click.stop="ouvrirChoixColonnes"
-            >
-              mdi-table-edit
-            </v-icon>
-          </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"
-          :headers="colonnesAffichees"
-          :item-key="itemKey"
-          :items="listeEffective"
-          :search="recherche"
-          :loading="chargementListe"
-          :hover="hover"
-          :density="densite"
-          :items-per-page="itemsParPageLocal"
-          :item-per-page-options="itemsParPageOptions"
-          :sort-by="triDepart"
-          :multi-sort="estMultiTriActif"
-          v-model:page="pageActuelle"
-          :striped="props.styleEntete !== 'simplifie' ? 'even' : undefined"
-          :class="classeEntete"
-          v-bind="$attrs"
-          @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>
-
-          <!-- Icône ancre (drag & drop) -->
-          <template
-            v-if="estEnModeModificateurOrdre"
-            #item.ancre
-          >
-            <v-icon class="ancre-drag">mdi-drag-vertical</v-icon>
-          </template>
-
-          <!-- Footer : pagination design Québec -->
-          <template #bottom>
-            <div class="piv-pagination">
-              <div class="piv-par-page">
-                <span class="text-caption text-medium-emphasis">{{ $t('csqc.pagination.elementsParPage') }}</span>
-                <v-select
-                  v-model="itemsParPageLocal"
-                  :items="itemsParPageSelectOptions"
-                  density="compact"
-                  variant="outlined"
-                  hide-details
-                  style="max-width: 90px"
-                />
-              </div>
-              <nav aria-label="Pagination">
-                <button
-                  variant="text"
-                  v-if="pageActuelle > 1"
-                  class="piv-page-btn"
-                  aria-label="Page précédente"
-                  @click="pageActuelle--"
-                >
-                  <v-icon size="24">mdi-chevron-left</v-icon>
-                </button>
-
-                <template
-                  v-for="item in obtenirPages(pageCount)"
-                  :key="`page-${item}`"
-                >
-                  <span
-                    v-if="item === '...'"
-                    class="piv-ellipsis"
-                    aria-hidden="true"
-                    >…</span
-                  >
-                  <button
-                    v-else
-                    variant="text"
-                    class="piv-page-btn"
-                    :class="{ 'piv-page-active': item === pageActuelle }"
-                    :aria-label="`Page ${item}`"
-                    :aria-current="item === pageActuelle ? 'page' : undefined"
-                    @click="pageActuelle = item as number"
-                  >
-                    {{ item }}
-                  </button>
-                </template>
-
-                <button
-                  v-if="pageActuelle < pageCount"
-                  class="piv-page-btn"
-                  aria-label="Page suivante"
-                  @click="pageActuelle++"
-                >
-                  <v-icon size="24">mdi-chevron-right</v-icon>
-                </button>
-              </nav>
-              <span class="piv-total text-caption text-medium-emphasis">
-                {{ filteredItems.length }} {{ $t('csqc.pagination.total') }}
-              </span>
-            </div>
-          </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"
-        />
-        <modale-choix
-          v-if="permettreChoixColonnes"
-          ref="modaleChoix"
-          :urlbase="urlbase"
-          :formulaire-id="formulaireId"
-          :identifiant="identifiant"
-          :colonnes="colonnesPourChoix"
-          :choix-origine="choixOrigineNormalise"
-          @selection="selectionChoix"
-          @sauvegarde="sauvegardeChoix"
-        />
-      </v-col>
-    </v-row>
-  </div>
-</template>
-<script setup lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { computed, onBeforeUnmount, nextTick, onMounted, ref, watch, type PropType, type Slots } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
-
-  import Recherche from '../csqcRecherche.vue'
-  import confirmation from '../csqcConfirmation.vue'
-  import exportExcelComponent from './csqcTableExportExcel.vue'
-  import ModaleChoix from './csqcTableModaleChoixColonnes.vue'
-  import axios from '../../outils/appAxios'
-  import Colonne from '../../modeles/composants/datatableColonne'
-  import Sortable from 'sortablejs'
-
-  type VueColonnes = {
-    nomVue: string
-    colonnes: string[]
-    defaut?: boolean
-  }
-
-  const slots = defineSlots<Slots>()
-  const emit = defineEmits([
-    'ajouter',
-    'cliqueLigne',
-    'supprimer',
-    'modifier',
-    'donneesExportees',
-    'panneau:etat',
-    'ordreRangeeModifie',
-  ])
-
-  // ============================================================================
-  // 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 },
-
-    // Headers Vuetify
-    colonnes: {
-      type: Array as PropType<Colonne[]>,
-      default: (): Colonne[] => [],
-    },
-
-    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
-
-    excel: { type: Boolean, default: false },
-    excelNomFichier: { type: String, default: 'csqc' },
-
-    // Choix colonnes
-    formulaireId: { type: Number, default: -1 },
-    identifiant: { type: String, default: '' },
-    urlbase: { type: String, default: '' },
-    permettreChoixColonnes: { type: Boolean, default: false },
-
-    // Table
-    itemKey: { type: String, default: 'id' },
-    itemsParPage: { type: Number, default: 25 },
-    itemsParPageOptions: { type: Array, default: () => [10, 25, 50, 100, -1] },
-    liste: {
-      type: Array as PropType<Record<string, any>[]>,
-      default: (): Record<string, any>[] => [],
-    },
-    hover: { type: Boolean, default: false },
-
-    // Recherche
-    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: '' },
-
-    // Style en-tête tableau (design Québec)
-    styleEntete: {
-      type: String as PropType<'standard' | 'standardGris' | 'simplifie'>,
-      default: 'standard',
-    },
-
-    // Modale suppression
-    modaleSupprimerChamp: { type: String, default: '' },
-    modaleSupprimerTexte: { type: String, default: '' },
-    modaleSupprimerTitre: { type: String, default: '' },
-    modaleSupprimerLargeur: { type: String, default: '525px' },
-
-    // Tri
-    triDescDepart: { type: Boolean, default: false },
-    triParDepart: {
-      type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
-      default: undefined,
-    },
-
-    // Ordre manuel (drag & drop)
-    modificateurOrdreChamp: { type: String, default: undefined },
-  })
-
-  const { t } = useI18n({ useScope: 'global' })
-  const recherche = ref<string>('')
-  const pageActuelle = ref(1)
-  const itemsParPageLocal = ref(props.itemsParPage)
-
-  watch(
-    () => props.itemsParPage,
-    val => {
-      itemsParPageLocal.value = val
-    },
-  )
-
-  watch(itemsParPageLocal, () => {
-    pageActuelle.value = 1
-  })
-
-  const classeEntete = computed(() => ({
-    'entete-standard': props.styleEntete === 'standard',
-    'entete-standard-gris': props.styleEntete === 'standardGris',
-    'entete-simplifie': props.styleEntete === 'simplifie',
-  }))
-
-  const itemsParPageSelectOptions = computed(() =>
-    (props.itemsParPageOptions as number[]).map(val =>
-      val === -1 ? { title: t('csqc.pagination.tous'), value: -1 } : { title: String(val), value: val },
-    ),
-  )
-
-  const pageCount = computed(() => {
-    const total = filteredItems.value.length
-    if (!itemsParPageLocal.value || itemsParPageLocal.value <= 0) return 1
-    return Math.max(1, Math.ceil(total / itemsParPageLocal.value))
-  })
-
-  function obtenirPages(totalPages: number): (number | '...')[] {
-    if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1)
-    const current = pageActuelle.value
-    const pages: (number | '...')[] = []
-    const left = Math.max(2, current - 1)
-    const right = Math.min(totalPages - 1, current + 1)
-    pages.push(1)
-    if (left > 2) pages.push('...')
-    for (let i = left; i <= right; i++) pages.push(i)
-    if (right < totalPages - 1) pages.push('...')
-    pages.push(totalPages)
-    return pages
-  }
-
-  // Modale suppression (on garde l’item sélectionné)
-  const itemSelectionne = ref<any>(null)
-
-  // ============================================================================
-  // State - Choix de colonnes (vues sauvegardées) + sélection courante
-  // ============================================================================
-  const datatable = ref<any>(null)
-  const listeInterne = ref<Record<string, any>[]>([])
-  const modaleChoix = ref<InstanceType<typeof ModaleChoix> | null>(null)
-  const openChoixColonnes = ref(false)
-  const choix = ref<VueColonnes[]>([]) // la liste des vues disponibles
-  const vueActive = ref<VueColonnes | null>(null) // optionnel: la vue "appliquée"
-  const valeurSelectionChoixColonnes = ref<string | null>(null) // nomVue sélectionné dans la modale / UI
-
-  // ============================================================================
-  // Charger le choix de colonnes sauvegardé s'il y a lieu
-  // ============================================================================
-  onMounted(async () => {
-    if (!props.permettreChoixColonnes) return
-
-    try {
-      const res: any = await axios
-        .getAxios()
-        .get(`${props.urlbase}/api/ComposantUI/Colonnes/${props.formulaireId}/Identifiant/${props.identifiant}`)
-
-      const payload = res?.data ?? res
-
-      if (!payload) {
-        choix.value = []
-        return
-      }
-
-      choix.value = typeof payload === 'string' ? JSON.parse(payload) : payload
-    } catch (e) {
-      choix.value = []
-      // console.debug(e)
-    }
-  })
-
-  // ============================================================================
-  // Computed - Normaliser pour la modale Choix colonne
-  // ============================================================================
-  const choixOrigineNormalise = computed(() =>
-    (choix.value ?? []).map(c => ({
-      _id: '',
-      nomVue: c.nomVue,
-      colonnes: c.colonnes ?? [],
-      defaut: c.defaut ?? false,
-    })),
-  )
-
-  // ============================================================================
-  // Actions - Modale choix colonnes
-  // ============================================================================
-  function ouvrirChoixColonnes() {
-    modaleChoix.value?.ouvrir()
-  }
-
-  function appliquerVue(vue: VueColonnes) {
-    vueActive.value = vue
-    openChoixColonnes.value = false
-  }
-
-  function selectionChoix(vue: VueColonnes) {
-    // on garde une trace du nom sélectionné (pour retrouver la vue plus tard)
-    valeurSelectionChoixColonnes.value = vue.nomVue
-    appliquerVue(vue)
-  }
-
-  function sauvegardeChoix(vues: VueColonnes[]) {
-    if (!props.permettreChoixColonnes) return
-
-    // si la sélection courante n’existe plus, on reset
-    if (
-      valeurSelectionChoixColonnes.value != null &&
-      vues.find(x => x.nomVue === valeurSelectionChoixColonnes.value) == null
-    ) {
-      valeurSelectionChoixColonnes.value = null
-    }
-
-    choix.value = vues
-
-    // optionnel: appliquer automatiquement la vue par défaut
-    const defaut = vues.find(v => v.defaut)
-    if (defaut) appliquerVue(defaut)
-  }
-
-  // ============================================================================
-  // Computed - Mode ordre manuel
-  // ============================================================================
-  const estEnModeModificateurOrdre = computed(() => {
-    if (!props.modificateurOrdreChamp) return false
-
-    if (props.liste == null) return false
-
-    // Vérifie que le champ existe dans les données (pas nécessairement une colonne visible)
-    if (!props.liste.length) return false // liste vide, on attend sans avertissement
-
-    const premierItem = props.liste[0]
-
-    if (!(props.modificateurOrdreChamp in premierItem)) {
-      console.log(
-        `[csqcTable] modificateurOrdreChamp="${props.modificateurOrdreChamp}" n'existe pas dans les données. Le mode d'ordonnancement est désactivé.`,
-      )
-      return false
-    }
-
-    return true
-  })
-
-  // ============================================================================
-  // Computed - Colonnes à envoyer à la modale (liste ordonnée + libellé)
-  // ============================================================================
-  const colonnesPourChoix = computed(() =>
-    props.colonnes
-      // on exclut l'action (souvent toujours visible) + colonnes "cachées"
-      .filter(c => c.key && c.key !== 'action' && (c as any).align !== 'd-none')
-      .map((c, idx) => ({
-        title: (c as any).title ?? (c as any).text ?? String((c as any).key ?? (c as any).value),
-        value: String((c as any).key ?? (c as any).value), // ← on force string
-        ordre: idx + 1,
-      })),
-  )
-
-  // ============================================================================
-  // Computed - Headers réellement affichés par la table (selon le choix actif)
-  // ============================================================================
-  const colonnesAffichees = computed(() => {
-    // 1) colonnes "disponibles" (on enlève celles explicitement cachées)
-    const colonnesFiltre = props.colonnes.filter(c => (c as any).align !== 'd-none')
-
-    // 2) résoudre la liste selon les vues sauvegardées (choix colonnes)
-    let colonnesBase: Colonne[]
-    if (!props.permettreChoixColonnes || !choix.value?.length) {
-      colonnesBase = colonnesFiltre
-    } else {
-      // retrouver la vue sélectionnée (sinon la défaut)
-      const choixSelection = choix.value.find(
-        x => valeurSelectionChoixColonnes.value === x.nomVue || (!valeurSelectionChoixColonnes.value && x.defaut),
-      )
-      colonnesBase = choixSelection
-        ? (choixSelection.colonnes.map(k => colonnesFiltre.find(c => String(c.key) === k)).filter(Boolean) as Colonne[])
-        : colonnesFiltre
-    }
-
-    // 3) ordre manuel actif : colonne ancre en tête + toutes les colonnes non triables
-    if (estEnModeModificateurOrdre.value) {
-      const colonneAncre = { key: 'ancre', title: '', sortable: false, width: '40px' } as Colonne
-      return [colonneAncre, ...colonnesBase.map(c => ({ ...c, sortable: false }))]
-    }
-
-    return colonnesBase
-  })
-
-  // ============================================================================
-  // Computed - Tri initial (Vuetify sort-by)
-  // ============================================================================
-  const triDepart = computed<SortItem[] | undefined>(() => {
-    // ordre manuel : tri forcé sur le champ ordre, croissant
-    if (estEnModeModificateurOrdre.value) return [{ key: props.modificateurOrdreChamp!, order: 'asc' }]
-
-    if (props.triParDepart == null) return undefined
-
-    const ordre = props.triDescDepart ? 'desc' : 'asc'
-    if (typeof props.triParDepart === 'string') return [{ key: props.triParDepart, order: ordre }]
-
-    const 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)
-    }
-    return retour
-  })
-
-  const estMultiTriActif = computed(() => {
-    if (estEnModeModificateurOrdre.value) return false
-    if (props.triParDepart == null) return false
-    if (typeof props.triParDepart === 'string') return false
-    return true
-  })
-
-  // ============================================================================
-  // Computed - Export (filtrage local basé sur recherche)
-  // ============================================================================
-  const filteredItems = computed(() => {
-    if (!recherche.value) return props.liste
-    const q = recherche.value.toLowerCase()
-    return props.liste.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(q)))
-  })
-
-  const listeEffective = computed(() => (estEnModeModificateurOrdre.value ? listeInterne.value : props.liste))
-
-  // ============================================================================
-  // Drag & drop - Ordre manuel (Sortable.js)
-  // ============================================================================
-  let sortableInstance: Sortable | null = null
-
-  // Synchronise listeInterne quand le parent met à jour props.liste
-  watch(
-    () => props.liste,
-    val => {
-      listeInterne.value = [...val]
-    },
-    { immediate: true, deep: true },
-  )
-
-  // Init/destroy Sortable si la prop change en cours de vie du composant
-  watch(estEnModeModificateurOrdre, actif => {
-    if (actif) nextTick(initSortable)
-    else destroySortable()
-  })
-
-  onMounted(() => {
-    if (estEnModeModificateurOrdre.value) nextTick(initSortable)
-  })
-
-  onBeforeUnmount(() => {
-    destroySortable()
-  })
-
-  function initSortable() {
-    const tableEl = datatable.value?.$el as HTMLElement | undefined
-    if (!tableEl) return
-    const tbody = tableEl.querySelector('tbody')
-    if (!tbody) return
-
-    destroySortable() // garantit une seule instance active
-
-    sortableInstance = Sortable.create(tbody, {
-      animation: 150,
-      handle: '.ancre-drag',
-      onEnd(event) {
-        const oldIndex = event.oldIndex
-        const newIndex = event.newIndex
-        if (oldIndex == null || newIndex == null || oldIndex === newIndex) return
-
-        const items = [...listeInterne.value]
-        const moved = items.splice(oldIndex, 1)[0]
-        items.splice(newIndex, 0, moved)
-
-        // Recalcule la valeur du champ ordre pour maintenir la cohérence
-        const champ = props.modificateurOrdreChamp!
-        items.forEach((item, idx) => {
-          item[champ] = idx + 1
-        })
-
-        listeInterne.value = items
-        emit('ordreRangeeModifie', [...items])
-      },
-    })
-  }
-
-  function destroySortable() {
-    sortableInstance?.destroy()
-    sortableInstance = null
-  }
-
-  // ============================================================================
-  // UI Actions - Recherche / Table events
-  // ============================================================================
-  function chargerRecherche(val: string) {
-    recherche.value = val
-    pageActuelle.value = 1
-  }
-
-  function ajouter() {
-    emit('ajouter')
-  }
-
-  function cliqueLigne(_e: Event, { item }: { item: any }) {
-    emit('cliqueLigne', item)
-  }
-
-  function modifier(item: any) {
-    emit('modifier', item)
-  }
-
-  // ============================================================================
-  // Suppression - Texte + actions
-  // ============================================================================
-  const supprimerTexte = computed(() => {
-    if (itemSelectionne.value == null) return ''
-
-    if (props.modaleSupprimerTexte) return props.modaleSupprimerTexte
-
-    return t('csqc.message.supprimerMessage', {
-      nom: itemSelectionne?.value?.[props.modaleSupprimerChamp] ?? '',
-    })
-  })
-
-  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.supprimerTitre'))
-
-  function ouvrirModaleSupprimer(item: any) {
-    itemSelectionne.value = item
-    emit('supprimer', itemSelectionne.value) // tu sembles gérer la modale ailleurs
-  }
-
-  function supprimer() {
-    emit('supprimer', itemSelectionne.value)
-  }
-
-  // ============================================================================
-  // UI - Panneau recherche avancée
-  // ============================================================================
-  function onPanelChange(val: boolean) {
-    emit('panneau:etat', val)
-  }
-</script>
-
-<style scoped lang="css">
-  .ControlesDatatable {
-    gap: 4px;
-  }
-
-  /* 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 commun */
-  :deep(.v-data-table-header__content) {
-    font-size: 15px;
-    font-weight: 600;
-    height: 46px;
-  }
-
-  /* standard : en-tête bleu moyen */
-  :deep(.entete-standard .v-table__wrapper > table > thead > tr > th),
-  :deep(.entete-standard .v-data-table-header__content) {
-    background-color: rgb(var(--v-theme-bleuMoyen)) !important;
-    color: rgb(var(--v-theme-blanc)) !important;
-  }
-
-  /* standardGris : en-tête gris pâle */
-  :deep(.entete-standard-gris .v-table__wrapper > table > thead > tr > th),
-  :deep(.entete-standard-gris .v-data-table-header__content) {
-    background-color: rgb(var(--v-theme-grisPale)) !important;
-    color: rgb(var(--v-theme-bleuFonce)) !important;
-  }
-
-  /* simplifié : en-tête blanc + filet bleuFonce */
-  :deep(.entete-simplifie .v-table__wrapper > table > thead > tr > th) {
-    background-color: rgb(var(--v-theme-blanc)) !important;
-    border-bottom: 4px rgb(var(--v-theme-bleuFonce)) solid !important;
-  }
-  :deep(.entete-simplifie .v-data-table-header__content) {
-    background-color: rgb(var(--v-theme-blanc)) !important;
-    color: rgb(var(--v-theme-bleuFonce)) !important;
-  }
-
-  /* datatable footer - pagination design Québec */
-  .piv-pagination {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    padding: 12px 16px;
-    background-color: rgb(var(--v-theme-blanc));
-    border-top: 4px rgb(var(--v-theme-bleuFonce)) solid;
-  }
-
-  .piv-par-page {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .piv-total {
-    text-align: right;
-  }
-
-  .piv-pagination nav {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin: 0;
-    padding: 0;
-  }
-
-  .piv-page-btn {
-    min-width: 40px;
-    height: 40px;
-    padding: 0 10px;
-    border: 0px solid rgb(var(--v-theme-grisMoyen));
-    background: rgb(var(--v-theme-blanc));
-    color: rgb(var(--v-theme-bleuPiv));
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition:
-      background-color 0.2s,
-      color 0.2s;
-  }
-
-  .piv-page-btn:hover:not(.piv-page-active) {
-    background-color: rgb(var(--v-theme-bleuPale));
-  }
-
-  .piv-page-btn:focus-visible {
-    outline: 3px solid rgb(var(--v-theme-bleuPiv));
-    outline-offset: 2px;
-  }
-
-  .piv-page-active {
-    color: rgb(var(--v-theme-noir));
-    font-weight: bolder;
-  }
-
-  .piv-ellipsis {
-    padding: 0 6px;
-    color: rgb(var(--v-theme-bleuFonce));
-    font-size: 16px;
-    font-weight: 600;
-    display: inline-flex;
-    align-items: center;
-    height: 40px;
-  }
-
-  /* datatable row hover */
-  :deep(.v-table__wrapper > table tbody > tr:hover > td) {
-    background-color: rgb(var(--v-theme-bleuPale)) !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;
-  }
-
-  /* icône d'ancre drag & drop */
-  .ancre-drag {
-    color: #808a9d;
-    cursor: grab;
-  }
-  .ancre-drag:active {
-    cursor: grabbing;
-  }
-</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"
+          v-bind="$attrs"
+          @update:recherche="chargerRecherche"
+          @panneau:etat="onPanelChange"
+        >
+          <template #milieu>
+            <slot name="milieu" />
+          </template>
+
+          <template #droite>
+            <slot name="droite" />
+            <bouton-primaire
+              v-if="btnAjouter"
+              class="ml-1 float-right"
+              @click.stop="ajouter"
+            >
+              {{ props.btnAjouterTexte ? props.btnAjouterTexte : $t('csqc.bouton.ajouter') }}
+            </bouton-primaire>
+
+            <exportExcelComponent
+              v-if="excel"
+              :liste="filteredItems"
+              :chargement-liste="chargementListe"
+              :nom-fichier="excelNomFichier"
+              :colonnes="colonnesAffichees"
+              class="mt-1 ml-1 float-right"
+            />
+            <v-icon
+              v-if="permettreChoixColonnes"
+              color="grisMoyen"
+              class="mt-1 ml-1 float-right"
+              @click.stop="ouvrirChoixColonnes"
+            >
+              mdi-table-edit
+            </v-icon>
+          </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"
+          :headers="colonnesAffichees"
+          :item-key="itemKey"
+          :items="listeEffective"
+          :search="recherche"
+          :loading="chargementListe"
+          :hover="hover"
+          :density="densite"
+          :items-per-page="itemsParPageLocal"
+          :item-per-page-options="itemsParPageOptions"
+          :sort-by="triDepart"
+          :multi-sort="estMultiTriActif"
+          v-model:page="pageActuelle"
+          :striped="props.styleEntete !== 'simplifie' ? 'even' : undefined"
+          :class="classeEntete"
+          v-bind="$attrs"
+          @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>
+
+          <!-- Icône ancre (drag & drop) -->
+          <template
+            v-if="estEnModeModificateurOrdre"
+            #item.ancre
+          >
+            <v-icon class="ancre-drag">mdi-drag-vertical</v-icon>
+          </template>
+
+          <!-- Footer : pagination design Québec -->
+          <template #bottom>
+            <div class="piv-pagination">
+              <div class="piv-par-page">
+                <span class="text-caption text-medium-emphasis">{{ $t('csqc.pagination.elementsParPage') }}</span>
+                <v-select
+                  v-model="itemsParPageLocal"
+                  :items="itemsParPageSelectOptions"
+                  density="compact"
+                  variant="outlined"
+                  hide-details
+                  style="max-width: 90px"
+                />
+              </div>
+              <nav aria-label="Pagination">
+                <button
+                  variant="text"
+                  v-if="pageActuelle > 1"
+                  class="piv-page-btn"
+                  aria-label="Page précédente"
+                  @click="pageActuelle--"
+                >
+                  <v-icon size="24">mdi-chevron-left</v-icon>
+                </button>
+
+                <template
+                  v-for="item in obtenirPages(pageCount)"
+                  :key="`page-${item}`"
+                >
+                  <span
+                    v-if="item === '...'"
+                    class="piv-ellipsis"
+                    aria-hidden="true"
+                    >…</span
+                  >
+                  <button
+                    v-else
+                    variant="text"
+                    class="piv-page-btn"
+                    :class="{ 'piv-page-active': item === pageActuelle }"
+                    :aria-label="`Page ${item}`"
+                    :aria-current="item === pageActuelle ? 'page' : undefined"
+                    @click="pageActuelle = item as number"
+                  >
+                    {{ item }}
+                  </button>
+                </template>
+
+                <button
+                  v-if="pageActuelle < pageCount"
+                  class="piv-page-btn"
+                  aria-label="Page suivante"
+                  @click="pageActuelle++"
+                >
+                  <v-icon size="24">mdi-chevron-right</v-icon>
+                </button>
+              </nav>
+              <span class="piv-total text-caption text-medium-emphasis">
+                {{ filteredItems.length }} {{ $t('csqc.pagination.total') }}
+              </span>
+            </div>
+          </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"
+        />
+        <modale-choix
+          v-if="permettreChoixColonnes"
+          ref="modaleChoix"
+          :urlbase="urlbase"
+          :formulaire-id="formulaireId"
+          :identifiant="identifiant"
+          :colonnes="colonnesPourChoix"
+          :choix-origine="choixOrigineNormalise"
+          @selection="selectionChoix"
+          @sauvegarde="sauvegardeChoix"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, onBeforeUnmount, nextTick, onMounted, ref, watch, type PropType, type Slots } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
+
+  import Recherche from '../csqcRecherche.vue'
+  import confirmation from '../csqcConfirmation.vue'
+  import exportExcelComponent from './csqcTableExportExcel.vue'
+  import ModaleChoix from './csqcTableModaleChoixColonnes.vue'
+  import axios from '../../outils/appAxios'
+  import Colonne from '../../modeles/composants/datatableColonne'
+  import Sortable from 'sortablejs'
+
+  type VueColonnes = {
+    nomVue: string
+    colonnes: string[]
+    defaut?: boolean
+  }
+
+  const slots = defineSlots<Slots>()
+  const emit = defineEmits([
+    'ajouter',
+    'cliqueLigne',
+    'supprimer',
+    'modifier',
+    'donneesExportees',
+    'panneau:etat',
+    'ordreRangeeModifie',
+  ])
+
+  // ============================================================================
+  // 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 },
+
+    // Headers Vuetify
+    colonnes: {
+      type: Array as PropType<Colonne[]>,
+      default: (): Colonne[] => [],
+    },
+
+    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
+
+    excel: { type: Boolean, default: false },
+    excelNomFichier: { type: String, default: 'csqc' },
+
+    // Choix colonnes
+    formulaireId: { type: Number, default: -1 },
+    identifiant: { type: String, default: '' },
+    urlbase: { type: String, default: '' },
+    permettreChoixColonnes: { type: Boolean, default: false },
+
+    // Table
+    itemKey: { type: String, default: 'id' },
+    itemsParPage: { type: Number, default: 25 },
+    itemsParPageOptions: { type: Array, default: () => [10, 25, 50, 100, -1] },
+    liste: {
+      type: Array as PropType<Record<string, any>[]>,
+      default: (): Record<string, any>[] => [],
+    },
+    hover: { type: Boolean, default: false },
+
+    // Recherche
+    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: '' },
+
+    // Style en-tête tableau (design Québec)
+    styleEntete: {
+      type: String as PropType<'standard' | 'standardGris' | 'simplifie'>,
+      default: 'standard',
+    },
+
+    // Modale suppression
+    modaleSupprimerChamp: { type: String, default: '' },
+    modaleSupprimerTexte: { type: String, default: '' },
+    modaleSupprimerTitre: { type: String, default: '' },
+    modaleSupprimerLargeur: { type: String, default: '525px' },
+
+    // Tri
+    triDescDepart: { type: Boolean, default: false },
+    triParDepart: {
+      type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
+      default: undefined,
+    },
+
+    // Ordre manuel (drag & drop)
+    modificateurOrdreChamp: { type: String, default: undefined },
+  })
+
+  const { t } = useI18n({ useScope: 'global' })
+  const recherche = ref<string>('')
+  const pageActuelle = ref(1)
+  const itemsParPageLocal = ref(props.itemsParPage)
+
+  watch(
+    () => props.itemsParPage,
+    val => {
+      itemsParPageLocal.value = val
+    },
+  )
+
+  watch(itemsParPageLocal, () => {
+    pageActuelle.value = 1
+  })
+
+  const classeEntete = computed(() => ({
+    'entete-standard': props.styleEntete === 'standard',
+    'entete-standard-gris': props.styleEntete === 'standardGris',
+    'entete-simplifie': props.styleEntete === 'simplifie',
+  }))
+
+  const itemsParPageSelectOptions = computed(() =>
+    (props.itemsParPageOptions as number[]).map(val =>
+      val === -1 ? { title: t('csqc.pagination.tous'), value: -1 } : { title: String(val), value: val },
+    ),
+  )
+
+  const pageCount = computed(() => {
+    const total = filteredItems.value.length
+    if (!itemsParPageLocal.value || itemsParPageLocal.value <= 0) return 1
+    return Math.max(1, Math.ceil(total / itemsParPageLocal.value))
+  })
+
+  function obtenirPages(totalPages: number): (number | '...')[] {
+    if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1)
+    const current = pageActuelle.value
+    const pages: (number | '...')[] = []
+    const left = Math.max(2, current - 1)
+    const right = Math.min(totalPages - 1, current + 1)
+    pages.push(1)
+    if (left > 2) pages.push('...')
+    for (let i = left; i <= right; i++) pages.push(i)
+    if (right < totalPages - 1) pages.push('...')
+    pages.push(totalPages)
+    return pages
+  }
+
+  // Modale suppression (on garde l’item sélectionné)
+  const itemSelectionne = ref<any>(null)
+
+  // ============================================================================
+  // State - Choix de colonnes (vues sauvegardées) + sélection courante
+  // ============================================================================
+  const datatable = ref<any>(null)
+  const listeInterne = ref<Record<string, any>[]>([])
+  const modaleChoix = ref<InstanceType<typeof ModaleChoix> | null>(null)
+  const openChoixColonnes = ref(false)
+  const choix = ref<VueColonnes[]>([]) // la liste des vues disponibles
+  const vueActive = ref<VueColonnes | null>(null) // optionnel: la vue "appliquée"
+  const valeurSelectionChoixColonnes = ref<string | null>(null) // nomVue sélectionné dans la modale / UI
+
+  // ============================================================================
+  // Charger le choix de colonnes sauvegardé s'il y a lieu
+  // ============================================================================
+  onMounted(async () => {
+    if (!props.permettreChoixColonnes) return
+
+    try {
+      const res: any = await axios
+        .getAxios()
+        .get(`${props.urlbase}/api/ComposantUI/Colonnes/${props.formulaireId}/Identifiant/${props.identifiant}`)
+
+      const payload = res?.data ?? res
+
+      if (!payload) {
+        choix.value = []
+        return
+      }
+
+      choix.value = typeof payload === 'string' ? JSON.parse(payload) : payload
+    } catch (e) {
+      choix.value = []
+      // console.debug(e)
+    }
+  })
+
+  // ============================================================================
+  // Computed - Normaliser pour la modale Choix colonne
+  // ============================================================================
+  const choixOrigineNormalise = computed(() =>
+    (choix.value ?? []).map(c => ({
+      _id: '',
+      nomVue: c.nomVue,
+      colonnes: c.colonnes ?? [],
+      defaut: c.defaut ?? false,
+    })),
+  )
+
+  // ============================================================================
+  // Actions - Modale choix colonnes
+  // ============================================================================
+  function ouvrirChoixColonnes() {
+    modaleChoix.value?.ouvrir()
+  }
+
+  function appliquerVue(vue: VueColonnes) {
+    vueActive.value = vue
+    openChoixColonnes.value = false
+  }
+
+  function selectionChoix(vue: VueColonnes) {
+    // on garde une trace du nom sélectionné (pour retrouver la vue plus tard)
+    valeurSelectionChoixColonnes.value = vue.nomVue
+    appliquerVue(vue)
+  }
+
+  function sauvegardeChoix(vues: VueColonnes[]) {
+    if (!props.permettreChoixColonnes) return
+
+    // si la sélection courante n’existe plus, on reset
+    if (
+      valeurSelectionChoixColonnes.value != null &&
+      vues.find(x => x.nomVue === valeurSelectionChoixColonnes.value) == null
+    ) {
+      valeurSelectionChoixColonnes.value = null
+    }
+
+    choix.value = vues
+
+    // optionnel: appliquer automatiquement la vue par défaut
+    const defaut = vues.find(v => v.defaut)
+    if (defaut) appliquerVue(defaut)
+  }
+
+  // ============================================================================
+  // Computed - Mode ordre manuel
+  // ============================================================================
+  const estEnModeModificateurOrdre = computed(() => {
+    if (!props.modificateurOrdreChamp) return false
+
+    if (props.liste == null) return false
+
+    // Vérifie que le champ existe dans les données (pas nécessairement une colonne visible)
+    if (!props.liste.length) return false // liste vide, on attend sans avertissement
+
+    const premierItem = props.liste[0]
+
+    if (!(props.modificateurOrdreChamp in premierItem)) {
+      console.log(
+        `[csqcTable] modificateurOrdreChamp="${props.modificateurOrdreChamp}" n'existe pas dans les données. Le mode d'ordonnancement est désactivé.`,
+      )
+      return false
+    }
+
+    return true
+  })
+
+  // ============================================================================
+  // Computed - Colonnes à envoyer à la modale (liste ordonnée + libellé)
+  // ============================================================================
+  const colonnesPourChoix = computed(() =>
+    props.colonnes
+      // on exclut l'action (souvent toujours visible) + colonnes "cachées"
+      .filter(c => c.key && c.key !== 'action' && (c as any).align !== 'd-none')
+      .map((c, idx) => ({
+        title: (c as any).title ?? (c as any).text ?? String((c as any).key ?? (c as any).value),
+        value: String((c as any).key ?? (c as any).value), // ← on force string
+        ordre: idx + 1,
+      })),
+  )
+
+  // ============================================================================
+  // Computed - Headers réellement affichés par la table (selon le choix actif)
+  // ============================================================================
+  const colonnesAffichees = computed(() => {
+    // 1) colonnes "disponibles" (on enlève celles explicitement cachées)
+    const colonnesFiltre = props.colonnes.filter(c => (c as any).align !== 'd-none')
+
+    // 2) résoudre la liste selon les vues sauvegardées (choix colonnes)
+    let colonnesBase: Colonne[]
+    if (!props.permettreChoixColonnes || !choix.value?.length) {
+      colonnesBase = colonnesFiltre
+    } else {
+      // retrouver la vue sélectionnée (sinon la défaut)
+      const choixSelection = choix.value.find(
+        x => valeurSelectionChoixColonnes.value === x.nomVue || (!valeurSelectionChoixColonnes.value && x.defaut),
+      )
+      colonnesBase = choixSelection
+        ? (choixSelection.colonnes.map(k => colonnesFiltre.find(c => String(c.key) === k)).filter(Boolean) as Colonne[])
+        : colonnesFiltre
+    }
+
+    // 3) ordre manuel actif : colonne ancre en tête + toutes les colonnes non triables
+    if (estEnModeModificateurOrdre.value) {
+      const colonneAncre = { key: 'ancre', title: '', sortable: false, width: '40px' } as Colonne
+      return [colonneAncre, ...colonnesBase.map(c => ({ ...c, sortable: false }))]
+    }
+
+    return colonnesBase
+  })
+
+  // ============================================================================
+  // Computed - Tri initial (Vuetify sort-by)
+  // ============================================================================
+  const triDepart = computed<SortItem[] | undefined>(() => {
+    // ordre manuel : tri forcé sur le champ ordre, croissant
+    if (estEnModeModificateurOrdre.value) return [{ key: props.modificateurOrdreChamp!, order: 'asc' }]
+
+    if (props.triParDepart == null) return undefined
+
+    const ordre = props.triDescDepart ? 'desc' : 'asc'
+    if (typeof props.triParDepart === 'string') return [{ key: props.triParDepart, order: ordre }]
+
+    const 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)
+    }
+    return retour
+  })
+
+  const estMultiTriActif = computed(() => {
+    if (estEnModeModificateurOrdre.value) return false
+    if (props.triParDepart == null) return false
+    if (typeof props.triParDepart === 'string') return false
+    return true
+  })
+
+  // ============================================================================
+  // Computed - Export (filtrage local basé sur recherche)
+  // ============================================================================
+  const filteredItems = computed(() => {
+    if (!recherche.value) return props.liste
+    const q = recherche.value.toLowerCase()
+    return props.liste.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(q)))
+  })
+
+  const listeEffective = computed(() => (estEnModeModificateurOrdre.value ? listeInterne.value : props.liste))
+
+  // ============================================================================
+  // Drag & drop - Ordre manuel (Sortable.js)
+  // ============================================================================
+  let sortableInstance: Sortable | null = null
+
+  // Synchronise listeInterne quand le parent met à jour props.liste
+  watch(
+    () => props.liste,
+    val => {
+      listeInterne.value = [...val]
+    },
+    { immediate: true, deep: true },
+  )
+
+  // Init/destroy Sortable si la prop change en cours de vie du composant
+  watch(estEnModeModificateurOrdre, actif => {
+    if (actif) nextTick(initSortable)
+    else destroySortable()
+  })
+
+  onMounted(() => {
+    if (estEnModeModificateurOrdre.value) nextTick(initSortable)
+  })
+
+  onBeforeUnmount(() => {
+    destroySortable()
+  })
+
+  function initSortable() {
+    const tableEl = datatable.value?.$el as HTMLElement | undefined
+    if (!tableEl) return
+    const tbody = tableEl.querySelector('tbody')
+    if (!tbody) return
+
+    destroySortable() // garantit une seule instance active
+
+    sortableInstance = Sortable.create(tbody, {
+      animation: 150,
+      handle: '.ancre-drag',
+      onEnd(event) {
+        const oldIndex = event.oldIndex
+        const newIndex = event.newIndex
+        if (oldIndex == null || newIndex == null || oldIndex === newIndex) return
+
+        const items = [...listeInterne.value]
+        const moved = items.splice(oldIndex, 1)[0]
+        items.splice(newIndex, 0, moved)
+
+        // Recalcule la valeur du champ ordre pour maintenir la cohérence
+        const champ = props.modificateurOrdreChamp!
+        items.forEach((item, idx) => {
+          item[champ] = idx + 1
+        })
+
+        listeInterne.value = items
+        emit('ordreRangeeModifie', [...items])
+      },
+    })
+  }
+
+  function destroySortable() {
+    sortableInstance?.destroy()
+    sortableInstance = null
+  }
+
+  // ============================================================================
+  // UI Actions - Recherche / Table events
+  // ============================================================================
+  function chargerRecherche(val: string) {
+    recherche.value = val
+    pageActuelle.value = 1
+  }
+
+  function ajouter() {
+    emit('ajouter')
+  }
+
+  function cliqueLigne(_e: Event, { item }: { item: any }) {
+    emit('cliqueLigne', item)
+  }
+
+  function modifier(item: any) {
+    emit('modifier', item)
+  }
+
+  // ============================================================================
+  // Suppression - Texte + actions
+  // ============================================================================
+  const supprimerTexte = computed(() => {
+    if (itemSelectionne.value == null) return ''
+
+    if (props.modaleSupprimerTexte) return props.modaleSupprimerTexte
+
+    return t('csqc.message.supprimerMessage', {
+      nom: itemSelectionne?.value?.[props.modaleSupprimerChamp] ?? '',
+    })
+  })
+
+  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.supprimerTitre'))
+
+  function ouvrirModaleSupprimer(item: any) {
+    itemSelectionne.value = item
+    emit('supprimer', itemSelectionne.value) // tu sembles gérer la modale ailleurs
+  }
+
+  function supprimer() {
+    emit('supprimer', itemSelectionne.value)
+  }
+
+  // ============================================================================
+  // UI - Panneau recherche avancée
+  // ============================================================================
+  function onPanelChange(val: boolean) {
+    emit('panneau:etat', val)
+  }
+</script>
+
+<style scoped lang="css">
+  .ControlesDatatable {
+    gap: 4px;
+  }
+
+  /* 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 commun */
+  :deep(.v-data-table-header__content) {
+    font-size: 15px;
+    font-weight: 600;
+    height: 46px;
+  }
+
+  /* standard : en-tête bleu moyen */
+  :deep(.entete-standard .v-table__wrapper > table > thead > tr > th),
+  :deep(.entete-standard .v-data-table-header__content) {
+    background-color: rgb(var(--v-theme-bleuMoyen)) !important;
+    color: rgb(var(--v-theme-blanc)) !important;
+  }
+
+  /* standardGris : en-tête gris pâle */
+  :deep(.entete-standard-gris .v-table__wrapper > table > thead > tr > th),
+  :deep(.entete-standard-gris .v-data-table-header__content) {
+    background-color: rgb(var(--v-theme-grisPale)) !important;
+    color: rgb(var(--v-theme-bleuFonce)) !important;
+  }
+
+  /* simplifié : en-tête blanc + filet bleuFonce */
+  :deep(.entete-simplifie .v-table__wrapper > table > thead > tr > th) {
+    background-color: rgb(var(--v-theme-blanc)) !important;
+    border-bottom: 4px rgb(var(--v-theme-bleuFonce)) solid !important;
+  }
+  :deep(.entete-simplifie .v-data-table-header__content) {
+    background-color: rgb(var(--v-theme-blanc)) !important;
+    color: rgb(var(--v-theme-bleuFonce)) !important;
+  }
+
+  /* datatable footer - pagination design Québec */
+  .piv-pagination {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding: 12px 16px;
+    background-color: rgb(var(--v-theme-blanc));
+    border-top: 4px rgb(var(--v-theme-bleuFonce)) solid;
+  }
+
+  .piv-par-page {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .piv-total {
+    text-align: right;
+  }
+
+  .piv-pagination nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .piv-page-btn {
+    min-width: 40px;
+    height: 40px;
+    padding: 0 10px;
+    border: 0px solid rgb(var(--v-theme-grisMoyen));
+    background: rgb(var(--v-theme-blanc));
+    color: rgb(var(--v-theme-bleuPiv));
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+  }
+
+  .piv-page-btn:hover:not(.piv-page-active) {
+    background-color: rgb(var(--v-theme-bleuPale));
+  }
+
+  .piv-page-btn:focus-visible {
+    outline: 3px solid rgb(var(--v-theme-bleuPiv));
+    outline-offset: 2px;
+  }
+
+  .piv-page-active {
+    color: rgb(var(--v-theme-noir));
+    font-weight: bolder;
+  }
+
+  .piv-ellipsis {
+    padding: 0 6px;
+    color: rgb(var(--v-theme-bleuFonce));
+    font-size: 16px;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    height: 40px;
+  }
+
+  /* datatable row hover */
+  :deep(.v-table__wrapper > table tbody > tr:hover > td) {
+    background-color: rgb(var(--v-theme-bleuPale)) !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;
+  }
+
+  /* icône d'ancre drag & drop */
+  .ancre-drag {
+    color: #808a9d;
+    cursor: grab;
+  }
+  .ancre-drag:active {
+    cursor: grabbing;
+  }
+</style>