From 0b05c5a41df9b7d946e1a495fe74d240d470bb21 Mon Sep 17 00:00:00 2001 From: Luca Degasperi Date: Thu, 29 Mar 2018 14:03:38 +0200 Subject: [PATCH 1/5] Update index.js --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 805ca65..d0ce53b 100644 --- a/src/index.js +++ b/src/index.js @@ -24,14 +24,14 @@ const Plugin = { _setDynamicContainer (dynamicContainer) { Plugin.dynamicContainer = dynamicContainer }, - show (modal, paramsOrProps, params) { + show (modal, paramsOrProps, params, events = null) { 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 component must be present on the page') } else { - Plugin.dynamicContainer.add(modal, paramsOrProps, params) + Plugin.dynamicContainer.add(modal, paramsOrProps, params, events) } } }, From fc89c464f47b75fc8432ac0ef291862d367bdc6f Mon Sep 17 00:00:00 2001 From: Luca Degasperi Date: Thu, 29 Mar 2018 14:04:14 +0200 Subject: [PATCH 2/5] Update ModalsContainer.vue --- src/ModalsContainer.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ModalsContainer.vue b/src/ModalsContainer.vue index 36591f2..0c13673 100644 --- a/src/ModalsContainer.vue +++ b/src/ModalsContainer.vue @@ -4,6 +4,7 @@ v-for="modal in modals" :key="modal.id" v-bind="modal.config" + v-on="modal.events" @closed="remove(modal.id)" > { this.$modal.show(config.name) From 1b3f321feab47ee53a80a922a5df679ecf0cdcf5 Mon Sep 17 00:00:00 2001 From: Luca Degasperi Date: Thu, 29 Mar 2018 14:04:48 +0200 Subject: [PATCH 3/5] Update index.js --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index d0ce53b..643c616 100644 --- a/src/index.js +++ b/src/index.js @@ -24,7 +24,7 @@ const Plugin = { _setDynamicContainer (dynamicContainer) { Plugin.dynamicContainer = dynamicContainer }, - show (modal, paramsOrProps, params, events = null) { + show (modal, paramsOrProps, params, events = {}) { if (typeof modal === 'string') { Plugin.event.$emit('toggle', modal, true, paramsOrProps) } else { From 0ee180aa1aea0d344d71f7d4582b6029b776470b Mon Sep 17 00:00:00 2001 From: Luca Degasperi Date: Thu, 29 Mar 2018 14:19:48 +0200 Subject: [PATCH 4/5] Updated this version --- dist/index.js | 43 ++++++++++++++++++++++++++----------------- dist/ssr.index.js | 43 ++++++++++++++++++++++++++----------------- dist/ssr.nocss.js | 37 +++++++++++++++++++++++-------------- dist/styles.css | 7 +++++-- 4 files changed, 80 insertions(+), 50 deletions(-) diff --git a/dist/index.js b/dist/index.js index 23b5e4a..a15fd2c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -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 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 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; diff --git a/dist/ssr.index.js b/dist/ssr.index.js index fb15955..4c8f228 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -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 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 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; diff --git a/dist/ssr.nocss.js b/dist/ssr.nocss.js index 0a359e3..0f5c7ca 100644 --- a/dist/ssr.nocss.js +++ b/dist/ssr.nocss.js @@ -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 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 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; diff --git a/dist/styles.css b/dist/styles.css index caa5d53..4ab32d6 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -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; From fc3d6a3dbe345fd51729ee21f02b2459ca3bef64 Mon Sep 17 00:00:00 2001 From: Luca Degasperi Date: Thu, 29 Mar 2018 15:25:48 +0200 Subject: [PATCH 5/5] Update README.md --- README.md | 48 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c91bb7c..3b3475c 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ And include the `` component it in your project: ``` -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 { ``` +Example with a dynamic modal: +```vue +export default { + name: 'ExampleModal', + data () { + return { + time: 0, + duration: 5000 + } + }, + methods: { + openModal () { + this.$modal.show({ + template: `{{time}}`, + 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() + } + } + } +} + +``` + This example, initializes `time` variable every time the modal is being opened. And then forbits closing it for the next 5000 ms