Skip to content

Commit c0b9be8

Browse files
laruisslaruiss
authored
Merge pull request #328 from dnum-mi/feat/add-required-tip-slot
feat: ✨ Permet personnalisation des labels des champs requis
2 parents 9b28914 + 68fe3d0 commit c0b9be8

File tree

9 files changed

+385
-21
lines changed

9 files changed

+385
-21
lines changed

‎src/components/DsfrCheckbox/DsfrCheckbox.stories.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,81 @@ Checkbox.args = {
8181
name: 'name1',
8282
hint: 'Description 1',
8383
}
84+
export const CheckboxRequis = (args) => ({
85+
components: { DsfrCheckbox },
86+
data () {
87+
return { ...args }
88+
},
89+
template: `
90+
<component :is="'style'">
91+
.required {
92+
color: #f60700;
93+
}
94+
</component>
95+
<DsfrCheckbox
96+
:label="label"
97+
:disabled="disabled"
98+
:required="required"
99+
:hint="hint"
100+
:name="name || 'name1'"
101+
v-model="modelValue"
102+
/>
103+
`,
104+
watch: {
105+
modelValue (newValue, oldValue) {
106+
this.onChange(newValue)
107+
},
108+
},
109+
})
110+
CheckboxRequis.args = {
111+
disabled: false,
112+
dark: false,
113+
modelValue: false,
114+
required: true,
115+
label: 'En cochant vous acceptez...',
116+
name: 'name1',
117+
hint: 'Description 1',
118+
}
119+
120+
export const CheckboxRequisPersonnalise = (args) => ({
121+
components: { DsfrCheckbox },
122+
data () {
123+
return { ...args }
124+
},
125+
template: `
126+
<component :is="'style'">
127+
.required {
128+
color: #f60700;
129+
}
130+
</component>
131+
<DsfrCheckbox
132+
:label="label"
133+
:disabled="disabled"
134+
:required="required"
135+
:hint="hint"
136+
:name="name || 'name1'"
137+
v-model="modelValue"
138+
>
139+
<template #required-tip>
140+
<em>&nbsp;(obligatoire)</em>
141+
</template>
142+
</DsfrCheckbox>
143+
`,
144+
watch: {
145+
modelValue (newValue, oldValue) {
146+
this.onChange(newValue)
147+
},
148+
},
149+
})
150+
CheckboxRequisPersonnalise.args = {
151+
disabled: false,
152+
dark: false,
153+
modelValue: false,
154+
required: true,
155+
label: 'En cochant vous acceptez...',
156+
name: 'name1',
157+
hint: 'Description 1',
158+
}
84159

