codevdesign 1.0.66 → 1.0.67
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.
|
@@ -1,187 +1,229 @@
|
|
|
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="
|
|
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
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
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="auto"
|
|
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 mr-1">
|
|
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
|
+
overflow: hidden;
|
|
150
|
+
text-overflow: ellipsis;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
max-width: 100%;
|
|
153
|
+
}
|
|
154
|
+
.soustitre-texte {
|
|
155
|
+
display: block;
|
|
156
|
+
font-size: 1rem;
|
|
157
|
+
font-weight: normal;
|
|
158
|
+
color: var(--entete-texte, #223654);
|
|
159
|
+
}
|
|
160
|
+
.titre-bloc {
|
|
161
|
+
display: inline-block;
|
|
162
|
+
vertical-align: middle;
|
|
163
|
+
padding-left: 12px;
|
|
164
|
+
}
|
|
165
|
+
/* Couleur de l’icône (retour) + hover */
|
|
166
|
+
.v-icon {
|
|
167
|
+
color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
|
|
168
|
+
}
|
|
169
|
+
.v-icon:hover {
|
|
170
|
+
filter: brightness(0.85);
|
|
171
|
+
}
|
|
172
|
+
.entete-ligne {
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
flex-wrap: wrap;
|
|
176
|
+
width: 100%;
|
|
177
|
+
gap: 8px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.entete-gauche {
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
min-width: 0; /* important pour éviter overflow */
|
|
184
|
+
flex: 1;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.entete-droite {
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
gap: 12px;
|
|
191
|
+
padding-right: 16px;
|
|
192
|
+
flex-shrink: 0;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@media (max-width: 600px) {
|
|
196
|
+
.entete-gauche {
|
|
197
|
+
width: 100%;
|
|
198
|
+
}
|
|
199
|
+
.entete-droite {
|
|
200
|
+
width: 100%;
|
|
201
|
+
padding-right: 8px;
|
|
202
|
+
padding-left: 0;
|
|
203
|
+
justify-content: flex-end;
|
|
204
|
+
}
|
|
205
|
+
.titre {
|
|
206
|
+
font-size: 1.2rem;
|
|
207
|
+
}
|
|
208
|
+
.titre-bloc {
|
|
209
|
+
display: flex;
|
|
210
|
+
flex-direction: column;
|
|
211
|
+
align-items: flex-start;
|
|
212
|
+
min-width: 0;
|
|
213
|
+
max-width: 100%;
|
|
214
|
+
padding-left: 4px;
|
|
215
|
+
}
|
|
216
|
+
.titre-texte {
|
|
217
|
+
white-space: nowrap;
|
|
218
|
+
overflow: hidden;
|
|
219
|
+
text-overflow: ellipsis;
|
|
220
|
+
max-width: 100%;
|
|
221
|
+
}
|
|
222
|
+
:deep(.v-col) {
|
|
223
|
+
padding-left: 8px !important;
|
|
224
|
+
}
|
|
225
|
+
:deep(.v-toolbar-title__placeholder) {
|
|
226
|
+
padding-inline-start: 0 !important;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
</style>
|