Refactor #3885 - For SplitButton

api-generator/components/splitbutton.js

@@ -100,6 +100,12 @@ const SplitButtonProps = [
         type: 'boolean',
         default: 'false',
         description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/splitbutton/SplitButton.d.ts

@@ -11,6 +11,65 @@ import { ButtonHTMLAttributes, VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SplitButtonPassThroughOptionType = SplitButtonPassThroughAttributes | ((options: SplitButtonPassThroughMethodOptions) => SplitButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitButtonPassThroughMethodOptions {
+    props: SplitButtonProps;
+    state: SplitButtonState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SplitButtonProps.pt}
+ */
+export interface SplitButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the menu button's DOM element.
+     */
+    menuButton?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the menu button icon's DOM element.
+     */
+    menuButtonIcon?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the menu's DOM element.
+     */
+    menu?: SplitButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SplitButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in SplitButton component.
+ */
+export interface SplitButtonState {
+    /**
+     * Current blocked state as a boolean.
+     * @defaultValue false
+     */
+    isBlocked: boolean;
+}
+
 /**
  * Defines valid properties in SplitButton component.
  */
@@ -103,6 +162,11 @@ export interface SplitButtonProps {
      * @defaultValue false
      */
     plain?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitButtonPassThroughOptions}
+     */
+    pt?: SplitButtonPassThroughOptions;
 }
 
 /**

components/lib/splitbutton/SplitButton.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="containerClass" :style="style">
+    <div :class="containerClass" :style="style" v-bind="ptm('root')">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps">
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="{ ...buttonProps, ...ptm('button') }">
                 <template #icon="slotProps">
                     <slot name="icon">
-                        <span :class="[icon, slotProps.class]" />
+                        <span :class="[icon, slotProps.class]" v-bind="ptm('icon')" />
                     </slot>
                 </template>
             </PVSButton>
@@ -19,19 +19,20 @@
             :aria-controls="ariaId + '_overlay'"
             @click="onDropdownButtonClick"
             @keydown="onDropdownKeydown"
-            v-bind="menuButtonProps"
+            v-bind="{ ...menuButtonProps, ...ptm('menuButton') }"
         >
             <template #icon="slotProps">
                 <slot name="menubuttonicon">
-                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" />
+                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" v-bind="ptm('menuButtonIcon')" />
                 </slot>
             </template>
         </PVSButton>
-        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
+        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" v-bind="ptm('menu')" />
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
@@ -39,6 +40,7 @@ import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SplitButton',
+    extends: BaseComponent,
     emits: ['click'],
     props: {
         label: {