vue-stack-tabs 0.1.41 → 0.1.43

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

@@ -34,6 +34,7 @@ const pageScroller = new Map<string, Map<string, any>>()
 let initialed = false
 let max = 0
 let scrollbar = false
+let sessionPrefix = ''
 export default () => {
   const router = useRouter()
   const emitter = useEmitter()
@@ -322,7 +323,7 @@ export default () => {
   const renewTab = (tab: ITabData) => {
     const currentTab = getTab(tab.id!)
     for (const item of currentTab!.pages.list()) {
-      removeComponent(item.id)
+      // removeComponent(item.id)
       markDeletableCache(item.id)
     }
     removeDeletableCache()
@@ -623,11 +624,11 @@ export default () => {
    */
   const updateSession = (tab: ITabItem) => {
     // window.sessionStorage.setItem('tabItems', JSON.stringify(currentItems?.values()))
-    window.sessionStorage.setItem(SESSION_TAB_NAME, JSON.stringify(tab))
+    window.sessionStorage.setItem(sessionPrefix+SESSION_TAB_NAME, JSON.stringify(tab))
   }
   const clearSession = () => {
     // window.sessionStorage.setItem('tabItems', JSON.stringify(currentItems?.values()))
-    window.sessionStorage.removeItem(SESSION_TAB_NAME)
+    window.sessionStorage.removeItem(sessionPrefix+SESSION_TAB_NAME)
   }
   const reset = () => {
     pageShown.value = false
@@ -656,6 +657,9 @@ export default () => {
     scrollbar = globalScroll
   }
 
+  const setSessionPrefix = (prefix: string) => {
+    sessionPrefix = prefix
+  }
   return {
     tabs,
     caches,
@@ -689,6 +693,7 @@ export default () => {
     refreshAllTabs,
     addPageScroller,
     setGlobalScroll,
-    clearSession
+    clearSession,
+    setSessionPrefix
   }
 }

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)}`)
+}