wip

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/filament.js": "/js/filament.js?id=210c4f5bc98fdf1aa267",
-    "/css/filament.css": "/css/filament.css?id=fa9ff3e596c7b80b2260"
+    "/css/filament.css": "/css/filament.css?id=f57bce7d9e05328d1627"
 }

packages/forms/resources/views/components/field-group.blade.php

@@ -31,7 +31,7 @@
     <div class="w-full space-y-2">
         @if ($label || $hint)
             <div class="flex items-center justify-between space-x-2">
-                <div class="flex space-x-2">
+                <div class="flex items-center space-x-3">
                     {{ $labelPrefix }}
 
                     @if ($label)

packages/forms/resources/views/components/toggle.blade.php

@@ -7,43 +7,57 @@
     :label="$formComponent->getLabel()"
     :required="$formComponent->isRequired()"
 >
-    <button
-        x-data="{ enabled: @entangle($formComponent->getName()){{ Str::of($formComponent->getBindingAttribute())->after('wire:model') }} }"
-        x-on:click.prevent="enabled = !enabled"
-        type="button"
-        {!! $formComponent->getId() ? "id=\"{$formComponent->getId()}\"" : null !!}
-        {!! $formComponent->isAutofocused() ? 'autofocus' : null !!}
-        {!! $formComponent->isDisabled() ? 'disabled' : null !!}
-        class="relative inline-flex flex-shrink-0 h-[30px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
-        role="switch"
-        tabindex="0"
-        :class="enabled ? 'bg-primary-600 hover:bg-primary-700' : 'bg-gray-400 hover:bg-gray-500'"
-        :aria-checked="enabled ? 'true' : 'false'"
-    >
-        @if ($formComponent->getOnLabel())
-            <span class="absolute left-3 text-white" :class="{ 'hidden': !enabled }">
-                {{ $formComponent->getOnLabel() }}
-            </span>
-        @endif
-
-        @if ($formComponent->getOffLabel())
-            <span class="absolute right-3 text-white" :class="{ 'hidden': enabled }">
-                {{ $formComponent->getOffLabel() }}
-            </span>
-        @endif
-
-        <span
-            class="pointer-events-none inline-flex justify-center items-center h-[26px] w-[26px] rounded-full bg-white shadow-lg ring-0 transform transition ease-in-out duration-200"
-            :class="enabled ? 'translate-x-11' : 'translate-x-0'"
-            aria-hidden="true"
+    <x-slot name="labelPrefix">
+        <button
+            x-data="{ value: @entangle($formComponent->getName()){{ Str::of($formComponent->getBindingAttribute())->after('wire:model') }} }"
+            role="switch"
+            aria-checked="false"
+            x-bind:aria-checked="value.toString()"
+            x-on:click="value = ! value"
+            x-bind:class="{
+                'bg-primary-600': value,
+                'bg-gray-200': ! value,
+            }"
+            {!! $formComponent->getId() ? "id=\"{$formComponent->getId()}\"" : null !!}
+            {!! $formComponent->isAutofocused() ? 'autofocus' : null !!}
+            {!! $formComponent->isDisabled() ? 'disabled' : null !!}
+            type="button"
+            class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 bg-gray-200"
+            {!! Filament\format_attributes($formComponent->getExtraAttributes()) !!}
         >
-            @if ($formComponent->getOnIcon())
-                <x-dynamic-component :component="$formComponent->getOnIcon()" class="flex-shrink-0 w-5 h-5" x-bind:class="{ 'hidden': !enabled }" />
-            @endif
+            <span
+                class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0"
+                :class="{
+                    'translate-x-5': value,
+                    'translate-x-0': ! value,
+                }"
+            >
+                <span
+                    class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200"
+                    aria-hidden="true"
+                    :class="{
+                        'opacity-0 ease-out duration-100': value,
+                        'opacity-100 ease-in duration-200': ! value,
+                    }"
+                >
+                    @if ($formComponent->hasOffIcon())
+                        <x-dynamic-component :component="$formComponent->getOffIcon()" class="bg-white h-3 w-3 text-gray-400" />
+                    @endif
+                </span>
 
-            @if ($formComponent->getOffIcon())
-                <x-dynamic-component :component="$formComponent->getOffIcon()" class="flex-shrink-0 w-5 h-5" x-bind:class="{ 'hidden': enabled }" />
-            @endif
-        </span>
-    </button>
+                <span
+                    class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100"
+                    aria-hidden="true"
+                    :class="{
+                        'opacity-100 ease-in duration-200': value,
+                        'opacity-0 ease-out duration-100': ! value,
+                    }"
+                >
+                    @if ($formComponent->hasOnIcon())
+                        <x-dynamic-component :component="$formComponent->getOnIcon()" class="bg-white h-3 w-3 text-primary-600" />
+                    @endif
+                </span>
+            </span>
+        </button>
+    </x-slot>
 </x-forms::field-group>

packages/forms/src/Components/Toggle.php

@@ -9,10 +9,6 @@ class Toggle extends Field
 {
     use Concerns\CanBeAutofocused;
 
-    protected $onLabel;
-
-    protected $offLabel;
-
     protected $onIcon;
 
     protected $offIcon;
@@ -22,24 +18,6 @@ class Toggle extends Field
         $this->default(false);
     }
 
-    public function onLabel($label)
-    {
-        $this->configure(function () use ($label) {
-            $this->onLabel = $label;
-        });
-
-        return $this;
-    }
-
-    public function offLabel($label)
-    {
-        $this->configure(function () use ($label) {
-            $this->offLabel = $label;
-        });
-
-        return $this;
-    }
-
     public function onIcon($icon)
     {
         $this->configure(function () use ($icon) {
@@ -58,16 +36,6 @@ class Toggle extends Field
         return $this;
     }
 
-    public function getOnLabel()
-    {
-        return $this->onLabel;
-    }
-
-    public function getOffLabel()
-    {
-        return $this->offLabel;
-    }
-
     public function getOnIcon()
     {
         return $this->onIcon;
@@ -77,4 +45,14 @@ class Toggle extends Field
     {
         return $this->offIcon;
     }
+
+    public function hasOffIcon()
+    {
+        return $this->offIcon !== null;
+    }
+
+    public function hasOnIcon()
+    {
+        return $this->onIcon !== null;
+    }
 }

src/Resources/UserResource.php

@@ -70,7 +70,7 @@ class UserResource extends Resource
 
                     $adminColumn = Filament::auth()->getProvider()->getModel()::getFilamentAdminColumn();
                     if ($adminColumn !== null) {
-                        $schema[] = Components\Checkbox::make($adminColumn)
+                        $schema[] = Components\Toggle::make($adminColumn)
                             ->label('filament::resources/user-resource.form.isAdmin.label')
                             ->helpMessage('filament::resources/user-resource.form.isAdmin.helpMessage')
                             ->except(EditAccount::class);