Skip to content

Commit 4ad63a6

Browse files
GlobalHiveGlobalHive
committed
docs: Recreated documentation
1 parent c4e6201 commit 4ad63a6

17 files changed

Lines changed: 266 additions & 149 deletions

‎docs/.vitepress/config.ts‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ export default defineConfig({
77
themeConfig: {
88
logo: 'https://vuejs.org/images/logo.png',
99
nav: [
10-
{ text: 'Guide', link: '/' },
11-
{ text: 'Reference', link: '/' },
10+
{ text: 'Guide', link: '/guide/what-is-vuejs-tour' },
11+
{ text: 'Reference', link: '/reference/coming-soon' },
1212
{ text: '1.2.3', items: [
1313
{ text: 'Changelog', link: 'https://github.com/GlobalHive/vuejs-tour/blob/master/CHANGELOG.md' },
14+
{ text: 'Roadmap', link: '/guide/roadmap' },
1415
{ text: 'Issues', link: 'https://github.com/GlobalHive/vuejs-tour/issues' }]
1516
}
1617
],
@@ -32,18 +33,39 @@ export default defineConfig({
3233
{ text: 'Start Options', link: '/guide/start-options' },
3334
{ text: 'Highlight Target', link: '/guide/highlight-target' },
3435
{ text: 'Using a Backdrop', link: '/guide/using-a-backdrop' },
35-
{ text: 'Saving Progress', link: '/guide/using-a-backdrop' },
36-
{ text: 'Step Options', link: '/guide/step-options' },
36+
{ text: 'Hiding the Arrow', link: '/guide/hiding-the-arrow' },
37+
{ text: 'Tour Margin', link: '/guide/tour-margin' },
38+
{ text: 'Saving Progress', link: '/guide/saving-progress' },
3739
]
3840
},
3941
{
4042
text: 'Advanced',
4143
collapsed: false,
4244
items: [
45+
{ text: 'Skipping a Tour', link: '/guide/skipping-a-tour' },
46+
{ text: 'Button Labels', link: '/guide/button-labels' },
47+
{ text: 'Step Options', link: '/guide/step-options' },
4348
{ text: 'Multiple Tours', link: '/guide/multiple-tours' },
4449
]
50+
},
51+
{
52+
text: "What's next?",
53+
collapsed: false,
54+
items: [
55+
{ text: 'Roadmap', link: '/guide/roadmap' },
56+
{ text: 'Changelog', link: 'https://github.com/GlobalHive/vuejs-tour/blob/master/CHANGELOG.md' },
57+
]
4558
}
4659
],
60+
'/reference/': [
61+
{
62+
text: 'Reference',
63+
collapsed: false,
64+
items: [
65+
{ text: 'Coming Soon', link: '/reference/coming-soon' },
66+
]
67+
},
68+
],
4769
},
4870
socialLinks: [
4971
{ icon: 'github', link: 'https://github.com/GlobalHive/vuejs-tour' }

‎docs/api-examples.md‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎docs/guide/button-labels.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Button Labels
2+
To customize the labels of the buttons, you can use the `buttonLabels` prop in the `VTour` component.
3+
4+
## Using the `buttonLabels` prop
5+
6+
```vue
7+
<template>
8+
<VTour :steps="steps" autoStart :buttonLabels='{next: "➡", back: "⬅", done: "✓", skip: "↪"}'/> // [!code ++]
9+
<VTour :steps="steps" autoStart> // [!code --:8]
10+
<template #actions="{ lastStep, nextStep, endTour, _CurrentStep, getNextLabel, props }">
11+
<div class="vjt-actions">
12+
<button v-if="_CurrentStep.lastStep < _CurrentStep.currentStep" type="button" @click.prevent="lastStep()" v-text="props.buttonLabels?.back || 'Back'"></button>
13+
<button type="button" @click.prevent="nextStep()" v-text="getNextLabel"></button>
14+
</div>
15+
</template>
16+
</VTour>
17+
</template>
18+
```
19+
20+
## Customizing the action buttons
21+
You can also customize the action button labels by using the `actions` slot.
22+
23+
```vue
24+
<template>
25+
<VTour :steps="steps" autoStart :buttonLabels='{next: "➡", back: "⬅", done: "✓", skip: "↪"}'/> // [!code --]
26+
<VTour :steps="steps" autoStart> // [!code ++:9]
27+
<template #actions="{ lastStep, nextStep, endTour, _CurrentStep, getNextLabel, props }">
28+
<div class="vjt-actions">
29+
<button v-if="_CurrentStep.lastStep < _CurrentStep.currentStep" type="button" @click.prevent="lastStep()">⬅</button>
30+
<button v-if="!props.hideSkip" type="button" @click.prevent="endTour()">↪</button>
31+
<button type="button" @click.prevent="nextStep()">➡</button>
32+
</div>
33+
</template>
34+
</VTour>
35+
</template>
36+
```
37+
38+
The `VTour` component uses a computed property `getNextLabel` to determine the label of the `Next` button.
39+
```js
40+
const getNextLabel: ComputedRef<String> = computed(() => {
41+
if(_CurrentStep.currentStep === props.steps.length - 1) return props.buttonLabels?.done || 'Done';
42+
return props.buttonLabels?.next || 'Next';
43+
});
44+
```
45+
::: info
46+
The `nextStep` method will automatically call the `endTour` method when the last step is reached.
47+
:::

‎docs/guide/create-a-tour.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,5 +90,5 @@ That's it! You have successfully created a tour using the `vuejs-tour` package.
9090

9191
## What's next?
9292
- [Customization](./start-options)
93-
- [Reference](../reference/)
93+
- [Reference](../reference/coming-soon)
9494

‎docs/guide/hiding-the-arrow.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Hiding the Arrow
2+
3+
To hide the arrow, you can use the `hideArrow` prop in the `VTour` component.
4+
5+
```vue
6+
<script setup lang='ts'>
7+
// ...
8+
const steps = [...];
9+
</script>
10+
11+
<template>
12+
<VTour :steps="steps" autoStart backdrop/> // [!code --]
13+
<VTour :steps="steps" autoStart hideArrow/> // [!code ++]
14+
...
15+
</template>
16+
```
17+
18+
::: info
19+
By default, the arrow is displayed.
20+
:::

‎docs/guide/highlight-target.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Highlight Target
22
The `highlight` property is a boolean that represents whether the target should be highlighted or not.
33

4-
## Using `highlight` prop
4+
## Using the `highlight` prop
55
To enable the highlight effect, you can use the `highlight` prop in the `VTour` component.
66

77
```vue
@@ -11,11 +11,12 @@ To enable the highlight effect, you can use the `highlight` prop in the `VTour`
1111
</script>
1212
1313
<template>
14+
<VTour :steps="steps" ref="vTour" startDelay='1000'/> // [!code --]
1415
<VTour :steps="steps" autoStart highlight/> // [!code ++]
1516
...
1617
</template>
1718
```
1819

19-
::: tip
20+
::: info
2021
By default, highlighting is disabled.
2122
:::

‎docs/guide/multiple-tours.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ To switch between tours, you just switch the `tourSteps` and `tourName` values.
6565
</template>
6666
```
6767
Now everytime you call the `switchTour` function, the tour will switch between `tour1` and `tour2`.
68+
::: tip
69+
There's no need to call `stopTour` before switching tours, the single `VTour` component will handle that for you.
70+
:::
6871

6972
## Multiple Components
7073
You can create multiple `VTour` components with different steps and options.

‎docs/guide/roadmap.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Roadmap
2+
✔️ = Done
3+
🕔 = Postponed
4+
🚧 = In Progress
5+
6+
## 2.1.0 (2024-07-14) 🚧
7+
8+
### Features
9+
10+
* **VTour:** Adding `onBeforeStep` event
11+
* **VTour:** Adding `onAfterStep` event
12+
* **VTour:** Adding `showProgress` prop
13+
* **Step:** Adding `arrow️` option
14+
* **Step:** Adding `backdrop` option
15+
* **Step:** Adding `highligt` option
16+
* **Step:** Adding `onBefore` event
17+
* **Step:** Adding `onAfter` event
18+
19+
### Documentation
20+
21+
* **Documentation:** Adding referece pages 🚧
22+
23+
### Bug Fixes
24+
25+
Got anything? [Let me know!](https://github.com/GlobalHive/vuejs-tour/issues)
26+
27+
## 2.0.1 (2024-07-07) ✔️
28+
29+
### Breaking Changes
30+
31+
* **VTour:** Removed the plugin approach, switched to component import ✔️
32+
33+
### Features
34+
35+
* **VTour:** Adding [`margin`](./tour-margin) prop ✔️
36+
* **VTour:** Adding [`hideSkip`](./skipping-a-tour) prop ✔️
37+
* **VTour:** Adding [`hideArrow`](./hiding-the-arrow) prop ✔️
38+
* **VTour:** Adding Typescript ✔️
39+
* **VTour:** Complete rewrite of the component ✔️
40+
41+
### Bug Fixes
42+
43+
* **VTour:** Fixing the [`highlight`](./highlight-target) using document space ✔️
44+
* **VTour:** Fixing wrong [`saveToLocalStorage`](./saving-progress) checks ✔️
45+
46+
### Documentation
47+
48+
* **Documentation:** Added new examples ✔️
49+
* **Documentation:** Added new guide ✔️
50+
* **Documentation:** Added new Reference ✔️
51+
* **Documentation:** Switched to VitePress ✔️

‎docs/guide/saving-progress.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Saving Progress
2+
3+
You can save the progress of the tour in the local storage of the browser. This way, the user can continue the tour from where they left off.
4+
5+
## Using the `saveToLacalStorage` prop
6+
7+
To save the progress of the tour, you can use the `saveToLocalStorage` prop in the `VTour` component. This prop accepts a string value of `never`, `step` or `end`.
8+
9+
```vue
10+
<script setup lang='ts'>
11+
// ...
12+
const steps = [...];
13+
</script>
14+
15+
<template>
16+
<VTour :steps="steps" autoStart :margin="0"/> // [!code --]
17+
<VTour :steps="steps" autoStart saveToLocalStorage='step'/> // [!code ++]
18+
...
19+
</template>
20+
```
21+
22+
### `never`
23+
<u>No progress will be saved.</u> Even if the user has already completed the tour, it will start from the beginning.
24+
Which means that you are responsible for managing the progress of the tour.
25+
26+
### `step`
27+
The progress of the tour will be saved after each step. So, if the user has completed the first 3 steps and exits, the next time they open the browser, the tour will start from where they left off.
28+
29+
### `end`
30+
The progress of the tour will be saved only after the user has completed the tour. If the user exits the tour before completing it, the next time they open the browser, the tour will start from the beginning.
31+
::: info
32+
This is the default value of the `saveToLocalStorage` prop.
33+
:::

‎docs/guide/skipping-a-tour.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Skipping a Tour
2+
3+
The Skip button is displayed in the tour by default.
4+
You can hide it by customizing the action buttons or by using the `hideSkip` prop in the `VTour` component.
5+
6+
## Using the `hideSkip` prop
7+
To hide the Skip button, you can use the `hideSkip` prop in the `VTour` component.
8+
9+
```vue
10+
<script setup lang='ts'>
11+
// ...
12+
const steps = [...];
13+
</script>
14+
15+
<template>
16+
<VTour :steps="steps" autoStart saveToLocalStorage='step'/> // [!code --]
17+
<VTour :steps="steps" autoStart hideSkip/> // [!code ++]
18+
...
19+
</template>
20+
```
21+
22+
## Customizing the action buttons
23+
You can also customize the action buttons by using the `actions` slot.
24+
25+
```vue
26+
<template>
27+
<VTour :steps="steps" autoStart hideSkip/> // [!code --]
28+
<VTour :steps="steps" autoStart> // [!code ++:8]
29+
<template #actions="{ lastStep, nextStep, endTour, _CurrentStep, getNextLabel, props }">
30+
<div class="vjt-actions">
31+
<button v-if="_CurrentStep.lastStep < _CurrentStep.currentStep" type="button" @click.prevent="lastStep()" v-text="props.buttonLabels?.back || 'Back'"></button>
32+
<button type="button" @click.prevent="nextStep()" v-text="getNextLabel"></button>
33+
</div>
34+
</template>
35+
</VTour>
36+
</template>
37+
```
38+
39+
::: info
40+
The Skip button is displayed by default.
41+
:::

0 commit comments

Comments
 (0)