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

docs(select/select-menu): apply width class on examples

Browse Source 
Resolves #2297
This commit is contained in:
Benjamin Canac
2024-10-10 15:34:33 +02:00
parent c34a805e5f
commit 365bc0fc9a
10 changed files with 81 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,5 +10,6 @@ const selected = ref('Backlog')
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"
class="w-40"
/>
</template>

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

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

2
docs/app/components/content/examples/select-menu/SelectMenuOpenExample.vue
View File

@@ -9,5 +9,5 @@ defineShortcuts({
</script>
<template>
<USelectMenu v-model="selected" v-model:open="open" :items="items" />
<USelectMenu v-model="selected" v-model:open="open" :items="items" class="w-40" />
</template>

2
docs/app/components/content/examples/select-menu/SelectMenuSearchTermExample.vue
View File

@@ -5,5 +5,5 @@ const selected = ref('Backlog')
</script>
<template>
<USelectMenu v-model="selected" v-model:search-term="searchTerm" :items="items" />
<USelectMenu v-model="selected" v-model:search-term="searchTerm" :items="items" class="w-40" />
</template>

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

@@ -9,5 +9,6 @@ const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"
class="w-40"
/>
</template>

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

@@ -32,7 +32,7 @@ function getAvatar(value: string) {
</script>
<template>
<USelect default-value="benjamincanac" :items="items" class="w-40">
<USelect default-value="benjamincanac" :items="items" class="w-48">
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"

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

@@ -8,5 +8,5 @@ defineShortcuts({
</script>
<template>
<USelect v-model:open="open" default-value="Backlog" :items="items" />
<USelect v-model:open="open" default-value="Backlog" :items="items" class="w-40" />
</template>

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

@@ -48,7 +48,7 @@ props:
You can also pass an array of objects with the following properties:
- `label?: string`{lang="ts-type"}
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-typed-items)
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
@@ -492,7 +492,7 @@ props:
## Examples
### With typed items
### With items type
You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

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

@@ -32,6 +32,7 @@ prettier: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -42,13 +43,14 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
You can also pass an array of objects with the following properties:
- `label?: string`{lang="ts-type"}
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-typed-items)
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
@@ -60,6 +62,7 @@ You can also pass an array of objects with the following properties:
ignore:
- modelValue.label
- items
- class
external:
- items
- modelValue
@@ -71,6 +74,7 @@ props:
- label: 'Todo'
- label: 'In Progress'
- label: 'Done'
class: 'w-40'
---
::
@@ -86,6 +90,7 @@ prettier: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -102,6 +107,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
---
::
@@ -116,6 +122,7 @@ ignore:
- modelValue
- valueKey
- items
- class
external:
- items
- modelValue
@@ -131,6 +138,7 @@ props:
id: 'in_progress'
- label: 'Done'
id: 'done'
class: 'w-40'
---
::
@@ -145,6 +153,7 @@ ignore:
- modelValue
- items
- multiple
- class
external:
- items
- modelValue
@@ -158,6 +167,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -174,6 +184,7 @@ Use the `placeholder` prop to set a placeholder text.
prettier: true
ignore:
- items
- class
external:
- items
props:
@@ -183,6 +194,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -197,6 +209,7 @@ ignore:
- modelValue.label
- modelValue.icon
- items
- class
external:
- items
- modelValue
@@ -215,6 +228,7 @@ props:
icon: 'i-heroicons-arrow-up-circle'
- label: Done
icon: 'i-heroicons-check-circle'
class: 'w-40'
---
::
@@ -232,6 +246,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -256,6 +271,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -269,6 +285,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -281,6 +298,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -298,6 +316,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -311,6 +330,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -324,6 +344,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -335,6 +356,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -348,6 +370,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -360,6 +383,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -373,6 +397,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -385,6 +410,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -402,6 +428,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -414,6 +441,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -431,6 +459,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -443,6 +472,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -456,6 +486,7 @@ prettier: true
ignore:
- items
- modelValue
- class
external:
- items
- modelValue
@@ -468,6 +499,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -485,6 +517,7 @@ prettier: true
ignore:
- items
- placeholder
- class
external:
- items
props:
@@ -495,12 +528,13 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
## Examples
### With typed items
### With items type
You can use the `type` property with `separator` to display a separator between items or `label` to display a label.
@@ -510,6 +544,7 @@ collapse: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -531,6 +566,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
---
::

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

@@ -23,6 +23,7 @@ prettier: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -33,6 +34,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -40,7 +42,7 @@ 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"}](#with-typed-items)
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
@@ -51,6 +53,7 @@ You can also pass an array of objects with the following properties:
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -65,6 +68,7 @@ props:
value: 'in_progress'
- label: 'Done'
value: 'done'
class: 'w-40'
---
::
@@ -80,6 +84,7 @@ prettier: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -96,6 +101,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
---
::
@@ -109,6 +115,7 @@ ignore:
- modelValue
- valueKey
- items
- class
external:
- items
- modelValue
@@ -124,6 +131,7 @@ props:
id: 'in_progress'
- label: 'Done'
id: 'done'
class: 'w-40'
---
::
@@ -136,6 +144,7 @@ Use the `placeholder` prop to set a placeholder text.
prettier: true
ignore:
- items
- class
external:
- items
props:
@@ -145,6 +154,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -162,6 +172,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
items:
@@ -189,6 +200,7 @@ props:
- In Progress
- Done
defaultValue: 'Todo'
class: 'w-40'
---
::
@@ -206,6 +218,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -217,6 +230,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -234,6 +248,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -246,6 +261,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -259,6 +275,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -269,6 +286,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -282,6 +300,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -293,6 +312,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -306,6 +326,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -317,6 +338,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -334,6 +356,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -345,6 +368,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -362,6 +386,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -373,6 +398,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -386,6 +412,7 @@ prettier: true
ignore:
- items
- defaultValue
- class
external:
- items
props:
@@ -397,6 +424,7 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
@@ -414,6 +442,7 @@ prettier: true
ignore:
- items
- placeholder
- class
external:
- items
props:
@@ -424,12 +453,13 @@ props:
- Todo
- In Progress
- Done
class: 'w-40'
---
::
## Examples
### With typed items
### With items type
You can use the `type` property with `separator` to display a separator between items or `label` to display a label.
@@ -439,6 +469,7 @@ collapse: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
@@ -460,6 +491,7 @@ props:
- Carrot
- Courgette
- Leek
class: 'w-40'
---
::