@vcraescu/vue-avatar
Version:
User avatar component for VueJS 2.
2 lines • 11.7 kB
JavaScript
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-avatar"]=e():t["vue-avatar"]=e()})("undefined"!==typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var a=e[r]={i:r,l:!1,exports:{}};return t[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)n.d(r,a,function(e){return t[e]}.bind(null,a));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"048f":function(t,e,n){e=t.exports=n("2350")(!1),e.push([t.i,".letter-avatar[data-v-13e04cba]{width:100%;font-size:0;line-height:0}.letter-avatar[data-v-13e04cba],.letter-avatar img[data-v-13e04cba]{display:inline-block}.letter-avatar--rounded[data-v-13e04cba],.letter-avatar--rounded img[data-v-13e04cba]{border-radius:50%}.letter-avatar--block[data-v-13e04cba]{width:100%;height:100%}",""])},2350:function(t,e){function n(t,e){var n=t[1]||"",a=t[3];if(!a)return n;if(e&&"function"===typeof btoa){var i=r(a),o=a.sources.map(function(t){return"/*# sourceURL="+a.sourceRoot+t+" */"});return[n].concat(o).concat([i]).join("\n")}return[n].join("\n")}function r(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,"+e;return"/*# "+n+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"===typeof t&&(t=[[null,t,""]]);for(var r={},a=0;a<this.length;a++){var i=this[a][0];"number"===typeof i&&(r[i]=!0)}for(a=0;a<t.length;a++){var o=t[a];"number"===typeof o[0]&&r[o[0]]||(n&&!o[2]?o[2]=n:n&&(o[2]="("+o[2]+") and ("+n+")"),e.push(o))}},e}},4257:function(t,e,n){"use strict";var r=n("f1a5"),a=n.n(r);a.a},"499e":function(t,e,n){"use strict";function r(t,e){for(var n=[],r={},a=0;a<e.length;a++){var i=e[a],o=i[0],s=i[1],l=i[2],u=i[3],c={id:t+":"+a,css:s,media:l,sourceMap:u};r[o]?r[o].parts.push(c):n.push(r[o]={id:o,parts:[c]})}return n}n.r(e),n.d(e,"default",function(){return p});var a="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!a)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 i={},o=a&&(document.head||document.getElementsByTagName("head")[0]),s=null,l=0,u=!1,c=function(){},d=null,f="data-vue-ssr-id",h="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(t,e,n,a){u=n,d=a||{};var o=r(t,e);return v(o),function(e){for(var n=[],a=0;a<o.length;a++){var s=o[a],l=i[s.id];l.refs--,n.push(l)}e?(o=r(t,e),v(o)):o=[];for(a=0;a<n.length;a++){l=n[a];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete i[l.id]}}}}function v(t){for(var e=0;e<t.length;e++){var n=t[e],r=i[n.id];if(r){r.refs++;for(var a=0;a<r.parts.length;a++)r.parts[a](n.parts[a]);for(;a<n.parts.length;a++)r.parts.push(b(n.parts[a]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var o=[];for(a=0;a<n.parts.length;a++)o.push(b(n.parts[a]));i[n.id]={id:n.id,refs:1,parts:o}}}}function g(){var t=document.createElement("style");return t.type="text/css",o.appendChild(t),t}function b(t){var e,n,r=document.querySelector("style["+f+'~="'+t.id+'"]');if(r){if(u)return c;r.parentNode.removeChild(r)}if(h){var a=l++;r=s||(s=g()),e=y.bind(null,r,a,!1),n=y.bind(null,r,a,!0)}else r=g(),e=C.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}var m=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}();function y(t,e,n,r){var a=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=m(e,a);else{var i=document.createTextNode(a),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(i,o[e]):t.appendChild(i)}}function C(t,e){var n=e.css,r=e.media,a=e.sourceMap;if(r&&t.setAttribute("media",r),d.ssrId&&t.setAttribute(f,e.id),a&&(n+="\n/*# sourceURL="+a.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},"64f8":function(t,e,n){"use strict";var r=n("e71a"),a=n.n(r);a.a},e71a:function(t,e,n){var r=n("e775");"string"===typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);var a=n("499e").default;a("4385e0d1",r,!0,{sourceMap:!1,shadowMode:!1})},e775:function(t,e,n){e=t.exports=n("2350")(!1),e.push([t.i,".avatar[data-v-5aa82374]{position:relative;font-size:0;line-height:0;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.avatar__image[data-v-5aa82374]{position:absolute;top:0}.avatar__image--initial[data-v-5aa82374]{position:static}.avatar__image img[data-v-5aa82374]{display:inline-block}.avatar--rounded[data-v-5aa82374]{border-radius:50%}.avatar--block[data-v-5aa82374]{width:100%;height:100%}.fade-enter-active[data-v-5aa82374],.fade-leave-active[data-v-5aa82374]{-webkit-transition:opacity .3s;transition:opacity .3s}.fade-enter[data-v-5aa82374],.fade-leave-to[data-v-5aa82374]{opacity:0}",""])},f1a5:function(t,e,n){var r=n("048f");"string"===typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);var a=n("499e").default;a("571ba2c3",r,!0,{sourceMap:!1,shadowMode:!1})},f6fd:function(t,e){(function(t){var e="currentScript",n=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(r){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(t in n)if(n[t].src==e||"interactive"==n[t].readyState)return n[t];return null}}})})(document)},fb15:function(t,e,n){"use strict";var r;(n.r(e),"undefined"!==typeof window)&&(n("f6fd"),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=r[1]));var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"avatar",class:t.classes,style:t.styles},[t.showImage?t._e():n("div",{staticClass:"avatar__letter"},[n("LetterAvatar",{attrs:{name:t.name,rounded:t.rounded,block:t.block,width:t.width,height:t.height,"fg-color":t.fgColor,"bg-color":t.bgColor,"bg-color-palette":t.bgColorPalette},on:{click:t.onClick}})],1),n("transition",{attrs:{name:"fade"}},[t.showImage?n("div",{staticClass:"avatar__image",class:{"avatar__image--initial":t.showImage}},[n("img",{attrs:{src:t.url,alt:t.name,width:"100%"},on:{click:t.onClick}})]):t._e()])],1)},i=[],o={props:{rounded:{type:Boolean,required:!1,default:!1},fgColor:{type:String,required:!1,default:"#fff"},bgColor:{type:String,required:!1,default:null},bgColorPalette:{type:Array,required:!1,default:function(){return[]}},block:{type:Boolean,required:!1,default:!1},width:{type:[String,Number],required:!1,default:100,validator:l},height:{type:[String,Number],required:!1,default:100,validator:l}},computed:{stylesObject:function(){var t={};return this.block||(this.widthValue&&(t.width=this.widthValue),this.heightValue&&(t.height=this.heightValue)),t},styles:function(){var t=this;return Object.keys(this.stylesObject).map(function(e){return"".concat(e,": ").concat(t.stylesObject[e])}).join("; ")},widthValue:function(){if(this.width)return s(this.width)},heightValue:function(){if(this.height)return s(this.height)}}};function s(t){return"number"===typeof t&&(t="".concat(t,"px")),t.indexOf("px")>0||t.indexOf("rem")>0?t:"".concat(t,"px")}function l(t){return"number"===typeof t||(t.indexOf("rem")>0||t.indexOf("px")>0)&&!isNaN(parseInt(t))}var u=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"letter-avatar",class:t.classes,style:t.styles},[n("img",{attrs:{src:t.url,alt:t.name,width:"100%"},on:{click:t.onClick}})])},c=[],d={name:"VueLetterAvatar",mixins:[o],props:{name:{type:String,required:!0}},methods:{onClick:function(t){this.$emit("click",t)}},computed:{initials:function(){var t=this.name?String(this.name):"",e=t.trim().split(" "),n=[];e.forEach(function(t){n.push(t.charAt(0))});var r=n.slice(0,2).join("").toUpperCase();return 0===r.length?"?":r},bgColorIndex:function(){var t=72;return"?"!==this.initials&&this.initials.length>0&&(t=this.initials.charCodeAt(0)),t-=64,t%this.bgColors.length},bgColors:function(){return this.bgColorPalette&&this.bgColorPalette.length>0?this.bgColors:this.defaultBgColorPalette},bgColorValue:function(){return this.bgColor||this.bgColors[this.bgColorIndex-1]},url:function(){var t=document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight;var e=t.getContext("2d");e.fillStyle=this.bgColorValue,e.fillRect(0,0,t.width,t.height),e.font="bold ".concat(this.fontSize,"px Helvetica, Arial, sans-serif"),e.textAlign="center",e.fillStyle=this.fgColor,e.fillText(this.initials,this.canvasWidth/2,this.canvasHeight/1.5);var n=t.toDataURL();return t=null,n},classes:function(){return{"letter-avatar--rounded":this.rounded,"letter-avatar--block":this.block}}},data:function(){var t={canvasWidth:500,canvasHeight:500,defaultBgColorPalette:["#e53935","#d81b60","#c51162","#8e24aa","#5e35b1","#3949ab","#1e88e5","#0288d1","#0097a7","#00bfa5","#00b8d4","#00796b","#2e7d32","#558b2f","#827717","#9e9d24","#f57f17","#ff6f00","#e65100","#6d4c41","#4e342e","#616161","#455a64","#263238","#ff80ab"]};return t.fontSize=Math.ceil(t.canvasWidth/2.2),t}},f=d;n("4257");function h(t,e,n,r,a,i,o,s){var l,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),o?(l=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),a&&a.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=l):a&&(l=s?function(){a.call(this,this.$root.$options.shadowRoot)}:a),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(t,e){return l.call(e),c(t,e)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:u}}var p=h(f,u,c,!1,null,"13e04cba",null),v=p.exports,g={name:"VueAvatar",mixins:[o],components:{LetterAvatar:v},props:{url:{type:String,required:!1,default:null},name:{type:String,required:!0}},computed:{classes:function(){return{"avatar--rounded":this.rounded,"avatar--block":this.block}}},methods:{onClick:function(t){this.$emit("click",t)}},watch:{url:{handler:function(t){var e=this;if(t){var n=new Image;n.onload=function(){e.showImage=!0},n.src=t}},immediate:!0}},data:function(){return{showImage:!1}}},b=g,m=(n("64f8"),h(b,a,i,!1,null,"5aa82374",null)),y=m.exports,C=y;n.d(e,"VueLetterAvatar",function(){return v});e["default"]=C}})});
//# sourceMappingURL=vue-avatar.umd.min.js.map