From f624aa2b9f8ae156ea005283dc80182774ce2213 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: Tue, 9 May 2023 11:57:03 +0300
Subject: [PATCH] Refactor #3922 - For ToggleButton

---
 components/lib/togglebutton/ToggleButton.d.ts | 16 +++++------
 components/lib/togglebutton/ToggleButton.vue  |  4 +--
 doc/togglebutton/pt/PTDoc.vue                 | 28 ++++++++-----------
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts
index e2c8df251..648a4ea63 100755
--- a/components/lib/togglebutton/ToggleButton.d.ts
+++ b/components/lib/togglebutton/ToggleButton.d.ts
@@ -29,14 +29,6 @@ export interface ToggleButtonPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: ToggleButtonPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the input aria's DOM element.
-     */
-    inputAria?: ToggleButtonPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the input's DOM element.
-     */
-    input?: ToggleButtonPassThroughOptionType;
     /**
      * Uses to pass attributes to the icon's DOM element.
      */
@@ -45,6 +37,14 @@ export interface ToggleButtonPassThroughOptions {
      * Uses to pass attributes to the label's DOM element.
      */
     label?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: ToggleButtonPassThroughOptionType;
 }
 
 /**
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index a5b68e52b..c1ff13a6d 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)" v-bind="ptm('root')">
-        <span class="p-hidden-accessible" v-bind="ptm('inputAria')">
+        <span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 :id="inputId"
                 type="checkbox"
@@ -13,7 +13,7 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="{ ...inputProps, ...ptm('input') }"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </span>
         <slot name="icon" :value="modelValue" :class="iconClass">
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
index e9a0dae88..d9f43a558 100644
--- a/doc/togglebutton/pt/PTDoc.vue
+++ b/doc/togglebutton/pt/PTDoc.vue
@@ -3,11 +3,10 @@
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
-            class="w-8rem"
             :pt="{
-                root: () => ({
-                    class: checked ? 'bg-green-500 border-white' : undefined
-                })
+                root: {
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+                }
             }"
         />
     </div>
@@ -23,11 +22,10 @@ export default {
                 basic: `
 <ToggleButton
     v-model="checked"
-    class="w-8rem"
     :pt="{
-        root: () => ({
-            class: checked ? 'bg-green-500 border-white' : undefined
-        })
+        root: {
+            class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+        }
     }"
 />`,
                 options: `
@@ -35,11 +33,10 @@ export default {
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
-            class="w-8rem"
             :pt="{
-                root: () => ({
-                    class: checked ? 'bg-green-500 border-white' : undefined
-                })
+                root: {
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+                }
             }"
         />
     </div>
@@ -59,11 +56,10 @@ export default {
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
-            class="w-8rem"
             :pt="{
-                root: () => ({
-                    class: checked ? 'bg-green-500 border-white' : undefined
-                })
+                root: {
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+                }
             }"
         />
     </div>