codevdesign 1.0.78 → 2.0.0

package/composants/csqcConfirmation.vue

@@ -1,75 +1,76 @@
-<template>
-  <csqcDialogue
-    ref="modale"
-    :titre="props.titre"
-    :operation-en-cours="operationEnCours"
-    activator="supprimer"
-    :largeur="props.largeur"
-    v-bind="$attrs"
-    @ok="confirmer"
-    @annuler="annuler"
-  >
-    <v-form
-      ref="form"
-      @submit.prevent
-    >
-      <v-row>
-        <v-col
-          cols="12"
-          class="pa-0 ma-0"
-        >
-          <span v-html="texte"></span>
-        </v-col>
-      </v-row>
-    </v-form>
-  </csqcDialogue>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import csqcDialogue from './csqcDialogue.vue'
-
-  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
-  const utilisateurATermine = ref(false)
-  const reponse = ref(false)
-  const texte = ref('')
-  const modeAlerte = ref(false)
-
-  const props = defineProps({
-    operationEnCours: { type: Boolean, default: false },
-    titre: { type: String, default: '' },
-    largeur: { type: String, default: '525px' },
-  })
-
-  const ouvrir = async (message: string, modeAlerteParam: boolean = false) => {
-    texte.value = message
-    modeAlerte.value = modeAlerteParam
-    utilisateurATermine.value = false
-    modale.value?.ouvrir()
-
-    while (!utilisateurATermine.value) {
-      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
-    }
-
-    return reponse.value
-  }
-
-  const confirmer = (): void => {
-    reponse.value = true
-    utilisateurATermine.value = true
-
-    if (modeAlerte.value) fermer()
-  }
-
-  const annuler = (): void => {
-    reponse.value = false
-    utilisateurATermine.value = true
-    fermer()
-  }
-
-  const fermer = (): void => {
-    modale.value?.fermer()
-  }
-
-  defineExpose({ ouvrir, fermer })
-</script>
+<template>
+  <csqcDialogue
+    ref="modale"
+    :titre="props.titre"
+    :operation-en-cours="operationEnCours"
+    activator="supprimer"
+    :largeur="props.largeur"
+    :est-dialogue-alerte="modeAlerte"
+    v-bind="$attrs"
+    @ok="confirmer"
+    @annuler="annuler"
+  >
+    <v-form
+      ref="form"
+      @submit.prevent
+    >
+      <v-row>
+        <v-col
+          cols="12"
+          class="pa-0 ma-0"
+        >
+          <span v-html="texte"></span>
+        </v-col>
+      </v-row>
+    </v-form>
+  </csqcDialogue>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import csqcDialogue from './csqcDialogue.vue'
+
+  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
+  const utilisateurATermine = ref(false)
+  const reponse = ref(false)
+  const texte = ref('')
+  const modeAlerte = ref(false)
+
+  const props = defineProps({
+    operationEnCours: { type: Boolean, default: false },
+    titre: { type: String, default: '' },
+    largeur: { type: String, default: '525px' },
+  })
+
+  const ouvrir = async (message: string, modeAlerteParam: boolean = false) => {
+    texte.value = message
+    modeAlerte.value = modeAlerteParam
+    utilisateurATermine.value = false
+    modale.value?.ouvrir()
+
+    while (!utilisateurATermine.value) {
+      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
+    }
+
+    return reponse.value
+  }
+
+  const confirmer = (): void => {
+    reponse.value = true
+    utilisateurATermine.value = true
+
+    if (modeAlerte.value) fermer()
+  }
+
+  const annuler = (): void => {
+    reponse.value = false
+    utilisateurATermine.value = true
+    fermer()
+  }
+
+  const fermer = (): void => {
+    modale.value?.fermer()
+  }
+
+  defineExpose({ ouvrir, fermer })
+</script>

package/composants/csqcDate.vue

