vue-stack-tabs 0.1.20 → 0.1.21

package/src/lib/hooks/useTabpanel.tsx

@@ -1,5 +1,13 @@
 import type { ITabData, ITabItem, ITabPage } from '../model/TabModel'
-import { defineComponent, onActivated, onUnmounted, ref, unref } from 'vue'
+import {
+  defineComponent,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  unref
+} from 'vue'
 import type { DefineComponent, VNode } from 'vue'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
@@ -19,8 +27,10 @@ const components = new Map<string, any>()
 const deletableCache = new Set<String>()
 const pageShown = ref<boolean>(true)
 const SESSION_TAB_NAME = 'stacktab-active-tab'
+const pageScroller = new Map<string, Map<string, any>>()
 let initialed = false
 let max = 0
+let scrollbar = false
 export default () => {
   const router = useRouter()
   const emitter = useEmitter()
@@ -170,23 +180,37 @@ export default () => {
         components: {
           DynamicComponent: component
         },
-        setup() {
-          // onMounted(() => {
-          //   addCache(cacheName)
-          // })
+        emits: {
+          onLoaded: null
+        },
+        setup(props, context) {
+          onMounted(() => {
+            context.emit('onLoaded')
+            addPageScroller(cacheName, '.cache-page-wrapper')
+          })
+          onDeactivated(() => {
+            saveScroller(cacheName)
+          })
           onActivated(() => {
+            restoreScroller(cacheName)
+            console.log(pageScroller.get(cacheName))
             removeDeletableCache()
             component.props = null
           })
           onUnmounted(() => {
             console.log('on unMounted', cacheName)
+            removeScroller(cacheName)
             // setTimeout(() => {
             // 刷新时重置路由
             // pageShown.value = true
             // }, 500)
           })
           return () => (
-            <div class="cache-page-wrapper" id={'W-' + tabInfo.id}>
+            <div
+              class="cache-page-wrapper"
+              id={'W-' + tabInfo.id}
+              style={[scrollbar ? 'overflow:auto' : 'overflow:hidden']}
+            >
               <dynamic-component tId={tabInfo.id} pId={cacheName} />
               <PageLoading tId={tabInfo.id!} />
             </div>
@@ -208,6 +232,47 @@ export default () => {
     addCache(cacheName)
     return cacheComponent
   }
+  const restoreScroller = (pageId: string) => {
+    const scroller = pageScroller.get(pageId)
+    if (scroller) {
+      for (const key of scroller.keys()) {
+        if (document.querySelector(key)) {
+          const result = scroller.get(key)!
+          document.querySelector(key)!.scrollTop = result.top
+          document.querySelector(key)!.scrollLeft = result.left
+        }
+      }
+    }
+  }
+  const saveScroller = (pageId: string) => {
+    const scroller = pageScroller.get(pageId)
+    if (scroller) {
+      for (const key of scroller.keys()) {
+        const result = {
+          top: document.querySelector(key)?.scrollTop ?? 0,
+          left: document.querySelector(key)?.scrollLeft ?? 0
+        }
+        scroller.set(key, result)
+      }
+    }
+  }
+
+  const removeScroller = (pageId: string) => {
+    const scroller = pageScroller.get(pageId)!
+    if (scroller) {
+      scroller.clear()
+      pageScroller.delete(pageId)
+    }
+  }
+  const addPageScroller = (pageId: string, ...scrollerIds: string[]) => {
+    if (!pageScroller.has(pageId)) {
+      pageScroller.set(pageId, new Map<string, number>())
+    }
+    const scroller = pageScroller.get(pageId)!
+    for (const sId of scrollerIds) {
+      scroller.set(sId, { top: 0, left: 0 })
+    }
+  }
   /**
    * if id is null , then remove all tab that deleted is true
    * @param id
@@ -492,6 +557,9 @@ export default () => {
   const setMaxSize = (size: number) => {
     max = size
   }
+  const setGlobalScroll = (globalScroll: boolean) => {
+    scrollbar = globalScroll
+  }
 
   return {
     tabs,
@@ -522,6 +590,8 @@ export default () => {
     markDeletableCache,
     removeDeletableCache,
     refreshTab,
-    refreshAllTabs
+    refreshAllTabs,
+    addPageScroller,
+    setGlobalScroll
   }
 }

package/src/lib/i18n/index.ts

@@ -58,14 +58,17 @@ export default () => {
     return message
   }
   // const localeI18n = inject('locales') as { locale: string; messages: object }
-  const getI18n = (localeI18n?: any) => {
-    let combinateMessage = { ...allLangs() }
-    if (!localeI18n) {
-      combinateMessage = { ...allLangs(), ...localeI18n.messages }
+  const getI18n = (localeI18n?: { locale: string; messages: any }[]) => {
+    const combinateMessage = { ...allLangs() }
+    if (localeI18n) {
+      for (const l of localeI18n!) {
+        combinateMessage[l.locale] = l.messages
+      }
+      // combinateMessage = { ...allLangs(), ...localeI18n.messages }
     }
 
     return createI18n({
-      locale: localeI18n.locale,
+      locale: 'zh-CN',
       fallbackLocale: 'en',
       messages: combinateMessage
     })

package/src/lib/i18n/lang/en.ts

@@ -1,8 +1,8 @@
 export default {
   VueStackTab: {
     close: 'close',
-    closeLefts: 'close lefts',
-    closeRights: 'close rights',
+    closeLeft: 'close left',
+    closeRight: 'close right',
     closeOthers: 'close others',
     closeAll: 'close all',
     reload: 'reload',

package/src/lib/i18n/lang/zh-CN.ts

@@ -1,8 +1,8 @@
 export default {
   VueStackTab: {
     close: '关闭',
-    closeLefts: '关闭左侧',
-    closeRights: '关闭右侧',
+    closeLeft: '关闭左侧',
+    closeRight: '关闭右侧',
     closeOthers: '关闭其他',
     closeAll: '关闭所有',
     reload: '刷新',

package/src/lib/index.ts

@@ -27,10 +27,7 @@ declare module '@vue/runtime-core' {
 
 export { IFrame, useTabLoading, useTabRouter, useStackTab, TabHeaderButton, StackTab }
 export default {
-  install(
-    Vue: App,
-    options: { locale: string; messages: any } = { locale: 'zh-CN', messages: {} }
-  ): void {
+  install(Vue: App, options?: { locale: string; messages: any }[]): void {
     tabVersion(import.meta.env.PACKAGE_VERSION)
     Vue.component('VueStackTabs', StackTab).use(useTabMitt).use(i18n().getI18n(options))
   }