From 5017cedd0b888d8e048c1959ca776a1c9b03addb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 7 Apr 2023 09:47:23 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For OrderList

---
 api-generator/components/orderlist.js   | 24 ++++++++++++++---
 components/lib/orderlist/OrderList.d.ts | 16 ++++++++++++
 components/lib/orderlist/OrderList.vue  | 34 +++++++++++++++++++++----
 3 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js
index 221e3368f..95fd8d805 100644
--- a/api-generator/components/orderlist.js
+++ b/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.'
     }
 ];
 
diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts
index a7d6f267b..c4f92c2fc 100755
--- a/components/lib/orderlist/OrderList.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index bedb2f18c..b4eb1d9bc 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/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" icon="pi pi-angle-double-up" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps"></OLButton>
-            <OLButton type="button" icon="pi pi-angle-down" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps"></OLButton>
-            <OLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps"></OLButton>
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
+                <slot>
+                    <component :is="$slots.moveupicon || 'AngleUpIcon'" />
+                </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