vue3-router-tab 1.0.0 → 1.0.2

package/README.md

@@ -1,44 +1,138 @@
-# Vue Snotify for Vue 3
-Based on [vue-snotify](https://github.com/artemsky/vue-snotify) for Vue 2.
+# vue3-router-tab
 
-# How to use
-npm i --save vue3-notify
+A Vue 3 tab-bar plugin that keeps multiple routes alive with transition support, context menus, and optional Pinia persistence.
+
+## Installation
+
+```bash
+npm install vue3-router-tab
+# or
+pnpm add vue3-router-tab
+```
+
+## Register the plugin
 
-In main.ts : 
 ```ts
-import notify from 'vue3-notification';
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
 
-const app = createApp(App)
+import RouterTab from "vue3-router-tab";
 
-app.use(notify);
+const app = createApp(App);
+app.use(router);
+app.use(RouterTab);
+app.mount("#app");
+```
 
-app.mount('#app');
+The plugin automatically registers two components globally:
+
+- `<router-tab>` – the tab layout and router-view wrapper
+- `<router-tabs>` – a helper to persist tabs through Pinia/localStorage (optional)
+
+## Basic usage
+
+```vue
+<template>
+  <router-tab> </router-tab>
+</template>
 ```
-In App.vue:
-```html
-<vue3-notify />
+
+Configure the routes with meta information to control titles, icons, and whether a tab can be closed:
+
+```ts
+// router.ts
+const routes = [
+  {
+    path: "/",
+    component: Home,
+    meta: {
+      title: "Home",
+      icon: "fa fa-home",
+      key: "fullPath",
+      closable: true,
+      keepAlive: true,
+    },
+  },
+  {
+    path: "/about",
+    component: About,
+    meta: {
+      title: "About",
+      icon: "fa fa-info-circle",
+      keepAlive: false,
+    },
+  },
+];
 ```
-## Vue Options API:
-```js
-methods: {
-    handleClick() {
-      this.$snotify.success("Lorem ipsum dolor sit amet!");
-    }
-}
+
+`meta.key` accepts the built-in shortcuts `fullPath`, `path`, or `name`, or you can supply a custom function.
+
+## Pinia persistence
+
+`<router-tabs>` wraps `useRouterTabsPiniaPersistence` and synchronises the tab snapshot with Pinia/localStorage. You can configure it through props:
+
+```vue
+<router-tabs
+  storage-key="app-tabs"      <!-- storage key name -->
+  :fallback-route="'/dashboard'" <!-- optional route used when no snapshot exists -->
+/>
 ```
-## Inject function for Vue files
-The plugin automatically sets global provide() with key "vue3-notify".
-```js
-<script setup>
-import { inject } from "vue";
 
-const snotify: (any) = inject("vue3-notify");
+Prefer to use the composable directly?
 
-function handleClick() {
-    handleClick() {
-       snotify.success("Lorem ipsum dolor sit amet!");
-    }
-};
+```ts
+<script setup lang="ts">
+import { useRouterTabsPiniaPersistence } from 'vue3-router-tab'
 
+useRouterTabsPiniaPersistence({
+  storageKey: 'app-tabs',
+  fallbackRoute: '/dashboard',
+})
 </script>
-```
+```
+
+You can provide your own Pinia store via the `store` option if you need to persist snapshots to a backend or IndexedDB.
+
+## Customising the context menu
+
+The context menu can be disabled or extended via the `contextmenu` prop:
+
+```vue
+<router-tab
+  :contextmenu="[
+    'refresh',
+    'close',
+    { id: 'closeOthers', label: 'Close All Others' },
+    {
+      id: 'my-action',
+      label: 'Open in new window',
+      handler: ({ target }) => window.open(target.to, '_blank'),
+    },
+  ]"
+/>
+```
+
+Pass `false` to hide the menu entirely.
+
+## Slots
+
+- `start` / `end` – areas on either side of the tab list (useful for toolbars and the Pinia helper)
+- `default` – the routed tab content (provided by `<router-tab>` automatically)
+
+## Styling
+
+The package ships with its own SCSS/CSS bundle (imported automatically by the plugin). To customise, override the classes prefixed with `router-tab__` in your own CSS.
+
+## Types
+
+The library ships TypeScript definitions for the tab records, menu configuration, Pinia options, and helper APIs. Import the types from the root module:
+
+```ts
+import type { TabRecord, RouterTabsSnapshot } from "vue3-router-tab";
+```
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-router-tab",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "files": [
     "dist",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.3",
     "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
     "typescript": "^5.9.2",
@@ -39,7 +39,11 @@
     "vue3",
     "router",
     "tabs",
-    "tab"
+    "tab",
+    "pinia",
+    "persistence",
+    "tab persistence",
+    "router-tab"
   ],
   "license": "MIT",
   "homepage": "https://github.com/anilshr25/vue3-router-tab/#readme",