← All plugins
Sortable tree resource
MoonShine Tree Resource - это расширение для MoonShine v2.0+, которое добавляет возможность создания и управления древовидными структурами с функцией сортировки (drag-and-drop), позволяя легко организовывать иерархические данные, такие как категории или меню.
MoonShine version
v2,
v3,
v4
MoonShine Sortable Tree Resource
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
Compatibility
| MoonShine |
TreeResource |
| 2.0+ |
1.0+ |
| 3.0+ |
2.0+ |
| 4.0+ |
3.0+ |
Installation
composer require lee-to/moonshine-tree-resource
composer require lee-to/moonshine-tree-resource
composer require lee-to/moonshine-tree-resource
composer require lee-to/moonshine-tree-resource
composer require lee-to/moonshine-tree-resource
php artisan vendor:publish --tag=moonshine-tree-assets
php artisan vendor:publish --tag=moonshine-tree-assets
php artisan vendor:publish --tag=moonshine-tree-assets
php artisan vendor:publish --tag=moonshine-tree-assets
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
{
protected string $column = 'title';
protected string $sortColumn = 'sorting';
public function treeKey(): ?string
{
return 'parent_id'; }
public function sortKey(): string
{
return 'sorting'; }
}
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
}
}
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
}
}
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
}
}
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()),
];
}
use Leeto\MoonShineTree\View\Components\TreeComponent;
protected function mainLayer(): array
{
return [
...$this->getPageButtons(),
TreeComponent::make($this->getResource()),
];
}
use Leeto\MoonShineTree\View\Components\TreeComponent;
protected function mainLayer(): array
{
return [
...$this->getPageButtons(),
TreeComponent::make($this->getResource()),
];
}
use Leeto\MoonShineTree\View\Components\TreeComponent;
protected function mainLayer(): array
{
return [
...$this->getPageButtons(),
TreeComponent::make($this->getResource()),
];
}
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());
}
use Leeto\MoonShineTree\View\Components\TreeComponent;
public function modifyListComponent(ComponentContract $component): ComponentContract
{
return TreeComponent::make($this->getResource());
}
use Leeto\MoonShineTree\View\Components\TreeComponent;
public function modifyListComponent(ComponentContract $component): ComponentContract
{
return TreeComponent::make($this->getResource());
}
use Leeto\MoonShineTree\View\Components\TreeComponent;
public function modifyListComponent(ComponentContract $component): ComponentContract
{
return TreeComponent::make($this->getResource());
}
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 ?? ''; }
public function treeItemBadgeColor(Model $item): string
{
return Color::PRIMARY; }
public function treeItemDescription(Model $item): string
{
return $item->short_description ?? ''; }
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
}
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
}
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
}
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; }
public function wrappable(): bool
{
return true; }
public function compactTree(): bool
{
return false; }
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
}
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
}
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
}
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
}
