From dcf3291623d9fe54bcbf0ca48c0ed35865b8871a Mon Sep 17 00:00:00 2001
From: euvl <yev.vlasenko@gmail.com>
Date: Tue, 20 Jun 2017 03:39:15 +0100
Subject: [PATCH] Added putputs for client and server

---
 build/webpack.base.config.js   |  41 ++
 build/webpack.client.config.js |  10 +
 build/webpack.server.config.js |  11 +
 demo/webpack.config.js         |   2 +-
 dist/client.index.js           |   1 +
 dist/index.js                  | 993 ---------------------------------
 dist/ssr.index.js              |   1 +
 package.json                   |  15 +-
 webpack.config.js              |  60 --
 9 files changed, 74 insertions(+), 1060 deletions(-)
 create mode 100644 build/webpack.base.config.js
 create mode 100644 build/webpack.client.config.js
 create mode 100644 build/webpack.server.config.js
 create mode 100644 dist/client.index.js
 delete mode 100644 dist/index.js
 create mode 100644 dist/ssr.index.js
 delete mode 100644 webpack.config.js

diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js
new file mode 100644
index 0000000..6fdc4b9
--- /dev/null
+++ b/build/webpack.base.config.js
@@ -0,0 +1,41 @@
+const path = require('path')
+const webpack = require('webpack')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+//  "build:client": "cross-env NODE_ENV=production webpack --config ./build/webpack.client.config.js --progress --hide-modules",
+
+module.exports = {
+  entry: path.resolve(__dirname, '../src/index.js'),
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: 'index.js',
+    library:'VueJsModal',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  externals: {
+    vue: 'vue'
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devtool: '#source-map',
+  plugins: [
+    new UglifyJSPlugin()
+  ]
+}
diff --git a/build/webpack.client.config.js b/build/webpack.client.config.js
new file mode 100644
index 0000000..a4f0580
--- /dev/null
+++ b/build/webpack.client.config.js
@@ -0,0 +1,10 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+module.exports = merge(base, {
+  output: {
+    filename: 'client.index.js'
+  }
+})
diff --git a/build/webpack.server.config.js b/build/webpack.server.config.js
new file mode 100644
index 0000000..c1b256e
--- /dev/null
+++ b/build/webpack.server.config.js
@@ -0,0 +1,11 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+module.exports = merge(base, {
+  target: 'node',
+  output: {
+    filename: 'ssr.index.js'
+  }
+})
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 5cb1efb..9237e73 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -37,7 +37,7 @@ module.exports = {
   resolve: {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-		  'plugin': path.resolve(__dirname, "../dist/index.js")
+		  'plugin': path.resolve(__dirname, "../dist/client.index.js")
     }
   },
   devServer: {
diff --git a/dist/client.index.js b/dist/client.index.js
new file mode 100644
index 0000000..3c85f8f
--- /dev/null
+++ b/dist/client.index.js
@@ -0,0 +1 @@
+module.exports=function(e){function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/dist/",n(n.s=0)}([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t(5),o=function(e){return e&&e.__esModule?e:{default:e}}(i),a={install:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.hasOwnProperty("event")||(this.event=new e);var n={show:function(e,n){a.event.$emit("toggle",e,!0,n)},hide:function(e,n){a.event.$emit("toggle",e,!1,n)},toggle:function(e,n){a.event.$emit("toggle",e,void 0,n)}};return Object.defineProperty(e.prototype,"$modal",{get:function(){return n}}),e.component("modal",o.default),null}};n.default=a},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});n.inRange=function(e,n,t){return t<e?e:t>n?n:t}},function(e,n){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],n=0;n<this.length;n++){var t=this[n];t[2]?e.push("@media "+t[2]+"{"+t[1]+"}"):e.push(t[1])}return e.join("")},e.i=function(n,t){"string"==typeof n&&(n=[[null,n,""]]);for(var i={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(i[a]=!0)}for(o=0;o<n.length;o++){var s=n[o];"number"==typeof s[0]&&i[s[0]]||(t&&!s[2]?s[2]=t:t&&(s[2]="("+s[2]+") and ("+t+")"),e.push(s))}},e}},function(e,n){e.exports=function(e,n,t,i){var o,a=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(o=e,a=e.default);var r="function"==typeof a?a.options:a;if(n&&(r.render=n.render,r.staticRenderFns=n.staticRenderFns),t&&(r._scopeId=t),i){var l=r.computed||(r.computed={});Object.keys(i).forEach(function(e){var n=i[e];l[e]=function(){return n}})}return{esModule:o,exports:a,options:r}}},function(e,n,t){function i(e){for(var n=0;n<e.length;n++){var t=e[n],i=u[t.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](t.parts[o]);for(;o<t.parts.length;o++)i.parts.push(a(t.parts[o]));i.parts.length>t.parts.length&&(i.parts.length=t.parts.length)}else{for(var s=[],o=0;o<t.parts.length;o++)s.push(a(t.parts[o]));u[t.id]={id:t.id,refs:1,parts:s}}}}function o(){var e=document.createElement("style");return e.type="text/css",h.appendChild(e),e}function a(e){var n,t,i=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(i){if(m)return f;i.parentNode.removeChild(i)}if(p){var a=c++;i=v||(v=o()),n=s.bind(null,i,a,!1),t=s.bind(null,i,a,!0)}else i=o(),n=r.bind(null,i),t=function(){i.parentNode.removeChild(i)};return n(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;n(e=i)}else t()}}function s(e,n,t,i){var o=t?"":i.css;if(e.styleSheet)e.styleSheet.cssText=A(n,o);else{var a=document.createTextNode(o),s=e.childNodes;s[n]&&e.removeChild(s[n]),s.length?e.insertBefore(a,s[n]):e.appendChild(a)}}function r(e,n){var t=n.css,i=n.media,o=n.sourceMap;if(i&&e.setAttribute("media",i),o&&(t+="\n/*# sourceURL="+o.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var d=t(15),u={},h=l&&(document.head||document.getElementsByTagName("head")[0]),v=null,c=0,m=!1,f=function(){},p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,n,t){m=t;var o=d(e,n);return i(o),function(n){for(var t=[],a=0;a<o.length;a++){var s=o[a],r=u[s.id];r.refs--,t.push(r)}n?(o=d(e,n),i(o)):o=[];for(var a=0;a<t.length;a++){var r=t[a];if(0===r.refs){for(var l=0;l<r.parts.length;l++)r.parts[l]();delete u[r.id]}}}};var A=function(){var e=[];return function(n,t){return e[n]=t,e.filter(Boolean).join("\n")}}()},function(e,n,t){t(13);var i=t(3)(t(6),t(11),null,null);i.options.__file="/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue",i.esModule&&Object.keys(i.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),e.exports=i.exports},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(16),a=i(o),s=t(0),r=i(s),l=t(10),d=i(l),u=t(1);n.default={name:"VueJsModal",props:{name:{required:!0,type:String},delay:{type:Number,default:0},resizable:{type:Boolean,default:!1},adaptive:{type:Boolean,default:!1},draggable:{type:[Boolean,String],default:!1},transition:{type:String},classes:{type:[String,Array],default:"v--modal"},minWidth:{type:Number,default:0,validator:function(e){return e>=0}},minHeight:{type:Number,default:0,validator:function(e){return e>=0}},adaptiveMaxWidth:{type:Number,default:1,validator:function(e){return e>0&&e<=1}},adaptiveMaxHeight:{type:Number,default:1,validator:function(e){return e>0&&e<=1}},width:{type:Number,default:600,validator:function(e){return e>=0}},height:{type:[Number,String],default:300,validator:function(e){return"string"==typeof e?"auto"===e:"number"==typeof e?e>=0:void 0}},pivotX:{type:Number,default:.5,validator:function(e){return e>=0&&e<=1}},pivotY:{type:Number,default:.5,validator:function(e){return e>=0&&e<=1}}},components:{Resizer:d.default},data:function(){return{visible:!1,visibility:{modal:!1,overlay:!1},shift:{left:0,top:0},modal:{width:this.width,height:this.height},window:{width:0,height:0},draggableElement:!1}},watch:{visible:function(e){var n=this;e?(this.visibility.overlay=!0,this.adaptSize(),setTimeout(function(){n.visibility.modal=!0,n.$nextTick(function(){n.addDraggableListeners()})},this.delay)):(this.visibility.modal=!1,setTimeout(function(){n.visibility.overlay=!1,n.$nextTick(function(){n.removeDraggableListeners()})},this.delay))}},beforeMount:function(){var e=this;r.default.event.$on("toggle",function(n,t,i){n===e.name&&(void 0===t&&(t=!e.visible),e.toggle(t,i))}),window.addEventListener("resize",this.onWindowResize),this.onWindowResize()},beforeDestroy:function(){window.removeEventListener("resize",this.onWindowResize)},computed:{position:function(){var e=this.window,n=this.modal,t=this.shift,i=e.width-n.width,o=e.height-n.height,a=t.left+this.pivotX*(e.width-n.width),s=t.top+this.pivotY*(e.height-n.height);return{left:(0,u.inRange)(0,i,a),top:(0,u.inRange)(0,o,s)}},modalClass:function(){return["v--modal-box",this.classes]},modalStyle:function(){return{top:this.position.top+"px",left:this.position.left+"px",width:this.modal.width+"px",height:this.modal.height+"px"}}},methods:{onWindowResize:function(){this.window.width=window.innerWidth,this.window.height=window.innerHeight,this.adaptSize()},genEventObject:function(e){var n={name:this.name,timestamp:Date.now(),canceled:!1,ref:this.$refs.modal,stop:function(){this.canceled=!0}};return a.default.util.extend(n,e||{})},adaptSize:function(){this.adaptive&&(this.modal.width=(0,u.inRange)(0,this.window.width*this.maxAdaptiveWidth,this.modal.width),this.modal.height=(0,u.inRange)(0,this.window.height*this.maxAdaptiveWidth,this.modal.height))},resize:function(e){this.modal.width=e.size.width,this.modal.height=e.size.height;var n=this.modal.size,t=this.genEventObject({size:n});this.$emit("resize",t)},toggle:function(e,n){var t=this.visible?"before-close":"before-open",i=this.visible?"closed":"opened",o=!1,a=function(){o=!0},s=this.genEventObject({stop:a,state:e,params:n});if(this.$emit(t,s),!o){var r=this.genEventObject({state:e,params:n});this.visible=e,this.$emit(i,r)}},emitCancelableEvent:function(e){this.genEventObject(e)},getDraggableElement:function(){var e="string"!=typeof this.draggable?".v--modal-box":this.draggable;if(e){var n=this.$refs.overlay.querySelector(e);if(n)return n}},addDraggableListeners:function(){var e=this;if(this.draggable){var n=this.getDraggableElement();if(n){var t=0,i=0,o=0,a=0,s=function(e){return e.touches&&e.touches.length>0?e.touches[0]:e},r=function(n){var r=s(n),u=r.clientX,h=r.clientY;document.addEventListener("mousemove",l),document.addEventListener("mouseup",d),document.addEventListener("touchmove",l),document.addEventListener("touchend",d),t=u,i=h,o=e.shift.left,a=e.shift.top,n.preventDefault()},l=function(n){var r=s(n),l=r.clientX,d=r.clientY;e.shift.left=o+l-t,e.shift.top=a+d-i,n.preventDefault()},d=function e(n){document.removeEventListener("mousemove",l),document.removeEventListener("mouseup",e),document.removeEventListener("touchmove",l),document.removeEventListener("touchend",e),n.preventDefault()};n.addEventListener("mousedown",r),n.addEventListener("touchstart",r)}}},removeDraggableListeners:function(){}}}},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t(1);n.default={name:"VueJsModalResizer",props:{minHeight:{type:Number,default:0},minWidth:{type:Number,default:0}},data:function(){return{clicked:!1,size:{}}},mounted:function(){this.$el.addEventListener("mousedown",this.start,!1)},computed:{className:function(){return{"vue-modal-resizer":!0,clicked:this.clicked}}},methods:{start:function(e){this.clicked=!0,window.addEventListener("mousemove",this.mousemove,!1),window.addEventListener("mouseup",this.stop,!1),e.stopPropagation(),e.preventDefault()},stop:function(){this.clicked=!1,window.removeEventListener("mousemove",this.mousemove,!1),window.removeEventListener("mouseup",this.stop,!1),this.$emit("resize-stop",{element:this.$el.parentElement,size:this.size})},mousemove:function(e){this.resize(e)},resize:function(e){var n=this.$el.parentElement;if(n){var t=e.clientX-n.offsetLeft,o=e.clientY-n.offsetTop;t=(0,i.inRange)(this.minWidth,window.innerWidth,t),o=(0,i.inRange)(this.minHeight,window.innerHeight,o),this.size={width:t,height:o},n.style.width=t+"px",n.style.height=o+"px",this.$emit("resize",{element:n,size:this.size})}}}}},function(e,n,t){n=e.exports=t(2)(),n.push([e.i,"\n.v--modal-overlay {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  background-color: white;\n}\n.v--modal {\n  background: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n","",{version:3,sources:["/./src/Modal.vue?0a9916d5"],names:[],mappings:";AAsXA;EACA,gBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,wBAAA;CACA;AAEA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kDAAA;EACA,WAAA;CACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;EACA,6BAAA;CACA",file:"Modal.vue",sourcesContent:["<template>\n  <transition name=\"overlay-fade\">\n    <div v-if=\"visibility.overlay\"\n         ref=\"overlay\"\n         class=\"v--modal-overlay\"\n         :aria-expanded=\"visible.toString()\"\n         :data-modal=\"name\"\n         @mousedown.stop=\"toggle(false)\">\n      <div class=\"v--modal-top-right\">\n        <slot name=\"top-right\"/>\n      </div>\n      <transition :name=\"transition\">\n        <div v-if=\"visibility.modal\"\n             ref=\"modal\"\n             :class=\"modalClass\"\n             :style=\"modalStyle\"\n             @mousedown.stop>\n          <slot/>\n          <resizer v-if=\"resizable\"\n                   :min-width=\"minWidth\"\n                   :min-height=\"minHeight\"\n                   @resize=\"resize\"/>\n        </div>\n      </transition>\n    </div>\n  </transition>\n</template>\n<script>\n  import Vue         from 'vue'\n  import Modal       from './index'\n  import Resizer     from './Resizer.vue'\n  import { inRange } from './util'\n\n  export default {\n    name: 'VueJsModal',\n    props: {\n      name: {\n        required: true,\n        type: String\n      },\n      delay: {\n        type: Number,\n        default: 0,\n      },\n      resizable: {\n        type: Boolean,\n        default: false\n      },\n      adaptive: {\n        type: Boolean,\n        default: false\n      },\n      draggable: {\n        type: [Boolean, String],\n        default: false\n      },\n      transition: {\n        type: String\n      },\n      classes: {\n        type: [String, Array],\n        default: 'v--modal',\n      },\n      minWidth: {\n        type: Number,\n        default: 0,\n        validator (value) {\n          return value >= 0\n        }\n      },\n      minHeight: {\n        type: Number,\n        default: 0,\n        validator (value) {\n          return value >= 0\n        }\n      },\n      adaptiveMaxWidth: {\n        type: Number,\n        default: 1,\n        validator (value) {\n          return value > 0 && value <= 1\n        }\n      },\n      adaptiveMaxHeight: {\n        type: Number,\n        default: 1,\n        validator (value) {\n          return value > 0 && value <= 1\n        }\n      },\n      width: {\n        type: Number,\n        default: 600,\n        validator (value) {\n          return value >= 0\n        }\n      },\n      height: {\n        type: [Number, String],\n        default: 300,\n        validator (value) {\n          if (typeof value === 'string') {\n            return value === 'auto'\n          }\n\n          if (typeof value === 'number') {\n            return value >= 0\n          }\n        }\n      },\n      pivotX: {\n        type: Number,\n        default: 0.5,\n        validator (value) {\n          return value >= 0 && value <= 1\n        }\n      },\n      pivotY: {\n        type: Number,\n        default: 0.5,\n        validator (value) {\n          return value >= 0 && value <= 1\n        }\n      }\n    },\n    components: {\n      Resizer\n    },\n    data () {\n      return {\n        visible: false,\n\n        visibility: {\n          modal: false,\n          overlay: false\n        },\n\n        shift: {\n          left: 0,\n          top: 0\n        },\n\n        modal: {\n          width: this.width,\n          height: this.height\n        },\n\n        window: {\n          width: 0,\n          height: 0\n        },\n\n        draggableElement: false\n      };\n    },\n    watch: {\n      visible (value) {\n        if (value) {\n          this.visibility.overlay = true\n          this.adaptSize()\n\n          setTimeout(() => {\n            this.visibility.modal = true\n            this.$nextTick(() => {\n              this.addDraggableListeners()\n            })\n          }, this.delay)\n        } else {\n          this.visibility.modal = false\n\n          setTimeout(() => {\n            this.visibility.overlay = false\n            this.$nextTick(() => {\n              this.removeDraggableListeners()\n            })\n          }, this.delay)\n        }\n      }\n    },\n    beforeMount () {\n      Modal.event.$on('toggle', (name, state, params) => {\n        if (name === this.name) {\n          if (typeof state === 'undefined') {\n            state = !this.visible\n          }\n\n          this.toggle(state, params)\n        }\n      });\n\n      window.addEventListener('resize', this.onWindowResize)\n      this.onWindowResize()\n    },\n    beforeDestroy () {\n      window.removeEventListener('resize', this.onWindowResize)\n    },\n    computed: {\n      position () {\n        const { window, modal, shift } = this\n        const maxLeft = window.width - modal.width\n        const maxTop = window.height - modal.height\n\n        const left = shift.left + this.pivotX * (window.width - modal.width)\n        const top = shift.top + this.pivotY * (window.height - modal.height)\n\n        return {\n          left: inRange(0, maxLeft, left),\n          top: inRange(0, maxTop, top)\n        }\n      },\n\n      modalClass () {\n        return ['v--modal-box', this.classes]\n      },\n\n      modalStyle () {\n        return {\n          top: this.position.top + 'px',\n          left: this.position.left + 'px',\n          width: this.modal.width + 'px',\n          height: this.modal.height + 'px'\n        }\n      }\n    },\n    methods: {\n      onWindowResize () {\n        this.window.width = window.innerWidth\n        this.window.height = window.innerHeight\n        this.adaptSize()\n      },\n\n      genEventObject (params) {\n        //todo: clean this up (change to ...)\n        var data = {\n          name: this.name,\n          timestamp: Date.now(),\n          canceled: false,\n          ref: this.$refs.modal,\n          stop: function() {\n            this.canceled = true\n          }\n        }\n\n        return Vue.util.extend(data, params || {});\n      },\n\n      adaptSize () {\n        if (this.adaptive) {\n          this.modal.width = inRange(\n            0,\n            this.window.width * this.maxAdaptiveWidth,\n            this.modal.width)\n          this.modal.height = inRange(\n            0,\n            this.window.height * this.maxAdaptiveWidth,\n            this.modal.height)\n        }\n      },\n\n      resize (event) {\n        this.modal.width = event.size.width\n        this.modal.height = event.size.height\n\n        const { size } = this.modal\n        const resizeEvent = this.genEventObject({ size });\n\n        this.$emit('resize', resizeEvent)\n      },\n\n      toggle (state, params) {\n        const beforeEventName = this.visible ? 'before-close' : 'before-open'\n        const afterEventName = this.visible ? 'closed' : 'opened'\n\n        let stopEventExecution = false\n\n        const stop = () => { stopEventExecution = true }\n        const beforeEvent = this.genEventObject({ stop, state, params })\n\n        this.$emit(beforeEventName, beforeEvent)\n\n        if (!stopEventExecution) {\n          const afterEvent = this.genEventObject({ state, params })\n\n          this.visible = state\n          this.$emit(afterEventName, afterEvent)\n        }\n      },\n\n      emitCancelableEvent (data) {\n        let stopEventExecution = false\n        let stop = () => { stopEventExecution = true }\n        let event = this.genEventObject(data)\n      },\n\n      getDraggableElement () {\n        var selector = typeof this.draggable !== 'string'\n          ? '.v--modal-box'\n          : this.draggable\n\n        if (selector) {\n          var handler = this.$refs.overlay.querySelector(selector)\n          if (handler) {\n            return handler\n          }\n        }\n      },\n\n      addDraggableListeners () {\n        if (!this.draggable) {\n          return;\n        }\n\n        let dragger = this.getDraggableElement()\n\n        if (dragger) {\n          let startX = 0\n          let startY = 0\n          let cachedShiftX = 0\n          let cachedShiftY = 0\n\n          let getPosition = (event) => {\n              return event.touches && event.touches.length > 0\n                ? event.touches[0]\n                : event\n          }\n\n          let mousedown = (event) => {\n            let { clientX, clientY } = getPosition(event)\n\n            document.addEventListener('mousemove', mousemove)\n            document.addEventListener('mouseup', mouseup)\n\n            document.addEventListener('touchmove', mousemove)\n            document.addEventListener('touchend', mouseup)\n\n            startX = clientX\n            startY = clientY\n            cachedShiftX = this.shift.left\n            cachedShiftY = this.shift.top\n\n            event.preventDefault()\n          }\n\n          let mousemove = (event) => {\n            let { clientX, clientY } = getPosition(event)\n\n            this.shift.left = cachedShiftX + clientX - startX\n            this.shift.top = cachedShiftY + clientY - startY\n            event.preventDefault()\n          }\n\n          let mouseup = (event) => {\n            document.removeEventListener('mousemove', mousemove)\n            document.removeEventListener('mouseup', mouseup)\n\n            document.removeEventListener('touchmove', mousemove)\n            document.removeEventListener('touchend', mouseup)\n\n            event.preventDefault()\n          }\n\n          dragger.addEventListener('mousedown', mousedown)\n          dragger.addEventListener('touchstart', mousedown)\n        }\n      },\n\n      removeDraggableListeners () {\n      //  console.log('removing draggable handlers')\n      }\n    }\n  };\n<\/script>\n<style>\n  .v--modal-overlay {\n    position: fixed;\n    left: 0;\n    top: 0;\n    width: 100vw;\n    height: 100vh;\n    background: rgba(0, 0, 0, 0.2);\n    z-index: 999;\n    opacity: 1;\n  }\n\n  .v--modal-overlay .v--modal-box {\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    background-color: white;\n  }\n\n  .v--modal {\n    background: white;\n    text-align: left;\n    border-radius: 3px;\n    box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n    padding: 0;\n  }\n\n  .v--modal.v--modal-fullscreen {\n    width: 100vw;\n    height: 100vh;\n    margin: 0;\n    left: 0;\n    top: 0;\n  }\n\n  .v--modal-top-right {\n    display: block;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  .overlay-fade-enter-active, .overlay-fade-leave-active {\n    transition: all 0.2s;\n  }\n\n  .overlay-fade-enter, .overlay-fade-leave-active {\n    opacity: 0;\n  }\n\n  .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n    transition: all 0.4s;\n  }\n\n  .nice-modal-fade-enter, .nice-modal-fade-leave-active {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n</style>\n"],sourceRoot:"webpack://"}])},function(e,n,t){n=e.exports=t(2)(),n.push([e.i,"\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369BE9;\n}\n","",{version:3,sources:["/./src/Resizer.vue?db4cc428"],names:[],mappings:";AA+EA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,wBAAA;EACA,kBAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,wBAAA;EACA,QAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,+BAAA;EACA,oCAAA;CACA;AAEA;EACA,kCAAA;CACA",file:"Resizer.vue",sourcesContent:["<template>\n  <div :class=\"className\"></div>\n</template>\n<script>\nimport { inRange } from './util'\n\nexport default {\n  name: 'VueJsModalResizer',\n  props: {\n    minHeight: {\n      type: Number,\n      default: 0\n    },\n    minWidth: {\n      type: Number,\n      default: 0\n    }},\n  data() {\n    return {\n      clicked: false,\n      size: {}\n    }\n  },\n  mounted() {\n    this.$el.addEventListener('mousedown', this.start, false)\n  },\n  computed: {\n    className () {\n      return {'vue-modal-resizer': true, 'clicked': this.clicked}\n    }\n  },\n  methods: {\n    start(event) {\n      this.clicked = true\n\n      window.addEventListener('mousemove', this.mousemove, false)\n      window.addEventListener('mouseup', this.stop, false)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    stop() {\n      this.clicked = false\n\n      window.removeEventListener('mousemove', this.mousemove, false)\n      window.removeEventListener('mouseup', this.stop, false)\n\n      this.$emit('resize-stop', {\n        element: this.$el.parentElement,\n        size: this.size\n      });\n    },\n    mousemove(event) {\n      this.resize(event)\n    },\n    resize(event) {\n      var el = this.$el.parentElement\n\n      if (el) {\n        var width = event.clientX - el.offsetLeft\n        var height = event.clientY - el.offsetTop\n\n        width = inRange(this.minWidth, window.innerWidth, width)\n        height = inRange(this.minHeight, window.innerHeight, height)\n\n        this.size = {width, height}\n        el.style.width = width + 'px'\n        el.style.height = height + 'px'\n\n        this.$emit('resize', {\n          element: el,\n          size: this.size\n        })\n      }\n    }\n  }\n}\n<\/script>\n<style>\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369BE9;\n}\n</style>\n"],sourceRoot:"webpack://"}])},function(e,n,t){t(14);var i=t(3)(t(7),t(12),null,null);i.options.__file="/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue",i.esModule&&Object.keys(i.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),e.exports=i.exports},function(e,n,t){e.exports={render:function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("transition",{attrs:{name:"overlay-fade"}},[e.visibility.overlay?t("div",{ref:"overlay",staticClass:"v--modal-overlay",attrs:{"aria-expanded":e.visible.toString(),"data-modal":e.name},on:{mousedown:function(n){n.stopPropagation(),e.toggle(!1)}}},[t("div",{staticClass:"v--modal-top-right"},[e._t("top-right")],2),e._v(" "),t("transition",{attrs:{name:e.transition}},[e.visibility.modal?t("div",{ref:"modal",class:e.modalClass,style:e.modalStyle,on:{mousedown:function(e){e.stopPropagation()}}},[e._t("default"),e._v(" "),e.resizable?t("resizer",{attrs:{"min-width":e.minWidth,"min-height":e.minHeight},on:{resize:e.resize}}):e._e()],2):e._e()])],1):e._e()])},staticRenderFns:[]},e.exports.render._withStripped=!0},function(e,n,t){e.exports={render:function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{class:e.className})},staticRenderFns:[]},e.exports.render._withStripped=!0},function(e,n,t){var i=t(8);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);t(4)("0ba9730a",i,!1)},function(e,n,t){var i=t(9);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);t(4)("43d3f0d1",i,!1)},function(e,n){e.exports=function(e,n){for(var t=[],i={},o=0;o<n.length;o++){var a=n[o],s=a[0],r=a[1],l=a[2],d=a[3],u={id:e+":"+o,css:r,media:l,sourceMap:d};i[s]?i[s].parts.push(u):t.push(i[s]={id:s,parts:[u]})}return t}},function(e,n){e.exports=require("vue")}]);
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
deleted file mode 100644
index ed06fda..0000000
--- a/dist/index.js
+++ /dev/null
@@ -1,993 +0,0 @@
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("vue"));
-	else if(typeof define === 'function' && define.amd)
-		define(["vue"], factory);
-	else if(typeof exports === 'object')
-		exports["VueJsModal"] = factory(require("vue"));
-	else
-		root["VueJsModal"] = factory(root["vue"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_16__) {
-return /******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// identity function for calling harmony imports with the correct context
-/******/ 	__webpack_require__.i = function(value) { return value; };
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "/dist/";
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Modal = __webpack_require__(5);
-
-var _Modal2 = _interopRequireDefault(_Modal);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Plugin = {
-  install: function install(Vue) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    if (!this.hasOwnProperty("event")) {
-      this.event = new Vue();
-    }
-
-    var $modal = {
-      show: function show(name, params) {
-        Plugin.event.$emit('toggle', name, true, params);
-      },
-      hide: function hide(name, params) {
-        Plugin.event.$emit('toggle', name, false, params);
-      },
-      toggle: function toggle(name, params) {
-        Plugin.event.$emit('toggle', name, undefined, params);
-      }
-    };
-
-    Object.defineProperty(Vue.prototype, '$modal', {
-      get: function get() {
-        return $modal;
-      }
-    });
-
-    Vue.component('modal', _Modal2.default);
-    return null;
-  }
-};
-
-exports.default = Plugin;
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var inRange = exports.inRange = function inRange(from, to, value) {
-  if (value < from) {
-    return from;
-  }
-
-  if (value > to) {
-    return to;
-  }
-
-  return value;
-};
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-/*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Tobias Koppers @sokra
-*/
-// css base code, injected by the css-loader
-module.exports = function() {
-	var list = [];
-
-	// return the list of modules as css string
-	list.toString = function toString() {
-		var result = [];
-		for(var i = 0; i < this.length; i++) {
-			var item = this[i];
-			if(item[2]) {
-				result.push("@media " + item[2] + "{" + item[1] + "}");
-			} else {
-				result.push(item[1]);
-			}
-		}
-		return result.join("");
-	};
-
-	// import a list of modules into the list
-	list.i = function(modules, mediaQuery) {
-		if(typeof modules === "string")
-			modules = [[null, modules, ""]];
-		var alreadyImportedModules = {};
-		for(var i = 0; i < this.length; i++) {
-			var id = this[i][0];
-			if(typeof id === "number")
-				alreadyImportedModules[id] = true;
-		}
-		for(i = 0; i < modules.length; i++) {
-			var item = modules[i];
-			// skip already imported module
-			// this implementation is not 100% perfect for weird media query combinations
-			//  when a module is imported multiple times with different media queries.
-			//  I hope this will never occur (Hey this way we have smaller bundles)
-			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
-				if(mediaQuery && !item[2]) {
-					item[2] = mediaQuery;
-				} else if(mediaQuery) {
-					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
-				}
-				list.push(item);
-			}
-		}
-	};
-	return list;
-};
-
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = function normalizeComponent (
-  rawScriptExports,
-  compiledTemplate,
-  scopeId,
-  cssModules
-) {
-  var esModule
-  var scriptExports = rawScriptExports = rawScriptExports || {}
-
-  // ES6 modules interop
-  var type = typeof rawScriptExports.default
-  if (type === 'object' || type === 'function') {
-    esModule = rawScriptExports
-    scriptExports = rawScriptExports.default
-  }
-
-  // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
-
-  // render functions
-  if (compiledTemplate) {
-    options.render = compiledTemplate.render
-    options.staticRenderFns = compiledTemplate.staticRenderFns
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = scopeId
-  }
-
-  // inject cssModules
-  if (cssModules) {
-    var computed = options.computed || (options.computed = {})
-    Object.keys(cssModules).forEach(function (key) {
-      var module = cssModules[key]
-      computed[key] = function () { return module }
-    })
-  }
-
-  return {
-    esModule: esModule,
-    exports: scriptExports,
-    options: options
-  }
-}
-
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var listToStyles = __webpack_require__(15)
-
-module.exports = function (parentId, list, isProduction) {
-  if (typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-    var context = __VUE_SSR_CONTEXT__
-    var styles = context._styles
-
-    if (!styles) {
-      styles = context._styles = {}
-      Object.defineProperty(context, 'styles', {
-        enumberable: true,
-        get : function() {
-          return (
-            context._renderedStyles ||
-            (context._renderedStyles = renderStyles(styles))
-          )
-        }
-      })
-    }
-
-    list = listToStyles(parentId, list)
-    if (isProduction) {
-      addStyleProd(styles, list)
-    } else {
-      addStyleDev(styles, list)
-    }
-  }
-}
-
-// In production, render as few style tags as possible.
-// (mostly because IE9 has a limit on number of style tags)
-function addStyleProd (styles, list) {
-  for (var i = 0; i < list.length; i++) {
-    var parts = list[i].parts
-    for (var j = 0; j < parts.length; j++) {
-      var part = parts[j]
-      // group style tags by media types.
-      var id = part.media || 'default'
-      var style = styles[id]
-      if (style) {
-        style.ids.push(part.id)
-        style.css += '\n' + part.css
-      } else {
-        styles[id] = {
-          ids: [part.id],
-          css: part.css,
-          media: part.media
-        }
-      }
-    }
-  }
-}
-
-// In dev we use individual style tag for each module for hot-reload
-// and source maps.
-function addStyleDev (styles, list) {
-  for (var i = 0; i < list.length; i++) {
-    var parts = list[i].parts
-    for (var j = 0; j < parts.length; j++) {
-      var part = parts[j]
-      styles[part.id] = {
-        ids: [part.id],
-        css: part.css,
-        media: part.media
-      }
-    }
-  }
-}
-
-function renderStyles (styles) {
-  var css = ''
-  for (var key in styles) {
-    var style = styles[key]
-    css += '<style data-vue-ssr-id="' + style.ids.join(' ') + '"' +
-        (style.media ? ( ' media="' + style.media + '"' ) : '') + '>' +
-        style.css + '</style>'
-  }
-  return css
-}
-
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/* styles */
-__webpack_require__(13)
-
-var Component = __webpack_require__(3)(
-  /* script */
-  __webpack_require__(6),
-  /* template */
-  __webpack_require__(11),
-  /* scopeId */
-  null,
-  /* cssModules */
-  null
-)
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _vue = __webpack_require__(16);
-
-var _vue2 = _interopRequireDefault(_vue);
-
-var _index = __webpack_require__(0);
-
-var _index2 = _interopRequireDefault(_index);
-
-var _Resizer = __webpack_require__(10);
-
-var _Resizer2 = _interopRequireDefault(_Resizer);
-
-var _util = __webpack_require__(1);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = {
-  name: 'VueJsModal',
-  props: {
-    name: {
-      required: true,
-      type: String
-    },
-    delay: {
-      type: Number,
-      default: 0
-    },
-    resizable: {
-      type: Boolean,
-      default: false
-    },
-    adaptive: {
-      type: Boolean,
-      default: false
-    },
-    draggable: {
-      type: [Boolean, String],
-      default: false
-    },
-    transition: {
-      type: String
-    },
-    classes: {
-      type: [String, Array],
-      default: 'v--modal'
-    },
-    minWidth: {
-      type: Number,
-      default: 0,
-      validator: function validator(value) {
-        return value >= 0;
-      }
-    },
-    minHeight: {
-      type: Number,
-      default: 0,
-      validator: function validator(value) {
-        return value >= 0;
-      }
-    },
-    adaptiveMaxWidth: {
-      type: Number,
-      default: 1,
-      validator: function validator(value) {
-        return value > 0 && value <= 1;
-      }
-    },
-    adaptiveMaxHeight: {
-      type: Number,
-      default: 1,
-      validator: function validator(value) {
-        return value > 0 && value <= 1;
-      }
-    },
-    width: {
-      type: Number,
-      default: 600,
-      validator: function validator(value) {
-        return value >= 0;
-      }
-    },
-    height: {
-      type: [Number, String],
-      default: 300,
-      validator: function validator(value) {
-        if (typeof value === 'string') {
-          return value === 'auto';
-        }
-
-        if (typeof value === 'number') {
-          return value >= 0;
-        }
-      }
-    },
-    pivotX: {
-      type: Number,
-      default: 0.5,
-      validator: function validator(value) {
-        return value >= 0 && value <= 1;
-      }
-    },
-    pivotY: {
-      type: Number,
-      default: 0.5,
-      validator: function validator(value) {
-        return value >= 0 && value <= 1;
-      }
-    }
-  },
-  components: {
-    Resizer: _Resizer2.default
-  },
-  data: function data() {
-    return {
-      visible: false,
-
-      visibility: {
-        modal: false,
-        overlay: false
-      },
-
-      shift: {
-        left: 0,
-        top: 0
-      },
-
-      modal: {
-        width: this.width,
-        height: this.height
-      },
-
-      window: {
-        width: 0,
-        height: 0
-      },
-
-      draggableElement: false
-    };
-  },
-
-  watch: {
-    visible: function visible(value) {
-      var _this = this;
-
-      if (value) {
-        this.visibility.overlay = true;
-        this.adaptSize();
-
-        setTimeout(function () {
-          _this.visibility.modal = true;
-          _this.$nextTick(function () {
-            _this.addDraggableListeners();
-          });
-        }, this.delay);
-      } else {
-        this.visibility.modal = false;
-
-        setTimeout(function () {
-          _this.visibility.overlay = false;
-          _this.$nextTick(function () {
-            _this.removeDraggableListeners();
-          });
-        }, this.delay);
-      }
-    }
-  },
-  beforeMount: function beforeMount() {
-    var _this2 = this;
-
-    _index2.default.event.$on('toggle', function (name, state, params) {
-      if (name === _this2.name) {
-        if (typeof state === 'undefined') {
-          state = !_this2.visible;
-        }
-
-        _this2.toggle(state, params);
-      }
-    });
-
-    window.addEventListener('resize', this.onWindowResize);
-    this.onWindowResize();
-  },
-  beforeDestroy: function beforeDestroy() {
-    window.removeEventListener('resize', this.onWindowResize);
-  },
-
-  computed: {
-    position: function position() {
-      var window = this.window,
-          modal = this.modal,
-          shift = this.shift;
-
-      var maxLeft = window.width - modal.width;
-      var maxTop = window.height - modal.height;
-
-      var left = shift.left + this.pivotX * (window.width - modal.width);
-      var top = shift.top + this.pivotY * (window.height - modal.height);
-
-      return {
-        left: (0, _util.inRange)(0, maxLeft, left),
-        top: (0, _util.inRange)(0, maxTop, top)
-      };
-    },
-    modalClass: function modalClass() {
-      return ['v--modal-box', this.classes];
-    },
-    modalStyle: function modalStyle() {
-      return {
-        top: this.position.top + 'px',
-        left: this.position.left + 'px',
-        width: this.modal.width + 'px',
-        height: this.modal.height + 'px'
-      };
-    }
-  },
-  methods: {
-    onWindowResize: function onWindowResize() {
-      this.window.width = window.innerWidth;
-      this.window.height = window.innerHeight;
-      this.adaptSize();
-    },
-    genEventObject: function genEventObject(params) {
-      var data = {
-        name: this.name,
-        timestamp: Date.now(),
-        canceled: false,
-        ref: this.$refs.modal,
-        stop: function stop() {
-          this.canceled = true;
-        }
-      };
-
-      return _vue2.default.util.extend(data, params || {});
-    },
-    adaptSize: function adaptSize() {
-      if (this.adaptive) {
-        this.modal.width = (0, _util.inRange)(0, this.window.width * this.maxAdaptiveWidth, this.modal.width);
-        this.modal.height = (0, _util.inRange)(0, this.window.height * this.maxAdaptiveWidth, this.modal.height);
-      }
-    },
-    resize: function resize(event) {
-      this.modal.width = event.size.width;
-      this.modal.height = event.size.height;
-
-      var size = this.modal.size;
-
-      var resizeEvent = this.genEventObject({ size: size });
-
-      this.$emit('resize', resizeEvent);
-    },
-    toggle: function toggle(state, params) {
-      var beforeEventName = this.visible ? 'before-close' : 'before-open';
-      var afterEventName = this.visible ? 'closed' : 'opened';
-
-      var stopEventExecution = false;
-
-      var stop = function stop() {
-        stopEventExecution = true;
-      };
-      var beforeEvent = this.genEventObject({ stop: stop, state: state, params: params });
-
-      this.$emit(beforeEventName, beforeEvent);
-
-      if (!stopEventExecution) {
-        var afterEvent = this.genEventObject({ state: state, params: params });
-
-        this.visible = state;
-        this.$emit(afterEventName, afterEvent);
-      }
-    },
-    emitCancelableEvent: function emitCancelableEvent(data) {
-      var stopEventExecution = false;
-      var stop = function stop() {
-        stopEventExecution = true;
-      };
-      var event = this.genEventObject(data);
-    },
-    getDraggableElement: function getDraggableElement() {
-      var selector = typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable;
-
-      if (selector) {
-        var handler = this.$refs.overlay.querySelector(selector);
-        if (handler) {
-          return handler;
-        }
-      }
-    },
-    addDraggableListeners: function addDraggableListeners() {
-      var _this3 = this;
-
-      if (!this.draggable) {
-        return;
-      }
-
-      var dragger = this.getDraggableElement();
-
-      if (dragger) {
-        var startX = 0;
-        var startY = 0;
-        var cachedShiftX = 0;
-        var cachedShiftY = 0;
-
-        var getPosition = function getPosition(event) {
-          return event.touches && event.touches.length > 0 ? event.touches[0] : event;
-        };
-
-        var mousedown = function mousedown(event) {
-          var _getPosition = getPosition(event),
-              clientX = _getPosition.clientX,
-              clientY = _getPosition.clientY;
-
-          document.addEventListener('mousemove', _mousemove);
-          document.addEventListener('mouseup', _mouseup);
-
-          document.addEventListener('touchmove', _mousemove);
-          document.addEventListener('touchend', _mouseup);
-
-          startX = clientX;
-          startY = clientY;
-          cachedShiftX = _this3.shift.left;
-          cachedShiftY = _this3.shift.top;
-
-          event.preventDefault();
-        };
-
-        var _mousemove = function _mousemove(event) {
-          var _getPosition2 = getPosition(event),
-              clientX = _getPosition2.clientX,
-              clientY = _getPosition2.clientY;
-
-          _this3.shift.left = cachedShiftX + clientX - startX;
-          _this3.shift.top = cachedShiftY + clientY - startY;
-          event.preventDefault();
-        };
-
-        var _mouseup = function _mouseup(event) {
-          document.removeEventListener('mousemove', _mousemove);
-          document.removeEventListener('mouseup', _mouseup);
-
-          document.removeEventListener('touchmove', _mousemove);
-          document.removeEventListener('touchend', _mouseup);
-
-          event.preventDefault();
-        };
-
-        dragger.addEventListener('mousedown', mousedown);
-        dragger.addEventListener('touchstart', mousedown);
-      }
-    },
-    removeDraggableListeners: function removeDraggableListeners() {}
-  }
-};
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _util = __webpack_require__(1);
-
-exports.default = {
-  name: 'VueJsModalResizer',
-  props: {
-    minHeight: {
-      type: Number,
-      default: 0
-    },
-    minWidth: {
-      type: Number,
-      default: 0
-    } },
-  data: function data() {
-    return {
-      clicked: false,
-      size: {}
-    };
-  },
-  mounted: function mounted() {
-    this.$el.addEventListener('mousedown', this.start, false);
-  },
-
-  computed: {
-    className: function className() {
-      return { 'vue-modal-resizer': true, 'clicked': this.clicked };
-    }
-  },
-  methods: {
-    start: function start(event) {
-      this.clicked = true;
-
-      window.addEventListener('mousemove', this.mousemove, false);
-      window.addEventListener('mouseup', this.stop, false);
-
-      event.stopPropagation();
-      event.preventDefault();
-    },
-    stop: function stop() {
-      this.clicked = false;
-
-      window.removeEventListener('mousemove', this.mousemove, false);
-      window.removeEventListener('mouseup', this.stop, false);
-
-      this.$emit('resize-stop', {
-        element: this.$el.parentElement,
-        size: this.size
-      });
-    },
-    mousemove: function mousemove(event) {
-      this.resize(event);
-    },
-    resize: function resize(event) {
-      var el = this.$el.parentElement;
-
-      if (el) {
-        var width = event.clientX - el.offsetLeft;
-        var height = event.clientY - el.offsetTop;
-
-        width = (0, _util.inRange)(this.minWidth, window.innerWidth, width);
-        height = (0, _util.inRange)(this.minHeight, window.innerHeight, height);
-
-        this.size = { width: width, height: height };
-        el.style.width = width + 'px';
-        el.style.height = height + 'px';
-
-        this.$emit('resize', {
-          element: el,
-          size: this.size
-        });
-      }
-    }
-  }
-};
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__(2)();
-// imports
-
-
-// module
-exports.push([module.i, ".v--modal-overlay{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.v--modal-overlay .v--modal-box{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.v--modal{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.v--modal.v--modal-fullscreen{width:100vw;height:100vh;margin:0;left:0;top:0}.v--modal-top-right{display:block;position:absolute;right:0;top:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:all .2s}.overlay-fade-enter,.overlay-fade-leave-active{opacity:0}.nice-modal-fade-enter-active,.nice-modal-fade-leave-active{transition:all .4s}.nice-modal-fade-enter,.nice-modal-fade-leave-active{opacity:0;transform:translateY(-20px)}", ""]);
-
-// exports
-
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__(2)();
-// imports
-
-
-// module
-exports.push([module.i, ".vue-modal-resizer{overflow:hidden;width:12px;height:12px;right:0;bottom:0;z-index:9999999;cursor:se-resize}.vue-modal-resizer,.vue-modal-resizer:after{display:block;position:absolute;background:transparent}.vue-modal-resizer:after{content:\"\";left:0;top:0;width:0;height:0;border-bottom:10px solid #ddd;border-left:10px solid transparent}.vue-modal-resizer.clicked:after{border-bottom:10px solid #369be9}", ""]);
-
-// exports
-
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/* styles */
-__webpack_require__(14)
-
-var Component = __webpack_require__(3)(
-  /* script */
-  __webpack_require__(7),
-  /* template */
-  __webpack_require__(12),
-  /* scopeId */
-  null,
-  /* cssModules */
-  null
-)
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 11 */
-/***/ (function(module, exports) {
-
-module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return _c('transition', {
-    attrs: {
-      "name": "overlay-fade"
-    }
-  }, [(_vm.visibility.overlay) ? _c('div', {
-    ref: "overlay",
-    staticClass: "v--modal-overlay",
-    attrs: {
-      "aria-expanded": _vm.visible.toString(),
-      "data-modal": _vm.name
-    },
-    on: {
-      "mousedown": function($event) {
-        $event.stopPropagation();
-        _vm.toggle(false)
-      }
-    }
-  }, [_c('div', {
-    staticClass: "v--modal-top-right"
-  }, [_vm._t("top-right")], 2), _vm._v(" "), _c('transition', {
-    attrs: {
-      "name": _vm.transition
-    }
-  }, [(_vm.visibility.modal) ? _c('div', {
-    ref: "modal",
-    class: _vm.modalClass,
-    style: (_vm.modalStyle),
-    on: {
-      "mousedown": function($event) {
-        $event.stopPropagation();
-      }
-    }
-  }, [_vm._t("default"), _vm._v(" "), (_vm.resizable) ? _c('resizer', {
-    attrs: {
-      "min-width": _vm.minWidth,
-      "min-height": _vm.minHeight
-    },
-    on: {
-      "resize": _vm.resize
-    }
-  }) : _vm._e()], 2) : _vm._e()])], 1) : _vm._e()])
-},staticRenderFns: []}
-
-/***/ }),
-/* 12 */
-/***/ (function(module, exports) {
-
-module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return _c('div', {
-    class: _vm.className
-  })
-},staticRenderFns: []}
-
-/***/ }),
-/* 13 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(8);
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add CSS to SSR context
-__webpack_require__(4)("628d147b", content, true);
-
-/***/ }),
-/* 14 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(9);
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add CSS to SSR context
-__webpack_require__(4)("7054fa02", content, true);
-
-/***/ }),
-/* 15 */
-/***/ (function(module, exports) {
-
-/**
- * Translates the list format produced by css-loader into something
- * easier to manipulate.
- */
-module.exports = function listToStyles (parentId, list) {
-  var styles = []
-  var newStyles = {}
-  for (var i = 0; i < list.length; i++) {
-    var item = list[i]
-    var id = item[0]
-    var css = item[1]
-    var media = item[2]
-    var sourceMap = item[3]
-    var part = {
-      id: parentId + ':' + i,
-      css: css,
-      media: media,
-      sourceMap: sourceMap
-    }
-    if (!newStyles[id]) {
-      styles.push(newStyles[id] = { id: id, parts: [part] })
-    } else {
-      newStyles[id].parts.push(part)
-    }
-  }
-  return styles
-}
-
-
-/***/ }),
-/* 16 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_16__;
-
-/***/ })
-/******/ ]);
-});
-//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
new file mode 100644
index 0000000..1ee6905
--- /dev/null
+++ b/dist/ssr.index.js
@@ -0,0 +1 @@
+module.exports=function(e){function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/dist/",n(n.s=0)}([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t(5),o=function(e){return e&&e.__esModule?e:{default:e}}(i),s={install:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.hasOwnProperty("event")||(this.event=new e);var n={show:function(e,n){s.event.$emit("toggle",e,!0,n)},hide:function(e,n){s.event.$emit("toggle",e,!1,n)},toggle:function(e,n){s.event.$emit("toggle",e,void 0,n)}};return Object.defineProperty(e.prototype,"$modal",{get:function(){return n}}),e.component("modal",o.default),null}};n.default=s},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});n.inRange=function(e,n,t){return t<e?e:t>n?n:t}},function(e,n){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],n=0;n<this.length;n++){var t=this[n];t[2]?e.push("@media "+t[2]+"{"+t[1]+"}"):e.push(t[1])}return e.join("")},e.i=function(n,t){"string"==typeof n&&(n=[[null,n,""]]);for(var i={},o=0;o<this.length;o++){var s=this[o][0];"number"==typeof s&&(i[s]=!0)}for(o=0;o<n.length;o++){var a=n[o];"number"==typeof a[0]&&i[a[0]]||(t&&!a[2]?a[2]=t:t&&(a[2]="("+a[2]+") and ("+t+")"),e.push(a))}},e}},function(e,n){e.exports=function(e,n,t,i){var o,s=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(o=e,s=e.default);var r="function"==typeof s?s.options:s;if(n&&(r.render=n.render,r.staticRenderFns=n.staticRenderFns),t&&(r._scopeId=t),i){var l=r.computed||(r.computed={});Object.keys(i).forEach(function(e){var n=i[e];l[e]=function(){return n}})}return{esModule:o,exports:s,options:r}}},function(e,n,t){function i(e,n){for(var t=0;t<n.length;t++)for(var i=n[t].parts,o=0;o<i.length;o++){var s=i[o],a=s.media||"default",r=e[a];r?(r.ids.push(s.id),r.css+="\n"+s.css):e[a]={ids:[s.id],css:s.css,media:s.media}}}function o(e,n){for(var t=0;t<n.length;t++)for(var i=n[t].parts,o=0;o<i.length;o++){var s=i[o];e[s.id]={ids:[s.id],css:s.css,media:s.media}}}function s(e){var n="";for(var t in e){var i=e[t];n+='<style data-vue-ssr-id="'+i.ids.join(" ")+'"'+(i.media?' media="'+i.media+'"':"")+">"+i.css+"</style>"}return n}var a=t(15);e.exports=function(e,n,t){if("undefined"!=typeof __VUE_SSR_CONTEXT__){var r=__VUE_SSR_CONTEXT__,l=r._styles;l||(l=r._styles={},Object.defineProperty(r,"styles",{enumberable:!0,get:function(){return r._renderedStyles||(r._renderedStyles=s(l))}})),n=a(e,n),t?i(l,n):o(l,n)}}},function(e,n,t){t(13);var i=t(3)(t(6),t(11),null,null);i.options.__file="/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue",i.esModule&&Object.keys(i.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),e.exports=i.exports},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(16),s=i(o),a=t(0),r=i(a),l=t(10),d=i(l),u=t(1);n.default={name:"VueJsModal",props:{name:{required:!0,type:String},delay:{type:Number,default:0},resizable:{type:Boolean,default:!1},adaptive:{type:Boolean,default:!1},draggable:{type:[Boolean,String],default:!1},transition:{type:String},classes:{type:[String,Array],default:"v--modal"},minWidth:{type:Number,default:0,validator:function(e){return e>=0}},minHeight:{type:Number,default:0,validator:function(e){return e>=0}},adaptiveMaxWidth:{type:Number,default:1,validator:function(e){return e>0&&e<=1}},adaptiveMaxHeight:{type:Number,default:1,validator:function(e){return e>0&&e<=1}},width:{type:Number,default:600,validator:function(e){return e>=0}},height:{type:[Number,String],default:300,validator:function(e){return"string"==typeof e?"auto"===e:"number"==typeof e?e>=0:void 0}},pivotX:{type:Number,default:.5,validator:function(e){return e>=0&&e<=1}},pivotY:{type:Number,default:.5,validator:function(e){return e>=0&&e<=1}}},components:{Resizer:d.default},data:function(){return{visible:!1,visibility:{modal:!1,overlay:!1},shift:{left:0,top:0},modal:{width:this.width,height:this.height},window:{width:0,height:0},draggableElement:!1}},watch:{visible:function(e){var n=this;e?(this.visibility.overlay=!0,this.adaptSize(),setTimeout(function(){n.visibility.modal=!0,n.$nextTick(function(){n.addDraggableListeners()})},this.delay)):(this.visibility.modal=!1,setTimeout(function(){n.visibility.overlay=!1,n.$nextTick(function(){n.removeDraggableListeners()})},this.delay))}},beforeMount:function(){var e=this;r.default.event.$on("toggle",function(n,t,i){n===e.name&&(void 0===t&&(t=!e.visible),e.toggle(t,i))}),window.addEventListener("resize",this.onWindowResize),this.onWindowResize()},beforeDestroy:function(){window.removeEventListener("resize",this.onWindowResize)},computed:{position:function(){var e=this.window,n=this.modal,t=this.shift,i=e.width-n.width,o=e.height-n.height,s=t.left+this.pivotX*(e.width-n.width),a=t.top+this.pivotY*(e.height-n.height);return{left:(0,u.inRange)(0,i,s),top:(0,u.inRange)(0,o,a)}},modalClass:function(){return["v--modal-box",this.classes]},modalStyle:function(){return{top:this.position.top+"px",left:this.position.left+"px",width:this.modal.width+"px",height:this.modal.height+"px"}}},methods:{onWindowResize:function(){this.window.width=window.innerWidth,this.window.height=window.innerHeight,this.adaptSize()},genEventObject:function(e){var n={name:this.name,timestamp:Date.now(),canceled:!1,ref:this.$refs.modal,stop:function(){this.canceled=!0}};return s.default.util.extend(n,e||{})},adaptSize:function(){this.adaptive&&(this.modal.width=(0,u.inRange)(0,this.window.width*this.maxAdaptiveWidth,this.modal.width),this.modal.height=(0,u.inRange)(0,this.window.height*this.maxAdaptiveWidth,this.modal.height))},resize:function(e){this.modal.width=e.size.width,this.modal.height=e.size.height;var n=this.modal.size,t=this.genEventObject({size:n});this.$emit("resize",t)},toggle:function(e,n){var t=this.visible?"before-close":"before-open",i=this.visible?"closed":"opened",o=!1,s=function(){o=!0},a=this.genEventObject({stop:s,state:e,params:n});if(this.$emit(t,a),!o){var r=this.genEventObject({state:e,params:n});this.visible=e,this.$emit(i,r)}},emitCancelableEvent:function(e){this.genEventObject(e)},getDraggableElement:function(){var e="string"!=typeof this.draggable?".v--modal-box":this.draggable;if(e){var n=this.$refs.overlay.querySelector(e);if(n)return n}},addDraggableListeners:function(){var e=this;if(this.draggable){var n=this.getDraggableElement();if(n){var t=0,i=0,o=0,s=0,a=function(e){return e.touches&&e.touches.length>0?e.touches[0]:e},r=function(n){var r=a(n),u=r.clientX,h=r.clientY;document.addEventListener("mousemove",l),document.addEventListener("mouseup",d),document.addEventListener("touchmove",l),document.addEventListener("touchend",d),t=u,i=h,o=e.shift.left,s=e.shift.top,n.preventDefault()},l=function(n){var r=a(n),l=r.clientX,d=r.clientY;e.shift.left=o+l-t,e.shift.top=s+d-i,n.preventDefault()},d=function e(n){document.removeEventListener("mousemove",l),document.removeEventListener("mouseup",e),document.removeEventListener("touchmove",l),document.removeEventListener("touchend",e),n.preventDefault()};n.addEventListener("mousedown",r),n.addEventListener("touchstart",r)}}},removeDraggableListeners:function(){}}}},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t(1);n.default={name:"VueJsModalResizer",props:{minHeight:{type:Number,default:0},minWidth:{type:Number,default:0}},data:function(){return{clicked:!1,size:{}}},mounted:function(){this.$el.addEventListener("mousedown",this.start,!1)},computed:{className:function(){return{"vue-modal-resizer":!0,clicked:this.clicked}}},methods:{start:function(e){this.clicked=!0,window.addEventListener("mousemove",this.mousemove,!1),window.addEventListener("mouseup",this.stop,!1),e.stopPropagation(),e.preventDefault()},stop:function(){this.clicked=!1,window.removeEventListener("mousemove",this.mousemove,!1),window.removeEventListener("mouseup",this.stop,!1),this.$emit("resize-stop",{element:this.$el.parentElement,size:this.size})},mousemove:function(e){this.resize(e)},resize:function(e){var n=this.$el.parentElement;if(n){var t=e.clientX-n.offsetLeft,o=e.clientY-n.offsetTop;t=(0,i.inRange)(this.minWidth,window.innerWidth,t),o=(0,i.inRange)(this.minHeight,window.innerHeight,o),this.size={width:t,height:o},n.style.width=t+"px",n.style.height=o+"px",this.$emit("resize",{element:n,size:this.size})}}}}},function(e,n,t){n=e.exports=t(2)(),n.push([e.i,"\n.v--modal-overlay {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  background-color: white;\n}\n.v--modal {\n  background: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n","",{version:3,sources:["/./src/Modal.vue?0a9916d5"],names:[],mappings:";AAsXA;EACA,gBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,wBAAA;CACA;AAEA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kDAAA;EACA,WAAA;CACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;EACA,6BAAA;CACA",file:"Modal.vue",sourcesContent:["<template>\n  <transition name=\"overlay-fade\">\n    <div v-if=\"visibility.overlay\"\n         ref=\"overlay\"\n         class=\"v--modal-overlay\"\n         :aria-expanded=\"visible.toString()\"\n         :data-modal=\"name\"\n         @mousedown.stop=\"toggle(false)\">\n      <div class=\"v--modal-top-right\">\n        <slot name=\"top-right\"/>\n      </div>\n      <transition :name=\"transition\">\n        <div v-if=\"visibility.modal\"\n             ref=\"modal\"\n             :class=\"modalClass\"\n             :style=\"modalStyle\"\n             @mousedown.stop>\n          <slot/>\n          <resizer v-if=\"resizable\"\n                   :min-width=\"minWidth\"\n                   :min-height=\"minHeight\"\n                   @resize=\"resize\"/>\n        </div>\n      </transition>\n    </div>\n  </transition>\n</template>\n<script>\n  import Vue         from 'vue'\n  import Modal       from './index'\n  import Resizer     from './Resizer.vue'\n  import { inRange } from './util'\n\n  export default {\n    name: 'VueJsModal',\n    props: {\n      name: {\n        required: true,\n        type: String\n      },\n      delay: {\n        type: Number,\n        default: 0,\n      },\n      resizable: {\n        type: Boolean,\n        default: false\n      },\n      adaptive: {\n        type: Boolean,\n        default: false\n      },\n      draggable: {\n        type: [Boolean, String],\n        default: false\n      },\n      transition: {\n        type: String\n      },\n      classes: {\n        type: [String, Array],\n        default: 'v--modal',\n      },\n      minWidth: {\n        type: Number,\n        default: 0,\n        validator (value) {\n          return value >= 0\n        }\n      },\n      minHeight: {\n        type: Number,\n        default: 0,\n        validator (value) {\n          return value >= 0\n        }\n      },\n      adaptiveMaxWidth: {\n        type: Number,\n        default: 1,\n        validator (value) {\n          return value > 0 && value <= 1\n        }\n      },\n      adaptiveMaxHeight: {\n        type: Number,\n        default: 1,\n        validator (value) {\n          return value > 0 && value <= 1\n        }\n      },\n      width: {\n        type: Number,\n        default: 600,\n        validator (value) {\n          return value >= 0\n        }\n      },\n      height: {\n        type: [Number, String],\n        default: 300,\n        validator (value) {\n          if (typeof value === 'string') {\n            return value === 'auto'\n          }\n\n          if (typeof value === 'number') {\n            return value >= 0\n          }\n        }\n      },\n      pivotX: {\n        type: Number,\n        default: 0.5,\n        validator (value) {\n          return value >= 0 && value <= 1\n        }\n      },\n      pivotY: {\n        type: Number,\n        default: 0.5,\n        validator (value) {\n          return value >= 0 && value <= 1\n        }\n      }\n    },\n    components: {\n      Resizer\n    },\n    data () {\n      return {\n        visible: false,\n\n        visibility: {\n          modal: false,\n          overlay: false\n        },\n\n        shift: {\n          left: 0,\n          top: 0\n        },\n\n        modal: {\n          width: this.width,\n          height: this.height\n        },\n\n        window: {\n          width: 0,\n          height: 0\n        },\n\n        draggableElement: false\n      };\n    },\n    watch: {\n      visible (value) {\n        if (value) {\n          this.visibility.overlay = true\n          this.adaptSize()\n\n          setTimeout(() => {\n            this.visibility.modal = true\n            this.$nextTick(() => {\n              this.addDraggableListeners()\n            })\n          }, this.delay)\n        } else {\n          this.visibility.modal = false\n\n          setTimeout(() => {\n            this.visibility.overlay = false\n            this.$nextTick(() => {\n              this.removeDraggableListeners()\n            })\n          }, this.delay)\n        }\n      }\n    },\n    beforeMount () {\n      Modal.event.$on('toggle', (name, state, params) => {\n        if (name === this.name) {\n          if (typeof state === 'undefined') {\n            state = !this.visible\n          }\n\n          this.toggle(state, params)\n        }\n      });\n\n      window.addEventListener('resize', this.onWindowResize)\n      this.onWindowResize()\n    },\n    beforeDestroy () {\n      window.removeEventListener('resize', this.onWindowResize)\n    },\n    computed: {\n      position () {\n        const { window, modal, shift } = this\n        const maxLeft = window.width - modal.width\n        const maxTop = window.height - modal.height\n\n        const left = shift.left + this.pivotX * (window.width - modal.width)\n        const top = shift.top + this.pivotY * (window.height - modal.height)\n\n        return {\n          left: inRange(0, maxLeft, left),\n          top: inRange(0, maxTop, top)\n        }\n      },\n\n      modalClass () {\n        return ['v--modal-box', this.classes]\n      },\n\n      modalStyle () {\n        return {\n          top: this.position.top + 'px',\n          left: this.position.left + 'px',\n          width: this.modal.width + 'px',\n          height: this.modal.height + 'px'\n        }\n      }\n    },\n    methods: {\n      onWindowResize () {\n        this.window.width = window.innerWidth\n        this.window.height = window.innerHeight\n        this.adaptSize()\n      },\n\n      genEventObject (params) {\n        //todo: clean this up (change to ...)\n        var data = {\n          name: this.name,\n          timestamp: Date.now(),\n          canceled: false,\n          ref: this.$refs.modal,\n          stop: function() {\n            this.canceled = true\n          }\n        }\n\n        return Vue.util.extend(data, params || {});\n      },\n\n      adaptSize () {\n        if (this.adaptive) {\n          this.modal.width = inRange(\n            0,\n            this.window.width * this.maxAdaptiveWidth,\n            this.modal.width)\n          this.modal.height = inRange(\n            0,\n            this.window.height * this.maxAdaptiveWidth,\n            this.modal.height)\n        }\n      },\n\n      resize (event) {\n        this.modal.width = event.size.width\n        this.modal.height = event.size.height\n\n        const { size } = this.modal\n        const resizeEvent = this.genEventObject({ size });\n\n        this.$emit('resize', resizeEvent)\n      },\n\n      toggle (state, params) {\n        const beforeEventName = this.visible ? 'before-close' : 'before-open'\n        const afterEventName = this.visible ? 'closed' : 'opened'\n\n        let stopEventExecution = false\n\n        const stop = () => { stopEventExecution = true }\n        const beforeEvent = this.genEventObject({ stop, state, params })\n\n        this.$emit(beforeEventName, beforeEvent)\n\n        if (!stopEventExecution) {\n          const afterEvent = this.genEventObject({ state, params })\n\n          this.visible = state\n          this.$emit(afterEventName, afterEvent)\n        }\n      },\n\n      emitCancelableEvent (data) {\n        let stopEventExecution = false\n        let stop = () => { stopEventExecution = true }\n        let event = this.genEventObject(data)\n      },\n\n      getDraggableElement () {\n        var selector = typeof this.draggable !== 'string'\n          ? '.v--modal-box'\n          : this.draggable\n\n        if (selector) {\n          var handler = this.$refs.overlay.querySelector(selector)\n          if (handler) {\n            return handler\n          }\n        }\n      },\n\n      addDraggableListeners () {\n        if (!this.draggable) {\n          return;\n        }\n\n        let dragger = this.getDraggableElement()\n\n        if (dragger) {\n          let startX = 0\n          let startY = 0\n          let cachedShiftX = 0\n          let cachedShiftY = 0\n\n          let getPosition = (event) => {\n              return event.touches && event.touches.length > 0\n                ? event.touches[0]\n                : event\n          }\n\n          let mousedown = (event) => {\n            let { clientX, clientY } = getPosition(event)\n\n            document.addEventListener('mousemove', mousemove)\n            document.addEventListener('mouseup', mouseup)\n\n            document.addEventListener('touchmove', mousemove)\n            document.addEventListener('touchend', mouseup)\n\n            startX = clientX\n            startY = clientY\n            cachedShiftX = this.shift.left\n            cachedShiftY = this.shift.top\n\n            event.preventDefault()\n          }\n\n          let mousemove = (event) => {\n            let { clientX, clientY } = getPosition(event)\n\n            this.shift.left = cachedShiftX + clientX - startX\n            this.shift.top = cachedShiftY + clientY - startY\n            event.preventDefault()\n          }\n\n          let mouseup = (event) => {\n            document.removeEventListener('mousemove', mousemove)\n            document.removeEventListener('mouseup', mouseup)\n\n            document.removeEventListener('touchmove', mousemove)\n            document.removeEventListener('touchend', mouseup)\n\n            event.preventDefault()\n          }\n\n          dragger.addEventListener('mousedown', mousedown)\n          dragger.addEventListener('touchstart', mousedown)\n        }\n      },\n\n      removeDraggableListeners () {\n      //  console.log('removing draggable handlers')\n      }\n    }\n  };\n<\/script>\n<style>\n  .v--modal-overlay {\n    position: fixed;\n    left: 0;\n    top: 0;\n    width: 100vw;\n    height: 100vh;\n    background: rgba(0, 0, 0, 0.2);\n    z-index: 999;\n    opacity: 1;\n  }\n\n  .v--modal-overlay .v--modal-box {\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    background-color: white;\n  }\n\n  .v--modal {\n    background: white;\n    text-align: left;\n    border-radius: 3px;\n    box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n    padding: 0;\n  }\n\n  .v--modal.v--modal-fullscreen {\n    width: 100vw;\n    height: 100vh;\n    margin: 0;\n    left: 0;\n    top: 0;\n  }\n\n  .v--modal-top-right {\n    display: block;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  .overlay-fade-enter-active, .overlay-fade-leave-active {\n    transition: all 0.2s;\n  }\n\n  .overlay-fade-enter, .overlay-fade-leave-active {\n    opacity: 0;\n  }\n\n  .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n    transition: all 0.4s;\n  }\n\n  .nice-modal-fade-enter, .nice-modal-fade-leave-active {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n</style>\n"],sourceRoot:"webpack://"}])},function(e,n,t){n=e.exports=t(2)(),n.push([e.i,"\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369BE9;\n}\n","",{version:3,sources:["/./src/Resizer.vue?db4cc428"],names:[],mappings:";AA+EA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,wBAAA;EACA,kBAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,wBAAA;EACA,QAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,+BAAA;EACA,oCAAA;CACA;AAEA;EACA,kCAAA;CACA",file:"Resizer.vue",sourcesContent:["<template>\n  <div :class=\"className\"></div>\n</template>\n<script>\nimport { inRange } from './util'\n\nexport default {\n  name: 'VueJsModalResizer',\n  props: {\n    minHeight: {\n      type: Number,\n      default: 0\n    },\n    minWidth: {\n      type: Number,\n      default: 0\n    }},\n  data() {\n    return {\n      clicked: false,\n      size: {}\n    }\n  },\n  mounted() {\n    this.$el.addEventListener('mousedown', this.start, false)\n  },\n  computed: {\n    className () {\n      return {'vue-modal-resizer': true, 'clicked': this.clicked}\n    }\n  },\n  methods: {\n    start(event) {\n      this.clicked = true\n\n      window.addEventListener('mousemove', this.mousemove, false)\n      window.addEventListener('mouseup', this.stop, false)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    stop() {\n      this.clicked = false\n\n      window.removeEventListener('mousemove', this.mousemove, false)\n      window.removeEventListener('mouseup', this.stop, false)\n\n      this.$emit('resize-stop', {\n        element: this.$el.parentElement,\n        size: this.size\n      });\n    },\n    mousemove(event) {\n      this.resize(event)\n    },\n    resize(event) {\n      var el = this.$el.parentElement\n\n      if (el) {\n        var width = event.clientX - el.offsetLeft\n        var height = event.clientY - el.offsetTop\n\n        width = inRange(this.minWidth, window.innerWidth, width)\n        height = inRange(this.minHeight, window.innerHeight, height)\n\n        this.size = {width, height}\n        el.style.width = width + 'px'\n        el.style.height = height + 'px'\n\n        this.$emit('resize', {\n          element: el,\n          size: this.size\n        })\n      }\n    }\n  }\n}\n<\/script>\n<style>\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369BE9;\n}\n</style>\n"],sourceRoot:"webpack://"}])},function(e,n,t){t(14);var i=t(3)(t(7),t(12),null,null);i.options.__file="/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue",i.esModule&&Object.keys(i.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),e.exports=i.exports},function(e,n){e.exports={render:function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("transition",{attrs:{name:"overlay-fade"}},[e.visibility.overlay?t("div",{ref:"overlay",staticClass:"v--modal-overlay",attrs:{"aria-expanded":e.visible.toString(),"data-modal":e.name},on:{mousedown:function(n){n.stopPropagation(),e.toggle(!1)}}},[t("div",{staticClass:"v--modal-top-right"},[e._t("top-right")],2),e._v(" "),t("transition",{attrs:{name:e.transition}},[e.visibility.modal?t("div",{ref:"modal",class:e.modalClass,style:e.modalStyle,on:{mousedown:function(e){e.stopPropagation()}}},[e._t("default"),e._v(" "),e.resizable?t("resizer",{attrs:{"min-width":e.minWidth,"min-height":e.minHeight},on:{resize:e.resize}}):e._e()],2):e._e()])],1):e._e()])},staticRenderFns:[]},e.exports.render._withStripped=!0},function(e,n){e.exports={render:function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{class:e.className})},staticRenderFns:[]},e.exports.render._withStripped=!0},function(e,n,t){var i=t(8);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals),t(4)("0ba9730a",i,!1)},function(e,n,t){var i=t(9);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals),t(4)("43d3f0d1",i,!1)},function(e,n){e.exports=function(e,n){for(var t=[],i={},o=0;o<n.length;o++){var s=n[o],a=s[0],r=s[1],l=s[2],d=s[3],u={id:e+":"+o,css:r,media:l,sourceMap:d};i[a]?i[a].parts.push(u):t.push(i[a]={id:a,parts:[u]})}return t}},function(e,n){e.exports=require("vue")}]);
\ No newline at end of file
diff --git a/package.json b/package.json
index bef234e..360ca7a 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "description": "Modal Component for Vue.js",
   "version": "1.2.0",
   "author": "euvl <yev.vlasenko@gmail.com>",
