vue-stack-tabs 0.1.45 → 0.1.47

package/src/lib/hooks/useStackTab.ts

@@ -1,119 +1,119 @@
-import { useRouter } from 'vue-router'
-import useTabpanel from '../hooks/useTabpanel'
-import { throttle } from 'throttle-debounce'
-import type { ITabData } from '../model/TabModel'
-import { defu } from 'defu'
-
-import { encodeTabInfo } from '../utils/TabIdHelper'
-import { uriDecode } from '../utils/UriHelper'
-import { ulid } from 'ulid'
-import { MittType, useEmitter } from './useTabMitt'
-import { nextTick } from 'vue'
-
-let iframePath: string
-export default () => {
-  const router = useRouter()
-  const { active, hasTab, pageShown, reset, canAddTab, renewTab, getTab } = useTabpanel()
-  const emitter = useEmitter()
-  /**
-   * 打开新的TAB页面
-   * @param tab
-   * @param to
-   */
-  const openNewTab = throttle(500, (tab: ITabData, renew = false) => {
-    return new Promise((resolve, reject) => {
-      if (!pageShown.value) {
-        reject()
-        return
-      }
-      const tabInfo = defu(tab, {
-        refreshable: true,
-        closable: true,
-        iframe: false
-      })
-      if (tabInfo.id && renew && hasTab(tabInfo.id!)) {
-        renewTab(tab)
-        const currentTab = getTab(tab.id!)
-        // if current tab is active, then must reload the component of router view for complete remove the cache!!!
-        if (currentTab?.active) {
-          pageShown.value = false
-          nextTick(() => {
-            pageShown.value = true
-          })
-        }
-      }
-      /**
-       * In the function of openNewTab, if the tab already 'ACTIVE' then do nothing.
-       */
-      if (hasTab(tabInfo.id!) && !renew) {
-        emitter.emit(MittType.TAB_ACTIVE, { id: tabInfo.id! })
-        // active(tabInfo.id!)
-        resolve(tabInfo.id)
-        return
-      }
-      if (!tabInfo.id) {
-        tabInfo.id = ulid()
-      }
-      if (!canAddTab()) {
-        reject('Max Size')
-        return
-      }
-
-      // if (initialed) {
-      //   // 增加tab
-      //   let activeTab: ITabItem | null = null
-      //   for (const tab of unref(tabs)) {
-      //     tab.active = false
-      //   }
-      //   activeTab = {
-      //     id: tabInfo.id!,
-      //     title: tabInfo.title,
-      //     closable: tabInfo.closable!,
-      //     refreshable: tabInfo.refreshable!,
-      //     iframe: tabInfo.iframe!,
-      //     url: tabInfo.iframe ? tab.path : null,
-      //     active: true,
-      //     pages: new Stack<ITabPage>()
-      //   } as ITabItem
-      //   addTab(activeTab).finally(() => {
-      //     toPage(tab, tabInfo)
-      //     resolve(tabInfo.id)
-      //   })
-      // } else {
-      toPage(tab, tabInfo)
-      resolve(tabInfo.id)
-      // }
-    })
-  })
-  const toPage = (tab: ITabData, tabInfo: any) => {
-    const __tab = encodeTabInfo(tabInfo)
-    let query = defu(
-      {
-        __tab
-      },
-      tab.query
-    ) as Record<string, string>
-    let path
-    if (!tab.iframe) {
-      const url = uriDecode(tab.path)
-      path = url.path
-      query = defu(url.query, query)
-    } else {
-      const __src = encodeURIComponent(tab.path as string)
-      path = iframePath
-      query['__src'] = __src
-    }
-    router.push({
-      path,
-      query
-    })
-  }
-  const setIFramePath = (path: string) => {
-    iframePath = path
-  }
-  const getWrapper = () =>{
-    return document.getElementsByClassName('cache-page-wrapper')[0]
-  }
-
-  return { openNewTab, setIFramePath, active, reset,getWrapper }
-}
+import { useRouter } from 'vue-router'
+import useTabpanel from '../hooks/useTabpanel'
+import { throttle } from 'throttle-debounce'
+import type { ITabData } from '../model/TabModel'
+import { defu } from 'defu'
+
+import { encodeTabInfo } from '../utils/TabIdHelper'
+import { uriDecode } from '../utils/UriHelper'
+import { ulid } from 'ulid'
+import { MittType, useEmitter } from './useTabMitt'
+import { nextTick } from 'vue'
+
+let iframePath: string
+export default () => {
+  const router = useRouter()
+  const { active, hasTab, pageShown, reset, canAddTab, renewTab, getTab } = useTabpanel()
+  const emitter = useEmitter()
+  /**
+   * 打开新的TAB页面
+   * @param tab
+   * @param to
+   */
+  const openNewTab = throttle(500, (tab: ITabData, renew = false) => {
+    return new Promise((resolve, reject) => {
+      if (!pageShown.value) {
+        reject()
+        return
+      }
+      const tabInfo = defu(tab, {
+        refreshable: true,
+        closable: true,
+        iframe: false
+      })
+      if (tabInfo.id && renew && hasTab(tabInfo.id!)) {
+        renewTab(tab)
+        const currentTab = getTab(tab.id!)
+        // if current tab is active, then must reload the component of router view for complete remove the cache!!!
+        if (currentTab?.active) {
+          pageShown.value = false
+          nextTick(() => {
+            pageShown.value = true
+          })
+        }
+      }
+      /**
+       * In the function of openNewTab, if the tab already 'ACTIVE' then do nothing.
+       */
+      if (hasTab(tabInfo.id!) && !renew) {
+        emitter.emit(MittType.TAB_ACTIVE, { id: tabInfo.id! })
+        // active(tabInfo.id!)
+        resolve(tabInfo.id)
+        return
+      }
+      if (!tabInfo.id) {
+        tabInfo.id = ulid()
+      }
+      if (!canAddTab()) {
+        reject('Max Size')
+        return
+      }
+
+      // if (initialed) {
+      //   // 增加tab
+      //   let activeTab: ITabItem | null = null
+      //   for (const tab of unref(tabs)) {
+      //     tab.active = false
+      //   }
+      //   activeTab = {
+      //     id: tabInfo.id!,
+      //     title: tabInfo.title,
+      //     closable: tabInfo.closable!,
+      //     refreshable: tabInfo.refreshable!,
+      //     iframe: tabInfo.iframe!,
+      //     url: tabInfo.iframe ? tab.path : null,
+      //     active: true,
+      //     pages: new Stack<ITabPage>()
+      //   } as ITabItem
+      //   addTab(activeTab).finally(() => {
+      //     toPage(tab, tabInfo)
+      //     resolve(tabInfo.id)
+      //   })
+      // } else {
+      toPage(tab, tabInfo)
+      resolve(tabInfo.id)
+      // }
+    })
+  })
+  const toPage = (tab: ITabData, tabInfo: any) => {
+    const __tab = encodeTabInfo(tabInfo)
+    let query = defu(
+      {
+        __tab
+      },
+      tab.query
+    ) as Record<string, string>
+    let path
+    if (!tab.iframe) {
+      const url = uriDecode(tab.path)
+      path = url.path
+      query = defu(url.query, query)
+    } else {
+      const __src = encodeURIComponent(tab.path as string)
+      path = iframePath
+      query['__src'] = __src
+    }
+    router.push({
+      path,
+      query
+    })
+  }
+  const setIFramePath = (path: string) => {
+    iframePath = path
+  }
+  const getWrapper = () =>{
+    return document.getElementsByClassName('cache-page-wrapper')[0]
+  }
+
+  return { openNewTab, setIFramePath, active, reset,getWrapper }
+}

