arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 00:15:05 +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

5
docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue
View File

@@ -17,14 +17,13 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:loading="status === 'pending'"
icon="i-heroicons-user"
placeholder="Select user"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
:size="ui.leadingAvatarSize()"
:class="ui.leadingAvatar()"
/>
</template>
</UInputMenu>

5
docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue
View File

@@ -23,14 +23,13 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:filter="false"
icon="i-heroicons-user"
placeholder="Select user"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
:size="ui.leadingAvatarSize()"
:class="ui.leadingAvatar()"
/>
</template>
</UInputMenu>

4
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
View File

@@ -25,8 +25,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
:size="ui.leadingAvatarSize()"
:class="ui.leadingAvatar()"
/>
</template>

4
docs/app/components/content/examples/input-menu/InputMenuIconExample.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const selected = ref('Backlog')
const value = ref('Backlog')
</script>
<template>
<UInputMenu
v-model="selected"
v-model="value"
:items="items"
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'

13
docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
View File

@@ -25,18 +25,9 @@ const items = ref([
}
}
])
const selected = ref(items.value[0])
const value = ref(items.value[0])
</script>
<template>
<UInputMenu v-model="selected" :items="items" class="w-40">
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</UInputMenu>
<UInputMenu v-model="value" :avatar="value?.avatar" :items="items" />
</template>

4
docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue
View File

@@ -22,11 +22,11 @@ const items = ref([
}
}
])
const selected = ref(items.value[0])
const value = ref(items.value[0])
</script>
<template>
<UInputMenu v-model="selected" :items="items" class="w-40">
<UInputMenu v-model="value" :items="items">
<template #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"

4
docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue
View File

@@ -21,9 +21,9 @@ const items = ref([
icon: 'i-heroicons-check-circle'
}
])
const selected = ref(items.value[0])
const value = ref(items.value[0])
</script>
<template>
<UInputMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
<UInputMenu v-model="value" :icon="value?.icon" :items="items" />
</template>

4
docs/app/components/content/examples/input-menu/InputMenuOpenExample.vue
View File

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

4
docs/app/components/content/examples/input-menu/InputMenuSearchTermExample.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
const searchTerm = ref('D')
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const selected = ref('Backlog')
const value = ref('Backlog')
</script>
<template>
<UInputMenu v-model="selected" v-model:search-term="searchTerm" :items="items" />
<UInputMenu v-model="value" v-model:search-term="searchTerm" :items="items" />
</template>