arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +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-menu/SelectMenuFetchExample.vue
View File

@@ -23,8 +23,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>
</USelectMenu>

4
docs/app/components/content/examples/select-menu/SelectMenuFilterExample.vue
View File

@@ -29,8 +29,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>
</USelectMenu>

4
docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.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>

6
docs/app/components/content/examples/select-menu/SelectMenuIconExample.vue
View File

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

13
docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
View File

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

4
docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
View File

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

4
docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.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>
<USelectMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
<USelectMenu v-model="value" :icon="value?.icon" :items="items" class="w-48" />
</template>

4
docs/app/components/content/examples/select-menu/SelectMenuOpenExample.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>
<USelectMenu v-model="selected" v-model:open="open" :items="items" class="w-40" />
<USelectMenu v-model="value" v-model:open="open" :items="items" class="w-48" />
</template>

4
docs/app/components/content/examples/select-menu/SelectMenuSearchTermExample.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>
<USelectMenu v-model="selected" v-model:search-term="searchTerm" :items="items" class="w-40" />
<USelectMenu v-model="value" v-model:search-term="searchTerm" :items="items" class="w-48" />
</template>