codevdesign 0.0.27 → 0.0.29
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.
- package/composants/csqcAide.vue +40 -0
- package/composants/csqcEntete.vue +110 -0
- package/composants/csqcOptionSwitch.vue +9 -2
- package/composants/csqcRecherche.vue +12 -0
- package/index.ts +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<v-menu
|
|
3
|
+
v-if="!isXs"
|
|
4
|
+
location="top start"
|
|
5
|
+
>
|
|
6
|
+
<template #activator="{ props: activatorProps }">
|
|
7
|
+
<v-icon
|
|
8
|
+
v-bind="activatorProps"
|
|
9
|
+
:size="small ? 'small' : 'default'"
|
|
10
|
+
start
|
|
11
|
+
color="grisMoyen"
|
|
12
|
+
:style="monstyle"
|
|
13
|
+
>
|
|
14
|
+
mdi-help-circle
|
|
15
|
+
</v-icon>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<v-card style="max-width: 1000px">
|
|
19
|
+
<v-card-text class="pa-6">
|
|
20
|
+
<span v-html="props.aide"></span>
|
|
21
|
+
</v-card-text>
|
|
22
|
+
</v-card>
|
|
23
|
+
</v-menu>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { computed } from 'vue'
|
|
28
|
+
import { useDisplay } from 'vuetify'
|
|
29
|
+
|
|
30
|
+
const props = defineProps<{
|
|
31
|
+
aide: string
|
|
32
|
+
monstyle?: string
|
|
33
|
+
small?: boolean
|
|
34
|
+
}>()
|
|
35
|
+
|
|
36
|
+
const { name } = useDisplay()
|
|
37
|
+
|
|
38
|
+
// on évite d'afficher sur les écrans extra-smalls
|
|
39
|
+
const isXs = computed(() => name.value === 'xs')
|
|
40
|
+
</script>
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<v-app-bar
|
|
3
|
+
flat
|
|
4
|
+
fixed
|
|
5
|
+
color="white"
|
|
6
|
+
class="px-0 mx-0"
|
|
7
|
+
:height="82"
|
|
8
|
+
style="margin-top: 146px"
|
|
9
|
+
>
|
|
10
|
+
<v-row
|
|
11
|
+
class="pt-2"
|
|
12
|
+
@resize="controlAffichage"
|
|
13
|
+
>
|
|
14
|
+
<v-col
|
|
15
|
+
:cols="titreCol"
|
|
16
|
+
class="pr-0 mr-0 pl-5"
|
|
17
|
+
>
|
|
18
|
+
<v-toolbar-title class="titre">
|
|
19
|
+
<!-- Barre de retour -->
|
|
20
|
+
<slot name="retour">
|
|
21
|
+
<v-icon
|
|
22
|
+
v-if="retour"
|
|
23
|
+
size="large"
|
|
24
|
+
start
|
|
25
|
+
color="grisMoyen"
|
|
26
|
+
icon="mdi-arrow-left-thin"
|
|
27
|
+
@click="retournerMenu"
|
|
28
|
+
/></slot>
|
|
29
|
+
|
|
30
|
+
<!-- Titre -->
|
|
31
|
+
<slot name="titre"
|
|
32
|
+
><span class="pl-3"> {{ props.titre }}</span></slot
|
|
33
|
+
>
|
|
34
|
+
|
|
35
|
+
<!-- État -->
|
|
36
|
+
<slot name="etat">
|
|
37
|
+
<span
|
|
38
|
+
v-if="monEtat?.afficher"
|
|
39
|
+
class="pl-10"
|
|
40
|
+
>
|
|
41
|
+
<v-btn
|
|
42
|
+
size="small"
|
|
43
|
+
:color="monEtat.couleur"
|
|
44
|
+
variant="tonal"
|
|
45
|
+
>
|
|
46
|
+
{{ monEtat.texte }}
|
|
47
|
+
</v-btn>
|
|
48
|
+
</span></slot
|
|
49
|
+
>
|
|
50
|
+
</v-toolbar-title>
|
|
51
|
+
</v-col>
|
|
52
|
+
</v-row>
|
|
53
|
+
<!-- Barre en bas -->
|
|
54
|
+
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
|
|
55
|
+
</v-app-bar>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<script setup lang="ts">
|
|
59
|
+
import { useRouter } from 'vue-router'
|
|
60
|
+
import { ref, computed } from 'vue'
|
|
61
|
+
|
|
62
|
+
// Déclaration de l'interface
|
|
63
|
+
interface EnteteEtat {
|
|
64
|
+
afficher: boolean
|
|
65
|
+
couleur: string
|
|
66
|
+
texte: string
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
const router = useRouter()
|
|
70
|
+
|
|
71
|
+
const props = defineProps<{
|
|
72
|
+
titre: string
|
|
73
|
+
retour?: string
|
|
74
|
+
etat?: EnteteEtat
|
|
75
|
+
}>()
|
|
76
|
+
|
|
77
|
+
const titreCol = ref(12)
|
|
78
|
+
|
|
79
|
+
// État calculé basé sur la prop, avec fallback
|
|
80
|
+
const monEtat = computed<EnteteEtat>(() => {
|
|
81
|
+
return (
|
|
82
|
+
props.etat ?? {
|
|
83
|
+
afficher: false,
|
|
84
|
+
couleur: 'primary',
|
|
85
|
+
texte: 'test',
|
|
86
|
+
}
|
|
87
|
+
)
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
function retournerMenu() {
|
|
91
|
+
if (props.retour) {
|
|
92
|
+
router.push({ name: props.retour })
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
function controlAffichage() {
|
|
97
|
+
// logique à l’événement de redimensionnement
|
|
98
|
+
}
|
|
99
|
+
</script>
|
|
100
|
+
<style lang="css" scoped>
|
|
101
|
+
.titre {
|
|
102
|
+
font-size: 1.85rem;
|
|
103
|
+
color: #223654;
|
|
104
|
+
font-weight: bold;
|
|
105
|
+
margin-bottom: 15px;
|
|
106
|
+
}
|
|
107
|
+
.v-icon:hover {
|
|
108
|
+
color: #095797 !important;
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div>
|
|
3
3
|
<v-row dense>
|
|
4
4
|
<v-col
|
|
5
5
|
cols="9"
|
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
<v-switch
|
|
16
16
|
v-model="maValeur"
|
|
17
17
|
:disabled="desactiver"
|
|
18
|
+
:density="densite"
|
|
19
|
+
:inset="inset"
|
|
18
20
|
@change="sauvegarder"
|
|
19
21
|
hide-details
|
|
20
22
|
/>
|
|
@@ -31,7 +33,7 @@
|
|
|
31
33
|
</div>
|
|
32
34
|
</template>
|
|
33
35
|
<script setup lang="ts">
|
|
34
|
-
import { ref, watch, defineProps, defineEmits, onMounted } from 'vue'
|
|
36
|
+
import { ref, watch, defineProps, defineEmits, onMounted, type PropType } from 'vue'
|
|
35
37
|
|
|
36
38
|
// Définition des props
|
|
37
39
|
const props = defineProps({
|
|
@@ -43,6 +45,10 @@
|
|
|
43
45
|
type: Boolean,
|
|
44
46
|
default: false,
|
|
45
47
|
},
|
|
48
|
+
inset: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
default: true,
|
|
51
|
+
},
|
|
46
52
|
modelValue: {
|
|
47
53
|
type: Boolean,
|
|
48
54
|
required: true,
|
|
@@ -55,6 +61,7 @@
|
|
|
55
61
|
type: String,
|
|
56
62
|
required: true,
|
|
57
63
|
},
|
|
64
|
+
densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'compact' },
|
|
58
65
|
})
|
|
59
66
|
|
|
60
67
|
// Définition de l'événement
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
v-if="rechercheAvancee"
|
|
49
49
|
:readonly="chargement || desactiver"
|
|
50
50
|
expand-icon=""
|
|
51
|
+
@update:modelValue="onPanelChange"
|
|
51
52
|
>
|
|
52
53
|
<v-expansion-panel
|
|
53
54
|
flat
|
|
@@ -108,6 +109,7 @@
|
|
|
108
109
|
|
|
109
110
|
const emit = defineEmits<{
|
|
110
111
|
(e: 'update:recherche', recherche: string): void
|
|
112
|
+
(e: 'panneau:etat', isOpen: boolean): void // événement pour l'ouverture/fermeture du panneau
|
|
111
113
|
}>()
|
|
112
114
|
|
|
113
115
|
// Création d'une variable locale pour gérer la recherche
|
|
@@ -125,6 +127,16 @@
|
|
|
125
127
|
watch(rechercheLocale, nouvelleValeur => {
|
|
126
128
|
emit('update:recherche', nouvelleValeur!)
|
|
127
129
|
})
|
|
130
|
+
|
|
131
|
+
// Fonction pour émettre l'événement d'ouverture/fermeture du panneau
|
|
132
|
+
const onPanelChange = (val: unknown) => {
|
|
133
|
+
if (typeof val === 'string' || typeof val === 'number' || val === null) {
|
|
134
|
+
const isOpen = val !== null && val !== ''
|
|
135
|
+
emit('panneau:etat', isOpen)
|
|
136
|
+
} else {
|
|
137
|
+
emit('panneau:etat', false)
|
|
138
|
+
}
|
|
139
|
+
}
|
|
128
140
|
</script>
|
|
129
141
|
|
|
130
142
|
<style lang="css">
|
package/index.ts
CHANGED
|
@@ -10,6 +10,8 @@ import csqcMenu from './composants/gabarit/csqcMenu.vue'
|
|
|
10
10
|
import csqcConfirmation from './composants/csqcConfirmation.vue'
|
|
11
11
|
import csqcTable from './composants/csqcTable/csqcTable.vue'
|
|
12
12
|
import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
|
|
13
|
+
import csqcAide from './composants/csqcAide.vue'
|
|
14
|
+
import csqcEntete from './composants/csqcEntete.vue'
|
|
13
15
|
|
|
14
16
|
import Utilisateur from './modeles/utilisateur'
|
|
15
17
|
import Unite from './modeles/unite'
|
|
@@ -43,6 +45,8 @@ export {
|
|
|
43
45
|
csqcChaise,
|
|
44
46
|
pivFooter,
|
|
45
47
|
pivEntete,
|
|
48
|
+
csqcAide,
|
|
49
|
+
csqcEntete,
|
|
46
50
|
Utilisateur,
|
|
47
51
|
Unite,
|
|
48
52
|
Intervention,
|