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

Merge pull request #208 from lucadegasperi/master

Browse Source 
Added modal events support for dynamic modals
This commit is contained in:
Yev Vlasenko
2018-03-31 22:05:14 +01:00
committed by GitHub
parent 653b43c3ac fc3d6a3dbe
commit 2e60ee1932
7 changed files with 133 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
README.md
View File

@@ -155,7 +155,7 @@ And include the `<modals-container/>` component it in your project:
<modals-container/>
```
Call it (the first argument is the component definition, the second are component properties, and the third modal parameters):
Call it (the first argument is the component definition, the second are component properties, the third modal parameters, and the fourth the modal event listeners):
```javascript
this.$modal.show({
@@ -168,6 +168,10 @@ this.$modal.show({
props: ['text']
}, {
text: 'This text is passed as a property'
}, {
height: 'auto'
}, {
'before-close': (event) => { console.log('this will be called before the modal closes'); }
})
```
@@ -295,6 +299,48 @@ export default {
</script>
```
Example with a dynamic modal:
```vue
export default {
name: 'ExampleModal',
data () {
return {
time: 0,
duration: 5000
}
},
methods: {
openModal () {
this.$modal.show({
template: `<b>{{time}}</b>`,
props: ['time']
}, {
time: this.time
}, {
width: 300,
height: 300
}, {
'before-open': this.beforeOpen,
'before-close': this.beforeClose
})
},
beforeOpen (event) {
console.log(event)
// Set the opening time of the modal
this.time = Date.now()
},
beforeClose (event) {
console.log(event)
// If modal was open less then 5000 ms - prevent closing it
if (this.time + this.duration < Date.now()) {
event.stop()
}
}
}
}
</script>
```
This example, initializes `time` variable every time the modal is being opened.
And then forbits closing it for the next 5000 ms

43
dist/index.js vendored
View File

@@ -181,7 +181,8 @@
Plugin.dynamicContainer = dynamicContainer;
},
show: function(modal, paramsOrProps, params) {
"string" == typeof modal ? Plugin.event.$emit("toggle", modal, !0, paramsOrProps) : null === Plugin.dynamicContainer ? console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page") : Plugin.dynamicContainer.add(modal, paramsOrProps, params);
var events = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
"string" == typeof modal ? Plugin.event.$emit("toggle", modal, !0, paramsOrProps) : null === Plugin.dynamicContainer ? console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page") : Plugin.dynamicContainer.add(modal, paramsOrProps, params, events);
},
hide: function(name, params) {
Plugin.event.$emit("toggle", name, !1, params);
@@ -208,20 +209,20 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(21);
var Component = __webpack_require__(0)(__webpack_require__(8), __webpack_require__(18), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "/Users/luca/Projects/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__(22);
var Component = __webpack_require__(0)(__webpack_require__(9), __webpack_require__(19), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "/Users/luca/Projects/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;
}, function(module, exports, __webpack_require__) {
var Component = __webpack_require__(0)(__webpack_require__(10), __webpack_require__(17), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\ModalsContainer.vue",
Component.options.__file = "/Users/luca/Projects/vue-js-modal/src/ModalsContainer.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] ModalsContainer.vue: functional components are not supported with templates, they should use render functions."),
@@ -496,6 +497,9 @@
scrollable: this.scrollable && this.isAutoHeight
};
},
backgroundClickClass: function() {
return [ "v--modal-background-click" ];
},
modalClass: function() {
return [ "v--modal-box", this.classes ];
},
@@ -543,7 +547,9 @@
if (visible !== state) {
var beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(),
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && (document.getElementsByTagName("html")[0].classList.add("v--modal-block-scroll"),
document.body.classList.add("v--modal-block-scroll"))) : scrollable && (document.getElementsByTagName("html")[0].classList.remove("v--modal-block-scroll"),
document.body.classList.remove("v--modal-block-scroll"));
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
@@ -630,14 +636,15 @@
this.$modal._setDynamicContainer(this);
},
methods: {
add: function(modal, params, config) {
add: function(modal, params, config, events) {
var _this = this, id = this.uid++;
config = config ? Object.assign({}, config) : {}, config.name || (config.name = "_dynamic-modal-" + id),
this.modals.push({
id: id,
component: modal,
params: params || {},
config: config
config: config,
events: events
}), this.$nextTick(function() {
_this.$modal.show(config.name);
});
@@ -767,15 +774,15 @@
};
exports.default = parse;
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-dialog div {\r\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\r\n width: 100%;\r\n height: 100%;\n}\n.vue-dialog .dialog-content {\r\n flex: 1 0 auto;\r\n width: 100%;\r\n padding: 15px;\r\n font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\r\n font-weight: 600;\r\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\r\n display: flex;\r\n flex: 0 1 auto;\r\n width: 100%;\r\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\r\n width: 100%;\r\n padding-bottom: 15px;\n}\n.vue-dialog-button {\r\n font-size: 12px !important;\r\n background: transparent;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n line-height: 40px;\r\n height: 40px;\r\n color: inherit;\r\n font: inherit;\r\n outline: none;\n}\n.vue-dialog-button:hover {\r\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\r\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\r\n border-left: 1px solid #eee;\n}\r\n", "" ]);
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-dialog div {\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n}\n.vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color: inherit;\n font: inherit;\n outline: none;\n}\n.vue-dialog-button:hover {\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n border-left: 1px solid #eee;\n}\n", "" ]);
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.v--modal-block-scroll {\r\n position: absolute;\r\n overflow: hidden;\r\n width: 100vw;\n}\n.v--modal-overlay {\r\n position: fixed;\r\n box-sizing: border-box;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n background: rgba(0, 0, 0, 0.2);\r\n z-index: 999;\r\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\r\n height: 100%;\r\n min-height: 100vh;\r\n overflow-y: auto;\r\n padding-bottom: 10px;\r\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\r\n position: relative;\r\n overflow: hidden;\r\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\r\n margin-bottom: 2px;\r\n /* transition: top 0.2s ease; */\n}\n.v--modal {\r\n background-color: white;\r\n text-align: left;\r\n border-radius: 3px;\r\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\r\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\r\n width: 100vw;\r\n height: 100vh;\r\n margin: 0;\r\n left: 0;\r\n top: 0;\n}\n.v--modal-top-right {\r\n display: block;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\n}\n.overlay-fade-enter-active,\r\n.overlay-fade-leave-active {\r\n transition: all 0.2s;\n}\n.overlay-fade-enter,\r\n.overlay-fade-leave-active {\r\n opacity: 0;\n}\n.nice-modal-fade-enter-active,\r\n.nice-modal-fade-leave-active {\r\n transition: all 0.4s;\n}\n.nice-modal-fade-enter,\r\n.nice-modal-fade-leave-active {\r\n opacity: 0;\r\n transform: translateY(-20px);\n}\r\n", "" ]);
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-background-click {\n min-height: 100%;\n width: 100%;\n padding-bottom: 10px;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n margin-bottom: 2px;\n /* transition: top 0.2s ease; */\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]);
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-modal-resizer {\r\n display: block;\r\n overflow: hidden;\r\n position: absolute;\r\n width: 12px;\r\n height: 12px;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 9999999;\r\n background: transparent;\r\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\r\n display: block;\r\n position: absolute;\r\n content: '';\r\n background: transparent;\r\n left: 0;\r\n top: 0;\r\n width: 0;\r\n height: 0;\r\n border-bottom: 10px solid #ddd;\r\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\r\n border-bottom: 10px solid #369be9;\n}\r\n", "" ]);
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-modal-resizer {\n display: block;\n overflow: hidden;\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n z-index: 9999999;\n background: transparent;\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\n display: block;\n position: absolute;\n content: '';\n background: transparent;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n border-bottom: 10px solid #ddd;\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369be9;\n}\n", "" ]);
}, function(module, exports, __webpack_require__) {
__webpack_require__(23);
var Component = __webpack_require__(0)(__webpack_require__(11), __webpack_require__(20), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue",
Component.options.__file = "/Users/luca/Projects/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."),
@@ -789,14 +796,14 @@
id: "#modals-container"
}
}, _vm._l(_vm.modals, function(modal) {
return _c("modal", _vm._b({
return _c("modal", _vm._g(_vm._b({
key: modal.id,
on: {
closed: function($event) {
_vm.remove(modal.id);
}
}
}, "modal", modal.config, !1), [ _c(modal.component, _vm._b({
}, "modal", modal.config, !1), modal.events), [ _c(modal.component, _vm._b({
tag: "component",
on: {
close: function($event) {
@@ -884,13 +891,15 @@
attrs: {
"aria-expanded": _vm.visible.toString(),
"data-modal": _vm.name
},
}
}, [ _c("div", {
class: _vm.backgroundClickClass,
on: {
mousedown: function($event) {
$event.stopPropagation(), _vm.onBackgroundClick($event);
return $event.stopPropagation(), _vm.onBackgroundClick($event);
},
touchstart: function($event) {
$event.stopPropagation(), _vm.onBackgroundClick($event);
return $event.stopPropagation(), _vm.onBackgroundClick($event);
}
}
}, [ _c("div", {
@@ -919,7 +928,7 @@
on: {
resize: _vm.onModalResize
}
}) : _vm._e() ], 2) : _vm._e() ]) ], 1) : _vm._e() ]);
}) : _vm._e() ], 2) : _vm._e() ]) ], 1) ]) : _vm._e() ]);
},
staticRenderFns: []
}, module.exports.render._withStripped = !0;

