Add class merging for ui components

This commit is contained in:
philipp lang 2025-03-28 01:15:05 +01:00
parent 3ea0682b7c
commit a573cea7c0
5 changed files with 5 additions and 7 deletions

View File

@ -19,9 +19,7 @@ class Action extends Component
public function render()
{
return <<<'HTML'
<a x-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} class="inline-flex
w-6 h-5 flex items-center justify-center rounded {{ $allColors($variant) }}
">
<a x-tooltip.raw="{{$slot}}" href="#" {{ $attributes->merge(['class' => 'inline-flex w-6 h-5 flex items-center justify-center rounded '.$allColors($variant)]) }}>
<x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
</a>
HTML;

View File

@ -19,7 +19,7 @@ class Badge extends Component
public function render()
{
return <<<'HTML'
<button type="button" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 items-center rounded-full {{ $allColors($variant) }} hidden lg:flex">
<button type="button" href="#" {{ $attributes->merge(['class' => 'h-6 px-3 space-x-2 items-center rounded-full hidden lg:flex '.$allColors($variant)]) }}>
<x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
<span class="text-sm">
{{$slot}}

View File

@ -24,7 +24,7 @@ class BooleanDisplay extends Component
public function render()
{
return <<<'HTML'
<div x-tooltip.raw="{{$hint}}" class="flex space-x-2 items-center group @if($dark) dark @endif">
<div x-tooltip.raw="{{$hint}}" {{ $attributes->merge(['class' => 'flex space-x-2 items-center group '.($dark ? 'dark' : '')]) }}">
<div class="border-2 rounded-full w-5 h-5 flex items-center justify-center
@if ($value) border-green-700 group-[.dark]:border-green-500
@else border-red-700 group-[.dark]:border-red-500

View File

@ -14,7 +14,7 @@ class Button extends Component
public function render()
{
return <<<'HTML'
<button type="{{$type}}" class="px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded text-primary-300">
<button type="{{$type}}" {{ $attributes->merge(['class' => 'px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded text-primary-300']) }}>
{{$slot}}
</button>
HTML;

View File

@ -19,7 +19,7 @@ class Menulist extends Component
public function render()
{
return <<<'HTML'
<div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
<div {{$attributes->merge(['class' => 'p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between']) }}">
<div class="grid gap-1">
@foreach($entries as $entry)
<a href="{{$entry['url']}}" class="rounded py-1 px-3 text-gray-400 duration-200 hover:bg-gray-600 {{$activeClass($entry)}}" @if($entry['is_active']) data-active @endif>