docs(SelectMenu): improve

docs/components/content/examples/SelectMenuExampleObjects.vue

@@ -28,11 +28,9 @@ const selected = ref(people[0])
 
 <template>
   <USelectMenu v-model="selected" :options="people">
-    <template #label>
-      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
-      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
-
-      {{ selected.label }}
+    <template #leading>
+      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
     </template>
   </USelectMenu>
 </template>

docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue

@@ -13,9 +13,7 @@ const people = [{
   name: 'Tom Cook'
 }]
 
-const selected = ref(people[0].id)
-
-const current = computed(() => people.find(person => person.id === selected.value))
+const selected = ref(people[0].name)
 </script>
 
 <template>
@@ -23,11 +21,7 @@ const current = computed(() => people.find(person => person.id === selected.valu
     v-model="selected"
     :options="people"
     placeholder="Select people"
-    value-attribute="id"
+    value-attribute="name"
     option-attribute="name"
-  >
-    <template #label>
-      {{ current.name }}
-    </template>
-  </USelectMenu>
+  />
 </template>

docs/components/content/examples/SelectMenuExampleSearchAttributes.vue

@@ -1,11 +1,11 @@
 <script setup>
 const options = [
-  { id: 1, name: 'Wade Cooper', favoriteColors: ['red', 'yellow'] },
-  { id: 2, name: 'Arlene Mccoy', favoriteColors: ['blue', 'yellow'] },
-  { id: 3, name: 'Devon Webb', favoriteColors: ['green', 'blue'] },
-  { id: 4, name: 'Tom Cook', favoriteColors: ['blue', 'red'] },
-  { id: 5, name: 'Tanya Fox', favoriteColors: ['green', 'red'] },
-  { id: 5, name: 'Hellen Schmidt', favoriteColors: ['green', 'yellow'] }
+  { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
+  { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
+  { id: 3, name: 'Devon Webb', colors: ['green', 'blue'] },
+  { id: 4, name: 'Tom Cook', colors: ['blue', 'red'] },
+  { id: 5, name: 'Tanya Fox', colors: ['green', 'red'] },
+  { id: 5, name: 'Hellen Schmidt', colors: ['green', 'yellow'] }
 ]
 
 const selected = ref(options[1])
@@ -15,16 +15,15 @@ const selected = ref(options[1])
   <USelectMenu
     v-model="selected"
     :options="options"
-    class="w-full lg:w-96"
-    placeholder="Select an user"
+    placeholder="Select a person"
     searchable
-    searchable-placeholder="Search by name or favorite colors"
+    searchable-placeholder="Search by name or color"
     option-attribute="name"
     by="id"
-    :search-attributes="['name', 'favoriteColors']"
+    :search-attributes="['name', 'colors']"
   >
     <template #option="{ option: person }">
-      <span v-for="color in person.favoriteColors" :key="color.id" class="h-2 w-2 rounded-full" :class="`bg-${color}-500 dark:bg-${color}-400`" />
+      <span v-for="color in person.colors" :key="color.id" class="h-2 w-2 rounded-full" :class="`bg-${color}-500 dark:bg-${color}-400`" />
       <span class="truncate">{{ person.name }}</span>
     </template>
   </USelectMenu>

docs/content/3.forms/4.select-menu.md

@@ -22,7 +22,7 @@ Like the `Select` component, you can use the `options` prop to pass an array of
 ---
 component: 'select-menu-example-basic'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -34,7 +34,7 @@ You can use the `multiple` prop to select multiple values.
 ---
 component: 'select-menu-example-multiple'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -46,7 +46,7 @@ You can pass an array of objects to `options` and either compare on the whole ob
 ---
 component: 'select-menu-example-objects'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -56,7 +56,7 @@ If you only want to select a single object property rather than the whole object
 ---
 component: 'select-menu-example-objects-value-attribute'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -67,7 +67,7 @@ Use the `selected-icon` prop to set a different icon or change it globally in `u
 ::component-card
 ---
 baseProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
   placeholder: 'Select a person'
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
@@ -81,7 +81,7 @@ excludedProps:
 Learn how to customize icons from the [Select](/forms/select#icon) component.
 ::
 
-### Search
+## Searchable
 
 Use the `searchable` prop to enable search.
 
@@ -92,7 +92,7 @@ This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) compon
 ::component-card
 ---
 baseProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
   placeholder: 'Select a person'
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
@@ -101,28 +101,26 @@ props:
 ---
 ::
 
-#### Search Attributes
+### Attributes
 
-Use the `search-attributes` with an array of property names to search on each option object.
-
-Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
+Use the `search-attributes` prop with an array of property names to search on each option object. Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
 
 ::component-example
 ---
 component: 'select-menu-example-search-attributes'
 componentProps:
-  class: 'w-full lg:w-96'
+  class: 'w-full lg:w-48'
 ---
 ::
 
-#### Clear on close
+### Clear on close
 
 By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
 
 ::component-card
 ---
 baseProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
   placeholder: 'Select a person'
   searchable: true
   searchablePlaceholder: 'Search a person...'
@@ -142,11 +140,11 @@ Use the `debounce` prop to adjust the delay of the function.
 ---
 component: 'select-menu-example-async-search'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
-### Create option
+## Creatable
 
 Use the `creatable` prop to enable the creation of new options when the search doesn't return any results (only works with `searchable`).
 
@@ -156,7 +154,7 @@ Try to search for something that doesn't exist in the example below.
 ---
 component: 'select-menu-example-creatable'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -186,7 +184,7 @@ You can override the `#label` slot and handle the display yourself.
 ---
 component: 'select-menu-example-multiple-slot'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -198,7 +196,7 @@ You can also override the `#default` slot entirely.
 ---
 component: 'select-menu-example-button'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -210,7 +208,7 @@ Use the `#option` slot to customize the option content. You will have access to
 ---
 component: 'select-menu-example-option-slot'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::
 
@@ -222,7 +220,7 @@ Use the `#option-empty` slot to customize the content displayed when the `search
 ---
 component: 'select-menu-example-option-empty-slot'
 componentProps:
-  class: 'w-full lg:w-40'
+  class: 'w-full lg:w-48'
 ---
 ::