vue-stack-tabs 0.1.9 → 0.1.10

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

@@ -1,134 +1,135 @@
-<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>
-import { inject, computed, ref } 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 localeI18n from '../../i18n'
-import useTabpanel from '../../hooks/useTabpanel'
-import TabHeaderItem from './TabHeaderItem.vue'
-import TabHeaderScroll from './TabHeaderScroll.vue'
-import TabHeaderButton from './TabHeaderButton.vue'
-// @ts-ignore
-const { t } = localeI18n().getI18n()
-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>) => {
-  if (scroll.value) {
-    if (!scroll.value!.isInView(curActiveTab.value)) {
-      scroll.value!.scrollIntoView(curActiveTab.value)
-    }
-
-    active(item.id)
-    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 } 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 localeI18n from '../../i18n'
+import useTabpanel from '../../hooks/useTabpanel'
+import TabHeaderItem from './TabHeaderItem.vue'
+import TabHeaderScroll from './TabHeaderScroll.vue'
+import TabHeaderButton from './TabHeaderButton.vue'
+// @ts-ignore
+const { t } = localeI18n().getI18n()
+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>) => {
+  if (scroll.value) {
+    if (!scroll.value!.isInView(curActiveTab.value)) {
+      scroll.value!.scrollIntoView(curActiveTab.value)
+    }
+
+    active(item.id)
+    emit('active', item.id)
+  }
+}
+</script>
+
+<style scoped></style>

package/src/lib/hooks/useContextMenu.ts

@@ -1,50 +1,50 @@
-import { onUnmounted, onMounted, ref, reactive, nextTick } from 'vue'
-import type { ITabItem } from '../model/TabModel'
-export default () => {
-  const contextMenuData = reactive({
-    item: {},
-    index: -1,
-    left: 0,
-    top: 0,
-    max: 0
-  })
-  const shown = ref<boolean>(false)
-
-  onMounted(() => {
-    document.addEventListener('click', clickOutSide)
-  })
-  onUnmounted(() => {
-    document.removeEventListener('click', clickOutSide)
-  })
-
-  const showContextMenu = async (e: MouseEvent, item: ITabItem, index: number, max: number) => {
-    // 关闭已打开的菜单
-    shown.value = false
-
-    await nextTick(() => {
-      const { clientY: top, clientX: left } = e
-      shown.value = true
-      Object.assign(contextMenuData, { item, index, top, left, max })
-
-      console.log('showContextMenu in callback')
-    })
-
-    // .then(() => {
-
-    // })
-  }
-
-  const clickOutSide = (ev: MouseEvent) => {
-    const classList = (ev.target as Element).classList
-    if (classList.contains('stack-tab__contextmenu')) {
-      return
-    }
-    shown.value = false
-  }
-
-  return {
-    shown,
-    contextMenuData,
-    showContextMenu
-  }
-}
+import { onUnmounted, onMounted, ref, reactive, nextTick } from 'vue'
+import type { ITabItem } from '../model/TabModel'
+export default () => {
+  const contextMenuData = reactive({
+    item: {},
+    index: -1,
+    left: 0,
+    top: 0,
+    max: 0
+  })
+  const shown = ref<boolean>(false)
+
+  onMounted(() => {
+    document.addEventListener('click', clickOutSide)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('click', clickOutSide)
+  })
+
+  const showContextMenu = async (e: MouseEvent, item: ITabItem, index: number, max: number) => {
+    // 关闭已打开的菜单
+    shown.value = false
+
+    await nextTick(() => {
+      const { clientY: top, clientX: left } = e
+      shown.value = true
+      Object.assign(contextMenuData, { item, index, top, left, max })
+
+      console.log('showContextMenu in callback')
+    })
+
+    // .then(() => {
+
+    // })
+  }
+
+  const clickOutSide = (ev: MouseEvent) => {
+    const classList = (ev.target as Element).classList
+    if (classList.contains('stack-tab__contextmenu')) {
+      return
+    }
+    shown.value = false
+  }
+
+  return {
+    shown,
+    contextMenuData,
+    showContextMenu
+  }
+}

