Joseph.Rawlings
abff5a381f
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
120 lines
4.4 KiB
PHP
120 lines
4.4 KiB
PHP
@props([
|
|
'label' => null,
|
|
'id' => null,
|
|
'name' => null,
|
|
'type' => 'text',
|
|
'placeholder' => null,
|
|
'hint' => null,
|
|
'error' => null,
|
|
'required' => false,
|
|
'disabled' => false,
|
|
'readonly' => false,
|
|
'prefix' => null,
|
|
'suffix' => null,
|
|
'icon' => null,
|
|
'iconPosition' => 'left',
|
|
'size' => 'md',
|
|
])
|
|
|
|
@php
|
|
$inputId = $id ?? $name ?? Str::random(8);
|
|
|
|
// LucentUI size classes
|
|
$sizeClasses = match($size) {
|
|
'sm' => 'px-2.5 py-1.5 text-sm',
|
|
'md' => 'px-3 py-2 text-sm',
|
|
'lg' => 'px-4 py-2.5 text-base',
|
|
default => 'px-3 py-2 text-sm',
|
|
};
|
|
|
|
$iconSizeClasses = match($size) {
|
|
'sm' => 'size-4',
|
|
'md' => 'size-4',
|
|
'lg' => 'size-5',
|
|
default => 'size-4',
|
|
};
|
|
|
|
// LucentUI input classes
|
|
$inputClasses = "w-full bg-background border border-neutral rounded-lg text-base placeholder:text-base/50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 $sizeClasses";
|
|
if ($error) {
|
|
$inputClasses .= ' border-error focus:ring-error/50 focus:border-error';
|
|
}
|
|
if ($disabled) {
|
|
$inputClasses .= ' opacity-50 cursor-not-allowed';
|
|
}
|
|
@endphp
|
|
|
|
<div {{ $attributes->only('class')->merge(['class' => 'mb-3']) }}>
|
|
{{-- Label --}}
|
|
@if($label)
|
|
<label for="{{ $inputId }}" class="block mb-2 font-medium text-sm text-base">
|
|
{{ $label }}
|
|
@if($required)
|
|
<span class="text-error">*</span>
|
|
@endif
|
|
</label>
|
|
@endif
|
|
|
|
{{-- Input wrapper --}}
|
|
@if($icon || $prefix || $suffix)
|
|
<div class="flex items-stretch">
|
|
{{-- Left icon/prefix --}}
|
|
@if($icon && $iconPosition === 'left')
|
|
<span class="inline-flex items-center px-3 bg-background-secondary border border-r-0 border-neutral rounded-l-lg text-base/60">
|
|
<x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
|
|
</span>
|
|
@endif
|
|
@if($prefix)
|
|
<span class="inline-flex items-center px-3 bg-background-secondary border border-r-0 border-neutral {{ ($icon && $iconPosition === 'left') ? '' : 'rounded-l-lg' }} text-base/60 text-sm">{{ $prefix }}</span>
|
|
@endif
|
|
|
|
{{-- Input --}}
|
|
<input
|
|
type="{{ $type }}"
|
|
id="{{ $inputId }}"
|
|
@if($name) name="{{ $name }}" @endif
|
|
@if($placeholder) placeholder="{{ $placeholder }}" @endif
|
|
@if($required) required @endif
|
|
@if($disabled) disabled @endif
|
|
@if($readonly) readonly @endif
|
|
{{ $attributes->except('class')->merge(['class' => $inputClasses . ' rounded-none ' . ((!$icon || $iconPosition !== 'left') && !$prefix ? 'rounded-l-lg' : '') . ' ' . ((!$icon || $iconPosition !== 'right') && !$suffix ? 'rounded-r-lg' : '')]) }}
|
|
>
|
|
|
|
{{-- Right icon/suffix --}}
|
|
@if($icon && $iconPosition === 'right')
|
|
<span class="inline-flex items-center px-3 bg-background-secondary border border-l-0 border-neutral rounded-r-lg text-base/60">
|
|
<x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
|
|
</span>
|
|
@endif
|
|
@if($suffix)
|
|
<span class="inline-flex items-center px-3 bg-background-secondary border border-l-0 border-neutral {{ ($icon && $iconPosition === 'right') ? '' : 'rounded-r-lg' }} text-base/60 text-sm">{{ $suffix }}</span>
|
|
@endif
|
|
</div>
|
|
@else
|
|
{{-- Simple input without addon --}}
|
|
<input
|
|
type="{{ $type }}"
|
|
id="{{ $inputId }}"
|
|
@if($name) name="{{ $name }}" @endif
|
|
@if($placeholder) placeholder="{{ $placeholder }}" @endif
|
|
@if($required) required @endif
|
|
@if($disabled) disabled @endif
|
|
@if($readonly) readonly @endif
|
|
{{ $attributes->except('class')->merge(['class' => $inputClasses]) }}
|
|
>
|
|
@endif
|
|
|
|
{{-- Hint text --}}
|
|
@if($hint && !$error)
|
|
<small class="block mt-1 text-xs text-base/60">{{ $hint }}</small>
|
|
@endif
|
|
|
|
{{-- Error message --}}
|
|
@if($error)
|
|
<div class="flex items-center gap-1 mt-1 text-sm text-error">
|
|
<x-ri-error-warning-line class="size-3.5" />
|
|
{{ $error }}
|
|
</div>
|
|
@endif
|
|
</div>
|