Orderable Trees

Description

Orderable Trees provides a draggable nested tree widget with add, edit, delete, filter, and selection flows.

Installation

Install the package:

yarn add @enso-ui/orderable-trees

The component can be used inside or outside the Enso ecosystem.

Features

• exports the Tree component from the Bulma entrypoint
• supports nested drag-and-drop through vuedraggable
• supports inline add, edit, delete, filter, and selection flows
• exposes item and controls slots for custom rendering

Usage

<script setup>
import Tree from '@enso-ui/orderable-trees/bulma';
</script>

<Tree
    :route-group="routeGroup"
    :editable="true"
    @selected="selected = $event" />

API

Default export

Import: @enso-ui/orderable-trees/bulma

Tree

Props:

• editable: boolean = false
• expanded: array = []
• objects: boolean = false
• routeGroup: string | Function
• title: string | null = null
• modelValue: number | object | null = null

Emits:

• loaded
• selected
• deselected
• update:modelValue

Slots:

• item
• controls

Deep components:

• src/bulma/components/Items.vue owns nested drag-and-drop groups
• src/bulma/components/Item.vue owns expand/collapse, inline edit, delete, and selection behavior

Depends On

• @enso-ui/confirmation ↗
• @enso-ui/directives ↗
• @enso-ui/laravel-validation ↗
• @enso-ui/loader ↗

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT