Skip to content

Commit 2190a78

Browse files
grapozagrapoza
committed
Adds the ability to specify custom classes
1 parent 6cf3ad0 commit 2190a78

File tree

5 files changed

+207
-64
lines changed

5 files changed

+207
-64
lines changed

‎README.md

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ To see it in action, try out the Demos (coming soon; [#32](https://github.com/gr
102102
| Prop | Type | Description | Default value | Required |
103103
|:-----------------|:---------|:-------------------------------------------------------------------------------|:---------------|:---------|
104104
| model | Array | The data model containing [tree data](#tree-data) | - | Yes |
105+
| customizations | Object | A [customizations](#customizing-treeviewnode-markup) object | `{}` | |
105106
| radioGroupValues | Object | An object, the properties of which correspond to radio button group selections | `{}` | |
106107

107108
## Tree Data
@@ -146,23 +147,24 @@ The data passed to the treeview should be an array of nodes, where each node has
146147
}
147148
```
148149

149-
| Prop | Type | Description | Default value | Required |
150-
|:---------------------|:----------------|:---------------------------------------------------------|:----------------------------------|:---------|
151-
| id | Number/String | An ID that uniquely identifies this node within the tree | - | Yes |
152-
| label | String | The text to show in the treeview | - | Yes |
153-
| expandable | Boolean | True to show a toggle for expanding nodes' subnode lists | `true` | |
154-
| selectable | Boolean | True to allow the node to be selected* | `false` | |
155-
| input | Object | Contains data specific to the node's `input` element | `null` | |
156-
| input.type | String | The type of input; valid values are `checkbox` or `radio`| - | Yes** |
157-
| input.name | String | The name attribute of the input; used with `radio` type | `'unspecifiedRadioName'` | |
158-
| input.value | String | The value attribute of the input; used with `radio` type | `label`'s value*** | |
159-
| state | Object | Contains the current state of the node | - | |
160-
| state.expanded | Boolean | True if this node's subnode list is expanded | `false` | |
161-
| state.selected | Boolean | True if the node is selected* | `false` | |
162-
| state.input | Object | Contains any state related to the input field | `{}` for checkbox, otherwise - | |
163-
| state.input.value | Boolean | Contains the value of the input | `false` for checkbox, otherwise - | |
164-
| state.input.disabled | Boolean | True if the node's input field is disabled | `false` | |
165-
| children | Array\<Object\> | The child nodes of this node | `[]` | |
150+
| Prop | Type | Description | Default value | Required |
151+
|:---------------------|:----------------|:------------------------------------------------------------|:----------------------------------|:---------|
152+
| id | Number/String | An ID that uniquely identifies this node within the tree | - | Yes |
153+
| label | String | The text to show in the treeview | - | Yes |
154+
| expandable | Boolean | True to show a toggle for expanding nodes' subnode lists | `true` | |
155+
| selectable | Boolean | True to allow the node to be selected* | `false` | |
156+
| input | Object | Contains data specific to the node's `input` element | `null` | |
157+
| input.type | String | The type of input; valid values are `checkbox` or `radio` | - | Yes** |
158+
| input.name | String | The name attribute of the input; used with `radio` type | `'unspecifiedRadioName'` | |
159+
| input.value | String | The value attribute of the input; used with `radio` type | `label`'s value*** | |
160+
| state | Object | Contains the current state of the node | - | |
161+
| state.expanded | Boolean | True if this node's subnode list is expanded | `false` | |
162+
| state.selected | Boolean | True if the node is selected* | `false` | |
163+
| state.input | Object | Contains any state related to the input field | `{}` for checkbox, otherwise - | |
164+
| state.input.value | Boolean | Contains the value of the input | `false` for checkbox, otherwise - | |
165+
| state.input.disabled | Boolean | True if the node's input field is disabled | `false` | |
166+
| children | Array\<Object\> | The child nodes of this node | `[]` | |
167+
| customizations | Object | A [customizations](#customizing-treeviewnode-markup) object | `{}` | |
166168

167169
\* Selection props are unused; see [#5](https://github.com/grapoza/vue-tree/issues/5).
168170

@@ -201,8 +203,30 @@ The display of the treeview can be customized via CSS using the following classe
201203
| `tree-view-node-self-expanded-indicator` | The `<i>` element containing the expansion indicator |
202204
| `tree-view-node-self-spacer` | An empty spacer to replace fixed-width elements, _e.g._ the expander or checkbox |
203205
| `tree-view-node-self-label` | The label for the checkbox of checkable nodes |
204-
| `tree-view-node-self-input` | Any type of input node within the tree node |
206+
| `tree-view-node-self-input` | Any type of input field within the tree node |
205207
| `tree-view-node-self-checkbox` | The checkbox |
206208
| `tree-view-node-self-radio` | The radio button |
207209
| `tree-view-node-self-text` | The text for a non-input node |
208-
| `tree-view-node-children` | The list of child nodes |
210+
| `tree-view-node-children` | The list of child nodes |
211+
212+
## Customizing TreeViewNode Markup
213+
214+
It's often helpful to be able to make adjustments to the markup for the tree. You can provide an object to the `customizations` property of the tree to set a customization affecting all nodes, or to the `customizations` property of a single node. Node-specific customizations will either add to or replace tree-level customizations (see Override Behavior in the table below for specifics).
215+
216+
A customizations object may have the following properties:
217+
218+
| Prop | Type | Description | Override Behavior |
219+
|:------------------------------------------|:-------|:-----------------------------------------------------------------------|:------------------|
220+
| classes | Object | Properties are classes to add for various parts of a node | |
221+
| classes.treeViewNode | String | Classes to add to a node's list item | Add |
222+
| classes.treeViewNodeSelf | String | Classes to add to the div containing the current node's UI | Add |
223+
| classes.treeViewNodeSelfExpander | String | Classes to add to the button used to expand the children | Add |
224+
| classes.treeViewNodeSelfExpanded | String | Classes to add to the expander button when the node is expanded | Add |
225+
| classes.treeViewNodeSelfExpandedIndicator | String | Classes to add to the `<i>` element containing the expansion indicator | Add |
226+
| classes.treeViewNodeSelfSpacer | String | Classes to add to the fixed-width spacer | Add |
227+
| classes.treeViewNodeSelfLabel | String | Classes to add to the label for the checkbox of checkable nodes | Add |
228+
| classes.treeViewNodeSelfInput | String | Classes to add to an input field | Add |
229+
| classes.treeViewNodeSelfCheckbox | String | Classes to add to the checkbox | Add |
230+
| classes.treeViewNodeSelfRadio | String | Classes to add to the radio button | Add |
231+
| classes.treeViewNodeSelfText | String | Classes to add to the text for a non-input node | Add |
232+
| classes.treeViewNodeChildren | String | Classes to add to the list of child nodes | Add |

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"description": "Yet another Vue treeview component.",
44
"author": "Gregg Rapoza <[email protected]>",
55
"license": "MIT",
6-
"version": "0.3.5",
6+
"version": "0.3.6",
77
"browser": "index.js",
88
"repository": {
99
"url": "https://github.com/grapoza/vue-tree",

‎src/components/TreeView.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
:depth="0"
77
:tree-id="uniqueId"
88
:radio-group-values="radioGroupValues"
9+
:customizations="customizations"
910
@treeViewNodeClick="(t, e)=>$emit('treeViewNodeClick', t, e)"
1011
@treeViewNodeDblclick="(t, e)=>$emit('treeViewNodeDblclick', t, e)"
1112
@treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
@@ -28,6 +29,11 @@
2829
type: Array,
2930
required: true
3031
},
32+
customizations: {
33+
type: Object,
34+
required: false,
35+
default: function () { return {}; }
36+
},
3137
radioGroupValues: {
3238
type: Object,
3339
required: false,

‎src/components/TreeViewNode.vue

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
A Component meant to be used internally by the TreeView component. See README.md
44
for a description of the expected data format.
55
-->
6-
<li :id="nodeId" class="tree-view-node">
6+
<li :id="nodeId"
7+
class="tree-view-node"
8+
:class="customClasses.treeViewNode">
79
<div class="tree-view-node-self"
10+
:class="customClasses.treeViewNodeSelf"
811
@click="$_treeViewNode_onClick"
912
@dblclick="$_treeViewNode_onDblclick">
1013

@@ -13,27 +16,35 @@
1316
type="button"
1417
v-if="model.children.length > 0 && model.expandable"
1518
class="tree-view-node-self-expander"
16-
:class="{ 'tree-view-node-self-expanded': model.state.expanded }"
19+
:class="[customClasses.treeViewNodeSelfExpander,
20+
model.state.expanded ? 'tree-view-node-self-expanded' : '',
21+
model.state.expanded ? customClasses.treeViewNodeSelfExpanded : '']"
1722
@click="$_treeViewNode_onExpandedChange">
18-
<i class="tree-view-node-self-expanded-indicator"></i></button>
19-
<span v-else class="tree-view-node-self-spacer"></span>
23+
<i class="tree-view-node-self-expanded-indicator"
24+
:class="customClasses.treeViewNodeSelfExpandedIndicator"></i></button>
25+
<span v-else
26+
class="tree-view-node-self-spacer"
27+
:class="customClasses.treeViewNodeSelfSpacer"></span>
2028

2129
<!-- Input and label -->
2230
<label v-if="model.input"
2331
:for="inputId"
24-
class="tree-view-node-self-label">
32+
class="tree-view-node-self-label"
33+
:class="customClasses.treeViewNodeSelfLabel">
2534

2635
<input v-if="model.input.type === 'checkbox'"
2736
:id="inputId"
28-
:class="inputClass"
37+
class="tree-view-node-self-input tree-view-node-self-checkbox"
38+
:class="[customClasses.treeViewNodeSelfInput, customClasses.treeViewNodeSelfCheckbox]"
2939
:type="model.input.type"
3040
:disabled="model.state.input.disabled"
3141
v-model="model.state.input.value"
3242
@change="$_treeViewNode_onCheckboxChange" />
3343

3444
<input v-if="model.input.type === 'radio'"
3545
:id="inputId"
36-
:class="inputClass"
46+
class="tree-view-node-self-input tree-view-node-self-radio"
47+
:class="[customClasses.treeViewNodeSelfInput, customClasses.treeViewNodeSelfRadio]"
3748
:type="model.input.type"
3849
:name="model.input.name"
3950
:value="model.input.value"
@@ -44,21 +55,27 @@
4455
{{ model.label }}
4556
</label>
4657

47-
<!-- Text (if not checkable) -->
48-
<span v-else class="tree-view-node-self-text">{{ model.label }}</span>
58+
<!-- Text (if not an input) -->
59+
<span v-else
60+
class="tree-view-node-self-text"
61+
:class="customClasses.treeViewNodeSelfText">
62+
{{ model.label }}
63+
</span>
4964
</div>
5065

5166
<!-- Children -->
5267
<ul v-show="model.state.expanded"
5368
v-if="model.children.length > 0 && model.expandable"
54-
class="tree-view-node-children">
69+
class="tree-view-node-children"
70+
:class="customClasses.treeViewNodeChildren">
5571
<TreeViewNode v-for="nodeModel in model.children"
5672
:key="nodeModel.id"
5773
:depth="depth + 1"
5874
:model="nodeModel"
5975
:parent-id="model.id"
6076
:tree-id="treeId"
6177
:radio-group-values="radioGroupValues"
78+
:customizations="customizations"
6279
@treeViewNodeClick="(t, e)=>$emit('treeViewNodeClick', t, e)"
6380
@treeViewNodeDblclick="(t, e)=>$emit('treeViewNodeDblclick', t, e)"
6481
@treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
@@ -98,6 +115,10 @@
98115
type: Object,
99116
required: true
100117
},
118+
customizations: {
119+
type: Object,
120+
required: true
121+
},
101122
parentId: {
102123
type: [String, Number],
103124
required: false
@@ -114,35 +135,17 @@
114135
this.$_treeViewNode_normalizeNodeData();
115136
},
116137
computed: {
138+
customClasses() {
139+
return Object.assign({}, this.customizations.classes, (this.model.customizations || {}).classes);
140+
},
141+
expanderId() {
142+
return this.nodeId ? `${this.nodeId}-exp` : null;
143+
},
117144
nodeId() {
118145
return this.treeId ? `${this.treeId}-${this.model.id}` : null;
119146
},
120147
inputId() {
121148
return this.nodeId ? `${this.nodeId}-input` : null;
122-
},
123-
inputClass() {
124-
if (!this.model.input || typeof this.model.input !== 'object') {
125-
return null;
126-
}
127-
128-
let nodeInputClass = 'tree-view-node-self-input ';
129-
130-
switch (this.model.input.type) {
131-
case 'checkbox':
132-
nodeInputClass += 'tree-view-node-self-checkbox';
133-
break;
134-
case 'radio':
135-
nodeInputClass += 'tree-view-node-self-radio';
136-
break;
137-
default:
138-
nodeInputClass = null;
139-
break;
140-
}
141-
142-
return nodeInputClass;
143-
},
144-
expanderId() {
145-
return this.nodeId ? `${this.nodeId}-exp` : null;
146149
}
147150
},
148151
methods: {

0 commit comments

Comments
 (0)