feat(SelectMenu): add value-attribute prop (#429)

Co-authored-by: Benjamin Canac <[email protected]>

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">

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>

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`.

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