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

MoonShine	TreeResource
2.0+	1.0+
3.0+	2.0+
4.0+	3.0+

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
}

lee-to / moonshine-tree-resource

Maintainers

Details