vue-stack-tabs 0.1.36 → 0.1.38

package/src/lib/StackTabs.vue

@@ -1,124 +1,135 @@
-<script lang="ts" setup>
-import { onBeforeMount, onBeforeUnmount, provide, ref, watch } from 'vue'
-import type { TransitionProps, DefineComponent, VNode } from 'vue'
-import { type RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
-import { getMaxZIndex } from './utils/TabScrollHelper'
-import { type ITabData, TabScrollMode } from './model/TabModel'
-import TabHeader from './components/TabHeader/index.vue'
-import useTabpanel from './hooks/useTabpanel'
-import useStackTab from './hooks/useStackTab'
-import { useI18n } from 'vue-i18n-lite'
-const { tabs, pageShown, caches, destroy, addPage, initial, setMaxSize, setGlobalScroll } =
-  useTabpanel()
-const emit = defineEmits(['onActive', 'onPageLoaded'])
-const props = withDefaults(
-  defineProps<{
-    // 初始页签数据
-    defaultTabs?: ITabData[]
-    // 最大打开数量
-    max?: number
-    // 新页加入哪个位置
-    append?: string
-    // 右键菜单
-    contextmenu?: boolean | object
-    // 页面转场效果
-    pageTransition?: string
-    // 标签转场效果
-    tabTransition?: string | TransitionProps
-    // tab 滚动效果
-    tabScrollMode?: TabScrollMode
-    width?: string
-    height?: string
-    i18n?: string
-    space?: number
-    globalScroll: boolean
-    iframePath: string
-  }>(),
-  {
-    defaultTabs: () => [],
-    max: 20,
-    append: 'last',
-    contextmenu: true,
-    tabTransition: 'stack-tab-zoom',
-    pageTransition: 'stack-tab-swap',
-    tabScrollMode: TabScrollMode.BOTH,
-    width: '100%',
-    height: '100%',
-    i18n: 'zh-CN',
-    space: 300,
-    globalScroll: false
-  }
-)
-// provide('locales', { ...props.i18n })
-// 最大化,并向下传递
-const { changeLocale } = useI18n()
-const maximum = ref<boolean>(false)
-provide('maximum', maximum)
-const { setIFramePath } = useStackTab()
-setIFramePath(props.iframePath)
-setGlobalScroll(props.globalScroll)
-changeLocale(props.i18n)
-onBeforeMount(() => {
-  console.log('on Before mount')
-  initial(props.defaultTabs)
-})
-const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
-  // return defineAsyncComponent(() => addPage(route, component))
-  return addPage(route, component)
-}
-const onTabActive = (id: string) => {
-  emit('onActive', id)
-}
-setMaxSize(props.max)
-onBeforeUnmount(() => {
-  destroy()
-})
-const onComponentLoaded = () => {
-  emit('onPageLoaded')
-}
-</script>
-<template>
-  <div
-    class="stack-tab"
-    :style="{
-      width: width,
-      height: height,
-      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
-    }"
-    :class="{ 'stack-tab__maximum': maximum }"
-  >
-    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
-      <template #leftButton>
-        <slot name="leftButton" />
-      </template>
-      <template #rightButton>
-        <slot name="rightButton" />
-      </template>
-    </tab-header>
-    <div class="stack-tab__container">
-      <router-view v-slot="{ Component, route }">
-        <transition :name="pageTransition" appear mode="out-in">
-          <keep-alive :include="caches">
-            <component
-              :is="tabWrapper(route, Component)"
-              v-if="pageShown"
-              :key="route.fullPath"
-              @on-loaded="onComponentLoaded"
-            />
-          </keep-alive>
-        </transition>
-      </router-view>
-      <transition-group :name="pageTransition" appear>
-        <iframe
-          v-for="frame of tabs.filter((item) => item.iframe)"
-          v-show="frame.active"
-          :key="frame.id"
-          class="stack-tab__iframe"
-          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
-          frameborder="0"
-        />
-      </transition-group>
-    </div>
-  </div>
-</template>
-<style scoped></style>
+<script lang="ts" setup>
+import { onBeforeMount, onBeforeUnmount, provide, ref } from 'vue'
+import type { TransitionProps, DefineComponent, VNode } from 'vue'
+import { type RouteLocationNormalizedLoaded } from 'vue-router'
+import { getMaxZIndex } from './utils/TabScrollHelper'
+import { type ITabData, TabScrollMode } from './model/TabModel'
+import TabHeader from './components/TabHeader/index.vue'
+import useTabpanel from './hooks/useTabpanel'
+import useStackTab from './hooks/useStackTab'
+import { useI18n } from 'vue-i18n-lite'
+import { useEmitter } from '@/lib/hooks/useTabMitt'
+const { tabs, pageShown, caches, destroy, addPage, initial, setMaxSize, setGlobalScroll } =
+  useTabpanel()
+const emit = defineEmits(['onActive', 'onPageLoaded'])
+const props = withDefaults(
+  defineProps<{
+    // 初始页签数据
+    defaultTabs?: ITabData[]
+    // 最大打开数量
+    max?: number
+    // 新页加入哪个位置
+    append?: string
+    // 右键菜单
+    contextmenu?: boolean | object
+    // 页面转场效果
+    pageTransition?: string
+    pageTransitionBack?: string
+    // 标签转场效果
+    tabTransition?: string | TransitionProps
+    // tab 滚动效果
+    tabScrollMode?: TabScrollMode
+    width?: string
+    height?: string
+    i18n?: string
+    space?: number
+    globalScroll: boolean
+    iframePath: string
+  }>(),
+  {
+    defaultTabs: () => [],
+    max: 20,
+    append: 'last',
+    contextmenu: true,
+    tabTransition: 'stack-tab-zoom',
+    pageTransition: 'stack-tab-swap',
+    pageTransitionBack: 'stack-tab-swap-back',
+    tabScrollMode: TabScrollMode.BOTH,
+    width: '100%',
+    height: '100%',
+    i18n: 'zh-CN',
+    space: 300,
+    globalScroll: false
+  }
+)
+// provide('locales', { ...props.i18n })
+// 最大化,并向下传递
+const { changeLocale } = useI18n()
+const maximum = ref<boolean>(false)
+provide('maximum', maximum)
+const { setIFramePath } = useStackTab()
+setIFramePath(props.iframePath)
+setGlobalScroll(props.globalScroll)
+changeLocale(props.i18n)
+onBeforeMount(() => {
+  console.log('on Before mount')
+  initial(props.defaultTabs)
+})
+const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
+  // return defineAsyncComponent(() => addPage(route, component))
+  return addPage(route, component)
+}
+const onTabActive = (id: string) => {
+  emit('onActive', id)
+}
+setMaxSize(props.max)
+onBeforeUnmount(() => {
+  destroy()
+})
+const onComponentLoaded = () => {
+  emit('onPageLoaded')
+}
+const pageSwitch = ref<string>(props.pageTransition)
+const emitter = useEmitter()
+emitter.on('FORWARD', () => {
+  pageSwitch.value = props.pageTransition
+})
+emitter.on('BACKWARD', () => {
+  pageSwitch.value = props.pageTransitionBack
+})
+</script>
+<template>
+  <div
+    class="stack-tab"
+    :style="{
+      width: width,
+      height: height,
+      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
+    }"
+    :class="{ 'stack-tab__maximum': maximum }"
+  >
+    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
+      <template #leftButton>
+        <slot name="leftButton" />
+      </template>
+      <template #rightButton>
+        <slot name="rightButton" />
+      </template>
+    </tab-header>
+    <div class="stack-tab__container">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="pageSwitch" appear mode="out-in">
+          <keep-alive :include="caches">
+            <component
+              :is="tabWrapper(route, Component)"
+              v-if="pageShown"
+              :key="route.fullPath"
+              @on-loaded="onComponentLoaded"
+            />
+          </keep-alive>
+        </transition>
+      </router-view>
+      <transition-group :name="pageTransition" appear>
+        <iframe
+          v-for="frame of tabs.filter((item) => item.iframe)"
+          v-show="frame.active"
+          :key="frame.id"
+          class="stack-tab__iframe"
+          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
+          frameborder="0"
+        />
+      </transition-group>
+    </div>
+  </div>
+</template>
+<style scoped></style>

