Added maxWidth minWidth

demo/client_side_rendering/src/components/ConditionalModal.vue

@@ -1,6 +1,10 @@
 <template>
   <modal name="conditional-modal"
          :adaptive="true"
+         :max-width="1000"
+         :max-height="400"
+         width="80%"
+         height="50%"
          @before-open="beforeOpen">
     <div style="padding:30px; text-align: center">
       Hello!
@@ -11,14 +15,14 @@
 export default {
   name: 'ConditionalModal',
   methods: {
-    beforeOpen (event) {
+    beforeOpen(event) {
       console.log('Event:', event)
       console.log('Params:', event.params)
 
       if (event.params.show === false) {
         event.stop()
       }
-    },
+    }
   }
 }
 </script>

dist/index.js

@@ -207,14 +207,14 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(18);
         var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(19);
         var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
@@ -347,6 +347,14 @@
                         return value >= 0;
                     }
                 },
+                maxWidth: {
+                    type: Number,
+                    default: 1 / 0
+                },
+                maxHeight: {
+                    type: Number,
+                    default: 1 / 0
+                },
                 width: {
                     type: [ Number, String ],
                     default: 600,
@@ -465,12 +473,14 @@
                     };
                 },
                 trueModalWidth: function() {
-                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
-                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                    return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
                 },
                 trueModalHeight: function() {
-                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
-                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                    if (isAutoHeight) return this.modal.renderedHeight;
+                    var max = Math.min(window.height, maxHeight);
+                    return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
                 },
                 overlayClass: function() {
                     return {
@@ -722,7 +732,8 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(20);
         var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Resizer.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue", 
+        Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;

dist/ssr.index.js

@@ -161,14 +161,14 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(18);
         var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(19);
         var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
@@ -301,6 +301,14 @@
                         return value >= 0;
                     }
                 },
