0.4.3 • Published 10 months ago

vue-treant v0.4.3

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

NPM version Logo

Vue Treant

Vue Treant is a Vue 3 component designed to create and display hierarchical tree structures. It supports recursive rendering of nodes, making it perfect for visualizing entity relationships, organizational charts, or any nested data structure. Features

  • Recursive Rendering: Supports infinite levels of nesting for nodes.
  • Dynamic Expansion: Nodes can be expanded or collapsed dynamically.
  • Customizable: Easily customize node appearance and behavior using slots and props.
  • Event Handling: Emits events for node expansion, allowing for custom behavior and state management.

Installation

To install Vue Treant:

yarn add vue-treant

Usage

Here’s a basic example of how to use Vue Treant in your Vue 3 project.

Basic Usage

Import and Register the Component

<script setup>
import { ref } from 'vue';
import VueTreant from 'vue-treant';

const treeData: Node[] = [{
    title: 'Root',
    id: 'root',
    children: [
        {
            title: 'Node 1',
            id: 'node_1',
            children: [
                { title: 'Node 1.1', id: 'node_1_1' },
                { title: 'Node 1.2', id: 'node_1_2', children: [{ title: 'Node 1.2.1', id: 'node_1_2_1' }] },
            ]
        },
        {
            title: 'Node 2',
            id: 'node_2',
            children: [
                { title: 'Node 2.1', id: 'node_2_1' },
                { title: 'Node 2.2', id: 'node_2_2' }
            ]
        }
    ]
},
{ title: 'Other', id: 'other' }
]
</script>

<template>
  <VueTreant :node="treeData" />
</template>

Customizing Nodes

Events

expanded Event

  • Event Name: expanded
  • Description: Emitted when the expand/collapse control is clicked.
  • Payload: None
  • Example: Coming soon

activated Event

  • Event Name: on-node-activate
  • Description: Emitted when the node check control is toggled.
  • Payload: (nodeId, isActive)
  • Example: @on-node-activate="handleNodeActivate"

Contribute

ko-fi

0.1.0

10 months ago

0.3.0

10 months ago

0.2.0

10 months ago

0.1.1

10 months ago

0.1.8

10 months ago

0.1.7

10 months ago

0.1.4

10 months ago

0.3.1

10 months ago

0.4.3

10 months ago

0.1.6

10 months ago

0.4.2

10 months ago

0.1.5

10 months ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago