vue3-tabs-component - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

dist/components/Tabs.vue.d.ts

 import { Tab } from "../types";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id?: string | undefined;
     cacheLifetime?: number | undefined;
@@ -7,2 +8,3 @@ options?: {
         defaultTabHash?: string | undefined;
+        storageKey?: string | undefined;
     } | undefined;
@@ -21,2 +23,3 @@ wrapperClass?: (string | Record<string, boolean> | (string | Record<string, boolean>)[]) | undefined;
 }>, {
+    id: undefined;
     cacheLifetime: number;
@@ -26,2 +29,3 @@ options: () => {
         defaultTabHash: undefined;
+        storageKey: undefined;
     };
@@ -46,2 +50,3 @@ wrapperClass: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changed" | "clicked")[], "changed" | "clicked", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id?: string | undefined;
     cacheLifetime?: number | undefined;
@@ -51,2 +56,3 @@ options?: {
         defaultTabHash?: string | undefined;
+        storageKey?: string | undefined;
     } | undefined;
@@ -65,2 +71,3 @@ wrapperClass?: (string | Record<string, boolean> | (string | Record<string, boolean>)[]) | undefined;
 }>, {
+    id: undefined;
     cacheLifetime: number;
@@ -70,2 +77,3 @@ options: () => {
         defaultTabHash: undefined;
+        storageKey: undefined;
     };
@@ -87,2 +95,3 @@ wrapperClass: string;
 }, {
+    id: string;
     navItemClass: string | Record<string, boolean> | (string | Record<string, boolean>)[];
@@ -92,4 +101,5 @@ navItemLinkClass: string | Record<string, boolean> | (string | Record<string, boolean>)[];
     options: {
-        useUrlFragment?: boolean;
-        defaultTabHash?: string;
+        useUrlFragment?: boolean | undefined;
+        defaultTabHash?: string | undefined;
+        storageKey?: string | undefined;
     };
@@ -96,0 +106,0 @@ wrapperClass: string | Record<string, boolean> | (string | Record<string, boolean>)[];

dist/vue3-tabs-component.umd.js

@@ -1,1 +0,1 @@
-(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.VueTabs={},f.Vue))})(this,function(f,e){"use strict";const p=Symbol("addTab"),v=Symbol("updateTab"),C=Symbol("deleteTab"),I=Symbol("tabsProvider");function b(n,d){const t=e.inject(n,d);if(typeof t>"u")throw new Error(`Could not resolve ${n.description}`);return t}const D=["data-tab-id","aria-hidden"],T=e.defineComponent({__name:"Tab",props:{panelClass:{default:"tabs-component-panel"},id:{default:void 0},name:null,prefix:{default:""},suffix:{default:""},isDisabled:{type:Boolean,default:!1},navItemClass:{default:void 0},navItemLinkClass:{default:void 0}},setup(n,{expose:d}){const t=n,l=e.ref(!1),s=b(I),c=b(p),h=b(v),o=b(C),i=t.prefix+t.name+t.suffix,a=t.id?t.id:t.name.toLowerCase().replace(/ /g,"-"),r=a+"-pane",m=e.computed(()=>"#"+(t.isDisabled?"":a));return e.watch(()=>s.activeTabHash,()=>{l.value=m.value===s.activeTabHash}),e.watch(()=>Object.assign({},t),()=>{h(a,{name:t.name,header:t.prefix+t.name+t.suffix,isDisabled:t.isDisabled,hash:m.value,index:s.tabs.length,computedId:a,paneId:r,navItemClass:t.navItemClass,navItemLinkClass:t.navItemLinkClass})}),e.onBeforeMount(()=>{c({name:t.name,header:i,isDisabled:t.isDisabled,hash:m.value,index:s.tabs.length,computedId:a,paneId:r,navItemClass:t.navItemClass,navItemLinkClass:t.navItemLinkClass})}),e.onBeforeUnmount(()=>{o(a)}),d({header:i,computedId:a,paneId:r,hash:m,isActive:l}),(u,k)=>e.withDirectives((e.openBlock(),e.createElementBlock("section",{ref:"tab",id:r,"data-tab-id":e.unref(a),"aria-hidden":!l.value,class:e.normalizeClass(n.panelClass),role:"tabpanel",tabindex:"-1"},[e.renderSlot(u.$slots,"default")],10,D)),[[e.vShow,l.value]])}});class L{get(d){const t=localStorage.getItem(d);if(t===null)return null;const l=JSON.parse(t);return l?new Date(l.expires)<new Date?(localStorage.removeItem(d),null):l.value:null}set(d,t,l){const s=new Date().getTime(),c=new Date(s+l*6e4);localStorage.setItem(d,JSON.stringify({value:t,expires:c}))}}const w=new L,x=["aria-controls","aria-selected","href","onClick","innerHTML"],g=e.defineComponent({__name:"Tabs",props:{cacheLifetime:{default:5},options:{default:()=>({useUrlFragment:!0,defaultTabHash:void 0})},wrapperClass:{default:"tabs-component"},panelsWrapperClass:{default:"tabs-component-panels"},navClass:{default:"tabs-component-tabs"},navItemClass:{default:"tabs-component-tab"},navItemDisabledClass:{default:"is-disabled"},navItemActiveClass:{default:"is-active"},navItemInactiveClass:{default:"is-inactive"},navItemLinkClass:{default:"tabs-component-tab-a"},navItemLinkActiveClass:{default:"is-active"},navItemLinkInactiveClass:{default:"is-inactive"},navItemLinkDisabledClass:{default:"is-disabled"}},emits:["changed","clicked"],setup(n,{expose:d,emit:t}){const l=n,s=e.reactive({activeTabHash:"",lastActiveTabHash:"",tabs:[]});e.provide(I,s),e.provide(p,o=>{s.tabs.push(o)}),e.provide(v,(o,i)=>{const a=s.tabs.findIndex(r=>r.computedId===o);i.isActive=s.tabs[a].isActive,s.tabs[a]=i}),e.provide(C,o=>{const i=s.tabs.findIndex(a=>a.computedId===o);s.tabs.splice(i,1)});const c=(o,i)=>{i&&!l.options.useUrlFragment&&i.preventDefault();const a=h(o);if(!a)return;if(i&&a.isDisabled){i.preventDefault();return}if(s.lastActiveTabHash===a.hash){t("clicked",{tab:a});return}if(s.tabs.forEach(m=>{m.isActive=m.hash===a.hash}),t("changed",{tab:a}),s.lastActiveTabHash=s.activeTabHash=a.hash,l.cacheLifetime<=0)return;const r=`vue-tabs-component.cache.${window.location.host}${window.location.pathname}`;w.set(r,a.hash,l.cacheLifetime)},h=o=>s.tabs.find(i=>i.hash===o);return e.onMounted(()=>{if(!!s.tabs.length){if(window.addEventListener("hashchange",()=>c(window.location.hash)),h(window.location.hash)){c(window.location.hash);return}if(l.cacheLifetime>0){const o=`vue-tabs-component.cache.${window.location.host}${window.location.pathname}`,i=w.get(o);if(i!==null&&h(i)){c(i);return}if(l.options.defaultTabHash&&h("#"+l.options.defaultTabHash)){c("#"+l.options.defaultTabHash);return}}c(s.tabs[0].hash)}}),d({...e.toRefs(s),selectTab:c,findTab:h}),(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n.wrapperClass)},[e.createElementVNode("ul",{role:"tablist",class:e.normalizeClass(n.navClass)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.tabs,(a,r)=>{var m,u;return e.openBlock(),e.createElementBlock("li",{key:r,class:e.normalizeClass([(m=a.navItemClass)!=null?m:n.navItemClass,a.isDisabled?n.navItemDisabledClass:"",a.isActive?n.navItemActiveClass:a.isDisabled?"":n.navItemInactiveClass]),role:"presentation"},[e.createElementVNode("a",{role:"tab",class:e.normalizeClass([(u=a.navItemLinkClass)!=null?u:n.navItemLinkClass,a.isDisabled?n.navItemLinkDisabledClass:"",a.isActive?n.navItemLinkActiveClass:a.isDisabled?"":n.navItemLinkInactiveClass]),"aria-controls":a.paneId,"aria-selected":a.isActive,href:a.hash,onClick:k=>c(a.hash,k),innerHTML:a.header,tabindex:"0"},null,10,x)],2)}),128))],2),e.createElementVNode("div",{class:e.normalizeClass(n.panelsWrapperClass)},[e.renderSlot(o.$slots,"default")],2)],2))}}),S={install(n){n.component("tab",T),n.component("tabs",g)}};f.Tab=T,f.Tabs=g,f.default=S,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VueTabs={},r.Vue))})(this,function(r,e){"use strict";const v=Symbol("addTab"),C=Symbol("updateTab"),I=Symbol("deleteTab"),T=Symbol("tabsProvider");function b(i,d){const t=e.inject(i,d);if(typeof t>"u")throw new Error(`Could not resolve ${i.description}`);return t}const D=["data-tab-id","aria-hidden"],w=e.defineComponent({__name:"Tab",props:{panelClass:{default:"tabs-component-panel"},id:{default:void 0},name:null,prefix:{default:""},suffix:{default:""},isDisabled:{type:Boolean,default:!1},navItemClass:{default:void 0},navItemLinkClass:{default:void 0}},setup(i,{expose:d}){const t=i,l=e.ref(!1),n=b(T),h=b(v),f=b(C),m=b(I),s=t.prefix+t.name+t.suffix,o=t.id?t.id:t.name.toLowerCase().replace(/ /g,"-"),a=o+"-pane",c=e.computed(()=>"#"+(t.isDisabled?"":o));return e.watch(()=>n.activeTabHash,()=>{l.value=c.value===n.activeTabHash}),e.watch(()=>Object.assign({},t),()=>{f(o,{name:t.name,header:t.prefix+t.name+t.suffix,isDisabled:t.isDisabled,hash:c.value,index:n.tabs.length,computedId:o,paneId:a,navItemClass:t.navItemClass,navItemLinkClass:t.navItemLinkClass})}),e.onBeforeMount(()=>{h({name:t.name,header:s,isDisabled:t.isDisabled,hash:c.value,index:n.tabs.length,computedId:o,paneId:a,navItemClass:t.navItemClass,navItemLinkClass:t.navItemLinkClass})}),e.onBeforeUnmount(()=>{m(o)}),d({header:s,computedId:o,paneId:a,hash:c,isActive:l}),(u,p)=>e.withDirectives((e.openBlock(),e.createElementBlock("section",{ref:"tab",id:a,"data-tab-id":e.unref(o),"aria-hidden":!l.value,class:e.normalizeClass(i.panelClass),role:"tabpanel",tabindex:"-1"},[e.renderSlot(u.$slots,"default")],10,D)),[[e.vShow,l.value]])}});class L{get(d){const t=localStorage.getItem(d);if(t===null)return null;const l=JSON.parse(t);return l?new Date(l.expires)<new Date?(localStorage.removeItem(d),null):l.value:null}set(d,t,l){const n=new Date().getTime(),h=new Date(n+l*6e4);localStorage.setItem(d,JSON.stringify({value:t,expires:h}))}}const g=new L,x=["id"],y=["aria-controls","aria-selected","href","onClick","innerHTML"],k=e.defineComponent({__name:"Tabs",props:{id:{default:void 0},cacheLifetime:{default:5},options:{default:()=>({useUrlFragment:!0,defaultTabHash:void 0,storageKey:void 0})},wrapperClass:{default:"tabs-component"},panelsWrapperClass:{default:"tabs-component-panels"},navClass:{default:"tabs-component-tabs"},navItemClass:{default:"tabs-component-tab"},navItemDisabledClass:{default:"is-disabled"},navItemActiveClass:{default:"is-active"},navItemInactiveClass:{default:"is-inactive"},navItemLinkClass:{default:"tabs-component-tab-a"},navItemLinkActiveClass:{default:"is-active"},navItemLinkInactiveClass:{default:"is-inactive"},navItemLinkDisabledClass:{default:"is-disabled"}},emits:["changed","clicked"],setup(i,{expose:d,emit:t}){const l=i,n=e.reactive({activeTabHash:"",lastActiveTabHash:"",tabs:[]});e.provide(T,n),e.provide(v,s=>{n.tabs.push(s)}),e.provide(C,(s,o)=>{const a=n.tabs.findIndex(c=>c.computedId===s);o.isActive=n.tabs[a].isActive,n.tabs[a]=o}),e.provide(I,s=>{const o=n.tabs.findIndex(a=>a.computedId===s);n.tabs.splice(o,1)});const h=e.computed(()=>{let s;return l.options.storageKey&&(s=l.options.storageKey),!s&&l.id&&(s=`vue-tabs-component.${l.id}.cache.${window.location.host}${window.location.pathname}`),s||(s=`vue-tabs-component.cache.${window.location.host}${window.location.pathname}`),s}),f=(s,o)=>{o&&!l.options.useUrlFragment&&o.preventDefault();const a=m(s);if(!!a){if(o&&a.isDisabled){o.preventDefault();return}if(n.lastActiveTabHash===a.hash){t("clicked",{tab:a});return}n.tabs.forEach(c=>{c.isActive=c.hash===a.hash}),t("changed",{tab:a}),n.lastActiveTabHash=n.activeTabHash=a.hash,!(l.cacheLifetime<=0)&&g.set(h.value,a.hash,l.cacheLifetime)}},m=s=>n.tabs.find(o=>o.hash===s);return e.onMounted(()=>{if(!!n.tabs.length){if(window.addEventListener("hashchange",()=>f(window.location.hash)),m(window.location.hash)){f(window.location.hash);return}if(l.cacheLifetime>0){const s=g.get(h.value);if(s!==null&&m(s)){f(s);return}if(l.options.defaultTabHash&&m("#"+l.options.defaultTabHash)){f("#"+l.options.defaultTabHash);return}}f(n.tabs[0].hash)}}),d({...e.toRefs(n),selectTab:f,findTab:m}),(s,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.wrapperClass),id:i.id},[e.createElementVNode("ul",{role:"tablist",class:e.normalizeClass(i.navClass)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,(a,c)=>{var u,p;return e.openBlock(),e.createElementBlock("li",{key:c,class:e.normalizeClass([(u=a.navItemClass)!=null?u:i.navItemClass,a.isDisabled?i.navItemDisabledClass:"",a.isActive?i.navItemActiveClass:a.isDisabled?"":i.navItemInactiveClass]),role:"presentation"},[e.createElementVNode("a",{role:"tab",class:e.normalizeClass([(p=a.navItemLinkClass)!=null?p:i.navItemLinkClass,a.isDisabled?i.navItemLinkDisabledClass:"",a.isActive?i.navItemLinkActiveClass:a.isDisabled?"":i.navItemLinkInactiveClass]),"aria-controls":a.paneId,"aria-selected":a.isActive,href:a.hash,onClick:A=>f(a.hash,A),innerHTML:a.header,tabindex:"0"},null,10,y)],2)}),128))],2),e.createElementVNode("div",{class:e.normalizeClass(i.panelsWrapperClass)},[e.renderSlot(s.$slots,"default")],2)],10,x))}}),S={install(i){i.component("tab",w),i.component("tabs",k)}};r.Tab=w,r.Tabs=k,r.default=S,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "vue3-tabs-component",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "A Vue component to easily render tabs",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/jacobs63/vue3-tabs-component",

