fix(component): Hide Previous button on #actions overwrite #25

Author: GlobalHive

docs/guide/methods.md

@@ -144,7 +144,7 @@ The `nextStep();` method is used to move to the next step in the tour.
   <div>
     ...
     <VTour :steps="steps" autoStart>
-        <template #actions="{ nextStep, prevStep, endTour }">
+        <template #actions="{ nextStep, prevStep, endTour, step }">
             <button type="button" @click.prevent="nextStep">Next Step</button>
         </template>
     </VTour>

docs/guide/props.md

@@ -4,12 +4,13 @@
 VueJS Tour is written for Vue 3. There are no plans to support Vue 2.x
 :::
 
-|     Prop     |   Type    |   Default   | Required | Description                                                                 |
-|:------------:|:---------:|:-----------:|:--------:|-----------------------------------------------------------------------------|
-|   `steps`    |  `Array`  | `undefined` |  `true`  | An array of steps to be used in the tour.                                   |
-| `autoStart`  | `Boolean` |   `false`   | `false`  | If `true`, the tour will start automatically when the component is mounted. |
-| `startDelay` | `Number`  |     `0`     | `false`  | If set, the tour will start after x miliseconds.                            |
-| `highlight`  | `Boolean` |   `false`   | `false`  | If `true`, the target will get highlighted.                                 |
+|     Prop      |   Type    |                            Default                             | Required | Description                                                                 |
+|:-------------:|:---------:|:--------------------------------------------------------------:|:--------:|-----------------------------------------------------------------------------|
+|    `steps`    |  `Array`  |                          `undefined`                           |  `true`  | An array of steps to be used in the tour.                                   |
+|  `autoStart`  | `Boolean` |                            `false`                             | `false`  | If `true`, the tour will start automatically when the component is mounted. |
+| `startDelay`  | `Number`  |                              `0`                               | `false`  | If set, the tour will start after x miliseconds.                            |
+|  `highlight`  | `Boolean` |                            `false`                             | `false`  | If `true`, the target will get highlighted.                                 |
+| `buttonLabel` | `Object`  | `{ next: "Next", prev: "Back", finish: "Finish", skip: "Skip"}` | `false`  | The labels used for the buttons.                                            |
 
 ## Example
 

src/components/VTour.vue

@@ -3,10 +3,10 @@
     <slot name="content" v-bind="{ step }">
       <div v-html="step.getCurrentStep.content"></div>
     </slot>
-    <slot name="actions" v-bind="{ endTour, nextStep, prevStep }">
+    <slot name="actions" v-bind="{ endTour, nextStep, prevStep, step }">
       <div class="vjt-actions">
         <button type="button" @click.prevent="endTour">Skip</button>
-        <button v-if="step.currentStep > 0" type="button" @click.prevent="prevStep">Back</button>
+        <button v-if="step.currentStep > 0" type="button" v-text="props.buttonLabels.prev" @click.prevent="prevStep"></button>
         <button type="button" v-text="getNextText" @click.prevent="nextStep"></button>
       </div>
     </slot>
@@ -34,7 +34,7 @@ const maxSteps = computed(() => {
   return props.steps.length - 1;
 });
 const getNextText = computed(() => {
-  return step.currentStep === maxSteps.value ? "Finish" : "Next";
+  return step.currentStep === maxSteps.value ? props.buttonLabels.finish : props.buttonLabels.next;
 });
 
 const props = defineProps({
@@ -53,7 +53,18 @@ const props = defineProps({
   highlight: {
     type: Boolean,
     default: false
-  }
+  },
+  buttonLabels: {
+    type: Object,
+    default: () => {
+      return {
+        next: "Next",
+        prev: "Back",
+        finish: "Finish",
+        skip: "Skip"
+      };
+    }
+  },
 });
 const emit = defineEmits(["onTourStart", "onTourEnd"]);
 defineExpose({