codevdesign 1.0.78 → 1.0.79

package/composants/csqcSnackbar.vue

@@ -1,207 +1,207 @@
-<template>
-  <!--
-    FIFO Snackbar
-    - On affiche 1 snackbar à la fois.
-    - Les demandes suivantes sont mises en file (FIFO) et s’affichent après fermeture.
-    - color/location sont figées par item via props (pas via $attrs) pour éviter les changements live.
-  -->
-  <v-snackbar
-    :model-value="snackbar"
-    :timeout="-1"
-    :style="props.styleCss"
-    :color="colorAffiche"
-    :location="locationAffiche"
-    multi-line
-    v-bind="attrsAffiches"
-    @update:model-value="
-      v => {
-        if (!v) fermer()
-      }
-    "
-  >
-    <template v-if="titreAffiche || messageAffiche">
-      <b style="font-size: 12pt">{{ titreAffiche }}</b>
-      <br v-if="titreAffiche" />
-      <b>{{ messageAffiche }}</b>
-    </template>
-
-    <template #actions>
-      <!-- Toujours afficher la fermeture si timeout = -1 -->
-      <v-icon
-        v-if="props.btnFermer || timeoutAffiche === -1"
-        color="white"
-        style="cursor: pointer"
-        @click.stop="fermer"
-      >
-        mdi-close
-      </v-icon>
-    </template>
-  </v-snackbar>
-</template>
-
-<script setup lang="ts">
-  import { computed, ref, watch, useAttrs, toRaw } from 'vue'
-
-  // - color/location sont en props (et non via $attrs) pour être snapshottées proprement.
-  const props = defineProps({
-    styleCss: { type: String, required: false },
-
-    // Durée d’affichage (ms). -1 = ne ferme jamais automatiquement
-    temps: { type: Number, required: false, default: 4000 },
-
-    // Déclencheur : à chaque changement non-vide, on queue un item
-    message: { type: String, required: true },
-    titre: { type: String, required: false },
-
-    btnFermer: { type: Boolean, required: false, default: true },
-
-    // en props pour éviter le "live update" via $attrs
-    color: { type: String, required: false, default: 'success' },
-    location: { type: [String, Array, Object] as any, required: false },
-  })
-
-  const emit = defineEmits(['fermer:snackbar'])
-
-  /**
-   * ============================================================================
-   * $attrs : on forward tout sauf color/location (qui sont gérés par props & snapshot)
-   * ============================================================================
-   */
-  const attrs = useAttrs()
-
-  const attrsSansCouleur = computed(() => {
-    const { color, location, ...rest } = attrs as any
-    return rest
-  })
-
-  /**
-   * ============================================================================
-   * FIFO Queue (snapshot par item)
-   * ============================================================================
-   */
-  type ItemSnack = {
-    message: string
-    titre?: string
-    color: string
-    location?: any
-    attrs: Record<string, any>
-    timeout: number // -1 = manuel
-  }
-
-  const file = ref<ItemSnack[]>([])
-  const enCours = ref<ItemSnack | null>(null)
-
-  /**
-   * ============================================================================
-   * État UI
-   * ============================================================================
-   */
-  const snackbar = ref(false)
-
-  /**
-   * ============================================================================
-   * Computeds d’affichage (basés sur l’item en cours)
-   * ============================================================================
-   */
-  const attrsAffiches = computed(() => {
-    // On évite de forward color/location par attrs (même s’ils y étaient)
-    const a = (enCours.value?.attrs ?? {}) as any
-    const { color, location, ...rest } = a
-    return rest
-  })
-
-  const messageAffiche = computed(() => enCours.value?.message ?? '')
-  const titreAffiche = computed(() => enCours.value?.titre ?? '')
-  const colorAffiche = computed(() => enCours.value?.color ?? 'success')
-  const locationAffiche = computed(() => enCours.value?.location)
-  const timeoutAffiche = computed(() => enCours.value?.timeout ?? props.temps)
-
-  /**
-   * ============================================================================
-   * Timer (auto-close géré par nous, puisque v-snackbar est timeout=-1)
-   * ============================================================================
-   */
-  let timer: number | null = null
-
-  function clearTimer() {
-    if (timer != null) {
-      window.clearTimeout(timer)
-      timer = null
-    }
-  }
-
-  function scheduleAutoClose() {
-    clearTimer()
-
-    const t = timeoutAffiche.value
-    if (t === -1) return
-
-    // 1 seconde minimum, sinon on ne la voit pas
-    const ms = Math.max(1000, t)
-
-    timer = window.setTimeout(() => {
-      fermer()
-    }, ms)
-  }
-
-  /**
-   * ============================================================================
-   * Navigation FIFO
-   * ============================================================================
-   */
-  function afficherProchain() {
-    // Un seul snackbar à la fois
-    if (snackbar.value) return
-    if (enCours.value) return
-
-    const next = file.value.shift()
-    if (!next) return
-
-    enCours.value = next
-    snackbar.value = true
-    scheduleAutoClose()
-  }
-
-  function fermer() {
-    clearTimer()
-    snackbar.value = false
-    emit('fermer:snackbar')
-
-    // On attend un tick pour éviter les glitches (transition/DOM)
-    setTimeout(() => {
-      enCours.value = null
-      afficherProchain()
-    }, 0)
-  }
-
-  /**
-   * ============================================================================
-   * queue (snapshot) à chaque nouveau message
-   * ============================================================================
-   */
-  watch(
-    () => props.message,
-    nouveau => {
-      if (!nouveau) return
-
-      // Normalisation timeout
-      const timeout = props.temps < -1 ? -1 : props.temps >= 0 && props.temps < 1000 ? 1000 : props.temps
-
-      file.value.push({
-        message: String(nouveau),
-        titre: props.titre ? String(props.titre) : undefined,
-
-        // ✅ Primitives + props => stable (pas de "live update")
-        color: String(props.color ?? 'success'),
-        location: props.location,
-
-        // On forward les autres attrs (snapshot) : variant, rounded, etc.
-        attrs: structuredClone(toRaw(attrsSansCouleur.value)),
-
-        timeout,
-      })
-
-      afficherProchain()
-    },
-  )
-</script>
+<template>
+  <!--
+    FIFO Snackbar
+    - On affiche 1 snackbar à la fois.
+    - Les demandes suivantes sont mises en file (FIFO) et s’affichent après fermeture.
+    - color/location sont figées par item via props (pas via $attrs) pour éviter les changements live.
+  -->
+  <v-snackbar
+    :model-value="snackbar"
+    :timeout="-1"
+    :style="props.styleCss"
+    :color="colorAffiche"
+    :location="locationAffiche"
+    multi-line
+    v-bind="attrsAffiches"
+    @update:model-value="
+      v => {
+        if (!v) fermer()
+      }
+    "
+  >
+    <template v-if="titreAffiche || messageAffiche">
+      <b style="font-size: 12pt">{{ titreAffiche }}</b>
+      <br v-if="titreAffiche" />
+      <b>{{ messageAffiche }}</b>
+    </template>
+
+    <template #actions>
+      <!-- Toujours afficher la fermeture si timeout = -1 -->
+      <v-icon
+        v-if="props.btnFermer || timeoutAffiche === -1"
+        color="white"
+        style="cursor: pointer"
+        @click.stop="fermer"
+      >
+        mdi-close
+      </v-icon>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch, useAttrs, toRaw } from 'vue'
+
+  // - color/location sont en props (et non via $attrs) pour être snapshottées proprement.
+  const props = defineProps({
+    styleCss: { type: String, required: false },
+
+    // Durée d’affichage (ms). -1 = ne ferme jamais automatiquement
+    temps: { type: Number, required: false, default: 4000 },
+
+    // Déclencheur : à chaque changement non-vide, on queue un item
+    message: { type: String, required: true },
+    titre: { type: String, required: false },
+
+    btnFermer: { type: Boolean, required: false, default: true },
+
+    // en props pour éviter le "live update" via $attrs
+    color: { type: String, required: false, default: 'success' },
+    location: { type: [String, Array, Object] as any, required: false },
+  })
+
+  const emit = defineEmits(['fermer:snackbar'])
+
+  /**
+   * ============================================================================
+   * $attrs : on forward tout sauf color/location (qui sont gérés par props & snapshot)
+   * ============================================================================
+   */
+  const attrs = useAttrs()
+
+  const attrsSansCouleur = computed(() => {
+    const { color, location, ...rest } = attrs as any
+    return rest
+  })
+
+  /**
+   * ============================================================================
+   * FIFO Queue (snapshot par item)
+   * ============================================================================
+   */
+  type ItemSnack = {
+    message: string
+    titre?: string
+    color: string
+    location?: any
+    attrs: Record<string, any>
+    timeout: number // -1 = manuel
+  }
+
+  const file = ref<ItemSnack[]>([])
+  const enCours = ref<ItemSnack | null>(null)
+
+  /**
+   * ============================================================================
+   * État UI
+   * ============================================================================
+   */
+  const snackbar = ref(false)
+
+  /**
+   * ============================================================================
+   * Computeds d’affichage (basés sur l’item en cours)
+   * ============================================================================
+   */
+  const attrsAffiches = computed(() => {
+    // On évite de forward color/location par attrs (même s’ils y étaient)
+    const a = (enCours.value?.attrs ?? {}) as any
+    const { color, location, ...rest } = a
+    return rest
+  })
+
+  const messageAffiche = computed(() => enCours.value?.message ?? '')
+  const titreAffiche = computed(() => enCours.value?.titre ?? '')
+  const colorAffiche = computed(() => enCours.value?.color ?? 'success')
+  const locationAffiche = computed(() => enCours.value?.location)
+  const timeoutAffiche = computed(() => enCours.value?.timeout ?? props.temps)
+
+  /**
+   * ============================================================================
+   * Timer (auto-close géré par nous, puisque v-snackbar est timeout=-1)
+   * ============================================================================
+   */
+  let timer: number | null = null
+
+  function clearTimer() {
+    if (timer != null) {
+      window.clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  function scheduleAutoClose() {
+    clearTimer()
+
+    const t = timeoutAffiche.value
+    if (t === -1) return
+
+    // 1 seconde minimum, sinon on ne la voit pas
+    const ms = Math.max(1000, t)
+
+    timer = window.setTimeout(() => {
+      fermer()
+    }, ms)
+  }
+
+  /**
+   * ============================================================================
+   * Navigation FIFO
+   * ============================================================================
+   */
+  function afficherProchain() {
+    // Un seul snackbar à la fois
+    if (snackbar.value) return
+    if (enCours.value) return
+
+    const next = file.value.shift()
+    if (!next) return
+
+    enCours.value = next
+    snackbar.value = true
+    scheduleAutoClose()
+  }
+
+  function fermer() {
+    clearTimer()
+    snackbar.value = false
+    emit('fermer:snackbar')
+
+    // On attend un tick pour éviter les glitches (transition/DOM)
+    setTimeout(() => {
+      enCours.value = null
+      afficherProchain()
+    }, 0)
+  }
+
+  /**
+   * ============================================================================
+   * queue (snapshot) à chaque nouveau message
+   * ============================================================================
+   */
+  watch(
+    () => props.message,
+    nouveau => {
+      if (!nouveau) return
+
+      // Normalisation timeout
+      const timeout = props.temps < -1 ? -1 : props.temps >= 0 && props.temps < 1000 ? 1000 : props.temps
+
+      file.value.push({
+        message: String(nouveau),
+        titre: props.titre ? String(props.titre) : undefined,
+
+        // ✅ Primitives + props => stable (pas de "live update")
+        color: String(props.color ?? 'success'),
+        location: props.location,
+
+        // On forward les autres attrs (snapshot) : variant, rounded, etc.
+        attrs: structuredClone(toRaw(attrsSansCouleur.value)),
+
+        timeout,
+      })
+
+      afficherProchain()
+    },
+  )
+</script>

package/composants/csqcSwitch.vue

@@ -155,7 +155,6 @@
 
   /* NULL (centre + très distinct) */
   :deep(.switch-tristate.is-null .v-switch__track) {
-    opacity: 1 !important;
     background:
       repeating-linear-gradient(
         45deg,
@@ -165,15 +164,16 @@
         rgba(255, 255, 255, 0.05) 12px
       ),
       rgb(var(--v-theme-warning)) !important;
+    opacity: 1 !important;
   }
 
   :deep(.switch-tristate.is-null .v-switch__thumb) {
-    transform: translateX(calc((100% - 20px) / 2)) !important;
     background: white !important;
-    opacity: 1 !important;
     box-shadow:
       0 0 0 2px rgba(var(--v-theme-warning), 0.55),
       0 2px 6px rgba(0, 0, 0, 0.18) !important;
+    opacity: 1 !important;
+    transform: translateX(calc((100% - 20px) / 2)) !important;
   }
 
   /* Icône minus visible sur fond blanc */
@@ -194,10 +194,10 @@
   }
 
   .label-ligne {
-    display: flex;
     align-items: baseline;
-    justify-content: space-between;
+    display: flex;
     gap: 12px;
+    justify-content: space-between;
   }
 
   .label-gauche {

package/composants/csqcTable/csqcTable.vue

@@ -72,7 +72,6 @@
       >
         <v-data-table
           ref="datatable"
-          v-bind="$attrs"
           :headers="colonnesAffichees"
           :item-key="itemKey"
           :items="listeEffective"
@@ -84,6 +83,8 @@
           :item-per-page-options="itemsParPageOptions"
           :sort-by="triDepart"
           :multi-sort="estMultiTriActif"
+          striped="even"
+          v-bind="$attrs"
           @click:row="cliqueLigne"
         >
           <!-- utilisation des slots via le component parent-->
@@ -141,8 +142,8 @@
           @confirmer="supprimer"
         />
         <modale-choix
-          ref="modaleChoix"
           v-if="permettreChoixColonnes"
+          ref="modaleChoix"
           :urlbase="urlbase"
           :formulaire-id="formulaireId"
           :identifiant="identifiant"
@@ -576,26 +577,26 @@
   }
 
   .BarreRechercheBackIcone {
+    background-color: #095797 !important;
+    border-bottom: 1px solid #808a9d;
+    border-radius: 0 4px 4px 0 !important;
     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;
+    margin-left: -16px;
     max-width: 40px !important;
     min-width: 40px !important;
-    padding-right: 0 !important;
     padding-left: 0 !important;
-    border-radius: 0 4px 4px 0 !important;
-    margin-left: -16px;
+    padding-right: 0 !important;
+    width: 40px !important;
   }
 
   /* icone loupe */
   .BarreRechercheIcone {
+    color: white !important;
     font-size: 34px !important;
     margin-left: 1px !important;
     margin-top: 2px !important;
-    color: white !important;
   }
 
   /* datatable contour */
@@ -625,12 +626,16 @@
     border-bottom: 4px #223654 solid !important;
   }
 
