codevdesign 0.0.48 → 0.0.50

package/composants/csqcConfirmation.vue

@@ -1,74 +1,74 @@
-<template>
-  <csqcDialogue
-    :titre="props.titre"
-    ref="modale"
-    :operationEnCours="operationEnCours"
-    activator="supprimer"
-    :largeur="props.largeur"
-    @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
+    :titre="props.titre"
+    ref="modale"
+    :operationEnCours="operationEnCours"
+    activator="supprimer"
+    :largeur="props.largeur"
+    @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/csqcDialogue.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog
-    class="pa-0 ma-0"
     v-model="dialog"
+    class="pa-0 ma-0"
     :width="largeur"
     :fullscreen="display.xs.value"
     max-width="650"
@@ -24,7 +24,7 @@
         style="font-size: 24px; white-space: normal; word-break: break-word"
       >
         <slot name="titre"></slot>
-        <div class="headline"><span v-html="titre"></span></div>
+        <div text-h5><span v-html="titre"></span></div>
       </v-card-title>
 
       <v-card-text class="pa-0 ma-0 pb-6 pr-6">
@@ -49,11 +49,10 @@
           v-if="btnOk"
           class="Gouttiere"
           color="primary"
-          variant="flat"
           :loading="operationEnCours"
           :disabled="btnOkDesactiver"
+          variant="flat"
           @click="okBouton"
