feat: add solid color prop to the afcl button group

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -42,6 +42,8 @@ import { Button } from '@/afcl'
 loader prop would show loader when it's true.
 
 ## Button Group
+### With active button
+<div class="split-screen" >
 
 ```ts
 import { IconGridSolid, IconUserCircleSolid, IconLockSolid, IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
@@ -81,6 +83,38 @@ const activeButton = ref('')
 
 ![AFCL Button-group](ButtonGroup1.png)
 
+</div>
+
+### With solid color
+
+<div class="split-screen" >
+
+```ts
+  import { ButtonGroup } from '@/afcl'
+  import { IconPlusOutline, IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+
+    ...
+
+  <ButtonGroup :solidColor="true">
+      <template #button:Profile>
+          <div class="flex px-4 py-2">
+              <IconPlusOutline class="w-5 h-5 me-2"/>
+              Add passkey
+          </div>
+      </template>
+      <template #button:Dashboard @click="console.log('Dashboard clicked')">
+          <div class="flex px-2">
+              <IconCaretDownSolid class="w-5 h-5"/>
+          </div>
+      </template>
+  </ButtonGroup>
+
+```
+
+![AFCL Button-group](ButtonGroup2.png)
+
+</div>
+
 
 ## Link
 

adminforth/documentation/docs/tutorial/03-Customization/ButtonGroup2.png

@@ -8,7 +8,8 @@
                 : buttonsStyles[button] === 'rounded-right' ? 'border rounded-e-lg border-l-lightButtonGroupBackground focus:border-l-lightButtonGroupBorder dark:border-l-darkButtonGroupBackground dark:focus:border-l-darkButtonGroupBorder' 
                 : buttonsStyles[button] === 'no-rounded' ? 'border border-l-lightButtonGroupBackground focus:border-l-lightButtonGroupBorder dark:border-l-darkButtonGroupBackground dark:focus:border-l-darkButtonGroupBorder' 
                 : buttonsStyles[button] === 'rounded-left-with-right-border' ? 'border rounded-s-lg' : '',
-                button === activeButton ? 'bg-lightButtonGroupActiveBackground text-lightButtonGroupActiveText focus:ring-lightButtonGroupActiveFocusRing dark:bg-darkButtonGroupActiveBackground dark:text-darkButtonGroupActiveText dark:focus:ring-darkButtonGroupActiveFocusRing' : 'text-lightButtonGroupText bg-lightButtonGroupBackground focus:ring-lightButtonGroupFocusRing hover:bg-lightButtonGroupBackgroundHover hover:text-lightButtonGroupTextHover dark:bg-darkButtonGroupBackground dark:text-darkButtonGroupText dark:hover:text-darkButtonGroupTextHover dark:hover:bg-darkButtonGroupBackgroundHover dark:focus:ring-darkButtonGroupFocusRing'
+                (button === activeButton || props.solidColor === true) ? 'bg-lightButtonGroupActiveBackground text-lightButtonGroupActiveText focus:ring-lightButtonGroupActiveFocusRing dark:bg-darkButtonGroupActiveBackground dark:text-darkButtonGroupActiveText dark:focus:ring-darkButtonGroupActiveFocusRing' 
+                                        :'text-lightButtonGroupText bg-lightButtonGroupBackground focus:ring-lightButtonGroupFocusRing hover:bg-lightButtonGroupBackgroundHover hover:text-lightButtonGroupTextHover dark:bg-darkButtonGroupBackground dark:text-darkButtonGroupText dark:hover:text-darkButtonGroupTextHover dark:hover:bg-darkButtonGroupBackgroundHover dark:focus:ring-darkButtonGroupFocusRing'
             ]"
             @click="setActiveButton(button)"
         >
@@ -27,6 +28,10 @@
     const emits = defineEmits([
         'update:activeButton',
     ]);
+
+    const props = defineProps<{
+        solidColor?: boolean;
+    }>();
     
     onMounted(() => {
         const slots = useSlots();