KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 09:50:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added maxWidth minWidth

Browse Source
This commit is contained in:
yev
2018-01-28 10:10:03 +00:00
parent 665cd667f5
commit a8ecb750d1
7 changed files with 159 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demo/client_side_rendering/src/components/ConditionalModal.vue
View File

@@ -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>

25
dist/index.js vendored
View File

@@ -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;
return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
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, 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;
return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
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;
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;

25
dist/ssr.index.js vendored
View File

@@ -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;
return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
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, 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;
return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
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;
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;

25
dist/ssr.nocss.js vendored
View File

@@ -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;
return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
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, 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;
return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
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;
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;

4
package.json
View File

@@ -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"
}
}
}

180
src/Modal.vue
View File

@@ -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.
* Events 'opened' and 'closed' is called here
* inside `setTimeout` and `$nextTick`, after the DOM changes.
* This fixes `$refs.modal` `undefined` bug (fixes #15)
*/
* Sets the visibility of overlay and modal.
* Events 'opened' and 'closed' is called here
* inside `setTimeout` and `$nextTick`, after the DOM changes.
* 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'
* The callback will be called when modal DOM changes,
* this is for updating the `top` attribute for height 'auto' modals.
*/
* Only observe when using height: 'auto'
* The callback will be called when modal DOM changes,
* this is for updating the `top` attribute for height 'auto' modals.
*/
if (this.isAutoHeight) {
/**
* MutationObserver feature detection:
* Detects if MutationObserver is available, return false if not.
* No polyfill is provided here, so height 'auto' recalculation will
* simply stay at its initial height (won't crash).
* (Provide polyfill to support IE < 11)
*/
* MutationObserver feature detection:
* Detects if MutationObserver is available, return false if not.
* No polyfill is provided here, so height 'auto' recalculation will
* simply stay at its initial height (won't crash).
* (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
* pivots, window size and modal size
*/
* Calculates and returns modal position based on the
* 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
* fits the window
*/
* Returns pixel width (if set with %) and makes sure that modal size
* 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
* fits the window.
*
* Returns modal.renderedHeight if height set as "auto"
*/
* Returns pixel height (if set with %) and makes sure that modal size
* fits the window.
*
* 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
? inRange(this.minHeight, this.window.height, value)
: value
const max = Math.min(window.height, maxHeight)
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,
* if "reset" flag is set to true - this function will be called
* every time "beforeOpen" is triggered
*/
* Initializes modal's size & position,
* if "reset" flag is set to true - this function will be called
* every time "beforeOpen" is triggered
*/
setInitialSize() {
let { modal } = this
let width = parseNumber(this.width)
let height = parseNumber(this.height)
const { modal } = this
const width = parseNumber(this.width)
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
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
*/
* Event handler which is triggered on $modal.show and $modal.hight
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
* 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
* all keypress events (ESC press, for example) will trigger on that element.
*/
* Need to unfocus previously focused element, otherwise
* 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.
* This is called in watch.visible.
* Because modal DOM updates are async,
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
* (fixes #15)
*/
* 'opened' and 'closed' events are `$emit`ed here.
* This is called in watch.visible.
* Because modal DOM updates are async,
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
* (fixes #15)
*/
callAfterEvent(state) {
if (state) {
this.connectObserver()
@@ -584,11 +594,11 @@ export default {
},
/**
* Update $data.modal.renderedHeight using getBoundingClientRect.
* This method is called when:
* 1. modal opened
* 2. MutationObserver's observe callback
*/
* Update $data.modal.renderedHeight using getBoundingClientRect.
* This method is called when:
* 1. modal opened
* 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,
* the callback (registered in beforeMount) will be called.
*/
* Start observing modal's DOM, if childList or subtree changes,
* 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()

3
src/parser.js
View File

@@ -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,