package/src/lib/hooks/useTabRouter.ts

@@ -1,103 +1,103 @@
-import { defu } from 'defu'
-
-import { getCurrentInstance } from 'vue'
-import type { ComponentInternalInstance } from 'vue'
-import { type RouteLocationPathRaw, useRoute, useRouter } from 'vue-router'
-
-import useTabpanel from '@/lib/hooks/useTabpanel'
-import { uriDecode } from '@/lib/utils/UriHelper'
-import { useEmitter } from '@/lib/hooks/useTabMitt'
-export default () => {
-  const { attrs, props } = getCurrentInstance() as ComponentInternalInstance
-  const { pageShown, getTab, markDeletableCache, removeComponent, getComponent, addPageScroller } =
-    useTabpanel()
-  const route = useRoute()
-  const router = useRouter()
-  const emitter = useEmitter()
-  let currentId = ''
-  // const currentPageId = ''
-  let currentTab = ''
-  currentId = (attrs.tId || props.tId) as string
-  const currentPageId = (attrs.pId || props.pId) as string
-  // currentPageId = attrs.pId as string
-  currentTab = route.query.__tab as string
-
-  const addScroller = (...scroller: string[]) => {
-    addPageScroller(currentPageId, ...scroller)
-  }
-  const forward = (to: RouteLocationPathRaw) => {
-    // pageShown.value = false
-    const query = defu(
-      {
-        __tab: currentTab
-      },
-      to.query
-    )
-    emitter.emit('FORWARD')
-    router.push({
-      path: to.path,
-      query
-    })
-  }
-  /**
-   * 返回
-   * @param to url or step
-   * @param query 返回时要加截的数据
-   */
-  const backward = (to: number | string, query?: Object) => {
-    // pageShown.value = false
-
-    const tab = getTab(currentId)
-    if (!tab) {
-      return
-    }
-    const tabStack = tab.pages
-    let absTo = 0
-    if (typeof to === 'number') {
-      absTo = Math.abs(to)
-    } else {
-      let index = 1
-      let hasPath = false
-      const pageItems = tabStack.list()
-      const url = uriDecode(to)
-      query = defu(url.query, query)
-      for (let i = tabStack.size() - 2; i >= 0; i--) {
-        if (pageItems[i].path === url.path) {
-          hasPath = true
-          break
-        }
-        index += 1
-      }
-      if (hasPath) {
-        absTo = index
-      }
-    }
-
-    if (absTo === 0 || tabStack!.size() <= absTo) {
-      return
-    }
-    // const removeCaches = new Set()
-    for (let i = 0; i < absTo; i++) {
-      const popRoute = tabStack.pop()
-      // removeComponent(popRoute!.id)
-      markDeletableCache(popRoute!.id)
-    }
-    const pageRoute = tabStack?.peek()
-    const component = getComponent(pageRoute!.id)
-    if (component !== null && component !== undefined) {
-      const sourceComponent = component.components.DynamicComponent
-      sourceComponent.props = defu(query, sourceComponent.props)
-    }
-    emitter.emit('BACKWARD')
-    router.push({
-      path: pageRoute!.path,
-      query: pageRoute!.query
-    })
-  }
-
-  return {
-    forward,
-    backward,
-    addScroller
-  }
-}
+import { defu } from 'defu'
+
+import { getCurrentInstance } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { type RouteLocationPathRaw, useRoute, useRouter } from 'vue-router'
+
+import useTabpanel from '@/lib/hooks/useTabpanel'
+import { uriDecode } from '@/lib/utils/UriHelper'
+import { useEmitter } from '@/lib/hooks/useTabMitt'
+export default () => {
+  const { attrs, props } = getCurrentInstance() as ComponentInternalInstance
+  const { pageShown, getTab, markDeletableCache, removeComponent, getComponent, addPageScroller } =
+    useTabpanel()
+  const route = useRoute()
+  const router = useRouter()
+  const emitter = useEmitter()
+  let currentId = ''
+  // const currentPageId = ''
+  let currentTab = ''
+  currentId = (attrs.tId || props.tId) as string
+  const currentPageId = (attrs.pId || props.pId) as string
+  // currentPageId = attrs.pId as string
+  currentTab = route.query.__tab as string
+
+  const addScroller = (...scroller: string[]) => {
+    addPageScroller(currentPageId, ...scroller)
+  }
+  const forward = (to: RouteLocationPathRaw) => {
+    // pageShown.value = false
+    const query = defu(
+      {
+        __tab: currentTab
+      },
+      to.query
+    )
+    emitter.emit('FORWARD')
+    router.push({
+      path: to.path,
+      query
+    })
+  }
+  /**
+   * 返回
+   * @param to url or step
+   * @param query 返回时要加截的数据
+   */
+  const backward = (to: number | string, query?: Object) => {
+    // pageShown.value = false
+
+    const tab = getTab(currentId)
+    if (!tab) {
+      return
+    }
+    const tabStack = tab.pages
+    let absTo = 0
+    if (typeof to === 'number') {
+      absTo = Math.abs(to)
+    } else {
+      let index = 1
+      let hasPath = false
+      const pageItems = tabStack.list()
+      const url = uriDecode(to)
+      query = defu(url.query, query)
+      for (let i = tabStack.size() - 2; i >= 0; i--) {
+        if (pageItems[i].path === url.path) {
+          hasPath = true
+          break
+        }
+        index += 1
+      }
+      if (hasPath) {
+        absTo = index
+      }
+    }
+
+    if (absTo === 0 || tabStack!.size() <= absTo) {
+      return
+    }
+    // const removeCaches = new Set()
+    for (let i = 0; i < absTo; i++) {
+      const popRoute = tabStack.pop()
+      // removeComponent(popRoute!.id)
+      markDeletableCache(popRoute!.id)
+    }
+    const pageRoute = tabStack?.peek()
+    const component = getComponent(pageRoute!.id)
+    if (component !== null && component !== undefined) {
+      const sourceComponent = component.components.DynamicComponent
+      sourceComponent.props = defu(query, sourceComponent.props)
+    }
+    emitter.emit('BACKWARD')
+    router.push({
+      path: pageRoute!.path,
+      query: pageRoute!.query
+    })
+  }
+
+  return {
+    forward,
+    backward,
+    addScroller
+  }
+}

