Panel improvements

Dialogs for fields

Fields can now define their own dialogs on the backend:

Fields with array definition:

return [
  'props' => [
    // ...
  ],
  'dialogs' => function () {
    return [
      [
        'pattern' => 'delete',
        'load' => function () {},
        'submit' => function () {},
      ]
    ];
  }
];

Field classes:

class MyField extends FieldClass
{
  public function dialogs(): array
  {
    return [
      [
        'pattern' => 'delete',
        'load' => function () {},
        'submit' => function () {},
      ]
    ];
  }
}

The route patterns for field dialogs are automatically prefixed with the following scheme:

dialogs/$modelPath/fields/$fieldName/$pattern

Here's an example:

dialogs/pages/blog/fields/blocks/delete

In a field component, the dialog can be opened by using the field endpoint:

this.$dialog(this.endpoints.field + "/delete")

Customization of the layout selector

The layout selector is now customizable with the size (small, medium, large, huge) and columns options via the new selector prop:

layout:
  type: layout
  layouts:
    ...
  selector:
    # `small`, `medium`, `large` or `huge`
    size: huge
    columns: 6

More improvements

Disabled buttons can receive focus (tab) which allows them to be read out by screenreaders.
Structure fields don’t disregard content changes anymore when clicking outside the form (now drawer).
Correct autofocus handling for blocks, layout, structure, picker fields and dropdowns
Improved focus styles for links and the flag preview in tables
All minified panel assets now add .min to the filename. This will avoid auto-minification in Cloudflare and possibly other environments.
Improved text overflow behavior for links in tables
Increase the font size for help text in sections and fields
The multiselect and tag dropdowns now offer more space to not cut off longer options.
Slug field: respect custom slug allowlist from the Str class
Pages section: new templatesIgnore option #5322
Users field: set default: true to always use the currently logged in user as default
New items size full

New Icons

We've added new icons to our Panel iconset: anchor, clear, lab, merge and split.

New Components

<k-alpha-input>
<k-browser>
<k-code>
<k-color-frame>
<k-coloroptions-input>
<k-colorname-input>
<k-dialog-body>
<k-dialog-box>
<k-dialog-buttons>
<k-dialog-fields>
<k-dialog-footer>
<k-dialog-form>
<k-dialog-notification>
<k-dialog-search>
<k-dialog-text>
<k-drawer-body>
<k-drawer-fields>
<k-drawer-header>
<k-drawer-notification>
<k-drawer-tabs>
<k-file-browser>
<k-frame>, <k-icon-frame> and <k-image-frame>
<k-hue-input>
<k-navigate>
<k-notification>
<k-page-tree>
<k-search-input>
<k-stat>
<k-text-drawer>
<k-tree>

New helpers

$helper.focus(element)
$helper.object.length(object)
$helper.string.isEmpty(string)
$helper.url.base
$helper.url.buildQuery
$helper.url.buildUrl
$helper.url.isAbsolute
$helper.url.isSameOrigin
$helper.url.isUrl
$helper.url.makeAbsolute
$helper.url.toObject
$library.colors

New JS error classes

RequestError
JsonRequestError

And so much more

We've tweaked the Panel extensively with too many improvements to name them all. But here are some more:

Load Panel area views dynamically with the new when prop
Each Panel area can now define additional requests for simple data endpoints or actions
Syntax highlighting in the k-code with Prism
Text fields: new font: monospace option
panel.css and panel.js config options now also support arrays with multiple entries as well as absolute URLs
k-pagination can always be navigated by keys (no extra prop needed anymore)
Notifications: support for custom icons
k-tag supports an image/icon frame
New disabled property for the k-options-dropdown component
New selected property for k-button to set the aria-selected attribute