codevdesign

CODEV DESIGN

À propos

Composants Vuetify 3 pour les projets Codev

Table des matières

• 🪧 À propos
• 📦 Prérequis
• 🚀 Installation
• 🛠️ Utilisation
• 📚 Documentation
• 🏷️ Gestion des versions
• 📝 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.