Andreas Reinhold / reiniandClaude Sonnet 5
76abdd6242
Plan step 36 (containment group): <x-collapse>'s Tailwind-era resources/css/components/collapse.css (the height animation, C-24) becomes the plain stylesheet, keyed on data-md-collapse and data-md-variant; the summary renders the shared md-state-layer and md-focus-ring classes instead of copying their rules. Leaves tailwind.css for the Containment block of components.css. Icon-to-title and title-to-chevron gaps stay 12px (not an M3 number; collapse isn't an M3 component), written as the average of the two adjacent spacing steps since the scale has no exact token for it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
71 lines
3.0 KiB
PHP
71 lines
3.0 KiB
PHP
{{-- A section that opens to show more: an FAQ answer, advanced settings.
|
|
|
|
Not an M3 component; built on the native `<details>` so it opens without script, keeps its
|
|
state through a Livewire morph (`wire:ignore.self` stops the server's HTML from closing it),
|
|
and is announced as a disclosure. Drawn in M3's terms: a title-medium `title` (or a
|
|
`heading` slot), an optional leading `icon`, a chevron that turns over on the spatial spring,
|
|
and a height that eases open on the same spring
|
|
(`data-md-collapse`, resources/css/components/collapse.css). `open` starts it open.
|
|
`variant`: `plain` (the default, on the surface around it) or `filled` (a surface-container
|
|
tile with a large corner).
|
|
|
|
Its open state can be bound, both ways:
|
|
- `wire:model` (any modifiers; `.live` tells the server at once) entangles it with a Livewire
|
|
boolean property. The server renders `open` from the property, so the first paint matches it
|
|
and `open` is ignored; toggling writes the property, and the property changing opens or
|
|
closes it.
|
|
- `x-model` binds an Alpine property through `x-modelable`; `open` is then only the first
|
|
paint, until Alpine starts and applies the property.
|
|
The state lives in `collapseOpen` on the `<details>`, a name kept clear of `open`, which a
|
|
dialog inside the slot may be reading from a scope around it. Without a binding there is no
|
|
Alpine on it at all.
|
|
|
|
It renders the foundation's `md-state-layer` and `md-focus-ring` (foundation/interaction.css)
|
|
on the summary; nothing here copies their rules. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'icon' => null,
|
|
'open' => false,
|
|
'variant' => 'plain',
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->wire('model')->value() ?: null;
|
|
$bound = $model !== null || count($attributes->whereStartsWith('x-model')->getAttributes()) > 0;
|
|
$expanded = (bool) $open;
|
|
$variant = $variant === 'filled' ? 'filled' : 'plain';
|
|
|
|
if ($model !== null && ($component = \Livewire\Livewire::current()) !== null) {
|
|
$expanded = (bool) data_get($component, $model);
|
|
}
|
|
@endphp
|
|
|
|
<details
|
|
wire:ignore.self
|
|
data-md-collapse
|
|
data-md-variant="{{ $variant }}"
|
|
@if ($bound)
|
|
x-data="{ collapseOpen: @if ($model !== null) @entangle($attributes->wire('model')) @else @js($expanded) @endif }"
|
|
@if ($model === null) x-modelable="collapseOpen" @endif
|
|
x-effect="$el.open = collapseOpen"
|
|
x-on:toggle="collapseOpen = $el.open"
|
|
@endif
|
|
@if ($expanded) open @endif
|
|
{{ $attributes->whereDoesntStartWith('wire:model') }}
|
|
>
|
|
<summary data-md-collapse-summary class="md-state-layer md-focus-ring">
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" data-md-collapse-icon />
|
|
@endif
|
|
|
|
<span data-md-collapse-title>{{ $heading ?? $title }}</span>
|
|
|
|
<x-livewire-material::icon name="expand_more" data-md-collapse-chevron />
|
|
</summary>
|
|
|
|
<div data-md-collapse-body>
|
|
{{ $slot }}
|
|
</div>
|
|
</details>
|