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(), // $this->getButtons() in 4.0+
            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());
}

Update on changes (4.0+)

public function getListComponentName(): string
{
    return 'tree-component';
}

public function getListEventType(): JsEvent
{
    return JsEvent::FRAGMENT_UPDATED;
}

protected function mainLayer(): array
{
    return [
        ...$this->getButtons(),
        Fragment::make([
            TreeComponent::make($this->getResource()),
        ])->name('tree-component'),
    ];
}

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
}