Merge pull request #898 from dnum-mi/develop

Develop

Author: laruiss

src/components/DsfrSelect/DsfrSelect.types.ts

@@ -1,12 +1,13 @@
+export type DsfrSelectOption = string | number | null | undefined
 export type DsfrSelectProps = {
   required?: boolean
   disabled?: boolean
   selectId?: string
   name?: string
   description?: string
-  modelValue?: string | number
+  modelValue?: DsfrSelectOption
   label?: string
-  options?: (string | undefined | { value: string | undefined, text: string, disabled?: boolean })[]
+  options?: (DsfrSelectOption | { value: DsfrSelectOption, text: string, disabled?: boolean })[]
   successMessage?: string
   errorMessage?: string
   defaultUnselectedText?: string

src/components/DsfrSelect/DsfrSelect.vue

@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<DsfrSelectProps>(), {
   defaultUnselectedText: 'Sélectionner une option',
 })
 
-defineEmits<{ (e: 'update:modelValue', payload: string): void }>()
+defineEmits<{ (e: 'update:modelValue', payload: string | number): void }>()
 
 const message = computed(() => {
   return props.errorMessage || props.successMessage
@@ -71,7 +71,6 @@ const messageType = computed(() => {
       @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
     >
       <option
-        value=""
         :selected="modelValue == null"
         disabled
         hidden
@@ -82,12 +81,12 @@ const messageType = computed(() => {
       <option
         v-for="(option, index) in options"
         :key="index"
-        :selected="modelValue === option || (typeof option === 'object' && option.value === modelValue)"
-        :value="typeof option === 'object' ? option.value : option"
-        :disabled="!!(typeof option === 'object' && option.disabled)"
-        :aria-disabled="!!(typeof option === 'object' && option.disabled)"
+        :selected="modelValue === option || (typeof option === 'object' && option!.value === modelValue)"
+        :value="typeof option === 'object' ? option!.value : option"
+        :disabled="!!(typeof option === 'object' && option!.disabled)"
+        :aria-disabled="!!(typeof option === 'object' && option!.disabled)"
       >
-        {{ typeof option === 'object' ? option.text : option }}
+        {{ typeof option === 'object' ? option!.text : option }}
       </option>
     </select>
 

src/components/DsfrSelect/docs-demo/DsfrSelectDemo.vue

@@ -1,22 +1,33 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import DsfrSelect from '../DsfrSelect.vue'
+
+const selectedOption1 = ref(0)
+const selectedOption2 = ref(null)
+const selectedOption3 = ref('')
 </script>
 
 <template>
   <div
     class="flex flex-col"
   >
     <DsfrSelect
+      v-model.number="selectedOption1"
       label="Label du select"
       :options="[1, 2, 3, 4, 5]"
     />
+    Select 1 : {{ selectedOption1 }} ({{ typeof selectedOption1 }})
     <DsfrSelect
-      label="Label du select"
+      v-model="selectedOption2"
+      label="Label du select 1"
       description="Description du select"
       :options="['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5']"
     />
+    Select 2 : {{ selectedOption2 }} ({{ typeof selectedOption2 }})
     <DsfrSelect
-      label="Label du select"
+      v-model="selectedOption3"
+      label="Label du select 3"
       border-bottom
       required
       :options="[
@@ -27,5 +38,6 @@ import DsfrSelect from '../DsfrSelect.vue'
         { value: 'Value 5', text: 'Text 5' },
       ]"
     />
+    Select 3 : {{ selectedOption3 }} ({{ typeof selectedOption3 }})
   </div>
 </template>