{"analyzedAt":"2022-10-04T02:58:37.484Z","collected":{"metadata":{"name":"vue-boring-avatars","scope":"unscoped","version":"1.3.0","description":"vue-boring-avatars is a Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based avatars from any username and color palette.","keywords":["vue","vue3","Vue 3","avatar","gravatar","profile picture","user avatar","avatar generator","avatar placeholder"],"date":"2022-10-02T04:22:03.913Z","publisher":{"username":"mujahidfa","email":"mujahidfanuar@gmail.com"},"maintainers":[{"username":"mujahidfa","email":"mujahidfanuar@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/mujahidfa/vue-boring-avatars.git"},"links":{"npm":"https://www.npmjs.com/package/vue-boring-avatars","homepage":"https://github.com/mujahidfa/vue-boring-avatars","repository":"https://github.com/mujahidfa/vue-boring-avatars","bugs":"https://github.com/mujahidfa/vue-boring-avatars/issues"},"license":"MIT","devDependencies":{"@rushstack/eslint-patch":"^1.2.0","@types/jsdom":"^20.0.0","@types/node":"^16.11.62","@vitejs/plugin-vue":"^3.1.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.2","@vue/test-utils":"^2.1.0","@vue/tsconfig":"^0.1.3","eslint":"^8.24.0","eslint-plugin-vue":"^9.5.1","github-directory-downloader":"^1.3.6","html-crush":"^5.1.11","jsdom":"^20.0.0","move-cli":"^2.0.0","npm-run-all":"^4.1.5","prettier":"^2.7.1","prop-types":"^15.8.1","react":"16.14.0","react-dom":"16.14.0","rimraf":"^3.0.2","typescript":"~4.7.4","vite":"^3.1.4","vitest":"^0.23.4","vue":"^3.2.40","vue-tsc":"^0.40.13","vue-typegen":"^0.2.0"},"peerDependencies":{"vue":"^3.0.0"},"releases":[{"from":"2022-09-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":3},{"from":"2022-07-06T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":3},{"from":"2022-04-07T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":3},{"from":"2021-10-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":4},{"from":"2020-10-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":8}],"hasTestScript":true,"hasSelectiveFiles":true,"readme":"# vue-boring-avatars\n\n\n[](https://opensource.org/licenses/MIT)\n[](https://madewithvuejs.com/p/vue-boring-avatars/shield-link)\n\n`vue-boring-avatars` is a Vue 3 port of [Boring Avatars](https://github.com/boringdesigners/boring-avatars), a JS library that generates custom, SVG-based avatars from any username and color palette.\n\n## Features\n\n- Supports **Vue 3** (for Vue 2, look at [this](https://github.com/stonega/vue2-boring-avatars) implementation).\n- Built using **TypeScript** and comes with TS types.\n- Similar API with the React version of [Boring Avatars](https://github.com/boringdesigners/boring-avatars).\n\n## Installation\n\nNPM:\n\n```bash\npnpm i vue-boring-avatars\n# or\nyarn add vue-boring-avatars\n# or\nnpm install vue-boring-avatars\n```\n\nCDN:\n\n```html\n\n\n\n\n \n```\n\n## Props\n\nProps:\n\n- `size`: number\n - Default: `40`\n - Determines the size of the Avatar.\n- `square`: boolean\n - Default: `false`\n - Whether the Avatar is shaped as a square or circle (default).\n- `title`: boolean\n - Default: `false`\n - Whether to generate the `` element or not.\n- `name`: string\n - Default: `\"Clara Barton\"`\n - Name that determines the pattern of the Avatar, and appears in the `<title>` element if `title` is `true`.\n- `variant`: string\n - Accepts either of the following: `\"bauhaus\", \"beam\", \"marble\", \"pixel\", \"ring\", \"sunset\"`.\n - Default: `\"marble\"`\n - Determines the variant of the Avatar.\n- `colors`: string[]\n - Accepts a string of colors.\n - Default: `[\"#92A1C6\", \"#146A7C\", \"#F0AB3D\", \"#C271B4\", \"#C20D90\"]`\n - Determines the range of colors in the Avatar.\n\n## Usage\n\nBasic usage (with default props):\n\n```vue\n<template>\n <Avatar />\n</template>\n\n<script>\nimport Avatar from \"vue-boring-avatars\";\n\nexport default {\n components: {\n Avatar,\n },\n};\n</script>\n```\n\n\nBasic usage with `<script setup>` (with default props):\n\n```vue\n<script setup>\nimport Avatar from \"vue-boring-avatars\";\n</script>\n\n<template>\n <Avatar />\n</template>\n```\n\nWith props:\n\n```vue\n<template>\n <Avatar \n :size=\"80\" \n variant=\"bauhaus\"\n name=\"Mujahid Anuar\" \n :colors=\"colors\" \n />\n</template>\n\n<script>\nimport Avatar from \"vue-boring-avatars\";\n\nexport default {\n data() {\n return {\n colors: [\"#92A1C6\", \"#146A7C\", \"#F0AB3D\", \"#C271B4\", \"#C20D90\"]\n }\n },\n components: {\n Avatar,\n },\n};\n</script>\n```\n\nWith Composition API:\n\n```vue\n<template>\n <input type=\"text\" v-model=\"name\" />\n <input type=\"number\" v-model.number=\"size\" />\n\n <Avatar :size=\"size\" variant=\"bauhaus\" :name=\"name\" />\n <Avatar :size=\"size\" variant=\"beam\" :name=\"name\" :square=\"true\" :title=\"true\" />\n <Avatar :size=\"size\" variant=\"marble\" :name=\"name\" />\n <Avatar :size=\"size\" variant=\"pixel\" :name=\"name\" :square=\"true\" :title=\"true\"/>\n <Avatar :size=\"size\" variant=\"ring\" :name=\"name\" />\n <Avatar :size=\"size\" variant=\"sunset\" :name=\"name\" :square=\"true\" :title=\"true\" />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from \"vue\";\nimport Avatar from \"vue-boring-avatars\";\n\nexport default defineComponent({\n name: \"App\",\n setup() {\n const name = ref(\"Clara Barton\");\n const size = ref(80);\n\n return {\n name,\n size,\n };\n },\n components: {\n Avatar,\n },\n});\n</script>\n```\n\n## Development\n\n```sh\npnpm i # install packages\npnpm dev # launch in browser\npnpm test # run tests (download react-boring-avatars, lint, type check, then run tests)\npnpm build # build the dist\n```\n\n## Credits\n\nCredits to [@hihayk](https://twitter.com/hihayk) ([GitHub](https://github.com/hihayk)) and [@josep_martins](https://twitter.com/josep_martins) ([GitHub](https://github.com/josepmartins)) for creating the original [Boring Avatars](https://github.com/boringdesigners/boring-avatars) library at [boringdesigners](https://github.com/boringdesigners)!"},"npm":{"downloads":[{"from":"2022-10-03T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":0},{"from":"2022-09-27T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":484},{"from":"2022-09-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":1989},{"from":"2022-07-06T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":5086},{"from":"2022-04-07T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":8701},{"from":"2021-10-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":11102}],"starsCount":0},"github":{"starsCount":71,"forksCount":3,"subscribersCount":2,"issues":{"count":5,"openCount":0,"distribution":{"3600":3,"10800":1,"32400":0,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":1,"70858800":0,"212576400":0},"isDisabled":false},"contributors":[{"username":"mujahidfa","commitsCount":26}],"commits":[{"from":"2022-09-27T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":0},{"from":"2022-09-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":0},{"from":"2022-07-06T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":0},{"from":"2022-04-07T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":0},{"from":"2021-10-04T00:00:00.000Z","to":"2022-10-04T00:00:00.000Z","count":0}]},"source":{"files":{"readmeSize":4303,"testsSize":13243},"linters":["eslint","prettier"]}},"evaluation":{"quality":{"carefulness":0.9199999999999999,"tests":0.6,"health":1,"branding":0},"popularity":{"communityInterest":77,"downloadsCount":1695.3333333333333,"downloadsAcceleration":13.45150304414003,"dependentsCount":0},"maintenance":{"releasesFrequency":1,"commitsFrequency":0.9,"openIssues":1,"issuesDistribution":0.9}},"score":{"final":0.6284528100081825,"detail":{"quality":0.8196964067285537,"popularity":0.09307615380567447,"maintenance":0.9999063833075152}}}