vue3-router-tab 0.0.1 → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Anil Shrestha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,7 +1,138 @@
-# Vue 3 + Vite
+# vue3-router-tab
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+A Vue 3 tab-bar plugin that keeps multiple routes alive with transition support, context menus, and optional Pinia persistence.
 
-## Recommended IDE Setup
+## Installation
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+```bash
+npm install vue3-router-tab
+# or
+pnpm add vue3-router-tab
+```
+
+## Register the plugin
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+
+import RouterTab from "vue3-router-tab";
+
+const app = createApp(App);
+app.use(router);
+app.use(RouterTab);
+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>
+```
+
+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,
+    },
+  },
+];
+```
+
+`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 -->
+/>
+```
+
+Prefer to use the composable directly?
+
+```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/dist/vue3-router-tab.cjs.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),le=require("pinia");/*!
+  * vue-router v4.5.1
+  * (c) 2025 Eduardo San Martin Morote
+  * @license MIT
+  */const ce=typeof document<"u",ue=Object.assign,fe=Array.isArray;function de(e){const o=Array.from(arguments).slice(1);console.warn.apply(console,["[Vue Router warn]: "+e].concat(o))}function pe(e,o){return(e.aliasOf||e)===(o.aliasOf||o)}var H;(function(e){e.pop="pop",e.push="push"})(H||(H={}));var F;(function(e){e.back="back",e.forward="forward",e.unknown=""})(F||(F={}));Symbol(process.env.NODE_ENV!=="production"?"navigation failure":"");var X;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(X||(X={}));const be=Symbol(process.env.NODE_ENV!=="production"?"router view location matched":""),Y=Symbol(process.env.NODE_ENV!=="production"?"router view depth":"");Symbol(process.env.NODE_ENV!=="production"?"router":"");Symbol(process.env.NODE_ENV!=="production"?"route location":"");const Q=Symbol(process.env.NODE_ENV!=="production"?"router view location":""),ve=t.defineComponent({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:o,slots:r}){process.env.NODE_ENV!=="production"&&he();const n=t.inject(Q),l=t.computed(()=>e.route||n.value),f=t.inject(Y,0),p=t.computed(()=>{let h=t.unref(f);const{matched:v}=l.value;let y;for(;(y=v[h])&&!y.components;)h++;return h}),d=t.computed(()=>l.value.matched[p.value]);t.provide(Y,t.computed(()=>p.value+1)),t.provide(be,d),t.provide(Q,l);const b=t.ref();return t.watch(()=>[b.value,d.value,e.name],([h,v,y],[T,g,_])=>{v&&(v.instances[y]=h,g&&g!==v&&h&&h===T&&(v.leaveGuards.size||(v.leaveGuards=g.leaveGuards),v.updateGuards.size||(v.updateGuards=g.updateGuards))),h&&v&&(!g||!pe(v,g)||!T)&&(v.enterCallbacks[y]||[]).forEach(C=>C(h))},{flush:"post"}),()=>{const h=l.value,v=e.name,y=d.value,T=y&&y.components[v];if(!T)return W(r.default,{Component:T,route:h});const g=y.props[v],_=g?g===!0?h.params:typeof g=="function"?g(h):g:null,C=A=>{A.component.isUnmounted&&(y.instances[v]=null)},w=t.h(T,ue({},_,o,{onVnodeUnmounted:C,ref:b}));if(process.env.NODE_ENV!=="production"&&ce&&w.ref){const A={depth:p.value,name:y.name,path:y.path,meta:y.meta};(fe(w.ref)?w.ref.map(S=>S.i):[w.ref.i]).forEach(S=>{S.__vrv_devtools=A})}return W(r.default,{Component:w,route:h})||w}}});function W(e,o){if(!e)return null;const r=e(o);return r.length===1?r[0]:r}const me=ve;function he(){const e=t.getCurrentInstance(),o=e.parent&&e.parent.type.name,r=e.parent&&e.parent.subTree&&e.parent.subTree.type;if(o&&(o==="KeepAlive"||o.includes("Transition"))&&typeof r=="object"&&r.name==="RouterView"){const n=o==="KeepAlive"?"keep-alive":"transition";de(`<router-view> can no longer be used directly inside <transition> or <keep-alive>.
+Use slot props instead:
+
+<router-view v-slot="{ Component }">
+  <${n}>
+    <component :is="Component" />
+  </${n}>
+</router-view>`)}}function ye(e={}){return{initialTabs:e.initialTabs??[],keepAlive:e.keepAlive??!0,maxAlive:e.maxAlive??0,keepLastTab:e.keepLastTab??!0,appendPosition:e.appendPosition??"last",defaultRoute:e.defaultRoute??"/"}}function V(e,o){const r=e.resolve(o);if(!r||!r.matched.length)throw new Error(`[RouterTabs] Unable to resolve route: ${String(o)}`);return r}const ge={path:e=>e.path,fullpath:e=>e.fullPath,fullname:e=>e.fullPath,full:e=>e.fullPath,name:e=>e.name?String(e.name):e.fullPath};function x(e){const o=e.meta?.key;if(typeof o=="function"){const r=o(e);if(typeof r=="string"&&r.length)return r}else if(typeof o=="string"&&o.length){const r=ge[o.toLowerCase()];return r?r(e):o}return e.fullPath}function z(e,o){const r=e.meta?.keepAlive;return typeof r=="boolean"?r:o}function G(e,o){const r=e.meta?.reuse;return typeof r=="boolean"?r:o}function te(e){const o=e.meta??{},r={};return"title"in o&&(r.title=o.title),"tips"in o&&(r.tips=o.tips),"icon"in o&&(r.icon=o.icon),"closable"in o&&(r.closable=o.closable),"tabClass"in o&&(r.tabClass=o.tabClass),"target"in o&&(r.target=o.target),"href"in o&&(r.href=o.href),r}function O(e,o,r){const n=te(e);return{id:x(e),to:e.fullPath,fullPath:e.fullPath,matched:e,alive:z(e,r),reusable:G(e,!1),closable:n.closable??!0,...n,...o}}function L(e,o,r,n){if(!e.find(f=>f.id===o.id)){if(r==="next"&&n){const f=e.findIndex(p=>p.id===n);if(f>-1){e.splice(f+1,0,o);return}}e.push(o)}}function Z(e,o,r){if(!o||o<=0)return;const n=e.filter(l=>l.alive);for(;n.length>o;){const l=n.shift();if(!l||l.id===r)continue;const f=e.findIndex(p=>p.id===l.id);f>-1&&(e[f].alive=!1)}}function we(e){return{to:e.to,title:e.title,tips:e.tips,icon:e.icon,tabClass:e.tabClass,closable:e.closable}}function ke(e){const o={};return"title"in e&&(o.title=e.title),"tips"in e&&(o.tips=e.tips),"icon"in e&&(o.icon=e.icon),"tabClass"in e&&(o.tabClass=e.tabClass),"closable"in e&&(o.closable=e.closable),o}function Te(e,o={}){const r=ye(o),n=t.reactive([]),l=t.ref(null),f=t.shallowRef(),p=t.ref(null),d=t.computed(()=>n.filter(i=>i.alive).map(i=>i.id));let b=!1;function h(i){const s=typeof i.matched=="object"?i:V(e,i);return{key:x(s),fullPath:s.fullPath,alive:z(s,r.keepAlive),reusable:G(s,!1),matched:s}}function v(i){const s=x(i);let c=n.find(k=>k.id===s);return c?(c.fullPath=i.fullPath,c.to=i.fullPath,c.matched=i,c.alive=z(i,r.keepAlive),c.reusable=G(i,c.reusable),Object.assign(c,te(i)),c):(c=O(i,{},r.keepAlive),L(n,c,r.appendPosition,l.value),Z(n,r.maxAlive,l.value),c)}async function y(i,s=!1,c=!0){const k=V(e,i),E=x(k),P=l.value===E;c==="sameTab"&&(c=P),c&&await C(E,!0),await e[s?"replace":"push"](k),P&&await N()}function T(i){const s=n.findIndex(k=>k.id===i),c=n[s]||n[s-1]||n[0];return c?c.to:r.defaultRoute}async function g(i=l.value,s={}){if(i){if(!s.force&&r.keepLastTab&&n.length===1)throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");if(await _(i,{force:s.force}),s.redirect!==null)if(l.value===i){const c=s.redirect??T(i);c&&await e.replace(c)}else s.redirect&&await e.replace(s.redirect)}}async function _(i,s={}){const c=n.findIndex(k=>k.id===i);c!==-1&&(n.splice(c,1),p.value===i&&(p.value=null),l.value===i&&(l.value=null,f.value=void 0))}async function C(i=l.value??void 0,s=!1){i&&(p.value=i,await t.nextTick(),s||await t.nextTick(),p.value=null)}async function w(i=!1){for(const s of n)await C(s.id,i)}async function A(i=r.defaultRoute){n.splice(0,n.length),l.value=null,f.value=void 0;for(const s of r.initialTabs){const c=V(e,s.to),k=O(c,s,r.keepAlive);n.push(k)}await e.replace(i)}async function N(){const i=l.value;i&&await C(i,!0)}function S(i){return typeof i.matched=="object"?x(i):x(V(e,i))}function K(){const i=n.find(s=>s.id===l.value);return{tabs:n.map(we),active:i?i.to:null}}async function $(i){b=!0,n.splice(0,n.length),l.value=null,f.value=void 0;const s=i?.tabs??[];for(const k of s)try{const E=V(e,k.to),P=ke(k),B=O(E,P,r.keepAlive);L(n,B,"last",null)}catch{}b=!1;const c=i?.active??s[s.length-1]?.to??r.defaultRoute;if(c)try{await e.replace(c)}catch{}}return t.watch(()=>e.currentRoute.value,i=>{if(b)return;const s=v(i);l.value=s.id,f.value=s,Z(n,r.maxAlive,l.value)},{immediate:!0}),r.initialTabs.length&&r.initialTabs.forEach(i=>{const s=V(e,i.to),c=O(s,i,r.keepAlive);L(n,c,"last",null)}),{options:r,tabs:n,activeId:l,current:f,includeKeys:d,refreshingKey:p,openTab:y,closeTab:g,removeTab:_,refreshTab:C,refreshAll:w,reset:A,reload:N,getRouteKey:S,matchRoute:h,snapshot:K,hydrate:$}}function ee(e){return e?typeof e=="string"?{name:e}:e:{}}const I=Symbol("RouterTabsContext"),D=typeof window<"u"&&"sessionStorage"in window,Ce=t.defineComponent({name:"RouterTab",components:{RouterView:me},props:{tabs:{type:Array,default:()=>[]},keepAlive:{type:Boolean,default:!0},maxAlive:{type:Number,default:0},keepLastTab:{type:Boolean,default:!0},append:{type:String,default:"last"},defaultPage:{type:[String,Object],default:"/"},tabTransition:{type:[String,Object],default:"router-tab-zoom"},pageTransition:{type:[String,Object],default:()=>({name:"router-tab-swap",mode:"out-in"})},contextmenu:{type:[Boolean,Array],default:!0},storage:{type:[Boolean,String],default:!1}},setup(e){const o=t.getCurrentInstance();if(!o)throw new Error("[RouterTab] component must be used within a Vue application context.");const r=o.appContext.app.config.globalProperties.$router;if(!r)throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");const n=Te(r,{initialTabs:e.tabs,keepAlive:e.keepAlive,maxAlive:e.maxAlive,keepLastTab:e.keepLastTab,appendPosition:e.append,defaultRoute:e.defaultPage});t.provide(I,n),o.appContext.config.globalProperties.$tabs=n;const l=t.computed(()=>ee(e.tabTransition)),f=t.computed(()=>ee(e.pageTransition)),p=t.reactive({visible:!1,target:null,position:{x:0,y:0}}),d=t.computed(()=>!e.storage||!D?null:typeof e.storage=="string"?e.storage:`router-tabs:${(r.options?.history?.base??"")||"default"}`);let b=!!d.value;const h=["refresh","refreshAll","close","closeLefts","closeRights","closeOthers"];function v(a){return n.tabs.findIndex(u=>u.id===a)}function y(a){const u=v(a.id);return u>0?n.tabs.slice(0,u):[]}function T(a){const u=v(a.id);return u>-1?n.tabs.slice(u+1):[]}function g(a){return n.tabs.filter(u=>u.id!==a.id)}async function _(a,u){const m=a.filter(R=>R.closable!==!1);if(m.length){for(const R of m)n.activeId.value===R.id?await n.closeTab(R.id,{redirect:u.to,force:!0}):await n.removeTab(R.id,{force:!0});n.activeId.value!==u.id&&await n.openTab(u.to,!0,!1)}}const C={refresh:{label:"Refresh",handler:async({target:a})=>{await n.refreshTab(a.id,!0)}},refreshAll:{label:"Refresh All",handler:async()=>{await n.refreshAll(!0)}},close:{label:"Close",handler:async({target:a})=>{await n.closeTab(a.id)},enable:({target:a})=>i(a)},closeLefts:{label:"Close to the Left",handler:async({target:a})=>{await _(y(a),a)},enable:({target:a})=>y(a).some(u=>u.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:a})=>{await _(T(a),a)},enable:({target:a})=>T(a).some(u=>u.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:a})=>{await _(g(a),a)},enable:({target:a})=>g(a).some(u=>u.closable!==!1)}};function w(){p.visible=!1,p.target=null}function A(a,u){e.contextmenu&&(p.visible=!0,p.target=a,p.position.x=u.clientX,p.position.y=u.clientY,document.addEventListener("click",w,{once:!0}))}function N(a,u){const m=typeof a=="string"?{id:a}:a,R=C[m.id],re=m.label??R?.label??String(m.id),M=m.visible??R?.visible??!0;if(!(typeof M=="function"?M(u):M!==!1))return null;const j=m.enable??R?.enable??!0,ie=typeof j=="function"?j(u):j!==!1,q=m.handler??R?.handler;if(!q)return null;const se=async()=>{await Promise.resolve(q(u))};return{id:String(m.id),label:re,disabled:!ie,action:se}}const S=t.computed(()=>{if(!p.visible||!p.target||e.contextmenu===!1)return[];const a=Array.isArray(e.contextmenu)?e.contextmenu:h,u={target:p.target,controller:n};return a.map(m=>N(m,u)).filter(m=>!!m)});async function K(a){a.disabled||(w(),await a.action())}function $(a){return typeof a.title=="string"?a.title:Array.isArray(a.title)&&a.title.length?String(a.title[0]):a.fullPath}function i(a){return!(a.closable===!1||n.options.keepLastTab&&n.tabs.length<=1)}async function s(a){await n.closeTab(a.id)}function c(a){n.activeId.value!==a.id&&n.openTab(a.to,!1)}function k(a){return["router-tab__item",{"is-active":n.activeId.value===a.id,"is-closable":i(a)},a.tabClass]}function E(a){return n.refreshingKey.value===n.getRouteKey(a)}async function P(){const a=d.value;if(!a||!D)return;const u=window.sessionStorage.getItem(a);if(u)try{const m=JSON.parse(u);if(!m||!Array.isArray(m.tabs))return;b=!0,await n.hydrate(m)}catch{}finally{b=!1,B()}}function B(){const a=d.value;if(!(!a||!D||b))try{const u=n.snapshot();window.sessionStorage.setItem(a,JSON.stringify(u))}catch{}}t.onMounted(()=>{document.addEventListener("keydown",w),P()}),t.onBeforeUnmount(()=>{document.removeEventListener("keydown",w),o.appContext.config.globalProperties.$tabs=null,B()}),t.watch(()=>e.keepAlive,a=>{n.options.keepAlive=a}),t.watch(()=>n.activeId.value,()=>w()),t.watch(()=>e.contextmenu,a=>{a||w()}),t.watch(()=>S.value.length,a=>{p.visible&&a===0&&w()}),t.watch(()=>({key:d.value,tabs:n.tabs.map(a=>({to:a.to,title:a.title,tips:a.tips,icon:a.icon,tabClass:a.tabClass,closable:a.closable})),active:n.activeId.value}),()=>{B()},{deep:!0});const ae=n.includeKeys;return{controller:n,tabs:n.tabs,includeKeys:ae,tabTransitionProps:l,pageTransitionProps:f,buildTabClass:k,activate:c,close:s,context:p,menuItems:S,handleMenuAction:K,showContextMenu:A,hideContextMenu:w,tabTitle:$,isClosable:i,isRefreshing:E}}}),Re=(e,o)=>{const r=e.__vccOpts||e;for(const[n,l]of o)r[n]=l;return r},_e={class:"router-tab"},Se={class:"router-tab__header"},Ae={class:"router-tab__slot-start"},Ee={class:"router-tab__scroll"},Pe=["onClick","onAuxclick","onContextmenu"],Ve=["title"],xe=["onClick"],Ne={class:"router-tab__slot-end"},Be={class:"router-tab__container"},Ie=["aria-disabled","onClick"];function Oe(e,o,r,n,l,f){const p=t.resolveComponent("RouterView");return t.openBlock(),t.createElementBlock("div",_e,[t.createElementVNode("header",Se,[t.createElementVNode("div",Ae,[t.renderSlot(e.$slots,"start")]),t.createElementVNode("div",Ee,[t.createVNode(t.TransitionGroup,t.mergeProps({tag:"ul",class:"router-tab__nav"},e.tabTransitionProps),{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.tabs,d=>(t.openBlock(),t.createElementBlock("li",{key:d.id,class:t.normalizeClass(e.buildTabClass(d)),onClick:b=>e.activate(d),onAuxclick:t.withModifiers(b=>e.close(d),["middle","prevent"]),onContextmenu:t.withModifiers(b=>e.showContextMenu(d,b),["prevent"])},[t.createElementVNode("span",{class:"router-tab__item-title",title:e.tabTitle(d)},[d.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(["router-tab__item-icon",d.icon])},null,2)):t.createCommentVNode("",!0),t.createTextVNode(" "+t.toDisplayString(e.tabTitle(d)),1)],8,Ve),e.isClosable(d)?(t.openBlock(),t.createElementBlock("a",{key:0,class:"router-tab__item-close",onClick:t.withModifiers(b=>e.close(d),["stop"])},null,8,xe)):t.createCommentVNode("",!0)],42,Pe))),128))]),_:1},16)]),t.createElementVNode("div",Ne,[t.renderSlot(e.$slots,"end")])]),t.createElementVNode("div",Be,[t.createVNode(p,null,{default:t.withCtx(({Component:d,route:b})=>[t.createVNode(t.Transition,t.mergeProps(e.pageTransitionProps,{appear:""}),{default:t.withCtx(()=>[e.controller.options.keepAlive?(t.openBlock(),t.createBlock(t.KeepAlive,{key:0,include:e.includeKeys,max:e.controller.options.maxAlive||void 0},[e.isRefreshing(b)?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(t.resolveDynamicComponent(d),{key:e.controller.getRouteKey(b),class:"router-tab-page"}))],1032,["include","max"])):t.createCommentVNode("",!0)]),_:2},1040),t.createVNode(t.Transition,t.mergeProps(e.pageTransitionProps,{appear:""}),{default:t.withCtx(()=>[!e.controller.options.keepAlive||e.isRefreshing(b)?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(d),{key:e.controller.getRouteKey(b)+(e.isRefreshing(b)?"-refresh":""),class:"router-tab-page"})):t.createCommentVNode("",!0)]),_:2},1040)]),_:1})]),e.context.visible&&e.context.target?(t.openBlock(),t.createElementBlock("div",{key:0,class:"router-tab__contextmenu",style:t.normalizeStyle({left:e.context.position.x+"px",top:e.context.position.y+"px"})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.menuItems,d=>(t.openBlock(),t.createElementBlock("a",{key:d.id,class:"router-tab__contextmenu-item","aria-disabled":d.disabled,onClick:t.withModifiers(b=>e.handleMenuAction(d),["prevent"])},t.toDisplayString(d.label),9,Ie))),128))],4)):t.createCommentVNode("",!0)])}const U=Re(Ce,[["render",Oe]]);function ne(e={}){const{optional:o=!1}=e,r=t.inject(I,null);if(r)return r;const n=t.inject("$tabs",null);if(n)return n;const f=t.getCurrentInstance()?.appContext.config.globalProperties.$tabs;if(f)return f;if(!o)throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");return null}const Ke="router-tabs:persistent";function $e(e){return typeof window>"u"?null:e===void 0?window.localStorage??null:e}function Me(e){const o=$e(e.storage),r=e.storageKey??Ke;return le.defineStore(e.storeId??"routerTabs",{state:()=>({snapshot:null}),actions:{load(){if(!(!o||this.snapshot))try{const n=o.getItem(r);n&&(this.snapshot=JSON.parse(n))}catch{}},setSnapshot(n){if(this.snapshot=n,!!o)try{n&&n.tabs.length?o.setItem(r,JSON.stringify(n)):o.removeItem(r)}catch{}},clear(){this.setSnapshot(null)}}})}function oe(e={}){const o=ne(),n=(e.store??Me(e))(),l=t.ref(!1);return t.onMounted(async()=>{n.load();const f=n.snapshot;if(f)try{l.value=!0,await o.hydrate(f)}finally{l.value=!1,n.setSnapshot(o.snapshot())}}),t.watch(()=>({tabs:o.tabs.map(f=>({to:f.to,title:f.title,tips:f.tips,icon:f.icon,tabClass:f.tabClass,closable:f.closable})),active:o.activeId.value}),()=>{l.value||n.setSnapshot(o.snapshot())},{deep:!0}),n}const je={class:"router-tabs-pinia","aria-hidden":"true"},Le=t.defineComponent({__name:"RouterTabsPinia",props:{storeId:{},storageKey:{},storage:{},store:{type:[Function,Object]}},setup(e){return oe(e),(r,n)=>(t.openBlock(),t.createElementBlock("span",je))}}),J={install(e){J._installed||(J._installed=!0,e.component(U.name,U),Object.defineProperty(e.config.globalProperties,"$tabs",{configurable:!0,enumerable:!1,get(){return e._context.provides[I]},set(o){o&&e.provide(I,o)}}))}};exports.RouterTab=U;exports.RouterTabsPinia=Le;exports.default=J;exports.routerTabsKey=I;exports.useRouterTabs=ne;exports.useRouterTabsPiniaPersistence=oe;

package/dist/vue3-router-tab.css

@@ -0,0 +1 @@
+.router-tab{display:flex;flex-direction:column;min-height:300px}.router-tab__header{position:relative;z-index:9;display:flex;flex:none;box-sizing:border-box;height:40px;border-bottom:1px solid #eaecef;transition:all .2s ease-in-out}.router-tab__scroll{position:relative;flex:1 1 0px;height:40px;overflow:hidden}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden}.router-tab__scrollbar{position:absolute;right:0;bottom:0;left:0;height:3px;background-color:#0000001a;border-radius:3px;opacity:0;transition:opacity .3s ease-in-out}.router-tab__scroll:hover .router-tab__scrollbar,.router-tab__scrollbar.is-dragging{opacity:1}.router-tab__scrollbar-thumb{position:absolute;top:0;left:0;height:100%;background-color:#0000001a;border-radius:3px;transition:background-color .3s ease-in-out}.router-tab__scrollbar-thumb:hover,.router-tab__scrollbar.is-dragging .router-tab__scrollbar-thumb{background-color:#42b983cc}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;padding:0 20px;color:#4d4d4d;font-size:14px;border:1px solid #eaecef;border-left:none;transform-origin:left bottom;cursor:pointer;transition:all .3s ease-in-out;-webkit-user-select:none;user-select:none}.router-tab__item:first-child{border-left:1px solid #eaecef}.router-tab__item.is-contextmenu{color:#000}.router-tab__item:hover,.router-tab__item.is-active{color:#42b983}.router-tab__item:hover.is-closable,.router-tab__item.is-active.is-closable{padding:0 11.5px}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:13px;margin-left:4px}.router-tab__item:hover .router-tab__item-close:before,.router-tab__item:hover .router-tab__item-close:after,.router-tab__item.is-active .router-tab__item-close:before,.router-tab__item.is-active .router-tab__item-close:after{border-color:#42b983}.router-tab__item.is-active{border-bottom-color:#fff}.router-tab__item.is-drag-over{background:#0000000d;transition:background .15s ease}.router-tab__item-title{min-width:30px;max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-icon{margin-right:5px;font-size:16px}.router-tab__item-close{position:relative;display:block;width:0;height:13px;margin-left:0;overflow:hidden;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:6px;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:#4d4d4d;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:rotate(-45deg)}.router-tab__item-close:after{transform:rotate(45deg)}.router-tab__item-close:hover{background-color:#a6a6a6}.router-tab__item-close:hover:before,.router-tab__item-close:hover:after{background-color:#fff}.router-tab__container{position:relative;flex:1;overflow-x:hidden;overflow-y:auto;background:#fff;transition:all .4s ease-in-out}.router-tab__container>.router-alive{height:100%}.router-tab__iframe{position:absolute;top:0;left:0;width:100%;height:100%}.router-tab__contextmenu{position:fixed;z-index:999;min-width:120px;padding:8px 0;font-size:14px;background:#fff;border:1px solid #eaecef;box-shadow:1px 1px 4px #0000001a;transform-origin:left top;transition:all .25s ease-in}.router-tab__contextmenu-item{position:relative;display:block;padding:0 20px;color:#4d4d4d;line-height:30px;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.router-tab__contextmenu-item:hover,.router-tab__contextmenu-item:active{color:#42b983}.router-tab__contextmenu-item[disabled],.router-tab__contextmenu-item[aria-disabled=true]{color:#aaa;background:none;cursor:default;pointer-events:none}.has-icon .router-tab__contextmenu-item{padding-left:30px}.router-tab__contextmenu-icon{position:absolute;top:0;left:8px;display:none;line-height:30px}.has-icon .router-tab__contextmenu-icon{display:block}.router-tab-zoom-enter-active,.router-tab-zoom-leave-active{transition:all .4s}.router-tab-zoom-enter,.router-tab-zoom-leave-to{transform:scale(0);opacity:0}.router-tab-swap-enter-active,.router-tab-swap-leave-active{transition:all .5s}.router-tab-swap-enter,.router-tab-swap-leave-to{opacity:0}.router-tab-swap-enter{transform:translate(-30px)}.router-tab-swap-leave-to{transform:translate(30px)}