codevdesign 0.0.96 → 0.0.98

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.
@@ -121,6 +121,7 @@
121
121
  import axios from '@/outils/appAxios'
122
122
  import type { Unite } from '@/codev/modeles/unite'
123
123
  import { useI18n } from 'vue-i18n'
124
+ const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
124
125
 
125
126
  interface Chaise {
126
127
  id: number
@@ -130,7 +131,7 @@
130
131
  uniteId: number
131
132
  chaiseId: number
132
133
  }
133
- const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
134
+
134
135
  /** Props */
135
136
  const props = defineProps<{
136
137
  activerDivPreferences?: boolean
@@ -327,6 +328,7 @@
327
328
  afficherErreur.value = true
328
329
  await nextTick()
329
330
  }
331
+ modale.value?.fermer()
330
332
  }
331
333
 
332
334
  onMounted(async () => {
@@ -1,212 +1,212 @@
1
- <template>
2
- <div>
3
- <v-row
4
- dense
5
- class="pt-0 mt-0"
6
- >
7
- <v-col
8
- cols="12"
9
- sm="auto"
10
- >
11
- <slot name="recherche"></slot>
12
- <v-text-field
13
- v-if="afficher"
14
- v-model="rechercheLocale"
15
- :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
16
- single-line
17
- density="compact"
18
- hide-details
19
- clearable
20
- :rounded="0"
21
- variant="outlined"
22
- max-width="640"
23
- min-width="500"
24
- class="BarreRecherche"
25
- :loading="chargement"
26
- :disabled="chargement || desactiver"
27
- >
28
- <template #append>
29
- <v-btn
30
- class="BarreRechercheBackIcone"
31
- :loading="chargement"
32
- :disabled="chargement || desactiver"
33
- >
34
- <v-icon
35
- class="BarreRechercheIcone"
36
- icon="mdi-magnify"
37
- />
38
- </v-btn>
39
- </template>
40
- </v-text-field>
41
- </v-col>
42
- <!-- Entre recherche et ajouté-->
43
- <v-col
44
- cols="12"
45
- sm="auto"
46
- class="pt-1 mt-0 pb-0 mb-0"
47
- >
48
- <slot name="milieu" />
49
- </v-col>
50
-
51
- <!-- Affichage des boutons et icônes-->
52
- <v-col
53
- cols="12"
54
- sm="auto"
55
- class="flex-grow-1 d-flex justify-end"
56
- >
57
- <slot name="droite" />
58
- </v-col>
59
- </v-row>
60
- <v-row
61
- dense
62
- class="pt-0 mt-0"
63
- >
64
- <v-col
65
- cols="12"
66
- :lg="rechercheAvanceeLargeur"
67
- >
68
- <v-expansion-panels
69
- v-if="rechercheAvancee"
70
- static
71
- :readonly="chargement || desactiver"
72
- expand-icon=""
73
- @update:model-value="onPanelChange"
74
- >
75
- <v-expansion-panel
76
- flat
77
- elevation="0"
78
- >
79
- <v-expansion-panel-title
80
- style="color: #095797"
81
- class="pl-0 ml-0"
82
- ><slot name="rechercheAvanceeTitre">
83
- <span
84
- style="text-decoration: underline"
85
- v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
86
- ></span>
87
- <slot name="rechercheAvanceeApresTitre"></slot
88
- ></slot>
89
- </v-expansion-panel-title>
90
- <v-expansion-panel-text :style="rechercheAvanceeStyle">
91
- <slot name="rechercheAvancee"></slot>
92
- </v-expansion-panel-text>
93
- </v-expansion-panel>
94
- </v-expansion-panels>
95
- </v-col>
96
- </v-row>
97
- </div>
98
- </template>
99
-
100
- <script lang="ts" setup>
101
- import { ref, watch } from 'vue'
102
-
103
- // Props
104
- const props = defineProps({
105
- afficher: {
106
- type: Boolean,
107
- required: false,
108
- default: true,
109
- },
110
- rechercheTexte: {
111
- type: String,
112
- required: false,
113
- default: '',
114
- },
115
- rechercheAvanceeTexte: {
116
- type: String,
117
- required: false,
118
- default: '',
119
- },
120
- rechercheAvanceeLargeur: {
121
- type: Number,
122
- required: false,
123
- default: 12,
124
- },
125
- chargement: {
126
- type: Boolean,
127
- required: false,
128
- default: false,
129
- },
130
- desactiver: {
131
- type: Boolean,
132
- required: false,
133
- default: false,
134
- },
135
- recherche: {
136
- type: String,
137
- required: false,
138
- default: '',
139
- },
140
- rechercheAvancee: {
141
- type: Boolean,
142
- required: false,
143
- default: false,
144
- },
145
- rechercheAvanceeStyle: {
146
- type: String,
147
- required: false,
148
- default: '',
149
- },
150
- })
151
-
152
- const emit = defineEmits<{
153
- (e: 'update:recherche', recherche: string): void
154
- (e: 'panneau:etat', isOpen: boolean): void // événement pour l'ouverture/fermeture du panneau
155
- }>()
156
-
157
- // Création d'une variable locale pour gérer la recherche
158
- const rechercheLocale = ref(props.recherche)
159
-
160
- // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
161
- watch(
162
- () => props.recherche,
163
- nouvelleValeur => {
164
- rechercheLocale.value = nouvelleValeur
165
- },
166
- )
167
-
168
- // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
169
- watch(rechercheLocale, nouvelleValeur => {
170
- emit('update:recherche', nouvelleValeur!)
171
- })
172
-
173
- // Fonction pour émettre l'événement d'ouverture/fermeture du panneau
174
- const onPanelChange = (val: unknown) => {
175
- if (typeof val === 'string' || typeof val === 'number' || val === null) {
176
- const isOpen = val !== null && val !== ''
177
- emit('panneau:etat', isOpen)
178
- } else {
179
- emit('panneau:etat', false)
180
- }
181
- }
182
- </script>
183
-
184
- <style lang="css">
185
- /* barre de recherche design QC*/
186
- .BarreRecherche {
187
- min-height: 40px;
188
- }
189
-
190
- .BarreRechercheBackIcone {
191
- border-right: 1px solid #808a9d;
192
- border-top: 1px solid #808a9d;
193
- border-bottom: 1px solid #808a9d;
194
- background-color: #095797 !important;
195
- height: 40px !important;
196
- width: 40px !important;
197
- max-width: 40px !important;
198
- min-width: 40px !important;
199
- padding-right: 0 !important;
200
- padding-left: 0 !important;
201
- border-radius: 0;
202
- margin-left: -16px;
203
- }
204
-
205
- /* icone loupe */
206
- .BarreRechercheIcone {
207
- font-size: 34px !important;
208
- margin-left: 1px !important;
209
- margin-top: 2px !important;
210
- color: white !important;
211
- }
212
- </style>
1
+ <template>
2
+ <div>
3
+ <v-row
4
+ dense
5
+ class="pt-0 mt-0"
6
+ >
7
+ <v-col
8
+ cols="12"
9
+ sm="auto"
10
+ >
11
+ <slot name="recherche"></slot>
12
+ <v-text-field
13
+ v-if="afficher"
14
+ v-model="rechercheLocale"
15
+ :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
16
+ single-line
17
+ density="compact"
18
+ hide-details
19
+ clearable
20
+ :rounded="0"
21
+ variant="outlined"
22
+ max-width="640"
23
+ min-width="500"
24
+ class="BarreRecherche"
25
+ :loading="chargement"
26
+ :disabled="chargement || desactiver"
27
+ >
28
+ <template #append>
29
+ <v-btn
30
+ class="BarreRechercheBackIcone"
31
+ :loading="chargement"
32
+ :disabled="chargement || desactiver"
33
+ >
34
+ <v-icon
35
+ class="BarreRechercheIcone"
36
+ icon="mdi-magnify"
37
+ />
38
+ </v-btn>
39
+ </template>
40
+ </v-text-field>
41
+ </v-col>
42
+ <!-- Entre recherche et ajouté-->
43
+ <v-col
44
+ cols="12"
45
+ sm="auto"
46
+ class="pt-1 mt-0 pb-0 mb-0"
47
+ >
48
+ <slot name="milieu" />
49
+ </v-col>
50
+
51
+ <!-- Affichage des boutons et icônes-->
52
+ <v-col
53
+ cols="12"
54
+ sm="auto"
55
+ class="flex-grow-1 d-flex justify-end"
56
+ >
57
+ <slot name="droite" />
58
+ </v-col>
59
+ </v-row>
60
+ <v-row
61
+ dense
62
+ class="pt-0 mt-0"
63
+ >
64
+ <v-col
65
+ cols="12"
66
+ :lg="rechercheAvanceeLargeur"
67
+ >
68
+ <v-expansion-panels
69
+ v-if="rechercheAvancee"
70
+ static
71
+ :readonly="chargement || desactiver"
72
+ expand-icon=""
73
+ @update:model-value="onPanelChange"
74
+ >
75
+ <v-expansion-panel
76
+ flat
77
+ elevation="0"
78
+ >
79
+ <v-expansion-panel-title
80
+ style="color: #095797"
81
+ class="pl-0 ml-0"
82
+ ><slot name="rechercheAvanceeTitre">
83
+ <span
84
+ style="text-decoration: underline"
85
+ v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
86
+ ></span>
87
+ <slot name="rechercheAvanceeApresTitre"></slot
88
+ ></slot>
89
+ </v-expansion-panel-title>
90
+ <v-expansion-panel-text :style="rechercheAvanceeStyle">
91
+ <slot name="rechercheAvancee"></slot>
92
+ </v-expansion-panel-text>
93
+ </v-expansion-panel>
94
+ </v-expansion-panels>
95
+ </v-col>
96
+ </v-row>
97
+ </div>
98
+ </template>
99
+
100
+ <script lang="ts" setup>
101
+ import { ref, watch } from 'vue'
102
+
103
+ // Props
104
+ const props = defineProps({
105
+ afficher: {
106
+ type: Boolean,
107
+ required: false,
108
+ default: true,
109
+ },
110
+ rechercheTexte: {
111
+ type: String,
112
+ required: false,
113
+ default: '',
114
+ },
115
+ rechercheAvanceeTexte: {
116
+ type: String,
117
+ required: false,
118
+ default: '',
119
+ },
120
+ rechercheAvanceeLargeur: {
121
+ type: Number,
122
+ required: false,
123
+ default: 12,
124
+ },
125
+ chargement: {
126
+ type: Boolean,
127
+ required: false,
128
+ default: false,
129
+ },
130
+ desactiver: {
131
+ type: Boolean,
132
+ required: false,
133
+ default: false,
134
+ },
135
+ recherche: {
136
+ type: String,
137
+ required: false,
138
+ default: '',
139
+ },
140
+ rechercheAvancee: {
141
+ type: Boolean,
142
+ required: false,
143
+ default: false,
144
+ },
145
+ rechercheAvanceeStyle: {
146
+ type: String,
147
+ required: false,
148
+ default: '',
149
+ },
150
+ })
151
+
152
+ const emit = defineEmits<{
153
+ (e: 'update:recherche', recherche: string): void
154
+ (e: 'panneau:etat', isOpen: boolean): void // événement pour l'ouverture/fermeture du panneau
155
+ }>()
156
+
157
+ // Création d'une variable locale pour gérer la recherche
158
+ const rechercheLocale = ref(props.recherche)
159
+
160
+ // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
161
+ watch(
162
+ () => props.recherche,
163
+ nouvelleValeur => {
164
+ rechercheLocale.value = nouvelleValeur
165
+ },
166
+ )
167
+
168
+ // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
169
+ watch(rechercheLocale, nouvelleValeur => {
170
+ emit('update:recherche', nouvelleValeur!)
171
+ })
172
+
173
+ // Fonction pour émettre l'événement d'ouverture/fermeture du panneau
174
+ const onPanelChange = (val: unknown) => {
175
+ if (typeof val === 'string' || typeof val === 'number' || val === null) {
176
+ const isOpen = val !== null && val !== ''
177
+ emit('panneau:etat', isOpen)
178
+ } else {
179
+ emit('panneau:etat', false)
180
+ }
181
+ }
182
+ </script>
183
+
184
+ <style lang="css">
185
+ /* barre de recherche design QC*/
186
+ .BarreRecherche {
187
+ min-height: 40px;
188
+ }
189
+
190
+ .BarreRechercheBackIcone {
191
+ border-right: 1px solid #808a9d;
192
+ border-top: 1px solid #808a9d;
193
+ border-bottom: 1px solid #808a9d;
194
+ background-color: #095797 !important;
195
+ height: 40px !important;
196
+ width: 40px !important;
197
+ max-width: 40px !important;
198
+ min-width: 40px !important;
199
+ padding-right: 0 !important;
200
+ padding-left: 0 !important;
201
+ border-radius: 0;
202
+ margin-left: -16px;
203
+ }
204
+
205
+ /* icone loupe */
206
+ .BarreRechercheIcone {
207
+ font-size: 34px !important;
208
+ margin-left: 1px !important;
209
+ margin-top: 2px !important;
210
+ color: white !important;
211
+ }
212
+ </style>