vue-stack-tabs 0.1.0

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

@@ -0,0 +1,63 @@
+<template>
+  <li
+    ref="curtab"
+    class="stack-tab__item"
+    :class="{
+      'is-active': item.active,
+      'is-icon': item.closable
+    }"
+    @click="activeTab"
+  >
+    <!--    <div v-if="!!icon" class="stack-tab__item-icon" :class="icon"></div>-->
+    <div class="stack-tab__item-title">
+      <div class="stack-tab__item-title-content" :title="title">
+        {{ title }}
+      </div>
+    </div>
+    <div
+      v-if="item.closable"
+      class="stack-tab__icon-close-fill stack-tab__item-button"
+      :title="t('VueStackTab.close')"
+      @click.stop="closeTab"
+    />
+  </li>
+</template>
+
+<script setup lang="ts" name="TabHeaderItem">
+import { computed, ref, watch } from 'vue'
+import type { ITabItem } from '@/lib/model/TabModel'
+import localeI18n from '@/lib/i18n'
+// 消息
+const emit = defineEmits(['close', 'active'])
+
+const { t } = localeI18n().getI18n()
+const curtab = ref<HTMLElement>()
+const props = defineProps<{
+  item: ITabItem
+}>()
+/**
+ * 如果Active为true，就看看
+ */
+watch(
+  () => props.item.active,
+  (val) => {
+    if (val) {
+      activeTab()
+    }
+  }
+)
+const title = computed<string>(() => {
+  return props.item.title || t('undefined')
+})
+
+const closeTab = () => {
+  emit('close', props.item)
+}
+const activeTab = () => {
+  // if (!props.active) {
+  emit('active', props.item, curtab)
+  // }
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,240 @@
+<template>
+  <tab-header-button
+    v-if="isButtonVisibled"
+    icon-class="stack-tab__icon-left-arrow"
+    :disabled="isDisabledLeftButton"
+    @click="!isDisabledLeftButton && onButton(-1 * space)"
+  />
+  <div ref="headerScroll" class="stack-tab__scroll" @wheel.prevent="onWheel">
+    <div
+      ref="container"
+      class="stack-tab__scroll-container"
+      :class="{
+        'stack-tab__shadow-inset-left': !isDisabledLeftButton && isDisabledRightButton,
+        'stack-tab__shadow-inset-right': !isDisabledRightButton && isDisabledLeftButton,
+        'stack-tab__shadow-inset-all': !isDisabledLeftButton && !isDisabledRightButton
+      }"
+      @scroll.passive="update"
+    >
+      <slot />
+    </div>
+    <div
+      v-show="hasScroller"
+      ref="bar"
+      class="stack-tab__scrollbar"
+      :class="{ 'is-dragging': scrollDragging }"
+    >
+      <div
+        ref="thumb"
+        class="stack-tab__scrollbar-thumb"
+        :class="{ 'is-dragging': scrollDragging }"
+        :style="{
+          width: `${thumbWidth}px`,
+          transform: `translateX(${thumbLeft}px)`
+        }"
+        @mousedown.prevent="onDragStart"
+      />
+    </div>
+  </div>
+  <tab-header-button
+    v-if="isButtonVisibled"
+    icon-class="stack-tab__icon-right-arrow"
+    :disabled="isDisabledRightButton"
+    @click="!isDisabledRightButton && onButton(space!)"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, reactive, onMounted, watch, onUnmounted } from 'vue'
+import { ResizeObserver } from '@juggle/resize-observer'
+import type { ScrollData, DragData } from '@/lib/model/TabModel'
+import { _scrollTo, _scrollIntoView } from '@/lib/utils/TabScrollHelper'
+import TabHeaderButton from '@/lib/components/TabHeader/TabHeaderButton.vue'
+
+// ref
+const container = ref<HTMLElement | null>(null)
+const bar = ref<HTMLElement | null>(null)
+const thumb = ref<HTMLElement | null>(null)
+const scrollDragging = ref<boolean>(false)
+const isDisabledLeftButton = ref<boolean>(false)
+const isDisabledRightButton = ref<boolean>(false)
+const isButtonVisibled = ref<boolean>(true)
+const headerScroll = ref<HTMLElement>()
+const props = withDefaults(
+  defineProps<{
+    // 每次移动距离
+    space?: number
+    isScrollWheel?: boolean
+    isScrollButton?: boolean
+  }>(),
+  {
+    space: 300,
+    isScrollWheel: true,
+    isScrollButton: true
+  }
+)
+/**
+ * 滚动条数据
+ */
+const scrollData = reactive<ScrollData>({
+  clientWidth: 0,
+  scrollWidth: 0,
+  scrollLeft: 0
+})
+const dragData = reactive<DragData>({
+  thumbLeft: 0,
+  startScrollLeft: 0,
+  startThumbLeft: 0,
+  startPageX: 0
+})
+
+// 监控滚动条数据用于启用/禁用按钮
+watch(scrollData, (newValue) => {
+  setScrollButton(newValue)
+})
+
+const setScrollButton = (scrollData: ScrollData) => {
+  isDisabledLeftButton.value = scrollData.scrollLeft <= 10
+  isDisabledRightButton.value =
+    scrollData.clientWidth + scrollData.scrollLeft - scrollData.scrollWidth >= -10
+  isButtonVisibled.value = scrollData.scrollWidth !== scrollData.clientWidth
+}
+
+// 计算属性
+// 是否拥有滚动条
+const hasScroller = computed<boolean>(() => {
+  return scrollData.scrollWidth > scrollData.clientWidth
+})
+
+// 滑块宽度
+const thumbWidth = computed<number>(() => {
+  if (!hasScroller.value) return 0
+
+  const { clientWidth, scrollWidth } = scrollData
+  return (clientWidth / scrollWidth) * clientWidth
+})
+
+// 滑块 left
+const thumbLeft = computed(() => {
+  if (!hasScroller.value) return 0
+
+  const { clientWidth, scrollWidth, scrollLeft } = scrollData
+
+  return (clientWidth - thumbWidth.value) * (scrollLeft / (scrollWidth - clientWidth))
+})
+
+// 方法
+// 更新滚动数据
+const update = () => {
+  // 判断 container是否为空，主空直接返回
+  if (container.value === null || container.value === undefined) {
+    return
+  }
+  const { clientWidth, scrollWidth, scrollLeft } = container.value
+
+  Object.assign(scrollData, { clientWidth, scrollWidth, scrollLeft })
+}
+const resizeUpdate = new ResizeObserver(() => {
+  update()
+  const cur = container.value?.querySelector('.stack-tab__item.is-active')
+  if (cur) {
+    if (!isInView(cur as HTMLElement)) {
+      scrollIntoView(cur as HTMLElement)
+    }
+  }
+})
+const tabsUpdate = new ResizeObserver(() => {
+  if (!hasScroller.value) {
+    const cur = container.value?.querySelector('.stack-tab__item.is-active')
+    if (cur) {
+      if (!isInView(cur as HTMLElement)) {
+        scrollIntoView(cur as HTMLElement)
+      }
+    }
+  }
+  update()
+})
+// 滚动到指定位置
+const scrollTo = (left: number, smooth = true) => {
+  _scrollTo({ wrap: container.value, left, smooth })
+}
+
+const onButton = (space: number) => {
+  scrollTo(container.value!.scrollLeft + space)
+}
+// 页签鼠标滚动
+const onWheel = (e: WheelEvent) => {
+  const isWheelUp = e.deltaY < 0
+  scrollTo(container.value!.scrollLeft + (isWheelUp ? -props.space : props.space))
+}
+// 拖拽
+const onDragStart = (e: MouseEvent) => {
+  Object.assign(dragData, {
+    startPageX: e.pageX,
+    startScrollLeft: container.value?.scrollLeft,
+    startThumbLeft: thumbLeft.value,
+    thumbLeft: thumbLeft.value
+  })
+  scrollDragging.value = true
+  document.addEventListener('mousemove', onDragMove)
+  document.addEventListener('mouseup', onDragEnd)
+}
+
+// 拖拽移动
+const onDragMove = (e: MouseEvent) => {
+  const { clientWidth, scrollWidth } = scrollData
+  let thumbLeft = dragData.startThumbLeft + e.pageX - dragData.startPageX
+  const maxThumbLeft = clientWidth - thumbWidth.value
+
+  if (thumbLeft < 0) {
+    thumbLeft = 0
+  } else if (thumbLeft > maxThumbLeft) {
+    thumbLeft = maxThumbLeft
+  }
+  // 更新滑块定位
+  dragData.thumbLeft = thumbLeft
+  // 滚动
+  scrollTo((thumbLeft * (scrollWidth - clientWidth)) / (clientWidth - thumbWidth.value), false)
+  e.preventDefault()
+}
+// 拖拽结束
+const onDragEnd = (e: MouseEvent) => {
+  scrollDragging.value = false
+  document.removeEventListener('mousemove', onDragMove)
+  document.removeEventListener('mouseup', onDragEnd)
+
+  e.preventDefault()
+}
+onMounted(() => {
+  resizeUpdate.observe(headerScroll.value as Element)
+  const tabNav = container.value?.querySelector('.stack-tab__nav')
+  tabsUpdate.observe(tabNav!)
+})
+onUnmounted(() => {
+  resizeUpdate.disconnect()
+  tabsUpdate.disconnect()
+})
+
+// 滚动到元素
+const scrollIntoView = (el: HTMLElement) => {
+  _scrollIntoView({ el, wrap: container, block: 'end', inline: 'center' })
+}
+
+// 判断子节点是否完全在可视区域
+const isInView = (el: HTMLElement) => {
+  if (!hasScroller.value) {
+    return true
+  }
+  const offsetLeft = el.offsetLeft
+  const scrollLeft = container.value!.scrollLeft
+
+  return !(
+    offsetLeft < scrollLeft ||
+    offsetLeft + el.clientWidth > scrollLeft + container.value!.clientWidth
+  )
+}
+
+defineExpose({ scrollIntoView, isInView })
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,134 @@
+<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 '@/lib/model/TabModel'
+import type { ITabItem } from '@/lib/model/TabModel'
+import ContextMenu from '@/lib/components/ContextMenu/index.vue'
+import useContextMenu from '@/lib/hooks/useContextMenu'
+import localeI18n from '@/lib/i18n'
+import useTabpanel from '@/lib/hooks/useTabpanel'
+import TabHeaderItem from '@/lib/components/TabHeader/TabHeaderItem.vue'
+import TabHeaderScroll from '@/lib/components/TabHeader/TabHeaderScroll.vue'
+import TabHeaderButton from '@/lib/components/TabHeader/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

