npm - @dialpad/dialtone-vue - Versions diffs - 3.219.0 → 3.220.0-next.2 - Mend

@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (970) hide show

package/dist/lib/tab/index.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./tabs-constants.cjs`),t=require(`./tab-group.cjs`),n=require(`./tab.cjs`),r=require(`./tab-panel.cjs`);exports.DtTab=n.default,exports.DtTabGroup=t.default,exports.DtTabPanel=r.default,exports.~~TAB_IMPORTANCE_MODIFIERS~~=e.~~TAB_IMPORTANCE_MODIFIERS~~,exports.TAB_LIST_IMPORTANCE_MODIFIERS=e.TAB_LIST_IMPORTANCE_MODIFIERS,exports.TAB_LIST_KIND_MODIFIERS=e.TAB_LIST_KIND_MODIFIERS,exports.TAB_LIST_SIZES=e.TAB_LIST_SIZES;
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./tabs-constants.cjs`),t=require(`./tab-group.cjs`),n=require(`./tab.cjs`),r=require(`./tab-panel.cjs`);exports.DtTab=n.default,exports.DtTabGroup=t.default,exports.DtTabPanel=r.default,exports.TAB_ACTIVATION_MODES=e.TAB_ACTIVATION_MODES,exports.TAB_GROUP_KINDS=e.TAB_GROUP_KINDS,exports.TAB_LIST_IMPORTANCE_MODIFIERS=e.TAB_LIST_IMPORTANCE_MODIFIERS,exports.TAB_LIST_KIND_MODIFIERS=e.TAB_LIST_KIND_MODIFIERS,exports.TAB_LIST_SIZES=e.TAB_LIST_SIZES,exports.TAB_LIST_SIZE_MODIFIERS=e.TAB_LIST_SIZE_MODIFIERS,exports.TAB_SPREADS=e.TAB_SPREADS;

package/dist/lib/tab/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { TAB_IMPORTANCE_MODIFIERS as e, TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r } from "./tabs-constants.js";
-import i from "./tab-group.js";
-import a from "./tab.js";
-import o from "./tab-panel.js";
-export { a as DtTab, i as DtTabGroup, o as DtTabPanel, e as TAB_IMPORTANCE_MODIFIERS, t as TAB_LIST_IMPORTANCE_MODIFIERS, n as TAB_LIST_KIND_MODIFIERS, r as TAB_LIST_SIZES };
+import { TAB_ACTIVATION_MODES as e, TAB_GROUP_KINDS as t, TAB_LIST_IMPORTANCE_MODIFIERS as n, TAB_LIST_KIND_MODIFIERS as r, TAB_LIST_SIZES as i, TAB_LIST_SIZE_MODIFIERS as a, TAB_SPREADS as o } from "./tabs-constants.js";
+import s from "./tab-group.js";
+import c from "./tab.js";
+import l from "./tab-panel.js";
+export { c as DtTab, s as DtTabGroup, l as DtTabPanel, e as TAB_ACTIVATION_MODES, t as TAB_GROUP_KINDS, n as TAB_LIST_IMPORTANCE_MODIFIERS, r as TAB_LIST_KIND_MODIFIERS, i as TAB_LIST_SIZES, a as TAB_LIST_SIZE_MODIFIERS, o as TAB_SPREADS };

