Added minWidth and minHeigh, updated example

Modal/Modal.vue

@@ -10,7 +10,10 @@
              v-on:mousedown.stop
              ref="modal">
           <slot></slot>
-          <resizer v-if="resizable" @resize="resize"/>
+          <resizer v-if="resizable"
+                   :min-width="minWidth"
+                   :min-height="minHeight"
+                   @resize="resize"/>
         </div>
       </transition>
     </div>
@@ -118,8 +121,8 @@
     computed: {
       position() {
         return {
-          left: (this.window.width - this.modal.width) / 2,
+          left: Math.max((this.window.width - this.modal.width) / 2, 0),
-          top: (this.window.height - this.modal.height) / 2
+          top: Math.max((this.window.height - this.modal.height) / 2, 0)
         }
       },
       modalClass() {
@@ -140,13 +143,17 @@
         this.window.height = window.innerHeight;
 
         if (this.adaptive) {
-          this.modal.width = this.window.width > this.width
+          var width = this.window.width > this.width
             ? this.width
             : this.window.width
 
-          this.modal.height = this.window.height > this.height
+          /*this.modal.height*/
+          var height = this.window.height > this.height
             ? this.height
             : this.window.height;
+
+          this.modal.width = width;//Math.max(width, this.minWidth);
+          this.modal.height = height;//Math.max(height, this.minHeight);
         }
       },
       genEventObject(params) {
@@ -224,7 +231,7 @@
   }
 
   .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {
-    transition: all 0.5s;
+    transition: all 0.4s;
   }
 
   .nice-modal-fade-enter, .nice-modal-fade-leave-active {

Modal/Resizer.vue

@@ -5,13 +5,18 @@
 <script>
 export default {
   name: 'Resizer',
+  props: {
+    minHeight: {
+      type: Number,
+      default: 0
+    },
+    minWidth: {
+      type: Number,
+      default: 0
+    }},
   data() {
     return {
       clicked: false,
-      min: {
-        height: 50,
-        width: 0
-      },
       size: {}
     }
   },
@@ -19,13 +24,11 @@ export default {
     this.$el.addEventListener('mousedown', this.start, false);
   },
   methods: {
-    start(event) {
+    start() {
       this.clicked = true;
 
       window.addEventListener('mousemove', this.mousemove, false);
       window.addEventListener('mouseup', this.stop, false);
-
-      event.stopPropagation();
     },
     stop() {
       this.clicked = false;
@@ -44,24 +47,19 @@ export default {
     resize(event) {
       var el = this.$el.parentElement;
 
-      if (event.clientX < window.innerWidth / 2) {
-        return;
-      }
-
       if (el) {
         var width = event.clientX - el.offsetLeft;
         var height = event.clientY - el.offsetTop;
 
-        if (height < this.min.height) {
+        if (height < this.minHeight) {
-          height = this.min.height;
+          height = this.minHeight;
         }
 
-        if (width < this.min.width) {
+        if (width < this.minWidth) {
-          width = this.min.width;
+          width = this.minWidth;
         }
 
         this.size = {width, height};
-
         el.style.width = width + 'px';
         el.style.height = height + 'px';
 

examples/src/App.vue

@@ -1,9 +1,15 @@
 <template>
   <div id="app">
     <h2>Vue.js Modal</h2>
+
+    <pre>
+      npm install --save vue-js-modal
+    </pre>
     <modal name="example-modal"
                 transition="nice-modal-fade"
-                :delay="200"
+                :min-width="200"
+                :min-height="200"
+                :delay="100"
                 :adaptive="adaptive"
                 :resizable="resizable">
       <div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
@@ -87,9 +93,16 @@ export default {
 body {
   margin: 0;
   padding: 50px;
+  cursor: default;
   box-sizing: border-box;
 }
 
+pre {
+  color: #595959;
+  background-color: #f3f3f3;
+  border: 1px solid #eee;
+}
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -101,4 +114,23 @@ h1, h2 {
   font-weight: normal;
 }
 
+button {
+  outline: none;
+  background: white;
+  border: 0;
+  padding: 6px 18px;
+  cursor: pointer;
+  border-radius: 3px;
+
+  background: white;
+
+  color: #4db3ff;
+  border: 1px solid #4db3ff;
+
+  &:hover {
+    color: #20a0ff;
+    border: 1px solid #20a0ff;
+  }
+}
+
 </style>