codevdesign 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# CODEV DESIGN
|
|
2
|
+
|
|
3
|
+
## À propos
|
|
4
|
+
|
|
5
|
+
Composants Vuetify 3 pour les projets Codev
|
|
6
|
+
|
|
7
|
+
## Table des matières
|
|
8
|
+
|
|
9
|
+
- 🪧 [À propos](#à-propos)
|
|
10
|
+
- 📦 [Prérequis](#prérequis)
|
|
11
|
+
- 🚀 [Installation](#installation)
|
|
12
|
+
- 🛠️ [Utilisation](#utilisation)
|
|
13
|
+
- 📚 [Documentation](#documentation)
|
|
14
|
+
- 🏷️ [Gestion des versions](#gestion-des-versions)
|
|
15
|
+
- 📝 [Licence](#licence)
|
|
16
|
+
|
|
17
|
+
## Prérequis
|
|
18
|
+
|
|
19
|
+
Vue 3
|
|
20
|
+
Vuetify 3
|
|
21
|
+
Vue-i18n
|
|
22
|
+
Typescript 5
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
Installez le package via npm en exécutant la commande suivante dans votre projet :
|
|
28
|
+
```
|
|
29
|
+
npm install codevdesign
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Utilisation
|
|
33
|
+
|
|
34
|
+
Pour utiliser les traductions fournies par Codev Design, vous devez d'abord configurer Vue-i18n. Voici un exemple de configuration :
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
import { createI18n } from 'vue-i18n'
|
|
38
|
+
import { csqcEn, csqcFr } from 'codevdesign' // Importation des traductions du package `codevdesign`
|
|
39
|
+
|
|
40
|
+
const imports = {
|
|
41
|
+
fr: import.meta.glob('@/locales/**/fr.json', {
|
|
42
|
+
eager: true,
|
|
43
|
+
import: 'default',
|
|
44
|
+
}),
|
|
45
|
+
en: import.meta.glob('@/locales/**/en.json', {
|
|
46
|
+
eager: true,
|
|
47
|
+
import: 'default',
|
|
48
|
+
}),
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Les locales disponibles
|
|
52
|
+
const locales = Object.keys(imports)
|
|
53
|
+
|
|
54
|
+
// Fusionner les traductions locales sans écraser les traductions existantes
|
|
55
|
+
const getLocaleMessages = () =>
|
|
56
|
+
locales.reduce(
|
|
57
|
+
(messages, locale) => ({
|
|
58
|
+
...messages,
|
|
59
|
+
[locale]: {
|
|
60
|
+
// Si la langue est 'fr', fusionner les traductions
|
|
61
|
+
...(locale === 'fr'
|
|
62
|
+
? {
|
|
63
|
+
...Object.values(imports[locale]).reduce(
|
|
64
|
+
(acc, current) => ({
|
|
65
|
+
...acc,
|
|
66
|
+
...current,
|
|
67
|
+
}),
|
|
68
|
+
{},
|
|
69
|
+
),
|
|
70
|
+
...csqcFr, // Ajouter les traductions "fr" du package directement
|
|
71
|
+
}
|
|
72
|
+
: {
|
|
73
|
+
...Object.values(imports[locale]).reduce(
|
|
74
|
+
(acc, current) => ({
|
|
75
|
+
...acc,
|
|
76
|
+
...current,
|
|
77
|
+
}),
|
|
78
|
+
{},
|
|
79
|
+
),
|
|
80
|
+
...csqcEn, // Ajouter les traductions "en" du package directement
|
|
81
|
+
}),
|
|
82
|
+
},
|
|
83
|
+
}),
|
|
84
|
+
{},
|
|
85
|
+
)
|
|
86
|
+
|
|
87
|
+
export default createI18n({
|
|
88
|
+
useScope: 'global',
|
|
89
|
+
messages: getLocaleMessages() || [],
|
|
90
|
+
locale: window.langue,
|
|
91
|
+
legacy: false,
|
|
92
|
+
globalInjection: true,
|
|
93
|
+
fallbackLocale: window.langue,
|
|
94
|
+
silentTranslationWarn: true,
|
|
95
|
+
})
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Vous pouvez importer les composants directement depuis le package Codev Design comme suit :
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
import { pivFooter, pivEntete, csqcMenu, csqcAlerteErreur, csqcSnackbar } from 'codevdesign'
|
|
102
|
+
```
|
|
103
|
+
Ces composants sont prêts à être utilisés dans vos pages ou vos composants Vue.js.
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
## Documentation
|
|
107
|
+
|
|
108
|
+
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
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
## Gestion des versions
|
|
112
|
+
|
|
113
|
+
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.
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
## Licence
|
|
117
|
+
|
|
118
|
+
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.
|