vue3-router-tab 1.1.8 → 1.1.9

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/scss/index.scss

@@ -1,39 +1,42 @@
 @use "sass:math";
-@use "sass:string";
-
-// 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);
-
-$font-size: 14px;
-$tab-trans: all 0.3s ease-in-out;
-$hd-height: 40px;
-$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})");
+@use "sass:color";
+@use "variables" as *;
+
+// Theme Setup
+:root[data-theme="light"] {
+  color-scheme: light;
+  --router-tab-background: #{$router-tab-bg-light};
+  --router-tab-foreground: #{$router-tab-text-light};
+  --router-tab-border: #{$router-tab-border-light};
+  --router-tab-header-bg: #{$router-tab-bg-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="dark"] {
+  color-scheme: dark;
+  --router-tab-active-border: #ffff;
+  --router-tab-background: #{$router-tab-bg-dark};
+  --router-tab-foreground: #{$router-tab-text-dark};
+  --router-tab-border: #{$router-tab-border-dark};
+  --router-tab-header-bg: #{$router-tab-bg-dark};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --router-tab-background: #{$router-tab-bg-dark};
+    --router-tab-foreground: #{$router-tab-text-dark};
+    --router-tab-border: #{$router-tab-border-dark};
+    --router-tab-header-bg: #{$router-tab-bg-dark};
+  }
+}
 
+// Main Component Styles
+.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;
@@ -41,16 +44,22 @@ $close-icon-size: 13px;
     display: flex;
     flex: none;
     box-sizing: border-box;
