feat(select): Synchronise with mdc-web v0.34.1 (rewrite of component)

BREAKING CHANGES: The select component now use a native html select, so please update your templates as discribed in the docs.
matsp · Apr 6, 2018 · a2c94ac · a2c94ac
1 parent e19b0e0
commit a2c94ac
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 79 deletions.
diff --git a/components/select/README.md b/components/select/README.md
@@ -4,18 +4,15 @@
 
 ```html
 <m-select v-model="selected">
-  Select
-  <m-menu slot="menu">
-    <m-list>
-      <m-list-item id="entry-1">
-        Entry 1
-      </m-list-item>
-      <m-list-divider />
-      <m-list-item id="entry-2">
-        Entry 2
-      </m-list-item>
-    </m-list>
-  </m-menu>
+  <option v-for="option in selectOptions" :key="option.text" :value="option.value" :selected="selected === option.value">
+    {{ option.text }}
+  </option>
+ <m-select-label
+   slot="label"
+  :floatAbove="selected !== ''">
+  Pick a food group
+</m-select-label> 
+<m-select-bottom-line slot="bottomLine"/>
 </m-select>
 ```
 
@@ -24,7 +21,20 @@
 ```javascript
 data() {
     return {
-        selected: ''
+      selectOptions: [
+        { text: 'Bread, Cereal, Rice and Pasta',
+          value: 'grains'
+        },
+        {
+          text: 'Vegetables',
+          value: 'vegetables'
+        },
+        {
+          text: 'Fruit',
+          value: 'fruit'
+        }
+      ],
+      selected: ''
     }
 }
 ```
@@ -33,16 +43,16 @@ data() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| selected | String | '' | selected item id if available - when not the string of the selected item - otherwise empty string |
 | disabled | Boolean | false | whether the select should be disabled |
 | box | Boolean | false | renders a select box |
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
-| default | select label |
-| menu | select menu |
+| default | native html select options |
+| label | select label component |
+| bottomLine | select bottom-line component |
 
 ### Reference
 

diff --git a/components/select/Select.vue b/components/select/Select.vue
@@ -1,21 +1,21 @@
 <template>
   <div
-    class="mdc-select"
     :class="classes"
-    tabindex="0"
-    :aria-disabled="disabled"
-    role="listbox"
-    @MDCSelect:change="onChange">
-    <div
-      class="mdc-select__surface"
-      tabindex="0">
-      <div class="mdc-select__label">
-        <slot />
-      </div>
-      <div class="mdc-select__selected-text" />
-      <div class="mdc-select__bottom-line" />
-    </div>
-    <slot name="menu" />
+    class="mdc-select">
+    <select
+      class="mdc-select__native-control"
+      :disabled="disabled"
+      v-bind="$attrs"
+      @change="onChange">
+      <option
+      value=""
+      disabled
+      selected
+      v-if="$slots['label']"/>
+      <slot/>
+    </select>
+    <slot name="label"/>
+    <slot name="bottomLine"/>
   </div>
 </template>
 
@@ -26,10 +26,6 @@ import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
   mixins: [themeClassMixin],