package/dist/lib/tab/tab-group.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./tabs-constants.cjs`);let n=require(`vue`);var r={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(e){return t.TAB_LIST_SIZES.includes(e)}},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:t.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:t.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:t.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()},updated(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabs=this.getTabChildren()},setFocus(e){this.focusId=e},getTabChildren(){return Array.from(this.$refs.tabs.querySelectorAll(`.d-tab`)).map(e=>({context:e,panelId:e.getAttribute(`aria-controls`)?.replace(`dt-panel-`,``),tabId:e.getAttribute(`id`)?.replace(`dt-tab-`,``),isSelected:e.getAttribute(`aria-selected`)===`true`}))},onChange(){this.$emit(`change`,{...this.provideObj})},tabLeft(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=e-1<0?this.tabs.length-1:e-1;this.selectFocusOnTab(t)},tabRight(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=e+1>this.tabs.length-1?0:e+1;this.selectFocusOnTab(t)},selectFocusOnTab(e){let{context:t}=this.tabs[e];t.focus()},selectTab(e){if(this.isSameTabClicked()||(this.$emit(`before-change`,e),e.defaultPrevented))return;let t=this.getFocusedTabIndex();this.selectTabByIndex(t),this.onChange()},selectTabByIndex(e){let{context:t,panelId:n}=this.tabs[e];this.provideObj.selected=n,t.focus()},getFocusedTabIndex(){let e=this.tabs.findIndex(e=>this.focusId?e.tabId===`${this.focusId}`:e.isSelected);return e===-1?0:e},onHomeButton(){this.tabs.length!==0&&this.tabs[0]?.context?.focus()},onEndButton(){this.tabs.length!==0&&this.tabs[this.tabs.length-1]?.context?.focus()},isSameTabClicked(){let e=this.tabs[this.getFocusedTabIndex()];return this.provideObj.selected===e.panelId}}},i={"data-qa":`dt-tab-group`},a=[`aria-label`];function o(e,t,r,o,s,c){return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.createElementVNode)(`div`,(0,n.mergeProps)({ref:`tabs`,class:[`d-tablist`,s.TAB_LIST_SIZE_MODIFIERS[r.size],{[s.TAB_LIST_KIND_MODIFIERS.inverted]:r.inverted,[s.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:r.borderless},r.tabListClass]},r.tabListChildProps,{role:`tablist`,"aria-label":r.label,onKeyup:[t[0]||(t[0]=(0,n.withKeys)((...e)=>c.tabLeft&&c.tabLeft(...e),[`left`])),t[1]||(t[1]=(0,n.withKeys)((...e)=>c.tabRight&&c.tabRight(...e),[`right`])),t[2]||(t[2]=(0,n.withKeys)((...e)=>c.selectTab&&c.selectTab(...e),[`enter`])),t[3]||(t[3]=(0,n.withKeys)((...e)=>c.selectTab&&c.selectTab(...e),[`space`]))],onClick:t[4]||(t[4]=(...e)=>c.selectTab&&c.selectTab(...e)),onKeydown:[t[5]||(t[5]=(0,n.withKeys)((...e)=>c.onHomeButton&&c.onHomeButton(...e),[`home`])),t[6]||(t[6]=(0,n.withKeys)((...e)=>c.onEndButton&&c.onEndButton(...e),[`end`]))]}),[(0,n.renderSlot)(e.$slots,`tabs`)],16,a),(0,n.renderSlot)(e.$slots,`default`)])}var s=e.t(r,[[`render`,o]]);exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./tabs-constants.cjs`),n=require(`../../common/composables/useIndicatorAnimation.cjs`);let r=require(`vue`);var i={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},spread:{type:String,default:`none`,validator(e){return t.TAB_SPREADS.includes(e)}},orientation:{type:String,default:`horizontal`,validator(e){return t.TAB_ORIENTATIONS.includes(e)}},size:{type:[String,Number],default:300,validator(e){return t.TAB_LIST_SIZES.includes(String(e))}},tabListClass:{type:[String,Array,Object],default:``},tabListChildProps:{type:Object,default:()=>({})},kind:{type:String,default:`default`,validator(e){return t.TAB_GROUP_KINDS.includes(e)}},outlined:{type:Boolean,default:!1},activationMode:{type:String,default:`manual`,validator(e){return t.TAB_ACTIVATION_MODES.includes(e)}},showIndicatorTransition:{type:Boolean,default:!0}},emits:[`change`,`before-change`],setup(){let e=(0,r.ref)(null);return{tabs:e,indicator:n.useIndicatorAnimation(e,`--tab-indicator-duration`,`--tab-indicator-easing`)}},data(){return{provideObj:{selected:``,disabled:!1,size:300,kind:`default`,outlined:!1,orientation:`horizontal`,spread:`none`,focusedTabId:null},tabItems:[],TAB_LIST_SIZE_MODIFIERS:t.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:t.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:t.TAB_LIST_IMPORTANCE_MODIFIERS,TAB_ORIENTATION_MODIFIERS:t.TAB_ORIENTATION_MODIFIERS,TAB_SPREAD_MODIFIERS:t.TAB_SPREAD_MODIFIERS}},watch:{disabled:{immediate:!0,handler(){this.provideObj.disabled=this.disabled}},selected:{immediate:!0,handler(e,t){this.provideObj.selected=this.selected,e!==t&&(this.provideObj.focusedTabId=null)}},size:{immediate:!0,handler(){this.provideObj.size=this.size}},kind:{immediate:!0,handler(){this.provideObj.kind=this.kind}},outlined:{immediate:!0,handler(){this.provideObj.outlined=this.outlined}},orientation:{immediate:!0,handler(){this.provideObj.orientation=this.orientation}},spread:{immediate:!0,handler(){this.provideObj.spread=this.spread}}},mounted(){this.updateSelected()},updated(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabItems=this.getTabChildren(),this.provideObj.focusedTabId&&!this.tabItems.some(e=>e.tabId===this.provideObj.focusedTabId)&&(this.provideObj.focusedTabId=null)},setFocus(e){this.provideObj.focusedTabId!==e&&(this.provideObj.focusedTabId=e)},getTabChildren(){return Array.from(this.$refs.tabs.querySelectorAll(`[role="tab"]`)).map(e=>({context:e,panelId:e.getAttribute(`aria-controls`)?.replace(`dt-panel-`,``),tabId:e.getAttribute(`id`)?.replace(`dt-tab-`,``),isSelected:e.getAttribute(`aria-selected`)===`true`,isDisabled:e.getAttribute(`aria-disabled`)===`true`}))},onChange(){this.$emit(`change`,{...this.provideObj})},tabLeft(){this.orientation===`horizontal`&&this.navigatePrevious()},tabRight(){this.orientation===`horizontal`&&this.navigateNext()},tabUp(e){this.orientation===`vertical`&&(e.preventDefault(),this.navigatePrevious())},tabDown(e){this.orientation===`vertical`&&(e.preventDefault(),this.navigateNext())},navigatePrevious(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=this.findNextTab(e,-1);this.selectFocusOnTab(t)},navigateNext(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=this.findNextTab(e,1);this.selectFocusOnTab(t)},findNextTab(e,t){let n=this.tabItems.length;return(e+t+n)%n},transitionIndicator(e,t){if(!t||!this.showIndicatorTransition){this.provideObj.selected=e;return}let n=this.indicator.snapshot(`[aria-selected="true"]`);this.provideObj.selected=e,n&&this.$nextTick(()=>{let e={backgroundColor:`transparent`},r={},i=`::after`;this.outlined?(e={borderColor:`transparent`,backgroundColor:`transparent`},r={boxShadow:`inset 0 0 0 ${n.style.borderWidth} ${n.style.borderColor}`},i=`::before`):this.kind===`muted`&&(r={backgroundColor:n.style.backgroundColor},i=`::before`),this.indicator.animate({oldRect:n.rect,newEl:t,orientation:this.orientation,hideProps:e,indicatorExtra:r,pseudoElement:i})})},selectFocusOnTab(e){let{context:t,panelId:n,isDisabled:r}=this.tabItems[e];t.focus(),this.activationMode===`auto`&&!r&&(this.indicator.cancel(),this.provideObj.selected=n,this.onChange())},selectTab(e){let t=e.target.closest(`[role="tab"]`),n=t?this.tabItems.findIndex(e=>e.context===t):this.getFocusedTabIndex();n!==-1&&(this.tabItems[n]?.isDisabled||this.provideObj.selected!==this.tabItems[n]?.panelId&&(this.$emit(`before-change`,e),!e.defaultPrevented&&(e.preventDefault(),this.selectTabByIndex(n),this.onChange())))},selectTabByIndex(e){let{context:t,panelId:n}=this.tabItems[e];this.transitionIndicator(n,t),t.focus()},getFocusedTabIndex(){let e=this.provideObj.focusedTabId,t=this.tabItems.findIndex(t=>e?t.tabId===e:t.isSelected);return t===-1?0:t},onHomeButton(){this.tabItems.length&&this.selectFocusOnTab(0)},onEndButton(){this.tabItems.length&&this.selectFocusOnTab(this.tabItems.length-1)}}},a=[`aria-label`,`aria-orientation`];function o(e,t,n,i,o,s){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{"data-qa":`dt-tab-group`,class:(0,r.normalizeClass)([`d-tab-neux`,{"d-tab-neux--vertical":n.orientation===`vertical`}])},[(0,r.createElementVNode)(`div`,(0,r.mergeProps)({ref:`tabs`,class:[`d-tablist`,o.TAB_LIST_SIZE_MODIFIERS[String(n.size)],o.TAB_ORIENTATION_MODIFIERS[n.orientation],n.orientation!==`vertical`&&o.TAB_SPREAD_MODIFIERS[n.spread],{[o.TAB_LIST_KIND_MODIFIERS.inverted]:n.inverted,[o.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:n.borderless},n.tabListClass]},n.tabListChildProps,{role:`tablist`,"aria-label":n.label,"aria-orientation":n.orientation,onKeydown:[t[0]||(t[0]=(0,r.withKeys)((...e)=>s.tabLeft&&s.tabLeft(...e),[`left`])),t[1]||(t[1]=(0,r.withKeys)((...e)=>s.tabRight&&s.tabRight(...e),[`right`])),t[2]||(t[2]=(0,r.withKeys)((...e)=>s.tabUp&&s.tabUp(...e),[`up`])),t[3]||(t[3]=(0,r.withKeys)((...e)=>s.tabDown&&s.tabDown(...e),[`down`])),t[4]||(t[4]=(0,r.withKeys)((...e)=>s.selectTab&&s.selectTab(...e),[`enter`])),t[5]||(t[5]=(0,r.withKeys)((...e)=>s.selectTab&&s.selectTab(...e),[`space`])),t[7]||(t[7]=(0,r.withKeys)((0,r.withModifiers)((...e)=>s.onHomeButton&&s.onHomeButton(...e),[`prevent`]),[`home`])),t[8]||(t[8]=(0,r.withKeys)((0,r.withModifiers)((...e)=>s.onEndButton&&s.onEndButton(...e),[`prevent`]),[`end`]))],onClick:t[6]||(t[6]=(...e)=>s.selectTab&&s.selectTab(...e))}),[(0,r.renderSlot)(e.$slots,`tabs`)],16,a),(0,r.renderSlot)(e.$slots,`default`)],2)}var s=e.t(i,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=tab-group.cjs.map

package/dist/lib/tab/tab-group.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-group.cjs","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[size],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n tabListClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n @keyup.left=\"tabLeft\"\n @keyup.right=\"tabRight\"\n @keyup.enter=\"selectTab\"\n @keyup.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home=\"onHomeButton\"\n @keydown.end=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/*\n Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /\n Identifies the tab group\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n The id of the selected tab panel which should be displayed\n /\n selected: {\n type: String,\n default: '',\n },\n\n /\n If true, disables the tab group\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies inverted styles to the tab group\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies borderless styles to the tab group\n * @values true, false\n /\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /\n If provided, applies size styles to the tab group\n * @values default, sm\n /\n size: {\n type: String,\n default: 'default',\n validate (size) {\n return TAB_LIST_SIZES.includes(size);\n },\n },\n\n /\n Pass through classes, used to customize the tab list\n /\n tabListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through props, used to customize the tab list\n /\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n },\n\n emits: [\n /\n Change tab event with the arguments: selected id of the current tab and disabled value\n \n @event change\n * @type {Object}\n /\n 'change',\n\n /\n Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n \n @event before-change\n * @type {Event}\n /\n 'before-change',\n ],\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n },\n\n focusId: null,\n tabs: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n };\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler () {\n this.provideObj.selected = this.selected;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /\n Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabs = this.getTabChildren();\n },\n\n setFocus (focusId) {\n this.focusId = focusId;\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n this.selectFocusOnTab(indexElement);\n },\n\n tabRight () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n this.selectFocusOnTab(indexElement);\n },\n\n selectFocusOnTab (index) {\n const { context } = this.tabs[index];\n context.focus();\n },\n\n selectTab (event) {\n if (this.isSameTabClicked()) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n const index = this.getFocusedTabIndex();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabs[index];\n this.provideObj.selected = panelId;\n context.focus();\n },\n\n getFocusedTabIndex () {\n // Hot fix https://github.com/dialpad/dialtone/pull/849\n // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n const index = this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabs.length === 0) return;\n this.tabs[0]?.context?.focus();\n },\n\n onEndButton () {\n if (this.tabs.length === 0) return;\n this.tabs[this.tabs.length - 1]?.context?.focus();\n },\n\n isSameTabClicked () {\n const tab = this.tabs[this.getFocusedTabIndex()];\n return this.provideObj.selected === tab.panelId;\n },\n },\n};\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"tab-group.cjs","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n tabListClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './tabs_constants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\n\n/*\n Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /\n Identifies the tab group\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n The id of the selected tab panel which should be displayed\n /\n selected: {\n type: String,\n default: '',\n },\n\n /\n If true, disables the tab group\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies borderless styles to the tab group\n * @values true, false\n /\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /\n Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n /\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /\n The orientation of the tab list\n * @values horizontal, vertical\n /\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /\n If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n /\n size: {\n type: [String, Number],\n default: 300,\n validator (size) {\n return TAB_LIST_SIZES.includes(String(size));\n },\n },\n\n /\n Pass through classes, used to customize the tab list\n /\n tabListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through props, used to customize the tab list\n /\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n /\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /\n If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n /\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /\n Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n /\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /\n If true, the selection indicator animates between tabs on click.\n * @values true, false\n /\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Change tab event with the arguments: selected id of the current tab and disabled value\n \n @event change\n * @type {Object}\n /\n 'change',\n\n /\n Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n \n @event before-change\n * @type {Event}\n /\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /\n Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext \|\| !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/tab/tab-group.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r, TAB_LIST_SIZE_MODIFIERS as i } from "./tabs-constants.js";
-import { createElementBlock as a, createElementVNode as o, mergeProps as s, openBlock as c, renderSlot as l, withKeys as u } from "vue";
+import { TAB_ACTIVATION_MODES as t, TAB_GROUP_KINDS as n, TAB_LIST_IMPORTANCE_MODIFIERS as r, TAB_LIST_KIND_MODIFIERS as i, TAB_LIST_SIZES as a, TAB_LIST_SIZE_MODIFIERS as o, TAB_ORIENTATIONS as s, TAB_ORIENTATION_MODIFIERS as c, TAB_SPREADS as l, TAB_SPREAD_MODIFIERS as u } from "./tabs-constants.js";
+import { useIndicatorAnimation as d } from "../../common/composables/useIndicatorAnimation.js";
+import { createElementBlock as f, createElementVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderSlot as v, withKeys as y, withModifiers as b } from "vue";
 //#region components/tab/tab_group.vue
-var d = {
+var x = {
 	compatConfig: { MODE: 3 },
 	name: "DtTabGroup",
 	provide() {
@@ -32,11 +33,25 @@ var d = {
 			type: Boolean,
 			default: !1
 		},
-		size: {
+		spread: {
 			type: String,
-			default: "default",
-			validate(e) {
-				return r.includes(e);
+			default: "none",
+			validator(e) {
+				return l.includes(e);
+			}
+		},
+		orientation: {
+			type: String,
+			default: "horizontal",
+			validator(e) {
+				return s.includes(e);
+			}
+		},
+		size: {
+			type: [String, Number],
+			default: 300,
+			validator(e) {
+				return a.includes(String(e));
 			}
 		},
 		tabListClass: {
@@ -50,20 +65,56 @@ var d = {
 		tabListChildProps: {
 			type: Object,
 			default: () => ({})
+		},
+		kind: {
+			type: String,
+			default: "default",
+			validator(e) {
+				return n.includes(e);
+			}
+		},
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		activationMode: {
+			type: String,
+			default: "manual",
+			validator(e) {
+				return t.includes(e);
+			}
+		},
+		showIndicatorTransition: {
+			type: Boolean,
+			default: !0
 		}
 	},
 	emits: ["change", "before-change"],
+	setup() {
+		let e = _(null);
+		return {
+			tabs: e,
+			indicator: d(e, "--tab-indicator-duration", "--tab-indicator-easing")
+		};
+	},
 	data() {
 		return {
 			provideObj: {
 				selected: "",
-				disabled: !1
+				disabled: !1,
+				size: 300,
+				kind: "default",
+				outlined: !1,
+				orientation: "horizontal",
+				spread: "none",
+				focusedTabId: null
 			},
-			focusId: null,
-			tabs: [],
-			TAB_LIST_SIZE_MODIFIERS: i,
-			TAB_LIST_KIND_MODIFIERS: n,
-			TAB_LIST_IMPORTANCE_MODIFIERS: t
+			tabItems: [],
+			TAB_LIST_SIZE_MODIFIERS: o,
+			TAB_LIST_KIND_MODIFIERS: i,
+			TAB_LIST_IMPORTANCE_MODIFIERS: r,
+			TAB_ORIENTATION_MODIFIERS: c,
+			TAB_SPREAD_MODIFIERS: u
 		};
 	},
 	watch: {
@@ -74,9 +125,39 @@ var d = {
 			}
 		},
 		selected: {
+			immediate: !0,
+			handler(e, t) {
+				this.provideObj.selected = this.selected, e !== t && (this.provideObj.focusedTabId = null);
+			}
+		},
+		size: {
 			immediate: !0,
 			handler() {
-				this.provideObj.selected = this.selected;
+				this.provideObj.size = this.size;
+			}
+		},
+		kind: {
+			immediate: !0,
+			handler() {
+				this.provideObj.kind = this.kind;
+			}
+		},
+		outlined: {
+			immediate: !0,
+			handler() {
+				this.provideObj.outlined = this.outlined;
+			}
+		},
+		orientation: {
+			immediate: !0,
+			handler() {
+				this.provideObj.orientation = this.orientation;
+			}
+		},
+		spread: {
+			immediate: !0,
+			handler() {
+				this.provideObj.spread = this.spread;
 			}
 		}
 	},
@@ -88,69 +169,107 @@ var d = {
 	},
 	methods: {
 		updateSelected() {
-			this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
+			this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabItems = this.getTabChildren(), this.provideObj.focusedTabId && !this.tabItems.some((e) => e.tabId === this.provideObj.focusedTabId) && (this.provideObj.focusedTabId = null);
 		},
 		setFocus(e) {
-			this.focusId = e;
+			this.provideObj.focusedTabId !== e && (this.provideObj.focusedTabId = e);
 		},
 		getTabChildren() {
-			return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => ({
+			return Array.from(this.$refs.tabs.querySelectorAll("[role=\"tab\"]")).map((e) => ({
 				context: e,
 				panelId: e.getAttribute("aria-controls")?.replace("dt-panel-", ""),
 				tabId: e.getAttribute("id")?.replace("dt-tab-", ""),
-				isSelected: e.getAttribute("aria-selected") === "true"
+				isSelected: e.getAttribute("aria-selected") === "true",
+				isDisabled: e.getAttribute("aria-disabled") === "true"
 			}));
 		},
 		onChange() {
 			this.$emit("change", { ...this.provideObj });
 		},
 		tabLeft() {
+			this.orientation === "horizontal" && this.navigatePrevious();
+		},
+		tabRight() {
+			this.orientation === "horizontal" && this.navigateNext();
+		},
+		tabUp(e) {
+			this.orientation === "vertical" && (e.preventDefault(), this.navigatePrevious());
+		},
+		tabDown(e) {
+			this.orientation === "vertical" && (e.preventDefault(), this.navigateNext());
+		},
+		navigatePrevious() {
 			let e = this.getFocusedTabIndex();
 			if (e === -1) return;
-			let t = e - 1 < 0 ? this.tabs.length - 1 : e - 1;
+			let t = this.findNextTab(e, -1);
 			this.selectFocusOnTab(t);
 		},
-		tabRight() {
+		navigateNext() {
 			let e = this.getFocusedTabIndex();
 			if (e === -1) return;
-			let t = e + 1 > this.tabs.length - 1 ? 0 : e + 1;
+			let t = this.findNextTab(e, 1);
 			this.selectFocusOnTab(t);
 		},
+		findNextTab(e, t) {
+			let n = this.tabItems.length;
+			return (e + t + n) % n;
+		},
+		transitionIndicator(e, t) {
+			if (!t || !this.showIndicatorTransition) {
+				this.provideObj.selected = e;
+				return;
+			}
+			let n = this.indicator.snapshot("[aria-selected=\"true\"]");
+			this.provideObj.selected = e, n && this.$nextTick(() => {
+				let e = { backgroundColor: "transparent" }, r = {}, i = "::after";
+				this.outlined ? (e = {
+					borderColor: "transparent",
+					backgroundColor: "transparent"
+				}, r = { boxShadow: `inset 0 0 0 ${n.style.borderWidth} ${n.style.borderColor}` }, i = "::before") : this.kind === "muted" && (r = { backgroundColor: n.style.backgroundColor }, i = "::before"), this.indicator.animate({
+					oldRect: n.rect,
+					newEl: t,
+					orientation: this.orientation,
+					hideProps: e,
+					indicatorExtra: r,
+					pseudoElement: i
+				});
+			});
+		},
 		selectFocusOnTab(e) {
-			let { context: t } = this.tabs[e];
-			t.focus();
+			let { context: t, panelId: n, isDisabled: r } = this.tabItems[e];
+			t.focus(), this.activationMode === "auto" && !r && (this.indicator.cancel(), this.provideObj.selected = n, this.onChange());
 		},
 		selectTab(e) {
-			if (this.isSameTabClicked() || (this.$emit("before-change", e), e.defaultPrevented)) return;
-			let t = this.getFocusedTabIndex();
-			this.selectTabByIndex(t), this.onChange();
+			let t = e.target.closest("[role=\"tab\"]"), n = t ? this.tabItems.findIndex((e) => e.context === t) : this.getFocusedTabIndex();
+			n !== -1 && (this.tabItems[n]?.isDisabled || this.provideObj.selected !== this.tabItems[n]?.panelId && (this.$emit("before-change", e), !e.defaultPrevented && (e.preventDefault(), this.selectTabByIndex(n), this.onChange())));
 		},
 		selectTabByIndex(e) {
-			let { context: t, panelId: n } = this.tabs[e];
-			this.provideObj.selected = n, t.focus();
+			let { context: t, panelId: n } = this.tabItems[e];
+			this.transitionIndicator(n, t), t.focus();
 		},
 		getFocusedTabIndex() {
-			let e = this.tabs.findIndex((e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected);
-			return e === -1 ? 0 : e;
+			let e = this.provideObj.focusedTabId, t = this.tabItems.findIndex((t) => e ? t.tabId === e : t.isSelected);
+			return t === -1 ? 0 : t;
 		},
 		onHomeButton() {
-			this.tabs.length !== 0 && this.tabs[0]?.context?.focus();
+			this.tabItems.length && this.selectFocusOnTab(0);
 		},
 		onEndButton() {
-			this.tabs.length !== 0 && this.tabs[this.tabs.length - 1]?.context?.focus();
-		},
-		isSameTabClicked() {
-			let e = this.tabs[this.getFocusedTabIndex()];
-			return this.provideObj.selected === e.panelId;
+			this.tabItems.length && this.selectFocusOnTab(this.tabItems.length - 1);
 		}
 	}
-}, f = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
-function m(e, t, n, r, i, d) {
-	return c(), a("div", f, [o("div", s({
+}, S = ["aria-label", "aria-orientation"];
+function C(e, t, n, r, i, a) {
+	return g(), f("div", {
+		"data-qa": "dt-tab-group",
+		class: h(["d-tab-neux", { "d-tab-neux--vertical": n.orientation === "vertical" }])
+	}, [p("div", m({
 		ref: "tabs",
 		class: [
 			"d-tablist",
-			i.TAB_LIST_SIZE_MODIFIERS[n.size],
+			i.TAB_LIST_SIZE_MODIFIERS[String(n.size)],
+			i.TAB_ORIENTATION_MODIFIERS[n.orientation],
+			n.orientation !== "vertical" && i.TAB_SPREAD_MODIFIERS[n.spread],
 			{
 				[i.TAB_LIST_KIND_MODIFIERS.inverted]: n.inverted,
 				[i.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: n.borderless
@@ -160,18 +279,22 @@ function m(e, t, n, r, i, d) {
 	}, n.tabListChildProps, {
 		role: "tablist",
 		"aria-label": n.label,
-		onKeyup: [
-			t[0] || (t[0] = u((...e) => d.tabLeft && d.tabLeft(...e), ["left"])),
-			t[1] || (t[1] = u((...e) => d.tabRight && d.tabRight(...e), ["right"])),
-			t[2] || (t[2] = u((...e) => d.selectTab && d.selectTab(...e), ["enter"])),
-			t[3] || (t[3] = u((...e) => d.selectTab && d.selectTab(...e), ["space"]))
+		"aria-orientation": n.orientation,
+		onKeydown: [
+			t[0] || (t[0] = y((...e) => a.tabLeft && a.tabLeft(...e), ["left"])),
+			t[1] || (t[1] = y((...e) => a.tabRight && a.tabRight(...e), ["right"])),
+			t[2] || (t[2] = y((...e) => a.tabUp && a.tabUp(...e), ["up"])),
+			t[3] || (t[3] = y((...e) => a.tabDown && a.tabDown(...e), ["down"])),
+			t[4] || (t[4] = y((...e) => a.selectTab && a.selectTab(...e), ["enter"])),
+			t[5] || (t[5] = y((...e) => a.selectTab && a.selectTab(...e), ["space"])),
+			t[7] || (t[7] = y(b((...e) => a.onHomeButton && a.onHomeButton(...e), ["prevent"]), ["home"])),
+			t[8] || (t[8] = y(b((...e) => a.onEndButton && a.onEndButton(...e), ["prevent"]), ["end"]))
 		],
-		onClick: t[4] || (t[4] = (...e) => d.selectTab && d.selectTab(...e)),
-		onKeydown: [t[5] || (t[5] = u((...e) => d.onHomeButton && d.onHomeButton(...e), ["home"])), t[6] || (t[6] = u((...e) => d.onEndButton && d.onEndButton(...e), ["end"]))]
-	}), [l(e.$slots, "tabs")], 16, p), l(e.$slots, "default")]);
+		onClick: t[6] || (t[6] = (...e) => a.selectTab && a.selectTab(...e))
+	}), [v(e.$slots, "tabs")], 16, S), v(e.$slots, "default")], 2);
 }
-var h = /* @__PURE__ */ e(d, [["render", m]]);
+var w = /* @__PURE__ */ e(x, [["render", C]]);
 //#endregion
-export { h as default };
+export { w as default };
 //# sourceMappingURL=tab-group.js.map

package/dist/lib/tab/tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[size],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n tabListClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n @keyup.left=\"tabLeft\"\n @keyup.right=\"tabRight\"\n @keyup.enter=\"selectTab\"\n @keyup.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home=\"onHomeButton\"\n @keydown.end=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/*\n Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /\n Identifies the tab group\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n The id of the selected tab panel which should be displayed\n /\n selected: {\n type: String,\n default: '',\n },\n\n /\n If true, disables the tab group\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies inverted styles to the tab group\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies borderless styles to the tab group\n * @values true, false\n /\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /\n If provided, applies size styles to the tab group\n * @values default, sm\n /\n size: {\n type: String,\n default: 'default',\n validate (size) {\n return TAB_LIST_SIZES.includes(size);\n },\n },\n\n /\n Pass through classes, used to customize the tab list\n /\n tabListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through props, used to customize the tab list\n /\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n },\n\n emits: [\n /\n Change tab event with the arguments: selected id of the current tab and disabled value\n \n @event change\n * @type {Object}\n /\n 'change',\n\n /\n Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n \n @event before-change\n * @type {Event}\n /\n 'before-change',\n ],\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n },\n\n focusId: null,\n tabs: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n };\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler () {\n this.provideObj.selected = this.selected;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /\n Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabs = this.getTabChildren();\n },\n\n setFocus (focusId) {\n this.focusId = focusId;\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n this.selectFocusOnTab(indexElement);\n },\n\n tabRight () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n this.selectFocusOnTab(indexElement);\n },\n\n selectFocusOnTab (index) {\n const { context } = this.tabs[index];\n context.focus();\n },\n\n selectTab (event) {\n if (this.isSameTabClicked()) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n const index = this.getFocusedTabIndex();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabs[index];\n this.provideObj.selected = panelId;\n context.focus();\n },\n\n getFocusedTabIndex () {\n // Hot fix https://github.com/dialpad/dialtone/pull/849\n // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n const index = this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabs.length === 0) return;\n this.tabs[0]?.context?.focus();\n },\n\n onEndButton () {\n if (this.tabs.length === 0) return;\n this.tabs[this.tabs.length - 1]?.context?.focus();\n },\n\n isSameTabClicked () {\n const tab = this.tabs[this.getFocusedTabIndex()];\n return this.provideObj.selected === tab.panelId;\n },\n },\n};\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n tabListClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './tabs_constants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\n\n/*\n Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /\n Identifies the tab group\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n The id of the selected tab panel which should be displayed\n /\n selected: {\n type: String,\n default: '',\n },\n\n /\n If true, disables the tab group\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies borderless styles to the tab group\n * @values true, false\n /\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /\n Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n /\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /\n The orientation of the tab list\n * @values horizontal, vertical\n /\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /\n If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n /\n size: {\n type: [String, Number],\n default: 300,\n validator (size) {\n return TAB_LIST_SIZES.includes(String(size));\n },\n },\n\n /\n Pass through classes, used to customize the tab list\n /\n tabListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through props, used to customize the tab list\n /\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n /\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /\n If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n /\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /\n Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n /\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /\n If true, the selection indicator animates between tabs on click.\n * @values true, false\n /\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Change tab event with the arguments: selected id of the current tab and disabled value\n \n @event change\n * @type {Object}\n /\n 'change',\n\n /\n Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n \n @event before-change\n * @type {Event}\n /\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /\n Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext \|\| !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/tab/tab.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`./tabs-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTab`,components:{DtButton:t.default},inject:[`groupContext`,`setFocus`],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:``},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:``}},emits:[`focus`,`click`],data(){return{TAB_IMPORTANCE_MODIFIERS:n.TAB_IMPORTANCE_MODIFIERS}},computed:{tabListeners(){return{click:e=>{this.$emit(`click`,e)},focus:e=>{this.setFocus(this.id),this.$emit(`focus`,e)}}},isSelected(){return this.groupContext.selected===this.panelId}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`);return(0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({id:`dt-tab-${n.id}`,class:[`d-tab`,{[a.TAB_IMPORTANCE_MODIFIERS.selected]:o.isSelected},n.tabClass],role:`tab`,"aria-selected":`${o.isSelected}`,"aria-controls":`dt-panel-${n.panelId}`,"aria-label":n.label,"data-qa":`dt-tab`,tabindex:o.isSelected?`0`:`-1`,disabled:o.groupContext.disabled||n.disabled},e.$attrs,(0,r.toHandlers)(o.tabListeners)),{default:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`class`,`aria-selected`,`aria-controls`,`aria-label`,`tabindex`,`disabled`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`DtTab`,components:{DtButton:t.default},inject:[`groupContext`,`setFocus`],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:``},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``}},emits:[`focus`,`click`],computed:{tabListeners(){return{click:e=>{this.$emit(`click`,e)},focus:e=>{this.setFocus(this.id),this.$emit(`focus`,e)}}},isDisabled(){return this.groupContext.disabled||this.disabled},buttonSize(){let e=this.groupContext.size;return e===`default`?void 0:e},isSelected(){return this.groupContext.selected===this.panelId},isFocusTarget(){let e=this.groupContext.focusedTabId;return e?e===this.id:this.isSelected},buttonKind(){return this.groupContext.outlined?this.groupContext.kind===`muted`?`muted`:`default`:this.groupContext.kind===`muted`?`muted`:this.isSelected?`default`:`muted`},buttonImportance(){return this.groupContext.outlined&&this.isSelected?`outlined`:`clear`},buttonActive(){return this.groupContext.outlined?!1:this.groupContext.kind===`muted`?this.isSelected:!1}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)},beforeUnmount(){this.groupContext.focusedTabId===this.id&&this.setFocus(null)},methods:{}};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-button`);return(0,n.openBlock)(),(0,n.createBlock)(s,(0,n.mergeProps)({id:`dt-tab-${r.id}`,class:[`d-tablist__item`,r.tabClass,{"d-tablist__item--vertical":o.groupContext.orientation===`vertical`},{"d-btn--disabled":o.isDisabled},{"d-tab--is-selected":!o.groupContext.outlined&&o.groupContext.kind!==`muted`&&o.isSelected}],importance:o.buttonImportance,kind:o.buttonKind,active:o.buttonActive,size:o.buttonSize,role:`tab`,"aria-selected":`${o.isSelected}`,"aria-controls":`dt-panel-${r.panelId}`,"aria-label":r.label,"aria-disabled":o.isDisabled?`true`:void 0,"label-class":r.labelClass,"leading-class":r.leadingClass,"trailing-class":r.trailingClass,"data-qa":`dt-tab`,tabindex:o.isFocusTarget?`0`:`-1`},e.$attrs,(0,n.toHandlers)(o.tabListeners)),(0,n.createSlots)({default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:e.$slots.icon?{name:`startIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`icon`,{iconSize:t})]),key:`1`}:void 0,e.$slots.endIcon?{name:`endIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`endIcon`,{iconSize:t})]),key:`2`}:void 0,e.$slots.leading?{name:`leading`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`leading`)]),key:`3`}:void 0,e.$slots.trailing?{name:`trailing`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`trailing`)]),key:`4`}:void 0]),1040,[`id`,`class`,`importance`,`kind`,`active`,`size`,`aria-selected`,`aria-controls`,`aria-label`,`aria-disabled`,`label-class`,`leading-class`,`trailing-class`,`tabindex`])}var a=e.t(r,[[`render`,i]]);exports.default=a;
 //# sourceMappingURL=tab.cjs.map

package/dist/lib/tab/tab.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.cjs","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n <dt-button\n :id=\"`dt-tab-${id}`\"\n :class=\"[\n 'd-~~tab~~',\n {~~\n [TAB_IMPORTANCE_MODIFIERS.selected]~~: ~~isSelected~~,\n },\n ~~tabClass~~,\n ]\"\n role=\"tab\"\n :aria-selected=\"`${isSelected}`\"\n :aria-controls=\"`dt-panel-${panelId}`\"\n :aria-label=\"label\"\n data-qa=\"dt-tab\"\n :tabindex=\"~~isSelected~~ ? '0' : '-1'\"\n :~~disabled~~=\"~~groupContext~~.~~disabled~~ \|\| ~~disabled~~\"\n v-~~bind~~=\"$~~attrs~~\"\n v-on=\"~~tabListeners~~\"\n >\n <!-- @slot default slot, defaults contains dt-button -->\n <slot />\n </dt-button>\n</template>\n\n<script>\nimport { ~~TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport {~~ DtButton } from '../button';\n\n/*\n Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtTab',\n components: {\n DtButton,\n },\n\n inject: ['groupContext', 'setFocus'],\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the tab\n /\n id: {\n type: String,\n required: true,\n },\n\n /\n Id of the associated content panel\n /\n panelId: {\n type: String,\n required: true,\n },\n\n /\n Describes the tab\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n Controls the state of the tab\n * @values true, false\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, disables the tab\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Used to customize the tab element\n /\n tabClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n emits: [\n /\n Native button focus in event\n \n @event focus\n * @type {FocusEvent}\n /\n 'focus',\n\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n ~~data () {\n return {\n TAB_IMPORTANCE_MODIFIERS,\n };\n },\n\n~~ computed: {\n tabListeners () {\n return {\n click: event => {\n this.$emit('click', event);\n },\n\n focus: event => {\n this.setFocus(this.id);\n this.$emit('focus', event);\n },\n };\n },\n\n isSelected () {\n return this.groupContext.selected === this.panelId;\n },\n },\n\n mounted () {\n if (this.selected) {\n this.groupContext.selected = this.panelId;\n }\n },\n};\n</script>\n"],"mappings":"~~4RAiCA~~,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,QACN,WAAY,CACV,SAAA,EAAA,QACD,CAED,OAAQ,CAAC,eAAgB,WAAW,CAEpC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,QAAS,CACP,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,~~CACF~~,~~CAED~~,MAAO,~~CAOL~~,~~QAQA~~,~~QACD~~,~~CAED~~,~~MAAQ~~,~~CACN~~,MAAO,~~CACL~~,~~yBAAA~~,~~EAAA~~,~~yBACD~~,~~EAGH~~,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAO,GAAS,CACd,KAAK,MAAM,QAAS,EAAM,EAG5B,MAAO,GAAS,CACd,KAAK,SAAS,KAAK,GAAG,CACtB,KAAK,MAAM,QAAS,EAAM,EAE7B,EAGH,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,~~SAE9C~~,CAED,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,~~UAGvC~~,~~6GA1Ha~~,GAAA,EAAA,EAAA,YAAA,~~CApBT~~,GAAE,UAAY,EAAA,KACd,MAAK,~~WAAoC~~,EAAA,~~yBAAyB~~,~~UAAW,~~EAAA,WAAA,~~CAA2B~~,EAAA,~~UAOzG~~,KAAK,MACJ,gBAAa,GAAK,EAAA,aAClB,gBAAa,YAAc,EAAA,UAC3B,aAAY,EAAA,~~MACb~~,UAAQ,SACP,SAAU,EAAA,~~WAAU~~,IAAA,~~KACpB~~,~~SAAU~~,EAAA,~~aAAa~~,~~UAAY~~,EAAA,~~UAC5B~~,EAAA,QAAA,EAAA,EAAA,~~YACW~~,~~EAAb~~,~~aAAY~~,CAAA,CAAA,~~2BAGV~~,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"tab.cjs","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n <dt-button\n :id=\"`dt-tab-${id}`\"\n :class=\"[\n 'd-tablist__item',\n tabClass,\n { 'd-tablist__item--vertical': groupContext.orientation === 'vertical' },\n { 'd-btn--disabled': isDisabled },\n { 'd-tab--is-selected': !groupContext.outlined && groupContext.kind !== 'muted' && isSelected },\n ]\"\n :importance=\"buttonImportance\"\n :kind=\"buttonKind\"\n :active=\"buttonActive\"\n :size=\"buttonSize\"\n role=\"tab\"\n :aria-selected=\"`${isSelected}`\"\n :aria-controls=\"`dt-panel-${panelId}`\"\n :aria-label=\"label\"\n :aria-disabled=\"isDisabled ? 'true' : undefined\"\n :label-class=\"labelClass\"\n :leading-class=\"leadingClass\"\n :trailing-class=\"trailingClass\"\n data-qa=\"dt-tab\"\n :tabindex=\"isFocusTarget ? '0' : '-1'\"\n v-bind=\"$attrs\"\n v-on=\"tabListeners\"\n >\n <!-- @slot Icon displayed at the start (left in LTR) of the tab -->\n <template\n v-if=\"$slots.startIcon\"\n #startIcon=\"{ iconSize }\"\n >\n <slot\n name=\"startIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <!-- @slot @deprecated Use startIcon -->\n <template\n v-else-if=\"$slots.icon\"\n #startIcon=\"{ iconSize }\"\n >\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <!-- @slot Icon displayed at the end (right in LTR) of the tab -->\n <template\n v-if=\"$slots.endIcon\"\n #endIcon=\"{ iconSize }\"\n >\n <slot\n name=\"endIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"$slots.leading\"\n #leading\n >\n <slot name=\"leading\" />\n </template>\n <template\n v-if=\"$slots.trailing\"\n #trailing\n >\n <slot name=\"trailing\" />\n </template>\n <!-- @slot default slot, defaults contains dt-button -->\n <slot />\n </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '../button';\n\n/*\n Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtTab',\n components: {\n DtButton,\n },\n\n inject: ['groupContext', 'setFocus'],\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the tab\n /\n id: {\n type: String,\n required: true,\n },\n\n /\n Id of the associated content panel\n /\n panelId: {\n type: String,\n required: true,\n },\n\n /\n Describes the tab\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n Controls the state of the tab\n * @values true, false\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, disables the tab\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Used to customize the tab element\n /\n tabClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the leading container\n /\n leadingClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the trailing container\n /\n trailingClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n emits: [\n /\n Native button focus in event\n \n @event focus\n * @type {FocusEvent}\n /\n 'focus',\n\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n tabListeners () {\n return {\n click: event => {\n this.$emit('click', event);\n },\n\n focus: event => {\n this.setFocus(this.id);\n this.$emit('focus', event);\n },\n };\n },\n\n isDisabled () {\n return this.groupContext.disabled \|\| this.disabled;\n },\n\n buttonSize () {\n const size = this.groupContext.size;\n return size === 'default' ? undefined : size;\n },\n\n isSelected () {\n return this.groupContext.selected === this.panelId;\n },\n\n isFocusTarget () {\n const focusedId = this.groupContext.focusedTabId;\n return focusedId ? focusedId === this.id : this.isSelected;\n },\n\n buttonKind () {\n if (this.groupContext.outlined) {\n return this.groupContext.kind === 'muted' ? 'muted' : 'default';\n }\n if (this.groupContext.kind === 'muted') {\n return 'muted';\n }\n return this.isSelected ? 'default' : 'muted';\n },\n\n buttonImportance () {\n if (this.groupContext.outlined && this.isSelected) {\n return 'outlined';\n }\n return 'clear';\n },\n\n buttonActive () {\n if (this.groupContext.outlined) {\n return false;\n }\n if (this.groupContext.kind === 'muted') {\n return this.isSelected;\n }\n return false;\n },\n },\n\n mounted () {\n if (this.selected) {\n this.groupContext.selected = this.panelId;\n }\n },\n\n beforeUnmount () {\n if (this.groupContext.focusedTabId === this.id) {\n this.setFocus(null);\n }\n },\n\n methods: {\n },\n};\n</script>\n"],"mappings":"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"}