vue3-tabs-component - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

dist/vue3-tabs-component.es.js

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

package.json

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

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

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

25732

decreased by-0.38%

Lines of code

316

decreased by-0.32%

No dependency changes