vue-profile-avatar/dist/vue-profile-avatar.min.js

Minimalist avatar component for Vue 3

var VueProfileAvatar=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var o,n,a=[],i=!0,l=!1;try{for(r=r.call(e);!(i=(o=r.next()).done)&&(a.push(o.value),!t||a.length!==t);i=!0);}catch(e){l=!0,n=e}finally{try{i||null==r.return||r.return()}finally{if(l)throw n}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return r(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}var o=e.defineComponent({name:"ProfileAvatar",props:{username:{type:String,default:"Username",required:!0},size:{type:String,default:"s",required:!1},customSize:{type:String,required:!1},border:{type:Boolean,default:!0,required:!1},bgColor:{type:String,required:!1},borderColor:{type:String,required:!1},textColor:{type:String,required:!1},colorType:{type:String,required:!1,default:"normal"},image:{type:String,required:!1}},data:function(){return{normalBackgroundColors:{a:"#FF6633",b:"#FFB399",c:"#809900",d:"#FFFF99",e:"#00B3E6",f:"#E6B333",g:"#3366E6",h:"#999966",i:"#99FF99",j:"#B34D4D",k:"#80B300",l:"#FF33FF",m:"#E6B3B3",n:"#6680B3",o:"#6666FF",p:"#FF99E6",q:"#CCFF1A",r:"#FF1A66",s:"#E6331A",t:"#33FFCC",u:"#66994D",v:"#B366CC",w:"#4D8000",x:"#B33300",y:"#CC80CC",z:"#66664D",1:"#4D8066",2:"#809980",3:"#E6FF80",4:"#1AFF33",5:"#999933",6:"#FF3380",7:"#CCCC00",8:"#66E64D",9:"#4D80CC",0:"#9900B3",else:"#6666FF","ñ":"#6666FF"},pastelBackgroundColors:{a:"#FCFFA6",b:"#C1FFD7",c:"#B5DEFF",d:"#CAB8FF",e:"#F38BA0",f:"#EDF6E5",g:"#FFBCBC",h:"#B5EAEA",i:"#FFFDDE",j:"#D9D7F1",k:"#E7FBBE",l:"#FFCBCB",m:"#FCFFA6",n:"#C1FFD7",o:"#B5DEFF",p:"#CAB8FF",q:"#F38BA0",r:"#EDF6E5",s:"#FFBCBC",t:"#B5EAEA",u:"#FFFDDE",v:"#D9D7F1",w:"#E7FBBE",x:"#FFCBCB",y:"#FCFFA6",z:"#C1FFD7","ñ":"#B5DEFF",1:"#CAB8FF",2:"#F38BA0",3:"#EDF6E5",4:"#FFBCBC",5:"#B5EAEA",6:"#FFFDDE",7:"#D9D7F1",8:"#E7FBBE",9:"#FFCBCB",0:"#B5DEFF",else:"#CAB8FF"},brownieBackgroundColors:{a:"#ffc7a4",b:"#d69e7c",c:"#ab7656",d:"#815133",e:"#582e12",f:"#ffe599",g:"#ffb363",h:"#ad5900",i:"#7f3509",j:"#c6a186",k:"#9b6a5b",l:"#573333",m:"#cbb397",n:"#ffc7a4",o:"#d69e7c",p:"#ab7656",q:"#815133",r:"#582e12",s:"#ffe599",t:"#ffb363",u:"#ad5900",v:"#7f3509",w:"#c6a186",x:"#9b6a5b",y:"#573333",z:"#cbb397","ñ":"#ffc7a4",1:"#d69e7c",2:"#ab7656",3:"#815133",4:"#582e12",5:"#ffe599",6:"#ffb363",7:"#ad5900",8:"#7f3509",9:"#c6a186",0:"#9b6a5b",else:"#573333"}}},computed:{avatarClass:function(){return{small:"s"===this.size,medium:"m"===this.size,large:"l"===this.size}},isBorder:function(){return{border:this.border}},initials:function(){return this.backgroundColor,this.getInitials(this.username)},backgroundColor:function(){return this.getColorByInitial(this.getInitials(this.username)[0])}},methods:{getInitials:function(e){var t=e.split(" ").map((function(e){return e.slice(0,1).toUpperCase()}));return t.length>3?t.slice(0,3).join(""):t.join("")},getColorByInitial:function(e){return this.bgColor?this.bgColor:"normal"===this.colorType?this.normalBackgroundColors[e.toLowerCase()]:"pastel"===this.colorType?this.pastelBackgroundColors[e.toLowerCase()]:"brownie"===this.colorType?this.brownieBackgroundColors[e.toLowerCase()]:this.normalBackgroundColors[e.toLowerCase()]},getBorderColor:function(e,t){return this.image?"black":this.borderColorPropExists()?this.borderColor:this.shadeColor(e,t)},getTextColor:function(e,t){return this.textColorPropExists()?this.textColor:this.shadeColor(e,t)},shadeColor:function(e,t){var r=parseInt(e.substring(1,3),16),o=parseInt(e.substring(3,5),16),n=parseInt(e.substring(5,7),16);return r=parseInt(r*(100+t)/100),o=(o=parseInt(o*(100+t)/100))<255?o:255,n=(n=parseInt(n*(100+t)/100))<255?n:255,"#"+(1==(r=r<255?r:255).toString(16).length?"0"+r.toString(16):r.toString(16))+(1==o.toString(16).length?"0"+o.toString(16):o.toString(16))+(1==n.toString(16).length?"0"+n.toString(16):n.toString(16))},borderColorPropExists:function(){return!!this.borderColor},textColorPropExists:function(){return!!this.textColor}}}),n={key:0,class:"text"},a=["src"];!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');\n.avatarContainer[data-v-ebbeb36a] {\n    display: flex;\n    border-radius: 100%;\n    background-color: #6666FF;\n    overflow: hidden;\n}\n.small[data-v-ebbeb36a] {\n    height: 50px;\n    width: 50px;\n}\n.medium[data-v-ebbeb36a] {\n    height: 60px;\n    width: 60px;\n}\n.large[data-v-ebbeb36a] {\n    height: 75px;\n    width: 75px;\n    font-size: 20px;\n}\n.text[data-v-ebbeb36a] {\n    margin: auto;\n    font-family: 'Montserrat', sans-serif;\n}\n.border[data-v-ebbeb36a] {\n    border: 2px solid black;\n}\n.image[data-v-ebbeb36a] {\n    width: 100%;\n    height: 100%;\n}\n\n  \n"),o.render=function(t,r,o,i,l,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["avatarContainer",[t.avatarClass,t.isBorder]]),style:e.normalizeStyle({height:t.customSize,width:t.customSize,backgroundColor:t.backgroundColor,color:t.getTextColor(t.backgroundColor,-45),borderColor:t.getBorderColor(t.backgroundColor,-45)})},[t.image?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",n,e.toDisplayString(t.initials),1)),t.image?(e.openBlock(),e.createElementBlock("img",{key:1,src:t.image,class:"image",alt:"Avatar"},null,8,a)):e.createCommentVNode("",!0)],6)},o.__scopeId="data-v-ebbeb36a";var i=function(){var e=o;return e.install=function(t){t.component("VueProfileAvatar",e)},e}(),l=Object.freeze({__proto__:null,default:i});return Object.entries(l).forEach((function(e){var r=t(e,2),o=r[0],n=r[1];"default"!==o&&(i[o]=n)})),i}(Vue);