From 9672b27cf071eb502371d65314f1cc0897c721df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 2 Aug 2023 17:32:32 +0300
Subject: [PATCH] Refactor #4211 - For ToggleButton

---
 components/lib/togglebutton/ToggleButton.d.ts | 24 ++++++++++++++++++-
 components/lib/togglebutton/ToggleButton.vue  | 15 +++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts
index 258dc75ac..325035212 100755
--- a/components/lib/togglebutton/ToggleButton.d.ts
+++ b/components/lib/togglebutton/ToggleButton.d.ts
@@ -20,6 +20,7 @@ export interface ToggleButtonPassThroughMethodOptions {
     instance: any;
     props: ToggleButtonProps;
     state: ToggleButtonState;
+    context: ToggleButtonContext;
 }
 
 /**
@@ -66,11 +67,32 @@ export interface ToggleButtonPassThroughAttributes {
  */
 export interface ToggleButtonState {
     /**
-     * Focused state as a number.
+     * Focused state as a boolean.
      */
     focused: boolean;
 }
 
+/**
+ * Defines current options in ToggleButton component.
+ */
+export interface ToggleButtonContext {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Current highlighted state as a boolean.
+     * @defaultValue false
+     */
+    highlighted: boolean;
+}
+
 /**
  * Defines valid properties in ToggleButton component.
  */
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index 499afbd31..d79aa9f5e 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" v-ripple :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" :data-p-active="modelValue === true" data-pc-name="togglebutton">
+    <div ref="container" v-ripple :class="cx('root')" @click="onClick($event)" v-bind="ptm('root', ptOptions)" :data-p-active="modelValue === true" data-pc-name="togglebutton">
         <span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 :id="inputId"
@@ -17,9 +17,9 @@
             />
         </span>
         <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="ptm('icon')" />
+            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="ptm('icon', ptOptions)" />
         </slot>
-        <span :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
+        <span :class="cx('label')" v-bind="ptm('label', ptOptions)">{{ label }}</span>
     </div>
 </template>
 
@@ -87,6 +87,15 @@ export default {
         },
         label() {
             return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
+        },
+        ptOptions() {
+            return {
+                context: {
+                    focused: this.focused,
+                    disabled: this.disabled,
+                    highlighted: this.modelValue === true
+                }
+            };
         }
     },
     directives: {