+                maxWidth: {
+                    type: Number,
+                    default: 1 / 0
+                },
+                maxHeight: {
+                    type: Number,
+                    default: 1 / 0
+                },
                 width: {
                     type: [ Number, String ],
                     default: 600,
@@ -419,12 +427,14 @@
                     };
                 },
                 trueModalWidth: function() {
-                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
-                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                    return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
                 },
                 trueModalHeight: function() {
-                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
-                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                    if (isAutoHeight) return this.modal.renderedHeight;
+                    var max = Math.min(window.height, maxHeight);
+                    return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
                 },
                 overlayClass: function() {
                     return {
@@ -676,7 +686,8 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(20);
         var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Resizer.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue", 
+        Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;

dist/ssr.nocss.js

@@ -98,14 +98,14 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(9);
         var Component = __webpack_require__(0)(__webpack_require__(5), __webpack_require__(13), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(10);
         var Component = __webpack_require__(0)(__webpack_require__(6), __webpack_require__(14), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
@@ -238,6 +238,14 @@
                         return value >= 0;
                     }
                 },
+                maxWidth: {
+                    type: Number,
+                    default: 1 / 0
+                },
+                maxHeight: {
+                    type: Number,
+                    default: 1 / 0
+                },
                 width: {
                     type: [ Number, String ],
                     default: 600,
@@ -356,12 +364,14 @@
                     };
                 },
                 trueModalWidth: function() {
-                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
-                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                    return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
                 },
                 trueModalHeight: function() {
-                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
-                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                    if (isAutoHeight) return this.modal.renderedHeight;
+                    var max = Math.min(window.height, maxHeight);
+                    return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
                 },
                 overlayClass: function() {
                     return {
@@ -607,7 +617,8 @@
     }, function(module, exports) {}, function(module, exports) {}, function(module, exports) {}, function(module, exports, __webpack_require__) {
         __webpack_require__(11);
         var Component = __webpack_require__(0)(__webpack_require__(7), __webpack_require__(15), null, null);
-        Component.options.__file = "D:\\Projects\\vue-js-modal\\src\\Resizer.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue", 
+        Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "author": "euvl <yev.vlasenko@gmail.com>",
   "main": "dist/index.js",
   "repository": {
@@ -75,4 +75,4 @@
   "peerDependencies": {
     "vue": "^2.2.6"
   }
-}
+}

src/Modal.vue

@@ -89,6 +89,14 @@ export default {
         return value >= 0
       }
     },
+    maxWidth: {
+      type: Number,
+      default: Infinity
+    },
+    maxHeight: {
+      type: Number,
+      default: Infinity
+    },
     width: {
       type: [Number, String],
       default: 600,
@@ -169,11 +177,11 @@ export default {
   },
   watch: {
     /**
-       * Sets the visibility of overlay and modal.
+     * Sets the visibility of overlay and modal.
-       * Events 'opened' and 'closed' is called here
+     * Events 'opened' and 'closed' is called here
-       * inside `setTimeout` and `$nextTick`, after the DOM changes.
+     * inside `setTimeout` and `$nextTick`, after the DOM changes.
-       * This fixes `$refs.modal` `undefined` bug (fixes #15)
+     * This fixes `$refs.modal` `undefined` bug (fixes #15)
-       */
+     */
     visible(value) {
       if (value) {
         this.visibility.overlay = true
@@ -202,8 +210,8 @@ export default {
     this.setInitialSize()
   },
   /**
-     * Sets global listeners
+   * Sets global listeners
-     */
+   */
   beforeMount() {
     Modal.event.$on('toggle', (name, state, params) => {
       if (name === this.name) {
@@ -218,8 +226,8 @@ export default {
     window.addEventListener('resize', this.onWindowResize)
     this.onWindowResize()
     /**
-       * Making sure that autoHeight is enabled when using "scrollable"
+     * Making sure that autoHeight is enabled when using "scrollable"
-       */
+     */
     if (this.scrollable && !this.isAutoHeight) {
       console.warn(
         `Modal "${this.name}" has scrollable flag set to true ` +
@@ -227,18 +235,18 @@ export default {
       )
     }
     /**
-       * Only observe when using height: 'auto'
+     * Only observe when using height: 'auto'
-       * The callback will be called when modal DOM changes,
+     * The callback will be called when modal DOM changes,
-       * this is for updating the `top` attribute for height 'auto' modals.
+     * this is for updating the `top` attribute for height 'auto' modals.
-       */
+     */
     if (this.isAutoHeight) {
       /**
-         * MutationObserver feature detection:
+       * MutationObserver feature detection:
-         * Detects if MutationObserver is available, return false if not.
+       * Detects if MutationObserver is available, return false if not.
-         * No polyfill is provided here, so height 'auto' recalculation will
+       * No polyfill is provided here, so height 'auto' recalculation will
-         * simply stay at its initial height (won't crash).
+       * simply stay at its initial height (won't crash).
-         * (Provide polyfill to support IE < 11)
+       * (Provide polyfill to support IE < 11)
-         */
+       */
       const MutationObserver = (function() {
         const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
 
@@ -264,8 +272,8 @@ export default {
     }
   },
   /**
-     * Removes "resize" window listener
+   * Removes "resize" window listener
-     */
+   */
   beforeDestroy() {
     window.removeEventListener('resize', this.onWindowResize)
 
@@ -275,15 +283,15 @@ export default {
   },
   computed: {
     /**
-       * Returns true if height is set to "auto"
+     * Returns true if height is set to "auto"
-       */
+     */
     isAutoHeight() {
       return this.modal.heightType === 'auto'
     },
     /**
-       * Calculates and returns modal position based on the
+     * Calculates and returns modal position based on the
-       * pivots, window size and modal size
+     * pivots, window size and modal size
-       */
+     */
     position() {
       const {
         window,
@@ -306,25 +314,27 @@ export default {
       }
     },
     /**
-       * Returns pixel width (if set with %) and makes sure that modal size
+     * Returns pixel width (if set with %) and makes sure that modal size
-       * fits the window
+     * fits the window
-       */
+     */
     trueModalWidth() {
-      const { window, modal, adaptive, minWidth } = this
+      const { window, modal, adaptive, minWidth, maxWidth } = this
 
       const value =
         modal.widthType === '%' ? window.width / 100 * modal.width : modal.width
 
-      return adaptive ? inRange(minWidth, window.width, value) : value
+      const max = Math.min(window.width, maxWidth)
+
+      return adaptive ? inRange(minWidth, max, value) : value
     },
     /**
-       * Returns pixel height (if set with %) and makes sure that modal size
+     * Returns pixel height (if set with %) and makes sure that modal size
-       * fits the window.
+     * fits the window.
-       *
+     *
-       * Returns modal.renderedHeight if height set as "auto"
+     * Returns modal.renderedHeight if height set as "auto"
-       */
+     */
     trueModalHeight() {
-      const { window, modal, isAutoHeight, adaptive } = this
+      const { window, modal, isAutoHeight, adaptive, maxHeight } = this
 
       const value =
         modal.heightType === '%'
@@ -336,13 +346,13 @@ export default {
         return this.modal.renderedHeight
       }
 
-      return adaptive
+      const max = Math.min(window.height, maxHeight)
-        ? inRange(this.minHeight, this.window.height, value)
+
-        : value
+      return adaptive ? inRange(this.minHeight, max, value) : value
     },
     /**
-       * Returns class list for screen overlay (modal background)
+     * Returns class list for screen overlay (modal background)
-       */
+     */
     overlayClass() {
       return {
         'v--modal-overlay': true,
@@ -350,14 +360,14 @@ export default {
       }
     },
     /**
-       * Returns class list for modal itself
+     * Returns class list for modal itself
-       */
+     */
     modalClass() {
       return ['v--modal-box', this.classes]
     },
     /**
-       * CSS styles for position and size of the modal
+     * CSS styles for position and size of the modal
-       */
+     */
     modalStyle() {
       return {
         top: this.position.top + 'px',
@@ -369,14 +379,14 @@ export default {
   },
   methods: {
     /**
-       * Initializes modal's size & position,
+     * Initializes modal's size & position,
-       * if "reset" flag is set to true - this function will be called
+     * if "reset" flag is set to true - this function will be called
-       * every time "beforeOpen" is triggered
+     * every time "beforeOpen" is triggered
-       */
+     */
     setInitialSize() {
-      let { modal } = this
+      const { modal } = this
-      let width = parseNumber(this.width)
+      const width = parseNumber(this.width)
-      let height = parseNumber(this.height)
+      const height = parseNumber(this.height)
 
       modal.width = width.value
       modal.widthType = width.type
@@ -396,10 +406,10 @@ export default {
     },
 
     /**
-       * Generates event object
+     * Generates event object
-       */
+     */
     genEventObject(params) {
-      var eventData = {
+      const eventData = {
         name: this.name,
         timestamp: Date.now(),
         canceled: false,
@@ -409,8 +419,8 @@ export default {
       return Object.assign(eventData, params || {})
     },
     /**
-       * Event handler which is triggered on modal resize
+     * Event handler which is triggered on modal resize
-       */
+     */
     onModalResize(event) {
       this.modal.widthType = 'px'
       this.modal.width = event.size.width
@@ -424,20 +434,19 @@ export default {
       this.$emit('resize', resizeEvent)
     },
     /**
-       * Event handler which is triggered on $modal.show and $modal.hight
+     * Event handler which is triggered on $modal.show and $modal.hight
-       * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
+     * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
-       * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
+     * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
-       */
+     */
     toggle(state, params) {
       const { reset, scrollable, visible } = this
-
       const beforeEventName = visible ? 'before-close' : 'before-open'
 
       if (beforeEventName === 'before-open') {
         /**
-           * Need to unfocus previously focused element, otherwise
+         * Need to unfocus previously focused element, otherwise
-           * all keypress events (ESC press, for example) will trigger on that element.
+         * all keypress events (ESC press, for example) will trigger on that element.
-           */
+         */
         if (document.activeElement) {
           document.activeElement.blur()
         }
@@ -479,15 +488,16 @@ export default {
         typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
 
       if (selector) {
-        var handler = this.$refs.overlay.querySelector(selector)
+        const handler = this.$refs.overlay.querySelector(selector)
+
         if (handler) {
           return handler
         }
       }
     },
     /**
-       * Event handler that is triggered when background overlay is clicked
+     * Event handler that is triggered when background overlay is clicked
-       */
+     */
     onBackgroundClick() {
       if (this.clickToClose) {
         this.toggle(false)
@@ -564,12 +574,12 @@ export default {
     },
 
     /**
-       * 'opened' and 'closed' events are `$emit`ed here.
+     * 'opened' and 'closed' events are `$emit`ed here.
-       * This is called in watch.visible.
+     * This is called in watch.visible.
-       * Because modal DOM updates are async,
+     * Because modal DOM updates are async,
-       * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
+     * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
-       * (fixes #15)
+     * (fixes #15)
-       */
+     */
     callAfterEvent(state) {
       if (state) {
         this.connectObserver()
@@ -584,11 +594,11 @@ export default {
     },
 
     /**
-       * Update $data.modal.renderedHeight using getBoundingClientRect.
+     * Update $data.modal.renderedHeight using getBoundingClientRect.
-       * This method is called when:
+     * This method is called when:
-       * 1. modal opened
+     * 1. modal opened
-       * 2. MutationObserver's observe callback
+     * 2. MutationObserver's observe callback
-       */
+     */
     updateRenderedHeight() {
       if (this.$refs.modal) {
         this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
@@ -596,9 +606,9 @@ export default {
     },
 
     /**
-       * Start observing modal's DOM, if childList or subtree changes,
+     * Start observing modal's DOM, if childList or subtree changes,
-       * the callback (registered in beforeMount) will be called.
+     * the callback (registered in beforeMount) will be called.
-       */
+     */
     connectObserver() {
       if (this.mutationObserver) {
         this.mutationObserver.observe(this.$refs.modal, {
@@ -610,8 +620,8 @@ export default {
     },
 
     /**
-       * Disconnects MutationObserver
+     * Disconnects MutationObserver
-       */
+     */
     disconnectObserver() {
       if (this.mutationObserver) {
         this.mutationObserver.disconnect()

src/parser.js

@@ -28,7 +28,8 @@ var getType = value => {
   }
 
   for (var i = 0; i < types.length; i++) {
-    let type = types[i]
+    const type = types[i]
+
     if (type.regexp.test(value)) {
       return {
         type: type.name,