chore(Select)!: rename text-attribute to option-attribute and def…

…aults to `label`

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>

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.

src/runtime/components/forms/Select.vue

@@ -15,15 +15,15 @@
           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"
             :key="`${childOption[valueAttribute]}-${index}-${index2}`"
             :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