PxTree

A recursive tree component for browsing hierarchical catalogs (e.g. document template folders). Supports expand/collapse, node selection, and inline add/edit-child flows via the newChild* props.

Usage

Demo

Engineering

Frontend Engineering

Backend Engineering

Design

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

const nodes = ref([
  {
    key: '1',
    label: 'Engineering',
    has_children: true,
    children: [
      { key: '2', label: 'Frontend Engineering', has_children: false },
      { key: '3', label: 'Backend Engineering', has_children: false },
    ]
  },
  {
    key: '4',
    label: 'Design',
    has_children: true,
    children: [
      { key: '5', label: 'Product Design', has_children: false },
    ]
  },
])

const expandedKeys = ref({ '1': true })
const selectedKey = ref(null)
</script>

<template>
  <PxTree
    :nodes="nodes"
    v-model:expanded-keys="expandedKeys"
    :selected-key="selectedKey"
    @node-click="(node) => (selectedKey = node.key)"
  />
</template>

Props

Prop	Type	Default	Description
nodesrequired	TreeNode[]	—	Array of root tree nodes. Each node can have a children array for nested nodes.
expandedKeysrequired	Record<string, boolean>	—	Map of node key to expanded state. Use with v-model:expanded-keys.
selectedKey	string | null	null	Currently selected node key.
selectable	boolean	true	Highlights the selected node.
disabled	boolean	false	Disables inline add/edit interactions.
level	number	1	Nesting depth, used internally for indentation on recursive calls.
newChildName	string | null	null	v-model for the name input shown while adding a child node.
newChildType	boolean | string | null	null	v-model for the type selector shown while adding a child node.
newChildTypeOptions	Record<string, unknown>[] | null	null	Options for the new-child type selector.
catalogItemId	string | null	null	v-model for the catalog item selector, shown when newChildType is template or form.
catalogOptions	Record<string, unknown>[] | null	null	Options for the catalog item selector.
newChildRequiered	boolean	false	Whether the new child name is required.

TreeNode Interface

interface TreeNode {
  key: string
  label: string
  children?: TreeNode[]
  has_children?: boolean
  type?: string          // 'folder' | 'template' | 'placeholder' | 'form' | ...
  isEditing?: boolean     // renders the inline add/edit row instead of the label
  isAddButton?: boolean   // renders an "add child" button instead of the label
  [key: string]: unknown
}

Emits

Event	Payload	Description
node-click	TreeNode	Emitted when a non-editing node is clicked.
update:expandedKeys	Record<string, boolean>	Emitted when a node is expanded or collapsed.
start-add-child	TreeNode	Emitted when the add-child button is clicked.
confirm-add-child	TreeNode	Emitted to confirm adding a new child node.
cancel-add-child	—	Emitted to cancel adding a new child node.
confirm-edit-node	TreeNode	Emitted to confirm editing an existing node.
cancel-edit-node	—	Emitted to cancel editing an existing node.

Slots

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