mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 18:00:20 +00:00
1 line
27 KiB
JavaScript
1 line
27 KiB
JavaScript
module.exports=function(e){function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/dist/",n(n.s=0)}([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t(5),o=function(e){return e&&e.__esModule?e:{default:e}}(i),a={install:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.hasOwnProperty("event")||(this.event=new e);var n={show:function(e,n){a.event.$emit("toggle",e,!0,n)},hide:function(e,n){a.event.$emit("toggle",e,!1,n)},toggle:function(e,n){a.event.$emit("toggle",e,void 0,n)}};return Object.defineProperty(e.prototype,"$modal",{get:function(){return n}}),e.component("modal",o.default),null}};n.default=a},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});n.inRange=function(e,n,t){return t<e?e:t>n?n:t}},function(e,n){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],n=0;n<this.length;n++){var t=this[n];t[2]?e.push("@media "+t[2]+"{"+t[1]+"}"):e.push(t[1])}return e.join("")},e.i=function(n,t){"string"==typeof n&&(n=[[null,n,""]]);for(var i={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(i[a]=!0)}for(o=0;o<n.length;o++){var s=n[o];"number"==typeof s[0]&&i[s[0]]||(t&&!s[2]?s[2]=t:t&&(s[2]="("+s[2]+") and ("+t+")"),e.push(s))}},e}},function(e,n){e.exports=function(e,n,t,i){var o,a=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(o=e,a=e.default);var r="function"==typeof a?a.options:a;if(n&&(r.render=n.render,r.staticRenderFns=n.staticRenderFns),t&&(r._scopeId=t),i){var l=r.computed||(r.computed={});Object.keys(i).forEach(function(e){var n=i[e];l[e]=function(){return n}})}return{esModule:o,exports:a,options:r}}},function(e,n,t){function i(e){for(var n=0;n<e.length;n++){var t=e[n],i=u[t.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](t.parts[o]);for(;o<t.parts.length;o++)i.parts.push(a(t.parts[o]));i.parts.length>t.parts.length&&(i.parts.length=t.parts.length)}else{for(var s=[],o=0;o<t.parts.length;o++)s.push(a(t.parts[o]));u[t.id]={id:t.id,refs:1,parts:s}}}}function o(){var e=document.createElement("style");return e.type="text/css",h.appendChild(e),e}function a(e){var n,t,i=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(i){if(m)return f;i.parentNode.removeChild(i)}if(p){var a=c++;i=v||(v=o()),n=s.bind(null,i,a,!1),t=s.bind(null,i,a,!0)}else i=o(),n=r.bind(null,i),t=function(){i.parentNode.removeChild(i)};return n(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;n(e=i)}else t()}}function s(e,n,t,i){var o=t?"":i.css;if(e.styleSheet)e.styleSheet.cssText=A(n,o);else{var a=document.createTextNode(o),s=e.childNodes;s[n]&&e.removeChild(s[n]),s.length?e.insertBefore(a,s[n]):e.appendChild(a)}}function r(e,n){var t=n.css,i=n.media,o=n.sourceMap;if(i&&e.setAttribute("media",i),o&&(t+="\n/*# sourceURL="+o.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)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 d=t(15),u={},h=l&&(document.head||document.getElementsByTagName("head")[0]),v=null,c=0,m=!1,f=function(){},p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,n,t){m=t;var o=d(e,n);return i(o),function(n){for(var t=[],a=0;a<o.length;a++){var s=o[a],r=u[s.id];r.refs--,t.push(r)}n?(o=d(e,n),i(o)):o=[];for(var a=0;a<t.length;a++){var r=t[a];if(0===r.refs){for(var l=0;l<r.parts.length;l++)r.parts[l]();delete u[r.id]}}}};var A=function(){var e=[];return function(n,t){return e[n]=t,e.filter(Boolean).join("\n")}}()},function(e,n,t){t(13);var i=t(3)(t(6),t(11),null,null);i.options.__file="/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue",i.esModule&&Object.keys(i.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),e.exports=i.exports},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(16),a=i(o),s=t(0),r=i(s),l=t(10),d=i(l),u=t(1);n.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},transition:{type:String},classes:{type:[String,Array],default:"v--modal"},minWidth:{type:Number,default:0,validator:function(e){return e>=0}},minHeight:{type:Number,default:0,validator:function(e){return e>=0}},adaptiveMaxWidth:{type:Number,default:1,validator:function(e){return e>0&&e<=1}},adaptiveMaxHeight:{type:Number,default:1,validator:function(e){return e>0&&e<=1}},width:{type:Number,default:600,validator:function(e){return e>=0}},height:{type:[Number,String],default:300,validator:function(e){return"string"==typeof e?"auto"===e:"number"==typeof e?e>=0:void 0}},pivotX:{type:Number,default:.5,validator:function(e){return e>=0&&e<=1}},pivotY:{type:Number,default:.5,validator:function(e){return e>=0&&e<=1}}},components:{Resizer:d.default},data:function(){return{visible:!1,visibility:{modal:!1,overlay:!1},shift:{left:0,top:0},modal:{width:this.width,height:this.height},window:{width:0,height:0},draggableElement:!1}},watch:{visible:function(e){var n=this;e?(this.visibility.overlay=!0,this.adaptSize(),setTimeout(function(){n.visibility.modal=!0,n.$nextTick(function(){n.addDraggableListeners()})},this.delay)):(this.visibility.modal=!1,setTimeout(function(){n.visibility.overlay=!1,n.$nextTick(function(){n.removeDraggableListeners()})},this.delay))}},beforeMount:function(){var e=this;r.default.event.$on("toggle",function(n,t,i){n===e.name&&(void 0===t&&(t=!e.visible),e.toggle(t,i))}),window.addEventListener("resize",this.onWindowResize),this.onWindowResize()},beforeDestroy:function(){window.removeEventListener("resize",this.onWindowResize)},computed:{position:function(){var e=this.window,n=this.modal,t=this.shift,i=e.width-n.width,o=e.height-n.height,a=t.left+this.pivotX*(e.width-n.width),s=t.top+this.pivotY*(e.height-n.height);return{left:(0,u.inRange)(0,i,a),top:(0,u.inRange)(0,o,s)}},modalClass:function(){return["v--modal-box",this.classes]},modalStyle:function(){return{top:this.position.top+"px",left:this.position.left+"px",width:this.modal.width+"px",height:this.modal.height+"px"}}},methods:{onWindowResize:function(){this.window.width=window.innerWidth,this.window.height=window.innerHeight,this.adaptSize()},genEventObject:function(e){var n={name:this.name,timestamp:Date.now(),canceled:!1,ref:this.$refs.modal,stop:function(){this.canceled=!0}};return a.default.util.extend(n,e||{})},adaptSize:function(){this.adaptive&&(this.modal.width=(0,u.inRange)(0,this.window.width*this.maxAdaptiveWidth,this.modal.width),this.modal.height=(0,u.inRange)(0,this.window.height*this.maxAdaptiveWidth,this.modal.height))},resize:function(e){this.modal.width=e.size.width,this.modal.height=e.size.height;var n=this.modal.size,t=this.genEventObject({size:n});this.$emit("resize",t)},toggle:function(e,n){var t=this.visible?"before-close":"before-open",i=this.visible?"closed":"opened",o=!1,a=function(){o=!0},s=this.genEventObject({stop:a,state:e,params:n});if(this.$emit(t,s),!o){var r=this.genEventObject({state:e,params:n});this.visible=e,this.$emit(i,r)}},emitCancelableEvent:function(e){this.genEventObject(e)},getDraggableElement:function(){var e="string"!=typeof this.draggable?".v--modal-box":this.draggable;if(e){var n=this.$refs.overlay.querySelector(e);if(n)return n}},addDraggableListeners:function(){var e=this;if(this.draggable){var n=this.getDraggableElement();if(n){var t=0,i=0,o=0,a=0,s=function(e){return e.touches&&e.touches.length>0?e.touches[0]:e},r=function(n){var r=s(n),u=r.clientX,h=r.clientY;document.addEventListener("mousemove",l),document.addEventListener("mouseup",d),document.addEventListener("touchmove",l),document.addEventListener("touchend",d),t=u,i=h,o=e.shift.left,a=e.shift.top,n.preventDefault()},l=function(n){var r=s(n),l=r.clientX,d=r.clientY;e.shift.left=o+l-t,e.shift.top=a+d-i,n.preventDefault()},d=function e(n){document.removeEventListener("mousemove",l),document.removeEventListener("mouseup",e),document.removeEventListener("touchmove",l),document.removeEventListener("touchend",e),n.preventDefault()};n.addEventListener("mousedown",r),n.addEventListener("touchstart",r)}}},removeDraggableListeners:function(){}}}},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t(1);n.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(e){this.clicked=!0,window.addEventListener("mousemove",this.mousemove,!1),window.addEventListener("mouseup",this.stop,!1),e.stopPropagation(),e.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(e){this.resize(e)},resize:function(e){var n=this.$el.parentElement;if(n){var t=e.clientX-n.offsetLeft,o=e.clientY-n.offsetTop;t=(0,i.inRange)(this.minWidth,window.innerWidth,t),o=(0,i.inRange)(this.minHeight,window.innerHeight,o),this.size={width:t,height:o},n.style.width=t+"px",n.style.height=o+"px",this.$emit("resize",{element:n,size:this.size})}}}}},function(e,n,t){n=e.exports=t(2)(),n.push([e.i,"\n.v--modal-overlay {\n position: fixed;\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 .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n background-color: white;\n}\n.v--modal {\n background: 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?0a9916d5"],names:[],mappings:";AAsXA;EACA,gBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,wBAAA;CACA;AAEA;EACA,kBAAA;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:["<template>\n <transition name=\"overlay-fade\">\n <div v-if=\"visibility.overlay\"\n ref=\"overlay\"\n class=\"v--modal-overlay\"\n :aria-expanded=\"visible.toString()\"\n :data-modal=\"name\"\n @mousedown.stop=\"toggle(false)\">\n <div class=\"v--modal-top-right\">\n <slot name=\"top-right\"/>\n </div>\n <transition :name=\"transition\">\n <div v-if=\"visibility.modal\"\n ref=\"modal\"\n :class=\"modalClass\"\n :style=\"modalStyle\"\n @mousedown.stop>\n <slot/>\n <resizer v-if=\"resizable\"\n :min-width=\"minWidth\"\n :min-height=\"minHeight\"\n @resize=\"resize\"/>\n </div>\n </transition>\n </div>\n </transition>\n</template>\n<script>\n import Vue from 'vue'\n import Modal from './index'\n import Resizer from './Resizer.vue'\n import { inRange } from './util'\n\n export default {\n name: 'VueJsModal',\n props: {\n name: {\n required: true,\n type: String\n },\n delay: {\n type: Number,\n default: 0,\n },\n resizable: {\n type: Boolean,\n default: false\n },\n adaptive: {\n type: Boolean,\n default: false\n },\n draggable: {\n type: [Boolean, String],\n default: false\n },\n transition: {\n type: String\n },\n classes: {\n type: [String, Array],\n default: 'v--modal',\n },\n minWidth: {\n type: Number,\n default: 0,\n validator (value) {\n return value >= 0\n }\n },\n minHeight: {\n type: Number,\n default: 0,\n validator (value) {\n return value >= 0\n }\n },\n adaptiveMaxWidth: {\n type: Number,\n default: 1,\n validator (value) {\n return value > 0 && value <= 1\n }\n },\n adaptiveMaxHeight: {\n type: Number,\n default: 1,\n validator (value) {\n return value > 0 && value <= 1\n }\n },\n width: {\n type: Number,\n default: 600,\n validator (value) {\n return value >= 0\n }\n },\n height: {\n type: [Number, String],\n default: 300,\n validator (value) {\n if (typeof value === 'string') {\n return value === 'auto'\n }\n\n if (typeof value === 'number') {\n return value >= 0\n }\n }\n },\n pivotX: {\n type: Number,\n default: 0.5,\n validator (value) {\n return value >= 0 && value <= 1\n }\n },\n pivotY: {\n type: Number,\n default: 0.5,\n validator (value) {\n return value >= 0 && value <= 1\n }\n }\n },\n components: {\n Resizer\n },\n data () {\n return {\n visible: false,\n\n visibility: {\n modal: false,\n overlay: false\n },\n\n shift: {\n left: 0,\n top: 0\n },\n\n modal: {\n width: this.width,\n height: this.height\n },\n\n window: {\n width: 0,\n height: 0\n },\n\n draggableElement: false\n };\n },\n watch: {\n visible (value) {\n if (value) {\n this.visibility.overlay = true\n this.adaptSize()\n\n setTimeout(() => {\n this.visibility.modal = true\n this.$nextTick(() => {\n this.addDraggableListeners()\n })\n }, this.delay)\n } else {\n this.visibility.modal = false\n\n setTimeout(() => {\n this.visibility.overlay = false\n this.$nextTick(() => {\n this.removeDraggableListeners()\n })\n }, this.delay)\n }\n }\n },\n beforeMount () {\n Modal.event.$on('toggle', (name, state, params) => {\n if (name === this.name) {\n if (typeof state === 'undefined') {\n state = !this.visible\n }\n\n this.toggle(state, params)\n }\n });\n\n window.addEventListener('resize', this.onWindowResize)\n this.onWindowResize()\n },\n beforeDestroy () {\n window.removeEventListener('resize', this.onWindowResize)\n },\n computed: {\n position () {\n const { window, modal, shift } = this\n const maxLeft = window.width - modal.width\n const maxTop = window.height - modal.height\n\n const left = shift.left + this.pivotX * (window.width - modal.width)\n const top = shift.top + this.pivotY * (window.height - modal.height)\n\n return {\n left: inRange(0, maxLeft, left),\n top: inRange(0, maxTop, top)\n }\n },\n\n modalClass () {\n return ['v--modal-box', this.classes]\n },\n\n modalStyle () {\n return {\n top: this.position.top + 'px',\n left: this.position.left + 'px',\n width: this.modal.width + 'px',\n height: this.modal.height + 'px'\n }\n }\n },\n methods: {\n onWindowResize () {\n this.window.width = window.innerWidth\n this.window.height = window.innerHeight\n this.adaptSize()\n },\n\n genEventObject (params) {\n //todo: clean this up (change to ...)\n var data = {\n name: this.name,\n timestamp: Date.now(),\n canceled: false,\n ref: this.$refs.modal,\n stop: function() {\n this.canceled = true\n }\n }\n\n return Vue.util.extend(data, params || {});\n },\n\n adaptSize () {\n if (this.adaptive) {\n this.modal.width = inRange(\n 0,\n this.window.width * this.maxAdaptiveWidth,\n this.modal.width)\n this.modal.height = inRange(\n 0,\n this.window.height * this.maxAdaptiveWidth,\n this.modal.height)\n }\n },\n\n resize (event) {\n this.modal.width = event.size.width\n this.modal.height = event.size.height\n\n const { size } = this.modal\n const resizeEvent = this.genEventObject({ size });\n\n this.$emit('resize', resizeEvent)\n },\n\n toggle (state, params) {\n const beforeEventName = this.visible ? 'before-close' : 'before-open'\n const afterEventName = this.visible ? 'closed' : 'opened'\n\n let stopEventExecution = false\n\n const stop = () => { stopEventExecution = true }\n const beforeEvent = this.genEventObject({ stop, state, params })\n\n this.$emit(beforeEventName, beforeEvent)\n\n if (!stopEventExecution) {\n const afterEvent = this.genEventObject({ state, params })\n\n this.visible = state\n this.$emit(afterEventName, afterEvent)\n }\n },\n\n emitCancelableEvent (data) {\n let stopEventExecution = false\n let stop = () => { stopEventExecution = true }\n let event = this.genEventObject(data)\n },\n\n getDraggableElement () {\n var selector = typeof this.draggable !== 'string'\n ? '.v--modal-box'\n : this.draggable\n\n if (selector) {\n var handler = this.$refs.overlay.querySelector(selector)\n if (handler) {\n return handler\n }\n }\n },\n\n addDraggableListeners () {\n if (!this.draggable) {\n return;\n }\n\n let dragger = this.getDraggableElement()\n\n if (dragger) {\n let startX = 0\n let startY = 0\n let cachedShiftX = 0\n let cachedShiftY = 0\n\n let getPosition = (event) => {\n return event.touches && event.touches.length > 0\n ? event.touches[0]\n : event\n }\n\n let mousedown = (event) => {\n let { clientX, clientY } = getPosition(event)\n\n document.addEventListener('mousemove', mousemove)\n document.addEventListener('mouseup', mouseup)\n\n document.addEventListener('touchmove', mousemove)\n document.addEventListener('touchend', mouseup)\n\n startX = clientX\n startY = clientY\n cachedShiftX = this.shift.left\n cachedShiftY = this.shift.top\n\n event.preventDefault()\n }\n\n let mousemove = (event) => {\n let { clientX, clientY } = getPosition(event)\n\n this.shift.left = cachedShiftX + clientX - startX\n this.shift.top = cachedShiftY + clientY - startY\n event.preventDefault()\n }\n\n let mouseup = (event) => {\n document.removeEventListener('mousemove', mousemove)\n document.removeEventListener('mouseup', mouseup)\n\n document.removeEventListener('touchmove', mousemove)\n document.removeEventListener('touchend', mouseup)\n\n event.preventDefault()\n }\n\n dragger.addEventListener('mousedown', mousedown)\n dragger.addEventListener('touchstart', mousedown)\n }\n },\n\n removeDraggableListeners () {\n // console.log('removing draggable handlers')\n }\n }\n };\n<\/script>\n<style>\n .v--modal-overlay {\n position: fixed;\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\n .v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n background-color: white;\n }\n\n .v--modal {\n background: 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\n .v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n }\n\n .v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n }\n\n .overlay-fade-enter-active, .overlay-fade-leave-active {\n transition: all 0.2s;\n }\n\n .overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n }\n\n .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n }\n\n .nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n }\n</style>\n"],sourceRoot:"webpack://"}])},function(e,n,t){n=e.exports=t(2)(),n.push([e.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?db4cc428"],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:["<template>\n <div :class=\"className\"></div>\n</template>\n<script>\nimport { inRange } from './util'\n\nexport default {\n name: 'VueJsModalResizer',\n props: {\n minHeight: {\n type: Number,\n default: 0\n },\n minWidth: {\n type: Number,\n default: 0\n }},\n data() {\n return {\n clicked: false,\n size: {}\n }\n },\n mounted() {\n this.$el.addEventListener('mousedown', this.start, false)\n },\n computed: {\n className () {\n return {'vue-modal-resizer': true, 'clicked': this.clicked}\n }\n },\n methods: {\n start(event) {\n this.clicked = true\n\n window.addEventListener('mousemove', this.mousemove, false)\n window.addEventListener('mouseup', this.stop, false)\n\n event.stopPropagation()\n event.preventDefault()\n },\n stop() {\n this.clicked = false\n\n window.removeEventListener('mousemove', this.mousemove, false)\n window.removeEventListener('mouseup', this.stop, false)\n\n this.$emit('resize-stop', {\n element: this.$el.parentElement,\n size: this.size\n });\n },\n mousemove(event) {\n this.resize(event)\n },\n resize(event) {\n var el = this.$el.parentElement\n\n if (el) {\n var width = event.clientX - el.offsetLeft\n var height = event.clientY - el.offsetTop\n\n width = inRange(this.minWidth, window.innerWidth, width)\n height = inRange(this.minHeight, window.innerHeight, height)\n\n this.size = {width, height}\n el.style.width = width + 'px'\n el.style.height = height + 'px'\n\n this.$emit('resize', {\n element: el,\n size: this.size\n })\n }\n }\n }\n}\n<\/script>\n<style>\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\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\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369BE9;\n}\n</style>\n"],sourceRoot:"webpack://"}])},function(e,n,t){t(14);var i=t(3)(t(7),t(12),null,null);i.options.__file="/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue",i.esModule&&Object.keys(i.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),e.exports=i.exports},function(e,n,t){e.exports={render:function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("transition",{attrs:{name:"overlay-fade"}},[e.visibility.overlay?t("div",{ref:"overlay",staticClass:"v--modal-overlay",attrs:{"aria-expanded":e.visible.toString(),"data-modal":e.name},on:{mousedown:function(n){n.stopPropagation(),e.toggle(!1)}}},[t("div",{staticClass:"v--modal-top-right"},[e._t("top-right")],2),e._v(" "),t("transition",{attrs:{name:e.transition}},[e.visibility.modal?t("div",{ref:"modal",class:e.modalClass,style:e.modalStyle,on:{mousedown:function(e){e.stopPropagation()}}},[e._t("default"),e._v(" "),e.resizable?t("resizer",{attrs:{"min-width":e.minWidth,"min-height":e.minHeight},on:{resize:e.resize}}):e._e()],2):e._e()])],1):e._e()])},staticRenderFns:[]},e.exports.render._withStripped=!0},function(e,n,t){e.exports={render:function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{class:e.className})},staticRenderFns:[]},e.exports.render._withStripped=!0},function(e,n,t){var i=t(8);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);t(4)("0ba9730a",i,!1)},function(e,n,t){var i=t(9);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);t(4)("43d3f0d1",i,!1)},function(e,n){e.exports=function(e,n){for(var t=[],i={},o=0;o<n.length;o++){var a=n[o],s=a[0],r=a[1],l=a[2],d=a[3],u={id:e+":"+o,css:r,media:l,sourceMap:d};i[s]?i[s].parts.push(u):t.push(i[s]={id:s,parts:[u]})}return t}},function(e,n){e.exports=require("vue")}]); |