ul.w-tree(:class="classes")
li.w-tree__item(
v-for="(item, i) in currentDepthItems"
:key="i"
:class="itemClasses(item)")
//- The keys `route` & `disabled` are always present in any currentDepthItems.
component.w-tree__item-label(
:is="getTreeItemComponent(item)"
v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
@click="!disabled && !item.disabled && onLabelClick(item, $event)"
@pointerdown="onLabelPointerDown(item, $event)"
@keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
:class="itemLabelClasses(item)"
:tabindex="getTreeItemTabindex(item)")
//- @click.stop to not follow link if item is a link.
w-button.w-tree__item-expand(
v-if="(item.children || item.branch) && ((expandOpenIcon && item.open) || expandIcon) && !(unexpandableEmpty && !item.children)"
@click.stop="!disabled && !item.disabled && onLabelClick(item, $event)"
color="inherit"
:icon="(item.open && expandOpenIcon) || expandIcon"
:icon-props="{ rotate90a: !item.open }"
:tabindex="-1"
:disabled="disabled || item.disabled"
text
sm)
slot(
name="item"
:item="item.originalItem"
:depth="depth"
:path="item.path"
:open="item.open")
w-icon(
v-if="itemIcon(item)"
class="w-tree__item-icon"
:color="item.originalItem[itemIconColorKey] || iconColor").
{{ itemIcon(item) }}
span(v-html="item.label")
span.ml1(v-if="counts && (item.children || item.branch)").
({{ item.originalItem.children?.length || 0 }})
component(
:is="noTransition ? 'div' : 'w-transition-expand'"
:y="!noTransition || null"
@after-enter="$emit('open', emitPayload(item))"
@after-leave="$emit('close', emitPayload(item))")
w-tree(
v-if="item.children && item.open"
v-bind="$props"
:depth="depth + 1"
:data="item.originalItem.children"
:parent="item"
@before-open="$emit('before-open', $event)"
@open="$emit('open', $event)"
@before-close="$emit('before-close', $event)"
@close="$emit('close', $event)"
@click="$emit('click', $event)"
@select="$emit('select', $event)"
@update:model-value="$emit('update:model-value', $event)")
template(#item="{ item, depth, path, open }")
slot(name="item" :item="item" :depth="depth" :path="path" :open="open")