mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 16:23:30 +00:00
Andras Bacsai
882e25e072
Always reserve vertical scrollbar space on base and v5 body layouts to prevent content shift. Match notification event multiselect panel open/close transitions to other listboxes.
67 lines
3.4 KiB
PHP
67 lines
3.4 KiB
PHP
@props([
|
|
'id',
|
|
'label',
|
|
'events' => [],
|
|
'settings' => null,
|
|
])
|
|
|
|
@php
|
|
$disabled = $settings && ! auth()->user()->can('update', $settings);
|
|
$selectedEvents = collect($events)->where('enabled', true);
|
|
$selectedCount = $selectedEvents->count();
|
|
$selectedLabels = $selectedEvents->pluck('label')->implode(', ');
|
|
@endphp
|
|
|
|
<div class="w-full min-w-0" x-data="{ open: false }" @click.outside="open = false"
|
|
@keydown.escape.window="open = false">
|
|
<label for="{{ $id }}-trigger" class="mb-1.5 block text-[12px] font-medium text-black dark:text-fg">
|
|
{{ $label }}
|
|
</label>
|
|
<div class="relative min-w-0">
|
|
<button id="{{ $id }}-trigger" type="button" class="listbox-trigger"
|
|
@click="open = !open" @disabled($disabled) aria-haspopup="listbox" :aria-expanded="open"
|
|
@if ($selectedCount > 0) title="{{ $selectedLabels }}" @endif>
|
|
<span class="listbox-trigger-label">
|
|
{{ $selectedCount === 0 ? 'No events selected' : $selectedLabels }}
|
|
</span>
|
|
<span
|
|
class="shrink-0 rounded-full bg-neutral-100 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500 dark:bg-white/[0.07] dark:text-fg-dim">
|
|
{{ $selectedCount }}/{{ count($events) }}
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="size-3.5 shrink-0 opacity-60">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m8 9 4-4 4 4m0 6-4 4-4-4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="listbox-panel" x-show="open" x-cloak
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 -translate-y-1 scale-[0.98]"
|
|
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
|
|
x-transition:leave-end="opacity-0 -translate-y-1 scale-[0.98]"
|
|
role="listbox" aria-multiselectable="true">
|
|
@foreach ($events as $event)
|
|
<button wire:key="{{ $id }}-{{ $event['property'] }}" type="button" class="listbox-option"
|
|
role="option" aria-selected="{{ $event['enabled'] ? 'true' : 'false' }}"
|
|
wire:click="toggleEvent('{{ $event['property'] }}')" @disabled($disabled)>
|
|
<span class="truncate">{{ $event['label'] }}</span>
|
|
<span @class([
|
|
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
|
|
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $event['enabled'],
|
|
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $event['enabled'],
|
|
])>
|
|
@if ($event['enabled'])
|
|
<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<path d="m2.25 6.15 2.35 2.3 5.15-5" stroke="currentColor" stroke-width="1.8"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
@endif
|
|
</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|