-    height: $hd-height;
-    border-bottom: 1px solid $border;
-    background-color: $header-bg;
-    transition: all 0.2s ease-in-out;
+    height: var(--router-tab-header-height, $router-tab-header-height);
+    background-color: var(--router-tab-header-bg);
+    transition: $router-tab-transition-fast;
+    border-bottom: 1px solid var(--router-tab-border);
+  }
+
+  &__slot-start,
+  &__slot-end {
+    display: flex;
+    align-items: center;
   }
 
   &__scroll {
     position: relative;
     flex: 1 1 0px;
-    height: $hd-height;
+    height: var(--router-tab-header-height, $router-tab-header-height);
     overflow: hidden;
 
     &-container {
@@ -114,143 +123,90 @@ $close-icon-size: 13px;
     display: flex;
     flex: none;
     align-items: center;
-    padding: 0 $tab-padding;
+    padding: 0 var(--router-tab-padding, $router-tab-padding);
     color: inherit;
-    font-size: $font-size;
-    border: 1px solid $border;
-    border-left: none;
+    font-size: var(--router-tab-font-size, $router-tab-font-size);
     transform-origin: left bottom;
     cursor: pointer;
-    transition: $tab-trans;
+    transition: var(--router-tab-transition, $router-tab-transition);
     user-select: none;
     background-color: transparent;
+    border-right: 1px solid var(--router-tab-border);
 
     &:first-child {
-      border-left: 1px solid $border;
+      border-left: 1px solid var(--router-tab-border);
     }
 
     &.is-contextmenu {
-      color: $primary;
+      color: var(--router-tab-primary);
+    }
+
+    // Drag and drop states
+    &.is-dragging {
+      opacity: $router-tab-drag-opacity;
+      cursor: $router-tab-drag-cursor;
     }
 
     &.is-drag-over {
-      background: rgba(0, 0, 0, 0.05);
+      background: $router-tab-drag-over-bg;
       transition: background 0.15s ease;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -2px;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: var(--router-tab-primary);
+      }
+    }
+
+    &[draggable="true"] {
+      cursor: $router-tab-drag-cursor;
     }
 
     &-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: $router-tab-title-min-width;
+      max-width: $router-tab-title-max-width;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
 
     &-icon {
-      margin-right: 5px;
-      font-size: 16px;
+      margin-right: $router-tab-icon-margin;
+      font-size: $router-tab-icon-size;
     }
 
     &:hover,
     &.is-active {
-      color: $primary;
+      color: var(--router-tab-active-border);
 
       &.is-closable {
-        padding: 0 ($tab-padding - math.div($close-icon-size + $close-icon-margin, 2));
+        padding: 0
+          calc(
+            var(--router-tab-padding, #{$router-tab-padding}) -
+              (#{$router-tab-close-icon-size} + #{$router-tab-close-icon-margin}) / 2
+          );
       }
 
       .router-tab__item-close {
-        width: $close-icon-size;
-        margin-left: $close-icon-margin;
+        width: $router-tab-close-icon-size;
+        margin-left: $router-tab-close-icon-margin;
 
         &::before,
         &::after {
-          background-color: #fff;
+          background-color: currentColor;
         }
       }
     }
 
-    &:hover {
-      .router-tab__item-title {
-        max-width: var(--router-tab-title-hover-max-width, 220px);
-      }
-    }
-
     &.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);
-      }
+      background-color: var(--router-tab-background);
+      color: var(--router-tab-active-border);
+      border-bottom: 2px solid var(--router-tab-active-border);
+      font-weight: 510;
     }
 
     &-close {
@@ -259,12 +215,12 @@ $close-icon-size: 13px;
       position: relative;
       display: block;
       width: 0;
-      height: $close-icon-size;
+      height: $router-tab-close-icon-size;
       margin-left: 0;
       overflow: hidden;
       border-radius: 50%;
       cursor: pointer;
-      transition: $tab-trans;
+      transition: var(--router-tab-transition, $router-tab-transition);
       background: transparent;
       border: none;
 
@@ -279,7 +235,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 +247,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%, transparent 60%);
 
         &::before,
         &::after {
@@ -304,49 +260,88 @@ $close-icon-size: 13px;
   &__contextmenu {
     position: fixed;
     z-index: 1000;
-    min-width: 140px;
-    padding: 8px 0;
-    font-size: $font-size;
-    background: $bg;
-    border: 1px solid $border;
-    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
-    border-radius: 8px;
-
-    a,
-    button {
+    min-width: $router-tab-contextmenu-min-width;
+    padding: $router-tab-contextmenu-padding;
+    font-size: var(--router-tab-font-size, $router-tab-font-size);
+    background: var(--router-tab-background);
+    border: 1px solid var(--router-tab-border);
+    box-shadow: $router-tab-contextmenu-shadow;
+    border-radius: $router-tab-contextmenu-border-radius;
+
+    &-item {
       display: block;
       width: 100%;
-      padding: 0 16px;
-      line-height: 30px;
+      padding: $router-tab-contextmenu-item-padding;
+      line-height: $router-tab-contextmenu-item-height;
       text-align: left;
+      text-decoration: none;
       background: transparent;
       border: none;
       color: inherit;
       cursor: pointer;
       font: inherit;
       transition: background-color 0.2s ease-in-out;
+      border-radius: calc(#{$router-tab-contextmenu-border-radius} - 4px);
 
-      &[aria-disabled='true'] {
+      &[aria-disabled="true"] {
         color: rgba(148, 163, 184, 0.6);
         pointer-events: none;
+        cursor: not-allowed;
       }
 
-      &:hover,
+      &:hover:not([aria-disabled="true"]),
       &:focus-visible {
-        background: color-mix(in srgb, $primary 20%, #ffffff 80%);
-        color: $primary;
+        background: color-mix(in srgb, var(--router-tab-primary) 10%, transparent 90%);
+        color: var(--router-tab-primary);
       }
     }
   }
-}
 
-.router-tab__container {
-  padding: 1rem;
-  position: relative;
-  flex: 1 1 auto;
-  background-color: transparent;
+  &__container {
+    position: relative;
+    flex: 1 1 auto;
+    background-color: var(--router-tab-background);
+    overflow: hidden;
+  }
+}
+.router-tab__item.is-active:after {
+  display: none !important;
 }
 
 .router-tab__item.is-active + .router-tab__item {
-  border-left-color: css-var(--router-tab-border, css-var(--theme-border, $light-border));
+  border-left-color: transparent;
+}
+
+// Transition animations
+.router-tab-zoom-enter-active,
+.router-tab-zoom-leave-active {
+  transition: all 0.3s ease;
+}
+
+.router-tab-zoom-enter-from,
+.router-tab-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.router-tab-swap-enter-active,
+.router-tab-swap-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.router-tab-swap-enter-from {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+.router-tab-swap-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.router-tab-page {
+  width: 100%;
+  height: 100%;
 }

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: 16px !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/package.json

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