arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 11:47:55 +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

47
playground/app/pages/select.vue
View File

@@ -2,7 +2,7 @@
import theme from '#build/ui/select'
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']
@@ -31,12 +31,20 @@ const statuses = [{
icon: 'i-heroicons-x-circle'
}]
const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: User[]) => {
return data?.map(user => ({ label: user.name, value: user.id, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
return data?.map(user => ({ label: user.name, value: String(user.id), avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
},
lazy: true
})
function getStatusIcon(value: string): string {
return statuses.find(status => status.value === value)?.icon || 'i-heroicons-user'
}
function getUserAvatar(value: string) {
return users.value?.find(user => user.value === value)?.avatar || {}
}
</script>
<template>
@@ -49,8 +57,6 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
<USelect :items="items" placeholder="Disabled" disabled />
<USelect :items="items" placeholder="Required" required />
<USelect :items="items" loading placeholder="Search..." />
<USelect :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid" />
<USelect :items="users || []" :loading="pending" icon="i-heroicons-user" placeholder="Search users..." />
</div>
<div class="flex items-center gap-4">
<USelect
@@ -58,7 +64,7 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
:key="size"
:items="items"
placeholder="Search..."
:size="(size as any)"
:size="size"
class="w-60"
/>
</div>
@@ -66,24 +72,33 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
<USelect
v-for="size in sizes"
:key="size"
:items="items"
:items="statuses"
placeholder="Search status..."
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="(size as any)"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
/>
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="getStatusIcon(modelValue)" :class="ui.leadingIcon()" />
</template>
</USelect>
</div>
<div class="flex items-center gap-4">
<USelect
v-for="size in sizes"
:key="size"
:items="items"
icon="i-heroicons-magnifying-glass"
trailing
placeholder="Search..."
:size="(size as any)"
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
/>
>
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue)" />
</template>
</USelect>
</div>
</div>
</template>