-          outlined
         >
           {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
         </v-btn>

package/composants/csqcEntete.vue

@@ -1,127 +1,127 @@
-<template>
-  <v-app-bar
-    color="white"
-    class="px-0 mx-0"
-    :style="{ position: 'sticky' }"
-    height="82px"
-  >
-    <v-row
-      class="pt-2"
-      @resize="controlAffichage"
-    >
-      <v-col
-        :cols="titreCol"
-        class="pr-0 mr-0 pl-5"
-      >
-        <v-toolbar-title class="titre">
-          <!-- Barre de retour -->
-          <slot name="retour">
-            <v-icon
-              v-if="retour"
-              size="large"
-              start
-              color="grisMoyen"
-              icon="mdi-arrow-left-thin"
-              @click="retournerMenu"
-          /></slot>
-
-          <div class="titre-bloc">
-            <!-- Titre -->
-            <slot name="titre"
-              ><span class="pl-3"> {{ props.titre }}</span></slot
-            >
-
-            <!-- État -->
-            <slot name="etat">
-              <span
-                v-if="monEtat?.afficher"
-                class="pl-10"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtat.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtat.texte }}
-                </v-btn>
-              </span></slot
-            >
-
-            <!-- Sous-titre -->
-            <slot name="soustitre"
-              ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
-            >
-          </div>
-        </v-toolbar-title>
-      </v-col>
-    </v-row>
-    <!-- Barre en bas -->
-    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { ref, computed } from 'vue'
-
-  // Déclaration de l'interface
-  interface EnteteEtat {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  const router = useRouter()
-
-  const props = defineProps<{
-    titre: string
-    soustitre?: string
-    retour?: string
-    etat?: EnteteEtat
-  }>()
-
-  const titreCol = ref(12)
-
-  // État calculé basé sur la prop, avec fallback
-  const monEtat = computed<EnteteEtat>(() => {
-    return (
-      props.etat ?? {
-        afficher: false,
-        couleur: 'primary',
-        texte: 'test',
-      }
-    )
-  })
-
-  function retournerMenu() {
-    if (props.retour) {
-      router.push({ name: props.retour })
-    }
-  }
-
-  function controlAffichage() {
-    // logique à l’événement de redimensionnement
-  }
-</script>
-<style lang="css" scoped>
-  .titre {
-    font-size: 1.85rem;
-    color: #223654;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
-  .soustitre {
-    display: block;
-    font-size: 1rem;
-    color: #223654;
-    font-weight: normal;
-  }
-  .titre-bloc {
-    display: inline-block;
-    vertical-align: middle;
-    padding-left: 12px;
-  }
-  .v-icon:hover {
-    color: #095797 !important;
-  }
-</style>
+<template>
+  <v-app-bar
+    color="white"
+    class="px-0 mx-0"
+    :style="{ position: 'sticky' }"
+    height="82px"
+  >
+    <v-row
+      class="pt-2"
+      @resize="controlAffichage"
+    >
+      <v-col
+        :cols="titreCol"
+        class="pr-0 mr-0 pl-5"
+      >
+        <v-toolbar-title class="titre">
+          <!-- Barre de retour -->
+          <slot name="retour">
+            <v-icon
+              v-if="retour"
+              size="large"
+              start
+              color="grisMoyen"
+              icon="mdi-arrow-left-thin"
+              @click="retournerMenu"
+          /></slot>
+
+          <div class="titre-bloc">
+            <!-- Titre -->
+            <slot name="titre"
+              ><span class="pl-3"> {{ props.titre }}</span></slot
+            >
+
+            <!-- État -->
+            <slot name="etat">
+              <span
+                v-if="monEtat?.afficher"
+                class="pl-10"
+              >
+                <v-btn
+                  size="small"
+                  :color="monEtat.couleur"
+                  variant="tonal"
+                >
+                  {{ monEtat.texte }}
+                </v-btn>
+              </span></slot
+            >
+
+            <!-- Sous-titre -->
+            <slot name="soustitre"
+              ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
+            >
+          </div>
+        </v-toolbar-title>
+      </v-col>
+    </v-row>
+    <!-- Barre en bas -->
+    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref, computed } from 'vue'
+
+  // Déclaration de l'interface
+  interface EnteteEtat {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  const router = useRouter()
+
+  const props = defineProps<{
+    titre: string
+    soustitre?: string
+    retour?: string
+    etat?: EnteteEtat
+  }>()
+
+  const titreCol = ref(12)
+
+  // État calculé basé sur la prop, avec fallback
+  const monEtat = computed<EnteteEtat>(() => {
+    return (
+      props.etat ?? {
+        afficher: false,
+        couleur: 'primary',
+        texte: 'test',
+      }
+    )
+  })
+
+  function retournerMenu() {
+    if (props.retour) {
+      router.push({ name: props.retour })
+    }
+  }
+
+  function controlAffichage() {
+    // logique à l’événement de redimensionnement
+  }
+</script>
+<style lang="css" scoped>
+  .titre {
+    font-size: 1.85rem;
+    color: #223654;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .soustitre {
+    display: block;
+    font-size: 1rem;
+    color: #223654;
+    font-weight: normal;
+  }
+  .titre-bloc {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 12px;
+  }
+  .v-icon:hover {
+    color: #095797 !important;
+  }
+</style>

package/composants/csqcOptionSwitch.vue

@@ -1,124 +1,124 @@
-<template>
-  <div>
-    <v-row dense>
-      <v-col
-        cols="9"
-        md="8"
-        lg="6"
-        class="d-flex align-end"
-      >
-        <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
-      </v-col>
-      <v-col
-        cols="2"
-        class="d-flex align-end justify-end"
-      >
-        <v-switch
-          v-model="maValeur"
-          :disabled="desactiver"
-          :density="densite"
-          :inset="inset"
-          @change="sauvegarder"
-          hide-details
-        />
-      </v-col>
-    </v-row>
-    <v-row dense>
-      <v-col
-        cols="9"
-        md="8"
-      >
-        <span v-html="texteDetaille"></span>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, watch, onMounted, type PropType } from 'vue'
-
-  // Définition des props
-  const props = defineProps({
-    valeurInverse: {
-      type: Boolean,
-      default: false,
-    },
-    desactiver: {
-      type: Boolean,
-      default: false,
-    },
-    inset: {
-      type: Boolean,
-      default: true,
-    },
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    texte: {
-      type: String,
-      required: true,
-    },
-    texteDetaille: {
-      type: String,
-      required: true,
-    },
-    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'compact' },
-  })
-
-  // Définition de l'événement
-  const emit = defineEmits(['update:modelValue'])
-
-  // Référence pour la valeur interne
-  const maValeur = ref<boolean>(false)
-
-  // Montée du composant
-  onMounted(() => {
-    if (props.valeurInverse) {
-      maValeur.value = !props.modelValue
-    } else {
-      maValeur.value = props.modelValue
-    }
-  })
-
-  // Watcher pour suivre les changements de la prop 'value'
-  watch(
-    () => props.modelValue,
-    newValue => {
-      if (props.valeurInverse) {
-        maValeur.value = !newValue
-      } else {
-        maValeur.value = newValue
-      }
-    },
-  )
-
-  watch(
-    () => props.valeurInverse,
-    newValue => {
-      if (props.valeurInverse) {
-        maValeur.value = newValue
-      } else {
-        maValeur.value = !newValue
-      }
-    },
-  )
-
-  // Méthode pour sauvegarder la valeur
-  const sauvegarder = () => {
-    if (props.valeurInverse) {
-      emit('update:modelValue', !maValeur.value)
-    } else {
-      emit('update:modelValue', maValeur.value)
-    }
-  }
-</script>
-
-<style lang="css" scoped>
-  .labelSwitchSiSwitchApres {
-    font-weight: bold;
-    margin-top: 25px;
-  }
-  .v-switch {
-    margin-bottom: -10px; /* aligner le switch avec son texte*/
-  }
-</style>
+<template>
+  <div>
+    <v-row dense>
+      <v-col
+        cols="9"
+        md="8"
+        lg="6"
+        class="d-flex align-end"
+      >
+        <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
+      </v-col>
+      <v-col
+        cols="2"
+        class="d-flex align-end justify-end"
+      >
+        <v-switch
+          v-model="maValeur"
+          :disabled="desactiver"
+          :density="densite"
+          :inset="inset"
+          hide-details
+          @update:modelValue="sauvegarder"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col
+        cols="9"
+        md="8"
+      >
+        <span v-html="texteDetaille"></span>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, watch, onMounted, type PropType } from 'vue'
+
+  // Définition des props
+  const props = defineProps({
+    valeurInverse: {
+      type: Boolean,
+      default: false,
+    },
+    desactiver: {
+      type: Boolean,
+      default: false,
+    },
+    inset: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    texte: {
+      type: String,
+      required: true,
+    },
+    texteDetaille: {
+      type: String,
+      required: true,
+    },
+    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'compact' },
+  })
+
+  // Définition de l'événement
+  const emit = defineEmits(['update:modelValue'])
+
+  // Référence pour la valeur interne
+  const maValeur = ref<boolean>(false)
+
+  // Montée du composant
+  onMounted(() => {
+    if (props.valeurInverse) {
+      maValeur.value = !props.modelValue
+    } else {
+      maValeur.value = props.modelValue
+    }
+  })
+
+  // Watcher pour suivre les changements de la prop 'value'
+  watch(
+    () => props.modelValue,
+    newValue => {
+      if (props.valeurInverse) {
+        maValeur.value = !newValue
+      } else {
+        maValeur.value = newValue
+      }
+    },
+  )
+
+  watch(
+    () => props.valeurInverse,
+    newValue => {
+      if (props.valeurInverse) {
+        maValeur.value = newValue
+      } else {
+        maValeur.value = !newValue
+      }
+    },
+  )
+
+  // Méthode pour sauvegarder la valeur
+  const sauvegarder = () => {
+    if (props.valeurInverse) {
+      emit('update:modelValue', !maValeur.value)
+    } else {
+      emit('update:modelValue', maValeur.value)
+    }
+  }
+</script>
+
+<style lang="css" scoped>
+  .labelSwitchSiSwitchApres {
+    font-weight: bold;
+    margin-top: 25px;
+  }
+  .v-switch {
+    margin-bottom: -10px; /* aligner le switch avec son texte*/
+  }
+</style>