vue3-router-tab 1.2.5 → 1.2.7

package/lib/core/createRouterTabs.ts

@@ -106,9 +106,9 @@ function insertTab(tabs: TabRecord[], tab: TabRecord, position: 'last' | 'next',
   if (exists) return
 
   if (position === 'next' && referenceId) {
-    const idx = tabs.findIndex(item => item.id === referenceId)
-    if (idx > -1) {
-      tabs.splice(idx + 1, 0, tab)
+    const referenceIndex = tabs.findIndex(item => item.id === referenceId)
+    if (referenceIndex !== -1) {
+      tabs.splice(referenceIndex + 1, 0, tab)
       return
     }
   }
@@ -211,7 +211,14 @@ export function createRouterTabs(
 
   function fallbackAfterClose(closedId: string): RouteLocationRaw | null {
     const idx = tabs.findIndex(item => item.id === closedId)
-    const candidate = tabs[idx] || tabs[idx - 1] || tabs[0]
+    if (idx === -1) return options.defaultRoute
+    
+    // Priority: next tab -> previous tab -> first available tab
+    const nextTab = tabs[idx + 1] // Next tab (after the one being closed)
+    const prevTab = tabs[idx - 1] // Previous tab
+    const firstTab = tabs.find(tab => tab.id !== closedId) // First available tab (excluding the one being closed)
+    
+    const candidate = nextTab || prevTab || firstTab
     if (candidate) return candidate.to
     return options.defaultRoute
   }
@@ -222,15 +229,20 @@ export function createRouterTabs(
       throw new Error('[RouterTabs] Unable to close the final tab when keepLastTab is true.')
     }
 
+    // Calculate fallback route BEFORE removing the tab
+    const isClosingActiveTab = activeId.value === id
+    const shouldRedirect = isClosingActiveTab && closeOptions.redirect !== null
+    const fallbackRoute = shouldRedirect ? (closeOptions.redirect ?? fallbackAfterClose(id)) : null
+
+
+
     await removeTab(id, { force: closeOptions.force })
 
+    // Only skip redirect if explicitly set to null
     if (closeOptions.redirect === null) return
 
-    if (activeId.value === id) {
-      const redirect = closeOptions.redirect ?? fallbackAfterClose(id)
-      if (redirect) await router.replace(redirect)
-    } else if (closeOptions.redirect) {
-      await router.replace(closeOptions.redirect)
+    if (shouldRedirect && fallbackRoute) {
+      await router.replace(fallbackRoute)
     }
   }
 
@@ -255,6 +267,16 @@ export function createRouterTabs(
 
   async function refreshTab(id: string | undefined = activeId.value ?? undefined, force = false) {
     if (!id) return
+    const tab = tabs.find(item => item.id === id)
+    if (!tab) return
+
+    if (options.keepAlive && tab.alive) {
+      tab.alive = false
+      await nextTick()
+      tab.alive = true
+      await nextTick()
+    }
+
     refreshingKey.value = id
     await nextTick()
     if (!force) await nextTick()

package/lib/index.ts

@@ -11,6 +11,7 @@ import {
 } from './theme'
 
 import type { RouterTabsContext } from './core/types'
+import type { RouterTabsThemeOptions } from './theme'
 
 export type {
   TabRecord,
@@ -22,6 +23,28 @@ export type {
 
 export type { RouterTabsThemeOptions } from './theme'
 
+export interface RouterTabsPluginOptions {
+  /**
+   * Whether to initialise the theme system automatically during install.
+   * Defaults to `true`.
+   */
+  initTheme?: boolean
+  /**
+   * Theme options passed to `initRouterTabsTheme` when `initTheme` is enabled.
+   */
+  themeOptions?: RouterTabsThemeOptions
+  /**
+   * Global component name used when registering `RouterTab`.
+   * Defaults to the component's `name` option or `"RouterTab"`.
+   */
+  componentName?: string
+  /**
+   * Global component name used when registering `RouterTabs`.
+   * Defaults to the component's `name` option or `"RouterTabs"`.
+   */
+  tabsComponentName?: string
+}
+
 export {
   routerTabsKey,
   useRouterTabs,
@@ -33,22 +56,42 @@ export {
   setRouterTabsPrimary
 }
 
-import "./scss/index.scss";
+export {
+  useReactiveTab,
+  useLoadingTab,
+  useNotificationTab,
+  useStatusTab
+} from './useReactiveTab'
+
+export type {
+  ReactiveTabState,
+  ReactiveTabReturn
+} from './useReactiveTab'
+
+import './scss/index.scss'
+
+let installed = false
 
 const plugin: Plugin = {
-  install(app: App) {
-    if ((plugin as any)._installed) return
-      ; (plugin as any)._installed = true
+  install(app: App, options?: RouterTabsPluginOptions) {
+    if (installed) return
+    installed = true
 
-    initRouterTabsTheme()
+    const {
+      initTheme = true,
+      themeOptions,
+      componentName = RouterTab.name || 'RouterTab',
+      tabsComponentName = RouterTabsComponent.name || 'RouterTabs'
+    } = options ?? {}
 
-    const componentName = RouterTab.name || 'RouterTab'
-    const persistenceComponentName = RouterTabsComponent.name || 'RouterTabs'
+    if (initTheme) {
+      initRouterTabsTheme(themeOptions ?? {})
+    }
 
     app.component(componentName, RouterTab)
-    app.component(persistenceComponentName, RouterTabsComponent)
+    app.component(tabsComponentName, RouterTabsComponent)
 
-    if (persistenceComponentName !== 'router-tabs') {
+    if (tabsComponentName.toLowerCase() !== 'router-tabs') {
       app.component('router-tabs', RouterTabsComponent)
     }
 

package/lib/persistence.ts

@@ -119,7 +119,7 @@ export function useRouterTabsPersistence(options: RouterTabsPersistenceOptions =
         } finally {
           hydrating.value = false
         }
-      } else {
+      } else if (Object.prototype.hasOwnProperty.call(options, 'fallbackRoute')) {
         try {
           hydrating.value = true
           const fallback = options.fallbackRoute ?? ctrl.options.defaultRoute
@@ -127,6 +127,8 @@ export function useRouterTabsPersistence(options: RouterTabsPersistenceOptions =
         } finally {
           hydrating.value = false
         }
+      } else {
+        hydrating.value = false
       }
 
       const snapshot = ctrl.snapshot()

package/lib/scss/index.scss

@@ -12,6 +12,34 @@
   --router-tab-header-height: #{$router-tab-header-height};
   --router-tab-padding: #{$router-tab-padding};
   --router-tab-font-size: #{$router-tab-font-size};
+  --router-tab-transition: #{$router-tab-transition};
+  
+  // Colors (will be overridden by theme system)
+  --router-tab-primary: #{$router-tab-primary};
+  --router-tab-background: #{$router-tab-bg-light};
+  --router-tab-text: #{$router-tab-text-light};
+  --router-tab-border: #{$router-tab-border-light};
+  --router-tab-header-bg: #{$router-tab-bg-light};
+  --router-tab-active-background: #{$router-tab-primary};
+  --router-tab-active-text: #ffffff;
+  --router-tab-active-border: #{$router-tab-primary};
+  --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};
 }
 
 // =============================================================================
@@ -87,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);
@@ -153,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);
@@ -176,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);
       }
     }
@@ -184,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 {
@@ -205,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;
@@ -225,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%);
@@ -239,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

@@ -46,7 +46,7 @@ const defaultColors: ColorStyle = {
   activeText: "#ffffff",
   activeBorder: "#034960",
   
-  headerBackground: "#ffff",
+  headerBackground: "#ffffff",
   
   buttonBackground: "#f8fafc",
   buttonColor: "#034960",
@@ -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)
@@ -90,6 +106,7 @@ function applyPrimary(color: ColorStyle) {
   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)
+  document.documentElement.style.setProperty('--router-tab-icon-color', color.iconColor ?? defaultColors.iconColor)
 }
 
 function applyStyle(style: 'light' | 'dark' | 'system') {
@@ -121,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

@@ -0,0 +1,130 @@
+import {
+  ref,
+  computed,
+  isRef,
+  isReadonly,
+  type Ref,
+  type ComputedRef
+} from 'vue'
+
+export interface ReactiveTabState {
+  title?: string | Ref<string> | ComputedRef<string>
+  icon?: string | Ref<string> | ComputedRef<string>
+  closable?: boolean | Ref<boolean> | ComputedRef<boolean>
+  meta?: any | Ref<any> | ComputedRef<any>
+}
+
+export interface ReactiveTabReturn {
+  routeTabTitle: Ref<string> | ComputedRef<string>
+  routeTabIcon: Ref<string> | ComputedRef<string>
+  routeTabClosable: Ref<boolean> | ComputedRef<boolean>
+  routeTabMeta: Ref<any> | ComputedRef<any>
+  updateTitle: (title: string) => void
+  updateIcon: (icon: string) => void
+  updateClosable: (closable: boolean) => void
+  updateMeta: (meta: any) => void
+}
+
+/**
+ * Composable for managing reactive tab properties
+ * RouterTab will automatically watch these properties and update the tab accordingly
+ */
+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 } : () => {}
+    }
+  }
+
+  if (typeof source === 'function') {
+    const getter = source as () => T
+    return {
+      value: computed(getter),
+      update: () => {}
+    }
+  }
+
+  const state = ref(
+    (source === undefined ? fallback : source) as T
+  ) as Ref<T>
+
+  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: title.value,
+    routeTabIcon: icon.value,
+    routeTabClosable: closable.value,
+    routeTabMeta: meta.value,
+    updateTitle: title.update,
+    updateIcon: icon.update,
+    updateClosable: closable.update,
+    updateMeta: meta.update
+  }
+}
+
+/**
+ * Preset for loading state tabs
+ */
+export function useLoadingTab(loadingState: Ref<boolean>, baseTitle = 'Page') {
+  return useReactiveTab({
+    title: computed(() => loadingState.value ? 'Loading...' : baseTitle),
+    icon: computed(() => loadingState.value ? 'mdi-loading mdi-spin' : 'mdi-page'),
+    closable: computed(() => !loadingState.value)
+  })
+}
+
+/**
+ * Preset for notification-aware tabs
+ */
+export function useNotificationTab(
+  count: Ref<number>, 
+  baseTitle = 'Page',
+  baseIcon = 'mdi-page'
+) {
+  return useReactiveTab({
+    title: computed(() => count.value > 0 ? `${baseTitle} (${count.value})` : baseTitle),
+    icon: computed(() => count.value > 0 ? 'mdi-bell-badge' : baseIcon)
+  })
+}
+
+/**
+ * Preset for status-aware tabs
+ */
+export function useStatusTab(
+  status: Ref<'normal' | 'loading' | 'error' | 'success'>,
+  baseTitle = 'Page'
+) {
+  const statusConfig = {
+    normal: { suffix: '', icon: 'mdi-page' },
+    loading: { suffix: ' - Loading', icon: 'mdi-loading mdi-spin' },
+    error: { suffix: ' - Error', icon: 'mdi-alert' },
+    success: { suffix: ' - Success', icon: 'mdi-check-circle' }
+  }
+
+  return useReactiveTab({
+    title: computed(() => baseTitle + statusConfig[status.value].suffix),
+    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.5",
+  "version": "1.2.7",
   "type": "module",
   "files": [
     "dist",
@@ -20,7 +20,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
@@ -46,7 +47,11 @@
   ],
   "license": "MIT",
   "homepage": "https://github.com/anilshr25/vue3-router-tab/#readme",
-  "description": "Simple Confirm Dialog verification plugin with Vue 3.",
+  "description": "Vue 3 Router Tabs component: tabbed navigation for Vue Router with persistence, context menu, drag-and-drop reordering, theming, and reactive page-driven tab titles.",
+  "sideEffects": [
+    "dist/vue3-router-tab.css",
+    "lib/scss/index.scss"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/anilshr25/vue3-router-tab.git"