KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +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;

2
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": {

34
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,
@@ -310,12 +318,14 @@ export default {
* 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
@@ -324,7 +334,7 @@ export default {
* 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,9 +346,9 @@ 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)
@@ -374,9 +384,9 @@ export default {
* 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
@@ -399,7 +409,7 @@ export default {
* Generates event object
*/
genEventObject(params) {
var eventData = {
const eventData = {
name: this.name,
timestamp: Date.now(),
canceled: false,
@@ -430,7 +440,6 @@ export default {
*/
toggle(state, params) {
const { reset, scrollable, visible } = this
const beforeEventName = visible ? 'before-close' : 'before-open'
if (beforeEventName === 'before-open') {
@@ -479,7 +488,8 @@ 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
}

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,