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

32
docs/content/3.components/input-menu.md
View File

@@ -413,6 +413,32 @@ props:
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
::
### Avatar
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Nuxt'
avatar:
src: 'https://github.com/nuxt.png'
items:
- Nuxt
- NuxtHub
- NuxtLabs
- Nuxt Modules
- Nuxt Community
---
::
### Loading
Use the `loading` prop to show a loading icon on the InputMenu.
@@ -538,7 +564,7 @@ name: 'input-menu-items-icon-example'
::
::tip
You can also use the `#leading` slot to display the selected icon, like in the next example.
You can also use the `#leading` slot to display the selected icon.
::
### With avatar in items
@@ -552,8 +578,8 @@ name: 'input-menu-items-avatar-example'
---
::
::note
In this example, the `#leading` slot is used to display the selected avatar.
::tip
You can also use the `#leading` slot to display the selected avatar.
::
### With chip in items

18
docs/content/3.components/input.md
View File

@@ -136,6 +136,24 @@ props:
---
::
### Avatar
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Input.
::component-code
---
prettier: true
ignore:
- placeholder
props:
avatar:
src: 'https://github.com/nuxt.png'
size: md
variant: outline
placeholder: 'Search...'
---
::
### Loading
Use the `loading` prop to show a loading icon on the Input.

70
docs/content/3.components/select-menu.md
View File

@@ -43,7 +43,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -74,7 +74,7 @@ props:
- label: 'Todo'
- label: 'In Progress'
- label: 'Done'
class: 'w-40'
class: 'w-48'
---
::
@@ -107,7 +107,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
class: 'w-48'
---
::
@@ -138,7 +138,7 @@ props:
id: 'in_progress'
- label: 'Done'
id: 'done'
class: 'w-40'
class: 'w-48'
---
::
@@ -167,7 +167,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -194,7 +194,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -228,7 +228,7 @@ props:
icon: 'i-heroicons-arrow-up-circle'
- label: Done
icon: 'i-heroicons-check-circle'
class: 'w-40'
class: 'w-48'
---
::
@@ -271,7 +271,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -298,7 +298,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -330,7 +330,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -356,7 +356,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -383,7 +383,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -410,7 +410,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -441,7 +441,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -449,6 +449,34 @@ props:
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
::
### Avatar
Use the `avatar` prop to display an [Avatar](/components/avatar) inside the SelectMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Nuxt'
avatar:
src: 'https://github.com/nuxt.png'
items:
- Nuxt
- NuxtHub
- NuxtLabs
- Nuxt Modules
- Nuxt Community
class: 'w-48'
---
::
### Loading
Use the `loading` prop to show a loading icon on the SelectMenu.
@@ -472,7 +500,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -499,7 +527,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -528,7 +556,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -566,7 +594,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
class: 'w-48'
---
::
@@ -582,7 +610,7 @@ name: 'select-menu-items-icon-example'
::
::tip
You can also use the `#leading` slot to display the selected icon, like in the next example.
You can also use the `#leading` slot to display the selected icon.
::
### With avatar in items
@@ -596,8 +624,8 @@ name: 'select-menu-items-avatar-example'
---
::
::note
In this example, the `#leading` slot is used to display the selected avatar.
::tip
You can also use the `#leading` slot to display the selected avatar.
::
### With chip in items

113
docs/content/3.components/select.md
View File

@@ -34,7 +34,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -68,7 +68,7 @@ props:
value: 'in_progress'
- label: 'Done'
value: 'done'
class: 'w-40'
class: 'w-48'
---
::
@@ -101,7 +101,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
class: 'w-48'
---
::
@@ -131,7 +131,7 @@ props:
id: 'in_progress'
- label: 'Done'
id: 'done'
class: 'w-40'
class: 'w-48'
---
::
@@ -154,7 +154,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -171,10 +171,11 @@ The `content.align`, `content.side`, etc. properties only apply when `content.po
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
items:
content.position:
- 'item-aligned'
@@ -189,6 +190,7 @@ items:
- top
- bottom
props:
modelValue: 'Todo'
content:
position: 'item-aligned'
align: center
@@ -199,8 +201,7 @@ props:
- Todo
- In Progress
- Done
defaultValue: 'Todo'
class: 'w-40'
class: 'w-48'
---
::
@@ -217,20 +218,21 @@ Use the `color` prop to change the ring color when the Select is focused.
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
color: neutral
highlight: true
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -247,21 +249,22 @@ Use the `variant` prop to change the variant of the Select.
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
color: neutral
variant: subtle
highlight: false
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -274,19 +277,20 @@ Use the `size` prop to change the size of the Select.
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
size: xl
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -299,20 +303,21 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Select.
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
icon: 'i-heroicons-magnifying-glass'
size: md
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -325,20 +330,21 @@ Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon).
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
size: md
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -355,20 +361,21 @@ Use the `selected-icon` prop to customize the icon when an item is selected. Def
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
selectedIcon: 'i-heroicons-fire'
size: md
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -376,6 +383,34 @@ props:
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
::
### Avatar
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Select.
::component-code
---
prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Nuxt'
avatar:
src: 'https://github.com/nuxt.png'
items:
- Nuxt
- NuxtHub
- NuxtLabs
- Nuxt Modules
- Nuxt Community
class: 'w-48'
---
::
### Loading
Use the `loading` prop to show a loading icon on the Select.
@@ -385,20 +420,21 @@ Use the `loading` prop to show a loading icon on the Select.
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
loading: true
trailing: false
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -411,20 +447,21 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroic
prettier: true
ignore:
- items
- defaultValue
- modelValue
- class
external:
- items
- modelValue
props:
modelValue: 'Backlog'
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -453,7 +490,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
class: 'w-48'
---
::
@@ -491,7 +528,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
class: 'w-48'
---
::
@@ -511,7 +548,7 @@ In this example, the icon is computed from the `value` property of the selected
::
::tip
You can also use the `#leading` slot to display the selected icon, like in the next example.
You can also use the `#leading` slot to display the selected icon.
::
### With avatar in items
@@ -526,7 +563,11 @@ name: 'select-items-avatar-example'
::
::note
In this example, the `#leading` slot is used to display the selected avatar.
In this example, the avatar is computed from the `value` property of the selected item.
::
::tip
You can also use the `#leading` slot to display the selected avatar.
::
### With chip in items