Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
+195 −33
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
617133d
add custom class to value labeling in multi-select
tirthGajjar Aug 3, 2019
b508ee2
added customClass attribute to node
tirthGajjar Aug 3, 2019
2965332
added formatting
tirthGajjar Aug 3, 2019
53cdd51
fixed indentation issues
tirthGajjar Aug 3, 2019
dd8e912
formated
tirthGajjar Aug 3, 2019
f26782c
removed eslint errors
tirthGajjar Aug 3, 2019
ff0abe6
uncommented slots spec
tirthGajjar Aug 3, 2019
a9500cb
added test coverage
tirthGajjar Aug 3, 2019
ca38070
commented slots
tirthGajjar Aug 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 88 additions & 7 deletions docs/components/CustomizeValueLabel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<template>
<div>
<treeselect :options="options" :value="value" :multiple="multiple">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.customLabel }}</div>
<div slot="value-label" slot-scope="{ node }">
{{ node.raw.customLabel }}
</div>
</treeselect>
<p>
<label><input type="checkbox" v-model="multiple">Multi-select</label>
<label>
<input type="checkbox" v-model="multiple">
Multi-select
</label>
</p>
</div>
</template>
Expand All @@ -14,11 +19,87 @@
data: () => ({
multiple: true,
value: null,
options: [ 1, 2, 3 ].map(i => ({
id: i,
label: `Label ${i}`,
customLabel: `Custom Label ${i}`,
})),
options: [ {
id: 'fruits',
label: 'Fruits with custom colors',
customLabel: 'Fruits 🍎 🍇 🍐 🍓 🍉',
customClass: 'fruit-yellow',
children: [ {
id: 'apple',
label: 'Apple 🍎',
customLabel: '🍎',
customClass: 'fruit-red',
},
{
id: 'grapes',
customClass: 'fruit-green',
label: 'Grapes 🍇',
customLabel: '🍇',
},
{
id: 'pear',
customClass: 'fruit-yellow',
label: 'Pear 🍐',
customLabel: '🍐',
},
{
id: 'strawberry',
customClass: 'fruit-red',
label: 'Strawberry 🍓',
customLabel: '🍓',
},
{
id: 'watermelon',
customClass: 'fruit-green',
label: 'Watermelon 🍉',
customLabel: '🍉',
},
],
},
{
id: 'vegetables',
label: 'Vegetables',
customLabel: 'Vegetables 🌽🥕🍆🍅',
children: [ {
id: 'corn',
label: 'Corn 🌽',
customLabel: '🌽',
},
{
id: 'carrot',
label: 'Carrot 🥕',
customLabel: '🥕',
},
{
id: 'eggplant',
label: 'Eggplant 🍆',
customLabel: '🍆',
},
{
id: 'tomato',
label: 'Tomato 🍅',
customLabel: '🍅',
},
],
},
],
}),
}
</script>

<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>
5 changes: 5 additions & 0 deletions docs/components/DocNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@
<td class="type">Boolean</td>
<td>Used for giving new nodes a different color.</td>
</tr>
<tr>
<td><strong>customClass</strong></td>
<td class="type">Boolean</td>
<td>Can be utilized to give new styles to value labels.</td>
</tr>
<tr>
<td><strong>isDefaultExpanded</strong></td>
<td class="type">Boolean</td>
Expand Down
12 changes: 9 additions & 3 deletions src/components/MultiValueItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,25 @@

