Add Table action button
This commit is contained in:
parent
44cf24ea25
commit
299ef87ef6
|
@ -0,0 +1,68 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\View\Enums;
|
||||||
|
|
||||||
|
enum Variant: string
|
||||||
|
{
|
||||||
|
|
||||||
|
case PRIMARY = 'primary';
|
||||||
|
case SECONDARY = 'secondary';
|
||||||
|
case PRIMARYLIGHT = 'primary-light';
|
||||||
|
case WARNING = 'warning';
|
||||||
|
case INFO = 'info';
|
||||||
|
case DANGER = 'danger';
|
||||||
|
|
||||||
|
public function foreground(): string
|
||||||
|
{
|
||||||
|
return match ($this) {
|
||||||
|
self::PRIMARY => 'text-primary-300',
|
||||||
|
self::SECONDARY => 'text-primary-400',
|
||||||
|
self::PRIMARYLIGHT => 'text-primary-200',
|
||||||
|
self::WARNING => 'text-yellow-300',
|
||||||
|
self::INFO => 'text-blue-300',
|
||||||
|
self::DANGER => 'text-red-100',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public function background(): string
|
||||||
|
{
|
||||||
|
return match ($this) {
|
||||||
|
self::PRIMARY => 'bg-primary-700',
|
||||||
|
self::SECONDARY => 'bg-primary-800',
|
||||||
|
self::PRIMARYLIGHT => 'bg-primary-600',
|
||||||
|
self::WARNING => 'bg-yellow-700',
|
||||||
|
self::INFO => 'bg-blue-700',
|
||||||
|
self::DANGER => 'bg-red-400',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public function hoverForeground(): string
|
||||||
|
{
|
||||||
|
return match ($this) {
|
||||||
|
self::PRIMARY => 'hover:text-primary-100',
|
||||||
|
self::SECONDARY => 'hover:text-primary-200',
|
||||||
|
self::PRIMARYLIGHT => 'hover:text-primary-100',
|
||||||
|
self::WARNING => 'hover:text-yellow-100',
|
||||||
|
self::INFO => 'hover:text-blue-100',
|
||||||
|
self::DANGER => 'hover:text-red-100',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public function hoverBackground(): string
|
||||||
|
{
|
||||||
|
return match ($this) {
|
||||||
|
self::PRIMARY => 'hover:bg-primary-500',
|
||||||
|
self::SECONDARY => 'hover:bg-primary-600',
|
||||||
|
self::PRIMARYLIGHT => 'hover:bg-primary-500',
|
||||||
|
self::WARNING => 'hover:bg-yellow-500',
|
||||||
|
self::INFO => 'hover:bg-blue-500',
|
||||||
|
self::DANGER => 'hover:bg-red-500',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function fromString(string $input): self
|
||||||
|
{
|
||||||
|
return collect(static::cases())
|
||||||
|
->first(fn ($variant) => $variant->value === $input);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\View\Traits;
|
||||||
|
|
||||||
|
use App\View\Enums\Variant;
|
||||||
|
|
||||||
|
trait HasColors
|
||||||
|
{
|
||||||
|
public function bgColor(string $variant): string
|
||||||
|
{
|
||||||
|
$variant = Variant::fromString($variant);
|
||||||
|
|
||||||
|
return implode(' ', [
|
||||||
|
$variant->background(),
|
||||||
|
$variant->hoverBackground(),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function fgColor(string $variant): string
|
||||||
|
{
|
||||||
|
$variant = Variant::fromString($variant);
|
||||||
|
|
||||||
|
return implode(' ', [
|
||||||
|
$variant->foreground(),
|
||||||
|
$variant->hoverForeground(),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function allColors(string $variant): string
|
||||||
|
{
|
||||||
|
return "{$this->bgColor($variant)} {$this->fgColor($variant)}";
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\View\Ui;
|
||||||
|
|
||||||
|
use App\View\Traits\HasColors;
|
||||||
|
use Illuminate\View\Component;
|
||||||
|
|
||||||
|
class Action extends Component
|
||||||
|
{
|
||||||
|
|
||||||
|
use HasColors;
|
||||||
|
|
||||||
|
public function __construct(
|
||||||
|
public string $icon,
|
||||||
|
public string $variant = 'primary'
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return <<<'HTML'
|
||||||
|
<a v-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} 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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue