vue-stack-tabs 1.1.0 → 1.3.1

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

@@ -1,23 +1,49 @@
 <template>
   <li
     ref="tabElementRef"
+    role="presentation"
     class="stack-tab__item"
     :class="{
       'is-active': item.active,
-      'is-icon': item.closable
+      'is-icon': item.closable,
+      'is-dragging': dragging,
+      'is-drop-before': dropPosition === 'before',
+      'is-drop-after': dropPosition === 'after'
     }"
-    @click="handleActivate(true)"
+    :draggable="true"
+    @click.self="handleActivate(true)"
+    @contextmenu="$emit('contextmenu', $event)"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+    @dragover.prevent="$emit('dragover', item, $event)"
+    @drop.prevent="$emit('drop', item, $event)"
   >
-    <!--    <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
+    <button
+      :id="getStackTabTabId(item.id)"
+      type="button"
+      role="tab"
+      class="stack-tab__item-tab"
+      :data-tab-id="item.id"
+      :aria-controls="getStackTabPanelId(item.id)"
+      :aria-selected="item.active ? 'true' : 'false'"
+      :tabindex="item.active ? 0 : -1"
+      :title="title"
+      @click="handleActivate(true)"
+      @keydown="handleTabKeydown"
+    >
+      <span class="stack-tab__item-title">
+        <span class="stack-tab__item-title-content">
+          {{ title }}
+        </span>
+      </span>
+    </button>
+    <button
       v-if="item.closable"
+      type="button"
       class="stack-tab__icon-close-fill stack-tab__item-button"
       :title="t('VueStackTab.close')"
+      :aria-label="`${t('VueStackTab.close')} ${title}`"
+      :tabindex="item.active ? 0 : -1"
       @click.stop="handleClose"
     />
   </li>
@@ -30,16 +56,27 @@
 -->
 <script setup lang="ts">
 import { computed, ref, onUnmounted } from 'vue'
-import type { ITabItem } from '@/lib/model/TabModel'
+import type { ITabItem } from '../../model/TabModel'
 import { TabEventType, useTabEmitter } from '../../hooks/useTabEventBus'
+import { getStackTabPanelId, getStackTabTabId } from '../../utils/stackTabsA11y'
 import { useI18n } from 'vue-i18n-lite'
-const emit = defineEmits(['close', 'active'])
+const emit = defineEmits([
+  'close',
+  'active',
+  'contextmenu',
+  'dragstart',
+  'dragover',
+  'drop',
+  'dragend'
+])
 const emitter = useTabEmitter()
 const { t } = useI18n()
 /** 当前标签 DOM 元素，用于滚动到可视区域 */
 const tabElementRef = ref<HTMLElement>()
+const dragging = ref(false)
 const props = defineProps<{
   item: ITabItem
+  dropPosition?: 'before' | 'after'
 }>()
 
 /** TAB_ACTIVE 事件 payload */
@@ -50,24 +87,44 @@ const handleTabActiveEvent = (payload: TabActivePayload) => {
     handleActivate(payload.isRoute ?? true)
   }
 }
-const eventType = TabEventType.TAB_ACTIVE as unknown as Parameters<typeof emitter.on>[0]
-emitter.on(eventType, handleTabActiveEvent as (e: unknown) => void)
+emitter.on(TabEventType.TAB_ACTIVE, handleTabActiveEvent)
 onUnmounted(() => {
-  emitter.off(eventType, handleTabActiveEvent as (e: unknown) => void)
+  emitter.off(TabEventType.TAB_ACTIVE, handleTabActiveEvent)
 })
 /** 显示标题，空时用 i18n 占位 */
-const title = computed<string>(() => {
-  return props.item.title || t('undefined')
-})
+const title = computed<string>(() => props.item.title || t('VueStackTab.undefined'))
 
 /** 关闭按钮点击，向父级 emit close */
 const handleClose = () => {
   emit('close', props.item)
 }
+const handleDragStart = (event: DragEvent) => {
+  dragging.value = true
+  event.dataTransfer?.setData('text/plain', props.item.id)
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  emit('dragstart', props.item, event)
+}
+const handleDragEnd = (event: DragEvent) => {
+  dragging.value = false
+  emit('dragend', props.item, event)
+}
 /** 激活当前标签，向父级 emit active 并传递 DOM 引用 */
 const handleActivate = (isRoute = true) => {
   emit('active', props.item, tabElementRef.value, isRoute)
 }
