codevdesign 1.0.47 → 1.0.49

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>