vue-stack-tabs 0.1.27 → 0.1.30

package/src/lib/hooks/useTabpanel.tsx

@@ -1,6 +1,7 @@
 import type { ITabData, ITabItem, ITabPage } from '../model/TabModel'
 import {
   defineComponent,
+  nextTick,
   onActivated,
   onDeactivated,
   onMounted,
@@ -25,6 +26,7 @@ const caches = ref<string[]>([])
 // Dynamic components
 const components = new Map<string, any>()
 const deletableCache = new Set<String>()
+const deletableTab = new Set<String>()
 const pageShown = ref<boolean>(true)
 const SESSION_TAB_NAME = 'stacktab-active-tab'
 const pageScroller = new Map<string, Map<string, any>>()
@@ -37,6 +39,7 @@ export default () => {
   const size = (): number => {
     return tabs.value.length
   }
+
   /**
    * Init the Tab list
    */
@@ -45,6 +48,7 @@ export default () => {
     defaultTabs.splice(0)
     caches.value.splice(0)
     deletableCache.clear()
+    deletableTab.clear()
     components.clear()
     for (const item of staticTabs) {
       // const id = ulid()
@@ -76,7 +80,7 @@ export default () => {
       }
 
       defaultTabs.push(tab)
-      tabs.value.push(tab)
+      tabs.value.push({ ...tab })
       caches.value.push(cacheName)
     }
 
@@ -133,7 +137,18 @@ export default () => {
   const addPage = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
     let cacheComponent: DefineComponent
     const tabInfo = decodeTabInfo(route.query.__tab as string)
-    const cacheName = createPageId(tabInfo.id!, route.path, route.query.valueOf())
+    if (deletableTab.has(tabInfo.id!)) {
+      return
+    }
+    const matchPath = route.matched[route.matched.length - 1].path
+    const tmpPath = route.path.endsWith('/')
+      ? route.path.substring(0, route.path.length - 1)
+      : route.path
+    const cacheName = createPageId(
+      tabInfo.id!,
+      matchPath === tmpPath ? tmpPath : route.path,
+      route.query.valueOf()
+    )
     const src = route.query.__src
     // 增加tab
     let activeTab: ITabItem | null = null
@@ -199,6 +214,7 @@ export default () => {
             restoreScroller(cacheName)
             console.log(pageScroller.get(cacheName))
             removeDeletableCache()
+            deletableTab.clear()
             component.props = null
           })
           onUnmounted(() => {
@@ -292,6 +308,7 @@ export default () => {
         for (const item of unref(tabs)[i].pages.list()) {
           removeComponent(item.id)
           markDeletableCache(item.id)
+          deletableTab.add(unref(tabs)[i].id)
         }
         unref(tabs)[i].pages.clear()
         if (tabs.value.length > 1 && unref(tabs)[i].active) {
@@ -306,12 +323,17 @@ export default () => {
         break
       }
     }
+
     if (activeTabId !== '') {
       emitter.emit(MittType.TAB_ACTIVE, { id: activeTabId })
       // active(activeTabId)
     }
     // if remove inactive tab,then we need remove the cache manually.
-    removeDeletableCache()
+    const currentTab = getTab(id)
+    if (!currentTab?.active) {
+      removeDeletableCache()
+    }
+
     return activeTabId
   }
 
@@ -322,8 +344,10 @@ export default () => {
         for (const item of uTabs[i].pages.list()) {
           removeComponent(item.id)
           markDeletableCache(item.id)
+          deletableTab.add(uTabs[i].id)
         }
         unref(tabs)[i].pages.clear()
+
         unref(tabs).splice(i, 1)
       }
     }
@@ -347,6 +371,7 @@ export default () => {
         for (const item of uTabs[i].pages.list()) {
           removeComponent(item.id)
           markDeletableCache(item.id)
+          deletableTab.add(uTabs[i].id)
         }
         unref(tabs)[i].pages.clear()
         unref(tabs).splice(i, 1)
@@ -377,6 +402,7 @@ export default () => {
         for (const item of uTabs[i].pages.list()) {
           removeComponent(item.id)
           markDeletableCache(item.id)
+          deletableTab.add(uTabs[i].id)
         }
         unref(tabs)[i].pages.clear()
         unref(tabs).splice(i, 1)
@@ -411,6 +437,7 @@ export default () => {
         for (const item of uTabs[i].pages.list()) {
           removeComponent(item.id)
           markDeletableCache(item.id)
+          deletableTab.add(uTabs[i].id)
         }
         unref(tabs)[i].pages.clear()
         unref(tabs).splice(i, 1)
@@ -441,6 +468,9 @@ export default () => {
             // 如果要刷新的是显示的TAB
             if (uTabs.active) {
               pageShown.value = false
+              nextTick(() => {
+                pageShown.value = true
+              })
             }
             break
           }
@@ -464,6 +494,9 @@ export default () => {
       }
     }
     pageShown.value = false
+    nextTick(() => {
+      pageShown.value = true
+    })
   }
 
   const addComponent = (id: string, comp: DefineComponent) => {
@@ -512,30 +545,30 @@ export default () => {
    * @return true if already actived
    */
   const active = (id: string, route = true) => {
-    return new Promise((resolve) => {
-      for (let i = tabs.value.length - 1; i >= 0; i--) {
-        const tab = tabs.value[i] as ITabItem
-        if (tab.id === id) {
-          if (tab.active) {
-            break
-          } else {
-            tab.active = true
-            pageShown.value = false
-            updateSession(tab)
-            if (route) {
-              const top = tab.pages.peek()
-              router.push({
-                path: top!.path,
-                query: top!.query
-              })
-            }
-          }
+    // return new Promise((resolve)=>{
+    for (let i = tabs.value.length - 1; i >= 0; i--) {
+      const tab = tabs.value[i] as ITabItem
+      if (tab.id === id) {
+        if (tab.active) {
+          break
         } else {
-          tabs.value[i].active = false
+          tab.active = true
+          // pageShown.value = false
+          updateSession(tab)
+          if (route) {
+            const top = tab.pages.peek()
+            router.push({
+              path: top!.path,
+              query: top!.query
+            })
+          }
         }
+      } else {
+        tabs.value[i].active = false
       }
-      resolve(true)
-    })
+    }
+    //   resolve(true)
+    // })
   }
   /**
    * save current tab info into Browser's session
@@ -546,15 +579,23 @@ export default () => {
     window.sessionStorage.setItem(SESSION_TAB_NAME, JSON.stringify(tab))
   }
   const reset = () => {
+    pageShown.value = false
     destroy()
-    unref(tabs).push(...defaultTabs)
-    emitter.emit(MittType.TAB_ACTIVE, { id: defaultTabs[0].id! })
+    nextTick(() => {
+      unref(tabs).push(...defaultTabs)
+      emitter.emit(MittType.TAB_ACTIVE, { id: defaultTabs[0].id! })
+      // pageShown.value = false
+      nextTick(() => {
+        pageShown.value = true
+      })
+    })
     // active(defaultTabs[0].id)
   }
   const destroy = () => {
     unref(tabs).splice(0)
     components.clear()
     deletableCache.clear()
+    deletableTab.clear()
     unref(caches).splice(0)
   }
   const setMaxSize = (size: number) => {