UNPKG

@vcraescu/vue-avatar

Version:

User avatar component for VueJS 2.

1,044 lines (887 loc) 36.1 kB
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["vue-avatar"] = factory(); else root["vue-avatar"] = factory(); })((typeof self !== 'undefined' ? self : this), function() { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = "fb15"); /******/ }) /************************************************************************/ /******/ ({ /***/ "048f": /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__("2350")(false); // imports // module exports.push([module.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%}", ""]); // exports /***/ }), /***/ "2350": /***/ (function(module, exports) { /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ // css base code, injected by the css-loader module.exports = function(useSourceMap) { var list = []; // return the list of modules as css string list.toString = function toString() { return this.map(function (item) { var content = cssWithMappingToString(item, useSourceMap); if(item[2]) { return "@media " + item[2] + "{" + content + "}"; } else { return content; } }).join(""); }; // import a list of modules into the list list.i = function(modules, mediaQuery) { if(typeof modules === "string") modules = [[null, modules, ""]]; var alreadyImportedModules = {}; for(var i = 0; i < this.length; i++) { var id = this[i][0]; if(typeof id === "number") alreadyImportedModules[id] = true; } for(i = 0; i < modules.length; i++) { var item = modules[i]; // skip already imported module // this implementation is not 100% perfect for weird media query combinations // when a module is imported multiple times with different media queries. // I hope this will never occur (Hey this way we have smaller bundles) if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { if(mediaQuery && !item[2]) { item[2] = mediaQuery; } else if(mediaQuery) { item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; } list.push(item); } } }; return list; }; function cssWithMappingToString(item, useSourceMap) { var content = item[1] || ''; var cssMapping = item[3]; if (!cssMapping) { return content; } if (useSourceMap && typeof btoa === 'function') { var sourceMapping = toComment(cssMapping); var sourceURLs = cssMapping.sources.map(function (source) { return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' }); return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); } return [content].join('\n'); } // Adapted from convert-source-map (MIT) function toComment(sourceMap) { // eslint-disable-next-line no-undef var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; return '/*# ' + data + ' */'; } /***/ }), /***/ "4257": /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_LetterAvatar_vue_vue_type_style_index_0_id_13e04cba_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f1a5"); /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_LetterAvatar_vue_vue_type_style_index_0_id_13e04cba_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_LetterAvatar_vue_vue_type_style_index_0_id_13e04cba_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__); /* unused harmony reexport * */ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_LetterAvatar_vue_vue_type_style_index_0_id_13e04cba_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }), /***/ "499e": /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js /** * Translates the list format produced by css-loader into something * easier to manipulate. */ function listToStyles (parentId, list) { var styles = [] var newStyles = {} for (var i = 0; i < list.length; i++) { var item = list[i] var id = item[0] var css = item[1] var media = item[2] var sourceMap = item[3] var part = { id: parentId + ':' + i, css: css, media: media, sourceMap: sourceMap } if (!newStyles[id]) { styles.push(newStyles[id] = { id: id, parts: [part] }) } else { newStyles[id].parts.push(part) } } return styles } // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return addStylesClient; }); /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra Modified by Evan You @yyx990803 */ var hasDocument = typeof document !== 'undefined' if (typeof DEBUG !== 'undefined' && DEBUG) { if (!hasDocument) { 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." ) } } /* type StyleObject = { id: number; parts: Array<StyleObjectPart> } type StyleObjectPart = { css: string; media: string; sourceMap: ?string } */ var stylesInDom = {/* [id: number]: { id: number, refs: number, parts: Array<(obj?: StyleObjectPart) => void> } */} var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]) var singletonElement = null var singletonCounter = 0 var isProduction = false var noop = function () {} var options = null var ssrIdKey = 'data-vue-ssr-id' // Force single-tag solution on IE6-9, which has a hard limit on the # of <style> // tags it will allow on a page var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase()) function addStylesClient (parentId, list, _isProduction, _options) { isProduction = _isProduction options = _options || {} var styles = listToStyles(parentId, list) addStylesToDom(styles) return function update (newList) { var mayRemove = [] for (var i = 0; i < styles.length; i++) { var item = styles[i] var domStyle = stylesInDom[item.id] domStyle.refs-- mayRemove.push(domStyle) } if (newList) { styles = listToStyles(parentId, newList) addStylesToDom(styles) } else { styles = [] } for (var i = 0; i < mayRemove.length; i++) { var domStyle = mayRemove[i] if (domStyle.refs === 0) { for (var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j]() } delete stylesInDom[domStyle.id] } } } } function addStylesToDom (styles /* Array<StyleObject> */) { for (var i = 0; i < styles.length; i++) { var item = styles[i] var domStyle = stylesInDom[item.id] if (domStyle) { domStyle.refs++ for (var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j](item.parts[j]) } for (; j < item.parts.length; j++) { domStyle.parts.push(addStyle(item.parts[j])) } if (domStyle.parts.length > item.parts.length) { domStyle.parts.length = item.parts.length } } else { var parts = [] for (var j = 0; j < item.parts.length; j++) { parts.push(addStyle(item.parts[j])) } stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts } } } } function createStyleElement () { var styleElement = document.createElement('style') styleElement.type = 'text/css' head.appendChild(styleElement) return styleElement } function addStyle (obj /* StyleObjectPart */) { var update, remove var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]') if (styleElement) { if (isProduction) { // has SSR styles and in production mode. // simply do nothing. return noop } else { // has SSR styles but in dev mode. // for some reason Chrome can't handle source map in server-rendered // style tags - source maps in <style> only works if the style tag is // created and inserted dynamically. So we remove the server rendered // styles and inject new ones. styleElement.parentNode.removeChild(styleElement) } } if (isOldIE) { // use singleton mode for IE9. var styleIndex = singletonCounter++ styleElement = singletonElement || (singletonElement = createStyleElement()) update = applyToSingletonTag.bind(null, styleElement, styleIndex, false) remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true) } else { // use multi-style-tag mode in all other cases styleElement = createStyleElement() update = applyToTag.bind(null, styleElement) remove = function () { styleElement.parentNode.removeChild(styleElement) } } update(obj) return function updateStyle (newObj /* StyleObjectPart */) { if (newObj) { if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) { return } update(obj = newObj) } else { remove() } } } var replaceText = (function () { var textStore = [] return function (index, replacement) { textStore[index] = replacement return textStore.filter(Boolean).join('\n') } })() function applyToSingletonTag (styleElement, index, remove, obj) { var css = remove ? '' : obj.css if (styleElement.styleSheet) { styleElement.styleSheet.cssText = replaceText(index, css) } else { var cssNode = document.createTextNode(css) var childNodes = styleElement.childNodes if (childNodes[index]) styleElement.removeChild(childNodes[index]) if (childNodes.length) { styleElement.insertBefore(cssNode, childNodes[index]) } else { styleElement.appendChild(cssNode) } } } function applyToTag (styleElement, obj) { var css = obj.css var media = obj.media var sourceMap = obj.sourceMap if (media) { styleElement.setAttribute('media', media) } if (options.ssrId) { styleElement.setAttribute(ssrIdKey, obj.id) } if (sourceMap) { // https://developer.chrome.com/devtools/docs/javascript-debugging // this makes source maps inside style tags work properly in Chrome css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */' // http://stackoverflow.com/a/26603875 css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */' } if (styleElement.styleSheet) { styleElement.styleSheet.cssText = css } else { while (styleElement.firstChild) { styleElement.removeChild(styleElement.firstChild) } styleElement.appendChild(document.createTextNode(css)) } } /***/ }), /***/ "64f8": /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Avatar_vue_vue_type_style_index_0_id_5aa82374_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("e71a"); /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Avatar_vue_vue_type_style_index_0_id_5aa82374_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Avatar_vue_vue_type_style_index_0_id_5aa82374_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__); /* unused harmony reexport * */ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Avatar_vue_vue_type_style_index_0_id_5aa82374_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }), /***/ "e71a": /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a <style> tag // load the styles var content = __webpack_require__("e775"); if(typeof content === 'string') content = [[module.i, content, '']]; if(content.locals) module.exports = content.locals; // add the styles to the DOM var add = __webpack_require__("499e").default var update = add("4385e0d1", content, true, {"sourceMap":false,"shadowMode":false}); /***/ }), /***/ "e775": /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__("2350")(false); // imports // module exports.push([module.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}", ""]); // exports /***/ }), /***/ "f1a5": /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a <style> tag // load the styles var content = __webpack_require__("048f"); if(typeof content === 'string') content = [[module.i, content, '']]; if(content.locals) module.exports = content.locals; // add the styles to the DOM var add = __webpack_require__("499e").default var update = add("571ba2c3", content, true, {"sourceMap":false,"shadowMode":false}); /***/ }), /***/ "f6fd": /***/ (function(module, exports) { // document.currentScript polyfill by Adam Miller // MIT license (function(document){ var currentScript = "currentScript", scripts = document.getElementsByTagName('script'); // Live NodeList collection // If browser needs currentScript polyfill, add get currentScript() to the document object if (!(currentScript in document)) { Object.defineProperty(document, currentScript, { get: function(){ // IE 6-10 supports script readyState // IE 10+ support stack trace try { throw new Error(); } catch (err) { // Find the second match for the "at" string to get file src url from stack. // Specifically works with the format of stack traces in IE. var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1]; // For all scripts on the page, if src matches or if ready state is interactive, return the script tag for(i in scripts){ if(scripts[i].src == res || scripts[i].readyState == "interactive"){ return scripts[i]; } } // If no match, return null return null; } } }); } })(document); /***/ }), /***/ "fb15": /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js // This file is imported into lib/wc client bundles. if (typeof window !== 'undefined') { if (true) { __webpack_require__("f6fd") } var i if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) { __webpack_require__.p = i[1] // eslint-disable-line } } // Indicate to webpack that this file can be concatenated /* harmony default export */ var setPublicPath = (null); // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"23ffc45c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Avatar.vue?vue&type=template&id=5aa82374&scoped=true& var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"avatar",class:_vm.classes,style:(_vm.styles)},[(!_vm.showImage)?_c('div',{staticClass:"avatar__letter"},[_c('LetterAvatar',{attrs:{"name":_vm.name,"rounded":_vm.rounded,"block":_vm.block,"width":_vm.width,"height":_vm.height,"fg-color":_vm.fgColor,"bg-color":_vm.bgColor,"bg-color-palette":_vm.bgColorPalette},on:{"click":_vm.onClick}})],1):_vm._e(),_c('transition',{attrs:{"name":"fade"}},[(_vm.showImage)?_c('div',{staticClass:"avatar__image",class:{ 'avatar__image--initial': _vm.showImage }},[_c('img',{attrs:{"src":_vm.url,"alt":_vm.name,"width":"100%"},on:{"click":_vm.onClick}})]):_vm._e()])],1)} var staticRenderFns = [] // CONCATENATED MODULE: ./src/components/Avatar.vue?vue&type=template&id=5aa82374&scoped=true& // CONCATENATED MODULE: ./src/mixins/avatar.js /* harmony default export */ var avatar = ({ props: { rounded: { type: Boolean, required: false, default: false }, fgColor: { type: String, required: false, default: "#fff" }, bgColor: { type: String, required: false, default: null }, bgColorPalette: { type: Array, required: false, default: function _default() { return []; } }, block: { type: Boolean, required: false, default: false }, width: { type: [String, Number], required: false, default: 100, validator: validateSize }, height: { type: [String, Number], required: false, default: 100, validator: validateSize } }, computed: { stylesObject: function stylesObject() { var styles = {}; if (!this.block) { if (this.widthValue) { styles.width = this.widthValue; } if (this.heightValue) { styles.height = this.heightValue; } } return styles; }, styles: function styles() { var _this = this; return Object.keys(this.stylesObject).map(function (name) { return "".concat(name, ": ").concat(_this.stylesObject[name]); }).join("; "); }, widthValue: function widthValue() { if (!this.width) { return; } return sizify(this.width); }, heightValue: function heightValue() { if (!this.height) { return; } return sizify(this.height); } } }); function sizify(value) { if (typeof value === "number") { value = "".concat(value, "px"); } if (value.indexOf("px") > 0 || value.indexOf("rem") > 0) { return value; } return "".concat(value, "px"); } function validateSize(value) { if (typeof value === "number") { return true; } return (value.indexOf("rem") > 0 || value.indexOf("px") > 0) && !isNaN(parseInt(value)); } // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"23ffc45c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/LetterAvatar.vue?vue&type=template&id=13e04cba&scoped=true& var LetterAvatarvue_type_template_id_13e04cba_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"letter-avatar",class:_vm.classes,style:(_vm.styles)},[_c('img',{attrs:{"src":_vm.url,"alt":_vm.name,"width":"100%"},on:{"click":_vm.onClick}})])} var LetterAvatarvue_type_template_id_13e04cba_scoped_true_staticRenderFns = [] // CONCATENATED MODULE: ./src/components/LetterAvatar.vue?vue&type=template&id=13e04cba&scoped=true& // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/LetterAvatar.vue?vue&type=script&lang=js& // // // // // // /* harmony default export */ var LetterAvatarvue_type_script_lang_js_ = ({ name: "VueLetterAvatar", mixins: [avatar], props: { name: { type: String, required: true } }, methods: { onClick: function onClick(event) { this.$emit("click", event); } }, computed: { initials: function initials() { var name = this.name ? String(this.name) : ""; var parts = name.trim().split(" "); var initials = []; parts.forEach(function (part) { initials.push(part.charAt(0)); }); var text = initials.slice(0, 2).join("").toUpperCase(); return text.length === 0 ? "?" : text; }, bgColorIndex: function bgColorIndex() { var code = 72; if (this.initials !== "?" && this.initials.length > 0) { code = this.initials.charCodeAt(0); } code -= 64; return code % this.bgColors.length; }, bgColors: function bgColors() { if (this.bgColorPalette && this.bgColorPalette.length > 0) { return this.bgColors; } return this.defaultBgColorPalette; }, bgColorValue: function bgColorValue() { return this.bgColor || this.bgColors[this.bgColorIndex - 1]; }, url: function url() { var canvas = document.createElement("canvas"); canvas.width = this.canvasWidth; canvas.height = this.canvasHeight; var context = canvas.getContext("2d"); context.fillStyle = this.bgColorValue; context.fillRect(0, 0, canvas.width, canvas.height); context.font = "bold ".concat(this.fontSize, "px Helvetica, Arial, sans-serif"); context.textAlign = "center"; context.fillStyle = this.fgColor; context.fillText(this.initials, this.canvasWidth / 2, this.canvasHeight / 1.5); var uri = canvas.toDataURL(); canvas = null; return uri; }, classes: function classes() { return { "letter-avatar--rounded": this.rounded, "letter-avatar--block": this.block }; } }, data: function data() { var data = { 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"] }; data.fontSize = Math.ceil(data.canvasWidth / 2.2); return data; } }); // CONCATENATED MODULE: ./src/components/LetterAvatar.vue?vue&type=script&lang=js& /* harmony default export */ var components_LetterAvatarvue_type_script_lang_js_ = (LetterAvatarvue_type_script_lang_js_); // EXTERNAL MODULE: ./src/components/LetterAvatar.vue?vue&type=style&index=0&id=13e04cba&scoped=true&lang=scss& var LetterAvatarvue_type_style_index_0_id_13e04cba_scoped_true_lang_scss_ = __webpack_require__("4257"); // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js /* globals __VUE_SSR_CONTEXT__ */ // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). // This module is a runtime utility for cleaner component module output and will // be included in the final webpack user bundle. function normalizeComponent ( scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, /* server only */ shadowMode /* vue-cli only */ ) { // Vue.extend constructor export interop var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports // render functions if (render) { options.render = render options.staticRenderFns = staticRenderFns options._compiled = true } // functional template if (functionalTemplate) { options.functional = true } // scopedId if (scopeId) { options._scopeId = 'data-v-' + scopeId } var hook if (moduleIdentifier) { // server build hook = function (context) { // 2.3 injection context = context || // cached call (this.$vnode && this.$vnode.ssrContext) || // stateful (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__ } // inject component styles if (injectStyles) { injectStyles.call(this, context) } // register component module identifier for async chunk inferrence if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier) } } // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook } else if (injectStyles) { hook = shadowMode ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) } : injectStyles } if (hook) { if (options.functional) { // for template-only hot-reload because in that case the render fn doesn't // go through the normalizer options._injectStyles = hook // register for functioal component in vue file var originalRender = options.render options.render = function renderWithStyleInjection (h, context) { hook.call(context) return originalRender(h, context) } } else { // inject component registration as beforeCreate hook var existing = options.beforeCreate options.beforeCreate = existing ? [].concat(existing, hook) : [hook] } } return { exports: scriptExports, options: options } } // CONCATENATED MODULE: ./src/components/LetterAvatar.vue /* normalize component */ var component = normalizeComponent( components_LetterAvatarvue_type_script_lang_js_, LetterAvatarvue_type_template_id_13e04cba_scoped_true_render, LetterAvatarvue_type_template_id_13e04cba_scoped_true_staticRenderFns, false, null, "13e04cba", null ) /* harmony default export */ var LetterAvatar = (component.exports); // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Avatar.vue?vue&type=script&lang=js& // // // // // // // // // // // // // // // // // // // // // // // // // // // /* harmony default export */ var Avatarvue_type_script_lang_js_ = ({ name: "VueAvatar", mixins: [avatar], components: { LetterAvatar: LetterAvatar }, props: { url: { type: String, required: false, default: null }, name: { type: String, required: true } }, computed: { classes: function classes() { return { "avatar--rounded": this.rounded, "avatar--block": this.block }; } }, methods: { onClick: function onClick(event) { this.$emit("click", event); } }, watch: { url: { handler: function handler(value) { var _this = this; if (!value) { return; } var img = new Image(); img.onload = function () { _this.showImage = true; }; img.src = value; }, immediate: true } }, data: function data() { return { showImage: false }; } }); // CONCATENATED MODULE: ./src/components/Avatar.vue?vue&type=script&lang=js& /* harmony default export */ var components_Avatarvue_type_script_lang_js_ = (Avatarvue_type_script_lang_js_); // EXTERNAL MODULE: ./src/components/Avatar.vue?vue&type=style&index=0&id=5aa82374&lang=scss&scoped=true& var Avatarvue_type_style_index_0_id_5aa82374_lang_scss_scoped_true_ = __webpack_require__("64f8"); // CONCATENATED MODULE: ./src/components/Avatar.vue /* normalize component */ var Avatar_component = normalizeComponent( components_Avatarvue_type_script_lang_js_, render, staticRenderFns, false, null, "5aa82374", null ) /* harmony default export */ var Avatar = (Avatar_component.exports); // CONCATENATED MODULE: ./src/components/index.js /* harmony default export */ var components = (Avatar); // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js /* concated harmony reexport VueLetterAvatar */__webpack_require__.d(__webpack_exports__, "VueLetterAvatar", function() { return LetterAvatar; }); /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (components); /***/ }) /******/ }); }); //# sourceMappingURL=vue-avatar.umd.js.map