From a360a2d3cdd1df3af21f7680a11303da33a4f50d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Mon, 8 May 2023 15:32:33 +0300
Subject: [PATCH] SelectButton pt demo completed

---
 doc/selectbutton/pt/PTDoc.vue | 36 +++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
index 1c22dd76a..e0e81805c 100644
--- a/doc/selectbutton/pt/PTDoc.vue
+++ b/doc/selectbutton/pt/PTDoc.vue
@@ -6,7 +6,9 @@
             :options="options"
             aria-labelledby="basic"
             :pt="{
-                button: { class: 'bg-primary ' }
+                label: ({ state }) => ({
+                    class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+                })
             }"
         />
     </div>
@@ -21,11 +23,28 @@ export default {
             options: ['Off', 'On'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
+<SelectButton
+    v-model="value"
+    :options="options"
+    aria-labelledby="basic"
+    :pt="{
+        label: ({ state }) => ({
+            class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+        })
+    }"/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton
+            v-model="value"
+            :options="options"
+            aria-labelledby="basic"
+            :pt="{
+                label: ({ state }) => ({
+                    class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+                })
+            }"
+        />
     </div>
 </template>
 
@@ -42,7 +61,16 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton
+            v-model="value"
+            :options="options"
+            aria-labelledby="basic"
+            :pt="{
+                label: ({ state }) => ({
+                    class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+                })
+            }"
+        />
     </div>
 </template>