render() {
const { instance, node } = this
const customClass = node.customClass ? node.customClass : ''
const itemClass = {
'vue-treeselect__multi-value-item': true,
'vue-treeselect__multi-value-item-disabled': node.isDisabled,
'vue-treeselect__multi-value-item-new': node.isNew,
[customClass]: !!customClass,
}
const customValueLabelRenderer = instance.$scopedSlots['value-label']
const labelRenderer = customValueLabelRenderer ? customValueLabelRenderer({ node }) : node.label
const labelRenderer = customValueLabelRenderer
? customValueLabelRenderer({ node })
: node.label

return (
<div class="vue-treeselect__multi-value-item-container">
<div class={itemClass} onMousedown={this.handleMouseDown}>
<span class="vue-treeselect__multi-value-label">{ labelRenderer }</span>
<span class="vue-treeselect__icon vue-treeselect__value-remove"><DeleteIcon /></span>
<span class="vue-treeselect__multi-value-label">{labelRenderer}</span>
<span class="vue-treeselect__icon vue-treeselect__value-remove">
<DeleteIcon />
</span>
</div>
</div>
)
Expand Down
3 changes: 3 additions & 0 deletions src/mixins/treeselectMixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -997,6 +997,7 @@ export default {
isBranch: false,
isDisabled: false,
isNew: false,
customClass: '',
index: [ -1 ],
level: 0,
raw,
Expand Down Expand Up @@ -1533,6 +1534,7 @@ export default {
const isLeaf = !isBranch
const isDisabled = !!node.isDisabled || (!this.flat && !isRootNode && parentNode.isDisabled)
const isNew = !!node.isNew
const customClass = node.customClass || ''
const lowerCased = this.matchKeys.reduce((prev, key) => ({
...prev,
[key]: stringifyOptionPropValue(node[key]).toLocaleLowerCase(),
Expand All @@ -1552,6 +1554,7 @@ export default {
this.$set(normalized, 'nestedSearchLabel', nestedSearchLabel)
this.$set(normalized, 'isDisabled', isDisabled)
this.$set(normalized, 'isNew', isNew)
this.$set(normalized, 'customClass', customClass)
this.$set(normalized, 'isMatched', false)
this.$set(normalized, 'isHighlighted', false)
this.$set(normalized, 'isBranch', isBranch)
Expand Down
2 changes: 2 additions & 0 deletions test/unit/specs/Basic.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ describe('Basic', () => {
isHighlighted: jasmine.any(Boolean),
isDisabled: jasmine.any(Boolean),
isNew: jasmine.any(Boolean),
customClass: jasmine.any(String),
parentNode: jasmine.any(Object),
ancestors: jasmine.any(Array),
index: jasmine.any(Array),
Expand Down Expand Up @@ -550,6 +551,7 @@ describe('Basic', () => {
isBranch: false,
isDisabled: false,
isNew: false,
customClass: '',
index: [ -1 ],
level: 0,
raw: {
Expand Down
38 changes: 22 additions & 16 deletions test/unit/specs/Slots.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
// import { mount } from '@vue/test-utils'
// import Treeselect from '@src/components/Treeselect'
// import { findLabelByNodeId } from './shared'
// import Treeselect from '@src/components/Treeselect'

// Currently @vue/test-utils doesn't properly handle scoped slots.
// // Currently @vue/test-utils doesn't properly handle scoped slots.

// describe('Slots', () => {
// it('option-label', async () => {
// const getLabelText = nodeId => findLabelByNodeId(wrapper, nodeId).element.textContent.trim()
// const getLabelText = nodeId =>
// findLabelByNodeId(wrapper, nodeId).element.textContent.trim()
// const wrapper = mount(Treeselect, {
// propsData: {
// options: [ {
// id: 'a',
// label: 'a',
// children: [ {
// id: 'aa',
// label: 'aa',
// } ],
// }, {
// id: 'b',
// label: 'b',
// } ],
// options: [
// {
// id: 'a',
// label: 'a',
// children: [
// {
// id: 'aa',
// label: 'aa',
// },
// ],
// },
// {
// id: 'b',
// label: 'b',
// },
// ],
// defaultExpandLevel: Infinity,
// },
// scopedSlots: {
Expand All @@ -32,10 +38,10 @@
// },
// })
// const { vm } = wrapper
//

// vm.openMenu()
// await vm.$nextTick()
//

// expect(getLabelText('a')).toBe('Branch: a')
// expect(getLabelText('aa')).toBe('Leaf: aa')
// expect(getLabelText('b')).toBe('Branch: b')
Expand Down
44 changes: 44 additions & 0 deletions test/unit/specs/ValueLabelClass.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { mount } from '@vue/test-utils'
import { findMultiValueItemByNodeId } from './shared'
import Treeselect from '@src/components/Treeselect'

// Currently @vue/test-utils doesn't properly handle scoped slots.

describe('Value-label style', () => {
it('should be customizable', async () => {
const getLabelText = () => findMultiValueItemByNodeId(wrapper).element
const wrapper = mount(Treeselect, {
propsData: {
options: [
{
id: 'a',
label: 'a',
customClass: 'custom-class-for-a',
children: [
{
id: 'aa',
label: 'aa',
customClass: 'aa',
},
],
},
{
id: 'b',
label: 'b',
customClass: 'b',
},
],
defaultExpandLevel: Infinity,
multiple: true,
},
})
const { vm } = wrapper

vm.openMenu()
await vm.$nextTick()

wrapper.setProps({ multiple: true })
wrapper.setProps({ value: [ 'a', 'b' ] })
expect(getLabelText('a')).toHaveClass('custom-class-for-a')
})
})
29 changes: 22 additions & 7 deletions test/unit/specs/shared.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,9 @@ export async function typeSearchText(wrapper, text) {
const $input = findInput(wrapper)
$input.element.value = text
$input.trigger('input')
expect(wrapper.vm.$refs.control.$refs['value-container'].$refs.input.value).toBe(text)
expect(
wrapper.vm.$refs.control.$refs['value-container'].$refs.input.value,
).toBe(text)
await sleep(INPUT_DEBOUNCE_DELAY + 1)
expect(wrapper.vm.trigger.searchQuery).toBe(text)
}
Expand All @@ -127,35 +129,48 @@ export function findMenu(wrapper) {
}

export function findVisibleOptions(wrapper) {
return wrapper.findAll('.vue-treeselect__option:not(.vue-treeselect__option--hide)')
return wrapper.findAll(
'.vue-treeselect__option:not(.vue-treeselect__option--hide)',
)
}

export function findOptionByNodeId(wrapper, nodeId) {
return wrapper.find(`.vue-treeselect__option[data-id="${nodeId}"]`)
}

export function findOptionArrowContainerByNodeId(wrapper, nodeId) {
return findOptionByNodeId(wrapper, nodeId).find('.vue-treeselect__option-arrow-container')
return findOptionByNodeId(wrapper, nodeId).find(
'.vue-treeselect__option-arrow-container',
)
}

export function findOptionArrowByNodeId(wrapper, nodeId) {
return findOptionByNodeId(wrapper, nodeId).find('.vue-treeselect__option-arrow')
return findOptionByNodeId(wrapper, nodeId).find(
'.vue-treeselect__option-arrow',
)
}

export function findCheckboxByNodeId(wrapper, nodeId) {
return findOptionByNodeId(wrapper, nodeId).find('.vue-treeselect__checkbox')
}

export function findLabelContainerByNodeId(wrapper, nodeId) {
return findOptionByNodeId(wrapper, nodeId).find('.vue-treeselect__label-container')
return findOptionByNodeId(wrapper, nodeId).find(
'.vue-treeselect__label-container',
)
}

export function findLabelByNodeId(wrapper, nodeId) {
return findOptionByNodeId(wrapper, nodeId).find('.vue-treeselect__label')
}

export function findChildrenOptionListByNodeId(wrapper, nodeId) {
return wrapper.findAll(Option).wrappers
.find(optionWrapper => optionWrapper.vm.node.id === nodeId)
return wrapper
.findAll(Option)
.wrappers.find(optionWrapper => optionWrapper.vm.node.id === nodeId)
.find('.vue-treeselect__list')
}

export function findMultiValueItemByNodeId(wrapper) {
return wrapper.find(`.vue-treeselect__multi-value-item`)
}