feat(mdc-dialog): Support v-model for open/close dialog

components/dialog/README.md

@@ -1,88 +1,90 @@
-## Usage
-
-```html
-<mdc-dialog ref="dialog"
-  title="Title" accept="Accept" cancel="Decline"
-  @accept="onAccept" @cancel="onDecline"
->{{ dialogText }}</mdc-dialog>
-```
-
-```javascript
-var vm = new Vue({
-  data: {
-    dialogText: 'Lorem ipsum dolor sit amet, ...',
-  },
-  methods: {
-    showDialog () {
-      this.$refs.dialog.show()
-    },
-    onAccept () {
-      console.log('accepted')
-    },
-    onDecline () {
-      console.log('declined')
-    },
-  }
-})
-```
-
-### props
-
-| props | Type | Default | Description |
-|-------|------|---------|-------------|
-|`title`|String| required | the dialog title |
-|`accept`|String|`'Ok'`| the dialog accept button text   |
-|`accept-disabled`|String|`'Ok'`| the dialog accept button text   |
-|`cancel`| String| `'cancel'`| the dialog cancel button text  |
-|`scrollable`| Boolean| false | whether the dialog is scrollable |
-|`accent`| Boolean| false | set accented style to the footer buttons |
-
-### events
-
-| props   | args |  Description |
-|---------|------|--------------|
-|`@accept`| none | emitted when dialog is accepted   |
-|`@cancel`| none | emitted when dialog is cancelled  |
-|`@validate`| accept | emmited before the dialog is accepted _(*)_ |
-
-> Note that if you listen to the @validate event, then You must call
-the accept argument to finally close the box. Use `accept(false)` to
-prevent emitting the `accept` event and just close.
-
-### Custom validation logic
-
-You can use the `accept-disabled` property to prevent the dialog to close 
-when the accept button is clicked.
-
-```html
-<mdc-dialog ref="dialog" title="Dialog" accept="Accept" cancel="Decline"
-  :accept-disabled="isThisNotAcceptable"
->Lorem ipsum dolor sit amet</mdc-dialog>
-```
-
-Or use the `@validate` event to trigger your own validation logic as follow:
-
-```html
-<mdc-dialog ref="dialog" title="Dialog" accept="Accept" cancel="Decline"
-  @validate="onValidate"
->Lorem ipsum dolor sit amet</mdc-dialog>
-```
-
-```javascript
-export default {
-  methods:{
-    onValidate ({accept}) {
-      let isValid = false
-      // custom validation logic here
-      // ..
-      if (isValid) {
-        accept()
-      }
-    }
-  }
-}
-```
-
-### Reference
-
-<https://material.io/components/web/catalog/dialogs>
+## Usage
+
+```html
+<mdc-button raised @click="open=!open">Show dialog</mdc-button>
+<mdc-dialog v-model="open"
+  title="Title" accept="Accept" cancel="Decline"
+  @accept="onAccept" @cancel="onDecline">
+  {{ dialogText }}
+</mdc-dialog>
+```
+
+```javascript
+var vm = new Vue({
+  data: {
+    dialogText: 'Lorem ipsum dolor sit amet, ...',
+    open: false,
+  },
+  methods: {
+    onAccept() {
+      console.log('accepted');
+    },
+    onDecline() {
+      console.log('declined');
+    },
+  },
+});
+```
+
+### props
+
+| props             | Type    | Default    | Description                              |
+| ----------------- | ------- | ---------- | ---------------------------------------- |
+| `open`            | Boolean | false      | optional v-model when true opens dialog  |
+| `title`           | String  | required   | the dialog title                         |
+| `accept`          | String  | `'Ok'`     | the dialog accept button text            |
+| `accept-disabled` | String  | `'Ok'`     | the dialog accept button text            |
+| `cancel`          | String  | `'cancel'` | the dialog cancel button text            |
+| `scrollable`      | Boolean | false      | whether the dialog is scrollable         |
+| `accent`          | Boolean | false      | set accented style to the footer buttons |
+
+### events
+
+| props       | args    | Description                                             |
+| ----------- | ------- | ------------------------------------------------------- |
+| `@change`   | Boolean | notify v-model/listeners that drawer state has changed. |
+| `@accept`   | none    | emitted when dialog is accepted                         |
+| `@cancel`   | none    | emitted when dialog is cancelled                        |
+| `@validate` | accept  | emmited before the dialog is accepted _(\*)_            |
+
+> Note that if you listen to the @validate event, then You must call
+> the accept argument to finally close the box. Use `accept(false)` to
+> prevent emitting the `accept` event and just close.
+
+### Custom validation logic
+
+You can use the `accept-disabled` property to prevent the dialog to close
+when the accept button is clicked.
+
+```html
+<mdc-dialog ref="dialog" title="Dialog" accept="Accept" cancel="Decline"
+  :accept-disabled="isThisNotAcceptable"
+>Lorem ipsum dolor sit amet</mdc-dialog>
+```
+
+Or use the `@validate` event to trigger your own validation logic as follow:
+
+```html
+<mdc-dialog ref="dialog" title="Dialog" accept="Accept" cancel="Decline"
+  @validate="onValidate"
+>Lorem ipsum dolor sit amet</mdc-dialog>
+```
+
+```javascript
+export default {
+  methods: {
+    onValidate({ accept }) {
+      let isValid = false;
+      // custom validation logic here
+      // ..
+      if (isValid) {
+        accept();
+      }
+    },
+  },
+};
+```
+
+### Reference
+
+<https://material.io/components/web/catalog/dialogs>

