vue-stack-tabs 0.1.8 → 0.1.9

package/dist/vue-stack-tabs.es.js

@@ -5756,79 +5756,32 @@ const tu = () => {
   }, 500), setIFramePath: (i) => {
     vs = i;
   }, active: t, reset: a };
-}, nu = {
-  class: "stack-tab__container"
-}, ru = ["src"], su = /* @__PURE__ */ fe({
+}, nu = { class: "stack-tab__container" }, ru = ["src"], su = /* @__PURE__ */ fe({
   __name: "StackTabs",
   props: {
-    defaultTabs: {
-      default: () => []
-    },
-    max: {
-      default: 20
-    },
-    append: {
-      default: "last"
-    },
-    contextmenu: {
-      type: [Boolean, Object],
-      default: !0
-    },
-    pageTransition: {
-      default: "stack-tab-swap"
-    },
-    tabTransition: {
-      default: "stack-tab-zoom"
-    },
-    tabScrollMode: {
-      default: rt.BOTH
-    },
-    width: {
-      default: "100%"
-    },
-    height: {
-      default: "100%"
-    },
-    i18n: {
-      default: () => ({
-        locale: "zh-CN",
-        messages: {}
-      })
-    },
+    defaultTabs: { default: () => [] },
+    max: { default: 20 },
+    append: { default: "last" },
+    contextmenu: { type: [Boolean, Object], default: !0 },
+    pageTransition: { default: "stack-tab-swap" },
+    tabTransition: { default: "stack-tab-zoom" },
+    tabScrollMode: { default: rt.BOTH },
+    width: { default: "100%" },
+    height: { default: "100%" },
+    i18n: { default: () => ({ locale: "zh-CN", messages: {} }) },
     messages: {},
-    reloadable: {
-      type: Boolean,
-      default: !0
-    },
-    closable: {
-      type: Boolean,
-      default: !0
-    },
-    space: {
-      default: 300
-    },
+    reloadable: { type: Boolean, default: !0 },
+    closable: { type: Boolean, default: !0 },
+    space: { default: 300 },
     iframePath: {}
   },
   emits: ["onActive"],
-  setup(e, {
-    emit: t
-  }) {
-    const {
-      tabs: n,
-      pageShown: s,
-      caches: a,
-      addPage: r,
-      destroy: o,
-      initial: i
-    } = jt(), l = t, c = e;
-    hr("locales", {
-      ...c.i18n
-    });
+  setup(e, { emit: t }) {
+    const { tabs: n, pageShown: s, caches: a, addPage: r, destroy: o, initial: i } = jt(), l = t, c = e;
+    hr("locales", { ...c.i18n });
     const h = Q(!1);
     hr("maximum", h);
-    const {
-      setIFramePath: m
-    } = tu();
+    const { setIFramePath: m } = tu();
     m(c.iframePath), Os(() => {
       i(c.defaultTabs);
     });
@@ -5839,57 +5792,73 @@ const tu = () => {
       o();
     });
     const N = un();
-    return Xe(() => N.currentRoute.value.fullPath, () => {
-      s.value = !0;
-    }), (I, S) => {
+    return Xe(
+      () => N.currentRoute.value.fullPath,
+      () => {
+        s.value = !0;
+      }
+    ), (I, S) => {
       const d = ys("router-view");
       return z(), se("div", {
-        class: xe(["stack-tab", {
-          "stack-tab__maximum": h.value
-        }]),
+        class: xe(["stack-tab", { "stack-tab__maximum": h.value }]),
         style: Ut({
           width: I.width,
           height: I.height,
           "z-index": h.value ? x(ca)("body *:not(.stack-tab,.stack-tab *)") : void 0
         })
-      }, [oe(Ic, {
-        space: I.space,
-        onActive: E,
-        "tab-transition": I.tabTransition,
-        max: I.max
-      }, {
-        leftButton: De(() => [Ue(I.$slots, "leftButton")]),
-        rightButton: De(() => [Ue(I.$slots, "rightButton")]),
-        _: 3
-      }, 8, ["space", "tab-transition", "max"]), ve("div", nu, [oe(d, null, {
-        default: De(({
-          Component: p,
-          route: v
-        }) => [oe(zn, {
-          name: I.pageTransition,
-          appear: "",
-          onAfterLeave: S[0] || (S[0] = (g) => s.value = !0)
+      }, [
+        oe(Ic, {
+          space: I.space,
+          onActive: E,
+          "tab-transition": I.tabTransition,
+          max: I.max
         }, {
-          default: De(() => [(z(), $e(Va, {
-            include: x(a)
-          }, [x(s) ? (z(), $e(ks(f(v, p)), {
-            key: v.fullPath
-          })) : ze("", !0)], 1032, ["include"]))]),
-          _: 2
-        }, 1032, ["name"])]),
-        _: 1
-      }), oe(Is, {
-        name: I.pageTransition,
-        appear: ""
-      }, {
-        default: De(() => [(z(!0), se(Nt, null, jn(x(n).filter((p) => p.iframe), (p) => Yn((z(), se("iframe", {
-          key: p.id,
-          class: "stack-tab__iframe",
-          src: /^(javascript|data):/i.test(p.url ?? "") ? "about:blank" : p.url,
-          frameborder: "0"
-        }, null, 8, ru)), [[Xn, p.active && x(s)]])), 128))]),
-        _: 1
-      }, 8, ["name"])])], 6);
+          leftButton: De(() => [
+            Ue(I.$slots, "leftButton")
+          ]),
+          rightButton: De(() => [
+            Ue(I.$slots, "rightButton")
+          ]),
+          _: 3
+        }, 8, ["space", "tab-transition", "max"]),
+        ve("div", nu, [
+          oe(d, null, {
+            default: De(({ Component: p, route: v }) => [
+              oe(zn, {
+                name: I.pageTransition,
+                appear: "",
+                onAfterLeave: S[0] || (S[0] = (g) => s.value = !0)
+              }, {
+                default: De(() => [
+                  (z(), $e(Va, { include: x(a) }, [
+                    x(s) ? (z(), $e(ks(f(v, p)), {
+                      key: v.fullPath
+                    })) : ze("", !0)
+                  ], 1032, ["include"]))
+                ]),
+                _: 2
+              }, 1032, ["name"])
+            ]),
+            _: 1
+          }),
+          oe(Is, {
+            name: I.pageTransition,
+            appear: ""
+          }, {
+            default: De(() => [
+              (z(!0), se(Nt, null, jn(x(n).filter((p) => p.iframe), (p) => Yn((z(), se("iframe", {
+                key: p.id,
+                class: "stack-tab__iframe",
+                src: /^(javascript|data):/i.test(p.url ?? "") ? "about:blank" : p.url,
+                frameborder: "0"
+              }, null, 8, ru)), [
+                [Xn, p.active && x(s)]
+              ])), 128))
+            ]),
+            _: 1
+          }, 8, ["name"])
+        ])
+      ], 6);
     };
   }
 }), dr = typeof Buffer == "function";
