Skip to content

Commit 4888234

Browse files
laruisslaruiss
authored
Merge pull request #268 from dnum-mi/feat/improve-input
feat: ✨ Ajoute la props type au composant input
2 parents 4c0128c + 7c79032 commit 4888234

File tree

6 files changed

+137
-93
lines changed

6 files changed

+137
-93
lines changed

‎src/components/DsfrAlert/DsfrAlert.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script lang="ts">
1+
<script>
22
import { defineComponent } from 'vue'
33
44
import { getRandomId } from '../../utils/random-utils.js'

‎src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script lang="ts">
1+
<script>
22
import { defineComponent } from 'vue'
33
44
// Ne fonctionne pas dans Nuxt

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

Lines changed: 84 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export default {
1313
control: 'text',
1414
description: 'Label du champ de saisie',
1515
},
16+
type: {
17+
control: 'text',
18+
description: 'Type du champ de saisie cf. [MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input)',
19+
},
1620
hint: {
1721
control: 'text',
1822
description: 'Indice associé au champ de saisie',
@@ -65,23 +69,23 @@ export const LabelNotVisible = (args) => ({
6569
}
6670
},
6771
template: `
68-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
69-
<DsfrInput
70-
:model-value="modelValue"
71-
:label="label"
72-
:hint="hint"
73-
:placeholder="placeholder"
74-
:label-visible="labelVisible"
75-
:disabled="disabled"
76-
/>
77-
</div>
72+
<DsfrInput
73+
:model-value="modelValue"
74+
:label="label"
75+
:hint="hint"
76+
:type="type"
77+
:placeholder="placeholder"
78+
:label-visible="labelVisible"
79+
:disabled="disabled"
80+
/>
7881
`,
7982
mounted () {
8083
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
8184
},
8285
})
8386
LabelNotVisible.args = {
8487
dark: false,
88+
type: 'text',
8589
labelVisible: false,
8690
placeholder: 'Placeholder',
8791
modelValue: '',
@@ -98,16 +102,14 @@ export const LabelVisible = (args) => ({
98102
}
99103
},
100104
template: `
101-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
102-
<DsfrInput
103-
:model-value="modelValue"
104-
:label="label"
105-
:hint="hint"
106-
:label-visible="labelVisible"
107-
:placeholder="placeholder"
108-
:disabled="disabled"
109-
/>
110-
</div>
105+
<DsfrInput
106+
:model-value="modelValue"
107+
:label="label"
108+
:hint="hint"
109+
:label-visible="labelVisible"
110+
:placeholder="placeholder"
111+
:disabled="disabled"
112+
/>
111113
`,
112114
mounted () {
113115
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -136,19 +138,17 @@ export const ChampEnErreur = (args) => ({
136138
},
137139

138140
template: `
139-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
140-
<DsfrInputGroup
141-
:error-message="errorMessage"
142-
>
143-
<DsfrInput
144-
:model-value="modelValue"
145-
:label="label"
146-
:label-visible="labelVisible"
147-
:placeholder="placeholder"
148-
:is-invalid="isInvalid"
149-
/>
150-
</DsfrInputGroup>
151-
</div>
141+
<DsfrInputGroup
142+
:error-message="errorMessage"
143+
>
144+
<DsfrInput
145+
:model-value="modelValue"
146+
:label="label"
147+
:label-visible="labelVisible"
148+
:placeholder="placeholder"
149+
:is-invalid="isInvalid"
150+
/>
151+
</DsfrInputGroup>
152152
`,
153153
mounted () {
154154
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -175,19 +175,17 @@ export const ChampValide = (args) => ({
175175
}
176176
},
177177
template: `
178-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
179-
<DsfrInputGroup
180-
:valid-message="validMessage"
181-
>
182-
<DsfrInput
183-
:model-value="modelValue"
184-
:label="label"
185-
:label-visible="labelVisible"
186-
:placeholder="placeholder"
187-
:is-valid="isValid"
188-
/>
189-
</DsfrInputGroup>
190-
</div>
178+
<DsfrInputGroup
179+
:valid-message="validMessage"
180+
>
181+
<DsfrInput
182+
:model-value="modelValue"
183+
:label="label"
184+
:label-visible="labelVisible"
185+
:placeholder="placeholder"
186+
:is-valid="isValid"
187+
/>
188+
</DsfrInputGroup>
191189
`,
192190
mounted () {
193191
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -203,6 +201,38 @@ ChampValide.args = {
203201
isValid: true,
204202
}
205203

204+
export const ChampDeSaisieDeDate = (args) => ({
205+
components: {
206+
DsfrInput,
207+
},
208+
data () {
209+
return {
210+
...args,
211+
}
212+
},
213+
template: `
214+
<DsfrInput
215+
:model-value="modelValue"
216+
:label="label"
217+
:hint="hint"
218+
type="date"
219+
:placeholder="placeholder"
220+
:label-visible="labelVisible"
221+
:disabled="disabled"
222+
/>
223+
`,
224+
mounted () {
225+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
226+
},
227+
})
228+
ChampDeSaisieDeDate.args = {
229+
dark: false,
230+
labelVisible: false,
231+
placeholder: 'Placeholder',
232+
modelValue: '',
233+
disabled: false,
234+
}
235+
206236
export const ZoneDeTexte = (args) => ({
207237
components: {
208238
DsfrInput,
@@ -213,16 +243,14 @@ export const ZoneDeTexte = (args) => ({
213243
}
214244
},
215245
template: `
216-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
217-
<DsfrInput
218-
:model-value="modelValue"
219-
:label="label"
220-
:label-visible="labelVisible"
221-
:placeholder="placeholder"
222-
:disabled="disabled"
223-
:is-textarea="isTextarea"
224-
/>
225-
</div>
246+
<DsfrInput
247+
:model-value="modelValue"
248+
:label="label"
249+
:label-visible="labelVisible"
250+
:placeholder="placeholder"
251+
:disabled="disabled"
252+
:is-textarea="isTextarea"
253+
/>
226254
`,
227255
mounted () {
228256
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')

‎src/components/DsfrInput/DsfrInput.vue‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { getRandomId } from '../../utils/random-utils.js'
55
66
export default defineComponent({
77
name: 'DsfrInput',
8+
inheritAttrs: false,
89
props: {
910
id: {
1011
type: String,
@@ -24,6 +25,10 @@ export default defineComponent({
2425
type: String,
2526
default: '',
2627
},
28+
wrapperClass: {
29+
type: String,
30+
default: '',
31+
},
2732
labelVisible: Boolean,
2833
modelValue: {
2934
type: String,
@@ -56,20 +61,25 @@ export default defineComponent({
5661
class="fr-hint-text"
5762
>{{ hint }}</span>
5863
</label>
59-
<component
60-
:is="isComponent"
61-
:id="id"
62-
class="fr-input"
63-
:class="{
64-
'fr-input--error': isInvalid,
65-
'fr-input--valid': isValid,
66-
}"
67-
:value="modelValue"
68-
v-bind="$attrs"
69-
:aria-aria-describedby="descriptionId || undefined"
70-
@input="$emit('update:modelValue', $event.target.value)"
71-
@keydown.esc="$emit('update:modelValue', '')"
72-
/>
64+
<div
65+
class="fr-input-wrap"
66+
:class="[wrapperClass, { 'fr-fi-calendar-line': $attrs.type === 'date' }]"
67+
>
68+
<component
69+
:is="isComponent"
70+
:id="id"
71+
class="fr-input"
72+
:class="{
73+
'fr-input--error': isInvalid,
74+
'fr-input--valid': isValid,
75+
}"
76+
:value="modelValue"
77+
v-bind="$attrs"
78+
:aria-aria-describedby="descriptionId || undefined"
79+
@input="$emit('update:modelValue', $event.target.value)"
80+
@keydown.esc="$emit('update:modelValue', '')"
81+
/>
82+
</div>
7383
</template>
7484

7585
<style src="@gouvfr/dsfr/dist/component/input/input.main.css" />

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

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export default {
1717
control: 'text',
1818
description: 'Indice associé au champ de saisie',
1919
},
20+
type: {
21+
control: 'text',
22+
description: 'Type du champ de saisie cf. [MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input)',
23+
},
2024
labelVisible: {
2125
control: 'boolean',
2226
description: 'Indique si le label doit être visible (`true`) ou non (`false`, défaut). Sera passé à DsfrInput si modelValue n’est pas `undefined`',
@@ -64,17 +68,16 @@ export const ChampEnErreur = (args) => ({
6468
},
6569

6670
template: `
67-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
68-
<DsfrInputGroup
69-
:error-message="errorMessage"
70-
:model-value="modelValue"
71-
:label="label"
72-
:hint="hint"
73-
:label-visible="labelVisible"
74-
:placeholder="placeholder"
75-
:is-invalid="isInvalid"
71+
<DsfrInputGroup
72+
:error-message="errorMessage"
73+
:model-value="modelValue"
74+
:type="type"
75+
:label="label"
76+
:hint="hint"
77+
:label-visible="labelVisible"
78+
:placeholder="placeholder"
79+
:is-invalid="isInvalid"
7680
/>
77-
</div>
7881
`,
7982
mounted () {
8083
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -88,6 +91,7 @@ ChampEnErreur.args = {
8891
modelValue: '',
8992
errorMessage: 'Message d’erreur',
9093
isInvalid: true,
94+
type: 'text',
9195
}
9296

9397
export const ChampValide = (args) => ({
@@ -101,23 +105,23 @@ export const ChampValide = (args) => ({
101105
}
102106
},
103107
template: `
104-
<div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
105-
<DsfrInputGroup
106-
:valid-message="validMessage"
107-
:error-message="errorMessage"
108-
:model-value="modelValue"
109-
:label="label"
110-
:label-visible="labelVisible"
111-
:placeholder="placeholder"
112-
/>
113-
</div>
108+
<DsfrInputGroup
109+
:valid-message="validMessage"
110+
:error-message="errorMessage"
111+
:model-value="modelValue"
112+
:type="type"
113+
:label="label"
114+
:label-visible="labelVisible"
115+
:placeholder="placeholder"
116+
/>
114117
`,
115118
mounted () {
116119
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
117120
},
118121
})
119122
ChampValide.args = {
120123
dark: false,
124+
type: 'text',
121125
label: 'Label champ de saisie',
122126
labelVisible: true,
123127
placeholder: 'Placeholder',

‎src/components/DsfrInput/DsfrInputGroup.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default defineComponent({
1010
components: {
1111
DsfrInput,
1212
},
13+
inheritAttrs: false,
1314
1415
props: {
1516
id: {
@@ -77,6 +78,7 @@ export default defineComponent({
7778
<slot />
7879
<DsfrInput
7980
v-if="modelValue !== undefined"
81+
v-bind="$attrs"
8082
:is-valid="!!validMessage"
8183
:is-invalid="!!errorMessage"
8284
:label="label"
@@ -85,7 +87,7 @@ export default defineComponent({
8587
:label-visible="labelVisible"
8688
:model-value="modelValue"
8789
:placeholder="placeholder"
88-
@update:modelValue="$emit('update:modelValue', $event)"
90+
@update:model-value="$emit('update:modelValue', $event)"
8991
/>
9092
<p
9193
v-if="message"

0 commit comments

Comments
 (0)