Adding slot for arrow icon riophae#473

hoooxnv · Jan 18, 2023 · 6b2ce7e · 6b2ce7e
1 parent 41d77a8
commit 6b2ce7e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,