Updated demo, moved "adapt" controller into function

demo/index.html

@@ -5,6 +5,7 @@
     <title>Vue Modal Examples</title>
     <meta name="description" content="Vue.js modal component. Simple, clean with no external dependencies."/>
     <meta name="keywords" content="vue, vuejs, modal, dialog, box, modal box, dialog box, vue-modal vuejs-modal.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

demo/src/App.vue

@@ -69,7 +69,7 @@ export default {
     }
   },
   methods: {
-    show(resizable = false, adaptive = false, draggable = false) {
+    show(resizable, adaptive, draggable) {
       this.resizable = resizable
       this.adaptive = adaptive
       this.draggable = draggable
@@ -131,9 +131,21 @@ button {
 
   color: #4db3ff;
   border: 1px solid #4db3ff;
+
+  min-width: 90px;
+
+  margin-bottom: 2px;
+  margin-top: 4px;
+
   &:hover {
     color: #20a0ff;
     border: 1px solid #20a0ff;
   }
 }
+
+@media (max-width:600px)  {
+  body {
+    padding: 10px;
+  }
+}
 </style>

dist/index.js

@@ -83,12 +83,14 @@ return /******/ (function(modules) { // webpackBootstrap
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return inRange; });
 var inRange = function inRange(from, to, value) {
-  if (value > to) {
-    return to;
-  }
   if (value < from) {
     return from;
   }
+
+  if (value > to) {
+    return to;
+  }
+
   return value;
 };
 
@@ -634,6 +636,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
       if (value) {
         this.visibility.overlay = true;
+        this.adaptWidth();
 
         setTimeout(function () {
           _this.visibility.modal = true;
@@ -708,11 +711,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     onWindowResize: function onWindowResize() {
       this.window.width = window.innerWidth;
       this.window.height = window.innerHeight;
-
+      this.adaptWidth();
-      if (this.adaptive) {
-        this.modal.width = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.width, this.modal.width);
-        this.modal.height = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.height, this.modal.height);
-      }
     },
     genEventObject: function genEventObject(params) {
       //todo: clean this up (change to ...)
@@ -722,6 +721,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         timestamp: Date.now()
       }, params || {});
     },
+    adaptWidth: function adaptWidth() {
+      if (this.adaptive) {
+        this.modal.width = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.width, this.modal.width);
+        this.modal.height = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.height, this.modal.height);
+      }
+    },
     resize: function resize(event) {
       this.modal.width = event.size.width;
       this.modal.height = event.size.height;
@@ -806,7 +811,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       }
     },
     removeDraggableListeners: function removeDraggableListeners() {
-      console.log('removing draggable handlers');
+      //  console.log('removing draggable handlers')
     }
   }
 };

src/Modal.vue

@@ -116,6 +116,7 @@
       visible (value) {
         if (value) {
           this.visibility.overlay = true
+          this.adaptSize()
 
           setTimeout(() => {
             this.visibility.modal = true
@@ -186,11 +187,7 @@
       onWindowResize () {
         this.window.width = window.innerWidth
         this.window.height = window.innerHeight
-
+        this.adaptSize()
-        if (this.adaptive) {
-          this.modal.width = inRange(0, this.window.width, this.modal.width)
-          this.modal.height = inRange(0, this.window.height, this.modal.height)
-        }
       },
 
       genEventObject (params) {
@@ -202,6 +199,13 @@
         }, params || {});
       },
 
+      adaptSize () {
+        if (this.adaptive) {
+          this.modal.width = inRange(0, this.window.width, this.modal.width)
+          this.modal.height = inRange(0, this.window.height, this.modal.height)
+        }
+      },
+
       resize (event) {
         this.modal.width = event.size.width
         this.modal.height = event.size.height
@@ -285,7 +289,7 @@
       },
 
       removeDraggableListeners () {
-        console.log('removing draggable handlers')
+      //  console.log('removing draggable handlers')
       }
     }
   };

src/util.js

@@ -1,9 +1,11 @@
 export const inRange = (from, to, value) => {
-  if (value > to) {
-    return to
-  }
   if (value < from) {
     return from
   }
+
+  if (value > to) {
+    return to
+  }
+
   return value
 }