[feature] when default slot is not used, the tooltip will automatical…

…ly center itself, becoming a step without highlighted elements.
f820602h · Oct 5, 2023 · cfb0a06 · cfb0a06
1 parent 43face2
commit cfb0a06
Show file tree

Hide file tree

Showing 14 changed files with 345 additions and 237 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 doc/.vitepress/cache/*
+playground
+coverage
 
 # Editor directories and files
 .vscode/*

diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ import { StagePlayScene } from 'vue-stage-play'
 </script>
 
 <template>
-  <StagePlayScene actName="liveDemo" :scene="1">
+  <StagePlayScene :act-name="'liveDemo'" :scene="1">
     <template #default="slotProp">
       <div class="title">
         <!-- ... -->

diff --git a/doc/examples/basic-example.md b/doc/examples/basic-example.md
@@ -1,9 +1,7 @@
 <script setup>
-import { ref } from 'vue'
 import { StagePlaySpotlight, StagePlayScene, useStagePlay } from '../../src/index.ts'
 
 const { action } = useStagePlay()
-
 </script>
 
 # Basic Example
@@ -12,7 +10,6 @@ This example demonstrates a guided tour, covering 「Activation with useStagePla
 
 ```vue
 <script setup>
-import { ref } from 'vue'
 import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'
 
 const { action } = useStagePlay()
@@ -24,7 +21,7 @@ const { action } = useStagePlay()
     <button @click="action('basic')">Start</button>
 
     <StagePlayScene 
-      :actName="'basic'"
+      :act-name="'basic'"
       :scene="1"
       :voice-over-title="'Step1'"
       :voice-over-content="'Open the door of the refrigerator.'" 
@@ -33,7 +30,7 @@ const { action } = useStagePlay()
     </StagePlayScene>
 
     <StagePlayScene 
-      :actName="'basic'"
+      :act-name="'basic'"
       :scene="2"
       :voice-over-title="'Step2'"
       :voice-over-content="'Place the elephant inside the refrigerator.'" 
@@ -42,13 +39,20 @@ const { action } = useStagePlay()
     </StagePlayScene>
 
     <StagePlayScene 
-      :actName="'basic'"
+      :act-name="'basic'"
       :scene="3"
       :voice-over-title="'Step3'"
       :voice-over-content="'Close the door of the refrigerator.'" 
     >
       <h3>Step3</h3>
     </StagePlayScene>
+
+    <StagePlayScene
+      :act-name="'basic'"
+      :scene="4"
+      :voice-over-title="'Success!'"
+      :voice-over-content="'You place an elephant into a refrigerator.'"
+    />
   </StagePlaySpotlight>
 </template>
 ```
@@ -59,21 +63,23 @@ const { action } = useStagePlay()
 
 
 <StagePlaySpotlight>
-  <StagePlayScene :actName="'basic'" :scene="1" :voice-over-title="'Step1'" :voice-over-content="'Open the door of the refrigerator.'" >
+  <StagePlayScene :act-name="'basic'" :scene="1" :voice-over-title="'Step1'" :voice-over-content="'Open the door of the refrigerator.'" >
 
   ### Step1
 
   </StagePlayScene>
 
-  <StagePlayScene :actName="'basic'" :scene="2" :voice-over-title="'Step2'" :voice-over-content="'Place the elephant inside the refrigerator.'" >
+  <StagePlayScene :act-name="'basic'" :scene="2" :voice-over-title="'Step2'" :voice-over-content="'Place the elephant inside the refrigerator.'" >
 
   ### Step2
 
   </StagePlayScene>
 
-  <StagePlayScene :actName="'basic'" :scene="3" :voice-over-title="'Step3'" :voice-over-content="'Close the door of the refrigerator.'" >
+  <StagePlayScene :act-name="'basic'" :scene="3" :voice-over-title="'Step3'" :voice-over-content="'Close the door of the refrigerator.'" >
 
   ### Step3
 
   </StagePlayScene>
+
+  <StagePlayScene :act-name="'basic'" :scene="4" :voice-over-title="'Success!'" :voice-over-content="'You place an elephant into a refrigerator.'" />
 </StagePlaySpotlight>
diff --git a/doc/examples/event-hooks.md b/doc/examples/event-hooks.md
@@ -60,7 +60,7 @@ function deactivated({ currentActName, currentScene}) {
     <button @click="action('event')">Start</button>
 
     <StagePlayScene 
-      :actName="'event'"
+      :act-name="'event'"
       :scene="1"
       :voice-over-title="'Step1'"
       :voice-over-content="'Open the door of the refrigerator.'"
@@ -84,19 +84,19 @@ function deactivated({ currentActName, currentScene}) {
 
 
 <StagePlaySpotlight>
-  <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" >
+  <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" >
 
   ### Step1
 
   </StagePlayScene>
 
-  <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" >
+  <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" >
 
   ### Step2
 
   </StagePlayScene>
 
-  <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" >
+  <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" >
 
   ### Step3
 

diff --git a/doc/examples/nested-example.md b/doc/examples/nested-example.md
@@ -14,7 +14,7 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
 <template>
   <StagePlaySpotlight>
     <StagePlayScene 
-      :actName="'basic'"
+      :act-name="'basic'"
       :scene="1"
       :voice-over-title="'Card'"
       :voice-over-content="'This is a card.'"
@@ -23,7 +23,7 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
       <template #default="scopedProps">
         <div class="card">
           <StagePlayScene
-            :actName="'basic'"
+            :act-name="'basic'"
             :scene="2"
             :voice-over-title="'Title'"
             :voice-over-content="'This is title.'"
@@ -33,7 +33,7 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
           </StagePlayScene>
 
           <StagePlayScene
-            :actName="'basic'"
+            :act-name="'basic'"
             :scene="3"
             :voice-over-title="'Content'"
             :voice-over-content="'This is content.'" :voice-over-placement="'right'"
@@ -52,19 +52,19 @@ import { StagePlaySpotlight, StagePlayScene } from 'vue-stage-play'
 ```
 
 <StagePlaySpotlight>
-  <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'" >
+  <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'" >
 
   <template #default="scopedProps">
 
   <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;">
 
-  <StagePlayScene :actName="'basic'" :scene="2" :voice-over-title="'Title'" :voice-over-content="'This is title.'" :voice-over-placement="'right'" >
+  <StagePlayScene :act-name="'basic'" :scene="2" :voice-over-title="'Title'" :voice-over-content="'This is title.'" :voice-over-placement="'right'" >
 
   <h3 style="margin: 0">Vue Stage Play</h3>
 
   </StagePlayScene>
 
-  <StagePlayScene :actName="'basic'" :scene="3" :voice-over-title="'Content'" :voice-over-content="'This is content.'" :voice-over-placement="'right'" >
+  <StagePlayScene :act-name="'basic'" :scene="3" :voice-over-title="'Content'" :voice-over-content="'This is content.'" :voice-over-placement="'right'" >
 
   <p>Designing a guided tour for your website with vue components, much like directing a stage play.</p>
 

diff --git a/doc/examples/voice-over-customizing.md b/doc/examples/voice-over-customizing.md
@@ -1,12 +1,7 @@
 <script setup>
-import { ref } from 'vue'
 import { StagePlaySpotlight, StagePlayScene, useStagePlay } from '../../src/index.ts'
 
 const { action } = useStagePlay()
-
-const placement = ref("top")
-const align = ref("start")
-
 </script>
 
 # Voice Over Customizing
@@ -72,7 +67,6 @@ This example demonstrates the utilization of a customized tooltip.
 
 ```vue [App.vue]
 <script setup>
-import { ref } from 'vue'
 import MyVoiceOver from "./components/MyVoiceOver"
 import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'
 
@@ -84,7 +78,7 @@ const { action } = useStagePlay()
     <h2>How to place an giraffe into a refrigerator?</h2>
     <button @click="action('basic')">Start</button>
 
-    <StagePlayScene :actName="'voiceOverCustomizing'" :scene="1">
+    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="1">
       <h3>Step1</h3>
 
       <template #voiceOver="scopedProps">
@@ -100,7 +94,7 @@ const { action } = useStagePlay()
       </template>
     </StagePlayScene>
 
-    <StagePlayScene :actName="'voiceOverCustomizing'" :scene="2">
+    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="2">
       <h3>Step2</h3>
 
       <template #voiceOver="scopedProps">
@@ -116,7 +110,7 @@ const { action } = useStagePlay()
       </template>
     </StagePlayScene>
 
-    <StagePlayScene :actName="'voiceOverCustomizing'" :scene="3">
+    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="3">
       <h3>Step3</h3>
 
       <template #voiceOver="scopedProps">
@@ -132,7 +126,7 @@ const { action } = useStagePlay()
       </template>
     </StagePlayScene>
 
-    <StagePlayScene :actName="'voiceOverCustomizing'" :scene="4">
+    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="4">
       <h3>Step4</h3>
 
       <template #voiceOver="scopedProps">
@@ -147,6 +141,20 @@ const { action } = useStagePlay()
         />
       </template>
     </StagePlayScene>
+
+    <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="5">
+       <template #voiceOver="scopedProps">
+        <MyVoiceOver
+          :title="'Success!'"
+          :content="'You place an giraffe into a refrigerator.'"
+          :has-prev-scene="scopedProps.hasPrevScene"
+          :has-next-scene="scopedProps.hasNextScene"
+          @prev="scopedProps.prevScene()"
+          @next="scopedProps.nextScene()"
+          @done="scopedProps.cut()"
+        />
+      </template>
+    </StagePlayScene>
   </StagePlaySpotlight>
 </template>
 ```
@@ -158,7 +166,7 @@ const { action } = useStagePlay()
 <button class="btn" style="background: #34495e; color: white; border-radius: 4px; padding: 2px 12px" @click="action('voiceOverCustomizing')">Start</button>
 
 <StagePlaySpotlight>
-  <StagePlayScene :actName="'voiceOverCustomizing'" :scene="1" >
+  <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="1" >
 
   ### Step1
 
@@ -194,7 +202,7 @@ const { action } = useStagePlay()
   </template>
   </StagePlayScene>
 
-  <StagePlayScene :actName="'voiceOverCustomizing'" :scene="2" >
+  <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="2" >
 
   ### Step2
 
@@ -230,7 +238,7 @@ const { action } = useStagePlay()
   </template>
   </StagePlayScene>
 
-  <StagePlayScene :actName="'voiceOverCustomizing'" :scene="3" >
+  <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="3" >
 
   ### Step3
 
@@ -266,7 +274,7 @@ const { action } = useStagePlay()
   </template>
   </StagePlayScene>
 
-  <StagePlayScene :actName="'voiceOverCustomizing'" :scene="4" >
+  <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="4" >
 
   ### Step4
 
@@ -301,6 +309,39 @@ const { action } = useStagePlay()
     </div>
   </template>
   </StagePlayScene>
+
+  <StagePlayScene :act-name="'voiceOverCustomizing'" :scene="5">
+  <template #voiceOver="scopedProps">
+     <div class="demo-card">
+      <button
+        class="btn"
+        :disabled="!scopedProps.hasPrevScene"
+        @click="scopedProps.prevScene()"
+      >
+        ←
+      </button>
+      <div class="content">
+        <h3 class="title">Success!</h3>
+        <p>You place an giraffe into a refrigerator.</p>
+      </div>
+      <button
+        v-show="scopedProps.hasNextScene"
+        class="btn"
+        :disabled="!scopedProps.hasNextScene"
+        @click="scopedProps.nextScene()"
+      >
+        →
+      </button>
+      <button
+        v-show="!scopedProps.hasNextScene"
+        class="btn"
+        @click="scopedProps.cut()"
+      >
+        X
+      </button>
+    </div>
+  </template>
+  </StagePlayScene>
 </StagePlaySpotlight>
 
 <style scoped>

diff --git a/doc/examples/voice-over-placement.md b/doc/examples/voice-over-placement.md
@@ -30,7 +30,7 @@ const align = ref("start")
     <button @click="action('voiceOverPlacement')">Start</button>
 
     <StagePlayScene 
-      :actName="'voiceOverPlacement'"
+      :act-name="'voiceOverPlacement'"
       :scene="1"
       :allow-interact="true"
       :voice-over-auto-placement="false"
@@ -62,7 +62,7 @@ const align = ref("start")
 
 
 <StagePlaySpotlight>
-  <StagePlayScene :actName="'voiceOverPlacement'" :scene="1" :allow-interact="true" :voice-over-auto-placement="false" :voice-over-placement="placement" :voice-over-align="align" >
+  <StagePlayScene :act-name="'voiceOverPlacement'" :scene="1" :allow-interact="true" :voice-over-auto-placement="false" :voice-over-placement="placement" :voice-over-align="align" >
 
   <div style="display: flex; align-items: center; gap: 12px;">
     <p>Placement:</p>