feat: new vitepress docs for BoAvatar and component refactor to simpl…

…ifier props

docs/.vitepress/cache/deps/_metadata.json

@@ -1,25 +1,25 @@
 {
-  "hash": "23b0b69e",
+  "hash": "dc2a2639",
   "configHash": "dfd70555",
-  "lockfileHash": "443dda70",
-  "browserHash": "4bab3222",
+  "lockfileHash": "41d97aef",
+  "browserHash": "297f3828",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "6426006e",
+      "fileHash": "2b8679c5",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "3f776fdf",
+      "fileHash": "77f7fc9a",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "270047c3",
+      "fileHash": "ccea50f0",
       "needsInterop": false
     }
   },

docs/.vitepress/config.ts

@@ -17,7 +17,10 @@ function buildSidebar() {
 }
 
 function getComponents() {
-	return [{ text: 'Button', link: '/components/button/button' }]
+	return [
+		{ text: 'Avatar', link: '/components/avatar/avatar' },
+		{ text: 'Button', link: '/components/button/button' },
+	]
 }
 
 // https://vitepress.dev/reference/site-config
@@ -39,7 +42,8 @@ export default defineConfig({
 		sidebar: buildSidebar(),
 		socialLinks: [{ icon: 'github', link: 'https://github.com/mrksbnc/bamboo' }],
 		footer: {
-			message: 'Released under the MIT License.',
+			message:
+				'Released under the <a href="https://github.com/mrksbnc/bamboo/blob/main/LICENSE">MIT License</a>.',
 			copyright: `Copyright © 2025-present <a href="https://github.com/mrksbnc">Bence Markus</a>`,
 		},
 	},

docs/components/avatar/avatar.md

@@ -0,0 +1,115 @@
+<script setup>
+import { BoAvatar, BoAvatarType, BoAvatarShape } from '@/components/bo_avatar';
+import BoAvatarCustomImage from './examples/BoAvatarCustomImage.vue'
+import {BoSize} from '@/data/bo_size.constant'
+</script>
+
+# bo-avatar
+
+An avatar is a small image that represents a user or entity.
+
+<bo-avatar :data="{ label: 'B', alt: 'Avatar' }" />
+
+## Basic usage
+
+```vue
+<bo-avatar :initials-data="{ initials: 'B' }" />
+```
+
+## Props
+
+| Prop              | Type                | Default value          |
+| ----------------- | ------------------- | ---------------------- |
+| `data (required)` | `BoAvatarData`      | `undefined`            |
+| `type`            | `BoAvatarType`      | `BoAvatarType.default` |
+| `shape`           | `BoAvatarShape`     | `BoAvatarShape.circle` |
+| `size`            | `BoSize`            | `BoAvatarSize.default` |
+| `indicator`       | `BoAvatarIndicator` | `undefined`            |
+| `color-hex`       | `string`            | `undefined`            |
+| `font-color-hex`  | `string`            | `undefined`            |
+| `clickable`       | `boolean`           | `false`                |
+
+## Avatar types
+
+The `type` prop can be used to change the type of the avatar. This will decide wether the avatar uses an image or initials.
+
+The available values for the `type` prop are:
+
+- `image`
+- `initials`
+
+<div class="flex gap-2">
+    <bo-avatar-custom-image />
+    <bo-avatar :type="BoAvatarType.initials" :data="{ label: 'B' }" />
+</div>
+
+:::info Default avatar image
+If the prop `type` is set to image but no `src` is provided, the avatar will use a fallback image.
+:::
+
+<bo-avatar :data="{}" :type="BoAvatarType.image" />
+
+## Avatar shapes
+
+The `shape` prop can be used to change the shape of the avatar.
+
+The available values for the `shape` prop are:
+
+- `circle`
+- `square`
+- `rounded`
+
+<div class="flex gap-2">
+    <bo-avatar :shape="BoAvatarShape.circle" :data="{ label: 'B' }" />
+    <bo-avatar :shape="BoAvatarShape.square" :data="{ label: 'B' }" />
+    <bo-avatar :shape="BoAvatarShape.rounded" :data="{ label: 'B' }" />
+</div>
+
+## Avatar sizes
+
+The `size` prop can be used to change the size of the avatar.
+
+The available values for the `size` prop are:
+
+- `extra-small`
+- `small`
+- `default`
+- `large`
+- `extra-large`
+
+<div class="flex gap-2">
+    <bo-avatar :size="BoSize.extra_small" :data="{ label: 'B' }" />
+    <bo-avatar :size="BoSize.small" :data="{ label: 'B' }" />
+    <bo-avatar :size="BoSize.default" :data="{ label: 'B' }" />
+    <bo-avatar :size="BoSize.large" :data="{ label: 'B' }" />
+    <bo-avatar :size="BoSize.extra_large" :data="{ label: 'B' }" />
+</div>
+
+## Custom colors
+
+The `color-hex` and `font-color-hex` props enable you to further customize the avatar.
+In most cases you will want to use these together as the background color of the avatar will generated
+randomly by default.
+
+<div class="flex gap-2">
+    <bo-avatar :color-hex="'#41b883'" :font-color-hex="'#ffffff'" :data="{ label: 'B' }" />
+    <bo-avatar :color-hex="'#000000'" :font-color-hex="'#ffffff'" :data="{ label: 'B' }" />
+    <bo-avatar :color-hex="'#231252'" :font-color-hex="'yellow'" :data="{ label: 'B' }" />
+</div>
+
+## Clickable
+
+To visually indicate that the avatar is clickable, you can use the `clickable` prop. This will set the cursor to pointer and in case of an initials avatar, it will add a `bacckground` hover effect.
+
+<div class="flex gap-2">
+    <bo-avatar :clickable="true" :data="{ label: 'B' }" />
+</div>
+
+## With default image
+
+If you for any reason need a default image avatar, with the help of the `with-default-image` prop you can
+force the avatar to use the default image.
+
+<div class="flex gap-2">
+    <bo-avatar :with-default-image="true" />
+</div>

docs/components/avatar/examples/BoAvatarCustomImage.vue

@@ -0,0 +1,15 @@
+<template>
+	<bo-avatar
+		:type="BoAvatarType.image"
+		:data="{
+			src: AvatarImg,
+			alt: 'avatar',
+		}"
+	/>
+</template>
+
+<script setup lang="ts">
+import { BoAvatar, BoAvatarType } from '@/components/bo_avatar'
+
+import AvatarImg from './avatar.png?url'
+</script>

