codevdesign 1.0.77 → 1.0.79

package/composants/csqcEntete.vue

@@ -85,7 +85,7 @@
     </v-row>
 
     <!-- Barre en bas -->
-    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
+    <div style="background-color: #808a9d; bottom: 0; height: 2px; left: 0; position: absolute; right: 0" />
   </v-app-bar>
 </template>
 
@@ -146,21 +146,21 @@
   }
   .titre-texte {
     color: var(--entete-texte, #223654);
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 100%;
   }
   .soustitre-texte {
+    color: var(--entete-texte, #223654);
     display: block;
     font-size: 1rem;
     font-weight: normal;
-    color: var(--entete-texte, #223654);
   }
   .titre-bloc {
     display: inline-block;
-    vertical-align: middle;
     padding-left: 12px;
+    vertical-align: middle;
   }
   /* Couleur de l’icône (retour) + hover */
   .v-icon {
@@ -170,26 +170,26 @@
     filter: brightness(0.85);
   }
   .entete-ligne {
-    display: flex;
     align-items: center;
+    display: flex;
     flex-wrap: wrap;
-    width: 100%;
     gap: 8px;
+    width: 100%;
   }
 
   .entete-gauche {
-    display: flex;
     align-items: center;
-    min-width: 0; /* important pour éviter overflow */
+    display: flex;
     flex: 1;
+    min-width: 0; /* important pour éviter overflow */
   }
 
   .entete-droite {
-    display: flex;
     align-items: center;
+    display: flex;
+    flex-shrink: 0;
     gap: 12px;
     padding-right: 16px;
-    flex-shrink: 0;
   }
 
   @media (max-width: 600px) {
@@ -197,27 +197,27 @@
       width: 100%;
     }
     .entete-droite {
-      width: 100%;
-      padding-right: 8px;
-      padding-left: 0;
       justify-content: flex-end;
+      padding-left: 0;
+      padding-right: 8px;
+      width: 100%;
     }
     .titre {
       font-size: 1.2rem;
     }
     .titre-bloc {
+      align-items: flex-start;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      min-width: 0;
       max-width: 100%;
+      min-width: 0;
       padding-left: 4px;
     }
     .titre-texte {
-      white-space: nowrap;
+      max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 100%;
+      white-space: nowrap;
     }
     :deep(.v-col) {
       padding-left: 8px !important;

package/composants/csqcImportCSV.vue

@@ -90,7 +90,7 @@
 
           emit('import', data)
         } catch (error) {
-          emit('import-erreur', erreurTexte || t('csqc.csqcImportCSV.erreur.lectureFichier'))
+          emit('import-erreur', erreurTexte.value || t('csqc.csqcImportCSV.erreur.lectureFichier'))
         }
       }
 
@@ -100,7 +100,7 @@
 
       reader.readAsText(file)
     } else {
-      const message = erreurTexte || t('csqc.csqcImportCSV.erreur.erreur')
+      const message = erreurTexte.value || t('csqc.csqcImportCSV.erreur.erreur')
       emit('import-erreur', message)
       csvFile.value = null
     }

package/composants/csqcModaleSaisie.vue

@@ -3,8 +3,8 @@
     ref="modale"
     :titre="titre"
     activator="supprimer"
-    v-bind="$attrs"
     :largeur="largeur"
+    v-bind="$attrs"
     @ok="confirmer"
     @annuler="annuler"
   >

package/composants/csqcRecherche.vue

@@ -190,25 +190,25 @@
   }
 
   .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;
   }
 </style>

package/composants/csqcRechercheUtilisateur.vue

@@ -4,7 +4,6 @@
       v-model="selection"
       v-model:search="search"
       :items="items"
-      v-bind="$attrs"
       :loading="chargementInterne"
       :density="($attrs.density as any) ?? 'compact'"
       :hide-no-data="!doitAfficherAucunResultat"
@@ -16,6 +15,7 @@
       :autofocus="($attrs.autofocus as any) ?? true"
       auto-select-first
       :variant="($attrs.variant as any) ?? 'outlined'"
+      v-bind="$attrs"
     />
   </div>
 </template>

package/composants/csqcSnackbar.vue

@@ -7,12 +7,12 @@
   -->
   <v-snackbar
     :model-value="snackbar"
-    v-bind="attrsAffiches"
     :timeout="-1"
     :style="props.styleCss"
     :color="colorAffiche"
     :location="locationAffiche"
     multi-line
+    v-bind="attrsAffiches"
     @update:model-value="
       v => {
         if (!v) fermer()

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