[5.x] Add field actions feature

[jacksleight]

Summary

This PR adds a new feature called field actions.

Field actions provide a way to extend the functionality of existing fieldtypes without having to extend the whole class/component. They can be accessed via a new menu that appears above the field, which also provides a standard UI for common field features such as expand/collapse all and toggle fullscreen (these are referred to as internal actions).

Any action can be flagged as a quick action, which will make it appear in a simple popup menu on hover (exact UI still TBC).

Field actions are implemented entirely on the frontend in JS and should not be confused with entry/term etc. actions that run on the server. The implementation is currently intentionally very lightweight, but convenience helpers could be added in future (eg. to open a modal and prompt for user input).

Here's how they look:

As well as fields this feature has also been incorporated into replicator and bard sets. While the focus of this PR is adding actions to fields, it's been implemented in a generic way so that the same functionality could be added to other component types in the future.

The actions are also available in fullscreen modes, which are now using a universal header component:

Registering Actions

Field actions can be registered as follows. As a minimum you need to specify a display value and run callback. Quick actions also require an icon:

Statamic.$actions.add('text-fieldtype', {
    display: 'Reverse Text',
    run: ({ value, update }) => {
        update(value.split('').reverse().join(''));
    },
});

Statamic.$actions.add('table-fieldtype', {
    display: 'Import CSV',
    icon: 'add-table',
    quick: true,
    visible: () => {
        // check if visible
    },
    run: () => {
        // do something
    },
});

It's entirely up to you what you do inside the run callback. The callbacks currently receive a payload object as follows:

• field: The fieldtype Vue component
• fieldPathPrefix: The field path prefix
• handle: The field handle
• value: The field value
• config: The field config
• meta: The field meta
• update(value): The field update function
• updateMeta(value): The field updateMeta function

And for Bard/Replicator sets:

• field: The fieldtype Vue component
• fieldPathPrefix: The set field path prefix
• index: The set index
• values: The set values
• config: The set config
• meta: The set meta
• update(handle, value): The set field update function
• updateMeta(handle, value): The set field updateMeta function

Internal Actions

Fieldtype components themselves can add internal actions to the new dropdown/quick menus. This is currently used for existing expand/collapse all and toggle fullscreen features. These can be defined by adding an internalActions computed property to a fieldtype component:

computed: {
    internalActions() {
        return [
            {
                display: __('Expand All'),
                icon: 'arrows-horizontal-expand',
                quick: true,
                run: this.expandAll,
            },
            // ....
        ];
    },
},

Notes

• There are currently three "types" of action: Actions are the ones registered through Statamic.$actions, these could also be considered Custom Actions. Internal Actions are the ones registered by fieldtypes themselves. Quick Actions are a subset of both Actions + Internal Actions and are the actions that appear in the hover-menu.
• On the publish form the quick actions appear on hover, and they also appear in the dropdown, which makes sense since the dropdown covers up the hover-menu, and this ensures they're always accessible. In the fullscreen header there's space to always display the quick actions, but they also appear in the dropdown. This makes less sense, but I couldn't decide if it was worth filtering them out?
  • Worth pointing out that right now all internal actions are also quick actions, but they don't have to be, and it's possible to register custom quick actions as well.
• At the moment the fullscreen mode toggle is just another action, but maybe it should have special status? It should really have a different "collapse" icon in fullscreen mode, but currently actions can only have one icon.

[jacksleight]

This is now ready for review. There are a few implementation details and UI things that I'm still unsure about, but I'm hoping you can help figure out the final details.