vue3-router-tab 1.2.0 → 1.2.1

package/lib/scss/index.scss

@@ -1,80 +1,47 @@
 @use "sass:math";
 @use "sass:color";
+@use "variables" as *;
 
-$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;
-$hd-height: 40px;
-$tab-padding: 20px;
-$close-icon-margin: 4px;
-$close-icon-size: 13px;
+// =============================================================================
+// CSS Custom Properties & Theme System
+// =============================================================================
 
 :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;
-}
-
-: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};
+  
+  // Layout variables
+  --router-tab-header-height: #{$router-tab-header-height};
+  --router-tab-padding: #{$router-tab-padding};
+  --router-tab-font-size: #{$router-tab-font-size};
 }
 
-: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};
-  }
-}
+// =============================================================================
+// 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: $hd-height;
+    height: var(--router-tab-header-height);
     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;
+    border-bottom: 1px solid var(--router-tab-border);
+    transition: $router-tab-transition-fast;
   }
 
   &__scroll {
     position: relative;
     flex: 1 1 0px;
-    height: $hd-height;
+    height: 100%;
     overflow: hidden;
 
     &-container {
@@ -85,40 +52,12 @@ $close-icon-size: 13px;
       &.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;
-
-    .router-tab__scroll:hover &,
-    &.is-dragging {
-      opacity: 1;
-    }
+        scrollbar-width: none;
+        -ms-overflow-style: none;
 
-    &-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;
+        }
       }
     }
   }
@@ -138,170 +77,120 @@ $close-icon-size: 13px;
     display: flex;
     flex: none;
     align-items: center;
-    padding: 0 $tab-padding;
-    color: inherit;
-    font-size: $font-size;
-    transform-origin: left bottom;
-    cursor: pointer;
-    transition: $tab-trans;
-    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;
-    
-    // FIXED: Added proper borders
+    border: none;
     border-right: 1px solid var(--router-tab-border);
-    border-top: 1px solid transparent;
-    border-bottom: 2px solid transparent;
+    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);
     }
 
-    // NEW: Drag states
-    &.is-dragging {
-      opacity: 0.5;
-      cursor: move;
-    }
-
-    &.is-drag-over {
-      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 {
-      min-width: 30px;
-      max-width: 120px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &-icon {
-      margin-right: 5px;
-      font-size: 16px;
-    }
-
-    &:hover,
     &.is-active {
-      color: var(--router-tab-primary);
-      background-color: color-mix(in srgb, var(--router-tab-primary) 5%, transparent 95%);
+      background-color: var(--router-tab-active-background);
+      color: var(--router-tab-active-text);
+      font-weight: 510;
 
-      &.is-closable {
-        padding: 0 ($tab-padding - math.div($close-icon-size + $close-icon-margin, 2));
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: var(--router-tab-active-border);
       }
 
-      .router-tab__item-close {
-        width: $close-icon-size;
-        margin-left: $close-icon-margin;
-
-        &::before,
-        &::after {
-          background-color: currentColor;
-        }
+      & + .router-tab__item {
+        border-left-color: transparent;
       }
     }
 
-    // FIXED: Enhanced active state
-    &.is-active {
-      border-bottom: 2px solid var(--router-tab-primary);
-      background-color: var(--router-tab-background);
-      font-weight: 500;
+    // 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);
+      }
       
-      &:not(:first-child) {
-        border-left-color: var(--router-tab-border);
+      .router-tab__item:hover & {
+        color: currentColor;
       }
     }
 
-    &-close {
-      $inner: 8px;
+    &-title {
+      min-width: $router-tab-title-min-width;
+      max-width: $router-tab-title-max-width;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
+    // Close button using button colors
+    &-close {
+      $close-size: $router-tab-close-icon-size;
+      $inner-line: 8px;
+      
       position: relative;
       display: block;
       width: 0;
-      height: $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: $tab-trans;
-      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%, #ffffff 60%);
-
-        &::before,
-        &::after {
-          background-color: #fff;
-        }
+        background: var(--router-tab-active-button-bg);
+        color: var(--router-tab-active-button-color);
       }
     }
-  }
-
-  // FIXED: Improved context menu z-index
-  &__contextmenu {
-    position: fixed;
-    z-index: 9999; // Increased from 1000
-    min-width: 140px;
-    padding: 8px 0;
-    font-size: $font-size;
-    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;
 
-    a,
-    button {
-      display: block;
-      width: 100%;
-      padding: 0 16px;
-      line-height: 30px;
-      text-align: left;
-      background: transparent;
-      border: none;
-      color: inherit;
-      cursor: pointer;
-      font: inherit;
-      text-decoration: none;
-      transition: background-color 0.2s ease-in-out;
-
-      &[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});
       }
 
-      &: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;
+      .router-tab__item-close {
+        width: $router-tab-close-icon-size;
+        margin-left: $router-tab-close-icon-margin;
       }
     }
   }
@@ -310,32 +199,47 @@ $close-icon-size: 13px;
     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
+    overflow: hidden;
   }
 }
 
-// FIXED: Proper adjacent tab borders
-.router-tab__item {
-  + .router-tab__item {
-    border-left-color: var(--router-tab-border);
-  }
+// 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;
 
-  &.is-active + .router-tab__item {
-    border-left-color: var(--router-tab-border);
-  }
-}
+    &[aria-disabled="true"] {
+      color: color-mix(in srgb, var(--router-tab-text) 40%);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
 
-// NEW: Smooth drag animations
-@keyframes router-tab-drag-hint {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
+    &:hover:not([aria-disabled="true"]),
+    &:focus-visible {
+      background: var(--router-tab-active-button-bg);
+      color: var(--router-tab-active-button-color);
+    }
   }
-}
-
-.router-tab__item.is-dragging {
-  animation: router-tab-drag-hint 0.3s ease-in-out;
 }

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 = '#0f172a'
 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.2.0",
+  "version": "1.2.1",
   "type": "module",
   "files": [
     "dist",