@@ -1,86 +1,88 @@
-<template>
-  <v-date-input
-    :model-value="dateInterne"
-    input-format="yyyy-MM-dd"
-    variant="outlined"
-    prepend-icon=""
-    prepend-inner-icon="$calendar"
-    density="comfortable"
-    v-bind="$attrs"
-    @update:model-value="choixUtilisateur"
-  />
-</template>
-
-<script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { VDateInput } from 'vuetify/labs/VDateInput'
-
-  type Model = string | Date | null
-
-  const props = defineProps<{ modelValue: Model }>()
-
-  const emit = defineEmits<{
-    (e: 'update:modelValue', 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
-
-    // Date -> YYYY-MM-DD (local)
-    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}`
-    }
-
-    // String -> accepte seulement YYYY-MM-DD ISO8601 (optionnellement suivi de l'heure, qui est ignorée)
-    const s = String(v).trim()
-    const m = s.match(
-      /^(?<date>(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2}))(?:T\d{2}:\d{2}:\d{2}(?:\.\d{3})?(?:Z|(?:[-+]\d{2}:\d{2}?))?)?$/,
-    )
-    if (!m) return null
-
-    // Optionnel: validation simple (évite 2026-99-99)
-    const y = Number(m.groups!.year),
-      mo = Number(m.groups!.month),
-      d = Number(m.groups!.day)
-    if (mo < 1 || mo > 12 || d < 1 || d > 31) return null
-    if (mo === 2) {
-      const isLeap = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
-      if (d > (isLeap ? 29 : 28)) return null
-    }
-    if ([4, 6, 9, 11].includes(mo) && d > 30) return null
-
-    return `${m.groups!.date}`
-  }
-
-  // UI: VDateInput stable avec Date|null
-  const dateInterne = computed<Date | null>(() => {
-    const ymd = normalizeToYmd(props.modelValue as any)
-    if (!ymd) return null
-    const [y, m, d] = ymd.split('-').map(Number)
-    return new Date(y, m - 1, d) // local, stable
-  })
-
-  const prevBeforeEmit = ref<string | null>(null)
-
-  const choixUtilisateur = (v: Date | string | null) => {
-    const next = normalizeToYmd(v)
-    const current = normalizeToYmd(props.modelValue as any)
-
-    // rollback: on reçoit l'ancienne valeur (celle qu'on avait avant)
-    if (prevBeforeEmit.value && next === prevBeforeEmit.value && current !== prevBeforeEmit.value) {
-      return
-    }
-
-    if (next === current) return
-
-    prevBeforeEmit.value = current
-    emit('update:modelValue', next)
-    emit('change', next)
-  }
-</script>
+<template>
+  <v-date-input
+    :model-value="dateInterne"
+    bg-color="white"
+    color="primary"
+    input-format="yyyy-MM-dd"
+    variant="outlined"
+    prepend-icon=""
+    prepend-inner-icon="$calendar"
+    density="comfortable"
+    :picker-props="{ color: 'accent' }"
+    v-bind="$attrs"
+    @update:model-value="choixUtilisateur"
+  />
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+
+  type Model = string | Date | null
+
+  const props = defineProps<{ modelValue: Model }>()
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', 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
+
+    // Date -> YYYY-MM-DD (local)
+    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}`
+    }
+
+    // String -> accepte seulement YYYY-MM-DD ISO8601 (optionnellement suivi de l'heure, qui est ignorée)
+    const s = String(v).trim()
+    const m = s.match(
+      /^(?<date>(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2}))(?:T\d{2}:\d{2}:\d{2}(?:\.\d{3})?(?:Z|(?:[-+]\d{2}:\d{2}?))?)?$/,
+    )
+    if (!m) return null
+
+    // Optionnel: validation simple (évite 2026-99-99)
+    const y = Number(m.groups!.year),
+      mo = Number(m.groups!.month),
+      d = Number(m.groups!.day)
+    if (mo < 1 || mo > 12 || d < 1 || d > 31) return null
+    if (mo === 2) {
+      const isLeap = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
+      if (d > (isLeap ? 29 : 28)) return null
+    }
+    if ([4, 6, 9, 11].includes(mo) && d > 30) return null
+
+    return `${m.groups!.date}`
+  }
+
+  // UI: VDateInput stable avec Date|null
+  const dateInterne = computed<Date | null>(() => {
+    const ymd = normalizeToYmd(props.modelValue as any)
+    if (!ymd) return null
+    const [y, m, d] = ymd.split('-').map(Number)
+    return new Date(y, m - 1, d) // local, stable
+  })
+
+  const prevBeforeEmit = ref<string | null>(null)
+
+  const choixUtilisateur = (v: Date | string | null) => {
+    const next = normalizeToYmd(v)
+    const current = normalizeToYmd(props.modelValue as any)
+
+    // rollback: on reçoit l'ancienne valeur (celle qu'on avait avant)
+    if (prevBeforeEmit.value && next === prevBeforeEmit.value && current !== prevBeforeEmit.value) {
+      return
+    }
+
+    if (next === current) return
+
+    prevBeforeEmit.value = current
+    emit('update:modelValue', next)
+    emit('change', next)
+  }
+</script>

package/composants/csqcDialogue.vue

