KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-12-08 20:48:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed focusing issue

Browse Source
This commit is contained in:
Yev Vlasenko
2017-11-26 11:30:19 +00:00
parent 3f68cdfdb4
commit aa388a692e
6 changed files with 218 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
demo/client_side_rendering/src/App.vue
View File

@@ -8,7 +8,10 @@
<demo-size-modal/> <demo-size-modal/>
<v-dialog <v-dialog
@opened="onEveryDialogOpen"/> @before-opened="dialogEvent('before-open')"
@before-closed="dialogEvent('before-close')"
@opened="dialogEvent('opened')"
@closed="dialogEvent('closed')"/>
<modal name="example-modal" <modal name="example-modal"
transition="nice-modal-fade" transition="nice-modal-fade"
@@ -185,6 +188,7 @@ export default {
}, },
{ {
title: 'LIKE', title: 'LIKE',
default: true,
handler: () => { handler: () => {
alert('LIKE LIKE LIKE') alert('LIKE LIKE LIKE')
} }
@@ -199,8 +203,8 @@ export default {
}) })
}, },
onEveryDialogOpen () { dialogEvent (eventName) {
console.log('Opened dialog') console.log('Dialog event: ' + eventName)
} }
}, },
} }

40
dist/index.js vendored
View File

@@ -207,7 +207,7 @@
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
__webpack_require__(18); __webpack_require__(18);
var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null); var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Dialog.vue", Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) { Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== 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."), }) && 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__) { }, function(module, exports, __webpack_require__) {
__webpack_require__(19); __webpack_require__(19);
var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null); var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Modal.vue", Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) { Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== 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."), }) && 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."),
@@ -260,15 +260,25 @@
}, },
methods: { methods: {
beforeOpened: function(event) { beforeOpened: function(event) {
this.params = event.params || {}, this.$emit("before-opened", event); window.addEventListener("keyup", this.onKeyUp), this.params = event.params || {},
this.$emit("before-opened", event);
}, },
beforeClosed: function(event) { beforeClosed: function(event) {
this.params = {}, this.$emit("before-closed", event); window.removeEventListener("keyup", this.onKeyUp), this.params = {}, this.$emit("before-closed", event);
}, },
click: function(i, event) { click: function(i, event) {
var button = this.buttons[i]; var source = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "click", button = this.buttons[i];
if ("function" == typeof button.handler) return button.handler(i, event); button && "function" == typeof button.handler ? button.handler(i, event, {
this.$modal.hide("dialog"); source: source
}) : this.$modal.hide("dialog");
},
onKeyUp: function(event) {
if (13 === event.which && this.buttons.length > 0) {
var buttonIndex = 1 === this.buttons.length ? 0 : this.buttons.findIndex(function(button) {
return button.default;
});
-1 !== buttonIndex && this.click(buttonIndex, event, "keypress");
}
} }
} }
}; };
@@ -490,7 +500,7 @@
modal.heightType = height.type; modal.heightType = height.type;
}, },
onEscapeKeyUp: function(event) { onEscapeKeyUp: function(event) {
27 === (event.keyCode || event.which) && this.visible && this.$modal.hide(this.name); 27 === event.which && this.visible && this.$modal.hide(this.name);
}, },
onWindowResize: function() { onWindowResize: function() {
this.window.width = window.innerWidth, this.window.height = window.innerHeight; this.window.width = window.innerWidth, this.window.height = window.innerHeight;
@@ -514,8 +524,8 @@
}, },
toggle: function(state, params) { toggle: function(state, params) {
var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open"; var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (reset && (this.setInitialSize(), this.shift.left = 0, "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(),
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.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
var stopEventExecution = !1, stop = function() { var stopEventExecution = !1, stop = function() {
stopEventExecution = !0; stopEventExecution = !0;
}, beforeEvent = this.genEventObject({ }, beforeEvent = this.genEventObject({
@@ -566,10 +576,10 @@
removeDraggableListeners: function() {}, removeDraggableListeners: function() {},
callAfterEvent: function(state) { callAfterEvent: function(state) {
state ? this.connectObserver() : this.disconnectObserver(); state ? this.connectObserver() : this.disconnectObserver();
var afterEventName = state ? "opened" : "closed", afterEvent = this.genEventObject({ var eventName = state ? "opened" : "closed", event = this.genEventObject({
state: state state: state
}); });
this.$emit(afterEventName, afterEvent); this.$emit(eventName, event);
}, },
updateRenderedHeight: function() { updateRenderedHeight: function() {
this.$refs.modal && (this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height); this.$refs.modal && (this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height);
@@ -706,7 +716,7 @@
}; };
exports.default = parse; exports.default = parse;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), 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", "" ]); exports = module.exports = __webpack_require__(0)(), 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__) { }, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\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 padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\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, .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, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]); exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\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 padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\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, .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, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
@@ -714,7 +724,7 @@
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
__webpack_require__(20); __webpack_require__(20);
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null); var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Resizer.vue", Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) { Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== 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."), }) && 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."),
@@ -771,7 +781,7 @@
$event.stopPropagation(), _vm.click(i, $event); $event.stopPropagation(), _vm.click(i, $event);
} }
} }
}, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]); }, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]);
})) : _c("div", { })) : _c("div", {
staticClass: "vue-dialog-buttons-none" staticClass: "vue-dialog-buttons-none"
}) ]); }) ]);

