73 lines
2.6 KiB
HTML
73 lines
2.6 KiB
HTML
<template name="selectTree">
|
|
{{#group (extend this
|
|
class=(concat
|
|
'select-tree '
|
|
(valueIf this.root '' 'select-tree-root ')
|
|
this.class
|
|
)
|
|
mixins=(concat 'selectTree ' this.mixins)
|
|
)}}
|
|
{{>UI.contentBlock}}
|
|
{{#let currentNode=this.currentNode.get}}
|
|
{{#if (and (not this.root) (ne this.search false))}}
|
|
{{>inputText
|
|
label=this.label
|
|
labelClass='tree-search'
|
|
placeholder=(choose this.searchPlaceholder 'Search')
|
|
}}
|
|
{{/if}}
|
|
<div class="tree-options {{#if currentNode}}collapsed{{/if}}">
|
|
{{#if this.root}}
|
|
{{>selectTreeBreadcrumb component=this.component}}
|
|
{{/if}}
|
|
{{#each item in (reactive this.items)}}
|
|
{{>inputRadio
|
|
class=this.radioClass
|
|
name=this.key
|
|
value=item.value
|
|
label=item.label
|
|
labelClass=(valueIf (isArray item.items) 'tree-node' 'tree-leaf')
|
|
checked=(eq item.value (reactive this.value))
|
|
}}
|
|
{{/each}}
|
|
</div>
|
|
{{#if (and currentNode (isArray currentNode.items))}}
|
|
{{>selectTree (clone this
|
|
items=currentNode.items
|
|
root=(choose this.root this.component)
|
|
class='select-tree-node'
|
|
)}}
|
|
{{/if}}
|
|
{{/let}}
|
|
{{/group}}
|
|
</template>
|
|
|
|
<template name="selectTreeBreadcrumb">
|
|
<div class="tree-breadcrumb">
|
|
{{>selectTreeBreadcrumbParent
|
|
component=this.component.parent
|
|
index=1
|
|
}}
|
|
{{#let currentNode=this.component.parent.templateInstance.data.currentNode.get}}
|
|
<span class="tree-current-node">{{currentNode.label}}</span>
|
|
{{/let}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="selectTreeBreadcrumbParent">
|
|
{{#let parent=this.component.parent}}
|
|
{{#let parentNode=(reactive parent.templateInstance.data.currentNode)}}
|
|
{{#if parentNode}}
|
|
{{>selectTreeBreadcrumbParent
|
|
component=parent
|
|
index=(sum this.index 1)
|
|
}}
|
|
<a href="#" class="tree-back" data-index="{{this.index}}">{{parentNode.label}}</a>
|
|
<span>/</span>
|
|
{{else}}
|
|
<a href="#" class="tree-back" data-index="{{this.index}}"><i class="fa fa-fast-backward"></i></a>
|
|
{{/if}}
|
|
{{/let}}
|
|
{{/let}}
|
|
</template>
|