codevdesign 1.0.41 → 1.0.42
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/csqcOptionSwitch.vue +81 -99
- package/package.json +1 -1
|
@@ -1,120 +1,102 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
<v-row
|
|
3
|
+
dense
|
|
4
|
+
class="align-center"
|
|
5
|
+
>
|
|
6
|
+
<!-- Texte + détails -->
|
|
7
|
+
<v-col
|
|
8
|
+
cols="10"
|
|
9
|
+
xl="11"
|
|
10
|
+
class="py-0"
|
|
11
|
+
>
|
|
12
|
+
<component
|
|
13
|
+
:is="labelCliquable ? 'label' : 'div'"
|
|
14
|
+
:for="labelCliquable ? switchId : undefined"
|
|
15
|
+
class="labelSwitchSiSwitchApres"
|
|
16
|
+
:class="{ 'label-cliquable': labelCliquable && !desactiver }"
|
|
9
17
|
>
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
:disabled="desactiver"
|
|
19
|
-
density="compact"
|
|
20
|
-
inset
|
|
21
|
-
v-bind="$attrs"
|
|
22
|
-
hide-details
|
|
23
|
-
@update:model-value="sauvegarder"
|
|
24
|
-
/>
|
|
25
|
-
</v-col>
|
|
26
|
-
</v-row>
|
|
27
|
-
<v-row dense>
|
|
28
|
-
<v-col
|
|
29
|
-
cols="9"
|
|
30
|
-
md="8"
|
|
18
|
+
<slot name="label">
|
|
19
|
+
{{ texte }}
|
|
20
|
+
</slot>
|
|
21
|
+
</component>
|
|
22
|
+
|
|
23
|
+
<div
|
|
24
|
+
v-if="afficherDetails"
|
|
25
|
+
class="details"
|
|
31
26
|
>
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
27
|
+
<slot name="details">
|
|
28
|
+
<span v-html="texteDetaille"></span>
|
|
29
|
+
</slot>
|
|
30
|
+
</div>
|
|
31
|
+
</v-col>
|
|
32
|
+
|
|
33
|
+
<!-- Switch -->
|
|
34
|
+
<v-col
|
|
35
|
+
cols="2"
|
|
36
|
+
xl="1"
|
|
37
|
+
class="d-flex align-center justify-end py-0"
|
|
38
|
+
>
|
|
39
|
+
<v-switch
|
|
40
|
+
:id="switchId"
|
|
41
|
+
v-model="maValeur"
|
|
42
|
+
class="switch-compact"
|
|
43
|
+
:disabled="desactiver"
|
|
44
|
+
:density="($attrs.density as any) ?? 'compact'"
|
|
45
|
+
:inset="($attrs.inset as any) ?? true"
|
|
46
|
+
v-bind="$attrs"
|
|
47
|
+
hide-details
|
|
48
|
+
/>
|
|
49
|
+
</v-col>
|
|
50
|
+
</v-row>
|
|
36
51
|
</template>
|
|
52
|
+
|
|
37
53
|
<script setup lang="ts">
|
|
38
|
-
import {
|
|
54
|
+
import { computed, useSlots } from 'vue'
|
|
39
55
|
|
|
40
|
-
// Définition des props
|
|
41
56
|
const props = defineProps({
|
|
42
|
-
valeurInverse: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
default: false,
|
|
49
|
-
},
|
|
50
|
-
modelValue: {
|
|
51
|
-
type: Boolean,
|
|
52
|
-
required: true,
|
|
53
|
-
},
|
|
54
|
-
texte: {
|
|
55
|
-
type: String,
|
|
56
|
-
required: true,
|
|
57
|
-
},
|
|
58
|
-
texteDetaille: {
|
|
59
|
-
type: String,
|
|
60
|
-
required: true,
|
|
61
|
-
},
|
|
57
|
+
valeurInverse: { type: Boolean, default: false },
|
|
58
|
+
desactiver: { type: Boolean, default: false },
|
|
59
|
+
modelValue: { type: Boolean, required: true },
|
|
60
|
+
texte: { type: String, required: true },
|
|
61
|
+
texteDetaille: { type: String, default: '' },
|
|
62
|
+
labelCliquable: { type: Boolean, default: true },
|
|
62
63
|
})
|
|
63
64
|
|
|
64
|
-
// Définition de l'événement
|
|
65
65
|
const emit = defineEmits(['update:modelValue'])
|
|
66
|
+
const slots = useSlots()
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
// Montée du composant
|
|
71
|
-
onMounted(() => {
|
|
72
|
-
if (props.valeurInverse) {
|
|
73
|
-
maValeur.value = !props.modelValue
|
|
74
|
-
} else {
|
|
75
|
-
maValeur.value = props.modelValue
|
|
76
|
-
}
|
|
68
|
+
const maValeur = computed<boolean>({
|
|
69
|
+
get: () => (props.valeurInverse ? !props.modelValue : props.modelValue),
|
|
70
|
+
set: v => emit('update:modelValue', props.valeurInverse ? !v : v),
|
|
77
71
|
})
|
|
78
72
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
()
|
|
82
|
-
|
|
83
|
-
if (props.valeurInverse) {
|
|
84
|
-
maValeur.value = !newValue
|
|
85
|
-
} else {
|
|
86
|
-
maValeur.value = newValue
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
)
|
|
90
|
-
|
|
91
|
-
watch(
|
|
92
|
-
() => props.valeurInverse,
|
|
93
|
-
newValue => {
|
|
94
|
-
if (props.valeurInverse) {
|
|
95
|
-
maValeur.value = newValue
|
|
96
|
-
} else {
|
|
97
|
-
maValeur.value = !newValue
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
)
|
|
73
|
+
const afficherDetails = computed(() => {
|
|
74
|
+
const slotExiste = !!slots.details?.().length
|
|
75
|
+
return slotExiste || props.texteDetaille.trim().length > 0
|
|
76
|
+
})
|
|
101
77
|
|
|
102
|
-
|
|
103
|
-
const sauvegarder = () => {
|
|
104
|
-
if (props.valeurInverse) {
|
|
105
|
-
emit('update:modelValue', !maValeur.value)
|
|
106
|
-
} else {
|
|
107
|
-
emit('update:modelValue', maValeur.value)
|
|
108
|
-
}
|
|
109
|
-
}
|
|
78
|
+
const switchId = `sw_${Math.random().toString(36).slice(2)}`
|
|
110
79
|
</script>
|
|
111
80
|
|
|
112
|
-
<style
|
|
81
|
+
<style scoped>
|
|
113
82
|
.labelSwitchSiSwitchApres {
|
|
114
83
|
font-weight: bold;
|
|
115
|
-
|
|
84
|
+
line-height: 1.2;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.label-cliquable {
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.details {
|
|
92
|
+
margin-top: 4px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* compact switch */
|
|
96
|
+
:deep(.switch-compact.v-input) {
|
|
97
|
+
margin: 0;
|
|
116
98
|
}
|
|
117
|
-
.v-
|
|
118
|
-
margin
|
|
99
|
+
:deep(.switch-compact .v-selection-control) {
|
|
100
|
+
margin: 0;
|
|
119
101
|
}
|
|
120
102
|
</style>
|