feat: add an option to provide button labels for the default UI

resolves #44
fatihsolhan · Aug 28, 2022 · e5880e3 · e5880e3
1 parent f87e049
commit e5880e3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/docs/pages/3.props/2.options.md b/docs/pages/3.props/2.options.md
@@ -28,6 +28,11 @@ You can override `VOnboardingWrapper`'s options by passing options to `VOnboardi
       block: 'center',
       inline: 'center'
     }
+  },
+  labels: {
+    previousButton: 'Previous',
+    nextButton: 'Next',
+    finishButton: 'Finish'
   }
 }
 ```
@@ -42,6 +47,10 @@ You can override `VOnboardingWrapper`'s options by passing options to `VOnboardi
 | `scrollToStep` | | |
 | `scrollToStep.enabled` | `Boolean` | `true` |
 | `scrollToStep.options` | [Scroll Into View Options](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) | `{ behavior: 'smooth', block: 'center', inline: 'center'    }` |
+| `labels` | | |
+| `labels.previousButton` | `String` | `Previous` |
+| `labels.nextButton` | `String` | `Next` |
+| `labels.finishButton` | `String` | `Finish` |
 
 
 

diff --git a/src/components/VOnboardingStep.vue b/src/components/VOnboardingStep.vue
@@ -38,12 +38,12 @@
               type="button"
               @click="onPrevious"
               class="v-onboarding-btn-secondary"
-            >Previous</button>
+            >{{ buttonLabels.previous }}</button>
             <button
               @click="onNext"
               type="button"
               class="v-onboarding-btn-primary"
-            >{{ isLast ? 'Finish' : 'Next' }}</button>
+            >{{ isLast ? buttonLabels.finish : buttonLabels.next }}</button>
           </div>
         </div>
       </slot>
@@ -71,6 +71,13 @@ export default defineComponent({
     const isFirst = inject<ComputedRef<boolean>>('is-first-step')
     const isLast = inject<ComputedRef<boolean>>('is-last-step')
     const step = inject<ComputedRef<StepEntity>>('step', {} as ComputedRef<StepEntity>);
+    const buttonLabels = computed(() => {
+      return {
+        previous: mergedOptions.value?.labels?.previousButton,
+        next: mergedOptions.value?.labels?.nextButton,
+        finish: mergedOptions.value?.labels?.finishButton,
+      }
+    })
 
     const onNext = () => {
       beforeStepEnd();
@@ -132,7 +139,8 @@ export default defineComponent({
       step,
       isFirst,
       isLast,
-      exit
+      exit,
+      buttonLabels
     };
   },
 })

diff --git a/src/types/VOnboardingWrapper.ts b/src/types/VOnboardingWrapper.ts
@@ -23,6 +23,11 @@ export interface VOnboardingWrapperOptions {
     enabled?: boolean
     options?: ScrollIntoViewOptions
   }
+  labels?: {
+    previousButton?: string
+    nextButton?: string
+    finishButton?: string
+  }
 }
 
 export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
@@ -39,5 +44,10 @@ export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
       block: 'center',
       inline: 'center'
     }
+  },
+  labels: {
+    previousButton: 'Previous',
+    nextButton: 'Next',
+    finishButton: 'Finish'
   }
 }