codevdesign 0.0.47 → 0.0.49

package/README.md

@@ -1,117 +1,117 @@
-# CODEV DESIGN
-
-## À propos
-
-Composants Vuetify 3 pour les projets Codev
-
-## Table des matières
-
-- 🪧 [À propos](#à-propos)
-- 📦 [Prérequis](#prérequis)
-- 🚀 [Installation](#installation)
-- 🛠️ [Utilisation](#utilisation)
-- 📚 [Documentation](#documentation)
-- 🏷️ [Gestion des versions](#gestion-des-versions)
-- 📝 [Licence](#licence)
-
-## Prérequis
-
-Vue 3
-Vuetify 3
-Vue-i18n
-Typescript 5
-"@e965/xlsx"
-
-## Installation
-
-Installez le package via npm en exécutant la commande suivante dans votre projet :
-
-```
-npm install codevdesign
-```
-
-## Utilisation
-
-Pour utiliser les traductions fournies par Codev Design, vous devez d'abord configurer Vue-i18n. Voici un exemple de configuration :
-
-```
-import { createI18n } from 'vue-i18n'
-import { csqcEn, csqcFr } from 'codevdesign' // Importation des traductions du package `codevdesign`
-
-const imports = {
-  fr: import.meta.glob('@/locales/**/fr.json', {
-    eager: true,
-    import: 'default',
-  }),
-  en: import.meta.glob('@/locales/**/en.json', {
-    eager: true,
-    import: 'default',
-  }),
-}
-
-// Les locales disponibles
-const locales = Object.keys(imports)
-
-// Fusionner les traductions locales sans écraser les traductions existantes
-const getLocaleMessages = () =>
-  locales.reduce(
-    (messages, locale) => ({
-      ...messages,
-      [locale]: {
-        // Si la langue est 'fr', fusionner les traductions
-        ...(locale === 'fr'
-          ? {
-              ...Object.values(imports[locale]).reduce(
-                (acc, current) => ({
-                  ...acc,
-                  ...current,
-                }),
-                {},
-              ),
-              ...csqcFr, // Ajouter les traductions "fr" du package directement
-            }
-          : {
-              ...Object.values(imports[locale]).reduce(
-                (acc, current) => ({
-                  ...acc,
-                  ...current,
-                }),
-                {},
-              ),
-              ...csqcEn, // Ajouter les traductions "en" du package directement
-            }),
-      },
-    }),
-    {},
-  )
-
-export default createI18n({
-  useScope: 'global',
-  messages: getLocaleMessages() || [],
-  locale: window.langue,
-  legacy: false,
-  globalInjection: true,
-  fallbackLocale: window.langue,
-  silentTranslationWarn: true,
-})
-```
-
-Vous pouvez importer les composants directement depuis le package Codev Design comme suit :
-
-```
-import { pivFooter, pivEntete, csqcMenu, csqcAlerteErreur, csqcSnackbar } from 'codevdesign'
-```
-
-Ces composants sont prêts à être utilisés dans vos pages ou vos composants Vue.js.
-
-## Documentation
-
-Un bac à sable interactif avec la documentation détaillée des props des composants est disponible pour les membres de la CDPVD. Vous pouvez y accéder ici : https://espacedev.csqc.ca/codevdesign
-
-## Gestion des versions
-
-Toutes les versions disponibles ainsi que les journaux des changements apportés sont disponibles sur la page npm du package : https://www.npmjs.com/package/codevdesign?activeTab=versions.
-
-## Licence
-
-Ce package Codev Design est fourni sans licence spécifique. Vous pouvez l'utiliser dans vos projets à votre discrétion, mais il n'y a aucune garantie légale.
+# CODEV DESIGN
+
+## À propos
+
+Composants Vuetify 3 pour les projets Codev
+
+## Table des matières
+
+- 🪧 [À propos](#à-propos)
+- 📦 [Prérequis](#prérequis)
+- 🚀 [Installation](#installation)
+- 🛠️ [Utilisation](#utilisation)
+- 📚 [Documentation](#documentation)
+- 🏷️ [Gestion des versions](#gestion-des-versions)
+- 📝 [Licence](#licence)
+
+## Prérequis
+
+Vue 3
+Vuetify 3
+Vue-i18n
+Typescript 5
+"@e965/xlsx"
+
+## Installation
+
+Installez le package via npm en exécutant la commande suivante dans votre projet :
+
+```
+npm install codevdesign
+```
+
+## Utilisation
+
+Pour utiliser les traductions fournies par Codev Design, vous devez d'abord configurer Vue-i18n. Voici un exemple de configuration :
+
+```
+import { createI18n } from 'vue-i18n'
+import { csqcEn, csqcFr } from 'codevdesign' // Importation des traductions du package `codevdesign`
+
+const imports = {
+  fr: import.meta.glob('@/locales/**/fr.json', {
+    eager: true,
+    import: 'default',
+  }),
+  en: import.meta.glob('@/locales/**/en.json', {
+    eager: true,
+    import: 'default',
+  }),
+}
+
+// Les locales disponibles
+const locales = Object.keys(imports)
+
+// Fusionner les traductions locales sans écraser les traductions existantes
+const getLocaleMessages = () =>
+  locales.reduce(
+    (messages, locale) => ({
+      ...messages,
+      [locale]: {
+        // Si la langue est 'fr', fusionner les traductions
+        ...(locale === 'fr'
+          ? {
+              ...Object.values(imports[locale]).reduce(
+                (acc, current) => ({
+                  ...acc,
+                  ...current,
+                }),
+                {},
+              ),
+              ...csqcFr, // Ajouter les traductions "fr" du package directement
+            }
+          : {
+              ...Object.values(imports[locale]).reduce(
+                (acc, current) => ({
+                  ...acc,
+                  ...current,
+                }),
+                {},
+              ),
+              ...csqcEn, // Ajouter les traductions "en" du package directement
+            }),
+      },
+    }),
+    {},
+  )
+
+export default createI18n({
+  useScope: 'global',
+  messages: getLocaleMessages() || [],
+  locale: window.langue,
+  legacy: false,
+  globalInjection: true,
+  fallbackLocale: window.langue,
+  silentTranslationWarn: true,
+})
+```
+
+Vous pouvez importer les composants directement depuis le package Codev Design comme suit :
+
+```
+import { pivFooter, pivEntete, csqcMenu, csqcAlerteErreur, csqcSnackbar } from 'codevdesign'
+```
+
+Ces composants sont prêts à être utilisés dans vos pages ou vos composants Vue.js.
+
+## Documentation
+
+Un bac à sable interactif avec la documentation détaillée des props des composants est disponible pour les membres de la CDPVD. Vous pouvez y accéder ici : https://espacedev.csqc.ca/codevdesign
+
+## Gestion des versions
+
+Toutes les versions disponibles ainsi que les journaux des changements apportés sont disponibles sur la page npm du package : https://www.npmjs.com/package/codevdesign?activeTab=versions.
+
+## Licence
+
+Ce package Codev Design est fourni sans licence spécifique. Vous pouvez l'utiliser dans vos projets à votre discrétion, mais il n'y a aucune garantie légale.

package/composants/csqcAide.vue

@@ -1,18 +1,18 @@
 <template>
   <v-menu
-    :open-on-hover="hover"
     v-if="!isXs"
+    :open-on-hover="hover"
     location="top start"
   >
     <template #activator="{ props: activatorProps }">
       <slot name="icone">
         <v-icon
           v-bind="activatorProps"
-          @click.stop.prevent
           :style="styleCSS"
           :size="grosseurEffective"
           color="grisMoyen"
           icon="mdi-help-circle"
+          @click.stop.prevent
         />
       </slot>
     </template>

package/composants/csqcAlerteErreur.vue

@@ -1,86 +1,86 @@
-<template>
-  <div
-    v-if="afficher && erreur"
-    :style="retournerStyle"
-  >
-    <v-alert
-      v-model="afficher"
-      class="mb-0 text-center hyphen_auto"
-      color="#CB381F"
-      closable
-      @click:close="fermer"
-    >
-      <span v-html="erreur" /><br />
-      <span
-        id="messageSoutien"
-        style="color: darkgray"
-        >{{ messageSoutien }}</span
-      >
-    </v-alert>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { computed, ref, watch } from 'vue'
-  import { useDisplay } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-
-  // Définir les props avec les types
-  const props = defineProps({
-    message: {
-      type: String,
-      required: true,
-    },
-    messageSoutien: {
-      type: String,
-      required: true,
-    },
-  })
-  const { name: displayName } = useDisplay()
-  const emit = defineEmits(['fermer:alerte'])
-  const { t } = useI18n({ useScope: 'global' })
-
-  const fermer = (): void => {
-    afficher.value = false
-    emit('fermer:alerte')
-  }
-
-  const afficher = ref(false)
-
-  // Watcher pour réagir aux changements du message
-  watch(
-    () => props.message,
-    nouveauMessage => {
-      if (nouveauMessage && nouveauMessage !== '') {
-        afficher.value = true
-      }
-    },
-  )
-
-  // Computed pour l'erreur, venant du store
-  const erreur = computed(() => {
-    if (props.message == null || props.message == '') return null
-
-    if (props.message.indexOf('erreurs.') === 0) return t(props.message)
-
-    return props.message
-  })
-
-  // Méthode computed pour le style en fonction du breakpoint
-  const retournerStyle = computed(() => {
-    if (displayName.value === 'xs') {
-      return 'top: 0px; right:1%;width: 98%;position: fixed; z-index: 2000;'
-    }
-    return 'top: 20px; right: 10%; width: 80%; position: fixed; z-index: 2000; margin: 0 auto;'
-  })
-</script>
-
-<style lang="css" scoped>
-  .error {
-    padding-top: 0.7rem;
-    padding-bottom: 0.7rem;
-  }
-  :deep(.blanc) {
-    color: white;
-  }
-</style>
+<template>
+  <div
+    v-if="afficher && erreur"
+    :style="retournerStyle"
+  >
+    <v-alert
+      v-model="afficher"
+      class="mb-0 text-center hyphen_auto"
+      color="#CB381F"
+      closable
+      @click:close="fermer"
+    >
+      <span v-html="erreur" /><br />
+      <span
+        id="messageSoutien"
+        style="color: darkgray"
+        >{{ messageSoutien }}</span
+      >
+    </v-alert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue'
+  import { useDisplay } from 'vuetify'
+  import { useI18n } from 'vue-i18n'
+
+  // Définir les props avec les types
+  const props = defineProps({
+    message: {
+      type: String,
+      required: true,
+    },
+    messageSoutien: {
+      type: String,
+      required: true,
+    },
+  })
+  const { name: displayName } = useDisplay()
+  const emit = defineEmits(['fermer:alerte'])
+  const { t } = useI18n({ useScope: 'global' })
+
+  const fermer = (): void => {
+    afficher.value = false
+    emit('fermer:alerte')
+  }
+
+  const afficher = ref(false)
+
+  // Watcher pour réagir aux changements du message
+  watch(
+    () => props.message,
+    nouveauMessage => {
+      if (nouveauMessage && nouveauMessage !== '') {
+        afficher.value = true
+      }
+    },
+  )
+
+  // Computed pour l'erreur, venant du store
+  const erreur = computed(() => {
+    if (props.message == null || props.message == '') return null
+
+    if (props.message.indexOf('erreurs.') === 0) return t(props.message)
+
+    return props.message
+  })
+
+  // Méthode computed pour le style en fonction du breakpoint
+  const retournerStyle = computed(() => {
+    if (displayName.value === 'xs') {
+      return 'top: 0px; right:1%;width: 98%;position: fixed; z-index: 2000;'
+    }
+    return 'top: 20px; right: 10%; width: 80%; position: fixed; z-index: 2000; margin: 0 auto;'
+  })
+</script>
+
+<style lang="css" scoped>
+  .error {
+    padding-top: 0.7rem;
+    padding-bottom: 0.7rem;
+  }
+  :deep(.blanc) {
+    color: white;
+  }
+</style>