From e2440ffd45f570536960d18aa29b6af2dbf3596d Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim@cnvrg.io>
Date: Thu, 28 Nov 2019 15:01:24 +0200
Subject: [PATCH 1/2] add custom arrow slot

---
 src/components/Control.vue      | 33 +++++++++++++++++++++++----------
 test/unit/specs/Control.spec.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/components/Control.vue b/src/components/Control.vue
index efc67ddc..5227fde7 100644
--- a/src/components/Control.vue
+++ b/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()}
diff --git a/test/unit/specs/Control.spec.js b/test/unit/specs/Control.spec.js
index 14825585..f324b638 100644
--- a/test/unit/specs/Control.spec.js
+++ b/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)
+  })
 })

From 6ce73f4784816ec4aa98cd16f69ba4e9d16c277e Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim@cnvrg.io>
Date: Thu, 28 Nov 2019 15:01:36 +0200
Subject: [PATCH 2/2] add docs for custom arrow

---
 docs/components/CustomArrowIcon.vue | 66 +++++++++++++++++++++++++++++
 docs/partials/guides.pug            |  9 ++++
 2 files changed, 75 insertions(+)
 create mode 100644 docs/components/CustomArrowIcon.vue

diff --git a/docs/components/CustomArrowIcon.vue b/docs/components/CustomArrowIcon.vue
new file mode 100644
index 00000000..ec8e7302
--- /dev/null
+++ b/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>
diff --git a/docs/partials/guides.pug b/docs/partials/guides.pug
index 106f2051..b6b763b4 100644
--- a/docs/partials/guides.pug
+++ b/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.