Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
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
51 lines
2.3 KiB
PHP
51 lines
2.3 KiB
PHP
<section
|
|
id="icons"
|
|
class="scroll-mt-24 space-y-6"
|
|
x-data="{
|
|
names: [],
|
|
query: '',
|
|
filled: false,
|
|
async load() {
|
|
this.names = await (await fetch('{{ route('livewire-material.symbols', [], false) }}')).json();
|
|
},
|
|
get matches() {
|
|
const query = this.query.trim().toLowerCase().replaceAll(' ', '_');
|
|
|
|
return (query === '' ? this.names : this.names.filter((name) => name.includes(query))).slice(0, 120);
|
|
},
|
|
}"
|
|
x-intersect.once="load()"
|
|
>
|
|
<h2 class="type-headline-md">Icons</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
Every Material Symbol (Rounded, 400, grade 0, 24px) as <code><x-icon name="…" /></code>, outlined or <code>filled</code>.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<label class="flex min-w-72 flex-1 items-center gap-2 rounded-corner-xs border border-outline px-3 py-2 focus-within:outline-3 focus-within:outline-secondary">
|
|
<x-livewire-material::icon name="search" class="size-5 text-on-surface-variant" />
|
|
<input type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" class="w-full bg-transparent type-body-lg outline-none" />
|
|
</label>
|
|
|
|
<label class="flex items-center gap-2 type-label-lg">
|
|
<input type="checkbox" x-model="filled" class="size-4 accent-primary" />
|
|
Filled
|
|
</label>
|
|
</div>
|
|
|
|
<ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
|
|
<template x-for="name in matches" x-bind:key="name">
|
|
<li class="flex flex-col items-center gap-2 rounded-corner-md bg-surface-container p-3 text-center">
|
|
<span
|
|
class="size-6 bg-current"
|
|
x-bind:style="{
|
|
mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg') center / contain no-repeat`,
|
|
}"
|
|
></span>
|
|
<code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</section>
|