refactor(snackbar): Implement two-way binding for open prop (#83)

BREAKING CHANGES: Public component methods for open / close no longer
exist. Please change your templates to use v-model instead.

Author: matsp

components/snackbar/README.md

@@ -3,31 +3,40 @@
 ### Markup
 
 ```html
-<m-snackbar ref="snackbar" />
+<m-button
+  raised
+  interactive
+  @click="isSnackbarOpen=true">open</m-button>
+<m-snackbar
+  :options="options"
+  v-model="isSnackbarOpen"/>
 ```
 
 ### Script
 
 ```javascript
-let options = {
-  message: 'snackbar message'
+data () {
+  return {
+    isSnackbarOpen: false,
+    options: {
+      message: 'I am a snackbar!',
+      timeout: 3000,
+      actionHandler: () => console.log('snackbar action'),
+      actionText: 'ok',
+      multiline: false,
+      actionOnBottom: false
+    }
+  }
 }
-
-this.$refs.snackbar.show(options)
 ```
 
-### Props & methods
+### Props
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
-| alignStart | Boolean | - | false | start-aligned snackbar |
-| dismissesOnAction | Boolean | true | false | keep snackbar when action button is pressed |
-
-| Method | Description |
-|--------|-------------|
-| show | show the snackbar with given options |
-
-The show() function takes a object as parameter to configure the snackbar. The benefit is that you don't have to add more than one snackbar in your template to show different snackbars. Have a look at the [reference](https://github.com/material-components/material-components-web/blob/master/packages/mdc-snackbar/README.md#showing-a-message-and-action) for details of the options object.
+| alignStart | Boolean | false | - | start-aligned snackbar |
+| dismissesOnAction | Boolean | true | - | keep snackbar when action button is pressed |
+| options | Object | - | true | snackbar options (see script section)|
 
 ### Reference
 

components/snackbar/Snackbar.vue

@@ -1,12 +1,16 @@
 <template>
   <div
     class="mdc-snackbar"
-    :class="classes">
+    :class="classes"
+    aria-live="assertive"
+    aria-atomic="true"
+    aria-hidden="true"
+    @MDCSnackbar:hide="model = false">
     <div class="mdc-snackbar__text" />
     <div class="mdc-snackbar__action-wrapper">
       <button
         type="button"
-        class="mdc-button mdc-snackbar__action-button" />
+        class="mdc-snackbar__action-button"/>
     </div>
   </div>
 </template>
@@ -18,14 +22,26 @@ import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
   mixins: [themeClassMixin],
+  model: {
+    prop: 'open',
+    event: 'change'
+  },
   props: {
     alignStart: {
       type: Boolean,
-      required: false
+      default: false
     },
     dismissesOnAction: {
       type: Boolean,
       default: true
+    },
+    open :{
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      required: true
     }
   },
   data () {
@@ -38,18 +54,28 @@ export default {
       return {
         'mdc-snackbar--align-start': this.alignStart
       }
+    },
+    model:  {
+      get () {
+        return this.open
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
     }
   },
   mounted () {
     this.mdcSnackbar = MDCSnackbar.attachTo(this.$el)
-    this.mdcSnackbar.dismissesOnAction = this.dismissesOnAction
   },
   beforeDestroy () {
     this.mdcSnackbar.destroy()
   },
-  methods: {
-    show (options) {
-      this.mdcSnackbar.show(options)
+  watch: {
+    dismissesOnAction () {
+      this.mdcSnackbar.dismissesOnAction = this.dismissesOnAction
+    },
+    open () {
+      if (this.open) this.mdcSnackbar.show(this.options)
     }
   }
 }

components/snackbar/styles.scss

@@ -1,6 +1,6 @@
-@import "@material/snackbar/mdc-snackbar";
-@import "@material/button/mdc-button";
-
 .mdc-snackbar {
     transform: translateY(100%);
-}
+}
+
+@import "@material/snackbar/mdc-snackbar";
+