85160
export const CheckboxAvecErreur = (args) => ({
86161
components: { DsfrCheckbox },
@@ -91,6 +166,7 @@ export const CheckboxAvecErreur = (args) => ({
91166
<DsfrCheckbox
92167
:label="label"
93168
:disabled="disabled"
169+
:required="required"
94170
:hint="hint"
95171
:error-message="errorMessage"
96172
v-model="modelValue"
@@ -106,6 +182,7 @@ CheckboxAvecErreur.args = {
106182
disabled: false,
107183
dark: false,
108184
modelValue: false,
185+
required: false,
109186
label: 'Checkbox 1',
110187
hint: 'Description 1',
111188
errorMessage: 'Erreur formulaire',

‎src/components/DsfrCheckbox/DsfrCheckbox.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,14 @@ export default defineComponent({
7272
:for="id"
7373
class="fr-label"
7474
>
75-
{{ label }} {{ $attrs.required ? '*' : '' }}
75+
{{ label }}
76+
<!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`) -->
77+
<slot name="required-tip">
78+
<span
79+
v-if="$attrs.required"
80+
class="required"
81+
>&nbsp;*</span>
82+
</slot>
7683
<span
7784
v-if="hint"
7885
class="fr-hint-text"

‎src/components/DsfrCheckbox/DsfrCheckboxSet.stories.js‎

Lines changed: 125 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export default {
3737
control: 'object',
3838
description: 'Tableau des valeurs sélectionnées (cochées) du groupe de checkboxes',
3939
},
40+
required: {
41+
control: 'boolean',
42+
description: 'Permet de spécifier que cet ensemble de champs doit être renseigné',
43+
},
4044
onChange: {
4145
action: 'changed',
4246
},
@@ -55,6 +59,7 @@ export const CheckboxSet = (args) => ({
5559
:options="options"
5660
:inline="inline"
5761
:disabled="disabled"
62+
:required="required"
5863
:errorMessage="errorMessage"
5964
:validMessage="validMessage"
6065
/>
@@ -73,6 +78,7 @@ CheckboxSet.args = {
7378
legend: 'Légende des champs',
7479
disabled: false,
7580
inline: false,
81+
required: false,
7682
errorMessage: '',
7783
validMessage: '',
7884
modelValue: ['name1'],
@@ -97,7 +103,7 @@ CheckboxSet.args = {
97103
],
98104
}
99105

100-
export const CheckboxSetAvecErreur = (args) => ({
106+
export const CheckboxSetRequis = (args) => ({
101107
components: { DsfrCheckboxSet },
102108
data () {
103109
return args
@@ -106,6 +112,123 @@ export const CheckboxSetAvecErreur = (args) => ({
106112
<DsfrCheckboxSet
107113
:legend="legend"
108114
v-model="modelValue"
115+
:options="options"
116+
:inline="inline"
117+
:disabled="disabled"
118+
:required="required"
119+
:errorMessage="errorMessage"
120+
:validMessage="validMessage"
121+
/>
122+
`,
123+
watch: {
124+
modelValue (val) {
125+
this.onChange(val)
126+
},
127+
},
128+
mounted () {
129+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
130+
},
131+
})
132+
CheckboxSetRequis.args = {
133+
dark: false,
134+
legend: 'Veuillez choisir au moins une des propositions suivantes',
135+
disabled: false,
136+
inline: false,
137+
required: true,
138+
errorMessage: '',
139+
validMessage: '',
140+
modelValue: ['name1'],
141+
options: [
142+
{
143+
label: 'Valeur 1',
144+
id: 'name1',
145+
name: 'name1',
146+
hint: 'Description 1',
147+
},
148+
{
149+
label: 'Valeur 2',
150+
id: 'name2',
151+
name: 'name2',
152+
hint: 'Description 2',
153+
},
154+
{
155+
label: 'Valeur 3',
156+
id: 'name3',
157+
name: 'name3',
158+
},
159+
],
160+
}
161+
162+
export const CheckboxSetRequisPersonnalise = (args) => ({
163+
components: { DsfrCheckboxSet },
164+
data () {
165+
return args
166+
},
167+
template: `
168+
<DsfrCheckboxSet
169+
:legend="legend"
170+
v-model="modelValue"
171+
:options="options"
172+
:inline="inline"
173+
:disabled="disabled"
174+
:required="required"
175+
:errorMessage="errorMessage"
176+
:validMessage="validMessage"
177+
>
178+
<template #required-tip>
179+
<em> (en choisir au moins un)</em>
180+
</template>
181+
</DsfrCheckboxSet>
182+
`,
183+
watch: {
184+
modelValue (val) {
185+
this.onChange(val)
186+
},
187+
},
188+
mounted () {
189+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
190+
},
191+
})
192+
CheckboxSetRequisPersonnalise.args = {
193+
dark: false,
194+
legend: 'Label de l’ensemble des champs',
195+
disabled: false,
196+
inline: false,
197+
required: true,
198+
errorMessage: '',
199+
validMessage: '',
200+
modelValue: ['name1'],
201+
options: [
202+
{
203+
label: 'Valeur 1',
204+
id: 'name1',
205+
name: 'name1',
206+
hint: 'Description 1',
207+
},
208+
{
209+
label: 'Valeur 2',
210+
id: 'name2',
211+
name: 'name2',
212+
hint: 'Description 2',
213+
},
214+
{
215+
label: 'Valeur 3',
216+
id: 'name3',
217+
name: 'name3',
218+
},
219+
],
220+
}
221+
222+
export const CheckboxSetAvecErreur = (args) => ({
223+
components: { DsfrCheckboxSet },
224+
data () {
225+
return args
226+
},
227+
template: `
228+
<DsfrCheckboxSet
229+
v-model="modelValue"
230+
:legend="legend"
231+
:required="required"
109232
:error-message="errorMessage"
110233
:options="options"
111234
:inline="inline"
@@ -125,6 +248,7 @@ CheckboxSetAvecErreur.args = {
125248
legend: 'Légende des champs',
126249
disabled: false,
127250
inline: false,
251+
required: false,
128252
errorMessage: 'Message d\'erreur',
129253
modelValue: ['name1'],
130254
options: [

‎src/components/DsfrCheckbox/DsfrCheckboxSet.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default defineComponent({
2020
},
2121
disabled: Boolean,
2222
inline: Boolean,
23+
required: Boolean,
2324
errorMessage: {
2425
type: String,
2526
default: '',
@@ -80,6 +81,13 @@ export default defineComponent({
8081
class="fr-fieldset__legend fr-text--regular"
8182
>
8283
{{ legend }}
84+
<!-- @slot Slot pour indiquer que le champ doit être renseigné. Par défaut, contient une astérisque si la props `required` est passée. -->
85+
<slot name="required-tip">
86+
<span
87+
v-if="required"
88+
class="required"
89+
>&nbsp;*</span>
90+
</slot>
8391
</legend>
8492
<div
8593
class="fr-fieldset__content"

‎src/components/DsfrInput/DsfrInput.stories.js‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ LabelVisible.args = {
148148
disabled: false,
149149
}
150150

151-
export const ChampObligatoire = (args) => ({
151+
export const ChampRequis = (args) => ({
152152
components: {
153153
DsfrInput,
154154
},
@@ -182,7 +182,44 @@ export const ChampObligatoire = (args) => ({
182182
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
183183
},
184184
})
185-
ChampObligatoire.args = {
185+
ChampRequis.args = {
186+
dark: false,
187+
label: 'Label champ de saisie',
188+
labelVisible: true,
189+
placeholder: 'Placeholder',
190+
modelValue: '',
191+
disabled: false,
192+
isTextarea: true,
193+
}
194+
195+
export const ChampRequisPersonnalise = (args) => ({
196+
components: {
197+
DsfrInput,
198+
},
199+
data () {
200+
return {
201+
...args,
202+
}
203+
},
204+
template: `
205+
<DsfrInput
206+
:model-value="modelValue"
207+
:label="label"
208+
:label-visible="labelVisible"
209+
:placeholder="placeholder"
210+
:disabled="disabled"
211+
:required="true"
212+
>
213+
<template #required-tip>
214+
<em> (obligatoire)</em>
215+
</template>
216+
</DsfrInput>
217+
`,
218+
mounted () {
219+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
220+
},
221+
})
222+
ChampRequisPersonnalise.args = {
186223
dark: false,
187224
label: 'Label champ de saisie',
188225
labelVisible: true,

‎src/components/DsfrInput/DsfrInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default defineComponent({
6565
>
6666
{{ label }}
6767

68-
<!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque (dans un `<span class="required">`) -->
68+
<!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`) -->
6969
<slot name="required-tip">
7070
<span
7171
v-if="$attrs.required"

0 commit comments

Comments
 (0)