From b4a96a8b01b52751c9a9c6609ed8cf7ccf516a04 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 12 Jun 2023 14:42:16 +0200
Subject: [PATCH] chore(Select)!: rename `text-attribute` to `option-attribute`
 and defaults to `label`

---
 .../content/examples/SelectExampleObjects.vue | 18 ++++++++++++
 docs/content/3.forms/3.select.md              | 29 +++++++++++++++++++
 src/runtime/components/forms/Select.vue       | 20 ++++++-------
 3 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 docs/components/content/examples/SelectExampleObjects.vue

diff --git a/docs/components/content/examples/SelectExampleObjects.vue b/docs/components/content/examples/SelectExampleObjects.vue
new file mode 100644
index 00000000..6668d2b9
--- /dev/null
+++ b/docs/components/content/examples/SelectExampleObjects.vue
@@ -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>
diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
index f5d7eda1..0966a78d 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/3.forms/3.select.md
@@ -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.
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index b783afb3..0f261d65 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -15,7 +15,7 @@
           v-if="option.children"
           :key="`${option[valueAttribute]}-optgroup-${index}`"
           :value="option[valueAttribute]"
-          :label="option[textAttribute]"
+          :label="option[optionAttribute]"
         >
           <option
             v-for="(childOption, index2) in option.children"
@@ -23,7 +23,7 @@
             :value="childOption[valueAttribute]"
             :selected="childOption[valueAttribute] === normalizedValue"
             :disabled="childOption.disabled"
-            v-text="childOption[textAttribute]"
+            v-text="childOption[optionAttribute]"
           />
         </optgroup>
         <option
@@ -32,7 +32,7 @@
           :value="option[valueAttribute]"
           :selected="option[valueAttribute] === normalizedValue"
           :disabled="option.disabled"
-          v-text="option[textAttribute]"
+          v-text="option[optionAttribute]"
         />
       </template>
     </select>
@@ -150,9 +150,9 @@ export default defineComponent({
         ].includes(value)
       }
     },
-    textAttribute: {
+    optionAttribute: {
       type: String,
-      default: 'text'
+      default: 'label'
     },
     valueAttribute: {
       type: String,
@@ -175,25 +175,25 @@ export default defineComponent({
     }
 
     const guessOptionValue = (option: any) => {
-      return get(option, props.valueAttribute, get(option, props.textAttribute))
+      return get(option, props.valueAttribute, get(option, props.optionAttribute))
     }
 
     const guessOptionText = (option: any) => {
-      return get(option, props.textAttribute, get(option, props.valueAttribute))
+      return get(option, props.optionAttribute, get(option, props.valueAttribute))
     }
 
     const normalizeOption = (option: any) => {
       if (['string', 'number', 'boolean'].includes(typeof option)) {
         return {
           [props.valueAttribute]: option,
-          [props.textAttribute]: option
+          [props.optionAttribute]: option
         }
       }
 
       return {
         ...option,
         [props.valueAttribute]: guessOptionValue(option),
-        [props.textAttribute]: guessOptionText(option)
+        [props.optionAttribute]: guessOptionText(option)
       }
     }
 
@@ -209,7 +209,7 @@ export default defineComponent({
       return [
         {
           [props.valueAttribute]: '',
-          [props.textAttribute]: props.placeholder,
+          [props.optionAttribute]: props.placeholder,
           disabled: true
         },
         ...normalizedOptions.value