codevdesign 1.0.46 → 1.0.47

package/composants/csqcSnackbar.vue

@@ -1,88 +1,207 @@
-<template>
-  <v-snackbar
-    v-model="snackbar"
-    v-bind="$attrs"
-    :timeout="tempsFinal"
-    :style="styleCss"
-    color="success"
-    multi-line
-    @update:model-value="fermer"
-  >
-    <template v-if="props.titre || props.message">
-      <b style="font-size: 12pt">{{ props.titre }}</b>
-      <br v-if="props.titre" />
-      <b>{{ props.message }}</b>
-    </template>
-
-    <template #actions>
-      <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
-      <v-icon
-        v-if="props.btnFermer || props.temps === -1"
-        color="white"
-        style="cursor: pointer"
-        @click.stop="fermer"
-      >
-        mdi-close
-      </v-icon>
-    </template>
-  </v-snackbar>
-</template>
-<script lang="ts" setup>
-  import { computed, ref, watch, type PropType } from 'vue'
-
-  // Définir les props avec les types
-  const props = defineProps({
-    styleCss: {
-      type: String,
-      required: false,
-    },
-    temps: {
-      type: Number,
-      required: false,
-      default: 4000,
-      validator(value: number) {
-        // Si la valeur est inférieure à -1, on la remplace par -1
-        if (value < -1) {
-          return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
-        }
-        // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
-        return value <= Number.MAX_VALUE
-      },
-    },
-    message: {
-      type: String,
-      required: true,
-    },
-    titre: {
-      type: String,
-      required: false,
-    },
-    btnFermer: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  })
-  const emit = defineEmits(['fermer:snackbar'])
-  const fermer = (): void => {
-    snackbar.value = false
-    emit('fermer:snackbar')
-  }
-  // Déclarer l'état réactif pour snackbar
-  const snackbar = ref(false)
-  const message = computed(() => props.message)
-  const tempsFinal = computed(() => {
-    if (props.temps < -1) {
-      return -1 // Si la valeur est inférieure à -1, on la met à -1
-    }
-    if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
-
-    return props.temps // Sinon, on retourne la valeur de la prop
-  })
-
-  watch(message, nouveau => {
-    if (nouveau != null && nouveau !== '') {
-      snackbar.value = true
-    }
-  })
-</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"
+    v-bind="attrsAffiches"
+    :timeout="-1"
+    :style="props.styleCss"
+    :color="colorAffiche"
+    :location="locationAffiche"
+    multi-line
+    @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>