<?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)#"
            ]
        ];
    }
}

// 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
        ]);
    });
}