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

chore(Select)!: rename text-attribute to option-attribute and defaults to label

Browse Source
This commit is contained in:
Benjamin Canac
2023-06-12 14:42:16 +02:00
parent bc81d45b2b
commit b4a96a8b01
3 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/components/content/examples/SelectExampleObjects.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup>
const countries = [{
name: 'United States',
value: 'US'
}, {
name: 'Canada',
value: 'CA'
}, {
name: 'Mexico',
value: 'MX'
}]
const country = ref('CA')
</script>
<template>
<USelect v-model="country" :options="countries" option-attribute="name" />
</template>

29
docs/content/3.forms/3.select.md
View File

@@ -27,6 +27,35 @@ const country = ref(countries[0])
```
::
When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
::component-example
#default
:select-example-objects
#code
```vue
<script setup>
const countries = [{
name: 'United States',
value: 'US'
}, {
name: 'Canada',
value: 'CA'
}, {
name: 'Mexico',
value: 'MX'
}]
const country = ref('CA')
</script>
<template>
<USelect v-model="country" :options="countries" option-attribute="name" />
</template>
```
::
### Style
Use the `color` and `variant` props to change the visual style of the Select.