Joseph.Rawlings
b7b81b0d3a
- Updated alert component to use AdminLTE variant classes and added callout support. - Refined badge component with AdminLTE base and variant classes, including size adjustments. - Modified button component to implement AdminLTE button styles and improved loading indicators. - Enhanced card component with AdminLTE variant classes and improved header/footer structure. - Adjusted input component to follow AdminLTE design, including size classes and icon handling. - Updated layout component to streamline button styles and loading indicators. - Refined progress component to utilize AdminLTE styles for size and variant classes. - Enhanced table component with AdminLTE table classes and improved loading state representation.
76 lines
2.5 KiB
PHP
76 lines
2.5 KiB
PHP
@props([
|
|
'striped' => false,
|
|
'hoverable' => true,
|
|
'compact' => false,
|
|
'responsive' => true,
|
|
'stickyHeader' => false,
|
|
'emptyMessage' => 'No data available',
|
|
'emptyIcon' => 'ri-inbox-line',
|
|
'loading' => false,
|
|
])
|
|
|
|
@php
|
|
// AdminLTE table classes
|
|
$tableClasses = 'lte-table';
|
|
if ($striped) {
|
|
$tableClasses .= ' lte-table-striped';
|
|
}
|
|
if ($hoverable) {
|
|
$tableClasses .= ' lte-table-hover';
|
|
}
|
|
|
|
$wrapperClasses = 'lte-card';
|
|
|
|
if ($responsive) {
|
|
$wrapperClasses .= ' overflow-x-auto';
|
|
}
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
|
|
@if($loading)
|
|
<div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;">
|
|
<div class="lte-spinner"></div>
|
|
<p class="lte-text-muted" style="font-size: 0.875rem;">Loading data...</p>
|
|
</div>
|
|
@else
|
|
<table class="{{ $tableClasses }}" style="width: 100%;">
|
|
@if(isset($head))
|
|
<thead @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
|
|
<tr>
|
|
{{ $head }}
|
|
</tr>
|
|
</thead>
|
|
@endif
|
|
|
|
@if(isset($body) && $body->isNotEmpty())
|
|
<tbody>
|
|
{{ $body }}
|
|
</tbody>
|
|
@elseif($slot->isNotEmpty())
|
|
<tbody>
|
|
{{ $slot }}
|
|
</tbody>
|
|
@else
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="100" style="padding: 3rem 1.25rem;">
|
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;">
|
|
<div class="lte-info-box-icon lte-bg-light rounded" style="width: 56px; height: 56px;">
|
|
<x-dynamic-component :component="$emptyIcon" class="size-7 lte-text-muted" />
|
|
</div>
|
|
<p class="lte-text-muted" style="font-size: 0.875rem;">{{ $emptyMessage }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
@endif
|
|
|
|
@if(isset($foot))
|
|
<tfoot class="bg-neutral/5 border-t border-neutral/10">
|
|
{{ $foot }}
|
|
</tfoot>
|
|
@endif
|
|
</table>
|
|
@endif
|
|
</div>
|