feat: tab service added (#3367)

packages/hoppscotch-ui/src/components/smart/Tab.vue

@@ -52,6 +52,7 @@ const {
   addTabEntry,
   updateTabEntry,
   removeTabEntry,
+  isUnmounting,
 } = inject<TabProvider>("tabs-system")!
 
 const active = computed(() => activeTabID.value === props.id)
@@ -73,6 +74,7 @@ watch(tabMeta, (newMeta) => {
 })
 
 onBeforeUnmount(() => {
+  if (isUnmounting.value) return
   removeTabEntry(props.id)
 })
 </script>

packages/hoppscotch-ui/src/components/smart/Tabs.vue

@@ -76,8 +76,8 @@ import { pipe } from "fp-ts/function"
 import { not } from "fp-ts/Predicate"
 import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
-import type { Component } from "vue"
-import { ref, ComputedRef, computed, provide } from "vue"
+import type { Component, Ref } from "vue"
+import { ref, ComputedRef, computed, provide, onBeforeUnmount } from "vue"
 
 export type TabMeta = {
   label: string | null
@@ -94,6 +94,7 @@ export type TabProvider = {
   addTabEntry: (tabID: string, meta: TabMeta) => void
   updateTabEntry: (tabID: string, newMeta: TabMeta) => void
   removeTabEntry: (tabID: string) => void
+  isUnmounting: Ref<boolean>
 }
 
 const props = defineProps({
@@ -165,12 +166,19 @@ const removeTabEntry = (tabID: string) => {
     if (tabEntries.value.length > 0) selectTab(tabEntries.value[0][0])
 }
 
+const isUnmounting = ref(false)
+
 provide<TabProvider>("tabs-system", {
   renderInactive: computed(() => props.renderInactiveTabs),
   activeTabID: computed(() => props.modelValue),
   addTabEntry,
   updateTabEntry,
   removeTabEntry,
+  isUnmounting,
+})
+
+onBeforeUnmount(() => {
+  isUnmounting.value = true
 })
 
 const selectTab = (id: string) => {