├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── build.js └── build.js.map ├── index.html ├── package.json ├── src ├── App.vue └── main.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Alessio Maffeis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # picture-input-example 2 | 3 | This is a simple example project demonstrating the usage of vue-picture-input, a mobile-friendly picture file input Vue.js component with image preview, drag and drop, and EXIF orientation. 4 | 5 | See it in action: https://alessiomaffeis.github.io/vue-picture-input-example/ 6 | 7 | vue-picture-input repository: https://github.com/alessiomaffeis/vue-picture-input 8 | 9 | ## Build Setup 10 | 11 | ``` bash 12 | # install dependencies 13 | npm install 14 | 15 | # serve with hot reload at localhost:8080 16 | npm run dev 17 | 18 | # build for production with minification 19 | npm run build 20 | ``` 21 | 22 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 23 | -------------------------------------------------------------------------------- /dist/build.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=8)}([function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tn.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],i=0;iYour device does not support file uploading.

",drag:"Drag an image or
click here to select a file",tap:"Tap here to select a photo
from your gallery",change:"Change Photo",aspect:"Landscape/Portrait",remove:"Remove Photo",select:"Select a Photo",selected:"

Photo successfully selected!

",fileSize:"The file size exceeds the limit",fileType:"This file type is not supported."}}},mounted:function(){var e=this;if(this.updateStrings(),this.prefill&&this.preloadImage(this.prefill,this.prefillOptions),this.$nextTick(function(){window.addEventListener("resize",e.onResize),e.onResize()}),this.supportsPreview){this.pixelRatio=Math.round(window.devicePixelRatio||window.screen.deviceXDPI/window.screen.logicalXDPI);var t=this.$refs.previewCanvas;t.getContext&&(this.context=t.getContext("2d"),this.context.scale(this.pixelRatio,this.pixelRatio))}"image/*"!==this.accept&&(this.fileTypes=this.accept.split(","),this.fileTypes=this.fileTypes.map(function(e){return e.trim()})),this.canvasWidth=this.width,this.canvasHeight=this.height,this.width!=Number.MAX_SAFE_INTEGER&&this.height!=Number.MAX_SAFE_INTEGER&&(this.previewWidth=this.width,this.previewHeight=this.height),this.$on("error",this.onError)},beforeDestroy:function(){window.removeEventListener("resize",this.onResize),this.$off("error",this.onError)},methods:{updateStrings:function(){for(var e in this.customStrings)e in this.strings&&"string"==typeof this.customStrings[e]&&(this.strings[e]=this.customStrings[e])},onClick:function(){if(!this.imageSelected)return void this.selectImage();this.changeOnClick&&this.selectImage(),this.$emit("click")},onResize:function(){this.resizeCanvas()&&this.imageObject&&this.drawImage(this.imageObject)},onDragEnter:function(){this.supportsDragAndDrop&&(this.draggingOver=!0)},onDragLeave:function(){this.supportsDragAndDrop&&(this.draggingOver=!1)},onFileDrop:function(e){this.onDragLeave(),this.onFileChange(e)},onFileChange:function(e,t){var n=e.target.files||e.dataTransfer.files;if(n.length){if(n[0].size<=0||n[0].size>1024*this.size*1024)return void this.$emit("error",{type:"fileSize",fileSize:n[0].size,fileType:n[0].type,fileName:n[0].name,message:this.strings.fileSize+" ("+this.size+"MB)"});if(n[0].name!==this.fileName||n[0].size!==this.fileSize||this.fileModified!==n[0].lastModified){if(this.file=n[0],this.fileName=n[0].name,this.fileSize=n[0].size,this.fileModified=n[0].lastModified,this.fileType=n[0].type,"image/*"===this.accept){if("image/"!==n[0].type.substr(0,6))return}else if(-1===this.fileTypes.indexOf(n[0].type))return void this.$emit("error",{type:"fileType",fileSize:n[0].size,fileType:n[0].type,fileName:n[0].name,message:this.strings.fileType});this.imageSelected=!0,this.image="",this.supportsPreview?this.loadImage(n[0],t||!1):t?this.$emit("prefill"):this.$emit("change",this.image)}}},onError:function(e){this.alertOnError&&alert(e.message)},loadImage:function(e,t){var n=this;this.getEXIFOrientation(e,function(r){n.setOrientation(r);var i=new FileReader;i.onload=function(e){n.image=e.target.result,t?n.$emit("prefill"):n.$emit("change",n.image),n.imageObject=new Image,n.imageObject.onload=function(){if(n.autoToggleAspectRatio){n.getOrientation(n.canvasWidth,n.canvasHeight)!==n.getOrientation(n.imageObject.width,n.imageObject.height)&&n.rotateCanvas()}n.drawImage(n.imageObject)},n.imageObject.src=n.image},i.readAsDataURL(e)})},drawImage:function(e){this.imageWidth=e.width,this.imageHeight=e.height,this.imageRatio=e.width/e.height;var t=0,n=0,r=this.previewWidth,i=this.previewHeight,o=this.previewWidth/this.previewHeight;this.crop?this.imageRatio>=o?(r=i*this.imageRatio,t=(this.previewWidth-r)/2):(i=r/this.imageRatio,n=(this.previewHeight-i)/2):this.imageRatio>=o?(i=r/this.imageRatio,n=(this.previewHeight-i)/2):(r=i*this.imageRatio,t=(this.previewWidth-r)/2);var a=this.$refs.previewCanvas;a.style.background="none",a.width=this.previewWidth*this.pixelRatio,a.height=this.previewHeight*this.pixelRatio,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,a.width,a.height),this.rotate&&void 0===this.imageObject.style.imageOrientation&&(this.context.translate(t*this.pixelRatio,n*this.pixelRatio),this.context.translate(r/2*this.pixelRatio,i/2*this.pixelRatio),this.context.rotate(this.rotate),t=-r/2,n=-i/2),this.context.drawImage(e,t*this.pixelRatio,n*this.pixelRatio,r*this.pixelRatio,i*this.pixelRatio)},selectImage:function(){this.$refs.fileInput.click()},removeImage:function(){this.$refs.fileInput.value="",this.$refs.fileInput.type="",this.$refs.fileInput.type="file",this.fileName="",this.fileType="",this.fileSize=0,this.fileModified=0,this.imageSelected=!1,this.image="",this.file=null,this.imageObject=null,this.$refs.previewCanvas.style.backgroundColor="rgba(200,200,200,.25)",this.$refs.previewCanvas.width=this.previewWidth*this.pixelRatio,this.$emit("remove")},rotateImage:function(){this.rotateCanvas(),this.imageObject&&this.drawImage(this.imageObject);var e=this.getOrientation(this.canvasWidth,this.canvasHeight);this.$emit("aspectratiochange",e)},resizeCanvas:function(){var e=this.canvasWidth/this.canvasHeight,t=this.$refs.container.clientWidth;return!!t&&(!(!this.toggleAspectRatio&&t===this.containerWidth)&&(this.containerWidth=t,this.previewWidth=Math.min(this.containerWidth-2*this.margin,this.canvasWidth),this.previewHeight=this.previewWidth/e,!0))},getOrientation:function(e,t){var n="square";return e>t?n="landscape":e2&&void 0!==arguments[2]?arguments[2]:{};r(this,t);var a=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,o));return a.lastModifiedDate=new Date,a.lastModified=+a.lastModifiedDate,a.name=n,a}return o(t,e),t}(Blob)}if(t=Object.assign({},t),"object"===(void 0===e?"undefined":a(e)))return this.imageSelected=!0,this.image="",void(this.supportsPreview?this.loadImage(e,!0):this.$emit("prefill"));-1===e.indexOf("data:")&&(-1!==e.indexOf("?")?e+="&_="+(new Date).getTime():e+="?_="+(new Date).getTime());var c=new Headers;c.append("Accept","image/*"),fetch(e,{method:"GET",mode:"cors",headers:c}).then(function(e){return e.blob()}).then(function(r){var i={target:{files:[]}},o=t.fileName||e.split("/").slice(-1)[0],a=t.mediaType||"image/"+(t.fileType||o.split("?")[0].split(".").slice(-1)[0].split("?")[0]);a=a.replace("jpg","jpeg"),a=a.replace("image/svg","image/svg+xml"),"image/svg"===a&&(a="image/svg+xml"),i.target.files[0]=new s([r],o,{type:a}),n.onFileChange(i,!0)}).catch(function(e){n.$emit("error",{type:"failedPrefill",message:"Failed loading prefill image: "+e})})}},computed:{supportsUpload:function(){if(navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/))return!1;var e=document.createElement("input");return e.type="file",!e.disabled},supportsPreview:function(){return window.FileReader&&!!window.CanvasRenderingContext2D},supportsDragAndDrop:function(){var e=document.createElement("div");return("draggable"in e||"ondragstart"in e&&"ondrop"in e)&&!("ontouchstart"in window||navigator.msMaxTouchPoints)},computedClasses:function(){var e={};return e["dragging-over"]=this.draggingOver,e},fontSize:function(){return Math.min(.04*this.previewWidth,21)+"px"}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(14),i=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default={name:"app",data:function(){return{}},components:{PictureInput:i.default},methods:{onChange:function(){console.log("New picture selected!"),this.$refs.pictureInput.image?console.log("Picture loaded."):console.log("FileReader API not supported: use the
, Luke!")}}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(5),o=r(i),a=n(4),s=r(a);new o.default({el:"#app",render:function(e){return e(s.default)}})},function(e,t,n){t=e.exports=n(1)(),t.push([e.i,"#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}h1,h2{font-weight:400}ul{list-style-type:none;padding:0}li{display:inline-block;margin:0 10px}a{color:#42b983}",""])},function(e,t,n){t=e.exports=n(1)(),t.push([e.i,".picture-input[data-v-bc3c47e0]{width:100%;margin:0 auto;text-align:center}.preview-container[data-v-bc3c47e0]{width:100%;box-sizing:border-box;margin:0 auto;cursor:pointer;overflow:hidden}.picture-preview[data-v-bc3c47e0]{width:100%;height:100%;position:relative;z-index:10001;box-sizing:border-box;background-color:hsla(0,0%,78%,.25)}.picture-preview.dragging-over[data-v-bc3c47e0]{filter:brightness(.5)}.picture-inner[data-v-bc3c47e0]{position:relative;z-index:10002;pointer-events:none;box-sizing:border-box;margin:1em auto;padding:.5em;border:.3em dashed rgba(66,66,66,.15);border-radius:8px;width:calc(100% - 2.5em);height:calc(100% - 2.5em);display:table}.picture-inner .picture-inner-text[data-v-bc3c47e0]{display:table-cell;vertical-align:middle;text-align:center;font-size:2em;line-height:1.5}button[data-v-bc3c47e0]{margin:1em .25em;cursor:pointer}input[type=file][data-v-bc3c47e0]{display:none}",""])},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function i(e){if(l===setTimeout)return setTimeout(e,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function o(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function a(){h&&d&&(h=!1,d.length?v=d.concat(v):m=-1,v.length&&s())}function s(){if(!h){var e=i(a);h=!0;for(var t=v.length;t;){for(d=v,v=[];++m1)for(var n=1;n=0&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},n(12),t.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==e&&e.setImmediate||this&&this.setImmediate,t.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==e&&e.clearImmediate||this&&this.clearImmediate}).call(t,n(0))},function(e,t,n){n(18);var r=n(2)(n(6),n(16),"data-v-bc3c47e0",null);e.exports=r.exports},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("h1",[e._v("vue-picture-input Example")]),e._v(" "),n("br"),n("br"),e._v(" "),n("picture-input",{ref:"pictureInput",attrs:{width:"600",height:"600",margin:"16",accept:"image/jpeg,image/png",size:"10",removable:!0,customStrings:{upload:"

Bummer!

",drag:"Drag a 😺 GIF or GTFO"}},on:{change:e.onChange}}),e._v(" "),n("br"),n("br"),e._v(" "),n("a",{staticClass:"btn btn-success",attrs:{href:"https://github.com/alessiomaffeis/vue-picture-input"}},[e._v("View project on GitHub")])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"container",staticClass:"picture-input",attrs:{id:"picture-input"}},[e.supportsUpload?e.supportsPreview?n("div",[n("div",{staticClass:"preview-container",style:{maxWidth:e.previewWidth+"px",height:e.previewHeight+"px",borderRadius:e.radius+"%"}},[n("canvas",{ref:"previewCanvas",staticClass:"picture-preview",class:e.computedClasses,style:{height:e.previewHeight+"px",zIndex:e.zIndex+1},attrs:{tabindex:"0"},on:{drag:function(e){e.stopPropagation(),e.preventDefault()},dragover:function(e){e.stopPropagation(),e.preventDefault()},dragstart:function(e){e.stopPropagation(),e.preventDefault()},dragend:function(e){e.stopPropagation(),e.preventDefault()},dragenter:function(t){return t.stopPropagation(),t.preventDefault(),e.onDragEnter.apply(null,arguments)},dragleave:function(t){return t.stopPropagation(),t.preventDefault(),e.onDragLeave.apply(null,arguments)},drop:function(t){return t.stopPropagation(),t.preventDefault(),e.onFileDrop.apply(null,arguments)},click:function(t){return t.preventDefault(),e.onClick.apply(null,arguments)},keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.onClick.apply(null,arguments)}}}),e._v(" "),e.imageSelected||e.plain?e._e():n("div",{staticClass:"picture-inner",style:{top:-e.previewHeight+"px",marginBottom:-e.previewHeight+"px",fontSize:e.fontSize,borderRadius:e.radius+"%",zIndex:e.zIndex+2}},[e.supportsDragAndDrop?n("span",{staticClass:"picture-inner-text",domProps:{innerHTML:e._s(e.strings.drag)}}):n("span",{staticClass:"picture-inner-text",domProps:{innerHTML:e._s(e.strings.tap)}})])]),e._v(" "),e.imageSelected&&!e.hideChangeButton?n("button",{class:e.buttonClass,attrs:{type:"button"},on:{click:function(t){return t.preventDefault(),e.selectImage.apply(null,arguments)}}},[e._v(e._s(e.strings.change))]):e._e(),e._v(" "),e.imageSelected&&e.removable?n("button",{class:e.removeButtonClass,attrs:{type:"button"},on:{click:function(t){return t.preventDefault(),e.removeImage.apply(null,arguments)}}},[e._v(e._s(e.strings.remove))]):e._e(),e._v(" "),e.imageSelected&&e.toggleAspectRatio&&e.width!==e.height?n("button",{class:e.aspectButtonClass,attrs:{type:"button"},on:{click:function(t){return t.preventDefault(),e.rotateImage.apply(null,arguments)}}},[e._v(e._s(e.strings.aspect))]):e._e()]):n("div",[e.imageSelected?n("div",[n("div",{domProps:{innerHTML:e._s(e.strings.selected)}}),e._v(" "),e.hideChangeButton?e._e():n("button",{class:e.buttonClass,attrs:{type:"button"},on:{click:function(t){return t.preventDefault(),e.selectImage.apply(null,arguments)}}},[e._v(e._s(e.strings.change))]),e._v(" "),e.removable?n("button",{class:e.removeButtonClass,attrs:{type:"button"},on:{click:function(t){return t.preventDefault(),e.removeImage.apply(null,arguments)}}},[e._v(e._s(e.strings.remove))]):e._e()]):n("button",{class:e.buttonClass,attrs:{type:"button"},on:{click:function(t){return t.preventDefault(),e.selectImage.apply(null,arguments)}}},[e._v(e._s(e.strings.select))])]):n("div",{domProps:{innerHTML:e._s(e.strings.upload)}}),e._v(" "),n("input",{ref:"fileInput",attrs:{type:"file",name:e.name,id:e.id,accept:e.accept,capture:e.capture},on:{change:e.onFileChange}})])},staticRenderFns:[]}},function(e,t,n){var r=n(9);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(3)("48d7bb24",r,!0)},function(e,t,n){var r=n(10);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(3)("dfd4c974",r,!0)},function(e,t){e.exports=function(e,t){for(var n=[],r={},i=0;i=0&&Math.floor(t)===t&&isFinite(e)}function l(e){return i(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function f(e){return null==e?"":Array.isArray(e)||c(e)&&e.toString===ir?JSON.stringify(e,null,2):String(e)}function p(e){var t=parseFloat(e);return isNaN(t)?e:t}function d(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}function h(e,t){return sr.call(e,t)}function m(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}function g(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function y(e,t){for(var n in t)e[n]=t[n];return e}function b(e){for(var t={},n=0;n-1)if(o&&!h(i,"default"))a=!1;else if(""===a||a===pr(e)){var c=W(String,i.type);(c<0||s0&&(re((c=e(c,(n||"")+"_"+s))[0])&&re(l)&&(f[u]=S(l.text+c[0].text),c.shift()),f.push.apply(f,c)):a(c)?re(l)?f[u]=S(l.text+c):""!==c&&f.push(S(c)):re(c)&&re(l)?f[u]=S(l.text+c.text):(o(t._isVList)&&i(c.tag)&&r(c.key)&&i(n)&&(c.key="__vlist"+n+"_"+s+"__"),f.push(c)));return f}(e):void 0}function re(e){return i(e)&&i(e.text)&&!1===e.isComment}function ie(e,t){if(e){for(var n=Object.create(null),r=Rr?Reflect.ownKeys(e):Object.keys(e),i=0;i0,o=e?!!e.$stable:!i,a=e&&e.$key;if(e){if(e._normalized)return e._normalized;if(o&&n&&n!==rr&&a===n.$key&&!i&&!n.$hasNormal)return n;for(var s in r={},e)e[s]&&"$"!==s[0]&&(r[s]=ue(t,s,e[s]))}else r={};for(var c in t)c in r||(r[c]=le(t,c));return e&&Object.isExtensible(e)&&(e._normalized=r),C(r,"$stable",o),C(r,"$key",a),C(r,"$hasNormal",i),r}function ue(e,t,n){var r=function(){var e=arguments.length?n.apply(null,arguments):n({}),t=(e=e&&"object"==typeof e&&!Array.isArray(e)?[e]:ne(e))&&e[0];return e&&(!t||1===e.length&&t.isComment&&!se(t))?void 0:e};return n.proxy&&Object.defineProperty(e,t,{get:r,enumerable:!0,configurable:!0}),r}function le(e,t){return function(){return e[t]}}function fe(e,t){var n,r,o,a,c;if(Array.isArray(e)||"string"==typeof e)for(n=new Array(e.length),r=0,o=e.length;r-1:"string"==typeof e?e.split(",").indexOf(t)>-1:(n=e,"[object RegExp]"===ir.call(n)&&e.test(t));var n}function et(e,t){var n=e.cache,r=e.keys,i=e._vnode;for(var o in n){var a=n[o];if(a){var s=a.name;s&&!t(s)&&tt(n,o,r,i)}}}function tt(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,v(n,t)}function nt(e){for(var t=e.data,n=e,r=e;i(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=rt(r.data,t));for(;i(n=n.parent);)n&&n.data&&(t=rt(t,n.data));return function(e,t){return i(e)||i(t)?it(e,ot(t)):""}(t.staticClass,t.class)}function rt(e,t){return{staticClass:it(e.staticClass,t.staticClass),class:i(e.class)?[e.class,t.class]:t.class}}function it(e,t){return e?t?e+" "+t:e:t||""}function ot(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,o=e.length;r-1?gt(e,t,n):Ji(t)?Yi(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):Vi(t)?e.setAttribute(t,Gi(t,n)):Xi(t)?Yi(n)?e.removeAttributeNS(qi,Zi(t)):e.setAttributeNS(qi,t,n):gt(e,t,n)}function gt(e,t,n){if(Yi(n))e.removeAttribute(t);else{if(Or&&!Sr&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}function yt(e,t){var n=t.elm,o=t.data,a=e.data;if(!(r(o.staticClass)&&r(o.class)&&(r(a)||r(a.staticClass)&&r(a.class)))){var s=nt(t),c=n._transitionClasses;i(c)&&(s=it(s,ot(c))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}function bt(e){function t(){(a||(a=[])).push(e.slice(v,i).trim()),v=i+1}var n,r,i,o,a,s=!1,c=!1,u=!1,l=!1,f=0,p=0,d=0,v=0;for(i=0;i=0&&" "===(m=e.charAt(h));h--);m&&ho.test(m)||(l=!0)}}else void 0===o?(v=i+1,o=e.slice(0,i).trim()):t();if(void 0===o?o=e.slice(0,i).trim():0!==v&&t(),a)for(i=0;i-1?{exp:e.slice(0,Pi),key:'"'+e.slice(Pi+1)+'"'}:{exp:e,key:null};for(Ni=e,Pi=Li=Ri=0;!Pt();)Lt(Mi=Mt())?Ft(Mi):91===Mi&&Rt(Mi);return{exp:e.slice(0,Li),key:e.slice(Li+1,Ri)}}(e);return null===n.key?e+"="+t:"$set("+n.exp+", "+n.key+", "+t+")"}function Mt(){return Ni.charCodeAt(++Pi)}function Pt(){return Pi>=ji}function Lt(e){return 34===e||39===e}function Rt(e){var t=1;for(Li=Pi;!Pt();)if(Lt(e=Mt()))Ft(e);else if(91===e&&t++,93===e&&t--,0===t){Ri=Pi;break}}function Ft(e){for(var t=e;!Pt()&&(e=Mt())!==t;);}function zt(e,t,n){var r=Fi;return function i(){null!==t.apply(null,arguments)&&Bt(e,i,n,r)}}function Ht(e,t,n,r){if(yo){var i=$i,o=t;t=o._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=i||e.timeStamp<=0||e.target.ownerDocument!==document)return o.apply(this,arguments)}}Fi.addEventListener(e,t,jr?{capture:n,passive:r}:n)}function Bt(e,t,n,r){(r||Fi).removeEventListener(e,t._wrapper||t,n)}function Ut(e,t){if(!r(e.data.on)||!r(t.data.on)){var n=t.data.on||{},o=e.data.on||{};Fi=t.elm,function(e){if(i(e[mo])){var t=Or?"change":"input";e[t]=[].concat(e[mo],e[t]||[]),delete e[mo]}i(e[go])&&(e.change=[].concat(e[go],e.change||[]),delete e[go])}(n),Q(n,o,Ht,Bt,zt,t.context),Fi=void 0}}function Wt(e,t){if(!r(e.data.domProps)||!r(t.data.domProps)){var n,o,a=t.elm,s=e.data.domProps||{},c=t.data.domProps||{};for(n in i(c.__ob__)&&(c=t.data.domProps=y({},c)),s)n in c||(a[n]="");for(n in c){if(o=c[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),o===s[n])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===n&&"PROGRESS"!==a.tagName){a._value=o;var u=r(o)?"":String(o);Vt(a,u)&&(a.value=u)}else if("innerHTML"===n&&to(a.tagName)&&r(a.innerHTML)){(zi=zi||document.createElement("div")).innerHTML=""+o+"";for(var l=zi.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;l.firstChild;)a.appendChild(l.firstChild)}else if(o!==s[n])try{a[n]=o}catch(e){}}}}function Vt(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(i(r)){if(r.number)return p(n)!==p(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}function Kt(e){var t=Gt(e.style);return e.staticStyle?y(e.staticStyle,t):t}function Gt(e){return Array.isArray(e)?b(e):"string"==typeof e?wo(e):e}function Jt(e,t){var n=t.data,o=e.data;if(!(r(n.staticStyle)&&r(n.style)&&r(o.staticStyle)&&r(o.style))){var a,s,c=t.elm,u=o.staticStyle,l=o.normalizedStyle||o.style||{},f=u||l,p=Gt(t.data.style)||{};t.data.normalizedStyle=i(p.__ob__)?y({},p):p;var d=function(e,t){for(var n,r={},i=e;i.componentInstance;)(i=i.componentInstance._vnode)&&i.data&&(n=Kt(i.data))&&y(r,n);(n=Kt(e.data))&&y(r,n);for(var o=e;o=o.parent;)o.data&&(n=Kt(o.data))&&y(r,n);return r}(t);for(s in f)r(d[s])&&Co(c,s,"");for(s in d)(a=d[s])!==f[s]&&Co(c,s,null==a?"":a)}}function qt(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(So).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Xt(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(So).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function Zt(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&y(t,To(e.name||"v")),y(t,e),t}return"string"==typeof e?To(e):void 0}}function Yt(e){Lo(function(){Lo(e)})}function Qt(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),qt(e,t))}function en(e,t){e._transitionClasses&&v(e._transitionClasses,t),Xt(e,t)}function tn(e,t,n){var r=nn(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===Eo?No:Po,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Eo,l=a,f=o.length):t===Do?u>0&&(n=Do,l=u,f=c.length):f=(n=(l=Math.max(a,u))>0?a>u?Eo:Do:null)?n===Eo?o.length:c.length:0,{type:n,timeout:l,propCount:f,hasTransform:n===Eo&&Ro.test(r[jo+"Property"])}}function rn(e,t){for(;e.length1}function ln(e,t){!0!==t.data.show&&an(t)}function fn(e,t,n){pn(e,t,n),(Or||Tr)&&setTimeout(function(){pn(e,t,n)},0)}function pn(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,s=0,c=e.options.length;s-1,a.selected!==o&&(a.selected=o);else if(w(vn(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function dn(e,t){return t.every(function(t){return!w(t,e)})}function vn(e){return"_value"in e?e._value:e.value}function hn(e){e.target.composing=!0}function mn(e){e.target.composing&&(e.target.composing=!1,gn(e.target,"input"))}function gn(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function yn(e){return!e.componentInstance||e.data&&e.data.transition?e:yn(e.componentInstance._vnode)}function bn(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?bn(je(t.children)):e}function _n(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var o in i)t[ur(o)]=i[o];return t}function wn(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}function xn(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function $n(e){e.data.newPos=e.elm.getBoundingClientRect()}function Cn(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate("+r+"px,"+i+"px)",o.transitionDuration="0s"}}function kn(e,t){var n=t?Sa:Oa;return e.replace(n,function(e){return Aa[e]})}function An(e,t,n){return{type:1,tag:e,attrsList:t,attrsMap:jn(t),rawAttrsMap:{},parent:n,children:[]}}function On(e,t){function n(e){if(r(e),u||e.processed||(e=Sn(e,t)),a.length||e===i||i.if&&(e.elseif||e.else)&&In(i,{exp:e.elseif,block:e}),o&&!e.forbidden)if(e.elseif||e.else)s=e,(c=function(e){for(var t=e.length;t--;){if(1===e[t].type)return e[t];e.pop()}}(o.children))&&c.if&&In(c,{exp:s.elseif,block:s});else{if(e.slotScope){var n=e.slotTarget||'"default"';(o.scopedSlots||(o.scopedSlots={}))[n]=e}o.children.push(e),e.parent=o}var s,c;e.children=e.children.filter(function(e){return!e.slotScope}),r(e),e.pre&&(u=!1),ea(e.tag)&&(l=!1);for(var f=0;f=0&&a[i].lowerCasedTag!==s;i--);else i=0;if(i>=0){for(var c=a.length-1;c>=i;c--)t.end&&t.end(a[c].tag,n,r);a.length=i,o=i&&a[i-1].tag}else"br"===s?t.start&&t.start(e,[],!0,n,r):"p"===s&&(t.start&&t.start(e,[],!1,n,r),t.end&&t.end(e,n,r))}for(var i,o,a=[],s=t.expectHTML,c=t.isUnaryTag||vr,u=t.canBeLeftOpenTag||vr,l=0;e;){if(i=e,o&&Ca(o)){var f=0,p=o.toLowerCase(),d=ka[p]||(ka[p]=new RegExp("([\\s\\S]*?)(]*>)","i")),v=e.replace(d,function(e,n,r){return f=r.length,Ca(p)||"noscript"===p||(n=n.replace(//g,"$1").replace(//g,"$1")),Ia(p,n)&&(n=n.slice(1)),t.chars&&t.chars(n),""});l+=e.length-v.length,e=v,r(p,l-f,l)}else{var h=e.indexOf("<");if(0===h){if(xa.test(e)){var m=e.indexOf("--\x3e");if(m>=0){t.shouldKeepComment&&t.comment(e.substring(4,m),l,l+m+3),n(m+3);continue}}if($a.test(e)){var g=e.indexOf("]>");if(g>=0){n(g+2);continue}}var y=e.match(wa);if(y){n(y[0].length);continue}var b=e.match(_a);if(b){var _=l;n(b[0].length),r(b[1],_,l);continue}var w=function(){var t=e.match(ya);if(t){var r,i,o={tagName:t[1],attrs:[],start:l};for(n(t[0].length);!(r=e.match(ba))&&(i=e.match(ha)||e.match(va));)i.start=l,n(i[0].length),i.end=l,o.attrs.push(i);if(r)return o.unarySlash=r[1],n(r[0].length),o.end=l,o}}();if(w){(function(e){var n=e.tagName,i=e.unarySlash;s&&("p"===o&&da(n)&&r(o),u(n)&&o===n&&r(n));for(var l=c(n)||!!i,f=e.attrs.length,p=new Array(f),d=0;d=0){for($=e.slice(h);!(_a.test($)||ya.test($)||xa.test($)||$a.test($)||(C=$.indexOf("<",1))<0);)h+=C,$=e.slice(h);x=e.substring(0,h)}h<0&&(x=e),x&&n(x.length),t.chars&&x&&t.chars(x,l-x.length,l)}if(e===i){t.chars&&t.chars(e);break}}r()}(e,{warn:qo,expectHTML:t.expectHTML,isUnaryTag:t.isUnaryTag,canBeLeftOpenTag:t.canBeLeftOpenTag,shouldDecodeNewlines:t.shouldDecodeNewlines,shouldDecodeNewlinesForHref:t.shouldDecodeNewlinesForHref,shouldKeepComment:t.comments,outputSourceRange:t.outputSourceRange,start:function(e,r,s,c,f){var p=o&&o.ns||na(e);Or&&"svg"===p&&(r=function(e){for(var t=[],n=0;nc&&(s.push(o=e.slice(c,i)),a.push(JSON.stringify(o)));var u=bt(r[1].trim());a.push("_s("+u+")"),s.push({"@binding":u}),c=i+r[0].length}return c>>0}(a):"")+")"}(e,e.scopedSlots,t)+","),e.model&&(n+="model:{value:"+e.model.value+",callback:"+e.model.callback+",expression:"+e.model.expression+"},"),e.inlineTemplate){var o=function(e,t){var n=e.children[0];if(n&&1===n.type){var r=Fn(n,t.options);return"inlineTemplate:{render:function(){"+r.render+"},staticRenderFns:["+r.staticRenderFns.map(function(e){return"function(){"+e+"}"}).join(",")+"]}"}}(e,t);o&&(n+=o+",")}return n=n.replace(/,$/,"")+"}",e.dynamicAttrs&&(n="_b("+n+',"'+e.tag+'",'+Zn(e.dynamicAttrs)+")"),e.wrapData&&(n=e.wrapData(n)),e.wrapListeners&&(n=e.wrapListeners(n)),n}function Kn(e){return 1===e.type&&("slot"===e.tag||e.children.some(Kn))}function Gn(e,t){var n=e.attrsMap["slot-scope"];if(e.if&&!e.ifProcessed&&!n)return Un(e,t,Gn,"null");if(e.for&&!e.forProcessed)return Wn(e,t,Gn);var r=e.slotScope===Wa?"":String(e.slotScope),i="function("+r+"){return "+("template"===e.tag?e.if&&n?"("+e.if+")?"+(Jn(e,t)||"undefined")+":undefined":Jn(e,t)||"undefined":zn(e,t))+"}",o=r?"":",proxy:true";return"{key:"+(e.slotTarget||'"default"')+",fn:"+i+o+"}"}function Jn(e,t,n,r,i){var o=e.children;if(o.length){var a=o[0];if(1===o.length&&a.for&&"template"!==a.tag&&"slot"!==a.tag){var s=n?t.maybeComponent(a)?",1":",0":"";return""+(r||zn)(a,t)+s}var c=n?function(e,t){for(var n=0,r=0;r':'
',as.innerHTML.indexOf(" ")>0}/*! 2 | * Vue.js v2.6.14 3 | * (c) 2014-2021 Evan You 4 | * Released under the MIT License. 5 | */ 6 | var nr,rr=Object.freeze({}),ir=Object.prototype.toString,or=d("slot,component",!0),ar=d("key,ref,slot,slot-scope,is"),sr=Object.prototype.hasOwnProperty,cr=/-(\w)/g,ur=m(function(e){return e.replace(cr,function(e,t){return t?t.toUpperCase():""})}),lr=m(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),fr=/\B([A-Z])/g,pr=m(function(e){return e.replace(fr,"-$1").toLowerCase()}),dr=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n},vr=function(e,t,n){return!1},hr=function(e){return e},mr="data-server-rendered",gr=["component","directive","filter"],yr=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch"],br={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:vr,isReservedAttr:vr,isUnknownElement:vr,getTagNamespace:_,parsePlatformTagName:hr,mustUseProp:vr,async:!0,_lifecycleHooks:yr},_r=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/,wr=new RegExp("[^"+_r.source+".$_\\d]"),xr="__proto__"in{},$r="undefined"!=typeof window,Cr="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,kr=Cr&&WXEnvironment.platform.toLowerCase(),Ar=$r&&window.navigator.userAgent.toLowerCase(),Or=Ar&&/msie|trident/.test(Ar),Sr=Ar&&Ar.indexOf("msie 9.0")>0,Tr=Ar&&Ar.indexOf("edge/")>0,Ir=(Ar&&Ar.indexOf("android"),Ar&&/iphone|ipad|ipod|ios/.test(Ar)||"ios"===kr),Er=(Ar&&/chrome\/\d+/.test(Ar),Ar&&/phantomjs/.test(Ar),Ar&&Ar.match(/firefox\/(\d+)/)),Dr={}.watch,jr=!1;if($r)try{var Nr={};Object.defineProperty(Nr,"passive",{get:function(){jr=!0}}),window.addEventListener("test-passive",null,Nr)}catch(rr){}var Mr,Pr=function(){return void 0===nr&&(nr=!$r&&!Cr&&void 0!==t&&t.process&&"server"===t.process.env.VUE_ENV),nr},Lr=$r&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,Rr="undefined"!=typeof Symbol&&k(Symbol)&&"undefined"!=typeof Reflect&&k(Reflect.ownKeys);Mr="undefined"!=typeof Set&&k(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var Fr=_,zr=0,Hr=function(){this.id=zr++,this.subs=[]};Hr.prototype.addSub=function(e){this.subs.push(e)},Hr.prototype.removeSub=function(e){v(this.subs,e)},Hr.prototype.depend=function(){Hr.target&&Hr.target.addDep(this)},Hr.prototype.notify=function(){for(var e=this.subs.slice(),t=0,n=e.length;tdocument.createEvent("Event").timeStamp&&(Ci=function(){return ki.now()})}var Ai=0,Oi=function(e,t,n,r,i){this.vm=e,i&&(e._watcher=this),e._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++Ai,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new Mr,this.newDepIds=new Mr,this.expression="","function"==typeof t?this.getter=t:(this.getter=function(e){if(!wr.test(e)){var t=e.split(".");return function(e){for(var n=0;nxi&&gi[n].id>e.id;)n--;gi.splice(n+1,0,e)}else gi.push(e);_i||(_i=!0,X(Be))}}(this)},Oi.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||s(e)||this.deep){var t=this.value;if(this.value=e,this.user){var n='callback for watcher "'+this.expression+'"';K(this.cb,this.vm,[e,t],this.vm,n)}else this.cb.call(this.vm,e,t)}}},Oi.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Oi.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},Oi.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||v(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var Si={enumerable:!0,configurable:!0,get:_,set:_},Ti={lazy:!0},Ii=0;!function(e){e.prototype._init=function(e){var t=this;t._uid=Ii++,t._isVue=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=F(qe(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&Le(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,r=n&&n.context;e.$slots=oe(t._renderChildren,r),e.$scopedSlots=rr,e._c=function(t,n,r,i){return Ee(e,t,n,r,i,!1)},e.$createElement=function(t,n,r,i){return Ee(e,t,n,r,i,!0)};var i=n&&n.data;D(e,"$attrs",i&&i.attrs||rr,null,!0),D(e,"$listeners",t._parentListeners||rr,null,!0)}(t),He(t,"beforeCreate"),function(e){var t=ie(e.$options.inject,e);t&&(I(!1),Object.keys(t).forEach(function(n){D(e,n,t[n])}),I(!0))}(t),We(t),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(t),He(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(Xe),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=j,e.prototype.$delete=N,e.prototype.$watch=function(e,t,n){if(c(t))return Je(this,e,t,n);(n=n||{}).user=!0;var r=new Oi(this,e,t,n);if(n.immediate){var i='callback for immediate watcher "'+r.expression+'"';A(),K(t,this,[r.value],this,i),O()}return function(){r.teardown()}}}(Xe),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(Array.isArray(e))for(var i=0,o=e.length;i1?g(t):t;for(var n=g(arguments,1),r='event handler for "'+e+'"',i=0,o=t.length;iparseInt(this.max)&&tt(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)tt(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",function(t){et(e,function(e){return Qe(t,e)})}),this.$watch("exclude",function(t){et(e,function(e){return!Qe(t,e)})})},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=je(e),n=t&&t.componentOptions;if(n){var r=Ye(n),i=this.include,o=this.exclude;if(i&&(!r||!Qe(i,r))||o&&r&&Qe(o,r))return t;var a=this.cache,s=this.keys,c=null==t.key?n.Ctor.cid+(n.tag?"::"+n.tag:""):t.key;a[c]?(t.componentInstance=a[c].componentInstance,v(s,c),s.push(c)):(this.vnodeToCache=t,this.keyToCache=c),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return br}};Object.defineProperty(e,"config",t),e.util={warn:Fr,extend:y,mergeOptions:F,defineReactive:D},e.set=j,e.delete=N,e.nextTick=X,e.observable=function(e){return E(e),e},e.options=Object.create(null),gr.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,y(e.options.components,Di),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=g(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=F(this.options,e),this}}(e),Ze(e),function(e){gr.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&c(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}(e)}(Xe),Object.defineProperty(Xe.prototype,"$isServer",{get:Pr}),Object.defineProperty(Xe.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Xe,"FunctionalRenderContext",{value:Ae}),Xe.version="2.6.14";var ji,Ni,Mi,Pi,Li,Ri,Fi,zi,Hi,Bi=d("style,class"),Ui=d("input,textarea,option,select,progress"),Wi=function(e,t,n){return"value"===n&&Ui(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Vi=d("contenteditable,draggable,spellcheck"),Ki=d("events,caret,typing,plaintext-only"),Gi=function(e,t){return Yi(t)||"false"===t?"false":"contenteditable"===e&&Ki(t)?t:"true"},Ji=d("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,truespeed,typemustmatch,visible"),qi="http://www.w3.org/1999/xlink",Xi=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},Zi=function(e){return Xi(e)?e.slice(6,e.length):""},Yi=function(e){return null==e||!1===e},Qi={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},eo=d("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),to=d("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),no=function(e){return eo(e)||to(e)},ro=Object.create(null),io=d("text,number,password,search,email,tel,url"),oo=Object.freeze({createElement:function(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)},createElementNS:function(e,t){return document.createElementNS(Qi[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},setStyleScope:function(e,t){e.setAttribute(t,"")}}),ao={create:function(e,t){ct(t)},update:function(e,t){e.data.ref!==t.data.ref&&(ct(e,!0),ct(t))},destroy:function(e){ct(e,!0)}},so=new Ur("",{},[]),co=["create","activate","update","remove","destroy"],uo={create:ft,update:ft,destroy:function(e){ft(e,so)}},lo=Object.create(null),fo=[ao,uo],po={create:ht,update:ht},vo={create:yt,update:yt},ho=/[\w).+\-_$\]]/,mo="__r",go="__c",yo=ti&&!(Er&&Number(Er[1])<=53),bo={create:Ut,update:Ut},_o={create:Wt,update:Wt},wo=m(function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach(function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}),xo=/^--/,$o=/\s*!important$/,Co=function(e,t,n){if(xo.test(t))e.style.setProperty(t,n);else if($o.test(n))e.style.setProperty(pr(t),n.replace($o,""),"important");else{var r=Ao(t);if(Array.isArray(n))for(var i=0,o=n.length;id?v(e,r(o[_+1])?null:o[_+1].elm,o,p,_,a):p>_&&m(t,f,d)}(f,h,g,a,u):i(g)?(i(e.text)&&A.setTextContent(f,""),v(f,null,g,0,g.length-1,a)):i(h)?m(h,0,h.length-1):i(e.text)&&A.setTextContent(f,""):e.text!==t.text&&A.setTextContent(f,t.text),i(d)&&i(p=d.hook)&&i(p=p.postpatch)&&p(e,t)}}}function _(e,t,n){if(o(n)&&i(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r-1?ro[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ro[e]=/HTMLUnknownElement/.test(t.toString())},y(Xe.options.directives,Ho),y(Xe.options.components,Go),Xe.prototype.__patch__=$r?Fo:_,Xe.prototype.$mount=function(e,t){return function(e,t,n){var r;return e.$el=t,e.$options.render||(e.$options.render=Vr),He(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Oi(e,r,_,{before:function(){e._isMounted&&!e._isDestroyed&&He(e,"beforeUpdate")}},!0),n=!1,null==e.$vnode&&(e._isMounted=!0,He(e,"mounted")),e}(this,e=e&&$r?st(e):void 0,t)},$r&&setTimeout(function(){br.devtools&&Lr&&Lr.emit("init",Xe)},0);var Jo,qo,Xo,Zo,Yo,Qo,ea,ta,na,ra,ia,oa=/\{\{((?:.|\r?\n)+?)\}\}/g,aa=/[-.*+?^${}()|[\]\/\\]/g,sa=m(function(e){var t=e[0].replace(aa,"\\$&"),n=e[1].replace(aa,"\\$&");return new RegExp(t+"((?:.|\\n)+?)"+n,"g")}),ca={staticKeys:["staticClass"],transformNode:function(e,t){t.warn;var n=It(e,"class");n&&(e.staticClass=JSON.stringify(n));var r=Tt(e,"class",!1);r&&(e.classBinding=r)},genData:function(e){var t="";return e.staticClass&&(t+="staticClass:"+e.staticClass+","),e.classBinding&&(t+="class:"+e.classBinding+","),t}},ua={staticKeys:["staticStyle"],transformNode:function(e,t){t.warn;var n=It(e,"style");n&&(e.staticStyle=JSON.stringify(wo(n)));var r=Tt(e,"style",!1);r&&(e.styleBinding=r)},genData:function(e){var t="";return e.staticStyle&&(t+="staticStyle:"+e.staticStyle+","),e.styleBinding&&(t+="style:("+e.styleBinding+"),"),t}},la=function(e){return(Jo=Jo||document.createElement("div")).innerHTML=e,Jo.textContent},fa=d("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),pa=d("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),da=d("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),va=/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,ha=/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,ma="[a-zA-Z_][\\-\\.0-9_a-zA-Z"+_r.source+"]*",ga="((?:"+ma+"\\:)?"+ma+")",ya=new RegExp("^<"+ga),ba=/^\s*(\/?)>/,_a=new RegExp("^<\\/"+ga+"[^>]*>"),wa=/^]+>/i,xa=/^",""":'"',"&":"&"," ":"\n"," ":"\t","'":"'"},Oa=/&(?:lt|gt|quot|amp|#39);/g,Sa=/&(?:lt|gt|quot|amp|#39|#10|#9);/g,Ta=d("pre,textarea",!0),Ia=function(e,t){return e&&Ta(e)&&"\n"===t[0]},Ea=/^@|^v-on:/,Da=/^v-|^@|^:|^#/,ja=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Na=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Ma=/^\(|\)$/g,Pa=/^\[.*\]$/,La=/:(.*)$/,Ra=/^:|^\.|^v-bind:/,Fa=/\.[^.\]]+(?=[^\]]*$)/g,za=/^v-slot(:|$)|^#/,Ha=/[\r\n]/,Ba=/[ \f\t\r\n]+/g,Ua=m(la),Wa="_empty_",Va=/^xmlns:NS\d+/,Ka=/^NS\d+:/,Ga=[ca,ua,{preTransformNode:function(e,t){if("input"===e.tag){var n,r=e.attrsMap;if(!r["v-model"])return;if((r[":type"]||r["v-bind:type"])&&(n=Tt(e,"type")),r.type||n||!r["v-bind"]||(n="("+r["v-bind"]+").type"),n){var i=It(e,"v-if",!0),o=i?"&&("+i+")":"",a=null!=It(e,"v-else",!0),s=It(e,"v-else-if",!0),c=Nn(e);Tn(c),kt(c,"type","checkbox"),Sn(c,t),c.processed=!0,c.if="("+n+")==='checkbox'"+o,In(c,{exp:c.if,block:c});var u=Nn(e);It(u,"v-for",!0),kt(u,"type","radio"),Sn(u,t),In(c,{exp:"("+n+")==='radio'"+o,block:u});var l=Nn(e);return It(l,"v-for",!0),kt(l,":type",n),Sn(l,t),In(c,{exp:i,block:l}),a?c.else=!0:s&&(c.elseif=s),c}}}}],Ja={expectHTML:!0,modules:Ga,directives:{model:function(e,t,n){var r=t.value,i=t.modifiers,o=e.tag,a=e.attrsMap.type;if(e.component)return jt(e,r,i),!1;if("select"===o)!function(e,t,n){var r='var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(n&&n.number?"_n(val)":"val")+"});";r=r+" "+Nt(t,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),St(e,"change",r,null,!0)}(e,r,i);else if("input"===o&&"checkbox"===a)!function(e,t,n){var r=n&&n.number,i=Tt(e,"value")||"null",o=Tt(e,"true-value")||"true",a=Tt(e,"false-value")||"false";$t(e,"checked","Array.isArray("+t+")?_i("+t+","+i+")>-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),St(e,"change","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+Nt(t,"$$a.concat([$$v])")+")}else{$$i>-1&&("+Nt(t,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+Nt(t,"$$c")+"}",null,!0)}(e,r,i);else if("input"===o&&"radio"===a)!function(e,t,n){var r=n&&n.number,i=Tt(e,"value")||"null";$t(e,"checked","_q("+t+","+(i=r?"_n("+i+")":i)+")"),St(e,"change",Nt(t,i),null,!0)}(e,r,i);else if("input"===o||"textarea"===o)!function(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,u=o?"change":"range"===r?mo:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Nt(t,l);c&&(f="if($event.target.composing)return;"+f),$t(e,"value","("+t+")"),St(e,u,f,null,!0),(s||a)&&St(e,"blur","$forceUpdate()")}(e,r,i);else if(!br.isReservedTag(o))return jt(e,r,i),!1;return!0},text:function(e,t){t.value&&$t(e,"textContent","_s("+t.value+")",t)},html:function(e,t){t.value&&$t(e,"innerHTML","_s("+t.value+")",t)}},isPreTag:function(e){return"pre"===e},isUnaryTag:fa,mustUseProp:Wi,canBeLeftOpenTag:pa,isReservedTag:no,getTagNamespace:at,staticKeys:function(e){return e.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(",")}(Ga)},qa=m(function(e){return d("type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap"+(e?","+e:""))}),Xa=/^([\w$_]+|\([^)]*?\))\s*=>|^function(?:\s+[\w$]+)?\s*\(/,Za=/\([^)]*?\);*$/,Ya=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,Qa={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},es={esc:["Esc","Escape"],tab:"Tab",enter:"Enter",space:[" ","Spacebar"],up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete","Del"]},ts=function(e){return"if("+e+")return null;"},ns={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:ts("$event.target !== $event.currentTarget"),ctrl:ts("!$event.ctrlKey"),shift:ts("!$event.shiftKey"),alt:ts("!$event.altKey"),meta:ts("!$event.metaKey"),left:ts("'button' in $event && $event.button !== 0"),middle:ts("'button' in $event && $event.button !== 1"),right:ts("'button' in $event && $event.button !== 2")},rs={on:function(e,t){e.wrapListeners=function(e){return"_g("+e+","+t.value+")"}},bind:function(e,t){e.wrapData=function(n){return"_b("+n+",'"+e.tag+"',"+t.value+","+(t.modifiers&&t.modifiers.prop?"true":"false")+(t.modifiers&&t.modifiers.sync?",true":"")+")"}},cloak:_},is=function(e){this.options=e,this.warn=e.warn||wt,this.transforms=xt(e.modules,"transformCode"),this.dataGenFns=xt(e.modules,"genData"),this.directives=y(y({},rs),e.directives);var t=e.isReservedTag||vr;this.maybeComponent=function(e){return!!e.component||!t(e.tag)},this.onceId=0,this.staticRenderFns=[],this.pre=!1};new RegExp("\\b"+"do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,super,throw,while,yield,delete,export,import,return,switch,default,extends,finally,continue,debugger,function,arguments".split(",").join("\\b|\\b")+"\\b");var os,as,ss=(os=function(e,t){var n=On(e.trim(),t);!1!==t.optimize&&Mn(n,t);var r=Fn(n,t);return{ast:n,render:r.render,staticRenderFns:r.staticRenderFns}},function(e){function t(t,n){var r=Object.create(e),i=[],o=[];if(n)for(var a in n.modules&&(r.modules=(e.modules||[]).concat(n.modules)),n.directives&&(r.directives=y(Object.create(e.directives||null),n.directives)),n)"modules"!==a&&"directives"!==a&&(r[a]=n[a]);r.warn=function(e,t,n){(n?o:i).push(e)};var s=os(t.trim(),r);return s.errors=i,s.tips=o,s}return{compile:t,compileToFunctions:er(t)}})(Ja),cs=(ss.compile,ss.compileToFunctions),us=!!$r&&tr(!1),ls=!!$r&&tr(!0),fs=m(function(e){var t=st(e);return t&&t.innerHTML}),ps=Xe.prototype.$mount;Xe.prototype.$mount=function(e,t){if((e=e&&st(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=fs(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){var i=cs(r,{outputSourceRange:!1,shouldDecodeNewlines:us,shouldDecodeNewlinesForHref:ls,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return ps.call(this,e,t)},Xe.compile=cs,e.exports=Xe}).call(t,n(0),n(13).setImmediate)}]); 7 | //# sourceMappingURL=build.js.map -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Picture Input 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "picture-input-example", 3 | "description": "PictureInput Example", 4 | "version": "1.0.0", 5 | "author": "Alessio Maffeis", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.6.14", 13 | "vue-picture-input": "^2.2.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-es2015": "^6.24.1", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^10.0.0", 23 | "vue-template-compiler": "^2.6.11", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 48 | 49 | 77 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.common.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | if (process.env.NODE_ENV === 'production') { 52 | module.exports.devtool = '#source-map' 53 | // http://vue-loader.vuejs.org/en/workflow/production.html 54 | module.exports.plugins = (module.exports.plugins || []).concat([ 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }), 60 | new webpack.optimize.UglifyJsPlugin({ 61 | sourceMap: true, 62 | compress: { 63 | warnings: false 64 | } 65 | }), 66 | new webpack.LoaderOptionsPlugin({ 67 | minimize: true 68 | }) 69 | ]) 70 | } 71 | --------------------------------------------------------------------------------