diff --git a/dist/index.js b/dist/index.js
index a6b43d5..10c7119 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -7,7 +7,7 @@
 		exports["vue-js-modal"] = factory(require("vue"));
 	else
 		root["vue-js-modal"] = factory(root["vue"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_16__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_17__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -273,7 +273,7 @@ if (typeof DEBUG !== 'undefined' && DEBUG) {
   ) }
 }
 
-var listToStyles = __webpack_require__(15)
+var listToStyles = __webpack_require__(16)
 
 /*
 type StyleObject = {
@@ -480,13 +480,13 @@ function applyToTag (styleElement, obj) {
 
 
 /* styles */
-__webpack_require__(13)
+__webpack_require__(14)
 
 var Component = __webpack_require__(3)(
   /* script */
   __webpack_require__(6),
   /* template */
-  __webpack_require__(11),
+  __webpack_require__(12),
   /* scopeId */
   null,
   /* cssModules */
@@ -523,7 +523,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _vue = __webpack_require__(16);
+var _vue = __webpack_require__(17);
 
 var _vue2 = _interopRequireDefault(_vue);
 
@@ -531,12 +531,16 @@ var _index = __webpack_require__(0);
 
 var _index2 = _interopRequireDefault(_index);
 
-var _Resizer = __webpack_require__(10);
+var _Resizer = __webpack_require__(11);
 
 var _Resizer2 = _interopRequireDefault(_Resizer);
 
 var _util = __webpack_require__(1);
 
+var _parser = __webpack_require__(8);
+
+var _parser2 = _interopRequireDefault(_parser);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
@@ -583,25 +587,16 @@ exports.default = {
         return value >= 0;
       }
     },
