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.
86 lines
2.6 KiB
PHP
86 lines
2.6 KiB
PHP
@props([
|
|
'value' => 0,
|
|
'max' => 100,
|
|
'size' => 'md',
|
|
'variant' => 'primary',
|
|
'label' => null,
|
|
'showValue' => false,
|
|
'animated' => false,
|
|
'striped' => false,
|
|
])
|
|
|
|
@php
|
|
$percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
|
|
|
|
// AdminLTE size classes
|
|
$sizeClasses = match($size) {
|
|
'xs' => 'lte-progress-xs',
|
|
'sm' => 'lte-progress-sm',
|
|
'md' => '',
|
|
'lg' => '',
|
|
'xl' => '',
|
|
default => '',
|
|
};
|
|
|
|
// Height style for non-standard sizes
|
|
$heightStyle = match($size) {
|
|
'lg' => 'height: 1.25rem;',
|
|
'xl' => 'height: 1.5rem;',
|
|
default => '',
|
|
};
|
|
|
|
// AdminLTE variant classes for the fill
|
|
$variantClasses = match($variant) {
|
|
'primary' => 'lte-bg-primary',
|
|
'secondary' => 'lte-bg-secondary',
|
|
'success' => 'lte-bg-success',
|
|
'danger' => 'lte-bg-danger',
|
|
'warning' => 'lte-bg-warning',
|
|
'info' => 'lte-bg-info',
|
|
'gradient' => 'lte-bg-gradient-primary',
|
|
default => 'lte-bg-primary',
|
|
};
|
|
|
|
// Dynamic color based on percentage
|
|
if ($variant === 'auto') {
|
|
if ($percentage >= 90) {
|
|
$variantClasses = 'lte-bg-danger';
|
|
} elseif ($percentage >= 70) {
|
|
$variantClasses = 'lte-bg-warning';
|
|
} else {
|
|
$variantClasses = 'lte-bg-success';
|
|
}
|
|
}
|
|
|
|
// Animation classes - AdminLTE style
|
|
$animatedClasses = $animated ? 'lte-progress-bar-animated' : '';
|
|
$stripedClasses = $striped ? 'lte-progress-bar-striped' : '';
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
|
|
{{-- Label and value row --}}
|
|
@if($label || $showValue)
|
|
<div class="flex items-center justify-between text-sm">
|
|
@if($label)
|
|
<span class="lte-text-muted" style="font-weight: 500;">{{ $label }}</span>
|
|
@endif
|
|
@if($showValue)
|
|
<span style="font-weight: 600;">{{ number_format($percentage, 1) }}%</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Progress bar container - AdminLTE style --}}
|
|
<div class="lte-progress {{ $sizeClasses }}" @if($heightStyle) style="{{ $heightStyle }}" @endif>
|
|
{{-- Progress bar fill --}}
|
|
<div
|
|
class="lte-progress-bar {{ $variantClasses }} {{ $animatedClasses }} {{ $stripedClasses }}"
|
|
style="width: {{ $percentage }}%"
|
|
role="progressbar"
|
|
aria-valuenow="{{ $value }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="{{ $max }}"
|
|
></div>
|
|
</div>
|
|
</div>
|