package/src/lib/hooks/useTabpanel.tsx

@@ -27,8 +27,8 @@ const defaultTabs: ITabItem[] = []
 const caches = ref<string[]>([])
 // Dynamic components
 const components = new Map<string, any>()
-const deletableCache = new Set<String>()
-const deletableTab = new Set<String>()
+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>>()
@@ -563,13 +563,19 @@ export default () => {
     deletableCache.add(cacheName)
   }
   const removeDeletableCache = () => {
-    for (let i = caches.value.length - 1; i >= 0; i--) {
-      if (deletableCache.has(caches.value[i])) {
-        unref(caches).splice(i, 1)
-        removeComponent(caches.value[i])
+    if(deletableCache.size>0){
+      for (let i = caches.value.length - 1; i >= 0; i--) {
+        if (deletableCache.has(caches.value[i])) {
+          unref(caches).splice(i, 1)
+
+        }
       }
+      for(const cacheName of deletableCache) {
+        removeComponent(cacheName)
+      }
+      deletableCache.clear()
     }
-    deletableCache.clear()
+
   }
   const removeCache = (cacheName: string) => {
     for (let i = caches.value.length - 1; i >= 0; i--) {

package/src/lib/utils/TabIdHelper.ts

@@ -1,70 +1,70 @@
-import type { ITabBase } from '../model/TabModel'
-import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
-import Hex from 'hex-encoding'
-import { blake3 } from '@noble/hashes/blake3'
-
-/**
- * compress tab info to string
- * format:
- * {tab id}{current timestamp}{tab name}{tab closable}
- * @param tabData
- */
-export const encodeTabInfo = (tabData: ITabBase): string => {
-  // const info: ITabBase = {
-  //   id: tabData.id,
-  //   title: tabData.title,
-  //   iframe: tabData.iframe,
-  //   closable: tabData.closable,
-  //   refreshable: tabData.refreshable
-  // }
-  const info = `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
-  return compressToEncodedURIComponent(info)
-  // const compressed = await compress(new TextEncoder().encode(info))
-  // return fromUint8Array(compressed, true)
-  // return compressToEncodedURIComponent(
-  //   `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
-  // )
-}
-
-export const decodeTabInfo = (tab: string): ITabBase => {
-  // const decompressed = await decompress(toUint8Array(tab))
-  const tabString = decompressFromEncodedURIComponent(tab)
-  // const tabString = new TextDecoder().decode(decompressed)
-  // return JSON.parse(new TextDecoder().decode(decompressed))
-  // const tabString = decompressFromEncodedURIComponent(tab)
-  const tabValues: string[] = tabString.split('|')
-  return {
-    id: tabValues[0],
-    title: tabValues[1],
-    iframe: tabValues[2] === 'Y',
-    closable: tabValues[3] === 'Y',
-    refreshable: tabValues[4] === 'Y'
-  }
-}
-
-export const createPageId = (tabId: string, path: string, query: Object): string => {
-  const queryArray = []
-  console.log(query)
-  type ObjectKey = keyof typeof query
-  for (const key in query) {
-    if (!key.startsWith('__')) {
-      queryArray.push({
-        key,
-        value: query[key as ObjectKey]
-      })
-    }
-  }
-  queryArray.sort((a, b) => {
-    let result = 0
-    if (a.key > b.key) {
-      result = 1
-    } else if (a.key < b.key) {
-      result = -1
-    }
-    return result
-  })
-  const hash = blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
-  return Hex.encode(hash)
-  // return uuidv5(`${tabId}|${path}|${JSON.stringify(queryArray)}`, uuidv5.URL).replaceAll('-', '')
-  // return await blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
-}
+import type { ITabBase } from '../model/TabModel'
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
+import Hex from 'hex-encoding'
+import { blake3 } from '@noble/hashes/blake3'
+
+/**
+ * compress tab info to string
+ * format:
+ * {tab id}{current timestamp}{tab name}{tab closable}
+ * @param tabData
+ */
+export const encodeTabInfo = (tabData: ITabBase): string => {
+  // const info: ITabBase = {
+  //   id: tabData.id,
+  //   title: tabData.title,
+  //   iframe: tabData.iframe,
+  //   closable: tabData.closable,
+  //   refreshable: tabData.refreshable
+  // }
+  const info = `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
+  return compressToEncodedURIComponent(info)
+  // const compressed = await compress(new TextEncoder().encode(info))
+  // return fromUint8Array(compressed, true)
+  // return compressToEncodedURIComponent(
+  //   `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
+  // )
+}
+
+export const decodeTabInfo = (tab: string): ITabBase => {
+  // const decompressed = await decompress(toUint8Array(tab))
+  const tabString = decompressFromEncodedURIComponent(tab)
+  // const tabString = new TextDecoder().decode(decompressed)
+  // return JSON.parse(new TextDecoder().decode(decompressed))
+  // const tabString = decompressFromEncodedURIComponent(tab)
+  const tabValues: string[] = tabString.split('|')
+  return {
+    id: tabValues[0],
+    title: tabValues[1],
+    iframe: tabValues[2] === 'Y',
+    closable: tabValues[3] === 'Y',
+    refreshable: tabValues[4] === 'Y'
+  }
+}
+
+export const createPageId = (tabId: string, path: string, query: Object): string => {
+  const queryArray = []
+  console.log(query)
+  type ObjectKey = keyof typeof query
+  for (const key in query) {
+    if (!key.startsWith('__')) {
+      queryArray.push({
+        key,
+        value: query[key as ObjectKey]
+      })
+    }
+  }
+  queryArray.sort((a, b) => {
+    let result = 0
+    if (a.key > b.key) {
+      result = 1
+    } else if (a.key < b.key) {
+      result = -1
+    }
+    return result
+  })
+  const hash = blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
+  return Hex.encode(hash)
+  // return uuidv5(`${tabId}|${path}|${JSON.stringify(queryArray)}`, uuidv5.URL).replaceAll('-', '')
+  // return await blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
+}