codevdesign 0.0.14 → 0.0.16

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,53 +1,53 @@
1
- <template>
2
- <div>
3
- <v-list-item-content>
4
- <v-list-item-title>{{ nomUnite }}</v-list-item-title>
5
- <v-list-item-subtitle v-if="getPreference != ''">
6
- {{ getPreference }}
7
- </v-list-item-subtitle>
8
- <v-list-item-subtitle
9
- v-if="getPreference == ''"
10
- class="messageErreurChaiseItem"
11
- >
12
- {{ $t('csqc.message.chaiseSelection') }}
13
- </v-list-item-subtitle>
14
- </v-list-item-content>
15
- </div>
16
- </template>
17
- <script lang="ts" setup>
18
- import { computed } from 'vue'
19
-
20
- // Définition des props
21
- const props = defineProps<{
22
- uniteId: number
23
- preferences: Array<{ chaiseId: number }>
24
- dictChaisesReleve: Record<number, Array<{ id: number; nom: string }>>
25
- unites: Array<{ id: number; nom: string }>
26
- }>()
27
-
28
- const nomUnite = computed(() => {
29
- if (!props.uniteId || !props.unites?.length) {
30
- return ''
31
- }
32
-
33
- const unite = props.unites.find(u => u.id == props.uniteId)
34
- return unite?.nom || ''
35
- })
36
-
37
- const getPreference = computed(() => {
38
- for (let i = 0; i < props.dictChaisesReleve[props.uniteId]?.length; i += 1) {
39
- if (props.preferences.some(p => p.chaiseId == props.dictChaisesReleve[props.uniteId][i].id)) {
40
- return props.dictChaisesReleve[props.uniteId][i].nom
41
- }
42
- }
43
-
44
- return ''
45
- })
46
- </script>
47
-
48
- <style scoped>
49
- .messageErreurChaiseItem {
50
- color: red !important;
51
- font-style: italic;
52
- }
53
- </style>
1
+ <template>
2
+ <div>
3
+ <v-list-item-content>
4
+ <v-list-item-title>{{ nomUnite }}</v-list-item-title>
5
+ <v-list-item-subtitle v-if="getPreference != ''">
6
+ {{ getPreference }}
7
+ </v-list-item-subtitle>
8
+ <v-list-item-subtitle
9
+ v-if="getPreference == ''"
10
+ class="messageErreurChaiseItem"
11
+ >
12
+ {{ $t('csqc.message.chaiseSelection') }}
13
+ </v-list-item-subtitle>
14
+ </v-list-item-content>
15
+ </div>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { computed } from 'vue'
19
+
20
+ // Définition des props
21
+ const props = defineProps<{
22
+ uniteId: number
23
+ preferences: Array<{ chaiseId: number }>
24
+ dictChaisesReleve: Record<number, Array<{ id: number; nom: string }>>
25
+ unites: Array<{ id: number; nom: string }>
26
+ }>()
27
+
28
+ const nomUnite = computed(() => {
29
+ if (!props.uniteId || !props.unites?.length) {
30
+ return ''
31
+ }
32
+
33
+ const unite = props.unites.find(u => u.id == props.uniteId)
34
+ return unite?.nom || ''
35
+ })
36
+
37
+ const getPreference = computed(() => {
38
+ for (let i = 0; i < props.dictChaisesReleve[props.uniteId]?.length; i += 1) {
39
+ if (props.preferences.some(p => p.chaiseId == props.dictChaisesReleve[props.uniteId][i].id)) {
40
+ return props.dictChaisesReleve[props.uniteId][i].nom
41
+ }
42
+ }
43
+
44
+ return ''
45
+ })
46
+ </script>
47
+
48
+ <style scoped>
49
+ .messageErreurChaiseItem {
50
+ color: red !important;
51
+ font-style: italic;
52
+ }
53
+ </style>
@@ -1,74 +1,74 @@
1
- <template>
2
- <csqcDialogue
3
- :titre="props.titre"
4
- ref="modale"
5
- :operationEnCours="operationEnCours"
6
- activator="supprimer"
7
- :largeur="props.largeur"
8
- @ok="confirmer"
9
- @annuler="annuler"
10
- >
11
- <v-form
12
- ref="form"
13
- @submit.prevent
14
- >
15
- <v-row>
16
- <v-col
17
- cols="12"
18
- class="pa-0 ma-0"
19
- >
20
- {{ texte }}
21
- </v-col>
22
- </v-row>
23
- </v-form>
24
- </csqcDialogue>
25
- </template>
26
-
27
- <script lang="ts" setup>
28
- import { ref } from 'vue'
29
- import csqcDialogue from './csqcDialogue.vue'
30
-
31
- const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
32
- const utilisateurATermine = ref(false)
33
- const reponse = ref(false)
34
- const texte = ref('')
35
- const modeAlerte = ref(false)
36
-
37
- const props = defineProps({
38
- operationEnCours: { type: Boolean, default: false },
39
- titre: { type: String, default: '' },
40
- largeur: { type: String, default: '525px' },
41
- })
42
-
43
- const ouvrir = async (message: string, modeAlerteParam: boolean = false) => {
44
- texte.value = message
45
- modeAlerte.value = modeAlerteParam
46
- utilisateurATermine.value = false
47
- modale.value?.ouvrir()
48
-
49
- while (!utilisateurATermine.value) {
50
- await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
51
- }
52
-
53
- return reponse.value
54
- }
55
-
56
- const confirmer = (): void => {
57
- reponse.value = true
58
- utilisateurATermine.value = true
59
-
60
- if (modeAlerte.value) fermer()
61
- }
62
-
63
- const annuler = (): void => {
64
- reponse.value = false
65
- utilisateurATermine.value = true
66
- fermer()
67
- }
68
-
69
- const fermer = (): void => {
70
- modale.value?.fermer()
71
- }
72
-
73
- defineExpose({ ouvrir, fermer })
74
- </script>
1
+ <template>
2
+ <csqcDialogue
3
+ :titre="props.titre"
4
+ ref="modale"
5
+ :operationEnCours="operationEnCours"
6
+ activator="supprimer"
7
+ :largeur="props.largeur"
8
+ @ok="confirmer"
9
+ @annuler="annuler"
10
+ >
11
+ <v-form
12
+ ref="form"
13
+ @submit.prevent
14
+ >
15
+ <v-row>
16
+ <v-col
17
+ cols="12"
18
+ class="pa-0 ma-0"
19
+ >
20
+ {{ texte }}
21
+ </v-col>
22
+ </v-row>
23
+ </v-form>
24
+ </csqcDialogue>
25
+ </template>
26
+
27
+ <script lang="ts" setup>
28
+ import { ref } from 'vue'
29
+ import csqcDialogue from './csqcDialogue.vue'
30
+
31
+ const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
32
+ const utilisateurATermine = ref(false)
33
+ const reponse = ref(false)
34
+ const texte = ref('')
35
+ const modeAlerte = ref(false)
36
+
37
+ const props = defineProps({
38
+ operationEnCours: { type: Boolean, default: false },
39
+ titre: { type: String, default: '' },
40
+ largeur: { type: String, default: '525px' },
41
+ })
42
+
43
+ const ouvrir = async (message: string, modeAlerteParam: boolean = false) => {
44
+ texte.value = message
45
+ modeAlerte.value = modeAlerteParam
46
+ utilisateurATermine.value = false
47
+ modale.value?.ouvrir()
48
+
49
+ while (!utilisateurATermine.value) {
50
+ await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
51
+ }
52
+
53
+ return reponse.value
54
+ }
55
+
56
+ const confirmer = (): void => {
57
+ reponse.value = true
58
+ utilisateurATermine.value = true
59
+
60
+ if (modeAlerte.value) fermer()
61
+ }
62
+
63
+ const annuler = (): void => {
64
+ reponse.value = false
65
+ utilisateurATermine.value = true
66
+ fermer()
67
+ }
68
+
69
+ const fermer = (): void => {
70
+ modale.value?.fermer()
71
+ }
72
+
73
+ defineExpose({ ouvrir, fermer })
74
+ </script>
@@ -1,118 +1,118 @@
1
- <template>
2
- <v-dialog
3
- class="pa-0 ma-0"
4
- v-model="dialog"
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"
25
- >
26
- <slot name="titre"></slot>
27
- <div class="headline">{{ titre }}</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
- variant="flat"
53
- :loading="operationEnCours"
54
- :disabled="btnOkDesactiver"
55
- @click="okBouton"
56
- outlined
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>
1
+ <template>
2
+ <v-dialog
3
+ class="pa-0 ma-0"
4
+ v-model="dialog"
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"
25
+ >
26
+ <slot name="titre"></slot>
27
+ <div class="headline">{{ titre }}</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
+ variant="flat"
53
+ :loading="operationEnCours"
54
+ :disabled="btnOkDesactiver"
55
+ @click="okBouton"
56
+ outlined
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>