vue3-avatar
Version:
A user avatar component for vue3. By default it uses light colors for Text and dark colors for Background.
1 lines • 7.43 kB
JavaScript
var Avatar=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(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 n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var r=["#F0F8FF","#FAEBD7","#00FFFF","#7FFFD4","#F0FFFF","#F5F5DC","#FFE4C4","#FFEBCD","#DEB887","#5F9EA0","#7FFF00","#D2691E","#FF7F50","#6495ED","#FFF8DC","#00FFFF","#B8860B","#A9A9A9","#A9A9A9","#BDB76B","#FF8C00","#E9967A","#8FBC8F","#00CED1","#FF1493","#00BFFF","#1E90FF","#FFFAF0","#FF00FF","#DCDCDC","#F8F8FF","#FFD700","#DAA520","#808080","#808080","#ADFF2F","#F0FFF0","#FF69B4","#CD5C5C","#FFFFF0","#F0E68C","#E6E6FA","#FFF0F5","#7CFC00","#FFFACD","#ADD8E6","#F08080","#E0FFFF","#FAFAD2","#D3D3D3","#D3D3D3","#90EE90","#FFB6C1","#FFA07A","#20B2AA","#87CEFA","#B0C4DE","#FFFFE0","#00FF00","#32CD32","#FAF0E6","#FF00FF","#66CDAA","#BA55D3","#9370D8","#3CB371","#7B68EE","#00FA9A","#48D1CC","#F5FFFA","#FFE4E1","#FFE4B5","#FFDEAD","#FDF5E6","#FFA500","#FF4500","#DA70D6","#EEE8AA","#98FB98","#AFEEEE","#D87093","#FFEFD5","#FFDAB9","#CD853F","#FFC0CB","#DDA0DD","#B0E0E6","#FF0000","#BC8F8F","#FA8072","#F4A460","#FFF5EE","#C0C0C0","#87CEEB","#FFFAFA","#00FF7F","#D2B48C","#D8BFD8","#FF6347","#40E0D0","#EE82EE","#F5DEB3","#FFFFFF","#F5F5F5","#FFFF00","#9ACD32"],o=["#000000","#0000FF","#8A2BE2","#A52A2A","#DC143C","#00008B","#008B8B","#006400","#8B008B","#556B2F","#9932CC","#8B0000","#483D8B","#2F4F4F","#2F4F4F","#9400D3","#696969","#696969","#B22222","#228B22","#008000","#4B0082","#800000","#0000CD","#C71585","#191970","#000080","#808000","#6B8E23","#800080","#4169E1","#8B4513","#2E8B57","#A0522D","#6A5ACD","#708090","#708090","#4682B4","#008080"],i="green",a="grey",s="orange",l="red",F={name:"Avatar",props:{name:{type:String,required:!0},color:{type:String},background:{type:String},size:{type:Number,default:40},inverted:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},imageSrc:{type:String},border:{type:Boolean,default:!0},borderColor:{type:String,default:"white"},customAvatarStyle:{type:Object,default:function(){return{}}},status:{type:String,default:null,validator:function(e){return["away","online","offline","busy"].includes(e)}},customStatusStyle:{type:Object,default:function(){return{}}},sameBorder:{type:Boolean,default:!1}},data:function(){return{imageError:!1}},computed:{statusStyle:function(){var e={height:"".concat(this.size/4,"px"),width:"".concat(this.size/4,"px"),backgroundColor:this.statusBackgroundColor,border:"".concat(this.size/30,"px solid ").concat(this.sameBorder?this.borderColor:"white")};return Object.assign({},e,this.customStatusStyle)},imageStyle:function(){var e={display:this.inline?"inline-flex":"flex",borderRadius:this.rounded?"50%":"0",margin:0,padding:0,alignItems:"center",justifyContent:"center",border:this.border?"".concat(this.size/20,"px solid ").concat(this.borderColor):"none"};return Object.assign({},e,this.customAvatarStyle)},avatarStyle:function(){var e={color:this.displayColor,width:this.size+"px",height:this.size+"px",fontSize:this.fontSize+"px",background:this.displayBackground,display:this.inline&&"inline-flex",borderRadius:this.rounded&&"50%",border:this.border&&"".concat(this.size/20,"px solid ").concat(this.borderColor)};return Object.assign({},e,this.customAvatarStyle)},fontSize:function(){var e=this.size||40;return 1==this.displayName.length?e/2:2==this.displayName.length?e/2.5:3==this.displayName.length?e/3:14},displayName:function(){var e=this.name.trim().split(/[- ]/);return(e=e.filter((function(e){return""!==e}))).length>=3?e[0][0].toUpperCase()+e[1][0].toUpperCase()+e[e.length-1][0].toUpperCase():2==e.length?e[0][0].toUpperCase()+e[1][0].toUpperCase():1==e.length?e[0][0].toUpperCase():""},displayBackground:function(){return this.background?this.background:this.inverted?this.lightColor:this.darkColor},displayColor:function(){return this.color?this.color:this.inverted?this.darkColor:this.lightColor},asciiValue:function(){for(var e=this.name.trim(),t=0,n=0;n<e.length;n++)t+=e.charCodeAt(n);return t},darkColor:function(){return o[this.asciiValue%o.length]},lightColor:function(){return r[this.asciiValue%r.length]},statusBackgroundColor:function(){var e;switch(this.status.toLowerCase()){case"away":e=s;break;case"online":e=i;break;case"offline":e=a;break;default:e=l}return e}},methods:{showImage:function(){return this.imageSrc&&!this.imageError}}},u={class:"container"},c=["height","width","src","alt"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\n@import url("https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap");\n.avatar[data-v-3b51803e] {\n font-family: "Domine", serif;\n color: white;\n background: navy;\n font-size: 14px;\n width: 45px;\n height: 45px;\n border-radius: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n}\n.noselect[data-v-3b51803e] {\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.container[data-v-3b51803e] {\n position:relative;\n}\n.status-indicator[data-v-3b51803e] {\n position: absolute;\n bottom: 0;\n left: 0;\n border-radius: 50%;\n}\n'),F.render=function(t,n,r,o,i,a){return e.openBlock(),e.createElementBlock("div",u,[a.showImage()?(e.openBlock(),e.createElementBlock("img",{key:0,style:e.normalizeStyle(a.imageStyle),height:r.size,width:r.size,src:r.imageSrc,alt:a.displayName,onError:n[0]||(n[0]=function(e){return t.imageError=!0})},null,44,c)):(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle(a.avatarStyle),class:"avatar noselect"},e.toDisplayString(a.displayName),5)),r.status?(e.openBlock(),e.createElementBlock("div",{key:2,class:"status-indicator",style:e.normalizeStyle(a.statusStyle)},null,4)):e.createCommentVNode("",!0)])},F.__scopeId="data-v-3b51803e";var d=function(){var e=F;return e.install=function(t){t.component("Avatar",e)},e}(),h=Object.freeze({__proto__:null,default:d});return Object.entries(h).forEach((function(e){var n=t(e,2),r=n[0],o=n[1];"default"!==r&&(d[r]=o)})),d}(Vue);