@@ -0,0 +1,50 @@
+import { onUnmounted, onMounted, ref, reactive, nextTick } from 'vue'
+import type { ITabItem } from '@/lib/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

@@ -0,0 +1,65 @@
+import { useRouter } from 'vue-router'
+import useTabpanel from '@/lib/hooks/useTabpanel'
+import { throttle } from 'lodash-es'
+import type { ITabData } from '@/lib/model/TabModel'
+import { defu } from 'defu'
+import { encodeTabInfo } from '@/lib/utils/TabIdHelper'
+import { uriDecode } from '@/lib/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 = await 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

@@ -0,0 +1,48 @@
+import { useLoading } from 'vue-loading-overlay'
+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}`)
+    // const wrappers = document.getElementsByClassName('cache-page-wrapper')
+    // for(const wrapper of wrappers){
+    //   const childs = wrapper.children
+    //   for(const child of childs){
+    //     if(child.getAttribute("tId")===attrs.tId){
+    //       container=wrapper
+    //       break;
+    //     }
+    //   }
+    //   if(container!==null){
+    //     break;
+    //   }
+    // }
+    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 }
+}

package/src/lib/hooks/useTabRouter.ts

@@ -0,0 +1,95 @@
+import { defu } from 'defu'
+
+import { getCurrentInstance } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import type { TabRouteLocationRaw } from '@/lib/model/TabModel'
+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 route = useRoute()
+  const router = useRouter()
+  let currentId = ''
+  // const currentPageId = ''
+  let currentTab = ''
+
+  currentId = attrs.tId as string
+  // currentPageId = attrs.pId as string
+  currentTab = route.query.__tab as string
+
+  const forward = (to: TabRouteLocationRaw) => {
+    pageShown.value = false
+    const query = defu(
+      {
+        __tab: currentTab
+      },
+      to.query
+    )
+    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)
+    }
+    router.push({
+      path: pageRoute!.path,
+      query: pageRoute!.query
+    })
+  }
+
+  return {
+    forward,
+    backward
+  }
+}