From 959c968420945fc0a143edb909c1289123fd62cb Mon Sep 17 00:00:00 2001
From: Marc-Olivier Castagnetti <6144489+mcastagnetti@users.noreply.github.com>
Date: Thu, 20 Jul 2023 12:11:04 +0200
Subject: [PATCH] feat(SelectMenu): add `value-attribute` prop (#429)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/components/content/ComponentProps.vue    |  2 +-
 ...SelectMenuExampleObjectsValueAttribute.vue | 33 ++++++++++++++
 docs/content/3.forms/4.select-menu.md         | 44 +++++++++++++++++++
 src/runtime/components/forms/SelectMenu.vue   |  6 ++-
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue

diff --git a/docs/components/content/ComponentProps.vue b/docs/components/content/ComponentProps.vue
index f91aaa7b..811014c2 100644
--- a/docs/components/content/ComponentProps.vue
+++ b/docs/components/content/ComponentProps.vue
@@ -21,7 +21,7 @@
             <code v-if="prop.default">{{ prop.default }}</code>
           </td>
           <td>
-            <a v-if="prop.name === 'ui'" href="#preset">
+            <a v-if="prop.default === `appConfig.ui.${camelName}`" href="#preset">
               <code>{{ prop.type }}</code>
             </a>
             <code v-else class="break-all">
diff --git a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
new file mode 100644
index 00000000..291b4ec5
--- /dev/null
+++ b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
@@ -0,0 +1,33 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Wade Cooper'
+}, {
+  id: 2,
+  name: 'Arlene Mccoy'
+}, {
+  id: 3,
+  name: 'Devon Webb'
+}, {
+  id: 4,
+  name: 'Tom Cook'
+}]
+
+const selected = ref(people[0].id)
+
+const current = computed(() => people.find(person => person.id === selected.value))
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selected"
+    :options="people"
+    placeholder="Select people"
+    value-attribute="id"
+    option-attribute="name"
+  >
+    <template #label>
+      {{ current.name }}
+    </template>
+  </USelectMenu>
+</template>
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 8ba317c0..e3561d5a 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -108,6 +108,50 @@ const selected = ref(people[0])
 ```
 ::
 
+If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.
+
+::component-example
+#default
+:select-menu-example-objects-value-attribute{class="w-full lg:w-48"}
+
+#code
+```vue
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Wade Cooper'
+}, {
+  id: 2,
+  name: 'Arlene Mccoy'
+}, {
+  id: 3,
+  name: 'Devon Webb'
+}, {
+  id: 4,
+  name: 'Tom Cook'
+}]
+
+const selected = ref(people[0].id)
+
+const current = computed(() => people.find(person => person.id === selected.value))
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selected"
+    :options="people"
+    placeholder="Select people"
+    value-attribute="id"
+    option-attribute="name"
+  >
+    <template #label>
+      {{ current.name }}
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
 ### Icon
 
 Use the `selected-icon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 42aa0425..c65d3455 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -70,7 +70,7 @@
             v-slot="{ active, selected, disabled: optionDisabled }"
             :key="index"
             as="template"
-            :value="option"
+            :value="valueAttribute ? option[valueAttribute] : option"
             :disabled="option.disabled"
           >
             <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -271,6 +271,10 @@ export default defineComponent({
       type: String,
       default: 'label'
     },
+    valueAttribute: {
+      type: String,
+      default: null
+    },
     searchAttributes: {
       type: Array,
       default: null