Fixed min-width, min-height with % w/h

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,49 +76,31 @@
           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) === '%'
+            let width = parseNumber(value)
-              && !isNaN(parseFloat(value))
+            return (width.type === '%' || width.type === 'px')
+              && width.value > 0
           }
 
-          if (typeof value === 'number') {
           return value >= 0
         }
-        }
       },
       height: {
         type: [Number, String],
         default: 300,
         validator (value) {
           if (typeof value === 'string') {
-            return (value.charAt(value.length-1) === '%'
+            let height = parseNumber(value)
-              && !isNaN(parseFloat(value)))
+            return (height.type === '%' || height.type === 'px')
+              && height.value > 0
           }
           
-          if (typeof value === 'number') {
           return value >= 0
         }
-        }
       },
       pivotX: {
         type: Number,
@@ -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,
+          widthInit: 0,
-          height: this.height
+          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 maxLeft = window.width - this.trueModalWidth
-        const maxTop = window.height - this.trueModalHeight()
+        const maxTop = window.height - this.trueModalHeight
 
-        const left = shift.left + this.pivotX * (window.width - this.trueModalWidth())
+        const left = shift.left + 
-        const top = shift.top + this.pivotY * (window.height - this.trueModalHeight())
+          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',
+          width: this.trueModalWidth + 'px',
-          height: this.trueModalHeight() + '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) {
+    /*    if (this.adaptive) {
-          this.modal.width = inRange(
+          this.modal.width = inRange(this.minWidth, this.window.width,
-            0,
+            this.trueModalWidth)
-            this.window.width * this.maxAdaptiveWidth,
+          this.modal.height = inRange(this.minHeight, this.window.height,
-            this.trueModalWidth())
+            this.trueModalHeight)
-          this.modal.height = inRange(
-            0,
-            this.window.height * this.maxAdaptiveHeight,
-            this.trueModalHeight())
         }
+    */
       },
 
-      trueModalWidth () {
+      onModalResize (event) {
-        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) {
         this.modal.width = event.size.width
         this.modal.height = event.size.height
 

src/Resizer.vue

@@ -21,7 +21,7 @@ export default {
       size: {}
     }
   },
-  mounted() {
+  mounted () {
     this.$el.addEventListener('mousedown', this.start, false)
   },
   computed: {

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\$`)