Refactor #3922 - For SelectButton

components/lib/selectbutton/SelectButton.d.ts

@@ -10,6 +10,42 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SelectButtonPassThroughMethodOptions {
+    props: SelectButtonProps;
+    state: SelectButtonState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SelectButtonProps.pt}
+ */
+export interface SelectButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SelectButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: SelectButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: SelectButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SelectButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Custom change event.
  * @see {@link SelectButtonEmits.change}
@@ -25,6 +61,16 @@ export interface SelectButtonChangeEvent {
     value: any;
 }
 
+/**
+ * Defines current inline state in SelectButton component.
+ */
+export interface SelectButtonState {
+    /**
+     * FocusedIndex state as a number.
+     */
+    focusedIndex: number;
+}
+
 /**
  * Defines valid properties in SelectButton component.
  */
@@ -72,6 +118,11 @@ export interface SelectButtonProps {
      * Identifier of the underlying element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SelectButtonPassThroughOptions}
+     */
+    pt?: SelectButtonPassThroughOptions;
 }
 
 /**

components/lib/selectbutton/SelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby">
+    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
         <div
             v-for="(option, i) of options"
             :key="getOptionRenderKey(option)"
@@ -14,20 +14,23 @@
             @keydown="onKeydown($event, option, i)"
             @focus="onFocus($event)"
             @blur="onBlur($event, option)"
+            v-bind="ptm('button')"
         >
             <slot name="option" :option="option" :index="i">
-                <span class="p-button-label">{{ getOptionLabel(option) }}</span>
+                <span class="p-button-label" v-bind="ptm('label')">{{ getOptionLabel(option) }}</span>
             </slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'SelectButton',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,