Skip to content

Commit 02c6548

Browse files
grapozagrapoza
committed
Add a wrapper div to child/loading area
1 parent f8cd492 commit 02c6548

File tree

3 files changed

+92
-83
lines changed

3 files changed

+92
-83
lines changed

‎docsrc/index.md‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,7 @@ The display of the treeview can be customized via CSS using the following classe
295295
| `tree-view-node-self-sibling-drop-target-hover` | A node has another node dragged over one of the sibling drop targets |
296296
| `tree-view-node-self-prev-target` | The previous sibling node drop target |
297297
| `tree-view-node-self-next-target` | The next sibling node drop target |
298+
| `tree-view-node-children-wrapper` | The wrapper div around the list of child nodes and the loading placeholder |
298299
| `tree-view-node-children` | The list of child nodes |
299300
| `tree-view-node-loading` | The placeholder shown when child nodes are loading asynchronously |
300301
| `tree-view-node-dragging` | The node is dragged as part of a drag and drop operation |
@@ -307,28 +308,29 @@ It's often helpful to be able to make adjustments to the markup or styles for th
307308

308309
A customizations object may have the following properties:
309310

310-
| Prop | Type | Description |
311-
|:------------------------------------------|:-------|:------------------------------------------------------------------------|
312-
| classes | Object | Properties are classes to add for various parts of a node |
313-
| classes.treeViewNode | String | Classes to add to a node's list item |
314-
| classes.treeViewNodeSelf | String | Classes to add to the div containing the current node's UI |
315-
| classes.treeViewNodeSelfSelected | String | Classes to add to the `tree-view-node-self` div if the node is selected |
316-
| classes.treeViewNodeSelfExpander | String | Classes to add to the button used to expand the children |
317-
| classes.treeViewNodeSelfExpanded | String | Classes to add to the expander button when the node is expanded |
318-
| classes.treeViewNodeSelfExpandedIndicator | String | Classes to add to the `<i>` element containing the expansion indicator |
319-
| classes.treeViewNodeSelfSpacer | String | Classes to add to the fixed-width spacer |
320-
| classes.treeViewNodeSelfLabel | String | Classes to add to the label for the checkbox of checkable nodes |
321-
| classes.treeViewNodeSelfInput | String | Classes to add to an input field |
322-
| classes.treeViewNodeSelfCheckbox | String | Classes to add to the checkbox |
323-
| classes.treeViewNodeSelfRadio | String | Classes to add to the radio button |
324-
| classes.treeViewNodeSelfText | String | Classes to add to the text for a non-input node |
325-
| classes.treeViewNodeSelfAction | String | Classes to add to the action buttons |
326-
| classes.treeViewNodeSelfAddChild | String | Classes to add to the add child buttons |
327-
| classes.treeViewNodeSelfAddChildIcon | String | Classes to add to the `<i>` element containing the add child icon |
328-
| classes.treeViewNodeSelfDelete | String | Classes to add to the delete button |
329-
| classes.treeViewNodeSelfDeleteIcon | String | Classes to add to the `<i>` element containing the delete icon |
330-
| classes.treeViewNodeChildren | String | Classes to add to the list of child nodes |
331-
| classes.treeViewNodeLoading | String | Classes to add to the loading placeholder |
311+
| Prop | Type | Description |
312+
|:------------------------------------------|:-------|:---------------------------------------------------------------------------------------------|
313+
| classes | Object | Properties are classes to add for various parts of a node |
314+
| classes.treeViewNode | String | Classes to add to a node's list item |
315+
| classes.treeViewNodeSelf | String | Classes to add to the div containing the current node's UI |
316+
| classes.treeViewNodeSelfSelected | String | Classes to add to the `tree-view-node-self` div if the node is selected |
317+
| classes.treeViewNodeSelfExpander | String | Classes to add to the button used to expand the children |
318+
| classes.treeViewNodeSelfExpanded | String | Classes to add to the expander button when the node is expanded |
319+
| classes.treeViewNodeSelfExpandedIndicator | String | Classes to add to the `<i>` element containing the expansion indicator |
320+
| classes.treeViewNodeSelfSpacer | String | Classes to add to the fixed-width spacer |
321+
| classes.treeViewNodeSelfLabel | String | Classes to add to the label for the checkbox of checkable nodes |
322+
| classes.treeViewNodeSelfInput | String | Classes to add to an input field |
323+
| classes.treeViewNodeSelfCheckbox | String | Classes to add to the checkbox |
324+
| classes.treeViewNodeSelfRadio | String | Classes to add to the radio button |
325+
| classes.treeViewNodeSelfText | String | Classes to add to the text for a non-input node |
326+
| classes.treeViewNodeSelfAction | String | Classes to add to the action buttons |
327+
| classes.treeViewNodeSelfAddChild | String | Classes to add to the add child buttons |
328+
| classes.treeViewNodeSelfAddChildIcon | String | Classes to add to the `<i>` element containing the add child icon |
329+
| classes.treeViewNodeSelfDelete | String | Classes to add to the delete button |
330+
| classes.treeViewNodeSelfDeleteIcon | String | Classes to add to the `<i>` element containing the delete icon |
331+
| classes.treeViewNodeChildrenWrapper | String | Classes to add to the wrapper div around the list of child nodes and the loading placeholder |
332+
| classes.treeViewNodeChildren | String | Classes to add to the list of child nodes |
333+
| classes.treeViewNodeLoading | String | Classes to add to the loading placeholder |
332334

