Use vars to save actions and use isDisabled to condition that

juliangums · Oct 21, 2024 · 23fbacf · 23fbacf
1 parent a7c360d
commit 23fbacf
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/packages/forms/resources/views/components/wizard.blade.php b/packages/forms/resources/views/components/wizard.blade.php
@@ -1,6 +1,8 @@
 @php
     $isContained = $isContained();
     $statePath = $getStatePath();
+    $previousAction = $getAction('previous');
+    $nextAction = $getAction('next');
 @endphp
 
 <div
@@ -262,11 +264,12 @@ class="h-full w-full text-gray-200 dark:text-white/5 rtl:rotate-180"
             'mt-6' => ! $isContained,
         ])
     >
-        <span x-cloak x-on:click="
-            if (!$el.querySelector('button').disabled){
-                previousStep();
-            }" x-show="! isFirstStep()">
-            {{ $getAction('previous') }}
+        <span x-cloak
+        @if (!$previousAction->isDisabled())
+            x-on:click="previousStep"
+        @endif
+        x-show="! isFirstStep()">
+            {{ $previousAction }}
         </span>
 
         <span x-show="isFirstStep()">
@@ -275,18 +278,18 @@ class="h-full w-full text-gray-200 dark:text-white/5 rtl:rotate-180"
 
         <span
             x-cloak
-            x-on:click="
-                if (!$el.querySelector('button').disabled){
-                    $wire.dispatchFormEvent(
-                        'wizard::nextStep',
-                        '{{ $statePath }}',
-                        getStepIndex(step),
-                    )
-                }
-            "
+            @if (!$nextAction->isDisabled())
+                x-on:click="
+                        $wire.dispatchFormEvent(
+                            'wizard::nextStep',
+                            '{{ $statePath }}',
+                            getStepIndex(step),
+                        )
+                "
+            @endif
             x-show="! isLastStep()"
         >
-            {{ $getAction('next') }}
+            {{ $nextAction }}
         </span>
 
         <span x-show="isLastStep()">