codevdesign 1.0.46 → 1.0.48

package/composants/csqcOptionSwitch.vue

@@ -1,102 +1,193 @@
-<template>
-  <v-row
-    dense
-    class="align-center"
-  >
-    <!-- Texte + détails -->
-    <v-col
-      cols="10"
-      xl="11"
-      class="py-0"
-    >
-      <component
-        :is="labelCliquable ? 'label' : 'div'"
-        :for="labelCliquable ? switchId : undefined"
-        class="labelSwitchSiSwitchApres"
-        :class="{ 'label-cliquable': labelCliquable && !desactiver }"
-      >
-        <slot name="label">
-          {{ texte }}
-        </slot>
-      </component>
-
-      <div
-        v-if="afficherDetails"
-        class="details"
-      >
-        <slot name="details">
-          <span v-html="texteDetaille"></span>
-        </slot>
-      </div>
-    </v-col>
-
-    <!-- Switch -->
-    <v-col
-      cols="2"
-      xl="1"
-      class="d-flex align-center justify-end py-0"
-    >
-      <v-switch
-        :id="switchId"
-        v-model="maValeur"
-        class="switch-compact"
-        :disabled="desactiver"
-        :density="($attrs.density as any) ?? 'compact'"
-        :inset="($attrs.inset as any) ?? true"
-        v-bind="$attrs"
-        hide-details
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-  import { computed, useSlots } from 'vue'
-
-  const props = defineProps({
-    valeurInverse: { type: Boolean, default: false },
-    desactiver: { type: Boolean, default: false },
-    modelValue: { type: Boolean, required: true },
-    texte: { type: String, required: true },
-    texteDetaille: { type: String, default: '' },
-    labelCliquable: { type: Boolean, default: true },
-  })
-
-  const emit = defineEmits(['update:modelValue'])
-  const slots = useSlots()
-
-  const maValeur = computed<boolean>({
-    get: () => (props.valeurInverse ? !props.modelValue : props.modelValue),
-    set: v => emit('update:modelValue', props.valeurInverse ? !v : v),
-  })
-
-  const afficherDetails = computed(() => {
-    const slotExiste = !!slots.details?.().length
-    return slotExiste || props.texteDetaille.trim().length > 0
-  })
-
-  const switchId = `sw_${Math.random().toString(36).slice(2)}`
-</script>
-
-<style scoped>
-  .labelSwitchSiSwitchApres {
-    font-weight: bold;
-    line-height: 1.2;
-  }
-
-  .label-cliquable {
-    cursor: pointer;
-  }
-
-  .details {
-    margin-top: 4px;
-  }
-
-  /* compact switch */
-  :deep(.switch-compact.v-input) {
-    margin: 0;
-  }
-  :deep(.switch-compact .v-selection-control) {
-    margin: 0;
-  }
-</style>
+<template>
+  <v-row
+    dense
+    class="align-center"
+  >
+    <!-- Texte + détails -->
+    <v-col
+      cols="10"
+      xl="11"
+      class="py-0"
+    >
+      <component
+        :is="labelCliquable ? 'label' : 'div'"
+        :for="labelCliquable ? switchId : undefined"
+        class="labelSwitchSiSwitchApres"
+        :class="{ 'label-cliquable': labelCliquable && !desactiver }"
+      >
+        <slot name="label">
+          {{ texte }}
+        </slot>
+      </component>
+
+      <div
+        v-if="afficherDetails"
+        class="details"
+      >
+        <slot name="details">
+          <span v-html="texteDetaille"></span>
+        </slot>
+      </div>
+    </v-col>
+
+    <!-- Switch -->
+    <v-col
+      cols="2"
+      xl="1"
+      class="d-flex align-center justify-end py-0"
+    >
+      <span class="d-inline-flex">
+        <v-switch
+          :id="switchId"
+          class="switch-compact switch-tristate"
+          :class="{
+            'is-null': maValeur === null,
+            'is-true': maValeur === true,
+            'is-false': maValeur === false,
+          }"
+          :disabled="desactiver"
+          hide-details
+          v-bind="$attrs"
+          :model-value="switchChecked"
+          :indeterminate="isIndeterminate"
+          indeterminate-icon="mdi-minus"
+          @click.prevent="onToggle"
+          @keydown.enter.prevent="onToggle"
+          @keydown.space.prevent="onToggle"
+        />
+
+        <v-tooltip
+          v-if="maValeur === null"
+          activator="parent"
+        >
+        {{ $t("csqc.csqcOptionSwitch.indeterminee") }}
+        </v-tooltip>
+      </span>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+  import { computed, useSlots } from 'vue'
+
+  type TriBool = boolean | null
+
+  const props = defineProps({
+    valeurInverse: { type: Boolean, default: false },
+    desactiver: { type: Boolean, default: false },
+    modelValue: { type: [Boolean, null] as unknown as () => TriBool, default: false },
+    autoriserNull: { type: Boolean, default: false },
+    texte: { type: String, required: true },
+    texteDetaille: { type: String, default: '' },
+    labelCliquable: { type: Boolean, default: true },
+  })
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', v: TriBool): void
+  }>()
+  const isIndeterminate = computed(() => maValeur.value === null)
+
+
+  const slots = useSlots()
+
+  /**
+   * Valeur "logique" du composant (après inversion).
+   * Peut être true/false/null si allowNull=true.
+   */
+  const maValeur = computed<TriBool>({
+    get: () => (props.valeurInverse ? inverseTri(props.modelValue) : props.modelValue),
+    set: v => emit('update:modelValue', props.valeurInverse ? inverseTri(v) : v),
+  })
+
+  function inverseTri(v: TriBool): TriBool {
+    if (v === null) return null
+    return !v
+  }
+
+  /**
+   * v-switch attend un bool pour afficher ON/OFF.
+   * - null => on affiche OFF (false) visuellement
+   */
+  const switchChecked = computed(() => maValeur.value === true)
+
+  function onToggle() {
+    if (props.desactiver) return
+
+    // Mode tri-state
+    if (props.autoriserNull) {
+      // cycle: null -> true -> false -> null
+      const cur = maValeur.value
+      const next: TriBool = cur === null ? true : cur === true ? false : null
+      maValeur.value = next
+      return
+    }
+
+    // Mode classique (ne change rien vs avant)
+    maValeur.value = !switchChecked.value
+  }
+
+  const afficherDetails = computed(() => {
+    const slotExiste = !!slots.details?.().length
+    return slotExiste || props.texteDetaille.trim().length > 0
+  })
+
+  const switchId = `sw_${Math.random().toString(36).slice(2)}`
+</script>
+
+<style scoped>
+  /* OFF (false) */
+  :deep(.switch-tristate.is-false .v-switch__track) {
+    opacity: 0.22 !important;
+  }
+  :deep(.switch-tristate.is-false .v-switch__thumb) {
+    opacity: 0.65 !important;
+  }
+
+  /* NULL (centre + très distinct) */
+  :deep(.switch-tristate.is-null .v-switch__track) {
+    opacity: 1 !important;
+    background:
+      repeating-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.22),
+        rgba(255, 255, 255, 0.22) 6px,
+        rgba(255, 255, 255, 0.05) 6px,
+        rgba(255, 255, 255, 0.05) 12px
+      ),
+      rgb(var(--v-theme-warning)) !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;
+  }
+
+  /* Icône minus visible sur fond blanc */
+  :deep(.switch-tristate.is-null .v-selection-control__input-icon) {
+    color: rgb(var(--v-theme-warning)) !important;
+  }
+
+  /* Transition */
+  :deep(.switch-tristate .v-switch__thumb) {
+    transition:
+      transform 0.18s ease,
+      background 0.18s ease,
+      box-shadow 0.18s ease;
+  }
+  .labelSwitchSiSwitchApres {
+    font-weight: bold;
+    line-height: 1.2;
+  }
+
+  .label-cliquable {
+    cursor: pointer;
+  }
+
+  .details {
+    margin-top: 4px;
+  }
+</style>

