Skip to content

Commit fe406b1

Browse files
GlobalHiveGlobalHive
authored
Merge pull request #69 from GlobalHive/development
Development
2 parents 9b2d2c4 + c00c36c commit fe406b1

16 files changed

Lines changed: 407 additions & 175 deletions

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@ dist-ssr
2727

2828
# Vitepress
2929
docs/.vitepress/dist
30-
docs/.vitepress/cache
30+
docs/.vitepress/cache
31+
*.tgz

‎docs/.vitepress/config.ts‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default defineConfig({
1010
nav: [
1111
{ text: 'Guide', link: '/guide/what-is-vuejs-tour' },
1212
{ text: 'Reference', link: '/reference/coming-soon' },
13-
{ text: '1.2.3', items: [
13+
{ text: '2.1.1', items: [
1414
{ text: 'Changelog', link: 'https://github.com/GlobalHive/vuejs-tour/blob/master/CHANGELOG.md' },
1515
{ text: 'Roadmap', link: '/guide/roadmap' },
1616
{ text: 'Issues', link: 'https://github.com/GlobalHive/vuejs-tour/issues' }]
@@ -31,12 +31,26 @@ export default defineConfig({
3131
text: 'Customization',
3232
collapsed: false,
3333
items: [
34-
{ text: 'Start Options', link: '/guide/start-options' },
35-
{ text: 'Highlight Target', link: '/guide/highlight-target' },
36-
{ text: 'Using a Backdrop', link: '/guide/using-a-backdrop' },
37-
{ text: 'Hiding the Arrow', link: '/guide/hiding-the-arrow' },
38-
{ text: 'Tour Margin', link: '/guide/tour-margin' },
39-
{ text: 'Saving Progress', link: '/guide/saving-progress' },
34+
{ text: 'VTour Component', items:[
35+
{ text: 'Start Options', link: '/guide/start-options' },
36+
{ text: 'Highlight Target', link: '/guide/highlight-target' },
37+
{ text: 'Using a Backdrop', link: '/guide/using-a-backdrop' },
38+
{ text: 'Hiding the Arrow', link: '/guide/hiding-the-arrow' },
39+
{ text: 'Tour Margin', link: '/guide/tour-margin' },
40+
{ text: 'Saving Progress', link: '/guide/saving-progress' },
41+
{ text: 'Scroll to Element', link: '/guide/scroll-to-element' },
42+
]},
43+
{ text: 'Step Options', items:[
44+
{ text: 'The Step Type', link: '/guide/the-step-type' },
45+
{ text: 'Setting a Target', link: '/guide/setting-a-target' },
46+
{ text: 'Define the Content', link: '/guide/define-the-content' },
47+
{ text: 'Using Placement', link: '/guide/using-placement' },
48+
{ text: 'The onBefore Event', link: '/guide/the-onbefore-event' },
49+
{ text: 'The onAfter Event', link: '/guide/the-onafter-event' },
50+
{ text: 'Highlight Target', link: '/guide/step-highlight-target' },
51+
{ text: 'Using a Backdrop', link: '/guide/step-using-a-backdrop' },
52+
{ text: 'Scroll to Element', link: '/guide/step-scroll-to-element' },
53+
]},
4054
]
4155
},
4256
{
@@ -45,7 +59,6 @@ export default defineConfig({
4559
items: [
4660
{ text: 'Skipping a Tour', link: '/guide/skipping-a-tour' },
4761
{ text: 'Button Labels', link: '/guide/button-labels' },
48-
{ text: 'Step Options', link: '/guide/step-options' },
4962
{ text: 'Multiple Tours', link: '/guide/multiple-tours' },
5063
{
5164
text: 'Styling',

‎docs/guide/define-the-content.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Define the Content
2+
The `content` property is a string that represents the content of the step. The content can be any HTML content.
3+
4+
::: code-group
5+
```vue [Text as Content]
6+
<script setup>
7+
const steps = [{
8+
target: '[data-step=0]',
9+
content: 'Text Content'
10+
}];
11+
</script>
12+
```
13+
```vue [HTML as Content]
14+
<script setup>
15+
const steps = [{
16+
target: '[data-step=0]',
17+
content: '<b>Bold</b><br><i>Italic</i><br><u>Underline</u>'
18+
}];
19+
</script>
20+
```
21+
:::

‎docs/guide/roadmap.md‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
# Roadmap
22
✔️ = Done
3+
❌ = Declined
34
🕔 = Postponed
45
🚧 = In Progress
56

6-
## 2.2.0 (2024-08-13) 🚧
7+
8+
## 2.4.0 (TBA) 🚧
9+
10+
* **Step:** Adding `arrow️` option
11+
* **VTour:** Adding `showProgress` prop
12+
13+
## 2.2.0 (2024-08-13) ✔️
714

815
### Features
916

1017
* **VTour:** Adding `onTourStep` event ✔️
11-
* **VTour:** Adding `onBeforeStep` event ❌ (Changed to `onTourStep`)
12-
* **VTour:** Adding `onAfterStep` event ❌ (Changed to `onTourStep`)
13-
* **VTour:** Adding `showProgress` prop
18+
* **VTour:** Adding `onBeforeStep` event ❌ (Changed to `onTourStep`) ✔️
19+
* **VTour:** Adding `onAfterStep` event ❌ (Changed to `onTourStep`) ✔️
20+
* **VTour:** Adding `showProgress` prop ❌
1421
* **VTour:** Adding `noScroll` prop ✔️
15-
* **Step:** Adding `arrow️` option
16-
* **Step:** Adding `backdrop` option
17-
* **Step:** Adding `highligt` option
18-
* **Step:** Adding `onBefore` event
19-
* **Step:** Adding `onAfter` event
22+
* **Step:** Adding `arrow️` option ❌
23+
* **Step:** Adding `noScroll` option ✔️
24+
* **Step:** Adding `backdrop` option ✔️
25+
* **Step:** Adding `highlight` option ✔️
26+
* **Step:** Adding `onBefore` event ✔️
27+
* **Step:** Adding `onAfter` event ✔️
2028

2129
### Documentation
2230

‎docs/guide/scroll-to-element.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Scroll to Element
2+
3+
To disable scrolling, you can use the `noScroll` 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 saveToLocalStorage='step'/> // [!code --]
13+
<VTour :steps="steps" autoStart noScroll/> // [!code ++]
14+
...
15+
</template>
16+
```
17+
18+
::: info
19+
By default, scrolling is enabled.
20+
:::

‎docs/guide/setting-a-target.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Setting a Target
2+
The `target` property is a string that represents the target element to attach the step to. The value of the `target` property is a CSS selector that will be used to find the target element.
3+
4+
::: code-group
5+
```vue [Data as Target]
6+
<script setup>
7+
const steps = [{
8+
target: '[data-step=0]',
9+
content: 'Content'
10+
}];
11+
</script>
12+
13+
<template>
14+
<div data-step="0">Element</div>
15+
</template>
16+
```
17+
```vue [Class as Target]
18+
<script setup>
19+
const steps = [{
20+
target: '.class-of-element',
21+
content: 'Content'
22+
}];
23+
</script>
24+
25+
<template>
26+
<div class="class-of-element">Element</div>
27+
</template>
28+
```
29+
```vue [ID as Target]
30+
<script setup>
31+
const steps = [{
32+
target: '#id-of-element',
33+
content: 'Content'
34+
}];
35+
</script>
36+
37+
<template>
38+
<div id="id-of-element">Element</div>
39+
</template>
40+
```
41+
:::

‎docs/guide/step-highlight-target.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Highlight Target Option
2+
The `highlight` option is used to highlight the target element <u>per step</u>. This option is useful when you want to emphasize the target element.
3+
4+
## Using the `highlight` option
5+
To enable the highlight effect, you can set the `highlight` option in the `Step`.
6+
7+
```vue
8+
<script setup>
9+
const steps = [{
10+
target: '[data-step=0]',
11+
content: 'Text Content',
12+
highlight: true // [!code ++]
13+
}];
14+
</script>
15+
```
16+
<style>
17+
.custom-block.example {
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
22+
padding: 1rem;
23+
height: 16rem;
24+
background-color: var(--vp-c-bg-alt);
25+
text-align: center;
26+
}
27+
</style>
28+
<script setup>
29+
import VTour from '../../src/components/VTour.vue';
30+
import "../../src/style/style.scss";
31+
32+
const steps = [{ target: '[data-step="0"]', content: 'Target highlighted', highlight: true }];
33+
34+
</script>
35+
<VTour :steps="steps" autoStart saveToLocalStorage='never' noScroll/>
36+
37+
<div class="custom-block example">
38+
<p data-step="0">Target</p>
39+
</div>
40+
41+
::: info
42+
You can enable the highlight effect globally by setting the `highlight` prop in the `VTour` component.
43+
44+
[See Documentation](./highlight-target.md)
45+
:::

‎docs/guide/step-options.md‎

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

0 commit comments

Comments
 (0)