-    maxAdaptiveWidth: {
-      type: Number,
-      default: 1
-    },
-    maxAdaptiveHeight: {
-      type: Number,
-      default: 1
-    },
     width: {
       type: [Number, String],
       default: 600,
       validator: function validator(value) {
         if (typeof value === 'string') {
-          return value.charAt(value.length - 1) === '%' && !isNaN(parseFloat(value));
+          var width = (0, _parser2.default)(value);
+          return (width.type === '%' || width.type === 'px') && width.value > 0;
         }
 
-        if (typeof value === 'number') {
-          return value >= 0;
-        }
+        return value >= 0;
       }
     },
     height: {
@@ -609,12 +604,11 @@ exports.default = {
       default: 300,
       validator: function validator(value) {
         if (typeof value === 'string') {
-          return value === 'auto' || value.charAt(value.length - 1) === '%' && !isNaN(parseFloat(value));
+          var height = (0, _parser2.default)(value);
+          return (height.type === '%' || height.type === 'px') && height.value > 0;
         }
 
-        if (typeof value === 'number') {
-          return value >= 0;
-        }
+        return value >= 0;
       }
     },
     pivotX: {
@@ -636,6 +630,11 @@ exports.default = {
     Resizer: _Resizer2.default
   },
   data: function data() {
+    var width = (0, _parser2.default)(this.width);
+    var height = (0, _parser2.default)(this.height);
+
+    console.log(width, height);
+
     return {
       visible: false,
 
@@ -650,16 +649,19 @@ exports.default = {
       },
 
       modal: {
-        width: this.width,
-        height: this.height
+        widthInit: 0,
+        width: width.value,
+        widthType: width.type,
+
+        heightInit: 0,
+        height: height.value,
+        heightType: height.type
       },
 
       window: {
         width: 0,
         height: 0
-      },
-
-      draggableElement: false
+      }
     };
   },
 
@@ -669,7 +671,7 @@ exports.default = {
 
       if (value) {
         this.visibility.overlay = true;
-        this.adaptSize();
+
 
         setTimeout(function () {
           _this.visibility.modal = true;
@@ -716,26 +718,44 @@ exports.default = {
           shift = this.shift;
 
 
-      var maxLeft = window.width - this.trueModalWidth();
-      var maxTop = window.height - this.trueModalHeight();
+      var maxLeft = window.width - this.trueModalWidth;
+      var maxTop = window.height - this.trueModalHeight;
 
-      var left = shift.left + this.pivotX * (window.width - this.trueModalWidth());
-      var top = shift.top + this.pivotY * (window.height - this.trueModalHeight());
+      var left = shift.left + this.pivotX * (window.width - this.trueModalWidth);
+      var top = shift.top + this.pivotY * (window.height - this.trueModalHeight);
 
       return {
         left: (0, _util.inRange)(0, maxLeft, left),
         top: (0, _util.inRange)(0, maxTop, top)
       };
     },
+    trueModalWidth: function trueModalWidth() {
+      var window = this.window,
+          modal = this.modal;
+
+      var value = modal.widthType === '%' ? window.width / 100 * modal.width : modal.width;
+
+      return this.adaptive ? (0, _util.inRange)(this.minWidth, this.window.width, value) : value;
+    },
+    trueModalHeight: function trueModalHeight() {
+      var window = this.window,
+          modal = this.modal;
+
+      var value = modal.heightType === '%' ? window.height / 100 * modal.height : modal.height;
+
+      return this.adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+    },
     modalClass: function modalClass() {
       return ['v--modal-box', this.classes];
     },
     modalStyle: function modalStyle() {
+      console.log(this.trueModalWidth, this.trueModalHeight);
+
       return {
         top: this.position.top + 'px',
         left: this.position.left + 'px',
-        width: this.trueModalWidth() + 'px',
-        height: this.trueModalHeight() + 'px'
+        width: this.trueModalWidth + 'px',
+        height: this.trueModalHeight + 'px'
       };
     }
   },
@@ -743,7 +763,6 @@ exports.default = {
     onWindowResize: function onWindowResize() {
       this.window.width = window.innerWidth;
       this.window.height = window.innerHeight;
-      this.adaptSize();
     },
     genEventObject: function genEventObject(params) {
       var data = {
@@ -758,25 +777,8 @@ exports.default = {
 
       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.trueModalWidth());
-        this.modal.height = (0, _util.inRange)(0, this.window.height * this.maxAdaptiveHeight, this.trueModalHeight());
-      }
-    },
-    trueModalWidth: function trueModalWidth() {
-      var window = this.window,
-          modal = this.modal;
-
-      return typeof modal.width === 'string' ? window.width * parseFloat(modal.width) / 100.0 : modal.width;
-    },
-    trueModalHeight: function trueModalHeight() {
-      var window = this.window,
-          modal = this.modal;
-
-      return typeof modal.height === 'string' ? window.height * parseFloat(modal.height) / 100.0 : modal.height;
-    },
-    resize: function resize(event) {
+    adaptSize: function adaptSize() {},
+    onModalResize: function onModalResize(event) {
       this.modal.width = event.size.width;
       this.modal.height = event.size.height;
 
@@ -979,15 +981,57 @@ exports.default = {
 /* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(2)();
-// imports
+"use strict";
 
 
-// module
-exports.push([module.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}\n.v--modal {\n  background-color: 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?505259c2"],"names":[],"mappings":";AAyYA;EACA,gBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;CACA;AAEA;EACA,wBAAA;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      maxAdaptiveWidth: {\n        type: Number,\n        default: 1\n        // ,\n        // validator (value) {\n        //   return value > 0 && value <= 1\n        // }\n      },\n      maxAdaptiveHeight: {\n        type: Number,\n        default: 1\n        // ,\n        // validator (value) {\n        //  return value > 0 && value <= 1\n        // }\n      },\n      width: {\n        type: [Number, String],\n        default: 600,\n        validator (value) {\n          if (typeof value === 'string') {\n            return value.charAt(value.length-1) === '%' && !isNaN(parseFloat(value))\n          }\n\n          if (typeof value === 'number') {\n            return value >= 0\n          }\n        }\n      },\n      height: {\n        type: [Number, String],\n        default: 300,\n        validator (value) {\n          if (typeof value === 'string') {\n            return value === 'auto' || (value.charAt(value.length-1) === '%' && !isNaN(parseFloat(value)))\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\n        const maxLeft = window.width - this.trueModalWidth()\n        const maxTop = window.height - this.trueModalHeight()\n\n        const left = shift.left + this.pivotX * (window.width - this.trueModalWidth())\n        const top = shift.top + this.pivotY * (window.height - this.trueModalHeight())\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.trueModalWidth() + 'px',\n          height: this.trueModalHeight() + '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.trueModalWidth())\n          this.modal.height = inRange(\n            0,\n            this.window.height * this.maxAdaptiveHeight,\n            this.trueModalHeight())\n        }\n      },\n\n      trueModalWidth () {\n        const {window, modal} = this\n        return (typeof modal.width === 'string') ? window.width * parseFloat(modal.width) / 100.0 : modal.width\n      },\n\n      trueModalHeight () {\n        const {window, modal} = this\n        return (typeof modal.height === 'string') ? window.height * parseFloat(modal.height) / 100.0 : modal.height\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  }\n\n  .v--modal {\n    background-color: 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://"}]);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-// exports
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+var floatRegexp = '[-+]?[0-9]*\.?[0-9]+';
+
+var types = [{
+  name: 'px',
+  regexp: new RegExp('^' + floatRegexp + 'px$')
+}, {
+  name: '%',
+  regexp: new RegExp('^' + floatRegexp + '%$')
+}, {
+  name: 'px',
+  regexp: new RegExp('^' + floatRegexp + '$')
+}];
+
+var getType = function getType(value) {
+  for (var i = 0; i < types.length; i++) {
+    var type = types[i];
+    if (type.regexp.test(value)) {
+      return {
+        type: type.name,
+        value: parseFloat(value)
+      };
+    }
+  }
+
+  return {
+    type: '',
+    value: value
+  };
+};
+
+var parse = function parse(value) {
+  switch (typeof value === 'undefined' ? 'undefined' : _typeof(value)) {
+    case 'number':
+      return { type: 'px', value: value };
+    case 'string':
+      return getType(value);
+    default:
+      return { type: '', value: value };
+  }
+};
+
+exports.default = parse;
 
 /***/ }),
 /* 9 */
@@ -998,7 +1042,7 @@ exports = module.exports = __webpack_require__(2)();
 
 
 // module
-exports.push([module.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://"}]);
+exports.push([module.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}\n.v--modal {\n  background-color: 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?265f8e00"],"names":[],"mappings":";AA+YA;EACA,gBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;CACA;AAEA;EACA,wBAAA;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=\"onModalResize\"/>\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  import parseNumber from './parser'\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      width: {\n        type: [Number, String],\n        default: 600,\n        validator (value) {\n          if (typeof value === 'string') {\n            let width = parseNumber(value)\n            return (width.type === '%' || width.type === 'px')\n              && width.value > 0\n          }\n\n          return value >= 0\n        }\n      },\n      height: {\n        type: [Number, String],\n        default: 300,\n        validator (value) {\n          if (typeof value === 'string') {\n            let height = parseNumber(value)\n            return (height.type === '%' || height.type === 'px')\n              && height.value > 0\n          }\n          \n          return value >= 0\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      let width = parseNumber(this.width)\n      let height = parseNumber(this.height)\n\n      console.log(width, height)\n\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          widthInit: 0,\n          width: width.value,\n          widthType: width.type,\n\n          heightInit: 0,\n          height: height.value,\n          heightType: height.type\n        },\n\n        window: {\n          width: 0,\n          height: 0\n        }\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\n        const maxLeft = window.width - this.trueModalWidth\n        const maxTop = window.height - this.trueModalHeight\n\n        const left = shift.left + \n          this.pivotX * (window.width - this.trueModalWidth)\n        const top = shift.top + \n          this.pivotY * (window.height - this.trueModalHeight)\n\n        return {\n          left: inRange(0, maxLeft, left),\n          top: inRange(0, maxTop, top)\n        }\n      },\n\n      trueModalWidth () {\n        const { window, modal } = this\n        const value = modal.widthType === '%'\n          ? window.width / 100 * modal.width\n          : modal.width\n\n        return this.adaptive\n          ? inRange(this.minWidth, this.window.width, value)\n          : value\n      },\n\n      trueModalHeight () {\n        const { window, modal } = this\n        const value = (modal.heightType === '%') \n          ? window.height / 100 * modal.height \n          : modal.height\n\n        return this.adaptive\n          ? inRange(this.minHeight, this.window.height, value)\n          : value\n      },\n\n      modalClass () {\n        return ['v--modal-box', this.classes]\n      },\n\n      modalStyle () {\n        console.log(this.trueModalWidth, this.trueModalHeight)\n\n        return {\n          top: this.position.top + 'px',\n          left: this.position.left + 'px',\n          width: this.trueModalWidth + 'px',\n          height: this.trueModalHeight + '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(this.minWidth, this.window.width,\n            this.trueModalWidth)\n          this.modal.height = inRange(this.minHeight, this.window.height,\n            this.trueModalHeight)\n        }\n    */\n      },\n\n      onModalResize (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  }\n\n  .v--modal {\n    background-color: 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://"}]);
 
 // exports
 
@@ -1007,15 +1051,29 @@ exports.push([module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow:
 /* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
+exports = module.exports = __webpack_require__(2)();
+// imports
+
+
+// module
+exports.push([module.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?212896e6"],"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://"}]);
+
+// exports
+
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
 
 /* styles */
-__webpack_require__(14)
+__webpack_require__(15)
 
 var Component = __webpack_require__(3)(
   /* script */
   __webpack_require__(7),
   /* template */
-  __webpack_require__(12),
+  __webpack_require__(13),
   /* scopeId */
   null,
   /* cssModules */
@@ -1042,7 +1100,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -1084,7 +1142,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       "min-height": _vm.minHeight
     },
     on: {
-      "resize": _vm.resize
+      "resize": _vm.onModalResize
     }
   }) : _vm._e()], 2) : _vm._e()])], 1) : _vm._e()])
 },staticRenderFns: []}
