Button class style and dropdown icon customization

api-generator/components/splitbutton.js

@@ -35,6 +35,12 @@ const SplitButtonProps = [
         default: 'body',
         description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
     },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
     {
         name: 'class',
         type: 'string',
@@ -46,6 +52,36 @@ const SplitButtonProps = [
         type: 'any',
         default: 'null',
         description: 'Inline of the component.'
+    },
+    {
+        name: 'buttonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the button.'
+    },
+    {
+        name: 'menuButtonIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the menu button icon.'
+    },
+    {
+        name: 'menuButtonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the menu button.'
+    },
+    {
+        name: 'menuClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the menu.'
+    },
+    {
+        name: 'menuStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the menu.'
     }
 ];
 

components/splitbutton/SplitButton.d.ts

@@ -53,6 +53,26 @@ export interface SplitButtonProps {
      * Uses to pass all properties of the HTMLButtonElement to the menu button.
      */
     menuButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Style class of the button.
+     */
+    buttonClass?: string | undefined;
+    /**
+     * Name of the menu button icon.
+     */
+    menuButtonIcon?: string | undefined;
+    /**
+     * Style class of the menu button.
+     */
+    menuButtonClass?: string | undefined;
+    /**
+     * Style class of the menu.
+     */
+    menuClass?: string | undefined;
+    /**
+     * Inline style of the menu.
+     */
+    menuStyle?: any | undefined;
 }
 
 export interface SplitButtonSlots {

components/splitbutton/SplitButton.vue

@@ -1,13 +1,13 @@
 <template>
     <div :class="containerClass" :style="style">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
+            <PVSButton type="button" :class="buttonClasses" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
         </slot>
         <PVSButton
             ref="button"
             type="button"
-            class="p-splitbutton-menubutton"
+            :class="menuButtonClasses"
-            icon="pi pi-chevron-down"
+            :icon="menuButtonIcon"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -16,7 +16,7 @@
             @keydown="onDropdownKeydown"
             v-bind="menuButtonProps"
         />
-        <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" :style="menuStyle" :class="menuClass" />
     </div>
 </template>
 
@@ -68,9 +68,29 @@ export default {
             type: null,
             default: null
         },
+        buttonClass: {
+            type: String,
+            default: null
+        },
         menuButtonProps: {
             type: null,
             default: null
+        },
+        menuButtonIcon: {
+            type: String,
+            default: 'pi pi-chevron-down'
+        },
+        menuButtonClass: {
+            type: String,
+            default: null
+        },
+        menuClass: {
+            type: String,
+            default: null
+        },
+        menuStyle: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -99,6 +119,12 @@ export default {
         },
         containerClass() {
             return ['p-splitbutton p-component', this.class];
+        },
+        menuButtonClasses() {
+            return ['p-splitbutton-menubutton', this.menuButtonClass];
+        },
+        buttonClasses() {
+            return ['p-splitbutton-defaultbutton', this.buttonClass];
         }
     },
     components: {

pages/splitbutton/SplitButtonDoc.vue

@@ -182,6 +182,36 @@ export default {
                         <td>null</td>
                         <td>Uses to pass all properties of the HTMLButtonElement to the menu button.</td>
                     </tr>
+                    <tr>
+                        <td>buttonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the button.</td>
+                    </tr>
+                    <tr>
+                        <td>menuButtonIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the menu button icon.</td>
+                    </tr>
+                    <tr>
+                        <td>menuButtonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>menuClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>menuStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the menu.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>