arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Input/InputMenu/Select/SelectMenu): handle avatar prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-17 18:21:12 +02:00
parent df2013ca92
commit 53a3796d1b
42 changed files with 618 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app/components/content/examples/select/SelectFetchExample.vue
View File

@@ -27,8 +27,8 @@ function getUserAvatar(value: string) {
<UAvatar
v-if="modelValue"
v-bind="getUserAvatar(modelValue)"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
:size="ui.leadingAvatarSize()"
:class="ui.leadingAvatar()"
/>
</template>
</USelect>

5
docs/app/components/content/examples/select/SelectIconExample.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<USelect
default-value="Backlog"
v-model="value"
:items="items"
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"
class="w-40"
class="w-48"
/>
</template>

16
docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
View File

@@ -25,21 +25,11 @@ const items = ref([
}
}
])
const value = ref(items.value[0]?.value)
function getAvatar(value: string) {
return items.value.find(item => item.value === value)?.avatar
}
const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
</script>
<template>
<USelect default-value="benjamincanac" :items="items" class="w-48">
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="getAvatar(modelValue)"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</USelect>
<USelect v-model="value" :avatar="avatar" :items="items" class="w-48" />
</template>

3
docs/app/components/content/examples/select/SelectItemsChipExample.vue
View File

@@ -22,6 +22,7 @@ const items = ref([
}
}
])
const value = ref(items.value[0]?.value)
function getChip(value: string) {
return items.value.find(item => item.value === value)?.chip
@@ -29,7 +30,7 @@ function getChip(value: string) {
</script>
<template>
<USelect default-value="bug" :items="items" class="w-40">
<USelect v-model="value" :items="items" class="w-48">
<template #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"

6
docs/app/components/content/examples/select/SelectItemsIconExample.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
const selected = ref('backlog')
const items = ref([
{
label: 'Backlog',
@@ -22,10 +21,11 @@ const items = ref([
icon: 'i-heroicons-check-circle'
}
])
const value = ref(items.value[0]?.value)
const icon = computed(() => items.value.find(item => item.value === selected.value)?.icon)
const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
</script>
<template>
<USelect v-model="selected" :icon="icon" :items="items" class="w-40" />
<USelect v-model="value" :icon="icon" :items="items" class="w-48" />
</template>

3
docs/app/components/content/examples/select/SelectOpenExample.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
const open = ref(false)
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
defineShortcuts({
o: () => open.value = !open.value
@@ -8,5 +9,5 @@ defineShortcuts({
</script>
<template>
<USelect v-model:open="open" default-value="Backlog" :items="items" class="w-40" />
<USelect v-model="value" v-model:open="open" :items="items" class="w-48" />
</template>