Multistep plugin: Programatically trigger next page from another location

[MattFromGer]

I see that the multistep plugin has scoped slots, so you can pass a custom template for e.g. the next button. But what if the button is at another location and not the child component?

<FormKit type="multi-step">
  <FormKit type="step">
    <template #stepNext="{ handlers, node }">
      <!-- I don't want the button here -->
    </template>
  </FormKit>
</FormKit>

<nav>
  <FormKit type="button" @click="?">
    <!-- I want to call the action from here -->
  </FormKit>
</nav>

[fenilli]

You can get the multi-step node using getNode and there you have the handlers that you can call.

[MattFromGer]

A little bit hacky but it'll do, thank you!

[andrew-boyd]

With the upcoming node.extend() function in beta.17 we may be able to revisit this and have the node instance of type multi-step provide node.nextStep(), node.prevStep(), and node.goToStep() functions for better DX.

[MattFromGer]

@andrew-boyd Do you think you can incorporate this idea into the multistep-updates branch?

[andrew-boyd]

I think that's a swell idea

[andrew-boyd]

@MattFromGer Here's a playground of the current next tag showing external controls for the multistep. Something like this what you had in mind? https://formkit.link/0f59069efe97ce2fbde3920b9f5e6564

[MattFromGer]

Exactly. Maybe you can also expose properties like isLast, isFirst, in order to show/hide the corresponding buttons?