package/src/lib/hooks/useStackTab.ts

@@ -1,65 +1,65 @@
-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'
-let iframePath: string
-export default () => {
-  const router = useRouter()
-  const { active, hasTab, pageShown, reset } = useTabpanel()
-
-  /**
-   * 打开新的TAB页面
-   * @param tab
-   * @param to
-   */
-  const openNewTab = throttle(async (tab: ITabData) => {
-    if (!pageShown.value) {
-      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!)) {
-      active(tabInfo.id!)
-      return
-    }
-    if (!tabInfo.id) {
-      tabInfo.id = ulid()
-    }
-    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
-    })
-    return 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 } from '../model/TabModel'
+import { defu } from 'defu'
+import { encodeTabInfo } from '../utils/TabIdHelper'
+import { uriDecode } from '../utils/UriHelper'
+import { ulid } from 'ulidx'
+let iframePath: string
+export default () => {
+  const router = useRouter()
+  const { active, hasTab, pageShown, reset } = useTabpanel()
+
+  /**
+   * 打开新的TAB页面
+   * @param tab
+   * @param to
+   */
+  const openNewTab = throttle(async (tab: ITabData) => {
+    if (!pageShown.value) {
+      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!)) {
+      active(tabInfo.id!)
+      return
+    }
+    if (!tabInfo.id) {
+      tabInfo.id = ulid()
+    }
+    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
+    })
+    return tabInfo.id
+  }, 500)
+
+  const setIFramePath = (path: string) => {
+    iframePath = path
+  }
+
+  return { openNewTab, setIFramePath, active, reset }
+}

package/src/lib/hooks/useTabLoading.ts

@@ -1,35 +1,34 @@
-import { useLoading } from '../components/OverlayLoading'
-import type { ActiveLoader } from 'vue-loading-overlay'
-import { type ComponentInternalInstance, getCurrentInstance, onUnmounted } from 'vue'
-
-export default () => {
-  const $loading = useLoading()
-  const { attrs } = getCurrentInstance() as ComponentInternalInstance
-  let loadingInstance: ActiveLoader | null = null
-  onUnmounted(() => {
-    closeTabLoading()
-  })
-  const openTabLoading = () => {
-    const container = document.querySelector(`#${attrs.tId}`)
-    if (loadingInstance === null) {
-      loadingInstance = $loading.show({
-        canCancel: false,
-        isFullPage: false,
-        height: 85,
-        width: 85,
-        loader: 'spinner',
-        color: '#007bff',
-
-        container: container!
-      })
-    }
-  }
-
-  const closeTabLoading = () => {
-    if (loadingInstance !== null) {
-      loadingInstance.hide()
-      loadingInstance = null
-    }
-  }
-  return { openTabLoading, closeTabLoading }
-}
+import { useLoading } from '../components/OverlayLoading'
+import { type ComponentInternalInstance, getCurrentInstance, onUnmounted } from 'vue'
+
+export default () => {
+  const $loading = useLoading()
+  const { attrs } = getCurrentInstance() as ComponentInternalInstance
+  let loadingInstance: any | null = null
+  onUnmounted(() => {
+    closeTabLoading()
+  })
+  const openTabLoading = () => {
+    const container = document.querySelector(`#${attrs.tId}`)
+    if (loadingInstance === null) {
+      loadingInstance = $loading.show({
+        canCancel: false,
+        isFullPage: false,
+        height: 85,
+        width: 85,
+        loader: 'spinner',
+        color: '#007bff',
+
+        container: container!
+      })
+    }
+  }
+
+  const closeTabLoading = () => {
+    if (loadingInstance !== null) {
+      loadingInstance.hide()
+      loadingInstance = null
+    }
+  }
+  return { openTabLoading, closeTabLoading }
+}