diff --git a/dist/index.js b/dist/index.js index 14cba6f..c15f52e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -207,7 +207,7 @@ }, function(module, exports, __webpack_require__) { __webpack_require__(18); var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null); - Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue", + Component.options.__file = "/Users/admin/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."), @@ -215,7 +215,7 @@ }, function(module, exports, __webpack_require__) { __webpack_require__(19); var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null); - Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue", + Component.options.__file = "/Users/admin/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."), @@ -440,9 +440,10 @@ _this2.updateRenderedHeight(); })); } + this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp); }, beforeDestroy: function() { - window.removeEventListener("resize", this.onWindowResize); + window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp); }, computed: { isAutoHeight: function() { @@ -488,6 +489,9 @@ modal.width = width.value, modal.widthType = width.type, modal.height = height.value, modal.heightType = height.type; }, + onEscapeKeyUp: function(event) { + 27 === (event.keyCode || event.which) && this.visible && this.$modal.hide(this.name); + }, onWindowResize: function() { this.window.width = window.innerWidth, this.window.height = window.innerHeight; }, @@ -710,7 +714,7 @@ }, function(module, exports, __webpack_require__) { __webpack_require__(20); var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null); - Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue", + Component.options.__file = "/Users/admin/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."), @@ -866,4 +870,4 @@ return styles; }; } ]); -}); +}); \ No newline at end of file diff --git a/dist/ssr.index.js b/dist/ssr.index.js index 55fe5a2..e0e2170 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -161,7 +161,7 @@ }, function(module, exports, __webpack_require__) { __webpack_require__(18); var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null); - Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue", + Component.options.__file = "/Users/admin/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."), @@ -169,7 +169,7 @@ }, function(module, exports, __webpack_require__) { __webpack_require__(19); var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null); - Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue", + Component.options.__file = "/Users/admin/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."), @@ -394,9 +394,10 @@ _this2.updateRenderedHeight(); })); } + this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp); }, beforeDestroy: function() { - window.removeEventListener("resize", this.onWindowResize); + window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp); }, computed: { isAutoHeight: function() { @@ -442,6 +443,9 @@ modal.width = width.value, modal.widthType = width.type, modal.height = height.value, modal.heightType = height.type; }, + onEscapeKeyUp: function(event) { + 27 === (event.keyCode || event.which) && this.visible && this.$modal.hide(this.name); + }, onWindowResize: function() { this.window.width = window.innerWidth, this.window.height = window.innerHeight; }, @@ -664,7 +668,7 @@ }, function(module, exports, __webpack_require__) { __webpack_require__(20); var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null); - Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue", + Component.options.__file = "/Users/admin/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."), @@ -820,4 +824,4 @@ return styles; }; } ]); -}); +}); \ No newline at end of file diff --git a/src/Modal.vue b/src/Modal.vue index 04f0e90..fee7f85 100644 --- a/src/Modal.vue +++ b/src/Modal.vue @@ -256,12 +256,20 @@ }) } } + + if (this.clickToClose) { + window.addEventListener('keyup', this.onEscapeKeyUp) + } }, /** * Removes "resize" window listener */ beforeDestroy () { window.removeEventListener('resize', this.onWindowResize) + + if (this.clickToClose) { + window.removeEventListener('keyup', this.onEscapeKeyUp) + } }, computed: { /** @@ -372,6 +380,12 @@ modal.heightType = height.type }, + onEscapeKeyUp (event) { + if ((event.keyCode || event.which) === 27 && this.visible) { + this.$modal.hide(this.name) + } + }, + onWindowResize () { this.window.width = window.innerWidth this.window.height = window.innerHeight