codevdesign 1.0.51 → 1.0.53

package/composants/csqcDate.vue

@@ -1,58 +1,79 @@
 <template>
   <v-date-input
-    v-model="dateValeur"
+    v-model="dateInterne"
     v-bind="$attrs"
     input-format="yyyy-MM-dd"
     variant="outlined"
     prepend-icon=""
     prepend-inner-icon="$calendar"
     density="comfortable"
-    @update:model-value="formatDate"
-  ></v-date-input>
+    @update:model-value="choixUtilisateur"
+  />
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
+  import { computed } from 'vue'
   import { VDateInput } from 'vuetify/labs/VDateInput'
 
-  const props = withDefaults(
-    defineProps<{
-      modelValue: string | Date | null
-    }>(),
-    {},
-  )
-
-  const emit = defineEmits(['update:modelValue'])
-  const dateValeur = ref<Date | string | null>(props.modelValue)
-
-  const formatDate = (date: Date | string | null) => {
-    if (date == null) {
-      dateValeur.value = null
-      emit('update:modelValue', null)
-      return
-    }
+  type Model = string | Date | null
+
+  const props = defineProps<{ modelValue: Model }>()
+
+  const emit = defineEmits<{
+    (e: 'update:model-value', v: string | null): void
+    (e: 'change', v: string | null): void
+  }>()
+
+  // Normalisation, TOUJOURS "YYYY-MM-DD" ou null
+  const normalizeToYmd = (v: Date | string | null | undefined): string | null => {
+    if (v == null || v === '') return null
 
-    if (typeof date === 'string') {
-      dateValeur.value = date
-      emit('update:modelValue', date)
-      return
+    if (v instanceof Date) {
+      if (isNaN(v.getTime())) return null
+      const yyyy = v.getFullYear()
+      const mm = String(v.getMonth() + 1).padStart(2, '0')
+      const dd = String(v.getDate()).padStart(2, '0')
+      return `${yyyy}-${mm}-${dd}`
     }
 
-    const d = new Date(date)
+    const s = String(v).trim()
+
+    // si ça commence par YYYY-MM-DD, on prend les 10 premiers chars
+    const m = s.match(/^(\d{4}-\d{2}-\d{2})/)
+    if (m) return m[1]
+
+    // Sinon, on tente un fallback
+    const d = new Date(s)
+    if (isNaN(d.getTime())) return null
     const yyyy = d.getFullYear()
     const mm = String(d.getMonth() + 1).padStart(2, '0')
     const dd = String(d.getDate()).padStart(2, '0')
-    const formatte = `${yyyy}-${mm}-${dd}`
-
-    dateValeur.value = formatte
-    emit('update:modelValue', formatte)
+    return `${yyyy}-${mm}-${dd}`
   }
 
-  // Synchronise les props externes avec l'état interne
-  watch(
-    () => props.modelValue,
-    nouvelle => {
-      dateValeur.value = nouvelle
+  // UI: VDateInput stable avec Date|null
+  const dateInterne = computed<Date | null>({
+    get() {
+      const ymd = normalizeToYmd(props.modelValue as any)
+      if (!ymd) return null
+
+      // Construire une Date locale sans décalage timezone (évite UTC shift)
+      const [y, m, d] = ymd.split('-').map(Number)
+      return new Date(y, m - 1, d)
+    },
+    set() {
+      // rien: on émet seulement dans choixUtilisateur
     },
-  )
+  })
+
+  const choixUtilisateur = (v: Date | string | null) => {
+    const next = normalizeToYmd(v)
+    const current = normalizeToYmd(props.modelValue as any)
+
+    // Bloque la 2e émission au blur (même si type diffère Date/string)
+    if (next === current) return
+
+    emit('update:model-value', next)
+    emit('change', next)
+  }
 </script>

package/composants/csqcSwitch.vue

@@ -1,193 +1,220 @@
-<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>
+<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 }"
+      >
+        <div class="label-ligne">
+          <div class="label-gauche">
+            <slot name="label">
+              {{ texte }}
+            </slot>
+          </div>
+
+          <div
+            v-if="$slots.valeurDroite"
+            class="label-droite"
+          >
+            <slot name="valeurDroite" />
+          </div>
+        </div>
+      </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: 700;
+    line-height: 1.2;
+  }
+
+  .label-ligne {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .label-gauche {
+    min-width: 0;
+  }
+
+  .label-droite {
+    font-weight: 400; /* pas en gras */
+    opacity: 0.75;
+    white-space: nowrap; /* reste sur la même ligne */
+  }
+
+  .label-cliquable {
+    cursor: pointer;
+  }
+
+  .details {
+    margin-top: 4px;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",