docs/components/button/button.md

@@ -7,15 +7,17 @@ import BoButtonIconVariants from './examples/BoButtonIconVariants.vue'
 import BoButtonIconOnlyVariant from './examples/BoButtonIconOnlyVariant.vue'
 </script>
 
-# Button
+# bo-button
 
 A button is a control that allows the user to perform an action. The library supports different variants, shapes and types of buttons.
 
-## Basic usage
+<bo-button label="Button" />
 
-The component to use is called `bo-button`.
+## Basic usage
 
+```vue
 <bo-button label="Button" />
+```
 
 ## Props
 
@@ -32,18 +34,12 @@ The component to use is called `bo-button`.
 | `suffixIcon` | `Icon`            | `Icon.none`               |
 
 ::: warning Note
-To make the button work properly, either the `label` or the `prefixIcon` prop must be provided.
-:::
-
-::: tip Icon only button
-To create an icon only button, you can use the `prefixIcon` prop without the `label` prop.
-If the label is not provided, the padding and the general size of the button will be aligned
-to match the icon correctly.
+Though non of the props are required, either the `label` or the `prefixIcon` prop must be provided.
 :::
 
 ## Disabled
 
-The `disabled` prop can be used to disable the button. When the button is disabled, it will not respond to user interactions and will appear in a disabled state.
+To disable the button, set the `disabled` prop to `true`. When the button is disabled, it will not respond to user interactions and will appear in a disabled state.
 
 ### Example
 
@@ -57,16 +53,10 @@ The `disabled` prop can be used to disable the button. When the button is disabl
 
 ## Loading
 
-The `isLoading` prop can be used to show a loading spinner. When the spinner is shown, the button will be disabled and will not respond to user interactions.
+To represent a loading state, change the value of the `isLoading` prop. When the button is loading, it will be disabled and will not respond to user interactions.
 
 <bo-button label="Loading" :isLoading="true" />
 
-### Example
-
-```vue
-<bo-button label="Loading" :isLoading="true" />
-```
-
 ## Button variants
 
 To change the color of the component, you can use the predifened `BoButtonVariant` enum and `variant` prop The available values for the `BoButtonVariant` enum