53 lines
2.5 KiB
PHP
53 lines
2.5 KiB
PHP
<div x-data="{ show: false }" class="flex flex-col items-center">
|
|
<div class="flex flex-col items-center relative">
|
|
<button x-on:click="show = !show" class="px-3 py-2 border border-blue-400 rounded-md bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">
|
|
<div class="flex items-center h-5">
|
|
{{ __('Show / Hide Columns')}}
|
|
</div>
|
|
</button>
|
|
<div x-show="show" x-on:click.away="show = false" class="z-50 absolute mt-16 -mr-4 shadow-2xl top-100 bg-white w-96 right-0 rounded max-h-select overflow-y-auto" x-cloak>
|
|
<div class="flex flex-col w-full">
|
|
@foreach($this->columns as $index => $column)
|
|
<div>
|
|
<div class="@unless($column['hidden']) hidden @endif cursor-pointer w-full border-theme-secondary border-b bg-theme-primary text-theme-muted hover:bg-blue-600 hover:text-white" wire:click="toggle({{$index}})">
|
|
<div class="relative flex w-full items-center p-2 group">
|
|
<div class=" w-full items-center flex">
|
|
<div class="mx-2 leading-6">{{ $column['label'] }}</div>
|
|
</div>
|
|
<div class="absolute inset-y-0 right-0 pr-2 flex items-center">
|
|
<x-icons.check-circle class="h-3 w-3 stroke-current text-theme-primary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="@if($column['hidden']) hidden @endif cursor-pointer w-full border-theme-secondary border-b bg-theme-primary text-white hover:bg-red-600" wire:click="toggle({{$index}})">
|
|
<div class="relative flex w-full items-center p-2 group">
|
|
<div class=" w-full items-center flex">
|
|
<div class="mx-2 leading-6">{{ $column['label'] }}</div>
|
|
</div>
|
|
<div class="absolute inset-y-0 right-0 pr-2 flex items-center">
|
|
<x-icons.x-circle class="h-3 w-3 stroke-current text-theme-primary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.top-100 {
|
|
top: 100%
|
|
}
|
|
|
|
.bottom-100 {
|
|
bottom: 100%
|
|
}
|
|
|
|
.max-h-select {
|
|
max-height: 300px;
|
|
}
|
|
|
|
</style>
|