feat(steps): add the possibility to change the text of the buttons th…

…rough the tour options
pulsardev · Sep 2, 2018 · 2ead09e · 2ead09e
1 parent f5f3e00
commit 2ead09e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/demo/src/components/MyTour.vue b/demo/src/components/MyTour.vue
@@ -17,6 +17,7 @@
             :stop="tour.stop"
             :is-first="tour.isFirst"
             :is-last="tour.isLast"
+            :labels="tour.labels"
           >
             <template v-if="tour.currentStep === 2">
               <div slot="actions">
@@ -77,7 +78,7 @@ export default {
 
     // A dynamically added onStop callback
     this.callbacks.onStop = () => {
-      document.querySelector('#v-step-0').scrollIntoView({behavior: 'smooth'})
+      document.querySelector('#v-step-0').scrollIntoView({ behavior: 'smooth' })
     }
   },
   methods: {

diff --git a/package-lock.json b/package-lock.json
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="stop" v-if="!isLast" class="v-step__button" v-text="textSkip"></button>
-        <button @click.prevent="previousStep" v-if="!isFirst" class="v-step__button" v-text="textPrevious"></button>
-        <button @click.prevent="nextStep" v-if="!isLast" class="v-step__button" v-text="textNext"></button>
-        <button @click.prevent="stop" v-if="isLast" class="v-step__button" v-text="textEnd"></button>
+        <button @click.prevent="stop" v-if="!isLast" class="v-step__button">{{ labels.buttonSkip }}</button>
+        <button @click.prevent="previousStep" v-if="!isFirst" class="v-step__button">{{ labels.buttonPrevious }}</button>
+        <button @click.prevent="nextStep" v-if="!isLast" class="v-step__button">{{ labels.buttonNext }}</button>
+        <button @click.prevent="stop" v-if="isLast" class="v-step__button">{{ labels.buttonStop }}</button>
       </div>
     </slot>
 
@@ -52,13 +52,14 @@ export default {
     },
     isLast: {
       type: Boolean
+    },
+    labels: {
+      type: Object
     }
   },
   data () {
     return {
-      hash: sum(this.step.target),
-      /* eslint-disable vue/no-reserved-keys */
-      _popper: null
+      hash: sum(this.step.target)
     }
   },
   computed: {
@@ -77,7 +78,7 @@ export default {
       // console.log('[Vue Tour] The target element ' + this.step.target + ' of .v-step[id="' + this.hash + '"] is:', targetElement)
 
       if (targetElement) {
-        if (this.params.scroll) {
+        if (this.params.enableScrolling) {
           let jumpOptions = {
             duration: this.step.duration || 1000,
             offset: this.step.offset || 0,
@@ -89,7 +90,7 @@ export default {
         }
 
         /* eslint-disable no-new */
-        this._data._popper = new Popper(
+        new Popper(
           targetElement,
           this.$refs['v-step-' + this.hash],
           this.params

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
@@ -8,6 +8,7 @@
       :stop="stop"
       :is-first="isFirst"
       :is-last="isLast"
+      :labels="customOptions.labels"
     >
       <!--Default slot {{ currentStep }}-->
       <v-step
@@ -20,10 +21,7 @@
         :stop="stop"
         :is-first="isFirst"
         :is-last="isLast"
-        :text-skip="customOptions.text.skip"
-        :text-previous="customOptions.text.previous"
-        :text-next="customOptions.text.next"
-        :text-end="customOptions.text.end"
+        :labels="customOptions.labels"
       >
         <!--<div v-if="index === 2" slot="actions">
           <a @click="nextStep">Next step</a>

diff --git a/src/shared/constants.js b/src/shared/constants.js
@@ -8,17 +8,17 @@ export const DEFAULT_CALLBACKS = {
 export const DEFAULT_OPTIONS = {
   useKeyboardNavigation: true,
   startTimeout: 0,
-  text: {
-    skip: 'Skip tour',
-    previous: 'Previous',
-    next: 'Next',
-    end: 'Finish'
+  labels: {
+    buttonSkip: 'Skip tour',
+    buttonPrevious: 'Previous',
+    buttonNext: 'Next',
+    buttonStop: 'Finish'
   }
 }
 
 export const DEFAULT_STEP_OPTIONS = {
   placement: 'bottom',
-  scroll: true,
+  enableScrolling: true,
   modifiers: {
     arrow: {
       element: '.v-step__arrow'