Skip to content

Commit cfb0a06

Browse files
f820602hf820602h
committed
[feature] when default slot is not used, the tooltip will automatically center itself, becoming a step without highlighted elements.
1 parent 43face2 commit cfb0a06

File tree

14 files changed

+345
-237
lines changed

14 files changed

+345
-237
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ dist
1212
dist-ssr
1313
*.local
1414
doc/.vitepress/cache/*
15+
playground
16+
coverage
1517

1618
# Editor directories and files
1719
.vscode/*

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ import { StagePlayScene } from 'vue-stage-play'
6969
</script>
7070

7171
<template>
72-
<StagePlayScene actName="liveDemo" :scene="1">
72+
<StagePlayScene :act-name="'liveDemo'" :scene="1">
7373
<template #default="slotProp">
7474
<div class="title">
7575
<!-- ... -->

‎doc/examples/basic-example.md

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<script setup>
2-
import { ref } from 'vue'
32
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from '../../src/index.ts'
43

54
const { action } = useStagePlay()
6-
75
</script>
86

97
# Basic Example
@@ -12,7 +10,6 @@ This example demonstrates a guided tour, covering 「Activation with useStagePla
1210

1311
```vue
1412
<script setup>
15-
import { ref } from 'vue'
1613
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'
1714
1815
const { action } = useStagePlay()
@@ -24,7 +21,7 @@ const { action } = useStagePlay()
2421
<button @click="action('basic')">Start</button>
2522
2623
<StagePlayScene
27-
:actName="'basic'"
24+
:act-name="'basic'"
2825
:scene="1"
2926
:voice-over-title="'Step1'"
3027
:voice-over-content="'Open the door of the refrigerator.'"
@@ -33,7 +30,7 @@ const { action } = useStagePlay()
3330
</StagePlayScene>
3431
3532
<StagePlayScene
36-
:actName="'basic'"
33+
:act-name="'basic'"
3734
:scene="2"
3835
:voice-over-title="'Step2'"
3936
:voice-over-content="'Place the elephant inside the refrigerator.'"
@@ -42,13 +39,20 @@ const { action } = useStagePlay()
4239
</StagePlayScene>
4340
4441
<StagePlayScene
45-
:actName="'basic'"
42+
:act-name="'basic'"
4643
:scene="3"
4744
:voice-over-title="'Step3'"
4845
:voice-over-content="'Close the door of the refrigerator.'"
4946
>
5047
<h3>Step3</h3>
5148
</StagePlayScene>
49+
50+
<StagePlayScene
51+
:act-name="'basic'"
52+
:scene="4"
53+
:voice-over-title="'Success!'"
54+
:voice-over-content="'You place an elephant into a refrigerator.'"
55+
/>
5256
</StagePlaySpotlight>
5357
</template>
5458
```
@@ -59,21 +63,23 @@ const { action } = useStagePlay()
5963

6064

6165
<StagePlaySpotlight>
62-
<StagePlayScene :actName="'basic'" :scene="1" :voice-over-title="'Step1'" :voice-over-content="'Open the door of the refrigerator.'" >
66+
<StagePlayScene :act-name="'basic'" :scene="1" :voice-over-title="'Step1'" :voice-over-content="'Open the door of the refrigerator.'" >
6367

6468
### Step1
6569

6670
</StagePlayScene>
6771

68-
<StagePlayScene :actName="'basic'" :scene="2" :voice-over-title="'Step2'" :voice-over-content="'Place the elephant inside the refrigerator.'" >
72+
<StagePlayScene :act-name="'basic'" :scene="2" :voice-over-title="'Step2'" :voice-over-content="'Place the elephant inside the refrigerator.'" >
6973

7074
### Step2
7175

7276
</StagePlayScene>
7377

74-
<StagePlayScene :actName="'basic'" :scene="3" :voice-over-title="'Step3'" :voice-over-content="'Close the door of the refrigerator.'" >
78+
<StagePlayScene :act-name="'basic'" :scene="3" :voice-over-title="'Step3'" :voice-over-content="'Close the door of the refrigerator.'" >
7579

7680
### Step3
7781

7882
</StagePlayScene>
83+
84+
<StagePlayScene :act-name="'basic'" :scene="4" :voice-over-title="'Success!'" :voice-over-content="'You place an elephant into a refrigerator.'" />
7985
</StagePlaySpotlight>

‎doc/examples/event-hooks.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function deactivated({ currentActName, currentScene}) {
6060
<button @click="action('event')">Start</button>
6161
6262
<StagePlayScene
63-
:actName="'event'"
63+
:act-name="'event'"
6464
:scene="1"
6565
:voice-over-title="'Step1'"
6666
:voice-over-content="'Open the door of the refrigerator.'"
@@ -84,19 +84,19 @@ function deactivated({ currentActName, currentScene}) {
8484

8585

8686
<StagePlaySpotlight>
87-
<StagePlayScene :actName="'event'" :scene="1" :voice-over-title="'Step1'" :voice-over-content="'Open the door of the refrigerator.'" :on-before-cut="beforeCut" :on-after-cut="afterCut" :on-activated="activated" :on-deactivated="deactivated" >
87+
<StagePlayScene :act-name="'event'" :scene="1" :voice-over-title="'Step1'" :voice-over-content="'Open the door of the refrigerator.'" :on-before-cut="beforeCut" :on-after-cut="afterCut" :on-activated="activated" :on-deactivated="deactivated" >
8888

8989
### Step1
9090

9191
</StagePlayScene>
9292

93-
<StagePlayScene :actName="'event'" :scene="2" :voice-over-title="'Step2'" :voice-over-content="'Place the elephant inside the refrigerator.'" :on-before-cut="beforeCut" :on-after-cut="afterCut" :on-activated="activated" :on-deactivated="deactivated" >
93+
<StagePlayScene :act-name="'event'" :scene="2" :voice-over-title="'Step2'" :voice-over-content="'Place the elephant inside the refrigerator.'" :on-before-cut="beforeCut" :on-after-cut="afterCut" :on-activated="activated" :on-deactivated="deactivated" >
9494

9595
### Step2
9696

9797
</StagePlayScene>
9898

99-
<StagePlayScene :actName="'event'" :scene="3" :voice-over-title="'Step3'" :voice-over-content="'Close the door of the refrigerator.'" :on-before-cut="beforeCut" :on-after-cut="afterCut" :on-activated="activated" :on-deactivated="deactivated" >
99+
<StagePlayScene :act-name="'event'" :scene="3" :voice-over-title="'Step3'" :voice-over-content="'Close the door of the refrigerator.'" :on-before-cut="beforeCut" :on-after-cut="afterCut" :on-activated="activated" :on-deactivated="deactivated" >
100100

101101
### Step3
102102

‎doc/examples/nested-example.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
1414
<template>
1515
<StagePlaySpotlight>
1616
<StagePlayScene
17-
:actName="'basic'"
17+
:act-name="'basic'"
1818
:scene="1"
1919
:voice-over-title="'Card'"
2020
:voice-over-content="'This is a card.'"
@@ -23,7 +23,7 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
2323
<template #default="scopedProps">
2424
<div class="card">
2525
<StagePlayScene
26-
:actName="'basic'"
26+
:act-name="'basic'"
2727
:scene="2"
2828
:voice-over-title="'Title'"
2929
:voice-over-content="'This is title.'"
@@ -33,7 +33,7 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
3333
</StagePlayScene>
3434
3535
<StagePlayScene
36-
:actName="'basic'"
36+
:act-name="'basic'"
3737
:scene="3"
3838
:voice-over-title="'Content'"
3939
:voice-over-content="'This is content.'" :voice-over-placement="'right'"
@@ -52,19 +52,19 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
5252
```
5353

5454
<StagePlaySpotlight>
55-
<StagePlayScene style="display: flex; width: 300px" :actName="'basic'" :scene="1" :voice-over-title="'Card'" :voice-over-content="'This is a card.'" :voice-over-placement="'right'" >
55+
<StagePlayScene style="display: flex; width: 300px" :act-name="'basic'" :scene="1" :voice-over-title="'Card'" :voice-over-content="'This is a card.'" :voice-over-placement="'right'" >
5656

5757
<template #default="scopedProps">
5858

5959
<div class="card" style="width: 300px; padding: 20px 20px 8px 20px; background: white; color: #292929; border-radius: 8px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;">
6060

61-
<StagePlayScene :actName="'basic'" :scene="2" :voice-over-title="'Title'" :voice-over-content="'This is title.'" :voice-over-placement="'right'" >
61+
<StagePlayScene :act-name="'basic'" :scene="2" :voice-over-title="'Title'" :voice-over-content="'This is title.'" :voice-over-placement="'right'" >
6262

6363
<h3 style="margin: 0">Vue Stage Play</h3>
6464

6565
</StagePlayScene>
6666

67-
<StagePlayScene :actName="'basic'" :scene="3" :voice-over-title="'Content'" :voice-over-content="'This is content.'" :voice-over-placement="'right'" >
67+
<StagePlayScene :act-name="'basic'" :scene="3" :voice-over-title="'Content'" :voice-over-content="'This is content.'" :voice-over-placement="'right'" >
6868

6969
<p>Designing a guided tour for your website with vue components, much like directing a stage play.</p>
7070

‎doc/examples/voice-over-customizing.md

Lines changed: 55 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
<script setup>
2-
import { ref } from 'vue'
32
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from '../../src/index.ts'
43

54
const { action } = useStagePlay()
6-
7-
const placement = ref("top")
8-
const align = ref("start")
9-
105
</script>
116

127
# Voice Over Customizing
@@ -72,7 +67,6 @@ This example demonstrates the utilization of a customized tooltip.
7267

7368
```vue [App.vue]
7469
<script setup>
75-
import { ref } from 'vue'
7670
import MyVoiceOver from "./components/MyVoiceOver"
7771
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'
7872
@@ -84,7 +78,7 @@ const { action } = useStagePlay()
8478
<h2>How to place an giraffe into a refrigerator?</h2>
8579
<button @click="action('basic')">Start</button>
8680
87-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="1">
81+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="1">
8882
<h3>Step1</h3>
8983
9084
<template #voiceOver="scopedProps">
@@ -100,7 +94,7 @@ const { action } = useStagePlay()
10094
</template>
10195
</StagePlayScene>
10296
103-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="2">
97+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="2">
10498
<h3>Step2</h3>
10599
106100
<template #voiceOver="scopedProps">
@@ -116,7 +110,7 @@ const { action } = useStagePlay()
116110
</template>
117111
</StagePlayScene>
118112
119-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="3">
113+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="3">
120114
<h3>Step3</h3>
121115
122116
<template #voiceOver="scopedProps">
@@ -132,7 +126,7 @@ const { action } = useStagePlay()
132126
</template>
133127
</StagePlayScene>
134128
135-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="4">
129+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="4">
136130
<h3>Step4</h3>
137131
138132
<template #voiceOver="scopedProps">
@@ -147,6 +141,20 @@ const { action } = useStagePlay()
147141
/>
148142
</template>
149143
</StagePlayScene>
144+
145+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="5">
146+
<template #voiceOver="scopedProps">
147+
<MyVoiceOver
148+
:title="'Success!'"
149+
:content="'You place an giraffe into a refrigerator.'"
150+
:has-prev-scene="scopedProps.hasPrevScene"
151+
:has-next-scene="scopedProps.hasNextScene"
152+
@prev="scopedProps.prevScene()"
153+
@next="scopedProps.nextScene()"
154+
@done="scopedProps.cut()"
155+
/>
156+
</template>
157+
</StagePlayScene>
150158
</StagePlaySpotlight>
151159
</template>
152160
```
@@ -158,7 +166,7 @@ const { action } = useStagePlay()
158166
<button class="btn" style="background: #34495e; color: white; border-radius: 4px; padding: 2px 12px" @click="action('voiceOverCustomizing')">Start</button>
159167

160168
<StagePlaySpotlight>
161-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="1" >
169+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="1" >
162170

163171
### Step1
164172

@@ -194,7 +202,7 @@ const { action } = useStagePlay()
194202
</template>
195203
</StagePlayScene>
196204

197-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="2" >
205+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="2" >
198206

199207
### Step2
200208

@@ -230,7 +238,7 @@ const { action } = useStagePlay()
230238
</template>
231239
</StagePlayScene>
232240

233-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="3" >
241+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="3" >
234242

235243
### Step3
236244

@@ -266,7 +274,7 @@ const { action } = useStagePlay()
266274
</template>
267275
</StagePlayScene>
268276

269-
<StagePlayScene :actName="'voiceOverCustomizing'" :scene="4" >
277+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="4" >
270278

271279
### Step4
272280

@@ -301,6 +309,39 @@ const { action } = useStagePlay()
301309
</div>
302310
</template>
303311
</StagePlayScene>
312+
313+
<StagePlayScene :act-name="'voiceOverCustomizing'" :scene="5">
314+
<template #voiceOver="scopedProps">
315+
<div class="demo-card">
316+
<button
317+
class="btn"
318+
:disabled="!scopedProps.hasPrevScene"
319+
@click="scopedProps.prevScene()"
320+
>
321+
←
322+
</button>
323+
<div class="content">
324+
<h3 class="title">Success!</h3>
325+
<p>You place an giraffe into a refrigerator.</p>
326+
</div>
327+
<button
328+
v-show="scopedProps.hasNextScene"
329+
class="btn"
330+
:disabled="!scopedProps.hasNextScene"
331+
@click="scopedProps.nextScene()"
332+
>
333+
→
334+
</button>
335+
<button
336+
v-show="!scopedProps.hasNextScene"
337+
class="btn"
338+
@click="scopedProps.cut()"
339+
>
340+
X
341+
</button>
342+
</div>
343+
</template>
344+
</StagePlayScene>
304345
</StagePlaySpotlight>
305346

306347
<style scoped>

‎doc/examples/voice-over-placement.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const align = ref("start")
3030
<button @click="action('voiceOverPlacement')">Start</button>
3131
3232
<StagePlayScene
33-
:actName="'voiceOverPlacement'"
33+
:act-name="'voiceOverPlacement'"
3434
:scene="1"
3535
:allow-interact="true"
3636
:voice-over-auto-placement="false"
@@ -62,7 +62,7 @@ const align = ref("start")
6262

6363

6464
<StagePlaySpotlight>
65-
<StagePlayScene :actName="'voiceOverPlacement'" :scene="1" :allow-interact="true" :voice-over-auto-placement="false" :voice-over-placement="placement" :voice-over-align="align" >
65+
<StagePlayScene :act-name="'voiceOverPlacement'" :scene="1" :allow-interact="true" :voice-over-auto-placement="false" :voice-over-placement="placement" :voice-over-align="align" >
6666

6767
<div style="display: flex; align-items: center; gap: 12px;">
6868
<p>Placement:</p>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy