vue-stack-tabs 1.3.0 → 1.3.1

package/README.md

@@ -247,6 +247,7 @@ const {
   refreshTab, // (id: string) => void
   refreshAllTabs, // () => void
   activeTab, // (id: string, isRoute?: boolean) => void
+  moveTab, // (id: string, targetIndex: number) => boolean
   reset, // () => void
   tabs // Ref<ITabItem[]>
 } = useTabActions()
@@ -260,6 +261,7 @@ const {
 | `refreshTab(id)`       | 刷新指定标签（替换缓存 ID，重建组件实例）                   |
 | `refreshAllTabs()`     | 刷新所有标签                                              |
 | `activeTab(id)`        | 激活指定标签（切换 Tab）                                  |
+| `moveTab(id, targetIndex)` | 将标签移动到指定索引；标签栏也支持鼠标拖放排序            |
 | `reset()`              | 关闭所有标签并重置状态                                    |
 
 ---

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-stack-tabs",
-  "version": "1.3.0",
-  "packageManager": "pnpm@11.5.0+sha512.dbfcc4f81cf48597afd4bc391ffdf12c11f1a9fb83a395bfa6b0a2d9cc2fd8ffebafdb1ccbd529632153f793904c2615b7f09fe1a345473fd1c35845172a8eb1",
+  "version": "1.3.1",
+  "packageManager": "pnpm@11.21.0+sha512.521705bce689924eac72f5a3587122f362689ef6571e55ba80076fd637c11132ecffada26fad4ea79c485bfddbfd3d5a2a5b05805a77e893de71ec8a6cca3bb1",
   "private": false,
   "type": "module",
   "files": [
@@ -74,73 +74,73 @@
   "dependencies": {
     "defu": "^6.1.7",
     "mitt": "^3.0.1",
+    "nostics": "^1.2.0",
     "throttle-debounce": "^5.0.2",
-    "vue": "^3.5.35",
+    "vue": "^3.5.42",
     "vue-i18n-lite": "^1.0.2",
-    "vue-router": "^5.1.0"
+    "vue-router": "^5.3.0"
   },
   "devDependencies": {
     "@ctrl/tinycolor": "^4.2.0",
     "@element-plus/icons-vue": "^2.3.2",
     "@eslint/js": "^10.0.1",
-    "@floating-ui/core": "^1.7.5",
-    "@floating-ui/dom": "^1.7.6",
-    "@floating-ui/utils": "^0.2.11",
-    "@mdit/plugin-tasklist": "^0.23.2",
+    "@floating-ui/core": "^1.8.0",
+    "@floating-ui/dom": "^1.8.0",
+    "@floating-ui/utils": "^0.2.12",
+    "@mdit/plugin-tasklist": "^1.1.0",
     "@popperjs/core": "^2.11.8",
     "@rushstack/eslint-patch": "^1.16.1",
-    "@tsconfig/node20": "^20.1.9",
+    "@tsconfig/node26": "^26.0.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^25.9.1",
+    "@types/node": "^26.4.0",
     "@types/throttle-debounce": "^5.0.2",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "@vitest/coverage-v8": "4.1.7",
-    "@vue/compiler-core": "^3.5.35",
-    "@vue/compiler-dom": "^3.5.35",
-    "@vue/devtools-api": "^8.1.2",
-    "@vue/devtools-kit": "^8.1.2",
-    "@vue/devtools-shared": "^8.1.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "@vitest/coverage-v8": "4.1.10",
+    "@vue/compiler-core": "^3.5.42",
+    "@vue/compiler-dom": "^3.5.42",
+    "@vue/devtools-api": "^8.2.1",
+    "@vue/devtools-kit": "^8.2.1",
+    "@vue/devtools-shared": "^8.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/reactivity": "^3.5.35",
-    "@vue/runtime-core": "^3.5.35",
-    "@vue/runtime-dom": "^3.5.35",
-    "@vue/shared": "^3.5.35",
-    "@vue/test-utils": "^2.4.10",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/reactivity": "^3.5.42",
+    "@vue/runtime-core": "^3.5.42",
+    "@vue/runtime-dom": "^3.5.42",
+    "@vue/shared": "^3.5.42",
+    "@vue/test-utils": "^2.5.0",
     "@vue/tsconfig": "^0.9.1",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/shared": "^14.3.0",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/shared": "^14.4.0",
     "async-validator": "^4.2.5",
-    "birpc": "^4.0.0",
-    "dayjs": "^1.11.21",
-    "element-plus": "^2.14.1",
-    "eslint": "^10.4.1",
+    "birpc": "^4.2.0",
+    "dayjs": "^1.11.23",
+    "element-plus": "^2.14.5",
+    "eslint": "^10.9.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-vue": "^10.9.1",
-    "globals": "^17.6.0",
-    "happy-dom": "^20.9.0",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "happy-dom": "^20.12.0",
     "hookable": "^6.1.1",
     "lodash-es": "^4.18.1",
     "lodash-unified": "^1.0.3",
     "memoize-one": "^6.0.0",
     "normalize-wheel-es": "^1.2.0",
     "normalize.css": "^8.0.1",
-    "npm-run-all2": "^9.0.1",
+    "npm-run-all2": "^9.0.3",
     "perfect-debounce": "^2.1.0",
-    "prettier": "^3.8.3",
-    "sass": "^1.100.0",
-    "sass-loader": "^17.0.0",
-    "terser": "^5.48.0",
-    "typescript": "~6.0.3",
-    "typescript-eslint": "^8.60.0",
-    "unplugin-auto-import": "^21.0.0",
+    "prettier": "^3.9.6",
+    "sass-embedded": "^1.103.1",
+    "terser": "^5.51.2",
+    "typescript": "~7.0.2",
+    "typescript-eslint": "^8.69.0",
+    "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.0.14",
-    "vite-plugin-dts": "5.0.1",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "5.0.3",
     "vite-plugin-package-version": "^1.1.0",
     "vitepress": "^1.6.4",
-    "vitest": "^4.1.7",
-    "vue-tsc": "^3.3.3"
+    "vitest": "^4.1.11",
+    "vue-tsc": "^3.3.11"
   }
 }

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

@@ -164,7 +164,7 @@
     position: relative;
     display: inline-flex;
     height: 100%;
-    padding: 0;
+    padding: 0 16px 0 0;
     margin: 0;
     list-style: none;
     flex-wrap: nowrap;
@@ -197,6 +197,31 @@
       border-left: $stack-tab-border;
     }
 
