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,99 +1,99 @@
1
- <template>
2
- <v-snackbar
3
- v-model="snackbar"
4
- :timeout="tempsFinal"
5
- :style="styleCss"
6
- multi-line
7
- :location="position"
8
- :color="props.couleur"
9
- @update:modelValue="fermer"
10
- >
11
- <template v-if="props.titre || props.message">
12
- <b style="font-size: 12pt">{{ props.titre }}</b>
13
- <br v-if="props.titre" />
14
- <b>{{ props.message }}</b>
15
- </template>
16
-
17
- <template v-slot:actions>
18
- <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
19
- <v-icon
20
- v-if="props.btnFermer || props.temps === -1"
21
- color="white"
22
- dark
23
- style="cursor: pointer"
24
- @click.stop="fermer"
25
- >
26
- mdi-close
27
- </v-icon>
28
- </template>
29
- </v-snackbar>
30
- </template>
31
- <script lang="ts" setup>
32
- import { computed, ref, watch, type PropType } from 'vue'
33
-
34
- // Définir les props avec les types
35
- const props = defineProps({
36
- styleCss: {
37
- type: String,
38
- required: false,
39
- },
40
- temps: {
41
- type: Number,
42
- required: false,
43
- default: 4000,
44
- validator(value: number) {
45
- // Si la valeur est inférieure à -1, on la remplace par -1
46
- if (value < -1) {
47
- return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
48
- }
49
- // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
50
- return value <= Number.MAX_VALUE
51
- },
52
- },
53
- message: {
54
- type: String,
55
- required: true,
56
- },
57
- titre: {
58
- type: String,
59
- required: false,
60
- },
61
- couleur: {
62
- type: String,
63
- required: false,
64
- default: 'success',
65
- },
66
- position: {
67
- type: String as PropType<'top' | 'bottom' | 'left' | 'right' | 'center'>,
68
- required: false,
69
- default: 'left',
70
- },
71
- btnFermer: {
72
- type: Boolean,
73
- required: false,
74
- default: true,
75
- },
76
- })
77
- const emit = defineEmits(['fermer:snackbar'])
78
- const fermer = (): void => {
79
- snackbar.value = false
80
- emit('fermer:snackbar')
81
- }
82
- // Déclarer l'état réactif pour snackbar
83
- const snackbar = ref(false)
84
- const message = computed(() => props.message)
85
- const tempsFinal = computed(() => {
86
- if (props.temps < -1) {
87
- return -1 // Si la valeur est inférieure à -1, on la met à -1
88
- }
89
- if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
90
-
91
- return props.temps // Sinon, on retourne la valeur de la prop
92
- })
93
-
94
- watch(message, nouveau => {
95
- if (nouveau != null && nouveau !== '') {
96
- snackbar.value = true
97
- }
98
- })
99
- </script>
1
+ <template>
2
+ <v-snackbar
3
+ v-model="snackbar"
4
+ :timeout="tempsFinal"
5
+ :style="styleCss"
6
+ multi-line
7
+ :location="position"
8
+ :color="props.couleur"
9
+ @update:modelValue="fermer"
10
+ >
11
+ <template v-if="props.titre || props.message">
12
+ <b style="font-size: 12pt">{{ props.titre }}</b>
13
+ <br v-if="props.titre" />
14
+ <b>{{ props.message }}</b>
15
+ </template>
16
+
17
+ <template v-slot:actions>
18
+ <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
19
+ <v-icon
20
+ v-if="props.btnFermer || props.temps === -1"
21
+ color="white"
22
+ dark
23
+ style="cursor: pointer"
24
+ @click.stop="fermer"
25
+ >
26
+ mdi-close
27
+ </v-icon>
28
+ </template>
29
+ </v-snackbar>
30
+ </template>
31
+ <script lang="ts" setup>
32
+ import { computed, ref, watch, type PropType } from 'vue'
33
+
34
+ // Définir les props avec les types
35
+ const props = defineProps({
36
+ styleCss: {
37
+ type: String,
38
+ required: false,
39
+ },
40
+ temps: {
41
+ type: Number,
42
+ required: false,
43
+ default: 4000,
44
+ validator(value: number) {
45
+ // Si la valeur est inférieure à -1, on la remplace par -1
46
+ if (value < -1) {
47
+ return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
48
+ }
49
+ // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
50
+ return value <= Number.MAX_VALUE
51
+ },
52
+ },
53
+ message: {
54
+ type: String,
55
+ required: true,
56
+ },
57
+ titre: {
58
+ type: String,
59
+ required: false,
60
+ },
61
+ couleur: {
62
+ type: String,
63
+ required: false,
64
+ default: 'success',
65
+ },
66
+ position: {
67
+ type: String as PropType<'top' | 'bottom' | 'left' | 'right' | 'center'>,
68
+ required: false,
69
+ default: 'left',
70
+ },
71
+ btnFermer: {
72
+ type: Boolean,
73
+ required: false,
74
+ default: true,
75
+ },
76
+ })
77
+ const emit = defineEmits(['fermer:snackbar'])
78
+ const fermer = (): void => {
79
+ snackbar.value = false
80
+ emit('fermer:snackbar')
81
+ }
82
+ // Déclarer l'état réactif pour snackbar
83
+ const snackbar = ref(false)
84
+ const message = computed(() => props.message)
85
+ const tempsFinal = computed(() => {
86
+ if (props.temps < -1) {
87
+ return -1 // Si la valeur est inférieure à -1, on la met à -1
88
+ }
89
+ if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
90
+
91
+ return props.temps // Sinon, on retourne la valeur de la prop
92
+ })
93
+
94
+ watch(message, nouveau => {
95
+ if (nouveau != null && nouveau !== '') {
96
+ snackbar.value = true
97
+ }
98
+ })
99
+ </script>