Merge pull request #361 from dllobell/toggle-field

Add Toggle form field

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/filament.js": "/js/filament.js?id=210c4f5bc98fdf1aa267",
-    "/css/filament.css": "/css/filament.css?id=4fc1a354ff8b971c2d1f"
+    "/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

@@ -0,0 +1,63 @@
+<x-forms::field-group
+    :column-span="$formComponent->getColumnSpan()"
+    :error-key="$formComponent->getName()"
+    :for="$formComponent->getId()"
+    :help-message="$formComponent->getHelpMessage()"
+    :hint="$formComponent->getHint()"
+    :label="$formComponent->getLabel()"
+    :required="$formComponent->isRequired()"
+>
+    <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()) !!}
+        >
+            <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>
+
+                <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

@@ -0,0 +1,58 @@
+<?php
+
+namespace Filament\Forms\Components;
+
+use Filament\Forms\Components\Concerns;
+use Filament\Forms\Components\Field;
+
+class Toggle extends Field
+{
+    use Concerns\CanBeAutofocused;
+
+    protected $onIcon;
+
+    protected $offIcon;
+
+    protected function setUp()
+    {
+        $this->default(false);
+    }
+
+    public function onIcon($icon)
+    {
+        $this->configure(function () use ($icon) {
+            $this->onIcon = $icon;
+        });
+
+        return $this;
+    }
+
+    public function offIcon($icon)
+    {
+        $this->configure(function () use ($icon) {
+            $this->offIcon = $icon;
+        });
+
+        return $this;
+    }
+
+    public function getOnIcon()
+    {
+        return $this->onIcon;
+    }
+
+    public function getOffIcon()
+    {
+        return $this->offIcon;
+    }
+
+    public function hasOffIcon()
+    {
+        return $this->offIcon !== null;
+    }
+
+    public function hasOnIcon()
+    {
+        return $this->onIcon !== null;
+    }
+}

src/Resources/Forms/Components/Toggle.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace Filament\Resources\Forms\Components;
+
+use Filament\Resources\Forms\Components\Concerns;
+
+class Toggle extends \Filament\Forms\Components\Toggle
+{
+    use Concerns\InteractsWithResource;
+}

src/Resources/UserResource.php

@@ -63,14 +63,14 @@ class UserResource extends Resource
 
                     $userColumn = Filament::auth()->getProvider()->getModel()::getFilamentUserColumn();
                     if ($userColumn !== null) {
-                        $schema[] = Components\Checkbox::make($userColumn)
+                        $schema[] = Components\Toggle::make($userColumn)
                             ->label('filament::resources/user-resource.form.isUser.label')
                             ->except(EditAccount::class);
                     }
 
                     $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);