Andreas Reinhold / reiniandClaude Opus 5
e63c0f684c
An application keeps a disclosure's state in a Livewire property (`<x-collapse wire:model="fineTuning">`) or an Alpine one. Either binding now works both ways: toggling the details writes the property, and the property changing, in an action or in Alpine, opens or closes it. `wire:model` is entangled as the dialog and sheets entangle theirs, and taken off the element. The server renders `open` from the property, so the first paint matches it. `x-model` binds through `x-modelable`, with `open` as the first paint until Alpine starts. The state is named `collapseOpen` so it never hides an `open` that a dialog in the slot reads from a scope around it. Without a binding the element has no Alpine and renders as before. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
70 lines
3.2 KiB
PHP
70 lines
3.2 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 — where the browser supports animating `details` content (`interpolate-size`) — a height
|
|
that eases open. `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. --}}
|
|
|
|
@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;
|
|
|
|
if ($model !== null && ($component = \Livewire\Livewire::current()) !== null) {
|
|
$expanded = (bool) data_get($component, $model);
|
|
}
|
|
@endphp
|
|
|
|
<details
|
|
wire:ignore.self
|
|
@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')->class([
|
|
'group/collapse [interpolate-size:allow-keywords]',
|
|
'rounded-corner-lg bg-surface-container' => $variant === 'filled',
|
|
]) }}
|
|
>
|
|
<summary @class([
|
|
'state-layer focus-ring flex min-h-12 cursor-pointer list-none items-center gap-3 rounded-[inherit] type-title-md [&::-webkit-details-marker]:hidden',
|
|
'px-4' => $variant === 'filled',
|
|
])>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" class="size-6 text-on-surface-variant" />
|
|
@endif
|
|
|
|
<span class="min-w-0 flex-1">{{ $heading ?? $title }}</span>
|
|
|
|
<x-livewire-material::icon name="expand_more" class="size-6 text-on-surface-variant transition-[rotate] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast group-open/collapse:rotate-180" />
|
|
</summary>
|
|
|
|
<div @class(['pb-4 type-body-md text-on-surface-variant', 'px-4' => $variant === 'filled', 'pt-1'])>
|
|
{{ $slot }}
|
|
</div>
|
|
</details>
|