vue3-tabs-component - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/vue3-tabs-component.es.js

@@ -126,3 +126,4 @@ import { ref, inject, watch, onBeforeMount, onBeforeUnmount, withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow, reactive, provide, onMounted, toRefs, createElementVNode, Fragment, renderList } from "vue";
         useUrlFragment: true,
-        defaultTabHash: null
+        defaultTabHash: null,
+        disableScrollBehavior: false
       })
@@ -188,3 +189,3 @@ },
     const selectTab = (selectedTabHash, event) => {
-      if (event && !props.options.useUrlFragment) {
+      if (event && (!props.options.useUrlFragment || props.options.disableScrollBehavior)) {
         event.preventDefault();
@@ -191,0 +192,0 @@ }

dist/vue3-tabs-component.umd.js

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

package.json

 {
   "name": "vue3-tabs-component",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A Vue component to easily render tabs",
@@ -5,0 +5,0 @@ "main": "./dist/vue3-tabs-component.umd.js",

README.md

@@ -126,2 +126,13 @@ # A Vue component to easily render tabs
 
+### Disable scroll behaviour when clicking a tab
+When clicking a tab, the default browser scroll behavior gets applied.
+By-default, this makes the page jump to the element, which in this case means jumping to the tab content.
+This may be undesired - to disable this default behaviour, you can use the `options.disableScrollBehavior` prop as `true` on a `tabs` component:
+
+```html
+<tabs :options="{ disableScrollBehavior: true }">
+  ...
+</tabs>
+```
+
 ### Callbacks
@@ -128,0 +139,0 @@ Tabs have two events to which you can bind: `changed` and `clicked`

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24952

increased by2.41%

Lines of code

303

increased by0.33%

Number of lines in readme file

290

increased by3.94%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes