├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENCE ├── README.md ├── bin └── deploy-doc.sh ├── build ├── build.js ├── bundle.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.bundle.conf.js ├── webpack.dev.conf.js ├── webpack.docs.conf.js ├── webpack.min.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── docs ├── index.html └── static │ ├── darth-vader.png │ └── js │ ├── app.302bc90c89bc8f7ceb56.js │ ├── app.302bc90c89bc8f7ceb56.js.map │ ├── manifest.e71b1534b4860a25b3be.js │ ├── manifest.e71b1534b4860a25b3be.js.map │ ├── vendor.70ddb044fd355b38f9df.js │ └── vendor.70ddb044fd355b38f9df.js.map ├── documentation ├── _getting-started.pug ├── index.pug ├── main.js └── vue-avatar.min.js ├── index.html ├── lib └── index.js ├── package.json ├── src ├── Avatar.vue └── index.js ├── static └── darth-vader.png ├── test └── unit │ ├── .eslintrc │ ├── .esllintrc │ ├── index.js │ ├── karma.conf.js │ └── specs │ └── Avatar.spec.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "targets": { 5 | "browsers": ["last 2 versions"], 6 | "uglify": true 7 | } 8 | }] 9 | ], 10 | "plugins": ["transform-runtime"], 11 | "comments": false 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/prism.js 2 | config/*.js 3 | *.pug -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 4 | extends: 'standard', 5 | // required to lint *.vue files 6 | plugins: [ 7 | 'html' 8 | ], 9 | // add your custom rules here 10 | 'rules': { 11 | // allow paren-less arrow functions 12 | 'arrow-parens': 0, 13 | // allow debugger during development 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 15 | } 16 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules/ 3 | dist/ 4 | test/unit/coverage/ 5 | npm-debug.log 6 | package-lock.json 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | selenium-debug.log 5 | test/unit/coverage 6 | test/e2e/reports 7 | .babelrc 8 | .editorconfig 9 | .eslintrc.js 10 | .gitignore 11 | .tern-project 12 | .idea 13 | docs/ 14 | documentation/ 15 | gh-pages/ 16 | example/ 17 | static/ 18 | test/ 19 | bin/ 20 | build/ 21 | .eslintignore 22 | index.html 23 | config.js 24 | bower.json 25 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "8" 5 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2016 kazuya kawaguchi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-avatar 2 | 3 | [![Build Status](https://travis-ci.org/eliep/vue-avatar.svg?branch=master)](https://travis-ci.org/eliep/vue-avatar) 4 | 5 | An avatar component for vue.js. 6 | 7 | This component display an avatar image and if none is provided fallback to the 8 | user initials. This component is highly inspired from 9 | [react-user-avatar](https://github.com/wbinnssmith/react-user-avatar). 10 | 11 | Rules used to compute user initials: 12 | - divide the username on space and hyphen 13 | - use the first letter of each parts 14 | - never use more than three letters as initials 15 | - if the username is divided in more than three parts and has part 16 | starting with an uppercase, skip parts starting with a lowercase. 17 | 18 | You can find a few examples and the documentation [here](https://eliep.github.io/vue-avatar) 19 | 20 | ## Installation 21 | 22 | `npm install vue-avatar` 23 | 24 | ## Version 25 | 26 | | Vuejs version | vue-avatar version | 27 | | ------------- | ----------------- | 28 | | ^1.0.18 | ^1.3.0 | 29 | | ^2.0.0 | ^2.0.0 | 30 | 31 | 32 | ## Usage 33 | vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. 34 | When in non-modular environment, Avatar will be registered as a global variable.

35 | 36 | ### ES6 37 | ```js 38 | 39 | import Avatar from 'vue-avatar' 40 | 41 | export default { 42 | ... 43 | components: { 44 | Avatar 45 | }, 46 | ... 47 | } 48 | ``` 49 | After that, you can use it in your templates: 50 | 51 | ```html 52 | 53 | ``` 54 | 55 | ### CommonJS 56 | ```js 57 | var Vue = require('vue') 58 | var Avatar = require('vue-avatar') 59 | 60 | var YourComponent = Vue.extend({ 61 | ... 62 | components: { 63 | 'avatar': Avatar.Avatar 64 | }, 65 | ... 66 | }) 67 | ``` 68 | 69 | ### Browser 70 | 71 | ``` 72 | 73 | 74 | 75 | new Vue({ 76 | ... 77 | components: { 78 | 'avatar': VueAvatar.Avatar 79 | }, 80 | ... 81 | }) 82 | ``` 83 | 84 | 85 | ## Props 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 123 | 124 | 125 | 126 | 127 | 130 | 131 | 132 | 133 | 134 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 152 | 153 |
NameRequiredDefaultTypeDescription
username N - String The user name that will be used to compute user initial.
initials N - String Force the displayed initials by overriding the computed ones.
inline N false Boolean Uses inline-flex instead of flex
src N - String Path to the avatar image to display.
:customStyle N - Object A custom style object to override the base styles.
backgroundColor N - String The avatar background color to use if no image is provided. If none 121 | is specified, a background color will be picked depending on 122 | the user name length.
color N - String The font color used to render the user initials. If none 128 | is provided, the background color is used to compute 129 | the font color.
:lighten N 80 Number A factor by which the background color must be lightened to 135 | produce the font color. Number between [-100,100].
:size N 50 Number The avatar size in pixel.
:rounded N true Boolean True if the avatar must be rounded.
:parser N [getInitials()](https://github.com/eliep/vue-avatar/blob/master/src/Avatar.vue#L8-L27) Function Custom parser to manipulate the string (the parser takes 151 | 2 params: a String and the default parser). It must return a String.
154 | 155 | ## Event 156 | 157 | 158 | 159 | 160 | 161 | 162 | 164 | 166 | 167 |
NameArgumentsDescription
@avatar-initialsusername (the value of the username props), 163 | initials (the value of the computed initials or the initials props if any)This event is trigger when the component is ready with component 165 | username and initial.
168 | 169 | 170 | ## Build Setup 171 | ``` bash 172 | # install dependencies 173 | npm install 174 | 175 | # serve gh pages with hot reload at localhost:8080/gh-pages/index.html 176 | npm run dev 177 | 178 | # build 179 | npm run bundle 180 | ``` 181 | ## Test 182 | ``` bash 183 | npm test 184 | ``` 185 | 186 | ## License 187 | 188 | Released under the [MIT](LICENSE) License. 189 | -------------------------------------------------------------------------------- /bin/deploy-doc.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | git stash save 'Before deploy' # Stash all changes before deploy 4 | git checkout master 5 | yarn docs 6 | git commit -m "Deploy docs" 7 | RESULT=$? 8 | if [ $RESULT -eq 0 ]; then 9 | echo ' >> Changes Committed << ' 10 | fi 11 | git subtree push --prefix docs origin gh-pages # Deploy gh-pages 12 | git push origin master 13 | git stash pop # And restore the changes 14 | echo ' >> Deployed << ' -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | var ora = require('ora') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var shell = require('shelljs') 10 | var webpack = require('webpack') 11 | var config = require('../config') 12 | var webpackConfig = require('./webpack.docs.conf') 13 | 14 | var spinner = ora('building docs...') 15 | spinner.start() 16 | 17 | var assetsPath = path.join(config.docs.assetsRoot, config.docs.assetsSubDirectory) 18 | shell.rm('-rf', assetsPath) 19 | shell.mkdir('-p', assetsPath) 20 | shell.config.silent = true 21 | shell.cp('-R', 'static/*', assetsPath) 22 | shell.config.silent = false 23 | 24 | webpack(webpackConfig, function (err, stats) { 25 | spinner.stop() 26 | if (err) throw err 27 | process.stdout.write(stats.toString({ 28 | colors: true, 29 | modules: false, 30 | children: false, 31 | chunks: false, 32 | chunkModules: false 33 | }) + '\n\n') 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | -------------------------------------------------------------------------------- /build/bundle.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | var ora = require('ora') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var shell = require('shelljs') 10 | var webpack = require('webpack') 11 | var config = require('../config') 12 | var webpackConfig = require('./webpack.bundle.conf') 13 | 14 | var spinner = ora('building bundle...') 15 | spinner.start() 16 | 17 | var assetsPath = path.join(config.bundle.assetsRoot, config.bundle.assetsSubDirectory) 18 | shell.rm('-rf', assetsPath) 19 | shell.mkdir('-p', assetsPath) 20 | 21 | webpack(webpackConfig, function (err, stats) { 22 | spinner.stop() 23 | if (err) throw err 24 | process.stdout.write(stats.toString({ 25 | colors: true, 26 | modules: false, 27 | children: false, 28 | chunks: false, 29 | chunkModules: false 30 | }) + '\n\n') 31 | 32 | console.log(chalk.cyan(' Build complete.\n')) 33 | }) 34 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var j = 0; j < warnings.length; j++) { 39 | var warning = warnings[j] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = process.env.NODE_ENV === 'testing' 14 | ? require('./webpack.prod.conf') 15 | : require('./webpack.dev.conf') 16 | 17 | // default port where dev server listens for incoming traffic 18 | var port = process.env.PORT || config.dev.port 19 | // automatically open browser, if not set will be false 20 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 21 | // Define HTTP proxies to your custom API backend 22 | // https://github.com/chimurai/http-proxy-middleware 23 | var proxyTable = config.dev.proxyTable 24 | 25 | var app = express() 26 | var compiler = webpack(webpackConfig) 27 | 28 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 29 | publicPath: webpackConfig.output.publicPath, 30 | quiet: true 31 | }) 32 | 33 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 34 | log: () => {} 35 | }) 36 | // force page reload when html-webpack-plugin template changes 37 | compiler.plugin('compilation', function (compilation) { 38 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 39 | hotMiddleware.publish({ action: 'reload' }) 40 | cb() 41 | }) 42 | }) 43 | 44 | // proxy api requests 45 | Object.keys(proxyTable).forEach(function (context) { 46 | var options = proxyTable[context] 47 | if (typeof options === 'string') { 48 | options = { target: options } 49 | } 50 | app.use(proxyMiddleware(options.filter || context, options)) 51 | }) 52 | 53 | // handle fallback for HTML5 history API 54 | app.use(require('connect-history-api-fallback')()) 55 | 56 | // serve webpack bundle output 57 | app.use(devMiddleware) 58 | 59 | // enable hot-reload and state-preserving 60 | // compilation error display 61 | app.use(hotMiddleware) 62 | 63 | // serve pure static assets 64 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 65 | app.use(staticPath, express.static('./static')) 66 | 67 | var uri = 'http://localhost:' + port 68 | 69 | devMiddleware.waitUntilValid(function () { 70 | console.log('> Listening at ' + uri + '\n') 71 | }) 72 | 73 | module.exports = app.listen(port, function (err) { 74 | if (err) { 75 | console.log(err) 76 | return 77 | } 78 | 79 | // when env is testing, don't need open it 80 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 81 | opn(uri) 82 | } 83 | }) 84 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.docs.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | // Extract CSS when that option is specified 29 | // (which is the case during production build) 30 | if (options.extract) { 31 | return ExtractTextPlugin.extract({ 32 | use: sourceLoader, 33 | fallback: 'vue-style-loader' 34 | }) 35 | } else { 36 | return ['vue-style-loader', sourceLoader].join('!') 37 | } 38 | } 39 | 40 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 41 | return { 42 | css: generateLoaders(['css']), 43 | postcss: generateLoaders(['css']), 44 | less: generateLoaders(['css', 'less']), 45 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 46 | scss: generateLoaders(['css', 'sass']), 47 | stylus: generateLoaders(['css', 'stylus']), 48 | styl: generateLoaders(['css', 'stylus']) 49 | } 50 | } 51 | 52 | // Generate loaders for standalone style files (outside of .vue) 53 | exports.styleLoaders = function (options) { 54 | var output = [] 55 | var loaders = exports.cssLoaders(options) 56 | for (var extension in loaders) { 57 | var loader = loaders[extension] 58 | output.push({ 59 | test: new RegExp('\\.' + extension + '$'), 60 | loader: loader 61 | }) 62 | } 63 | return output 64 | } 65 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.docs.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | postcss: [ 13 | require('autoprefixer')({ 14 | browsers: ['last 2 versions'] 15 | }) 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './documentation/main.js' 13 | }, 14 | output: { 15 | path: config.docs.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.docs.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.pug', '.js', '.vue', '.json'], 23 | modules: [ 24 | resolve('src'), 25 | resolve('documentation'), 26 | resolve('node_modules') 27 | ], 28 | alias: { 29 | 'vue$': 'vue/dist/vue', 30 | 'vue-avatar': path.resolve(__dirname, '../src/Avatar'), 31 | 'vue-multiselect': path.resolve(__dirname, '../src/Multiselect'), 32 | 'src': path.resolve(__dirname, '../src') 33 | } 34 | }, 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.(js|vue)$/, 39 | loader: 'eslint-loader', 40 | enforce: 'pre', 41 | include: [resolve('src'), resolve('test')], 42 | options: { 43 | formatter: require('eslint-friendly-formatter') 44 | } 45 | }, 46 | { 47 | test: /\.vue$/, 48 | loader: 'vue-loader', 49 | options: vueLoaderConfig 50 | }, 51 | { 52 | test: /\.js$/, 53 | loader: 'babel-loader', 54 | include: [resolve('src'), resolve('documentation'), resolve('test')] 55 | }, 56 | { 57 | test: /\.pug$/, 58 | use: 'pug-loader', 59 | include: [resolve('src'), resolve('documentation')] 60 | }, 61 | { 62 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 63 | loader: 'url-loader', 64 | query: { 65 | limit: 10000, 66 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 67 | } 68 | }, 69 | { 70 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 71 | loader: 'url-loader', 72 | query: { 73 | limit: 10000, 74 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 75 | } 76 | } 77 | ] 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /build/webpack.bundle.conf.js: -------------------------------------------------------------------------------- 1 | const CopyWebpackPlugin = require('copy-webpack-plugin') 2 | const webpack = require('webpack') 3 | const base = require('./webpack.base.conf') 4 | const config = require('../config') 5 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 6 | const utils = require('./utils') 7 | const merge = require('webpack-merge') 8 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 9 | 10 | const env = process.env.NODE_ENV === 'testing' 11 | ? require('../config/test.env') 12 | : config.bundle.env 13 | 14 | base.entry = { 15 | 'VueAvatar': './src/index.js' 16 | } 17 | 18 | const webpackConfig = merge(base, { 19 | output: { 20 | path: config.bundle.assetsRoot, 21 | publicPath: config.bundle.assetsPublicPath, 22 | filename: 'vue-avatar.min.js', 23 | library: 'VueAvatar', 24 | libraryTarget: 'umd' 25 | }, 26 | module: { 27 | rules: utils.styleLoaders({ 28 | sourceMap: config.bundle.productionSourceMap, 29 | extract: true 30 | }) 31 | }, 32 | devtool: config.bundle.productionSourceMap ? '#source-map' : false, 33 | plugins: [ 34 | new webpack.DefinePlugin({ 35 | 'process.env': env 36 | }), 37 | new webpack.optimize.UglifyJsPlugin({ 38 | compress: { warnings: false } 39 | }), 40 | new OptimizeCSSPlugin() 41 | ] 42 | }) 43 | 44 | module.exports = webpackConfig 45 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: './documentation/index.pug', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.docs.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var HtmlWebpackPlugin = require('html-webpack-plugin') 8 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 9 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 10 | var CopyWebpackPlugin = require('copy-webpack-plugin') 11 | 12 | var env = process.env.NODE_ENV === 'testing' 13 | ? require('../config/test.env') 14 | : config.docs.env 15 | 16 | var webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: false, 20 | extract: true 21 | }) 22 | }, 23 | devtool: config.docs.productionSourceMap ? '#source-map' : false, 24 | output: { 25 | path: config.docs.assetsRoot, 26 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 27 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | }, 38 | sourceMap: true 39 | }), 40 | // extract css into its own file 41 | new ExtractTextPlugin({ 42 | filename: utils.assetsPath('css/[name].[contenthash].css') 43 | }), 44 | // Compress extracted CSS. We are using this plugin so that possible 45 | // duplicated CSS from different components can be deduped. 46 | new OptimizeCSSPlugin(), 47 | // generate dist index.html with correct asset hash for caching. 48 | // you can customize output by editing /index.html 49 | // see https://github.com/ampedandwired/html-webpack-plugin 50 | new HtmlWebpackPlugin({ 51 | filename: process.env.NODE_ENV === 'testing' 52 | ? 'index.html' 53 | : config.docs.index, 54 | template: 'documentation/index.pug', 55 | inject: true, 56 | minify: { 57 | removeComments: true, 58 | collapseWhitespace: true, 59 | removeAttributeQuotes: true 60 | // more options: 61 | // https://github.com/kangax/html-minifier#options-quick-reference 62 | }, 63 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 64 | chunksSortMode: 'dependency' 65 | }), 66 | // split vendor js into its own file 67 | new webpack.optimize.CommonsChunkPlugin({ 68 | name: 'vendor', 69 | minChunks: function (module, count) { 70 | // any required modules inside node_modules are extracted to vendor 71 | return ( 72 | module.resource && 73 | /\.js$/.test(module.resource) && 74 | module.resource.indexOf( 75 | path.join(__dirname, '../node_modules') 76 | ) === 0 77 | ) 78 | } 79 | }), 80 | // extract webpack runtime and module manifest to its own file in order to 81 | // prevent vendor hash from being updated whenever app bundle is updated 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'manifest', 84 | chunks: ['vendor'] 85 | }) 86 | ] 87 | }) 88 | 89 | if (config.docs.productionGzip) { 90 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 91 | 92 | webpackConfig.plugins.push( 93 | new CompressionWebpackPlugin({ 94 | asset: '[path].gz[query]', 95 | algorithm: 'gzip', 96 | test: new RegExp( 97 | '\\.(' + 98 | config.docs.productionGzipExtensions.join('|') + 99 | ')$' 100 | ), 101 | threshold: 10240, 102 | minRatio: 0.8 103 | }), 104 | new CopyWebpackPlugin([ 105 | { 106 | from: path.join(__dirname, '../static'), 107 | to: path.join(__dirname, '../docs/static') 108 | } 109 | ]) 110 | ) 111 | } 112 | 113 | if (config.docs.bundleAnalyzerReport) { 114 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 115 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 116 | } 117 | 118 | module.exports = webpackConfig 119 | -------------------------------------------------------------------------------- /build/webpack.min.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const CopyWebpackPlugin = require('copy-webpack-plugin') 4 | const base = require('./webpack.base.conf') 5 | 6 | let config = Object.assign({}, base) 7 | 8 | config.devtool = '#source-map' 9 | config.plugins = (config.plugins || []).concat([ 10 | new webpack.DefinePlugin({ 11 | 'process.env': { 12 | NODE_ENV: '"production"' 13 | } 14 | }), 15 | new webpack.optimize.UglifyJsPlugin({ 16 | compress: { warnings: false } 17 | }), 18 | new CopyWebpackPlugin([ 19 | { from: path.resolve(__dirname, '../src', 'Avatar.vue') } 20 | ]) 21 | ]) 22 | 23 | module.exports = config 24 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | // This is the webpack config used for unit tests. 2 | 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseConfig = require('./webpack.base.conf') 7 | 8 | var webpackConfig = merge(baseConfig, { 9 | // use inline sourcemap for karma-sourcemap-loader 10 | module: { 11 | rules: utils.styleLoaders() 12 | }, 13 | devtool: '#inline-source-map', 14 | plugins: [ 15 | new webpack.DefinePlugin({ 16 | 'process.env': require('../config/test.env') 17 | }) 18 | ] 19 | }) 20 | 21 | // no need for app entry during tests 22 | delete webpackConfig.entry 23 | 24 | module.exports = webpackConfig 25 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | dev: { 6 | env: require('./dev.env'), 7 | port: 8080, 8 | autoOpenBrowser: true, 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | proxyTable: {}, 12 | // CSS Sourcemaps off by default because relative paths are "buggy" 13 | // with this option, according to the CSS-Loader README 14 | // (https://github.com/webpack/css-loader#sourcemaps) 15 | // In our experience, they generally work as expected, 16 | // just be aware of this issue when enabling this option. 17 | cssSourceMap: false 18 | }, 19 | bundle: { 20 | env: require('./prod.env'), 21 | assetsRoot: path.resolve(__dirname, '../dist'), 22 | assetsPublicPath: '/', 23 | assetsSubDirectory: '/', 24 | productionSourceMap: true, 25 | productionGzip: false, 26 | productionGzipExtensions: ['js', 'css'], 27 | bundleAnalyzerReport: process.env.npm_config_report 28 | }, 29 | docs: { 30 | env: require('./prod.env'), 31 | index: path.resolve(__dirname, '../docs/index.html'), 32 | assetsRoot: path.resolve(__dirname, '../docs'), 33 | assetsPublicPath: '', 34 | assetsSubDirectory: 'static', 35 | productionSourceMap: true, 36 | productionGzip: false, 37 | productionGzipExtensions: ['js', 'css'], 38 | bundleAnalyzerReport: process.env.npm_config_report 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Vue Avatar | Avatar component for Vue.js
Fork me on GitHub

vue-avatar

An avatar component for vue.js

Description

This component display an avatar image and if none is provided fallback to the user initials. This component is highly inspired fromreact-user-avatar

Rules used to compute user initials:

  • divide the username on space and hyphen
  • use the first letter of each parts
  • never use more than three letters as initials
  • if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.

Installation

npm install vue-avatar

Versions

Vue.jsvue-avatar
^1.0.18^1.3.0
^2.0.0^2..0

Usage

vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Avatar will be registered as a global variable.

ES6

import Avatar from 'vue-avatar'
31 | 
32 | export default {
33 | 
34 |   components: {
35 |     Avatar
36 |   },
37 | 
38 | }
39 |

After that, you can use it in your templates:

<avatar username="Jane Doe"></avatar>
40 |

which will render to:

CommonJS

var Vue = require('vue')
41 | var Avatar = require('vue-avatar')
42 | 
43 | var YourComponent = Vue.extend({
44 |   components: {
45 |     'avatar': Avatar
46 |   }
47 | })
48 |

Browser

<script src="path/to/vue/vue.min.js"></script>
49 | <script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>
50 | 
51 | new Vue({
52 |   components: {
53 |     'avatar': Avatar
54 |   }
55 | })
56 |

Props

NameRequiredDefaultTypeDescription
usernameY-StringThe user name that will be used to compute user initial.
initialsN-StringForce the displayed initials by overriding the computed ones.
initialsNfalseBooleanUses inline-flex instead of flex.
srcN-StringPath to the avatar image to display.
:customStyleN-ObjectA custom style object to override the base styles.
backgroundColorN-StringThe avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length.
colorN-StringThe font color used to render the user initials. If none is provided, the background color is used to compute the font color.
:lightenN80NumberA factor by which the background color must be lightened to produce the font color. Number between [-100,100].
:sizeN50NumberThe avatar size in pixel.
:roundedNtrueBooleanTrue for a rounded avatar.

Event

NameArgumentsDescription
@avatar-initialsusername (the value of the username props), initials (the value of the computed initials or the initials props if any)This event is trigger when the component is ready with component username and initial.

Examples

Code
<avatar username="Hubert-Félix Thiéfaine"></avatar>
<avatar username="Hubert-Félix Thiéfaine"
57 |   background-color="#FFC107"
58 |   :size="100"
59 |   :rounded="false"
60 |   :lighten="20">
61 | </avatar>
<avatar username="Hubert-Félix Thiéfaine"
62 |   background-color="#FFC107"
63 |   :size="100"
64 |   :rounded="false"
65 |   color="#fff">
66 | </avatar>
<avatar username="Darth Vader"
67 |   background-color="#000"
68 |   :size="100"
69 |   :rounded="false">
70 | </avatar>
<avatar
71 |   src="./static/darth-vader.png"
72 |   :size="100">
73 | </avatar>
<avatar username="Darth Vader"
74 |   initials="AS"
75 |   :size="100">
76 | </avatar>
77 |

Default color

18 default background colors are available and can be seen below. The background color chosen depends on the username length. This way a username will always have the same background color.


-------------------------------------------------------------------------------- /docs/static/darth-vader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eliep/vue-avatar/dee61c3712bc199cbb54afab982c9cc863f16b15/docs/static/darth-vader.png -------------------------------------------------------------------------------- /docs/static/js/app.302bc90c89bc8f7ceb56.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{10:function(t,e,i){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}var n=i(11),s=r(n),a=i(15),o=r(a);new s.default({el:".container",components:{Avatar:o.default,rules:{props:["items"],template:'
For example:
'}},data:{items:[],markupLangs:["pug","html"],markupLanguage:"pug"},methods:{initials:function(t,e){this.items.push({username:t,initials:e})}}})},15:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=i(17),n=i.n(r),s=i(46),a=i(16),o=a(n.a,s.a,!1,null,null,null);e.default=o.exports},17:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=i(18),n=function(t){return t&&t.__esModule?t:{default:t}}(r),s=function(t){for(var e=t.split(/[ -]/),i="",r=0;r3&&-1!==i.search(/[A-Z]/)&&(i=i.replace(/[a-z]+/g,"")),i=i.substr(0,3).toUpperCase()};e.default={name:"avatar",props:{username:{type:String},initials:{type:String},backgroundColor:{type:String},color:{type:String},customStyle:{type:Object},inline:{type:Boolean},size:{type:Number,default:50},src:{type:String},rounded:{type:Boolean,default:!0},lighten:{type:Number,default:80},parser:{type:Function,default:s,validator:function(t){return"string"==typeof t("John",s)}}},data:function(){return{backgroundColors:["#F44336","#FF4081","#9C27B0","#673AB7","#3F51B5","#2196F3","#03A9F4","#00BCD4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFC107","#FF9800","#FF5722","#795548","#9E9E9E","#607D8B"],imgError:!1}},mounted:function(){this.isImage||this.$emit("avatar-initials",this.username,this.userInitial)},computed:{background:function(){if(!this.isImage)return this.backgroundColor||this.randomBackgroundColor(this.username.length,this.backgroundColors)},fontColor:function(){if(!this.isImage)return this.color||this.lightenColor(this.background,this.lighten)},isImage:function(){return!this.imgError&&Boolean(this.src)},style:function(){var t={display:this.inline?"inline-flex":"flex",width:this.size+"px",height:this.size+"px",borderRadius:this.rounded?"50%":0,lineHeight:this.size+Math.floor(this.size/20)+"px",fontWeight:"bold",alignItems:"center",justifyContent:"center",textAlign:"center",userSelect:"none"},e={background:"transparent url('"+this.src+"') no-repeat scroll 0% 0% / "+this.size+"px "+this.size+"px content-box border-box"},i={backgroundColor:this.background,font:Math.floor(this.size/2.5)+"px/"+this.size+"px Helvetica, Arial, sans-serif",color:this.fontColor},r=this.isImage?e:i;return(0,n.default)(t,r),t},userInitial:function(){if(!this.isImage){return this.initials||this.parser(this.username,s)}return""}},methods:{initial:s,onImgError:function(t){this.imgError=!0},randomBackgroundColor:function(t,e){return e[t%e.length]},lightenColor:function(t,e){var i=!1;"#"===t[0]&&(t=t.slice(1),i=!0);var r=parseInt(t,16),n=(r>>16)+e;n>255?n=255:n<0&&(n=0);var s=(r>>8&255)+e;s>255?s=255:s<0&&(s=0);var a=(255&r)+e;return a>255?a=255:a<0&&(a=0),(i?"#":"")+(a|s<<8|n<<16).toString(16)}}}},46:function(t,e,i){"use strict";var r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vue-avatar--wrapper",style:[t.style,t.customStyle],attrs:{"aria-hidden":"true"}},[this.isImage?i("img",{staticStyle:{display:"none"},attrs:{src:this.src},on:{error:t.onImgError}}):t._e(),t._v(" "),i("span",{directives:[{name:"show",rawName:"v-show",value:!this.isImage,expression:"!this.isImage"}]},[t._v(t._s(t.userInitial))])])},n=[],s={render:r,staticRenderFns:n};e.a=s}},[10]); 2 | //# sourceMappingURL=app.302bc90c89bc8f7ceb56.js.map -------------------------------------------------------------------------------- /docs/static/js/app.302bc90c89bc8f7ceb56.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/app.302bc90c89bc8f7ceb56.js","webpack:///./documentation/main.js","webpack:///./src/Avatar.vue","webpack:///src/Avatar.vue","webpack:///./src/Avatar.vue?4b1f"],"names":["webpackJsonp","10","module","exports","__webpack_require__","_interopRequireDefault","obj","__esModule","default","_vue","_vue2","_vueAvatar","_vueAvatar2","el","components","Avatar","rules","props","template","data","items","markupLangs","markupLanguage","methods","initials","username","this","push","15","__webpack_exports__","Object","defineProperty","value","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Avatar_vue__","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Avatar_vue___default","n","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ccef3ee4_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Avatar_vue__","normalizeComponent","Component","a","17","_assign","_assign2","getInitials","parts","split","i","length","charAt","search","replace","substr","toUpperCase","name","type","String","backgroundColor","color","customStyle","inline","Boolean","size","Number","src","rounded","lighten","parser","Function","validator","backgroundColors","imgError","mounted","isImage","$emit","userInitial","computed","background","randomBackgroundColor","fontColor","lightenColor","style","display","width","height","borderRadius","lineHeight","Math","floor","fontWeight","alignItems","justifyContent","textAlign","userSelect","imgBackgroundAndFontStyle","initialBackgroundAndFontStyle","font","backgroundAndFontStyle","initial","onImgError","evt","seed","colors","hex","amt","usePound","slice","num","parseInt","r","b","g","toString","46","render","_vm","_h","$createElement","_c","_self","staticClass","attrs","aria-hidden","staticStyle","on","error","_e","_v","directives","rawName","expression","_s","staticRenderFns","esExports"],"mappings":"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","file":"static/js/app.302bc90c89bc8f7ceb56.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 10:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nvar _vue = __webpack_require__(11);\n\nvar _vue2 = _interopRequireDefault(_vue);\n\nvar _vueAvatar = __webpack_require__(15);\n\nvar _vueAvatar2 = _interopRequireDefault(_vueAvatar);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nnew _vue2.default({\n el: '.container',\n components: {\n Avatar: _vueAvatar2.default,\n rules: {\n props: ['items'],\n template: '
For example:' + '
'\n }\n },\n data: {\n items: [],\n markupLangs: ['pug', 'html'],\n markupLanguage: 'pug'\n },\n\n methods: {\n initials: function initials(username, _initials) {\n this.items.push({ username: username, initials: _initials });\n }\n }\n});\n\n/***/ }),\n\n/***/ 15:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Avatar_vue__ = __webpack_require__(17);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Avatar_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Avatar_vue__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ccef3ee4_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Avatar_vue__ = __webpack_require__(46);\nvar normalizeComponent = __webpack_require__(16)\n/* script */\n\n/* template */\n\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Avatar_vue___default.a,\n __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ccef3ee4_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Avatar_vue__[\"a\" /* default */],\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Component.exports);\n\n\n/***/ }),\n\n/***/ 17:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _assign = __webpack_require__(18);\n\nvar _assign2 = _interopRequireDefault(_assign);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar getInitials = function getInitials(username) {\n var parts = username.split(/[ -]/);\n var initials = '';\n\n for (var i = 0; i < parts.length; i++) {\n initials += parts[i].charAt(0);\n }\n\n if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {\n initials = initials.replace(/[a-z]+/g, '');\n }\n\n initials = initials.substr(0, 3).toUpperCase();\n\n return initials;\n};\n\nexports.default = {\n name: 'avatar',\n props: {\n username: {\n type: String\n },\n initials: {\n type: String\n },\n backgroundColor: {\n type: String\n },\n color: {\n type: String\n },\n customStyle: {\n type: Object\n },\n inline: {\n type: Boolean\n },\n size: {\n type: Number,\n default: 50\n },\n src: {\n type: String\n },\n rounded: {\n type: Boolean,\n default: true\n },\n lighten: {\n type: Number,\n default: 80\n },\n parser: {\n type: Function,\n default: getInitials,\n validator: function validator(parser) {\n return typeof parser('John', getInitials) === 'string';\n }\n }\n },\n\n data: function data() {\n return {\n backgroundColors: ['#F44336', '#FF4081', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],\n imgError: false\n };\n },\n mounted: function mounted() {\n if (!this.isImage) {\n this.$emit('avatar-initials', this.username, this.userInitial);\n }\n },\n\n\n computed: {\n background: function background() {\n if (!this.isImage) {\n return this.backgroundColor || this.randomBackgroundColor(this.username.length, this.backgroundColors);\n }\n },\n fontColor: function fontColor() {\n if (!this.isImage) {\n return this.color || this.lightenColor(this.background, this.lighten);\n }\n },\n isImage: function isImage() {\n return !this.imgError && Boolean(this.src);\n },\n style: function style() {\n var style = {\n display: this.inline ? 'inline-flex' : 'flex',\n width: this.size + 'px',\n height: this.size + 'px',\n borderRadius: this.rounded ? '50%' : 0,\n lineHeight: this.size + Math.floor(this.size / 20) + 'px',\n fontWeight: 'bold',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n userSelect: 'none'\n };\n\n var imgBackgroundAndFontStyle = {\n background: 'transparent url(\\'' + this.src + '\\') no-repeat scroll 0% 0% / ' + this.size + 'px ' + this.size + 'px content-box border-box'\n };\n\n var initialBackgroundAndFontStyle = {\n backgroundColor: this.background,\n font: Math.floor(this.size / 2.5) + 'px/' + this.size + 'px Helvetica, Arial, sans-serif',\n color: this.fontColor\n };\n\n var backgroundAndFontStyle = this.isImage ? imgBackgroundAndFontStyle : initialBackgroundAndFontStyle;\n\n (0, _assign2.default)(style, backgroundAndFontStyle);\n\n return style;\n },\n userInitial: function userInitial() {\n if (!this.isImage) {\n var initials = this.initials || this.parser(this.username, getInitials);\n return initials;\n }\n return '';\n }\n },\n\n methods: {\n initial: getInitials,\n\n onImgError: function onImgError(evt) {\n this.imgError = true;\n },\n randomBackgroundColor: function randomBackgroundColor(seed, colors) {\n return colors[seed % colors.length];\n },\n lightenColor: function lightenColor(hex, amt) {\n var usePound = false;\n\n if (hex[0] === '#') {\n hex = hex.slice(1);\n usePound = true;\n }\n\n var num = parseInt(hex, 16);\n var r = (num >> 16) + amt;\n\n if (r > 255) r = 255;else if (r < 0) r = 0;\n\n var b = (num >> 8 & 0x00FF) + amt;\n\n if (b > 255) b = 255;else if (b < 0) b = 0;\n\n var g = (num & 0x0000FF) + amt;\n\n if (g > 255) g = 255;else if (g < 0) g = 0;\n\n return (usePound ? '#' : '') + (g | b << 8 | r << 16).toString(16);\n }\n }\n};\n\n/***/ }),\n\n/***/ 46:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nvar render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-avatar--wrapper\",style:([_vm.style, _vm.customStyle]),attrs:{\"aria-hidden\":\"true\"}},[(this.isImage)?_c('img',{staticStyle:{\"display\":\"none\"},attrs:{\"src\":this.src},on:{\"error\":_vm.onImgError}}):_vm._e(),_vm._v(\" \"),_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(!this.isImage),expression:\"!this.isImage\"}]},[_vm._v(_vm._s(_vm.userInitial))])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\n\n/***/ })\n\n},[10]);\n\n\n// WEBPACK FOOTER //\n// static/js/app.302bc90c89bc8f7ceb56.js","import Vue from 'vue'\nimport Avatar from 'vue-avatar'\n\n/* eslint-disable no-new */\nnew Vue({\n el: '.container',\n components: {\n Avatar,\n rules: {\n props: ['items'],\n template: '
For example:' +\n '
'\n }\n },\n data: {\n items: [],\n markupLangs: ['pug', 'html'],\n markupLanguage: 'pug'\n },\n\n methods: {\n initials: function (username, initials) {\n this.items.push({username: username, initials: initials})\n }\n }\n})\n\n\n\n// WEBPACK FOOTER //\n// ./documentation/main.js","var normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./Avatar.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-ccef3ee4\\\",\\\"hasScoped\\\":false,\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./Avatar.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/Avatar.vue\n// module id = 15\n// module chunks = 1","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/Avatar.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-avatar--wrapper\",style:([_vm.style, _vm.customStyle]),attrs:{\"aria-hidden\":\"true\"}},[(this.isImage)?_c('img',{staticStyle:{\"display\":\"none\"},attrs:{\"src\":this.src},on:{\"error\":_vm.onImgError}}):_vm._e(),_vm._v(\" \"),_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(!this.isImage),expression:\"!this.isImage\"}]},[_vm._v(_vm._s(_vm.userInitial))])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-ccef3ee4\",\"hasScoped\":false,\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/Avatar.vue\n// module id = 46\n// module chunks = 1"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/manifest.e71b1534b4860a25b3be.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s0?r:n)(e)}},,function(e,t,n){(function(t,n){/*! 2 | * Vue.js v2.5.3 3 | * (c) 2014-2017 Evan You 4 | * Released under the MIT License. 5 | */ 6 | !function(t,n){e.exports=n()}(0,function(){"use strict";function e(e){return void 0===e||null===e}function r(e){return void 0!==e&&null!==e}function o(e){return!0===e}function i(e){return!1===e}function a(e){return"string"==typeof e||"number"==typeof e||"boolean"==typeof e}function s(e){return null!==e&&"object"==typeof e}function c(e){return pi.call(e).slice(8,-1)}function u(e){return"[object Object]"===pi.call(e)}function l(e){return"[object RegExp]"===pi.call(e)}function f(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function d(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function p(e){var t=parseFloat(e);return isNaN(t)?e:t}function v(e,t){for(var n=Object.create(null),r=e.split(","),o=0;o-1)return e.splice(n,1)}}function m(e,t){return mi.call(e,t)}function y(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}function g(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function _(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function b(e,t){for(var n in t)e[n]=t[n];return e}function w(e){for(var t={},n=0;n0&&(s=_e(s,(n||"")+"_"+i),ge(s[0])&&ge(u)&&(l[c]=I(u.text+s[0].text),s.shift()),l.push.apply(l,s)):a(s)?ge(u)?l[c]=I(u.text+s):""!==s&&l.push(I(s)):ge(s)&&ge(u)?l[c]=I(u.text+s.text):(o(t._isVList)&&r(s.tag)&&e(s.key)&&r(n)&&(s.key="__vlist"+n+"_"+i+"__"),l.push(s)));return l}function be(e,t){return(e.__esModule||Ji&&"Module"===e[Symbol.toStringTag])&&(e=e.default),s(e)?t.extend(e):e}function we(e,t,n,r,o){var i=aa();return i.asyncFactory=e,i.asyncMeta={data:t,context:n,children:r,tag:o},i}function xe(t,n,i){if(o(t.error)&&r(t.errorComp))return t.errorComp;if(r(t.resolved))return t.resolved;if(o(t.loading)&&r(t.loadingComp))return t.loadingComp;if(!r(t.contexts)){var a=t.contexts=[i],c=!0,u=function(){for(var e=0,t=a.length;eDa)){Ki("You may have an infinite update loop "+(e.user?'in watcher with expression "'+e.expression+'"':"in a component render function."),e.vm);break}var n=Ra.slice(),r=Fa.slice();Re(),Be(n),He(r),qi&&Oi.devtools&&qi.emit("flush")}function He(e){for(var t=e.length;t--;){var n=e[t],r=n.vm;r._watcher===n&&r._isMounted&&Fe(r,"updated")}}function Ve(e){e._inactive=!1,Ra.push(e)}function Be(e){for(var t=0;tza&&Fa[n].id>e.id;)n--;Fa.splice(n+1,0,e)}else Fa.push(e);Va||(Va=!0,le(Ue))}}function qe(e){Ka.clear(),Je(e,Ka)}function Je(e,t){var n,r,o=Array.isArray(e);if((o||s(e))&&Object.isExtensible(e)){if(e.__ob__){var i=e.__ob__.dep.id;if(t.has(i))return;t.add(i)}if(o)for(n=e.length;n--;)Je(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)Je(e[r[n]],t)}}function Ke(e,t,n){Wa.get=function(){return this[t][n]},Wa.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Wa)}function We(e){e._watchers=[];var t=e.$options;t.props&&Ge(e,t.props),t.methods&&tt(e,t.methods),t.data?Ye(e):D(e._data={},!0),t.computed&&Xe(e,t.computed),t.watch&&t.watch!==Ri&&nt(e,t.watch)}function Ge(e,t){var n=e.$options.propsData||{},r=e._props={},o=e.$options._propKeys=[],i=!e.$parent;la.shouldConvert=i;for(var a in t)!function(i){o.push(i);var a=Q(i,t,n,e),s=wi(i);(hi(s)||Oi.isReservedAttr(s))&&Ki('"'+s+'" is a reserved attribute and cannot be used as component prop.',e),F(r,i,a,function(){e.$parent&&!Pa&&Ki("Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: \""+i+'"',e)}),i in e||Ke(e,"_props",i)}(a);la.shouldConvert=!0}function Ye(e){var t=e.$options.data;t=e._data="function"==typeof t?Ze(t,e):t||{},u(t)||(t={},Ki("data functions should return an object:\nhttps://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function",e));for(var n=Object.keys(t),r=e.$options.props,o=e.$options.methods,i=n.length;i--;){var a=n[i];o&&m(o,a)&&Ki('Method "'+a+'" has already been defined as a data property.',e),r&&m(r,a)?Ki('The data property "'+a+'" is already declared as a prop. Use prop default value instead.',e):A(a)||Ke(e,"_data",a)}D(t,!0)}function Ze(e,t){try{return e.call(t,t)}catch(e){return ie(e,t,"data()"),{}}}function Xe(e,t){var n=e._computedWatchers=Object.create(null),r=zi();for(var o in t){var i=t[o],a="function"==typeof i?i:i.get;null==a&&Ki('Getter is missing for computed property "'+o+'".',e),r||(n[o]=new Ja(e,a||x,x,Ga)),o in e?o in e.$data?Ki('The computed property "'+o+'" is already defined in data.',e):e.$options.props&&o in e.$options.props&&Ki('The computed property "'+o+'" is already defined as a prop.',e):Qe(e,o,i)}}function Qe(e,t,n){var r=!zi();"function"==typeof n?(Wa.get=r?et(t):n,Wa.set=x):(Wa.get=n.get?r&&!1!==n.cache?et(t):n.get:x,Wa.set=n.set?n.set:x),Wa.set===x&&(Wa.set=function(){Ki('Computed property "'+t+'" was assigned to but it has no setter.',this)}),Object.defineProperty(e,t,Wa)}function et(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),na.target&&t.depend(),t.value}}function tt(e,t){var n=e.$options.props;for(var r in t)null==t[r]&&Ki('Method "'+r+'" has an undefined value in the component definition. Did you reference the function correctly?',e),n&&m(n,r)&&Ki('Method "'+r+'" has already been defined as a prop.',e),r in e&&A(r)&&Ki('Method "'+r+'" conflicts with an existing Vue instance method. Avoid defining component methods that start with _ or $.'),e[r]=null==t[r]?x:g(t[r],e)}function nt(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var o=0;o=0||n.indexOf(e[o])<0)&&r.push(e[o]);return r}return e}function Nt(e){this instanceof Nt||Ki("Vue is a constructor and should be called with the `new` keyword"),this._init(e)}function Lt(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=_(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}function Pt(e){e.mixin=function(e){return this.options=Z(this.options,e),this}}function Dt(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,o=e._Ctor||(e._Ctor={});if(o[r])return o[r];var i=e.name||n.options.name;/^[a-zA-Z][\w-]*$/.test(i)||Ki('Invalid component name: "'+i+'". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.');var a=function(e){this._init(e)};return a.prototype=Object.create(n.prototype),a.prototype.constructor=a,a.cid=t++,a.options=Z(n.options,e),a.super=n,a.options.props&&Ft(a),a.options.computed&&Rt(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,ki.forEach(function(e){a[e]=n[e]}),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=b({},a.options),o[r]=a,a}}function Ft(e){var t=e.options.props;for(var n in t)Ke(e.prototype,"_props",n)}function Rt(e){var t=e.options.computed;for(var n in t)Qe(e.prototype,n,t[n])}function Ut(e){ki.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&Oi.isReservedTag(e)&&Ki("Do not use built-in or reserved HTML elements as component id: "+e),"component"===t&&u(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}function Ht(e){return e&&(e.Ctor.options.name||e.tag)}function Vt(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!l(e)&&e.test(t)}function Bt(e,t){var n=e.cache,r=e.keys,o=e._vnode;for(var i in n){var a=n[i];if(a){var s=Ht(a.componentOptions);s&&!t(s)&&zt(n,i,r,o)}}}function zt(e,t,n,r){var o=e[t];o&&o!==r&&o.componentInstance.$destroy(),e[t]=null,h(n,t)}function qt(e){for(var t=e.data,n=e,o=e;r(o.componentInstance);)o=o.componentInstance._vnode,o.data&&(t=Jt(o.data,t));for(;r(n=n.parent);)n.data&&(t=Jt(t,n.data));return Kt(t.staticClass,t.class)}function Jt(e,t){return{staticClass:Wt(e.staticClass,t.staticClass),class:r(e.class)?[e.class,t.class]:t.class}}function Kt(e,t){return r(e)||r(t)?Wt(e,Gt(t)):""}function Wt(e,t){return e?t?e+" "+t:e:t||""}function Gt(e){return Array.isArray(e)?Yt(e):s(e)?Zt(e):"string"==typeof e?e:""}function Yt(e){for(var t,n="",o=0,i=e.length;o-1?Os[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:Os[e]=/HTMLUnknownElement/.test(t.toString())}function en(e){if("string"==typeof e){var t=document.querySelector(e);return t||(Ki("Cannot find element: "+e),document.createElement("div"))}return e}function tn(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function nn(e,t){return document.createElementNS(xs[e],t)}function rn(e){return document.createTextNode(e)}function on(e){return document.createComment(e)}function an(e,t,n){e.insertBefore(t,n)}function sn(e,t){e.removeChild(t)}function cn(e,t){e.appendChild(t)}function un(e){return e.parentNode}function ln(e){return e.nextSibling}function fn(e){return e.tagName}function dn(e,t){e.textContent=t}function pn(e,t,n){e.setAttribute(t,n)}function vn(e,t){var n=e.data.ref;if(n){var r=e.context,o=e.componentInstance||e.elm,i=r.$refs;t?Array.isArray(i[n])?h(i[n],o):i[n]===o&&(i[n]=void 0):e.data.refInFor?Array.isArray(i[n])?i[n].indexOf(o)<0&&i[n].push(o):i[n]=[o]:i[n]=o}}function hn(t,n){return t.key===n.key&&(t.tag===n.tag&&t.isComment===n.isComment&&r(t.data)===r(n.data)&&mn(t,n)||o(t.isAsyncPlaceholder)&&t.asyncFactory===n.asyncFactory&&e(n.asyncFactory.error))}function mn(e,t){if("input"!==e.tag)return!0;var n,o=r(n=e.data)&&r(n=n.attrs)&&n.type,i=r(n=t.data)&&r(n=n.attrs)&&n.type;return o===i||Ts(o)&&Ts(i)}function yn(e,t,n){var o,i,a={};for(o=t;o<=n;++o)i=e[o].key,r(i)&&(a[i]=o);return a}function gn(e,t){(e.data.directives||t.data.directives)&&_n(e,t)}function _n(e,t){var n,r,o,i=e===Es,a=t===Es,s=bn(e.data.directives,e.context),c=bn(t.data.directives,t.context),u=[],l=[];for(n in c)r=s[n],o=c[n],r?(o.oldValue=r.value,xn(o,"update",t,e),o.def&&o.def.componentUpdated&&l.push(o)):(xn(o,"bind",t,e),o.def&&o.def.inserted&&u.push(o));if(u.length){var f=function(){for(var n=0;n=0&&" "===(m=e.charAt(h));h--);m&&Fs.test(m)||(l=!0)}}else void 0===i?(v=o+1,i=e.slice(0,o).trim()):t();if(void 0===i?i=e.slice(0,o).trim():0!==v&&t(),a)for(o=0;o-1?{exp:e.slice(0,ss),key:'"'+e.slice(ss+1)+'"'}:{exp:e,key:null};for(is=e,ss=cs=us=0;!Un();)as=Rn(),Hn(as)?Bn(as):91===as&&Vn(as);return{exp:e.slice(0,cs),key:e.slice(cs+1,us)}}function Rn(){return is.charCodeAt(++ss)}function Un(){return ss>=os}function Hn(e){return 34===e||39===e}function Vn(e){var t=1;for(cs=ss;!Un();)if(e=Rn(),Hn(e))Bn(e);else if(91===e&&t++,93===e&&t--,0===t){us=ss;break}}function Bn(e){for(var t=e;!Un()&&(e=Rn())!==t;);}function zn(e,t,n){ls=n;var r=t.value,o=t.modifiers,i=e.tag,a=e.attrsMap.type;if("input"===i&&"file"===a&&ls("<"+e.tag+' v-model="'+r+'" type="file">:\nFile inputs are read only. Use a v-on:change listener instead.'),e.component)return Pn(e,r,o),!1;if("select"===i)Kn(e,r,o);else if("input"===i&&"checkbox"===a)qn(e,r,o);else if("input"===i&&"radio"===a)Jn(e,r,o);else if("input"===i||"textarea"===i)Wn(e,r,o);else{if(!Oi.isReservedTag(i))return Pn(e,r,o),!1;ls("<"+e.tag+' v-model="'+r+"\">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.")}return!0}function qn(e,t,n){var r=n&&n.number,o=Nn(e,"value")||"null",i=Nn(e,"true-value")||"true",a=Nn(e,"false-value")||"false";jn(e,"checked","Array.isArray("+t+")?_i("+t+","+o+")>-1"+("true"===i?":("+t+")":":_q("+t+","+i+")")),Mn(e,"change","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+i+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+o+")":o)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+t+"=$$a.concat([$$v]))}else{$$i>-1&&("+t+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+Dn(t,"$$c")+"}",null,!0)}function Jn(e,t,n){var r=n&&n.number,o=Nn(e,"value")||"null";o=r?"_n("+o+")":o,jn(e,"checked","_q("+t+","+o+")"),Mn(e,"change",Dn(t,o),null,!0)}function Kn(e,t,n){var r=n&&n.number,o='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})",i="var $$selectedVal = "+o+";";i=i+" "+Dn(t,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),Mn(e,"change",i,null,!0)}function Wn(e,t,n){var r=e.attrsMap.type,o=n||{},i=o.lazy,a=o.number,s=o.trim,c=!i&&"range"!==r,u=i?"change":"range"===r?Rs:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Dn(t,l);c&&(f="if($event.target.composing)return;"+f),jn(e,"value","("+t+")"),Mn(e,u,f,null,!0),(s||a)&&Mn(e,"blur","$forceUpdate()")}function Gn(e){if(r(e[Rs])){var t=Mi?"change":"input";e[t]=[].concat(e[Rs],e[t]||[]),delete e[Rs]}r(e[Us])&&(e.change=[].concat(e[Us],e.change||[]),delete e[Us])}function Yn(e,t,n){var r=fs;return function o(){null!==e.apply(null,arguments)&&Xn(t,o,n,r)}}function Zn(e,t,n,r,o){t=ue(t),n&&(t=Yn(t,e,r)),fs.addEventListener(e,t,Ui?{capture:r,passive:o}:r)}function Xn(e,t,n,r){(r||fs).removeEventListener(e,t._withTask||t,n)}function Qn(t,n){if(!e(t.data.on)||!e(n.data.on)){var r=n.data.on||{},o=t.data.on||{};fs=n.elm,Gn(r),de(r,o,Zn,Xn,n.context),fs=void 0}}function er(t,n){if(!e(t.data.domProps)||!e(n.data.domProps)){var o,i,a=n.elm,s=t.data.domProps||{},c=n.data.domProps||{};r(c.__ob__)&&(c=n.data.domProps=b({},c));for(o in s)e(c[o])&&(a[o]="");for(o in c){if(i=c[o],"textContent"===o||"innerHTML"===o){if(n.children&&(n.children.length=0),i===s[o])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===o){a._value=i;var u=e(i)?"":String(i);tr(a,u)&&(a.value=u)}else a[o]=i}}}function tr(e,t){return!e.composing&&("OPTION"===e.tagName||nr(e,t)||rr(e,t))}function nr(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}function rr(e,t){var n=e.value,o=e._vModifiers;return r(o)&&o.number?p(n)!==p(t):r(o)&&o.trim?n.trim()!==t.trim():n!==t}function or(e){var t=ir(e.style);return e.staticStyle?b(e.staticStyle,t):t}function ir(e){return Array.isArray(e)?w(e):"string"==typeof e?Bs(e):e}function ar(e,t){var n,r={};if(t)for(var o=e;o.componentInstance;)o=o.componentInstance._vnode,o.data&&(n=or(o.data))&&b(r,n);(n=or(e.data))&&b(r,n);for(var i=e;i=i.parent;)i.data&&(n=or(i.data))&&b(r,n);return r}function sr(t,n){var o=n.data,i=t.data;if(!(e(o.staticStyle)&&e(o.style)&&e(i.staticStyle)&&e(i.style))){var a,s,c=n.elm,u=i.staticStyle,l=i.normalizedStyle||i.style||{},f=u||l,d=ir(n.data.style)||{};n.data.normalizedStyle=r(d.__ob__)?b({},d):d;var p=ar(n,!0);for(s in f)e(p[s])&&Js(c,s,"");for(s in p)(a=p[s])!==f[s]&&Js(c,s,null==a?"":a)}}function cr(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function ur(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");n=n.trim(),n?e.setAttribute("class",n):e.removeAttribute("class")}}function lr(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&b(t,Ys(e.name||"v")),b(t,e),t}return"string"==typeof e?Ys(e):void 0}}function fr(e){oc(function(){oc(e)})}function dr(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),cr(e,t))}function pr(e,t){e._transitionClasses&&h(e._transitionClasses,t),ur(e,t)}function vr(e,t,n){var r=hr(e,t),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Xs?tc:rc,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Xs,l=a,f=i.length):t===Qs?u>0&&(n=Qs,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Xs:Qs:null,f=n?n===Xs?i.length:c.length:0),{type:n,timeout:l,propCount:f,hasTransform:n===Xs&&ic.test(r[ec+"Property"])}}function mr(e,t){for(;e.length explicit "+t+" duration is not a valid number - got "+JSON.stringify(e)+".",n.context):isNaN(e)&&Ki(" explicit "+t+" duration is NaN - the duration expression might be incorrect.",n.context)}function wr(e){return"number"==typeof e&&!isNaN(e)}function xr(t){if(e(t))return!1;var n=t.fns;return r(n)?xr(Array.isArray(n)?n[0]:n):(t._length||t.length)>1}function $r(e,t){!0!==t.data.show&&gr(t)}function Cr(e,t,n){kr(e,t,n),(Mi||Li)&&setTimeout(function(){kr(e,t,n)},0)}function kr(e,t,n){var r=t.value,o=e.multiple;if(o&&!Array.isArray(r))return void Ki('