feat: ✨ Ajoute la props type au composant input

DaBadBunny · DaBadBunny · commit 7c7903235a9c · 2022-03-15T17:01:43.000+01:00
diff --git a/src/components/DsfrAlert/DsfrAlert.vue b/src/components/DsfrAlert/DsfrAlert.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import { defineComponent } from 'vue'
 
 import { getRandomId } from '../../utils/random-utils.js'
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import { defineComponent } from 'vue'
 
 // Ne fonctionne pas dans Nuxt
diff --git a/src/components/DsfrInput/DsfrInput.stories.js b/src/components/DsfrInput/DsfrInput.stories.js
@@ -13,6 +13,10 @@ export default {
       control: 'text',
       description: 'Label du champ de saisie',
     },
+    type: {
+      control: 'text',
+      description: 'Type du champ de saisie cf. [MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input)',
+    },
     hint: {
       control: 'text',
       description: 'Indice associé au champ de saisie',
@@ -65,23 +69,23 @@ export const LabelNotVisible = (args) => ({
     }
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInput
-        :model-value="modelValue"
-        :label="label"
-        :hint="hint"
-        :placeholder="placeholder"
-        :label-visible="labelVisible"
-        :disabled="disabled"
-      />
-    </div>
+    <DsfrInput
+      :model-value="modelValue"
+      :label="label"
+      :hint="hint"
+      :type="type"
+      :placeholder="placeholder"
+      :label-visible="labelVisible"
+      :disabled="disabled"
+    />
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
   },
 })
 LabelNotVisible.args = {
   dark: false,
+  type: 'text',
   labelVisible: false,
   placeholder: 'Placeholder',
   modelValue: '',
@@ -98,16 +102,14 @@ export const LabelVisible = (args) => ({
     }
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInput
-        :model-value="modelValue"
-        :label="label"
-        :hint="hint"
-        :label-visible="labelVisible"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-    </div>
+    <DsfrInput
+      :model-value="modelValue"
+      :label="label"
+      :hint="hint"
+      :label-visible="labelVisible"
+      :placeholder="placeholder"
+      :disabled="disabled"
+    />
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -136,19 +138,17 @@ export const ChampEnErreur = (args) => ({
   },
 
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInputGroup
-        :error-message="errorMessage"
-      >
-        <DsfrInput
-          :model-value="modelValue"
-          :label="label"
-          :label-visible="labelVisible"
-          :placeholder="placeholder"
-          :is-invalid="isInvalid"
-        />
-      </DsfrInputGroup>
-    </div>
+    <DsfrInputGroup
+      :error-message="errorMessage"
+    >
+      <DsfrInput
+        :model-value="modelValue"
+        :label="label"
+        :label-visible="labelVisible"
+        :placeholder="placeholder"
+        :is-invalid="isInvalid"
+      />
+    </DsfrInputGroup>
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -175,19 +175,17 @@ export const ChampValide = (args) => ({
     }
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInputGroup
-        :valid-message="validMessage"
-      >
-        <DsfrInput
-          :model-value="modelValue"
-          :label="label"
-          :label-visible="labelVisible"
-          :placeholder="placeholder"
-          :is-valid="isValid"
-        />
-      </DsfrInputGroup>
-    </div>
+    <DsfrInputGroup
+      :valid-message="validMessage"
+    >
+      <DsfrInput
+        :model-value="modelValue"
+        :label="label"
+        :label-visible="labelVisible"
+        :placeholder="placeholder"
+        :is-valid="isValid"
+      />
+    </DsfrInputGroup>
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -203,6 +201,38 @@ ChampValide.args = {
   isValid: true,
 }
 
+export const ChampDeSaisieDeDate = (args) => ({
+  components: {
+    DsfrInput,
+  },
+  data () {
+    return {
+      ...args,
+    }
+  },
+  template: `
+    <DsfrInput
+      :model-value="modelValue"
+      :label="label"
+      :hint="hint"
+      type="date"
+      :placeholder="placeholder"
+      :label-visible="labelVisible"
+      :disabled="disabled"
+    />
+  `,
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+ChampDeSaisieDeDate.args = {
+  dark: false,
+  labelVisible: false,
+  placeholder: 'Placeholder',
+  modelValue: '',
+  disabled: false,
+}
+
 export const ZoneDeTexte = (args) => ({
   components: {
     DsfrInput,
@@ -213,16 +243,14 @@ export const ZoneDeTexte = (args) => ({
     }
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInput
-        :model-value="modelValue"
-        :label="label"
-        :label-visible="labelVisible"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :is-textarea="isTextarea"
-      />
-    </div>
+    <DsfrInput
+      :model-value="modelValue"
+      :label="label"
+      :label-visible="labelVisible"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :is-textarea="isTextarea"
+    />
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
diff --git a/src/components/DsfrInput/DsfrInput.vue b/src/components/DsfrInput/DsfrInput.vue
@@ -5,6 +5,7 @@ import { getRandomId } from '../../utils/random-utils.js'
 
 export default defineComponent({
   name: 'DsfrInput',
+  inheritAttrs: false,
   props: {
     id: {
       type: String,
@@ -24,6 +25,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    wrapperClass: {
+      type: String,
+      default: '',
+    },
     labelVisible: Boolean,
     modelValue: {
       type: String,
@@ -56,20 +61,25 @@ export default defineComponent({
       class="fr-hint-text"
     >{{ hint }}</span>
   </label>
-  <component
-    :is="isComponent"
-    :id="id"
-    class="fr-input"
-    :class="{
-      'fr-input--error': isInvalid,
-      'fr-input--valid': isValid,
-    }"
-    :value="modelValue"
-    v-bind="$attrs"
-    :aria-aria-describedby="descriptionId || undefined"
-    @input="$emit('update:modelValue', $event.target.value)"
-    @keydown.esc="$emit('update:modelValue', '')"
-  />
+  <div
+    class="fr-input-wrap"
+    :class="[wrapperClass, { 'fr-fi-calendar-line': $attrs.type === 'date' }]"
+  >
+    <component
+      :is="isComponent"
+      :id="id"
+      class="fr-input"
+      :class="{
+        'fr-input--error': isInvalid,
+        'fr-input--valid': isValid,
+      }"
+      :value="modelValue"
+      v-bind="$attrs"
+      :aria-aria-describedby="descriptionId || undefined"
+      @input="$emit('update:modelValue', $event.target.value)"
+      @keydown.esc="$emit('update:modelValue', '')"
+    />
+  </div>
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/input/input.main.css" />
diff --git a/src/components/DsfrInput/DsfrInputGroup.stories.js b/src/components/DsfrInput/DsfrInputGroup.stories.js
@@ -17,6 +17,10 @@ export default {
       control: 'text',
       description: 'Indice associé au champ de saisie',
     },
+    type: {
+      control: 'text',
+      description: 'Type du champ de saisie cf. [MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input)',
+    },
     labelVisible: {
       control: 'boolean',
       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) => ({
   },
 
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInputGroup
-        :error-message="errorMessage"
-        :model-value="modelValue"
-        :label="label"
-        :hint="hint"
-        :label-visible="labelVisible"
-        :placeholder="placeholder"
-        :is-invalid="isInvalid"
+    <DsfrInputGroup
+      :error-message="errorMessage"
+      :model-value="modelValue"
+      :type="type"
+      :label="label"
+      :hint="hint"
+      :label-visible="labelVisible"
+      :placeholder="placeholder"
+      :is-invalid="isInvalid"
       />
-    </div>
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
@@ -88,6 +91,7 @@ ChampEnErreur.args = {
   modelValue: '',
   errorMessage: 'Message d’erreur',
   isInvalid: true,
+  type: 'text',
 }
 
 export const ChampValide = (args) => ({
@@ -101,23 +105,23 @@ export const ChampValide = (args) => ({
     }
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
-      <DsfrInputGroup
-        :valid-message="validMessage"
-        :error-message="errorMessage"
-        :model-value="modelValue"
-        :label="label"
-        :label-visible="labelVisible"
-        :placeholder="placeholder"
-      />
-    </div>
+    <DsfrInputGroup
+      :valid-message="validMessage"
+      :error-message="errorMessage"
+      :model-value="modelValue"
+      :type="type"
+      :label="label"
+      :label-visible="labelVisible"
+      :placeholder="placeholder"
+    />
   `,
   mounted () {
     document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
   },
 })
 ChampValide.args = {
   dark: false,
+  type: 'text',
   label: 'Label champ de saisie',
   labelVisible: true,
   placeholder: 'Placeholder',
diff --git a/src/components/DsfrInput/DsfrInputGroup.vue b/src/components/DsfrInput/DsfrInputGroup.vue
@@ -10,6 +10,7 @@ export default defineComponent({
   components: {
     DsfrInput,
   },
+  inheritAttrs: false,
 
   props: {
     id: {
@@ -77,6 +78,7 @@ export default defineComponent({
     <slot />
     <DsfrInput
       v-if="modelValue !== undefined"
+      v-bind="$attrs"
       :is-valid="!!validMessage"
       :is-invalid="!!errorMessage"
       :label="label"
@@ -85,7 +87,7 @@ export default defineComponent({
       :label-visible="labelVisible"
       :model-value="modelValue"
       :placeholder="placeholder"
-      @update:modelValue="$emit('update:modelValue', $event)"
+      @update:model-value="$emit('update:modelValue', $event)"
     />
     <p
       v-if="message"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<script lang="ts">`
	`1`	`+<script>`
`2`	`2`	`import { defineComponent } from 'vue'`
`3`	`3`
`4`	`4`	`import { getRandomId } from '../../utils/random-utils.js'`