feat(select): Synchronise with mdc-web

BREAKING CHANGES: Renamed slot 'bottomLine' to 'line'.
matsp · Jul 9, 2018 · 91bc17f · 91bc17f
1 parent b2cad7f
commit 91bc17f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/components/select/README.md b/components/select/README.md
@@ -4,15 +4,27 @@
 
 ```html
 <m-select v-model="selected">
-  <option v-for="option in selectOptions" :key="option.text" :value="option.value" :selected="selected === option.value">
+  <option
+    v-for="option in selectOptions"
+    :key="option.text"
+    :value="option.value"
+    :selected="selected === option.value">
     {{ option.text }}
-  </option>
- <m-floating-label
-   slot="label"
-  :floatAbove="selected !== ''">
-  Pick a food group
-</m-floating-label> 
-<m-line-ripple slot="bottomLine"/>
+    </option>
+  <m-floating-label
+    slot="label"
+    :floatAbove="selected !== ''">
+    Pick a food group
+  </m-floating-label> 
+  <m-line-ripple slot="line"/>
+</m-select>
+
+<m-select outlined>
+  <option>...</option>
+  <m-floating-label
+    slot="label">
+    Pick a food group
+  <m-notched-outline slot="line"/>
 </m-select>
 ```
 
@@ -45,6 +57,7 @@ data() {
 |------|------|---------|-------------|
 | disabled | Boolean | false | whether the select should be disabled |
 | box | Boolean | false | renders a select box |
+| outlined | Boolean | false | outlined select |
 
 ### Slots
 

diff --git a/components/select/Select.vue b/components/select/Select.vue
@@ -15,7 +15,7 @@
       <slot/>
     </select>
     <slot name="label"/>
-    <slot name="bottomLine"/>
+    <slot name="line"/>
   </div>
 </template>
 
@@ -38,6 +38,10 @@ export default {
     box: {
       type: Boolean,
       default: false
+    },
+    outlined: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -49,7 +53,8 @@ export default {
     classes () {
       return {
         'mdc-select--box': this.box,
-        'mdc-select--disabled': this.disabled
+        'mdc-select--disabled': this.disabled,
+        'mdc-select--outlined': this.outlined
       }
     }
   },