KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +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

63
README.md
View File

@@ -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)
}

6
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!
@@ -18,7 +22,7 @@ export default {
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({

40
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,7 +531,9 @@
this.$emit("resize", resizeEvent);
},
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;
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() {
@@ -534,6 +544,7 @@
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)
},

40
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,7 +485,9 @@
this.$emit("resize", resizeEvent);
},
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;
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() {
@@ -488,6 +498,7 @@
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)
},

34
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,7 +422,9 @@
this.$emit("resize", resizeEvent);
},
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;
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() {
@@ -425,6 +435,7 @@
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",

1
src/Dialog.vue
View File

@@ -27,6 +27,7 @@
<button
v-for="(button, i) in buttons"
:class="button.class || 'vue-dialog-button'"
type="button"
:style="buttonStyle"
:key="i"
v-html="button.title"

39
src/Modal.vue
View File

@@ -89,6 +89,14 @@ export default {
return value >= 0
}
},
maxWidth: {
type: Number,
default: Infinity
},
maxHeight: {
type: Number,
default: Infinity
},
width: {
type: [Number, String],
default: 600,
@@ -310,12 +318,14 @@ export default {
* fits the window
*/
trueModalWidth () {
const { window, modal, adaptive, minWidth } = this
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
@@ -324,7 +334,7 @@ export default {
* Returns modal.renderedHeight if height set as "auto"
*/
trueModalHeight () {
const { window, modal, isAutoHeight, adaptive } = this
const { window, modal, isAutoHeight, adaptive, maxHeight } = this
const value =
modal.heightType === '%'
@@ -336,9 +346,9 @@ 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)
@@ -374,9 +384,9 @@ export default {
* every time "beforeOpen" is triggered
*/
setInitialSize () {
let { modal } = this
let width = parseNumber(this.width)
let height = parseNumber(this.height)
const { modal } = this
const width = parseNumber(this.width)
const height = parseNumber(this.height)
modal.width = width.value
modal.widthType = width.type
@@ -399,7 +409,7 @@ export default {
* Generates event object
*/
genEventObject (params) {
var eventData = {
const eventData = {
name: this.name,
timestamp: Date.now(),
canceled: false,
@@ -424,13 +434,13 @@ export default {
this.$emit('resize', resizeEvent)
},
/**
* Event handler which is triggered on $modal.show and $modal.hight
* 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') {
@@ -479,7 +489,8 @@ export default {
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
}
@@ -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>

25
src/index.js
View File

@@ -1,5 +1,6 @@
import Modal from './Modal.vue'
import Dialog from './Dialog.vue'
import ModalsContainer from './ModalsContainer.vue'
const defaultComponentName = 'modal'
@@ -14,14 +15,26 @@ 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
},
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)
},
@@ -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;
}