Skip to content

Commit 68a3152

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

File tree

1 file changed

+61
-61
lines changed

1 file changed

+61
-61
lines changed

‎src/components/TreeViewNode.vue‎

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

@@ -832,14 +834,12 @@
832834
}
833835
}
834836
835-
// Loading slot content
836-
.tree-view-node-loading {
837+
.tree-view-node-child-wrapper {
837838
margin: 0 0 0 (1rem + $itemSpacing);
838839
}
839840
840841
// The node's child list
841842
.tree-view-node-children {
842-
margin: 0 0 0 (1rem + $itemSpacing);
843843
padding: 0;
844844
list-style: none;
845845
}

0 commit comments

Comments
 (0)