feat(select): Synchronise with mdc-web v0.30.0

matsp · Feb 6, 2018 · e8c3d59 · e8c3d59
1 parent 8fea9c8
commit e8c3d59
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/components/Select/README.md b/components/Select/README.md
@@ -27,16 +27,17 @@ data() {
 
 ### Props
 
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| disabled | Boolean | - | false | whether the select should be disabled |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| disabled | Boolean | false | whether the select should be disabled |
+| box | Boolean | false | renders a select box |
 
 ### Slots
 
-| Slot | Prop dependencies | Description |
-|------|-------------------|-------------|
-| default | - | select label |
-| menu | - | select menu |
+| Slot | Description |
+|------|-------------|
+| default | select label |
+| menu | select menu |
 
 ### Reference
 

diff --git a/components/Select/Select.vue b/components/Select/Select.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="mdc-select"
+    :class="classes"
     tabindex="0"
     :aria-disabled="disabled"
     role="listbox"
@@ -29,7 +30,10 @@ export default {
   props: {
     disabled: {
       type: Boolean,
-      required: false,
+      default: false
+    },
+    box: {
+      type: Boolean,
       default: false
     }
   },
@@ -38,6 +42,13 @@ export default {
       mdcSelect: null
     }
   },
+  computed: {
+    classes () {
+      return {
+        'mdc-select--box': this.box
+      }
+    }
+  },
   mounted () {
     if (this.$slots.menu) {
       this.$slots.menu[0].elm.classList.add('mdc-select__menu')

diff --git a/demo/views/SelectView.vue b/demo/views/SelectView.vue
@@ -8,7 +8,7 @@
         </a>
       </m-typo-body>
     </m-layout-grid-cell>
-    <m-layout-grid-cell :span="12">
+    <m-layout-grid-cell :span="2">
       <m-select>
         Select
         <m-menu slot="menu">
@@ -24,5 +24,21 @@
         </m-menu>
       </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>
+    </m-layout-grid-cell>
   </m-layout-grid-inner>
 </template>