🎨 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.

2026-01-28 07:43:18 +00:00 · 2026-01-23 23:00:02 +01:00
parent 578e4f13fc
commit b30fec150c
792 changed files with 307541 additions and 117 deletions
--- a/resources/views/flux/modal/index.blade.php
+++ b/resources/views/flux/modal/index.blade.php
@@ -0,0 +1,118 @@
+@blaze
+
+@props([
+    'dismissible' => null,
+    'position' => null,
+    'closable' => null,
+    'trigger' => null,
+    'variant' => null,
+    'flyout' => null,
+    'name' => null,
+])
+
+@php
+if ($variant === 'flyout') {
+    $flyout = true;
+    $variant = null;
+}
+
+$closable ??= $variant === 'bare' ? false : true;
+
+if ($flyout) {
+    $classes = Flux::classes()
+        ->add(match ($variant) {
+            default => match($position) {
+                'bottom' => 'fixed m-0 p-8 min-w-[100vw] overflow-y-auto mt-auto [--flux-flyout-translate:translateY(50px)] border-t',
+                'left' => 'fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto mr-auto [--flux-flyout-translate:translateX(-50px)] border-e rtl:mr-0 rtl:ml-auto rtl:[--flux-flyout-translate:translateX(50px)]',
+                default => 'fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto ml-auto [--flux-flyout-translate:translateX(50px)] border-s rtl:ml-0 rtl:mr-auto rtl:[--flux-flyout-translate:translateX(-50px)]',
+            },
+            'floating' => match($position) {
+                'bottom' => 'fixed m-2 p-8 min-w-[calc(100vw-1rem)] overflow-y-auto mt-auto [--flux-flyout-translate:translateY(50px)]',
+                'left' => 'fixed m-2 p-8 max-h-[calc(100dvh-1rem)] min-h-[calc(100dvh-1rem)] md:[:where(&)]:min-w-[25rem] overflow-y-auto mr-auto [--flux-flyout-translate:translateX(-50px)] rtl:mr-0 rtl:ml-auto rtl:[--flux-flyout-translate:translateX(50px)]',
+                default => 'fixed m-2 p-8 max-h-[calc(100dvh-1rem)] min-h-[calc(100dvh-1rem)] md:[:where(&)]:min-w-[25rem] overflow-y-auto ml-auto [--flux-flyout-translate:translateX(50px)] rtl:ml-0 rtl:mr-auto rtl:[--flux-flyout-translate:translateX(-50px)]',
+            },
+            'bare' => '',
+        })
+        ->add(match ($variant) {
+            default => 'bg-bg-surface border-border-subtle',
+            'floating' => 'bg-bg-surface ring ring-border-default shadow-lg rounded-xl',
+            'bare' => 'bg-transparent',
+        });
+} else {
+    $classes = Flux::classes()
+        ->add(match ($variant) {
+            default => 'p-6 [:where(&)]:max-w-xl [:where(&)]:min-w-xs shadow-lg rounded-xl',
+            'bare' => '',
+        })
+        ->add(match ($variant) {
+            default => 'bg-bg-surface ring ring-border-default shadow-lg rounded-xl',
+            'bare' => 'bg-transparent',
+        });
+}
+
+// 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]);
+}
+
+// Support <flux:modal ... @close="?"> syntax...
+if ($attributes['@close'] ?? null) {
+    $attributes['wire:close'] = $attributes['@close'];
+
+    unset($attributes['@close']);
+}
+
+// Support <flux:modal ... @cancel="?"> syntax...
+if ($attributes['@cancel'] ?? null) {
+    $attributes['wire:cancel'] = $attributes['@cancel'];
+
+    unset($attributes['@cancel']);
+}
+
+if ($dismissible === false) {
+    $attributes = $attributes->merge(['disable-click-outside' => '']);
+}
+
+[ $styleAttributes, $attributes ] = Flux::splitAttributes($attributes, ['autofocus', 'class', 'style', 'wire:close', 'x-on:close', 'wire:cancel', 'x-on:cancel']);
+@endphp
+
+<ui-modal {{ $attributes }} data-flux-modal>
+    <?php if ($trigger): ?>
+        {{ $trigger }}
+    <?php endif; ?>
+
+    <dialog
+        wire:ignore.self {{-- This needs to be here because the dialog element adds a "close" attribute that isn't durable... --}}
+        {{ $styleAttributes->class($classes) }}
+        @if ($name) data-modal="{{ $name }}" @endif
+        @if ($flyout) data-flux-flyout @endif
+        x-data
+        @isset($__livewire)
+            x-on:modal-show.document="
+                if ($event.detail.name === @js($name) && ($event.detail.scope === @js($__livewire->getId()))) $el.showModal();
+                if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal();
+            "
+            x-on:modal-close.document="
+                if ($event.detail.name === @js($name) && ($event.detail.scope === @js($__livewire->getId()))) $el.close();
+                if (! $event.detail.name || ($event.detail.name === @js($name) && (! $event.detail.scope))) $el.close();
+            "
+        @else
+            x-on:modal-show.document="if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal()"
+            x-on:modal-close.document="if (! $event.detail.name || ($event.detail.name === @js($name) && (! $event.detail.scope))) $el.close()"
+        @endif
+    >
+        {{ $slot }}
+
+        <?php if ($closable): ?>
+            <div class="absolute top-0 end-0 mt-4 me-4">
+                <flux:modal.close>
+                    <flux:button variant="ghost" icon="x-mark" size="sm" aria-label="Close modal" class="text-text-tertiary! hover:text-text-primary!"></flux:button>
+                </flux:modal.close>
+            </div>
+        <?php endif; ?>
+    </dialog>
+</ui-modal>