diff --git a/components/dialog/Dialog.vue b/components/dialog/Dialog.vue index 01141e2fc..4e0de5ac4 100644 --- a/components/dialog/Dialog.vue +++ b/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() } } } diff --git a/components/dialog/README.md b/components/dialog/README.md index 114bde544..1d5016c1d 100644 --- a/components/dialog/README.md +++ b/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 `` instead. + ### Reference - https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog