vue3-router-tab 1.2.6 → 1.2.7

package/lib/scss/index.scss

@@ -23,7 +23,23 @@
   --router-tab-active-background: #{$router-tab-primary};
   --router-tab-active-text: #ffffff;
   --router-tab-active-border: #{$router-tab-primary};
-  --router-tab-icon-color: #475569;
+  --router-tab-icon-color: #{$router-tab-icon-color-light};
+  --router-tab-button-background: #{$router-tab-button-bg-light};
+  --router-tab-button-color: #{$router-tab-button-color-light};
+  --router-tab-active-button-background: #{$router-tab-active-button-bg-light};
+  --router-tab-active-button-color: #{$router-tab-active-button-color-light};
+}
+
+:root[data-theme="dark"] {
+  --router-tab-background: #{$router-tab-bg-dark};
+  --router-tab-text: #{$router-tab-text-dark};
+  --router-tab-border: #{$router-tab-border-dark};
+  --router-tab-header-bg: #{$router-tab-bg-dark};
+  --router-tab-icon-color: #{$router-tab-icon-color-dark};
+  --router-tab-button-background: #{$router-tab-button-bg-dark};
+  --router-tab-button-color: #{$router-tab-button-color-dark};
+  --router-tab-active-button-background: #{$router-tab-active-button-bg-dark};
+  --router-tab-active-button-color: #{$router-tab-active-button-color-dark};
 }
 
 // =============================================================================
@@ -99,6 +115,7 @@
     cursor: pointer;
     user-select: none;
     transition: var(--router-tab-transition);
+    will-change: background-color, color;
 
     &:first-child {
       border-left: 1px solid var(--router-tab-border);
@@ -165,7 +182,7 @@
       overflow: hidden;
       border: none;
       border-radius: 50%;
-      background: var(--router-tab-button-bg);
+      background: var(--router-tab-button-background);
       color: var(--router-tab-button-color);
       cursor: pointer;
       transition: var(--router-tab-transition);
@@ -188,7 +205,7 @@
       &::after { transform: translateY(-50%) rotate(45deg); }
 
       &:hover {
-        background: var(--router-tab-active-button-bg);
+        background: var(--router-tab-active-button-background);
         color: var(--router-tab-active-button-color);
       }
     }
@@ -196,15 +213,21 @@
     // 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});
-      }
 
       .router-tab__item-close {
         width: $router-tab-close-icon-size;
         margin-left: $router-tab-close-icon-margin;
       }
     }
+
+    &.is-dragging {
+      opacity: $router-tab-drag-opacity;
+      cursor: $router-tab-drag-cursor;
+    }
+
+    &.is-drag-over {
+      background-color: color-mix(in srgb, var(--router-tab-primary) 12%, transparent);
+    }
   }
 
   &__container {
@@ -217,7 +240,29 @@
 .router-tab__container {
   padding: 10px;
   border: 1px solid var(--router-tab-border);
+  transition: var(--router-tab-transition);
+  will-change: background-color, border-color;
+}
+
+.router-tab__slot-start,
+.router-tab__slot-end {
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  height: 100%;
 }
+
+.router-tab__slot-start.has-content {
+  display: flex;
+  border-right: 1px solid var(--router-tab-border);
+}
+
+.router-tab__slot-end.has-content {
+  display: flex;
+  border-left: 1px solid var(--router-tab-border);
+}
+
 // Context Menu using button colors
 .router-tab__contextmenu {
   position: fixed;
@@ -237,13 +282,14 @@
     line-height: $router-tab-contextmenu-item-height;
     text-align: left;
     text-decoration: none;
-    background: var(--router-tab-button-bg);
+    background: var(--router-tab-button-background);
     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;
+    outline: none;
 
     &[aria-disabled="true"] {
       color: color-mix(in srgb, var(--router-tab-text) 40%);
@@ -251,10 +297,16 @@
       cursor: not-allowed;
     }
 
-    &:hover:not([aria-disabled="true"]),
+    &:focus,
     &:focus-visible {
-      background: var(--router-tab-active-button-bg);
+      outline: none;
+    }
+
+    &:hover:not([aria-disabled="true"]),
+    &:focus-visible,
+    &.is-focused {
+      background: var(--router-tab-active-button-background);
       color: var(--router-tab-active-button-color);
     }
   }
-}
+}

