{"analyzedAt":"2022-06-25T21:23:54.888Z","collected":{"metadata":{"name":"vue-avatar-sdh","scope":"unscoped","version":"1.0.3","description":"An avatar component for vue.js same as vue-avatar only written on Vue3 and TypeScript. It now supports many different styles. It can also be heavily customized as per design needs.","keywords":["Avatar","Avatar Generator","Avatar Placeholder","Vue3","Vue"],"date":"2022-02-23T08:09:22.218Z","author":{"name":"Soumyadip Hazra","email":"soumyadip.dev.94@gmail.com"},"publisher":{"username":"soumyadip001","email":"soumyadip.dev.94@gmail.com"},"maintainers":[{"username":"soumyadip001","email":"soumyadip.dev.94@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/soumyadip001/vue-avatar-sdh.git"},"links":{"npm":"https://www.npmjs.com/package/vue-avatar-sdh","homepage":"https://github.com/soumyadip001/vue-avatar-sdh#readme","repository":"https://github.com/soumyadip001/vue-avatar-sdh","bugs":"https://github.com/soumyadip001/vue-avatar-sdh/issues"},"license":"MIT","devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/babel-preset-app":"^4.5.15","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5"},"peerDependencies":{"vue":"^3.0.5"},"releases":[{"from":"2022-05-26T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":0},{"from":"2022-03-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":1},{"from":"2021-12-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":6},{"from":"2021-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":6},{"from":"2020-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":6}],"hasSelectiveFiles":true,"readme":"[![vue-avatar-sdh](https://img.shields.io/twitter/url?color=green&label=vue-avatar-sdh&logo=vue-avatar-sdh&logoColor=yellow&style=for-the-badge&url=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-avatar-sdh)](https://www.npmjs.com/package/vue-avatar-sdh)\r\n[![Github](https://img.shields.io/twitter/url?color=green&label=Github&logo=github&logoColor=white&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2Fsoumyadip001)](https://github.com/soumyadip001)\r\n[![Email](https://img.shields.io/twitter/url?color=green&label=Email&logo=gmail&logoColor=red&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2Fsoumyadip001)](mailto:soumyadiphazra@gmail.com)\r\n\r\n# vue-avatar-sdh\r\n\r\n- [vue-avatar-sdh](#vue-avatar-sdh)\r\n\t- [Inspired from vue-avatar](#inspired-from-vue-avatar)\r\n\t- [Installation](#installation)\r\n\t- [Version](#version)\r\n\t- [Usage](#usage)\r\n\t\t- [ES6](#es6)\r\n\t\t- [Basic Usage with username](#basic-usage-with-username)\r\n\t\t- [Basic Usage](#basic-usage)\r\n\t\t- [Name with abbreviations](#name-with-abbreviations)\r\n\t\t- [Background Color `backgroundColor`](#background-color-backgroundcolor)\r\n\t\t- [Foreground Color `color`](#foreground-color-color)\r\n\t\t- [Lighten Color `lighten`](#lighten-color-lighten)\r\n\t\t- [Border Radius `rounded`](#border-radius-rounded)\r\n\t\t- [Sizes `size`](#sizes-size)\r\n\t\t- [Custom Style `customStyle`](#custom-style-customstyle)\r\n\t- [Props](#props)\r\n\t- [Configs](#configs)\r\n\t\t- [Supported Abbreviations](#supported-abbreviations)\r\n\t\t- [Supported background colors](#supported-background-colors)\r\n\r\n## Inspired from [vue-avatar](https://github.com/eliep/vue-avatar)\r\n\r\nAn avatar component for vue.js same as [vue-avatar](https://github.com/eliep/vue-avatar) only written on Vue3 and TypeScript.\r\nIt now supports many different styles. It can also be heavily customized as per design needs.\r\n\r\nThis component display an avatar image and if none is provided fallback to the\r\nuser initials.\r\n\r\nRules used to compute user initials:\r\n\r\n- divide the username on space and hyphen\r\n- use the first letter of each parts\r\n- letters as initials can be controlled from outside\r\n- if the username is divided in more than three parts, can be rendered differently\r\n- can be customized heavily\r\n- custom style can be passed\r\n\r\nYou can find a few examples and the documentation [here](https://github.com/soumyadip001/vue-avatar-sdh)\r\n\r\n## Installation\r\n\r\n`npm install vue-avatar-sdh`\r\n\r\n## Version\r\n\r\n| Vuejs version | vue-avatar-sdh version |\r\n| ------------- | ---------------------- |\r\n| ^3.0.5 | ^1.0.3 |\r\n| ^3.0.5 | ^1.0.1 \t\t |\r\n| ^3.0.5 | ^1.0.0 \t\t |\r\n\r\n## Usage\r\n\r\nvue-avatar-sdh is a UMD module, which can be used as a module in both CommonJS and AMD modular environments.\r\nWhen in non-modular environment, Avatar will be registered as a global variable.

\r\n\r\n### ES6\r\n\r\n```js\r\n\r\nimport Avatar from 'vue-avatar-sdh'\r\n\r\nexport default {\r\n ...\r\n components: {\r\n Avatar\r\n },\r\n ...\r\n}\r\n```\r\n\r\nAfter that, you can use it in your templates:\r\n\r\n```html\r\n\r\n```\r\n\r\n### Basic Usage with username\r\n\r\nBy default it creates 2 letter initials. But you can customize it as per your need. `maxAllowedLength` allows you to pass any number. It also automatically checks for number of words available and it omit middle names if needed.\r\n\r\n```html\r\n
\r\n\t
\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t\r\n\t
\r\n
\r\n```\r\n\r\nAlso the initials are automatically removed from initials. It automatically detects the abbreviations and remove them from initials.\r\n\r\n```html\r\n
\r\n\t\r\n
\r\n```\r\n\r\n### Basic Usage\r\n\r\nHow to pass name to generate initials? It very simple actually. Just pass the `username` attribute to the `` component and it's done. You can also control how many initials will the shown in the avatar.\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n![Basic Usage](https://raw.githubusercontent.com/soumyadip001/vue-avatar-sdh/master/screenshots/screen1.png)\r\n\r\n---\r\n\r\n### Name with abbreviations\r\n\r\nWhat if the username can contain abbreviations? No worries we have got you covered. It'll automatically be parsed out and the name will be taken to generate the Avatar. Also notice the different between the two `Dr` and `Dr.`\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n![Name with abbreviations](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen2.png?raw=true)\r\n\r\n---\r\n\r\n### Background Color `backgroundColor`\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n![Background Color](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen3.png?raw=true)\r\n\r\n---\r\n\r\n### Foreground Color `color`\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n![Foreground Color](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen4.png?raw=true)\r\n\r\n---\r\n\r\n### Lighten Color `lighten`\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n![Lighten Color](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen5.png?raw=true)\r\n\r\n---\r\n\r\n### Border Radius `rounded`\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n![Border Radius](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen6.png?raw=true)\r\n\r\n---\r\n\r\n### Sizes `size`\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n![Sizes](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen7.png?raw=true)\r\n\r\n---\r\n\r\n### Custom Style `customStyle`\r\n\r\n```html\r\n
\r\n\t\r\n
\r\n```\r\n\r\n```css\r\n.customstyle1: {\r\n\tborderRadius: '10px',\r\n\tcolor: '#fff',\r\n\tbackgroundColor: '#ff4081',\r\n\tborder: '3px solid #d6054c',\r\n}\r\n```\r\n\r\n![Custom Style](https://github.com/soumyadip001/vue-avatar-sdh/blob/master/screenshots/screen8.png?raw=true)\r\n\r\n---\r\n\r\n## Props\r\n\r\nLooking for all the supported props and there use cases? We have got you covered here.\r\n\r\n| Prop Name | Type | Description |\r\n| --------- | ---- | ----------- |\r\n| `backgroundColor` | String | Any valid hex string will work. ex: `backgroundColor=\"#F44336\"` |\r\n| `color` | String | Any valid hex string will work. ex: `color=\"#F44336\"` |\r\n| `customStyle` | Object | Any valid object with style definations ex: [`customStyle`](#custom-style-customstyle) |\r\n| `maxAllowedLength` | Number | Number of characters in the avatar. default: 2. ex: [Basic Usage](#basic-usage) |\r\n| `initials` | String | Initials with name which should be ignore while generating the avatar. |\r\n| `inline` | Boolean | Show inline avatar |\r\n| `lighten` | Number | Lighen the color automatically as per background color. default: 80 |\r\n| `rounded` | Boolean | Rounded border(`borderRadius` of `50%`) or square(false). default: `true` |\r\n| `size` | Number | `width` and `height` of the avatar in `pixels`. default: 50 |\r\n| `src` | String | User provided thumbnail if any |\r\n| `username` | Boolean | (`required`) The name of the user |\r\n\r\n-------------------\r\n## Configs\r\n\r\n### Supported Abbreviations\r\n\r\n```javascript\r\n'Dr', 'Esq', 'Hon', 'Er', 'Jr', 'Mr', 'Mrs', 'Ms', 'Messrs',\r\n'Mmes', 'Msgr', 'Prof', 'Rev', 'Rt', 'Sr', 'St',\r\n```\r\n\r\n### Supported background colors\r\n\r\n![#F44336](https://img.shields.io/badge/RED-%23F44336-%23F44336)\r\n![#FF4081](https://img.shields.io/badge/French%20Rose-%23FF4081-%23FF4081)\r\n![#9C27B0](https://img.shields.io/badge/Barney-%239C27B0-%239C27B0)\r\n![#673AB7](https://img.shields.io/badge/Purple%20Heart-%23673AB7-%23673AB7)\r\n\r\n![#3F51B5](https://img.shields.io/badge/Sapphire%20Blue-%233F51B5-%233F51B5)\r\n![#2196F3](https://img.shields.io/badge/Azure-%232196F3-%232196F3)\r\n![#03A9F4](https://img.shields.io/badge/Butterfly%20Blue-%2303A9F4-%2303A9F4)\r\n![#00BCD4](https://img.shields.io/badge/Ball%20Blue-%2300BCD4-%2300BCD4)\r\n![#009688](https://img.shields.io/badge/Teal-%23009688-%23009688)\r\n\r\n![#4CAF50](https://img.shields.io/badge/Dark%20Pastel%20Green-%234CAF50-%234CAF50)\r\n![#8BC34A](https://img.shields.io/badge/Green%20Peas-%238BC34A-%238BC34A)\r\n![#CDDC39](https://img.shields.io/badge/Wattle-%23CDDC39-%23CDDC39)\r\n![#FFC107](https://img.shields.io/badge/Golden-%23FFC107-%23FFC107)\r\n\r\n![#FF9800](https://img.shields.io/badge/Dark%20Orange-%23FF9800-%23FF9800)\r\n![#FF5722](https://img.shields.io/badge/Portland%20Orange-%23FF5722-%23FF5722)\r\n![#795548](https://img.shields.io/badge/Roman%20Coffee-%23795548-%23795548)\r\n![#9E9E9E](https://img.shields.io/badge/Star%20Dust-%239E9E9E-%239E9E9E)\r\n![#607D8B](https://img.shields.io/badge/Light%20Slate%20Grey-%23607D8B-%23607D8B)\r\n\r\ncolor names collected from: [artyclick.com](https://colors.artyclick.com/color-name-finder/)"},"npm":{"downloads":[{"from":"2022-06-24T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":0},{"from":"2022-06-18T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":1},{"from":"2022-05-26T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":17},{"from":"2022-03-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":123},{"from":"2021-12-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":320},{"from":"2021-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":320}],"starsCount":0},"github":{"homepage":"https://www.npmjs.com/package/vue-avatar-sdh","starsCount":0,"forksCount":0,"subscribersCount":1,"issues":{"count":1,"openCount":1,"distribution":{"3600":0,"10800":0,"32400":0,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":1,"70858800":0,"212576400":0},"isDisabled":false},"contributors":[{"username":"soumyadip001","commitsCount":22}],"commits":[{"from":"2022-06-18T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":0},{"from":"2022-05-26T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":0},{"from":"2022-03-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":0},{"from":"2021-12-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":22},{"from":"2021-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":22}]},"source":{"files":{"readmeSize":10254,"testsSize":0,"hasChangelog":true}}},"evaluation":{"quality":{"carefulness":0.8699999999999999,"tests":0,"health":1,"branding":0},"popularity":{"communityInterest":2,"downloadsCount":41,"downloadsAcceleration":0.14775494672754946,"dependentsCount":0},"maintenance":{"releasesFrequency":0.9299657534246576,"commitsFrequency":0.7505821917808219,"openIssues":0,"issuesDistribution":0}},"score":{"final":0.4616421528217931,"detail":{"quality":0.5337388399448031,"popularity":0.02844037113468644,"maintenance":0.8330467741177483}}}