vue3-router-tab 1.1.8 → 1.2.0

package/README.md

@@ -115,7 +115,7 @@ The composable also exposes `serialize` / `deserialize` options so you can encry
 The plugin initialises a lightweight theme layer on install:
 
 - Reads `tab-theme-style` (`'light'`, `'dark'`, or `'system'`; defaults to `'system'`).
-- Reads `tab-theme-primary-color` (defaults to `#635bff`).
+- Reads `tab-theme-primary-color` (defaults to `#0f172a`).
 - Applies the choice via `data-theme` and `--theme-primary` CSS variables, keeping “system” in sync with OS changes.
 
 Override the theme at runtime:

package/lib/components/RouterTab.vue

@@ -12,22 +12,28 @@
           v-bind="tabTransitionProps"
         >
           <li
-            v-for="tab in tabs"
+            v-for="(tab, index) in tabs"
             :key="tab.id"
             :class="buildTabClass(tab)"
-            :data-title="tabTitle(tab)"
+            :data-title="getTabTitle(tab)"
+            :draggable="sortable"
             @click="activate(tab)"
             @auxclick.middle.prevent="close(tab)"
             @contextmenu.prevent="showContextMenu(tab, $event)"
+            @dragstart="onDragStart(tab, index, $event)"
+            @dragover="onDragOver(index, $event)"
+            @dragenter="onDragEnter(index)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(index, $event)"
+            @dragend="onDragEnd"
           >
-            <span class="router-tab__item-title" :title="tabTitle(tab)">
+            <span class="router-tab__item-title" :title="getTabTitle(tab)">
               <i v-if="tab.icon" :class="['router-tab__item-icon', tab.icon]" />
-              {{ tabTitle(tab) }}
+              {{ getTabTitle(tab) }}
             </span>
             <a
               v-if="isClosable(tab)"
               class="router-tab__item-close"
-              type="button"
               @click.stop="close(tab)"
             />
           </li>
@@ -125,7 +131,6 @@ import { getTransOpt } from '../util/index'
 import { routerTabsKey, routerTabsCookie } from '../constants'
 import { useRouterTabsPersistence } from '../persistence'
 
