Skip to content

Commit

Permalink
Better example.
Browse files Browse the repository at this point in the history
  • Loading branch information
DarkGhostHunter committed Nov 15, 2023
1 parent 14344b0 commit f477b65
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 10 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script setup>
const options = [
{ value: 'windows', label: 'Windows 11', aliases: 'microsoft' },
{ value: 'mac', label: 'macOS Ventura', aliases: 'apple' },
{ value: 'ubuntu', label: 'Ubuntu 23.10', aliases: ['canonical', 'linux'] },
{ value: 'popos', label: 'Pop!_OS 22.04', aliases: ['system76', 'linux'] }
{ id: 1, name: 'Wade Cooper', favoriteColors: ['red', 'yellow'] },
{ id: 2, name: 'Arlene Mccoy', favoriteColors: ['blue', 'yellow'] },
{ id: 3, name: 'Devon Webb', favoriteColors: ['black', 'blue'] },
{ id: 4, name: 'Tom Cook', favoriteColors: ['yellow', 'blue'] },
{ id: 5, name: 'Tanya Fox', favoriteColors: ['green', 'red'] }
]
const selected = ref(options[1])
Expand All @@ -12,11 +13,18 @@ const selected = ref(options[1])
<template>
<USelectMenu
v-model="selected"
:options="options"
class="w-full lg:w-96"
placeholder="Select an operative system"
placeholder="Select an user"
searchable
searchable-placeholder="Search an operative system by name or maintainer"
:options="options"
:search-attributes="['label', 'aliases']"
/>
searchable-placeholder="Search by name or favorite colors"
option-attribute="name"
by="id"
:search-attributes="['name', 'favoriteColors']"
>
<template #option="{ option: person }">
<span v-for="color in person.favoriteColors" class="h-2 w-2 rounded-full mr-2" :class="`bg-${color}-500`" />

Check failure on line 26 in docs/components/content/examples/SelectMenuExampleSearchAttributes.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18)

Elements in iteration expect to have 'v-bind:key' directives
<span class="truncate">{{ person.name }}</span>
</template>
</USelectMenu>
</template>
2 changes: 1 addition & 1 deletion docs/content/3.forms/4.select-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ props:

#### Search Attributes

Use the `search-attributes` with an array of property names to search on each option object.
Use the `search-attributes` with an array of property names, or a list separated by comma, to search on each option object.

Nested attributes can be accessed using `dot.notation`. Array and objects attributes are cast to string before search.

Expand Down

0 comments on commit f477b65

Please sign in to comment.