codevdesign 1.0.16 → 1.0.17

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.
Files changed (2) hide show
  1. package/composants/csqcTexteBilingue.vue +176 -158
  2. package/package.json +1 -1
package/composants/csqcTexteBilingue.vue CHANGED
@@ -1,158 +1,176 @@
1
- <template>
2
- <v-row dense>
3
- <v-col
4
- v-if="afficherChampFr"
5
- cols="12"
6
- >
7
- <label
8
- v-if="!libelleInterieur"
9
- :for="`saisieChampFr-${cleTradFr}`"
10
- :class="{ libelle: true, required: estRequis }"
11
- >{{ $t(cleTradFr) }}</label
12
- >
13
- <v-textarea
14
- v-if="textarea"
15
- :id="`saisieChampFr-${cleTradFr}`"
16
- v-model="model[champs.Francais]"
17
- density="comfortable"
18
- rows="1"
19
- :label="libelleInterieur ? $t(cleTradFr) : ''"
20
- :rules="reglesInterne"
21
- :autofocus="autofocus && afficherChampFr"
22
- />
23
- <v-text-field
24
- v-else
25
- :id="`saisieChampFr-${cleTradFr}`"
26
- v-model="model[champs.Francais]"
27
- density="comfortable"
28
- :label="libelleInterieur ? $t(cleTradFr) : ''"
29
- :rules="reglesInterne"
30
- :autofocus="autofocus && afficherChampFr"
31
- />
32
- </v-col>
33
- <v-col
34
- v-if="afficherChampEn"
35
- cols="12"
36
- >
37
- <label
38
- v-if="!libelleInterieur"
39
- :for="`saisieChampEn-${cleTradEn}`"
40
- :class="{ libelle: true, required: estRequis }"
41
- >{{ $t(cleTradEn) }}</label
42
- >
43
- <v-textarea
44
- v-if="textarea"
45
- :id="`saisieChampEn-${cleTradEn}`"
46
- v-model="model[champs.Anglais]"
47
- rows="1"
48
- density="comfortable"
49
- :label="libelleInterieur ? $t(cleTradEn) : ''"
50
- :rules="reglesInterne"
51
- :autofocus="autofocus && !afficherChampFr"
52
- />
53
- <v-text-field
54
- v-else
55
- :id="`saisieChampEn-${cleTradEn}`"
56
- v-model="model[champs.Anglais]"
57
- density="comfortable"
58
- :label="libelleInterieur ? $t(cleTradEn) : ''"
59
- :rules="reglesInterne"
60
- :autofocus="autofocus && !afficherChampFr"
61
- />
62
- </v-col>
63
- </v-row>
64
- </template>
65
-
66
- <script setup lang="ts" generic="T extends { id: number }">
67
- import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
68
- import { ChoixLangue } from '@/enums/choixLangue'
69
- import { computed, type PropType, toRefs } from 'vue'
70
- import { useI18n } from 'vue-i18n'
71
- const { t } = useI18n({ useScope: 'global' })
72
-
73
- const props = defineProps<{
74
- textarea?: boolean
75
- libelleInterieur?: boolean
76
- estRequis?: boolean
77
- autofocus?: boolean
78
- estUniqueValeurs?: T[]
79
- minimumLongueur?: number
80
- maximumLongueur?: number
81
- regles?: ((v: string) => string | true)[]
82
- langue: ChoixLangue
83
- i18nLibelleRacine: string
84
- champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
85
- }>()
86
-
87
- const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
88
- toRefs(props)
89
-
90
- const minimumLongueur = computed(() => props.minimumLongueur)
91
- const maximumLongueur = computed(() => props.maximumLongueur)
92
- const estRequis = computed(() => props.estRequis)
93
-
94
- const model = defineModel({
95
- type: Object as PropType<T>,
96
- required: true,
97
- })
98
-
99
- const reglesInterne = computed(() => {
100
- const _regles: ((v: string) => string | true)[] = regles.value ?? []
101
-
102
- if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
103
- console.error(
104
- `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
105
- )
106
- throw Error(
107
- `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
108
- )
109
- }
110
-
111
- if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
112
-
113
- if (estUniqueValeurs.value) {
114
- _regles.push(v =>
115
- estUniqueBilingue(
116
- v,
117
- model.value,
118
- {
119
- champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
120
- valeurs: estUniqueValeurs.value!,
121
- langueCss: langue.value,
122
- },
123
- t,
124
- ),
125
- )
126
- }
127
-
128
- if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
129
-
130
- if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
131
-
132
- return _regles
133
- })
134
-
135
- // Clés i18n
136
- const cleTradEn = computed(() => {
137
- switch (langue.value) {
138
- case ChoixLangue.Bilingue:
139
- case ChoixLangue.Anglais:
140
- return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
141
- default:
142
- return 'cle_manquante'
143
- }
144
- })
145
-
146
- const cleTradFr = computed(() => {
147
- switch (langue.value) {
148
- case ChoixLangue.Bilingue:
149
- case ChoixLangue.Francais:
150
- return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
151
- default:
152
- return 'cle_manquante'
153
- }
154
- })
155
-
156
- const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
157
- const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
158
- </script>
1
+ <template>
2
+ <v-row dense>
3
+ <v-col
4
+ v-if="afficherChampFr"
5
+ cols="12"
6
+ >
7
+ <label
8
+ v-if="!libelleInterieur"
9
+ :for="`saisieChampFr-${cleTradFr}`"
10
+ :class="{ libelle: true, required: estRequis }"
11
+ >{{ $t(cleTradFr) }}
12
+ </label>
13
+ <csqcAide
14
+ v-if="props.aideFr && !libelleInterieur"
15
+ :aide="props.aideFr"
16
+ hover
17
+ :style-css="'padding-bottom:6px;padding-left:8px;'"
18
+ />
19
+ <v-textarea
20
+ v-if="textarea"
21
+ :id="`saisieChampFr-${cleTradFr}`"
22
+ v-model="model[champs.Francais]"
23
+ density="comfortable"
24
+ v-bind="$attrs"
25
+ rows="1"
26
+ :label="libelleInterieur ? $t(cleTradFr) : ''"
27
+ :rules="reglesInterne"
28
+ :autofocus="autofocus && afficherChampFr"
29
+ />
30
+ <v-text-field
31
+ v-else
32
+ :id="`saisieChampFr-${cleTradFr}`"
33
+ v-model="model[champs.Francais]"
34
+ density="comfortable"
35
+ v-bind="$attrs"
36
+ :label="libelleInterieur ? $t(cleTradFr) : ''"
37
+ :rules="reglesInterne"
38
+ :autofocus="autofocus && afficherChampFr"
39
+ />
40
+ </v-col>
41
+ <v-col
42
+ v-if="afficherChampEn"
43
+ cols="12"
44
+ >
45
+ <label
46
+ v-if="!libelleInterieur"
47
+ :for="`saisieChampEn-${cleTradEn}`"
48
+ :class="{ libelle: true, required: estRequis }"
49
+ >{{ $t(cleTradEn) }}</label
50
+ ><csqcAide
51
+ v-if="props.aideEn && !libelleInterieur"
52
+ :aide="props.aideEn"
53
+ hover
54
+ :style-css="'padding-bottom:6px;padding-left:8px;'"
55
+ />
56
+ <v-textarea
57
+ v-if="textarea"
58
+ :id="`saisieChampEn-${cleTradEn}`"
59
+ v-model="model[champs.Anglais]"
60
+ rows="1"
61
+ v-bind="$attrs"
62
+ density="comfortable"
63
+ :label="libelleInterieur ? $t(cleTradEn) : ''"
64
+ :rules="reglesInterne"
65
+ :autofocus="autofocus && !afficherChampFr"
66
+ />
67
+ <v-text-field
68
+ v-else
69
+ :id="`saisieChampEn-${cleTradEn}`"
70
+ v-model="model[champs.Anglais]"
71
+ density="comfortable"
72
+ v-bind="$attrs"
73
+ :label="libelleInterieur ? $t(cleTradEn) : ''"
74
+ :rules="reglesInterne"
75
+ :autofocus="autofocus && !afficherChampFr"
76
+ />
77
+ </v-col>
78
+ </v-row>
79
+ </template>
80
+
81
+ <script setup lang="ts" generic="T extends { id: number }">
82
+ import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
83
+ import { ChoixLangue } from '@/enums/choixLangue'
84
+ import csqcAide from './csqcAide.vue'
85
+ import { computed, type PropType, toRefs } from 'vue'
86
+ import { useI18n } from 'vue-i18n'
87
+ const { t } = useI18n({ useScope: 'global' })
88
+
89
+ const props = defineProps<{
90
+ aideFr?: string
91
+ aideEn?: string
92
+ textarea?: boolean
93
+ libelleInterieur?: boolean
94
+ estRequis?: boolean
95
+ autofocus?: boolean
96
+ estUniqueValeurs?: T[]
97
+ minimumLongueur?: number
98
+ maximumLongueur?: number
99
+ regles?: ((v: string) => string | true)[]
100
+ langue: ChoixLangue
101
+ i18nLibelleRacine: string
102
+ champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
103
+ }>()
104
+
105
+ const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
106
+ toRefs(props)
107
+
108
+ const minimumLongueur = computed(() => props.minimumLongueur)
109
+ const maximumLongueur = computed(() => props.maximumLongueur)
110
+ const estRequis = computed(() => props.estRequis)
111
+
112
+ const model = defineModel({
113
+ type: Object as PropType<T>,
114
+ required: true,
115
+ })
116
+
117
+ const reglesInterne = computed(() => {
118
+ const _regles: ((v: string) => string | true)[] = regles.value ?? []
119
+
120
+ if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
121
+ console.error(
122
+ `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
123
+ )
124
+ throw Error(
125
+ `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
126
+ )
127
+ }
128
+
129
+ if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
130
+
131
+ if (estUniqueValeurs.value) {
132
+ _regles.push(v =>
133
+ estUniqueBilingue(
134
+ v,
135
+ model.value,
136
+ {
137
+ champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
138
+ valeurs: estUniqueValeurs.value!,
139
+ langueCss: langue.value,
140
+ },
141
+ t,
142
+ ),
143
+ )
144
+ }
145
+
146
+ if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
147
+
148
+ if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
149
+
150
+ return _regles
151
+ })
152
+
153
+ // Clés i18n
154
+ const cleTradEn = computed(() => {
155
+ switch (langue.value) {
156
+ case ChoixLangue.Bilingue:
157
+ case ChoixLangue.Anglais:
158
+ return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
159
+ default:
160
+ return 'cle_manquante'
161
+ }
162
+ })
163
+
164
+ const cleTradFr = computed(() => {
165
+ switch (langue.value) {
166
+ case ChoixLangue.Bilingue:
167
+ case ChoixLangue.Francais:
168
+ return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
169
+ default:
170
+ return 'cle_manquante'
171
+ }
172
+ })
173
+
174
+ const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
175
+ const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
176
+ </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "codevdesign",
3
- "version": "1.0.16",
3
+ "version": "1.0.17",
4
4
  "description": "Composants Vuetify 3 pour les projets Codev",
5
5
  "files": [
6
6
  "./**/*.vue",