From 6b2ce7ebd4cee33b1ebe81e2d3990bf89287093a Mon Sep 17 00:00:00 2001
From: Kevin Vermeersch <kvermeersch@hooox.com>
Date: Wed, 18 Jan 2023 15:58:34 +0100
Subject: [PATCH] Adding slot for arrow icon #473

---
 docs/components/DocSlots.vue |  4 ++++
 src/components/Control.vue   | 17 +++++++++++++++--
 src/components/Option.vue    | 26 ++++++++++++++++++++------
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/docs/components/DocSlots.vue b/docs/components/DocSlots.vue
index 3a7af98c..a2799533 100644
--- a/docs/components/DocSlots.vue
+++ b/docs/components/DocSlots.vue
@@ -38,6 +38,10 @@
         name: 'after-list',
         props: '-',
         description: `Slot showed after the menu list.`,
+      }, {
+        name: 'arrow-icon',
+        props: '-',
+        description: `Slot for a custom arrow icon.`,
       } ],
     }),
   }
diff --git a/src/components/Control.vue b/src/components/Control.vue
index efc67ddc..d53a3844 100644
--- a/src/components/Control.vue
+++ b/src/components/Control.vue
@@ -68,18 +68,31 @@
         )
       },
 
-      renderArrow() {
+      getArrow() {
         const { instance } = this
+        const arrowIconRenderer = instance.$scopedSlots['arrow-icon']
+
         const arrowClass = {
           'vue-treeselect__control-arrow': true,
           'vue-treeselect__control-arrow--rotated': instance.menu.isOpen,
+          'vue-treeselect__control-arrow--custom': arrowIconRenderer,
+        }
+
+        if (arrowIconRenderer) {
+          return (
+            <div class={arrowClass}> { arrowIconRenderer() }</div>
+           )
         }
 
+        return <ArrowIcon class={arrowClass} />
+      },
+
+      renderArrow() {
         if (!this.shouldShowArrow) return null
 
         return (
           <div class="vue-treeselect__control-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
-            <ArrowIcon class={arrowClass} />
+            { this.getArrow() }
           </div>
         )
       },
diff --git a/src/components/Option.vue b/src/components/Option.vue
index 5dad1a8b..b0936a85 100755
--- a/src/components/Option.vue
+++ b/src/components/Option.vue
@@ -69,6 +69,25 @@
         )
       },
 
+      getArrow() {
+        const { instance } = this
+        const arrowIconRenderer = instance.$scopedSlots['arrow-icon']
+
+        const arrowClass = {
+          'vue-treeselect__option-arrow': true,
+          'vue-treeselect__option-arrow--rotated': this.shouldExpand,
+          'vue-treeselect__option-arrow--custom': arrowIconRenderer,
+        }
+
+        if (arrowIconRenderer) {
+          return (
+            <div class={arrowClass}> { arrowIconRenderer() }</div>
+           )
+        }
+
+        return <ArrowIcon class={arrowClass} />
+      },
+
       renderArrow() {
         const { instance, node } = this
 
@@ -81,15 +100,11 @@
               appear: true,
             },
           }
-          const arrowClass = {
-            'vue-treeselect__option-arrow': true,
-            'vue-treeselect__option-arrow--rotated': this.shouldExpand,
-          }
 
           return (
             <div class="vue-treeselect__option-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
               <transition {...transitionProps}>
-                <ArrowIcon class={arrowClass} />
+                { this.getArrow() }
               </transition>
             </div>
           )
@@ -134,7 +149,6 @@
         const { instance, node } = this
         const checkedState = instance.forest.checkedStateMap[node.id]
         const checkboxClass = {
-          'uk-checkbox': true,
           'vue-treeselect__checkbox': true,
           'vue-treeselect__checkbox--checked': checkedState === CHECKED,
           'vue-treeselect__checkbox--indeterminate': checkedState === INDETERMINATE,