Add custom arrow icon slot

docs/components/CustomArrowIcon.vue

@@ -0,0 +1,66 @@
+<template>
+  <treeselect :options="options" v-model="value">
+    <template slot="arrow-icon" slot-scope="{ isOpen }">
+      {{ isOpen ? "O" : "C" }}
+    </template>
+  </treeselect>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      value: [],
+      options: [
+        {
+          id: 'fruits',
+          label: 'Fruits',
+          children: [
+            {
+              id: 'apple',
+              label: 'Apple 🍎',
+              isNew: true,
+            },
+            {
+              id: 'grapes',
+              label: 'Grapes 🍇',
+            },
+            {
+              id: 'pear',
+              label: 'Pear 🍐',
+            },
+            {
+              id: 'strawberry',
+              label: 'Strawberry 🍓',
+            },
+            {
+              id: 'watermelon',
+              label: 'Watermelon 🍉',
+            },
+          ],
+        },
+        {
+          id: 'vegetables',
+          label: 'Vegetables',
+          children: [
+            {
+              id: 'corn',
+              label: 'Corn 🌽',
+            },
+            {
+              id: 'carrot',
+              label: 'Carrot 🥕',
+            },
+            {
+              id: 'eggplant',
+              label: 'Eggplant 🍆',
+            },
+            {
+              id: 'tomato',
+              label: 'Tomato 🍅',
+            },
+          ],
+        },
+      ],
+    }),
+  }
+</script>

docs/partials/guides.pug

@@ -41,6 +41,7 @@
     This demonstrates more features.
   +demo('MoreFeatures')
 
+
 +subsection('Delayed Loading')
   :markdown-it
     If you have a large number of deeply nested options, you might want to load options only of the most top levels on initial load, and load the rest only when needed. You can achieve that by following these steps:
@@ -130,6 +131,14 @@
     - `node` - a normalized node object (note that, this is differnt from what you return from `normalizer()` prop)
   +demo('CustomizeValueLabel')
 
+
++subsection('Custom Arrow Icon')
+  :markdown-it
+    You can customize the arrow icon. vue-treeselect utilizes Vue's [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) feature and provides some props you should use in your customized template:
+
+    - `isOpen` - true if the menu is open, false otherwise
+  +demo('CustomArrowIcon')
+
 +subsection('Vuex Support')
   :markdown-it
       In all previous examples, we used `v-model` to sync value between application state and vue-treeselect, a.k.a two-way data binding. If you are using Vuex, we could make use of `:value` and `@input`, since `v-model` is just a syntax sugar for them in Vue 2.

src/components/Control.vue

@@ -57,12 +57,18 @@
     methods: {
       renderX() {
         const { instance } = this
-        const title = instance.multiple ? instance.clearAllText : instance.clearValueText
+        const title = instance.multiple
+          ? instance.clearAllText
+          : instance.clearValueText
 
         if (!this.shouldShowX) return null
 
         return (
-          <div class="vue-treeselect__x-container" title={title} onMousedown={this.handleMouseDownOnX}>
+          <div
+            class="vue-treeselect__x-container"
+            title={title}
+            onMousedown={this.handleMouseDownOnX}
+          >
             <DeleteIcon class="vue-treeselect__x" />
           </div>
         )
@@ -77,9 +83,17 @@
 
         if (!this.shouldShowArrow) return null
 
+        const arrowIconRenderer = instance.$scopedSlots['arrow-icon']
         return (
-          <div class="vue-treeselect__control-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
-            <ArrowIcon class={arrowClass} />
+          <div
+            class="vue-treeselect__control-arrow-container"
+            onMousedown={this.handleMouseDownOnArrow}
+          >
+            {arrowIconRenderer ? (
+              arrowIconRenderer({ isOpen: instance.menu.isOpen })
+            ) : (
+              <ArrowIcon class={arrowClass} />
+            )}
           </div>
         )
       },
@@ -129,11 +143,7 @@
 
       // This is meant to be called by child `<Value />` component.
       renderValueContainer(children) {
-        return (
-          <div class="vue-treeselect__value-container">
-            {children}
-          </div>
-        )
+        return <div class="vue-treeselect__value-container">{children}</div>
       },
     },
 
@@ -142,7 +152,10 @@
       const ValueContainer = instance.single ? SingleValue : MultiValue
 
       return (
-        <div class="vue-treeselect__control" onMousedown={instance.handleMouseDown}>
+        <div
+          class="vue-treeselect__control"
+          onMousedown={instance.handleMouseDown}
+        >
           <ValueContainer ref="value-container" />
           {this.renderX()}
           {this.renderArrow()}

test/unit/specs/Control.spec.js

@@ -18,4 +18,35 @@ describe('Control', () => {
     leftClick(arrow)
     expect(wrapper.vm.menu.isOpen).toBe(false)
   })
+
+  it('should render custom slot if provided', () => {
+    const openLabel = 'O'
+    const closeLabel = 'C'
+    const template = `
+    <treeselect ref="treeselect" :options="options" v-model="value">
+      <template slot="arrow-icon" slot-scope="{ isOpen }">
+        {{ isOpen ? "${openLabel}" : "${closeLabel}" }}
+      </template>
+    </treeselect>
+    `
+
+    const wrapper = mount({
+      template,
+      components: { Treeselect },
+      data() {
+        return {
+          options: [],
+          value: '',
+        }
+      },
+    })
+
+    const treeselect = wrapper.vm.$refs.treeselect
+    expect(treeselect.menu.isOpen).toBe(false)
+    const arrowLabel = wrapper.find('.vue-treeselect__control-arrow-container')
+    expect(arrowLabel.text()).toBe(closeLabel)
+    leftClick(arrowLabel)
+    expect(treeselect.menu.isOpen).toBe(true)
+    expect(arrowLabel.text()).toBe(openLabel)
+  })
 })