Comments (10)
Hey @Novando, which version of v-onboarding
you are using? Are you using custom UI or default UI?
Please provide as much as context you can so I can understand the issue better
Thank you
from v-onboarding.
I am using v2.1.0 only on custom UI. Also I am using Bootstrap v5.2.2 and PopperJs v2.11.6. Here's the code
<div class="mt-28">
<VOnboardingWrapper ref="onboarding" :steps="steps" :options="options">
<template #default="{ previous, next, step, exit, isFirst, isLast, index }">
<VOnboardingStep>
<section class="bg-black rounded-3 text-white w-280px px-16 pt-16 pb-8">
<div class="mb-16">
<div class="d-flex justify-content-between">
<p class="fw-bold">{{ step.content.title }}</p>
<i @click="exit" class="cursor-pointer mt-icon-closewindow" />
</div>
<p>{{ step.content.description }}</p>
</div>
<div class="d-flex justify-content-between fw-bold">
<div>
<p class="cursor-pointer" v-if="!isFirst" @click="previous">Back</p>
</div>
<div>
<p class="cursor-pointer text-primary" @click="next">{{isLast ? step.options.labels.finishButton : 'Next'}}</p>
</div>
</div>
</section>
</VOnboardingStep>
</template>
</VOnboardingWrapper>
</div>
and here comes the javascript
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
const onboarding = ref(null)
const route = useRoute()
const { start } = useVOnboarding(onboarding)
onMounted(() => {
start()
})
const steps =
{
attachTo: { element: '#connections-menu'},
content: {
title: "Connections,",
description: "Lorem ipsum dolor sit amet",
},
options: {
labels: {
finishButton: 'Next: Sources',
}
},
on: {
beforeStep: function() {
console.log('beforeStep Dashboard') // this is working
},
afterStep: function() {
console.log('afterStep Dashboard') // this is not working
}
}
},
// v-onboarding custom configuration, refer to https://v-onboarding-docs.fatihsolhan.com/props/options
const options = {
popper : {
placement: 'bottom-start',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 20],
},
},
{
name: 'arrow',
options: {
padding: {
right: 250,
}
},
},
],
},
overlay: {
enabled: false,
},
}
from v-onboarding.
Hi @Novando, having a super busy week so I couldn't get back here, sorry.
I'll try to reproduce this issue and get back to you as soon as possible
from v-onboarding.
Hey @Novando I've been checking this issue for a couple of hours and I can confirm afterStep
doesn't work sometimes
Because although it doesn't work on the codesandbox that I created, it works successfully on my local. I'll try to find the bug asap and let you know.
from v-onboarding.
from v-onboarding.
Hi @Novando, did you somehow find a solution to this issue ?
afterStep is also not triggering in my end. For now I'm using the prev / next step beforeStep method to do the setup, but it causes some issues since the DOM element I want to showcase isn't necessarly fully ready at the moment the step triggers.
@fatihsolhan Is there something I can do to help getting this fixed ?
from v-onboarding.
Hi @fatihsolhan, after a bit of investigation, I found the issue, it applies only to custom UI onboarding.
The afterStep method is called internally by the VOnboardingStep component, on call of onNext method, but on custom UI it's the wrapper that just calls setStep method, thus afterStep never fires.
I think to standardize behaviour between custom UI & standard UI, the slot props should be moved from the wrapper to the step component, this way custom & standard UI will get the same behaviour.
On an other note, got a small question : Is there a reason you made the afterStep not async ?
from v-onboarding.
Hey, @ChronicStone thank you so much for the investigation. Yes, it happens because of differences between custom UI and default UI. I knew I'd have to refactor that part at some point. I have been a bit busy for a long time and it's going to continue like that but I'll do my best to refactor that part and fix those behavioral differences. In the meantime, you are free to open up a PR about that issue, it would help me a lot :)
I don't remember the exact reason why I didn't make afterStep
async. I'll look into that as well when I have time. It might be easier to do with the upcoming refactor.
Thanks again for investigating the issue! 🙌
from v-onboarding.
🎉 This issue has been resolved in version 2.3.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from v-onboarding.
Hey @Novando and @ChronicStone
afterStep
should work as expected right now. It can be an async function as well.
I also created tests to make sure they are working correctly.
from v-onboarding.
Related Issues (20)
- Enabling OverlayInteraction does not prevent click events from being blocked
- Focus on element not working correctly after navigation/redirection
- Ability to track moving target element? HOT 1
- Ability to control where the overlay pops up HOT 2
- `preventOverlayInteraction` doesn't remove all blocking listeners HOT 2
- Add delay and hide / autoHide HOT 3
- Add indicator for previous click HOT 2
- Dialog placement HOT 1
- V-HTML HOT 3
- toRefs expects a reactive object but received a plain one HOT 1
- Inaccessible panel — Off the bottom of the screen HOT 4
- A11y issue - focus should move to the onboarding card when start() is called HOT 4
- Vue app is crashing. Uncaught TypeError: Object(...) is not a function HOT 4
- Attributes as selector HOT 1
- Rectangular highlight area is offset from the target element HOT 2
- Could not find a declaration file for module 'v-onboarding' HOT 5
- vue__WEBPACK_IMPORTED_MODULE_1__.createElementVNode) is not a function HOT 2
- Could not find a declaration file for module 'v-onboarding' HOT 9
- Overlay doesnt cover screen when css attribute zoom < 1 is applied on parent
- Cannot focus to the attached element input after version 2.7.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from v-onboarding.