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

docs(select): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-03 16:23:06 +02:00
parent c2b9948a07
commit b6cb72de64
12 changed files with 677 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
View File

@@ -6,7 +6,9 @@
color="gray"
variant="subtle"
trailing-icon="i-heroicons-chevron-down-20-solid"
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"
block
/>

35
docs/app/components/content/examples/select/SelectFetchExample.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup lang="ts">
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: { name: string, id: number }[]) => {
return data?.map(user => ({
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
},
lazy: true
})
function getUserAvatar(value: string) {
return users.value?.find(user => user.value === value)?.avatar || {}
}
</script>
<template>
<USelect
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
placeholder="Select user"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="getUserAvatar(modelValue)"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</USelect>
</template>

13
docs/app/components/content/examples/select/SelectIconExample.vue Normal file
View File

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

45
docs/app/components/content/examples/select/SelectItemsAvatarExample.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup lang="ts">
const items = ref([
{
label: 'benjamincanac',
value: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
}
},
{
label: 'romhml',
value: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
}
},
{
label: 'noook',
value: 'noook',
avatar: {
src: 'https://github.com/noook.png',
alt: 'noook'
}
}
])
function getAvatar(value: string) {
return items.value.find(item => item.value === value)?.avatar
}
</script>
<template>
<USelect default-value="benjamincanac" :items="items" class="w-40">
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="getAvatar(modelValue)"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</USelect>
</template>

44
docs/app/components/content/examples/select/SelectItemsChipExample.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup lang="ts">
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'red' as const
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'blue' as const
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'violet' as const
}
}
])
function getChip(value: string) {
return items.value.find(item => item.value === value)?.chip
}
</script>
<template>
<USelect default-value="bug" :items="items" class="w-40">
<template #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"
v-bind="getChip(modelValue)"
inset
standalone
:size="ui.itemLeadingChipSize()"
:class="ui.itemLeadingChip()"
/>
</template>
</USelect>
</template>

31
docs/app/components/content/examples/select/SelectItemsIconExample.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup lang="ts">
const selected = ref('backlog')
const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-heroicons-question-mark-circle'
},
{
label: 'Todo',
value: 'todo',
icon: 'i-heroicons-plus-circle'
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-heroicons-arrow-up-circle'
},
{
label: 'Done',
value: 'done',
icon: 'i-heroicons-check-circle'
}
])
const icon = computed(() => items.value.find(item => item.value === selected.value)?.icon)
</script>
<template>
<USelect v-model="selected" :icon="icon" :items="items" class="w-40" />
</template>

12
docs/app/components/content/examples/select/SelectOpenExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
const open = ref(false)
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<USelect v-model:open="open" default-value="Backlog" :items="items" />
</template>

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

@@ -86,6 +86,7 @@ ignore:
props:
color: gray
variant: subtle
highlight: false
placeholder: 'Search...'
---
::

80
docs/content/3.components/radio-group.md
View File

@@ -20,6 +20,7 @@ Use the `items` prop as an array of strings, numbers or booleans:
::component-code
---
prettier: true
ignore:
- modelValue
- items
@@ -65,9 +66,11 @@ props:
---
::
::important
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::
However, you can change the property that is used to set the value by using the `value-key` prop.
You can change the property that is used to set the value by using the `value-key` prop.
::component-code
---
@@ -100,24 +103,19 @@ Use the `legend` prop to set the legend of the RadioGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'system'
legend: 'Theme'
defaultValue: 'System'
items:
- label: 'System'
description: 'This is the first option.'
value: 'system'
- label: 'Light'
description: 'This is the second option.'
value: 'light'
- label: 'Dark'
description: 'This is the third option.'
value: 'dark'
- 'System'
- 'Light'
- 'Dark'
---
::
@@ -127,24 +125,19 @@ Use the `orientation` prop to change the orientation of the RadioGroup. Defaults
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'system'
orientation: 'horizontal'
defaultValue: 'System'
items:
- label: 'System'
description: 'This is the first option.'
value: 'system'
- label: 'Light'
description: 'This is the second option.'
value: 'light'
- label: 'Dark'
description: 'This is the third option.'
value: 'dark'
- 'System'
- 'Light'
- 'Dark'
---
::
@@ -154,24 +147,19 @@ Use the `color` prop to change the color of the RadioGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'system'
color: 'gray'
defaultValue: 'System'
items:
- label: 'System'
description: 'This is the first option.'
value: 'system'
- label: 'Light'
description: 'This is the second option.'
value: 'light'
- label: 'Dark'
description: 'This is the third option.'
value: 'dark'
- 'System'
- 'Light'
- 'Dark'
---
::
@@ -181,24 +169,19 @@ Use the `size` prop to change the size of the RadioGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'system'
size: 'xl'
defaultValue: 'System'
items:
- label: 'System'
description: 'This is the first option.'
value: 'system'
- label: 'Light'
description: 'This is the second option.'
value: 'light'
- label: 'Dark'
description: 'This is the third option.'
value: 'dark'
- 'System'
- 'Light'
- 'Dark'
---
::
@@ -208,24 +191,19 @@ Use the `disabled` prop to disable the RadioGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'system'
disabled: true
defaultValue: 'System'
items:
- label: 'System'
description: 'This is the first option.'
value: 'system'
- label: 'Light'
description: 'This is the second option.'
value: 'light'
- label: 'Dark'
description: 'This is the third option.'
value: 'dark'
- 'System'
- 'Light'
- 'Dark'
---
::

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

@@ -7,15 +7,474 @@ links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Select.vue
navigation:
badge:
label: Todo
---
## Usage
Use the `v-model` directive to control the value of the Select or the `default-value` prop to set the initial value when you do not need to control its state.
### Items
Use the `items` prop as an array of strings, numbers or booleans:
::component-code
---
ignore:
- modelValue
- items
external:
- modelValue
- items
props:
modelValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
You can also pass an array of objects with the following properties:
- `label?: string`{lang="ts-type"}
- [`value?: string`{lang="ts-type"}](#value-key)
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#items-type)
- [`icon?: string`{lang="ts-type"}](#items-icon)
- [`avatar?: AvatarProps`{lang="ts-type"}](#items-avatar)
- [`chip?: ChipProps`{lang="ts-type"}](#items-chip)
- `disabled?: boolean`{lang="ts-type"}
::component-code
---
collapse: true
ignore:
- modelValue
- items
external:
- modelValue
- items
props:
modelValue: 'backlog'
items:
- label: 'Backlog'
value: 'backlog'
- label: 'Todo'
value: 'todo'
- label: 'In Progress'
value: 'in_progress'
- label: 'Done'
value: 'done'
---
::
::important
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::
#### Value Key
You can change the property that is used to set the value by using the `value-key` prop.
::component-code
---
collapse: true
ignore:
- modelValue
- valueKey
- items
external:
- modelValue
- items
props:
valueKey: 'id'
modelValue: 'backlog'
items:
- label: 'Backlog'
id: 'backlog'
- label: 'Todo'
id: 'todo'
- label: 'In Progress'
id: 'in_progress'
- label: 'Done'
id: 'done'
---
::
#### Group items
You can pass an array of arrays to the `items` prop to display separated groups of items.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'Apple'
items:
- - Apple
- Banana
- Blueberry
- Grapes
- Pineapple
- - Aubergine
- Broccoli
- Carrot
- Courgette
- Leek
---
::
#### Items Type
You can use the `type` property with `separator` to display a separator between items or `label` to display a label.
::component-code
---
prettier: true
collapse: true
ignore:
- defaultValue
- items
external:
- items
props:
defaultValue: 'Apple'
items:
- type: 'label'
label: 'Fruits'
- Apple
- Banana
- Blueberry
- Grapes
- Pineapple
- type: 'separator'
- type: 'label'
label: 'Vegetables'
- Aubergine
- Broccoli
- Carrot
- Courgette
- Leek
---
::
#### Items Icon
You can use the `icon` property to display an [Icon](/components/icon) inside the items.
::component-example
---
collapse: true
name: 'select-items-icon-example'
---
::
::note
In this example, the icon is computed from the `value` property of the selected item.
::
::tip
You can also use the `#leading` slot to display the selected icon, like in the next example.
::
#### Items Avatar
You can use the `avatar` property to display an [Avatar](/components/avatar) inside the items.
::component-example
---
collapse: true
name: 'select-items-avatar-example'
---
::
::note
In this example, the `#leading` slot is used to display the selected avatar.
::
#### Items Chip
You can use the `chip` property to display a [Chip](/components/chip) inside the items.
::component-example
---
collapse: true
name: 'select-items-chip-example'
---
::
::note
In this example, the `#leading` slot is used to display the selected chip.
::
### Placeholder
Use the `placeholder` prop to set a placeholder text.
::component-code
---
prettier: true
external:
- items
ignore:
- items
props:
placeholder: 'Select status'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Color
Use the `color` prop to change the ring color when the Select is focused.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
color: gray
highlight: true
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::
### Variant
Use the `variant` prop to change the variant of the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
color: gray
variant: subtle
highlight: false
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Size
Use the `size` prop to change the size of the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
size: xl
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Icon
Use the `icon` prop to show an [Icon](/components/icon) inside the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
icon: 'i-heroicons-magnifying-glass'
size: md
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
Use the `trailing-icon` prop to customize the trailing icon. Defaults to `i-heroicons-chevron-down-20-solid`.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
trailingIcon: 'i-heroicons-arrow-small-right'
size: md
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
::
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
selectedIcon: 'i-heroicons-fire'
size: md
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
::
### Loading
Use the `loading` prop to show a loading icon on the Select.
Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
loading: true
loadingIcon: ''
trailing: false
defaultValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
::
### Disabled
Use the `disabled` prop to disable the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- placeholder
props:
disabled: true
placeholder: 'Select status'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
## Examples
### Control open state
You can control the open state by using the `default-open` prop or the `v-model:open` directive.
::component-example
---
name: 'select-open-example'
---
::
::note
In this example, press :kbd{value="O"} to toggle the Select.
::
### With rotating icon
Here is an example with a rotating icon that indicates the open state of the Select.
::component-example
---
name: 'select-icon-example'
---
::
### With fetched items
You can fetch items from an API and use them in the Select.
::component-example
---
name: 'select-fetch-example'
---
::
## API
### Props

1
docs/content/3.components/textarea.md
View File

@@ -62,6 +62,7 @@ ignore:
props:
color: gray
variant: subtle
highlight: false
placeholder: 'Type something...'
---
::

1
docs/nuxt.config.ts
View File

@@ -139,6 +139,7 @@ export default defineNuxtConfig({
'UPopover',
'UProgress',
'URadioGroup',
'USelect',
'USlider',
'USlideover',
'USwitch',