Merge branch 'develop' of https://github.com/pulsardev/vue-tour into …

…develop
pulsardev · Feb 6, 2020 · 5c5f5d0 · 5c5f5d0
2 parents 81fa22f + 1a41b64
commit 5c5f5d0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,9 @@ The `target` property of each step can target a DOM element in any component of
         steps: [
           {
             target: '#v-step-0',  // We're using document.querySelector() under the hood
+            header: {
+              title: 'Get Started',
+            },
             content: `Discover <strong>Vue Tour</strong>!`
           },
           {
@@ -69,7 +72,7 @@ The `target` property of each step can target a DOM element in any component of
             target: '[data-v-step="2"]',
             content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
             params: {
-              placement: 'top'
+              placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
             }
           }
         ]

diff --git a/src/components/VStep.vue b/src/components/VStep.vue
@@ -15,10 +15,10 @@
 
     <slot name="actions">
       <div class="v-step__buttons">
-        <button @click.prevent="skip" v-if="!isLast" class="v-step__button v-step__button-skip">{{ labels.buttonSkip }}</button>
-        <button @click.prevent="previousStep" v-if="!isFirst" class="v-step__button v-step__button-previous">{{ labels.buttonPrevious }}</button>
-        <button @click.prevent="nextStep" v-if="!isLast" class="v-step__button v-step__button-next">{{ labels.buttonNext }}</button>
-        <button @click.prevent="finish" v-if="isLast" class="v-step__button v-step__button-stop">{{ labels.buttonStop }}</button>
+        <button @click.prevent="skip" v-if="!isLast && isButtonEnabled('buttonSkip')" class="v-step__button v-step__button-skip">{{ labels.buttonSkip }}</button>
+        <button @click.prevent="previousStep" v-if="!isFirst && isButtonEnabled('buttonPrevious')" class="v-step__button v-step__button-previous">{{ labels.buttonPrevious }}</button>
+        <button @click.prevent="nextStep" v-if="!isLast && isButtonEnabled('buttonNext')" class="v-step__button v-step__button-next">{{ labels.buttonNext }}</button>
+        <button @click.prevent="finish" v-if="isLast && isButtonEnabled('buttonStop')" class="v-step__button v-step__button-stop">{{ labels.buttonStop }}</button>
       </div>
     </slot>
 
@@ -68,6 +68,9 @@ export default {
     labels: {
       type: Object
     },
+    enabledButtons: {
+      type: Object
+    },
     highlight: {
       type: Boolean
     },
@@ -86,6 +89,7 @@ export default {
       return {
         ...DEFAULT_STEP_OPTIONS,
         ...{ highlight: this.highlight }, // Use global tour highlight setting first
+        ...{ enabledButtons: this.enabledButtons },
         ...this.step.params // Then use local step parameters if defined
       }
     }
@@ -166,6 +170,9 @@ export default {
           }, 0)
         }
       }
+    },
+    isButtonEnabled (name) {
+      return this.params.enabledButtons.hasOwnProperty(name) ? this.params.enabledButtons[name] : true
     }
   },
   mounted () {

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
@@ -11,6 +11,7 @@
       :is-first="isFirst"
       :is-last="isLast"
       :labels="customOptions.labels"
+      :enabled-buttons="customOptions.enabledButtons"
       :highlight="customOptions.highlight"
     >
       <!--Default slot {{ currentStep }}-->
@@ -26,6 +27,7 @@
         :is-first="isFirst"
         :is-last="isLast"
         :labels="customOptions.labels"
+        :enabled-buttons="customOptions.enabledButtons"
         :highlight="customOptions.highlight"
         :stop-on-fail="customOptions.stopOnTargetNotFound"
         @targetNotFound="$emit('targetNotFound', $event)"

diff --git a/src/shared/constants.js b/src/shared/constants.js
@@ -15,6 +15,12 @@ export const DEFAULT_OPTIONS = {
     buttonNext: 'Next',
     buttonStop: 'Finish'
   },
+  enabledButtons: {
+    buttonSkip: true,
+    buttonPrevious: true,
+    buttonNext: true,
+    buttonStop: true
+  },
   startTimeout: 0,
   useKeyboardNavigation: true
 }
@@ -34,6 +40,7 @@ export const HIGHLIGHT = {
 export const DEFAULT_STEP_OPTIONS = {
   enableScrolling: true,
   highlight: DEFAULT_OPTIONS.highlight, // By default use the global tour setting
+  enabledButtons: DEFAULT_OPTIONS.enabledButtons,
   modifiers: {
     arrow: {
       element: '.v-step__arrow'