fix(dialog): close via v-model

components/dialog/Dialog.vue

@@ -106,7 +106,7 @@ export default {
   },
   watch: {
     open () {
-      if (this.open) this.mdcDialog.open()
+      this.open ? this.mdcDialog.open() : this.mdcDialog.close()
     },
     stacked () {
       this.mdcDialog.autoStackButtons = this.stacked
@@ -176,6 +176,7 @@ export default {
           }
         })
       }
+      this.mdcDialog.layout()
     }
   }
 }

components/dialog/README.md

@@ -1,5 +1,7 @@
 ## Dialog
 
+[Codepen example](https://codepen.io/chankcccc/pen/aeYpBJ)
+
 ### Markup
 
 ```html
@@ -25,6 +27,7 @@
 ```
 
 ### Script
+
 ```javascript
 data () {
   return {
@@ -38,6 +41,8 @@ methods: {
 }
 ```
 
+Close via setting `isDialogOpen` to false will emit `closing` and `closed` event without the `action` value in its payload.
+
 ### Props
 
 | Prop | Type | Default | Description |
@@ -56,8 +61,11 @@ methods: {
 |-------|---------|-------------|
 | opening | {} | emitted when dialog is opening |
 | opened | {} | emitted when dialog is opened |
-| closing | { action: value } | emitted when dialog is closing |
-| closed | { action: value } | emitted when dialog is closed |
+| closing | { action?: value } | emitted when dialog is closing |
+| closed | { action?: value } | emitted when dialog is closed |
+
+The complete order of events emitted in the open and close process is `opening`, `opened`, `closing`, `change` and `closed`
+
 
 ### Slots
 
@@ -70,6 +78,10 @@ methods: {
 | cancelButton | cancel button |
 | dialogButton | additional button(s) |
 
+### Accessibility Concerns
+
+Dialog should have at least one focusable element, e.g. buttons in dialogButton slots. For providing messages, use `<m-snackbar>` instead.
+
 ### Reference
 
 - https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog