{"analyzedAt":"2022-06-25T17:20:46.410Z","collected":{"metadata":{"name":"vue3-avatar","scope":"unscoped","version":"1.0.1","description":"A user avatar component for vue3. By default it uses light colors for Text and dark colors for Background.","keywords":["avatar","vue","vue3","vue3-avatar","user-avatar","vuejs"],"date":"2021-12-19T16:22:08.224Z","publisher":{"username":"webformulator","email":"mddalam1@gmail.com"},"maintainers":[{"username":"webformulator","email":"mddalam1@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/webformulator/vue3-avatar.git"},"links":{"npm":"https://www.npmjs.com/package/vue3-avatar","homepage":"https://github.com/webformulator/vue3-avatar#readme","repository":"https://github.com/webformulator/vue3-avatar","bugs":"https://github.com/webformulator/vue3-avatar/issues"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@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-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","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-vue":"^6.0.0","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":1},{"from":"2021-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":4},{"from":"2020-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":4}],"hasSelectiveFiles":true,"readme":"# vue3-avatar\n\nA user avatar component for vue3. By default it uses light colors for Text and dark colors for Background.\n\nThis component is highly inspired from [vue-avatar](https://github.com/eliep/vue-avatar).\n\nThis component computes the Initials from provided name with following rules:\n\n1. Splits the name by spaces and hyphens.\n2. Finds the first letter of each parts.\n3. Maximum length of Avatar letters is 3.\n4. If the name is splitted into more than 2 parts then picks the first letter of part1, part2 and last part.\n\n## Examples\n\n- **Tony** will become **T**\n- **Tony Stark** will become **TS**\n- **Tony Howard-Stark** will become **THS**\n- **Albert Tony Howard Stark** will become **ATS**\n\n## Installation\n\n`npm install vue3-avatar`\n\n## Usage\n\nvue3-avatar is very easy to use.\n\n### ES6\n\n**For Local Registration**\n\n```\nimport Avatar from \"vue3-avatar\";\n\nexport default {\n    ...\n    components : {\n        Avatar,\n        ...\n    },\n    ...\n}\n```\n\n**For Global Registration**\n\nUpdate main.js\n\n```\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n...\nimport Avatar from \"vue3-avatar\";\n\ncreateApp(App).component(\"avatar\", Avatar)\n...\n```\n\nAfter importing the component, you can use it in your templates as:\n\n```\n<avatar name=\"John Doe\"></avatar>\n```\n\n## Props\n\n| Property   | Required | Type    | Default | Decription                                     |\n| ---------- | -------- | ------- | ------- | ---------------------------------------------- |\n| name       | true     | String  | -       | Name to compute Avatar letters                 |\n| color      | false    | String  | white   | Text color for Avatar letters                  |\n| background | false    | String  | navy    | Background color for Avatar                    |\n| size       | false    | Number  | 40      | Pixel size for Avatar (Same Height and Width)  |\n| inverted   | false    | Boolean | false   | To Invert the text color with Background color |\n| inline     | false    | Boolean | false   | To create inline Avatar                        |\n| rounded    | false    | Boolean | true    | Square or Rounded                              |\n\n## Creator\n\nThis component has been created by [Md Dilshad Alam](https://github.com/webformulator)"},"npm":{"downloads":[{"from":"2022-06-24T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":3},{"from":"2022-06-18T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":47},{"from":"2022-05-26T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":138},{"from":"2022-03-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":1337},{"from":"2021-12-27T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":4560},{"from":"2021-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":4637}],"starsCount":0},"github":{"starsCount":1,"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":1,"23619600":0,"70858800":0,"212576400":0},"isDisabled":false},"contributors":[{"username":"webformulator","commitsCount":4}],"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":0},{"from":"2021-06-25T00:00:00.000Z","to":"2022-06-25T00:00:00.000Z","count":4}]},"source":{"files":{"readmeSize":2239,"testsSize":0}}},"evaluation":{"quality":{"carefulness":0.46,"tests":0,"health":1,"branding":0},"popularity":{"communityInterest":3,"downloadsCount":445.6666666666667,"downloadsAcceleration":1.1312785388127846,"dependentsCount":0},"maintenance":{"releasesFrequency":0.4715753424657535,"commitsFrequency":0.046027397260273974,"openIssues":0,"issuesDistribution":0.8870241477272727}},"score":{"final":0.43699508835085954,"detail":{"quality":0.45654918790243276,"popularity":0.04355049282665992,"maintenance":0.8136790271165679}}}