Merge pull request #7 from GlobalHive/develop

Merge into master

Author: GlobalHive

README.md

@@ -10,6 +10,8 @@
 > VueJS Tour is a lightweight, simple and customizable tour plugin.
 > It provides a quick and easy way to guide your users through your application.
 
+<a href="https://globalhive.github.io/vuejs-tour/"><img src="./vuejs-tour.gif" width="100%"/></a>
+
 ## Table of Contents
 
 - [Prerequisites](#prerequisites)

docs/.vuepress/client.js

@@ -0,0 +1,12 @@
+import { defineClientConfig } from '@vuepress/client'
+import VTour from '../../src/components/VTour.vue'
+
+export default defineClientConfig({
+  enhance({ app, router, siteData }) {
+    app.component('VTour', VTour);
+  },
+  setup() {},
+  rootComponents: [
+    'VTour',
+  ],
+})

docs/.vuepress/config.js

@@ -10,7 +10,17 @@ export default defineUserConfig({
     vuePluginOptions: {},
   }),
   theme: defaultTheme({
+    logo: 'https://vuejs.org/images/logo.png',
     repo: 'globalhive/vuejs-tour',
+    docsRepo: 'globalhive/vuejs-tour',
+    docsDir: 'docs',
+    docsBranch: 'master',
+    navbar: [
+      {
+        text: 'API',
+        link: '/guide/props',
+      }
+    ],
     sidebar: [
       {
         text: 'Introduction',

docs/index.md

@@ -1,10 +1,10 @@
 ---
 home: true
-//heroImage: /images/popper.svg
-//heroAlt: VueJS Tour Logo
+heroImage: https://vuejs.org/images/logo.png
 tagline: Guide your users through your application quickly and easily.
 footer: MIT Licensed | Made with ❤️ by <a href="https://github.com/GlobalHive/vuejs-tour">Global Hive</a>
 footerHtml: true
+title: Home
 actions:
   - text: Get Started →
     link: /guide/getting-started
@@ -16,3 +16,40 @@ features:
 - title: 🎨 Themeable
   details: VueJS Tour uses sass/scss to make it easy to customize the look of your tour.
 ---
+
+<VTour :steps="steps" ref="tour" highlight/>
+
+<script setup>
+import { onMounted, ref } from "vue";
+const tour = ref(null);
+const steps = [
+    {
+        target: ".hero img",
+        content: "Welcome to the VueJS Tour documentation!",
+    },
+    {
+        target: ".footer a",
+        content: 'Made with ❤️ by <a href="https://github.com/globalhive">Global Hive</a>',
+    },
+    {
+        target: ".navbar-item a",
+        content: '<br><center>Looking for the API?</center><br>',
+    },
+    {
+        target: ".description",
+        content: 'With full <b>HTML</b> <u>support</u> <i>for the content of your steps!</i><br><br><img src="https://i.giphy.com/media/D6WuLOKOpR2fK/giphy.webp">',
+        placement: "right",
+    },
+    {
+        target: ".actions a",
+        content: "Let's get started, shall we?",
+        placement: "right",
+    }
+];
+onMounted(() => {
+        tour.value.resetTour();
+});
+</script>
+<style lang="scss">
+    @import "../src/style/style.scss";
+</style>

package-lock.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "jump.js": "^1.0.2",
     "vue": "^3.2.41"
   },
   "repository": {

package.json

@@ -17,6 +17,7 @@
 <script setup>
 import { createPopper } from "@popperjs/core";
 import { computed, onMounted, ref } from "vue";
+import jump from "jump.js";
 
 const popper = ref(null);
 
@@ -102,6 +103,9 @@ function endTour() {
   document.querySelector(".vjt-highlight").classList.remove("vjt-highlight");
   popper.value.destroy();
   localStorage.setItem("vjt-tour", "true");
+  jump(document.body, {
+    duration: 500,
+  });
 }
 
 function resetTour() {
@@ -111,10 +115,12 @@ function resetTour() {
 }
 
 function highlightTarget(lastStep = null) {
-  document.querySelector(`${getStep.value.target}`).classList.add("vjt-highlight");
-  if (lastStep != null) {
-    document.querySelector(`${props.steps[lastStep].target}`).classList.remove("vjt-highlight");
-  }
+  let _nextStep = document.querySelector(`${getStep.value?.target}`);
+  let _lastStep = document.querySelector(`${props.steps[lastStep]?.target}`);
+  if(_nextStep === _lastStep) return;
+
+  _nextStep.classList.add("vjt-highlight");
+  if (_lastStep != null) _lastStep.classList.remove("vjt-highlight");
 }
 
 function recalculatePopper(lastStep) {
@@ -123,7 +129,11 @@ function recalculatePopper(lastStep) {
   });
   popper.value.state.elements.reference = document.querySelector(`${getStep.value.target}`);
   popper.value.update();
-  highlightTarget(lastStep);
+  jump(document.querySelector(`${getStep.value.target}`), {
+    duration: 500,
+    offset: -100
+  });
+  props.highlight ? highlightTarget(lastStep) : null;
 }
 
 onMounted(() => {

src/components/VTour.vue

@@ -80,6 +80,7 @@
     font-size: $vjt__action_button_font_size;
     font-weight: 500;
     transition: all 0.2s ease-in-out;
+    cursor: pointer;
 
     &:hover {
       background-color: $vjt__action_button_background_hover;