Since the design for onboarding steps includes a CSS transition between each of them and also swipe gesture support for mobile devices it would be nice to have this logic separated and reusable from the onboarding component.
Acceptance criteria
A new <MultiPane> component is created with the following requirements
- Receives the steps via slots as in the current OnboardingDialog, step1, step2... stepN
- Receives a currentStep prop (probably better bound via v-model:current-step, since the control buttons will remain in the OnboardingDialog)
- Reacts to swipe gestures moving back/foward and produces an event when the currentStep is changed, eg: update:current-step
- A transition is used between step navigation
- Does not use any translated text (all text used is slotted)
The <OnboardingDialog> component will still be responsible for the checkbox result, dialog closing, onboarding result, etc.