+    &.is-dragging {
+      opacity: 0.55;
+    }
+
+    &.is-drop-before::before,
+    &.is-drop-after::after {
+      position: absolute;
+      z-index: 2;
+      top: 2px;
+      bottom: 2px;
+      width: 5px;
+      content: '';
+      background: $stack-tab-color-primary;
+      border-radius: 2px;
+      box-shadow: 0 0 6px rgba($stack-tab-color-primary, 0.8);
+    }
+
+    &.is-drop-before::before {
+      left: -3px;
+    }
+
+    &.is-drop-after::after {
+      right: -3px;
+    }
+
     /*
     激活右键菜单的页签
      */

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

@@ -5,10 +5,18 @@
     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'
     }"
+    :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)"
   >
     <button
       :id="getStackTabTabId(item.id)"
@@ -52,13 +60,23 @@ 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', 'contextmenu'])
+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 */
@@ -80,6 +98,16 @@ const title = computed<string>(() => props.item.title || t('VueStackTab.undefine
 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)

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

@@ -17,11 +17,14 @@
           v-bind="tabTransitionProps"
           appear
           @keydown="handleTabListKeydown"
+          @dragover.prevent="handleTabListDragOver"
+          @drop.prevent="handleTabListDrop"
         >
           <tab-header-item
             v-for="(item, index) in tabs"
             :key="item.id"
             :item="item as ITabItem"
+            :drop-position="dropIndicator?.tabId === item.id ? dropIndicator.position : undefined"
             @contextmenu="
               (e: MouseEvent) =>
                 handleTabContextMenu(e, item as unknown as ITabItem, index, tabs.length)
@@ -29,6 +32,10 @@
             @click.middle.prevent="handleCloseTab(item as ITabItem)"
             @close="handleCloseTab"
             @active="handleActivateTab"
+            @dragstart="handleTabDragStart"
+            @dragover="handleTabDragOver"
+            @drop="handleTabDrop"
+            @dragend="handleTabDragEnd"
           />
         </transition-group>
       </template>
@@ -109,7 +116,10 @@ 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)
@@ -137,6 +147,67 @@ const handleTabContextMenu = (e: MouseEvent, item: ITabItem, index: number, max:
   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>(() =>
   typeof props.tabTransition === 'string'

package/src/lib/hooks/useTabActions.ts

@@ -38,6 +38,7 @@ export default function useTabActions() {
     renewTab,
     getTab,
     tabs,
+    moveTab,
     removeTab,
     removeAllTabs,
     refreshTab,
@@ -169,6 +170,7 @@ export default function useTabActions() {
 
     // 激活与重置
     activeTab: active,
+    moveTab,
     reset,
 
     // 数据与配置

package/src/lib/hooks/useTabPanel.tsx

@@ -189,6 +189,29 @@ export default () => {
 
   const getTab = (id: string) => tabs.value.find((t) => t.id === id) ?? null
 
+  /**
+   * 将指定标签移动到目标索引。标签对象本身不变，因此其页面栈和缓存关联保持不受影响。
+   * @returns 是否实际调整了顺序
+   */
+  const moveTab = (id: string, targetIndex: number): boolean => {
+    const sourceIndex = tabs.value.findIndex((tab) => tab.id === id)
+    if (
+      sourceIndex < 0 ||
+      targetIndex < 0 ||
+      targetIndex >= tabs.value.length ||
+      sourceIndex === targetIndex
+    ) {
+      return false
+    }
+
+    const reorderedTabs = tabs.value.slice()
+    const [tab] = reorderedTabs.splice(sourceIndex, 1)
+    if (!tab) return false
+    reorderedTabs.splice(targetIndex, 0, tab)
+    tabs.value = reorderedTabs
+    return true
+  }
+
   /** 从路由解析 tabInfo，若无则创建默认信息，调用方负责把编码信息写入内部 page.query */
   const parseTabInfoFromRoute = (route: RouteLocationNormalizedLoaded): ITabBase => {
     if (typeof route.query.__tab === 'string') {
@@ -718,6 +741,7 @@ export default () => {
     addCache,
     removeCache,
     getTab,
+    moveTab,
     addTab,
     removeTab,
     removeAllTabs,