vue3-router-tab 1.4.3 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -1
- package/dist/vue3-router-tab.js +664 -595
- package/dist/vue3-router-tab.umd.cjs +1 -1
- package/index.d.ts +67 -82
- package/lib/components/RouterTab.vue +73 -9
- package/lib/core/createRouterTabs.ts +86 -29
- package/lib/core/types.ts +3 -0
- package/lib/index.ts +15 -6
- package/lib/useReactiveTab.ts +6 -0
- package/package.json +16 -7
package/README.md
CHANGED
|
@@ -14,6 +14,7 @@ A powerful, feature-rich Vue 3 tab-bar plugin that keeps multiple routes alive w
|
|
|
14
14
|
- 🖱️ **Context Menu** - Right-click tabs for refresh, close, and navigation options
|
|
15
15
|
- 🔀 **Drag & Drop** - Reorder tabs with drag-and-drop (sortable)
|
|
16
16
|
- 💾 **Cookie Persistence** - Restore tabs on page refresh with customizable options
|
|
17
|
+
- 📌 **Sticky Routes** - Pin selected routes so they stay open and non-closable
|
|
17
18
|
- 🎭 **Theme Support** - Light, dark, and system themes with customizable colors
|
|
18
19
|
- ⚡ **KeepAlive Support** - Preserve component state when switching tabs with smart cache management
|
|
19
20
|
- ♿ **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.
|
|
|
71
72
|
</template>
|
|
72
73
|
```
|
|
73
74
|
|
|
75
|
+
### Sticky Tabs
|
|
76
|
+
|
|
77
|
+
Mark routes as sticky when you want them to stay pinned and non-closable:
|
|
78
|
+
|
|
79
|
+
```vue
|
|
80
|
+
<template>
|
|
81
|
+
<router-tab
|
|
82
|
+
:sticky-tabs="true"
|
|
83
|
+
:keep-alive="true"
|
|
84
|
+
/>
|
|
85
|
+
</template>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
```ts
|
|
89
|
+
{
|
|
90
|
+
path: '/dashboard',
|
|
91
|
+
component: Dashboard,
|
|
92
|
+
meta: {
|
|
93
|
+
title: 'Dashboard',
|
|
94
|
+
sticky: true,
|
|
95
|
+
},
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Set `:sticky-tabs="false"` to ignore sticky route metadata globally.
|
|
100
|
+
|
|
74
101
|
## 📖 Usage Guide
|
|
75
102
|
|
|
76
103
|
### Basic Configuration
|
|
@@ -102,7 +129,7 @@ const routes = [
|
|
|
102
129
|
meta: {
|
|
103
130
|
title: 'Home',
|
|
104
131
|
icon: 'mdi-home',
|
|
105
|
-
|
|
132
|
+
sticky: true,
|
|
106
133
|
keepAlive: true,
|
|
107
134
|
},
|
|
108
135
|
},
|