Refactor dropdown into component

filamentphp · Aug 9, 2022 · 6866d4c · 6866d4c
1 parent 8c50355
commit 6866d4c
Show file tree

Hide file tree

Showing 15 changed files with 247 additions and 298 deletions.
diff --git a/packages/admin/resources/views/components/dropdown/index.blade.php b/packages/admin/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('filament.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php b/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
@@ -2,123 +2,104 @@
     $user = \Filament\Facades\Filament::auth()->user();
 @endphp
 
-<div
-    x-data="{
-        mode: null,
-
-        theme: null,
-
-        init: function () {
-            this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
-            this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'
-
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
-                if (this.mode === 'manual') return
-
-                if (event.matches && (! document.documentElement.classList.contains('dark'))) {
-                    this.theme = 'dark'
-
-                    document.documentElement.classList.add('dark')
-                } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
-                    this.theme = 'light'
-
-                    document.documentElement.classList.remove('dark')
-                }
-            })
-
-            $watch('theme', () => {
-                if (this.mode === 'auto') return
-
-                localStorage.setItem('theme', this.theme)
-
-                if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
-                    document.documentElement.classList.add('dark')
-                } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
-                    document.documentElement.classList.remove('dark')
-                }
-
-                $dispatch('dark-mode-toggled', this.theme)
-            })
-        },
-
-        isSystemDark: function () {
-            return window.matchMedia('(prefers-color-scheme: dark)').matches
-        },
-    }"
-    {{ $attributes->class(['relative']) }}
->
-    <button
-        x-on:click="$refs.panel.toggle"
-        class="block flex-shrink-0"
-    >
+<x-filament::dropdown>
+    <x-slot name="trigger">
         <x-filament::user-avatar :user="$user" />
-    </button>
-
-    <div
-        x-ref="panel"
-        x-float.placement.bottom-end.offset="{ offset: 8 }"
-        x-transition:enter="transition"
-        x-transition:enter-start="-translate-y-1 opacity-0"
-        x-transition:enter-end="translate-y-0 opacity-100"
-        x-transition:leave="transition"
-        x-transition:leave-start="translate-y-0 opacity-100"
-        x-transition:leave-end="-translate-y-1 opacity-0"
-        x-cloak
-        class="absolute z-10 hidden shadow-xl rounded-xl w-52 top-full"
+    </x-slot>
+
+    <ul
+        class="py-1 space-y-1"
+        x-data="{
+            mode: null,
+
+            theme: null,
+
+            init: function () {
+                this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
+                this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'
+
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+                    if (this.mode === 'manual') return
+
+                    if (event.matches && (! document.documentElement.classList.contains('dark'))) {
+                        this.theme = 'dark'
+
+                        document.documentElement.classList.add('dark')
+                    } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
+                        this.theme = 'light'
+
+                        document.documentElement.classList.remove('dark')
+                    }
+                })
+
+                $watch('theme', () => {
+                    if (this.mode === 'auto') return
+
+                    localStorage.setItem('theme', this.theme)
+
+                    if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
+                        document.documentElement.classList.add('dark')
+                    } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
+                        document.documentElement.classList.remove('dark')
+                    }
+
+                    $dispatch('dark-mode-toggled', this.theme)
+                })
+            },
+
+            isSystemDark: function () {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches
+            },
+        }"
     >
