codevdesign 1.0.6 → 1.0.8

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,156 +1,156 @@
1
- <template>
2
- <v-navigation-drawer
3
- v-model="visible"
4
- location="right"
5
- temporary
6
- v-bind="$attrs"
7
- :width="grosseurTiroir"
8
- class="pa-0 elevation-2 csqc-ligneBleue"
9
- :persistent="persistant"
10
- @keydown.esc="!persistant ? fermeture : ''"
11
- @click:outside="!persistant ? fermeture : ''"
12
- >
13
- <v-card class="pa-0 ma-0 pl-8 pt-8">
14
- <!-- Bouton en haut à droite -->
15
- <v-btn
16
- icon="mdi-close"
17
- variant="text"
18
- class="position-absolute couleurHover"
19
- style="top: 5px; right: 5px"
20
- @click="fermeture"
21
- ></v-btn>
22
-
23
- <v-card-title
24
- class="pa-0 ma-0 pb-6 text-wrap"
25
- style="font-size: 24px"
26
- >
27
- <slot name="titre"></slot>
28
- <div text-h5>{{ titre }}</div>
29
- </v-card-title>
30
-
31
- <v-card-text class="pa-0 ma-0 pb-6 pr-6">
32
- <v-container>
33
- <slot></slot>
34
- <slot name="content"></slot>
35
- </v-container>
36
- </v-card-text>
37
- <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
38
- <slot name="actions"></slot>
39
- <v-btn
40
- v-if="btnAnnuler"
41
- color="primary"
42
- variant="text"
43
- :loading="operationEnCours"
44
- @click="fermeture"
45
- >
46
- {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
47
- </v-btn>
48
-
49
- <v-btn
50
- v-if="btnOk"
51
- class="Gouttiere"
52
- color="primary"
53
- variant="flat"
54
- :loading="operationEnCours"
55
- :disabled="btnOkDesactiver || operationEnCours"
56
- @click="okBouton"
57
- >
58
- {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
59
- </v-btn>
60
- </v-card-actions>
61
- </v-card>
62
- </v-navigation-drawer>
63
- </template>
64
- <script lang="ts" setup>
65
- import { ref, computed } from 'vue'
66
- import { useDisplay } from 'vuetify'
67
-
68
- const visible = ref(false)
69
- const display = useDisplay()
70
-
71
- // Déclaration des props
72
- const props = defineProps({
73
- titre: {
74
- type: String,
75
- default: '',
76
- required: false,
77
- },
78
- btnAnnuler: {
79
- type: Boolean,
80
- default: true,
81
- required: false,
82
- },
83
- btnOk: {
84
- type: Boolean,
85
- default: true,
86
- required: false,
87
- },
88
- btnAnnulerTexte: {
89
- type: String,
90
- default: '',
91
- required: false,
92
- },
93
- btnOkDesactiver: {
94
- type: Boolean,
95
- default: false,
96
- required: false,
97
- },
98
- operationEnCours: { type: Boolean, default: false },
99
- persistant: { type: Boolean, default: true },
100
- btnOkTexte: {
101
- type: String,
102
- default: '',
103
- required: false,
104
- },
105
- })
106
-
107
- // Déclaration des événements
108
- const emit = defineEmits(['fermer', 'ok'])
109
-
110
- // Méthodes
111
- const ouvrir = () => {
112
- visible.value = true
113
- }
114
-
115
- const fermer = () => {
116
- visible.value = false
117
- }
118
-
119
- const fermeture = () => {
120
- emit('fermer')
121
- fermer()
122
- }
123
-
124
- const okBouton = () => {
125
- emit('ok')
126
- fermer()
127
- }
128
-
129
- // Calcul des tailles du tiroir en fonction du breakpoint
130
- const grosseurTiroir = computed(() => {
131
- switch (display.name.value) {
132
- case 'xs':
133
- return ''
134
- case 'sm':
135
- return 0.95 * display.width.value
136
- case 'md':
137
- return 0.8 * display.width.value
138
- case 'lg':
139
- return 0.7 * display.width.value
140
- case 'xl':
141
- return 0.6 * display.width.value
142
- case 'xxl':
143
- return 0.5 * display.width.value
144
- default:
145
- return ''
146
- }
147
- })
148
-
149
- defineExpose({ ouvrir, fermer })
150
- </script>
151
-
152
- <style>
153
- .csqc-ligneBleue {
154
- border-left: 30px #095797 solid !important;
155
- }
156
- </style>
1
+ <template>
2
+ <v-navigation-drawer
3
+ v-model="visible"
4
+ location="right"
5
+ temporary
6
+ v-bind="$attrs"
7
+ :width="grosseurTiroir"
8
+ class="pa-0 elevation-2 csqc-ligneBleue"
9
+ :persistent="persistant"
10
+ @keydown.esc="!persistant ? fermeture : ''"
11
+ @click:outside="!persistant ? fermeture : ''"
12
+ >
13
+ <v-card class="pa-0 ma-0 pl-8 pt-8">
14
+ <!-- Bouton en haut à droite -->
15
+ <v-btn
16
+ icon="mdi-close"
17
+ variant="text"
18
+ class="position-absolute couleurHover"
19
+ style="top: 5px; right: 5px"
20
+ @click="fermeture"
21
+ ></v-btn>
22
+
23
+ <v-card-title
24
+ class="pa-0 ma-0 pb-6 text-wrap"
25
+ style="font-size: 24px"
26
+ >
27
+ <slot name="titre"></slot>
28
+ <div text-h5>{{ titre }}</div>
29
+ </v-card-title>
30
+
31
+ <v-card-text class="pa-0 ma-0 pb-6 pr-6">
32
+ <v-container>
33
+ <slot></slot>
34
+ <slot name="content"></slot>
35
+ </v-container>
36
+ </v-card-text>
37
+ <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
38
+ <slot name="actions"></slot>
39
+ <v-btn
40
+ v-if="btnAnnuler"
41
+ color="primary"
42
+ variant="text"
43
+ :loading="operationEnCours"
44
+ @click="fermeture"
45
+ >
46
+ {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
47
+ </v-btn>
48
+
49
+ <v-btn
50
+ v-if="btnOk"
51
+ class="Gouttiere"
52
+ color="primary"
53
+ variant="flat"
54
+ :loading="operationEnCours"
55
+ :disabled="btnOkDesactiver || operationEnCours"
56
+ @click="okBouton"
57
+ >
58
+ {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
59
+ </v-btn>
60
+ </v-card-actions>
61
+ </v-card>
62
+ </v-navigation-drawer>
63
+ </template>
64
+ <script lang="ts" setup>
65
+ import { ref, computed } from 'vue'
66
+ import { useDisplay } from 'vuetify'
67
+
68
+ const visible = ref(false)
69
+ const display = useDisplay()
70
+
71
+ // Déclaration des props
72
+ const props = defineProps({
73
+ titre: {
74
+ type: String,
75
+ default: '',
76
+ required: false,
77
+ },
78
+ btnAnnuler: {
79
+ type: Boolean,
80
+ default: true,
81
+ required: false,
82
+ },
83
+ btnOk: {
84
+ type: Boolean,
85
+ default: true,
86
+ required: false,
87
+ },
88
+ btnAnnulerTexte: {
89
+ type: String,
90
+ default: '',
91
+ required: false,
92
+ },
93
+ btnOkDesactiver: {
94
+ type: Boolean,
95
+ default: false,
96
+ required: false,
97
+ },
98
+ operationEnCours: { type: Boolean, default: false },
99
+ persistant: { type: Boolean, default: true },
100
+ btnOkTexte: {
101
+ type: String,
102
+ default: '',
103
+ required: false,
104
+ },
105
+ })
106
+
107
+ // Déclaration des événements
108
+ const emit = defineEmits(['fermer', 'ok'])
109
+
110
+ // Méthodes
111
+ const ouvrir = () => {
112
+ visible.value = true
113
+ }
114
+
115
+ const fermer = () => {
116
+ visible.value = false
117
+ }
118
+
119
+ const fermeture = () => {
120
+ emit('fermer')
121
+ fermer()
122
+ }
123
+
124
+ const okBouton = () => {
125
+ emit('ok')
126
+ fermer()
127
+ }
128
+
129
+ // Calcul des tailles du tiroir en fonction du breakpoint
130
+ const grosseurTiroir = computed(() => {
131
+ switch (display.name.value) {
132
+ case 'xs':
133
+ return ''
134
+ case 'sm':
135
+ return 0.95 * display.width.value
136
+ case 'md':
137
+ return 0.8 * display.width.value
138
+ case 'lg':
139
+ return 0.7 * display.width.value
140
+ case 'xl':
141
+ return 0.6 * display.width.value
142
+ case 'xxl':
143
+ return 0.5 * display.width.value
144
+ default:
145
+ return ''
146
+ }
147
+ })
148
+
149
+ defineExpose({ ouvrir, fermer })
150
+ </script>
151
+
152
+ <style>
153
+ .csqc-ligneBleue {
154
+ border-left: 30px #095797 solid !important;
155
+ }
156
+ </style>