Merge pull request #582 from dnum-mi/feat/allow-custom-text-in-dsfr-select

feat(DsfrSelect): ✨ permet personnalisation de texte

Author: laruiss

src/components/DsfrSelect/DsfrSelect.stories.ts

@@ -31,6 +31,10 @@ export default {
       control: 'text',
       description: 'Message à afficher en situation de succès, sa présence change la couleur de la police d’écriture',
     },
+    defaultUnselectedText: {
+      control: 'text',
+      description: 'Texte de l’option sélectionnée par défaut si aucune option valide n’est sélectionnée',
+    },
     errorMessage: {
       control: 'text',
       description: 'Message à afficher en cas d’erreur, sa présence change la couleur de la police d’écriture',
@@ -103,6 +107,56 @@ ListeDeroulante.args = {
   required: false,
 }
 
+export const ListeDeroulanteEnAnglais = (args) => ({
+  components: {
+    DsfrSelect,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <DsfrSelect
+      :required="required"
+      :label="label"
+      :options="options"
+      :description="description"
+      :success-message="successMessage"
+      :error-message="errorMessage"
+      :disabled="disabled"
+      :defaultUnselectedText="defaultUnselectedText"
+      v-model="modelValue"
+    />
+  `,
+
+  watch: {
+    modelValue (newVal) {
+      this.onChange(newVal)
+    },
+  },
+
+})
+ListeDeroulanteEnAnglais.args = {
+  options: [
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4',
+    'Option 5',
+    'Option 6',
+  ],
+  label: 'Those are the options:',
+  description: 'I am a description',
+  successMessage: '',
+  errorMessage: '',
+  defaultUnselectedText: 'Please select an option',
+  disabled: false,
+  required: false,
+}
+
 export const ListeDeroulanteRequise = (args) => ({
   components: {
     DsfrSelect,

src/components/DsfrSelect/DsfrSelect.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
   options?:(string | number | { value: string | number, text: string, disabled: boolean })[]
   successMessage?: string
   errorMessage?: string
+  defaultUnselectedText?: string
 }>(), {
   selectId: () => getRandomId('select'),
   modelValue: undefined,
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<{
   description: undefined,
   successMessage: '',
   errorMessage: '',
+  defaultUnselectedText: 'Sélectionnez une option',
 })
 
 defineEmits<{(e: 'update:modelValue', payload: string): void}>()
@@ -78,7 +80,7 @@ const messageType = computed(() => {
         disabled
         hidden
       >
-        Sélectionnez une option
+        {{ defaultUnselectedText }}
       </option>
 
       <option