@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
3 lines (2 loc) • 3.88 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./tabs-constants.cjs"),a=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={compatConfig:{MODE:3},name:"DtTabGroup",provide(){return{groupContext:this.provideObj,setFocus:this.setFocus}},props:{label:{type:String,default:""},selected:{type:String,default:""},disabled:{type:Boolean,default:!1},inverted:{type:Boolean,default:!1},borderless:{type:Boolean,default:!1},size:{type:String,default:"default",validate(t){return n.TAB_LIST_SIZES.includes(t)}},tabListClass:{type:[String,Array,Object],default:""},tabListChildProps:{type:Object,default:()=>({})}},emits:["change","before-change"],data(){return{provideObj:{selected:"",disabled:!1},focusId:null,tabs:[],TAB_LIST_SIZE_MODIFIERS:n.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:n.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:n.TAB_LIST_IMPORTANCE_MODIFIERS}},watch:{disabled:{immediate:!0,handler(){this.provideObj.disabled=this.disabled}},selected:{immediate:!0,handler(){this.provideObj.selected=this.selected}}},mounted(){this.updateSelected()},beforeUpdate(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabs=this.getTabChildren()},setFocus(t){this.focusId=t},getTabChildren(){return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map(e=>{var d,l;return{context:e,panelId:(d=e.getAttribute("aria-controls"))==null?void 0:d.replace("dt-panel-",""),tabId:(l=e.getAttribute("id"))==null?void 0:l.replace("dt-tab-",""),isSelected:e.getAttribute("aria-selected")==="true"}})},onChange(){this.$emit("change",{...this.provideObj})},tabLeft(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=t-1<0?this.tabs.length-1:t-1;this.selectFocusOnTab(e)},tabRight(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=t+1>this.tabs.length-1?0:t+1;this.selectFocusOnTab(e)},selectFocusOnTab(t){const{context:e}=this.tabs[t];e.focus()},selectTab(t){if(this.isSameTabClicked()||(this.$emit("before-change",t),t.defaultPrevented))return;const e=this.getFocusedTabIndex();this.selectTabByIndex(e),this.onChange()},selectTabByIndex(t){const{context:e,panelId:d}=this.tabs[t];this.provideObj.selected=d,e.focus()},getFocusedTabIndex(){const t=this.tabs.findIndex(e=>this.focusId?e.tabId===`${this.focusId}`:e.isSelected);return t===-1?0:t},onHomeButton(){var t,e;this.tabs.length!==0&&((e=(t=this.tabs[0])==null?void 0:t.context)==null||e.focus())},onEndButton(){var t,e;this.tabs.length!==0&&((e=(t=this.tabs[this.tabs.length-1])==null?void 0:t.context)==null||e.focus())},isSameTabClicked(){const t=this.tabs[this.getFocusedTabIndex()];return this.provideObj.selected===t.panelId}}},u={"data-qa":"dt-tab-group"},c=["aria-label"];function h(t,e,d,l,r,s){return a.openBlock(),a.createElementBlock("div",u,[a.createElementVNode("div",a.mergeProps({ref:"tabs",class:["d-tablist",r.TAB_LIST_SIZE_MODIFIERS[d.size],{[r.TAB_LIST_KIND_MODIFIERS.inverted]:d.inverted,[r.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:d.borderless},d.tabListClass]},d.tabListChildProps,{role:"tablist","aria-label":d.label,onKeyup:[e[0]||(e[0]=a.withKeys((...i)=>s.tabLeft&&s.tabLeft(...i),["left"])),e[1]||(e[1]=a.withKeys((...i)=>s.tabRight&&s.tabRight(...i),["right"])),e[2]||(e[2]=a.withKeys((...i)=>s.selectTab&&s.selectTab(...i),["enter"])),e[3]||(e[3]=a.withKeys((...i)=>s.selectTab&&s.selectTab(...i),["space"]))],onClick:e[4]||(e[4]=(...i)=>s.selectTab&&s.selectTab(...i)),onKeydown:[e[5]||(e[5]=a.withKeys((...i)=>s.onHomeButton&&s.onHomeButton(...i),["home"])),e[6]||(e[6]=a.withKeys((...i)=>s.onEndButton&&s.onEndButton(...i),["end"]))]}),[a.renderSlot(t.$slots,"tabs")],16,c),a.renderSlot(t.$slots,"default")])}const I=b._(o,[["render",h]]);exports.default=I;
//# sourceMappingURL=tab-group.cjs.map