3434 <button @click =" tour.previousStep" v-if =" !isMobile"
3535 {{ $t("Previous step") }}
3636 </button >
37- <button class =" right" @click =" alert "
37+ <button class =" right" @click =" tour.steps[tour.currentStep].button.fn() "
3838 v-if =" tour.steps[tour.currentStep].button"
3939 {{ $t(tour.steps[tour.currentStep].button.text) }}
4040 </button >
4848 </template >
4949 </v-tour >
5050 <transition name =" fade"
51- <div class =" tour-control-bar"
51+ <div class =" tour-control-bar" v-if = " isMobile "
5252 <button @click =" endTour()"
5353 {{ $t("End Tour") }}
5454 </button >
@@ -117,17 +117,23 @@ export default defineComponent({
117117 () => $network .consensus !== ' established'
118118 );
119119
120- const state : tourStore, removeTour } = useAccountStore ();
120+ const state : tourStore, setTour } = useAccountStore ();
121121
122122 let tour: VueTour .Tour | null = null ;
123123 const : TourSteps <any > = useTour (tourStore .tour , context ) || {};
124124
125125 // Initial state
126126 const = ref (true );
127- const : Ref <TourStepIndex > = ref (8 );
127+ const : Ref <TourStepIndex > = ref (0 );
128128 const : Ref <number > = ref (0 );
129129 const = ref (true );
130130
131+ let unmounted: (
132+ (args ? : { goingForward: boolean , ending? : boolean }) => Promise <null >)
133+ | Promise <null >
134+ | ((args ? : { goingForward: boolean , ending? : boolean }) => null )
135+ | null = null ;
136+
131137 onMounted (() => {
132138 tourSetup ();
133139
@@ -137,14 +143,22 @@ export default defineComponent({
137143 });
138144
139145 async function tourSetup() {
146+ await context .root .$nextTick (); // to ensure the DOM is ready
147+
140148 // Update state
141149 nSteps .value = Object .keys (steps ).length ;
142150 disableNextStep .value = currentStep .value >= nSteps .value - 1
143- || !! steps [currentStep .value ].ui .disabledNextStep ;
151+ || !! steps [currentStep .value ].ui .isNextStepDisabled ;
152+
153+ if (steps [currentStep .value ].lifecycle ?.created ) {
154+ await steps [currentStep .value ].lifecycle ! .created !({ goToNextStep , goingForward: true });
155+ }
144156
145157 _addAttributes (steps [currentStep .value ].ui , currentStep .value );
146- // eslint-disable-next-line no-unused-expressions
147- steps [currentStep .value ].lifecycle ?.onMountedStep ?.(goToNextStep );
158+
159+ if (steps [currentStep .value ].lifecycle ?.mounted ) {
160+ unmounted = await steps [currentStep .value ].lifecycle ! .mounted !({ goToNextStep , goingForward: true });
161+ }
148162
149163 if (context .root .$route .path !== steps [currentStep .value ].path ) {
150164 context .root .$router .push (steps [currentStep .value ].path );
@@ -163,11 +177,9 @@ export default defineComponent({
163177 const = document .querySelector (' #app main' as HTMLDivElement ;
164178
165179 if (loading .value || disconnected .value ) {
166- // eslint-disable-next-line no-unused-expressions
167- app ?.setAttribute (' data-non-interactable' ' '
180+ app ! .setAttribute (' data-non-interactable' ' '
168181 } else {
169- // eslint-disable-next-line no-unused-expressions
170- app ?.removeAttribute (' data-non-interactable'
182+ app ! .removeAttribute (' data-non-interactable'
171183 }
172184 });
173185
@@ -189,19 +201,21 @@ export default defineComponent({
189201 ) {
190202 const = futureStepIndex > currentStepIndex ;
191203
192- const path : currentPage, lifecycle : currentLifecycle } = steps [currentStepIndex ];
204+ const path : currentPage } = steps [currentStepIndex ];
193205 const path : futurePage, ui : futureUI, lifecycle : futureLifecycle } = steps [futureStepIndex ];
194206
195207 loading .value = true ;
196208 tour ! .stop ();
197- await sleep (500 );
198209
199- // changePage
200- if (! goingForward && currentLifecycle && currentLifecycle .prepareDOMPrevPage ) {
201- await currentLifecycle .prepareDOMPrevPage ();
202- } else if (goingForward && currentLifecycle && currentLifecycle .prepareDOMNextPage ) {
203- await currentLifecycle .prepareDOMNextPage ();
204- } else if (futurePage !== currentPage ) {
210+ if (unmounted ) {
211+ await (await unmounted )! ({ goingForward });
212+ }
213+
214+ if (futureLifecycle ?.created ) {
215+ await (futureLifecycle .created ! )({ goToNextStep , goingForward });
216+ }
217+
218+ if (futurePage !== currentPage && context .root .$route .fullPath !== futurePage ) {
205219 try {
206220 // Default prepare DOM
207221 context .root .$router .push (futurePage );
@@ -224,30 +238,32 @@ export default defineComponent({
224238 // FIXME Instead of doing tour!.end and tour!.start, we could also use .nextStep() or previsousStep()
225239 // The problem with this solution is that some animations glitch the UI so it needs further
226240 // investigation
227- // eslint-disable-next-line no-unused-expressions
228241 // goingForward ? tour!.nextStep() : tour!.previousStep();
229242
230243 // onMountedStep
231244 loading .value = false ;
232- disableNextStep .value = futureStepIndex >= nSteps .value - 1 || !! futureUI .disabledNextStep ;
245+ disableNextStep .value = futureStepIndex >= nSteps .value - 1 || !! futureUI .isNextStepDisabled ;
233246
234- // eslint-disable-next-line no-unused-expressions
235- futureLifecycle ?.onMountedStep ?.(goToNextStep );
247+ if (futureLifecycle ?.mounted ) {
248+ unmounted = await futureLifecycle ! .mounted !({ goToNextStep , goingForward });
249+ } else {
250+ unmounted = null ;
251+ }
236252
237253 currentStep .value = futureStepIndex ;
238254 }
239255
240256 function _addAttributes(uiConfig : TourStep [' ui' stepIndex : TourStepIndex ) {
241- const elementsWithOpacity = uiConfig .elementsWithOpacity || [];
242- const elementsWithoutInteractivity = uiConfig .elementsWithoutInteractivity || [];
257+ const fadedElements = uiConfig .fadedElements || [];
258+ const disabledElements = uiConfig .disabledElements || [];
243259
244- elementsWithoutInteractivity .forEach ((element ) => {
260+ disabledElements .forEach ((element ) => {
245261 const = document .querySelector (element );
246262 if (! el ) return ;
247263 el .setAttribute (' data-non-interactable' stepIndex .toString ());
248264 });
249265
250- elementsWithOpacity .forEach ((element ) => {
266+ fadedElements .forEach ((element ) => {
251267 const = document .querySelector (element );
252268 if (! el ) return ;
253269 el .setAttribute (' data-opacified' stepIndex .toString ());
@@ -265,14 +281,18 @@ export default defineComponent({
265281 });
266282 }
267283
268- function endTour() {
284+ async function endTour() {
269285 _removeAttributes (currentStep .value );
270286
271- // If user finalizes tour while it is loading, allow then interaction
287+ if (unmounted ) {
288+ await (await unmounted )! ({ ending: true , goingForward: false });
289+ }
290+
291+ // If user finalizes tour while it is loading, allow interaction again
272292 const = document .querySelector (' #app main' as HTMLDivElement ;
273293 app .removeAttribute (' data-non-interactable'
274294
275- removeTour ( );
295+ setTour ( null );
276296 }
277297
278298 // TODO REMOVE ME - Simulate tx
0 commit comments