Add Table action button
This commit is contained in:
		
							parent
							
								
									dc7d0d1354
								
							
						
					
					
						commit
						b3011a5322
					
				|  | @ -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