40 lines
1.3 KiB
PHP
40 lines
1.3 KiB
PHP
@props([
|
|
'options' => [],
|
|
'selected' => [],
|
|
'name' => 'multiselect',
|
|
'id' => 'multiselect-' . Str::random(5),
|
|
'wireModel' => null // Nuevo prop para el modelo Livewire
|
|
])
|
|
|
|
<div
|
|
x-data="{
|
|
open: false,
|
|
selected: @if($wireModel) @entangle($wireModel) @else {{ json_encode($selected) }} @endif
|
|
}"
|
|
class="relative"
|
|
<div
|
|
@click="open = !open"
|
|
class="cursor-pointer p-2 border rounded-lg flex items-center justify-between"
|
|
>
|
|
<span x-text="selected.length ? selected.join(', ') : 'Seleccione opciones'"></span>
|
|
<x-icons icon="chevron-down" class="w-4 h-4 ml-2" />
|
|
</div>
|
|
|
|
<div
|
|
x-show="open"
|
|
@click.away="open = false"
|
|
class="absolute z-50 w-full mt-1 bg-white border rounded-lg shadow-lg max-h-60 overflow-auto"
|
|
>
|
|
<template x-for="(option, index) in {{ json_encode($options) }}">
|
|
<label class="flex items-center px-4 py-2 hover:bg-gray-100">
|
|
<input
|
|
type="checkbox"
|
|
x-model="selected"
|
|
:value="option.value"
|
|
class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
|
|
>
|
|
<span x-text="option.label" class="ml-2"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div> |