-
 interface ResolvedMenuItem {
   id: string
   label: string
@@ -180,9 +185,18 @@ export default defineComponent({
     persistence: {
       type: Object as PropType<RouterTabsPersistenceOptions | null>,
       default: null
+    },
+    sortable: {
+      type: Boolean,
+      default: true
+    },
+    titleResolver: {
+      type: Function as PropType<(tab: TabRecord) => string>,
+      default: null
     }
   },
-  setup(props) {
+  emits: ['tab-sort', 'tab-sorted'],
+  setup(props, { emit }) {
     const instance = getCurrentInstance()
     if (!instance) {
       throw new Error('[RouterTab] component must be used within a Vue application context.')
@@ -199,7 +213,7 @@ export default defineComponent({
       maxAlive: props.maxAlive,
       keepLastTab: props.keepLastTab,
       appendPosition: props.append,
-      defaultRoute: props.defaultPage
+      defaultRoute: props.defaultPage,
     })
 
     provide(routerTabsKey, controller)
@@ -228,6 +242,14 @@ export default defineComponent({
       position: { x: 0, y: 0 }
     })
 
+    // Drag and drop state
+    const dragState = reactive({
+      dragging: false,
+      dragIndex: -1,
+      dropIndex: -1,
+      dragTab: null as TabRecord | null
+    })
+
     type MenuConfig = RouterTabsMenuConfig
     type MenuActionContext = RouterTabsMenuContext
     type CustomMenuOption = RouterTabsMenuItem
@@ -385,7 +407,10 @@ export default defineComponent({
       await item.action()
     }
 
-    function tabTitle(tab: TabRecord) {
+    function getTabTitle(tab: TabRecord): string {
+      if (props.titleResolver) {
+        return props.titleResolver(tab)
+      }
       if (typeof tab.title === 'string') return tab.title
       if (Array.isArray(tab.title) && tab.title.length) return String(tab.title[0])
       return tab.fullPath
@@ -411,7 +436,9 @@ export default defineComponent({
         'router-tab__item',
         {
           'is-active': controller.activeId.value === tab.id,
-          'is-closable': isClosable(tab)
+          'is-closable': isClosable(tab),
+          'is-dragging': dragState.dragging && dragState.dragTab?.id === tab.id,
+          'is-drag-over': dragState.dropIndex === getTabIndex(tab.id)
         },
         tab.tabClass
       ]
@@ -421,6 +448,66 @@ export default defineComponent({
       return controller.refreshingKey.value === controller.getRouteKey(route)
     }
 
+    // Drag and drop handlers
+    function onDragStart(tab: TabRecord, index: number, event: DragEvent) {
+      if (!props.sortable) return
+      
+      dragState.dragging = true
+      dragState.dragIndex = index
+      dragState.dragTab = tab
+      
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', tab.id)
+      }
+
+      emit('tab-sort', { tab, index })
+    }
+
+    function onDragOver(index: number, event: DragEvent) {
+      if (!props.sortable || !dragState.dragging) return
+      event.preventDefault()
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+      }
+    }
+
+    function onDragEnter(index: number) {
+      if (!props.sortable || !dragState.dragging) return
+      dragState.dropIndex = index
+    }
+
+    function onDragLeave() {
+      if (!props.sortable || !dragState.dragging) return
+      // Don't reset dropIndex immediately to prevent flicker
+    }
+
+    function onDrop(index: number, event: DragEvent) {
+      if (!props.sortable || !dragState.dragging) return
+      
+      event.preventDefault()
+      
+      if (dragState.dragIndex !== -1 && dragState.dragIndex !== index) {
+        const movedTab = controller.tabs.splice(dragState.dragIndex, 1)[0]
+        controller.tabs.splice(index, 0, movedTab)
+        
+        emit('tab-sorted', {
+          tab: movedTab,
+          fromIndex: dragState.dragIndex,
+          toIndex: index
+        })
+      }
+
+      onDragEnd()
+    }
+
+    function onDragEnd() {
+      dragState.dragging = false
+      dragState.dragIndex = -1
+      dragState.dropIndex = -1
+      dragState.dragTab = null
+    }
+
     onMounted(() => {
       document.addEventListener('keydown', hideContextMenu)
     })
@@ -474,11 +561,17 @@ export default defineComponent({
       handleMenuAction,
       showContextMenu,
       hideContextMenu,
-      tabTitle,
+      getTabTitle,
       isClosable,
       isRefreshing,
-      hasCustomSlot
+      hasCustomSlot,
+      onDragStart,
+      onDragOver,
+      onDragEnter,
+      onDragLeave,
+      onDrop,
+      onDragEnd
     }
   }
 })
-</script>
+</script>

package/lib/core/createRouterTabs.ts

@@ -3,6 +3,7 @@ import type {
   CloseTabOptions,
   RouteMatchResult,
   RouterTabsContext,
+  RouterTabsMenuPreset,
   RouterTabsOptions,
   RouterTabsSnapshot,
   RouterTabsSnapshotTab,
@@ -215,7 +216,7 @@ export function createRouterTabs(
     return options.defaultRoute
   }
 
-  async function closeTab(id: string | undefined = activeId.value, closeOptions: CloseTabOptions = {}) {
+  async function closeTab(id: string | null = activeId.value, closeOptions: CloseTabOptions = {}) {
     if (!id) return
     if (!closeOptions.force && options.keepLastTab && tabs.length === 1) {
       throw new Error('[RouterTabs] Unable to close the final tab when keepLastTab is true.')

package/lib/persistence.ts

@@ -1,4 +1,4 @@
-import { onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { useRouterTabs } from './useRouterTabs'
 import type { RouterTabsSnapshot } from './core/types'
@@ -108,6 +108,14 @@ export function useRouterTabsPersistence(options: RouterTabsPersistenceOptions =
         try {
           hydrating.value = true
           await ctrl.hydrate(initialSnapshot)
+          if (initialSnapshot.active) {
+            await nextTick()
+            const activeTab = ctrl.tabs.find(t => t.to === initialSnapshot.active)
+            if (activeTab) {
+              ctrl.activeId.value = activeTab.id
+              ctrl.current.value = activeTab
+            }
+          }
         } finally {
           hydrating.value = false
         }

package/lib/scss/index.scss

@@ -1,11 +1,13 @@
 @use "sass:math";
-@use "sass:string";
+@use "sass:color";
 
-// Fallback palette (overridden by CSS vars when present)
-$primary-fallback: #635bff;
-$light-bg: #ffffff;
-$light-text: #1e293b;
-$light-border: rgba(15, 23, 42, 0.08);
+$default-primary: #0f172a;
+$default-border: #e2e8f0;
+$default-text: #1e293b;
+$default-bg: #f8fafc;
+$default-dark-bg: #0f172a;
+$default-dark-text: #e2e8f0;
+$default-dark-border: rgba(148, 163, 184, 0.35);
 
 $font-size: 14px;
 $tab-trans: all 0.3s ease-in-out;
@@ -14,26 +16,48 @@ $tab-padding: 20px;
 $close-icon-margin: 4px;
 $close-icon-size: 13px;
 
-/// Utility to fetch a CSS variable with a graceful fallback.
-@function css-var($name, $fallback) {
-    @return string.unquote("var(#{$name}, #{$fallback})");
+:root {
+  --theme-primary: #{$default-primary};
+  --router-tab-primary: var(--theme-primary);
+  --router-tab-background: #{$default-bg};
+  --router-tab-foreground: #{$default-text};
+  --router-tab-border: #{$default-border};
+  --router-tab-header-bg: #{$default-bg};
+  color-scheme: light;
 }
 
-.router-tab {
-  $bg: css-var(--router-tab-background, css-var(--theme-background, $light-bg));
-  $fg: css-var(--router-tab-foreground, css-var(--theme-foreground, $light-text));
-  $border: css-var(--router-tab-border, css-var(--theme-border, $light-border));
-  $primary: css-var(--router-tab-primary, css-var(--theme-primary, $primary-fallback));
-  $header-bg: css-var(--router-tab-header-bg, $bg);
-  $tooltip-bg: css-var(--router-tab-tooltip-background, rgba(15, 23, 42, 0.88));
-  $tooltip-fg: css-var(--router-tab-tooltip-foreground, #ffffff);
-  $tooltip-shadow: css-var(--router-tab-tooltip-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
+:root[data-theme="light"] {
+  color-scheme: light;
+  --router-tab-background: #{$default-bg};
+  --router-tab-foreground: #{$default-text};
+  --router-tab-border: #{$default-border};
+  --router-tab-header-bg: #{$default-bg};
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --router-tab-background: #{$default-dark-bg};
+  --router-tab-foreground: #{$default-dark-text};
+  --router-tab-border: #{$default-dark-border};
+  --router-tab-header-bg: #{$default-dark-bg};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --router-tab-background: #{$default-dark-bg};
+    --router-tab-foreground: #{$default-dark-text};
+    --router-tab-border: #{$default-dark-border};
+    --router-tab-header-bg: #{$default-dark-bg};
+  }
+}
 
+.router-tab {
   display: flex;
   flex-direction: column;
   min-height: 300px;
-  background-color: transparent;
-  color: inherit;
+  background-color: var(--router-tab-background);
+  color: var(--router-tab-foreground);
 
   &__header {
     position: relative;
@@ -42,8 +66,8 @@ $close-icon-size: 13px;
     flex: none;
     box-sizing: border-box;
     height: $hd-height;
-    border-bottom: 1px solid $border;
-    background-color: $header-bg;
+    background-color: var(--router-tab-header-bg);
+    border-bottom: 1px solid var(--router-tab-border); // FIXED: Added border
     transition: all 0.2s ease-in-out;
   }
 
@@ -117,38 +141,40 @@ $close-icon-size: 13px;
     padding: 0 $tab-padding;
     color: inherit;
     font-size: $font-size;
-    border: 1px solid $border;
-    border-left: none;
     transform-origin: left bottom;
     cursor: pointer;
     transition: $tab-trans;
     user-select: none;
     background-color: transparent;
+    
+    // FIXED: Added proper borders
+    border-right: 1px solid var(--router-tab-border);
+    border-top: 1px solid transparent;
+    border-bottom: 2px solid transparent;
 
     &:first-child {
-      border-left: 1px solid $border;
+      border-left: 1px solid var(--router-tab-border);
     }
 
     &.is-contextmenu {
-      color: $primary;
+      color: var(--router-tab-primary);
+    }
+
+    // NEW: Drag states
+    &.is-dragging {
+      opacity: 0.5;
+      cursor: move;
     }
 
     &.is-drag-over {
-      background: rgba(0, 0, 0, 0.05);
-      transition: background 0.15s ease;
+      background: color-mix(in srgb, var(--router-tab-primary) 10%, transparent 90%);
+      border-left: 2px solid var(--router-tab-primary);
+      transition: background 0.15s ease, border-left 0.15s ease;
     }
 
     &-title {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: var(--router-tab-title-gap, 0);
-      min-width: var(--router-tab-title-min-width, 30px);
-      max-width: var(--router-tab-title-max-width, 120px);
-      color: var(--router-tab-title-color, inherit);
-      font-weight: var(--router-tab-title-font-weight, inherit);
-      letter-spacing: var(--router-tab-title-letter-spacing, normal);
-      text-transform: var(--router-tab-title-transform, none);
+      min-width: 30px;
+      max-width: 120px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -161,7 +187,8 @@ $close-icon-size: 13px;
 
     &:hover,
     &.is-active {
-      color: $primary;
+      color: var(--router-tab-primary);
+      background-color: color-mix(in srgb, var(--router-tab-primary) 5%, transparent 95%);
 
       &.is-closable {
         padding: 0 ($tab-padding - math.div($close-icon-size + $close-icon-margin, 2));
@@ -173,83 +200,19 @@ $close-icon-size: 13px;
 
         &::before,
         &::after {
-          background-color: #fff;
+          background-color: currentColor;
         }
       }
     }
 
-    &:hover {
-      .router-tab__item-title {
-        max-width: var(--router-tab-title-hover-max-width, 220px);
-      }
-    }
-
+    // FIXED: Enhanced active state
     &.is-active {
-      border-bottom-color: $bg;
-      background: color-mix(in srgb, $primary 12%, $bg 88%);
-      box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 65%, transparent);
-      color: color-mix(in srgb, $primary 80%, $fg 20%);
-
-      &::after {
-        content: '';
-        position: absolute;
-        left: 16px;
-        right: 16px;
-        bottom: 6px;
-        height: 2px;
-        border-radius: 999px;
-        background: $primary;
-        opacity: 0.6;
-        pointer-events: none;
-      }
-    }
-
-    &[data-title] {
-      &::after {
-        content: attr(data-title);
-        position: absolute;
-        left: 50%;
-        bottom: calc(100% + 8px);
-        display: inline-block;
-        max-width: 320px;
-        padding: 4px 10px;
-        border-radius: 6px;
-        background: $tooltip-bg;
-        color: $tooltip-fg;
-        font-size: 12px;
-        line-height: 1.3;
-        text-align: center;
-        white-space: normal;
-        word-break: break-word;
-        transform: translate(-50%, 4px);
-        box-shadow: $tooltip-shadow;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s ease, transform 0.2s ease;
-      }
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 50%;
-        bottom: calc(100% + 4px);
-        width: 8px;
-        height: 8px;
-        background: $tooltip-bg;
-        transform: translate(-50%, 6px) rotate(45deg);
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s ease, transform 0.2s ease;
-      }
-
-      &:hover::after {
-        opacity: 1;
-        transform: translate(-50%, 0);
-      }
-
-      &:hover::before {
-        opacity: 1;
-        transform: translate(-50%, 0) rotate(45deg);
+      border-bottom: 2px solid var(--router-tab-primary);
+      background-color: var(--router-tab-background);
+      font-weight: 500;
+      
+      &:not(:first-child) {
+        border-left-color: var(--router-tab-border);
       }
     }
 
@@ -279,7 +242,7 @@ $close-icon-size: 13px;
         margin-left: math.div(-$inner, 2);
         background-color: currentColor;
         transition: background-color 0.2s ease-in-out;
-        content: '';
+        content: "";
       }
 
       &::before {
@@ -291,7 +254,7 @@ $close-icon-size: 13px;
       }
 
       &:hover {
-        background-color: color-mix(in srgb, $primary 40%, #ffffff 60%);
+        background-color: color-mix(in srgb, var(--router-tab-primary) 40%, #ffffff 60%);
 
         &::before,
         &::after {
@@ -301,14 +264,15 @@ $close-icon-size: 13px;
     }
   }
 
+  // FIXED: Improved context menu z-index
   &__contextmenu {
     position: fixed;
-    z-index: 1000;
+    z-index: 9999; // Increased from 1000
     min-width: 140px;
     padding: 8px 0;
     font-size: $font-size;
-    background: $bg;
-    border: 1px solid $border;
+    background: var(--router-tab-background);
+    border: 1px solid var(--router-tab-border);
     box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
     border-radius: 8px;
 
@@ -324,29 +288,54 @@ $close-icon-size: 13px;
       color: inherit;
       cursor: pointer;
       font: inherit;
+      text-decoration: none;
       transition: background-color 0.2s ease-in-out;
 
-      &[aria-disabled='true'] {
+      &[aria-disabled="true"] {
         color: rgba(148, 163, 184, 0.6);
         pointer-events: none;
+        cursor: not-allowed;
       }
 
-      &:hover,
-      &:focus-visible {
-        background: color-mix(in srgb, $primary 20%, #ffffff 80%);
-        color: $primary;
+      &:not([aria-disabled="true"]):hover,
+      &:not([aria-disabled="true"]):focus-visible {
+        background: color-mix(in srgb, var(--router-tab-primary) 15%, transparent 85%);
+        color: var(--router-tab-primary);
+        outline: none;
       }
     }
   }
+
+  &__container {
+    position: relative;
+    flex: 1 1 auto;
+    background-color: var(--router-tab-background);
+    border: 1px solid var(--router-tab-border);
+    border-top: none; // FIXED: Avoid double border with header
+  }
 }
 
-.router-tab__container {
-  padding: 1rem;
-  position: relative;
-  flex: 1 1 auto;
-  background-color: transparent;
+// FIXED: Proper adjacent tab borders
+.router-tab__item {
+  + .router-tab__item {
+    border-left-color: var(--router-tab-border);
+  }
+
+  &.is-active + .router-tab__item {
+    border-left-color: var(--router-tab-border);
+  }
 }
 
-.router-tab__item.is-active + .router-tab__item {
-  border-left-color: css-var(--router-tab-border, css-var(--theme-border, $light-border));
+// NEW: Smooth drag animations
+@keyframes router-tab-drag-hint {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
 }
+
+.router-tab__item.is-dragging {
+  animation: router-tab-drag-hint 0.3s ease-in-out;
+}

package/lib/scss/variables.scss

@@ -0,0 +1,47 @@
+// variables.scss
+
+// Tab colors (light + dark theme overrides in :root)
+$router-tab-bg-light: #ffffff !default;
+$router-tab-bg-dark: #1e293b !default;
+
+$router-tab-text-light: #0f172a !default;
+$router-tab-text-dark: #f1f5f9 !default;
+
+$router-tab-border-light: #e2e8f0 !default;
+$router-tab-border-dark: #334155 !default;
+
+$router-tab-primary: #3b82f6 !default; // default primary color
+
+// Sizes
+$router-tab-header-height: 42px !default;
+$router-tab-padding: 12px !default;
+$router-tab-font-size: 14px !default;
+
+// Title
+$router-tab-title-min-width: 60px !default;
+$router-tab-title-max-width: 180px !default;
+
+// Icons
+$router-tab-icon-size: 14px !default;
+$router-tab-icon-margin: 6px !default;
+
+// Close icon
+$router-tab-close-icon-size: 12px !default;
+$router-tab-close-icon-margin: 4px !default;
+
+// Context menu
+$router-tab-contextmenu-min-width: 160px !default;
+$router-tab-contextmenu-padding: 6px 0 !default;
+$router-tab-contextmenu-item-height: 32px !default;
+$router-tab-contextmenu-item-padding: 0 12px !default;
+$router-tab-contextmenu-border-radius: 8px !default;
+$router-tab-contextmenu-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !default;
+
+// Dragging
+$router-tab-drag-opacity: 0.6 !default;
+$router-tab-drag-cursor: grabbing !default;
+$router-tab-drag-over-bg: rgba(0, 0, 0, 0.05) !default;
+
+// Transitions
+$router-tab-transition-fast: all 0.2s ease !default;
+$router-tab-transition: all 0.3s ease !default;

package/lib/theme.ts

@@ -1,7 +1,7 @@
 const STYLE_KEY = 'tab-theme-style'
 const PRIMARY_KEY = 'tab-theme-primary-color'
 const DEFAULT_STYLE: 'light' | 'dark' | 'system' = 'system'
-const DEFAULT_PRIMARY = '#635bff'
+const DEFAULT_PRIMARY = '#0f172a'
 const MEDIA_QUERY = '(prefers-color-scheme: dark)'
 
 let mediaListener: ((event: MediaQueryListEvent) => void) | null = null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-router-tab",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "type": "module",
   "files": [
     "dist",