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.
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.