components/dialog/demo.vue

@@ -1,16 +1,23 @@
 <template>
-  <div class="mdc-demo mdc-demo--container">
+<div class="mdc-demo mdc-demo--container">
 
-    <mdc-dialog ref="dialog" title="Dialog" accept="Accept" cancel="Decline"
-      @validate="$event.accept()"
-    >
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </mdc-dialog>
+  <mdc-dialog v-model="open" title="Dialog" accept="Accept" cancel="Decline" @validate="$event.accept(false)">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+    ea commodo consequat.
+  </mdc-dialog>
 
-    <mdc-button raised @click="$refs.dialog.show()">Show Dialog</mdc-button>
+  <mdc-button raised @click="open=!open">Show Dialog</mdc-button>
 
-  </div>
+</div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      open: false,
+    };
+  },
+};
+</script>

components/dialog/mdc-dialog.vue

@@ -39,13 +39,18 @@ import { mdcButton } from '../button';
 
 export default {
   name: 'mdc-dialog',
+  model: {
+    prop: 'open',
+    event: 'change',
+  },
   props: {
     title: { type: String, required: true },
     accept: { type: String, default: 'Ok' },
     acceptDisabled: Boolean,
     cancel: { type: String, default: 'Cancel' },
     accent: Boolean,
     scrollable: Boolean,
+    open: Boolean,
   },
   components: {
     mdcButton: mdcButton,
@@ -95,8 +100,14 @@ export default {
         this.$refs.surface.addEventListener('transitionend', handler),
       deregisterTransitionEndHandler: handler =>
         this.$refs.surface.removeEventListener('transitionend', handler),
-      notifyAccept: () => this.$emit('accept'),
-      notifyCancel: () => this.$emit('cancel'),
+      notifyAccept: () => {
+        this.$emit('change', false);
+        this.$emit('accept');
+      },
+      notifyCancel: () => {
+        this.$emit('change', false);
+        this.$emit('cancel');
+      },
       trapFocusOnSurface: () => this.focusTrap.activate(),
       untrapFocusOnSurface: () => this.focusTrap.deactivate(),
       isDialog: el => this.$refs.surface === el,
@@ -111,14 +122,31 @@ export default {
   beforeDestroy() {
     this.foundation.destroy();
   },
+  watch: { open: 'onOpen_' },
   methods: {
+    onOpen_(value) {
+      if (value) {
+        this.foundation.open();
+      } else {
+        this.foundation.close();
+      }
+    },
     onCancel() {
       this.foundation.cancel(true);
     },
     onAccept() {
       if (this.$listeners['validate']) {
         this.$emit('validate', {
-          accept: (notify = true) => this.foundation.accept(notify),
+          accept: (notify = true) => {
+            // if notify = false, the dialog will close
+            // but the notifyAccept method will not be called
+            // so we need to notify listeners the open state
+            // is changing.
+            if (!notify) {
+              this.$emit('change', false);
+            }
+            this.foundation.accept(notify);
+          },
         });
       } else {
         this.foundation.accept(true);