+
+const handleTabKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleActivate(true)
+    return
+  }
+
+  if ((event.key === 'Delete' || event.key === 'Backspace') && props.item.closable) {
+    event.preventDefault()
+    handleClose()
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -8,6 +8,8 @@
     v-if="isScrollButtonVisible"
     icon-class="stack-tab__icon-left-arrow"
     :disabled="isDisabledLeftButton"
+    :title="t('VueStackTab.scrollLeft')"
+    :aria-label="t('VueStackTab.scrollLeft')"
     @click="!isDisabledLeftButton && handleScrollButtonClick(-1 * space)"
   />
   <div ref="headerScroll" class="stack-tab__scroll" @wheel.passive="handleWheelScroll">
@@ -45,19 +47,23 @@
     v-if="isScrollButtonVisible"
     icon-class="stack-tab__icon-right-arrow"
     :disabled="isDisabledRightButton"
+    :title="t('VueStackTab.scrollRight')"
+    :aria-label="t('VueStackTab.scrollRight')"
     @click="!isDisabledRightButton && handleScrollButtonClick(space!)"
   />
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n-lite'
 import { computed, ref, reactive, onMounted, watch, onUnmounted } from 'vue'
-import { ResizeObserver } from '@juggle/resize-observer'
-import type { ScrollData, DragData } from '@/lib/model/TabModel'
+import type { ScrollData, DragData } from '../../model/TabModel'
 import {
   scrollTo as scrollToUtil,
   scrollIntoView as scrollIntoViewUtil
-} from '@/lib/utils/scrollUtils'
-import TabHeaderButton from '@/lib/components/TabHeader/TabHeaderButton.vue'
+} from '../../utils/scrollUtils'
+import TabHeaderButton from './TabHeaderButton.vue'
+
+const { t } = useI18n()
 
 /** 标签列表滚动容器 */
 const container = ref<HTMLElement | null>(null)
@@ -71,8 +77,8 @@ const scrollDragging = ref<boolean>(false)
 const isDisabledLeftButton = ref<boolean>(false)
 /** 右箭头是否禁用（已到最右） */
 const isDisabledRightButton = ref<boolean>(false)
