codevdesign 0.0.47 → 0.0.49

package/composants/csqcChaise/chaiseItem.vue

@@ -1,53 +1,53 @@
-<template>
-  <div>
-    <v-list-item-content>
-      <v-list-item-title>{{ nomUnite }}</v-list-item-title>
-      <v-list-item-subtitle v-if="getPreference != ''">
-        {{ getPreference }}
-      </v-list-item-subtitle>
-      <v-list-item-subtitle
-        v-if="getPreference == ''"
-        class="messageErreurChaiseItem"
-      >
-        {{ $t('csqc.message.chaiseSelection') }}
-      </v-list-item-subtitle>
-    </v-list-item-content>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { computed } from 'vue'
-
-  // Définition des props
-  const props = defineProps<{
-    uniteId: number
-    preferences: Array<{ chaiseId: number }>
-    dictChaisesReleve: Record<number, Array<{ id: number; nom: string }>>
-    unites: Array<{ id: number; nom: string }>
-  }>()
-
-  const nomUnite = computed(() => {
-    if (!props.uniteId || !props.unites?.length) {
-      return ''
-    }
-
-    const unite = props.unites.find(u => u.id == props.uniteId)
-    return unite?.nom || ''
-  })
-
-  const getPreference = computed(() => {
-    for (let i = 0; i < props.dictChaisesReleve[props.uniteId]?.length; i += 1) {
-      if (props.preferences.some(p => p.chaiseId == props.dictChaisesReleve[props.uniteId][i].id)) {
-        return props.dictChaisesReleve[props.uniteId][i].nom
-      }
-    }
-
-    return ''
-  })
-</script>
-
-<style scoped>
-  .messageErreurChaiseItem {
-    color: red !important;
-    font-style: italic;
-  }
-</style>
+<template>
+  <div>
+    <v-list-item-content>
+      <v-list-item-title>{{ nomUnite }}</v-list-item-title>
+      <v-list-item-subtitle v-if="getPreference != ''">
+        {{ getPreference }}
+      </v-list-item-subtitle>
+      <v-list-item-subtitle
+        v-if="getPreference == ''"
+        class="messageErreurChaiseItem"
+      >
+        {{ $t('csqc.message.chaiseSelection') }}
+      </v-list-item-subtitle>
+    </v-list-item-content>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  // Définition des props
+  const props = defineProps<{
+    uniteId: number
+    preferences: Array<{ chaiseId: number }>
+    dictChaisesReleve: Record<number, Array<{ id: number; nom: string }>>
+    unites: Array<{ id: number; nom: string }>
+  }>()
+
+  const nomUnite = computed(() => {
+    if (!props.uniteId || !props.unites?.length) {
+      return ''
+    }
+
+    const unite = props.unites.find(u => u.id == props.uniteId)
+    return unite?.nom || ''
+  })
+
+  const getPreference = computed(() => {
+    for (let i = 0; i < props.dictChaisesReleve[props.uniteId]?.length; i += 1) {
+      if (props.preferences.some(p => p.chaiseId == props.dictChaisesReleve[props.uniteId][i].id)) {
+        return props.dictChaisesReleve[props.uniteId][i].nom
+      }
+    }
+
+    return ''
+  })
+</script>
+
+<style scoped>
+  .messageErreurChaiseItem {
+    color: red !important;
+    font-style: italic;
+  }
+</style>

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

@@ -18,8 +18,8 @@
           :disabled="desactiver"
           :density="densite"
           :inset="inset"
-          @change="sauvegarder"
           hide-details
+          @update:modelValue="sauvegarder"
         />
       </v-col>
     </v-row>
@@ -34,7 +34,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, watch, defineProps, defineEmits, onMounted, type PropType } from 'vue'
+  import { ref, watch, onMounted, type PropType } from 'vue'
 
   // Définition des props
   const props = defineProps({

package/composants/csqcRecherche.vue

@@ -18,7 +18,7 @@
           :loading="chargement"
           :disabled="chargement || desactiver"
         >
-          <template v-slot:append>
+          <template #append>
             <v-btn
               variant="flat"
               class="BarreRechercheBackIcone"
@@ -44,8 +44,8 @@
         lg="8"
       >
         <v-expansion-panels
-          static
           v-if="rechercheAvancee"
+          static
           :readonly="chargement || desactiver"
           expand-icon=""
           @update:modelValue="onPanelChange"
@@ -83,10 +83,12 @@
     rechercheTexte: {
       type: String,
       required: false,
+      default: '',
     },
     rechercheAvanceeTexte: {
       type: String,
       required: false,
+      default: '',
     },
     chargement: {
       type: Boolean,
@@ -101,6 +103,7 @@
     recherche: {
       type: String,
       required: false,
+      default: '',
     },
     rechercheAvancee: {
       type: Boolean,

package/composants/csqcSnackbar.vue

@@ -14,12 +14,11 @@
       <b>{{ props.message }}</b>
     </template>
 
-    <template v-slot:actions>
+    <template #actions>
       <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
       <v-icon
         v-if="props.btnFermer || props.temps === -1"
         color="white"
-        dark
         style="cursor: pointer"
         @click.stop="fermer"
       >

package/composants/csqcTable/csqcTable.vue

@@ -170,7 +170,7 @@
 <script setup lang="ts">
   /* eslint-disable @typescript-eslint/no-explicit-any */
 
-  import { ref, computed, defineProps, type Slots, type PropType } from 'vue'
+  import { ref, computed, type Slots, type PropType } from 'vue'
   import Recherche from '../csqcRecherche.vue'
   import confirmation from '../csqcConfirmation.vue'
   import exportExcelComponent from './csqcTableExportExcel.vue'
@@ -266,7 +266,7 @@
   const ajouter = () => {
     emit('ajouter')
   }
-  const cliqueLigne = (e: Event, { item }: { item: any }) => {
+  const cliqueLigne = ({ item }: { item: any }) => {
     emit('cliqueLigne', item)
   }
 

package/composants/csqcTable/csqcTableExportExcel.vue

@@ -1,16 +1,16 @@
 <template>
   <v-icon
-    right
+    end
     color="grisMoyen"
-    @click="exportToXLSX"
     icon="mdi-microsoft-excel"
+    @click="exportToXLSX"
   >
   </v-icon>
 </template>
 
 <script setup lang="ts">
   import { utils, writeFileXLSX } from '@e965/xlsx'
-  import { defineProps, computed } from 'vue'
+  import { computed } from 'vue'
 
   const props = defineProps<{
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -21,7 +21,7 @@
 
   // Extraction des clés uniques de tous les objets
   const cleDynamique = computed(() => {
-    const keys = new Set<string>()
+    const keys: Set<string> = new Set()
 
     // Parcours tous les objets de la liste et ajoute leurs clés
     props.liste.forEach(item => {