@@ -1097,7 +1155,7 @@ if (false) {
 }
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -1114,13 +1172,13 @@ if (false) {
 }
 
 /***/ }),
-/* 13 */
+/* 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__(8);
+var content = __webpack_require__(9);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -1140,13 +1198,13 @@ if(false) {
 }
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (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);
+var content = __webpack_require__(10);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -1166,7 +1224,7 @@ if(false) {
 }
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports) {
 
 /**
@@ -1199,10 +1257,10 @@ module.exports = function listToStyles (parentId, list) {
 
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_16__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_17__;
 
 /***/ })
 /******/ ]);
diff --git a/src/Modal.vue b/src/Modal.vue
index 9f96d49..540773c 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -19,7 +19,7 @@
           <resizer v-if="resizable"
                    :min-width="minWidth"
                    :min-height="minHeight"
-                   @resize="resize"/>
+                   @resize="onModalResize"/>
         </div>
       </transition>
     </div>
@@ -30,6 +30,7 @@
   import Modal       from './index'
   import Resizer     from './Resizer.vue'
   import { inRange } from './util'
+  import parseNumber from './parser'
 
   export default {
     name: 'VueJsModal',
@@ -75,34 +76,17 @@
           return value >= 0
         }
       },
-      maxAdaptiveWidth: {
-        type: Number,
-        default: 1
-        // ,
-        // validator (value) {
-        //   return value > 0 && value <= 1
-        // }
-      },
-      maxAdaptiveHeight: {
-        type: Number,
-        default: 1
-        // ,
-        // validator (value) {
-        //  return value > 0 && value <= 1
-        // }
-      },
       width: {
         type: [Number, String],
         default: 600,
         validator (value) {
           if (typeof value === 'string') {
-            return value.charAt(value.length-1) === '%'
-              && !isNaN(parseFloat(value))
+            let width = parseNumber(value)
+            return (width.type === '%' || width.type === 'px')
+              && width.value > 0
           }
 
-          if (typeof value === 'number') {
-            return value >= 0
-          }
+          return value >= 0
         }
       },
       height: {
@@ -110,13 +94,12 @@
         default: 300,
         validator (value) {
           if (typeof value === 'string') {
-            return (value.charAt(value.length-1) === '%'
-              && !isNaN(parseFloat(value)))
-          }
-
-          if (typeof value === 'number') {
-            return value >= 0
+            let height = parseNumber(value)
+            return (height.type === '%' || height.type === 'px')
+              && height.value > 0
           }
+          
+          return value >= 0
         }
       },
       pivotX: {
@@ -138,6 +121,11 @@
       Resizer
     },
     data () {
+      let width = parseNumber(this.width)
+      let height = parseNumber(this.height)
+
+      console.log(width, height)
+
       return {
         visible: false,
 
@@ -152,23 +140,26 @@
         },
 
         modal: {
-          width: this.width,
-          height: this.height
+          widthInit: 0,
+          width: width.value,
+          widthType: width.type,
+
+          heightInit: 0,
+          height: height.value,
+          heightType: height.type
         },
 
         window: {
           width: 0,
           height: 0
-        },
-
-        draggableElement: false
-      };
+        }
+      }
     },
     watch: {
       visible (value) {
         if (value) {
           this.visibility.overlay = true
-          this.adaptSize()
+        //  this.adaptSize()
 
           setTimeout(() => {
             this.visibility.modal = true
@@ -207,13 +198,15 @@
     },
     computed: {
       position () {
-        const {window, modal, shift} = this
+        const { window, modal, shift } = this
 
-        const maxLeft = window.width - this.trueModalWidth()
-        const maxTop = window.height - this.trueModalHeight()
+        const maxLeft = window.width - this.trueModalWidth
+        const maxTop = window.height - this.trueModalHeight
 
-        const left = shift.left + this.pivotX * (window.width - this.trueModalWidth())
-        const top = shift.top + this.pivotY * (window.height - this.trueModalHeight())
+        const left = shift.left + 
+          this.pivotX * (window.width - this.trueModalWidth)
+        const top = shift.top + 
+          this.pivotY * (window.height - this.trueModalHeight)
 
         return {
           left: inRange(0, maxLeft, left),
@@ -221,16 +214,40 @@
         }
       },
 
+      trueModalWidth () {
+        const { window, modal } = this
+        const value = modal.widthType === '%'
+          ? window.width / 100 * modal.width
+          : modal.width
+
+        return this.adaptive
+          ? inRange(this.minWidth, this.window.width, value)
+          : value
+      },
+
+      trueModalHeight () {
+        const { window, modal } = this
+        const value = (modal.heightType === '%') 
+          ? window.height / 100 * modal.height 
+          : modal.height
+
+        return this.adaptive
+          ? inRange(this.minHeight, this.window.height, value)
+          : value
+      },
+
       modalClass () {
         return ['v--modal-box', this.classes]
       },
 
       modalStyle () {
+        console.log(this.trueModalWidth, this.trueModalHeight)
+
         return {
           top: this.position.top + 'px',
           left: this.position.left + 'px',
-          width: this.trueModalWidth() + 'px',
-          height: this.trueModalHeight() + 'px'
+          width: this.trueModalWidth + 'px',
+          height: this.trueModalHeight + 'px'
         }
       }
     },
@@ -238,7 +255,7 @@
       onWindowResize () {
         this.window.width = window.innerWidth
         this.window.height = window.innerHeight
-        this.adaptSize()
+      //  this.adaptSize()
       },
 
       genEventObject (params) {
@@ -257,29 +274,16 @@
       },
 
       adaptSize () {
-        if (this.adaptive) {
-          this.modal.width = inRange(
-            0,
-            this.window.width * this.maxAdaptiveWidth,
-            this.trueModalWidth())
-          this.modal.height = inRange(
-            0,
-            this.window.height * this.maxAdaptiveHeight,
-            this.trueModalHeight())
+    /*    if (this.adaptive) {
+          this.modal.width = inRange(this.minWidth, this.window.width,
+            this.trueModalWidth)
+          this.modal.height = inRange(this.minHeight, this.window.height,
+            this.trueModalHeight)
         }
+    */
       },
 
-      trueModalWidth () {
-        const {window, modal} = this
-        return (typeof modal.width === 'string') ? window.width * parseFloat(modal.width) / 100.0 : modal.width
-      },
-
-      trueModalHeight () {
-        const {window, modal} = this
-        return (typeof modal.height === 'string') ? window.height * parseFloat(modal.height) / 100.0 : modal.height
-      },
-
-      resize (event) {
+      onModalResize (event) {
         this.modal.width = event.size.width
         this.modal.height = event.size.height
 
diff --git a/src/Resizer.vue b/src/Resizer.vue
index de19a62..7332a0b 100644
--- a/src/Resizer.vue
+++ b/src/Resizer.vue
@@ -21,7 +21,7 @@ export default {
       size: {}
     }
   },
-  mounted() {
+  mounted () {
     this.$el.addEventListener('mousedown', this.start, false)
   },
   computed: {
diff --git a/src/floatStringParser.js b/src/parser.js
similarity index 94%
rename from src/floatStringParser.js
rename to src/parser.js
index a34793b..d4f1592 100644
--- a/src/floatStringParser.js
+++ b/src/parser.js
@@ -7,6 +7,10 @@
 var floatRegexp = '[-+]?[0-9]*\.?[0-9]+'
 
 var types = [
+//  {
+//    name: 'rem',
+//    regexp: new RegExp(`^${floatRegexp}rem\$`)
+//  },
   {
     name: 'px',
     regexp: new RegExp(`^${floatRegexp}px\$`)