mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-20 00:15:06 +00:00
feat(ui): add shared table controls and multi-select filters
Introduce x-table toolbar/search/filter/sort/loading components and multi-select deployment history filters with OR within groups and AND across groups. Add live database/service status for breadcrumbs, shared variables layout controls, logs viewer toolbar polish, and infrastructure list filter consistency. Document patterns in UI_REDESIGN.md and cover with feature tests.
This commit is contained in:
1 parent
66b202adfe
commit
2a5197fb30
57 files changed
+1415
-579
No files matched your search
@@ -0,0 +1,33 @@
|
||||
@props([
|
||||
'placeholder' => 'Search',
|
||||
'loadingTarget' => null,
|
||||
'disabled' => false,
|
||||
'clearAction' => null,
|
||||
'clearWhen' => null,
|
||||
])
|
||||
|
||||
<div class="table-search relative min-w-0 w-full">
|
||||
<input type="search" placeholder="{{ $placeholder }}" aria-label="{{ $placeholder }}"
|
||||
{{ $attributes->class(['input w-full pl-8!'])->except(['loading-target']) }} @disabled($disabled) />
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
|
||||
@if ($loadingTarget)
|
||||
<x-reicon name="search" class="size-3.5 text-neutral-400 dark:text-fg-faint"
|
||||
wire:loading.remove wire:target="{{ $loadingTarget }}" />
|
||||
<svg wire:loading wire:target="{{ $loadingTarget }}" aria-hidden="true"
|
||||
class="size-3.5 animate-spin text-neutral-400 dark:text-fg-dim" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
@else
|
||||
<x-reicon name="search" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
|
||||
@endif
|
||||
</div>
|
||||
@if ($clearAction && $clearWhen)
|
||||
<button x-cloak x-show="{{ $clearWhen }}" x-on:click="{{ $clearAction }}" type="button"
|
||||
class="absolute top-1/2 right-2 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.07] dark:hover:text-fg"
|
||||
aria-label="Clear search">
|
||||
<x-reicon name="x" class="size-3" />
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
Reference in new issue
Block a user