Demo updated added pivotX and pivotY props

.npmignore

@@ -1 +1,2 @@
 
+demo

demo/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "vue": "^2.0.0",
-    "vue-js-modal": "^1.0.11"
+    "vue-js-modal": "^1.0.12"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

demo/src/App.vue

@@ -11,8 +11,12 @@
 
   <h2>Vue.js Modal</h2>
 
-  <pre>
+  <pre style="line-height: 1.5;">
     npm install --save vue-js-modal
+
+    ...
+    import vmodal from 'vue-js-modal'
+    Vue.use(vmodal)
   </pre>
 
   <table>
@@ -92,7 +96,7 @@ export default {
       props: {
         name: {
           required: true,
-          type: [String, Number],
+          type: String,
         },
         delay: {
           type: Number,

dist/index.js

@@ -560,6 +560,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     minHeight: {
       type: Number,
       default: 0
+    },
+    pivotX: {
+      type: Number,
+      default: 0.5
+    },
+    pivotY: {
+      type: Number,
+      default: 0.5
     }
   },
   components: {
@@ -594,18 +602,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         if (value) {
           this.visibility.overlay = true;
           setTimeout(function () {
-            return _this.visibility.modal = true;
+            _this.visibility.modal = true;
           }, this.delay);
         } else {
           this.visibility.modal = false;
           setTimeout(function () {
-            return _this.visibility.overlay = false;
+            _this.visibility.overlay = false;
           }, this.delay);
         }
       } else {
         this.visibility.overlay = value;
-        __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].nextTick(function () {
-          return _this.visibility.modal = value;
+        this.$nextTick(function () {
+          _this.visibility.modal = value;
         });
       }
     }
@@ -621,6 +629,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
     window.addEventListener('resize', this.onWindowResize);
   },
+  beforeDestroy: function beforeDestroy() {
+    window.removeEventListener('resize', this.onWindowResize);
+  },
   beforeMount: function beforeMount() {
     this.onWindowResize();
   },
@@ -628,8 +639,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
   computed: {
     position: function position() {
       return {
-        left: Math.max(0.5 * (this.window.width - this.modal.width), 0),
-        top: Math.max(0.5 * (this.window.height - this.modal.height), 0)
+        left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
+        top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
       };
     },
     modalClass: function modalClass() {
@@ -650,15 +661,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       this.window.height = window.innerHeight;
 
       if (this.adaptive) {
-        var width = this.window.width > this.modal.width ? this.modal.width : this.window.width;
-
-        var height = this.window.height > this.modal.height ? this.modal.height : this.window.height;
+        var width = Math.min(this.window.width, this.modal.width);
+        var height = Math.min(this.window.height, this.modal.height);
 
         this.modal.width = width; // Math.max(width, this.minWidth);
         this.modal.height = height; // Math.max(height, this.minHeight);
       }
     },
     genEventObject: function genEventObject(params) {
+      //todo: clean this up
       return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend({
         name: this.name,
         ref: this.$refs.modal,
@@ -669,9 +680,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       this.modal.width = event.size.width;
       this.modal.height = event.size.height;
 
-      var resizeEvent = this.genEventObject({
-        size: this.modal
-      });
+      var size = this.modal.size;
+
+      var resizeEvent = this.genEventObject({ size: size });
 
       this.$emit('resize', resizeEvent);
     },
@@ -681,24 +692,17 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
       var stopEventExecution = false;
 
-      var beforeEvent = this.genEventObject({
-        stop: function stop() {
-          return stopEventExecution = false;
-        },
-        state: state,
-        params: params
-      });
+      var stop = function stop() {
+        stopEventExecution = false;
+      };
+      var beforeEvent = this.genEventObject({ stop: stop, state: state, params: params });
 
       this.$emit(beforeEventName, beforeEvent);
 
       if (!stopEventExecution) {
         this.visible = !!state;
 
-        var afterEvent = this.genEventObject({
-          state: state,
-          params: params
-        });
-
+        var afterEvent = this.genEventObject({ state: state, params: params });
         this.$emit(afterEventName, afterEvent);
       }
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "author": "euvl <yev.vlasenko@gmail.com>",
   "main": "dist/index.js",
   "repository": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "devDependencies": {
     "babel-preset-latest": "^6.0.0",
-    "vue": "^2.1.10",
+    "vue": "^2.2.6",
     "babel-core": "^6.0.0",
     "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.0.0",

src/Modal.vue

@@ -65,6 +65,14 @@
       minHeight: {
         type: Number,
         default: 0
+      },
+      pivotX: {
+        type: Number,
+        default: 0.5
+      },
+      pivotY: {
+        type: Number,
+        default: 0.5
       }
     },
     components: {
@@ -91,22 +99,28 @@
       };
     },
     watch: {
-      visible(value) {
+      visible (value) {
         if (this.delay > 0) {
           if (value) {
             this.visibility.overlay = true
-            setTimeout(() => this.visibility.modal = true, this.delay)
+            setTimeout(() => {
+              this.visibility.modal = true
+            }, this.delay)
           } else {
             this.visibility.modal = false
-            setTimeout(() => this.visibility.overlay = false, this.delay)
+            setTimeout(() => {
+              this.visibility.overlay = false
+            }, this.delay)
           }
         } else {
           this.visibility.overlay = value
-          Vue.nextTick(() => this.visibility.modal = value)
+          this.$nextTick(() => {
+            this.visibility.modal = value
+          })
         }
       },
     },
-    created() {
+    created () {
       Modal.event.$on('toggle', (name, state, params) => {
         if (name === this.name) {
           this.toggle(!this.visible, params)
@@ -115,14 +129,17 @@
 
       window.addEventListener('resize', this.onWindowResize)
     },
-    beforeMount() {
-      this.onWindowResize();
+    beforeDestroy () {
+      window.removeEventListener('resize', this.onWindowResize)
+    },
+    beforeMount () {
+      this.onWindowResize()
     },
     computed: {
       position() {
         return {
-          left: Math.max(0.5 * (this.window.width - this.modal.width), 0),
-          top: Math.max(0.5 * (this.window.height - this.modal.height), 0)
+          left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
+          top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
         }
       },
       modalClass() {
@@ -143,19 +160,15 @@
         this.window.height = window.innerHeight
 
         if (this.adaptive) {
-          var width = this.window.width > this.modal.width
-            ? this.modal.width
-            : this.window.width
-
-          var height = this.window.height > this.modal.height
-            ? this.modal.height
-            : this.window.height
+          let width = Math.min(this.window.width, this.modal.width)
+          let height = Math.min(this.window.height, this.modal.height)
 
           this.modal.width = width // Math.max(width, this.minWidth);
           this.modal.height = height // Math.max(height, this.minHeight);
         }
       },
       genEventObject(params) {
+        //todo: clean this up
         return Vue.util.extend(
           {
             name: this.name,
@@ -168,9 +181,8 @@
         this.modal.width = event.size.width
         this.modal.height = event.size.height
 
-        let resizeEvent = this.genEventObject({
-          size: this.modal
-        });
+        let { size } = this.modal
+        let resizeEvent = this.genEventObject({ size });
 
         this.$emit('resize', resizeEvent)
       },
@@ -180,22 +192,15 @@
 
         let stopEventExecution = false
 
-        const beforeEvent = this.genEventObject({
-          stop: () => stopEventExecution = false,
-          state,
-          params
-        })
+        const stop = () => { stopEventExecution = false }
+        const beforeEvent = this.genEventObject({ stop, state, params })
 
         this.$emit(beforeEventName, beforeEvent)
 
         if (!stopEventExecution) {
           this.visible = !!state
 
-          const afterEvent = this.genEventObject({
-            state,
-            params
-          })
-
+          const afterEvent = this.genEventObject({ state, params })
           this.$emit(afterEventName, afterEvent)
         }
       },