codevdesign 1.0.48 → 1.0.50
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/composants/csqcEntete.vue +187 -163
- package/index.ts +78 -75
- package/package.json +1 -1
- /package/composants/{csqcOptionSwitch.vue → csqcSwitch.vue} +0 -0
|
@@ -1,163 +1,187 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<v-app-bar
|
|
3
|
-
:color="barreCouleur"
|
|
4
|
-
class="px-0 mx-0"
|
|
5
|
-
:style="{
|
|
6
|
-
position: 'sticky',
|
|
7
|
-
// variables CSS pour les couleurs dynamiques
|
|
8
|
-
'--entete-texte': texteCouleur,
|
|
9
|
-
'--entete-icone': iconeCouleur,
|
|
10
|
-
}"
|
|
11
|
-
height="82px"
|
|
12
|
-
>
|
|
13
|
-
<v-row
|
|
14
|
-
class="pt-2"
|
|
15
|
-
@resize="controlAffichage"
|
|
16
|
-
>
|
|
17
|
-
<v-col
|
|
18
|
-
:cols="titreCol"
|
|
19
|
-
class="pr-0 mr-0 pl-5"
|
|
20
|
-
>
|
|
21
|
-
<v-toolbar-title class="titre">
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
interface
|
|
97
|
-
afficher: boolean
|
|
98
|
-
couleur: string
|
|
99
|
-
texte: string
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
)
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
color: var(--entete-texte, #223654);
|
|
149
|
-
}
|
|
150
|
-
.
|
|
151
|
-
display:
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
.
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<v-app-bar
|
|
3
|
+
:color="barreCouleur"
|
|
4
|
+
class="px-0 mx-0"
|
|
5
|
+
:style="{
|
|
6
|
+
position: 'sticky',
|
|
7
|
+
// variables CSS pour les couleurs dynamiques
|
|
8
|
+
'--entete-texte': texteCouleur,
|
|
9
|
+
'--entete-icone': iconeCouleur,
|
|
10
|
+
}"
|
|
11
|
+
height="82px"
|
|
12
|
+
>
|
|
13
|
+
<v-row
|
|
14
|
+
class="pt-2"
|
|
15
|
+
@resize="controlAffichage"
|
|
16
|
+
>
|
|
17
|
+
<v-col
|
|
18
|
+
:cols="titreCol"
|
|
19
|
+
class="pr-0 mr-0 pl-5"
|
|
20
|
+
>
|
|
21
|
+
<v-toolbar-title class="titre">
|
|
22
|
+
<div class="entete-ligne">
|
|
23
|
+
<!-- GAUCHE -->
|
|
24
|
+
<div class="entete-gauche">
|
|
25
|
+
<!-- Barre de retour -->
|
|
26
|
+
<slot name="retour">
|
|
27
|
+
<v-icon
|
|
28
|
+
v-if="retour"
|
|
29
|
+
size="large"
|
|
30
|
+
start
|
|
31
|
+
:color="iconeCouleur"
|
|
32
|
+
icon="mdi-arrow-left-thin"
|
|
33
|
+
@click="retournerMenu"
|
|
34
|
+
/>
|
|
35
|
+
</slot>
|
|
36
|
+
|
|
37
|
+
<div class="titre-bloc">
|
|
38
|
+
<slot name="titre">
|
|
39
|
+
<span class="pl-3 titre-texte">{{ props.titre }}</span>
|
|
40
|
+
</slot>
|
|
41
|
+
|
|
42
|
+
<slot name="etat">
|
|
43
|
+
<span
|
|
44
|
+
v-if="monEtat?.afficher"
|
|
45
|
+
class="pl-10"
|
|
46
|
+
>
|
|
47
|
+
<v-btn
|
|
48
|
+
size="small"
|
|
49
|
+
:color="monEtat.couleur"
|
|
50
|
+
variant="tonal"
|
|
51
|
+
>
|
|
52
|
+
{{ monEtat.texte }}
|
|
53
|
+
</v-btn>
|
|
54
|
+
</span>
|
|
55
|
+
</slot>
|
|
56
|
+
|
|
57
|
+
<slot name="etatSecondaire">
|
|
58
|
+
<span
|
|
59
|
+
v-if="monEtatSecondaire?.afficher"
|
|
60
|
+
class="pl-3"
|
|
61
|
+
>
|
|
62
|
+
<v-btn
|
|
63
|
+
size="small"
|
|
64
|
+
:color="monEtatSecondaire.couleur"
|
|
65
|
+
variant="tonal"
|
|
66
|
+
>
|
|
67
|
+
{{ monEtatSecondaire.texte }}
|
|
68
|
+
</v-btn>
|
|
69
|
+
</span>
|
|
70
|
+
</slot>
|
|
71
|
+
|
|
72
|
+
<slot name="soustitre">
|
|
73
|
+
<span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
|
|
74
|
+
</slot>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<!-- DROITE -->
|
|
79
|
+
<div class="entete-droite">
|
|
80
|
+
<slot name="droite" />
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</v-toolbar-title>
|
|
84
|
+
</v-col>
|
|
85
|
+
</v-row>
|
|
86
|
+
|
|
87
|
+
<!-- Barre en bas -->
|
|
88
|
+
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
|
|
89
|
+
</v-app-bar>
|
|
90
|
+
</template>
|
|
91
|
+
|
|
92
|
+
<script setup lang="ts">
|
|
93
|
+
import { useRouter } from 'vue-router'
|
|
94
|
+
import { ref, computed } from 'vue'
|
|
95
|
+
|
|
96
|
+
interface EnteteEtat {
|
|
97
|
+
afficher: boolean
|
|
98
|
+
couleur: string
|
|
99
|
+
texte: string
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
interface EnteteEtatSecondaire {
|
|
103
|
+
afficher: boolean
|
|
104
|
+
couleur: string
|
|
105
|
+
texte: string
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const router = useRouter()
|
|
109
|
+
|
|
110
|
+
const props = defineProps<{
|
|
111
|
+
titre: string
|
|
112
|
+
soustitre?: string
|
|
113
|
+
retour?: string
|
|
114
|
+
etat?: EnteteEtat
|
|
115
|
+
couleur?: string // couleur de la barre (Vuetify color/hex)
|
|
116
|
+
couleurTexte?: string
|
|
117
|
+
couleurIcone?: string
|
|
118
|
+
etatSecondaire?: EnteteEtatSecondaire
|
|
119
|
+
}>()
|
|
120
|
+
|
|
121
|
+
const titreCol = ref(12)
|
|
122
|
+
|
|
123
|
+
// Fallbacks (tes valeurs actuelles)
|
|
124
|
+
const barreCouleur = computed(() => props.couleur ?? 'white')
|
|
125
|
+
const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
|
|
126
|
+
const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
|
|
127
|
+
|
|
128
|
+
const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
|
|
129
|
+
const monEtatSecondaire = computed<EnteteEtatSecondaire>(
|
|
130
|
+
() => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
|
|
131
|
+
)
|
|
132
|
+
|
|
133
|
+
function retournerMenu() {
|
|
134
|
+
if (props.retour) router.push({ name: props.retour })
|
|
135
|
+
}
|
|
136
|
+
function controlAffichage() {
|
|
137
|
+
/* logique resize */
|
|
138
|
+
}
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
<style scoped>
|
|
142
|
+
.titre {
|
|
143
|
+
font-size: 1.85rem;
|
|
144
|
+
font-weight: bold;
|
|
145
|
+
margin-bottom: 15px;
|
|
146
|
+
}
|
|
147
|
+
.titre-texte {
|
|
148
|
+
color: var(--entete-texte, #223654);
|
|
149
|
+
}
|
|
150
|
+
.soustitre-texte {
|
|
151
|
+
display: block;
|
|
152
|
+
font-size: 1rem;
|
|
153
|
+
font-weight: normal;
|
|
154
|
+
color: var(--entete-texte, #223654);
|
|
155
|
+
}
|
|
156
|
+
.titre-bloc {
|
|
157
|
+
display: inline-block;
|
|
158
|
+
vertical-align: middle;
|
|
159
|
+
padding-left: 12px;
|
|
160
|
+
}
|
|
161
|
+
/* Couleur de l’icône (retour) + hover */
|
|
162
|
+
.v-icon {
|
|
163
|
+
color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
|
|
164
|
+
}
|
|
165
|
+
.v-icon:hover {
|
|
166
|
+
filter: brightness(0.85);
|
|
167
|
+
}
|
|
168
|
+
.entete-ligne {
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
width: 100%;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.entete-gauche {
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
min-width: 0; /* important pour éviter overflow */
|
|
178
|
+
flex: 1;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.entete-droite {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
gap: 12px;
|
|
185
|
+
padding-right: 16px;
|
|
186
|
+
}
|
|
187
|
+
</style>
|
package/index.ts
CHANGED
|
@@ -1,75 +1,78 @@
|
|
|
1
|
-
import csqcAlerteErreur from './composants/csqcAlerteErreur.vue'
|
|
2
|
-
import csqcDialogue from './composants/csqcDialogue.vue'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
|
|
23
|
-
import
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
import
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
import
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
import
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
1
|
+
import csqcAlerteErreur from './composants/csqcAlerteErreur.vue'
|
|
2
|
+
import csqcDialogue from './composants/csqcDialogue.vue'
|
|
3
|
+
|
|
4
|
+
// à enlever éventuellement. Remplacé par csqcSwitch
|
|
5
|
+
import csqcOptionSwitch from './composants/csqcSwitch.vue'
|
|
6
|
+
import csqcRecherche from './composants/csqcRecherche.vue'
|
|
7
|
+
import csqcSnackbar from './composants/csqcSnackbar.vue'
|
|
8
|
+
import csqcTiroir from './composants/csqcTiroir.vue'
|
|
9
|
+
import pivEntete from './composants/gabarit/pivEntete.vue'
|
|
10
|
+
import pivFooter from './composants/gabarit/pivPiedPage.vue'
|
|
11
|
+
import csqcMenu from './composants/gabarit/csqcMenu.vue'
|
|
12
|
+
import csqcConfirmation from './composants/csqcConfirmation.vue'
|
|
13
|
+
import csqcSaisie from './composants/csqcModaleSaisie.vue'
|
|
14
|
+
import csqcDate from './composants/csqcDate.vue'
|
|
15
|
+
import csqcTable from './composants/csqcTable/csqcTable.vue'
|
|
16
|
+
import csqcCodeBudgetaire from './composants/csqcCodeBudgetaireGenerique.vue'
|
|
17
|
+
import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
|
|
18
|
+
import csqcAide from './composants/csqcAide.vue'
|
|
19
|
+
import csqcEntete from './composants/csqcEntete.vue'
|
|
20
|
+
import csqcTexteBilingue from './composants/csqcTexteBilingue.vue'
|
|
21
|
+
import csqcSwitch from './composants/csqcSwitch.vue'
|
|
22
|
+
|
|
23
|
+
import csqcEditeurTexteRiche from './composants/csqcEditeurTexteRiche.vue'
|
|
24
|
+
import csqcImportCSV from './composants/csqcImportCSV.vue'
|
|
25
|
+
import csqcRechercheUtilisateur from './composants/csqcRechercheUtilisateur.vue'
|
|
26
|
+
import validateurs from './composants/validateurs'
|
|
27
|
+
|
|
28
|
+
// modèles
|
|
29
|
+
import NotificationGabaritDefaut from './modeles/notificationGabaritDefaut'
|
|
30
|
+
import modeleSnackbar from './modeles/composants/snackbar'
|
|
31
|
+
import modeleDatatableColonne from './modeles/composants/datatableColonne'
|
|
32
|
+
import apiReponse from './modeles/apiReponse'
|
|
33
|
+
import data from './modeles/data'
|
|
34
|
+
import response from './modeles/response'
|
|
35
|
+
|
|
36
|
+
// outils
|
|
37
|
+
import csqcRafraichisseurToken from './outils/rafraichisseurToken'
|
|
38
|
+
import csqcOutils from './outils/csqcOutils'
|
|
39
|
+
|
|
40
|
+
// i18n
|
|
41
|
+
import csqcEn from './locales/en.json'
|
|
42
|
+
import csqcFr from './locales/fr.json'
|
|
43
|
+
|
|
44
|
+
export {
|
|
45
|
+
csqcFr,
|
|
46
|
+
csqcEn,
|
|
47
|
+
csqcAlerteErreur,
|
|
48
|
+
csqcDialogue,
|
|
49
|
+
csqcConfirmation,
|
|
50
|
+
csqcSaisie,
|
|
51
|
+
csqcDate,
|
|
52
|
+
csqcOptionSwitch, // a enlever eventuellement
|
|
53
|
+
csqcSwitch,
|
|
54
|
+
csqcRecherche,
|
|
55
|
+
csqcSnackbar,
|
|
56
|
+
csqcTable,
|
|
57
|
+
csqcTiroir,
|
|
58
|
+
csqcMenu,
|
|
59
|
+
csqcCodeBudgetaire,
|
|
60
|
+
csqcChaise,
|
|
61
|
+
pivFooter,
|
|
62
|
+
pivEntete,
|
|
63
|
+
csqcAide,
|
|
64
|
+
csqcEntete,
|
|
65
|
+
csqcTexteBilingue,
|
|
66
|
+
csqcEditeurTexteRiche,
|
|
67
|
+
validateurs,
|
|
68
|
+
csqcImportCSV,
|
|
69
|
+
csqcRechercheUtilisateur,
|
|
70
|
+
csqcRafraichisseurToken,
|
|
71
|
+
csqcOutils,
|
|
72
|
+
modeleSnackbar,
|
|
73
|
+
modeleDatatableColonne as colonne,
|
|
74
|
+
apiReponse,
|
|
75
|
+
data,
|
|
76
|
+
response,
|
|
77
|
+
NotificationGabaritDefaut,
|
|
78
|
+
}
|
package/package.json
CHANGED
|
File without changes
|