evo-mark/evo-laravel-sortable-treeview

evoMark Laravel Sortable Treeview

Requirements (v2)

• Vue 3.5+
• Vuetify 4.0+
• Inertia 3.0+

Installation

Add the following repository to your composer.json file:

"repositories": [
    {
        "type": "vcs",
        "url": "https://github.com/evo-mark/evo-laravel-sortable-treeview"
    }
],

and then this to your require section:

"require": {
    "evo-mark/evo-laravel-sortable-treeview": "^2.0.0"
}

then run composer update.

JavaScript

Once you've installed the composer package, you can install the PNPM package symlink:

pnpm add vendor/evo-mark/evo-laravel-sortable-treeview

Usage

Configuration

To publish your config file for SortableTreeview, run:

php artisan v:p --provider="EvoMark\EvoLaravelSortableTreeview\SortableTreeviewProvider"

Model

To setup a model as sortable, add the following to the model:

use EvoMark\EvoLaravelSortableTreeview\Traits\SortableTreeModel;

class Model
{
    use SortableTreeModel;
}

Controller

Pass the treeview items to the frontend like so:

return Inertia::render('setup/tyre-group/index', [
    'tyreGroups' => fn() => SortableTreeview::for(TyreGroup::class)->setConfig([])
        ->setHeaders([
            [
                'value' => 'actions',
                'title' => 'Actions'
            ]
        ])->get()
]);

You can call setConfig with the following options:

Frontend

Finally, your frontend should look like this:

<template>
    <EvoSortableTreeview model="tyreGroups">
        <template #item.title="{ item }"> {{ item.name }} </template>
        <template #item.columns="{ item }">
            <VBtnGroup>
                <VBtn color="error" :icon="mdiDelete" variant="text"></VBtn>
            </VBtnGroup>
        </template>
    </EvoSortableTreeview>
</template>

<script setup>
    import { EvoSortableTreeview } from 'evo-laravel-sortable-treeview';
</script>

Slots

The following slots are available inside the SortableTreeview component: