(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["vue-js-modal"] = factory(require("vue")); else root["vue-js-modal"] = factory(root["vue"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_22__) { 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 = 3); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (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; }; /***/ }), /* 1 */ /***/ (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 } } /***/ }), /* 2 */ /***/ (function(module, exports, __webpack_require__) { var listToStyles = __webpack_require__(21) 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 } /***/ }), /* 3 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _Modal = __webpack_require__(6); var _Modal2 = _interopRequireDefault(_Modal); var _Dialog = __webpack_require__(5); var _Dialog2 = _interopRequireDefault(_Dialog); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var defaultComponentName = 'modal'; var Plugin = { install: function install(Vue) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (this.installed) { return; } this.installed = true; this.event = new Vue(); Vue.prototype.$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); } }; var componentName = options.componentName || defaultComponentName; Vue.component(componentName, _Modal2.default); if (options.dialog) { Vue.component('v-dialog', _Dialog2.default); } } }; exports.default = Plugin; /***/ }), /* 4 */ /***/ (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; }; exports.default = { inRange: inRange }; /***/ }), /* 5 */ /***/ (function(module, exports, __webpack_require__) { /* styles */ __webpack_require__(18) var Component = __webpack_require__(1)( /* script */ __webpack_require__(7), /* template */ __webpack_require__(15), /* scopeId */ null, /* cssModules */ null ) Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue" if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")} if (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 /***/ }), /* 6 */ /***/ (function(module, exports, __webpack_require__) { /* styles */ __webpack_require__(19) var Component = __webpack_require__(1)( /* script */ __webpack_require__(8), /* template */ __webpack_require__(16), /* scopeId */ null, /* cssModules */ null ) Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue" if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")} if (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 /***/ }), /* 7 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = { name: 'Dialog', data: function data() { return { params: {}, defaultButtons: [{ title: 'CLOSE' }] }; }, computed: { buttons: function buttons() { return this.params.buttons || this.defaultButtons; }, buttonStyle: function buttonStyle() { return { flex: '1 1 ' + 100 / this.buttons.length + '%' }; } }, methods: { beforeOpened: function beforeOpened(event) { this.params = event.params || {}; }, beforeClosed: function beforeClosed() { this.params = {}; }, click: function click(i, event) { var button = this.buttons[i]; if (typeof button.handler === 'function') { return button.handler(i, event); } else { this.$modal.hide('dialog'); } } } }; /***/ }), /* 8 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _vue = __webpack_require__(22); var _vue2 = _interopRequireDefault(_vue); var _index = __webpack_require__(3); var _index2 = _interopRequireDefault(_index); var _Resizer = __webpack_require__(14); var _Resizer2 = _interopRequireDefault(_Resizer); var _util = __webpack_require__(4); var _parser = __webpack_require__(10); var _parser2 = _interopRequireDefault(_parser); 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 }, scrollable: { type: Boolean, default: false }, reset: { type: Boolean, default: false }, transition: { type: String }, clickToClose: { type: Boolean, default: true }, 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; } }, width: { type: [Number, String], default: 600, validator: function validator(value) { if (typeof value === 'string') { var width = (0, _parser2.default)(value); return (width.type === '%' || width.type === 'px') && width.value > 0; } return value >= 0; } }, height: { type: [Number, String], default: 300, validator: function validator(value) { if (typeof value === 'string') { if (value === 'auto') { return true; } var height = (0, _parser2.default)(value); return (height.type === '%' || height.type === 'px') && height.value > 0; } 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: 0, widthType: 'px', height: 0, heightType: 'px' }, window: { width: 0, height: 0 } }; }, watch: { visible: function visible(value) { var _this = this; if (value) { this.visibility.overlay = true; 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); } } }, created: function created() { this.setInitialSize(); }, 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(); if (this.scrollable && !this.isAutoHeight) { console.warn('Modal "' + this.name + '" has scrollable flag set to true ' + ('but height is not "auto" (' + this.height + ')')); } }, beforeDestroy: function beforeDestroy() { window.removeEventListener('resize', this.onWindowResize); }, computed: { isAutoHeight: function isAutoHeight() { return this.modal.heightType === 'auto'; }, position: function position() { var window = this.window, shift = this.shift, pivotX = this.pivotX, pivotY = this.pivotY, trueModalWidth = this.trueModalWidth, trueModalHeight = this.trueModalHeight; var maxLeft = window.width - trueModalWidth; var maxTop = window.height - trueModalHeight; var minTop = this.scrollable ? Number.NEGATIVE_INFINITY : 0; var left = shift.left + pivotX * maxLeft; var top = shift.top + pivotY * maxTop; return { left: (0, _util.inRange)(0, maxLeft, left), top: (0, _util.inRange)(minTop, maxTop, top) }; }, trueModalWidth: function trueModalWidth() { var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth; var value = modal.widthType === '%' ? window.width / 100 * modal.width : modal.width; return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value; }, trueModalHeight: function trueModalHeight() { var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive; var value = modal.heightType === '%' ? window.height / 100 * modal.height : modal.height; if (isAutoHeight) { return 0; } return adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value; }, overlayClass: function overlayClass() { return { 'v--modal-overlay': true, 'scrollable': this.scrollable && this.isAutoHeight }; }, 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.trueModalWidth + 'px', height: this.isAutoHeight ? 'auto' : this.trueModalHeight + 'px' }; } }, methods: { setInitialSize: function setInitialSize() { var modal = this.modal; var width = (0, _parser2.default)(this.width); var height = (0, _parser2.default)(this.height); modal.width = width.value; modal.widthType = width.type; modal.height = height.value; modal.heightType = height.type; }, onWindowResize: function onWindowResize() { this.window.width = document.body.clientWidth; this.window.height = window.innerHeight; }, genEventObject: function genEventObject(params) { var data = { name: this.name, timestamp: Date.now(), canceled: false, ref: this.$refs.modal }; return _vue2.default.util.extend(data, params || {}); }, onModalResize: function onModalResize(event) { this.modal.widthType = 'px'; this.modal.width = event.size.width; this.modal.heightType = 'px'; 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 reset = this.reset, visible = this.visible; var beforeEventName = visible ? 'before-close' : 'before-open'; var afterEventName = visible ? 'closed' : 'opened'; if (beforeEventName === 'before-open' && reset) { this.setInitialSize(); this.shift.left = 0; this.shift.top = 0; } 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); } }, 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; } } }, onBackgroundClick: function onBackgroundClick() { if (this.clickToClose) { this.toggle(false); } }, 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() {} } }; /***/ }), /* 9 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _util = __webpack_require__(4); 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 }); } } } }; /***/ }), /* 10 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var floatRegexp = '[-+]?[0-9]*.?[0-9]+'; var types = [{ name: 'px', regexp: new RegExp('^' + floatRegexp + 'px$') }, { name: '%', regexp: new RegExp('^' + floatRegexp + '%$') }, { name: 'px', regexp: new RegExp('^' + floatRegexp + '$') }]; var getType = function getType(value) { if (value === 'auto') { return { type: value, value: 0 }; } for (var i = 0; i < types.length; i++) { var type = types[i]; if (type.regexp.test(value)) { return { type: type.name, value: parseFloat(value) }; } } return { type: '', value: value }; }; var parse = exports.parse = function parse(value) { switch (typeof value === 'undefined' ? 'undefined' : _typeof(value)) { case 'number': return { type: 'px', value: value }; case 'string': return getType(value); default: return { type: '', value: value }; } }; exports.default = parse; /***/ }), /* 11 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(0)(); // imports // module exports.push([module.i, "\n.vue-dialog {\n font-size: 14px;\n}\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}\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 .dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n font-size: 12px;\n}\n.vue-dialog .dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog button {\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 44px;\n height: 44px;\n\n/* text-transform: uppercase; */\n/* letter-spacing: 1px; */\n\n color:inherit;\n font:inherit;\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", "", {"version":3,"sources":["/./src/Dialog.vue?52df2bd4"],"names":[],"mappings":";AAwEA;EACA,gBAAA;CACA;AAEA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CACA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;EACA,gBAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,iCAAA;AACA,2BAAA;;EAEA,cAAA;EACA,aAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA","file":"Dialog.vue","sourcesContent":["\n \n \n \n \n \n \n \n {{button.title}}\n \n \n \n \n\n\n\n"],"sourceRoot":"webpack://"}]); // exports /***/ }), /* 12 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(0)(); // imports // module exports.push([module.i, "\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n}\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: 10px;\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "", {"version":3,"sources":["/./src/Modal.vue?5d1718c2"],"names":[],"mappings":";AAyeA;EACA,gBAAA;EACA,uBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,aAAA;EACA,kBAAA;EACA,iBAAA;EACA,qBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;CACA;AAEA;EACA,oBAAA;CACA;AAEA;EACA,wBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kDAAA;EACA,WAAA;CACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;EACA,6BAAA;CACA","file":"Modal.vue","sourcesContent":["\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n"],"sourceRoot":"webpack://"}]); // exports /***/ }), /* 13 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(0)(); // imports // module 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", "", {"version":3,"sources":["/./src/Resizer.vue?29279603"],"names":[],"mappings":";AA+EA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,wBAAA;EACA,kBAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,wBAAA;EACA,QAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,+BAAA;EACA,oCAAA;CACA;AAEA;EACA,kCAAA;CACA","file":"Resizer.vue","sourcesContent":["\n \n\n\n\n"],"sourceRoot":"webpack://"}]); // exports /***/ }), /* 14 */ /***/ (function(module, exports, __webpack_require__) { /* styles */ __webpack_require__(20) var Component = __webpack_require__(1)( /* script */ __webpack_require__(9), /* template */ __webpack_require__(17), /* scopeId */ null, /* cssModules */ null ) Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue" if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")} if (Component.options.functional) {console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions.")} module.exports = Component.exports /***/ }), /* 15 */ /***/ (function(module, exports) { module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; return _c('modal', { attrs: { "name": "dialog", "classes": ['v--modal', 'vue-dialog', this.params.class], "width": 400, "height": "auto", "pivot-y": 0.3, "adaptive": true, "transition": "fade" }, on: { "before-open": _vm.beforeOpened, "before-close": _vm.beforeClosed } }, [_c('div', { staticClass: "dialog-content" }, [(_vm.params.title) ? _c('div', { staticClass: "dialog-c-title", domProps: { "innerHTML": _vm._s(_vm.params.title || '') } }) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "dialog-c-text", domProps: { "innerHTML": _vm._s(_vm.params.text || '') } })]), _vm._v(" "), (_vm.buttons) ? _c('div', { staticClass: "dialog-buttons" }, _vm._l((_vm.buttons), function(button, i) { return _c('button', { key: i, style: (_vm.buttonStyle), domProps: { "innerHTML": _vm._s(button.title) }, on: { "click": function($event) { $event.stopPropagation(); _vm.click(i, $event) } } }, [_vm._v("\n " + _vm._s(button.title) + "\n ")]) })) : _c('div', { staticClass: "dialog-buttons-none" })]) },staticRenderFns: []} module.exports.render._withStripped = true /***/ }), /* 16 */ /***/ (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", class: _vm.overlayClass, attrs: { "aria-expanded": _vm.visible.toString(), "data-modal": _vm.name }, on: { "mousedown": function($event) { $event.stopPropagation(); _vm.onBackgroundClick($event) } } }, [_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 && !_vm.isAutoHeight) ? _c('resizer', { attrs: { "min-width": _vm.minWidth, "min-height": _vm.minHeight }, on: { "resize": _vm.onModalResize } }) : _vm._e()], 2) : _vm._e()])], 1) : _vm._e()]) },staticRenderFns: []} module.exports.render._withStripped = true /***/ }), /* 17 */ /***/ (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: []} module.exports.render._withStripped = true /***/ }), /* 18 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a