feat(select): update select foundation as per MDCWeb 0.38.0

BREAKING CHANGE: the box property has been removed as it is now the default.
stasson · Aug 7, 2018 · eded3e6 · eded3e6
1 parent 47e8a7b
commit eded3e6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 29 deletions.
diff --git a/components/select/README.md b/components/select/README.md
@@ -21,13 +21,12 @@ var vm = new Vue({
 
 ### mdc-select
 
-| props      | Type            | Default | Description                                  |
-| ---------- | --------------- | ------- | -------------------------------------------- |
-| `label`    | String          |         | the selection label (placeholder)            |
-| `value`    | [String, Array] |         | bind with v-model (update on `change` event) |
-| `disabled` | Boolean         | false   | whether this select is disabled              |
-| `box`      | Boolean         | false   | box style                                    |
-| `outlined` | Boolean         | false   | outlined style                               |
+| props      | Type    | Default | Description                                  |
+| ---------- | ------- | ------- | -------------------------------------------- |
+| `label`    | String  |         | the selection label (placeholder)            |
+| `value`    | String  |         | bind with v-model (update on `change` event) |
+| `disabled` | Boolean | false   | whether this select is disabled              |
+| `outlined` | Boolean | false   | outlined style                               |
 
 | event    | Description             |
 | -------- | ----------------------- |

diff --git a/components/select/demo.vue b/components/select/demo.vue
@@ -4,12 +4,10 @@
       <mdc-select
         v-model="selectedType"
         label="Pick up a food type">
-        <optgroup label="categories">
-          <option
-            v-for="type in types"
-            :value="type"
-            :key="type">{{ type }}</option>
-        </optgroup>
+        <option
+          v-for="type in types"
+          :value="type"
+          :key="type">{{ type }}</option>
       </mdc-select>
 
       <mdc-caption

diff --git a/components/select/mdc-select.vue b/components/select/mdc-select.vue
@@ -6,6 +6,7 @@
     class="mdc-select">
     <select
       ref="native_control"
+      :disabled="disabled"
       v-bind="$attrs"
       class="mdc-select__native-control"
       v-on="listeners">
@@ -57,7 +58,6 @@ export default {
     value: String,
     disabled: Boolean,
     label: String,
-    box: Boolean,
     outlined: Boolean,
     id: { type: String }
   },
@@ -70,21 +70,21 @@ export default {
   computed: {
     rootClasses() {
       return {
-        'mdc-select--box': this.box,
+        'mdc-select--box': !this.outlined,
         'mdc-select--outlined': this.outlined,
         ...this.classes
       }
     },
     listeners() {
       return {
         ...this.$listeners,
-        change: event => this.$emit('change', event.target.value)
+        change: event => this.onChange(event)
       }
     }
   },
   watch: {
     disabled(value) {
-      this.foundation && this.foundation.setDisabled(value)
+      this.foundation && this.foundation.updateDisabledStyle(value)
     },
     value: 'refreshIndex'
   },
@@ -103,16 +103,7 @@ export default {
           this.$refs.line.foundation.deactivate()
         }
       },
-      setDisabled: disabled => (this.$refs.native_control.disabled = disabled),
-      registerInteractionHandler: (type, handler) =>
-        this.$refs.native_control.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) =>
-        this.$refs.native_control.removeEventListener(type, handler),
-      getSelectedIndex: () => this.$refs.native_control.selectedIndex,
-      setSelectedIndex: index =>
-        (this.$refs.native_control.selectedIndex = index),
       getValue: () => this.$refs.native_control.value,
-      setValue: value => (this.$refs.native_control.value = value),
       isRtl: () => {
         return (
           window.getComputedStyle(this.$el).getPropertyValue('direction') ===
@@ -144,8 +135,7 @@ export default {
     })
 
     this.foundation.init()
-
-    this.foundation.setDisabled(this.disabled)
+    this.foundation.handleChange()
 
     // initial sync with DOM
     this.refreshIndex()
@@ -176,8 +166,13 @@ export default {
       })
 
       if (this.$refs.native_control.selectedIndex !== idx) {
-        this.foundation.setSelectedIndex(idx)
+        this.$refs.native_control.selectedIndex = idx
+        this.foundation.handleChange()
       }
+    },
+    onChange(event) {
+      this.foundation.handleChange()
+      this.$emit('change', event.target.value)
     }
   }
 }