maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.98 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInjectStrict}from"../composables/useInjectStrict.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,defineAsyncComponent,defineComponent,mergeProps,normalizeClass,normalizeStyle,onBeforeMount,onMounted,openBlock,ref,renderList,renderSlot,toDisplayString,unref,watch,withCtx}from"vue";import{sleep}from"@maz-ui/utils/helpers/sleep";import '../assets/MazTabsBar.Bok1O7TL.css';var _hoisted_1=[`disabled`,`onClick`];var MazTabsBar_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazTabsBar`,props:{items:{},persistent:{type:Boolean,default:!1},queryParam:{default:`tab`},block:{type:Boolean,default:!1},elevation:{type:Boolean,default:!1},autoScroll:{type:Boolean,default:!0},bordered:{type:Boolean,default:!0}},setup(__props){let MazBadge=defineAsyncComponent(()=>import(`../components/MazBadge.js`));let{currentTab,updateCurrentTab}=useInjectStrict(`maz-tabs`);function selectTab(tabIndex){updateCurrentTab(tabIndex+1),__props.persistent&&addOrUpdateQueryParamTab(tabIndex+1)}let tabsBarRef=ref();let itemRefs=ref([]);function isActiveTab(index){return currentTab.value===index+1}function addElementToItemRefs({mazBtn,index}){itemRefs.value[index]=mazBtn&&`$el`in mazBtn?mazBtn.$el:mazBtn}let normalizedItems=computed(()=>__props.items.map(item=>({label:typeof item==`string`?item:item.label,disabled:typeof item==`string`?!1:item.disabled??!1,badge:typeof item==`string`?void 0:item.badge})));let tabsIndicatorState=ref();let tabsBarHasScrollAnimation=ref(!1);async function setIndicatorAndScroll(){if(!__props.autoScroll)return;await sleep(150);let tabsBar=tabsBarRef.value;let activeTab=itemRefs.value[currentTab.value-1];if(!tabsBar||!activeTab)return;if(activeTab.offsetLeft-50<tabsBar.scrollLeft||activeTab.offsetLeft+activeTab.offsetWidth>tabsBar.scrollLeft+tabsBar.clientWidth){let tabBarPaddingLeft=globalThis.getComputedStyle(tabsBar,`padding-left`).paddingLeft;let tabsBarPaddingOffset=Number(tabBarPaddingLeft.slice(0,-2));tabsBar.scrollTo({left:activeTab.offsetLeft-tabsBarPaddingOffset-50,behavior:tabsBarHasScrollAnimation.value?`smooth`:`instant`})}if(typeof currentTab.value!=`number`)return;let indicatorWidth=activeTab?.offsetWidth??0;let indicatorHeight=activeTab?.offsetHeight??0;tabsIndicatorState.value={transform:`translateX(${activeTab?.offsetLeft??0}px)`,width:`${indicatorWidth}px`,height:`${indicatorHeight}px`},tabsBarHasScrollAnimation.value=!0}function getTabStyle(index,disabled){return disabled?{}:currentTab.value===index+1?`color: hsl(var(--maz-foreground))`:`color: hsl(var(--maz-muted))`}onBeforeMount(()=>{(currentTab.value<1||currentTab.value>normalizedItems.value.length)&&console.error(`[maz-ui](MazTabsBar) The model-value should be between 1 and ${normalizedItems.value.length}`)}),onMounted(()=>{(__props.persistent||currentTab.value)&&setIndicatorAndScroll()}),watch(()=>[currentTab.value,normalizedItems.value],()=>{setIndicatorAndScroll()});function getQueryParamTab(){let urlActuelle=new URL(globalThis.location.href);return Number(urlActuelle.searchParams.get(__props.queryParam))}function addOrUpdateQueryParamTab(tab){let urlActuelle=new URL(globalThis.location.href);urlActuelle.searchParams.set(__props.queryParam,String(tab)),globalThis.history.replaceState({},document.title,urlActuelle.toString())}return onMounted(()=>{__props.persistent&&updateCurrentTab(getQueryParamTab()||currentTab.value||1)}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{ref_key:`tabsBarRef`,ref:tabsBarRef,class:normalizeClass([`m-tabs-bar m-reset-css`,{"--block":__props.block,"--elevation":__props.elevation,"--bordered":__props.bordered}])},[createElementVNode(`div`,{class:normalizeClass([`m-tabs-bar__indicator`,{"--animated":tabsBarHasScrollAnimation.value}]),style:normalizeStyle([tabsIndicatorState.value])},null,6),(openBlock(!0),createElementBlock(Fragment,null,renderList(normalizedItems.value,(item,index)=>(openBlock(),createElementBlock(`button`,{key:index,ref_for:!0,ref:mazBtn=>addElementToItemRefs({mazBtn,index}),class:normalizeClass([{"--active":isActiveTab(index),"--disabled":item.disabled},`m-tabs-bar__item`]),disabled:item.disabled,style:normalizeStyle(getTabStyle(index,item.disabled)),onClick:$event=>item.disabled?void 0:selectTab(index)},[renderSlot(_ctx.$slots,`item`,{item,active:isActiveTab(index),index},()=>[createTextVNode(toDisplayString(item.label)+` `,1),item.badge?(openBlock(),createBlock(unref(MazBadge),mergeProps({key:0,ref_for:!0},item.badge,{size:item.badge.size??`0.7rem`,class:`m-tabs-bar__item__badge`}),{default:withCtx(()=>[renderSlot(_ctx.$slots,`badge-content`,{content:item.badge.content},()=>[createTextVNode(toDisplayString(item.badge.content),1)],!0)]),_:2},1040,[`size`])):createCommentVNode(``,!0)],!0)],14,_hoisted_1))),128))],2))}}),[[`__scopeId`,`data-v-060189e6`]]);export{MazTabsBar_default as t};