333335
### Skins
334336

‎src/components/TreeViewNode.vue‎

Lines changed: 62 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -155,64 +155,67 @@
155155
</div>
156156

157157
<!-- Children and Loading Placholder -->
158-
<slot v-if="model.treeNodeSpec.state.expanded && canExpand && !areChildrenLoaded"
159-
name="loading"
160-
:model="model"
161-
:customClasses="customClasses">
162-
163-
<span class="tree-view-node-loading"
164-
:class="customClasses.treeViewNodeLoading">
165-
...
166-
</span>
167-
</slot>
168-
<ul v-show="model.treeNodeSpec.state.expanded"
169-
v-if="canExpand && areChildrenLoaded"
170-
class="tree-view-node-children"
171-
:class="customClasses.treeViewNodeChildren"
172-
role="group"
173-
:aria-hidden="(!model.treeNodeSpec.state.expanded).toString()">
174-
<TreeViewNode v-for="nodeModel in children"
175-
:key="nodeModel[nodeModel.treeNodeSpec && nodeModel.treeNodeSpec.idProperty ? nodeModel.treeNodeSpec.idProperty : 'id']"
176-
:depth="depth + 1"
177-
:initial-model="nodeModel"
178-
:model-defaults="modelDefaults"
179-
:parent-id="id"
180-
:selection-mode="selectionMode"
181-
:tree-id="treeId"
182-
:initial-radio-group-values="radioGroupValues"
183-
:aria-key-map="ariaKeyMap"
184-
:is-mounted="isMounted"
185-
@treeViewNodeClick="(t, e)=>$emit(TvEvent.Click, t, e)"
186-
@treeViewNodeDblclick="(t, e)=>$emit(TvEvent.DoubleClick, t, e)"
187-
@treeViewNodeCheckboxChange="(t, e)=>$emit(TvEvent.CheckboxChange, t, e)"
188-
@treeViewNodeRadioChange="(t, e)=>$emit(TvEvent.RadioChange, t, e)"
189-
@treeViewNodeExpandedChange="(t, e)=>$emit(TvEvent.ExpandedChange, t, e)"
190-
@treeViewNodeChildrenLoad="(t, e)=>$emit(TvEvent.ChildrenLoad, t, e)"
191-
@treeViewNodeSelectedChange="(t, e)=>$emit(TvEvent.SelectedChange, t, e)"
192-
@treeViewNodeAdd="(t, p, e)=>$emit(TvEvent.Add, t, p, e)"
193-
@treeViewNodeDelete="$_treeViewNode_handleChildDeletion"
194-
@treeViewNodeAriaFocusableChange="(t)=>$emit(TvEvent.FocusableChange, t)"
195-
@treeViewNodeAriaRequestParentFocus="$_treeViewNodeAria_focus"
196-
@treeViewNodeAriaRequestFirstFocus="()=>$emit(TvEvent.RequestFirstFocus)"
197-
@treeViewNodeAriaRequestLastFocus="()=>$emit(TvEvent.RequestLastFocus)"
198-
@treeViewNodeAriaRequestPreviousFocus="$_treeViewNodeAria_handlePreviousFocus"
199-
@treeViewNodeAriaRequestNextFocus="$_treeViewNodeAria_handleNextFocus"
200-
@treeViewNodeDragMove="$_treeViewNodeDnd_dragMoveChild"
201-
@treeViewNodeDrop="$_treeViewNodeDnd_drop">
202-
<template #checkbox="{ model, customClasses, inputId, checkboxChangeHandler }">
203-
<slot name="checkbox" :model="model" :customClasses="customClasses" :inputId="inputId" :checkboxChangeHandler="checkboxChangeHandler"></slot>
204-
</template>
205-
<template #radio="{ model, customClasses, inputId, inputModel, radioChangeHandler }">
206-
<slot name="radio" :model="model" :customClasses="customClasses" :inputId="inputId" :inputModel="inputModel" :radioChangeHandler="radioChangeHandler"></slot>
207-
</template>
208-
<template #text="{ model, customClasses }">
209-
<slot name="text" :model="model" :customClasses="customClasses"></slot>
210-
</template>
211-
<template #loading="{ model, customClasses }">
212-
<slot name="loading" :model="model" :customClasses="customClasses"></slot>
213-
</template>
214-
</TreeViewNode>
215-
</ul>
158+
<div class="tree-view-node-children-wrapper"
159+
:class="customClasses.treeViewNodeChildrenWrapper">
160+
<slot v-if="model.treeNodeSpec.state.expanded && canExpand && !areChildrenLoaded"
161+
name="loading"
162+
:model="model"
163+
:customClasses="customClasses">
164+
165+
<span class="tree-view-node-loading"
166+
:class="customClasses.treeViewNodeLoading">
167+
...
168+
</span>
169+
</slot>
170+
<ul v-show="model.treeNodeSpec.state.expanded"
171+
v-if="canExpand && areChildrenLoaded"
172+
class="tree-view-node-children"
173+
:class="customClasses.treeViewNodeChildren"
174+
role="group"
175+
:aria-hidden="(!model.treeNodeSpec.state.expanded).toString()">
176+
<TreeViewNode v-for="nodeModel in children"
177+
:key="nodeModel[nodeModel.treeNodeSpec && nodeModel.treeNodeSpec.idProperty ? nodeModel.treeNodeSpec.idProperty : 'id']"
178+
:depth="depth + 1"
179+
:initial-model="nodeModel"
180+
:model-defaults="modelDefaults"
181+
:parent-id="id"
182+
:selection-mode="selectionMode"
183+
:tree-id="treeId"
184+
:initial-radio-group-values="radioGroupValues"
185+
:aria-key-map="ariaKeyMap"
186+
:is-mounted="isMounted"
187+
@treeViewNodeClick="(t, e)=>$emit(TvEvent.Click, t, e)"
188+
@treeViewNodeDblclick="(t, e)=>$emit(TvEvent.DoubleClick, t, e)"
189+
@treeViewNodeCheckboxChange="(t, e)=>$emit(TvEvent.CheckboxChange, t, e)"
190+
@treeViewNodeRadioChange="(t, e)=>$emit(TvEvent.RadioChange, t, e)"
191+
@treeViewNodeExpandedChange="(t, e)=>$emit(TvEvent.ExpandedChange, t, e)"
192+
@treeViewNodeChildrenLoad="(t, e)=>$emit(TvEvent.ChildrenLoad, t, e)"
193+
@treeViewNodeSelectedChange="(t, e)=>$emit(TvEvent.SelectedChange, t, e)"
194+
@treeViewNodeAdd="(t, p, e)=>$emit(TvEvent.Add, t, p, e)"
195+
@treeViewNodeDelete="$_treeViewNode_handleChildDeletion"
196+
@treeViewNodeAriaFocusableChange="(t)=>$emit(TvEvent.FocusableChange, t)"
197+
@treeViewNodeAriaRequestParentFocus="$_treeViewNodeAria_focus"
198+
@treeViewNodeAriaRequestFirstFocus="()=>$emit(TvEvent.RequestFirstFocus)"
199+
@treeViewNodeAriaRequestLastFocus="()=>$emit(TvEvent.RequestLastFocus)"
200+
@treeViewNodeAriaRequestPreviousFocus="$_treeViewNodeAria_handlePreviousFocus"
201+
@treeViewNodeAriaRequestNextFocus="$_treeViewNodeAria_handleNextFocus"
202+
@treeViewNodeDragMove="$_treeViewNodeDnd_dragMoveChild"
203+
@treeViewNodeDrop="$_treeViewNodeDnd_drop">
204+
<template #checkbox="{ model, customClasses, inputId, checkboxChangeHandler }">
205+
<slot name="checkbox" :model="model" :customClasses="customClasses" :inputId="inputId" :checkboxChangeHandler="checkboxChangeHandler"></slot>
206+
</template>
207+
<template #radio="{ model, customClasses, inputId, inputModel, radioChangeHandler }">
208+
<slot name="radio" :model="model" :customClasses="customClasses" :inputId="inputId" :inputModel="inputModel" :radioChangeHandler="radioChangeHandler"></slot>
209+
</template>
210+
<template #text="{ model, customClasses }">
211+
<slot name="text" :model="model" :customClasses="customClasses"></slot>
212+
</template>
213+
<template #loading="{ model, customClasses }">
214+
<slot name="loading" :model="model" :customClasses="customClasses"></slot>
215+
</template>
216+
</TreeViewNode>
217+
</ul>
218+
</div>
216219
</li>
217220
</template>
218221

