Refactor #5592, #5661, #5662 - For SplitButton

primefaces · Apr 30, 2024 · 4c8eb6c · 4c8eb6c
1 parent 1b88a2f
commit 4c8eb6c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 8 deletions.
diff --git a/components/lib/splitbutton/BaseSplitButton.vue b/components/lib/splitbutton/BaseSplitButton.vue
@@ -54,6 +54,10 @@ export default {
             type: String,
             default: undefined
         },
+        dropdownIcon: {
+            type: String,
+            default: undefined
+        },
         severity: {
             type: String,
             default: null

diff --git a/components/lib/splitbutton/SplitButton.d.ts b/components/lib/splitbutton/SplitButton.d.ts
@@ -78,7 +78,7 @@ export interface SplitButtonPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    menuButton?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
+    dropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the TieredMenu component.
      * @see {@link TieredMenuPassThroughOptions}
@@ -168,6 +168,10 @@ export interface SplitButtonProps {
      * @deprecated since v3.27.0. Use 'menubuttonicon' slot.
      */
     menuButtonIcon?: string | undefined;
+    /**
+     * Name of the menu button icon.
+     */
+    dropdownIcon?: string | undefined;
     /**
      * Defines the style of the button.
      */
@@ -245,6 +249,7 @@ export interface SplitButtonSlots {
         class: string;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use dropdownicon slot instead.
      * Custom menu button icon template.
      * @param {Object} scope - menubuttonicon slot's params.
      */
@@ -254,6 +259,16 @@ export interface SplitButtonSlots {
          */
         class: string;
     }): VNode[];
+    /**
+     * Custom menu button icon template.
+     * @param {Object} scope - menubuttonicon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom menu item icon template.
      * @param {Object} scope - menuitemicon slot's params.

diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
@@ -27,7 +27,7 @@
         <PVSButton
             ref="button"
             type="button"
-            :class="cx('menuButton')"
+            :class="cx('dropdown')"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -38,13 +38,17 @@
             :text="text"
             :outlined="outlined"
             :size="size"
-            v-bind="menuButtonProps"
-            :pt="ptm('menuButton')"
             :unstyled="unstyled"
+            v-bind="menuButtonProps"
+            :pt="ptm('dropdown')"
         >
             <template #icon="slotProps">
-                <slot name="menubuttonicon" :class="slotProps.class">
-                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" v-bind="ptm('menuButton')['icon']" data-pc-section="menubuttonicon" />
+                <!--TODO: Deprecated since v4.0-->
+                <slot v-if="$slots.menubuttonicon" name="menubuttonicon" :class="slotProps.class">
+                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" v-bind="ptm('dropdown')['icon']" data-pc-section="menubuttonicon" />
+                </slot>
+                <slot v-else name="dropdownicon" :class="slotProps.class">
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon, slotProps.class]" v-bind="ptm('dropdown')['icon']" data-pc-section="menubuttonicon" />
                 </slot>
             </template>
         </PVSButton>

diff --git a/components/lib/splitbutton/style/SplitButtonStyle.js b/components/lib/splitbutton/style/SplitButtonStyle.js
@@ -3,7 +3,7 @@ import BaseStyle from 'primevue/base/style';
 const classes = {
     root: 'p-splitbutton p-component',
     button: 'p-splitbutton-button',
-    menuButton: 'p-splitbutton-dropdown'
+    dropdown: 'p-splitbutton-dropdown'
 };
 
 export default BaseStyle.extend({

diff --git a/doc/splitbutton/IconsDoc.vue b/doc/splitbutton/IconsDoc.vue
@@ -3,7 +3,17 @@
         <p>The buttons and menuitems have support to display icons.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
+        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
+        <SplitButton label="Save" icon="pi pi-check" @click="save" :model="items">
+            <template #dropdownicon>
+                <i class="pi pi-discord"></i>
+            </template>
+        </SplitButton>
+        <SplitButton label="Save" icon="pi pi-check" @click="save" :model="items">
+            <template #menubuttonicon>
+                <i class="pi pi-discord"></i>
+            </template>
+        </SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>