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:
5
resources/views/flux/checkbox/group/index.blade.php
Normal file
5
resources/views/flux/checkbox/group/index.blade.php
Normal file
@@ -0,0 +1,5 @@
|
||||
@props([
|
||||
'variant' => 'default',
|
||||
])
|
||||
|
||||
<flux:delegate-component :component="'checkbox.group.variants.' . $variant">{{ $slot }}</flux:delegate-component>
|
||||
@@ -0,0 +1,25 @@
|
||||
@props([
|
||||
'variant' => null,
|
||||
'size' => null,
|
||||
'name' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
// We only want to show the name attribute on the checkbox if it has been set
|
||||
// manually, but not if it has been set from the wire:model attribute...
|
||||
$showName = isset($name);
|
||||
|
||||
if (! isset($name)) {
|
||||
$name = $attributes->whereStartsWith('wire:model')->first();
|
||||
}
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('flex flex-wrap gap-2')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<flux:with-field :$attributes>
|
||||
<ui-checkbox-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-checkbox-group-buttons>
|
||||
{{ $slot }}
|
||||
</ui-checkbox-group>
|
||||
</flux:with-field>
|
||||
25
resources/views/flux/checkbox/group/variants/cards.blade.php
Normal file
25
resources/views/flux/checkbox/group/variants/cards.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
@props([
|
||||
'variant' => null,
|
||||
'size' => null,
|
||||
'name' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
// We only want to show the name attribute on the checkbox if it has been set
|
||||
// manually, but not if it has been set from the wire:model attribute...
|
||||
$showName = isset($name);
|
||||
|
||||
if (! isset($name)) {
|
||||
$name = $attributes->whereStartsWith('wire:model')->first();
|
||||
}
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('flex gap-3')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<flux:with-field :$attributes>
|
||||
<ui-checkbox-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-checkbox-group-cards>
|
||||
{{ $slot }}
|
||||
</ui-checkbox-group>
|
||||
</flux:with-field>
|
||||
@@ -0,0 +1,22 @@
|
||||
@php
|
||||
$classes = Flux::classes()
|
||||
->add('*:data-flux-field:mb-3')
|
||||
->add('[&>[data-flux-field]:has(>[data-flux-description])]:mb-4')
|
||||
->add('[&>[data-flux-field]:last-child]:mb-0!')
|
||||
;
|
||||
|
||||
// Support adding the .self modifier to the wire:model directive...
|
||||
if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
|
||||
unset($attributes[$wireModel->directive]);
|
||||
|
||||
$wireModel->directive .= '.self';
|
||||
|
||||
$attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
|
||||
}
|
||||
@endphp
|
||||
|
||||
<flux:with-field :$attributes>
|
||||
<ui-checkbox-group {{ $attributes->class($classes) }} data-flux-checkbox-group>
|
||||
{{ $slot }}
|
||||
</ui-checkbox-group>
|
||||
</flux:with-field>
|
||||
25
resources/views/flux/checkbox/group/variants/pills.blade.php
Normal file
25
resources/views/flux/checkbox/group/variants/pills.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
@props([
|
||||
'variant' => null,
|
||||
'size' => null,
|
||||
'name' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
// We only want to show the name attribute on the checkbox if it has been set
|
||||
// manually, but not if it has been set from the wire:model attribute...
|
||||
$showName = isset($name);
|
||||
|
||||
if (! isset($name)) {
|
||||
$name = $attributes->whereStartsWith('wire:model')->first();
|
||||
}
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('flex flex-wrap gap-3')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<flux:with-field :$attributes>
|
||||
<ui-checkbox-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-checkbox-group-pills>
|
||||
{{ $slot }}
|
||||
</ui-checkbox-group>
|
||||
</flux:with-field>
|
||||
Reference in New Issue
Block a user