arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 06:21:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(SelectMenu): handle multiple default display + specific placeholder

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-29 11:52:02 +02:00
parent 360084af7c
commit cb43548305
7 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/content/examples/SelectMenuExampleButton.vue
View File

@@ -6,10 +6,10 @@ const selected = ref(people[3])
<template>
<USelectMenu v-slot="{ open }" v-model="selected" :options="people">
<UButton>
<UButton color="gray">
{{ selected }}
<UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
<UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
</UButton>
</USelectMenu>
</template>

7
docs/components/content/examples/SelectMenuExampleMultiple.vue
View File

@@ -5,10 +5,5 @@ const selected = ref([])
</script>
<template>
<USelectMenu v-model="selected" :options="people" multiple>
<template #label>
<span v-if="selected.length" class="font-medium truncate">{{ selected.join(', ') }}</span>
<span v-else class="block truncate text-gray-400 dark:text-gray-500">Select people</span>
</template>
</USelectMenu>
<USelectMenu v-model="selected" :options="people" multiple placeholder="Select people" />
</template>

14
docs/components/content/examples/SelectMenuExampleMultipleSlot.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup>
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
const selected = ref([])
</script>
<template>
<USelectMenu v-model="selected" :options="people" multiple>
<template #label>
<span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
<span v-else>Select people</span>
</template>
</USelectMenu>
</template>