├── .gitignore
├── screenshot.gif
├── public
    └── favicon.ico
├── example
    ├── assets
    │   └── logo.png
    ├── main.ts
    ├── App.vue
    └── components
    │   ├── HelloWorld.vue
    │   └── Tour.vue
├── .editorconfig
├── tsconfig.node.json
├── src
    ├── components
    │   ├── v-tour
    │   │   ├── _v-tour.scss
    │   │   └── VTour.vue
    │   └── v-step
    │   │   ├── _v-step.scss
    │   │   └── VStep.vue
    ├── lib.ts
    └── shared
    │   └── constants.ts
├── .eslintrc.js
├── index.html
├── vite.config.ts
├── tsconfig.json
├── LICENSE
├── package.json
├── .github
    └── workflows
    │   └── npm-publish.yml
├── README.md
└── types
    └── vue3-tour.d.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules
3 | .DS_Store
4 | dist
5 | dist-ssr
6 | *.local


--------------------------------------------------------------------------------
/screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexandreDavid/vue3-tour/HEAD/screenshot.gif


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexandreDavid/vue3-tour/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/example/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexandreDavid/vue3-tour/HEAD/example/assets/logo.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newlibe = true


--------------------------------------------------------------------------------
/example/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import Lib from '../src/lib.ts'
 4 | 
 5 | const app = createApp(App)
 6 | 
 7 | app.use(Lib)
 8 | 
 9 | app.mount('#app')
10 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "strict": true
 9 |   },
10 |   "include": ["vite.config.ts"]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/v-tour/_v-tour.scss:
--------------------------------------------------------------------------------
 1 | body.v-tour--active {
 2 |   pointer-events: none;
 3 | }
 4 | .v-tour {
 5 |   pointer-events: auto;
 6 | }
 7 | .v-tour__target--highlighted {
 8 |   box-shadow: 0 0 0 4px rgba(0,0,0,.4);
 9 |   pointer-events: auto;
10 |   z-index: 9999;
11 | }
12 | .v-tour__target--relative {
13 |   position: relative;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lib.ts:
--------------------------------------------------------------------------------
 1 | import VTour from  './components/v-tour/VTour.vue'
 2 | import VStep from './components/v-step/VStep.vue'
 3 | 
 4 | import type { App } from 'vue'
 5 | 
 6 | const install = (app: App) => {
 7 |   app.config.globalProperties.$tours = {}
 8 | 
 9 |   app.component('v-tour', VTour)
10 |   app.component('v-step', VStep)
11 | }
12 | 
13 | export default install
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: [
 3 |     // add more generic rulesets here, such as:
 4 |     // 'eslint:recommended',
 5 |     'plugin:vue/vue3-recommended',
 6 |     '@vue/standard'
 7 |     // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
 8 |   ],
 9 |   rules: {
10 |     // override/add rules settings here, such as:
11 |     // 'vue/no-unused-vars': 'error'
12 |   }
13 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="./example/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img alt="Vue logo" src="./assets/logo.png" />
 3 |   <HelloWorld msg="Hello Vue 3 tour example" />
 4 |   <Tour />
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import HelloWorld from './components/HelloWorld.vue'
 9 | import Tour from './components/Tour.vue'
10 | </script>
11 | 
12 | <style>
13 | #app {
14 |   font-family: Avenir, Helvetica, Arial, sans-serif;
15 |   -webkit-font-smoothing: antialiased;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   text-align: center;
18 |   color: #2c3e50;
19 |   margin-top: 60px;
20 | }
21 | </style>


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import { resolve } from 'path'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   build: {
 8 |     lib: {
 9 |       entry: resolve(__dirname, 'src/lib.ts'),
10 |       name: 'Vue3Tour'
11 |     },
12 |     rollupOptions: {
13 |       external: ['vue'],
14 |       output: {
15 |         assetFileNames: `vue3-tour.[ext]`,
16 |         globals: {
17 |           vue: 'Vue'
18 |         }
19 |       }
20 |     }
21 |   },
22 |   plugins: [vue()]
23 | })
24 | 


--------------------------------------------------------------------------------
/example/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>{{ msg }}</h1>
 3 | 
 4 |   <p>
 5 |     <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
 6 |     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
 7 |   </p>
 8 | 
 9 |   <button @click="$tours['myTour'].start()">Start tour</button>
10 | </template>
11 | 
12 | <script setup>
13 | import { defineProps } from 'vue'
14 | 
15 | defineProps({
16 |   msg: String
17 | })
18 | </script>
19 | 
20 | <style scoped>
21 | a {
22 |   color: #42b983;
23 | }
24 | 
25 | button {
26 |   margin-bottom: 1rem;
27 | }
28 | </style>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "preserve",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
24 |   "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Alexandre David
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-tour",
 3 |   "version": "1.0.3",
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vue-tsc && vite build",
 8 |     "serve": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@popperjs/core": "^2.11.8",
12 |     "jump.js": "^1.0.2",
13 |     "vue": "^3.4.23"
14 |   },
15 |   "devDependencies": {
16 |     "@types/jump.js": "^1.0.6",
17 |     "@types/node": "^20.12.7",
18 |     "@vitejs/plugin-vue": "^5.0.4",
19 |     "sass": "^1.75.0",
20 |     "typescript": "^5.2.2",
21 |     "vite": "^5.2.8",
22 |     "vue-tsc": "^2.0.11"
23 |   },
24 |   "files": [
25 |     "dist",
26 |     "src",
27 |     "types"
28 |   ],
29 |   "main": "dist/vue3-tour.umd.cjs",
30 |   "browser": "dist/vue3-tour.umd.cjs",
31 |   "module": "dist/vue3-tour.js",
32 |   "types": "types/vue3-tour.d.ts",
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git+https://github.com/alexandreDavid/vue3-tour.git"
36 |   },
37 |   "keywords": [
38 |     "vue",
39 |     "tour"
40 |   ],
41 |   "author": "Alexandre David",
42 |   "license": "MIT",
43 |   "bugs": {
44 |     "url": "https://github.com/alexandreDavid/vue3-tour/issues"
45 |   },
46 |   "homepage": "https://github.com/alexandreDavid/vue3-tour#readme"
47 | }
48 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 3 | 
 4 | name: Node.js Package
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v2
15 |       - uses: actions/setup-node@v1
16 |         with:
17 |           node-version: 16
18 |       - run: npm ci
19 |       - run: npm run build
20 |       # - run: npm test
21 | 
22 |   publish-npm:
23 |     needs: build
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - uses: actions/checkout@v2
27 |       - uses: actions/setup-node@v1
28 |         with:
29 |           node-version: 16
30 |           registry-url: https://registry.npmjs.org/
31 |       - run: npm ci
32 |       - run: npm run build
33 |       - run: npm publish
34 |         env:
35 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
36 | 
37 |   # publish-gpr:
38 |   #   needs: build
39 |   #   runs-on: ubuntu-latest
40 |   #   steps:
41 |   #     - uses: actions/checkout@v2
42 |   #     - uses: actions/setup-node@v1
43 |   #       with:
44 |   #         node-version: 12
45 |   #         registry-url: https://npm.pkg.github.com/
46 |   #     - run: npm ci
47 |   #     - run: npm publish
48 |   #       env:
49 |   #         NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
50 | 


