vue3-router-tab 1.1.9 → 1.2.1

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/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

@@ -2,64 +2,46 @@
 @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};
-}
-
-: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};
-  }
+// =============================================================================
+// CSS Custom Properties & Theme System
+// =============================================================================
+
+:root {
+  
+  // Layout variables
+  --router-tab-header-height: #{$router-tab-header-height};
+  --router-tab-padding: #{$router-tab-padding};
+  --router-tab-font-size: #{$router-tab-font-size};
 }
 
+// =============================================================================
 // Main Component Styles
+// =============================================================================
+
 .router-tab {
   display: flex;
   flex-direction: column;
   min-height: 300px;
   background-color: var(--router-tab-background);
-  color: var(--router-tab-foreground);
+  color: var(--router-tab-text);
 
   &__header {
     position: relative;
-    z-index: 9;
+    z-index: 10;
     display: flex;
     flex: none;
+    align-items: center;
     box-sizing: border-box;
-    height: var(--router-tab-header-height, $router-tab-header-height);
+    height: var(--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;
+    transition: $router-tab-transition-fast;
   }
 
   &__scroll {
     position: relative;
     flex: 1 1 0px;
-    height: var(--router-tab-header-height, $router-tab-header-height);
+    height: 100%;
     overflow: hidden;
 
     &-container {
@@ -70,40 +52,12 @@
       &.is-mobile {
         overflow-x: auto;
         overflow-y: hidden;
-      }
-    }
-  }
-
-  &__scrollbar {
-    $h: 3px;
-
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: $h;
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: $h;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
 
-    .router-tab__scroll:hover &,
-    &.is-dragging {
-      opacity: 1;
-    }
-
-    &-thumb {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.1);
-      border-radius: $h;
-      transition: background-color 0.3s ease-in-out;
-
-      &:hover,
-      .router-tab__scrollbar.is-dragging & {
-        background-color: rgba(0, 0, 0, 0.2);
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
     }
   }
@@ -123,47 +77,59 @@
     display: flex;
     flex: none;
     align-items: center;
-    padding: 0 var(--router-tab-padding, $router-tab-padding);
-    color: inherit;
-    font-size: var(--router-tab-font-size, $router-tab-font-size);
-    transform-origin: left bottom;
-    cursor: pointer;
-    transition: var(--router-tab-transition, $router-tab-transition);
-    user-select: none;
+    gap: 0.5rem;
+    padding: 0 var(--router-tab-padding);
+    color: var(--router-tab-text);
+    font-size: var(--router-tab-font-size);
     background-color: transparent;
+    border: none;
     border-right: 1px solid var(--router-tab-border);
+    cursor: pointer;
+    user-select: none;
+    transition: var(--router-tab-transition);
 
     &:first-child {
       border-left: 1px solid var(--router-tab-border);
     }
 
-    &.is-contextmenu {
+    &:hover {
+      background-color: color-mix(in srgb, var(--router-tab-primary) 4%, transparent);
       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: $router-tab-drag-over-bg;
-      transition: background 0.15s ease;
+    &.is-active {
+      background-color: var(--router-tab-active-background);
+      color: var(--router-tab-active-text);
+      font-weight: 510;
 
-      &::before {
+      &::after {
         content: "";
         position: absolute;
-        left: -2px;
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        background: var(--router-tab-primary);
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: var(--router-tab-active-border);
+      }
+
+      & + .router-tab__item {
+        border-left-color: transparent;
       }
     }
 
-    &[draggable="true"] {
-      cursor: $router-tab-drag-cursor;
+    // Icon styling using the dedicated color
+    &-icon {
+      flex-shrink: 0;
+      font-size: $router-tab-icon-size;
+      color: var(--router-tab-icon-color);
+      
+      .router-tab__item.is-active & {
+        color: var(--router-tab-active-text);
+      }
+      
+      .router-tab__item:hover & {
+        color: currentColor;
+      }
     }
 
     &-title {
@@ -174,125 +140,57 @@
       text-overflow: ellipsis;
     }
 
-    &-icon {
-      margin-right: $router-tab-icon-margin;
-      font-size: $router-tab-icon-size;
-    }
-
-    &:hover,
-    &.is-active {
-      color: var(--router-tab-active-border);
-
-      &.is-closable {
-        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: $router-tab-close-icon-size;
-        margin-left: $router-tab-close-icon-margin;
-
-        &::before,
-        &::after {
-          background-color: currentColor;
-        }
-      }
-    }
-
-    &.is-active {
-      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 button using button colors
     &-close {
-      $inner: 8px;
-
+      $close-size: $router-tab-close-icon-size;
+      $inner-line: 8px;
+      
       position: relative;
       display: block;
       width: 0;
-      height: $router-tab-close-icon-size;
-      margin-left: 0;
+      height: $close-size;
+      flex-shrink: 0;
       overflow: hidden;
+      border: none;
       border-radius: 50%;
+      background: var(--router-tab-button-bg);
+      color: var(--router-tab-button-color);
       cursor: pointer;
-      transition: var(--router-tab-transition, $router-tab-transition);
-      background: transparent;
-      border: none;
+      transition: var(--router-tab-transition);
 
       &::before,
       &::after {
         position: absolute;
-        top: 6px;
+        top: 50%;
         left: 50%;
         display: block;
-        width: $inner;
+        width: $inner-line;
         height: 1px;
-        margin-left: math.div(-$inner, 2);
+        margin-left: math.div(-$inner-line, 2);
         background-color: currentColor;
         transition: background-color 0.2s ease-in-out;
         content: "";
       }
 
-      &::before {
-        transform: rotate(-45deg);
-      }
-
-      &::after {
-        transform: rotate(45deg);
-      }
+      &::before { transform: translateY(-50%) rotate(-45deg); }
+      &::after { transform: translateY(-50%) rotate(45deg); }
 
       &:hover {
-        background-color: color-mix(in srgb, var(--router-tab-primary) 40%, transparent 60%);
-
-        &::before,
-        &::after {
-          background-color: #fff;
-        }
+        background: var(--router-tab-active-button-bg);
+        color: var(--router-tab-active-button-color);
       }
     }
-  }
-
-  &__contextmenu {
-    position: fixed;
-    z-index: 1000;
-    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: $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"] {
-        color: rgba(148, 163, 184, 0.6);
-        pointer-events: none;
-        cursor: not-allowed;
+    // Show close button on hover/active
+    &:hover,
+    &.is-active {
+      &.is-closable {
+        padding-right: calc(var(--router-tab-padding) - #{($router-tab-close-icon-size + $router-tab-close-icon-margin) * 0.5});
       }
 
-      &:hover:not([aria-disabled="true"]),
-      &:focus-visible {
-        background: color-mix(in srgb, var(--router-tab-primary) 10%, transparent 90%);
-        color: var(--router-tab-primary);
+      .router-tab__item-close {
+        width: $router-tab-close-icon-size;
+        margin-left: $router-tab-close-icon-margin;
       }
     }
   }
@@ -304,44 +202,44 @@
     overflow: hidden;
   }
 }
-.router-tab__item.is-active:after {
-  display: none !important;
-}
-
-.router-tab__item.is-active + .router-tab__item {
-  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);
-}
+// Context Menu using button colors
+.router-tab__contextmenu {
+  position: fixed;
+  z-index: 1000;
+  min-width: $router-tab-contextmenu-min-width;
+  padding: $router-tab-contextmenu-padding;
+  font-size: var(--router-tab-font-size);
+  background: var(--router-tab-background);
+  border: 1px solid var(--router-tab-border);
+  border-radius: $router-tab-contextmenu-border-radius;
+  box-shadow: $router-tab-contextmenu-shadow;
+
+  &-item {
+    display: block;
+    width: 100%;
+    padding: $router-tab-contextmenu-item-padding;
+    line-height: $router-tab-contextmenu-item-height;
+    text-align: left;
+    text-decoration: none;
+    background: var(--router-tab-button-bg);
+    border: none;
+    color: var(--router-tab-button-color);
+    cursor: pointer;
+    font: inherit;
+    border-radius: calc(#{$router-tab-contextmenu-border-radius} - 4px);
+    transition: all 0.2s ease-in-out;
+
+    &[aria-disabled="true"] {
+      color: color-mix(in srgb, var(--router-tab-text) 40%);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
 
-.router-tab-page {
-  width: 100%;
-  height: 100%;
-}
+    &:hover:not([aria-disabled="true"]),
+    &:focus-visible {
+      background: var(--router-tab-active-button-bg);
+      color: var(--router-tab-active-button-color);
+    }
+  }
+}

package/lib/scss/variables.scss

@@ -26,7 +26,7 @@ $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-size: 12px !default;
 $router-tab-close-icon-margin: 4px !default;
 
 // Context menu

package/lib/theme.ts

@@ -1,7 +1,6 @@
 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 MEDIA_QUERY = '(prefers-color-scheme: dark)'
 
 let mediaListener: ((event: MediaQueryListEvent) => void) | null = null
@@ -12,11 +11,86 @@ export interface RouterTabsThemeOptions {
   defaultStyle?: 'light' | 'dark' | 'system'
   defaultPrimary?: string
 }
+export interface ColorStyle {
+ // Core colors
+  primary: string;
+  background: string;
+  text: string;
+  border: string;
+  
+  // Interactive states
+  activeBackground: string;
+  activeText: string;
+  activeBorder: string;
+  
+  // Header specific
+  headerBackground: string;
+  
+  // Button specific
+  buttonBackground: string;
+  buttonColor: string;
+  activeButtonBackground: string;
+  activeButtonColor: string;
+  
+  // Icon specific
+  iconColor: string;
+}
+
+const defaultColors: ColorStyle = {
+  primary: "#034960",
+  background: "#ffffff",
+  text: "#1e293b",
+  border: "#e2e8f0",
+  
+  activeBackground: "#034960",
+  activeText: "#ffffff",
+  activeBorder: "#034960",
+  
+  headerBackground: "#ffff",
+  
+  buttonBackground: "#f8fafc",
+  buttonColor: "#034960",
+  activeButtonBackground: "#034960",
+  activeButtonColor: "#ffffff",
+  
+  iconColor: "#475569",
+}
 
-function applyPrimary(color: string) {
+const defaultDarkColor: ColorStyle = {
+  primary: "#38bdf8",
+  background: "#0f172a",
+  text: "#f1f5f9",
+  border: "#334155",
+  
+  activeBackground: "#1e293b",
+  activeText: "#38bdf8",
+  activeBorder: "#38bdf8",
+  
+  headerBackground: "#0c4a6e", // Darker shade of primary
+  
+  buttonBackground: "#1e293b",
+  buttonColor: "#f1f5f9",
+  activeButtonBackground: "#38bdf8",
+  activeButtonColor: "#0f172a",
+  
+  iconColor: "#cbd5e1",
+}
+
+function applyPrimary(color: ColorStyle) {
   if (typeof document === 'undefined') return
-  document.documentElement.style.setProperty('--theme-primary', color)
-  document.documentElement.style.setProperty('--router-tab-primary', color)
+  console.log('applyPrimary', color)
+  document.documentElement.style.setProperty('--router-tab-primary', color.primary ?? defaultColors.primary)
+  document.documentElement.style.setProperty('--router-tab-header-bg', color.headerBackground ?? defaultColors.headerBackground)
+  document.documentElement.style.setProperty('--router-tab-background', color.background ?? defaultColors.background)
+  document.documentElement.style.setProperty('--router-tab-active-background', color.activeBackground ?? defaultColors.activeBackground)
+  document.documentElement.style.setProperty('--router-tab-text', color.text ?? defaultColors.text)
+  document.documentElement.style.setProperty('--router-tab-active-text', color.activeText ?? defaultColors.activeText)
+  document.documentElement.style.setProperty('--router-tab-border', color.border ?? defaultColors.border)
+  document.documentElement.style.setProperty('--router-tab-active-border', color.activeBorder ?? defaultColors.activeBorder)
+  document.documentElement.style.setProperty('--router-tab-button-color', color.buttonColor ?? defaultColors.buttonColor)
+  document.documentElement.style.setProperty('--router-tab-active-button-color', color.activeButtonColor ?? defaultColors.activeButtonColor)
+  document.documentElement.style.setProperty('--router-tab-button-background', color.buttonBackground ?? defaultColors.buttonBackground)
+  document.documentElement.style.setProperty('--router-tab-active-button-background', color.activeButtonBackground ?? defaultColors.activeButtonBackground)
 }
 
 function applyStyle(style: 'light' | 'dark' | 'system') {
@@ -48,16 +122,17 @@ export function initRouterTabsTheme(options: RouterTabsThemeOptions = {}) {
 
   const {
     styleKey = STYLE_KEY,
-    primaryKey = PRIMARY_KEY,
     defaultStyle = DEFAULT_STYLE,
-    defaultPrimary = DEFAULT_PRIMARY
   } = options
 
   const storedStyle = (window.localStorage.getItem(styleKey) as 'light' | 'dark' | 'system' | null) ?? defaultStyle
-  const storedPrimary = window.localStorage.getItem(primaryKey) ?? defaultPrimary
 
   applyStyle(storedStyle)
-  applyPrimary(storedPrimary)
+  if (storedStyle === 'dark') {
+    applyPrimary(defaultDarkColor)
+  } else {
+    applyPrimary(defaultColors)
+  }
 }
 
 export function setRouterTabsTheme(style: 'light' | 'dark' | 'system', options?: RouterTabsThemeOptions) {
@@ -67,9 +142,9 @@ export function setRouterTabsTheme(style: 'light' | 'dark' | 'system', options?:
   applyStyle(style)
 }
 
-export function setRouterTabsPrimary(color: string, options?: RouterTabsThemeOptions) {
+export function setRouterTabsPrimary(color: ColorStyle, options?: RouterTabsThemeOptions) {
   if (typeof window === 'undefined') return
   const key = options?.primaryKey ?? PRIMARY_KEY
-  window.localStorage.setItem(key, color)
+  window.localStorage.setItem(key, JSON.stringify(color))
   applyPrimary(color)
 }

package/package.json

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