diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js index 87b7956..beec90a 100644 --- a/build/webpack.base.config.js +++ b/build/webpack.base.config.js @@ -35,6 +35,9 @@ module.exports = { }, devtool: '#source-map', plugins: [ - // new UglifyJSPlugin() + new UglifyJSPlugin({ + mangle: false, + beautify: true + }) ] } diff --git a/dist/index.js b/dist/index.js index f435c2c..252452e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,1563 +1,859 @@ -(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__) { - -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra - Modified by Evan You @yyx990803 -*/ - -var hasDocument = typeof document !== 'undefined' - -if (typeof DEBUG !== 'undefined' && DEBUG) { - if (!hasDocument) { - throw new Error( - 'vue-style-loader cannot be used in a non-browser environment. ' + - "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment." - ) } -} - -var listToStyles = __webpack_require__(21) - -/* -type StyleObject = { - id: number; - parts: Array -} - -type StyleObjectPart = { - css: string; - media: string; - sourceMap: ?string -} -*/ - -var stylesInDom = {/* - [id: number]: { - id: number, - refs: number, - parts: Array<(obj?: StyleObjectPart) => void> - } -*/} - -var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]) -var singletonElement = null -var singletonCounter = 0 -var isProduction = false -var noop = function () {} - -// Force single-tag solution on IE6-9, which has a hard limit on the # of \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-block-scroll {\n overflow: hidden;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n}\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?2c0ce702"],"names":[],"mappings":";AAufA;EACA,iBAAA;CACA;AAEA;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"],"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"],"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.")} - -/* hot reload */ -if (false) {(function () { - var hotAPI = require("vue-hot-reload-api") - hotAPI.install(require("vue"), false) - if (!hotAPI.compatible) return - module.hot.accept() - if (!module.hot.data) { - hotAPI.createRecord("data-v-60fe12fc", Component.options) - } else { - hotAPI.reload("data-v-60fe12fc", Component.options) - } -})()} - -module.exports = Component.exports - - -/***/ }), -/* 15 */ -/***/ (function(module, exports, __webpack_require__) { - -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": _vm.width, - "height": "auto", - "pivot-y": 0.3, - "adaptive": true, - "clickToClose": _vm.clickToClose, - "transition": _vm.transition - }, - 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) + var _Modal = __webpack_require__(6), _Modal2 = _interopRequireDefault(_Modal), _Dialog = __webpack_require__(5), _Dialog2 = _interopRequireDefault(_Dialog), Plugin = { + install: function(Vue) { + var options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; + if (!this.installed) { + this.installed = !0, this.event = new Vue(), Vue.prototype.$modal = { + show: function(name, params) { + Plugin.event.$emit("toggle", name, !0, params); + }, + hide: function(name, params) { + Plugin.event.$emit("toggle", name, !1, params); + }, + toggle: function(name, params) { + Plugin.event.$emit("toggle", name, void 0, params); + } + }; + var componentName = options.componentName || "modal"; + Vue.component(componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default); + } + } + }; + exports.default = Plugin; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var inRange = exports.inRange = function(from, to, value) { + return value < from ? from : value > to ? to : value; + }; + exports.default = { + inRange: inRange + }; + }, 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/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/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; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }), exports.default = { + name: "Dialog", + props: { + width: { + type: [ Number, String ], + default: 400 + }, + clickToClose: { + type: Boolean, + default: !0 + }, + transition: { + type: String, + default: "fade" + } + }, + data: function() { + return { + params: {}, + defaultButtons: [ { + title: "CLOSE" + } ] + }; + }, + computed: { + buttons: function() { + return this.params.buttons || this.defaultButtons; + }, + buttonStyle: function() { + return { + flex: "1 1 " + 100 / this.buttons.length + "%" + }; + } + }, + methods: { + beforeOpened: function(event) { + this.params = event.params || {}; + }, + beforeClosed: function() { + this.params = {}; + }, + click: function(i, event) { + var button = this.buttons[i]; + if ("function" == typeof button.handler) return button.handler(i, event); + this.$modal.hide("dialog"); + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; } - } - }, [_vm._v("\n " + _vm._s(button.title) + "\n ")]) - })) : _c('div', { - staticClass: "dialog-buttons-none" - })]) -},staticRenderFns: []} -module.exports.render._withStripped = true -if (false) { - module.hot.accept() - if (module.hot.data) { - require("vue-hot-reload-api").rerender("data-v-18cd6db4", module.exports) - } -} + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _vue = __webpack_require__(22), _vue2 = _interopRequireDefault(_vue), _index = __webpack_require__(3), _index2 = _interopRequireDefault(_index), _Resizer = __webpack_require__(14), _Resizer2 = _interopRequireDefault(_Resizer), _util = __webpack_require__(4), _parser = __webpack_require__(10), _parser2 = _interopRequireDefault(_parser); + exports.default = { + name: "VueJsModal", + props: { + name: { + required: !0, + type: String + }, + delay: { + type: Number, + default: 0 + }, + resizable: { + type: Boolean, + default: !1 + }, + adaptive: { + type: Boolean, + default: !1 + }, + draggable: { + type: [ Boolean, String ], + default: !1 + }, + scrollable: { + type: Boolean, + default: !1 + }, + reset: { + type: Boolean, + default: !1 + }, + transition: { + type: String + }, + clickToClose: { + type: Boolean, + default: !0 + }, + classes: { + type: [ String, Array ], + default: "v--modal" + }, + minWidth: { + type: Number, + default: 0, + validator: function(value) { + return value >= 0; + } + }, + minHeight: { + type: Number, + default: 0, + validator: function(value) { + return value >= 0; + } + }, + width: { + type: [ Number, String ], + default: 600, + validator: function(value) { + if ("string" == typeof value) { + var width = (0, _parser2.default)(value); + return ("%" === width.type || "px" === width.type) && width.value > 0; + } + return value >= 0; + } + }, + height: { + type: [ Number, String ], + default: 300, + validator: function(value) { + if ("string" == typeof value) { + if ("auto" === value) return !0; + var height = (0, _parser2.default)(value); + return ("%" === height.type || "px" === height.type) && height.value > 0; + } + return value >= 0; + } + }, + pivotX: { + type: Number, + default: .5, + validator: function(value) { + return value >= 0 && value <= 1; + } + }, + pivotY: { + type: Number, + default: .5, + validator: function(value) { + return value >= 0 && value <= 1; + } + } + }, + components: { + Resizer: _Resizer2.default + }, + data: function() { + return { + visible: !1, + visibility: { + modal: !1, + overlay: !1 + }, + shift: { + left: 0, + top: 0 + }, + modal: { + width: 0, + widthType: "px", + height: 0, + heightType: "px" + }, + window: { + width: 0, + height: 0 + } + }; + }, + watch: { + visible: function(value) { + var _this = this; + value ? (this.visibility.overlay = !0, setTimeout(function() { + _this.visibility.modal = !0, _this.$nextTick(function() { + _this.addDraggableListeners(); + }); + }, this.delay)) : (this.visibility.modal = !1, setTimeout(function() { + _this.visibility.overlay = !1, _this.$nextTick(function() { + _this.removeDraggableListeners(); + }); + }, this.delay)); + } + }, + created: function() { + this.setInitialSize(); + }, + beforeMount: function() { + var _this2 = this; + _index2.default.event.$on("toggle", function(name, state, params) { + name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params)); + }), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(), + this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"); + }, + beforeDestroy: function() { + window.removeEventListener("resize", this.onWindowResize); + }, + computed: { + isAutoHeight: function() { + return "auto" === this.modal.heightType; + }, + position: function() { + var window = this.window, shift = this.shift, pivotX = this.pivotX, pivotY = this.pivotY, trueModalWidth = this.trueModalWidth, trueModalHeight = this.trueModalHeight, maxLeft = window.width - trueModalWidth, maxTop = window.height - trueModalHeight, minTop = this.scrollable ? Number.NEGATIVE_INFINITY : 0, left = shift.left + pivotX * maxLeft, top = shift.top + pivotY * maxTop; + return { + left: (0, _util.inRange)(0, maxLeft, left), + top: (0, _util.inRange)(minTop, maxTop, top) + }; + }, + 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; + }, + 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 ? 0 : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value; + }, + overlayClass: function() { + return { + "v--modal-overlay": !0, + scrollable: this.scrollable && this.isAutoHeight + }; + }, + modalClass: function() { + return [ "v--modal-box", this.classes ]; + }, + modalStyle: function() { + 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() { + var modal = this.modal, width = (0, _parser2.default)(this.width), height = (0, + _parser2.default)(this.height); + modal.width = width.value, modal.widthType = width.type, modal.height = height.value, + modal.heightType = height.type; + }, + onWindowResize: function() { + this.window.width = document.body.clientWidth, this.window.height = window.innerHeight; + }, + genEventObject: function(params) { + var data = { + name: this.name, + timestamp: Date.now(), + canceled: !1, + ref: this.$refs.modal + }; + return _vue2.default.util.extend(data, params || {}); + }, + onModalResize: function(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, resizeEvent = this.genEventObject({ + size: size + }); + this.$emit("resize", resizeEvent); + }, + toggle: function(state, params) { + var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open", afterEventName = visible ? "closed" : "opened"; + "before-open" === beforeEventName && (reset && (this.setInitialSize(), this.shift.left = 0, + this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")), + "before-close" === beforeEventName && scrollable && document.body.classList.remove("v--modal-block-scroll"); + var stopEventExecution = !1, stop = function() { + stopEventExecution = !0; + }, beforeEvent = this.genEventObject({ + stop: stop, + state: state, + params: params + }); + if (this.$emit(beforeEventName, beforeEvent), !stopEventExecution) { + var afterEvent = this.genEventObject({ + state: state, + params: params + }); + this.visible = state, this.$emit(afterEventName, afterEvent); + } + }, + getDraggableElement: function() { + var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable; + if (selector) { + var handler = this.$refs.overlay.querySelector(selector); + if (handler) return handler; + } + }, + onBackgroundClick: function() { + this.clickToClose && this.toggle(!1); + }, + addDraggableListeners: function() { + var _this3 = this; + if (this.draggable) { + var dragger = this.getDraggableElement(); + if (dragger) { + var startX = 0, startY = 0, cachedShiftX = 0, cachedShiftY = 0, getPosition = function(event) { + return event.touches && event.touches.length > 0 ? event.touches[0] : event; + }, mousedown = function(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(); + }, _mousemove = function(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(); + }, _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() {} + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _util = __webpack_require__(4); + exports.default = { + name: "VueJsModalResizer", + props: { + minHeight: { + type: Number, + default: 0 + }, + minWidth: { + type: Number, + default: 0 + } + }, + data: function() { + return { + clicked: !1, + size: {} + }; + }, + mounted: function() { + this.$el.addEventListener("mousedown", this.start, !1); + }, + computed: { + className: function() { + return { + "vue-modal-resizer": !0, + clicked: this.clicked + }; + } + }, + methods: { + start: function(event) { + this.clicked = !0, window.addEventListener("mousemove", this.mousemove, !1), window.addEventListener("mouseup", this.stop, !1), + event.stopPropagation(), event.preventDefault(); + }, + stop: function() { + this.clicked = !1, window.removeEventListener("mousemove", this.mousemove, !1), + window.removeEventListener("mouseup", this.stop, !1), this.$emit("resize-stop", { + element: this.$el.parentElement, + size: this.size + }); + }, + mousemove: function(event) { + this.resize(event); + }, + resize: function(event) { + var el = this.$el.parentElement; + if (el) { + var width = event.clientX - el.offsetLeft, 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 + }); + } + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { + return typeof obj; + } : function(obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, types = [ { + name: "px", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+px$") + }, { + name: "%", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+%$") + }, { + name: "px", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+$") + } ], getType = function(value) { + if ("auto" === value) 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 + }; + }, parse = exports.parse = function(value) { + switch (void 0 === value ? "undefined" : _typeof(value)) { + case "number": + return { + type: "px", + value: value + }; -/***/ }), -/* 16 */ -/***/ (function(module, exports, __webpack_require__) { + case "string": + return getType(value); -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) - }, - "touchstart": 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(); - }, - "touchstart": 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 -if (false) { - module.hot.accept() - if (module.hot.data) { - require("vue-hot-reload-api").rerender("data-v-40dd3b1e", module.exports) - } -} - -/***/ }), -/* 17 */ -/***/ (function(module, exports, __webpack_require__) { - -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 -if (false) { - module.hot.accept() - if (module.hot.data) { - require("vue-hot-reload-api").rerender("data-v-60fe12fc", module.exports) - } -} - -/***/ }), -/* 18 */ -/***/ (function(module, exports, __webpack_require__) { - -// style-loader: Adds some css to the DOM by adding a \n' ], + sourceRoot: "webpack://" + } ]); + }, function(module, exports, __webpack_require__) { + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n}\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?2c0ce702" ], + names: [], + mappings: ";AAufA;EACA,iBAAA;CACA;AAEA;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"],"sourceRoot":"webpack://"}]); - -// exports - - -/***/ }), -/* 12 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(0)(); -// imports - - -// module -exports.push([module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n}\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?2c0ce702"],"names":[],"mappings":";AAufA;EACA,iBAAA;CACA;AAEA;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"],"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"],"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": _vm.width, - "height": "auto", - "pivot-y": 0.3, - "adaptive": true, - "clickToClose": _vm.clickToClose, - "transition": _vm.transition - }, - 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) + var _Modal = __webpack_require__(6), _Modal2 = _interopRequireDefault(_Modal), _Dialog = __webpack_require__(5), _Dialog2 = _interopRequireDefault(_Dialog), Plugin = { + install: function(Vue) { + var options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; + if (!this.installed) { + this.installed = !0, this.event = new Vue(), Vue.prototype.$modal = { + show: function(name, params) { + Plugin.event.$emit("toggle", name, !0, params); + }, + hide: function(name, params) { + Plugin.event.$emit("toggle", name, !1, params); + }, + toggle: function(name, params) { + Plugin.event.$emit("toggle", name, void 0, params); + } + }; + var componentName = options.componentName || "modal"; + Vue.component(componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default); + } + } + }; + exports.default = Plugin; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var inRange = exports.inRange = function(from, to, value) { + return value < from ? from : value > to ? to : value; + }; + exports.default = { + inRange: inRange + }; + }, 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/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/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; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }), exports.default = { + name: "Dialog", + props: { + width: { + type: [ Number, String ], + default: 400 + }, + clickToClose: { + type: Boolean, + default: !0 + }, + transition: { + type: String, + default: "fade" + } + }, + data: function() { + return { + params: {}, + defaultButtons: [ { + title: "CLOSE" + } ] + }; + }, + computed: { + buttons: function() { + return this.params.buttons || this.defaultButtons; + }, + buttonStyle: function() { + return { + flex: "1 1 " + 100 / this.buttons.length + "%" + }; + } + }, + methods: { + beforeOpened: function(event) { + this.params = event.params || {}; + }, + beforeClosed: function() { + this.params = {}; + }, + click: function(i, event) { + var button = this.buttons[i]; + if ("function" == typeof button.handler) return button.handler(i, event); + this.$modal.hide("dialog"); + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; } - } - }, [_vm._v("\n " + _vm._s(button.title) + "\n ")]) - })) : _c('div', { - staticClass: "dialog-buttons-none" - })]) -},staticRenderFns: []} -module.exports.render._withStripped = true + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _vue = __webpack_require__(22), _vue2 = _interopRequireDefault(_vue), _index = __webpack_require__(3), _index2 = _interopRequireDefault(_index), _Resizer = __webpack_require__(14), _Resizer2 = _interopRequireDefault(_Resizer), _util = __webpack_require__(4), _parser = __webpack_require__(10), _parser2 = _interopRequireDefault(_parser); + exports.default = { + name: "VueJsModal", + props: { + name: { + required: !0, + type: String + }, + delay: { + type: Number, + default: 0 + }, + resizable: { + type: Boolean, + default: !1 + }, + adaptive: { + type: Boolean, + default: !1 + }, + draggable: { + type: [ Boolean, String ], + default: !1 + }, + scrollable: { + type: Boolean, + default: !1 + }, + reset: { + type: Boolean, + default: !1 + }, + transition: { + type: String + }, + clickToClose: { + type: Boolean, + default: !0 + }, + classes: { + type: [ String, Array ], + default: "v--modal" + }, + minWidth: { + type: Number, + default: 0, + validator: function(value) { + return value >= 0; + } + }, + minHeight: { + type: Number, + default: 0, + validator: function(value) { + return value >= 0; + } + }, + width: { + type: [ Number, String ], + default: 600, + validator: function(value) { + if ("string" == typeof value) { + var width = (0, _parser2.default)(value); + return ("%" === width.type || "px" === width.type) && width.value > 0; + } + return value >= 0; + } + }, + height: { + type: [ Number, String ], + default: 300, + validator: function(value) { + if ("string" == typeof value) { + if ("auto" === value) return !0; + var height = (0, _parser2.default)(value); + return ("%" === height.type || "px" === height.type) && height.value > 0; + } + return value >= 0; + } + }, + pivotX: { + type: Number, + default: .5, + validator: function(value) { + return value >= 0 && value <= 1; + } + }, + pivotY: { + type: Number, + default: .5, + validator: function(value) { + return value >= 0 && value <= 1; + } + } + }, + components: { + Resizer: _Resizer2.default + }, + data: function() { + return { + visible: !1, + visibility: { + modal: !1, + overlay: !1 + }, + shift: { + left: 0, + top: 0 + }, + modal: { + width: 0, + widthType: "px", + height: 0, + heightType: "px" + }, + window: { + width: 0, + height: 0 + } + }; + }, + watch: { + visible: function(value) { + var _this = this; + value ? (this.visibility.overlay = !0, setTimeout(function() { + _this.visibility.modal = !0, _this.$nextTick(function() { + _this.addDraggableListeners(); + }); + }, this.delay)) : (this.visibility.modal = !1, setTimeout(function() { + _this.visibility.overlay = !1, _this.$nextTick(function() { + _this.removeDraggableListeners(); + }); + }, this.delay)); + } + }, + created: function() { + this.setInitialSize(); + }, + beforeMount: function() { + var _this2 = this; + _index2.default.event.$on("toggle", function(name, state, params) { + name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params)); + }), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(), + this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"); + }, + beforeDestroy: function() { + window.removeEventListener("resize", this.onWindowResize); + }, + computed: { + isAutoHeight: function() { + return "auto" === this.modal.heightType; + }, + position: function() { + var window = this.window, shift = this.shift, pivotX = this.pivotX, pivotY = this.pivotY, trueModalWidth = this.trueModalWidth, trueModalHeight = this.trueModalHeight, maxLeft = window.width - trueModalWidth, maxTop = window.height - trueModalHeight, minTop = this.scrollable ? Number.NEGATIVE_INFINITY : 0, left = shift.left + pivotX * maxLeft, top = shift.top + pivotY * maxTop; + return { + left: (0, _util.inRange)(0, maxLeft, left), + top: (0, _util.inRange)(minTop, maxTop, top) + }; + }, + 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; + }, + 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 ? 0 : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value; + }, + overlayClass: function() { + return { + "v--modal-overlay": !0, + scrollable: this.scrollable && this.isAutoHeight + }; + }, + modalClass: function() { + return [ "v--modal-box", this.classes ]; + }, + modalStyle: function() { + 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() { + var modal = this.modal, width = (0, _parser2.default)(this.width), height = (0, + _parser2.default)(this.height); + modal.width = width.value, modal.widthType = width.type, modal.height = height.value, + modal.heightType = height.type; + }, + onWindowResize: function() { + this.window.width = document.body.clientWidth, this.window.height = window.innerHeight; + }, + genEventObject: function(params) { + var data = { + name: this.name, + timestamp: Date.now(), + canceled: !1, + ref: this.$refs.modal + }; + return _vue2.default.util.extend(data, params || {}); + }, + onModalResize: function(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, resizeEvent = this.genEventObject({ + size: size + }); + this.$emit("resize", resizeEvent); + }, + toggle: function(state, params) { + var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open", afterEventName = visible ? "closed" : "opened"; + "before-open" === beforeEventName && (reset && (this.setInitialSize(), this.shift.left = 0, + this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")), + "before-close" === beforeEventName && scrollable && document.body.classList.remove("v--modal-block-scroll"); + var stopEventExecution = !1, stop = function() { + stopEventExecution = !0; + }, beforeEvent = this.genEventObject({ + stop: stop, + state: state, + params: params + }); + if (this.$emit(beforeEventName, beforeEvent), !stopEventExecution) { + var afterEvent = this.genEventObject({ + state: state, + params: params + }); + this.visible = state, this.$emit(afterEventName, afterEvent); + } + }, + getDraggableElement: function() { + var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable; + if (selector) { + var handler = this.$refs.overlay.querySelector(selector); + if (handler) return handler; + } + }, + onBackgroundClick: function() { + this.clickToClose && this.toggle(!1); + }, + addDraggableListeners: function() { + var _this3 = this; + if (this.draggable) { + var dragger = this.getDraggableElement(); + if (dragger) { + var startX = 0, startY = 0, cachedShiftX = 0, cachedShiftY = 0, getPosition = function(event) { + return event.touches && event.touches.length > 0 ? event.touches[0] : event; + }, mousedown = function(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(); + }, _mousemove = function(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(); + }, _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() {} + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _util = __webpack_require__(4); + exports.default = { + name: "VueJsModalResizer", + props: { + minHeight: { + type: Number, + default: 0 + }, + minWidth: { + type: Number, + default: 0 + } + }, + data: function() { + return { + clicked: !1, + size: {} + }; + }, + mounted: function() { + this.$el.addEventListener("mousedown", this.start, !1); + }, + computed: { + className: function() { + return { + "vue-modal-resizer": !0, + clicked: this.clicked + }; + } + }, + methods: { + start: function(event) { + this.clicked = !0, window.addEventListener("mousemove", this.mousemove, !1), window.addEventListener("mouseup", this.stop, !1), + event.stopPropagation(), event.preventDefault(); + }, + stop: function() { + this.clicked = !1, window.removeEventListener("mousemove", this.mousemove, !1), + window.removeEventListener("mouseup", this.stop, !1), this.$emit("resize-stop", { + element: this.$el.parentElement, + size: this.size + }); + }, + mousemove: function(event) { + this.resize(event); + }, + resize: function(event) { + var el = this.$el.parentElement; + if (el) { + var width = event.clientX - el.offsetLeft, 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 + }); + } + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { + return typeof obj; + } : function(obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, types = [ { + name: "px", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+px$") + }, { + name: "%", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+%$") + }, { + name: "px", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+$") + } ], getType = function(value) { + if ("auto" === value) 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 + }; + }, parse = exports.parse = function(value) { + switch (void 0 === value ? "undefined" : _typeof(value)) { + case "number": + return { + type: "px", + value: value + }; -/***/ }), -/* 16 */ -/***/ (function(module, exports) { + case "string": + return getType(value); -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) - }, - "touchstart": 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(); - }, - "touchstart": 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 \n' ], + sourceRoot: "webpack://" + } ]); + }, function(module, exports, __webpack_require__) { + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n}\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?2c0ce702" ], + names: [], + mappings: ";AAufA;EACA,iBAAA;CACA;AAEA;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