package/composants/csqcSnackbar.vue

@@ -1,23 +1,34 @@
 <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
-    v-model="snackbar"
-    v-bind="$attrs"
-    :timeout="tempsFinal"
-    :style="styleCss"
-    color="success"
+    :model-value="snackbar"
+    v-bind="attrsAffiches"
+    :timeout="-1"
+    :style="props.styleCss"
+    :color="colorAffiche"
+    :location="locationAffiche"
     multi-line
-    @update:model-value="fermer"
+    @update:model-value="
+      v => {
+        if (!v) 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 v-if="titreAffiche || messageAffiche">
+      <b style="font-size: 12pt">{{ titreAffiche }}</b>
+      <br v-if="titreAffiche" />
+      <b>{{ messageAffiche }}</b>
     </template>
 
     <template #actions>
-      <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
+      <!-- Toujours afficher la fermeture si timeout = -1 -->
       <v-icon
-        v-if="props.btnFermer || props.temps === -1"
+        v-if="props.btnFermer || timeoutAffiche === -1"
         color="white"
         style="cursor: pointer"
         @click.stop="fermer"
@@ -27,62 +38,170 @@
     </template>
   </v-snackbar>
 </template>
-<script lang="ts" setup>
-  import { computed, ref, watch, type PropType } from 'vue'
 
-  // Définir les props avec les types
+<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,
-    },
-    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,
-    },
+    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'])
-  const fermer = (): void => {
-    snackbar.value = false
-    emit('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
   }
-  // Déclarer l'état réactif pour snackbar
+
+  const file = ref<ItemSnack[]>([])
+  const enCours = ref<ItemSnack | null>(null)
+
+  /**
+   * ============================================================================
+   * État UI
+   * ============================================================================
+   */
   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
+  /**
+   * ============================================================================
+   * 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
   })
 
-  watch(message, nouveau => {
-    if (nouveau != null && nouveau !== '') {
-      snackbar.value = true
+  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>