Create confirm dialog preset

docs/src/pages/components/Dialog.vue

@@ -3,11 +3,9 @@
     <div slot="examples">
       <demo-example label="Default" height="500">
         <md-dialog ref="dialog1">
-          <md-dialog-content>
-            <h2 class="md-title">Use Google's location service?</h2>
+          <md-dialog-title>Use Google's location service?</md-dialog-title>
 
-            <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
-          </md-dialog-content>
+          <md-dialog-content>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</md-dialog-content>
 
           <md-dialog-actions>
             <md-button class="md-primary" @click="closeDialog('dialog1')">Disagree</md-button>
@@ -15,10 +13,20 @@
           </md-dialog-actions>
         </md-dialog>
 
-        <md-dialog md-open-from="#trigger" md-close-to="#trigger" ref="dialog2">
-          <md-dialog-content>
-            <h2 class="md-title">Create new note</h2>
+        <md-dialog-confirm
+          :md-title="confirm.title"
+          :md-content="confirm.content"
+          :md-ok-text="confirm.ok"
+          :md-cancel-text="confirm.cancel"
+          @open="onOpen"
+          @close="onClose"
+          ref="dialog2">
+        </md-dialog-confirm>
 
+        <md-dialog md-open-from="#trigger" md-close-to="#trigger" ref="dialog3">
+          <md-dialog-title>Create new note</md-dialog-title>
+
+          <md-dialog-content>
             <form>
               <md-input-container>
                 <label>Note</label>
@@ -34,7 +42,8 @@
         </md-dialog>
 
         <md-button class="md-primary md-raised" @click="openDialog('dialog1')">Simple</md-button>
-        <md-button class="md-fab md-fab-bottom-right" id="trigger" @click="openDialog('dialog2')">
+        <md-button class="md-primary md-raised" @click="openDialog('dialog2')">Confirm</md-button>
+        <md-button class="md-fab md-fab-bottom-right" id="trigger" @click="openDialog('dialog3')">
           <md-icon>add</md-icon>
         </md-button>
       </demo-example>
@@ -59,12 +68,26 @@
 
 <script>
   export default {
+    data: () => ({
+      confirm: {
+        title: 'Use Google\'s location service?',
+        content: 'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.',
+        ok: 'Agree',
+        cancel: 'Disagree'
+      }
+    }),
     methods: {
       openDialog(ref) {
         this.$refs[ref].open();
       },
       closeDialog(ref) {
         this.$refs[ref].close();
+      },
+      onOpen() {
+        console.log('Opened');
+      },
+      onClose(type) {
+        console.log('Closed', type);
       }
     }
   };

src/components/mdDialog/index.js

@@ -1,12 +1,16 @@
 import mdDialog from './mdDialog.vue';
+import mdDialogTitle from './mdDialogTitle.vue';
 import mdDialogContent from './mdDialogContent.vue';
 import mdDialogActions from './mdDialogActions.vue';
+import mdDialogConfirm from './mdDialogConfirm.vue';
 import mdDialogTheme from './mdDialog.theme';
 
 export default function install(Vue) {
   Vue.component('md-dialog', Vue.extend(mdDialog));
+  Vue.component('md-dialog-title', Vue.extend(mdDialogTitle));
   Vue.component('md-dialog-content', Vue.extend(mdDialogContent));
   Vue.component('md-dialog-actions', Vue.extend(mdDialogActions));
+  Vue.component('md-dialog-confirm', Vue.extend(mdDialogConfirm));
 
   Vue.material.styles.push(mdDialogTheme);
 }

src/components/mdDialog/mdDialog.scss

@@ -55,17 +55,30 @@
     transform-origin: top center;
   }
 
-  .md-title {
-    margin: 0 0 20px;
-  }
-
   p {
     margin: 0;
   }
 }
 
+.md-dialog-title {
+  margin-bottom: 20px;
+  padding: 24px 24px 0;
+}
+
 .md-dialog-content {
-  padding: 24px;
+  padding: 0 24px 24px;
+
+  &:first-child {
+    padding-top: 24px;
+  }
+
+  p:first-child:not(:only-child) {
+    margin-top: 0;
+  }
+
+  p:last-child:not(:only-child) {
+    margin-bottom: 0;
+  }
 }
 
 .md-dialog-body {

src/components/mdDialog/mdDialog.vue

@@ -98,13 +98,21 @@
           this.transitionOff = false;
           this.active = true;
         });
+
+        this.$emit('open');
       },
       close() {
         if (this.rootElement.contains(this.dialogElement)) {
           let cleanElement = () => {
+            let activeRipple = this.dialogElement.querySelector('.md-ripple.md-active');
+
             this.dialogInnerElement.removeEventListener(transitionEndEventName, cleanElement);
             this.$root.$el.removeChild(this.dialogElement);
 
+            if (activeRipple) {
+              activeRipple.classList.remove('md-active');
+            }
+
             this.dialogTransform = '';
           };
 
@@ -115,6 +123,8 @@
             this.active = false;
             this.dialogInnerElement.addEventListener(transitionEndEventName, cleanElement);
           });
+
+          this.$emit('close');
         }
       }
     },

src/components/mdDialog/mdDialogConfirm.vue

@@ -0,0 +1,56 @@
+<template>
+  <md-dialog class="md-dialog-confirm" ref="dialog" @close="fireCloseEvent('cancel')">
+    <md-dialog-title v-if="mdTitle">{{ mdTitle }}</md-dialog-title>
+
+    <md-dialog-content v-if="mdContentHtml" v-html="mdContentHtml"></md-dialog-content>
+    <md-dialog-content v-else>{{ mdContent }}</md-dialog-content>
+
+    <md-dialog-actions>
+      <md-button class="md-primary" @click="close('cancel')">{{ mdCancelText }}</md-button>
+      <md-button class="md-primary" @click="close('ok')">{{ mdOkText }}</md-button>
+    </md-dialog-actions>
+  </md-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      mdTitle: String,
+      mdContent: String,
+      mdContentHtml: String,
+      mdOkText: {
+        type: String,
+        default: 'Ok'
+      },
+      mdCancelText: {
+        type: String,
+        default: 'Cancel'
+      }
+    },
+    data: () => ({
+      debounce: false
+    }),
+    methods: {
+      fireCloseEvent(type) {
+        if (!this.debounce) {
+          this.$emit('close', type);
+        }
+      },
+      open() {
+        this.$emit('open');
+        this.$refs.dialog.open();
+        this.debounce = false;
+      },
+      close(type) {
+        this.fireCloseEvent(type);
+        this.debounce = true;
+        this.$refs.dialog.close();
+      }
+    },
+    mounted() {
+      if (!this.mdContent && !this.mdContentHtml) {
+        throw new Error('Missing md-content or md-content-html attributes');
+      }
+    }
+  };
+</script>

src/components/mdDialog/mdDialogTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-dialog-title md-title">
+    <slot></slot>
+  </div>
+</template>