add customStyles props

README.md

@@ -20,13 +20,13 @@ import Vodal from 'vodal';
 Vue.component(Vodal.name, Vodal);
 
 export default {
-    name: 'app',
+  name: 'app',
 
-    data() {
-        return {
-            show: false
-        }
+  data() {
+    return {
+      show: false
     }
+  }
 }
 ```
 
@@ -46,9 +46,19 @@ measure|string|px|measure of width and height
 show|bool|false|whether to show dialog
 mask|bool|true|whether to show mask
 closeButton|bool|true|whether to show close button
+closeOnEsc|bool|false|whether close dialog when esc pressed
+closeOnClickMask|bool|true|whether close dialog when mask clicked
 animation|string|zoom|animation type
 duration|number|300|animation duration
 className|string|/|className for the container
+customStyles|object|/|custom dialog styles
+customMaskStyles|object|/|custom mask styles
+
+## Event
+Name|
+---|---
+hide|triggers when dialog will hide
+clickMask|triggers when mask clicked
 
 ## Animation Types
 * zoom

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vodal",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A vue modal with animations.",
   "main": "dist/index.js",
   "scripts": {

src/Vodal.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="vodal-fade">
-    <div v-show="show" tabindex="-1" :style="style" :class="['vodal', className]" @keyup.esc="show && $emit('hide')">
-      <div class="vodal-mask" v-if="mask" @click="$emit('hide')" />
+    <div v-show="show" tabindex="-1" :style="style" :class="['vodal', className]" @keyup.esc="onEsc">
+      <div class="vodal-mask" v-if="mask" @click="onClickMask" :style="customMaskStyles" />
       <transition :name="`vodal-${animation}`">
         <div class="vodal-dialog" v-show="show" :style="dialogStyle">
           <span class="vodal-close" v-if="closeButton" @click="$emit('hide')" />
@@ -49,9 +49,25 @@ export default {
       type: Boolean,
       default: true
     },
+    closeOnEsc: {
+      type: Boolean,
+      default: false
+    },
+    closeOnClickMask: {
+      type: Boolean,
+      default: false
+    },
     className: {
       type: String,
       default: ''
+    },
+    customStyles: {
+      type: Object,
+      default: () => ({})
+    },
+    customMaskStyles: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -65,16 +81,28 @@ export default {
       return {
         width: this.width + this.measure,
         height: this.height + this.measure,
-        animationDuration: `${this.duration}ms`
+        animationDuration: `${this.duration}ms`,
+        ...this.customStyles
       }
     }
   },
 
   watch: {
-    show(show) {
-      show && this.$nextTick(() => {
+    show(isShow) {
+      isShow && this.$nextTick(() => {
         this.$el.focus();
       })
+    },
+    onEsc() {
+      if (this.show && this.closeOnEsc) {
+        this.$emit('hide');
+      }
+    },
+    onClickMask() {
+      this.$emit('clickMask');
+      if (this.closeOnClickMask) {
+        this.$emit('hide');
+      }
     }
   }
 }