Page Builder

Page builder is a neat and easy way for a user to create a page content using pre-defined component

Usage

Just add component at config/cms.php

<?php
namespace App\Core\Components;
use App\Models\Post;
use App\Core\Component;
class Media extends Component
{
// data provider
public function getData()
{
return [
'posts' => Post::type('media')->get(),
];
}
// will use to populate schema
public function getModel()
{
return [
'media_id' => null,
];
}
// you can do something to model before pass to view
public function filterRenderData($model)
{
$url = null;
if (isset($model['media_id']) && ($media = Post::find($model['media_id']))) {
$url = $media->getFirstMedia()->getFullUrl();
}
return [
'media' => $url
];
}
public function getSchema()
{
// "# #" to render without string quote
return [
[
"type" => "multiselect",
"model" => "media_id",
"label" => "Media",
"placeholder" => "Select media",
"selectOptions" => [
"multiple" => false,
"key" => "name",
"searchable" => true,
"closeOnSelect" => true,
"customLabel" => "#this.vueMultiselectCustomLabelByCollections(this.componentEditorData.posts, 'title')#",
"allowEmpty" => false
],
"values" => "#this.vueMultiselectValuesByCollections(this.componentEditorData.posts)#"
]
];
}
}

Finally add markup in resources\views\builder\components\media.blade.php. Can contain vue component that you create resources\js.

Developing a package?

// at service provider
public function boot()
{
$this->addBuilderComponent(\Your\Component\Carousel::class);
// for more flexibility
Eventy::addFilter('cms:builder-components', function ($components) {
return array_merge($components, [
\Your\Component\Carousel::class
]);
});
}