mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.
This commit is contained in:
HolgerHatGarKeineNode
233
resources/views/flux/input/index.blade.php
Normal file
233
resources/views/flux/input/index.blade.php
Normal file
@@ -0,0 +1,233 @@
|
||||
@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
|
||||
@php $iconLeading ??= $attributes->pluck('icon:leading'); @endphp
|
||||
@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
|
||||
@php $maskDynamic ??= $attributes->pluck('mask:dynamic'); @endphp
|
||||
|
||||
@props([
|
||||
'name' => $attributes->whereStartsWith('wire:model')->first(),
|
||||
'iconVariant' => 'mini',
|
||||
'variant' => 'outline',
|
||||
'iconTrailing' => null,
|
||||
'iconLeading' => null,
|
||||
'maskDynamic' => 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,
|
||||
])
|
||||
|
||||
@php
|
||||
|
||||
// There are a few loading scenarios that this covers:
|
||||
// If `:loading="false"` then never show loading.
|
||||
// If `:loading="true"` then always show loading.
|
||||
// If `:loading="foo"` then show loading when `foo` request is happening.
|
||||
// If `wire:model` then never show loading.
|
||||
// If `wire:model.live` then show loading when the `wire:model` value request is happening.
|
||||
$wireModel = $attributes->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-bg-surface disabled:bg-bg-elevated',
|
||||
'filled' => 'bg-bg-elevated disabled:bg-bg-surface',
|
||||
})
|
||||
->add(match ($variant) { // Text color
|
||||
'outline' => 'text-text-primary disabled:text-text-disabled placeholder-text-disabled disabled:placeholder-text-disabled/70',
|
||||
'filled' => 'text-text-primary placeholder-text-tertiary disabled:placeholder-text-disabled',
|
||||
})
|
||||
->add(match ($variant) { // Border...
|
||||
'outline' => 'shadow-none border-border-default disabled:border-border-subtle focus:border-orange-primary focus:ring-1 focus:ring-orange-primary/30',
|
||||
'filled' => 'border-0',
|
||||
})
|
||||
->add(match ($variant) { // Invalid...
|
||||
'outline' => 'data-invalid:shadow-none data-invalid:border-red-500 dark:data-invalid:border-red-500 disabled:data-invalid:border-red-500 dark:disabled:data-invalid:border-red-500',
|
||||
'filled' => 'data-invalid:border-red-500'
|
||||
})
|
||||
->add($attributes->pluck('class:input'))
|
||||
;
|
||||
@endphp
|
||||
|
||||
<?php if ($type === 'file'): ?>
|
||||
<flux:with-field :$attributes :$name>
|
||||
<flux:input.file :$attributes :$name :$size />
|
||||
</flux:with-field>
|
||||
<?php elseif ($as !== 'button'): ?>
|
||||
<flux:with-field :$attributes :$name>
|
||||
<div {{ $attributes->only('class')->class('w-full relative block group/input') }} data-flux-input>
|
||||
<?php if (is_string($iconLeading)): ?>
|
||||
<div class="pointer-events-none absolute top-0 bottom-0 border-s border-transparent flex items-center justify-center text-xs text-text-tertiary ps-3 start-0">
|
||||
<flux:icon :icon="$iconLeading" :variant="$iconVariant" :class="$iconClasses" />
|
||||
</div>
|
||||
<?php elseif ($iconLeading): ?>
|
||||
<div {{ $iconLeading->attributes->class('absolute top-0 bottom-0 border-s border-transparent flex items-center justify-center text-xs text-text-tertiary ps-3 start-0') }}>
|
||||
{{ $iconLeading }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<input
|
||||
type="{{ $type }}"
|
||||
{{-- Leave file inputs unstyled... --}}
|
||||
{{ $attributes->except('class')->class($type === 'file' ? '' : $classes) }}
|
||||
@isset ($name) name="{{ $name }}" @endisset
|
||||
@if ($maskDynamic) x-mask:dynamic="{{ $maskDynamic }}" @elseif ($mask) x-mask="{{ $mask }}" @endif
|
||||
@if ($invalid) aria-invalid="true" data-invalid @endif
|
||||
@if (is_numeric($size)) size="{{ $size }}" @endif
|
||||
data-flux-control
|
||||
data-flux-group-target
|
||||
@if ($loading) wire:loading.class="{{ $inputLoadingClasses }}" @endif
|
||||
@if ($loading && $wireTarget) wire:target="{{ $wireTarget }}" @endif
|
||||
>
|
||||
|
||||
<?php if ($loading || $countOfTrailingIcons > 0): ?>
|
||||
<div class="absolute top-0 bottom-0 flex items-center gap-x-1.5 pe-2 border-e border-transparent end-0 text-xs text-zinc-400">
|
||||
{{-- Icon should be text-zinc-400/75 --}}
|
||||
<?php if ($loading): ?>
|
||||
<flux:icon name="loading" :variant="$iconVariant" :class="$iconClasses" wire:loading :wire:target="$wireTarget" />
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($clearable): ?>
|
||||
<flux:input.clearable inset="left right" :$size />
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($kbd): ?>
|
||||
<span class="pointer-events-none">{{ $kbd }}</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($expandable): ?>
|
||||
<flux:input.expandable inset="left right" :$size />
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($copyable): ?>
|
||||
<flux:input.copyable inset="left right" :$size />
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($viewable): ?>
|
||||
<flux:input.viewable inset="left right" :$size />
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (is_string($iconTrailing)): ?>
|
||||
<?php
|
||||
$trailingIconClasses = clone $iconClasses;
|
||||
$trailingIconClasses->add('text-zinc-400/75 dark:text-white/60 pointer-events-none');
|
||||
?>
|
||||
<flux:icon :icon="$iconTrailing" :variant="$iconVariant" :class="$trailingIconClasses" />
|
||||
<?php elseif ($iconTrailing): ?>
|
||||
{{ $iconTrailing }}
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</flux:with-field>
|
||||
<?php else: ?>
|
||||
<button {{ $attributes->merge(['type' => 'button'])->class([$classes, 'w-full relative flex']) }}>
|
||||
<?php if (is_string($iconLeading)): ?>
|
||||
<div class="absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 ps-3 start-0">
|
||||
<flux:icon :icon="$iconLeading" :variant="$iconVariant" :class="$iconClasses" />
|
||||
</div>
|
||||
<?php elseif ($iconLeading): ?>
|
||||
<div {{ $iconLeading->attributes->class('absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 ps-3 start-0') }}>
|
||||
{{ $iconLeading }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($attributes->has('placeholder')): ?>
|
||||
<div class="block self-center text-start flex-1 font-medium text-zinc-400 dark:text-white/40">
|
||||
{{ $attributes->get('placeholder') }}
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="text-start self-center flex-1 font-medium text-zinc-800 dark:text-white">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($kbd): ?>
|
||||
<div class="absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pe-4 end-0">
|
||||
{{ $kbd }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (is_string($iconTrailing)): ?>
|
||||
<div class="absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pe-3 end-0">
|
||||
<flux:icon :icon="$iconTrailing" :variant="$iconVariant" :class="$iconClasses" />
|
||||
</div>
|
||||
<?php elseif ($iconTrailing): ?>
|
||||
<div {{ $iconTrailing->attributes->class('absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pe-2 end-0') }}>
|
||||
{{ $iconTrailing }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
Reference in New Issue
Block a user