package/lib/scss/variables.scss

@@ -18,12 +18,24 @@ $router-tab-padding: 12px !default;
 $router-tab-font-size: 14px !default;
 
 // Title
-$router-tab-title-min-width: 60px !default;
+$router-tab-title-min-width: auto !default;
 $router-tab-title-max-width: 180px !default;
 
 // Icons
 $router-tab-icon-size: 14px !default;
 $router-tab-icon-margin: 6px !default;
+$router-tab-icon-color-light: #475569 !default;
+$router-tab-icon-color-dark: #cbd5e1 !default;
+
+// Buttons
+$router-tab-button-bg-light: #f8fafc !default;
+$router-tab-button-bg-dark: #1f2937 !default;
+$router-tab-button-color-light: #0f172a !default;
+$router-tab-button-color-dark: #f8fafc !default;
+$router-tab-active-button-bg-light: $router-tab-primary !default;
+$router-tab-active-button-bg-dark: #38bdf8 !default;
+$router-tab-active-button-color-light: #ffffff !default;
+$router-tab-active-button-color-dark: #0f172a !default;
 
 // Close icon
 $router-tab-close-icon-size: 12px !default;
@@ -33,7 +45,7 @@ $router-tab-close-icon-margin: 4px !default;
 $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-item-padding: 5px 12px !default;
 $router-tab-contextmenu-border-radius: 8px !default;
 $router-tab-contextmenu-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !default;
 

package/lib/theme.ts

@@ -76,6 +76,22 @@ const defaultDarkColor: ColorStyle = {
   iconColor: "#cbd5e1",
 }
 
+function readStoredPrimary(key: string): Partial<ColorStyle> | null {
+  if (typeof window === 'undefined') return null
+  const raw = window.localStorage.getItem(key)
+  if (!raw) return null
+
+  try {
+    const parsed = JSON.parse(raw) as Partial<ColorStyle>
+    return parsed && typeof parsed === 'object' ? parsed : null
+  } catch (error) {
+    if (import.meta.env?.DEV) {
+      console.warn('[RouterTabs] Failed to parse stored primary color palette', error)
+    }
+    return null
+  }
+}
+
 function applyPrimary(color: ColorStyle) {
   if (typeof document === 'undefined') return
   document.documentElement.style.setProperty('--router-tab-primary', color.primary ?? defaultColors.primary)
@@ -122,17 +138,36 @@ export function initRouterTabsTheme(options: RouterTabsThemeOptions = {}) {
 
   const {
     styleKey = STYLE_KEY,
+    primaryKey = PRIMARY_KEY,
     defaultStyle = DEFAULT_STYLE,
+    defaultPrimary
   } = options
 
   const storedStyle = (window.localStorage.getItem(styleKey) as 'light' | 'dark' | 'system' | null) ?? defaultStyle
 
   applyStyle(storedStyle)
-  
-  if (storedStyle === 'dark') {
-    applyPrimary(defaultDarkColor)
+
+  const prefersDark =
+    storedStyle === 'dark' ||
+    (storedStyle === 'system' && window.matchMedia(MEDIA_QUERY).matches)
+
+  const basePalette = prefersDark
+    ? { ...defaultDarkColor }
+    : { ...defaultColors }
+
+  if (defaultPrimary) {
+    basePalette.primary = defaultPrimary
+  }
+
+  const storedPrimary = readStoredPrimary(primaryKey)
+
+  if (storedPrimary) {
+    applyPrimary({
+      ...basePalette,
+      ...storedPrimary
+    })
   } else {
-    applyPrimary(defaultColors)
+    applyPrimary(basePalette)
   }
 }
 

package/lib/useReactiveTab.ts

@@ -1,4 +1,11 @@
-import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import {
+  ref,
+  computed,
+  isRef,
+  isReadonly,
+  type Ref,
+  type ComputedRef
+} from 'vue'
 
 export interface ReactiveTabState {
   title?: string | Ref<string> | ComputedRef<string>
@@ -22,64 +29,56 @@ export interface ReactiveTabReturn {
  * Composable for managing reactive tab properties
  * RouterTab will automatically watch these properties and update the tab accordingly
  */
-export function useReactiveTab(initialState: ReactiveTabState = {}): ReactiveTabReturn {
-  // Create reactive references
-  const tabTitle = ref(initialState.title || 'Untitled')
-  const tabIcon = ref(initialState.icon || 'mdi-tab')
-  const tabClosable = ref(initialState.closable !== false)
-  const tabMeta = ref(initialState.meta || {})
-
-  // Convert to computed if needed
-  const routeTabTitle = typeof initialState.title === 'function' 
-    ? computed(initialState.title as () => string)
-    : tabTitle
-    
-  const routeTabIcon = typeof initialState.icon === 'function'
-    ? computed(initialState.icon as () => string)
-    : tabIcon
-    
-  const routeTabClosable = typeof initialState.closable === 'function'
-    ? computed(initialState.closable as () => boolean)
-    : tabClosable
-    
-  const routeTabMeta = typeof initialState.meta === 'function'
-    ? computed(initialState.meta as () => any)
-    : tabMeta
-
-  // Update functions
-  const updateTitle = (title: string) => {
-    if ('value' in tabTitle) {
-      tabTitle.value = title
+function resolveReactiveProp<T>(
+  source: T | Ref<T> | ComputedRef<T> | (() => T) | undefined,
+  fallback: T
+): {
+  value: Ref<T> | ComputedRef<T>
+  update: (value: T) => void
+} {
+  if (isRef(source)) {
+    const writable = !isReadonly(source)
+    return {
+      value: source,
+      update: writable ? (value: T) => { (source as Ref<T>).value = value } : () => {}
     }
   }
 
-  const updateIcon = (icon: string) => {
-    if ('value' in tabIcon) {
-      tabIcon.value = icon
+  if (typeof source === 'function') {
+    const getter = source as () => T
+    return {
+      value: computed(getter),
+      update: () => {}
     }
   }
 
-  const updateClosable = (closable: boolean) => {
-    if ('value' in tabClosable) {
-      tabClosable.value = closable
-    }
-  }
+  const state = ref(
+    (source === undefined ? fallback : source) as T
+  ) as Ref<T>
 
-  const updateMeta = (meta: any) => {
-    if ('value' in tabMeta) {
-      tabMeta.value = meta
+  return {
+    value: state,
+    update: (value: T) => {
+      state.value = value
     }
   }
+}
+
+export function useReactiveTab(initialState: ReactiveTabState = {}): ReactiveTabReturn {
+  const title = resolveReactiveProp(initialState.title, 'Untitled')
+  const icon = resolveReactiveProp(initialState.icon, '')
+  const closable = resolveReactiveProp(initialState.closable, true)
+  const meta = resolveReactiveProp(initialState.meta, {})
 
   return {
-    routeTabTitle,
-    routeTabIcon,
-    routeTabClosable,
-    routeTabMeta,
-    updateTitle,
-    updateIcon,
-    updateClosable,
-    updateMeta
+    routeTabTitle: title.value,
+    routeTabIcon: icon.value,
+    routeTabClosable: closable.value,
+    routeTabMeta: meta.value,
+    updateTitle: title.update,
+    updateIcon: icon.update,
+    updateClosable: closable.update,
+    updateMeta: meta.update
   }
 }
 
@@ -127,4 +126,5 @@ export function useStatusTab(
     icon: computed(() => statusConfig[status.value].icon),
     closable: computed(() => status.value !== 'loading')
   })
-}
+}
+

package/package.json

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