[3.x] Blade x components instead of custom directive

[haringsrob]

Description

This is not finished, backwards compatibility has not been implemented.

The idea here is to, in addition to @formfield we also have the option to use blade-x components.

So this:

@formField('checkbox', [
    'name' => 'checkbox',
    'label' => 'Checkbox',
    'note' => 'I am a note',
])

would become this:

<x-twill-checkbox name="checkbox" :label="__('This is the label')" :note="__('Note')" :form="$form" />

Each form field would have its own blade-x component.

By doing this we can also free the partials from additional PHP.

(there is not much abstraction done yet so I think in a final product the component class will have fewer data.)

Todo:

• Tags: examples/blog/resources/views/twill/blogs/form.blade.php
• select_permissions: views/groups/form.blade.php
• Nest the views in a "Fields" directory.

Fixes

fixes #969

[haringsrob]

Thinking of something to add here like:

getVuexStoreData

We could also go further and do something like:

getVueComponent
getVueComponentProps

and always render the same view file.

[haringsrob]

@ifox so this is a working example with the checkbox implementation. What do you think of the comments I left?

[haringsrob]

I think I can fix the L7 compatibility, but 6 is out of the question, therefor this will be a 3.x feature. Maybe even document it as the suggested way?

[haringsrob]

Updated this to no longer need the $form, making it work just like this:

    <x-twill::checkbox name="checkbox_2" label="checkbox"/>
    <x-twill::block-editor/>
    <x-twill::input name="description" label="Description" :translated="true" :maxlength="100"/>
    <x-twill::medias name="cover" label="Cover image" />
    <x-twill::repeater type="repeater_item" />

[haringsrob]

@ifox ,

All green! It does only work on Laravel 8 because 7 does not implement the required methods yet.

[haringsrob]

• fix bug in the block editor?

[haringsrob]

Fixed the in-modal and block editor fields, simply forgot to implement this.

[haringsrob]

I am using this in a project now and will check for issues as I progress.

[haringsrob]

Hey @ifox,

I think this is done now. Could you have a look?

Cheers.

[haringsrob]

All form fields are not implemented in the formbuilder:

class BlogController extends BaseModuleController
{
    protected $moduleName = 'blogs';

    protected $indexOptions = [
    ];

    public function getForm(Model $model): Form
    {
        return Form::make([
            Wysiwyg::make()
                ->allowSource()
                ->maxLength(100)
                ->name('wysiwyg'),
            Select::make()
                ->placeholder('test')
                ->options(
                    Options::make([
                        Option::make('brussels', 'Brussels'),
                        Option::make('paris', 'Paris'),
                        Option::make('amsterdam', 'Amsterdam'),
                    ])
                )
                ->name('city'),
            Repeater::make()
                ->type('categories')
                ->buttonAsLink()
                ->disableReorder(),
            Radios::make()
                ->inline()
                ->columns(2)
                ->border()
                ->options(
                    Options::make([
                        Option::make('brussels', 'Brussels'),
                        Option::make('paris', 'Paris'),
                        Option::make('amsterdam', 'Amsterdam'),
                    ])
                )
                ->name('city'),
            MultiSelect::make()
                ->unpack()
                ->options(
                    Options::make([
                        Option::make('brussels', 'Brussels'),
                        Option::make('paris', 'Paris'),
                        Option::make('amsterdam', 'Amsterdam'),
                    ])
                )
                ->name('city'),
            Medias::make()
                ->withoutAddInfo()
                ->name('cover'),
            Map::make()
                ->name('map')
                ->openMap(),
            Files::make()
                ->name('files')
                ->itemLabel('document'),
            DatePicker::make()
                ->name('Date')
                ->placeholder('HH:II')
                ->hourIncrement(2)
                ->minuteIncrement(5)
                ->timeOnly(),
            Input::make()
                ->name('description')
                ->note('Note')
                ->type(Input::TYPE_TEXTAREA)
                ->rows(3)
                ->placeholder('bar')
                ->maxLength(10)
                ->translatable(),
            Color::make()
                ->name('color'),
            Checkbox::make()
                ->name('active')
                ->translatable()
                ->confirmMessageText('Are you sure?'),
            Checkboxes::make()
                ->name('city')
                ->inline()
                ->border()
                ->options(
                    Options::make([
                        Option::make('brussels', 'Brussels'),
                        Option::make('paris', 'Paris'),
                        Option::make('amsterdam', 'Amsterdam'),
                    ])
                ),
            BlockEditor::make()
                ->blocks(['text']),
            Tags::make(),
            Browser::make()
                ->modules([Category::class])
                ->wide(),
        ]);
    }
}