revert(select): allow Number and Object value types

This reverts commit 6a031dd.
stasson · Feb 25, 2018 · f6974f6 · f6974f6
1 parent 4df9cc2
commit f6974f6
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 28 deletions.
diff --git a/components/select/README.md b/components/select/README.md
@@ -28,12 +28,12 @@ var vm = new Vue({
 | props      | Type            | Default | Description                                  |
 | ---------- | --------------- | ------- | -------------------------------------------- |
 | `disabled` | Boolean         | false   | whether this select is disabled              |
-| `label`    | String          | undefined  | the selection label                          |
-| `value`    | [Number, String, Object, Array] |         | bind with v-model (update on `change` event) |
-| `multiple` | Boolean         | false   | whether the select accept multiple values    |
+| `label`    | String          |         | the selection label                          |
+| `value`    | [String, Array] |         | bind with v-model (update on `change` event) |
+| `multiple` | Boolean         |         | whether the select accept multiple values    |
 | `max-size` | Boolean         | 4       | multi select max size                        |
-| `native`   | String          | false   | force native select rendering                |
-| `name`     | String          | undefined | native select name                         |
+| `native`   | String          |         | force native select rendering                |
+| `name`     | String          |         | native select name                           |
 
 | event    | Description             |
 | -------- | ----------------------- |
@@ -45,7 +45,7 @@ var vm = new Vue({
 | props      | Type    | Default | Description                     |
 | ---------- | ------- | ------- | ------------------------------- |
 | `disabled` | Boolean | false   | whether this option is disabled |
-| `value`    | [Number, String, Object]  |  text content  | option value                    |
+| `value`    | String  |         | option value                    |
 
 > If no option value is specified, the select component will take the option's textContent.
 

diff --git a/components/select/demo.vue b/components/select/demo.vue
@@ -8,9 +8,9 @@
       <br><br><br>
       <mdc-select box v-model="selectedValue" label="Pick up a food"
         v-if="selectedType">
-        <mdc-option v-for="option of options" :key="String(option)"
-        :value="option"
-        >*{{option}}*</mdc-option>
+        <mdc-option v-for="option of options" :key="option"
+        :value="option.toLowerCase()"
+        >{{option}}</mdc-option>
       </mdc-select>
 
       <mdc-caption tag="p" v-if="selectedType"
@@ -19,8 +19,8 @@
 
       <mdc-select multiple v-model="selectedValues" label="Pick one or more"
       v-if="selectedType">
-      <mdc-option v-for="option of options" :key="String(option)"
-      :value="option">
+      <mdc-option v-for="option of options" :key="option"
+      :value="option.toLowerCase()">
       {{option}}
       </mdc-option>
       </mdc-select>
@@ -40,7 +40,7 @@
         food: {
           'Vegetables' : ['Spinach', 'Carrots', 'Onions', 'Broccoli'], 
           'Meat' : [ 'Eggs', 'Chicken', 'Fish', 'Turkey', 'Pork' , 'Beef'], 
-          'Fruits' : [1, 2, {tutu: 3}, 'Berries', 'Lemons'], 
+          'Fruits' : ['Apples', 'Oranges', 'Bananas', 'Berries', 'Lemons'], 
         }
       }
     },

diff --git a/components/select/mdc-menu-option.vue b/components/select/mdc-menu-option.vue
@@ -2,7 +2,8 @@
    <li class="mdc-option mdc-menu-option mdc-list-item" 
     role="option" 
     :tabindex="disabled?-1:0"
-    :aria-disabled="disabled">
+    :aria-disabled="disabled"
+    :data-value="value">
      <slot></slot>
    </li>
 </template>
@@ -11,13 +12,8 @@
 export default {
   name: 'mdc-menu-option',
   props: {
-    value: [Number, String, Object],
+    value: String,
     disabled: Boolean
-  },
-  methods: {
-    getValue () {
-      return this.value || this.$el.textContent.trim()
-    }
   }
 }
 </script>
diff --git a/components/select/mdc-menu-select.vue b/components/select/mdc-menu-select.vue
@@ -33,7 +33,7 @@ export default {
   },
   props: {
     multiple: Boolean,
-    value: [Number, String, Object],
+    value: [String, Array],
     disabled: Boolean,
     label: String, 
     box: Boolean
@@ -69,7 +69,7 @@ export default {
       if (this.foundation) {
         let options = this.$refs.menu.items
         for (let i = 0; i < options.length; i++) {
-          let optionValue = options[i].__vue__.getValue() 
+          let optionValue = options[i].getAttribute('data-value') || options[i].textContent.trim()
           if (this.value == optionValue) {
             this.foundation.setSelectedIndex(i)
             //TODO: MDCFIX force float above if value is valid
@@ -151,7 +151,8 @@ export default {
       getTextForOptionAtIndex: (index) =>
         this.$refs.menu.items[index].textContent.trim(),
       getValueForOptionAtIndex: (index) => {
-        return this.$refs.menu.items[index].__vue__.getValue() 
+        return this.$refs.menu.items[index].getAttribute('data-value') 
+          || this.$refs.menu.items[index].textContent.trim()
       },
       setAttrForOptionAtIndex: (index, attr, value) =>
         this.$refs.menu.items[index].setAttribute(attr, value),

diff --git a/components/select/mdc-multi-option.vue b/components/select/mdc-multi-option.vue
@@ -13,7 +13,7 @@
 export default {
   name: 'mdc-multi-option',
   props: {
-    value: [Number, String, Object],
+    value: String,
     disabled: Boolean
   },
   computed: {

diff --git a/components/select/mdc-multi-select.vue b/components/select/mdc-multi-select.vue
@@ -20,7 +20,7 @@ export default {
   },
   props: {
     multiple: Boolean,
-    value: [Number, String, Object, Array],
+    value: [String, Array],
     disabled: Boolean,
     label: String,
     maxSize: {

diff --git a/components/select/mdc-native-option.vue b/components/select/mdc-native-option.vue
@@ -13,7 +13,7 @@
 export default {
   name: 'mdc-native-option',
   props: {
-    value: [Number, String, Object],
+    value: String,
     disabled: Boolean
   },
   computed: {

diff --git a/components/select/mdc-native-select.vue b/components/select/mdc-native-select.vue
@@ -16,7 +16,7 @@ export default {
     event: 'change'
   },
   props: {
-    value: [Number, String],
+    value: [String, Array],
     disabled: Boolean,
     label: String
   },

diff --git a/components/select/mdc-option.vue b/components/select/mdc-option.vue
@@ -12,7 +12,7 @@ import MDCMultiOption from './mdc-multi-option.vue'
 export default {
   name: 'mdc-option',
   props: {
-    value: [Number, String, Object],
+    value: String,
     disabled: Boolean
   },
   inject: ['mdcSelect'],

diff --git a/components/select/mdc-select.vue b/components/select/mdc-select.vue
@@ -30,7 +30,7 @@ export default {
   },
   props: {
     multiple: Boolean,
-    value: [Number, String, Object, Array],
+    value: [String, Array],
     label: String,
     native: Boolean
   },