61 lines
2.6 KiB
PHP
61 lines
2.6 KiB
PHP
<?php
|
|
|
|
namespace App\View\Form;
|
|
|
|
use App\View\Traits\HasFormDimensions;
|
|
use Illuminate\View\Component;
|
|
|
|
class Lever extends Component
|
|
{
|
|
|
|
use HasFormDimensions;
|
|
|
|
public string $id;
|
|
|
|
public function __construct(
|
|
public string $name,
|
|
public string $size = 'default',
|
|
public $value = null,
|
|
public ?string $hint = null,
|
|
public bool $disabled = false,
|
|
public bool $required = false,
|
|
public string $label = '',
|
|
) {
|
|
$this->id = str()->uuid()->toString();
|
|
}
|
|
|
|
public function render()
|
|
{
|
|
return <<<'HTML'
|
|
<label class="flex flex-col items-start group {{$heightClass}} " for="{{$id}}" style="{{$heightVars}}">
|
|
@if ($label)
|
|
<x-form::label :required="$required">{{$label}}</x-form::label>
|
|
@endif
|
|
<span class="relative flex-none flex h-[var(--height)] @if($hint) pr-8 @endif">
|
|
<input id="{{$id}}" type="checkbox" name="{{$name}}" value="{{$value}}" @if($disabled) disabled="disabled" @endif class="absolute peer opacity-0" {{ $attributes }} />
|
|
<span class="relative cursor-pointer h-full w-[calc(var(--height)*2)] rounded peer-focus:bg-red-500 duration-300 bg-gray-700 peer-checked:bg-primary-700"></span>
|
|
<span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
|
|
<x-ui::sprite
|
|
class="relative text-gray-400 flex-none text-white duration-300 group-[.size-default]:size-3 group-[.size-sm]:size-2"
|
|
src="check"
|
|
></x-ui::sprite>
|
|
</span>
|
|
<span class="absolute h-full top-0 left-[var(--height)] flex-none flex justify-center items-center aspect-square">
|
|
<x-ui::sprite
|
|
class="relative text-gray-400 flex-none text-white duration-300 group-[.size-default]:size-3 group-[.size-sm]:size-2"
|
|
src="close"
|
|
></x-ui::sprite>
|
|
</span>
|
|
<var class="absolute duration-300 bg-gray-400 rounded
|
|
top-[var(--padding)] left-[var(--padding)]
|
|
size-[calc(var(--height)-var(--padding)*2)] peer-checked:left-[calc(var(--height)+var(--padding))]"
|
|
></var>
|
|
@if($hint)
|
|
<x-form::hint>{{$hint}}</x-form::hint>
|
|
@endif
|
|
</span>
|
|
</label>
|
|
HTML;
|
|
}
|
|
}
|