-  model: {
-    prop: 'selected',
-    event: 'change'
-  },
   props: {
     disabled: {
       type: Boolean,
@@ -40,36 +36,33 @@ export default {
       default: false
     }
   },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   data () {
     return {
-      mdcSelect: null
+      mdcSelect: null,
     }
   },
   computed: {
     classes () {
       return {
-        'mdc-select--box': this.box
+        'mdc-select--box': this.box,
+        'mdc-select--disabled': this.disabled
       }
     }
   },
-  mounted () {
-    if (this.$slots.menu) {
-      this.$slots.menu[0].elm.classList.add('mdc-select__menu')
-
-      this.$slots.menu[0].componentOptions.children[0].componentOptions.children
-        .filter(n => n.elm.className.indexOf('mdc-list-item') > -1)
-        .map(n => n.elm.setAttribute('role', 'option'))
+  methods: {
+    onChange (event) {
+      this.$emit('change', event.target.value)
     }
-
+  },
+  mounted () {
     this.mdcSelect = MDCSelect.attachTo(this.$el)
   },
-  destroy () {
+  beforeDestroy () {
     this.mdcSelect.destroy()
-  },
-  methods: {
-    onChange (event) {
-      this.$emit('change', this.mdcSelect.value)
-    }
   }
 }
 </script>
diff --git a/components/select/SelectBottomLine.vue b/components/select/SelectBottomLine.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="mdc-select__bottom-line"
+    :class="classes"/>
+</template>
+
+<script>
+import { MDCSelectBottomLine } from '@material/select/bottom-line'
+
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin],
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      mdcSelectBottomLine: null
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mdc-select__bottom-line--active': this.active
+      }
+    }
+  },
+  mounted () {
+    this.mdcSelectBottomLine = MDCSelectBottomLine.attachTo(this.$el)
+  },
+  beforeDestroy () {
+    this.mdcSelectBottomLine.destroy()
+  }
+}
+</script>
diff --git a/components/select/SelectLabel.vue b/components/select/SelectLabel.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="mdc-select__label"
+    :class="classes">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import { MDCSelectLabel } from '@material/select/label'
+
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin],
+  props: {
+    floatAbove: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      mdcSelectLabel: null
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mdc-select__label--float-above': this.floatAbove
+      }
+    }
+  },
+  mounted () {
+    this.mdcSelectLabel = MDCSelectLabel.attachTo(this.$el)
+  },
+  beforeDestroy () {
+    this.mdcSelectLabel.destroy()
+  }
+}
+</script>
diff --git a/components/select/index.js b/components/select/index.js
@@ -1,11 +1,15 @@
 import Select from './Select.vue'
+import SelectBottomLine from './SelectBottomLine.vue'
+import SelectLabel from './SelectLabel.vue'
 import './styles.scss'
 
 import { initPlugin } from '../'
 
 const plugin = {
   install (vm) {
     vm.component('m-select', Select)
+    vm.component('m-select-bottom-line', SelectBottomLine)
+    vm.component('m-select-label', SelectLabel)
   }
 }
 export default plugin

diff --git a/demo/views/SelectView.vue b/demo/views/SelectView.vue
@@ -8,36 +8,28 @@
         </a>
       </m-typo-body>
     </m-layout-grid-cell>
-    <m-layout-grid-cell :span="2">
-      <m-select>
-        Select
-        <m-menu slot="menu">
-          <m-list>
-            <m-list-item>
-              Entry 1
-            </m-list-item>
-            <m-list-divider />
-            <m-list-item>
-              Entry 2
-            </m-list-item>
-          </m-list>
-        </m-menu>
+    <m-layout-grid-cell :span="3">
+      <m-select v-model="selected">
+        <option v-for="option in selectOptions" :key="option.text" :value="option.value" :selected="selected === option.value">
+          {{ option.text }}
+        </option>
+        <m-select-label
+          slot="label"
+          :floatAbove="selected !== ''">Pick a food group</m-select-label> 
+        <m-select-bottom-line slot="bottomLine"/>
       </m-select>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="2">
-      <m-select box>
-        Select
-        <m-menu slot="menu">
-          <m-list>
-            <m-list-item>
-              Entry 1
-            </m-list-item>
-            <m-list-divider />
-            <m-list-item>
-              Entry 2
-            </m-list-item>
-          </m-list>
-        </m-menu>
+      <m-select
+        v-model="selected"
+        box>
+        <option v-for="option in selectOptions" :key="option.text" :value="option.value" :selected="selected === option.value">
+          {{ option.text }}
+        </option>
+        <m-select-label
+          slot="label"
+          :floatAbove="selected !== ''">Pick a food group</m-select-label> 
+        <m-select-bottom-line slot="bottomLine"/>
       </m-select>
     </m-layout-grid-cell>
   </m-layout-grid-inner>
@@ -54,7 +46,24 @@ Vue.use(Menu)
 Vue.use(Select)
 
 export default {
-
+  data () {
+    return {
+      selectOptions:  [
+        { text: 'Bread, Cereal, Rice and Pasta',
+          value: 'grains'
+        },
+        {
+          text: 'Vegetables',
+          value: 'vegetables'
+        },
+        {
+          text: 'Fruit',
+          value: 'fruit'
+        }
+      ],
+      selected: ''
+    }
+  }
 }
 </script>