--------------------------------------------------------------------------------
/example/components/Tour.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div id="v-step-0">
 4 |       A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.
 5 |     </div>
 6 |     <div class="v-step-1">
 7 |       A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.
 8 |     </div>
 9 |     <div data-v-step="2">
10 |       A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.
11 |     </div>
12 | 
13 |     <v-tour name="myTour" :steps="steps" :options="options"></v-tour>
14 |   </div>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | import { onMounted, getCurrentInstance } from 'vue';
19 | 
20 | import type { Step, VTourOptions } from '../../types/vue3-tour'
21 | 
22 | const steps: Step[] = [
23 |   {
24 |     target: '#v-step-0',  // We're using document.querySelector() under the hood
25 |     header: {
26 |       title: 'Get Started',
27 |     },
28 |     content: `Discover <strong>Vue Tour</strong>!`,
29 |   },
30 |   {
31 |     target: '.v-step-1',
32 |     content: 'An awesome plugin made with Vue.js!'
33 |   },
34 |   {
35 |     target: '[data-v-step="2"]',
36 |     content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
37 |     params: {
38 |       placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
39 |     }
40 |   }
41 | ]
42 | const options: VTourOptions = {
43 |   highlight: true
44 | }
45 | 
46 | onMounted(() => {
47 |   getCurrentInstance()?.appContext.config.globalProperties.$tours['myTour'].start()
48 | })
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/shared/constants.ts:
--------------------------------------------------------------------------------
 1 | import { PopperParams } from '../../types/vue3-tour'
 2 | 
 3 | export const DEFAULT_CALLBACKS = {
 4 |   onStart: () => {},
 5 |   onPreviousStep: () => {},
 6 |   onNextStep: () => {},
 7 |   onStop: () => {},
 8 |   onSkip: () => {},
 9 |   onFinish: () => {}
10 | }
11 | 
12 | export const DEFAULT_OPTIONS = {
13 |   highlight: false,
14 |   labels: {
15 |     buttonSkip: 'Skip tour',
16 |     buttonPrevious: 'Previous',
17 |     buttonNext: 'Next',
18 |     buttonStop: 'Finish'
19 |   },
20 |   enabledButtons: {
21 |     buttonSkip: true,
22 |     buttonPrevious: true,
23 |     buttonNext: true,
24 |     buttonStop: true
25 |   },
26 |   startTimeout: 0,
27 |   useKeyboardNavigation: true,
28 |   enabledNavigationKeys: {
29 |     ESCAPE: true,
30 |     ARROW_RIGHT: true,
31 |     ARROW_LEFT: true
32 |   },
33 |   stopOnTargetNotFound: true,
34 |   debug: false
35 | }
36 | 
37 | export const HIGHLIGHT = {
38 |   CLASSES: {
39 |     ACTIVE: 'v-tour--active',
40 |     TARGET_HIGHLIGHTED: 'v-tour__target--highlighted',
41 |     TARGET_RELATIVE: 'v-tour__target--relative'
42 |   },
43 |   TRANSITION: 'box-shadow 0s ease-in-out 0s',
44 |   useKeyboardNavigation: true,
45 |   startTimeout: 0,
46 |   stopOnTargetNotFound: true
47 | }
48 | 
49 | export const DEFAULT_STEP_OPTIONS: PopperParams = {
50 |   enableScrolling: true,
51 |   highlight: DEFAULT_OPTIONS.highlight, // By default use the global tour setting
52 |   enabledButtons: DEFAULT_OPTIONS.enabledButtons,
53 |   modifiers: [
54 |     {
55 |       name: 'offset',
56 |       options: {
57 |         offset: () => {
58 |           return [0, 8];
59 |         },
60 |       },
61 |     },
62 |   ],
63 |   placement: 'bottom',
64 | }
65 | 
66 | export const KEYS = {
67 |   ARROW_RIGHT: 39,
68 |   ARROW_LEFT: 37,
69 |   ESCAPE: 27
70 | }


