Refactor #3922 - For ToggleButton

components/lib/togglebutton/ToggleButton.d.ts

@@ -10,6 +10,60 @@
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToggleButtonPassThroughMethodOptions {
+    props: ToggleButtonProps;
+    state: ToggleButtonState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToggleButtonProps.pt}
+ */
+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.
+     */
+    icon?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ToggleButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToggleButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ToggleButton component.
+ */
+export interface ToggleButtonState {
+    /**
+     * Focused state as a number.
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in ToggleButton component.
  */
@@ -77,6 +131,11 @@ export interface ToggleButtonProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToggleButtonPassThroughOptions}
+     */
+    pt?: ToggleButtonPassThroughOptions;
 }
 
 /**

components/lib/togglebutton/ToggleButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)">
-        <span class="p-hidden-accessible">
+    <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)" v-bind="ptm('root')">
+        <span class="p-hidden-accessible" v-bind="ptm('inputAria')">
             <input
                 :id="inputId"
                 type="checkbox"
@@ -13,21 +13,23 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('input') }"
             />
         </span>
         <slot name="icon" :value="modelValue" :class="iconClass">
-            <span v-if="onIcon || offIcon" :class="iconClass" />
+            <span v-if="onIcon || offIcon" :class="iconClass" v-bind="ptm('icon')" />
         </slot>
-        <span class="p-button-label">{{ label }}</span>
+        <span class="p-button-label" v-bind="ptm('label')">{{ label }}</span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'ToggleButton',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,