43
dist/ssr.index.js vendored
View File

@@ -135,7 +135,8 @@
Plugin.dynamicContainer = dynamicContainer;
},
show: function(modal, paramsOrProps, params) {
"string" == typeof modal ? Plugin.event.$emit("toggle", modal, !0, paramsOrProps) : null === Plugin.dynamicContainer ? console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page") : Plugin.dynamicContainer.add(modal, paramsOrProps, params);
var events = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
"string" == typeof modal ? Plugin.event.$emit("toggle", modal, !0, paramsOrProps) : null === Plugin.dynamicContainer ? console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page") : Plugin.dynamicContainer.add(modal, paramsOrProps, params, events);
},
hide: function(name, params) {
Plugin.event.$emit("toggle", name, !1, params);
@@ -162,20 +163,20 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(21);
var Component = __webpack_require__(0)(__webpack_require__(8), __webpack_require__(18), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "/Users/luca/Projects/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__(22);
var Component = __webpack_require__(0)(__webpack_require__(9), __webpack_require__(19), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "/Users/luca/Projects/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;
}, function(module, exports, __webpack_require__) {
var Component = __webpack_require__(0)(__webpack_require__(10), __webpack_require__(17), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\ModalsContainer.vue",
Component.options.__file = "/Users/luca/Projects/vue-js-modal/src/ModalsContainer.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] ModalsContainer.vue: functional components are not supported with templates, they should use render functions."),
@@ -450,6 +451,9 @@
scrollable: this.scrollable && this.isAutoHeight
};
},
backgroundClickClass: function() {
return [ "v--modal-background-click" ];
},
modalClass: function() {
return [ "v--modal-box", this.classes ];
},
@@ -497,7 +501,9 @@
if (visible !== state) {
var beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(),
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && (document.getElementsByTagName("html")[0].classList.add("v--modal-block-scroll"),
document.body.classList.add("v--modal-block-scroll"))) : scrollable && (document.getElementsByTagName("html")[0].classList.remove("v--modal-block-scroll"),
document.body.classList.remove("v--modal-block-scroll"));
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
@@ -584,14 +590,15 @@
this.$modal._setDynamicContainer(this);
},
methods: {
add: function(modal, params, config) {
add: function(modal, params, config, events) {
var _this = this, id = this.uid++;
config = config ? Object.assign({}, config) : {}, config.name || (config.name = "_dynamic-modal-" + id),
this.modals.push({
id: id,
component: modal,
params: params || {},
config: config
config: config,
events: events
}), this.$nextTick(function() {
_this.$modal.show(config.name);
});
@@ -721,15 +728,15 @@
};
exports.default = parse;
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-dialog div {\r\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\r\n width: 100%;\r\n height: 100%;\n}\n.vue-dialog .dialog-content {\r\n flex: 1 0 auto;\r\n width: 100%;\r\n padding: 15px;\r\n font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\r\n font-weight: 600;\r\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\r\n display: flex;\r\n flex: 0 1 auto;\r\n width: 100%;\r\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\r\n width: 100%;\r\n padding-bottom: 15px;\n}\n.vue-dialog-button {\r\n font-size: 12px !important;\r\n background: transparent;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n line-height: 40px;\r\n height: 40px;\r\n color: inherit;\r\n font: inherit;\r\n outline: none;\n}\n.vue-dialog-button:hover {\r\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\r\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\r\n border-left: 1px solid #eee;\n}\r\n", "" ]);
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-dialog div {\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n}\n.vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color: inherit;\n font: inherit;\n outline: none;\n}\n.vue-dialog-button:hover {\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n border-left: 1px solid #eee;\n}\n", "" ]);
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.v--modal-block-scroll {\r\n position: absolute;\r\n overflow: hidden;\r\n width: 100vw;\n}\n.v--modal-overlay {\r\n position: fixed;\r\n box-sizing: border-box;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n background: rgba(0, 0, 0, 0.2);\r\n z-index: 999;\r\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\r\n height: 100%;\r\n min-height: 100vh;\r\n overflow-y: auto;\r\n padding-bottom: 10px;\r\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\r\n position: relative;\r\n overflow: hidden;\r\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\r\n margin-bottom: 2px;\r\n /* transition: top 0.2s ease; */\n}\n.v--modal {\r\n background-color: white;\r\n text-align: left;\r\n border-radius: 3px;\r\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\r\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\r\n width: 100vw;\r\n height: 100vh;\r\n margin: 0;\r\n left: 0;\r\n top: 0;\n}\n.v--modal-top-right {\r\n display: block;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\n}\n.overlay-fade-enter-active,\r\n.overlay-fade-leave-active {\r\n transition: all 0.2s;\n}\n.overlay-fade-enter,\r\n.overlay-fade-leave-active {\r\n opacity: 0;\n}\n.nice-modal-fade-enter-active,\r\n.nice-modal-fade-leave-active {\r\n transition: all 0.4s;\n}\n.nice-modal-fade-enter,\r\n.nice-modal-fade-leave-active {\r\n opacity: 0;\r\n transform: translateY(-20px);\n}\r\n", "" ]);
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-background-click {\n min-height: 100%;\n width: 100%;\n padding-bottom: 10px;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n margin-bottom: 2px;\n /* transition: top 0.2s ease; */\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]);
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-modal-resizer {\r\n display: block;\r\n overflow: hidden;\r\n position: absolute;\r\n width: 12px;\r\n height: 12px;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 9999999;\r\n background: transparent;\r\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\r\n display: block;\r\n position: absolute;\r\n content: '';\r\n background: transparent;\r\n left: 0;\r\n top: 0;\r\n width: 0;\r\n height: 0;\r\n border-bottom: 10px solid #ddd;\r\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\r\n border-bottom: 10px solid #369be9;\n}\r\n", "" ]);
exports = module.exports = __webpack_require__(1)(), exports.push([ module.i, "\n.vue-modal-resizer {\n display: block;\n overflow: hidden;\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n z-index: 9999999;\n background: transparent;\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\n display: block;\n position: absolute;\n content: '';\n background: transparent;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n border-bottom: 10px solid #ddd;\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369be9;\n}\n", "" ]);
}, function(module, exports, __webpack_require__) {
__webpack_require__(23);
var Component = __webpack_require__(0)(__webpack_require__(11), __webpack_require__(20), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue",
Component.options.__file = "/Users/luca/Projects/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."),
@@ -743,14 +750,14 @@
id: "#modals-container"
}
}, _vm._l(_vm.modals, function(modal) {
return _c("modal", _vm._b({
return _c("modal", _vm._g(_vm._b({
key: modal.id,
on: {
closed: function($event) {
_vm.remove(modal.id);
}
}
}, "modal", modal.config, !1), [ _c(modal.component, _vm._b({
}, "modal", modal.config, !1), modal.events), [ _c(modal.component, _vm._b({
tag: "component",
on: {
close: function($event) {
@@ -838,13 +845,15 @@
attrs: {
"aria-expanded": _vm.visible.toString(),
"data-modal": _vm.name
},
}
}, [ _c("div", {
class: _vm.backgroundClickClass,
on: {
mousedown: function($event) {
$event.stopPropagation(), _vm.onBackgroundClick($event);
return $event.stopPropagation(), _vm.onBackgroundClick($event);
},
touchstart: function($event) {
$event.stopPropagation(), _vm.onBackgroundClick($event);
return $event.stopPropagation(), _vm.onBackgroundClick($event);
}
}
}, [ _c("div", {
@@ -873,7 +882,7 @@
on: {
resize: _vm.onModalResize
}
}) : _vm._e() ], 2) : _vm._e() ]) ], 1) : _vm._e() ]);
}) : _vm._e() ], 2) : _vm._e() ]) ], 1) ]) : _vm._e() ]);
},
staticRenderFns: []
}, module.exports.render._withStripped = !0;

