feat: add before and after value slots

docs/components/DocSlots.vue

@@ -45,6 +45,16 @@ export default {
           "#customize-value-label"
         )} for detailed information.`,
       },
+      {
+        name: "before-value",
+        props: "-",
+        description: `Slot showed before value container`,
+      },
+      {
+        name: "after-value",
+        props: "-",
+        description: `Slot showed after value container`,
+      },
       {
         name: "before-list",
         props: "-",

src/components/Control.vue

@@ -55,6 +55,19 @@ export default {
   },
 
   methods: {
+    renderBeforeValue() {
+      const { instance } = this;
+      const beforeValueRenderer = instance.$scopedSlots["before-value"];
+
+      return beforeValueRenderer ? beforeValueRenderer() : null;
+    },
+    renderAfterValue() {
+      const { instance } = this;
+      const afterValueRenderer = instance.$scopedSlots["after-value"];
+
+      return afterValueRenderer ? afterValueRenderer() : null;
+    },
+
     renderX() {
       const { instance } = this;
       const title = instance.multiple
@@ -151,9 +164,11 @@ export default {
         class="vue-treeselect__control"
         onMousedown={instance.handleMouseDown}
       >
+        {this.renderBeforeValue()}
         <ValueContainer ref="value-container" />
         {this.renderX()}
         {this.renderArrow()}
+        {this.renderAfterValue()}
       </div>
     );
   },

src/style.less

@@ -350,9 +350,11 @@
  */
 
 .vue-treeselect__control {
-  .row();
-
-  height: @treeselect-control-height;
+  .horizontal-padding(@treeselect-padding);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  min-height: @treeselect-control-height;
   border: @treeselect-control-border-width solid
     @treeselect-control-border-color;
   border-radius: @treeselect-control-border-radius;
@@ -425,7 +427,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  line-height: @treeselect-control-inner-height;
   user-select: none;
   pointer-events: none;
 }
@@ -541,7 +542,6 @@
 
 .vue-treeselect__multi-value-label {
   padding-right: @treeselect-multi-value-padding-x;
-  white-space: pre-line;
   user-select: none;
 }
 
@@ -1164,4 +1164,4 @@
   border: 0;
   overflow: visible;
   box-sizing: border-box;
-}
+}