-  "main": "dist/index.js",
+  "main": "dist/client.index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/euvl/vue-js-modal.git"
@@ -18,25 +18,28 @@
     "url": "https://github.com/euvl/vue-js-modal/issues"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
+    "build:server": "webpack --config ./build/webpack.server.config.js --progress --hide-modules"
   },
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.2.10",
-    "babel-preset-env": "latest",
+    "babel-core": "^6.25.0",
+    "babel-loader": "latest",
+    "babel-preset-env": "^1.5.2",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "node-sass": "^4.5.0",
     "sass-loader": "^5.0.1",
+    "uglifyjs-webpack-plugin": "^0.4.6",
     "vue": "^2.2.6",
     "vue-hot-reload-api": "^2.0.8",
     "vue-loader": "^10.0.0",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.2.0",
-    "webpack-dev-server": "^2.2.0"
+    "webpack-dev-server": "^2.2.0",
+    "webpack-merge": "^4.1.0"
   },
   "peerDependencies": {
     "vue": "^2.2.6"
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index f8871de..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,60 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'index.js',
-    library:'VueJsModal',
-    libraryTarget: 'umd'
-  },
-  target: 'node',
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  externals: {
-    vue: 'vue'
-  },
-  resolve: {
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js'
-    }
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true
-  },
-  performance: {
-    hints: false
-  },
-  devtool: '#source-map',
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ]
-}