37
dist/ssr.nocss.js vendored
View File

@@ -72,7 +72,8 @@
Plugin.dynamicContainer = dynamicContainer;
},
show: function(modal, paramsOrProps, params) {
"string" == typeof modal ? Plugin.event.$emit("toggle", modal, !0, paramsOrProps) : null === Plugin.dynamicContainer ? console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page") : Plugin.dynamicContainer.add(modal, paramsOrProps, params);
var events = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
"string" == typeof modal ? Plugin.event.$emit("toggle", modal, !0, paramsOrProps) : null === Plugin.dynamicContainer ? console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page") : Plugin.dynamicContainer.add(modal, paramsOrProps, params, events);
},
hide: function(name, params) {
Plugin.event.$emit("toggle", name, !1, params);
@@ -99,20 +100,20 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(11);
var Component = __webpack_require__(0)(__webpack_require__(6), __webpack_require__(16), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "/Users/luca/Projects/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__(12);
var Component = __webpack_require__(0)(__webpack_require__(7), __webpack_require__(17), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "/Users/luca/Projects/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;
}, function(module, exports, __webpack_require__) {
var Component = __webpack_require__(0)(__webpack_require__(8), __webpack_require__(15), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\ModalsContainer.vue",
Component.options.__file = "/Users/luca/Projects/vue-js-modal/src/ModalsContainer.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] ModalsContainer.vue: functional components are not supported with templates, they should use render functions."),
@@ -387,6 +388,9 @@
scrollable: this.scrollable && this.isAutoHeight
};
},
backgroundClickClass: function() {
return [ "v--modal-background-click" ];
},
modalClass: function() {
return [ "v--modal-box", this.classes ];
},
@@ -434,7 +438,9 @@
if (visible !== state) {
var beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(),
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && (document.getElementsByTagName("html")[0].classList.add("v--modal-block-scroll"),
document.body.classList.add("v--modal-block-scroll"))) : scrollable && (document.getElementsByTagName("html")[0].classList.remove("v--modal-block-scroll"),
document.body.classList.remove("v--modal-block-scroll"));
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
@@ -521,14 +527,15 @@
this.$modal._setDynamicContainer(this);
},
methods: {
add: function(modal, params, config) {
add: function(modal, params, config, events) {
var _this = this, id = this.uid++;
config = config ? Object.assign({}, config) : {}, config.name || (config.name = "_dynamic-modal-" + id),
this.modals.push({
id: id,
component: modal,
params: params || {},
config: config
config: config,
events: events
}), this.$nextTick(function() {
_this.$modal.show(config.name);
});
@@ -660,7 +667,7 @@
}, function(module, exports) {}, function(module, exports) {}, function(module, exports) {}, function(module, exports, __webpack_require__) {
__webpack_require__(13);
var Component = __webpack_require__(0)(__webpack_require__(9), __webpack_require__(18), null, null);
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue",
Component.options.__file = "/Users/luca/Projects/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."),
@@ -674,14 +681,14 @@
id: "#modals-container"
}
}, _vm._l(_vm.modals, function(modal) {
return _c("modal", _vm._b({
return _c("modal", _vm._g(_vm._b({
key: modal.id,
on: {
closed: function($event) {
_vm.remove(modal.id);
}
}
}, "modal", modal.config, !1), [ _c(modal.component, _vm._b({
}, "modal", modal.config, !1), modal.events), [ _c(modal.component, _vm._b({
tag: "component",
on: {
close: function($event) {
@@ -769,13 +776,15 @@
attrs: {
"aria-expanded": _vm.visible.toString(),
"data-modal": _vm.name
},
}
}, [ _c("div", {
class: _vm.backgroundClickClass,
on: {
mousedown: function($event) {
$event.stopPropagation(), _vm.onBackgroundClick($event);
return $event.stopPropagation(), _vm.onBackgroundClick($event);
},
touchstart: function($event) {
$event.stopPropagation(), _vm.onBackgroundClick($event);
return $event.stopPropagation(), _vm.onBackgroundClick($event);
}
}
}, [ _c("div", {
@@ -804,7 +813,7 @@
on: {
resize: _vm.onModalResize
}
}) : _vm._e() ], 2) : _vm._e() ]) ], 1) : _vm._e() ]);
}) : _vm._e() ], 2) : _vm._e() ]) ], 1) ]) : _vm._e() ]);
},
staticRenderFns: []
}, module.exports.render._withStripped = !0;

