fix: update ButtonGroup to use modelValue for v-model binding

Author: yaroslav8765

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

@@ -53,7 +53,7 @@ const activeButton = ref('')
 
     ...
 
-<ButtonGroup v-model:activeButton="activeButton">  
+<ButtonGroup v-model="activeButton">  
   <template #button:Profile>
     <div class="flex px-4 py-2">
       <IconUserCircleSolid class="w-5 h-5 me-2"/>
@@ -66,18 +66,6 @@ const activeButton = ref('')
       Board
     </div>
   </template>
-  <template #button:Lock>
-    <div class="flex px-4 py-2">
-      <IconShieldOutline class="w-5 h-5 me-2"/>
-      Passkeys
-    </div>
-  </template>
-  <template #button:Security>
-    <div class="flex px-4 py-2">
-      <IconLockSolid class="w-5 h-5 me-2"/>
-      Security
-    </div>
-  </template>
 </ButtonGroup>
 ```
 
@@ -95,19 +83,19 @@ const activeButton = ref('')
 
     ...
 
-  <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>
+    <ButtonGroup :solidColor="true">
+        <template #button:Profile>
+            <div class="flex px-4 py-2" @click="console.log("Add passkey got clicked")">
+                <IconPlusOutline class="w-5 h-5 me-2"/>
+                <p>{{ addPasskeyMode === 'platform' ? 'Add Local Passkey' : 'Add External Passkey' }}</p>
+            </div>
+        </template>
+        <template #button:Dropdown>
+            <div id="dropdown-button" class="flex px-2 py-2" @click="console.log("Dropdown got clicked")">
+                <IconCaretDownSolid class="w-5 h-5"/>
+            </div>
+        </template>
+    </ButtonGroup>
 
 ```
 

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

@@ -27,12 +27,12 @@
     const activeButton = ref('');
     const slotProps = reactive<Record<string, any>>({});
     const isInitFinished = ref(false);
-    const emits = defineEmits([
-        'update:activeButton',
-    ]);
+    
+    const emits = defineEmits(['update:modelValue']);
 
     const props = defineProps<{
         solidColor?: boolean;
+        modelValue?: string;
     }>();
     
     onMounted(() => {
@@ -68,7 +68,7 @@
     function setActiveButton(button: string) {
         if (buttons.value.includes(button)) {
         activeButton.value = button;
-        emits('update:activeButton', button);
+        emits('update:modelValue', button);
         }
     }