vue3-router-tab 1.4.2 → 1.4.4

package/README.md

@@ -14,6 +14,7 @@ A powerful, feature-rich Vue 3 tab-bar plugin that keeps multiple routes alive w
 - 🖱️ **Context Menu** - Right-click tabs for refresh, close, and navigation options
 - 🔀 **Drag & Drop** - Reorder tabs with drag-and-drop (sortable)
 - 💾 **Cookie Persistence** - Restore tabs on page refresh with customizable options
+- 📌 **Sticky Routes** - Pin selected routes so they stay open and non-closable
 - 🎭 **Theme Support** - Light, dark, and system themes with customizable colors
 - ⚡ **KeepAlive Support** - Preserve component state when switching tabs with smart cache management
 - ♿ **Accessibility** - Full WCAG compliance with ARIA labels, keyboard navigation, and screen reader support
@@ -71,6 +72,32 @@ That's it! You now have a fully functional tabbed router interface.
 </template>
 ```
 
+### Sticky Tabs
+
+Mark routes as sticky when you want them to stay pinned and non-closable:
+
+```vue
+<template>
+  <router-tab
+    :sticky-tabs="true"
+    :keep-alive="true"
+  />
+</template>
+```
+
+```ts
+{
+  path: '/dashboard',
+  component: Dashboard,
+  meta: {
+    title: 'Dashboard',
+    sticky: true,
+  },
+}
+```
+
+Set `:sticky-tabs="false"` to ignore sticky route metadata globally.
+
 ## 📖 Usage Guide
 
 ### Basic Configuration
@@ -102,7 +129,7 @@ const routes = [
     meta: {
       title: 'Home',
       icon: 'mdi-home',
-      closable: true,
+      sticky: true,
       keepAlive: true,
     },
   },
@@ -871,7 +898,7 @@ const {
 } = useReactiveTab({
   title: () => `${user.value.name} - ${user.value.status}`,
   icon: () => user.value.status === 'online' ? 'mdi-account' : 'mdi-account-off',
-  closable: () => user.value.status !== 'editing'
+ closable: () => user.value.status !== 'editing'
 })
 </script>
 ```
@@ -883,6 +910,23 @@ const {
 3. **Automatic watching**: No manual watchers needed - the plugin handles everything
 4. **Performance**: Only active tab components are watched to minimize overhead
 
+#### Works inside KeepAlive and wrappers
+
+`<router-tab>` forwards the tab bindings even when your pages are wrapped for caching. Just expose reactive values (refs/computed) and they will still be watched:
+
+```vue
+<script setup>
+import { computed, ref } from 'vue'
+
+const count = ref(3)
+const isLoading = ref(false)
+
+const routeTabTitle = computed(() => isLoading.value ? 'Loading orders…' : `Orders (${count.value})`)
+const routeTabIcon = computed(() => isLoading.value ? 'mdi-loading mdi-spin' : 'mdi-cart')
+const routeTabClosable = computed(() => !isLoading.value)
+</script>
+```
+
 > 💡 **Try it yourself**: Check out the live demo at `/title-test` in the example app to see all these features in action!
 
 ### Options API Support