BaseTree

A hierarchical tree component for displaying nested data structures. Supports expand/collapse, selection, drag-and-drop reordering, and custom node rendering via slots.

Usage

<script setup>
import { ref } from 'vue'
import { BaseTree } from 'praxis-vue-ui'

const nodes = ref([
  {
    id: 1,
    name: 'Cardiology',
    children: [
      { id: 2, name: 'Pediatric Cardiology', children: [] },
      { id: 3, name: 'Interventional Cardiology', children: [] },
    ]
  },
  {
    id: 4,
    name: 'Neurology',
    children: [
      { id: 5, name: 'Clinical Neurology', children: [] },
    ]
  },
])
</script>

<template>
  <BaseTree :nodes="nodes" label-field="name" />
</template>

Props

Prop	Type	Default	Description
nodesrequired	TreeNode[]	—	Array of root tree nodes. Each node can have a children array for nested nodes.
labelField	string	'name'	Property name to use as the node display label.
selectable	boolean	false	Enables node selection with checkboxes.
draggable	boolean	false	Enables drag-and-drop reordering of nodes.
loading	boolean	false	Shows skeleton loading state.

TreeNode Interface

interface TreeNode {
  id: string | number
  name: string           // Display label (or whatever labelField points to)
  children?: TreeNode[]  // Nested child nodes
  [key: string]: unknown // Any additional properties
}

Emits

Event	Payload	Description
update:nodes	TreeNode[]	Emitted when nodes are reordered via drag-and-drop.
node-click	TreeNode	Emitted when a node is clicked.
selection-change	TreeNode[]	Emitted when node selection changes.

Slots

Slot	Scope	Description
node-label	{ node: TreeNode }	Custom node label rendering.
node-actions	{ node: TreeNode }	Action buttons rendered on the right side of each node.