package/src/lib/assets/style/transition.scss

@@ -1,40 +1,62 @@
-/*
-transition 过渡样式
- */
-.stack-tab-zoom {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: scale(0);
-    opacity: 0;
-  }
-}
-
-/*
-页面交换
- */
-.stack-tab-swap {
-  $trans: 30px;
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateX(-$trans);
-  }
-
-  &-leave-to {
-    transform: translateX($trans);
-  }
-}
+/*
+transition 过渡样式
+ */
+.stack-tab-zoom {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+/*
+页面交换
+ */
+.stack-tab-swap {
+  $trans: 30px;
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX($trans);
+  }
+
+  &-leave-to {
+    transform: translateX(-$trans);
+  }
+}
+
+.stack-tab-swap-back {
+  $trans: 30px;
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-$trans);
+  }
+
+  &-leave-to {
+    transform: translateX($trans);
+  }
+}

package/src/lib/hooks/useStackTab.ts

@@ -1,112 +1,119 @@
-import { useRouter } from 'vue-router'
-import useTabpanel from '../hooks/useTabpanel'
-import { throttle } from 'lodash-es'
-import type { ITabData } from '../model/TabModel'
-import { defu } from 'defu'
-
-import { encodeTabInfo } from '../utils/TabIdHelper'
-import { uriDecode } from '../utils/UriHelper'
-import { ulid } from 'ulidx'
-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((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)
-      // }
-    })
-  }, 500)
-  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
-  }
-
-  return { openNewTab, setIFramePath, active, reset }
-}
+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 }
+}