40
dist/ssr.index.js vendored
View File

@@ -161,7 +161,7 @@
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
__webpack_require__(18); __webpack_require__(18);
var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null); var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Dialog.vue", Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) { Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== 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."), }) && 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__) { }, function(module, exports, __webpack_require__) {
__webpack_require__(19); __webpack_require__(19);
var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null); var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Modal.vue", Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) { Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== 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."), }) && 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."),
@@ -214,15 +214,25 @@
}, },
methods: { methods: {
beforeOpened: function(event) { beforeOpened: function(event) {
this.params = event.params || {}, this.$emit("before-opened", event); window.addEventListener("keyup", this.onKeyUp), this.params = event.params || {},
this.$emit("before-opened", event);
}, },
beforeClosed: function(event) { beforeClosed: function(event) {
this.params = {}, this.$emit("before-closed", event); window.removeEventListener("keyup", this.onKeyUp), this.params = {}, this.$emit("before-closed", event);
}, },
click: function(i, event) { click: function(i, event) {
var button = this.buttons[i]; var source = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "click", button = this.buttons[i];
if ("function" == typeof button.handler) return button.handler(i, event); button && "function" == typeof button.handler ? button.handler(i, event, {
this.$modal.hide("dialog"); source: source
}) : this.$modal.hide("dialog");
},
onKeyUp: function(event) {
if (13 === event.which && this.buttons.length > 0) {
var buttonIndex = 1 === this.buttons.length ? 0 : this.buttons.findIndex(function(button) {
return button.default;
});
-1 !== buttonIndex && this.click(buttonIndex, event, "keypress");
}
} }
} }
}; };
@@ -444,7 +454,7 @@
modal.heightType = height.type; modal.heightType = height.type;
}, },
onEscapeKeyUp: function(event) { onEscapeKeyUp: function(event) {
27 === (event.keyCode || event.which) && this.visible && this.$modal.hide(this.name); 27 === event.which && this.visible && this.$modal.hide(this.name);
}, },
onWindowResize: function() { onWindowResize: function() {
this.window.width = window.innerWidth, this.window.height = window.innerHeight; this.window.width = window.innerWidth, this.window.height = window.innerHeight;
@@ -468,8 +478,8 @@
}, },
toggle: function(state, params) { toggle: function(state, params) {
var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open"; var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (reset && (this.setInitialSize(), this.shift.left = 0, "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(),
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.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
var stopEventExecution = !1, stop = function() { var stopEventExecution = !1, stop = function() {
stopEventExecution = !0; stopEventExecution = !0;
}, beforeEvent = this.genEventObject({ }, beforeEvent = this.genEventObject({
@@ -520,10 +530,10 @@
removeDraggableListeners: function() {}, removeDraggableListeners: function() {},
callAfterEvent: function(state) { callAfterEvent: function(state) {
state ? this.connectObserver() : this.disconnectObserver(); state ? this.connectObserver() : this.disconnectObserver();
var afterEventName = state ? "opened" : "closed", afterEvent = this.genEventObject({ var eventName = state ? "opened" : "closed", event = this.genEventObject({
state: state state: state
}); });
this.$emit(afterEventName, afterEvent); this.$emit(eventName, event);
}, },
updateRenderedHeight: function() { updateRenderedHeight: function() {
this.$refs.modal && (this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height); this.$refs.modal && (this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height);
@@ -660,7 +670,7 @@
}; };
exports.default = parse; exports.default = parse;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), 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", "" ]); exports = module.exports = __webpack_require__(0)(), 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__) { }, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\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 padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\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, .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, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]); exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\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 padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\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, .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, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
@@ -668,7 +678,7 @@
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
__webpack_require__(20); __webpack_require__(20);
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null); var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Resizer.vue", Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) { Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== 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."), }) && 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."),
@@ -725,7 +735,7 @@
$event.stopPropagation(), _vm.click(i, $event); $event.stopPropagation(), _vm.click(i, $event);
} }
} }
}, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]); }, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]);
})) : _c("div", { })) : _c("div", {
staticClass: "vue-dialog-buttons-none" staticClass: "vue-dialog-buttons-none"
}) ]); }) ]);

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "vue-js-modal", "name": "vue-js-modal",
"description": "Modal Component for Vue.js", "description": "Modal Component for Vue.js",
"version": "1.3.5", "version": "1.3.6",
"author": "euvl <yev.vlasenko@gmail.com>", "author": "euvl <yev.vlasenko@gmail.com>",
"main": "dist/index.js", "main": "dist/index.js",
"repository": { "repository": {

305
src/Dialog.vue
View File

@@ -1,179 +1,176 @@
<template> <template>
<modal name="dialog" <modal
height="auto" name="dialog"
:classes="['v--modal', 'vue-dialog', this.params.class]" height="auto"
:width="width" :classes="['v--modal', 'vue-dialog', this.params.class]"
:pivot-y="0.3" :width="width"
:adaptive="true" :pivot-y="0.3"
:clickToClose="clickToClose" :adaptive="true"
:transition="transition" :clickToClose="clickToClose"
@keyup.enter="clickDefault" :transition="transition"
@before-open="beforeOpened" @before-open="beforeOpened"
@before-close="beforeClosed" @before-close="beforeClosed"
@opened="$emit('opened', $event)" @opened="$emit('opened', $event)"
@closed="$emit('closed', $event)"> @closed="$emit('closed', $event)">
<div class="dialog-content"> <div class="dialog-content">
<div class="dialog-c-title" <div
v-if="params.title" class="dialog-c-title"
v-html="params.title || ''"></div> v-if="params.title"
<div class="dialog-c-text" v-html="params.title || ''"></div>
v-html="params.text || ''"></div> <div
</div> class="dialog-c-text"
<div class="vue-dialog-buttons" v-if="buttons"> v-html="params.text || ''"></div>
<button v-for="(button, i) in buttons" </div>
:class="button.class || 'vue-dialog-button'" <div
:style="buttonStyle" class="vue-dialog-buttons"
:key="i" v-if="buttons">
v-html="button.title" <button
@click.stop="click(i, $event)"> v-for="(button, i) in buttons"
{{button.title}} :class="button.class || 'vue-dialog-button'"
</button> :style="buttonStyle"
</div> :key="i"
<div v-else class="vue-dialog-buttons-none"></div> v-html="button.title"
@click.stop="click(i, $event)">
{{button.title}}
</button>
</div>
<div v-else class="vue-dialog-buttons-none"></div>
</modal> </modal>
</template> </template>
<script> <script>
export default { export default {
name: 'Dialog', name: 'Dialog',
props: { props: {
width: { width: {
type: [Number, String], type: [Number, String],
default: 400 default: 400
},
clickToClose: {
type: Boolean,
default: true
},
transition: {
type: String,
default: 'fade'
}
}, },
data () { clickToClose: {
type: Boolean,
default: true
},
transition: {
type: String,
default: 'fade'
}
},
data () {
return {
params: {},
defaultButtons: [{ title: 'CLOSE' }]
}
},
computed: {
buttons () {
return this.params.buttons || this.defaultButtons
},
/**
* Returns FLEX style with correct width for arbitrary number of
* buttons.
*/
buttonStyle () {
return { return {
params: {}, flex: `1 1 ${100 / this.buttons.length}%`
defaultButtons: [{ title: 'CLOSE' }]
} }
}, }
computed: { },
buttons () { methods: {
return this.params.buttons || this.defaultButtons beforeOpened (event) {
}, window.addEventListener('keyup', this.onKeyUp)
/**
* Returns FLEX style with correct width for arbitrary number of
* buttons.
*/
buttonStyle () {
return {
flex: `1 1 ${100 / this.buttons.length}%`
}
}
},
methods: {
beforeOpened (event) {
this.params = event.params || {}
this.$emit('before-opened', event)
},
beforeClosed (event) {
this.params = {}
this.$emit('before-closed', event)
},
click (i, event) {
let button = this.buttons[i]
if (typeof button.handler === 'function') { this.params = event.params || {}
return button.handler(i, event) this.$emit('before-opened', event)
} else { },
this.$modal.hide('dialog') beforeClosed (event) {
} window.removeEventListener('keyup', this.onKeyUp)
},
clickDefault () { this.params = {}
if(this.buttons === undefined || !this.buttons) { this.$emit('before-closed', event)
this.$modal.hide('dialog') },
} click (i, event, source = 'click') {
if(this.buttons.length > 1) { const button = this.buttons[i]
return this.buttons.map(button => {
if(button.default != undefined && button.default == true) { if (button && typeof button.handler === 'function') {
if (typeof button.handler === 'function') { button.handler(i, event, { source })
return button.handler() } else {
} else { this.$modal.hide('dialog')
this.$modal.hide('dialog') }
} },
} onKeyUp (event) {
}); if (event.which === 13 && this.buttons.length > 0) {
} else if(this.buttons.length == 1) { const buttonIndex = this.buttons.length === 1
if (typeof this.buttons[0].handler === 'function') { ? 0
return this.buttons[0].handler() : this.buttons.findIndex(button => button.default)
} else {
this.$modal.hide('dialog') if (buttonIndex !== -1) {
} this.click(buttonIndex, event, 'keypress')
} }
} }
} }
} }
}
</script> </script>
<style> <style>
.vue-dialog div { .vue-dialog div {
box-sizing: border-box; box-sizing: border-box;
} }
.vue-dialog .dialog-flex { .vue-dialog .dialog-flex {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.vue-dialog .dialog-content { .vue-dialog .dialog-content {
flex: 1 0 auto; flex: 1 0 auto;
width: 100%; width: 100%;
padding: 15px; padding: 15px;
font-size: 14px; font-size: 14px;
} }
.vue-dialog .dialog-c-title { .vue-dialog .dialog-c-title {
font-weight: 600; font-weight: 600;
padding-bottom: 15px; padding-bottom: 15px;
}
} .vue-dialog .dialog-c-text {
}
.vue-dialog .dialog-c-text { .vue-dialog .vue-dialog-buttons {
} display: flex;
flex: 0 1 auto;
width: 100%;
border-top: 1px solid #eee;
}
.vue-dialog .vue-dialog-buttons { .vue-dialog .vue-dialog-buttons-none {
display: flex; width: 100%;
flex: 0 1 auto; padding-bottom: 15px;
width: 100%; }
border-top: 1px solid #eee;
}
.vue-dialog .vue-dialog-buttons-none { .vue-dialog-button {
width: 100%; font-size: 12px !important;
padding-bottom: 15px; background: transparent;
} padding: 0;
margin: 0;
border: 0;
cursor: pointer;
box-sizing: border-box;
line-height: 40px;
height: 40px;
color: inherit;
font: inherit;
outline: none;
}
.vue-dialog-button { .vue-dialog-button:hover {
font-size: 12px !important; background: rgba(0, 0, 0, 0.01);
background: transparent; }
padding: 0;
margin: 0;
border: 0;
cursor: pointer;
box-sizing: border-box;
line-height: 40px;
height: 40px;
color:inherit;
font:inherit;
outline: none;
}
.vue-dialog-button:hover { .vue-dialog-button:active {
background: rgba(0, 0, 0, 0.01); background: rgba(0, 0, 0, 0.025);
} }
.vue-dialog-button:active { .vue-dialog-button:not(:first-of-type) {
background: rgba(0, 0, 0, 0.025); border-left: 1px solid #eee;
} }
.vue-dialog-button:not(:first-of-type) {
border-left: 1px solid #eee;
}
</style> </style>

21
src/Modal.vue
View File

@@ -258,7 +258,7 @@
} }
if (this.clickToClose) { if (this.clickToClose) {
// window.addEventListener('keyup', this.onEscapeKeyUp) window.addEventListener('keyup', this.onEscapeKeyUp)
} }
}, },
/** /**
@@ -268,7 +268,7 @@
window.removeEventListener('resize', this.onWindowResize) window.removeEventListener('resize', this.onWindowResize)
if (this.clickToClose) { if (this.clickToClose) {
// window.removeEventListener('keyup', this.onEscapeKeyUp) window.removeEventListener('keyup', this.onEscapeKeyUp)
} }
}, },
computed: { computed: {
@@ -381,9 +381,9 @@
}, },
onEscapeKeyUp (event) { onEscapeKeyUp (event) {
// if (event.which === 27 && this.visible) { if (event.which === 27 && this.visible) {
// this.$modal.hide(this.name) this.$modal.hide(this.name)
// } }
}, },
onWindowResize () { onWindowResize () {
@@ -427,8 +427,6 @@
toggle (state, params) { toggle (state, params) {
const { reset, scrollable, visible } = this const { reset, scrollable, visible } = this
console.log('woot')
const beforeEventName = visible const beforeEventName = visible
? 'before-close' ? 'before-close'
: 'before-open' : 'before-open'
@@ -441,6 +439,7 @@
if (document.activeElement) { if (document.activeElement) {
document.activeElement.blur() document.activeElement.blur()
} }
if (reset) { if (reset) {
this.setInitialSize() this.setInitialSize()
@@ -577,12 +576,10 @@
this.disconnectObserver() this.disconnectObserver()
} }
const afterEventName = state const eventName = state ? 'opened' : 'closed'
? 'opened' const event = this.genEventObject({ state })
: 'closed'
const afterEvent = this.genEventObject({ state })
this.$emit(afterEventName, afterEvent) this.$emit(eventName, event)
}, },
/** /**