@@ -832,14 +835,12 @@
832835
}
833836
}
834837
835-
// Loading slot content
836-
.tree-view-node-loading {
838+
.tree-view-node-children-wrapper {
837839
margin: 0 0 0 (1rem + $itemSpacing);
838840
}
839841
840842
// The node's child list
841843
.tree-view-node-children {
842-
margin: 0 0 0 (1rem + $itemSpacing);
843844
padding: 0;
844845
list-style: none;
845846
}

‎tests/unit/TreeViewNode.customizations.spec.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ describe('TreeViewNode.vue (customizations)', () => {
6868
treeViewNodeSelfAddChildIcon: 'customnodeselfaddchildiconclass',
6969
treeViewNodeSelfDelete: 'customnodeselfdeleteclass',
7070
treeViewNodeSelfDeleteIcon: 'customnodeselfdeleteiconclass',
71+
treeViewNodeChildrenWrapper: 'customnodechildrenwrapperclass',
7172
treeViewNodeChildren: 'customnodechildrenclass',
7273
treeViewNodeLoading: 'customnodeloadingclass'
7374
}
@@ -178,6 +179,11 @@ describe('TreeViewNode.vue (customizations)', () => {
178179
expect(target.exists()).to.be.true;
179180
});
180181

182+
it('should add the custom class to the tree view node\'s children wrapper element', () => {
183+
let target = wrapper.find('.tree-view-node-children-wrapper.' + customizations.classes.treeViewNodeChildrenWrapper);
184+
expect(target.exists()).to.be.true;
185+
});
186+
181187
it('should add the custom class to the tree view node\'s children element', () => {
182188
let target = wrapper.find('.tree-view-node-children.' + customizations.classes.treeViewNodeChildren);
183189
expect(target.exists()).to.be.true;

0 commit comments

Comments
 (0)