Configurable options

Many classes (field/file displayers, blocks, cache strategies) use configurable options, a class that allow modifications of options and how they are rendered in CP by other modules.

A configurable options class must define defineOptions(): array and defineDefaultValues(): array.

These are the allowed field types that must be referenced in the `field` attribute of an option definition, they control how the option is rendered in CP :

• checkboxes
• color
• date
• datetime
• lightswitch
• multiselect
• radio
• select
• text
• textarea
• time
• elements : select an element (user, entry, category or asset) through a modal, and a view mode for each
• fetchviewmode : fetch view modes for a layout type and current theme and an optional element. Displays a select
• filedisplayers : File displayers options for each asset kind

They all have different options, see here

You can add/remove/change options by responding to the options definitions event :

Event::on(
    AssetLinkOptions::class,
    AssetLinkOptions::EVENT_OPTIONS_DEFINITIONS,
    function (DefinableOptionsDefinitions $e) {
        $e->definitions['newOption'] = [
            'field' => 'text',
            'label' => 'My new option',
            'required' => true,
            'type' => 'number',
            'min' => 10,
            'step' => 1
        ];
        $e->defaultValues['newOption'] = 56;
});

If you need to define validation rules as well :

Event::on(
    AssetLinkOptions::class,
    AssetLinkOptions::EVENT_DEFINE_RULES,
    function (DefineRulesEvent $e) {
        $e->rules[] = ['newOption', 'required'];
        $e->rules[] = ['newOption', 'double'];
});

Options definitions must not fetch layouts/displays/view modes from database, or the installation may fail

Changing an renderable object (displayer, block etc) options may break its rendering, generally if you modify such options it's safe to assume that you'd also need to write a template for it

New Vue component

If you need to define a new Vue form field component, register an asset bundle :

Event::on(
    CpDisplayController::class,
    CpDisplayController::REGISTER_ASSET_BUNDLES,
    function (RegisterBundles $event) {
        $event->bundles[] = MyBundle::class;
});

//or

Event::on(
    CpBlocksController::class,
    CpBlocksController::REGISTER_ASSET_BUNDLES,
    function (RegisterBundles $event) {
        $event->bundles[] = MyBundle::class;
});

This bundle should depend on Ryssbowh\CraftThemes\assets\VueAssets.

Your javascript must register a component on the window.CraftThemes.formFieldComponents object :

import MyFieldComponent from './myFieldComponent';

window.CraftThemes.formFieldComponents.myField = MyFieldComponent;

You can now use myField as a value for the field argument of any field definition. Your component will receive these 4 props :

value
definition: Object
errors: Array
name: String

Some examples here