Refactor #3832 Refactor #3833 - For OrderList

api-generator/components/orderlist.js

@@ -93,19 +93,35 @@ const OrderListEvents = [
 const OrderListSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'item',
-        description: 'Custom content for the item'
+        description: 'Custom content for the item.'
     },
     {
         name: 'controlsstart',
-        description: 'Custom content before the buttons'
+        description: 'Custom content before the buttons.'
     },
     {
         name: 'controlsend',
-        description: 'Custom content after the buttons'
+        description: 'Custom content after the buttons.'
+    },
+    {
+        name: 'movetopicon',
+        description: 'Custom move top icon template.'
+    },
+    {
+        name: 'moveupicon',
+        description: 'Custom move up icon template.'
+    },
+    {
+        name: 'movedownicon',
+        description: 'Custom move down icon template.'
+    },
+    {
+        name: 'movebottomicon',
+        description: 'Custom move bottom icon template.'
     }
 ];
 

components/lib/orderlist/OrderList.d.ts

@@ -149,6 +149,22 @@ export interface OrderListSlots {
      * Custom controls end template.
      */
     controlsend(): VNode[];
+    /**
+     * Custom move up icon template.
+     */
+    moveupicon(): VNode[];
+    /**
+     * Custom move top icon template.
+     */
+    movetopicon(): VNode[];
+    /**
+     * Custom move down icon template.
+     */
+    movedownicon(): VNode[];
+    /**
+     * Custom move bottom icon template.
+     */
+    movebottomicon(): VNode[];
 }
 
 /**

components/lib/orderlist/OrderList.vue

@@ -2,10 +2,26 @@
     <div :class="containerClass">
         <div class="p-orderlist-controls">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" icon="pi pi-angle-up" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps"></OLButton>
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
-            <OLButton type="button" icon="pi pi-angle-double-up" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps"></OLButton>
+                <slot>
-            <OLButton type="button" icon="pi pi-angle-down" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps"></OLButton>
+                    <component :is="$slots.moveupicon || 'AngleUpIcon'" />
-            <OLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps"></OLButton>
+                </slot>
+            </OLButton>
+            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
+                <slot name="movetopicon">
+                    <AngleDoubleUpIcon />
+                </slot>
+            </OLButton>
+            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps">
+                <slot name="movedownicon">
+                    <AngleDownIcon />
+                </slot>
+            </OLButton>
+            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
+                <slot name="movebottomicon">
+                    <AngleDoubleDownIcon />
+                </slot>
+            </OLButton>
             <slot name="controlsend"></slot>
         </div>
         <div class="p-orderlist-list-container">
@@ -42,6 +58,10 @@
 
 <script>
 import Button from 'primevue/button';
+import AngleDoubleDownIcon from 'primevue/icon/angledoubledown';
+import AngleDoubleUpIcon from 'primevue/icon/angledoubleup';
+import AngleDownIcon from 'primevue/icon/angledown';
+import AngleUpIcon from 'primevue/icon/angleup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
@@ -578,7 +598,11 @@ export default {
         }
     },
     components: {
-        OLButton: Button
+        OLButton: Button,
+        AngleUpIcon: AngleUpIcon,
+        AngleDownIcon: AngleDownIcon,
+        AngleDoubleUpIcon: AngleDoubleUpIcon,
+        AngleDoubleDownIcon: AngleDoubleDownIcon
     },
     directives: {
         ripple: Ripple