codevdesign 1.0.7 → 1.0.8

package/composants/csqcRecherche.vue

@@ -1,212 +1,212 @@
-<template>
-  <div>
-    <v-row
-      dense
-      class="pt-0 mt-0"
-    >
-      <v-col
-        cols="12"
-        sm="auto"
-      >
-        <slot name="recherche"></slot>
-        <v-text-field
-          v-if="afficher"
-          v-model="rechercheLocale"
-          :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
-          single-line
-          density="compact"
-          hide-details
-          clearable
-          :rounded="0"
-          variant="outlined"
-          max-width="640"
-          min-width="500"
-          class="BarreRecherche"
-          :loading="chargement"
-          :disabled="chargement || desactiver"
-        >
-          <template #append>
-            <v-btn
-              class="BarreRechercheBackIcone"
-              :loading="chargement"
-              :disabled="chargement || desactiver"
-            >
-              <v-icon
-                class="BarreRechercheIcone"
-                icon="mdi-magnify"
-              />
-            </v-btn>
-          </template>
-        </v-text-field>
-      </v-col>
-      <!-- Entre recherche et ajouté-->
-      <v-col
-        cols="12"
-        sm="auto"
-        class="pt-1 mt-0 pb-0 mb-0"
-      >
-        <slot name="milieu" />
-      </v-col>
-
-      <!-- Affichage des boutons et icônes-->
-      <v-col
-        cols="12"
-        sm="auto"
-        class="flex-grow-1 d-flex justify-end"
-      >
-        <slot name="droite" />
-      </v-col>
-    </v-row>
-    <v-row
-      dense
-      class="pt-0 mt-0"
-    >
-      <v-col
-        cols="12"
-        :lg="rechercheAvanceeLargeur"
-      >
-        <v-expansion-panels
-          v-if="rechercheAvancee"
-          static
-          :readonly="chargement || desactiver"
-          expand-icon=""
-          @update:model-value="onPanelChange"
-        >
-          <v-expansion-panel
-            flat
-            elevation="0"
-          >
-            <v-expansion-panel-title
-              style="color: #095797"
-              class="pl-0 ml-0"
-              ><slot name="rechercheAvanceeTitre">
-                <span
-                  style="text-decoration: underline"
-                  v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
-                ></span>
-                <slot name="rechercheAvanceeApresTitre"></slot
-              ></slot>
-            </v-expansion-panel-title>
-            <v-expansion-panel-text :style="rechercheAvanceeStyle">
-              <slot name="rechercheAvancee"></slot>
-            </v-expansion-panel-text>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref, watch } from 'vue'
-
-  // Props
-  const props = defineProps({
-    afficher: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    rechercheTexte: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    rechercheAvanceeTexte: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    rechercheAvanceeLargeur: {
-      type: Number,
-      required: false,
-      default: 12,
-    },
-    chargement: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    desactiver: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    recherche: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    rechercheAvancee: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    rechercheAvanceeStyle: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  })
-
-  const emit = defineEmits<{
-    (e: 'update:recherche', recherche: string): void
-    (e: 'panneau:etat', isOpen: boolean): void //  événement pour l'ouverture/fermeture du panneau
-  }>()
-
-  // Création d'une variable locale pour gérer la recherche
-  const rechercheLocale = ref(props.recherche)
-
-  // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
-  watch(
-    () => props.recherche,
-    nouvelleValeur => {
-      rechercheLocale.value = nouvelleValeur
-    },
-  )
-
-  // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
-  watch(rechercheLocale, nouvelleValeur => {
-    emit('update:recherche', nouvelleValeur!)
-  })
-
-  // Fonction pour émettre l'événement d'ouverture/fermeture du panneau
-  const onPanelChange = (val: unknown) => {
-    if (typeof val === 'string' || typeof val === 'number' || val === null) {
-      const isOpen = val !== null && val !== ''
-      emit('panneau:etat', isOpen)
-    } else {
-      emit('panneau:etat', false)
-    }
-  }
-</script>
-
-<style lang="css">
-  /* barre de recherche design QC*/
-  .BarreRecherche {
-    min-height: 40px;
-  }
-
-  .BarreRechercheBackIcone {
-    border-right: 1px solid #808a9d;
-    border-top: 1px solid #808a9d;
-    border-bottom: 1px solid #808a9d;
-    background-color: #095797 !important;
-    height: 40px !important;
-    width: 40px !important;
-    max-width: 40px !important;
-    min-width: 40px !important;
-    padding-right: 0 !important;
-    padding-left: 0 !important;
-    border-radius: 0;
-    margin-left: -16px;
-  }
-
-  /* icone loupe */
-  .BarreRechercheIcone {
-    font-size: 34px !important;
-    margin-left: 1px !important;
-    margin-top: 2px !important;
-    color: white !important;
-  }
-</style>
+<template>
+  <div>
+    <v-row
+      dense
+      class="pt-0 mt-0"
+    >
+      <v-col
+        cols="12"
+        sm="auto"
+      >
+        <slot name="recherche"></slot>
+        <v-text-field
+          v-if="afficher"
+          v-model="rechercheLocale"
+          :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
+          single-line
+          density="compact"
+          hide-details
+          clearable
+          :rounded="0"
+          variant="outlined"
+          max-width="640"
+          min-width="500"
+          class="BarreRecherche"
+          :loading="chargement"
+          :disabled="chargement || desactiver"
+        >
+          <template #append>
+            <v-btn
+              class="BarreRechercheBackIcone"
+              :loading="chargement"
+              :disabled="chargement || desactiver"
+            >
+              <v-icon
+                class="BarreRechercheIcone"
+                icon="mdi-magnify"
+              />
+            </v-btn>
+          </template>
+        </v-text-field>
+      </v-col>
+      <!-- Entre recherche et ajouté-->
+      <v-col
+        cols="12"
+        sm="auto"
+        class="pt-1 mt-0 pb-0 mb-0"
+      >
+        <slot name="milieu" />
+      </v-col>
+
+      <!-- Affichage des boutons et icônes-->
+      <v-col
+        cols="12"
+        sm="auto"
+        class="flex-grow-1 d-flex justify-end"
+      >
+        <slot name="droite" />
+      </v-col>
+    </v-row>
+    <v-row
+      dense
+      class="pt-0 mt-0"
+    >
+      <v-col
+        cols="12"
+        :lg="rechercheAvanceeLargeur"
+      >
+        <v-expansion-panels
+          v-if="rechercheAvancee"
+          static
+          :readonly="chargement || desactiver"
+          expand-icon=""
+          @update:model-value="onPanelChange"
+        >
+          <v-expansion-panel
+            flat
+            elevation="0"
+          >
+            <v-expansion-panel-title
+              style="color: #095797"
+              class="pl-0 ml-0"
+              ><slot name="rechercheAvanceeTitre">
+                <span
+                  style="text-decoration: underline"
+                  v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
+                ></span>
+                <slot name="rechercheAvanceeApresTitre"></slot
+              ></slot>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text :style="rechercheAvanceeStyle">
+              <slot name="rechercheAvancee"></slot>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue'
+
+  // Props
+  const props = defineProps({
+    afficher: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    rechercheTexte: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rechercheAvanceeTexte: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rechercheAvanceeLargeur: {
+      type: Number,
+      required: false,
+      default: 12,
+    },
+    chargement: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    desactiver: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    recherche: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rechercheAvancee: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    rechercheAvanceeStyle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  })
+
+  const emit = defineEmits<{
+    (e: 'update:recherche', recherche: string): void
+    (e: 'panneau:etat', isOpen: boolean): void //  événement pour l'ouverture/fermeture du panneau
+  }>()
+
+  // Création d'une variable locale pour gérer la recherche
+  const rechercheLocale = ref(props.recherche)
+
+  // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
+  watch(
+    () => props.recherche,
+    nouvelleValeur => {
+      rechercheLocale.value = nouvelleValeur
+    },
+  )
+
+  // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
+  watch(rechercheLocale, nouvelleValeur => {
+    emit('update:recherche', nouvelleValeur!)
+  })
+
+  // Fonction pour émettre l'événement d'ouverture/fermeture du panneau
+  const onPanelChange = (val: unknown) => {
+    if (typeof val === 'string' || typeof val === 'number' || val === null) {
+      const isOpen = val !== null && val !== ''
+      emit('panneau:etat', isOpen)
+    } else {
+      emit('panneau:etat', false)
+    }
+  }
+</script>
+
+<style lang="css">
+  /* barre de recherche design QC*/
+  .BarreRecherche {
+    min-height: 40px;
+  }
+
+  .BarreRechercheBackIcone {
+    border-right: 1px solid #808a9d;
+    border-top: 1px solid #808a9d;
+    border-bottom: 1px solid #808a9d;
+    background-color: #095797 !important;
+    height: 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    min-width: 40px !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    border-radius: 0;
+    margin-left: -16px;
+  }
+
+  /* icone loupe */
+  .BarreRechercheIcone {
+    font-size: 34px !important;
+    margin-left: 1px !important;
+    margin-top: 2px !important;
+    color: white !important;
+  }
+</style>