-        <ul @class([
-            'py-1 space-y-1 overflow-hidden bg-white shadow rounded-xl',
-            'dark:border-gray-600 dark:bg-gray-700' => config('filament.dark_mode'),
-        ])>
-            @php
-                $items = \Filament\Facades\Filament::getUserMenuItems();
-                $accountItem = $items['account'] ?? null;
-                $logoutItem = $items['logout'] ?? null;
-            @endphp
-
-            <x-filament::dropdown.item
-                :color="$accountItem?->getColor() ?? 'secondary'"
-                :icon="$accountItem?->getIcon() ?? 'heroicon-s-user-circle'"
-                :href="$accountItem?->getUrl()"
-                tag="a"
-            >
-                {{ $accountItem?->getLabel() ?? \Filament\Facades\Filament::getUserName($user) }}
-            </x-filament::dropdown.item>
-
-            <div>
-                @if (config('filament.dark_mode'))
-                    <x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="mode = 'manual'; theme = 'light'">
-                        {{ __('filament::layout.buttons.light_mode.label') }}
-                    </x-filament::dropdown.item>
-
-                    <x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="mode = 'manual'; theme = 'dark'">
-                        {{ __('filament::layout.buttons.dark_mode.label') }}
-                    </x-filament::dropdown.item>
-                @endif
-            </div>
-
-            @foreach ($items as $key => $item)
-                @if ($key !== 'account' && $key !== 'logout')
-                    <x-filament::dropdown.item
-                        :color="$item->getColor() ?? 'secondary'"
-                        :icon="$item->getIcon()"
-                        :href="$item->getUrl()"
-                        tag="a"
-                    >
-                        {{ $item->getLabel() }}
-                    </x-filament::dropdown.item>
-                @endif
-            @endforeach
-
-            <x-filament::dropdown.item
-                :color="$logoutItem?->getColor() ?? 'secondary'"
-                :icon="$logoutItem?->getIcon() ?? 'heroicon-s-logout'"
-                :action="$logoutItem?->getUrl() ?? route('filament.auth.logout')"
-                method="post"
-                tag="form"
-            >
-                {{ $logoutItem?->getLabel() ?? __('filament::layout.buttons.logout.label') }}
-            </x-filament::dropdown.item>
-        </ul>
-    </div>
-</div>
+        @php
+            $items = \Filament\Facades\Filament::getUserMenuItems();
+            $accountItem = $items['account'] ?? null;
+            $logoutItem = $items['logout'] ?? null;
+        @endphp
+
+        <x-filament::dropdown.item
+            :color="$accountItem?->getColor() ?? 'secondary'"
+            :icon="$accountItem?->getIcon() ?? 'heroicon-s-user-circle'"
+            :href="$accountItem?->getUrl()"
+            tag="a"
+        >
+            {{ $accountItem?->getLabel() ?? \Filament\Facades\Filament::getUserName($user) }}
+        </x-filament::dropdown.item>
+
+        <div>
+            @if (config('filament.dark_mode'))
+                <x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="mode = 'manual'; theme = 'light'">
+                    {{ __('filament::layout.buttons.light_mode.label') }}
+                </x-filament::dropdown.item>
+
+                <x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="mode = 'manual'; theme = 'dark'">
+                    {{ __('filament::layout.buttons.dark_mode.label') }}
+                </x-filament::dropdown.item>
+            @endif
+        </div>
+
+        @foreach ($items as $key => $item)
+            @if ($key !== 'account' && $key !== 'logout')
+                <x-filament::dropdown.item
+                    :color="$item->getColor() ?? 'secondary'"
+                    :icon="$item->getIcon()"
+                    :href="$item->getUrl()"
+                    tag="a"
+                >
+                    {{ $item->getLabel() }}
+                </x-filament::dropdown.item>
+            @endif
+        @endforeach
+
+        <x-filament::dropdown.item
+            :color="$logoutItem?->getColor() ?? 'secondary'"
+            :icon="$logoutItem?->getIcon() ?? 'heroicon-s-logout'"
+            :action="$logoutItem?->getUrl() ?? route('filament.auth.logout')"
+            method="post"
+            tag="form"
+        >
+            {{ $logoutItem?->getLabel() ?? __('filament::layout.buttons.logout.label') }}
+        </x-filament::dropdown.item>
+    </ul>
+</x-filament::dropdown>
diff --git a/packages/forms/resources/views/components/builder.blade.php b/packages/forms/resources/views/components/builder.blade.php
@@ -187,21 +187,21 @@ class="space-y-12"
                                 x-transition
                                 class="absolute inset-x-0 bottom-0 z-10 flex items-center justify-center h-12 -mb-12"
                             >
-                                <div x-data class="relative flex justify-center">
-                                    <x-forms::icon-button
-                                        :label="$getCreateItemBetweenButtonLabel()"
-                                        icon="heroicon-o-plus"
-                                        x-on:click="$refs.panel.toggle"
-                                        type="button"
-                                    />
+                                <x-forms::dropdown>
+                                    <x-slot name="trigger">
+                                        <x-forms::icon-button
+                                            :label="$getCreateItemBetweenButtonLabel()"
+                                            icon="heroicon-o-plus"
+                                        />
+                                    </x-slot>
 
                                     <x-forms::builder.block-picker
                                         :blocks="$getBlocks()"
                                         :create-after-item="$uuid"
                                         :state-path="$getStatePath()"
                                         class="py-2"
                                     />
