codevdesign 0.0.65 → 0.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.
Files changed (3) hide show
  1. package/composants/csqcEntete.vue +141 -127
  2. package/composants/csqcRecherche.vue +0 -1
  3. package/package.json +1 -1
package/composants/csqcEntete.vue CHANGED
@@ -1,127 +1,141 @@
1
- <template>
2
- <v-app-bar
3
- color="white"
4
- class="px-0 mx-0"
5
- :style="{ position: 'sticky' }"
6
- height="82px"
7
- >
8
- <v-row
9
- class="pt-2"
10
- @resize="controlAffichage"
11
- >
12
- <v-col
13
- :cols="titreCol"
14
- class="pr-0 mr-0 pl-5"
15
- >
16
- <v-toolbar-title class="titre">
17
- <!-- Barre de retour -->
18
- <slot name="retour">
19
- <v-icon
20
- v-if="retour"
21
- size="large"
22
- start
23
- color="grisMoyen"
24
- icon="mdi-arrow-left-thin"
25
- @click="retournerMenu"
26
- /></slot>
27
-
28
- <div class="titre-bloc">
29
- <!-- Titre -->
30
- <slot name="titre"
31
- ><span class="pl-3"> {{ props.titre }}</span></slot
32
- >
33
-
34
- <!-- État -->
35
- <slot name="etat">
36
- <span
37
- v-if="monEtat?.afficher"
38
- class="pl-10"
39
- >
40
- <v-btn
41
- size="small"
42
- :color="monEtat.couleur"
43
- variant="tonal"
44
- >
45
- {{ monEtat.texte }}
46
- </v-btn>
47
- </span></slot
48
- >
49
-
50
- <!-- Sous-titre -->
51
- <slot name="soustitre"
52
- ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
53
- >
54
- </div>
55
- </v-toolbar-title>
56
- </v-col>
57
- </v-row>
58
- <!-- Barre en bas -->
59
- <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
60
- </v-app-bar>
61
- </template>
62
-
63
- <script setup lang="ts">
64
- import { useRouter } from 'vue-router'
65
- import { ref, computed } from 'vue'
66
-
67
- // Déclaration de l'interface
68
- interface EnteteEtat {
69
- afficher: boolean
70
- couleur: string
71
- texte: string
72
- }
73
-
74
- const router = useRouter()
75
-
76
- const props = defineProps<{
77
- titre: string
78
- soustitre?: string
79
- retour?: string
80
- etat?: EnteteEtat
81
- }>()
82
-
83
- const titreCol = ref(12)
84
-
85
- // État calculé basé sur la prop, avec fallback
86
- const monEtat = computed<EnteteEtat>(() => {
87
- return (
88
- props.etat ?? {
89
- afficher: false,
90
- couleur: 'primary',
91
- texte: 'test',
92
- }
93
- )
94
- })
95
-
96
- function retournerMenu() {
97
- if (props.retour) {
98
- router.push({ name: props.retour })
99
- }
100
- }
101
-
102
- function controlAffichage() {
103
- // logique à l’événement de redimensionnement
104
- }
105
- </script>
106
- <style lang="css" scoped>
107
- .titre {
108
- font-size: 1.85rem;
109
- color: #223654;
110
- font-weight: bold;
111
- margin-bottom: 15px;
112
- }
113
- .soustitre {
114
- display: block;
115
- font-size: 1rem;
116
- color: #223654;
117
- font-weight: normal;
118
- }
119
- .titre-bloc {
120
- display: inline-block;
121
- vertical-align: middle;
122
- padding-left: 12px;
123
- }
124
- .v-icon:hover {
125
- color: #095797 !important;
126
- }
127
- </style>
1
+ <template>
2
+ <v-app-bar
3
+ color="white"
4
+ class="px-0 mx-0"
5
+ :style="{ position: 'sticky' }"
6
+ height="82px"
7
+ >
8
+ <v-row
9
+ class="pt-2"
10
+ @resize="controlAffichage"
11
+ >
12
+ <v-col
13
+ :cols="titreCol"
14
+ class="pr-0 mr-0 pl-5"
15
+ >
16
+ <v-toolbar-title class="titre">
17
+ <!-- Barre de retour -->
18
+ <slot name="retour">
19
+ <v-icon
20
+ v-if="retour"
21
+ size="large"
22
+ start
23
+ color="grisMoyen"
24
+ icon="mdi-arrow-left-thin"
25
+ @click="retournerMenu"
26
+ /></slot>
27
+
28
+ <div class="titre-bloc">
29
+ <!-- Titre -->
30
+ <slot name="titre"
31
+ ><span class="pl-3"> {{ props.titre }}</span></slot
32
+ >
33
+
34
+ <!-- État -->
35
+ <slot name="etat">
36
+ <span
37
+ v-if="monEtat?.afficher"
38
+ class="pl-10"
39
+ >
40
+ <v-btn
41
+ size="small"
42
+ :color="monEtat.couleur"
43
+ variant="tonal"
44
+ >
45
+ {{ monEtat.texte }}
46
+ </v-btn>
47
+ </span></slot
48
+ >
49
+ <!-- État secondaire-->
50
+ <slot name="etatSecondaire">
51
+ <span
52
+ v-if="monEtatSecondaire?.afficher"
53
+ class="pl-3"
54
+ >
55
+ <v-btn
56
+ size="small"
57
+ :color="monEtatSecondaire.couleur"
58
+ variant="tonal"
59
+ >
60
+ {{ monEtatSecondaire.texte }}
61
+ </v-btn>
62
+ </span></slot
63
+ >
64
+ <!-- Sous-titre -->
65
+ <slot name="soustitre"
66
+ ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
67
+ >
68
+ </div>
69
+ </v-toolbar-title>
70
+ </v-col>
71
+ </v-row>
72
+ <!-- Barre en bas -->
73
+ <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
74
+ </v-app-bar>
75
+ </template>
76
+
77
+ <script setup lang="ts">
78
+ import { useRouter } from 'vue-router'
79
+ import { ref, computed } from 'vue'
80
+
81
+ // Déclaration de l'interface
82
+ interface EnteteEtat {
83
+ afficher: boolean
84
+ couleur: string
85
+ texte: string
86
+ }
87
+
88
+ const router = useRouter()
89
+
90
+ const props = defineProps<{
91
+ titre: string
92
+ soustitre?: string
93
+ retour?: string
94
+ etat?: EnteteEtat
95
+ }>()
96
+
97
+ const titreCol = ref(12)
98
+
99
+ // État calculé basé sur la prop, avec fallback
100
+ const monEtat = computed<EnteteEtat>(() => {
101
+ return (
102
+ props.etat ?? {
103
+ afficher: false,
104
+ couleur: 'primary',
105
+ texte: 'test',
106
+ }
107
+ )
108
+ })
109
+
110
+ function retournerMenu() {
111
+ if (props.retour) {
112
+ router.push({ name: props.retour })
113
+ }
114
+ }
115
+
116
+ function controlAffichage() {
117
+ // logique à l’événement de redimensionnement
118
+ }
119
+ </script>
120
+ <style lang="css" scoped>
121
+ .titre {
122
+ font-size: 1.85rem;
123
+ color: #223654;
124
+ font-weight: bold;
125
+ margin-bottom: 15px;
126
+ }
127
+ .soustitre {
128
+ display: block;
129
+ font-size: 1rem;
130
+ color: #223654;
131
+ font-weight: normal;
132
+ }
133
+ .titre-bloc {
134
+ display: inline-block;
135
+ vertical-align: middle;
136
+ padding-left: 12px;
137
+ }
138
+ .v-icon:hover {
139
+ color: #095797 !important;
140
+ }
141
+ </style>
package/composants/csqcRecherche.vue CHANGED
@@ -87,7 +87,6 @@
87
87
  ></slot>
88
88
  </v-expansion-panel-title>
89
89
  <v-expansion-panel-text :style="rechercheAvanceeStyle">
90
- #rechercheAvancee
91
90
  <slot name="rechercheAvancee"></slot>
92
91
  </v-expansion-panel-text>
93
92
  </v-expansion-panel>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "codevdesign",
3
- "version": "0.0.65",
3
+ "version": "0.0.67",
4
4
  "description": "Composants Vuetify 3 pour les projets Codev",
5
5
  "files": [
6
6
  "./**/*.vue",