feat(dialog): Add validation functionality for cancel event

Copies the validation for accept button clicks and applies it to cancel. Useful to prevent the
dialog from closing when using the dialog for more complex actions.

Author: John-Goff

components/dialog/README.md

@@ -42,16 +42,18 @@ var vm = new Vue({
 
 ### 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.
+| 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  | emitted before the dialog is accepted _(\*)_            |
+| `@validateCancel` | cancel  | emitted before the dialog is cancelled _(\*)_           |
+
+> Note that if you listen to the @validate or @validateCancel events, then You must call
+> the accept or cancel argument to finally close the box. Use `accept(false)` to
+> prevent emitting the `accept` event and just close, and `cancel(false)` to prevent emitting
+> the `cancel` event.
 
 ### Custom validation logic
 
@@ -87,6 +89,29 @@ export default {
 };
 ```
 
+You can use `@validateCancel` to trigger validation logic for the cancel event, as follows:
+
+```html
+<mdc-dialog ref="dialog" title="Dialog" accept="Accept" cancel="Decline"
+  @validateCancel="onValidateCancel"
+>Lorem ipsum dolor sit amet</mdc-dialog>
+```
+
+```javascript
+export default {
+  methods: {
+    onValidateCancel({ cancel }) {
+      let isValid = false;
+      // custom validation logic here
+      // ..
+      if (isValid) {
+        cancel();
+      }
+    },
+  },
+};
+```
+
 ### Reference
 
 <https://material.io/components/web/catalog/dialogs>

components/dialog/demo.vue

@@ -6,7 +6,8 @@
       title="Dialog" 
       accept="Accept" 
       cancel="Decline" 
-      @validate="$event.accept(false)">
+      @validate="$event.accept(false)"
+      @validateCancel="$event.cancel(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.

components/dialog/mdc-dialog.vue

@@ -151,7 +151,22 @@ export default {
       }
     },
     onCancel() {
-      this.foundation.cancel(true)
+      if (this.$listeners['validateCancel']) {
+        this.$emit('validateCancel', {
+          cancel: (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.cancel(notify)
+          }
+        })
+      } else {
+        this.foundation.cancel(true)
+      }
     },
     onAccept() {
       if (this.$listeners['validate']) {