@@ -6223,7 +6192,7 @@ const gu = ["width", "height", "stroke"], bu = /* @__PURE__ */ Kn('<g fill="none
   fallbackLocale: "en-US"
 }), Vu = {
   install(e) {
-    _u("0.1.7"), e.component("VueStackTabs", su).use(Mu);
+    _u("0.1.8"), e.component("VueStackTabs", su).use(Mu);
   }
 };
 export {

package/dist/vue-stack-tabs.umd.js

@@ -43,4 +43,4 @@ caused by: ${pe.fullStack(n)}`:t.stack}static info(t){yn(t);const n={},a=pe.caus
   </g>
   <text transform="translate(943.45 229.96)" style="fill: #00d797; font-family: ArialMT, Arial; font-size: 24px;"><tspan x="0" y="0">version: ${e}</tspan></text>
 </svg>
-  `,o="data:image/svg+xml;base64,"+sc(a),l="font-size: 1px; padding: "+Math.floor(100/4)+"px "+Math.floor(580/2)+"px; line-height: "+Math.floor(100/2)+"px;";window.console.log("%c+",l+`background-image: url(${o});background-size: 580px 100px;background-repeat: norepeat; color: transparent;`)},Ya=()=>{const{attrs:e}=i.getCurrentInstance(),{pageShown:t,getTab:n,markDeletableCache:a,removeComponent:s,getComponent:r}=bt(),o=_e.useRoute(),l=_e.useRouter();let c="",u="";return c=e.tId,u=o.query.__tab,{forward:d=>{t.value=!1;const N=Ne({__tab:u},d.query);l.push({path:d.path,query:N})},backward:(d,N)=>{t.value=!1;const O=n(c);if(!O)return;const k=O.pages;let C=0;if(typeof d=="number")C=Math.abs(d);else{let T=1,b=!1;const S=k.list(),E=Pn(d);N=Ne(E.query,N);for(let L=k.size()-2;L>=0;L--){if(S[L].path===E.path){b=!0;break}T+=1}b&&(C=T)}if(C===0||k.size()<=C)return;for(let T=0;T<C;T++){const b=k.pop();s(b.id),a(b.id)}const m=k==null?void 0:k.peek(),g=r(m.id);if(g!=null){const T=g.components.DynamicComponent;T.props=Ne(N,T.props)}l.push({path:m.path,query:m.query})}}},ic=i.defineComponent({__name:"iframe",setup(e){return Ya(),(t,n)=>(i.openBlock(),i.createElementBlock("div"))}}),lc=e=>{var t;typeof e.remove<"u"?e.remove():(t=e.parentNode)==null||t.removeChild(e)};function cc(e,t,n,a={}){const s=i.h(e,t,a),r=document.createElement("div");return r.classList.add("vld-container"),n.appendChild(r),i.render(s,r),s.component}const uc=["width","height","stroke"],fc=[i.createStaticVNode('<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".25" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.8s" repeatCount="indefinite"></animateTransform></path></g></g>',1)],dc=i.defineComponent({__name:"spinner",props:{color:{default:"#000"},height:{default:64},width:{default:64}},setup(e){return(t,n)=>(i.openBlock(),i.createElementBlock("svg",{viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",width:t.width,height:t.height,stroke:t.color},fc,8,uc))}}),mc=["fill","width","height"],_c=[i.createStaticVNode('<circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle>',3)],hc=i.defineComponent({__name:"dots",props:{color:{default:"#000"},height:{default:240},width:{default:60}},setup(e){return(t,n)=>(i.openBlock(),i.createElementBlock("svg",{viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:t.color,width:t.width,height:t.height},_c,8,mc))}}),pc=["height","width","fill"],gc=[i.createStaticVNode('<rect x="0" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="10" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="20" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate></rect>',3)],bc={spinner:dc,dots:hc,bars:i.defineComponent({__name:"bars",props:{color:{default:"#000"},height:{default:40},width:{default:40}},setup(e){return(t,n)=>(i.openBlock(),i.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 30 30",height:t.height,width:t.width,fill:t.color},gc,8,pc))}})},Ec=["aria-busy"],Tc={class:"vl-icon"},Nc=i.defineComponent({__name:"Component",props:{active:{type:Boolean},programmatic:{type:Boolean},container:{},isFullPage:{type:Boolean,default:!0},enforceFocus:{type:Boolean,default:!0},lockScroll:{type:Boolean},transition:{default:"fade"},canCancel:{type:Boolean},onCancel:{type:Function,default:()=>{}},color:{},backgroundColor:{},opacity:{},width:{},height:{},zIndex:{},loader:{default:"spinner"}},emits:["hide","update:active"],setup(e,{expose:t,emit:n}){const a=e,s=i.ref(),r=i.ref(a.active),o=n,l=()=>{!a.canCancel||!r.value||(c(),a.onCancel.apply(null,null))},c=()=>{o("hide"),o("update:active",!1),a.programmatic&&(r.value=!1,setTimeout(()=>{const O=s.value.parentElement;i.render(null,O),lc(O)},150))},u=()=>{a.isFullPage&&a.lockScroll&&document.body.classList.add("vl-shown")},p=()=>{a.isFullPage&&a.lockScroll&&document.body.classList.remove("vl-shown")},h=O=>{O.code==="Escape"&&l()},d=O=>{if(!r.value||O.target===s.value||s.value.contains(O.target))return;const k=a.container?a.container:a.isFullPage?null:s.value.parentElement;(a.isFullPage||k&&k.contains(O.target))&&(O.preventDefault(),s.value.focus())},N=i.computed(()=>({background:a.backgroundColor,opacity:a.opacity}));return i.watch(()=>a.active,O=>{r.value=O}),i.watch(()=>r,O=>{O?u():p()}),i.onMounted(()=>{a.enforceFocus&&document.addEventListener("focusin",d),document.addEventListener("keyup",h)}),i.onBeforeUnmount(()=>{document.removeEventListener("keyup",h),document.removeEventListener("focusin",d)}),t({hide:c}),(O,k)=>(i.openBlock(),i.createBlock(i.Transition,{name:O.transition},{default:i.withCtx(()=>[i.withDirectives(i.createElementVNode("div",{tabindex:"0",class:i.normalizeClass(["vl-overlay vl-active",{"vl-full-page":O.isFullPage}]),"aria-busy":r.value,"aria-label":"Loading",style:i.normalizeStyle({zIndex:O.zIndex}),ref_key:"overlay",ref:s},[i.createElementVNode("div",{class:"vl-background",onClick:i.withModifiers(l,["prevent"]),style:i.normalizeStyle(N.value)},null,4),i.createElementVNode("div",Tc,[i.renderSlot(O.$slots,"before"),i.renderSlot(O.$slots,"default",{},()=>[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(i.unref(bc)[O.loader]),{color:O.color,width:O.width,height:O.height},null,8,["color","width","height"]))]),i.renderSlot(O.$slots,"after")])],14,Ec),[[i.vShow,r.value]])]),_:3},8,["name"]))}}),vc=(e={},t={})=>({show(n=e,a=t){const r={...e,...n,...{programmatic:!0,lockScroll:!0,isFullPage:!1,active:!0}};let o=r.container;r.container||(o=document.body,r.isFullPage=!0);const l={...t,...a};return{hide:cc(Nc,r,o,l).exposed.hide}}}),Oc=()=>{const e=vc(),{attrs:t}=i.getCurrentInstance();let n=null;i.onUnmounted(()=>{s()});const a=()=>{const r=document.querySelector(`#${t.tId}`);n===null&&(n=e.show({canCancel:!1,isFullPage:!1,height:85,width:85,loader:"spinner",color:"#007bff",container:r}))},s=()=>{n!==null&&(n.hide(),n=null)};return{openTabLoading:a,closeTabLoading:s}},yc=ii({legacy:!1,locale:"zh-CN",fallbackLocale:"en-US"}),Lc={install(e){oc("0.1.7"),e.component("VueStackTabs",Ql).use(yc)}};J.EventType=aa,J.IFrame=ic,J.Stack=Ut,J.TabScrollMode=De,J.default=Lc,J.useStackTab=Wa,J.useTabLoading=Oc,J.useTabRouter=Ya,Object.defineProperties(J,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+  `,o="data:image/svg+xml;base64,"+sc(a),l="font-size: 1px; padding: "+Math.floor(100/4)+"px "+Math.floor(580/2)+"px; line-height: "+Math.floor(100/2)+"px;";window.console.log("%c+",l+`background-image: url(${o});background-size: 580px 100px;background-repeat: norepeat; color: transparent;`)},Ya=()=>{const{attrs:e}=i.getCurrentInstance(),{pageShown:t,getTab:n,markDeletableCache:a,removeComponent:s,getComponent:r}=bt(),o=_e.useRoute(),l=_e.useRouter();let c="",u="";return c=e.tId,u=o.query.__tab,{forward:d=>{t.value=!1;const N=Ne({__tab:u},d.query);l.push({path:d.path,query:N})},backward:(d,N)=>{t.value=!1;const O=n(c);if(!O)return;const k=O.pages;let C=0;if(typeof d=="number")C=Math.abs(d);else{let T=1,b=!1;const S=k.list(),E=Pn(d);N=Ne(E.query,N);for(let L=k.size()-2;L>=0;L--){if(S[L].path===E.path){b=!0;break}T+=1}b&&(C=T)}if(C===0||k.size()<=C)return;for(let T=0;T<C;T++){const b=k.pop();s(b.id),a(b.id)}const m=k==null?void 0:k.peek(),g=r(m.id);if(g!=null){const T=g.components.DynamicComponent;T.props=Ne(N,T.props)}l.push({path:m.path,query:m.query})}}},ic=i.defineComponent({__name:"iframe",setup(e){return Ya(),(t,n)=>(i.openBlock(),i.createElementBlock("div"))}}),lc=e=>{var t;typeof e.remove<"u"?e.remove():(t=e.parentNode)==null||t.removeChild(e)};function cc(e,t,n,a={}){const s=i.h(e,t,a),r=document.createElement("div");return r.classList.add("vld-container"),n.appendChild(r),i.render(s,r),s.component}const uc=["width","height","stroke"],fc=[i.createStaticVNode('<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".25" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.8s" repeatCount="indefinite"></animateTransform></path></g></g>',1)],dc=i.defineComponent({__name:"spinner",props:{color:{default:"#000"},height:{default:64},width:{default:64}},setup(e){return(t,n)=>(i.openBlock(),i.createElementBlock("svg",{viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",width:t.width,height:t.height,stroke:t.color},fc,8,uc))}}),mc=["fill","width","height"],_c=[i.createStaticVNode('<circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle>',3)],hc=i.defineComponent({__name:"dots",props:{color:{default:"#000"},height:{default:240},width:{default:60}},setup(e){return(t,n)=>(i.openBlock(),i.createElementBlock("svg",{viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:t.color,width:t.width,height:t.height},_c,8,mc))}}),pc=["height","width","fill"],gc=[i.createStaticVNode('<rect x="0" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="10" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="20" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate></rect>',3)],bc={spinner:dc,dots:hc,bars:i.defineComponent({__name:"bars",props:{color:{default:"#000"},height:{default:40},width:{default:40}},setup(e){return(t,n)=>(i.openBlock(),i.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 30 30",height:t.height,width:t.width,fill:t.color},gc,8,pc))}})},Ec=["aria-busy"],Tc={class:"vl-icon"},Nc=i.defineComponent({__name:"Component",props:{active:{type:Boolean},programmatic:{type:Boolean},container:{},isFullPage:{type:Boolean,default:!0},enforceFocus:{type:Boolean,default:!0},lockScroll:{type:Boolean},transition:{default:"fade"},canCancel:{type:Boolean},onCancel:{type:Function,default:()=>{}},color:{},backgroundColor:{},opacity:{},width:{},height:{},zIndex:{},loader:{default:"spinner"}},emits:["hide","update:active"],setup(e,{expose:t,emit:n}){const a=e,s=i.ref(),r=i.ref(a.active),o=n,l=()=>{!a.canCancel||!r.value||(c(),a.onCancel.apply(null,null))},c=()=>{o("hide"),o("update:active",!1),a.programmatic&&(r.value=!1,setTimeout(()=>{const O=s.value.parentElement;i.render(null,O),lc(O)},150))},u=()=>{a.isFullPage&&a.lockScroll&&document.body.classList.add("vl-shown")},p=()=>{a.isFullPage&&a.lockScroll&&document.body.classList.remove("vl-shown")},h=O=>{O.code==="Escape"&&l()},d=O=>{if(!r.value||O.target===s.value||s.value.contains(O.target))return;const k=a.container?a.container:a.isFullPage?null:s.value.parentElement;(a.isFullPage||k&&k.contains(O.target))&&(O.preventDefault(),s.value.focus())},N=i.computed(()=>({background:a.backgroundColor,opacity:a.opacity}));return i.watch(()=>a.active,O=>{r.value=O}),i.watch(()=>r,O=>{O?u():p()}),i.onMounted(()=>{a.enforceFocus&&document.addEventListener("focusin",d),document.addEventListener("keyup",h)}),i.onBeforeUnmount(()=>{document.removeEventListener("keyup",h),document.removeEventListener("focusin",d)}),t({hide:c}),(O,k)=>(i.openBlock(),i.createBlock(i.Transition,{name:O.transition},{default:i.withCtx(()=>[i.withDirectives(i.createElementVNode("div",{tabindex:"0",class:i.normalizeClass(["vl-overlay vl-active",{"vl-full-page":O.isFullPage}]),"aria-busy":r.value,"aria-label":"Loading",style:i.normalizeStyle({zIndex:O.zIndex}),ref_key:"overlay",ref:s},[i.createElementVNode("div",{class:"vl-background",onClick:i.withModifiers(l,["prevent"]),style:i.normalizeStyle(N.value)},null,4),i.createElementVNode("div",Tc,[i.renderSlot(O.$slots,"before"),i.renderSlot(O.$slots,"default",{},()=>[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(i.unref(bc)[O.loader]),{color:O.color,width:O.width,height:O.height},null,8,["color","width","height"]))]),i.renderSlot(O.$slots,"after")])],14,Ec),[[i.vShow,r.value]])]),_:3},8,["name"]))}}),vc=(e={},t={})=>({show(n=e,a=t){const r={...e,...n,...{programmatic:!0,lockScroll:!0,isFullPage:!1,active:!0}};let o=r.container;r.container||(o=document.body,r.isFullPage=!0);const l={...t,...a};return{hide:cc(Nc,r,o,l).exposed.hide}}}),Oc=()=>{const e=vc(),{attrs:t}=i.getCurrentInstance();let n=null;i.onUnmounted(()=>{s()});const a=()=>{const r=document.querySelector(`#${t.tId}`);n===null&&(n=e.show({canCancel:!1,isFullPage:!1,height:85,width:85,loader:"spinner",color:"#007bff",container:r}))},s=()=>{n!==null&&(n.hide(),n=null)};return{openTabLoading:a,closeTabLoading:s}},yc=ii({legacy:!1,locale:"zh-CN",fallbackLocale:"en-US"}),Lc={install(e){oc("0.1.8"),e.component("VueStackTabs",Ql).use(yc)}};J.EventType=aa,J.IFrame=ic,J.Stack=Ut,J.TabScrollMode=De,J.default=Lc,J.useStackTab=Wa,J.useTabLoading=Oc,J.useTabRouter=Ya,Object.defineProperties(J,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-stack-tabs",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Vue.js component for router tab.",
   "private": false,
   "type": "module",

package/src/lib/StackTabs.vue

@@ -1,44 +1,4 @@
-<template>
-  <div
-    class="stack-tab"
-    :style="{
-      width: width,
-      height: height,
-      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
-    }"
-    :class="{ 'stack-tab__maximum': maximum }"
-  >
-    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
-      <template #leftButton>
-        <slot name="leftButton" />
-      </template>
-      <template #rightButton>
-        <slot name="rightButton" />
-      </template>
-    </tab-header>
-    <div class="stack-tab__container">
-      <router-view v-slot="{ Component, route }">
-        <transition :name="pageTransition" appear @after-leave="pageShown = true">
-          <keep-alive :include="caches">
-            <component :is="tabWrapper(route, Component)" v-if="pageShown" :key="route.fullPath" />
-          </keep-alive>
-        </transition>
-      </router-view>
-      <transition-group :name="pageTransition" appear>
-        <iframe
-          v-for="frame of tabs.filter((item) => item.iframe)"
-          v-show="frame.active && pageShown"
-          :key="frame.id"
-          class="stack-tab__iframe"
-          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
-          frameborder="0"
-        />
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<script lang="tsx" setup>
+<script lang="ts" setup>
 import { onBeforeMount, onUnmounted, provide, ref, watch } from 'vue'
 import type { TransitionProps, DefineComponent, VNode } from 'vue'
 import { type RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
@@ -124,4 +84,43 @@ watch(
   }
 )
 </script>
+<template>
+  <div
+    class="stack-tab"
+    :style="{
+      width: width,
+      height: height,
+      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
+    }"
+    :class="{ 'stack-tab__maximum': maximum }"
+  >
+    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
+      <template #leftButton>
+        <slot name="leftButton" />
+      </template>
+      <template #rightButton>
+        <slot name="rightButton" />
+      </template>
+    </tab-header>
+    <div class="stack-tab__container">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="pageTransition" appear @after-leave="pageShown = true">
+          <keep-alive :include="caches">
+            <component :is="tabWrapper(route, Component)" v-if="pageShown" :key="route.fullPath" />
+          </keep-alive>
+        </transition>
+      </router-view>
+      <transition-group :name="pageTransition" appear>
+        <iframe
+          v-for="frame of tabs.filter((item) => item.iframe)"
+          v-show="frame.active && pageShown"
+          :key="frame.id"
+          class="stack-tab__iframe"
+          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
+          frameborder="0"
+        />
+      </transition-group>
+    </div>
+  </div>
+</template>
 <style scoped></style>

package/src/lib/index.ts

@@ -16,8 +16,8 @@ const i18n = createI18n({
 export * from './model/TabModel'
 export { IFrame, useTabLoading, useTabRouter, useStackTab }
 export default {
-  install(app: App): void {
+  install(Vue: App): void {
     tabVersion(import.meta.env.PACKAGE_VERSION)
-    app.component('VueStackTabs', StackTab).use(i18n)
+    Vue.component('VueStackTabs', StackTab).use(i18n)
   }
 }

package/types/StackTabs.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/ContextMenu/ContextMenuItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/ContextMenu/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/TabHeaderButton.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/TabHeaderItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/TabHeaderScroll.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/hooks/useContextMenu.d.ts

@@ -0,0 +1,7 @@
+import type { ITabItem } from '../model/TabModel';
+declare const _default: () => {
+    shown: any;
+    contextMenuData: any;
+    showContextMenu: (e: MouseEvent, item: ITabItem, index: number, max: number) => Promise<void>;
+};
+export default _default;

package/types/index.d.ts

@@ -6,6 +6,6 @@ import './assets/style/index.scss';
 export * from './model/TabModel';
 export { IFrame, useTabLoading, useTabRouter, useStackTab };
 declare const _default: {
-    install(app: App): void;
+    install(Vue: App): void;
 };
 export default _default;

package/types/utils/TabScrollHelper.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 滚动到指定位置
+ * @export
+ * @param {Element} wrap 滚动区域
+ * @param {number} [left=0]
+ * @param {number} [top=0]
+ */
+export declare const _scrollTo: ({ wrap, left, top, smooth }: {
+    wrap: HTMLElement | null;
+    left?: number;
+    top?: number;
+    smooth?: boolean;
+}) => void;
+/**
+ * 指定元素滚动到可视区域
+ * @export
+ * @param {Element} el 目标元素
+ * @param {Element} wrap 滚动区域
+ * @param {String} block 垂直方向的对齐，可选：'start', 'center', 'end', 或 'nearest'
+ * @param {String} inline 水平方向的对齐，可选值同上
+ */
+export declare function _scrollIntoView({ el, wrap, block, inline }: {
+    el: HTMLElement;
+    wrap: any;
+    block?: any;
+    inline?: any;
+}): void;
+export declare const getScrollbarWidth: () => number;
+/**
+ * 获取最大z-index
+ * @returns 最大z-index的值
+ */
+export declare const getMaxZIndex: (key?: string) => number;