fix(SelectMenu): take option-attribute into account to display label

Resolves #1151
nuxt · Jan 16, 2024 · b9fe74b · b9fe74b
1 parent e116f93
commit b9fe74b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
@@ -13,15 +13,15 @@ const people = [{
   name: 'Tom Cook'
 }]
 
-const selected = ref(people[0].name)
+const selected = ref(people[0].id)
 </script>
 
 <template>
   <USelectMenu
     v-model="selected"
     :options="people"
     placeholder="Select people"
-    value-attribute="name"
+    value-attribute="id"
     option-attribute="name"
   />
 </template>
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -36,8 +36,7 @@
           </span>
 
           <slot name="label">
-            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-if="label" :class="uiMenu.label">{{ label }}</span>
             <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
@@ -355,6 +354,23 @@ export default defineComponent({
       }
     })
 
+    const label = computed(() => {
+      if (props.multiple) {
+        if (Array.isArray(props.modelValue) && props.modelValue.length) {
+          return `${props.modelValue.length} selected`
+        } else {
+          return null
+        }
+      } else {
+        if (props.valueAttribute) {
+          const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)
+          return option ? option[props.optionAttribute] : null
+        } else {
+          return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute]
+        }
+      }
+    })
+
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -509,6 +525,7 @@ export default defineComponent({
       popper,
       trigger,
       container,
+      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys