Merge pull request #73 from rozsazoltan/main

feat: finish by exit and show/hide exit button
fatihsolhan · May 22, 2023 · 07da5ef · 07da5ef
2 parents 74729de + 73efe59
commit 07da5ef
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/docs/pages/3.props/2.options.md b/docs/pages/3.props/2.options.md
@@ -29,9 +29,11 @@ You can override `VOnboardingWrapper`'s options by passing options to `VOnboardi
       inline: 'center'
     }
   },
+  autoFinishByExit: true,
   hideButtons: {
     previous: false,
-    next: false
+    next: false,
+    exit: false
   },
   labels: {
     previousButton: 'Previous',
@@ -51,9 +53,11 @@ 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'    }` |
-| `hideButtons` | | Hide the `previous` or `next` Button|
+| `autoFinishByExit` | `Boolean` | `true` (Close `overlay` when click `exit` Button)
+| `hideButtons` | | Hide the `previous`, `next` or `exit` Button|
 | `hideButtons.previous` | `Boolean` | `false` |
 | `hideButtons.next` | `Boolean` | `false` |
+| `hideButtons.exit` | `Boolean` | `false` |
 | `labels` | | |
 | `labels.previousButton` | `String` | `Previous` |
 | `labels.nextButton` | `String` | `Next` |

diff --git a/src/components/VOnboardingStep.vue b/src/components/VOnboardingStep.vue
@@ -11,7 +11,7 @@
               v-if="step.content.title"
               class="v-onboarding-item__header-title"
             >{{ step.content.title }}</span>
-            <button @click="exit" class="v-onboarding-item__header-close">
+            <button v-if="isButtonVisible.exit" @click="exit" class="v-onboarding-item__header-close">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="h-4 w-4"
@@ -64,14 +64,15 @@ export default defineComponent({
     const show = ref(false)
 
     const state = inject(STATE_INJECT_KEY, {} as Ref<OnboardingState>)
-    const { step, isFirstStep, isLastStep, options, next, previous, exit, finish } = toRefs(state.value)
+    const { step, isFirstStep, isLastStep, options, next, previous, exit: stateExit, finish } = toRefs(state.value)
 
     const mergedOptions = computed(() => merge({}, options?.value, step.value.options))
 
     const isButtonVisible = computed(() => {
       return {
         previous: !mergedOptions.value.hideButtons?.previous,
-        next: !mergedOptions.value.hideButtons?.next
+        next: !mergedOptions.value.hideButtons?.next,
+        exit: !mergedOptions.value.hideButtons?.exit
       }
     })
 
@@ -103,6 +104,14 @@ export default defineComponent({
       }
     };
     watch(step, attachElement, { immediate: true })
+
+    const exit = () => {
+      stateExit.value()
+      if (mergedOptions.value?.autoFinishByExit) {
+        finish.value()
+      }
+    }
+
     return {
       stepElement,
       next,

diff --git a/src/types/VOnboardingWrapper.ts b/src/types/VOnboardingWrapper.ts
@@ -23,9 +23,11 @@ export interface VOnboardingWrapperOptions {
     enabled?: boolean
     options?: ScrollIntoViewOptions
   },
+  autoFinishByExit?: boolean
   hideButtons?: {
     previous?: boolean
     next?: boolean
+    exit?: boolean
   },
   labels?: {
     previousButton?: string
@@ -49,13 +51,15 @@ export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
       inline: 'center'
     }
   },
+  autoFinishByExit: true,
   labels: {
     previousButton: 'Previous',
     nextButton: 'Next',
     finishButton: 'Finish'
   },
   hideButtons: {
     previous: false,
-    next: false
+    next: false,
+    exit: false
   }
 }