@dialpad/dialtone 9.129.0 → 9.129.2-beta.1
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.
- package/dist/tokens/doc.json +17119 -17119
- package/dist/vue2/lib/tab/tab-group.cjs +1 -1
- package/dist/vue2/lib/tab/tab-group.cjs.map +1 -1
- package/dist/vue2/lib/tab/tab-group.js +7 -4
- package/dist/vue2/lib/tab/tab-group.js.map +1 -1
- package/dist/vue2/localization/index.cjs +1 -1
- package/dist/vue2/localization/index.cjs.map +1 -1
- package/dist/vue2/localization/index.js +1 -1
- package/dist/vue2/localization/index.js.map +1 -1
- package/dist/vue3/lib/tab/tab-group.cjs +1 -1
- package/dist/vue3/lib/tab/tab-group.cjs.map +1 -1
- package/dist/vue3/lib/tab/tab-group.js +4 -1
- package/dist/vue3/lib/tab/tab-group.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r={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 i.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:i.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:i.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:i.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.$el.querySelectorAll(".d-tab")).map(t=>{var e,n;return{context:t,panelId:(e=t.getAttribute("aria-controls"))==null?void 0:e.replace("dt-panel-",""),tabId:(n=t.getAttribute("id"))==null?void 0:n.replace("dt-tab-",""),isSelected:t.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:n}=this.tabs[t];this.provideObj.selected=n,e.focus()},getFocusedTabIndex(){
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r={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 i.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:i.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:i.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:i.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.$el.querySelectorAll(".d-tab")).map(t=>{var e,n;return{context:t,panelId:(e=t.getAttribute("aria-controls"))==null?void 0:e.replace("dt-panel-",""),tabId:(n=t.getAttribute("id"))==null?void 0:n.replace("dt-tab-",""),isSelected:t.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:n}=this.tabs[t];this.provideObj.selected=n,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}}};var d=function(){var e=this,n=e._self._c;return n("div",{attrs:{"data-qa":"dt-tab-group"}},[n("div",e._b({class:["d-tablist",e.TAB_LIST_SIZE_MODIFIERS[e.size],{[e.TAB_LIST_KIND_MODIFIERS.inverted]:e.inverted,[e.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:e.borderless},e.tabListClass],attrs:{role:"tablist","aria-label":e.label},on:{keyup:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"left",37,s.key,["Left","ArrowLeft"])||"button"in s&&s.button!==0?null:e.tabLeft.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"right",39,s.key,["Right","ArrowRight"])||"button"in s&&s.button!==2?null:e.tabRight.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"enter",13,s.key,"Enter")?null:e.selectTab.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"space",32,s.key,[" ","Spacebar"])?null:e.selectTab.apply(null,arguments)}],click:e.selectTab,keydown:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"home",void 0,s.key,void 0)?null:e.onHomeButton.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"end",void 0,s.key,void 0)?null:e.onEndButton.apply(null,arguments)}]}},"div",e.tabListChildProps,!1),[e._t("tabs")],2),e._t("default")],2)},l=[],u=a.n(r,d,l);const o=u.exports;exports.default=o;
|
|
2
2
|
//# sourceMappingURL=tab-group.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-group.cjs","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 :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 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 beforeUpdate () {\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 return Array.from(this.$el.querySelectorAll('.d-tab'))\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
|
|
1
|
+
{"version":3,"file":"tab-group.cjs","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 :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 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 beforeUpdate () {\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 return Array.from(this.$el.querySelectorAll('.d-tab'))\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TAB_LIST_SIZES as i, TAB_LIST_SIZE_MODIFIERS as a, TAB_LIST_KIND_MODIFIERS as r, TAB_LIST_IMPORTANCE_MODIFIERS as d } from "./tabs-constants.js";
|
|
2
2
|
import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
|
|
3
|
-
const
|
|
3
|
+
const o = {
|
|
4
4
|
name: "DtTabGroup",
|
|
5
5
|
provide() {
|
|
6
6
|
return {
|
|
@@ -171,7 +171,10 @@ const u = {
|
|
|
171
171
|
this.provideObj.selected = n, e.focus();
|
|
172
172
|
},
|
|
173
173
|
getFocusedTabIndex() {
|
|
174
|
-
|
|
174
|
+
const t = this.tabs.findIndex(
|
|
175
|
+
(e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected
|
|
176
|
+
);
|
|
177
|
+
return t === -1 ? 0 : t;
|
|
175
178
|
},
|
|
176
179
|
onHomeButton() {
|
|
177
180
|
var t, e;
|
|
@@ -187,7 +190,7 @@ const u = {
|
|
|
187
190
|
}
|
|
188
191
|
}
|
|
189
192
|
};
|
|
190
|
-
var
|
|
193
|
+
var u = function() {
|
|
191
194
|
var e = this, n = e._self._c;
|
|
192
195
|
return n("div", { attrs: { "data-qa": "dt-tab-group" } }, [n("div", e._b({ class: [
|
|
193
196
|
"d-tablist",
|
|
@@ -211,8 +214,8 @@ var o = function() {
|
|
|
211
214
|
return !s.type.indexOf("key") && e._k(s.keyCode, "end", void 0, s.key, void 0) ? null : e.onEndButton.apply(null, arguments);
|
|
212
215
|
}] } }, "div", e.tabListChildProps, !1), [e._t("tabs")], 2), e._t("default")], 2);
|
|
213
216
|
}, c = [], b = /* @__PURE__ */ l(
|
|
214
|
-
u,
|
|
215
217
|
o,
|
|
218
|
+
u,
|
|
216
219
|
c
|
|
217
220
|
);
|
|
218
221
|
const p = b.exports;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-group.js","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 :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 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 beforeUpdate () {\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 return Array.from(this.$el.querySelectorAll('.d-tab'))\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 return this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tab-group.js","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 :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 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 beforeUpdate () {\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 return Array.from(this.$el.querySelectorAll('.d-tab'))\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@dialpad/i18n-vue2"),u=require("./en-US.cjs"),i=require("./zh-CN.cjs"),d=require("./nl-NL.cjs"),f=require("./fr-FR.cjs"),g=require("./de-DE.cjs"),N=require("./it-IT.cjs"),S=require("./ja-JP.cjs"),L=require("./pt-BR.cjs"),R=require("./ru-RU.cjs"),h=require("./es-LA.cjs"),e="dialtone",r={ENGLISH:"en-US",CHINESE:"zh-CN",DUTCH:"nl-NL",FRENCH:"fr-FR",GERMAN:"de-DE",ITALIAN:"it-IT",JAPANESE:"ja-JP",PORTUGUESE:"pt-BR",RUSSIAN:"ru-RU",SPANISH:"es-LA"},s="en-US";class l{constructor(t=null){if(typeof l.instance=="object")return l.instance;this._locale=t||l.getPreferredLocale();const o=new a.RawBundleSource({resources:a.RawBundleSource.builtResources([["en-US",e,u.default],["zh-CN",e,i.default],["nl-NL",e,d.default],["fr-FR",e,f.default],["de-DE",e,g.default],["it-IT",e,N.default],["ja-JP",e,S.default],["pt-BR",e,L.default],["ru-RU",e,R.default],["es-LA",e,h.default]])});return new a.LocaleManager({bundleSource:o,allowedLocales:Object.values(r),fallbackLocale:s,preferredLocale:this._locale,namespaces:[e]}).install(e),window.onstorage=c=>{c.key==="user-locale"&&(this.currentLocale=c.newValue)},l.instance=this,this}static getPreferredLocale(){const t=localStorage.getItem("user-locale"),o=Object.values(r).find(n=>n.startsWith(navigator.language.slice(0,2)));return t||o||s}static getAllowedLocales(){return r}$t(...t){return a.useI18N(e).$t(...t)}$ta(...t){return a.useI18N(e).$ta(...t)}get currentLocale(){return this._locale}set currentLocale(t){if(t!==this._locale){if(!Object.values(r).includes(t))throw new Error(`Locale ${t} is not allowed, please use one of the following: ${Object.values(r).join(", ")}`);this._locale=t,a.useI18N(e).setI18N({preferredLocale:t},e)}}}exports.DialtoneLocalization=l;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@dialpad/i18n-vue2"),u=require("./en-US.cjs"),i=require("./zh-CN.cjs"),d=require("./nl-NL.cjs"),f=require("./fr-FR.cjs"),g=require("./de-DE.cjs"),N=require("./it-IT.cjs"),S=require("./ja-JP.cjs"),L=require("./pt-BR.cjs"),R=require("./ru-RU.cjs"),h=require("./es-LA.cjs"),e="dialtone",r={ENGLISH:"en-US",CHINESE:"zh-CN",DUTCH:"nl-NL",FRENCH:"fr-FR",GERMAN:"de-DE",ITALIAN:"it-IT",JAPANESE:"ja-JP",PORTUGUESE:"pt-BR",RUSSIAN:"ru-RU",SPANISH:"es-LA"},s="en-US";class l{constructor(t=null){if(typeof l.instance=="object")return l.instance;this._locale=t||l.getPreferredLocale();const o=new a.RawBundleSource({resources:a.RawBundleSource.builtResources([["en-US",e,u.default],["zh-CN",e,i.default],["nl-NL",e,d.default],["fr-FR",e,f.default],["de-DE",e,g.default],["it-IT",e,N.default],["ja-JP",e,S.default],["pt-BR",e,L.default],["ru-RU",e,R.default],["es-LA",e,h.default]])});return new a.LocaleManager({bundleSource:o,allowedLocales:Object.values(r),fallbackLocale:s,preferredLocale:this._locale,namespaces:[e]}).install(e),window.onstorage=c=>{c.key==="user-locale"&&(this.currentLocale=c.newValue)},l.instance=this,this}static getPreferredLocale(){const t=localStorage==null?void 0:localStorage.getItem("user-locale"),o=Object.values(r).find(n=>n.startsWith(navigator.language.slice(0,2)));return t||o||s}static getAllowedLocales(){return r}$t(...t){return a.useI18N(e).$t(...t)}$ta(...t){return a.useI18N(e).$ta(...t)}get currentLocale(){return this._locale}set currentLocale(t){if(t!==this._locale){if(!Object.values(r).includes(t))throw new Error(`Locale ${t} is not allowed, please use one of the following: ${Object.values(r).join(", ")}`);this._locale=t,a.useI18N(e).setI18N({preferredLocale:t},e)}}}exports.DialtoneLocalization=l;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../localization/index.js"],"sourcesContent":["import { LocaleManager, RawBundleSource, useI18N } from '@dialpad/i18n-vue2';\n\nimport enUS from './en-US.ftl?raw';\nimport zhCN from './zh-CN.ftl?raw';\nimport nlNL from './nl-NL.ftl?raw';\nimport frFR from './fr-FR.ftl?raw';\nimport deDE from './de-DE.ftl?raw';\nimport itIT from './it-IT.ftl?raw';\nimport jaJP from './ja-JP.ftl?raw';\nimport ptBR from './pt-BR.ftl?raw';\nimport ruRU from './ru-RU.ftl?raw';\nimport esLA from './es-LA.ftl?raw';\n\nconst dialtoneNamespace = 'dialtone';\nconst allowedLocales = {\n ENGLISH: 'en-US',\n CHINESE: 'zh-CN',\n DUTCH: 'nl-NL',\n FRENCH: 'fr-FR',\n GERMAN: 'de-DE',\n ITALIAN: 'it-IT',\n JAPANESE: 'ja-JP',\n PORTUGUESE: 'pt-BR',\n RUSSIAN: 'ru-RU',\n SPANISH: 'es-LA',\n};\nconst fallbackLocale = 'en-US';\n\nexport class DialtoneLocalization {\n constructor (locale = null) {\n if (typeof DialtoneLocalization.instance === 'object') {\n return DialtoneLocalization.instance;\n }\n\n this._locale = locale || DialtoneLocalization.getPreferredLocale();\n\n const bundleSource = new RawBundleSource({\n resources: RawBundleSource.builtResources([\n ['en-US', dialtoneNamespace, enUS],\n ['zh-CN', dialtoneNamespace, zhCN],\n ['nl-NL', dialtoneNamespace, nlNL],\n ['fr-FR', dialtoneNamespace, frFR],\n ['de-DE', dialtoneNamespace, deDE],\n ['it-IT', dialtoneNamespace, itIT],\n ['ja-JP', dialtoneNamespace, jaJP],\n ['pt-BR', dialtoneNamespace, ptBR],\n ['ru-RU', dialtoneNamespace, ruRU],\n ['es-LA', dialtoneNamespace, esLA],\n ]),\n });\n\n const localeManager = new LocaleManager({\n bundleSource,\n allowedLocales: Object.values(allowedLocales),\n fallbackLocale,\n preferredLocale: this._locale,\n namespaces: [dialtoneNamespace],\n });\n\n localeManager.install(dialtoneNamespace);\n\n /**\n * @description\n * When the browser storage changes, update the current locale\n * @param event\n */\n window.onstorage = (event) => {\n if (event.key === 'user-locale') {\n this.currentLocale = event.newValue;\n }\n };\n\n DialtoneLocalization.instance = this;\n return this;\n }\n\n static getPreferredLocale () {\n const localStorageLanguage = localStorage
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../localization/index.js"],"sourcesContent":["import { LocaleManager, RawBundleSource, useI18N } from '@dialpad/i18n-vue2';\n\nimport enUS from './en-US.ftl?raw';\nimport zhCN from './zh-CN.ftl?raw';\nimport nlNL from './nl-NL.ftl?raw';\nimport frFR from './fr-FR.ftl?raw';\nimport deDE from './de-DE.ftl?raw';\nimport itIT from './it-IT.ftl?raw';\nimport jaJP from './ja-JP.ftl?raw';\nimport ptBR from './pt-BR.ftl?raw';\nimport ruRU from './ru-RU.ftl?raw';\nimport esLA from './es-LA.ftl?raw';\n\nconst dialtoneNamespace = 'dialtone';\nconst allowedLocales = {\n ENGLISH: 'en-US',\n CHINESE: 'zh-CN',\n DUTCH: 'nl-NL',\n FRENCH: 'fr-FR',\n GERMAN: 'de-DE',\n ITALIAN: 'it-IT',\n JAPANESE: 'ja-JP',\n PORTUGUESE: 'pt-BR',\n RUSSIAN: 'ru-RU',\n SPANISH: 'es-LA',\n};\nconst fallbackLocale = 'en-US';\n\nexport class DialtoneLocalization {\n constructor (locale = null) {\n if (typeof DialtoneLocalization.instance === 'object') {\n return DialtoneLocalization.instance;\n }\n\n this._locale = locale || DialtoneLocalization.getPreferredLocale();\n\n const bundleSource = new RawBundleSource({\n resources: RawBundleSource.builtResources([\n ['en-US', dialtoneNamespace, enUS],\n ['zh-CN', dialtoneNamespace, zhCN],\n ['nl-NL', dialtoneNamespace, nlNL],\n ['fr-FR', dialtoneNamespace, frFR],\n ['de-DE', dialtoneNamespace, deDE],\n ['it-IT', dialtoneNamespace, itIT],\n ['ja-JP', dialtoneNamespace, jaJP],\n ['pt-BR', dialtoneNamespace, ptBR],\n ['ru-RU', dialtoneNamespace, ruRU],\n ['es-LA', dialtoneNamespace, esLA],\n ]),\n });\n\n const localeManager = new LocaleManager({\n bundleSource,\n allowedLocales: Object.values(allowedLocales),\n fallbackLocale,\n preferredLocale: this._locale,\n namespaces: [dialtoneNamespace],\n });\n\n localeManager.install(dialtoneNamespace);\n\n /**\n * @description\n * When the browser storage changes, update the current locale\n * @param event\n */\n window.onstorage = (event) => {\n if (event.key === 'user-locale') {\n this.currentLocale = event.newValue;\n }\n };\n\n DialtoneLocalization.instance = this;\n return this;\n }\n\n static getPreferredLocale () {\n const localStorageLanguage = localStorage?.getItem('user-locale');\n\n // Get the first two letters of the navigator language and check if it's in the allowed locales\n const navigatorLanguage = Object.values(allowedLocales)\n .find(locale => locale.startsWith(navigator.language.slice(0, 2)));\n\n return localStorageLanguage || navigatorLanguage || fallbackLocale;\n }\n\n static getAllowedLocales () {\n return allowedLocales;\n }\n\n $t (...args) {\n return useI18N(dialtoneNamespace).$t(...args);\n }\n\n $ta (...args) {\n return useI18N(dialtoneNamespace).$ta(...args);\n }\n\n get currentLocale () {\n return this._locale;\n }\n\n set currentLocale (newLocale) {\n if (newLocale === this._locale) return;\n if (!Object.values(allowedLocales).includes(newLocale)) {\n throw new Error(`Locale ${newLocale} is not allowed, please use one of the following: ${Object.values(allowedLocales).join(', ')}`);\n }\n\n this._locale = newLocale;\n useI18N(dialtoneNamespace).setI18N({ preferredLocale: newLocale }, dialtoneNamespace);\n }\n}\n"],"names":["dialtoneNamespace","allowedLocales","fallbackLocale","DialtoneLocalization","locale","bundleSource","RawBundleSource","enUS","zhCN","nlNL","frFR","deDE","itIT","jaJP","ptBR","ruRU","esLA","LocaleManager","event","localStorageLanguage","navigatorLanguage","args","useI18N","newLocale"],"mappings":"gXAaMA,EAAoB,WACpBC,EAAiB,CACrB,QAAS,QACT,QAAS,QACT,MAAO,QACP,OAAQ,QACR,OAAQ,QACR,QAAS,QACT,SAAU,QACV,WAAY,QACZ,QAAS,QACT,QAAS,OACX,EACMC,EAAiB,QAEhB,MAAMC,CAAqB,CAChC,YAAaC,EAAS,KAAM,CAC1B,GAAI,OAAOD,EAAqB,UAAa,SAC3C,OAAOA,EAAqB,SAG9B,KAAK,QAAUC,GAAUD,EAAqB,mBAAkB,EAEhE,MAAME,EAAe,IAAIC,kBAAgB,CACvC,UAAWA,EAAe,gBAAC,eAAe,CACxC,CAAC,QAASN,EAAmBO,SAAI,EACjC,CAAC,QAASP,EAAmBQ,SAAI,EACjC,CAAC,QAASR,EAAmBS,SAAI,EACjC,CAAC,QAAST,EAAmBU,SAAI,EACjC,CAAC,QAASV,EAAmBW,SAAI,EACjC,CAAC,QAASX,EAAmBY,SAAI,EACjC,CAAC,QAASZ,EAAmBa,SAAI,EACjC,CAAC,QAASb,EAAmBc,SAAI,EACjC,CAAC,QAASd,EAAmBe,SAAI,EACjC,CAAC,QAASf,EAAmBgB,SAAI,CACzC,CAAO,CACP,CAAK,EAUD,OARsB,IAAIC,gBAAc,CACtC,aAAAZ,EACA,eAAgB,OAAO,OAAOJ,CAAc,EAC5C,eAAAC,EACA,gBAAiB,KAAK,QACtB,WAAY,CAACF,CAAiB,CACpC,CAAK,EAEa,QAAQA,CAAiB,EAOvC,OAAO,UAAakB,GAAU,CACxBA,EAAM,MAAQ,gBAChB,KAAK,cAAgBA,EAAM,SAEnC,EAEIf,EAAqB,SAAW,KACzB,IACR,CAED,OAAO,oBAAsB,CAC3B,MAAMgB,EAAuB,uCAAc,QAAQ,eAG7CC,EAAoB,OAAO,OAAOnB,CAAc,EACnD,KAAKG,GAAUA,EAAO,WAAW,UAAU,SAAS,MAAM,EAAG,CAAC,CAAC,CAAC,EAEnE,OAAOe,GAAwBC,GAAqBlB,CACrD,CAED,OAAO,mBAAqB,CAC1B,OAAOD,CACR,CAED,MAAOoB,EAAM,CACX,OAAOC,EAAO,QAACtB,CAAiB,EAAE,GAAG,GAAGqB,CAAI,CAC7C,CAED,OAAQA,EAAM,CACZ,OAAOC,EAAO,QAACtB,CAAiB,EAAE,IAAI,GAAGqB,CAAI,CAC9C,CAED,IAAI,eAAiB,CACnB,OAAO,KAAK,OACb,CAED,IAAI,cAAeE,EAAW,CAC5B,GAAIA,IAAc,KAAK,QACvB,IAAI,CAAC,OAAO,OAAOtB,CAAc,EAAE,SAASsB,CAAS,EACnD,MAAM,IAAI,MAAM,UAAUA,CAAS,qDAAqD,OAAO,OAAOtB,CAAc,EAAE,KAAK,IAAI,CAAC,EAAE,EAGpI,KAAK,QAAUsB,EACfD,EAAO,QAACtB,CAAiB,EAAE,QAAQ,CAAE,gBAAiBuB,CAAS,EAAIvB,CAAiB,EACrF,CACH"}
|
|
@@ -51,7 +51,7 @@ class o {
|
|
|
51
51
|
}, o.instance = this, this;
|
|
52
52
|
}
|
|
53
53
|
static getPreferredLocale() {
|
|
54
|
-
const r = localStorage.getItem("user-locale"), a = Object.values(t).find((s) => s.startsWith(navigator.language.slice(0, 2)));
|
|
54
|
+
const r = localStorage == null ? void 0 : localStorage.getItem("user-locale"), a = Object.values(t).find((s) => s.startsWith(navigator.language.slice(0, 2)));
|
|
55
55
|
return r || a || i;
|
|
56
56
|
}
|
|
57
57
|
static getAllowedLocales() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../localization/index.js"],"sourcesContent":["import { LocaleManager, RawBundleSource, useI18N } from '@dialpad/i18n-vue2';\n\nimport enUS from './en-US.ftl?raw';\nimport zhCN from './zh-CN.ftl?raw';\nimport nlNL from './nl-NL.ftl?raw';\nimport frFR from './fr-FR.ftl?raw';\nimport deDE from './de-DE.ftl?raw';\nimport itIT from './it-IT.ftl?raw';\nimport jaJP from './ja-JP.ftl?raw';\nimport ptBR from './pt-BR.ftl?raw';\nimport ruRU from './ru-RU.ftl?raw';\nimport esLA from './es-LA.ftl?raw';\n\nconst dialtoneNamespace = 'dialtone';\nconst allowedLocales = {\n ENGLISH: 'en-US',\n CHINESE: 'zh-CN',\n DUTCH: 'nl-NL',\n FRENCH: 'fr-FR',\n GERMAN: 'de-DE',\n ITALIAN: 'it-IT',\n JAPANESE: 'ja-JP',\n PORTUGUESE: 'pt-BR',\n RUSSIAN: 'ru-RU',\n SPANISH: 'es-LA',\n};\nconst fallbackLocale = 'en-US';\n\nexport class DialtoneLocalization {\n constructor (locale = null) {\n if (typeof DialtoneLocalization.instance === 'object') {\n return DialtoneLocalization.instance;\n }\n\n this._locale = locale || DialtoneLocalization.getPreferredLocale();\n\n const bundleSource = new RawBundleSource({\n resources: RawBundleSource.builtResources([\n ['en-US', dialtoneNamespace, enUS],\n ['zh-CN', dialtoneNamespace, zhCN],\n ['nl-NL', dialtoneNamespace, nlNL],\n ['fr-FR', dialtoneNamespace, frFR],\n ['de-DE', dialtoneNamespace, deDE],\n ['it-IT', dialtoneNamespace, itIT],\n ['ja-JP', dialtoneNamespace, jaJP],\n ['pt-BR', dialtoneNamespace, ptBR],\n ['ru-RU', dialtoneNamespace, ruRU],\n ['es-LA', dialtoneNamespace, esLA],\n ]),\n });\n\n const localeManager = new LocaleManager({\n bundleSource,\n allowedLocales: Object.values(allowedLocales),\n fallbackLocale,\n preferredLocale: this._locale,\n namespaces: [dialtoneNamespace],\n });\n\n localeManager.install(dialtoneNamespace);\n\n /**\n * @description\n * When the browser storage changes, update the current locale\n * @param event\n */\n window.onstorage = (event) => {\n if (event.key === 'user-locale') {\n this.currentLocale = event.newValue;\n }\n };\n\n DialtoneLocalization.instance = this;\n return this;\n }\n\n static getPreferredLocale () {\n const localStorageLanguage = localStorage
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../localization/index.js"],"sourcesContent":["import { LocaleManager, RawBundleSource, useI18N } from '@dialpad/i18n-vue2';\n\nimport enUS from './en-US.ftl?raw';\nimport zhCN from './zh-CN.ftl?raw';\nimport nlNL from './nl-NL.ftl?raw';\nimport frFR from './fr-FR.ftl?raw';\nimport deDE from './de-DE.ftl?raw';\nimport itIT from './it-IT.ftl?raw';\nimport jaJP from './ja-JP.ftl?raw';\nimport ptBR from './pt-BR.ftl?raw';\nimport ruRU from './ru-RU.ftl?raw';\nimport esLA from './es-LA.ftl?raw';\n\nconst dialtoneNamespace = 'dialtone';\nconst allowedLocales = {\n ENGLISH: 'en-US',\n CHINESE: 'zh-CN',\n DUTCH: 'nl-NL',\n FRENCH: 'fr-FR',\n GERMAN: 'de-DE',\n ITALIAN: 'it-IT',\n JAPANESE: 'ja-JP',\n PORTUGUESE: 'pt-BR',\n RUSSIAN: 'ru-RU',\n SPANISH: 'es-LA',\n};\nconst fallbackLocale = 'en-US';\n\nexport class DialtoneLocalization {\n constructor (locale = null) {\n if (typeof DialtoneLocalization.instance === 'object') {\n return DialtoneLocalization.instance;\n }\n\n this._locale = locale || DialtoneLocalization.getPreferredLocale();\n\n const bundleSource = new RawBundleSource({\n resources: RawBundleSource.builtResources([\n ['en-US', dialtoneNamespace, enUS],\n ['zh-CN', dialtoneNamespace, zhCN],\n ['nl-NL', dialtoneNamespace, nlNL],\n ['fr-FR', dialtoneNamespace, frFR],\n ['de-DE', dialtoneNamespace, deDE],\n ['it-IT', dialtoneNamespace, itIT],\n ['ja-JP', dialtoneNamespace, jaJP],\n ['pt-BR', dialtoneNamespace, ptBR],\n ['ru-RU', dialtoneNamespace, ruRU],\n ['es-LA', dialtoneNamespace, esLA],\n ]),\n });\n\n const localeManager = new LocaleManager({\n bundleSource,\n allowedLocales: Object.values(allowedLocales),\n fallbackLocale,\n preferredLocale: this._locale,\n namespaces: [dialtoneNamespace],\n });\n\n localeManager.install(dialtoneNamespace);\n\n /**\n * @description\n * When the browser storage changes, update the current locale\n * @param event\n */\n window.onstorage = (event) => {\n if (event.key === 'user-locale') {\n this.currentLocale = event.newValue;\n }\n };\n\n DialtoneLocalization.instance = this;\n return this;\n }\n\n static getPreferredLocale () {\n const localStorageLanguage = localStorage?.getItem('user-locale');\n\n // Get the first two letters of the navigator language and check if it's in the allowed locales\n const navigatorLanguage = Object.values(allowedLocales)\n .find(locale => locale.startsWith(navigator.language.slice(0, 2)));\n\n return localStorageLanguage || navigatorLanguage || fallbackLocale;\n }\n\n static getAllowedLocales () {\n return allowedLocales;\n }\n\n $t (...args) {\n return useI18N(dialtoneNamespace).$t(...args);\n }\n\n $ta (...args) {\n return useI18N(dialtoneNamespace).$ta(...args);\n }\n\n get currentLocale () {\n return this._locale;\n }\n\n set currentLocale (newLocale) {\n if (newLocale === this._locale) return;\n if (!Object.values(allowedLocales).includes(newLocale)) {\n throw new Error(`Locale ${newLocale} is not allowed, please use one of the following: ${Object.values(allowedLocales).join(', ')}`);\n }\n\n this._locale = newLocale;\n useI18N(dialtoneNamespace).setI18N({ preferredLocale: newLocale }, dialtoneNamespace);\n }\n}\n"],"names":["dialtoneNamespace","allowedLocales","fallbackLocale","DialtoneLocalization","locale","bundleSource","RawBundleSource","enUS","zhCN","nlNL","frFR","deDE","itIT","jaJP","ptBR","ruRU","esLA","LocaleManager","event","localStorageLanguage","navigatorLanguage","args","useI18N","newLocale"],"mappings":";;;;;;;;;;;AAaA,MAAMA,IAAoB,YACpBC,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AACX,GACMC,IAAiB;AAEhB,MAAMC,EAAqB;AAAA,EAChC,YAAaC,IAAS,MAAM;AAC1B,QAAI,OAAOD,EAAqB,YAAa;AAC3C,aAAOA,EAAqB;AAG9B,SAAK,UAAUC,KAAUD,EAAqB,mBAAkB;AAEhE,UAAME,IAAe,IAAIC,EAAgB;AAAA,MACvC,WAAWA,EAAgB,eAAe;AAAA,QACxC,CAAC,SAASN,GAAmBO,CAAI;AAAA,QACjC,CAAC,SAASP,GAAmBQ,CAAI;AAAA,QACjC,CAAC,SAASR,GAAmBS,CAAI;AAAA,QACjC,CAAC,SAAST,GAAmBU,CAAI;AAAA,QACjC,CAAC,SAASV,GAAmBW,CAAI;AAAA,QACjC,CAAC,SAASX,GAAmBY,CAAI;AAAA,QACjC,CAAC,SAASZ,GAAmBa,CAAI;AAAA,QACjC,CAAC,SAASb,GAAmBc,CAAI;AAAA,QACjC,CAAC,SAASd,GAAmBe,CAAI;AAAA,QACjC,CAAC,SAASf,GAAmBgB,CAAI;AAAA,MACzC,CAAO;AAAA,IACP,CAAK;AAUD,WARsB,IAAIC,EAAc;AAAA,MACtC,cAAAZ;AAAA,MACA,gBAAgB,OAAO,OAAOJ,CAAc;AAAA,MAC5C,gBAAAC;AAAA,MACA,iBAAiB,KAAK;AAAA,MACtB,YAAY,CAACF,CAAiB;AAAA,IACpC,CAAK,EAEa,QAAQA,CAAiB,GAOvC,OAAO,YAAY,CAACkB,MAAU;AAC5B,MAAIA,EAAM,QAAQ,kBAChB,KAAK,gBAAgBA,EAAM;AAAA,IAEnC,GAEIf,EAAqB,WAAW,MACzB;AAAA,EACR;AAAA,EAED,OAAO,qBAAsB;AAC3B,UAAMgB,IAAuB,6CAAc,QAAQ,gBAG7CC,IAAoB,OAAO,OAAOnB,CAAc,EACnD,KAAK,CAAAG,MAAUA,EAAO,WAAW,UAAU,SAAS,MAAM,GAAG,CAAC,CAAC,CAAC;AAEnE,WAAOe,KAAwBC,KAAqBlB;AAAA,EACrD;AAAA,EAED,OAAO,oBAAqB;AAC1B,WAAOD;AAAA,EACR;AAAA,EAED,MAAOoB,GAAM;AACX,WAAOC,EAAQtB,CAAiB,EAAE,GAAG,GAAGqB,CAAI;AAAA,EAC7C;AAAA,EAED,OAAQA,GAAM;AACZ,WAAOC,EAAQtB,CAAiB,EAAE,IAAI,GAAGqB,CAAI;AAAA,EAC9C;AAAA,EAED,IAAI,gBAAiB;AACnB,WAAO,KAAK;AAAA,EACb;AAAA,EAED,IAAI,cAAeE,GAAW;AAC5B,QAAIA,MAAc,KAAK,SACvB;AAAA,UAAI,CAAC,OAAO,OAAOtB,CAAc,EAAE,SAASsB,CAAS;AACnD,cAAM,IAAI,MAAM,UAAUA,CAAS,qDAAqD,OAAO,OAAOtB,CAAc,EAAE,KAAK,IAAI,CAAC,EAAE;AAGpI,WAAK,UAAUsB,GACfD,EAAQtB,CAAiB,EAAE,QAAQ,EAAE,iBAAiBuB,EAAS,GAAIvB,CAAiB;AAAA;AAAA,EACrF;AACH;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./tabs-constants.cjs"),
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=tab-group.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-group.cjs","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 beforeUpdate () {\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 return this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tab-group.cjs","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 beforeUpdate () {\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}
|
|
@@ -173,7 +173,10 @@ const m = {
|
|
|
173
173
|
this.provideObj.selected = d, e.focus();
|
|
174
174
|
},
|
|
175
175
|
getFocusedTabIndex() {
|
|
176
|
-
|
|
176
|
+
const t = this.tabs.findIndex(
|
|
177
|
+
(e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected
|
|
178
|
+
);
|
|
179
|
+
return t === -1 ? 0 : t;
|
|
177
180
|
},
|
|
178
181
|
onHomeButton() {
|
|
179
182
|
var t, e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-group.js","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 beforeUpdate () {\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 return this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tab-group.js","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 beforeUpdate () {\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"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}
|