arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-15 04:29:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(SelectMenu): improve

Browse Source
This commit is contained in:
Benjamin Canac
2023-12-12 16:27:31 +01:00
parent 0129e2db40
commit 781365a5ed
4 changed files with 35 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
View File

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