codevdesign 2.0.18 → 2.0.20

package/composants/csqcEntete.vue

@@ -1,236 +1,236 @@
-<template>
-  <v-app-bar
-    :color="barreCouleur"
-    class="px-0 mx-0"
-    :style="{
-      position: 'sticky',
-      width: '100%',
-      // variables CSS pour les couleurs dynamiques
-      '--entete-texte': texteCouleur,
-      '--entete-icone': iconeCouleur,
-    }"
-    height="auto"
-  >
-    <v-row
-      class="pt-2"
-      @resize="controlAffichage"
-    >
-      <v-col
-        :cols="titreCol"
-        class="pr-0 mr-0 pl-5"
-      >
-        <v-toolbar-title class="titre">
-          <div class="entete-ligne">
-            <!-- GAUCHE -->
-            <div class="entete-gauche">
-              <!-- Barre de retour -->
-              <slot name="retour">
-                <v-icon
-                  v-if="retour"
-                  size="large"
-                  start
-                  :color="iconeCouleur"
-                  icon="mdi-arrow-left-thin"
-                  @click="retournerMenu"
-                />
-              </slot>
-
-              <div class="titre-bloc">
-                <slot name="titre">
-                  <span class="pl-3 titre-texte">{{ props.titre }}</span>
-                </slot>
-
-                <slot name="etat">
-                  <span
-                    v-if="monEtat?.afficher"
-                    class="pl-10"
-                  >
-                    <v-btn
-                      size="small"
-                      :color="monEtat.couleur"
-                      variant="tonal"
-                      density="default"
-                      min-width="100px"
-                      :style="'font-size:.75rem;letter-spacing: .0892857em;    text-transform: uppercase;  font-weight: 500;  line-height: normal;'"
-                    >
-                      {{ monEtat.texte }}
-                    </v-btn>
-                  </span>
-                </slot>
-
-                <slot name="etatSecondaire">
-                  <span
-                    v-if="monEtatSecondaire?.afficher"
-                    class="pl-3"
-                  >
-                    <v-btn
-                      size="small"
-                      :color="monEtatSecondaire.couleur"
-                      variant="tonal"
-                      density="default"
-                      min-width="100px"
-                      :style="'font-size:.75rem;letter-spacing: .0892857em;    text-transform: uppercase;  font-weight: 500;  line-height: normal;'"
-                    >
-                      {{ monEtatSecondaire.texte }}
-                    </v-btn>
-                  </span>
-                </slot>
-
-                <slot name="soustitre">
-                  <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
-                </slot>
-              </div>
-            </div>
-
-            <!-- DROITE -->
-            <div class="entete-droite mr-1">
-              <slot name="droite" />
-            </div>
-          </div>
-        </v-toolbar-title>
-      </v-col>
-    </v-row>
-
-    <!-- Barre en bas -->
-    <div style="background-color: #808a9d; bottom: 0; height: 2px; left: 0; position: absolute; right: 0" />
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { ref, computed } from 'vue'
-
-  interface EnteteEtat {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  interface EnteteEtatSecondaire {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  const router = useRouter()
-
-  const props = defineProps<{
-    titre: string
-    soustitre?: string
-    retour?: string
-    etat?: EnteteEtat
-    couleur?: string // couleur de la barre (Vuetify color/hex)
-    couleurTexte?: string
-    couleurIcone?: string
-    etatSecondaire?: EnteteEtatSecondaire
-  }>()
-
-  const titreCol = ref(12)
-
-  // Fallbacks (tes valeurs actuelles)
-  const barreCouleur = computed(() => props.couleur ?? 'white')
-  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
-  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
-
-  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
-  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
-    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
-  )
-
-  function retournerMenu() {
-    if (props.retour) router.push({ name: props.retour })
-  }
-  function controlAffichage() {
-    /* logique resize */
-  }
-</script>
-
-<style scoped>
-  .titre {
-    font-size: 1.85rem;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
-  .titre-texte {
-    color: var(--entete-texte, #223654);
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .soustitre-texte {
-    color: var(--entete-texte, #223654);
-    display: block;
-    font-size: 1rem;
-    font-weight: normal;
-  }
-  .titre-bloc {
-    display: inline-block;
-    padding-left: 12px;
-    vertical-align: middle;
-  }
-  /* Couleur de l’icône (retour) + hover */
-  .v-icon {
-    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
-  }
-  .v-icon:hover {
-    filter: brightness(0.85);
-  }
-  .entete-ligne {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .entete-gauche {
-    align-items: center;
-    display: flex;
-    flex: 1;
-    min-width: 0; /* important pour éviter overflow */
-  }
-
-  .entete-droite {
-    align-items: center;
-    display: flex;
-    flex-shrink: 0;
-    gap: 12px;
-    padding-right: 16px;
-  }
-
-  @media (max-width: 600px) {
-    .entete-gauche {
-      width: 100%;
-    }
-    .entete-droite {
-      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;
-      max-width: 100%;
-      min-width: 0;
-      padding-left: 4px;
-    }
-    .titre-texte {
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    :deep(.v-col) {
-      padding-left: 8px !important;
-    }
-    :deep(.v-toolbar-title__placeholder) {
-      padding-inline-start: 0 !important;
-    }
-  }
-</style>
+<template>
+  <v-app-bar
+    :color="barreCouleur"
+    class="px-0 mx-0"
+    :style="{
+      position: 'sticky',
+      width: '100%',
+      // variables CSS pour les couleurs dynamiques
+      '--entete-texte': texteCouleur,
+      '--entete-icone': iconeCouleur,
+    }"
+    height="auto"
+  >
+    <v-row
+      class="pt-2"
+      @resize="controlAffichage"
+    >
+      <v-col
+        :cols="titreCol"
+        class="pr-0 mr-0 pl-5"
+      >
+        <v-toolbar-title class="titre">
+          <div class="entete-ligne">
+            <!-- GAUCHE -->
+            <div class="entete-gauche">
+              <!-- Barre de retour -->
+              <slot name="retour">
+                <v-icon
+                  v-if="retour"
+                  size="large"
+                  start
+                  :color="iconeCouleur"
+                  icon="mdi-arrow-left-thin"
+                  @click="retournerMenu"
+                />
+              </slot>
+
+              <div class="titre-bloc">
+                <slot name="titre">
+                  <span class="pl-3 titre-texte">{{ props.titre }}</span>
+                </slot>
+
+                <slot name="etat">
+                  <span
+                    v-if="monEtat?.afficher"
+                    class="pl-10"
+                  >
+                    <v-btn
+                      size="small"
+                      :color="monEtat.couleur"
+                      variant="tonal"
+                      density="default"
+                      min-width="100px"
+                      :style="'font-size:.75rem;letter-spacing: .0892857em;    text-transform: uppercase;  font-weight: 500;  line-height: normal;'"
+                    >
+                      {{ monEtat.texte }}
+                    </v-btn>
+                  </span>
+                </slot>
+
+                <slot name="etatSecondaire">
+                  <span
+                    v-if="monEtatSecondaire?.afficher"
+                    class="pl-3"
+                  >
+                    <v-btn
+                      size="small"
+                      :color="monEtatSecondaire.couleur"
+                      variant="tonal"
+                      density="default"
+                      min-width="100px"
+                      :style="'font-size:.75rem;letter-spacing: .0892857em;    text-transform: uppercase;  font-weight: 500;  line-height: normal;'"
+                    >
+                      {{ monEtatSecondaire.texte }}
+                    </v-btn>
+                  </span>
+                </slot>
+
+                <slot name="soustitre">
+                  <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
+                </slot>
+              </div>
+            </div>
+
+            <!-- DROITE -->
+            <div class="entete-droite mr-1">
+              <slot name="droite" />
+            </div>
+          </div>
+        </v-toolbar-title>
+      </v-col>
+    </v-row>
+
+    <!-- Barre en bas -->
+    <div style="background-color: #808a9d; bottom: 0; height: 2px; left: 0; position: absolute; right: 0" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref, computed } from 'vue'
+
+  interface EnteteEtat {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  interface EnteteEtatSecondaire {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  const router = useRouter()
+
+  const props = defineProps<{
+    titre: string
+    soustitre?: string
+    retour?: string
+    etat?: EnteteEtat
+    couleur?: string // couleur de la barre (Vuetify color/hex)
+    couleurTexte?: string
+    couleurIcone?: string
+    etatSecondaire?: EnteteEtatSecondaire
+  }>()
+
+  const titreCol = ref(12)
+
+  // Fallbacks (tes valeurs actuelles)
+  const barreCouleur = computed(() => props.couleur ?? 'white')
+  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
+  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
+
+  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
+  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
+    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
+  )
+
+  function retournerMenu() {
+    if (props.retour) router.push({ name: props.retour })
+  }
+  function controlAffichage() {
+    /* logique resize */
+  }
+</script>
+
+<style scoped>
+  .titre {
+    font-size: 1.85rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .titre-texte {
+    color: var(--entete-texte, #223654);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .soustitre-texte {
+    color: var(--entete-texte, #223654);
+    display: block;
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .titre-bloc {
+    display: inline-block;
+    padding-left: 12px;
+    vertical-align: middle;
+  }
+  /* Couleur de l’icône (retour) + hover */
+  .v-icon {
+    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
+  }
+  .v-icon:hover {
+    filter: brightness(0.85);
+  }
+  .entete-ligne {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .entete-gauche {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    min-width: 0; /* important pour éviter overflow */
+  }
+
+  .entete-droite {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: 12px;
+    padding-right: 16px;
+  }
+
+  @media (max-width: 600px) {
+    .entete-gauche {
+      width: 100%;
+    }
+    .entete-droite {
+      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;
+      max-width: 100%;
+      min-width: 0;
+      padding-left: 4px;
+    }
+    .titre-texte {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    :deep(.v-col) {
+      padding-left: 8px !important;
+    }
+    :deep(.v-toolbar-title__placeholder) {
+      padding-inline-start: 0 !important;
+    }
+  }
+</style>