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

feat(Select/SelectMenu): handle size prop (#133)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-07-02 12:03:10 +02:00
committed by GitHub
parent 57a49877ae
commit b61696cdca
42 changed files with 816 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
playground/app/pages/select-menu.vue
View File

@@ -3,7 +3,7 @@ import { refDebounced } from '@vueuse/core'
import theme from '#build/ui/select-menu'
import type { User } from '~/types'
const sizes = Object.keys(theme.variants.size)
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -36,7 +36,7 @@ const statuses = [{
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)
const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
params: { q: searchTermDebounced },
transform: (data: User[]) => {
return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -56,57 +56,51 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
<USelectMenu :items="items" placeholder="Required" required />
<USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
<USelectMenu :items="items" loading placeholder="Search..." />
<USelectMenu :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid">
<template #leading="{ modelValue }">
<UIcon v-if="modelValue" :name="modelValue.icon" class="size-5" />
</div>
<div class="flex items-center gap-4">
<USelectMenu
v-for="size in sizes"
:key="size"
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
/>
</div>
<div class="flex items-center gap-4">
<USelectMenu
v-for="size in sizes"
:key="size"
:items="statuses"
placeholder="Search status..."
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="modelValue.icon" :class="ui.leadingIcon()" />
</template>
</USelectMenu>
</div>
<div class="flex items-center gap-4">
<USelectMenu
v-for="size in sizes"
:key="size"
v-model:search-term="searchTerm"
:items="users || []"
:loading="pending"
:loading="status === 'pending'"
:filter="false"
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
@update:open="searchTerm = ''"
>
<template #leading="{ modelValue }">
<UAvatar v-if="modelValue?.avatar" size="2xs" v-bind="modelValue.avatar" />
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
</template>
</USelectMenu>
</div>
<div class="flex items-center gap-4">
<USelectMenu
v-for="size in sizes"
:key="size"
:items="items"
placeholder="Search..."
:size="(size as any)"
class="w-60"
/>
</div>
<div class="flex items-center gap-4">
<USelectMenu
v-for="size in sizes"
:key="size"
:items="items"
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="(size as any)"
class="w-60"
/>
</div>
<div class="flex items-center gap-4">
<USelectMenu
v-for="size in sizes"
:key="size"
:items="items"
icon="i-heroicons-magnifying-glass"
trailing
placeholder="Search..."
:size="(size as any)"
class="w-60"
/>
</div>
</div>
</template>