vue-picture-input
Version:
Mobile-friendly picture file input component with image preview and drag and drop.
1 lines • 21 kB
JavaScript
!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports.PictureInput=t():e.PictureInput=t()}(window,(function(){return function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i(i.s=1)}([function(e,t,i){var n=i(3);n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);(0,i(6).default)("812be128",n,!0,{sourceMap:!1})},function(e,t,i){e.exports=i(5)},function(e,t,i){"use strict";i(0)},function(e,t,i){(t=i(4)(!1)).push([e.i,".picture-input[data-v-06a8c132]{width:100%;margin:0 auto;text-align:center}.preview-container[data-v-06a8c132]{width:100%;box-sizing:border-box;margin:0 auto;cursor:pointer;overflow:hidden;transform:translateZ(0)}.picture-preview[data-v-06a8c132]{width:100%;height:100%;position:relative;z-index:10001;box-sizing:border-box;background-color:hsla(0,0%,78.4%,.25)}.picture-preview.dragging-over[data-v-06a8c132]{filter:brightness(.5)}.picture-inner[data-v-06a8c132]{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-06a8c132]{display:table-cell;vertical-align:middle;text-align:center;font-size:2em;line-height:1.5}button[data-v-06a8c132]{margin:1em .25em;cursor:pointer}input[type=file][data-v-06a8c132]{display:none}",""]),e.exports=t},function(e,t,i){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i=function(e,t){var i=e[1]||"",n=e[3];if(!n)return i;if(t&&"function"===typeof btoa){var r=function(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),i="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(i," */")}(n),a=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[i].concat(a).concat([r]).join("\n")}return[i].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(i,"}"):i})).join("")},t.i=function(e,i,n){"string"===typeof e&&(e=[[null,e,""]]);var r={};if(n)for(var a=0;a<this.length;a++){var s=this[a][0];null!=s&&(r[s]=!0)}for(var o=0;o<e.length;o++){var l=[].concat(e[o]);n&&r[l[0]]||(i&&(l[2]?l[2]="".concat(i," and ").concat(l[2]):l[2]=i),t.push(l))}},t}},function(e,t,i){"use strict";i.r(t);function n(e){return(n="function"==typeof Symbol&&"symbol"==n(Symbol.iterator)?function(e){return"undefined"===typeof e?"undefined":n(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":"undefined"===typeof e?"undefined":n(e)})(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(t&&("object"===("undefined"===typeof t?"undefined":n(t))||"function"===typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function s(e,t){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var o={name:"picture-input",props:{width:{type:[String,Number],default:Number.MAX_SAFE_INTEGER},height:{type:[String,Number],default:Number.MAX_SAFE_INTEGER},margin:{type:[String,Number],default:0},accept:{type:String,default:"image/*"},capture:{type:String,default:null},size:{type:[String,Number],default:Number.MAX_SAFE_INTEGER},name:{type:String,default:null},id:{type:[String,Number],default:null},buttonClass:{type:String,default:"btn btn-primary button"},removeButtonClass:{type:String,default:"btn btn-secondary button secondary"},aspectButtonClass:{type:String,default:"btn btn-secondary button secondary"},prefill:{type:"undefined"===typeof File||"undefined"===typeof Blob?[String]:[String,File,Blob],default:""},prefillOptions:{type:Object,default:function(){return{}}},crop:{type:Boolean,default:!0},radius:{type:[String,Number],default:0},removable:{type:Boolean,default:!1},hideChangeButton:{type:Boolean,default:!1},autoToggleAspectRatio:{type:Boolean,default:!1},toggleAspectRatio:{type:Boolean,default:!1},changeOnClick:{type:Boolean,default:!0},plain:{type:Boolean,default:!1},zIndex:{type:Number,default:1e4},alertOnError:{type:Boolean,default:!0},customStrings:{type:Object,default:function(){return{}}}},watch:{prefill:function(){this.prefill?this.preloadImage(this.prefill,this.prefillOptions):this.removeImage()}},data:function(){return{imageSelected:!1,previewHeight:0,previewWidth:0,draggingOver:!1,canvasWidth:0,canvasHeight:0,strings:{upload:"<p>Your device does not support file uploading.</p>",drag:"Drag an image or <br>click here to select a file",tap:"Tap here to select a photo <br>from your gallery",change:"Change Photo",aspect:"Landscape/Portrait",remove:"Remove Photo",select:"Select a Photo",selected:"<p>Photo successfully selected!</p>",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!=Number.MAX_SAFE_INTEGER?this.width:this.$refs.container.clientWidth,this.canvasHeight=this.height!=Number.MAX_SAFE_INTEGER?this.height:this.canvasWidth,this.previewWidth=this.canvasWidth,this.previewHeight=this.canvasHeight},beforeDestroy:function(){window.removeEventListener("resize",this.onResize)},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(){this.imageSelected?(this.changeOnClick&&this.selectImage(),this.$emit("click")):this.selectImage()},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.$refs.fileInput.files=e.target.files||e.dataTransfer.files,this.onFileChange(e)},onFileChange:function(e,t){var i=e.target.files||e.dataTransfer.files;if(i.length){if(i[0].size<=0||i[0].size>1024*this.size*1024)return this.$emit("error",{type:"fileSize",fileSize:i[0].size,fileType:i[0].type,fileName:i[0].name,message:this.strings.fileSize+" ("+this.size+"MB)"}),void(this.alertOnError&&alert(this.strings.fileSize+" ("+this.size+"MB)"));if(i[0].name!==this.fileName||i[0].size!==this.fileSize||this.fileModified!==i[0].lastModified){if(this.file=i[0],this.fileName=i[0].name,this.fileSize=i[0].size,this.fileModified=i[0].lastModified,this.fileType=i[0].type.split(";")[0],"image/*"===this.accept){if("image/"!==this.fileType.substr(0,6))return}else if(-1===this.fileTypes.indexOf(this.fileType))return this.$emit("error",{type:"fileType",fileSize:this.fileSize,fileType:this.fileType,fileName:this.fileName,message:this.strings.fileType}),void(this.alertOnError&&alert(this.strings.fileType));this.imageSelected=!0,this.image="",this.supportsPreview?this.loadImage(i[0],t||!1):t?this.$emit("prefill"):this.$emit("change",this.image)}}},loadImage:function(e,t){var i=this;this.getEXIFOrientation(e,(function(t){i.setOrientation(t);var n=new FileReader;n.onload=function(e){i.image=e.target.result,i.imageObject=new Image,i.imageObject.onload=function(){i.autoToggleAspectRatio&&(i.getOrientation(i.canvasWidth,i.canvasHeight)!==i.getOrientation(i.imageObject.width,i.imageObject.height)&&i.rotateCanvas());i.drawImage(i.imageObject)},i.imageObject.src=i.image},n.readAsDataURL(e)}))},drawImage:function(e){this.imageWidth=e.width,this.imageHeight=e.height,this.imageRatio=e.width/e.height;var t=0,i=0,n=this.previewWidth,r=this.previewHeight,a=this.previewWidth/this.previewHeight;this.crop?this.imageRatio>=a?(n=r*this.imageRatio,t=(this.previewWidth-n)/2):(r=n/this.imageRatio,i=(this.previewHeight-r)/2):this.imageRatio>=a?(r=n/this.imageRatio,i=(this.previewHeight-r)/2):(n=r*this.imageRatio,t=(this.previewWidth-n)/2);var s=this.$refs.previewCanvas;s.style.background="none",s.width=this.previewWidth*this.pixelRatio,s.height=this.previewHeight*this.pixelRatio,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,s.width,s.height),this.rotate&&"undefined"===typeof this.imageObject.style.imageOrientation&&(this.context.translate(t*this.pixelRatio,i*this.pixelRatio),this.context.translate(n/2*this.pixelRatio,r/2*this.pixelRatio),this.context.rotate(this.rotate),t=-n/2,i=-r/2),this.context.drawImage(e,t*this.pixelRatio,i*this.pixelRatio,n*this.pixelRatio,r*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&&!this.autoToggleAspectRatio&&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 i="square";return e>t?i="landscape":e<t&&(i="portrait"),i},switchCanvasOrientation:function(){var e=this.canvasWidth,t=this.canvasHeight;this.canvasWidth=t,this.canvasHeight=e},rotateCanvas:function(){this.switchCanvasOrientation(),this.resizeCanvas()},setOrientation:function(e){this.rotate=!1,8===e?this.rotate=-Math.PI/2:6===e?this.rotate=Math.PI/2:3===e&&(this.rotate=-Math.PI)},getEXIFOrientation:function(e,t){var i=new FileReader;i.onload=function(e){var i=new DataView(e.target.result);if(65496!==i.getUint16(0,!1))return t(-2);for(var n=i.byteLength,r=2;r<n;){var a=i.getUint16(r,!1);if(r+=2,65505===a){if(1165519206!==i.getUint32(r+=2,!1))return t(-1);var s=18761===i.getUint16(r+=6,!1);r+=i.getUint32(r+4,s);var o=i.getUint16(r,s);r+=2;for(var l=0;l<o;l++)if(274===i.getUint16(r+12*l,s))return t(i.getUint16(r+12*l+8,s))}else{if(65280!==(65280&a))break;r+=i.getUint16(r,!1)}}return t(-1)},i.readAsArrayBuffer(e.slice(0,65536))},preloadImage:function(e,t){var i=this,o=window.File;try{new o([],"")}catch(u){o=function(e){function t(e,i){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};r(this,t);var s=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return s.lastModifiedDate=new Date,s.lastModified=+s.lastModifiedDate,s.name=i,s}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(t,Blob),t}()}if(t=Object.assign({},t),"object"===("undefined"===typeof e?"undefined":n(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 l=new Headers;l.append("Accept","image/*"),fetch(e,{method:"GET",mode:"cors",headers:l}).then((function(e){return e.blob()})).then((function(n){var r={target:{files:[]}},a=t.fileName||e.split("/").slice(-1)[0],s=t.mediaType||n.type||"image/"+(t.fileType||a.split("?")[0].split(".").slice(-1)[0].split("?")[0]);"image/svg"===(s=(s=s.replace("jpg","jpeg")).replace("image/svg","image/svg+xml"))&&(s="image/svg+xml"),r.target.files[0]=new o([n],a,{type:s}),i.onFileChange(r,!0)})).catch((function(e){i.$emit("error",{type:"failedPrefill",message:"Failed loading prefill image: "+e}),i.alertOnError&&alert("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"}}};i(2);var l=function(e,t,i,n,r,a,s,o){var l,u="function"===typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),a&&(u._scopeId="data-v-"+a),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=l):r&&(l=o?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,l):[l]}return{exports:e,options:u}}(o,(function(){var e=this,t=e._self._c;return t("div",{ref:"container",staticClass:"picture-input",attrs:{id:"picture-input"}},[e.supportsUpload?e.supportsPreview?t("div",[t("div",{staticClass:"preview-container",style:{maxWidth:e.previewWidth+"px",height:e.previewHeight+"px",borderRadius:e.radius+"%"}},[t("canvas",{ref:"previewCanvas",staticClass:"picture-preview",class:e.computedClasses,style:{height:e.previewHeight+"px",zIndex:parseInt(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():t("div",{staticClass:"picture-inner",style:{top:-e.previewHeight+"px",marginBottom:-e.previewHeight+"px",fontSize:e.fontSize,borderRadius:e.radius+"%",zIndex:parseInt(e.zIndex)+2}},[e.supportsDragAndDrop?t("span",{staticClass:"picture-inner-text",domProps:{innerHTML:e._s(e.strings.drag)}}):t("span",{staticClass:"picture-inner-text",domProps:{innerHTML:e._s(e.strings.tap)}})])]),e._v(" "),e.imageSelected&&!e.hideChangeButton?t("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?t("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?t("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()]):t("div",[e.imageSelected?t("div",[t("div",{domProps:{innerHTML:e._s(e.strings.selected)}}),e._v(" "),e.hideChangeButton?e._e():t("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?t("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()]):t("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))])]):t("div",{domProps:{innerHTML:e._s(e.strings.upload)}}),e._v(" "),t("input",{ref:"fileInput",attrs:{type:"file",name:e.name,id:e.id,accept:e.accept,capture:e.capture},on:{change:e.onFileChange}})])}),[],!1,null,"06a8c132",null);t.default=l.exports},function(e,t,i){"use strict";function n(e,t){for(var i=[],n={},r=0;r<t.length;r++){var a=t[r],s=a[0],o={id:e+":"+r,css:a[1],media:a[2],sourceMap:a[3]};n[s]?n[s].parts.push(o):i.push(n[s]={id:s,parts:[o]})}return i}i.r(t),i.d(t,"default",(function(){return f}));var r="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!r)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 a={},s=r&&(document.head||document.getElementsByTagName("head")[0]),o=null,l=0,u=!1,c=function(){},p=null,d="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(e,t,i,r){u=i,p=r||{};var s=n(e,t);return h(s),function(t){for(var i=[],r=0;r<s.length;r++){var o=s[r];(l=a[o.id]).refs--,i.push(l)}t?h(s=n(e,t)):s=[];for(r=0;r<i.length;r++){var l;if(0===(l=i[r]).refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete a[l.id]}}}}function h(e){for(var t=0;t<e.length;t++){var i=e[t],n=a[i.id];if(n){n.refs++;for(var r=0;r<n.parts.length;r++)n.parts[r](i.parts[r]);for(;r<i.parts.length;r++)n.parts.push(v(i.parts[r]));n.parts.length>i.parts.length&&(n.parts.length=i.parts.length)}else{var s=[];for(r=0;r<i.parts.length;r++)s.push(v(i.parts[r]));a[i.id]={id:i.id,refs:1,parts:s}}}}function g(){var e=document.createElement("style");return e.type="text/css",s.appendChild(e),e}function v(e){var t,i,n=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(n){if(u)return c;n.parentNode.removeChild(n)}if(d){var r=l++;n=o||(o=g()),t=y.bind(null,n,r,!1),i=y.bind(null,n,r,!0)}else n=g(),t=b.bind(null,n),i=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else i()}}var m=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}();function y(e,t,i,n){var r=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=m(t,r);else{var a=document.createTextNode(r),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(a,s[t]):e.appendChild(a)}}function b(e,t){var i=t.css,n=t.media,r=t.sourceMap;if(n&&e.setAttribute("media",n),p.ssrId&&e.setAttribute("data-vue-ssr-id",t.id),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}}])}));