7
dist/styles.css vendored
View File

@@ -1,6 +1,5 @@
.v--modal-block-scroll {
position: absolute;
overflow: hidden;
width: 100vw;
}
@@ -19,9 +18,13 @@
height: 100%;
min-height: 100vh;
overflow-y: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.v--modal-overlay .v--modal-background-click {
min-height: 100%;
width: 100%;
padding-bottom: 10px;
}
.v--modal-overlay .v--modal-box {
position: relative;
overflow: hidden;

6
src/ModalsContainer.vue
View File

@@ -4,6 +4,7 @@
v-for="modal in modals"
:key="modal.id"
v-bind="modal.config"
v-on="modal.events"
@closed="remove(modal.id)"
>
<component
@@ -26,7 +27,7 @@ export default {
this.$modal._setDynamicContainer(this)
},
methods: {
add (modal, params, config) {
add (modal, params, config, events) {
let id = this.uid++
config = config ? Object.assign({}, config) : {};
if (!config.name) {
@@ -36,7 +37,8 @@ export default {
id: id,
component: modal,
params: params || {},
config: config
config: config,
events: events
})
this.$nextTick(() => {
this.$modal.show(config.name)

4
src/index.js
View File

@@ -24,14 +24,14 @@ const Plugin = {
_setDynamicContainer (dynamicContainer) {
Plugin.dynamicContainer = dynamicContainer
},
show (modal, paramsOrProps, params) {
show (modal, paramsOrProps, params, events = {}) {
if (typeof modal === 'string') {
Plugin.event.$emit('toggle', modal, true, paramsOrProps)
} else {
if (Plugin.dynamicContainer === null) {
console.warn('[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page')
} else {
Plugin.dynamicContainer.add(modal, paramsOrProps, params)
Plugin.dynamicContainer.add(modal, paramsOrProps, params, events)
}
}
},