@@ -1,118 +1,120 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    class="pa-0 ma-0"
-    :width="largeur"
-    :fullscreen="display.xs.value"
-    max-width="650"
-    :persistent="props.persistant"
-    v-bind="$attrs"
-    @keydown.esc="!persistant ? annuler : ''"
-    @click:outside="!persistant ? annuler : ''"
-  >
-    <v-card class="pa-0 ma-0 pl-8 pt-8">
-      <!-- Bouton en haut à droite -->
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        class="position-absolute iconeHover"
-        style="top: 5px; right: 5px"
-        @click="annuler"
-      ></v-btn>
-
-      <v-card-title
-        class="pa-0 ma-0 pb-6"
-        style="font-size: 24px; white-space: normal; word-break: break-word"
-      >
-        <slot name="titre"></slot>
-        <div text-h5><span v-html="titre"></span></div>
-      </v-card-title>
-
-      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
-        <v-container>
-          <slot></slot>
-          <slot name="content"></slot>
-        </v-container>
-      </v-card-text>
-      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
-        <slot name="actions"></slot>
-        <v-btn
-          v-if="btnAnnuler"
-          color="primary"
-          :loading="operationEnCours"
-          variant="text"
-          @click="annuler"
-        >
-          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          color="primary"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver"
-          variant="flat"
-          @click="okBouton"
-        >
-          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const display = useDisplay()
-
-  // Déclaration des props
-  const props = defineProps({
-    largeur: { type: String, default: '50vw' },
-    persistant: { type: Boolean, default: true },
-    operationEnCours: { type: Boolean, default: false },
-    btnAnnuler: { type: Boolean, default: true },
-    btnOk: { type: Boolean, default: true },
-    btnAnnulerTexte: { type: String, default: '' },
-    btnOkTexte: { type: String, default: '' },
-    titre: { type: String, default: '' },
-    btnOkDesactiver: { type: Boolean, default: false },
-  })
-
-  // Déclaration des événements émis
-  const emit = defineEmits(['annuler', 'ok'])
-
-  // Gestion de l'état du dialogue
-  const dialog = ref(false)
-
-  // Méthodes pour gérer l'ouverture et la fermeture
-  const ouvrir = () => {
-    dialog.value = true
-  }
-
-  const fermer = () => {
-    dialog.value = false
-  }
-
-  // Gestion des actions des boutons
-  const annuler = () => {
-    emit('annuler')
-    fermer()
-  }
-
-  const okBouton = () => {
-    emit('ok')
-  }
-
-  // permet d'exporter les 2 actions
-  defineExpose({ ouvrir, fermer })
-</script>
-
-<style lang="css" scoped>
-  .v-card__text,
-  .v-card__title {
-    word-break: normal; /* empeche le wrap de couper un mot en XS  */
-  }
-</style>
+<template>
+  <v-dialog
+    v-model="dialog"
+    class="pa-0 ma-0"
+    :width="largeur"
+    :fullscreen="display.xs.value"
+    max-width="650"
+    :persistent="props.persistant"
+    v-bind="$attrs"
+    @keydown.esc="!persistant ? annuler : ''"
+    @click:outside="!persistant ? annuler : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute iconeHover"
+        color="primary"
+        style="right: 5px; top: 5px"
+        @click="annuler"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6 headline"
+        style="font-size: 24px; white-space: normal; word-break: break-word"
+      >
+        <slot name="titre"></slot>
+        <div text-h5><span v-html="titre"></span></div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <v-btn
+          v-if="btnAnnuler"
+          color="primary"
+          :loading="operationEnCours"
+          variant="text"
+          @click="annuler"
+        >
+          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          :color="props.estDialogueAlerte ? 'rouge' : 'primary'"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver"
+          variant="flat"
+          @click="okBouton"
+        >
+          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    largeur: { type: String, default: '50vw' },
+    persistant: { type: Boolean, default: true },
+    operationEnCours: { type: Boolean, default: false },
+    btnAnnuler: { type: Boolean, default: true },
+    btnOk: { type: Boolean, default: true },
+    btnAnnulerTexte: { type: String, default: '' },
+    btnOkTexte: { type: String, default: '' },
+    titre: { type: String, default: '' },
+    btnOkDesactiver: { type: Boolean, default: false },
+    estDialogueAlerte: { type: Boolean, default: false },
+  })
+
+  // Déclaration des événements émis
+  const emit = defineEmits(['annuler', 'ok'])
+
+  // Gestion de l'état du dialogue
+  const dialog = ref(false)
+
+  // Méthodes pour gérer l'ouverture et la fermeture
+  const ouvrir = () => {
+    dialog.value = true
+  }
+
+  const fermer = () => {
+    dialog.value = false
+  }
+
+  // Gestion des actions des boutons
+  const annuler = () => {
+    emit('annuler')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+  }
+
+  // permet d'exporter les 2 actions
+  defineExpose({ ouvrir, fermer })
+</script>
+
+<style lang="css" scoped>
+  .v-card__text,
+  .v-card__title {
+    word-break: normal; /* empeche le wrap de couper un mot en XS  */
+  }
+</style>