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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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