pluck('icon:trailing'); ?>
pluck('icon:leading'); ?>
pluck('icon:variant'); ?>
$attributes->whereStartsWith('wire:model')->first(),
'iconVariant' => 'mini',
'variant' => 'outline',
'iconTrailing' => null,
'iconLeading' => null,
'expandable' => null,
'clearable' => null,
'copyable' => null,
'viewable' => null,
'invalid' => null,
'loading' => null,
'type' => 'text',
'mask' => null,
'size' => null,
'icon' => null,
'kbd' => null,
'as' => null,
]));
foreach ($attributes->all() as $__key => $__value) {
if (in_array($__key, $__propNames)) {
$$__key = $$__key ?? $__value;
} else {
$__newAttributes[$__key] = $__value;
}
}
$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);
unset($__propNames);
unset($__newAttributes);
foreach (array_filter(([
'name' => $attributes->whereStartsWith('wire:model')->first(),
'iconVariant' => 'mini',
'variant' => 'outline',
'iconTrailing' => null,
'iconLeading' => null,
'expandable' => null,
'clearable' => null,
'copyable' => null,
'viewable' => null,
'invalid' => null,
'loading' => null,
'type' => 'text',
'mask' => null,
'size' => null,
'icon' => null,
'kbd' => null,
'as' => null,
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
$$__key = $$__key ?? $__value;
}
$__defined_vars = get_defined_vars();
foreach ($attributes->all() as $__key => $__value) {
if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}
unset($__defined_vars); ?>
wire('model');
$wireTarget = null;
if ($loading !== false) {
if ($loading === true) {
$loading = true;
} elseif ($wireModel?->directive) {
$loading = $wireModel->hasModifier('live');
$wireTarget = $loading ? $wireModel->value() : null;
} else {
$wireTarget = $loading;
$loading = (bool) $loading;
}
}
$invalid ??= ($name && $errors->has($name));
$iconLeading ??= $icon;
$hasLeadingIcon = (bool) ($iconLeading);
$countOfTrailingIcons = collect([
(bool) $iconTrailing,
(bool) $kbd,
(bool) $clearable,
(bool) $copyable,
(bool) $viewable,
(bool) $expandable,
])->filter()->count();
$iconClasses = Flux::classes()
// When using the outline icon variant, we need to size it down to match the default icon sizes...
->add($iconVariant === 'outline' ? 'size-5' : '')
;
$inputLoadingClasses = Flux::classes()
// When loading, we need to add some extra padding to the input to account for the loading icon...
->add(match ($countOfTrailingIcons) {
0 => 'pe-10',
1 => 'pe-16',
2 => 'pe-23',
3 => 'pe-30',
4 => 'pe-37',
5 => 'pe-44',
6 => 'pe-51',
})
;
$classes = Flux::classes()
->add('w-full border rounded-lg block disabled:shadow-none dark:shadow-none')
->add('appearance-none') // Without this, input[type="date"] on mobile doesn't respect w-full...
->add(match ($size) {
default => 'text-base sm:text-sm py-2 h-10 leading-[1.375rem]', // This makes the height of the input 40px (same as buttons and such...)
'sm' => 'text-sm py-1.5 h-8 leading-[1.125rem]',
'xs' => 'text-xs py-1.5 h-6 leading-[1.125rem]',
})
->add(match ($hasLeadingIcon) {
true => 'ps-10',
false => 'ps-3',
})
->add(match ($countOfTrailingIcons) {
// Make sure there's enough padding on the right side of the input to account for all the icons...
0 => 'pe-3',
1 => 'pe-10',
2 => 'pe-16',
3 => 'pe-23',
4 => 'pe-30',
5 => 'pe-37',
6 => 'pe-44',
})
->add(match ($variant) { // Background...
'outline' => 'bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]',
'filled' => 'bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%]',
})
->add(match ($variant) { // Text color
'outline' => 'text-zinc-700 disabled:text-zinc-500 placeholder-zinc-400 disabled:placeholder-zinc-400/70 dark:text-zinc-300 dark:disabled:text-zinc-400 dark:placeholder-zinc-400 dark:disabled:placeholder-zinc-500',
'filled' => 'text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40',
})
->add(match ($variant) { // Border...
'outline' => $invalid ? 'border-red-500' : 'shadow-xs border-zinc-200 border-b-zinc-300/80 disabled:border-b-zinc-200 dark:border-white/10 dark:disabled:border-white/5',
'filled' => $invalid ? 'border-red-500' : 'border-0',
})
->add($attributes->pluck('class:input'))
;
?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::with-field','data' => ['attributes' => $attributes,'name' => $name]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::with-field'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['attributes' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($attributes),'name' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($name)]); ?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::input.file','data' => ['attributes' => $attributes,'name' => $name,'size' => $size]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::input.file'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['attributes' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($attributes),'name' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($name),'size' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($size)]); ?>
renderComponent(); ?>
renderComponent(); ?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::with-field','data' => ['attributes' => $attributes,'name' => $name]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::with-field'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['attributes' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($attributes),'name' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($name)]); ?>
only('class')->class('w-full relative block group/input')); ?> data-flux-input>
'e60dd9d2c3a62d619c9acb38f20d5aa5::icon.index','data' => ['icon' => $iconLeading,'variant' => $iconVariant,'class' => $iconClasses]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::icon'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['icon' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconLeading),'variant' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconVariant),'class' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconClasses)]); ?>
renderComponent(); ?>
attributes->class('absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 ps-3 start-0')); ?>>
except('class')->class($type === 'file' ? '' : $classes)); ?>
name=""
x-mask=""
aria-invalid="true" data-invalid
size=""
data-flux-control
data-flux-group-target
wire:loading.class=""
wire:target=""
>
'e60dd9d2c3a62d619c9acb38f20d5aa5::icon.index','data' => ['name' => 'loading','variant' => $iconVariant,'class' => $iconClasses,'wire:loading' => true,'wire:target' => $wireTarget]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::icon'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['name' => 'loading','variant' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconVariant),'class' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconClasses),'wire:loading' => true,'wire:target' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($wireTarget)]); ?>
renderComponent(); ?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::input.clearable','data' => ['inset' => 'left right','size' => $size]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::input.clearable'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['inset' => 'left right','size' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($size)]); ?>
renderComponent(); ?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::input.expandable','data' => ['inset' => 'left right','size' => $size]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::input.expandable'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['inset' => 'left right','size' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($size)]); ?>
renderComponent(); ?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::input.copyable','data' => ['inset' => 'left right','size' => $size]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::input.copyable'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['inset' => 'left right','size' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($size)]); ?>
renderComponent(); ?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::input.viewable','data' => ['inset' => 'left right','size' => $size]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::input.viewable'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['inset' => 'left right','size' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($size)]); ?>
renderComponent(); ?>
add('pointer-events-none text-zinc-400/75');
?>
'e60dd9d2c3a62d619c9acb38f20d5aa5::icon.index','data' => ['icon' => $iconTrailing,'variant' => $iconVariant,'class' => $trailingIconClasses]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('flux::icon'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['icon' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconTrailing),'variant' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconVariant),'class' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($trailingIconClasses)]); ?>
renderComponent(); ?>
renderComponent(); ?>