vue-stack-tabs 0.1.19 → 0.1.21

package/src/lib/components/TabHeader/index.vue

@@ -1,137 +1,137 @@
-<template>
-  <div class="stack-tab__header">
-    <slot name="leftButton" />
-    <tab-header-scroll
-      ref="scroll"
-      :space="space"
-      :is-scroll-wheel="isScrollWheel"
-      :is-scroll-button="isScrollButton"
-    >
-      <template #default>
-        <transition-group
-          key="tabItemTrans"
-          tag="ul"
-          class="stack-tab__nav"
-          v-bind="tabTrans"
-          appear
-        >
-          <tab-header-item
-            v-for="(item, index) in tabs"
-            :key="item.id"
-            :contextmenu="contextmenu"
-            :item="item"
-            @contextmenu.prevent="
-              (e: MouseEvent) => showContextMenu(e, item as ITabItem, index, tabs.length)
-            "
-            @click.middle.prevent="closeTab(item as ITabItem)"
-            @close="closeTab"
-            @active="activeTab"
-          />
-        </transition-group>
-      </template>
-    </tab-header-scroll>
-    <slot name="rightButton" />
-    <tab-header-button
-      :icon-class="maximum ? 'stack-tab__icon-restore' : 'stack-tab__icon-fullscreen'"
-      :title="t('VueStackTab.maximum')"
-      @click="maximum = !maximum"
-    />
-    <transition name="stack-tab-zoom" appear>
-      <context-menu
-        v-if="contextMenuShown"
-        key="tabMenuTrans"
-        :left="contextMenuData.left"
-        :top="contextMenuData.top"
-        :tab-item="contextMenuData.item as ITabItem"
-        :max="contextMenuData.max"
-        :index="contextMenuData.index"
-      />
-    </transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// @ts-nocheck
-import { inject, computed, ref, nextTick } from 'vue'
-import type { TransitionProps, Ref } from 'vue'
-import { TabScrollMode } from '../../model/TabModel'
-import type { ITabItem } from '../../model/TabModel'
-import ContextMenu from '../ContextMenu/index.vue'
-import useContextMenu from '../../hooks/useContextMenu'
-import useTabpanel from '../../hooks/useTabpanel'
-import TabHeaderItem from './TabHeaderItem.vue'
-import TabHeaderScroll from './TabHeaderScroll.vue'
-import TabHeaderButton from './TabHeaderButton.vue'
-import { useI18n } from 'vue-i18n-lite'
-// @ts-ignore
-const { t } = useI18n()
-const maximum = inject<boolean>('maximum')
-const emit = defineEmits(['active'])
-const scroll = ref()
-const { shown: contextMenuShown, contextMenuData, showContextMenu } = useContextMenu()
-
-const props = withDefaults(
-  defineProps<{
-    space: number
-    // tab的滚动方式
-    tabScrollMode?: TabScrollMode
-    // tab动画
-    tabTransition?: string | TransitionProps
-    contextmenu?: boolean | object
-    max?: number
-  }>(),
-  {
-    tabTransition: () => {
-      return {
-        name: 'stack-tab-zoom'
-      }
-    },
-    tabScrollMode: TabScrollMode.BOTH,
-    contextmenu: true,
-    max: 20
-  }
-)
-const { removeTab, active, tabs } = useTabpanel()
-
-// 转换tab动画
-const tabTrans = computed<TransitionProps>(() => {
-  if (typeof props.tabTransition === 'string') {
-    return {
-      name: props.tabTransition
-    } as TransitionProps
-  }
-  return props.tabTransition as TransitionProps
-})
-// 判断是否有滚动按钮
-const isScrollButton = computed<boolean>(() => {
-  return props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.BUTTON
-})
-// 判断是否可以使用滚轮
-const isScrollWheel =
-  props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.WHEEL
-
-// 关闭前，先判断是不最先中状态
-const closeTab = (item: ITabItem) => {
-  // emit('close', item)
-  if (item.closable) {
-    const activeId = removeTab(item.id)
-    emit('active', activeId)
-  }
-  contextMenuShown.value = false
-}
-
-const activeTab = (item: ITabItem, curActiveTab: Ref<HTMLElement>, isRoute: boolean) => {
-  if (scroll.value) {
-    nextTick(() => {
-      if (!scroll.value!.isInView(curActiveTab.value)) {
-        scroll.value!.scrollIntoView(curActiveTab.value)
-      }
-    })
-
-    active(item.id, isRoute)
-    emit('active', item.id)
-  }
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="stack-tab__header">
+    <slot name="leftButton" />
+    <tab-header-scroll
+      ref="scroll"
+      :space="space"
+      :is-scroll-wheel="isScrollWheel"
+      :is-scroll-button="isScrollButton"
+    >
+      <template #default>
+        <transition-group
+          key="tabItemTrans"
+          tag="ul"
+          class="stack-tab__nav"
+          v-bind="tabTrans"
+          appear
+        >
+          <tab-header-item
+            v-for="(item, index) in tabs"
+            :key="item.id"
+            :contextmenu="contextmenu"
+            :item="item"
+            @contextmenu.prevent="
+              (e: MouseEvent) => showContextMenu(e, item as ITabItem, index, tabs.length)
+            "
+            @click.middle.prevent="closeTab(item as ITabItem)"
+            @close="closeTab"
+            @active="activeTab"
+          />
+        </transition-group>
+      </template>
+    </tab-header-scroll>
+    <slot name="rightButton" />
+    <tab-header-button
+      :icon-class="maximum ? 'stack-tab__icon-restore' : 'stack-tab__icon-fullscreen'"
+      :title="t('VueStackTab.maximum')"
+      @click="maximum = !maximum"
+    />
+    <transition name="stack-tab-zoom" appear>
+      <context-menu
+        v-if="contextMenuShown"
+        key="tabMenuTrans"
+        :left="contextMenuData.left"
+        :top="contextMenuData.top"
+        :tab-item="contextMenuData.item as ITabItem"
+        :max="contextMenuData.max"
+        :index="contextMenuData.index"
+      />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { inject, computed, ref, nextTick } from 'vue'
+import type { TransitionProps, Ref } from 'vue'
+import { TabScrollMode } from '../../model/TabModel'
+import type { ITabItem } from '../../model/TabModel'
+import ContextMenu from '../ContextMenu/index.vue'
+import useContextMenu from '../../hooks/useContextMenu'
+import useTabpanel from '../../hooks/useTabpanel'
+import TabHeaderItem from './TabHeaderItem.vue'
+import TabHeaderScroll from './TabHeaderScroll.vue'
+import TabHeaderButton from './TabHeaderButton.vue'
+import { useI18n } from 'vue-i18n-lite'
+// @ts-ignore
+const { t } = useI18n()
+const maximum = inject<boolean>('maximum')
+const emit = defineEmits(['active'])
+const scroll = ref()
+const { shown: contextMenuShown, contextMenuData, showContextMenu } = useContextMenu()
+
+const props = withDefaults(
+  defineProps<{
+    space: number
+    // tab的滚动方式
+    tabScrollMode?: TabScrollMode
+    // tab动画
+    tabTransition?: string | TransitionProps
+    contextmenu?: boolean | object
+    max?: number
+  }>(),
+  {
+    tabTransition: () => {
+      return {
+        name: 'stack-tab-zoom'
+      }
+    },
+    tabScrollMode: TabScrollMode.BOTH,
+    contextmenu: true,
+    max: 20
+  }
+)
+const { removeTab, active, tabs } = useTabpanel()
+
+// 转换tab动画
+const tabTrans = computed<TransitionProps>(() => {
+  if (typeof props.tabTransition === 'string') {
+    return {
+      name: props.tabTransition
+    } as TransitionProps
+  }
+  return props.tabTransition as TransitionProps
+})
+// 判断是否有滚动按钮
+const isScrollButton = computed<boolean>(() => {
+  return props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.BUTTON
+})
+// 判断是否可以使用滚轮
+const isScrollWheel =
+  props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.WHEEL
+
+// 关闭前，先判断是不最先中状态
+const closeTab = (item: ITabItem) => {
+  // emit('close', item)
+  if (item.closable) {
+    const activeId = removeTab(item.id)
+    emit('active', activeId)
+  }
+  contextMenuShown.value = false
+}
+
+const activeTab = (item: ITabItem, curActiveTab: Ref<HTMLElement>, isRoute: boolean) => {
+  if (scroll.value) {
+    nextTick(() => {
+      if (!scroll.value!.isInView(curActiveTab.value)) {
+        scroll.value!.scrollIntoView(curActiveTab.value)
+      }
+    })
+
+    active(item.id, isRoute)
+    emit('active', item.id)
+  }
+}
+</script>
+
+<style scoped></style>

package/src/lib/hooks/useStackTab.ts

@@ -1,75 +1,102 @@
-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'
-let iframePath: string
-export default () => {
-  const router = useRouter()
-  const { active, hasTab, pageShown, reset, canAddTab } = useTabpanel()
-  const emitter = useEmitter()
-  /**
-   * 打开新的TAB页面
-   * @param tab
-   * @param to
-   */
-  const openNewTab = throttle((tab: ITabData) => {
-    return new Promise((resolve, reject) => {
-      if (!pageShown.value) {
-        reject()
-        return
-      }
-      const tabInfo = defu(tab, { refreshable: true, closable: true, iframe: false })
-
-      /**
-       * In the function of openNewTab, if the tab already 'ACTIVE' then do nothing.
-       */
-      if (hasTab(tabInfo.id!)) {
-        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
-      }
-      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
-      })
-      resolve(tabInfo.id)
-    })
-  }, 500)
-
-  const setIFramePath = (path: string) => {
-    iframePath = path
-  }
-
-  return { openNewTab, setIFramePath, active, reset }
-}
+import { useRouter } from 'vue-router'
+import useTabpanel from '../hooks/useTabpanel'
+import { throttle } from 'lodash-es'
+import type { ITabData, ITabItem, ITabPage } from '../model/TabModel'
+import { defu } from 'defu'
+import { unref } from 'vue'
+import { encodeTabInfo } from '../utils/TabIdHelper'
+import { uriDecode } from '../utils/UriHelper'
+import { ulid } from 'ulidx'
+import { MittType, useEmitter } from './useTabMitt'
+import { Stack } from '../model/TabModel'
+let iframePath: string
+export default () => {
+  const router = useRouter()
+  const { active, hasTab, pageShown, reset, canAddTab, tabs, addTab, initialed } = useTabpanel()
+  const emitter = useEmitter()
+  /**
+   * 打开新的TAB页面
+   * @param tab
+   * @param to
+   */
+  const openNewTab = throttle((tab: ITabData) => {
+    return new Promise((resolve, reject) => {
+      if (!pageShown.value) {
+        reject()
+        return
+      }
+      const tabInfo = defu(tab, { refreshable: true, closable: true, iframe: false })
+
+      /**
+       * In the function of openNewTab, if the tab already 'ACTIVE' then do nothing.
+       */
+      if (hasTab(tabInfo.id!)) {
+        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 }
+}

package/src/lib/hooks/useTabLoading.ts

@@ -1,18 +1,18 @@
-import { type ComponentInternalInstance, getCurrentInstance, onUnmounted } from 'vue'
-import { MittType, useEmitter } from '../hooks/useTabMitt'
-
-export default () => {
-  const emitter = useEmitter()
-  const { attrs } = getCurrentInstance() as ComponentInternalInstance
-  onUnmounted(() => {
-    closeTabLoading()
-  })
-  const openTabLoading = () => {
-    emitter.emit(MittType.PAGE_LOADING, { tId: attrs.tId, value: true })
-  }
-
-  const closeTabLoading = () => {
-    emitter.emit(MittType.PAGE_LOADING, { tId: attrs.tId, value: false })
-  }
-  return { openTabLoading, closeTabLoading }
-}
+import { type ComponentInternalInstance, getCurrentInstance, onUnmounted } from 'vue'
+import { MittType, useEmitter } from '../hooks/useTabMitt'
+
+export default () => {
+  const emitter = useEmitter()
+  const { attrs } = getCurrentInstance() as ComponentInternalInstance
+  onUnmounted(() => {
+    closeTabLoading()
+  })
+  const openTabLoading = () => {
+    emitter.emit(MittType.PAGE_LOADING, { tId: attrs.tId, value: true })
+  }
+
+  const closeTabLoading = () => {
+    emitter.emit(MittType.PAGE_LOADING, { tId: attrs.tId, value: false })
+  }
+  return { openTabLoading, closeTabLoading }
+}

package/src/lib/hooks/useTabMitt.ts

@@ -1,30 +1,30 @@
-import type { Emitter, EventType } from 'mitt'
-import mitt from 'mitt'
-import { type App, inject } from 'vue'
-// const emitter = mitt()
-// Cutsom type
-declare module '@vue/runtime-core' {
-  export interface ComponentCustomProperties {
-    $layerEmitter: Emitter<Record<EventType, unknown>>
-  }
-}
-const emitter: Emitter<Record<EventType, unknown>> = mitt()
-
-const plugin = {
-  install(app: App) {
-    // const emitter = mitt()
-    app.provide('tabEmitter', emitter)
-    // app.config.globalProperties.$emitter = emitter
-  }
-}
-// export const setEmitter = (mitter: Emitter<Record<EventType, unknown>>) => {
-//   emitter = mitter
-// }
-export const useEmitter = <T extends Record<EventType, unknown>>(): Emitter<T> => {
-  return inject('tabEmitter')!
-}
-export enum MittType {
-  PAGE_LOADING = 'PAGE_LOADING',
-  TAB_ACTIVE = 'TAB_ACTIVE'
-}
-export default plugin
+import type { Emitter, EventType } from 'mitt'
+import mitt from 'mitt'
+import { type App, inject } from 'vue'
+// const emitter = mitt()
+// Cutsom type
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    $layerEmitter: Emitter<Record<EventType, unknown>>
+  }
+}
+const emitter: Emitter<Record<EventType, unknown>> = mitt()
+
+const plugin = {
+  install(app: App) {
+    // const emitter = mitt()
+    app.provide('tabEmitter', emitter)
+    // app.config.globalProperties.$emitter = emitter
+  }
+}
+// export const setEmitter = (mitter: Emitter<Record<EventType, unknown>>) => {
+//   emitter = mitter
+// }
+export const useEmitter = <T extends Record<EventType, unknown>>(): Emitter<T> => {
+  return inject('tabEmitter')!
+}
+export enum MittType {
+  PAGE_LOADING = 'PAGE_LOADING',
+  TAB_ACTIVE = 'TAB_ACTIVE'
+}
+export default plugin

package/src/lib/hooks/useTabRouter.ts

@@ -7,17 +7,22 @@ import { type RouteLocationPathRaw, useRoute, useRouter } from 'vue-router'
 import useTabpanel from '@/lib/hooks/useTabpanel'
 import { uriDecode } from '@/lib/utils/UriHelper'
 export default () => {
-  const { attrs } = getCurrentInstance() as ComponentInternalInstance
-  const { pageShown, getTab, markDeletableCache, removeComponent, getComponent } = useTabpanel()
+  const { attrs, props } = getCurrentInstance() as ComponentInternalInstance
+  const { pageShown, getTab, markDeletableCache, removeComponent, getComponent, addPageScroller } =
+    useTabpanel()
   const route = useRoute()
   const router = useRouter()
   let currentId = ''
   // const currentPageId = ''
   let currentTab = ''
-
-  currentId = attrs.tId as string
+  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(
@@ -88,6 +93,7 @@ export default () => {
 
   return {
     forward,
-    backward
+    backward,
+    addScroller
   }
 }