vue3-avatar
Version:
A user avatar component for vue3. By default it uses light colors for Text and dark colors for Background.
308 lines (280 loc) • 11.9 kB
JavaScript
'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var lightColors = ["#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"];
var darkColors = ["#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"];
var BORDERCOLORS = {
ONLINE: "green",
OFFLINE: "grey",
AWAY: "orange",
BUSY: "red"
};
var script = {
name: "Avatar",
props: {
name: {
type: String,
required: true
},
color: {
type: String
},
background: {
type: String
},
size: {
type: Number,
default: 40
},
inverted: {
type: Boolean,
default: false
},
inline: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: true
},
imageSrc: {
type: String
},
border: {
type: Boolean,
default: true
},
borderColor: {
type: String,
default: "white"
},
customAvatarStyle: {
type: Object,
default: function _default() {
return {};
}
},
status: {
type: String,
default: null,
validator: function validator(value) {
return ["away", "online", "offline", "busy"].includes(value);
}
},
customStatusStyle: {
type: Object,
default: function _default() {
return {};
}
},
sameBorder: {
type: Boolean,
default: false
}
},
data: function data() {
return {
imageError: false
};
},
computed: {
statusStyle: function statusStyle() {
var defaultStatusStyle = {
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({}, defaultStatusStyle, this.customStatusStyle);
},
imageStyle: function imageStyle() {
var defaultImageStyle = {
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({}, defaultImageStyle, this.customAvatarStyle);
},
avatarStyle: function avatarStyle() {
var defaultAvatarStyle = {
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({}, defaultAvatarStyle, this.customAvatarStyle);
},
fontSize: function fontSize() {
var size = this.size || 40;
if (this.displayName.length == 1) return size / 2;else if (this.displayName.length == 2) return size / 2.5;
if (this.displayName.length == 3) return size / 3;else return 14;
},
displayName: function displayName() {
var words = this.name.trim().split(/[- ]/);
words = words.filter(function (word) {
return word !== "";
});
if (words.length >= 3) return words[0][0].toUpperCase() + words[1][0].toUpperCase() + words[words.length - 1][0].toUpperCase();else if (words.length == 2) return words[0][0].toUpperCase() + words[1][0].toUpperCase();else if (words.length == 1) return words[0][0].toUpperCase();else return "";
},
displayBackground: function displayBackground() {
return this.background ? this.background : this.inverted ? this.lightColor : this.darkColor;
},
displayColor: function displayColor() {
return this.color ? this.color : this.inverted ? this.darkColor : this.lightColor;
},
asciiValue: function asciiValue() {
var username = this.name.trim();
var ascii = 0;
for (var index = 0; index < username.length; index++) {
ascii += username.charCodeAt(index);
}
return ascii;
},
darkColor: function darkColor() {
return darkColors[this.asciiValue % darkColors.length];
},
lightColor: function lightColor() {
return lightColors[this.asciiValue % lightColors.length];
},
statusBackgroundColor: function statusBackgroundColor() {
var color;
switch (this.status.toLowerCase()) {
case "away":
color = BORDERCOLORS.AWAY;
break;
case "online":
color = BORDERCOLORS.ONLINE;
break;
case "offline":
color = BORDERCOLORS.OFFLINE;
break;
default:
color = BORDERCOLORS.BUSY;
}
return color;
}
},
methods: {
showImage: function showImage() {
return this.imageSrc && !this.imageError;
}
}
};var _hoisted_1 = {
class: "container"
};
var _hoisted_2 = ["height", "width", "src", "alt"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [$options.showImage() ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
style: vue.normalizeStyle($options.imageStyle),
height: $props.size,
width: $props.size,
src: $props.imageSrc,
alt: $options.displayName,
onError: _cache[0] || (_cache[0] = function ($event) {
return _ctx.imageError = true;
})
}, null, 44, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
style: vue.normalizeStyle($options.avatarStyle),
class: "avatar noselect"
}, vue.toDisplayString($options.displayName), 5)), $props.status ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: "status-indicator",
style: vue.normalizeStyle($options.statusStyle)
}, null, 4)) : vue.createCommentVNode("", true)]);
}function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}var css_248z = "\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";
styleInject(css_248z);script.render = render;
script.__scopeId = "data-v-3b51803e";// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Get component instance
var installable = script; // Attach install function executed by Vue.use()
installable.install = function (app) {
app.component('Avatar', installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;