Toggle : bug fix

developermithu · Sep 10, 2024 · 998594b · 998594b
1 parent 3be9fea
commit 998594b
Showing 1 changed file with 12 additions and 23 deletions.
diff --git a/src/View/Components/Toggle.php b/src/View/Components/Toggle.php
@@ -33,36 +33,25 @@ public function render(): View|Closure|string
                 
                 $isRequired = $hasStar || $required;
             @endphp
+            
+            <label @class(["inline-flex items-center cursor-pointer gap-3", "flex-row-reverse" => $textLeft])>
+                <input type="checkbox" class="sr-only peer" {{ $attributes->whereDoesntStartWith('class') }}>
                 
-            <div x-data="{ switchOn: false }" class="flex items-center space-x-2">
-                <input id="thisId" type="checkbox" name="switch" class="hidden" :checked="switchOn" {{ $attributes->whereDoesntStartWith('class') }}>
-
-                <button 
-                    x-ref="switchButton"
-                    type="button" 
-                    @click="switchOn = ! switchOn"
-                    :class="switchOn ? '!bg-primary' : 'bg-neutral-200'" 
-                    @class([
-                        "relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10", 
+                <div @class([
+                        "relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary/60 dark:peer-focus:ring-primary/60 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary",
                         "!bg-red-500" => $error,
-                    ])
-                    x-cloak
-                    >
-                        <span :class="switchOn ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out bg-white rounded-full shadow-md"></span>
-                </button>
-
-                <label @click="$refs.switchButton.click(); $refs.switchButton.focus()" :id="$id('switch')" 
-                    :class="{ '!text-primary': switchOn, 'text-gray-700 dark:text-gray-100': ! switchOn }"
-                    @class(["text-sm font-medium select-none", "!text-red-500" => $error])
-                    x-cloak
-                    >
+                ])></div>
+                
+                @if($label)
+                    <span @class(["text-sm font-medium text-gray-700 dark:text-gray-100", "!text-red-500" => $error])>
                         {{ Str::ucfirst(__($labelWithoutStar)) }}
 
                         @if ($isRequired)
                             <span class="text-red-500">*</span>
                         @endif
-                </label>
-            </div>
+                    </span>
+                @endif
+            </label>
         HTML;
     }
 }