Extract dropdown

bin/build.js

@@ -1,34 +1,22 @@
 const esbuild = require('esbuild')
 const shouldWatch = process.argv.includes('--watch')
 
-esbuild
-    .build({
-        define: {
-            'process.env.NODE_ENV': shouldWatch
-                ? `'production'`
-                : `'development'`,
-        },
-        entryPoints: ['packages/forms/resources/js/index.js'],
-        outfile: 'packages/forms/dist/module.esm.js',
-        bundle: true,
-        platform: 'neutral',
-        mainFields: ['module', 'main'],
-        watch: shouldWatch,
-    })
-    .catch(() => process.exit(1))
+const packages = ['forms', 'notifications']
 
-esbuild
-    .build({
-        define: {
-            'process.env.NODE_ENV': shouldWatch
-                ? `'production'`
-                : `'development'`,
-        },
-        entryPoints: ['packages/notifications/resources/js/index.js'],
-        outfile: 'packages/notifications/dist/module.esm.js',
-        bundle: true,
-        platform: 'neutral',
-        mainFields: ['module', 'main'],
-        watch: shouldWatch,
-    })
-    .catch(() => process.exit(1))
+packages.forEach((package) => {
+    esbuild
+        .build({
+            define: {
+                'process.env.NODE_ENV': shouldWatch
+                    ? `'production'`
+                    : `'development'`,
+            },
+            entryPoints: [`packages/${package}/resources/js/index.js`],
+            outfile: `packages/${package}/dist/module.esm.js`,
+            bundle: true,
+            platform: 'neutral',
+            mainFields: ['module', 'main'],
+            watch: shouldWatch,
+        })
+        .catch(() => process.exit(1))
+})

package.json

@@ -9,7 +9,7 @@
         "@alpinejs/collapse": "^3.8.1",
         "@alpinejs/focus": "^3.8.1",
         "@alpinejs/persist": "^3.8.1",
-        "@awcodes/alpine-floating-ui": "^3.3.1",
+        "@awcodes/alpine-floating-ui": "^3.4.0",
         "@babel/runtime": "^7.15.3",
         "@danharrin/alpine-mousetrap": "^0.1.0",
         "@github/file-attachment-element": "^2.0.1",

packages/admin/dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=35d416409a0129d34f6b5d80b025b107",
-    "/app.css": "/app.css?id=45d50ffb4d616a8c8573941867724933"
+    "/app.js": "/app.js?id=34ba6482289db6f1a952112f723d24ae",
+    "/app.css": "/app.css?id=01087e6d84b0bd589ae1408fc6a79e3d"
 }

packages/admin/resources/js/app.js

@@ -1,6 +1,6 @@
 import Alpine from 'alpinejs'
+import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
 import Chart from 'chart.js/auto'
-
 import Collapse from '@alpinejs/collapse'
 import Focus from '@alpinejs/focus'
 import FormsAlpinePlugin from '../../../forms/dist/module.esm'
@@ -9,6 +9,7 @@ import NotificationsAlpinePlugin from '../../../notifications/dist/module.esm'
 import Persist from '@alpinejs/persist'
 import Tooltip from '@ryangjchandler/alpine-tooltip'
 
+Alpine.plugin(AlpineFloatingUI)
 Alpine.plugin(Collapse)
 Alpine.plugin(Focus)
 Alpine.plugin(FormsAlpinePlugin)

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>

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 placement="bottom-end">
+    <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="$refs.panel.close; 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="$refs.panel.close; 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="close(); 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="close(); 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>