F
Filament•4w ago
pocket.racer

Is there a way to get current step number in Form Wizard?

I have the following piece of code 
Wizard::make($steps)
                ->columnSpanFull()
                ->nextAction(function (Action $action): void {
                    $action
                        ->label('Continue');
                });
Wizard::make($steps)
                ->columnSpanFull()
                ->nextAction(function (Action $action): void {
                    $action
                        ->label('Continue');
                });
I want to make it such that I can do something like this (Continue button to be full width if it is the 1st step) 
Wizard::make($steps)
                ->columnSpanFull()
                ->nextAction(function (Action $action): void {
                    $action
                        ->label('Continue');
                     // how to get current step number here
                     if ($currentStepNumber === 1) {
                          // w-full doesn't work too
                          $action->extraAttributes(['class' => 'w-full']);
                     }
                });
Wizard::make($steps)
                ->columnSpanFull()
                ->nextAction(function (Action $action): void {
                    $action
                        ->label('Continue');
                     // how to get current step number here
                     if ($currentStepNumber === 1) {
                          // w-full doesn't work too
                          $action->extraAttributes(['class' => 'w-full']);
                     }
                });
I tried to inject Component $livewire to the ->nextAction() method but it I got error as it is injecting the parent livewire component, not the form wizard livewire component
7 Replies
pocket.racer
pocket.racerOP•3w ago
bump! ok. i figured it out (injecting $component) But i haven't figure out how to get the button to be full width yet
toeknee
toeknee•3w ago
extraInputAttributes w-full too?
pocket.racer
pocket.racerOP•3w ago
yea doesn't work. I also tried flex-auto grow w-full min-w-full basis-full Only way i can get it to work is remove "flex" from the parent div in the browser dom. But that is outside of extraAttributes() the parent div of the Next action button is this 
<div class="flex items-center justify-between gap-x-3 px-6 pb-6">...</div>
<div class="flex items-center justify-between gap-x-3 px-6 pb-6">...</div>
if i remove flex through browser dom it works (The next button become full width), but that's not a working solution obviously The Next button html itself through the browser dom. my w-full is applied 
<button style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action auto-cols-max w-full fi-ac-btn-action" type="button" wire:loading.attr="disabled" wire:target="dispatchFormEvent">
<button style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action auto-cols-max w-full fi-ac-btn-action" type="button" wire:loading.attr="disabled" wire:target="dispatchFormEvent">
bump
Crispy
Crispy•2w ago
I have a similar issue with needing the step number. Could you share your solution for finding $currentStepNumber with livewire (injecting $component) ?
pocket.racer
pocket.racerOP•2w ago
Here u go (in exchange, do you know the answer to make the next button full width?) 
Wizard::make($steps)
                ->columnSpanFull()
                ->nextAction(function (Action $action, Wizard $component): void {

                    if ($component->getCurrentStepIndex() === 0) {
                        $action->label('Next Step')
                            ->extraAttributes([
                                'class' => 'w-full', // does not work can you help?
                            ]);
                    }
                });
Wizard::make($steps)
                ->columnSpanFull()
                ->nextAction(function (Action $action, Wizard $component): void {

                    if ($component->getCurrentStepIndex() === 0) {
                        $action->label('Next Step')
                            ->extraAttributes([
                                'class' => 'w-full', // does not work can you help?
                            ]);
                    }
                });
Crispy
Crispy•2w ago
Thank you! Looking into this. Ik it's not best practice but have you tried style instead of class? ->extraAttributes([ 'style' => 'width: 100%;', ])
pocket.racer
pocket.racerOP•2w ago
width: 100% doesn't work either. The only thing that work so far is something like width: 600px; or w-96. But that is specific width. If only i can remove the flex class in the parent div

Did you find this page helpful?