Refactor #4211 - For ToggleButton

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.
  */

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: {