-/** 是否有横向滚动条（内容超出时显示左右箭头） */
-const isScrollButtonVisible = ref<boolean>(true)
+/** 是否显示左右滚动按钮：必须启用按钮模式且内容横向溢出 */
+const isScrollButtonVisible = ref<boolean>(false)
 /** 外层滚动区域，用于 ResizeObserver */
 const headerScroll = ref<HTMLElement>()
 const props = withDefaults(
@@ -109,12 +115,18 @@ watch(scrollData, (data) => {
   updateScrollButtonState(data)
 })
 
-/** 根据滚动位置更新左右箭头禁用状态及滚动条可见性 */
+watch(
+  () => props.isScrollButton,
+  () => updateScrollButtonState(scrollData)
+)
+
+/** 根据滚动位置更新左右箭头禁用状态及滚动按钮可见性 */
 const updateScrollButtonState = (data: ScrollData) => {
+  const hasHorizontalOverflow = data.scrollWidth > data.clientWidth
+
   isDisabledLeftButton.value = data.scrollLeft <= 10
-  isDisabledRightButton.value =
-    data.clientWidth + data.scrollLeft - data.scrollWidth >= -10
-  isScrollButtonVisible.value = data.scrollWidth !== data.clientWidth
+  isDisabledRightButton.value = data.clientWidth + data.scrollLeft - data.scrollWidth >= -10
+  isScrollButtonVisible.value = props.isScrollButton && hasHorizontalOverflow
 }
 
 /** 内容是否超出容器宽度，需要显示滚动条 */
@@ -148,21 +160,16 @@ const updateScrollState = () => {
 
 /** 确保激活的标签在可视区域内 */
 const ensureActiveTabInView = () => {
-  const activeTabEl = container.value?.querySelector('.stack-tab__item.is-active') as HTMLElement | null
+  const activeTabEl = container.value?.querySelector(
+    '.stack-tab__item.is-active'
+  ) as HTMLElement | null
   if (activeTabEl && !isInView(activeTabEl)) {
     scrollIntoView(activeTabEl)
   }
 }
 
-const scrollContainerResizeObserver = new ResizeObserver(() => {
-  updateScrollState()
-  ensureActiveTabInView()
-})
-
-const tabListResizeObserver = new ResizeObserver(() => {
-  if (!hasScroller.value) ensureActiveTabInView()
-  updateScrollState()
-})
+let scrollContainerResizeObserver: ResizeObserver | null = null
+let tabListResizeObserver: ResizeObserver | null = null
 /** 滚动到指定 left 位置 */
 const scrollTo = (left: number, smooth = true) => {
   scrollToUtil({ wrap: container.value, left, top: 0, smooth })
@@ -173,8 +180,10 @@ const handleScrollButtonClick = (delta: number) => {
 }
 
 const handleWheelScroll = (e: WheelEvent) => {
+  if (!props.isScrollWheel || !container.value) return
+
   const isScrollUp = e.deltaY < 0
-  scrollTo(container.value!.scrollLeft + (isScrollUp ? -props.space : props.space))
+  scrollTo(container.value.scrollLeft + (isScrollUp ? -props.space : props.space))
 }
 
 const handleScrollbarDragStart = (e: MouseEvent) => {
@@ -213,13 +222,26 @@ const handleScrollbarDragEnd = () => {
 }
 
 onMounted(() => {
-  scrollContainerResizeObserver.observe(headerScroll.value as Element)
+  if (typeof ResizeObserver === 'undefined') return
+
+  scrollContainerResizeObserver = new ResizeObserver(() => {
+    updateScrollState()
+    ensureActiveTabInView()
+  })
+  tabListResizeObserver = new ResizeObserver(() => {
+    if (!hasScroller.value) ensureActiveTabInView()
+    updateScrollState()
+  })
+
+  if (headerScroll.value) scrollContainerResizeObserver.observe(headerScroll.value)
   const tabNav = container.value?.querySelector('.stack-tab__nav')
-  tabListResizeObserver.observe(tabNav!)
+  if (tabNav) tabListResizeObserver.observe(tabNav)
 })
 onUnmounted(() => {
-  scrollContainerResizeObserver.disconnect()
-  tabListResizeObserver.disconnect()
+  scrollContainerResizeObserver?.disconnect()
+  tabListResizeObserver?.disconnect()
+  scrollContainerResizeObserver = null
+  tabListResizeObserver = null
 })
 
 const scrollIntoView = (el: HTMLElement) => {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="stack-tab__header">
+  <div ref="headerRef" class="stack-tab__header">
     <slot name="leftButton" />
     <tab-header-scroll
       ref="scrollContainerRef"
@@ -12,20 +12,30 @@
           key="tab-list-transition"
           tag="ul"
           class="stack-tab__nav"
+          role="tablist"
+          aria-orientation="horizontal"
           v-bind="tabTransitionProps"
           appear
+          @keydown="handleTabListKeydown"
+          @dragover.prevent="handleTabListDragOver"
+          @drop.prevent="handleTabListDrop"
         >
           <tab-header-item
             v-for="(item, index) in tabs"
             :key="item.id"
-            :contextmenu="contextmenu"
             :item="item as ITabItem"
-            @contextmenu.prevent="
-              (e: MouseEvent) => showContextMenu(e, item as unknown as ITabItem, index, tabs.length)
+            :drop-position="dropIndicator?.tabId === item.id ? dropIndicator.position : undefined"
+            @contextmenu="
+              (e: MouseEvent) =>
+                handleTabContextMenu(e, item as unknown as ITabItem, index, tabs.length)
             "
             @click.middle.prevent="handleCloseTab(item as ITabItem)"
             @close="handleCloseTab"
             @active="handleActivateTab"
+            @dragstart="handleTabDragStart"
+            @dragover="handleTabDragOver"
+            @drop="handleTabDrop"
+            @dragend="handleTabDragEnd"
           />
         </transition-group>
       </template>
@@ -33,7 +43,8 @@
     <slot name="rightButton" />
     <tab-header-button
       :icon-class="maximum ? 'stack-tab__icon-restore' : 'stack-tab__icon-fullscreen'"
-      :title="t('VueStackTab.maximum')"
+      :title="maximum ? t('VueStackTab.restore') : t('VueStackTab.maximum')"
+      :aria-label="maximum ? t('VueStackTab.restore') : t('VueStackTab.maximum')"
       @click="maximum = !maximum"
     />
     <transition name="stack-tab-zoom" appear>
@@ -45,6 +56,8 @@
         :tab-item="contextMenuData.item as ITabItem"
         :max="contextMenuData.max"
         :index="contextMenuData.index"
+        :context-menu="normalizedContextMenu"
+        :restore-focus-element="contextMenuTriggerElement"
         @close="handleCloseContextMenu"
       />
     </transition>
@@ -61,7 +74,7 @@
 import { inject, computed, ref, nextTick } from 'vue'
 import type { TransitionProps } from 'vue'
 import { TabScrollMode } from '../../model/TabModel'
-import type { ITabItem } from '../../model/TabModel'
+import type { IContextMenu, ITabItem } from '../../model/TabModel'
 import ContextMenu from '../ContextMenu/index.vue'
 import useContextMenu from '../../hooks/useContextMenu'
 import useTabActions from '../../hooks/useTabActions'
@@ -69,13 +82,16 @@ import TabHeaderItem from './TabHeaderItem.vue'
 import TabHeaderScroll from './TabHeaderScroll.vue'
 import TabHeaderButton from './TabHeaderButton.vue'
 import { useI18n } from 'vue-i18n-lite'
+import { maximumKey } from '../../hooks/stackTabsContext'
 const { t } = useI18n()
 /** 是否最大化，由上层 provide */
-const maximum = inject<boolean>('maximum')
+const maximum = inject(maximumKey, ref(false))
 const emit = defineEmits(['active'])
 /** 滚动容器 ref，用于调用 scrollIntoView / isInView */
 const scrollContainerRef = ref<InstanceType<typeof TabHeaderScroll>>()
+const headerRef = ref<HTMLElement>()
 const { shown: contextMenuShown, contextMenuData, showContextMenu } = useContextMenu()
+const contextMenuTriggerElement = ref<HTMLElement | null>(null)
 /** 关闭右键菜单 */
 const handleCloseContextMenu = () => {
   contextMenuShown.value = false
@@ -100,7 +116,97 @@ const props = withDefaults(
     max: 20
   }
 )
-const { closeTab, activeTab, tabs } = useTabActions()
+const { closeTab, activeTab, moveTab, tabs } = useTabActions()
+const draggingTabId = ref<string | null>(null)
+type DropPosition = 'before' | 'after'
+const dropIndicator = ref<{ tabId: string; position: DropPosition } | null>(null)
+
+/** 右键菜单是否启用；仅 false 明确禁用，其余旧对象值保持启用以兼容历史写法 */
+const isContextMenuEnabled = computed<boolean>(() => props.contextmenu !== false)
+
+/** 自定义菜单数组；非数组对象按历史宽类型兼容为默认菜单，不抛错 */
+const normalizedContextMenu = computed<IContextMenu[]>(() => {
+  return Array.isArray(props.contextmenu) ? props.contextmenu : []
+})
+
+/** 右键标签：禁用时不阻止浏览器默认菜单，启用时打开组件菜单 */
+const getContextMenuFocusElement = (event: MouseEvent): HTMLElement | null => {
+  const eventTarget = event.target instanceof Element ? event.target : null
+  const targetTab = eventTarget?.closest<HTMLElement>('[role="tab"]')
+  if (targetTab) return targetTab
+
+  const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null
+  return currentTarget?.querySelector<HTMLElement>('[role="tab"]') ?? null
+}
+
+const handleTabContextMenu = (e: MouseEvent, item: ITabItem, index: number, max: number) => {
+  if (!isContextMenuEnabled.value) return
+
+  e.preventDefault()
+  contextMenuTriggerElement.value = getContextMenuFocusElement(e)
+  showContextMenu(e, item, index, max)
+}
+
+/** 原生拖放只在释放鼠标时更新顺序，避免拖动经过标签时反复变更响应式列表。 */
+const handleTabDragStart = (item: ITabItem) => {
+  draggingTabId.value = item.id
+}
+
+const handleTabDragOver = (item: ITabItem, event: DragEvent) => {
+  if (!draggingTabId.value || draggingTabId.value === item.id) {
+    dropIndicator.value = null
+    return
+  }
+  const tabElement = event.currentTarget instanceof HTMLElement ? event.currentTarget : null
+  if (!tabElement) return
+
+  const { left, width } = tabElement.getBoundingClientRect()
+  dropIndicator.value = {
+    tabId: item.id,
+    position: event.clientX < left + width / 2 ? 'before' : 'after'
+  }
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+}
+
+const handleTabDrop = (target: ITabItem) => {
+  const sourceId = draggingTabId.value
+  const indicator = dropIndicator.value
+  draggingTabId.value = null
+  dropIndicator.value = null
+  if (!sourceId || sourceId === target.id || indicator?.tabId !== target.id) return
+  const sourceIndex = tabs.value.findIndex((tab) => tab.id === sourceId)
+  const targetIndex = tabs.value.findIndex((tab) => tab.id === target.id)
+  if (sourceIndex < 0 || targetIndex < 0) return
+
+  let destinationIndex = targetIndex
+  if (indicator.position === 'before' && sourceIndex < targetIndex) destinationIndex--
+  if (indicator.position === 'after' && sourceIndex > targetIndex) destinationIndex++
+  moveTab(sourceId, destinationIndex)
+}
+
+const handleTabDragEnd = () => {
+  draggingTabId.value = null
+  dropIndicator.value = null
+}
+
+/** 标签列表末端的留白也是投放区，便于明确地将标签移动到最后。 */
+const isTabItemDragEvent = (event: DragEvent) =>
+  event.target instanceof Element && Boolean(event.target.closest('.stack-tab__item'))
+
+const handleTabListDragOver = (event: DragEvent) => {
+  if (!draggingTabId.value || isTabItemDragEvent(event)) return
+  const lastTab = tabs.value[tabs.value.length - 1]
+  if (!lastTab || lastTab.id === draggingTabId.value) return
+
+  dropIndicator.value = { tabId: lastTab.id, position: 'after' }
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+}
+
+const handleTabListDrop = (event: DragEvent) => {
+  if (isTabItemDragEvent(event)) return
+  const lastTab = tabs.value[tabs.value.length - 1]
+  if (lastTab) handleTabDrop(lastTab as ITabItem)
+}
 
 /** 标签列表 transition 的 props，支持 string 或对象 */
 const tabTransitionProps = computed<TransitionProps>(() =>
@@ -109,13 +215,68 @@ const tabTransitionProps = computed<TransitionProps>(() =>
     : (props.tabTransition as TransitionProps)
 )
 
+const getActiveTabIndex = (): number => tabs.value.findIndex((tab) => tab.active)
+
+const focusTabById = (tabId: string) => {
+  nextTick(() => {
+    const activeTabElement = headerRef.value?.querySelector<HTMLElement>(
+      `.stack-tab__nav [role="tab"][data-tab-id="${CSS.escape(tabId)}"]`
+    )
+    if (!activeTabElement) return
+
+    activeTabElement.focus()
+    if (scrollContainerRef.value && !scrollContainerRef.value.isInView(activeTabElement)) {
+      scrollContainerRef.value.scrollIntoView(activeTabElement)
+    }
+  })
+}
+
+const activateTabByIndex = (index: number) => {
+  const item = tabs.value[index]
+  if (!item) return
+  handleActivateTab(item as ITabItem, undefined, true)
+  focusTabById(String(item.id))
+}
+
+const handleTabListKeydown = (event: KeyboardEvent) => {
+  const count = tabs.value.length
+  if (count <= 0) return
+
+  const currentIndex = getActiveTabIndex()
+  const safeIndex = currentIndex >= 0 ? currentIndex : 0
+
+  if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    activateTabByIndex((safeIndex + 1) % count)
+    return
+  }
+
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    activateTabByIndex((safeIndex - 1 + count) % count)
+    return
+  }
+
+  if (event.key === 'Home') {
+    event.preventDefault()
+    activateTabByIndex(0)
+    return
+  }
+
+  if (event.key === 'End') {
+    event.preventDefault()
+    activateTabByIndex(count - 1)
+  }
+}
+
 /** 是否显示左右滚动按钮 */
 const isScrollButton = computed<boolean>(() => {
   return props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.BUTTON
 })
 /** 是否支持滚轮滚动 */
-const isScrollWheel =
-  props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.WHEEL
+const isScrollWheel = computed<boolean>(() => {
+  return props.tabScrollMode === TabScrollMode.BOTH || props.tabScrollMode === TabScrollMode.WHEEL
+})
 
 /** 关闭指定标签，并关闭右键菜单 */
 const handleCloseTab = (item: ITabItem) => {
@@ -126,7 +287,11 @@ const handleCloseTab = (item: ITabItem) => {
 }
 
 /** 激活指定标签，滚动到可视区域，并触发路由跳转 */
-const handleActivateTab = (item: ITabItem, clickedTabElement: HTMLElement | undefined, isRoute: boolean) => {
+const handleActivateTab = (
+  item: ITabItem,
+  clickedTabElement: HTMLElement | undefined,
+  isRoute: boolean
+) => {
   if (scrollContainerRef.value && clickedTabElement) {
     nextTick(() => {
       if (!scrollContainerRef.value!.isInView(clickedTabElement)) {
@@ -134,8 +299,11 @@ const handleActivateTab = (item: ITabItem, clickedTabElement: HTMLElement | unde
       }
     })
   }
-  activeTab(item.id, isRoute)
-  emit('active', item.id)
+  Promise.resolve(activeTab(item.id, isRoute))
+    .then(() => emit('active', item.id))
+    .catch((error: unknown) => {
+      console.warn('[vue-stack-tabs] Failed to activate tab:', error)
+    })
 }
 </script>