package/composants/csqcSnackbar.vue

@@ -1,88 +1,88 @@
-<template>
-  <v-snackbar
-    v-model="snackbar"
-    v-bind="$attrs"
-    :timeout="tempsFinal"
-    :style="styleCss"
-    color="success"
-    multi-line
-    @update:model-value="fermer"
-  >
-    <template v-if="props.titre || props.message">
-      <b style="font-size: 12pt">{{ props.titre }}</b>
-      <br v-if="props.titre" />
-      <b>{{ props.message }}</b>
-    </template>
-
-    <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"
-        style="cursor: pointer"
-        @click.stop="fermer"
-      >
-        mdi-close
-      </v-icon>
-    </template>
-  </v-snackbar>
-</template>
-<script lang="ts" setup>
-  import { computed, ref, watch, type PropType } from 'vue'
-
-  // Définir les props avec les types
-  const props = defineProps({
-    styleCss: {
-      type: String,
-      required: false,
-    },
-    temps: {
-      type: Number,
-      required: false,
-      default: 4000,
-      validator(value: number) {
-        // Si la valeur est inférieure à -1, on la remplace par -1
-        if (value < -1) {
-          return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
-        }
-        // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
-        return value <= Number.MAX_VALUE
-      },
-    },
-    message: {
-      type: String,
-      required: true,
-    },
-    titre: {
-      type: String,
-      required: false,
-    },
-    btnFermer: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  })
-  const emit = defineEmits(['fermer:snackbar'])
-  const fermer = (): void => {
-    snackbar.value = false
-    emit('fermer:snackbar')
-  }
-  // Déclarer l'état réactif pour snackbar
-  const snackbar = ref(false)
-  const message = computed(() => props.message)
-  const tempsFinal = computed(() => {
-    if (props.temps < -1) {
-      return -1 // Si la valeur est inférieure à -1, on la met à -1
-    }
-    if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
-
-    return props.temps // Sinon, on retourne la valeur de la prop
-  })
-
-  watch(message, nouveau => {
-    if (nouveau != null && nouveau !== '') {
-      snackbar.value = true
-    }
-  })
-</script>
+<template>
+  <v-snackbar
+    v-model="snackbar"
+    v-bind="$attrs"
+    :timeout="tempsFinal"
+    :style="styleCss"
+    color="success"
+    multi-line
+    @update:model-value="fermer"
+  >
+    <template v-if="props.titre || props.message">
+      <b style="font-size: 12pt">{{ props.titre }}</b>
+      <br v-if="props.titre" />
+      <b>{{ props.message }}</b>
+    </template>
+
+    <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"
+        style="cursor: pointer"
+        @click.stop="fermer"
+      >
+        mdi-close
+      </v-icon>
+    </template>
+  </v-snackbar>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch, type PropType } from 'vue'
+
+  // Définir les props avec les types
+  const props = defineProps({
+    styleCss: {
+      type: String,
+      required: false,
+    },
+    temps: {
+      type: Number,
+      required: false,
+      default: 4000,
+      validator(value: number) {
+        // Si la valeur est inférieure à -1, on la remplace par -1
+        if (value < -1) {
+          return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
+        }
+        // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
+        return value <= Number.MAX_VALUE
+      },
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    titre: {
+      type: String,
+      required: false,
+    },
+    btnFermer: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  })
+  const emit = defineEmits(['fermer:snackbar'])
+  const fermer = (): void => {
+    snackbar.value = false
+    emit('fermer:snackbar')
+  }
+  // Déclarer l'état réactif pour snackbar
+  const snackbar = ref(false)
+  const message = computed(() => props.message)
+  const tempsFinal = computed(() => {
+    if (props.temps < -1) {
+      return -1 // Si la valeur est inférieure à -1, on la met à -1
+    }
+    if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
+
+    return props.temps // Sinon, on retourne la valeur de la prop
+  })
+
+  watch(message, nouveau => {
+    if (nouveau != null && nouveau !== '') {
+      snackbar.value = true
+    }
+  })
+</script>