Tree

STree shows a hierarchy of nodes (a file tree, nested categories) with expandable branches and selection. It is fully keyboard operable (arrow keys navigate and expand, Enter/Space select), and Reka handles the tree/treeitem roles and focus. The data is a recursive items array; the selected node is available through v-model.

Basic usage

<script setup>
import { ref } from 'vue'
const items = [
  {
    label: 'src',
    value: 'src',
    icon: folderPath,
    children: [
      {
        label: 'main.ts',
        value: 'main',
        icon: filePath,
      },
    ],
  },
  {
    label: 'package.json',
    value: 'pkg',
    icon: filePath,
  },
]
const selected = ref()
</script>

<template>
  <STree
    v-model="selected"
    :items="items"
    :default-expanded="['src']"
  />
</template>

Node icons

The icon field of a node takes a name from the built-in registry (e.g. folder, file-text), so there is no need to store raw SVG paths.

<script setup>
import { ref } from 'vue'
const items = [
  {
    label: 'src',
    value: 'src',
    icon: 'folder',
    children: [
      {
        label: 'main.ts',
        value: 'main',
        icon: 'file-text',
      },
    ],
  },
  {
    label: 'package.json',
    value: 'pkg',
    icon: 'file-text',
  },
]
const selected = ref()
</script>

<template>
  <STree
    v-model="selected"
    :items="items"
    :default-expanded="['src']"
  />
</template>

Multiple selection

multiple allows selecting several nodes at once — v-model then holds an array of the selected nodes (select them by clicking or with Ctrl/Shift).

<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

<template>
  <STree
    v-model="selected"
    :items="items"
    multiple
    :default-expanded="['src']"
  />
</template>

API

Props

Name	Type	Default	Description
items*	{ label: string; value?: string; icon?: string; children?: readonly }	required	Hierarchical list of nodes.
multiple	boolean	false	Allows selecting multiple nodes.
default-expanded	string[]	undefined	Values of the nodes expanded on first render.
model-value	| { label: string; value?: string; icon?: string; children?: STreeItem[]; disabled?: boolean } | STreeItem[]	undefined	Selected node (or array of nodes with multiple). Two-way bound via v-model.

Events

Name	Signature	Description
update:modelValue	( value: | STreeItem | STreeItem[] | undefined ) => void	Emitted when modelValue changes. Used for two-way binding (v-model).