Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
132 lines
6.9 KiB
PHP
132 lines
6.9 KiB
PHP
{{-- An M3 Expressive menu: a list of actions that opens from a trigger. Props, slots, `filter`
|
|
and `sheet-at-compact` are documented in SKILL.md; this is the mechanics behind them.
|
|
|
|
The list is a `popover="auto"` in the top layer, placed by CSS anchor positioning at
|
|
`position`, flipping when there is no room. The anchor name is rendered on the wrapper around
|
|
the trigger slot, the only element the server can name, and resources/js/menu.js moves it
|
|
onto the menu button itself: a trigger that is `position: fixed` (`<x-button fab>` on a
|
|
phone) leaves the wrapper behind as an empty box where the page put it, and the menu opened
|
|
there.
|
|
|
|
The id and the anchor name are new with every render. The popover carries a `wire:key`, which
|
|
a Livewire morph matches it by before the id, so a render of the component around an open
|
|
menu patches it in place — still open, focus and listeners kept — instead of swapping in a
|
|
closed copy; menu.js then writes the menu button's ARIA attributes again. The key goes
|
|
through an attribute bag: Livewire compiles a `wire:key` written in a template into the key
|
|
of the loop iteration around it, which would give every child component after the menu the
|
|
same key.
|
|
|
|
For `sheet-at-compact`: the slot is written once and drawn twice, in the popover and in the
|
|
sheet, so a Livewire render patches both copies and a chosen item shows chosen in either. The
|
|
sheet is teleported to the end of `<body>`, so a menu in a sticky app bar or a toolbar still
|
|
covers the whole window rather than only that bar's own stacking context. Since the items
|
|
exist twice, an `id` of the caller's or a nested Livewire component among them would exist
|
|
twice too: keep those out of a `sheet-at-compact` menu.
|
|
|
|
The container is Expressive's standard menu (surface-container-low, 16px corner, elevation
|
|
2), or `vibrant` in tertiary-container — StandardMenuTokens and VibrantMenuTokens from
|
|
androidx Compose Material 3 (Apache-2.0). A menu longer than the window scrolls at 288px.
|
|
|
|
Drawn by resources/css/components/menu.css, which also draws the dropdown a form's own lists
|
|
wear — `<x-select>`'s exposed picker and `<x-choices searchable>`'s listbox — so a menu and a
|
|
form's own dropdowns read as one family (`[data-md-field-menu]`, `[data-md-field-option]`). --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'position' => 'bottom-start',
|
|
'vibrant' => false,
|
|
'filter' => false,
|
|
'sheetAtCompact' => false,
|
|
])
|
|
|
|
@php
|
|
$position = in_array($position, ['bottom-start', 'bottom-end', 'top-start', 'top-end'], true) ? $position : 'bottom-start';
|
|
$key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
|
|
$anchor = "--material-menu-{$key}";
|
|
|
|
$filtering = $filter !== false && $filter !== null && $filter !== '';
|
|
$filterLabel = is_string($filter) && filled($filter) ? $filter : __('Filter');
|
|
|
|
// A dialog needs a name; the menu's own label is the one it has.
|
|
$sheet = (bool) $sheetAtCompact;
|
|
$sheetLabel = filled($label) ? $label : __('Menu');
|
|
@endphp
|
|
|
|
<div x-data="materialMenu" data-md-menu @if ($sheet) data-md-sheet-at-compact @endif {{ $attributes }}>
|
|
<span x-ref="trigger" data-md-menu-trigger style="anchor-name: {{ $anchor }}"
|
|
x-on:click="toggle('first')"
|
|
x-on:keydown.down.prevent="open('first')"
|
|
x-on:keydown.up.prevent="open('last')"
|
|
>{{ $trigger }}</span>
|
|
|
|
<div
|
|
x-ref="menu"
|
|
{{ new \Illuminate\View\ComponentAttributeBag(['wire:key' => 'material-menu']) }}
|
|
id="material-menu-{{ $key }}"
|
|
popover="auto"
|
|
@unless ($filtering) role="menu" @endunless
|
|
data-md-menu-popover
|
|
data-md-popover-exit
|
|
data-md-position="{{ $position }}"
|
|
@if ($vibrant) data-md-vibrant @endif
|
|
@if ($label && ! $filtering) aria-label="{{ $label }}" @endif
|
|
tabindex="-1"
|
|
style="position-anchor: {{ $anchor }}"
|
|
x-on:keydown="navigate($event)"
|
|
x-on:click="activate($event)"
|
|
>
|
|
@if ($filtering)
|
|
@include('livewire-material::partials.menu-filter', ['idSuffix' => '', 'wireKey' => null, 'delegated' => false])
|
|
@else
|
|
{{ $slot }}
|
|
@endif
|
|
</div>
|
|
|
|
@if ($sheet)
|
|
{{-- The compact presentation. The host is the element menu.js knows the sheet by, and its
|
|
listeners run in this menu's scope; the one inside it only lends the bottom sheet the
|
|
`open` it reads, which in this scope is the name of a method. Everything inside the
|
|
sheet is in the sheet's scope, where `close` and `activate` are the sheet's, so
|
|
nothing in there calls the menu by name.
|
|
|
|
A Livewire morph matches an element by its `wire:key`, or else by its id, and swaps in
|
|
a fresh copy where the two differ — which would take the focus out of an open sheet.
|
|
The lists carry keys of their own, as the popover does. The bottom sheet cannot carry
|
|
one: a `wire:key` given to a Blade component becomes the key of the loop around it,
|
|
for every Livewire component after it. So the sheet is rendered with one fixed id,
|
|
the same in every render, and menu.js gives each sheet a unique id of its own while
|
|
keeping the fixed one as its `wire:key`. --}}
|
|
<template x-teleport="body">
|
|
<div
|
|
x-ref="sheetHost"
|
|
data-md-menu-sheet-host
|
|
x-on:keydown.capture="sheetKeydown($event)"
|
|
x-on:click="activate($event)"
|
|
x-on:input="refine()"
|
|
>
|
|
<div x-data="materialMenuSheet">
|
|
<x-livewire-material::bottom-sheet id="material-menu-sheet" aria-label="{{ $sheetLabel }}">
|
|
@if ($filtering)
|
|
<div {{ new \Illuminate\View\ComponentAttributeBag([
|
|
'wire:key' => 'material-menu-sheet-menu',
|
|
'id' => "material-menu-{$key}-sheet-menu",
|
|
]) }} data-md-menu-sheet>
|
|
@include('livewire-material::partials.menu-filter', ['idSuffix' => '-sheet-menu', 'wireKey' => 'material-menu-sheet-list', 'delegated' => true])
|
|
</div>
|
|
@else
|
|
<div {{ new \Illuminate\View\ComponentAttributeBag(array_filter([
|
|
'wire:key' => 'material-menu-sheet-menu',
|
|
'id' => "material-menu-{$key}-sheet-menu",
|
|
'role' => 'menu',
|
|
'aria-label' => $label,
|
|
], fn ($value): bool => filled($value))) }} data-md-menu-sheet>
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
</x-livewire-material::bottom-sheet>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
@endif
|
|
</div>
|