Feat/filter flyout

[virtualtear]

⚡ PowerGrid - Pull Request

• Bug fix
• Enhancement
• New feature
• Breaking change

Description

Adds flyout as a third filter position, next to inline and outside. Filters move into a drawer that slides in from the left or right edge, opened by the existing filter button in the header.

What's new

• flyout filter position, backed by a shared drawer view (filter-flyout.blade.php) that every theme inherits through parentTheme.
• filter.flyout.* theme tokens, set with ->flyout(fn (Components\Flyout $f) => ...) or the array form. Styled for Tailwind, DaisyUI and Flux.
• Filter fields extracted into filters/fields.blade.php, so the outside panel and the drawer render the same fields with their own grid.
• close translation added to all 20 locales, used as the close button's aria-label.
• Drawer closes on Escape, on backdrop click and on the close button, all inside the pg-filters Hot Zone (no full re-render).

Configuration

// config/livewire-powergrid.php

'filter' => 'flyout', // 'inline' | 'outside' | 'flyout'

'filter_flyout' => [
    'position' => 'right',            // 'left' | 'right'
    'close_on_escape' => true,
    'close_on_click_outside' => true,
],

Per table, override in boot():

public function boot(): void
{
    config(['livewire-powergrid.filter' => 'flyout']);
    config(['livewire-powergrid.filter_flyout.position' => 'left']);
}

Theming

Override the classes only, not the view:

->flyout(fn (Components\Flyout $flyout) => $flyout
    ->overlay('fixed inset-0 z-40 bg-zinc-900/40')
    ->panel('fixed inset-y-0 z-50 flex w-full max-w-full flex-col bg-white shadow-xl sm:w-96 sm:max-w-[90vw]')
    ->panelLeft('left-0 border-r border-zinc-200')
    ->panelRight('right-0 border-l border-zinc-200')
    ->header('...')->title('...')->close('...')
    ->body('flex-1 overflow-y-auto px-4 py-4')
    ->footer('...')->clearAll('...')
)

panel carries the positioning (fixed inset-y-0) and must stay above overlay; panel_left / panel_right add only the edge anchoring, since the blade pairs the chosen side with the matching slide-in transform.

Backwards compatibility

Non-breaking. Default stays inline, and outside behaves as before.

Related Issue(s):

Documentation

This PR requires Documentation update?

• Yes
• No
• I have already submitted a Documentation pull request.

[virtualtear]

@luanfreitasdev can you check that out if that sits well with you ?

[luanfreitasdev]

Thank you @virtualtear ⚡️