+  :deep(.v-table__wrapper > table > thead > tr > th) {
+    background-color: rgb(var(--v-theme-bleuMoyen)) !important;
+  }
+
   /* datatable header intérieur*/
-  .v-data-table-header__content {
-    background-color: white !important;
-    color: #223654 !important;
-    font-weight: 600;
+  :deep(.v-data-table-header__content) {
+    background-color: rgb(var(--v-theme-bleuMoyen)) !important;
+    color: rgb(var(--v-theme-blanc)) !important;
     font-size: 15px;
+    font-weight: 600;
     height: 46px;
   }
 
@@ -663,8 +668,8 @@
 
   /* icône d'ancre drag & drop */
   .ancre-drag {
-    cursor: grab;
     color: #808a9d;
+    cursor: grab;
   }
   .ancre-drag:active {
     cursor: grabbing;

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

@@ -41,11 +41,11 @@
           <!-- TABLE 1 : Liste des vues -->
           <v-data-table
             id="choixColonnes-choix"
+            v-model:expanded="expandedChoixIds"
             class="limiteHauteurChoix"
             :headers="colonnesChoix"
             :items="choix"
             :item-value="row => choixOf(row)._id"
-            v-model:expanded="expandedChoixIds"
             show-expand
             :single-expand="true"
             :items-per-page="-1"
@@ -65,7 +65,7 @@
                 {{ t('csqc.bouton.ajouter') }}
               </v-btn>
             </template>
-            <template v-slot:item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+            <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
               <v-btn
                 :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                 :text="isExpanded(internalItem) ? 'Fermer' : 'Ouvrir'"
@@ -110,6 +110,7 @@
                       <!-- TABLE 2 : Colonnes de la vue sélectionnée -->
                       <v-data-table
                         id="choixColonnes-vue"
+                        v-sortable-data-table
                         class="limiteHauteurChoix colonnes mt-1 mb-4 ordonable"
                         :headers="colonnesChoixColonne"
                         :items="colonnesEnCours"
@@ -119,7 +120,6 @@
                         :items-per-page="-1"
                         fixed-header
                         :sort-by="triColonnesChoix"
-                        v-sortable-data-table
                         @sorted="changeOrdre"
                       >
                         <!-- Alerte dans l'entête si aucune colonne n'est sélectionnée -->
@@ -393,7 +393,7 @@
   const desactiverAjout = ref(false)
 
   // Tri visuel (on veut ordre asc)
-  const triColonnesChoix = ref<Array<{ key: string; order?: 'asc' | 'desc' }>>([{ key: 'ordre', order: 'asc' }])
+  const triColonnesChoix = ref<{ key: string; order?: 'asc' | 'desc' }[]>([{ key: 'ordre', order: 'asc' }])
 
   // Règles validation
   const regles = reactive({

package/composants/csqcTable/sortableDataTable.ts

@@ -14,7 +14,7 @@ export const vSortableDataTable: Directive<HTMLElement, EmitSorted> = {
       onEnd: evt => binding.value?.(evt),
     })
 
-      ; (el as any).__csqcSortable = sortable
+    ;(el as any).__csqcSortable = sortable
   },
   beforeUnmount(el) {
     const sortable = (el as any).__csqcSortable as Sortable | undefined