README.md

@@ -100,3 +100,3 @@ # A Vue component to easily render tabs
 
-If you click on a tab a `href` representation of the name will be append to the url. For example clicking on the tab `Second tab` will append `#second-tab` to the url.
+If you click on a tab a `href` representation of the name will be appended to the url. For example clicking on the tab `Second tab` will append `#second-tab` to the url.
 
@@ -166,13 +166,4 @@ When loading a page with a fragment that matches the `href` of a tab, it will open up that tab. For example visiting `/#third-tab` will open up the tab with name `Third tab`.
 For example:
-```js
-export default {
-    methods: {
-        tabClicked (selectedTab) {
-            console.log('Current tab re-clicked:' + selectedTab.tab.name)
-        },
-        tabChanged (selectedTab) {
-            console.log('Tab changed to:' + selectedTab.tab.name)
-        }
-    }
-}
+```vue
+<script></script>
 ```
@@ -234,3 +225,3 @@
 E.g. clicking the "Change tab" button would change set `#first-tab` as active on the tabs instance referenced as `testTabs`:
-```html
+```vue
 <template>
@@ -311,3 +302,2 @@ <tabs ref="testTabs" :options="{ defaultTabHash: 'second-tab' }">
 - [Sebastian De Deyne](https://github.com/sebastiandedeyne)
-- [All Contributors](../../contributors)
 
@@ -314,0 +304,0 @@ **This package is a fork of the popular `spatie/vue-tabs-component` Vue 2 package, which has been discontinued by Spatie**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37421

increased by1.15%

Lines of code

522

increased by3.16%

Worsened metrics

Number of lines in readme file

305

decreased by-3.17%

No dependency changes