Merge pull request #9 from bahadirsofuoglu/dev

beforeMount feature completed
bahadirsofuoglu · Jun 16, 2022 · f5eee6f · f5eee6f
2 parents a8d1bd5 + 0847e87
commit f5eee6f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 19 deletions.
diff --git a/src/components/Wizard.vue b/src/components/Wizard.vue
@@ -73,11 +73,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, nextTick } from 'vue'
 import WizardStep from './WizardStep.vue'
 import { ButtonOption, Tab, Props } from '../types/wizard'
 
-const emit = defineEmits(['change', 'completeWizard'])
+const emit = defineEmits(['change', 'complete:wizard', 'updated:tabs'])
 
 const props: Props = defineProps({
   id: {
@@ -141,6 +141,10 @@ const props: Props = defineProps({
     type: Function,
     default: () => {}
   },
+  beforeMount: {
+    type: Function,
+    default: () => {}
+  },
   navigableTabs: {
     type: Boolean,
     default: false
@@ -210,33 +214,36 @@ const setDefaultValues = () => {
   emit('change', currentTabIndex)
 }
 
-const nextTab = () => {
+const nextTab = async () => {
   if (currentTabIndex === maxTabIndex) {
     completeWizard()
 
     return
   }
 
-  currentTabIndex = currentTabIndex + 1
+  const newTabIndex = currentTabIndex + 1
+  const oldTabIndex = currentTabIndex
 
-  setActiveIndex()
-  props.beforeChange()
+  emit('change', newTabIndex, oldTabIndex)
 
-  emit('change', currentTabIndex)
+  await props.beforeChange()
+
+  changeTab(newTabIndex)
 }
 
-const prevTab = () => {
+const prevTab = async () => {
   if (currentTabIndex === 0) {
     return
   }
 
-  currentTabIndex = currentTabIndex - 1
+  const newTabIndex = currentTabIndex - 1
+  const oldTabIndex = currentTabIndex
 
-  setActiveIndex()
+  emit('change', newTabIndex, oldTabIndex)
 
-  props.beforeChange()
+  await props.beforeChange()
 
-  emit('change', currentTabIndex)
+  changeTab(newTabIndex)
 }
 
 const setActiveIndex = () => {
@@ -248,22 +255,37 @@ const setActiveIndex = () => {
     tab.checked = index < currentTabIndex
     tab.active = index === currentTabIndex
   }
+
+  emit('updated:tabs', tabs, currentTabIndex)
 }
 
 const completeWizard = () => {
-  emit('completeWizard', currentTabIndex)
+  const newTabIndex = currentTabIndex
+  const oldTabIndex = currentTabIndex - 1
+
+  emit('complete:wizard', newTabIndex, oldTabIndex)
 }
 
-const navigateToTab = (index: number) => {
+const navigateToTab = async (index: number) => {
   if (!props.navigableTabs) return
 
-  currentTabIndex = index
+  const newTabIndex = index
+  const oldTabIndex = currentTabIndex
 
-  setActiveIndex()
+  emit('change', newTabIndex, oldTabIndex)
 
-  props.beforeChange()
+  await props.beforeChange()
 
-  emit('change', currentTabIndex)
+  changeTab(newTabIndex)
+}
+
+const changeTab = async (newTabIndex: number) => {
+  currentTabIndex = newTabIndex
+
+  setActiveIndex()
+
+  await nextTick()
+  await props.beforeMount()
 }
 
 const getIconClass = (iconName: string) => `bi bi-${iconName}`

diff --git a/src/types/wizard.ts b/src/types/wizard.ts
@@ -26,4 +26,5 @@ export interface Props {
   cardBackground: boolean
   navigableTabs: boolean
   beforeChange: Function
+  beforeMount: Function
 }
diff --git a/test/wizard.spec.js b/test/wizard.spec.js
@@ -82,6 +82,6 @@ describe('Wizard unit tests', () => {
     expect(wrapper.vm.currentTabIndex).toEqual(2)
     expect(getActiveItemCount()).toEqual(1)
     expect(getCheckedItemCount()).toEqual(2)
-    expect(wrapper.emitted().completeWizard).toBeTruthy()
+    expect(wrapper.emitted()['complete:wizard']).toBeTruthy()
   })
 })