Refactor #3922 - For ToggleButton

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;
 }
 
 /**

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">

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: () => ({
+                root: {
-                    class: checked ? 'bg-green-500 border-white' : undefined
+                    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: () => ({
+        root: {
-            class: checked ? 'bg-green-500 border-white' : undefined
+            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: () => ({
+                root: {
-                    class: checked ? 'bg-green-500 border-white' : undefined
+                    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: () => ({
+                root: {
-                    class: checked ? 'bg-green-500 border-white' : undefined
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                })
+                }
             }"
         />
     </div>