codevdesign 0.0.70 → 0.0.72
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/assets/csqc.css +6 -0
- package/composants/csqcEditeurTexteRiche.vue +318 -326
- package/composants/csqcEntete.vue +158 -158
- package/composants/csqcRecherche.vue +206 -206
- package/composants/csqcTable/csqcTable.vue +34 -1
- package/composants/csqcTiroir.vue +155 -155
- package/index.ts +71 -71
- package/package.json +2 -2
|
@@ -1,206 +1,206 @@
|
|
|
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-model="rechercheLocale"
|
|
14
|
-
:label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
|
|
15
|
-
single-line
|
|
16
|
-
density="compact"
|
|
17
|
-
hide-details
|
|
18
|
-
clearable
|
|
19
|
-
:rounded="0"
|
|
20
|
-
variant="outlined"
|
|
21
|
-
max-width="640"
|
|
22
|
-
min-width="500"
|
|
23
|
-
class="BarreRecherche"
|
|
24
|
-
:loading="chargement"
|
|
25
|
-
:disabled="chargement || desactiver"
|
|
26
|
-
>
|
|
27
|
-
<template #append>
|
|
28
|
-
<v-btn
|
|
29
|
-
class="BarreRechercheBackIcone"
|
|
30
|
-
:loading="chargement"
|
|
31
|
-
:disabled="chargement || desactiver"
|
|
32
|
-
>
|
|
33
|
-
<v-icon
|
|
34
|
-
class="BarreRechercheIcone"
|
|
35
|
-
icon="mdi-magnify"
|
|
36
|
-
/>
|
|
37
|
-
</v-btn>
|
|
38
|
-
</template>
|
|
39
|
-
</v-text-field>
|
|
40
|
-
</v-col>
|
|
41
|
-
<!-- Entre recherche et ajouté-->
|
|
42
|
-
<v-col
|
|
43
|
-
cols="12"
|
|
44
|
-
sm="auto"
|
|
45
|
-
class="pt-1 mt-0 pb-0 mb-0"
|
|
46
|
-
>
|
|
47
|
-
<slot name="milieu" />
|
|
48
|
-
</v-col>
|
|
49
|
-
|
|
50
|
-
<!-- Affichage des boutons et icônes-->
|
|
51
|
-
<v-col
|
|
52
|
-
cols="12"
|
|
53
|
-
sm="auto"
|
|
54
|
-
class="flex-grow-1 d-flex justify-end"
|
|
55
|
-
>
|
|
56
|
-
<slot name="droite" />
|
|
57
|
-
</v-col>
|
|
58
|
-
</v-row>
|
|
59
|
-
<v-row
|
|
60
|
-
dense
|
|
61
|
-
class="pt-0 mt-0"
|
|
62
|
-
>
|
|
63
|
-
<v-col
|
|
64
|
-
cols="12"
|
|
65
|
-
:lg="rechercheAvanceeLargeur"
|
|
66
|
-
>
|
|
67
|
-
<v-expansion-panels
|
|
68
|
-
v-if="rechercheAvancee"
|
|
69
|
-
static
|
|
70
|
-
:readonly="chargement || desactiver"
|
|
71
|
-
expand-icon=""
|
|
72
|
-
@update:model-value="onPanelChange"
|
|
73
|
-
>
|
|
74
|
-
<v-expansion-panel
|
|
75
|
-
flat
|
|
76
|
-
elevation="0"
|
|
77
|
-
>
|
|
78
|
-
<v-expansion-panel-title
|
|
79
|
-
style="color: #095797"
|
|
80
|
-
class="pl-0 ml-0"
|
|
81
|
-
><slot name="rechercheAvanceeTitre">
|
|
82
|
-
<span
|
|
83
|
-
style="text-decoration: underline"
|
|
84
|
-
v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
|
|
85
|
-
></span>
|
|
86
|
-
<slot name="rechercheAvanceeApresTitre"></slot
|
|
87
|
-
></slot>
|
|
88
|
-
</v-expansion-panel-title>
|
|
89
|
-
<v-expansion-panel-text :style="rechercheAvanceeStyle">
|
|
90
|
-
<slot name="rechercheAvancee"></slot>
|
|
91
|
-
</v-expansion-panel-text>
|
|
92
|
-
</v-expansion-panel>
|
|
93
|
-
</v-expansion-panels>
|
|
94
|
-
</v-col>
|
|
95
|
-
</v-row>
|
|
96
|
-
</div>
|
|
97
|
-
</template>
|
|
98
|
-
|
|
99
|
-
<script lang="ts" setup>
|
|
100
|
-
import { ref, watch } from 'vue'
|
|
101
|
-
|
|
102
|
-
// Props
|
|
103
|
-
const props = defineProps({
|
|
104
|
-
rechercheTexte: {
|
|
105
|
-
type: String,
|
|
106
|
-
required: false,
|
|
107
|
-
default: '',
|
|
108
|
-
},
|
|
109
|
-
rechercheAvanceeTexte: {
|
|
110
|
-
type: String,
|
|
111
|
-
required: false,
|
|
112
|
-
default: '',
|
|
113
|
-
},
|
|
114
|
-
rechercheAvanceeLargeur: {
|
|
115
|
-
type: Number,
|
|
116
|
-
required: false,
|
|
117
|
-
default: 12,
|
|
118
|
-
},
|
|
119
|
-
chargement: {
|
|
120
|
-
type: Boolean,
|
|
121
|
-
required: false,
|
|
122
|
-
default: false,
|
|
123
|
-
},
|
|
124
|
-
desactiver: {
|
|
125
|
-
type: Boolean,
|
|
126
|
-
required: false,
|
|
127
|
-
default: false,
|
|
128
|
-
},
|
|
129
|
-
recherche: {
|
|
130
|
-
type: String,
|
|
131
|
-
required: false,
|
|
132
|
-
default: '',
|
|
133
|
-
},
|
|
134
|
-
rechercheAvancee: {
|
|
135
|
-
type: Boolean,
|
|
136
|
-
required: false,
|
|
137
|
-
default: false,
|
|
138
|
-
},
|
|
139
|
-
rechercheAvanceeStyle: {
|
|
140
|
-
type: String,
|
|
141
|
-
required: false,
|
|
142
|
-
default: '',
|
|
143
|
-
},
|
|
144
|
-
})
|
|
145
|
-
|
|
146
|
-
const emit = defineEmits<{
|
|
147
|
-
(e: 'update:recherche', recherche: string): void
|
|
148
|
-
(e: 'panneau:etat', isOpen: boolean): void // événement pour l'ouverture/fermeture du panneau
|
|
149
|
-
}>()
|
|
150
|
-
|
|
151
|
-
// Création d'une variable locale pour gérer la recherche
|
|
152
|
-
const rechercheLocale = ref(props.recherche)
|
|
153
|
-
|
|
154
|
-
// Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
|
|
155
|
-
watch(
|
|
156
|
-
() => props.recherche,
|
|
157
|
-
nouvelleValeur => {
|
|
158
|
-
rechercheLocale.value = nouvelleValeur
|
|
159
|
-
},
|
|
160
|
-
)
|
|
161
|
-
|
|
162
|
-
// Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
|
|
163
|
-
watch(rechercheLocale, nouvelleValeur => {
|
|
164
|
-
emit('update:recherche', nouvelleValeur!)
|
|
165
|
-
})
|
|
166
|
-
|
|
167
|
-
// Fonction pour émettre l'événement d'ouverture/fermeture du panneau
|
|
168
|
-
const onPanelChange = (val: unknown) => {
|
|
169
|
-
if (typeof val === 'string' || typeof val === 'number' || val === null) {
|
|
170
|
-
const isOpen = val !== null && val !== ''
|
|
171
|
-
emit('panneau:etat', isOpen)
|
|
172
|
-
} else {
|
|
173
|
-
emit('panneau:etat', false)
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
</script>
|
|
177
|
-
|
|
178
|
-
<style lang="css">
|
|
179
|
-
/* barre de recherche design QC*/
|
|
180
|
-
.BarreRecherche {
|
|
181
|
-
min-height: 40px;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.BarreRechercheBackIcone {
|
|
185
|
-
border-right: 1px solid #808a9d;
|
|
186
|
-
border-top: 1px solid #808a9d;
|
|
187
|
-
border-bottom: 1px solid #808a9d;
|
|
188
|
-
background-color: #095797 !important;
|
|
189
|
-
height: 40px !important;
|
|
190
|
-
width: 40px !important;
|
|
191
|
-
max-width: 40px !important;
|
|
192
|
-
min-width: 40px !important;
|
|
193
|
-
padding-right: 0 !important;
|
|
194
|
-
padding-left: 0 !important;
|
|
195
|
-
border-radius: 0;
|
|
196
|
-
margin-left: -16px;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
/* icone loupe */
|
|
200
|
-
.BarreRechercheIcone {
|
|
201
|
-
font-size: 34px !important;
|
|
202
|
-
margin-left: 1px !important;
|
|
203
|
-
margin-top: 2px !important;
|
|
204
|
-
color: white !important;
|
|
205
|
-
}
|
|
206
|
-
</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-model="rechercheLocale"
|
|
14
|
+
:label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
|
|
15
|
+
single-line
|
|
16
|
+
density="compact"
|
|
17
|
+
hide-details
|
|
18
|
+
clearable
|
|
19
|
+
:rounded="0"
|
|
20
|
+
variant="outlined"
|
|
21
|
+
max-width="640"
|
|
22
|
+
min-width="500"
|
|
23
|
+
class="BarreRecherche"
|
|
24
|
+
:loading="chargement"
|
|
25
|
+
:disabled="chargement || desactiver"
|
|
26
|
+
>
|
|
27
|
+
<template #append>
|
|
28
|
+
<v-btn
|
|
29
|
+
class="BarreRechercheBackIcone"
|
|
30
|
+
:loading="chargement"
|
|
31
|
+
:disabled="chargement || desactiver"
|
|
32
|
+
>
|
|
33
|
+
<v-icon
|
|
34
|
+
class="BarreRechercheIcone"
|
|
35
|
+
icon="mdi-magnify"
|
|
36
|
+
/>
|
|
37
|
+
</v-btn>
|
|
38
|
+
</template>
|
|
39
|
+
</v-text-field>
|
|
40
|
+
</v-col>
|
|
41
|
+
<!-- Entre recherche et ajouté-->
|
|
42
|
+
<v-col
|
|
43
|
+
cols="12"
|
|
44
|
+
sm="auto"
|
|
45
|
+
class="pt-1 mt-0 pb-0 mb-0"
|
|
46
|
+
>
|
|
47
|
+
<slot name="milieu" />
|
|
48
|
+
</v-col>
|
|
49
|
+
|
|
50
|
+
<!-- Affichage des boutons et icônes-->
|
|
51
|
+
<v-col
|
|
52
|
+
cols="12"
|
|
53
|
+
sm="auto"
|
|
54
|
+
class="flex-grow-1 d-flex justify-end"
|
|
55
|
+
>
|
|
56
|
+
<slot name="droite" />
|
|
57
|
+
</v-col>
|
|
58
|
+
</v-row>
|
|
59
|
+
<v-row
|
|
60
|
+
dense
|
|
61
|
+
class="pt-0 mt-0"
|
|
62
|
+
>
|
|
63
|
+
<v-col
|
|
64
|
+
cols="12"
|
|
65
|
+
:lg="rechercheAvanceeLargeur"
|
|
66
|
+
>
|
|
67
|
+
<v-expansion-panels
|
|
68
|
+
v-if="rechercheAvancee"
|
|
69
|
+
static
|
|
70
|
+
:readonly="chargement || desactiver"
|
|
71
|
+
expand-icon=""
|
|
72
|
+
@update:model-value="onPanelChange"
|
|
73
|
+
>
|
|
74
|
+
<v-expansion-panel
|
|
75
|
+
flat
|
|
76
|
+
elevation="0"
|
|
77
|
+
>
|
|
78
|
+
<v-expansion-panel-title
|
|
79
|
+
style="color: #095797"
|
|
80
|
+
class="pl-0 ml-0"
|
|
81
|
+
><slot name="rechercheAvanceeTitre">
|
|
82
|
+
<span
|
|
83
|
+
style="text-decoration: underline"
|
|
84
|
+
v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
|
|
85
|
+
></span>
|
|
86
|
+
<slot name="rechercheAvanceeApresTitre"></slot
|
|
87
|
+
></slot>
|
|
88
|
+
</v-expansion-panel-title>
|
|
89
|
+
<v-expansion-panel-text :style="rechercheAvanceeStyle">
|
|
90
|
+
<slot name="rechercheAvancee"></slot>
|
|
91
|
+
</v-expansion-panel-text>
|
|
92
|
+
</v-expansion-panel>
|
|
93
|
+
</v-expansion-panels>
|
|
94
|
+
</v-col>
|
|
95
|
+
</v-row>
|
|
96
|
+
</div>
|
|
97
|
+
</template>
|
|
98
|
+
|
|
99
|
+
<script lang="ts" setup>
|
|
100
|
+
import { ref, watch } from 'vue'
|
|
101
|
+
|
|
102
|
+
// Props
|
|
103
|
+
const props = defineProps({
|
|
104
|
+
rechercheTexte: {
|
|
105
|
+
type: String,
|
|
106
|
+
required: false,
|
|
107
|
+
default: '',
|
|
108
|
+
},
|
|
109
|
+
rechercheAvanceeTexte: {
|
|
110
|
+
type: String,
|
|
111
|
+
required: false,
|
|
112
|
+
default: '',
|
|
113
|
+
},
|
|
114
|
+
rechercheAvanceeLargeur: {
|
|
115
|
+
type: Number,
|
|
116
|
+
required: false,
|
|
117
|
+
default: 12,
|
|
118
|
+
},
|
|
119
|
+
chargement: {
|
|
120
|
+
type: Boolean,
|
|
121
|
+
required: false,
|
|
122
|
+
default: false,
|
|
123
|
+
},
|
|
124
|
+
desactiver: {
|
|
125
|
+
type: Boolean,
|
|
126
|
+
required: false,
|
|
127
|
+
default: false,
|
|
128
|
+
},
|
|
129
|
+
recherche: {
|
|
130
|
+
type: String,
|
|
131
|
+
required: false,
|
|
132
|
+
default: '',
|
|
133
|
+
},
|
|
134
|
+
rechercheAvancee: {
|
|
135
|
+
type: Boolean,
|
|
136
|
+
required: false,
|
|
137
|
+
default: false,
|
|
138
|
+
},
|
|
139
|
+
rechercheAvanceeStyle: {
|
|
140
|
+
type: String,
|
|
141
|
+
required: false,
|
|
142
|
+
default: '',
|
|
143
|
+
},
|
|
144
|
+
})
|
|
145
|
+
|
|
146
|
+
const emit = defineEmits<{
|
|
147
|
+
(e: 'update:recherche', recherche: string): void
|
|
148
|
+
(e: 'panneau:etat', isOpen: boolean): void // événement pour l'ouverture/fermeture du panneau
|
|
149
|
+
}>()
|
|
150
|
+
|
|
151
|
+
// Création d'une variable locale pour gérer la recherche
|
|
152
|
+
const rechercheLocale = ref(props.recherche)
|
|
153
|
+
|
|
154
|
+
// Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
|
|
155
|
+
watch(
|
|
156
|
+
() => props.recherche,
|
|
157
|
+
nouvelleValeur => {
|
|
158
|
+
rechercheLocale.value = nouvelleValeur
|
|
159
|
+
},
|
|
160
|
+
)
|
|
161
|
+
|
|
162
|
+
// Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
|
|
163
|
+
watch(rechercheLocale, nouvelleValeur => {
|
|
164
|
+
emit('update:recherche', nouvelleValeur!)
|
|
165
|
+
})
|
|
166
|
+
|
|
167
|
+
// Fonction pour émettre l'événement d'ouverture/fermeture du panneau
|
|
168
|
+
const onPanelChange = (val: unknown) => {
|
|
169
|
+
if (typeof val === 'string' || typeof val === 'number' || val === null) {
|
|
170
|
+
const isOpen = val !== null && val !== ''
|
|
171
|
+
emit('panneau:etat', isOpen)
|
|
172
|
+
} else {
|
|
173
|
+
emit('panneau:etat', false)
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
</script>
|
|
177
|
+
|
|
178
|
+
<style lang="css">
|
|
179
|
+
/* barre de recherche design QC*/
|
|
180
|
+
.BarreRecherche {
|
|
181
|
+
min-height: 40px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.BarreRechercheBackIcone {
|
|
185
|
+
border-right: 1px solid #808a9d;
|
|
186
|
+
border-top: 1px solid #808a9d;
|
|
187
|
+
border-bottom: 1px solid #808a9d;
|
|
188
|
+
background-color: #095797 !important;
|
|
189
|
+
height: 40px !important;
|
|
190
|
+
width: 40px !important;
|
|
191
|
+
max-width: 40px !important;
|
|
192
|
+
min-width: 40px !important;
|
|
193
|
+
padding-right: 0 !important;
|
|
194
|
+
padding-left: 0 !important;
|
|
195
|
+
border-radius: 0;
|
|
196
|
+
margin-left: -16px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* icone loupe */
|
|
200
|
+
.BarreRechercheIcone {
|
|
201
|
+
font-size: 34px !important;
|
|
202
|
+
margin-left: 1px !important;
|
|
203
|
+
margin-top: 2px !important;
|
|
204
|
+
color: white !important;
|
|
205
|
+
}
|
|
206
|
+
</style>
|
|
@@ -72,6 +72,8 @@
|
|
|
72
72
|
:items-per-page="itemsParPage"
|
|
73
73
|
:item-per-page-options="itemsParPageOptions"
|
|
74
74
|
@click:row="cliqueLigne"
|
|
75
|
+
:sort-by="triDepart"
|
|
76
|
+
:multi-sort="estMultiTriActif"
|
|
75
77
|
>
|
|
76
78
|
<!-- utilisation des slots via le component parent-->
|
|
77
79
|
<!-- eslint-disable-next-line -->
|
|
@@ -135,6 +137,7 @@
|
|
|
135
137
|
//import axios from 'axios'
|
|
136
138
|
import { useI18n } from 'vue-i18n'
|
|
137
139
|
import Colonne from '../../modeles/composants/datatableColonne'
|
|
140
|
+
import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
|
|
138
141
|
|
|
139
142
|
// Props
|
|
140
143
|
const props = defineProps({
|
|
@@ -186,7 +189,11 @@
|
|
|
186
189
|
modaleSupprimerTexte: { type: String, default: '' },
|
|
187
190
|
modaleSupprimerTitre: { type: String, default: '' },
|
|
188
191
|
modaleSupprimerLargeur: { type: String, default: '525px' },
|
|
189
|
-
|
|
192
|
+
triDescDepart: { type: Boolean, default: false },
|
|
193
|
+
triParDepart: {
|
|
194
|
+
type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
|
|
195
|
+
default: undefined,
|
|
196
|
+
},
|
|
190
197
|
//urlbase: { type: String, default: '' },
|
|
191
198
|
})
|
|
192
199
|
|
|
@@ -241,6 +248,32 @@
|
|
|
241
248
|
Object.values(item).some(val => String(val).toLowerCase().includes(recherche.value.toLowerCase())),
|
|
242
249
|
)
|
|
243
250
|
})
|
|
251
|
+
|
|
252
|
+
const triDepart = computed<SortItem[] | undefined>(() => {
|
|
253
|
+
if (props.triParDepart == null) return undefined
|
|
254
|
+
|
|
255
|
+
const ordre = props.triDescDepart ? 'desc' : 'asc'
|
|
256
|
+
|
|
257
|
+
if (typeof props.triParDepart === 'string') return [{ key: props.triParDepart, order: ordre }]
|
|
258
|
+
|
|
259
|
+
//On a un tableau de tri
|
|
260
|
+
let retour: SortItem[] = []
|
|
261
|
+
for (let i = 0; i < props.triParDepart.length; i += 1) {
|
|
262
|
+
const tri = props.triParDepart[i]!
|
|
263
|
+
if (typeof tri == 'string') retour.push({ key: tri, order: ordre })
|
|
264
|
+
else retour.push(tri) //C'est un SortItem déjà bâti
|
|
265
|
+
}
|
|
266
|
+
return retour
|
|
267
|
+
})
|
|
268
|
+
|
|
269
|
+
const estMultiTriActif = computed(() => {
|
|
270
|
+
if (props.triParDepart == null) return false
|
|
271
|
+
|
|
272
|
+
if (typeof props.triParDepart === 'string') return false
|
|
273
|
+
|
|
274
|
+
return true
|
|
275
|
+
})
|
|
276
|
+
|
|
244
277
|
const onPanelChange = (val: unknown) => {
|
|
245
278
|
if (typeof val === 'string' || typeof val === 'number' || val === null) {
|
|
246
279
|
const isOpen = val !== null && val !== ''
|