Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
35 lines
1.5 KiB
PHP
35 lines
1.5 KiB
PHP
{{-- One showcase example: the Blade in `code`, rendered, with the source beside it — one string,
|
|
so what is shown and what is written can never disagree. --}}
|
|
|
|
@props(['title' => null, 'code', 'stack' => false])
|
|
|
|
@php
|
|
// Written as an application without a prefix writes it; under a configured prefix the tags are
|
|
// rewritten to it, so what renders and what is shown is what this application would write.
|
|
$prefix = config('livewire-material.prefix');
|
|
|
|
if (filled($prefix)) {
|
|
$names = collect(glob(\NoNameWeb\LivewireMaterial\LivewireMaterialServiceProvider::componentPath().'/*.blade.php'))
|
|
->map(fn (string $path): string => preg_quote(basename($path, '.blade.php'), '/'))
|
|
->sortByDesc(fn (string $name): int => strlen($name))
|
|
->implode('|');
|
|
|
|
$code = preg_replace('/<(\/?)x-('.$names.')(?=[\s\/>])/', '<$1x-'.$prefix.'::$2', $code);
|
|
}
|
|
@endphp
|
|
|
|
<div class="space-y-4 rounded-corner-lg bg-surface-container p-4">
|
|
@if ($title)
|
|
<h3 class="type-title-md">{{ $title }}</h3>
|
|
@endif
|
|
|
|
<div @class(['flex flex-wrap items-center gap-4' => ! $stack, 'space-y-4' => $stack])>
|
|
{!! \Illuminate\Support\Facades\Blade::render($code) !!}
|
|
</div>
|
|
|
|
<details>
|
|
<summary class="w-fit cursor-pointer rounded-corner-xs type-label-md text-on-surface-variant focus-ring">Blade</summary>
|
|
<pre class="mt-2 overflow-x-auto rounded-corner-sm bg-surface-container-highest p-3 type-body-sm"><code>{{ trim($code) }}</code></pre>
|
|
</details>
|
|
</div>
|