54 lines
4.7 KiB
PHP
54 lines
4.7 KiB
PHP
@props(['enums' => null, 'alpineVariable', 'placeholder', 'default' => null, 'functionCall' => null, 'bool' => false, 'boolTrue' => 'True', 'boolFalse' => 'False', 'multiple' => false])
|
|
<noscript>
|
|
<select id="{{ $alpineVariable }}" tabindex="0"
|
|
class="border w-[20rem] bg-zinc-800 border-{{ env('ACCENT_COLOR') }} placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left text-wrap" {{ $multiple && !$bool ? 'multiple' : '' }}>
|
|
<option
|
|
class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
|
|
value="">{{ $placeholder }}</option>
|
|
@if($bool)
|
|
<option
|
|
class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
|
|
value="{{ $boolTrue }}">{{ $boolTrue }}</option>
|
|
<option
|
|
class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
|
|
value="{{ $boolFalse }}">{{ $boolFalse }}</option>
|
|
@else
|
|
@foreach($enums as $enum)
|
|
<option
|
|
class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
|
|
value="{{ $functionCall ? $enum->$functionCall() : $enum }}">{{ $functionCall ? $enum->$functionCall() : $enum }}</option>
|
|
@endforeach
|
|
@endif
|
|
</select>
|
|
</noscript>
|
|
<div id="{{ $alpineVariable }}-container">
|
|
</div>
|
|
<script type="application/javascript">
|
|
window.addEventListener('load', () => {
|
|
document.getElementById('{{ $alpineVariable }}-container').innerHTML = '<div class="dropdown dropdown-hover mx-auto" x-data="{ {{ $alpineVariable }}: {{ !empty(app('request')->input($alpineVariable)) ? json_encode(explode(',', app('request')->input($alpineVariable))) : json_encode([]) }} }">'
|
|
+ '<div class="flex"><input name="{{ $alpineVariable }}" class="hidden" value="" x-bind:value="{{ $alpineVariable }}"/>'
|
|
+ '<label tabindex="0" class="btn w-[11rem] bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 hover:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none normal-case font-normal" x-text="{{ $alpineVariable }}.length != 0 ? ({{ json_encode($multiple) }} ? {{ "'" . $placeholder . " ('" }} + {{ $alpineVariable }}.length + \' picked)\' : {{ $alpineVariable }}.join(\', \')) : {{ "'" . $placeholder . "'" }}"></label>'
|
|
+ '<button type="button" x-on:click="{{ $alpineVariable }} = []" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg max-w-[2rem]">'
|
|
+ '<i class="fa-solid fa-x fa-xs text-{{ env('ACCENT_COLOR') }}"></i></button></div>'
|
|
+ '<ul tabindex="0" class="dropdown-content border menu flex-nowrap shadow rounded-box w-[13rem] bg-zinc-800 border-{{ env('ACCENT_COLOR') }} placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left">'
|
|
@if($bool)
|
|
+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-on:click="{{ $alpineVariable . '.includes(\'' . $boolTrue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $boolTrue . '\'), 1) : ' . $alpineVariable . ' = [\'' . $boolTrue . '\'];' }}">{{ $boolTrue }}</a></li>'
|
|
+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-on:click="{{ $alpineVariable . '.includes(\'' . $boolFalse . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $boolFalse . '\'), 1) : ' . $alpineVariable . ' = [\'' . $boolFalse . '\'];' }}">{{ $boolFalse }}</a></li>'
|
|
@else
|
|
@foreach($enums as $enum)
|
|
@php
|
|
$optionValue = ($functionCall ? $enum->$functionCall() : $enum);
|
|
if ($multiple) {
|
|
$onClick = $alpineVariable . '.includes(\'' . $optionValue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $optionValue . '\'), 1) : ' . $alpineVariable . '.push(\'' . $optionValue . '\');';
|
|
} else {
|
|
$onClick = $alpineVariable . '.includes(\'' . $optionValue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $optionValue . '\'), 1) : ' . $alpineVariable . ' = [\'' . $optionValue . '\'];';
|
|
}
|
|
|
|
$bindClass = $alpineVariable . '.includes(\'' . $optionValue . '\') ? \'bg-zinc-700\' : \'\';';
|
|
@endphp
|
|
+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-bind:class="{{ $bindClass }}" x-on:click="{{ $onClick }}">{{ $functionCall ? $enum->$functionCall() : $enum }}</a></li>'
|
|
@endforeach
|
|
@endif
|
|
+ '</ul></div>';
|
|
});
|
|
</script>
|