Slide Hooks: Before & After about v-onboarding HOT 2 CLOSED

Hi!

Available

Do the beforeStep() and afterStep() functions not serve the purpose?
Docs

beforeStep: Executes anything you pass to it before displaying the step.

afterStep: Executes anything you pass to it after displaying the step.

You can configure this on a step-by-step basis.

Review

Essentially, if you click the "next" button, then the beforeStep of the next step would correspond to your beforeNext logic.

If I want to integrate it into the current code, the beforePrevious should be inserted into the beforeStep of the previous element to check if the modal is open and close it.

Solution

I think the beforeNext is straightforward, it corresponds to the beforeStep of the next element. The beforePrevious is more thought-provoking. It would save a few conditionals, but instead of creating a new function, I would pass an argument to the beforeStep and afterStep functions indicating whether the current step is a "backward" or "forward" step in the sequence. Using this, you can reference it within the function.

Now

const step = {
  on: {
    beforeStep: () => { /* ... */ },
    afterStep: () => { /* ... */ }
  }
}

Feature

const step = {
  on: {
    beforeStep: (type?: "forward" | "backward") => { /* ... */ },
    afterStep: (type?: "forward" | "backward") => { /* ... */ }
  }
}

The original argument-less function definition, () => { ... }, will continue to work. However, if you need to differentiate the logic based on whether it's a forward or backward step, you have the option to do so.

const step = {
  on: {
    beforeStep: (type) => { 
      if (type === "backward") {
        // For example, if the next step would open in a modal, it would be helpful to close it when going backward.
        modal.close()
      }
    },
  }
}

When Exit?

While nothing would still run upon closure... It might be a good idea to consider created a on.exit()?

const step = {
  on: {
    beforeStep: (type?: "forward" | "backward") => { /* ... */ },
    afterStep: (type?: "forward" | "backward") => { /* ... */ },
    exit: () => { /* ... */ }
  }
}

from v-onboarding.

You are totally right! I couldn't find them in the documentation, upon re-checking, I did find them tucked away on the steps page, thanks for pointing that one out.

I much appreciate your in-depth detailing of the solution too—and sorry for wasting your time having to point out that function to me. :)

from v-onboarding.