codevdesign 1.0.48 → 1.0.49

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/csqcEntete.vue +187 -163
  2. package/package.json +1 -1
package/composants/csqcEntete.vue CHANGED
@@ -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
- <!-- Barre de retour -->
23
- <slot name="retour">
24
- <v-icon
25
- v-if="retour"
26
- size="large"
27
- start
28
- :color="iconeCouleur"
29
- icon="mdi-arrow-left-thin"
30
- @click="retournerMenu"
31
- />
32
- </slot>
33
-
34
- <div class="titre-bloc">
35
- <!-- Titre -->
36
- <slot name="titre">
37
- <span class="pl-3 titre-texte">{{ props.titre }}</span>
38
- </slot>
39
-
40
- <!-- État -->
41
- <slot name="etat">
42
- <span
43
- v-if="monEtat?.afficher"
44
- class="pl-10"
45
- >
46
- <v-btn
47
- size="small"
48
- :color="monEtat.couleur"
49
- variant="tonal"
50
- >
51
- {{ monEtat.texte }}
52
- </v-btn>
53
- </span>
54
- </slot>
55
-
56
- <!-- État secondaire -->
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
- <!-- Sous-titre -->
73
- <slot name="soustitre">
74
- <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
75
- </slot>
76
- </div>
77
- </v-toolbar-title>
78
- </v-col>
79
- </v-row>
80
-
81
- <!-- Barre en bas -->
82
- <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
83
- </v-app-bar>
84
- </template>
85
-
86
- <script setup lang="ts">
87
- import { useRouter } from 'vue-router'
88
- import { ref, computed } from 'vue'
89
-
90
- interface EnteteEtat {
91
- afficher: boolean
92
- couleur: string
93
- texte: string
94
- }
95
-
96
- interface EnteteEtatSecondaire {
97
- afficher: boolean
98
- couleur: string
99
- texte: string
100
- }
101
-
102
- const router = useRouter()
103
-
104
- const props = defineProps<{
105
- titre: string
106
- soustitre?: string
107
- retour?: string
108
- etat?: EnteteEtat
109
- couleur?: string // couleur de la barre (Vuetify color/hex)
110
- couleurTexte?: string
111
- couleurIcone?: string
112
- etatSecondaire?: EnteteEtatSecondaire
113
- }>()
114
-
115
- const titreCol = ref(12)
116
-
117
- // Fallbacks (tes valeurs actuelles)
118
- const barreCouleur = computed(() => props.couleur ?? 'white')
119
- const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
120
- const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
121
-
122
- const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
123
- const monEtatSecondaire = computed<EnteteEtatSecondaire>(
124
- () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
125
- )
126
-
127
- function retournerMenu() {
128
- if (props.retour) router.push({ name: props.retour })
129
- }
130
- function controlAffichage() {
131
- /* logique resize */
132
- }
133
- </script>
134
-
135
- <style scoped>
136
- .titre {
137
- font-size: 1.85rem;
138
- font-weight: bold;
139
- margin-bottom: 15px;
140
- }
141
- .titre-texte {
142
- color: var(--entete-texte, #223654);
143
- }
144
- .soustitre-texte {
145
- display: block;
146
- font-size: 1rem;
147
- font-weight: normal;
148
- color: var(--entete-texte, #223654);
149
- }
150
- .titre-bloc {
151
- display: inline-block;
152
- vertical-align: middle;
153
- padding-left: 12px;
154
- }
155
- /* Couleur de l’icône (retour) + hover */
156
- .v-icon {
157
- color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
158
- }
159
- .v-icon:hover {
160
- /* tu peux garder une couleur fixe ou calculer une teinte plus foncée si besoin */
161
- filter: brightness(0.85);
162
- }
163
- </style>
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "codevdesign",
3
- "version": "1.0.48",
3
+ "version": "1.0.49",
4
4
  "description": "Composants Vuetify 3 pour les projets Codev",
5
5
  "files": [
6
6
  "./**/*.vue",