(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("vue")); else if(typeof define === 'function' && define.amd) define(["vue"], factory); else if(typeof exports === 'object') exports["VueJsModal"] = factory(require("vue")); else root["VueJsModal"] = factory(root["vue"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_16__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // identity function for calling harmony imports with the correct context /******/ __webpack_require__.i = function(value) { return value; }; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "/dist/"; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _Modal = __webpack_require__(5); var _Modal2 = _interopRequireDefault(_Modal); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var Plugin = { install: function install(Vue) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (!this.hasOwnProperty("event")) { this.event = new Vue(); } var $modal = { show: function show(name, params) { Plugin.event.$emit('toggle', name, true, params); }, hide: function hide(name, params) { Plugin.event.$emit('toggle', name, false, params); }, toggle: function toggle(name, params) { Plugin.event.$emit('toggle', name, undefined, params); } }; Object.defineProperty(Vue.prototype, '$modal', { get: function get() { return $modal; } }); Vue.component('modal', _Modal2.default); return null; } }; exports.default = Plugin; /***/ }), /* 1 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var inRange = exports.inRange = function inRange(from, to, value) { if (value < from) { return from; } if (value > to) { return to; } return value; }; /***/ }), /* 2 */ /***/ (function(module, exports) { /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ // css base code, injected by the css-loader module.exports = function() { var list = []; // return the list of modules as css string list.toString = function toString() { var result = []; for(var i = 0; i < this.length; i++) { var item = this[i]; if(item[2]) { result.push("@media " + item[2] + "{" + item[1] + "}"); } else { result.push(item[1]); } } return result.join(""); }; // import a list of modules into the list list.i = function(modules, mediaQuery) { if(typeof modules === "string") modules = [[null, modules, ""]]; var alreadyImportedModules = {}; for(var i = 0; i < this.length; i++) { var id = this[i][0]; if(typeof id === "number") alreadyImportedModules[id] = true; } for(i = 0; i < modules.length; i++) { var item = modules[i]; // skip already imported module // this implementation is not 100% perfect for weird media query combinations // when a module is imported multiple times with different media queries. // I hope this will never occur (Hey this way we have smaller bundles) if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { if(mediaQuery && !item[2]) { item[2] = mediaQuery; } else if(mediaQuery) { item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; } list.push(item); } } }; return list; }; /***/ }), /* 3 */ /***/ (function(module, exports) { module.exports = function normalizeComponent ( rawScriptExports, compiledTemplate, scopeId, cssModules ) { var esModule var scriptExports = rawScriptExports = rawScriptExports || {} // ES6 modules interop var type = typeof rawScriptExports.default if (type === 'object' || type === 'function') { esModule = rawScriptExports scriptExports = rawScriptExports.default } // Vue.extend constructor export interop var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports // render functions if (compiledTemplate) { options.render = compiledTemplate.render options.staticRenderFns = compiledTemplate.staticRenderFns } // scopedId if (scopeId) { options._scopeId = scopeId } // inject cssModules if (cssModules) { var computed = options.computed || (options.computed = {}) Object.keys(cssModules).forEach(function (key) { var module = cssModules[key] computed[key] = function () { return module } }) } return { esModule: esModule, exports: scriptExports, options: options } } /***/ }), /* 4 */ /***/ (function(module, exports, __webpack_require__) { var listToStyles = __webpack_require__(15) module.exports = function (parentId, list, isProduction) { if (typeof __VUE_SSR_CONTEXT__ !== 'undefined') { var context = __VUE_SSR_CONTEXT__ var styles = context._styles if (!styles) { styles = context._styles = {} Object.defineProperty(context, 'styles', { enumberable: true, get : function() { return ( context._renderedStyles || (context._renderedStyles = renderStyles(styles)) ) } }) } list = listToStyles(parentId, list) if (isProduction) { addStyleProd(styles, list) } else { addStyleDev(styles, list) } } } // In production, render as few style tags as possible. // (mostly because IE9 has a limit on number of style tags) function addStyleProd (styles, list) { for (var i = 0; i < list.length; i++) { var parts = list[i].parts for (var j = 0; j < parts.length; j++) { var part = parts[j] // group style tags by media types. var id = part.media || 'default' var style = styles[id] if (style) { style.ids.push(part.id) style.css += '\n' + part.css } else { styles[id] = { ids: [part.id], css: part.css, media: part.media } } } } } // In dev we use individual style tag for each module for hot-reload // and source maps. function addStyleDev (styles, list) { for (var i = 0; i < list.length; i++) { var parts = list[i].parts for (var j = 0; j < parts.length; j++) { var part = parts[j] styles[part.id] = { ids: [part.id], css: part.css, media: part.media } } } } function renderStyles (styles) { var css = '' for (var key in styles) { var style = styles[key] css += '' } return css } /***/ }), /* 5 */ /***/ (function(module, exports, __webpack_require__) { /* styles */ __webpack_require__(13) var Component = __webpack_require__(3)( /* script */ __webpack_require__(6), /* template */ __webpack_require__(11), /* scopeId */ null, /* cssModules */ null ) module.exports = Component.exports /***/ }), /* 6 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _vue = __webpack_require__(16); var _vue2 = _interopRequireDefault(_vue); var _index = __webpack_require__(0); var _index2 = _interopRequireDefault(_index); var _Resizer = __webpack_require__(10); var _Resizer2 = _interopRequireDefault(_Resizer); var _util = __webpack_require__(1); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } exports.default = { name: 'VueJsModal', props: { name: { required: true, type: String }, delay: { type: Number, default: 0 }, resizable: { type: Boolean, default: false }, adaptive: { type: Boolean, default: false }, draggable: { type: [Boolean, String], default: false }, transition: { type: String }, classes: { type: [String, Array], default: 'v--modal' }, minWidth: { type: Number, default: 0, validator: function validator(value) { return value >= 0; } }, minHeight: { type: Number, default: 0, validator: function validator(value) { return value >= 0; } }, adaptiveMaxWidth: { type: Number, default: 1, validator: function validator(value) { return value > 0 && value <= 1; } }, adaptiveMaxHeight: { type: Number, default: 1, validator: function validator(value) { return value > 0 && value <= 1; } }, width: { type: Number, default: 600, validator: function validator(value) { return value >= 0; } }, height: { type: [Number, String], default: 300, validator: function validator(value) { if (typeof value === 'string') { return value === 'auto'; } if (typeof value === 'number') { return value >= 0; } } }, pivotX: { type: Number, default: 0.5, validator: function validator(value) { return value >= 0 && value <= 1; } }, pivotY: { type: Number, default: 0.5, validator: function validator(value) { return value >= 0 && value <= 1; } } }, components: { Resizer: _Resizer2.default }, data: function data() { return { visible: false, visibility: { modal: false, overlay: false }, shift: { left: 0, top: 0 }, modal: { width: this.width, height: this.height }, window: { width: 0, height: 0 }, draggableElement: false }; }, watch: { visible: function visible(value) { var _this = this; if (value) { this.visibility.overlay = true; this.adaptSize(); setTimeout(function () { _this.visibility.modal = true; _this.$nextTick(function () { _this.addDraggableListeners(); }); }, this.delay); } else { this.visibility.modal = false; setTimeout(function () { _this.visibility.overlay = false; _this.$nextTick(function () { _this.removeDraggableListeners(); }); }, this.delay); } } }, beforeMount: function beforeMount() { var _this2 = this; _index2.default.event.$on('toggle', function (name, state, params) { if (name === _this2.name) { if (typeof state === 'undefined') { state = !_this2.visible; } _this2.toggle(state, params); } }); window.addEventListener('resize', this.onWindowResize); this.onWindowResize(); }, beforeDestroy: function beforeDestroy() { window.removeEventListener('resize', this.onWindowResize); }, computed: { position: function position() { var window = this.window, modal = this.modal, shift = this.shift; var maxLeft = window.width - modal.width; var maxTop = window.height - modal.height; var left = shift.left + this.pivotX * (window.width - modal.width); var top = shift.top + this.pivotY * (window.height - modal.height); return { left: (0, _util.inRange)(0, maxLeft, left), top: (0, _util.inRange)(0, maxTop, top) }; }, modalClass: function modalClass() { return ['v--modal-box', this.classes]; }, modalStyle: function modalStyle() { return { top: this.position.top + 'px', left: this.position.left + 'px', width: this.modal.width + 'px', height: this.modal.height + 'px' }; } }, methods: { onWindowResize: function onWindowResize() { this.window.width = window.innerWidth; this.window.height = window.innerHeight; this.adaptSize(); }, genEventObject: function genEventObject(params) { var data = { name: this.name, timestamp: Date.now(), canceled: false, ref: this.$refs.modal, stop: function stop() { this.canceled = true; } }; return _vue2.default.util.extend(data, params || {}); }, adaptSize: function adaptSize() { if (this.adaptive) { this.modal.width = (0, _util.inRange)(0, this.window.width * this.maxAdaptiveWidth, this.modal.width); this.modal.height = (0, _util.inRange)(0, this.window.height * this.maxAdaptiveWidth, this.modal.height); } }, resize: function resize(event) { this.modal.width = event.size.width; this.modal.height = event.size.height; var size = this.modal.size; var resizeEvent = this.genEventObject({ size: size }); this.$emit('resize', resizeEvent); }, toggle: function toggle(state, params) { var beforeEventName = this.visible ? 'before-close' : 'before-open'; var afterEventName = this.visible ? 'closed' : 'opened'; var stopEventExecution = false; var stop = function stop() { stopEventExecution = true; }; var beforeEvent = this.genEventObject({ stop: stop, state: state, params: params }); this.$emit(beforeEventName, beforeEvent); if (!stopEventExecution) { var afterEvent = this.genEventObject({ state: state, params: params }); this.visible = state; this.$emit(afterEventName, afterEvent); } }, emitCancelableEvent: function emitCancelableEvent(data) { var stopEventExecution = false; var stop = function stop() { stopEventExecution = true; }; var event = this.genEventObject(data); }, getDraggableElement: function getDraggableElement() { var selector = typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable; if (selector) { var handler = this.$refs.overlay.querySelector(selector); if (handler) { return handler; } } }, addDraggableListeners: function addDraggableListeners() { var _this3 = this; if (!this.draggable) { return; } var dragger = this.getDraggableElement(); if (dragger) { var startX = 0; var startY = 0; var cachedShiftX = 0; var cachedShiftY = 0; var getPosition = function getPosition(event) { return event.touches && event.touches.length > 0 ? event.touches[0] : event; }; var mousedown = function mousedown(event) { var _getPosition = getPosition(event), clientX = _getPosition.clientX, clientY = _getPosition.clientY; document.addEventListener('mousemove', _mousemove); document.addEventListener('mouseup', _mouseup); document.addEventListener('touchmove', _mousemove); document.addEventListener('touchend', _mouseup); startX = clientX; startY = clientY; cachedShiftX = _this3.shift.left; cachedShiftY = _this3.shift.top; event.preventDefault(); }; var _mousemove = function _mousemove(event) { var _getPosition2 = getPosition(event), clientX = _getPosition2.clientX, clientY = _getPosition2.clientY; _this3.shift.left = cachedShiftX + clientX - startX; _this3.shift.top = cachedShiftY + clientY - startY; event.preventDefault(); }; var _mouseup = function _mouseup(event) { document.removeEventListener('mousemove', _mousemove); document.removeEventListener('mouseup', _mouseup); document.removeEventListener('touchmove', _mousemove); document.removeEventListener('touchend', _mouseup); event.preventDefault(); }; dragger.addEventListener('mousedown', mousedown); dragger.addEventListener('touchstart', mousedown); } }, removeDraggableListeners: function removeDraggableListeners() {} } }; /***/ }), /* 7 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _util = __webpack_require__(1); exports.default = { name: 'VueJsModalResizer', props: { minHeight: { type: Number, default: 0 }, minWidth: { type: Number, default: 0 } }, data: function data() { return { clicked: false, size: {} }; }, mounted: function mounted() { this.$el.addEventListener('mousedown', this.start, false); }, computed: { className: function className() { return { 'vue-modal-resizer': true, 'clicked': this.clicked }; } }, methods: { start: function start(event) { this.clicked = true; window.addEventListener('mousemove', this.mousemove, false); window.addEventListener('mouseup', this.stop, false); event.stopPropagation(); event.preventDefault(); }, stop: function stop() { this.clicked = false; window.removeEventListener('mousemove', this.mousemove, false); window.removeEventListener('mouseup', this.stop, false); this.$emit('resize-stop', { element: this.$el.parentElement, size: this.size }); }, mousemove: function mousemove(event) { this.resize(event); }, resize: function resize(event) { var el = this.$el.parentElement; if (el) { var width = event.clientX - el.offsetLeft; var height = event.clientY - el.offsetTop; width = (0, _util.inRange)(this.minWidth, window.innerWidth, width); height = (0, _util.inRange)(this.minHeight, window.innerHeight, height); this.size = { width: width, height: height }; el.style.width = width + 'px'; el.style.height = height + 'px'; this.$emit('resize', { element: el, size: this.size }); } } } }; /***/ }), /* 8 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(2)(); // imports // module exports.push([module.i, ".v--modal-overlay{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.v--modal-overlay .v--modal-box{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.v--modal{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.v--modal.v--modal-fullscreen{width:100vw;height:100vh;margin:0;left:0;top:0}.v--modal-top-right{display:block;position:absolute;right:0;top:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:all .2s}.overlay-fade-enter,.overlay-fade-leave-active{opacity:0}.nice-modal-fade-enter-active,.nice-modal-fade-leave-active{transition:all .4s}.nice-modal-fade-enter,.nice-modal-fade-leave-active{opacity:0;transform:translateY(-20px)}", ""]); // exports /***/ }), /* 9 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(2)(); // imports // module exports.push([module.i, ".vue-modal-resizer{overflow:hidden;width:12px;height:12px;right:0;bottom:0;z-index:9999999;cursor:se-resize}.vue-modal-resizer,.vue-modal-resizer:after{display:block;position:absolute;background:transparent}.vue-modal-resizer:after{content:\"\";left:0;top:0;width:0;height:0;border-bottom:10px solid #ddd;border-left:10px solid transparent}.vue-modal-resizer.clicked:after{border-bottom:10px solid #369be9}", ""]); // exports /***/ }), /* 10 */ /***/ (function(module, exports, __webpack_require__) { /* styles */ __webpack_require__(14) var Component = __webpack_require__(3)( /* script */ __webpack_require__(7), /* template */ __webpack_require__(12), /* scopeId */ null, /* cssModules */ null ) module.exports = Component.exports /***/ }), /* 11 */ /***/ (function(module, exports) { module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; return _c('transition', { attrs: { "name": "overlay-fade" } }, [(_vm.visibility.overlay) ? _c('div', { ref: "overlay", staticClass: "v--modal-overlay", attrs: { "aria-expanded": _vm.visible.toString(), "data-modal": _vm.name }, on: { "mousedown": function($event) { $event.stopPropagation(); _vm.toggle(false) } } }, [_c('div', { staticClass: "v--modal-top-right" }, [_vm._t("top-right")], 2), _vm._v(" "), _c('transition', { attrs: { "name": _vm.transition } }, [(_vm.visibility.modal) ? _c('div', { ref: "modal", class: _vm.modalClass, style: (_vm.modalStyle), on: { "mousedown": function($event) { $event.stopPropagation(); } } }, [_vm._t("default"), _vm._v(" "), (_vm.resizable) ? _c('resizer', { attrs: { "min-width": _vm.minWidth, "min-height": _vm.minHeight }, on: { "resize": _vm.resize } }) : _vm._e()], 2) : _vm._e()])], 1) : _vm._e()]) },staticRenderFns: []} /***/ }), /* 12 */ /***/ (function(module, exports) { module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; return _c('div', { class: _vm.className }) },staticRenderFns: []} /***/ }), /* 13 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a