{"_id":"@craydel-v3/craydel-avatar-with-details","name":"@craydel-v3/craydel-avatar-with-details","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@craydel-v3/craydel-avatar-with-details","version":"1.0.0","description":"A custom Vuetify avatar with details component for Craydel.","author":{"name":"Wasim Al-Haddad"},"license":"MIT","keywords":["vuetify3","avatar","vue","nuxt3"],"dependencies":{"@craydel-v3/craydel-avatar":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"c5ec4c099da1d73dd026e58d162809e1055d6909","_id":"@craydel-v3/craydel-avatar-with-details@1.0.0","_nodeVersion":"18.18.0","_npmVersion":"lerna/7.3.0/node@v18.18.0+x64 (win32)","dist":{"integrity":"sha512-GlEV56wwDOl6Jlv2h+xxkER4dmq6RASEKBYEXZ6gA0LzbA+CQFRFcHl6ASJfsAWtAkwmciTHD8W+P0hIMjagUw==","shasum":"e00df33598a627c868655701b3b81482fb751c40","tarball":"https://registry.npmjs.org/@craydel-v3/craydel-avatar-with-details/-/craydel-avatar-with-details-1.0.0.tgz","fileCount":5,"unpackedSize":7282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDl9f9QUz7dSleFTG/bG6kPSFCYuG5P/wdOiv01EyUJngIhALo1hMEEx/YEsVhlriKA2sWhpBb4dcsUb717lhnI5c9/"}]},"_npmUser":{"name":"sayedwasim","email":"wasimalhaddad@gmail.com"},"directories":{},"maintainers":[{"name":"sayedwasim","email":"wasimalhaddad@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/craydel-avatar-with-details_1.0.0_1696445555397_0.400518934246862"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-04T18:52:35.303Z","1.0.0":"2023-10-04T18:52:35.649Z","modified":"2023-10-04T18:52:35.993Z"},"maintainers":[{"name":"sayedwasim","email":"wasimalhaddad@gmail.com"}],"description":"A custom Vuetify avatar with details component for Craydel.","keywords":["vuetify3","avatar","vue","nuxt3"],"author":{"name":"Wasim Al-Haddad"},"license":"MIT","readme":"# CraydelAvatarWithDetails\n\n## Installation\n\nGet the latest version by NPM:\n\n```bash\n$ npm i @craydel-v3/craydel-avatar-with-details\n```\n\n## Component Import\n\nImport the module chosen directly in your component\n\n```javascript\n<script>\n  import CraydelAvatarWithDetails from \"@craydel-v3/craydel-avatar-with-details/src/CraydelAvatarWithDetails.vue\";\n\n  export default {\n  components: {CraydelAvatarWithDetails}\n}\n</script>\n```\n\n## Props\n\n| Name         | Type             | Default   | Description                                                                                                                                      |\n|--------------|------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------|\n| photo        | string           | undefined | Sets the avatar as an image.                                                                                                                     |\n| display-name | string           | undefined | Generates a random color that is applied to the avatar based on the display-name. This also sets the title of the avatar as part of the details. |\n| acronym      | string           | undefined | Sets the avatar as an acronym.                                                                                                                   |\n| text         | string           | undefined | Sets the text for the avatar as part of the details.                                                                                             |\n| avatar-size  | number \\| string | 40        | Sets the height and width of the avatar.                                                                                               |\n| clickable    | boolean          | false     | If set, the component will be rendered as clickable that has @click handler.                                                                     |\n| dense        | boolean          | false     | Reduces the height of the component.                                                                                                             |\n\n&emsp;\n\n## Events\n\n| Name  | Description                                          |\n|-------|:-----------------------------------------------------|\n| click | Event that is emitted when the component is clicked. |\n\n&emsp;\n\n## Usage\n\nAn example showing an avatar that will display the name, initials and an email address.\n\n```html\n<craydel-avatar-with-details\n        display-name=\"John Doe\"\n        acronym=\"JD\"\n        text=\"john.doe@gmail.com\"\n></craydel-avatar-with-details>\n```","readmeFilename":"README.md"}