Merge branch 'fix/reintroduce-dropdown-changes' into 2.x

filamentphp · Aug 31, 2022 · 9b7a006 · 9b7a006
2 parents b2134c1 + b08cccb
commit 9b7a006
Show file tree

Hide file tree

Showing 94 changed files with 1,955 additions and 815 deletions.
diff --git a/bin/build.js b/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))
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/packages/admin/dist/app.css b/packages/admin/dist/app.css
diff --git a/packages/admin/dist/app.css.map b/packages/admin/dist/app.css.map
diff --git a/packages/admin/dist/app.js b/packages/admin/dist/app.js
diff --git a/packages/admin/dist/app.js.map b/packages/admin/dist/app.js.map
diff --git a/packages/admin/dist/mix-manifest.json b/packages/admin/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=35d416409a0129d34f6b5d80b025b107",
-    "/app.css": "/app.css?id=da7d7be86c528652f3588d3b3304b22e"
+    "/app.js": "/app.js?id=cab44c7d62947545d89720d530ac0348",
+    "/app.css": "/app.css?id=67e031c7714631a79b7017135ef32646"
 }
diff --git a/packages/admin/docs/08-plugins.md b/packages/admin/docs/08-plugins.md
@@ -159,6 +159,12 @@ class ExampleServiceProvider extends PluginServiceProvider
 }
 ```
 
+#### Tailwind CSS
+
+If you are using Tailwind classes, that are not used in Filament core, you need to compile your own Tailwind CSS file and bundle it with your plugin. Follow the Tailwind instructions for setup, but omit `@tailwind base` as this would overwrite the base styles if users customize their Filament theme.
+
+After compilation, your Tailwind stylesheet may contain classes that are already used in Filament core. You should purge those classes with [awcodes/filament-plugin-purge](https://github.com/awcodes/filament-plugin-purge) to keep the stylesheets size low.
+
 ### Scripts
 
 To include a custom script, add it to the `$scripts` property in your service provider. You should use a unique name as the key and the URL to the script as the value. These scripts will be added after the core Filament script.

diff --git a/packages/admin/resources/js/app.js b/packages/admin/resources/js/app.js
@@ -1,6 +1,5 @@
 import Alpine from 'alpinejs'
 import Chart from 'chart.js/auto'
-
 import Collapse from '@alpinejs/collapse'
 import Focus from '@alpinejs/focus'
 import FormsAlpinePlugin from '../../../forms/dist/module.esm'

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 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>
diff --git a/packages/admin/resources/views/components/layouts/base.blade.php b/packages/admin/resources/views/components/layouts/base.blade.php
@@ -42,8 +42,6 @@ class="antialiased bg-gray-100 filament js-focus-visible"
             <link href="{{ $fontsUrl }}" rel="stylesheet" />
         @endif
 
-        {{ \Filament\Facades\Filament::getThemeLink() }}
-
         @foreach (\Filament\Facades\Filament::getStyles() as $name => $path)
             @if (\Illuminate\Support\Str::of($path)->startsWith(['http://', 'https://']))
                 <link rel="stylesheet" href="{{ $path }}" />
@@ -56,6 +54,8 @@ class="antialiased bg-gray-100 filament js-focus-visible"
             @endif
         @endforeach
 
+        {{ \Filament\Facades\Filament::getThemeLink() }}
+
         {{ \Filament\Facades\Filament::renderHook('styles.end') }}
 
         @if (config('filament.dark_mode'))

diff --git a/packages/admin/src/FilamentManager.php b/packages/admin/src/FilamentManager.php
@@ -12,6 +12,7 @@
 use Filament\Navigation\NavigationGroup;
 use Filament\Navigation\UserMenuItem;
 use Filament\Notifications\Notification;
+use Illuminate\Contracts\Auth\Authenticatable;
 use Illuminate\Contracts\Auth\Guard;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Database\Eloquent\Model;
@@ -368,7 +369,7 @@ public function getUrl(): ?string
         return $firstItem->getUrl();
     }
 
-    public function getUserAvatarUrl(Model $user): string
+    public function getUserAvatarUrl(Model | Authenticatable $user): string
     {
         $avatar = null;
 
@@ -385,7 +386,7 @@ public function getUserAvatarUrl(Model $user): string
         return app($provider)->get($user);
     }
 
-    public function getUserName(Model $user): string
+    public function getUserName(Model | Authenticatable $user): string
     {
         if ($user instanceof HasName) {
             return $user->getFilamentName();

diff --git a/packages/admin/src/Resources/Pages/CreateRecord.php b/packages/admin/src/Resources/Pages/CreateRecord.php
@@ -29,12 +29,17 @@ public function getBreadcrumb(): string
     }
 
     public function mount(): void
+    {
+        $this->authorizeAccess();
+
+        $this->fillForm();
+    }
+
+    protected function authorizeAccess(): void
     {
         static::authorizeResourceAccess();
 
         abort_unless(static::getResource()::canCreate(), 403);
-
-        $this->fillForm();
     }
 
     protected function fillForm(): void
@@ -48,6 +53,8 @@ protected function fillForm(): void
 
     public function create(bool $another = false): void
     {
+        $this->authorizeAccess();
+
         $this->callHook('beforeValidate');
 
         $data = $this->form->getState();