--------------------------------------------------------------------------------
/src/components/v-step/_v-step.scss:
--------------------------------------------------------------------------------
  1 | .v-step {
  2 |   background: #50596c;
  3 |   /* #ffc107, #35495e */
  4 |   color: white;
  5 |   max-width: 320px;
  6 |   border-radius: 3px;
  7 |   box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
  8 |     rgba(0, 0, 0, 0) 0px 0px 0px 0px,
  9 |     rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
 10 |     rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 11 |   padding: 10px;
 12 |   pointer-events: auto;
 13 |   text-align: center;
 14 |   z-index: 10000;
 15 | 
 16 |   &--sticky {
 17 |     position: fixed;
 18 |     top: 50%;
 19 |     left: 50%;
 20 |     transform: translate(-50%, -50%);
 21 | 
 22 |     & .v-step__arrow {
 23 |       display: none;
 24 |     }
 25 |   }
 26 | }
 27 | 
 28 | .v-step__arrow,
 29 | .v-step__arrow::before {
 30 |   position: absolute;
 31 |   width: 10px;
 32 |   height: 10px;
 33 |   background: inherit;
 34 | }
 35 | 
 36 | .v-step__arrow {
 37 |   visibility: hidden;
 38 | 
 39 |   &--dark {
 40 |     &:before {
 41 |       background: #454d5d;
 42 |     }
 43 |   }
 44 | }
 45 | 
 46 | .v-step__arrow::before {
 47 |   visibility: visible;
 48 |   content: '';
 49 |   transform: rotate(45deg);
 50 | }
 51 | 
 52 | .v-step[data-popper-placement^="top"]>.v-step__arrow {
 53 |   bottom: -5px;
 54 |   left: calc(50% - 10px);
 55 | }
 56 | 
 57 | .v-step[data-popper-placement^="bottom"]>.v-step__arrow {
 58 |   top: -5px;
 59 |   left: calc(50% - 10px);
 60 | }
 61 | 
 62 | .v-step[data-popper-placement^="right"]>.v-step__arrow {
 63 |   left: -9px;
 64 |   top: calc(50% - 10px);
 65 | }
 66 | 
 67 | .v-step[data-popper-placement^="left"]>.v-step__arrow {
 68 |   right: 1px;
 69 |   top: calc(50% - 10px);
 70 | }
 71 | 
 72 | /* Custom */
 73 | .v-step__header {
 74 |   margin: -10px -10px 5px;
 75 |   padding: 5px;
 76 |   background-color: #454d5d;
 77 |   border-top-left-radius: 3px;
 78 |   border-top-right-radius: 3px;
 79 | }
 80 | 
 81 | .v-step__content {
 82 |   margin: 0 0 10px 0;
 83 | }
 84 | 
 85 | .v-step__button {
 86 |   background: transparent;
 87 |   border: .05rem solid white;
 88 |   border-radius: .10px;
 89 |   color: white;
 90 |   cursor: pointer;
 91 |   display: inline-block;
 92 |   font-size: .8rem;
 93 |   height: 1.8rem;
 94 |   line-height: 10px;
 95 |   outline: none;
 96 |   margin: 0 0.2rem;
 97 |   padding: .35rem .4rem;
 98 |   text-align: center;
 99 |   text-decoration: none;
100 |   transition: all .2s ease;
101 |   vertical-align: middle;
102 |   white-space: nowrap;
103 | 
104 |   &:hover {
105 |     background-color: rgba(white, 0.95);
106 |     color: #50596c;
107 |   }
108 | }
109 | 
110 | .mask {
111 |   position: absolute;
112 |   top: 0;
113 |   right: 0;
114 |   bottom: 0;
115 |   left: 0;
116 |   background: rgba(0, 0, 0, .5);
117 | 
118 |   .tour-focus-container {
119 |     border-radius: 4px;
120 |     transition: opacity 0.2s;
121 |     left: 0px;
122 |     top: 0px;
123 |     width: 100%;
124 |     height: 100%;
125 |     position: absolute;
126 |     opacity: 1;
127 |     pointer-events: auto;
128 |     box-shadow: 0px 0px 0px 9999px rgba(17, 55, 80, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.5);
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Tour
  2 | 
  3 | Forked from [vue-tour](https://github.com/pulsardev/vue-tour)
  4 | 
  5 | > Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js 3.
  6 | > It provides a quick and easy way to guide your users through your application.
  7 | 
  8 | [![Vue Tour](./screenshot.gif "Vue Tour")](https://alexandreDavid.github.io/vue3-tour/)
  9 | 
 10 | ## Table of Contents
 11 | 
 12 | - [Getting Started](#getting-started)
 13 | - [Something Missing?](#something-missing)
 14 | 
 15 | ## Getting Started
 16 | 
 17 | You can install `vue3-tour` using npm or by downloading the minified build on GitHub.
 18 | 
 19 | ```
 20 | npm install vue3-tour
 21 | ```
 22 | 
 23 | Then import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it.
 24 | Also don't forget to include the styles. You can add the styles provided by default or customize them to your own liking.
 25 | 
 26 | ```javascript
 27 | import { createApp } from 'vue'
 28 | import App from './App.vue'
 29 | import Vue3Tour from 'vue3-tour'
 30 | 
 31 | import 'vue3-tour/dist/vue3-tour.css'
 32 | 
 33 | const app = createApp(App)
 34 | 
 35 | app.use(Vue3Tour)
 36 | 
 37 | app.mount('#app')
 38 | ```
 39 | 
 40 | Finally put a `v-tour` component in your template anywhere in your app (usually in App.vue) and pass it an array of steps.
 41 | The `target` property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).
 42 | 
 43 | ```html
 44 | <template>
 45 |   <div>
 46 |     <div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
 47 |     <div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
 48 |     <div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>
 49 | 
 50 |     <v-tour name="myTour" :steps="steps"></v-tour>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 |   export default {
 56 |     name: 'my-tour',
 57 |     data () {
 58 |       return {
 59 |         steps: [
 60 |           {
 61 |             target: '#v-step-0',  // We're using document.querySelector() under the hood
 62 |             header: {
 63 |               title: 'Get Started',
 64 |             },
 65 |             content: `Discover <strong>Vue Tour</strong>!`
 66 |           },
 67 |           {
 68 |             target: '.v-step-1',
 69 |             content: 'An awesome plugin made with Vue.js!'
 70 |           },
 71 |           {
 72 |             target: '[data-v-step="2"]',
 73 |             content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
 74 |             params: {
 75 |               placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
 76 |             }
 77 |           }
 78 |         ]
 79 |       }
 80 |     },
 81 |     mounted: function () {
 82 |       this.$tours['myTour'].start()
 83 |     }
 84 |   }
 85 | </script>
 86 | ```
 87 | 
 88 | For all individual elements you want to add a step on, make sure it can be retrieved with `document.querySelector()`. You can use any selector, an ID, a CSS class, data attributes, etc.
 89 | Once this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.
 90 | 
 91 | ```javascript
 92 | this.$tours['myTour'].start()
 93 | ```
 94 | 
 95 | For a more detailed documentation, checkout the [docs for vue-tour](https://github.com/pulsardev/vue-tour/wiki).
 96 | 
 97 | ## `before()` UI step functions
 98 | 
 99 | If you need to do UI setup work before a step, there's a `before` function you may include in any/each of
100 | your steps. This function will get invoked before the start/next/previous step is rendered. The function must return a promise. The function is invoked when `start`, `nextStep`, and `previousStep` are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.
101 | 
102 | It's used when you need to change what's shown on the screen between steps. For example, you may want to hide
103 | one set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.
104 | 
105 | ```javascript
106 | steps: [
107 |   {
108 |     target: '#v-step-0',  // We're using document.querySelector() under the hood
109 |     content: `Discover <strong>Vue Tour</strong>!`,
110 |     before: type => new Promise((resolve, reject) => {
111 |       // Time-consuming UI/async operation here
112 |       resolve('foo')
113 |     })
114 |   }
115 | ]
116 | ```
117 | 
118 | ## Something Missing?
119 | 
120 | If you have a feature request or found a bug, [let us know](https://github.com/alexandreDavid/vue3-tour/issues) by submitting an issue.
121 | 


--------------------------------------------------------------------------------
/src/components/v-tour/VTour.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="v-tour">
  3 |     <slot :current-step="currentStep" :steps="steps" :previous-step="previousStep" :next-step="nextStep" :stop="stop"
  4 |       :skip="skip" :finish="finish" :is-first="isFirst" :is-last="isLast" :labels="customOptions.labels"
  5 |       :enabled-buttons="customOptions.enabledButtons" :highlight="customOptions.highlight" :debug="customOptions.debug">
  6 |       <!--Default slot {{ currentStep }}-->
  7 |       <v-step v-if="steps[currentStep]" :step="steps[currentStep]" :key="currentStep" :previous-step="previousStep"
  8 |         :next-step="nextStep" :stop="stop" :skip="skip" :finish="finish" :is-first="isFirst" :is-last="isLast"
  9 |         :labels="customOptions.labels" :enabled-buttons="customOptions.enabledButtons"
 10 |         :highlight="customOptions.highlight" :stop-on-fail="customOptions.stopOnTargetNotFound"
 11 |         :debug="customOptions.debug" @targetNotFound="$emit('targetNotFound', $event)">
 12 |         <!--<div v-if="index === 2" slot="actions">
 13 |           <a @click="nextStep">Next step</a>
 14 |         </div>-->
 15 |       </v-step>
 16 |     </slot>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script setup lang="ts">
 21 | import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 22 | import { DEFAULT_CALLBACKS, DEFAULT_OPTIONS, KEYS } from '../../shared/constants'
 23 | 
 24 | import type { VTourProps, EnabledNavigationKeys } from '../../../types/vue3-tour'
 25 | 
 26 | const props = withDefaults(defineProps<VTourProps>(), {
 27 |   steps: () => [],
 28 |   options: () => DEFAULT_OPTIONS,
 29 |   callbacks: () => DEFAULT_CALLBACKS,
 30 | })
 31 | 
 32 | const currentStep = ref(-1)
 33 | 
 34 | const customOptions = computed(() => {
 35 |   return {
 36 |     ...DEFAULT_OPTIONS,
 37 |     ...props.options
 38 |   }
 39 | })
 40 | 
 41 | const customCallbacks = computed(() => {
 42 |   return {
 43 |     ...DEFAULT_CALLBACKS,
 44 |     ...props.callbacks
 45 |   }
 46 | })
 47 | 
 48 | const isRunning = computed(() => currentStep.value > -1 && currentStep.value < numberOfSteps.value)
 49 | 
 50 | const isFirst = computed(() => currentStep.value === 0)
 51 | 
 52 | const isLast = computed(() => currentStep.value === props.steps.length - 1)
 53 | 
 54 | const numberOfSteps = computed(() => props.steps.length)
 55 | 
 56 | const step = computed(() => props.steps[currentStep.value])
 57 | 
 58 | const start = async (startStep: number | string) => {
 59 |   // Wait for the DOM to be loaded, then start the tour
 60 |   startStep = typeof startStep !== 'undefined' ? parseInt(String(startStep), 10) : 0
 61 |   let step = props.steps[startStep]
 62 |   let process = () => new Promise<void>((resolve) => {
 63 |     setTimeout(() => {
 64 |       customCallbacks.value.onStart()
 65 |       currentStep.value = startStep
 66 |       resolve()
 67 |     }, customOptions.value.startTimeout)
 68 |   })
 69 |   if (typeof step.before !== 'undefined') {
 70 |     try {
 71 |       await step.before('start')
 72 |     } catch (e) {
 73 |       return Promise.reject(e)
 74 |     }
 75 |   }
 76 |   await process()
 77 |   customCallbacks.value.onStart()
 78 |   currentStep.value = startStep
 79 | 
 80 |   return Promise.resolve()
 81 | }
 82 | 
 83 | const previousStep = async () => {
 84 |   let futureStep = currentStep.value - 1
 85 |   let process = () => new Promise<void>((resolve) => {
 86 |     customCallbacks.value.onPreviousStep(currentStep.value)
 87 |     currentStep.value = futureStep
 88 |     resolve()
 89 |   })
 90 |   if (futureStep > -1) {
 91 |     let step = props.steps[futureStep]
 92 |     if (typeof step.before !== 'undefined') {
 93 |       try {
 94 |         await step.before('previous')
 95 |       } catch (e) {
 96 |         return Promise.reject(e)
 97 |       }
 98 |     }
 99 |     await process()
100 |   }
101 |   return Promise.resolve()
102 | }
103 | 
104 | const nextStep = async () => {
105 |   let futureStep = currentStep.value + 1
106 |   let process = () => new Promise<void>((resolve) => {
107 |     customCallbacks.value.onNextStep(currentStep.value)
108 |     currentStep.value = futureStep
109 |     resolve()
110 |   })
111 |   if (futureStep < numberOfSteps.value && currentStep.value !== -1) {
112 |     let step = props.steps[futureStep]
113 |     if (typeof step.before !== 'undefined') {
114 |       try {
115 |         await step.before('next')
116 |       } catch (e) {
117 |         return Promise.reject(e)
118 |       }
119 |     }
120 |     await process()
121 |   }
122 |   return Promise.resolve()
123 | }
124 | 
125 | const stop = () => {
126 |   customCallbacks.value.onStop()
127 |   document.body.classList.remove('v-tour--active')
128 |   currentStep.value = -1
129 | }
130 | 
131 | const skip = () => {
132 |   customCallbacks.value.onSkip()
133 |   stop()
134 | }
135 | 
136 | const finish = () => {
137 |   customCallbacks.value.onFinish()
138 |   stop()
139 | }
140 | 
141 | const handleKeyup = (e: KeyboardEvent) => {
142 |   if (customOptions.value.debug) {
143 |     console.log('[Vue Tour] A keyup event occured:', e)
144 |   }
145 |   switch (e.keyCode) {
146 |     case KEYS.ARROW_RIGHT:
147 |       isKeyEnabled('ARROW_RIGHT') && nextStep()
148 |       break
149 |     case KEYS.ARROW_LEFT:
150 |       isKeyEnabled('ARROW_LEFT') && previousStep()
151 |       break
152 |     case KEYS.ESCAPE:
153 |       isKeyEnabled('ESCAPE') && stop()
154 |       break
155 |   }
156 | }
157 | 
158 | const isKeyEnabled = (key: keyof EnabledNavigationKeys) => {
159 |   const { enabledNavigationKeys } = customOptions.value
160 |   return enabledNavigationKeys.hasOwnProperty(key) ? enabledNavigationKeys[key] : true
161 | }
162 | 
163 | onMounted(() => {
164 |   const app = getCurrentInstance()
165 |   if (app) {
166 |     app.appContext.config.globalProperties.$tours[props.name] = {
167 |       step, start,
168 |       isRunning,
169 |       customOptions,
170 |       currentStep,
171 |       isFirst,
172 |       isLast,
173 |       previousStep,
174 |       nextStep,
175 |       stop,
176 |       skip,
177 |       finish,
178 |       numberOfSteps,
179 |     }
180 |   }
181 |   if (customOptions.value.useKeyboardNavigation) {
182 |     window.addEventListener('keyup', handleKeyup)
183 |   }
184 | })
185 | 
186 | onBeforeUnmount(() => {
187 |   if (customOptions.value.useKeyboardNavigation) {
188 |     window.removeEventListener('keyup', handleKeyup)
189 |   }
190 | })
191 | 
192 | </script>
193 | 
194 | <style lang="scss">
195 | @import 'v-tour';
196 | </style>
197 | 


--------------------------------------------------------------------------------
/src/components/v-step/VStep.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- <teleport to="body"> -->
  3 |   <!-- <div class="tour-mask" v-show="displayMask">
  4 |       <div class="tour-focus-container" v-bind:style="styleFocusContainer"></div>
  5 |     </div> -->
  6 |   <div :class="{ 'v-step--sticky': isSticky }" class="v-step" :id="'v-step-' + hash" ref="VStep">
  7 |     <slot name="header">
  8 |       <div v-if="step.header" class="v-step__header">
  9 |         <div v-if="step.header.title" v-html="step.header.title"></div>
 10 |       </div>
 11 |     </slot>
 12 | 
 13 |     <slot name="content">
 14 |       <div class="v-step__content">
 15 |         <div v-if="step.content" v-html="step.content"></div>
 16 |         <div v-else>props is a demo step! The id of props step is {{ hash }} and it targets {{ step.target }}.</div>
 17 |       </div>
 18 |     </slot>
 19 | 
 20 |     <slot name="actions">
 21 |       <div class="v-step__buttons">
 22 |         <button @click.prevent="onSkip" v-if="!isLast && isButtonEnabled('buttonSkip')"
 23 |           class="v-step__button v-step__button-skip">{{ labels?.buttonSkip }}</button>
 24 |         <button @click.prevent="previousStep" v-if="!isFirst && isButtonEnabled('buttonPrevious')"
 25 |           class="v-step__button v-step__button-previous">{{ labels?.buttonPrevious }}</button>
 26 |         <button @click.prevent="nextStep" v-if="!isLast && isButtonEnabled('buttonNext')"
 27 |           class="v-step__button v-step__button-next">{{ labels?.buttonNext }}</button>
 28 |         <button @click.prevent="onFinish" v-if="isLast && isButtonEnabled('buttonStop')"
 29 |           class="v-step__button v-step__button-stop">{{ labels?.buttonStop }}</button>
 30 |       </div>
 31 |     </slot>
 32 | 
 33 |     <div class="v-step__arrow" :class="{ 'v-step__arrow--dark': step.header && step.header.title }" data-popper-arrow>
 34 |     </div>
 35 |   </div>
 36 |   <!-- </teleport> -->
 37 | </template>
 38 | 
 39 | <script setup lang="ts">
 40 | import { ref, computed, onMounted, onUnmounted } from 'vue'
 41 | import { createPopper } from '@popperjs/core'
 42 | import jump from 'jump.js'
 43 | import { DEFAULT_STEP_OPTIONS, HIGHLIGHT } from '../../shared/constants'
 44 | 
 45 | import type { VStepProps, EnabledButtons } from '../../../types/vue3-tour'
 46 | 
 47 | const props = defineProps<VStepProps>()
 48 | 
 49 | const emit = defineEmits(['targetNotFound'])
 50 | 
 51 | const onSkip = () => (props.skip || props.stop)()
 52 | const onFinish = () => (props.finish || props.stop)()
 53 | 
 54 | const hashCode = (str: string): number => {
 55 |   var h: number = 0;
 56 |   for (var i = 0; i < str.length; i++) {
 57 |     h = 31 * h + str.charCodeAt(i);
 58 |   }
 59 |   return h & 0xFFFFFFFF
 60 | }
 61 | 
 62 | const hash = hashCode(props.step.target)
 63 | const targetElement: HTMLElement | null = document.querySelector(props.step.target)
 64 | 
 65 | const params = computed(() => {
 66 |   return {
 67 |     ...DEFAULT_STEP_OPTIONS,
 68 |     ...{ highlight: props.highlight }, // Use global tour highlight setting first
 69 |     ...{ enabledButtons: Object.assign({}, props.enabledButtons) },
 70 |     ...props.step.params // Then use local step parameters if defined
 71 |   }
 72 | })
 73 | 
 74 | const isSticky = computed(() => {
 75 |   return !props.step.target
 76 | })
 77 | 
 78 | const VStep = ref(null)
 79 | 
 80 | const createStep = () => {
 81 |   if (props.debug) {
 82 |     console.log('[Vue Tour] The target element ' + props.step.target + ' of .v-step[id="' + hash + '"] is:', targetElement)
 83 |   }
 84 | 
 85 |   if (!VStep.value) {
 86 |     if (props.debug) {
 87 |       console.error('[Vue Tour] The target element ' + props.step.target + ' of .v-step[id="' + hash + '"] does not exist!')
 88 |     }
 89 | 
 90 |     return
 91 |   }
 92 | 
 93 |   if (isSticky.value) {
 94 |     document.body.appendChild(VStep.value)
 95 |   } else {
 96 |     if (targetElement) {
 97 |       enableScrolling()
 98 |       createHighlight()
 99 | 
100 |       createPopper(
101 |         targetElement,
102 |         VStep.value,
103 |         params.value
104 |       )
105 |     } else {
106 |       if (props.debug) {
107 |         console.error('[Vue Tour] The target element ' + props.step.target + ' of .v-step[id="' + hash + '"] does not exist!')
108 |       }
109 |       emit('targetNotFound', props.step)
110 |       if (props.stopOnFail) {
111 |         props.stop()
112 |       }
113 |     }
114 |   }
115 | }
116 | 
117 | const enableScrolling = () => {
118 |   if (targetElement && params.value.enableScrolling) {
119 |     if (props.step.duration || props.step.offset) {
120 |       let jumpOptions = {
121 |         duration: props.step.duration || 1000,
122 |         offset: props.step.offset || 0,
123 |         callback: undefined,
124 |         a11y: false
125 |       }
126 | 
127 |       jump(targetElement, jumpOptions)
128 |     } else {
129 |       // Use the native scroll by default if no scroll options has been defined
130 |       targetElement.scrollIntoView({ behavior: 'smooth' })
131 |     }
132 |   }
133 | }
134 | 
135 | const isHighlightEnabled = () => {
136 |   if (props.debug) {
137 |     console.log(`[Vue Tour] Highlight is ${params.value.highlight ? 'enabled' : 'disabled'} for .v-step[id="${hash}"]`)
138 |   }
139 |   return params.value.highlight
140 | }
141 | 
142 | const createHighlight = () => {
143 |   if (targetElement && isHighlightEnabled()) {
144 |     document.body.classList.add(HIGHLIGHT.CLASSES.ACTIVE)
145 |     const transitionValue = window.getComputedStyle(targetElement).getPropertyValue('transition')
146 | 
147 |     // Make sure our background doesn't flick on transitions
148 |     if (transitionValue !== 'all 0s ease 0s') {
149 |       targetElement.style.transition = `${transitionValue}, ${HIGHLIGHT.TRANSITION}`
150 |     }
151 | 
152 |     targetElement.classList.add(HIGHLIGHT.CLASSES.TARGET_HIGHLIGHTED)
153 | 
154 |     // The element must have a position, if it doesn't have one, add a relative position class
155 |     if (!targetElement.style.position) {
156 |       targetElement.classList.add(HIGHLIGHT.CLASSES.TARGET_RELATIVE)
157 |     }
158 |   } else {
159 |     document.body.classList.remove(HIGHLIGHT.CLASSES.ACTIVE)
160 |   }
161 | }
162 | 
163 | const removeHighlight = () => {
164 |   if (targetElement && isHighlightEnabled()) {
165 |     const currentTransition = targetElement.style.transition
166 |     targetElement.classList.remove(HIGHLIGHT.CLASSES.TARGET_HIGHLIGHTED)
167 |     targetElement.classList.remove(HIGHLIGHT.CLASSES.TARGET_RELATIVE)
168 |     // Remove our transition when step is finished.
169 |     if (currentTransition.includes(HIGHLIGHT.TRANSITION)) {
170 |       setTimeout(() => {
171 |         targetElement.style.transition = currentTransition.replace(`, ${HIGHLIGHT.TRANSITION}`, '')
172 |       }, 0)
173 |     }
174 |   }
175 | }
176 | 
177 | const isButtonEnabled = (name: keyof EnabledButtons) => {
178 |   return params.value.enabledButtons.hasOwnProperty(name) ? params.value.enabledButtons[name] : true
179 | }
180 | 
181 | onMounted(createStep)
182 | 
183 | onUnmounted(removeHighlight)
184 | 
185 | </script>
186 | 
187 | <style lang="scss">
188 | @import 'v-step';
189 | </style>
190 | 


--------------------------------------------------------------------------------
/types/vue3-tour.d.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ComputedRef,
  3 |   Plugin,
  4 |   Ref,
  5 | } from 'vue';
  6 | 
  7 | import { Placement, Modifier } from '@popperjs/core'
  8 | 
  9 | export interface EnabledButtons {
 10 |   /**
 11 |    * @defaultValue true
 12 |    */
 13 |   buttonSkip: boolean;
 14 |   /**
 15 |    * @defaultValue true
 16 |    */
 17 |   buttonPrevious: boolean;
 18 |   /**
 19 |    * @defaultValue true
 20 |    */
 21 |   buttonNext: boolean;
 22 |   /**
 23 |    * @defaultValue true
 24 |    */
 25 |   buttonStop: boolean;
 26 | }
 27 | 
 28 | interface LabelButtons {
 29 |   /**
 30 |    * @defaultValue 'Skip tour'
 31 |    */
 32 |   buttonSkip: string;
 33 |   /**
 34 |    * @defaultValue 'Previous'
 35 |    */
 36 |   buttonPrevious: string;
 37 |   /**
 38 |    * @defaultValue 'Next'
 39 |    */
 40 |   buttonNext: string;
 41 |   /**
 42 |    * @defaultValue 'Finish'
 43 |    */
 44 |   buttonStop: string;
 45 | }
 46 | 
 47 | export interface EnabledNavigationKeys {
 48 |   /**
 49 |    * @defaultValue true
 50 |    */
 51 |   ESCAPE: boolean;
 52 |   /**
 53 |    * @defaultValue true
 54 |    */
 55 |   ARROW_RIGHT: boolean;
 56 |   /**
 57 |    * @defaultValue true
 58 |    */
 59 |   ARROW_LEFT: boolean;
 60 | }
 61 | 
 62 | type Callback = () => void;
 63 | type CallbackWithCurrentStep = (currentStep: number) => void;
 64 | 
 65 | /* {{{ Popper */
 66 | 
 67 | /**
 68 |  * Parameters of Popper element.
 69 |  * https://popper.js.org/docs/v1/
 70 |  */
 71 | export interface PopperParams {
 72 |   /**
 73 |    * Position of the box relatively to the target element.
 74 |    *
 75 |    * @defaultValue 'bottom'
 76 |    */
 77 |   placement?: Placement;
 78 | 
 79 |   /**
 80 |    * Vue Tour scrolls between each steps if set to true.
 81 |    *
 82 |    * @defaultValue true
 83 |    */
 84 |   enableScrolling?: boolean;
 85 | 
 86 |   /**
 87 |    * Highlights the element showcased by the current step
 88 |    *
 89 |    * @defaultValue false
 90 |    */
 91 |   highlight?: boolean;
 92 | 
 93 |   /**
 94 |    * Do not display buttons if they are set to false.
 95 |    */
 96 |   enabledButtons?: EnabledButtons;
 97 | 
 98 |   /**
 99 |    * community modifiers of popper.js
100 |    */
101 |   modifiers?: Modifier[];
102 | }
103 | 
104 | /* }}} */
105 | /* }}} */
106 | /* {{{ new components */
107 | /* {{{ v-step */
108 | 
109 | export type StepType = 'start' | 'previous' | 'next';
110 | 
111 | export interface Step {
112 |   /**
113 |    * Define the main element for this step.
114 |    * This is a DOM selector which should target the element.
115 |    */
116 |   target: string;
117 | 
118 |   /**
119 |    * The content of the text displayed to user for this step.
120 |    *
121 |    * If not defined a debug content is displayed.
122 |    */
123 |   content?: string;
124 | 
125 |   /**
126 |    * Define what is displayed in the header part of the step description.
127 |    */
128 |   header?: {
129 |     title?: string;
130 |   };
131 | 
132 |   /**
133 |    * If defined, a scroll animation is triggered to put the target element
134 |    * into the view.
135 |    * The duration in ms of the scroll is defined by this value.
136 |    *
137 |    * If the animation is triggered and this value is not set, its default
138 |    * value is 1000.
139 |    */
140 |   duration?: number;
141 | 
142 |   /**
143 |    * Active a scroll animation to put the target element into the view.
144 |    * The offset in px of the scroll relative to the element is defined by
145 |    * this value.
146 |    *
147 |    * @defaultValue 0
148 |    */
149 |   offset?: number;
150 | 
151 |   /**
152 |    * A callback which is called just before the step is displayed.
153 |    * The step is not laded until the promise is resolved.
154 |    */
155 |   before?: (type: StepType) => Promise<void>;
156 | 
157 |   /**
158 |    * Different parameters to configure the popper element.
159 |    *
160 |    */
161 |   params?: PopperParams;
162 | }
163 | 
164 | export interface VStepProps {
165 |   /**
166 |    * The step definition
167 |    */
168 |   step: Step;
169 | 
170 |   /**
171 |    * Highlights the element showcased by the step
172 |    *
173 |    * @defaultValue false
174 |    */
175 |   highlight?: boolean;
176 | 
177 |   /**
178 |    * Do not display buttons if they are set to false.
179 |    */
180 |   enabledButtons?: Partial<EnabledButtons>;
181 | 
182 |   /**
183 |    * If set to true, the tour is stopped if the target is not found.
184 |    *
185 |    * @defaultValue false
186 |    */
187 |   stopOnFail?: boolean;
188 | 
189 |   /**
190 |    * Called if the tour should be stopped (before the end or at the end)
191 |    */
192 |   stop: Callback;
193 | 
194 |   /**
195 |    * Called if the tour is finished
196 |    *
197 |    * The default value is the one defined by stop.
198 |    * @defaultValue stop()
199 |    * @wip Not used yet
200 |    */
201 |   finish?: Callback;
202 | 
203 |   /**
204 |    * Called if the skip action is called.
205 |    *
206 |    * The default value is the one defined by stop.
207 |    * @defaultValue stop()
208 |    * @wip Not used yet
209 |    */
210 |   skip?: Callback;
211 | 
212 |   /**
213 |    * Called if going to previous step.
214 |    *
215 |    *  @wip Not used yet
216 |    */
217 |   previousStep?: Callback;
218 | 
219 |   /**
220 |    * Called if going to next step.
221 |    *
222 |    *  @wip Not used yet
223 |    */
224 |   nextStep?: Callback;
225 | 
226 |   /**
227 |    * Display a mask
228 |    *
229 |    * @defaultValue false
230 |    * @wip Not used yet
231 |    */
232 |   displayMask?: boolean;
233 | 
234 |   /** @wip Not used yet */
235 |   isFirst?: boolean;
236 | 
237 |   /** @wip Not used yet */
238 |   isLast?: boolean;
239 | 
240 |   /**
241 |    * Customize the labels of the tour's buttons for this tep.
242 |    *
243 |    * @wip Not used yet
244 |    */
245 |   labels?: LabelButtons;
246 | 
247 |   /**
248 |    * Allows you to see logs from the component
249 |    *
250 |    * @defaultValue false
251 |    */
252 |   debug?: boolean;
253 | }
254 | 
255 | export declare const VStep: {
256 |   new(): {
257 |     $props: VStepProps;
258 |   };
259 | };
260 | 
261 | /* }}} */
262 | /* {{{ v-tour */
263 | 
264 | export interface VTourOptions {
265 |   /**
266 |    * Defines the timeout (in ms) before which the tour starts.
267 |    *
268 |    * @defaultValue 0
269 |    */
270 |   startTimeout?: number;
271 | 
272 |   /**
273 |    * Customize the labels of the tour's buttons.
274 |    */
275 |   labels?: LabelButtons;
276 | 
277 |   /**
278 |    * Do not display buttons if they are set to false.
279 |    */
280 |   enabledButtons?: EnabledButtons;
281 | 
282 |   /**
283 |    * Highlights the element showcased by the current step
284 |    *
285 |    * @defaultValue false
286 |    */
287 |   highlight?: boolean;
288 | 
289 |   /**
290 |    * If set to true you may use the ←, → and ESC keys to navigate through your tour.
291 |    *
292 |    * @defaultValue true
293 |    */
294 |   useKeyboardNavigation?: boolean;
295 | 
296 |   /**
297 |    * If set to true you may use given key to navigate through your tour.
298 |    */
299 |   enabledNavigationKeys?: EnabledNavigationKeys;
300 | 
301 |   /**
302 |    * Allows you to see logs from the component
303 |    *
304 |    * @defaultValue false
305 |    */
306 |   debug?: boolean;
307 | }
308 | 
309 | export interface VTourCallbacks {
310 |   /**
311 |    * The tour is started
312 |    */
313 |   onStart?: Callback;
314 | 
315 |   /**
316 |    * When goes to a previous step
317 |    */
318 |   onPreviousStep?: CallbackWithCurrentStep;
319 | 
320 |   /**
321 |    * When goes to a next step
322 |    */
323 |   onNextStep?: CallbackWithCurrentStep;
324 | 
325 |   /**
326 |    * When the tour is skipped
327 |    */
328 |   onSkip?: Callback;
329 | 
330 |   /**
331 |    * The tour is finished
332 |    */
333 |   onFinish?: Callback;
334 | 
335 |   /**
336 |    * The tour has been stopped (for example, when ESC key is pressed)
337 |    */
338 |   onStop?: Callback;
339 | }
340 | 
341 | export interface VTourProps {
342 |   /**
343 |    * Tour name.
344 |    * This is the identifier used to start it.
345 |    */
346 |   name: string;
347 | 
348 |   /**
349 |    * List of steps to run when the tour starts
350 |    * @defaultValue []
351 |    */
352 |   steps?: Step[];
353 | 
354 |   /**
355 |    * Tour options
356 |    *
357 |    * Read VTourOptions description to know default values.
358 |    */
359 |   options?: VTourOptions;
360 | 
361 |   /**
362 |    * Callbacks which are called when some event happens.
363 |    */
364 |   callbacks?: VTourCallbacks;
365 | }
366 | 
367 | export declare const VTour: {
368 |   new(): {
369 |     $props: VTourProps;
370 |   };
371 | };
372 | 
373 | /* {{{ vTour slot */
374 | 
375 | export interface VTourSlotProps {
376 |   currentStep: number;
377 |   steps: Step[];
378 |   previousStep: CallbackWithCurrentStep;
379 |   nextStep: CallbackWithCurrentStep;
380 |   stop: Callback;
381 |   skip: Callback;
382 |   finish: Callback;
383 |   isFirst: boolean;
384 |   isLast: boolean;
385 |   labels: LabelButtons;
386 |   enabledButtons: EnabledButtons;
387 |   highlight: boolean;
388 |   debug: boolean;
389 | }
390 | 
391 | export declare const VTourSlot: {
392 |   new(): {
393 |     $props: VTourSlotProps;
394 |   };
395 | };
396 | 
397 | /* }}} */
398 | /* }}} */
399 | /* {{{ new global Vue property: $tours */
400 | 
401 | export interface Tour {
402 |   /**
403 |    * Index of the current step.
404 |    */
405 |   currentStep: Ref<number>;
406 | 
407 |   /**
408 |    * Information about the current step.
409 |    */
410 |   step: ComputedRef<Step>;
411 | 
412 |   /**
413 |    * Options applied to the current step.
414 |    */
415 |   customOptions: ComputedRef<VTourOptions>;
416 | 
417 |   /**
418 |    * true if the tour is running.
419 |    */
420 |   isRunning: ComputedRef<boolean>;
421 | 
422 |   /**
423 |    * true if the current step is the first.
424 |    */
425 |   isFirst: ComputedRef<boolean>;
426 | 
427 |   /**
428 |    * true if the current step is the last.
429 |    */
430 |   isLast: ComputedRef<boolean>;
431 | 
432 |   /**
433 |    * Number of steps in the tour.
434 |    */
435 |   numberOfSteps: ComputedRef<number>;
436 | 
437 |   /* Methods */
438 | 
439 |   /**
440 |    * Starts the tour.
441 |    *
442 |    * @param startStep If defined, it starts at the given index
443 |    *
444 |    * @return a promise which will be rejected if the step's before
445 |    * callback throws
446 |    */
447 |   start(startStep?: string | number): Promise<void>;
448 | 
449 |   /**
450 |    * Navigates to the previous step.
451 |    * It does nothing if the tour is already at the first step.
452 |    *
453 |    * @return a promise which will be rejected if the step's before
454 |    * callback throws
455 |    */
456 |   previousStep(): Promise<void>;
457 | 
458 |   /**
459 |    * Navigates to the next step.
460 |    * It does nothing if the tour is already at the last step.
461 |    *
462 |    * @return a promise which will be rejected if the step's before
463 |    * callback throws
464 |    */
465 |   nextStep(): Promise<void>;
466 | 
467 |   /**
468 |    * Stops the tour
469 |    */
470 |   stop(): void;
471 | 
472 |   /**
473 |    * Skips the tour
474 |    */
475 |   skip(): void;
476 | 
477 |   /**
478 |    * Finishes the tour
479 |    */
480 |   finish(): void;
481 | }
482 | 
483 | declare module '@vue/runtime-core' {
484 |   interface ComponentCustomProperties {
485 |     $tours: Record<string, Tour>;
486 |   }
487 | 
488 |   function h(type: typeof VStep | 'v-step', props: VStepProps, children?: VNodeNormalizedChildren): VNode;
489 |   function h(type: typeof VTour | 'v-tour', props: VTourProps, children?: typeof VTourSlot): VNode;
490 | }
491 | 
492 | /* }}} */
493 | 
494 | declare const vue3Tour: Plugin;
495 | 
496 | export default vue3Tour;
497 | 


--------------------------------------------------------------------------------