vue3-tabs-component - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

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

package.json

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

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

32512

increased by0.23%

Lines of code

571

increased by0.35%

No dependency changes