README

A modern, responsive tree component for MoonShine with drag & drop sorting, compact mode, and customizable content display.

Features

• ???? Drag & Drop Sorting - Sort and reorder items with ease
• ???? Mobile First Design - Responsive and touch-friendly
• ???? Compact Mode - Dense layout for data-heavy interfaces
• ???? Customizable Content - Flexible title, badge, and description
• ???? Dark Mode Support - Integrates seamlessly with MoonShine themes
• ⚡ Optimized Performance - Lightweight CSS with MoonShine tokens

Requirements

• MoonShine v4.0+

Compatibility

Installation

composer require lee-to/moonshine-tree-resource

php artisan vendor:publish --tag=moonshine-tree-assets

Quick Start

Extend the TreeResource class instead of the base ModelResource

use Leeto\MoonShineTree\Resources\TreeResource; class CategoryResource extends TreeResource { // Required properties protected string $column = 'title'; protected string $sortColumn = 'sorting'; // ... // Required methods public function treeKey(): ?string { return 'parent_id'; // Foreign key for parent-child relationship } public function sortKey(): string { return 'sorting'; // Column for sorting } }

And add a component to IndexPage

use Leeto\MoonShineTree\View\Components\TreeComponent; protected function mainLayer(): array { return [ ...$this->getPageButtons(), TreeComponent::make($this->getResource()), ]; }

Or override list component

use Leeto\MoonShineTree\View\Components\TreeComponent; public function modifyListComponent(ComponentContract $component): ComponentContract { return TreeComponent::make($this->getResource()); }

Custom Content Display

public function treeItemTitle(Model $item): string { return $item->{$this->getColumn()}; } public function treeItemBadgeText(Model $item): string { return $item->products_count ?? ''; // Show product count as badge } public function treeItemBadgeColor(Model $item): string { return Color::PRIMARY; // Use Color enum for better type safety } public function treeItemDescription(Model $item): string { return $item->short_description ?? ''; // Additional description }

Configuration Options

public function sortable(): bool { return true; // Enable/disable drag & drop sorting } public function wrappable(): bool { return true; // Enable/disable expand/collapse functionality } public function compactTree(): bool { return false; // Enable compact mode for dense layouts }