codevdesign 0.0.15 → 0.0.17

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,113 +1,113 @@
1
- <template>
2
- <div class="pt-4 pb-4 pl-4">
3
- <v-row dense>
4
- <v-col
5
- cols="9"
6
- md="8"
7
- lg="6"
8
- >
9
- <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
10
- </v-col>
11
- <v-col
12
- cols="2"
13
- class="flex-grow-1 d-flex justify-end pt-0 mt-0 pb-0 mb-0"
14
- >
15
- <v-switch
16
- v-model="maValeur"
17
- :disabled="desactiver"
18
- @change="sauvegarder"
19
- hide-details
20
- />
21
- </v-col>
22
- </v-row>
23
- <v-row dense>
24
- <v-col
25
- cols="9"
26
- md="8"
27
- >
28
- <span v-html="texteDetaille"></span>
29
- </v-col>
30
- </v-row>
31
- </div>
32
- </template>
33
- <script setup lang="ts">
34
- import { ref, watch, defineProps, defineEmits, onMounted } from 'vue'
35
-
36
- // Définition des props
37
- const props = defineProps({
38
- valeurInverse: {
39
- type: Boolean,
40
- default: false,
41
- },
42
- desactiver: {
43
- type: Boolean,
44
- default: false,
45
- },
46
- modelValue: {
47
- type: Boolean,
48
- required: true,
49
- },
50
- texte: {
51
- type: String,
52
- required: true,
53
- },
54
- texteDetaille: {
55
- type: String,
56
- required: true,
57
- },
58
- })
59
-
60
- // Définition de l'événement
61
- const emit = defineEmits(['update:modelValue'])
62
-
63
- // Référence pour la valeur interne
64
- const maValeur = ref<boolean>(false)
65
-
66
- // Montée du composant
67
- onMounted(() => {
68
- if (props.valeurInverse) {
69
- maValeur.value = !props.modelValue
70
- } else {
71
- maValeur.value = props.modelValue
72
- }
73
- })
74
-
75
- // Watcher pour suivre les changements de la prop 'value'
76
- watch(
77
- () => props.modelValue,
78
- newValue => {
79
- if (props.valeurInverse) {
80
- maValeur.value = !newValue
81
- } else {
82
- maValeur.value = newValue
83
- }
84
- },
85
- )
86
-
87
- watch(
88
- () => props.valeurInverse,
89
- newValue => {
90
- if (props.valeurInverse) {
91
- maValeur.value = newValue
92
- } else {
93
- maValeur.value = !newValue
94
- }
95
- },
96
- )
97
-
98
- // Méthode pour sauvegarder la valeur
99
- const sauvegarder = () => {
100
- if (props.valeurInverse) {
101
- emit('update:modelValue', !maValeur.value)
102
- } else {
103
- emit('update:modelValue', maValeur.value)
104
- }
105
- }
106
- </script>
107
-
108
- <style lang="css" scoped>
109
- .labelSwitchSiSwitchApres {
110
- font-weight: bold;
111
- margin-top: 25px;
112
- }
113
- </style>
1
+ <template>
2
+ <div class="pt-4 pb-4 pl-4">
3
+ <v-row dense>
4
+ <v-col
5
+ cols="9"
6
+ md="8"
7
+ lg="6"
8
+ >
9
+ <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
10
+ </v-col>
11
+ <v-col
12
+ cols="2"
13
+ class="flex-grow-1 d-flex justify-end pt-0 mt-0 pb-0 mb-0"
14
+ >
15
+ <v-switch
16
+ v-model="maValeur"
17
+ :disabled="desactiver"
18
+ @change="sauvegarder"
19
+ hide-details
20
+ />
21
+ </v-col>
22
+ </v-row>
23
+ <v-row dense>
24
+ <v-col
25
+ cols="9"
26
+ md="8"
27
+ >
28
+ <span v-html="texteDetaille"></span>
29
+ </v-col>
30
+ </v-row>
31
+ </div>
32
+ </template>
33
+ <script setup lang="ts">
34
+ import { ref, watch, defineProps, defineEmits, onMounted } from 'vue'
35
+
36
+ // Définition des props
37
+ const props = defineProps({
38
+ valeurInverse: {
39
+ type: Boolean,
40
+ default: false,
41
+ },
42
+ desactiver: {
43
+ type: Boolean,
44
+ default: false,
45
+ },
46
+ modelValue: {
47
+ type: Boolean,
48
+ required: true,
49
+ },
50
+ texte: {
51
+ type: String,
52
+ required: true,
53
+ },
54
+ texteDetaille: {
55
+ type: String,
56
+ required: true,
57
+ },
58
+ })
59
+
60
+ // Définition de l'événement
61
+ const emit = defineEmits(['update:modelValue'])
62
+
63
+ // Référence pour la valeur interne
64
+ const maValeur = ref<boolean>(false)
65
+
66
+ // Montée du composant
67
+ onMounted(() => {
68
+ if (props.valeurInverse) {
69
+ maValeur.value = !props.modelValue
70
+ } else {
71
+ maValeur.value = props.modelValue
72
+ }
73
+ })
74
+
75
+ // Watcher pour suivre les changements de la prop 'value'
76
+ watch(
77
+ () => props.modelValue,
78
+ newValue => {
79
+ if (props.valeurInverse) {
80
+ maValeur.value = !newValue
81
+ } else {
82
+ maValeur.value = newValue
83
+ }
84
+ },
85
+ )
86
+
87
+ watch(
88
+ () => props.valeurInverse,
89
+ newValue => {
90
+ if (props.valeurInverse) {
91
+ maValeur.value = newValue
92
+ } else {
93
+ maValeur.value = !newValue
94
+ }
95
+ },
96
+ )
97
+
98
+ // Méthode pour sauvegarder la valeur
99
+ const sauvegarder = () => {
100
+ if (props.valeurInverse) {
101
+ emit('update:modelValue', !maValeur.value)
102
+ } else {
103
+ emit('update:modelValue', maValeur.value)
104
+ }
105
+ }
106
+ </script>
107
+
108
+ <style lang="css" scoped>
109
+ .labelSwitchSiSwitchApres {
110
+ font-weight: bold;
111
+ margin-top: 25px;
112
+ }
113
+ </style>
@@ -1,158 +1,158 @@
1
- <template>
2
- <div>
3
- <v-row
4
- dense
5
- class="pt-0 mt-0"
6
- >
7
- <v-col>
8
- <v-text-field
9
- v-model="rechercheLocale"
10
- :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
11
- single-line
12
- density="compact"
13
- hide-details
14
- clearable
15
- rounded="0"
16
- max-width="640"
17
- class="BarreRecherche"
18
- :loading="chargement"
19
- :disabled="chargement || desactiver"
20
- >
21
- <template v-slot:append>
22
- <v-btn
23
- variant="flat"
24
- class="BarreRechercheBackIcone"
25
- :loading="chargement"
26
- :disabled="chargement || desactiver"
27
- >
28
- <v-icon
29
- class="BarreRechercheIcone"
30
- icon="mdi-magnify"
31
- />
32
- </v-btn>
33
- </template>
34
- </v-text-field>
35
- </v-col>
36
- </v-row>
37
- <v-row
38
- dense
39
- class="pt-0 mt-0"
40
- >
41
- <v-col
42
- cols="12"
43
- md="10"
44
- lg="8"
45
- >
46
- <v-expansion-panels
47
- static
48
- v-if="rechercheAvancee"
49
- :readonly="chargement || desactiver"
50
- expand-icon=""
51
- >
52
- <v-expansion-panel
53
- flat
54
- elevation="0"
55
- >
56
- <v-expansion-panel-title
57
- style="color: #095797"
58
- class="pl-0 ml-0"
59
- >
60
- <span
61
- style="text-decoration: underline"
62
- v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
63
- ></span>
64
- </v-expansion-panel-title>
65
- <v-expansion-panel-text>
66
- <slot name="rechercheAvancee"></slot>
67
- </v-expansion-panel-text>
68
- </v-expansion-panel>
69
- </v-expansion-panels>
70
- </v-col>
71
- </v-row>
72
- </div>
73
- </template>
74
-
75
- <script lang="ts" setup>
76
- import { ref, watch } from 'vue'
77
-
78
- // Props
79
- const props = defineProps({
80
- rechercheTexte: {
81
- type: String,
82
- required: false,
83
- },
84
- rechercheAvanceeTexte: {
85
- type: String,
86
- required: false,
87
- },
88
- chargement: {
89
- type: Boolean,
90
- required: false,
91
- default: false,
92
- },
93
- desactiver: {
94
- type: Boolean,
95
- required: false,
96
- default: false,
97
- },
98
- recherche: {
99
- type: String,
100
- required: false,
101
- },
102
- rechercheAvancee: {
103
- type: Boolean,
104
- required: false,
105
- default: false,
106
- },
107
- })
108
-
109
- const emit = defineEmits<{
110
- (e: 'update:recherche', recherche: string): void
111
- }>()
112
-
113
- // Création d'une variable locale pour gérer la recherche
114
- const rechercheLocale = ref(props.recherche)
115
-
116
- // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
117
- watch(
118
- () => props.recherche,
119
- nouvelleValeur => {
120
- rechercheLocale.value = nouvelleValeur
121
- },
122
- )
123
-
124
- // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
125
- watch(rechercheLocale, nouvelleValeur => {
126
- emit('update:recherche', nouvelleValeur!)
127
- })
128
- </script>
129
-
130
- <style lang="css">
131
- /* barre de recherche design QC*/
132
- .BarreRecherche {
133
- min-height: 40px;
134
- }
135
-
136
- .BarreRechercheBackIcone {
137
- border-right: 1px solid #808a9d;
138
- border-top: 1px solid #808a9d;
139
- border-bottom: 1px solid #808a9d;
140
- background-color: #095797 !important;
141
- height: 40px !important;
142
- width: 40px !important;
143
- max-width: 40px !important;
144
- min-width: 40px !important;
145
- padding-right: 0 !important;
146
- padding-left: 0 !important;
147
- border-radius: 0;
148
- margin-left: -16px;
149
- }
150
-
151
- /* icone loupe */
152
- .BarreRechercheIcone {
153
- font-size: 34px !important;
154
- margin-left: 1px !important;
155
- margin-top: 2px !important;
156
- color: white !important;
157
- }
158
- </style>
1
+ <template>
2
+ <div>
3
+ <v-row
4
+ dense
5
+ class="pt-0 mt-0"
6
+ >
7
+ <v-col>
8
+ <v-text-field
9
+ v-model="rechercheLocale"
10
+ :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
11
+ single-line
12
+ density="compact"
13
+ hide-details
14
+ clearable
15
+ rounded="0"
16
+ max-width="640"
17
+ class="BarreRecherche"
18
+ :loading="chargement"
19
+ :disabled="chargement || desactiver"
20
+ >
21
+ <template v-slot:append>
22
+ <v-btn
23
+ variant="flat"
24
+ class="BarreRechercheBackIcone"
25
+ :loading="chargement"
26
+ :disabled="chargement || desactiver"
27
+ >
28
+ <v-icon
29
+ class="BarreRechercheIcone"
30
+ icon="mdi-magnify"
31
+ />
32
+ </v-btn>
33
+ </template>
34
+ </v-text-field>
35
+ </v-col>
36
+ </v-row>
37
+ <v-row
38
+ dense
39
+ class="pt-0 mt-0"
40
+ >
41
+ <v-col
42
+ cols="12"
43
+ md="10"
44
+ lg="8"
45
+ >
46
+ <v-expansion-panels
47
+ static
48
+ v-if="rechercheAvancee"
49
+ :readonly="chargement || desactiver"
50
+ expand-icon=""
51
+ >
52
+ <v-expansion-panel
53
+ flat
54
+ elevation="0"
55
+ >
56
+ <v-expansion-panel-title
57
+ style="color: #095797"
58
+ class="pl-0 ml-0"
59
+ >
60
+ <span
61
+ style="text-decoration: underline"
62
+ v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
63
+ ></span>
64
+ </v-expansion-panel-title>
65
+ <v-expansion-panel-text>
66
+ <slot name="rechercheAvancee"></slot>
67
+ </v-expansion-panel-text>
68
+ </v-expansion-panel>
69
+ </v-expansion-panels>
70
+ </v-col>
71
+ </v-row>
72
+ </div>
73
+ </template>
74
+
75
+ <script lang="ts" setup>
76
+ import { ref, watch } from 'vue'
77
+
78
+ // Props
79
+ const props = defineProps({
80
+ rechercheTexte: {
81
+ type: String,
82
+ required: false,
83
+ },
84
+ rechercheAvanceeTexte: {
85
+ type: String,
86
+ required: false,
87
+ },
88
+ chargement: {
89
+ type: Boolean,
90
+ required: false,
91
+ default: false,
92
+ },
93
+ desactiver: {
94
+ type: Boolean,
95
+ required: false,
96
+ default: false,
97
+ },
98
+ recherche: {
99
+ type: String,
100
+ required: false,
101
+ },
102
+ rechercheAvancee: {
103
+ type: Boolean,
104
+ required: false,
105
+ default: false,
106
+ },
107
+ })
108
+
109
+ const emit = defineEmits<{
110
+ (e: 'update:recherche', recherche: string): void
111
+ }>()
112
+
113
+ // Création d'une variable locale pour gérer la recherche
114
+ const rechercheLocale = ref(props.recherche)
115
+
116
+ // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
117
+ watch(
118
+ () => props.recherche,
119
+ nouvelleValeur => {
120
+ rechercheLocale.value = nouvelleValeur
121
+ },
122
+ )
123
+
124
+ // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
125
+ watch(rechercheLocale, nouvelleValeur => {
126
+ emit('update:recherche', nouvelleValeur!)
127
+ })
128
+ </script>
129
+
130
+ <style lang="css">
131
+ /* barre de recherche design QC*/
132
+ .BarreRecherche {
133
+ min-height: 40px;
134
+ }
135
+
136
+ .BarreRechercheBackIcone {
137
+ border-right: 1px solid #808a9d;
138
+ border-top: 1px solid #808a9d;
139
+ border-bottom: 1px solid #808a9d;
140
+ background-color: #095797 !important;
141
+ height: 40px !important;
142
+ width: 40px !important;
143
+ max-width: 40px !important;
144
+ min-width: 40px !important;
145
+ padding-right: 0 !important;
146
+ padding-left: 0 !important;
147
+ border-radius: 0;
148
+ margin-left: -16px;
149
+ }
150
+
151
+ /* icone loupe */
152
+ .BarreRechercheIcone {
153
+ font-size: 34px !important;
154
+ margin-left: 1px !important;
155
+ margin-top: 2px !important;
156
+ color: white !important;
157
+ }
158
+ </style>