npm - @dialpad/dialtone-vue - Versions diffs - 3.210.0 → 3.211.0-next.2 - Mend

@dialpad/dialtone-vue 3.210.0 → 3.211.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 (558) hide show

package/dist/lib/split-button/split-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-button.js","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n <span\n data-qa=\"dt-split-button\"\n :class=\"[rootClass, 'd-split-btn']\"\n :style=\"{ width }\"\n >\n <split-button-alpha\n v-bind=\"alphaButtonProps\"\n ref=\"alphaButton\"\n @click=\"$emit('alpha-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Alpha (left) button icon slot -->\n <slot\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <!-- @slot Default content slot -->\n <slot name=\"default\" />\n </split-button-alpha>\n <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n <slot name=\"omega\">\n <dt-dropdown\n v-if=\"$slots.dropdownList\"\n :placement=\"dropdownPlacement\"\n @click=\"isDropdownOpen = true\"\n @opened=\"open => isDropdownOpen = open\"\n >\n <template #anchor=\"attrs\">\n <split-button-omega\n v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n :active=\"isDropdownOpen\"\n @click=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </template>\n <template #list=\"{ close }\">\n <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n <slot\n name=\"dropdownList\"\n :close=\"close\"\n />\n </template>\n </dt-dropdown>\n\n <split-button-omega\n v-else\n v-bind=\"omegaButtonProps\"\n @click=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </slot>\n </span>\n</template>\n\n<script>\nimport {\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_SIZE_MODIFIERS,\n ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtSplitButton',\n\n components: {\n SplitButtonOmega,\n DtDropdown,\n SplitButtonAlpha,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Determines whether the alpha button should have active styling\n * @values true, false\n /\n alphaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the alpha button\n /\n alphaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n The position of the icon slot within the alpha button.\n * @values left, right, top, bottom\n /\n alphaIconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n Used to customize the alpha label container\n /\n alphaLabelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n HTML button disabled attribute for alpha button only\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n alphaDisabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the alpha button should display a loading animation or not.\n * @values true, false\n /\n alphaLoading: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown in tooltip when you hover the alpha button,\n * required if no content is passed to default slot\n /\n alphaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute for both buttons.\n * Use alphaDisabled or omegaDisabled to disable buttons individually.\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n The direction the dropdown displays relative to the anchor.\n * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n /\n dropdownPlacement: {\n type: String,\n default: 'bottom-end',\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether the omega button should have active styling\n * @values true, false\n /\n omegaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the omega button\n /\n omegaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n HTML button disabled attribute for omega button only\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n omegaDisabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Element ID, useful in case you need to reference the button\n * as an external anchor for popover.\n /\n omegaId: {\n type: String,\n default: undefined,\n },\n\n /\n Text shown in tooltip when you hover the omega button,\n * required as it is an icon only button\n /\n omegaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the root element.\n * Can accept all of: String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n /\n rootClass: {\n type: [String, Object, Array],\n default: '',\n },\n },\n\n emits: [\n /\n Native alpha button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'alpha-clicked',\n\n /\n Native omega button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'omega-clicked',\n ],\n\n data () {\n return {\n isDropdownOpen: false,\n };\n },\n\n computed: {\n alphaButtonProps () {\n return {\n active: this.alphaActive,\n ariaLabel: this.alphaAriaLabel,\n assertiveOnFocus: this.assertiveOnFocus,\n disabled: this.disabled \|\| this.alphaDisabled,\n iconPosition: this.alphaIconPosition,\n labelClass: this.alphaLabelClass,\n loading: this.alphaLoading,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.alphaTooltipText,\n class: this.$attrs.class,\n style: this.$attrs.style,\n };\n },\n\n omegaButtonProps () {\n return {\n id: this.omegaId,\n active: this.omegaActive,\n ariaLabel: this.omegaAriaLabel,\n disabled: this.disabled \|\| this.omegaDisabled,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.omegaTooltipText,\n class: this.$attrs.class,\n style: this.$attrs.style,\n };\n },\n },\n\n created () {\n this.validateProps();\n },\n\n updated () {\n this.validateProps();\n },\n\n mounted () {\n warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n },\n\n methods: {\n validateProps () {\n this.validateAlphaButtonProps();\n this.validateOmegaButtonProps();\n },\n\n validateAlphaButtonProps () {\n if (hasSlotContent(this.$slots.default)) return;\n\n if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n }\n },\n\n validateOmegaButtonProps () {\n if (hasSlotContent(this.$slots.omega)) return;\n\n if (!this.omegaTooltipText) {\n console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close"],"mappings":"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"}
1	+ {"version":3,"file":"split-button.js","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n <span\n data-qa=\"dt-split-button\"\n :class=\"[rootClass, 'd-split-btn']\"\n :style=\"{ width }\"\n >\n <split-button-start\n v-bind=\"startButtonProps\"\n ref=\"startButton\"\n @click=\"onStartClick\"\n >\n <!-- Dual-icon path: when startEndIcon is provided, use DtButton's startIcon/endIcon -->\n <template\n v-if=\"$slots.startEndIcon\"\n #startIcon=\"{ size: iconSize }\"\n >\n <!-- @slot Start (left) button icon slot -->\n <slot\n v-if=\"$slots.startIcon\"\n name=\"startIcon\"\n :size=\"iconSize\"\n />\n <!-- @slot @deprecated Use startIcon -->\n <slot\n v-else\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"$slots.startEndIcon\"\n #endIcon=\"{ size: iconSize }\"\n >\n <!-- @slot End-positioned icon within the start button (enables dual icons on the start button) -->\n <slot\n name=\"startEndIcon\"\n :size=\"iconSize\"\n />\n </template>\n <!-- Legacy single-icon path: uses DtButton's icon slot with iconPosition -->\n <template\n v-if=\"!$slots.startEndIcon\"\n #icon=\"{ size: iconSize }\"\n >\n <!-- @slot Start (left) button icon slot -->\n <slot\n v-if=\"$slots.startIcon\"\n name=\"startIcon\"\n :size=\"iconSize\"\n />\n <!-- @slot @deprecated Use startIcon -->\n <slot\n v-else\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"$slots.leading\"\n #leading\n >\n <!-- @slot Leading slot, forwarded to the alpha button's leading slot -->\n <slot name=\"leading\" />\n </template>\n <template\n v-if=\"$slots.trailing\"\n #trailing\n >\n <!-- @slot Trailing slot, forwarded to the alpha button's trailing slot -->\n <slot name=\"trailing\" />\n </template>\n <!-- @slot Default content slot -->\n <slot name=\"default\" />\n </split-button-start>\n <!-- @slot End (right) content slot, overrides end button styling and functionality completely -->\n <template v-if=\"$slots.end\">\n <slot name=\"end\" />\n </template>\n <!-- @slot @deprecated Use end -->\n <template v-else-if=\"$slots.omega\">\n <slot name=\"omega\" />\n </template>\n <template v-else>\n <dt-dropdown\n v-if=\"$slots.dropdownList\"\n :placement=\"dropdownPlacement\"\n @click=\"isDropdownOpen = true\"\n @opened=\"open => isDropdownOpen = open\"\n >\n <template #anchor=\"attrs\">\n <split-button-end\n v-bind=\"{ ...attrs, ...endButtonProps }\"\n :active=\"isDropdownOpen\"\n @click=\"onEndClick\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot End (right) button icon slot -->\n <slot\n v-if=\"$slots.endIcon\"\n name=\"endIcon\"\n :size=\"iconSize\"\n />\n <!-- @slot @deprecated Use endIcon -->\n <slot\n v-else\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-end>\n </template>\n <template #list=\"{ close }\">\n <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n <slot\n name=\"dropdownList\"\n :close=\"close\"\n />\n </template>\n </dt-dropdown>\n\n <split-button-end\n v-else\n v-bind=\"endButtonProps\"\n @click=\"onEndClick\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot End (right) button icon slot -->\n <slot\n v-if=\"$slots.endIcon\"\n name=\"endIcon\"\n :size=\"iconSize\"\n />\n <!-- @slot @deprecated Use endIcon -->\n <slot\n v-else\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-end>\n </template>\n </span>\n</template>\n\n<script>\nimport {\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_SIZE_MODIFIERS,\n ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonStart from './split_button-start.vue';\nimport SplitButtonEnd from './split_button-end.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtSplitButton',\n\n components: {\n SplitButtonEnd,\n DtDropdown,\n SplitButtonStart,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Determines whether the start button should have active styling\n * @values true, false\n /\n startActive: {\n type: Boolean,\n default: false,\n },\n\n /\n @deprecated Use startActive\n * @values true, false\n /\n alphaActive: {\n type: Boolean,\n default: null,\n },\n\n /\n Descriptive label for the start button\n /\n startAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n @deprecated Use startAriaLabel\n /\n alphaAriaLabel: {\n type: String,\n default: undefined,\n },\n\n /\n The position of the icon slot within the start button.\n * @values start, end, blockStart, blockEnd, left, right, top, bottom\n /\n startIconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n @deprecated Use startIconPosition\n * @values start, end, blockStart, blockEnd, left, right, top, bottom\n /\n alphaIconPosition: {\n type: String,\n default: undefined,\n validator: (position) => position === undefined \|\| Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n Used to customize the start label container\n /\n startLabelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the start button leading container\n /\n startLeadingClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n @deprecated Use startLeadingClass\n /\n alphaLeadingClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /\n Used to customize the start button trailing container\n /\n startTrailingClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n @deprecated Use startTrailingClass\n /\n alphaTrailingClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /\n @deprecated Use startLabelClass\n /\n alphaLabelClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /\n HTML button disabled attribute for start button only\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n startDisabled: {\n type: Boolean,\n default: false,\n },\n\n /\n @deprecated Use startDisabled\n * @values true, false\n /\n alphaDisabled: {\n type: Boolean,\n default: null,\n },\n\n /\n Whether the start button should display a loading animation or not.\n * @values true, false\n /\n startLoading: {\n type: Boolean,\n default: false,\n },\n\n /\n @deprecated Use startLoading\n * @values true, false\n /\n alphaLoading: {\n type: Boolean,\n default: null,\n },\n\n /\n Text shown in tooltip when you hover the start button,\n * required if no content is passed to default slot\n /\n startTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n @deprecated Use startTooltipText\n /\n alphaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute for both buttons.\n * Use startDisabled or endDisabled to disable buttons individually.\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n The direction the dropdown displays relative to the anchor.\n * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n /\n dropdownPlacement: {\n type: String,\n default: 'bottom-end',\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n The color of the button.\n * @values default, muted, danger\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether the end button should have active styling\n * @values true, false\n /\n endActive: {\n type: Boolean,\n default: false,\n },\n\n /\n @deprecated Use endActive\n * @values true, false\n /\n omegaActive: {\n type: Boolean,\n default: null,\n },\n\n /\n Descriptive label for the end button\n /\n endAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n @deprecated Use endAriaLabel\n /\n omegaAriaLabel: {\n type: String,\n default: undefined,\n },\n\n /\n HTML button disabled attribute for end button only\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n endDisabled: {\n type: Boolean,\n default: false,\n },\n\n /\n @deprecated Use endDisabled\n * @values true, false\n /\n omegaDisabled: {\n type: Boolean,\n default: null,\n },\n\n /\n Element ID, useful in case you need to reference the button\n * as an external anchor for popover.\n /\n endId: {\n type: String,\n default: undefined,\n },\n\n /\n @deprecated Use endId\n /\n omegaId: {\n type: String,\n default: undefined,\n },\n\n /\n Text shown in tooltip when you hover the end button,\n * required as it is an icon only button\n /\n endTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n @deprecated Use endTooltipText\n /\n omegaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the root element.\n * Can accept all of: String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n /\n rootClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Vue router `to` prop for the start button.\n * When set, renders the start button as a `<router-link>`.\n /\n startTo: {\n type: [String, Object],\n default: null,\n },\n\n /\n Whether to use `router.replace()` instead of `router.push()`\n * when navigating via `startTo`.\n * @values true, false\n /\n startReplace: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML href for the start button.\n * When set, renders the start button as an `<a>` element.\n /\n startHref: {\n type: String,\n default: null,\n },\n\n /\n HTML target attribute for the start button link.\n * Only applies when `startHref` is set.\n /\n startTarget: {\n type: String,\n default: null,\n },\n\n /\n HTML rel attribute for the start button link.\n * Only applies when `startHref` is set.\n /\n startRel: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Native start button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'start-clicked',\n\n /\n @deprecated Use start-clicked\n /\n 'alpha-clicked',\n\n /\n Native end button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'end-clicked',\n\n /\n @deprecated Use end-clicked\n */\n 'omega-clicked',\n ],\n\n data () {\n return {\n isDropdownOpen: false,\n };\n },\n\n computed: {\n startButtonProps () {\n return {\n active: this.alphaActive ?? this.startActive,\n ariaLabel: this.alphaAriaLabel ?? this.startAriaLabel,\n assertiveOnFocus: this.assertiveOnFocus,\n disabled: this.disabled \|\| (this.alphaDisabled ?? this.startDisabled),\n iconPosition: this.alphaIconPosition ?? this.startIconPosition,\n labelClass: this.alphaLabelClass ?? this.startLabelClass,\n leadingClass: this.alphaLeadingClass ?? this.startLeadingClass,\n trailingClass: this.alphaTrailingClass ?? this.startTrailingClass,\n loading: this.alphaLoading ?? this.startLoading,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.alphaTooltipText ?? this.startTooltipText,\n to: this.startTo,\n replace: this.startReplace,\n href: this.startHref,\n target: this.startTarget,\n rel: this.startRel,\n class: this.$attrs.class,\n style: this.$attrs.style,\n };\n },\n\n endButtonProps () {\n return {\n id: this.omegaId ?? this.endId,\n active: this.omegaActive ?? this.endActive,\n ariaLabel: this.omegaAriaLabel ?? this.endAriaLabel,\n disabled: this.disabled \|\| (this.omegaDisabled ?? this.endDisabled),\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.omegaTooltipText ?? this.endTooltipText,\n class: this.$attrs.class,\n style: this.$attrs.style,\n };\n },\n },\n\n created () {\n this.validateProps();\n },\n\n updated () {\n this.validateProps();\n },\n\n mounted () {\n warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n },\n\n methods: {\n onStartClick () {\n this.$emit('start-clicked');\n this.$emit('alpha-clicked');\n },\n\n onEndClick () {\n this.$emit('end-clicked');\n this.$emit('omega-clicked');\n },\n\n validateProps () {\n this.validateStartButtonProps();\n this.validateEndButtonProps();\n },\n\n validateStartButtonProps () {\n if (hasSlotContent(this.$slots.default)) return;\n\n if ((hasSlotContent(this.$slots.startIcon) \|\| hasSlotContent(this.$slots.alphaIcon)) &&\n !(this.alphaTooltipText ?? this.startTooltipText)) {\n console.warn('start-tooltip-text prop must be set if start button has an icon only');\n }\n },\n\n validateEndButtonProps () {\n if (hasSlotContent(this.$slots.end) \|\| hasSlotContent(this.$slots.omega)) return;\n\n if (!(this.omegaTooltipText ?? this.endTooltipText)) {\n console.warn('end-tooltip-text prop is required as it is an icon-only button');\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonEnd","DtDropdown","SplitButtonStart","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","$props","_createVNode","_component_split_button_start","_mergeProps","$options","_renderSlot","_ctx","_withCtx","iconSize","_Fragment","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_end","close","_openBlock"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tab-group.cjs"),I=require("./tab.cjs"),T=require("./tab-panel.cjs"),_=require("./tabs-constants.cjs");exports.DtTabGroup=t.default;exports.DtTab=I.default;exports.DtTabPanel=T.default;exports.TAB_IMPORTANCE_MODIFIERS=_.TAB_IMPORTANCE_MODIFIERS;exports.TAB_LIST_IMPORTANCE_MODIFIERS=_.TAB_LIST_IMPORTANCE_MODIFIERS;exports.TAB_LIST_KIND_MODIFIERS=_.TAB_LIST_KIND_MODIFIERS;exports.TAB_LIST_SIZES=_.TAB_LIST_SIZES;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("./tab-group.cjs"),T=require("./tab.cjs"),t=require("./tab-panel.cjs"),_=require("./tabs-constants.cjs");exports.DtTabGroup=I.default;exports.DtTab=T.default;exports.DtTabPanel=t.default;exports.TAB_ACTIVATION_MODES=_.TAB_ACTIVATION_MODES;exports.TAB_GROUP_KINDS=_.TAB_GROUP_KINDS;exports.TAB_LIST_IMPORTANCE_MODIFIERS=_.TAB_LIST_IMPORTANCE_MODIFIERS;exports.TAB_LIST_KIND_MODIFIERS=_.TAB_LIST_KIND_MODIFIERS;exports.TAB_LIST_SIZES=_.TAB_LIST_SIZES;exports.TAB_LIST_SIZE_MODIFIERS=_.TAB_LIST_SIZE_MODIFIERS;
 //# sourceMappingURL=index.cjs.map

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

@@ -1,14 +1,16 @@
-import { default as a } from "./tab-group.js";
-import { default as _ } from "./tab.js";
-import { default as r } from "./tab-panel.js";
-import { TAB_IMPORTANCE_MODIFIERS as S, TAB_LIST_IMPORTANCE_MODIFIERS as f, TAB_LIST_KIND_MODIFIERS as D, TAB_LIST_SIZES as A } from "./tabs-constants.js";
+import { default as _ } from "./tab-group.js";
+import { default as a } from "./tab.js";
+import { default as o } from "./tab-panel.js";
+import { TAB_ACTIVATION_MODES as A, TAB_GROUP_KINDS as D, TAB_LIST_IMPORTANCE_MODIFIERS as e, TAB_LIST_KIND_MODIFIERS as f, TAB_LIST_SIZES as E, TAB_LIST_SIZE_MODIFIERS as O } from "./tabs-constants.js";
 export {
-  _ as DtTab,
-  a as DtTabGroup,
-  r as DtTabPanel,
-  S as TAB_IMPORTANCE_MODIFIERS,
-  f as TAB_LIST_IMPORTANCE_MODIFIERS,
-  D as TAB_LIST_KIND_MODIFIERS,
-  A as TAB_LIST_SIZES
+  a as DtTab,
+  _ as DtTabGroup,
+  o as DtTabPanel,
+  A as TAB_ACTIVATION_MODES,
+  D as TAB_GROUP_KINDS,
+  e as TAB_LIST_IMPORTANCE_MODIFIERS,
+  f as TAB_LIST_KIND_MODIFIERS,
+  E as TAB_LIST_SIZES,
+  O as TAB_LIST_SIZE_MODIFIERS
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-"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()},updated(){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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./tabs-constants.cjs"),d=require("vue"),o=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u={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:()=>({})},kind:{type:String,default:"default",validator(t){return n.TAB_GROUP_KINDS.includes(t)}},outlined:{type:Boolean,default:!1},activationMode:{type:String,default:"manual",validator(t){return n.TAB_ACTIVATION_MODES.includes(t)}}},emits:["change","before-change"],data(){return{provideObj:{selected:"",disabled:!1,size:"default",kind:"default",outlined:!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}},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}}},mounted(){this.updateSelected()},updated(){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('[role="tab"]')).map(e=>{var s,l;return{context:e,panelId:(s=e.getAttribute("aria-controls"))==null?void 0:s.replace("dt-panel-",""),tabId:(l=e.getAttribute("id"))==null?void 0:l.replace("dt-tab-",""),isSelected:e.getAttribute("aria-selected")==="true",isDisabled:e.getAttribute("aria-disabled")==="true"}})},onChange(){this.$emit("change",{...this.provideObj})},tabLeft(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=this.findNextTab(t,-1);this.selectFocusOnTab(e)},tabRight(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=this.findNextTab(t,1);this.selectFocusOnTab(e)},findNextTab(t,e){const s=this.tabs.length;return(t+e+s)%s},selectFocusOnTab(t){const{context:e,panelId:s,isDisabled:l}=this.tabs[t];e.focus(),this.activationMode==="auto"&&!l&&(this.provideObj.selected=s,this.onChange())},selectTab(t){var s;if(this.isSameTabClicked())return;const e=this.getFocusedTabIndex();(s=this.tabs[e])!=null&&s.isDisabled||(this.$emit("before-change",t),!t.defaultPrevented&&(this.selectTabByIndex(e),this.onChange()))},selectTabByIndex(t){const{context:e,panelId:s}=this.tabs[t];this.provideObj.selected=s,e.focus()},getFocusedTabIndex(){const t=this.tabs.findIndex(e=>this.focusId?e.tabId===`${this.focusId}`:e.isSelected);return t===-1?0:t},onHomeButton(){this.tabs.length&&this.selectFocusOnTab(0)},onEndButton(){this.tabs.length&&this.selectFocusOnTab(this.tabs.length-1)},isSameTabClicked(){const t=this.tabs[this.getFocusedTabIndex()];return this.provideObj.selected===t.panelId}}},b={"data-qa":"dt-tab-group",class:"d-tab-neux"},h=["aria-label"];function c(t,e,s,l,r,i){return d.openBlock(),d.createElementBlock("div",b,[d.createElementVNode("div",d.mergeProps({ref:"tabs",class:["d-tablist",r.TAB_LIST_SIZE_MODIFIERS[s.size],{[r.TAB_LIST_KIND_MODIFIERS.inverted]:s.inverted,[r.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:s.borderless},s.tabListClass]},s.tabListChildProps,{role:"tablist","aria-label":s.label,"aria-orientation":"horizontal",onKeyup:[e[0]||(e[0]=d.withKeys((...a)=>i.tabLeft&&i.tabLeft(...a),["left"])),e[1]||(e[1]=d.withKeys((...a)=>i.tabRight&&i.tabRight(...a),["right"])),e[2]||(e[2]=d.withKeys((...a)=>i.selectTab&&i.selectTab(...a),["enter"])),e[3]||(e[3]=d.withKeys((...a)=>i.selectTab&&i.selectTab(...a),["space"]))],onClick:e[4]||(e[4]=(...a)=>i.selectTab&&i.selectTab(...a)),onKeydown:[e[5]||(e[5]=d.withKeys(d.withModifiers((...a)=>i.onHomeButton&&i.onHomeButton(...a),["prevent"]),["home"])),e[6]||(e[6]=d.withKeys(d.withModifiers((...a)=>i.onEndButton&&i.onEndButton(...a),["prevent"]),["end"]))]}),[d.renderSlot(t.$slots,"tabs")],16,h),d.renderSlot(t.$slots,"default")])}const I=o._(u,[["render",c]]);exports.default=I;
 //# sourceMappingURL=tab-group.cjs.map

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

	@@ -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 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"],"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","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_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 class=\"d-tab-neux\"\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 aria-orientation=\"horizontal\"\n @keyup.left=\"tabLeft\"\n @keyup.right=\"tabRight\"\n @keyup.enter=\"selectTab\"\n @keyup.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_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\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 * @deprecated\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, xs, sm, lg, xl\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 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 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 size: 'default',\n kind: 'default',\n outlined: false,\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 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\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('[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 const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n tabRight () {\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.tabs.length;\n return (fromIndex + direction + len) % len;\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabs[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n if (this.isSameTabClicked()) return;\n\n const index = this.getFocusedTabIndex();\n if (this.tabs[index]?.isDisabled) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\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) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabs.length) this.selectFocusOnTab(this.tabs.length - 1);\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","value","TAB_GROUP_KINDS","TAB_ACTIVATION_MODES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","nextIndex","fromIndex","direction","len","context","panelId","isDisabled","event","tab","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import { TAB_LIST_IMPORTANCE_MODIFIERS as b, TAB_LIST_KIND_MODIFIERS as o, TAB_LIST_SIZE_MODIFIERS as u, TAB_LIST_SIZES as c } from "./tabs-constants.js";
-import { openBlock as h, createElementBlock as f, createElementVNode as I, mergeProps as T, withKeys as i, renderSlot as r } from "vue";
-import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const m = {
+import { TAB_LIST_IMPORTANCE_MODIFIERS as b, TAB_LIST_KIND_MODIFIERS as u, TAB_LIST_SIZE_MODIFIERS as h, TAB_ACTIVATION_MODES as c, TAB_GROUP_KINDS as f, TAB_LIST_SIZES as I } from "./tabs-constants.js";
+import { openBlock as T, createElementBlock as g, createElementVNode as m, mergeProps as p, withKeys as d, withModifiers as r, renderSlot as o } from "vue";
+import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const O = {
   compatConfig: { MODE: 3 },
   name: "DtTabGroup",
   provide() {
@@ -35,6 +35,7 @@ const m = {
     },
     /**
      * If true, applies inverted styles to the tab group
+     * @deprecated
      * @values true, false
      */
     inverted: {
@@ -51,13 +52,13 @@ const m = {
     },
     /**
      * If provided, applies size styles to the tab group
-     * @values default, sm
+     * @values default, xs, sm, lg, xl
      */
     size: {
       type: String,
       default: "default",
       validate(t) {
-        return c.includes(t);
+        return I.includes(t);
       }
     },
     /**
@@ -73,6 +74,37 @@ const m = {
     tabListChildProps: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * The visual style kind applied to tabs within this group.
+     * Maps to specific DtButton kind/importance combinations for selected/unselected states.
+     * @values default, muted
+     */
+    kind: {
+      type: String,
+      default: "default",
+      validator(t) {
+        return f.includes(t);
+      }
+    },
+    /**
+     * If true, the selected tab renders with outlined importance instead of clear.
+     * @values true, false
+     */
+    outlined: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)
+     * @values auto, manual
+     */
+    activationMode: {
+      type: String,
+      default: "manual",
+      validator(t) {
+        return c.includes(t);
+      }
     }
   },
   emits: [
@@ -96,13 +128,16 @@ const m = {
       provideObj: {
         selected: "",
         // the currently displayed tab id
-        disabled: !1
+        disabled: !1,
         // disable group
+        size: "default",
+        kind: "default",
+        outlined: !1
       },
       focusId: null,
       tabs: [],
-      TAB_LIST_SIZE_MODIFIERS: u,
-      TAB_LIST_KIND_MODIFIERS: o,
+      TAB_LIST_SIZE_MODIFIERS: h,
+      TAB_LIST_KIND_MODIFIERS: u,
       TAB_LIST_IMPORTANCE_MODIFIERS: b
     };
   },
@@ -118,6 +153,24 @@ const m = {
       handler() {
         this.provideObj.selected = this.selected;
       }
+    },
+    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;
+      }
     }
   },
   mounted() {
@@ -134,13 +187,14 @@ const m = {
       this.focusId = t;
     },
     getTabChildren() {
-      return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => {
-        var d, n;
+      return Array.from(this.$refs.tabs.querySelectorAll('[role="tab"]')).map((e) => {
+        var s, n;
         return {
           context: e,
-          panelId: (d = e.getAttribute("aria-controls")) == null ? void 0 : d.replace("dt-panel-", ""),
+          panelId: (s = e.getAttribute("aria-controls")) == null ? void 0 : s.replace("dt-panel-", ""),
           tabId: (n = e.getAttribute("id")) == null ? void 0 : n.replace("dt-tab-", ""),
-          isSelected: e.getAttribute("aria-selected") === "true"
+          isSelected: e.getAttribute("aria-selected") === "true",
+          isDisabled: e.getAttribute("aria-disabled") === "true"
         };
       });
     },
@@ -150,27 +204,32 @@ const m = {
     tabLeft() {
       const t = this.getFocusedTabIndex();
       if (t === -1) return;
-      const e = t - 1 < 0 ? this.tabs.length - 1 : t - 1;
+      const e = this.findNextTab(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;
+      const e = this.findNextTab(t, 1);
       this.selectFocusOnTab(e);
     },
+    findNextTab(t, e) {
+      const s = this.tabs.length;
+      return (t + e + s) % s;
+    },
     selectFocusOnTab(t) {
-      const { context: e } = this.tabs[t];
-      e.focus();
+      const { context: e, panelId: s, isDisabled: n } = this.tabs[t];
+      e.focus(), this.activationMode === "auto" && !n && (this.provideObj.selected = s, this.onChange());
     },
     selectTab(t) {
-      if (this.isSameTabClicked() || (this.$emit("before-change", t), t.defaultPrevented)) return;
+      var s;
+      if (this.isSameTabClicked()) return;
       const e = this.getFocusedTabIndex();
-      this.selectTabByIndex(e), this.onChange();
+      (s = this.tabs[e]) != null && s.isDisabled || (this.$emit("before-change", t), !t.defaultPrevented && (this.selectTabByIndex(e), this.onChange()));
     },
     selectTabByIndex(t) {
-      const { context: e, panelId: d } = this.tabs[t];
-      this.provideObj.selected = d, e.focus();
+      const { context: e, panelId: s } = this.tabs[t];
+      this.provideObj.selected = s, e.focus();
     },
     getFocusedTabIndex() {
       const t = this.tabs.findIndex(
@@ -179,53 +238,55 @@ const m = {
       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());
+      this.tabs.length && this.selectFocusOnTab(0);
     },
     onEndButton() {
-      var t, e;
-      this.tabs.length !== 0 && ((e = (t = this.tabs[this.tabs.length - 1]) == null ? void 0 : t.context) == null || e.focus());
+      this.tabs.length && this.selectFocusOnTab(this.tabs.length - 1);
     },
     isSameTabClicked() {
       const t = this.tabs[this.getFocusedTabIndex()];
       return this.provideObj.selected === t.panelId;
     }
   }
-}, S = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
-function O(t, e, d, n, l, s) {
-  return h(), f("div", S, [
-    I("div", T({
+}, v = {
+  "data-qa": "dt-tab-group",
+  class: "d-tab-neux"
+}, x = ["aria-label"];
+function B(t, e, s, n, l, i) {
+  return T(), g("div", v, [
+    m("div", p({
       ref: "tabs",
       class: [
         "d-tablist",
-        l.TAB_LIST_SIZE_MODIFIERS[d.size],
+        l.TAB_LIST_SIZE_MODIFIERS[s.size],
         {
-          [l.TAB_LIST_KIND_MODIFIERS.inverted]: d.inverted,
-          [l.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: d.borderless
+          [l.TAB_LIST_KIND_MODIFIERS.inverted]: s.inverted,
+          [l.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: s.borderless
         },
-        d.tabListClass
+        s.tabListClass
       ]
-    }, d.tabListChildProps, {
+    }, s.tabListChildProps, {
       role: "tablist",
-      "aria-label": d.label,
+      "aria-label": s.label,
+      "aria-orientation": "horizontal",
       onKeyup: [
-        e[0] || (e[0] = i((...a) => s.tabLeft && s.tabLeft(...a), ["left"])),
-        e[1] || (e[1] = i((...a) => s.tabRight && s.tabRight(...a), ["right"])),
-        e[2] || (e[2] = i((...a) => s.selectTab && s.selectTab(...a), ["enter"])),
-        e[3] || (e[3] = i((...a) => s.selectTab && s.selectTab(...a), ["space"]))
+        e[0] || (e[0] = d((...a) => i.tabLeft && i.tabLeft(...a), ["left"])),
+        e[1] || (e[1] = d((...a) => i.tabRight && i.tabRight(...a), ["right"])),
+        e[2] || (e[2] = d((...a) => i.selectTab && i.selectTab(...a), ["enter"])),
+        e[3] || (e[3] = d((...a) => i.selectTab && i.selectTab(...a), ["space"]))
       ],
-      onClick: e[4] || (e[4] = (...a) => s.selectTab && s.selectTab(...a)),
+      onClick: e[4] || (e[4] = (...a) => i.selectTab && i.selectTab(...a)),
       onKeydown: [
-        e[5] || (e[5] = i((...a) => s.onHomeButton && s.onHomeButton(...a), ["home"])),
-        e[6] || (e[6] = i((...a) => s.onEndButton && s.onEndButton(...a), ["end"]))
+        e[5] || (e[5] = d(r((...a) => i.onHomeButton && i.onHomeButton(...a), ["prevent"]), ["home"])),
+        e[6] || (e[6] = d(r((...a) => i.onEndButton && i.onEndButton(...a), ["prevent"]), ["end"]))
       ]
     }), [
-      r(t.$slots, "tabs")
-    ], 16, p),
-    r(t.$slots, "default")
+      o(t.$slots, "tabs")
+    ], 16, x),
+    o(t.$slots, "default")
   ]);
 }
-const F = /* @__PURE__ */ g(m, [["render", O]]);
+const F = /* @__PURE__ */ S(O, [["render", B]]);
 export {
   F as default
 };

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

	@@ -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 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"],"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","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_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 class=\"d-tab-neux\"\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 aria-orientation=\"horizontal\"\n @keyup.left=\"tabLeft\"\n @keyup.right=\"tabRight\"\n @keyup.enter=\"selectTab\"\n @keyup.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_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\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 * @deprecated\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, xs, sm, lg, xl\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 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 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 size: 'default',\n kind: 'default',\n outlined: false,\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 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\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('[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 const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n tabRight () {\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.tabs.length;\n return (fromIndex + direction + len) % len;\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabs[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n if (this.isSameTabClicked()) return;\n\n const index = this.getFocusedTabIndex();\n if (this.tabs[index]?.isDisabled) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\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) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabs.length) this.selectFocusOnTab(this.tabs.length - 1);\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","value","TAB_GROUP_KINDS","TAB_ACTIVATION_MODES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","nextIndex","fromIndex","direction","len","context","panelId","isDisabled","event","tab","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),n=require("../button/button.cjs"),o={compatConfig:{MODE:3},name:"DtTab",components:{DtButton:n.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:i.TAB_IMPORTANCE_MODIFIERS}},computed:{tabListeners(){return{click:t=>{this.$emit("click",t)},focus:t=>{this.setFocus(this.id),this.$emit("focus",t)}}},isSelected(){return this.groupContext.selected===this.panelId}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)}};function c(t,b,a,_,l,s){const r=e.resolveComponent("dt-button");return e.openBlock(),e.createBlock(r,e.mergeProps({id:`dt-tab-${a.id}`,class:["d-tab",{[l.TAB_IMPORTANCE_MODIFIERS.selected]:s.isSelected},a.tabClass],role:"tab","aria-selected":`${s.isSelected}`,"aria-controls":`dt-panel-${a.panelId}`,"aria-label":a.label,"data-qa":"dt-tab",tabindex:s.isSelected?"0":"-1",disabled:s.groupContext.disabled||a.disabled},t.$attrs,e.toHandlers(s.tabListeners)),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["id","class","aria-selected","aria-controls","aria-label","tabindex","disabled"])}const u=d._(o,[["render",c]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),r=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../button/button.cjs"),o={compatConfig:{MODE:3},name:"DtTab",components:{DtButton:d.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(){const e=this.groupContext.size;return e==="default"?void 0:e},isSelected(){return this.groupContext.selected===this.panelId},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.syncDataContent(),this.selected&&(this.groupContext.selected=this.panelId)},updated(){this.syncDataContent()},methods:{syncDataContent(){var i;const e=this.$refs.tabLabel;if(!e)return;const s=((i=e.textContent)==null?void 0:i.trim())||"";e.getAttribute("data-content")!==s&&e.setAttribute("data-content",s)}}},u={ref:"tabLabel",class:"d-tab__label"};function c(e,s,i,f,g,n){const l=t.resolveComponent("dt-button");return t.openBlock(),t.createBlock(l,t.mergeProps({id:`dt-tab-${i.id}`,class:[i.tabClass,{"d-btn--disabled":n.isDisabled},{"d-tab--is-selected":!n.groupContext.outlined&&n.groupContext.kind!=="muted"&&n.isSelected}],importance:n.buttonImportance,kind:n.buttonKind,active:n.buttonActive,size:n.buttonSize,role:"tab","aria-selected":`${n.isSelected}`,"aria-controls":`dt-panel-${i.panelId}`,"aria-label":i.label,"aria-disabled":n.isDisabled?"true":void 0,"label-class":i.labelClass,"leading-class":i.leadingClass,"trailing-class":i.trailingClass,"data-qa":"dt-tab",tabindex:n.isSelected?"0":"-1"},e.$attrs,t.toHandlers(n.tabListeners)),t.createSlots({default:t.withCtx(()=>[t.createElementVNode("span",u,[t.renderSlot(e.$slots,"default")],512)]),_:2},[e.$slots.startIcon?{name:"startIcon",fn:t.withCtx(({iconSize:a})=>[t.renderSlot(e.$slots,"startIcon",{iconSize:a})]),key:"0"}:e.$slots.icon?{name:"startIcon",fn:t.withCtx(({iconSize:a})=>[t.renderSlot(e.$slots,"icon",{iconSize:a})]),key:"1"}:void 0,e.$slots.endIcon?{name:"endIcon",fn:t.withCtx(({iconSize:a})=>[t.renderSlot(e.$slots,"endIcon",{iconSize:a})]),key:"2"}:void 0,e.$slots.leading?{name:"leading",fn:t.withCtx(()=>[t.renderSlot(e.$slots,"leading")]),key:"3"}:void 0,e.$slots.trailing?{name:"trailing",fn:t.withCtx(()=>[t.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"])}const b=r._(o,[["render",c]]);exports.default=b;
 //# sourceMappingURL=tab.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.cjs","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"],"names":["_sfc_main","DtButton","~~TAB_IMPORTANCE_MODIFIERS~~","~~event~~","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$~~data","$~~options","_ctx","_toHandlers","_renderSlot"],"mappings":"~~iQAiCKA~~,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,QACN,WAAY,CACV,SAAAC,EAAAA,SAGF,OAAQ,CAAC,eAAgB,UAAU,EAEnC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,QAAS,CACP,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,~~KAIb~~,MAAO,~~CAOL~~,~~QAQA~~,~~SAGF~~,~~MAAQ~~,~~CACN~~,MAAO,~~0BACLC~~,~~EAAAA~~,~~yBAEJ~~,~~EAEA~~,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAOC,GAAS,CACd,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEA,MAAOA,GAAS,CACd,KAAK,SAAS,KAAK,EAAE,EACrB,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEJ,EAEA,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,OAC7C,GAGF,SAAW,~~CACL~~,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,QAEtC,~~CACF~~,~~kEA/IE~~,~~OAAAC~~,YAAA,EAAAC,~~cAqBYC~~,~~EArBZC~~,EAAAA,~~WAqBY~~,~~CApBT~~,aAAcC,EAAA,EAAE,GAChB,MAAK,~~WAAoCC~~,EAAA,~~yBAAyB~~,~~QAAQ~~,~~EAAGC~~,EAAA,~~YAA2BF~~,EAAA,~~UAOzG~~,KAAK,MACJ,~~mBAAkBE~~,EAAA,UAAU,GAC5B,~~4BAA2BF~~,EAAA,OAAO,GAClC,aAAYA,EAAA,~~MACb~~,UAAQ,SACP,~~SAAUE~~,EAAA,WAAU,IAAA,~~KACpB~~,~~SAAUA~~,EAAA,~~aAAa~~,~~UAAYF~~,EAAA,~~UAC5BG~~,EAAA,~~OACRC~~,EAAAA,~~WAAMF~~,EAAA,~~YAAY~~,CAAA,EAAA,~~mBAGlB~~,~~IAAQ~~,~~CAARG~~,~~aAAQF~~,EAAA,OAAA,SAAA"}
1	+ {"version":3,"file":"tab.cjs","sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n <dt-button\n :id=\"`dt-tab-${id}`\"\n :class=\"[\n tabClass,\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=\"isSelected ? '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 <span\n ref=\"tabLabel\"\n class=\"d-tab__label\"\n >\n <slot />\n </span>\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 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 this.syncDataContent();\n if (this.selected) {\n this.groupContext.selected = this.panelId;\n }\n },\n\n updated () {\n this.syncDataContent();\n },\n\n methods: {\n // Sets data-content to match the rendered label text so CSS can use\n // `content: attr(data-content)` on a hidden ::after pseudo-element to\n // hold the bold-width and prevent layout shift on selection.\n syncDataContent () {\n const el = this.$refs.tabLabel;\n if (!el) return;\n const text = el.textContent?.trim() \|\| '';\n if (el.getAttribute('data-content') !== text) {\n el.setAttribute('data-content', text);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","event","size","el","text","_a","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$options","_ctx","_toHandlers","_createSlots","_createElementVNode","_hoisted_1","_renderSlot","_withCtx","iconSize"],"mappings":"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"}