Added customClass attribute to node using which value-labels styles can be customized

[tirthGajjar]

I came across requirement of having customizable different colors for each value-label in multiselect.

Currently the value-label slot allows to change the label but the background color and other styles are defined from the parent of that slot.

This configuration will allow developers to add custom styles to value-labels in the node attributes itself.

You can define the styles for value-label in any CSS classes then
You can apply the styles by assigning those class values in customClass key in any node

Note: This is an optional attribute, not providing this value in any node will follow the default styles

.....
 options: [ {
        id: 'fruits',
        label: 'Fruits with custom colors',
        customLabel: 'Fruits 🍎 🍇 🍐 🍓 🍉', 
        customClass: 'fruit-yellow',
        children: [ {
          id: 'apple',
          label: 'Apple 🍎',
          customLabel:'🍎',
          customClass: 'fruit-red',
        }, {
          id: 'grapes',
          label: 'Grapes 🍇',
          customLabel:'🍇',
          customClass: 'fruit-green',
        } ]
      } ]
.....

<style lang="less">
	.fruit-yellow {
		background-color: yellow;
		color: black;
	}
	
	.fruit-red {
		background-color: red;
		color: white;
	}
	
	.fruit-green {
		background-color: green;
		color: white;
	}
</style>

.....

---

Preview

[codecov]

Codecov Report

Merging #277 into master will increase coverage by 0.00%.
The diff coverage is 75.00%.

@@           Coverage Diff           @@
##           master     #277   +/-   ##
=======================================
  Coverage   97.86%   97.87%           
=======================================
  Files          27       27           
  Lines        1030     1033    +3     
  Branches      101      102    +1     
=======================================
+ Hits         1008     1011    +3     
  Misses          9        9           
  Partials       13       13           

Impacted Files	Coverage Δ
src/components/MultiValueItem.vue	87.50% <50.00%> (+1.78%)	⬆️
src/mixins/treeselectMixin.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d4943eb...ca38070. Read the comment docs.