-                                </div>
+                                </x-forms::dropdown>
                             </div>
                         @endif
                     </li>

diff --git a/packages/forms/resources/views/components/builder/block-picker.blade.php b/packages/forms/resources/views/components/builder/block-picker.blade.php
@@ -4,26 +4,13 @@
     'statePath',
 ])
 
-<div
-    x-ref="panel"
-    x-transition
-    x-cloak
-    x-float.placement.bottom.flip.offset="{ offset: 8 }"
-    {{ $attributes->class([
-        'absolute hidden z-20 w-52 filament-forms-builder-component-block-picker',
-    ]) }}
->
-    <ul @class([
-        'py-1 space-y-1 bg-white shadow rounded-xl shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl',
-        'dark:bg-gray-700 dark:divide-gray-600 dark:ring-white/20' => config('forms.dark_mode'),
-    ])>
-        @foreach ($blocks as $block)
-            <x-forms::dropdown.item
-                :wire:click="'dispatchFormEvent(\'builder::createItem\', \'' . $statePath . '\', \'' . $block->getName() . '\'' . ($createAfterItem ? ', \'' . $createAfterItem . '\'' : '') . ')'"
-                :icon="$block->getIcon()"
-            >
-                {{ $block->getLabel() }}
-            </x-forms::dropdown.item>
-        @endforeach
-    </ul>
+<div {{ $attributes->class(['filament-forms-builder-component-block-picker']) }}>
+    @foreach ($blocks as $block)
+        <x-forms::dropdown.item
+            :wire:click="'dispatchFormEvent(\'builder::createItem\', \'' . $statePath . '\', \'' . $block->getName() . '\'' . ($createAfterItem ? ', \'' . $createAfterItem . '\'' : '') . ')'"
+            :icon="$block->getIcon()"
+        >
+            {{ $block->getLabel() }}
+        </x-forms::dropdown.item>
+    @endforeach
 </div>
diff --git a/packages/forms/resources/views/components/dropdown/index.blade.php b/packages/forms/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('forms.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/support/resources/views/components/actions/group.blade.php b/packages/support/resources/views/components/actions/group.blade.php
@@ -7,39 +7,26 @@
     'tooltip' => null,
 ])
 
-<div x-data {{ $attributes->class(['relative']) }}>
-    <x-filament-support::icon-button
-        x-on:click="$refs.panel.toggle"
-        :color="$color"
-        :dark-mode="$darkMode"
-        :icon="$icon"
-        :tooltip="$tooltip"
-        class="-my-2"
-    >
-        <x-slot name="label">
-            {{ $label }}
-        </x-slot>
-    </x-filament-support::icon-button>
+<x-filament-support::dropdown
+    :dark-mode="$darkMode"
+    {{ $attributes }}
+>
+    <x-slot name="trigger">
+        <x-filament-support::icon-button
+            :color="$color"
+            :dark-mode="$darkMode"
+            :icon="$icon"
+            :tooltip="$tooltip"
+        >
+            <x-slot name="label">
+                {{ $label }}
+            </x-slot>
+        </x-filament-support::icon-button>
+    </x-slot>
 
-    <div
-        x-ref="panel"
-        x-transition
-        x-cloak
-        x-float.placement.bottom-end.flip.offset.shift.teleport="{ offset: 8 }"
-        @class([
-            'absolute hidden z-20 shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl w-52 filament-action-group-dropdown',
-            'dark:ring-white/20' => $darkMode,
-        ])
-    >
-        <ul @class([
-            'py-1 space-y-1 bg-white shadow rounded-xl',
-            'dark:bg-gray-700 dark:divide-gray-600' => $darkMode,
-        ])>
-            @foreach ($actions as $action)
-                @if (! $action->isHidden())
-                    {{ $action }}
-                @endif
-            @endforeach
-        </ul>
-    </div>
-</div>
+    @foreach ($actions as $action)
+        @if (! $action->isHidden())
+            {{ $action }}
+        @endif
+    @endforeach
+</x-filament-support::dropdown>