codevdesign 0.0.90 → 0.0.91

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.
Files changed (3) hide show
  1. package/composants/csqcDate/csqcDate.vue +56 -56
  2. package/composants/csqcDialogue.vue +118 -117
  3. package/package.json +2 -2
package/composants/csqcDate/csqcDate.vue CHANGED
@@ -1,56 +1,56 @@
1
- <template>
2
- <v-date-input
3
- v-model="dateValeur"
4
- @update:model-value="formatDate"
5
- v-bind="$attrs"
6
- variant="outlined"
7
- prepend-icon=""
8
- prepend-inner-icon="$calendar"
9
- density="comfortable"
10
- ></v-date-input>
11
- </template>
12
-
13
- <script setup lang="ts">
14
- import { ref, watch, computed } from 'vue'
15
- import { VDateInput } from 'vuetify/labs/VDateInput'
16
-
17
- const props = withDefaults(
18
- defineProps<{
19
- modelValue: string | Date | null
20
- }>(),
21
- {},
22
- )
23
-
24
- const emit = defineEmits(['update:modelValue'])
25
- const dateValeur = ref<Date | string | null>(props.modelValue)
26
-
27
- const formatDate = (date: Date | string | null) => {
28
- if (date == null) {
29
- emit('update:modelValue', null)
30
- return
31
- }
32
-
33
- if (typeof date === 'string') {
34
- emit('update:modelValue', props.modelValue)
35
- return
36
- }
37
-
38
- //Transformer la date en string
39
- const d = new Date(date)
40
- const yyyy = d.getFullYear()
41
- const mm = String(d.getMonth() + 1).padStart(2, '0')
42
- const dd = String(d.getDate()).padStart(2, '0')
43
- const formatte = `${yyyy}-${mm}-${dd}`
44
- dateValeur.value = formatte
45
-
46
- emit('update:modelValue', dateValeur.value)
47
- }
48
-
49
- // Synchronise les props externes avec l'état interne
50
- watch(
51
- () => props.modelValue,
52
- nouvelle => {
53
- dateValeur.value = nouvelle
54
- },
55
- )
56
- </script>
1
+ <template>
2
+ <v-date-input
3
+ v-model="dateValeur"
4
+ v-bind="$attrs"
5
+ @update:model-value="formatDate"
6
+ variant="outlined"
7
+ prepend-icon=""
8
+ prepend-inner-icon="$calendar"
9
+ density="comfortable"
10
+ ></v-date-input>
11
+ </template>
12
+
13
+ <script setup lang="ts">
14
+ import { ref, watch, computed } from 'vue'
15
+ import { VDateInput } from 'vuetify/labs/VDateInput'
16
+
17
+ const props = withDefaults(
18
+ defineProps<{
19
+ modelValue: string | Date | null
20
+ }>(),
21
+ {},
22
+ )
23
+
24
+ const emit = defineEmits(['update:modelValue'])
25
+ const dateValeur = ref<Date | string | null>(props.modelValue)
26
+
27
+ const formatDate = (date: Date | string | null) => {
28
+ if (date == null) {
29
+ emit('update:modelValue', null)
30
+ return
31
+ }
32
+
33
+ if (typeof date === 'string') {
34
+ emit('update:modelValue', props.modelValue)
35
+ return
36
+ }
37
+
38
+ //Transformer la date en string
39
+ const d = new Date(date)
40
+ const yyyy = d.getFullYear()
41
+ const mm = String(d.getMonth() + 1).padStart(2, '0')
42
+ const dd = String(d.getDate()).padStart(2, '0')
43
+ const formatte = `${yyyy}-${mm}-${dd}`
44
+ dateValeur.value = formatte
45
+
46
+ emit('update:modelValue', dateValeur.value)
47
+ }
48
+
49
+ // Synchronise les props externes avec l'état interne
50
+ watch(
51
+ () => props.modelValue,
52
+ nouvelle => {
53
+ dateValeur.value = nouvelle
54
+ },
55
+ )
56
+ </script>
package/composants/csqcDialogue.vue CHANGED
@@ -1,117 +1,118 @@
1
- <template>
2
- <v-dialog
3
- v-model="dialog"
4
- class="pa-0 ma-0"
5
- :width="largeur"
6
- :fullscreen="display.xs.value"
7
- max-width="650"
8
- :persistent="props.persistant"
9
- @keydown.esc="!persistant ? annuler : ''"
10
- @click:outside="!persistant ? annuler : ''"
11
- >
12
- <v-card class="pa-0 ma-0 pl-8 pt-8">
13
- <!-- Bouton en haut à droite -->
14
- <v-btn
15
- icon="mdi-close"
16
- variant="text"
17
- class="position-absolute couleurHover"
18
- style="top: 5px; right: 5px"
19
- @click="annuler"
20
- ></v-btn>
21
-
22
- <v-card-title
23
- class="pa-0 ma-0 pb-6"
24
- style="font-size: 24px; white-space: normal; word-break: break-word"
25
- >
26
- <slot name="titre"></slot>
27
- <div text-h5><span v-html="titre"></span></div>
28
- </v-card-title>
29
-
30
- <v-card-text class="pa-0 ma-0 pb-6 pr-6">
31
- <v-container>
32
- <slot></slot>
33
- <slot name="content"></slot>
34
- </v-container>
35
- </v-card-text>
36
- <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
37
- <slot name="actions"></slot>
38
- <v-btn
39
- v-if="btnAnnuler"
40
- color="primary"
41
- :loading="operationEnCours"
42
- variant="text"
43
- @click="annuler"
44
- >
45
- {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
46
- </v-btn>
47
-
48
- <v-btn
49
- v-if="btnOk"
50
- class="Gouttiere"
51
- color="primary"
52
- :loading="operationEnCours"
53
- :disabled="btnOkDesactiver"
54
- variant="flat"
55
- @click="okBouton"
56
- >
57
- {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
58
- </v-btn>
59
- </v-card-actions>
60
- </v-card>
61
- </v-dialog>
62
- </template>
63
-
64
- <script setup lang="ts">
65
- import { ref } from 'vue'
66
- import { useDisplay } from 'vuetify'
67
-
68
- const display = useDisplay()
69
-
70
- // Déclaration des props
71
- const props = defineProps({
72
- largeur: { type: String, default: '50vw' },
73
- persistant: { type: Boolean, default: true },
74
- operationEnCours: { type: Boolean, default: false },
75
- btnAnnuler: { type: Boolean, default: true },
76
- btnOk: { type: Boolean, default: true },
77
- btnAnnulerTexte: { type: String, default: '' },
78
- btnOkTexte: { type: String, default: '' },
79
- titre: { type: String, default: '' },
80
- btnOkDesactiver: { type: Boolean, default: false },
81
- })
82
-
83
- // Déclaration des événements émis
84
- const emit = defineEmits(['annuler', 'ok'])
85
-
86
- // Gestion de l'état du dialogue
87
- const dialog = ref(false)
88
-
89
- // Méthodes pour gérer l'ouverture et la fermeture
90
- const ouvrir = () => {
91
- dialog.value = true
92
- }
93
-
94
- const fermer = () => {
95
- dialog.value = false
96
- }
97
-
98
- // Gestion des actions des boutons
99
- const annuler = () => {
100
- emit('annuler')
101
- fermer()
102
- }
103
-
104
- const okBouton = () => {
105
- emit('ok')
106
- }
107
-
108
- // permet d'exporter les 2 actions
109
- defineExpose({ ouvrir, fermer })
110
- </script>
111
-
112
- <style lang="css" scoped>
113
- .v-card__text,
114
- .v-card__title {
115
- word-break: normal; /* empeche le wrap de couper un mot en XS */
116
- }
117
- </style>
1
+ <template>
2
+ <v-dialog
3
+ v-model="dialog"
4
+ v-bind="$attrs"
5
+ class="pa-0 ma-0"
6
+ :width="largeur"
7
+ :fullscreen="display.xs.value"
8
+ max-width="650"
9
+ :persistent="props.persistant"
10
+ @keydown.esc="!persistant ? annuler : ''"
11
+ @click:outside="!persistant ? annuler : ''"
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="annuler"
21
+ ></v-btn>
22
+
23
+ <v-card-title
24
+ class="pa-0 ma-0 pb-6"
25
+ style="font-size: 24px; white-space: normal; word-break: break-word"
26
+ >
27
+ <slot name="titre"></slot>
28
+ <div text-h5><span v-html="titre"></span></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
+ :loading="operationEnCours"
43
+ variant="text"
44
+ @click="annuler"
45
+ >
46
+ {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
47
+ </v-btn>
48
+
49
+ <v-btn
50
+ v-if="btnOk"
51
+ class="Gouttiere"
52
+ color="primary"
53
+ :loading="operationEnCours"
54
+ :disabled="btnOkDesactiver"
55
+ variant="flat"
56
+ @click="okBouton"
57
+ >
58
+ {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
59
+ </v-btn>
60
+ </v-card-actions>
61
+ </v-card>
62
+ </v-dialog>
63
+ </template>
64
+
65
+ <script setup lang="ts">
66
+ import { ref } from 'vue'
67
+ import { useDisplay } from 'vuetify'
68
+
69
+ const display = useDisplay()
70
+
71
+ // Déclaration des props
72
+ const props = defineProps({
73
+ largeur: { type: String, default: '50vw' },
74
+ persistant: { type: Boolean, default: true },
75
+ operationEnCours: { type: Boolean, default: false },
76
+ btnAnnuler: { type: Boolean, default: true },
77
+ btnOk: { type: Boolean, default: true },
78
+ btnAnnulerTexte: { type: String, default: '' },
79
+ btnOkTexte: { type: String, default: '' },
80
+ titre: { type: String, default: '' },
81
+ btnOkDesactiver: { type: Boolean, default: false },
82
+ })
83
+
84
+ // Déclaration des événements émis
85
+ const emit = defineEmits(['annuler', 'ok'])
86
+
87
+ // Gestion de l'état du dialogue
88
+ const dialog = ref(false)
89
+
90
+ // Méthodes pour gérer l'ouverture et la fermeture
91
+ const ouvrir = () => {
92
+ dialog.value = true
93
+ }
94
+
95
+ const fermer = () => {
96
+ dialog.value = false
97
+ }
98
+
99
+ // Gestion des actions des boutons
100
+ const annuler = () => {
101
+ emit('annuler')
102
+ fermer()
103
+ }
104
+
105
+ const okBouton = () => {
106
+ emit('ok')
107
+ }
108
+
109
+ // permet d'exporter les 2 actions
110
+ defineExpose({ ouvrir, fermer })
111
+ </script>
112
+
113
+ <style lang="css" scoped>
114
+ .v-card__text,
115
+ .v-card__title {
116
+ word-break: normal; /* empeche le wrap de couper un mot en XS */
117
+ }
118
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "codevdesign",
3
- "version": "0.0.90",
3
+ "version": "0.0.91",
4
4
  "description": "Composants Vuetify 3 pour les projets Codev",
5
5
  "files": [
6
6
  "./**/*.vue",
@@ -13,7 +13,7 @@
13
13
  "build": "vite build"
14
14
  },
15
15
  "dependencies": {
16
- "vuetify": "^3.9.0",
16
+ "vuetify": "^3.10.2",
17
17
  "vue-i18n": "^11.0.0",
18
18
  "@e965/xlsx": "^0.20.3",
19
19
  "tinymce": "^8.0.2",