Merge pull request #14 from GlobalHive/develop

Merge develop into master

Author: GlobalHive

docs/.vuepress/config.js

@@ -35,7 +35,7 @@ export default defineUserConfig({
       {
         text: 'VueJS Tour API',
         collapsible: true,
-        children: [ 'props', 'options', 'methods', 'styling' ],
+        children: [ 'props', 'options', 'methods', 'callbacks', 'styling' ],
       },
       ],
   }),

docs/guide/callbacks.md

@@ -0,0 +1,49 @@
+# Callbacks
+
+::: warning
+VueJS Tour is written for Vue 3 composition api. There are no plans to support Vue 2.x
+:::
+
+## Component instance callbacks
+
+### `onTourStart();`
+
+The `@onTourStart` callback is executed when the tour starts.
+
+```vue{4,11-13}
+<template>
+  <div>
+    ...
+    <VTour :steps="steps" autoStart @onTourStart='onTourStart'/>
+  </div>
+</template>
+
+<script setup>
+const steps = [...];
+
+const onTourStart = () => {
+  console.log('Tour started!');
+};
+</script>
+```
+
+### `onTourEnd();`
+
+The `@onTourEnd` callback is executed when the tour ends.
+
+```vue{4,11-13}
+<template>
+  <div>
+    ...
+    <VTour :steps="steps" autoStart @onTourEnd='onTourEnd'/>
+  </div>
+</template>
+
+<script setup>
+const steps = [...];
+
+const onTourEnd = () => {
+  console.log('Tour ended!');
+};
+</script>
+```

docs/guide/props.md

@@ -5,11 +5,11 @@ VueJS Tour is written for Vue 3 composition api. There are no plans to support V
 :::
 
 |     Prop     |   Type    |   Default   | Required | Description                                                                 |
-|:------------:|:---------:|:-----------:|:---:|-----------------------------------------------------------------------------|
-|   `steps`    |  `Array`  | `undefined` | `true` | An array of steps to be used in the tour.                                   |
-| `autoStart`  | `Boolean` |   `false`   | `false` | If `true`, the tour will start automatically when the component is mounted. |
-| `startDelay` | `Number`  |     `0`     | `false` | If set, the tour will start after x miliseconds.                            |
-| `highlight`  | `Boolean` |   `false`   | `false` | If `true`, the target will get highlighted.                                 |
+|:------------:|:---------:|:-----------:|:--------:|-----------------------------------------------------------------------------|
+|   `steps`    |  `Array`  | `undefined` |  `true`  | An array of steps to be used in the tour.                                   |
+| `autoStart`  | `Boolean` |   `false`   | `false`  | If `true`, the tour will start automatically when the component is mounted. |
+| `startDelay` | `Number`  |     `0`     | `false`  | If set, the tour will start after x miliseconds.                            |
+| `highlight`  | `Boolean` |   `false`   | `false`  | If `true`, the target will get highlighted.                                 |
 
 ## Example
 
@@ -30,7 +30,4 @@ const steps = [...];
 <br>
 <br>
 
-```js
-console.log('TODO: Add highlight example image here')
-```
-![Placeholder for the highlight example. Source: codemyui.com](https://codemyui.com/wp-content/uploads/2017/11/Strike-Off-ToDo-List-Animation.gif "TODO Gif")
+![Highlight example gif](https://raw.githubusercontent.com/GlobalHive/vuejs-tour/master/highlight.gif)

docs/index.md

@@ -17,11 +17,13 @@ features:
   details: VueJS Tour uses sass/scss to make it easy to customize the look of your tour.
 ---
 
-<VTour :steps="steps" ref="tour" highlight/>
+<VTour :steps="steps" ref="tour" highlight @onTourEnd='onTourEnd'/>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 const tour = ref(null);
+const router = useRouter();
 const steps = [
     {
         target: ".hero img",
@@ -49,6 +51,9 @@ const steps = [
 onMounted(() => {
         tour.value.resetTour();
 });
+const onTourEnd = () => {
+    router.push("/guide/getting-started");
+};
 </script>
 <style lang="scss">
     @import "../src/style/style.scss";

highlight.gif

@@ -55,6 +55,7 @@ const props = defineProps({
     default: false
   }
 });
+const emit = defineEmits(["onTourStart", "onTourEnd"]);
 defineExpose({
   startTour,
   nextStep,
@@ -79,16 +80,15 @@ async function startTour() {
       ]
     });
     props.highlight ? highlightTarget() : null;
+    emit("onTourStart");
   }, props.startDelay);
 }
-
 function highlightTarget() {
   let _currentStep = document.querySelector(`${step.getCurrentStep.target}`);
   let _lastStep = document.querySelector(`${step.getLastStep.target}`);
   _currentStep.classList.add("vjt-highlight");
   if (_lastStep != null && _currentStep !== _lastStep) _lastStep.classList.remove("vjt-highlight");
 }
-
 async function nextStep() {
   if (step.currentStep < maxSteps.value) {
     step.getCurrentStep.onNext ? await step.getCurrentStep.onNext() : null;
@@ -102,7 +102,6 @@ async function nextStep() {
   }
   endTour();
 }
-
 async function prevStep() {
   if (step.currentStep > 0) {
     step.getCurrentStep.onPrev ? await step.getCurrentStep.onPrev() : null;
@@ -114,7 +113,6 @@ async function prevStep() {
     recalculatePopper();
   }
 }
-
 function endTour() {
   document.getElementById("vjt-tooltip").setAttribute("data-hidden", "");
   document.querySelector(".vjt-highlight").classList.remove("vjt-highlight");
@@ -123,15 +121,14 @@ function endTour() {
   jump(document.body, {
     duration: 500,
   });
+  emit("onTourEnd");
 }
-
 function resetTour() {
   step.currentStep = 0;
   step.lastStep = 0;
   localStorage.removeItem("vjt-tour");
   startTour();
 }
-
 async function recalculatePopper() {
   popper.value.setOptions({
     placement: `${step.getCurrentStep.placement ? step.getCurrentStep.placement : "top"}`