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

Merged

Browse Source
This commit is contained in:
Yev Vlasenko
2018-02-17 19:23:40 +00:00
parent b26421e5f8 bf390426b2
commit 507c74c252
17 changed files with 472 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
README.md
View File

@@ -113,7 +113,7 @@ this.$modal.show('dialog', {
title: 'Alert!',
text: 'You are too awesome',
buttons: [
{
{
title: 'Deal with it',
handler: () => { alert('Woot!') }
},
@@ -122,7 +122,7 @@ this.$modal.show('dialog', {
default: true, // Will be triggered by default if 'Enter' pressed.
handler: () => {} // Button click handler
},
{
{
title: 'Close'
}
]
@@ -133,6 +133,50 @@ this.$modal.show('dialog', {
<img src="https://user-images.githubusercontent.com/1577802/29165216-ec62552c-7db9-11e7-807e-ef341edcc94d.png">
</p>
### Dynamic Modals
In order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.
To start using this feature you must set `dynamic: true` in plugin configuration:
```js
Vue.use(VModal, { dynamic: true })
```
And include the `<modals-container/>` component it in your project:
```vue
<modals-container/>
```
Call it (the first argument is the component definition, the second are component properties, and the third modal parameters):
```javascript
this.$modal.show({
template: `
<div>
<h1>This is created inline</h1>
<p>{{ text }}</p>
</div>
`,
props: ['text']
}, {
text: 'This text is passed as a property'
})
```
It can also be used with `.vue` files:
```javascript
import MyComponent from './MyComponent.vue'
this.$modal.show(MyComponent, {
text: 'This text is passed as a property'
}, {
draggable: true
})
```
For more examples please take a look at [vue-js-modal.yev.io](http://vue-js-modal.yev.io).
### SSR
@@ -156,6 +200,10 @@ Vue.use(VModal)
For full demo please look at `demo/server_side_rendering`
### Extracted CSS
There is also a ssr build with css file extracted. Take a look in /dist folder.
### Properties
| Name | Required | Type | Default | Description |
@@ -172,8 +220,10 @@ For full demo please look at `demo/server_side_rendering`
| classes | false | [String, Array] | 'v--modal'| Classes that will be applied to the actual modal box, if not specified, the default 'vue--modal' class will be applied |
| width | false | [String, Number] | 600 | Width in pixels or percents (e.g. 50 or "50px", "50%") |
| height | false | [String, Number] | 300 | Height in pixels or percents (e.g. 50 or "50px", "50%") or `"auto"` |
| minWidth | false | Number | 0 | The minimum width to which modal can be resized |
| minHeight | false | Number | 0 | The minimum height to which modal can be resized |
| minWidth | false | Number (px) | 0 | The minimum width to which modal can be resized |
| minHeight | false | Number (px) | 0 | The minimum height to which modal can be resized |
| maxWidth | false | Number (px) | Infinity | The maximum width of the modal (if the value is greater than window width, window width will be used instead |
| maxHeight | false | Number (px) | Infinity | The maximum height of the modal (if the value is greater than window height, window height will be used instead |
| pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window |
| pivotY | false | Number (0 - 1.0) | 0.5 | Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
@@ -319,6 +369,15 @@ Dont forget about close button :)
</modal>
```
### Check out
Check out my other projects:
* https://github.com/euvl/vue-notification
* https://github.com/euvl/vue-js-toggle-button
* https://github.com/euvl/vue-js-popover
* https://github.com/euvl/v-clipboard
### Developers
To run an example:

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

@@ -7,6 +7,8 @@
<demo-focus-modal/>
<demo-size-modal/>
<modals-container />
<v-dialog
@before-opened="dialogEvent('before-open')"
@before-closed="dialogEvent('before-close')"
@@ -106,6 +108,22 @@
@click="showButtonsDialog">
Dialog: buttons
</button>
<br>
<button
class="btn"
@click="showDynamicRuntimeModal">
Dynamic: Runtime Modal
</button>
<button
class="btn"
@click="showDynamicComponentModal">
Dynamic: Component Modal
</button>
<button
class="btn"
@click="showDynamicComponentModalWithModalParams">
Dynamic: Component Modal with modal params
</button>
</div>
</div>
</template>
@@ -118,6 +136,7 @@ import DemoLoginModal from './components/DemoLoginModal.vue'
import DemoDogProfileModal from './components/DogProfileModal.vue'
import DemoConditionalModal from './components/ConditionalModal.vue'
import DemoSizeModal from './components/SizeModal.vue'
import CustomComponentModal from './components/CustomComponentModal.vue'
export default {
name: 'app',
@@ -203,6 +222,36 @@ export default {
})
},
showDynamicRuntimeModal () {
this.$modal.show({
template: `
<div>
<h1>This is created inline</h1>
<p>{{ text }}</p>
</div>
`,
props: ['text']
}, {
text: 'This text is passed as a property'
})
},
showDynamicComponentModal () {
this.$modal.show(CustomComponentModal, {
text: 'This text is passed as a property'
})
},
showDynamicComponentModalWithModalParams () {
this.$modal.show(CustomComponentModal, {
text: 'This text is passed as a property'
}, {
resizable: true,
adaptive: true,
draggable: true,
})
},
dialogEvent (eventName) {
console.log('Dialog event: ' + eventName)
}

8
demo/client_side_rendering/src/components/ConditionalModal.vue
View File

@@ -1,6 +1,10 @@
<template>
<modal name="conditional-modal"
:adaptive="true"
:max-width="1000"
:max-height="400"
width="80%"
height="50%"
@before-open="beforeOpen">
<div style="padding:30px; text-align: center">
Hello!
@@ -11,14 +15,14 @@
export default {
name: 'ConditionalModal',
methods: {
beforeOpen (event) {
beforeOpen(event) {
console.log('Event:', event)
console.log('Params:', event.params)
if (event.params.show === false) {
event.stop()
}
},
}
}
}
</script>

12
demo/client_side_rendering/src/components/CustomComponentModal.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div>
<h1>This is a custom component</h1>
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
props: ['text']
}
</script>

3
demo/client_side_rendering/src/main.js
View File

@@ -3,7 +3,8 @@ import App from './App.vue'
import VueJsModal from 'plugin'
Vue.use(VueJsModal, {
dialog: true
dialog: true,
dynamic: true,
})
new Vue({

60
dist/index.js vendored
View File

@@ -207,16 +207,14 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(18);
var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."),
module.exports = Component.exports;
}, function(module, exports, __webpack_require__) {
__webpack_require__(19);
var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),
module.exports = Component.exports;
@@ -349,6 +347,14 @@
return value >= 0;
}
},
maxWidth: {
type: Number,
default: 1 / 0
},
maxHeight: {
type: Number,
default: 1 / 0
},
width: {
type: [ Number, String ],
default: 600,
@@ -467,12 +473,14 @@
};
},
trueModalWidth: function() {
var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
},
trueModalHeight: function() {
var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
if (isAutoHeight) return this.modal.renderedHeight;
var max = Math.min(window.height, maxHeight);
return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
},
overlayClass: function() {
return {
@@ -523,17 +531,20 @@
this.$emit("resize", resizeEvent);
},
toggle: function(state, params) {
var reset = this.reset, scrollable = this.scrollable, visible = this.visible, 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");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
stop: stop,
state: state,
params: params
});
this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
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");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
stop: stop,
state: state,
params: params
});
this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
}
},
getDraggableElement: function() {
var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
@@ -716,15 +727,15 @@
};
exports.default = parse;
}, 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 {\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", "" ]);
}, 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: 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 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, 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", "" ]);
exports = module.exports = __webpack_require__(0)(), 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", "" ]);
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), 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", "" ]);
exports = module.exports = __webpack_require__(0)(), 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", "" ]);
}, 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.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),
@@ -773,6 +784,9 @@
key: i,
class: button.class || "vue-dialog-button",
style: _vm.buttonStyle,
attrs: {
type: "button"
},
domProps: {
innerHTML: _vm._s(button.title)
},

60
dist/ssr.index.js vendored
View File

@@ -161,16 +161,14 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(18);
var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."),
module.exports = Component.exports;
}, function(module, exports, __webpack_require__) {
__webpack_require__(19);
var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),
module.exports = Component.exports;
@@ -303,6 +301,14 @@
return value >= 0;
}
},
maxWidth: {
type: Number,
default: 1 / 0
},
maxHeight: {
type: Number,
default: 1 / 0
},
width: {
type: [ Number, String ],
default: 600,
@@ -421,12 +427,14 @@
};
},
trueModalWidth: function() {
var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
},
trueModalHeight: function() {
var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
if (isAutoHeight) return this.modal.renderedHeight;
var max = Math.min(window.height, maxHeight);
return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
},
overlayClass: function() {
return {
@@ -477,17 +485,20 @@
this.$emit("resize", resizeEvent);
},
toggle: function(state, params) {
var reset = this.reset, scrollable = this.scrollable, visible = this.visible, 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");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
stop: stop,
state: state,
params: params
});
this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
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");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
stop: stop,
state: state,
params: params
});
this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
}
},
getDraggableElement: function() {
var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
@@ -670,15 +681,15 @@
};
exports.default = parse;
}, 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 {\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", "" ]);
}, 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: 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 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, 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", "" ]);
exports = module.exports = __webpack_require__(0)(), 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", "" ]);
}, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), 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", "" ]);
exports = module.exports = __webpack_require__(0)(), 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", "" ]);
}, 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.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),
@@ -727,6 +738,9 @@
key: i,
class: button.class || "vue-dialog-button",
style: _vm.buttonStyle,
attrs: {
type: "button"
},
domProps: {
innerHTML: _vm._s(button.title)
},

54
dist/ssr.nocss.js vendored
View File

@@ -98,16 +98,14 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(9);
var Component = __webpack_require__(0)(__webpack_require__(5), __webpack_require__(13), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."),
module.exports = Component.exports;
}, function(module, exports, __webpack_require__) {
__webpack_require__(10);
var Component = __webpack_require__(0)(__webpack_require__(6), __webpack_require__(14), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),
module.exports = Component.exports;
@@ -240,6 +238,14 @@
return value >= 0;
}
},
maxWidth: {
type: Number,
default: 1 / 0
},
maxHeight: {
type: Number,
default: 1 / 0
},
width: {
type: [ Number, String ],
default: 600,
@@ -358,12 +364,14 @@
};
},
trueModalWidth: function() {
var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
},
trueModalHeight: function() {
var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
if (isAutoHeight) return this.modal.renderedHeight;
var max = Math.min(window.height, maxHeight);
return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
},
overlayClass: function() {
return {
@@ -414,17 +422,20 @@
this.$emit("resize", resizeEvent);
},
toggle: function(state, params) {
var reset = this.reset, scrollable = this.scrollable, visible = this.visible, 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");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
stop: stop,
state: state,
params: params
});
this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
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");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
}, beforeEvent = this.genEventObject({
stop: stop,
state: state,
params: params
});
this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
}
},
getDraggableElement: function() {
var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
@@ -609,7 +620,7 @@
}, function(module, exports) {}, function(module, exports) {}, function(module, exports) {}, function(module, exports, __webpack_require__) {
__webpack_require__(11);
var Component = __webpack_require__(0)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),
@@ -658,6 +669,9 @@
key: i,
class: button.class || "vue-dialog-button",
style: _vm.buttonStyle,
attrs: {
type: "button"
},
domProps: {
innerHTML: _vm._s(button.title)
},

2
dist/styles.css vendored
View File

@@ -1,7 +1,7 @@
.v--modal-block-scroll {
position: absolute;
overflow: hidden;
position: fixed;
width: 100vw;
}
.v--modal-overlay {

12
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "vue-js-modal",
"description": "Modal Component for Vue.js",
"version": "1.3.7",
"version": "1.3.10",
"author": "euvl <yev.vlasenko@gmail.com>",
"main": "dist/index.js",
"repository": {
@@ -19,16 +19,14 @@
"url": "https://github.com/euvl/vue-js-modal/issues"
},
"scripts": {
"build:client":
"webpack --config ./build/webpack.client.config.js --progress --hide-modules",
"build:ssr":
"webpack --config ./build/webpack.ssr.config.js --progress --hide-modules",
"build:ssr-no-css":
"webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules",
"build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
"build:ssr": "webpack --config ./build/webpack.ssr.config.js --progress --hide-modules",
"build:ssr-no-css": "webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules",
"lint": "eslint --ext .js,.vue src test/unit/specs",
"unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js",
"build":
"npm run unit && npm run build:client && npm run build:ssr && npm run build:ssr-no-css",
"watch": "webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch",
"test:types": "tsc -p types/test"
},
"license": "MIT",

19
src/Dialog.vue
View File

@@ -1,5 +1,5 @@
<template>
<modal
<modal
name="dialog"
height="auto"
:classes="['v--modal', 'vue-dialog', this.params.class]"
@@ -24,9 +24,10 @@
<div
class="vue-dialog-buttons"
v-if="buttons">
<button
<button
v-for="(button, i) in buttons"
:class="button.class || 'vue-dialog-button'"
type="button"
:style="buttonStyle"
:key="i"
v-html="button.title"
@@ -54,40 +55,40 @@ export default {
default: 'fade'
}
},
data() {
data () {
return {
params: {},
defaultButtons: [{ title: 'CLOSE' }]
}
},
computed: {
buttons() {
buttons () {
return this.params.buttons || this.defaultButtons
},
/**
* Returns FLEX style with correct width for arbitrary number of
* buttons.
*/
buttonStyle() {
buttonStyle () {
return {
flex: `1 1 ${100 / this.buttons.length}%`
}
}
},
methods: {
beforeOpened(event) {
beforeOpened (event) {
window.addEventListener('keyup', this.onKeyUp)
this.params = event.params || {}
this.$emit('before-opened', event)
},
beforeClosed(event) {
beforeClosed (event) {
window.removeEventListener('keyup', this.onKeyUp)
this.params = {}
this.$emit('before-closed', event)
},
click(i, event, source = 'click') {
click (i, event, source = 'click') {
const button = this.buttons[i]
if (button && typeof button.handler === 'function') {
@@ -96,7 +97,7 @@ export default {
this.$modal.hide('dialog')
}
},
onKeyUp(event) {
onKeyUp (event) {
if (event.which === 13 && this.buttons.length > 0) {
const buttonIndex =
this.buttons.length === 1

249
src/Modal.vue
View File

@@ -78,21 +78,29 @@ export default {
minWidth: {
type: Number,
default: 0,
validator(value) {
validator (value) {
return value >= 0
}
},
minHeight: {
type: Number,
default: 0,
validator(value) {
validator (value) {
return value >= 0
}
},
maxWidth: {
type: Number,
default: Infinity
},
maxHeight: {
type: Number,
default: Infinity
},
width: {
type: [Number, String],
default: 600,
validator(value) {
validator (value) {
if (typeof value === 'string') {
let width = parseNumber(value)
return (width.type === '%' || width.type === 'px') && width.value > 0
@@ -104,7 +112,7 @@ export default {
height: {
type: [Number, String],
default: 300,
validator(value) {
validator (value) {
if (typeof value === 'string') {
if (value === 'auto') {
return true
@@ -122,14 +130,14 @@ export default {
pivotX: {
type: Number,
default: 0.5,
validator(value) {
validator (value) {
return value >= 0 && value <= 1
}
},
pivotY: {
type: Number,
default: 0.5,
validator(value) {
validator (value) {
return value >= 0 && value <= 1
}
}
@@ -137,7 +145,7 @@ export default {
components: {
Resizer
},
data() {
data () {
return {
visible: false,
@@ -169,12 +177,12 @@ export default {
},
watch: {
/**
* Sets the visibility of overlay and modal.
* Events 'opened' and 'closed' is called here
* inside `setTimeout` and `$nextTick`, after the DOM changes.
* This fixes `$refs.modal` `undefined` bug (fixes #15)
*/
visible(value) {
* Sets the visibility of overlay and modal.
* Events 'opened' and 'closed' is called here
* inside `setTimeout` and `$nextTick`, after the DOM changes.
* This fixes `$refs.modal` `undefined` bug (fixes #15)
*/
visible (value) {
if (value) {
this.visibility.overlay = true
@@ -198,13 +206,13 @@ export default {
}
}
},
created() {
created () {
this.setInitialSize()
},
/**
* Sets global listeners
*/
beforeMount() {
* Sets global listeners
*/
beforeMount () {
Modal.event.$on('toggle', (name, state, params) => {
if (name === this.name) {
if (typeof state === 'undefined') {
@@ -218,8 +226,8 @@ export default {
window.addEventListener('resize', this.onWindowResize)
this.onWindowResize()
/**
* Making sure that autoHeight is enabled when using "scrollable"
*/
* Making sure that autoHeight is enabled when using "scrollable"
*/
if (this.scrollable && !this.isAutoHeight) {
console.warn(
`Modal "${this.name}" has scrollable flag set to true ` +
@@ -227,19 +235,19 @@ export default {
)
}
/**
* Only observe when using height: 'auto'
* The callback will be called when modal DOM changes,
* this is for updating the `top` attribute for height 'auto' modals.
*/
* Only observe when using height: 'auto'
* The callback will be called when modal DOM changes,
* this is for updating the `top` attribute for height 'auto' modals.
*/
if (this.isAutoHeight) {
/**
* MutationObserver feature detection:
* Detects if MutationObserver is available, return false if not.
* No polyfill is provided here, so height 'auto' recalculation will
* simply stay at its initial height (won't crash).
* (Provide polyfill to support IE < 11)
*/
const MutationObserver = (function() {
* MutationObserver feature detection:
* Detects if MutationObserver is available, return false if not.
* No polyfill is provided here, so height 'auto' recalculation will
* simply stay at its initial height (won't crash).
* (Provide polyfill to support IE < 11)
*/
const MutationObserver = (function () {
const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
for (let i = 0; i < prefixes.length; i++) {
@@ -264,9 +272,9 @@ export default {
}
},
/**
* Removes "resize" window listener
*/
beforeDestroy() {
* Removes "resize" window listener
*/
beforeDestroy () {
window.removeEventListener('resize', this.onWindowResize)
if (this.clickToClose) {
@@ -275,16 +283,16 @@ export default {
},
computed: {
/**
* Returns true if height is set to "auto"
*/
isAutoHeight() {
* Returns true if height is set to "auto"
*/
isAutoHeight () {
return this.modal.heightType === 'auto'
},
/**
* Calculates and returns modal position based on the
* pivots, window size and modal size
*/
position() {
* Calculates and returns modal position based on the
* pivots, window size and modal size
*/
position () {
const {
window,
shift,
@@ -306,25 +314,27 @@ export default {
}
},
/**
* Returns pixel width (if set with %) and makes sure that modal size
* fits the window
*/
trueModalWidth() {
const { window, modal, adaptive, minWidth } = this
* Returns pixel width (if set with %) and makes sure that modal size
* fits the window
*/
trueModalWidth () {
const { window, modal, adaptive, minWidth, maxWidth } = this
const value =
modal.widthType === '%' ? window.width / 100 * modal.width : modal.width
return adaptive ? inRange(minWidth, window.width, value) : value
const max = Math.min(window.width, maxWidth)
return adaptive ? inRange(minWidth, max, value) : value
},
/**
* Returns pixel height (if set with %) and makes sure that modal size
* fits the window.
*
* Returns modal.renderedHeight if height set as "auto"
*/
trueModalHeight() {
const { window, modal, isAutoHeight, adaptive } = this
* Returns pixel height (if set with %) and makes sure that modal size
* fits the window.
*
* Returns modal.renderedHeight if height set as "auto"
*/
trueModalHeight () {
const { window, modal, isAutoHeight, adaptive, maxHeight } = this
const value =
modal.heightType === '%'
@@ -336,29 +346,29 @@ export default {
return this.modal.renderedHeight
}
return adaptive
? inRange(this.minHeight, this.window.height, value)
: value
const max = Math.min(window.height, maxHeight)
return adaptive ? inRange(this.minHeight, max, value) : value
},
/**
* Returns class list for screen overlay (modal background)
*/
overlayClass() {
* Returns class list for screen overlay (modal background)
*/
overlayClass () {
return {
'v--modal-overlay': true,
scrollable: this.scrollable && this.isAutoHeight
}
},
/**
* Returns class list for modal itself
*/
modalClass() {
* Returns class list for modal itself
*/
modalClass () {
return ['v--modal-box', this.classes]
},
/**
* CSS styles for position and size of the modal
*/
modalStyle() {
* CSS styles for position and size of the modal
*/
modalStyle () {
return {
top: this.position.top + 'px',
left: this.position.left + 'px',
@@ -369,14 +379,14 @@ export default {
},
methods: {
/**
* Initializes modal's size & position,
* if "reset" flag is set to true - this function will be called
* every time "beforeOpen" is triggered
*/
setInitialSize() {
let { modal } = this
let width = parseNumber(this.width)
let height = parseNumber(this.height)
* Initializes modal's size & position,
* if "reset" flag is set to true - this function will be called
* every time "beforeOpen" is triggered
*/
setInitialSize () {
const { modal } = this
const width = parseNumber(this.width)
const height = parseNumber(this.height)
modal.width = width.value
modal.widthType = width.type
@@ -384,22 +394,22 @@ export default {
modal.heightType = height.type
},
onEscapeKeyUp(event) {
onEscapeKeyUp (event) {
if (event.which === 27 && this.visible) {
this.$modal.hide(this.name)
}
},
onWindowResize() {
onWindowResize () {
this.window.width = window.innerWidth
this.window.height = window.innerHeight
},
/**
* Generates event object
*/
genEventObject(params) {
var eventData = {
* Generates event object
*/
genEventObject (params) {
const eventData = {
name: this.name,
timestamp: Date.now(),
canceled: false,
@@ -409,9 +419,9 @@ export default {
return Object.assign(eventData, params || {})
},
/**
* Event handler which is triggered on modal resize
*/
onModalResize(event) {
* Event handler which is triggered on modal resize
*/
onModalResize (event) {
this.modal.widthType = 'px'
this.modal.width = event.size.width
@@ -424,20 +434,20 @@ export default {
this.$emit('resize', resizeEvent)
},
/**
* Event handler which is triggered on $modal.show and $modal.hight
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
*/
toggle(state, params) {
* Event handler which is triggered on $modal.show and $modal.hide
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
*/
toggle (state, params) {
const { reset, scrollable, visible } = this
if (visible === state) return
const beforeEventName = visible ? 'before-close' : 'before-open'
if (beforeEventName === 'before-open') {
/**
* Need to unfocus previously focused element, otherwise
* all keypress events (ESC press, for example) will trigger on that element.
*/
* Need to unfocus previously focused element, otherwise
* all keypress events (ESC press, for example) will trigger on that element.
*/
if (document.activeElement) {
document.activeElement.blur()
}
@@ -474,27 +484,28 @@ export default {
}
},
getDraggableElement() {
getDraggableElement () {
var selector =
typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
if (selector) {
var handler = this.$refs.overlay.querySelector(selector)
const handler = this.$refs.overlay.querySelector(selector)
if (handler) {
return handler
}
}
},
/**
* Event handler that is triggered when background overlay is clicked
*/
onBackgroundClick() {
* Event handler that is triggered when background overlay is clicked
*/
onBackgroundClick () {
if (this.clickToClose) {
this.toggle(false)
}
},
addDraggableListeners() {
addDraggableListeners () {
if (!this.draggable) {
return
}
@@ -559,18 +570,18 @@ export default {
}
},
removeDraggableListeners() {
removeDraggableListeners () {
// console.log('removing draggable handlers')
},
/**
* 'opened' and 'closed' events are `$emit`ed here.
* This is called in watch.visible.
* Because modal DOM updates are async,
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
* (fixes #15)
*/
callAfterEvent(state) {
* 'opened' and 'closed' events are `$emit`ed here.
* This is called in watch.visible.
* Because modal DOM updates are async,
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
* (fixes #15)
*/
callAfterEvent (state) {
if (state) {
this.connectObserver()
} else {
@@ -584,22 +595,22 @@ export default {
},
/**
* Update $data.modal.renderedHeight using getBoundingClientRect.
* This method is called when:
* 1. modal opened
* 2. MutationObserver's observe callback
*/
updateRenderedHeight() {
* Update $data.modal.renderedHeight using getBoundingClientRect.
* This method is called when:
* 1. modal opened
* 2. MutationObserver's observe callback
*/
updateRenderedHeight () {
if (this.$refs.modal) {
this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
}
},
/**
* Start observing modal's DOM, if childList or subtree changes,
* the callback (registered in beforeMount) will be called.
*/
connectObserver() {
* Start observing modal's DOM, if childList or subtree changes,
* the callback (registered in beforeMount) will be called.
*/
connectObserver () {
if (this.mutationObserver) {
this.mutationObserver.observe(this.$refs.modal, {
childList: true,
@@ -610,9 +621,9 @@ export default {
},
/**
* Disconnects MutationObserver
*/
disconnectObserver() {
* Disconnects MutationObserver
*/
disconnectObserver () {
if (this.mutationObserver) {
this.mutationObserver.disconnect()
}
@@ -622,8 +633,8 @@ export default {
</script>
<style>
.v--modal-block-scroll {
position: absolute;
overflow: hidden;
position: fixed;
width: 100vw;
}

50
src/ModalsContainer.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div id="#modals-container">
<modal
v-for="modal in modals"
:key="modal.id"
:name="modal.name"
v-bind="modal.config"
@closed="remove(modal.id)"
>
<component :is="modal.component" v-bind="modal.params"></component>
</modal>
</div>
</template>
<script>
export default {
data () {
return {
uid: 0,
modals: []
}
},
created () {
this.$modal._setDynamicContainer(this)
},
methods: {
add (modal, params, config) {
let id = this.uid++
let name = '_dynamic-modal-' + id
this.modals.push({
id: id,
name: name,
component: modal,
params: params || {},
config: config || {}
})
this.$nextTick(() => {
this.$modal.show(name)
})
},
remove (id) {
for (let i in this.modals) {
if (this.modals[i].id === id) {
this.modals.splice(i, 1)
return
}
}
}
}
}
</script>

14
src/Resizer.vue
View File

@@ -16,22 +16,22 @@ export default {
default: 0
}
},
data() {
data () {
return {
clicked: false,
size: {}
}
},
mounted() {
mounted () {
this.$el.addEventListener('mousedown', this.start, false)
},
computed: {
className() {
className () {
return { 'vue-modal-resizer': true, clicked: this.clicked }
}
},
methods: {
start(event) {
start (event) {
this.clicked = true
window.addEventListener('mousemove', this.mousemove, false)
@@ -40,7 +40,7 @@ export default {
event.stopPropagation()
event.preventDefault()
},
stop() {
stop () {
this.clicked = false
window.removeEventListener('mousemove', this.mousemove, false)
@@ -51,10 +51,10 @@ export default {
size: this.size
})
},
mousemove(event) {
mousemove (event) {
this.resize(event)
},
resize(event) {
resize (event) {
var el = this.$el.parentElement
if (el) {

31
src/index.js
View File

@@ -1,10 +1,11 @@
import Modal from './Modal.vue'
import Dialog from './Dialog.vue'
import ModalsContainer from './ModalsContainer.vue'
const defaultComponentName = 'modal'
const Plugin = {
install(Vue, options = {}) {
install (Vue, options = {}) {
/**
* Makes sure that plugin can be insstalled only once
*/
@@ -14,19 +15,31 @@ const Plugin = {
this.installed = true
this.event = new Vue()
this.dynamicContainer = null
/**
* Plugin API
*/
Vue.prototype.$modal = {
show(name, params) {
Plugin.event.$emit('toggle', name, true, params)
_setDynamicContainer (dynamicContainer) {
Plugin.dynamicContainer = dynamicContainer
},
hide(name, params) {
show (modal, paramsOrProps, params) {
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)
}
}
},
hide (name, params) {
Plugin.event.$emit('toggle', name, false, params)
},
toggle(name, params) {
toggle (name, params) {
Plugin.event.$emit('toggle', name, undefined, params)
}
}
@@ -41,6 +54,12 @@ const Plugin = {
if (options.dialog) {
Vue.component('v-dialog', Dialog)
}
/**
* Registration of <ModalsContainer/> component
*/
if (options.dynamic) {
Vue.component('modals-container', ModalsContainer)
}
}
}

3
src/parser.js
View File

@@ -28,7 +28,8 @@ var getType = value => {
}
for (var i = 0; i < types.length; i++) {
let type = types[i]
const type = types[i]
if (type.regexp.test(value)) {
return {
type: type.name,

4
types/index.d.ts vendored
View File

@@ -1,4 +1,4 @@
import Vue, { PluginObject } from "vue";
import Vue, { PluginObject, ComponentOptions } from "vue";
declare const VueJSModal: PluginObject<VueJSModalOptions>;
export default VueJSModal;
@@ -9,7 +9,7 @@ export declare interface VueJSModalOptions {
}
declare interface VModal {
show(name: string, params?: object): void;
show(modal: string | typeof Vue | ComponentOptions<Vue>, paramsOrProps?: object, params?: object): void;
hide(name: string, params?: object): void;
toggle(name: string, params?: object): void;
}