mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 04:23:34 +00:00
Andras Bacsai
5b517f21be
Add full-width and centered layout preferences across the app shell and workspaces. Replace page-size selects with dropdowns and add searchable breadcrumb switching.
64 lines
3.2 KiB
PHP
64 lines
3.2 KiB
PHP
@props([
|
|
'model',
|
|
'livewire' => false,
|
|
'options' => [10, 25, 50, 100],
|
|
'storageKey' => null,
|
|
])
|
|
|
|
<div class="mb-0! flex h-7 items-center gap-1.5 text-[11px] text-neutral-500 dark:text-fg-dim"
|
|
x-data="{
|
|
selectedPageSize: @js((int) $options[0]),
|
|
customPageSize: @js((int) $options[0]),
|
|
customizingPageSize: false,
|
|
applyPageSize(value) {
|
|
const pageSizeValue = Math.min(100, Math.max(1, Number(value) || 1));
|
|
this.selectedPageSize = pageSizeValue;
|
|
this.customPageSize = pageSizeValue;
|
|
this.customizingPageSize = false;
|
|
@if ($livewire)
|
|
$wire.set(@js($model), pageSizeValue);
|
|
@else
|
|
{{ $model }} = pageSizeValue;
|
|
page = 1;
|
|
@endif
|
|
@if (filled($storageKey))
|
|
localStorage.setItem(@js($storageKey), pageSizeValue);
|
|
@endif
|
|
}
|
|
}"
|
|
x-init="
|
|
@if (filled($storageKey))
|
|
const savedPageSize = Number(localStorage.getItem(@js($storageKey)));
|
|
if (savedPageSize >= 1 && savedPageSize <= 100) applyPageSize(savedPageSize);
|
|
@endif
|
|
">
|
|
<span x-show="!customizingPageSize" class="relative inline-flex h-7 w-12 items-center">
|
|
<x-table.dropdown panel-class="min-w-24!">
|
|
<x-slot:trigger>
|
|
<button type="button" aria-label="Items per page" aria-haspopup="listbox" :aria-expanded="open"
|
|
class="inline-flex h-7! w-12! items-center justify-between border-0 px-1 text-[11px]! leading-none! tabular-nums text-neutral-500 transition-colors hover:text-black dark:text-fg-dim dark:hover:text-fg">
|
|
<span x-text="selectedPageSize"></span>
|
|
<x-reicon name="chevron-down" class="size-3 text-neutral-400 dark:text-fg-faint" />
|
|
</button>
|
|
</x-slot:trigger>
|
|
@foreach ($options as $option)
|
|
<button type="button" class="listbox-option" role="option"
|
|
:aria-selected="selectedPageSize === {{ (int) $option }}"
|
|
x-on:click="applyPageSize({{ (int) $option }})">
|
|
<span>{{ $option }}</span>
|
|
<x-reicon x-show="selectedPageSize === {{ (int) $option }}" name="check" class="size-3.5" />
|
|
</button>
|
|
@endforeach
|
|
<button type="button" class="listbox-option" role="option"
|
|
x-on:click="customizingPageSize = true; $nextTick(() => $refs.customPageSize.focus())">
|
|
Custom…
|
|
</button>
|
|
</x-table.dropdown>
|
|
</span>
|
|
<input x-cloak x-show="customizingPageSize" x-ref="customPageSize" x-model.number="customPageSize"
|
|
x-on:keydown.enter.prevent="applyPageSize(customPageSize)" x-on:keydown.escape.prevent="customizingPageSize = false"
|
|
x-on:blur="if (customizingPageSize) applyPageSize(customPageSize)" type="number" min="1" max="100" inputmode="numeric"
|
|
aria-label="Custom items per page"
|
|
class="mb-0! h-7! w-14! rounded-md! border-neutral-200! bg-transparent! px-1.5! py-0! text-[11px]! tabular-nums shadow-none! focus:border-neutral-300! focus:ring-0! dark:border-white/[0.08]! dark:text-fg-dim!" />
|
|
</div>
|