@dialpad/dialtone-vue 2.136.1 → 2.137.0

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 (18) hide show
  1. package/dist/component-documentation.json +1 -1
  2. package/dist/lib/general-row.cjs +2 -3
  3. package/dist/lib/general-row.cjs.map +1 -1
  4. package/dist/lib/general-row.js +2 -3
  5. package/dist/lib/general-row.js.map +1 -1
  6. package/dist/lib/tooltip-directive.cjs +1 -0
  7. package/dist/lib/tooltip-directive.cjs.map +1 -1
  8. package/dist/lib/tooltip-directive.js +1 -0
  9. package/dist/lib/tooltip-directive.js.map +1 -1
  10. package/dist/lib/tooltip.cjs +8 -1
  11. package/dist/lib/tooltip.cjs.map +1 -1
  12. package/dist/lib/tooltip.js +8 -1
  13. package/dist/lib/tooltip.js.map +1 -1
  14. package/dist/style.css +56 -64
  15. package/dist/types/components/tooltip/tooltip.vue.d.ts +16 -1
  16. package/dist/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
  17. package/dist/types/directives/tooltip/tooltip.d.ts.map +1 -1
  18. package/package.json +4 -4
package/dist/lib/tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n <div data-qa=\"dt-tooltip-container\">\n <!-- disabling as the below events are for capturing events from interactive\n elements within the span rather than on the span itself -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <span\n v-if=\"!externalAnchor\"\n ref=\"anchor\"\n data-qa=\"dt-tooltip-anchor\"\n @focusin=\"onEnterAnchor\"\n @focusout=\"onLeaveAnchor\"\n @mouseenter=\"onEnterAnchor\"\n @mouseleave=\"onLeaveAnchor\"\n @keydown.esc=\"onLeaveAnchor\"\n >\n <!-- @slot Slot for the anchor element -->\n <slot\n name=\"anchor\"\n />\n </span>\n <div\n :id=\"id\"\n ref=\"content\"\n data-qa=\"dt-tooltip\"\n :class=\"[\n 'd-tooltip',\n {\n [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n },\n contentClass,\n ]\"\n v-on=\"$listeners\"\n >\n <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n <!-- after-leave event can be used instead of transitionend -->\n <!-- @slot Slot for the content, defaults to message prop -->\n <slot>\n {{ message }}\n </slot>\n </div>\n </div>\n</template>\n\n<script>\nimport {\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_DIRECTIONS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString } from '@/common/utils';\nimport {\n createTippy,\n getAnchor,\n getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n name: 'DtTooltip',\n\n props: {\n /**\n * The id of the tooltip\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\"\n * if defined, otherwise it will automatically position to a new location\n * as it sees best fit. See\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * */\n fallbackPlacements: {\n type: Array,\n default: () => ['auto'],\n },\n\n /**\n * If true, applies inverted styles to the tooltip\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Displaces the tooltip from its reference element\n * by the specified number of pixels. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n */\n offset: {\n type: Array,\n default: () => [0, 12],\n },\n\n /**\n * The direction the popover displays relative to the anchor. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n */\n placement: {\n type: String,\n default: 'top',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /**\n * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n * if the reference element's position is animating, or to automatically update the popover\n * position in those cases the DOM layout changes the reference element's position.\n * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n * checks the \"popper\" rect for changes. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values true, false, reference, popper\n */\n sticky: {\n type: [Boolean, String],\n default: true,\n validator: (sticky) => {\n return TOOLTIP_STICKY_VALUES.includes(sticky);\n },\n },\n\n /**\n * Sets the element to which the tooltip is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * This prop is not reactive, must be set on initial render.\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * Additional css classes for the tooltip content 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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * A provided message for the tooltip content\n */\n message: {\n type: String,\n default: '',\n },\n\n /**\n * Controls whether hover/focus causes the tooltip to appear.\n * Cannot be combined with the show prop. show value will be ignored.\n * by default this is true, if you override with false, the tooltip will never show up.\n */\n enabled: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n show: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Whether the tooltip should have a transition effect (fade).\n */\n transition: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the tooltip will have a delay when being focused or moused over.\n * @values true, false\n */\n delay: {\n type: Boolean,\n default: true,\n },\n\n /**\n * External anchor id to use in those cases the anchor can't be provided via the slot.\n * For instance, using the combobox's input as the anchor for the popover.\n */\n externalAnchor: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /**\n * Emitted when tooltip is shown or hidden\n *\n * @event shown\n * @type {Boolean}\n */\n 'shown',\n\n /**\n * Sync show value\n *\n * @event update:show\n */\n 'update:show',\n ],\n\n data () {\n return {\n TOOLTIP_KIND_MODIFIERS,\n tip: null,\n\n inTimer: null,\n\n // Internal state for whether the tooltip is shown. Changing the prop\n // will update this.\n internalShow: false,\n\n // this is where the placement currently is, this can be different than\n // the placement prop when there is not enough available room for the tip\n // to display and it uses a fallback placement.\n currentPlacement: this.placement,\n };\n },\n\n computed: {\n // eslint-disable-next-line complexity\n tippyProps () {\n return {\n offset: this.offset,\n delay: this.delay ? TOOLTIP_DELAY_MS : false,\n placement: this.placement,\n sticky: this.sticky,\n theme: this.inverted ? 'inverted' : undefined,\n animation: this.transition ? 'fade' : false,\n // onShown only triggers when transition is truthy\n onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n // onShown will always be called, but it will be called before the animation is complete\n onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n onHidden: this.onHide,\n\n popperOptions: getPopperOptions({\n fallbackPlacements: this.fallbackPlacements,\n hasHideModifierEnabled: true,\n onChangePlacement: this.onChangePlacement,\n }),\n };\n },\n\n anchor () {\n return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n },\n },\n\n watch: {\n\n tippyProps: {\n handler: 'setProps',\n deep: true,\n },\n\n show: {\n handler: function (show) {\n if (show !== null) {\n this.internalShow = show;\n }\n },\n\n immediate: true,\n },\n\n internalShow (value) {\n if (value) {\n this.setProps();\n this.tip.show();\n } else {\n this.tip.hide();\n }\n },\n\n sticky (sticky) {\n this.tip.setProps({\n sticky,\n });\n },\n },\n\n mounted () {\n if (!this.enabled && this.show != null) {\n console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n console.warn('The show prop will be ignored.');\n }\n this.externalAnchor && this.addExternalAnchorEventListeners();\n this.tip = createTippy(this.anchor, this.initOptions());\n },\n\n beforeDestroy () {\n this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n if (this.tip) {\n this.tip?.destroy();\n }\n },\n\n methods: {\n calculateAnchorZindex () {\n // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n if (this.$el.getRootNode()\n .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n // anchor of popover is within a drawer.\n this.$el.closest('.d-zi-drawer')) {\n return 651;\n } else {\n return 400;\n }\n },\n\n hasVisibleFocus () {\n return this.anchor.matches(':focus-visible');\n },\n\n onEnterAnchor (e) {\n if (this.delay && this.inTimer === null) {\n this.inTimer = setTimeout(() => {\n this.triggerShow(e);\n }, TOOLTIP_DELAY_MS);\n } else {\n this.triggerShow(e);\n }\n },\n\n triggerShow (e) {\n if (e.type === 'focusin') {\n // only show tooltips on visible focus when triggered via focus.\n // when the user is using the mouse they only want tooltips to display\n // on mouseover.\n //\n // Example: anchor of a popover is a button with tooltip.\n // closing it with the mouse would trigger the tooltip to display as\n // the anchor is focused on close. Not what we want.\n if (this.show === null && this.hasVisibleFocus()) {\n this.internalShow = true;\n }\n } else {\n if (this.show === null) this.internalShow = true;\n }\n },\n\n onLeaveAnchor (e) {\n if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n clearTimeout(this.inTimer);\n this.inTimer = null;\n this.triggerHide();\n },\n\n triggerHide () {\n if (this.show === null) this.internalShow = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onHide () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onShow (tooltipInstance, callingMethod) {\n if (!this.tooltipHasContent(tooltipInstance)) {\n return false;\n }\n if (this.transition && callingMethod === 'onShow') {\n return;\n }\n this.$emit('shown', true);\n if (this.show !== null) {\n this.$emit('update:show', true);\n }\n },\n\n setProps () {\n if (this.tip && this.tip.setProps) {\n this.tip.setProps({\n ...this.tippyProps,\n // these need to be set here rather than in tippyProps because they are non-reactive\n appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n zIndex: this.calculateAnchorZindex(),\n });\n }\n },\n\n onMount () {\n this.setProps();\n },\n\n tooltipHasContent (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\n return true;\n },\n\n // set initial options here. If any of the options need to dynamically change, they should be put in\n // tippyProps instead.\n initOptions () {\n const template = this.$refs.content;\n return {\n content: template,\n arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n // transition duration - same as our custom fade delay in dialtone-globals.less\n duration: 180,\n interactive: false,\n trigger: 'manual',\n hideOnClick: false,\n // disable tooltip from displaying on touch devices\n touch: false,\n onMount: this.onMount,\n showOnCreate: this.internalShow,\n popperOptions: getPopperOptions({\n hasHideModifierEnabled: true,\n }),\n };\n },\n\n addExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n\n removeExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n visibility: hidden;\n pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n opacity: 0;\n}\n</style>\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n <div data-qa=\"dt-tooltip-container\">\n <!-- disabling as the below events are for capturing events from interactive\n elements within the span rather than on the span itself -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <span\n v-if=\"!externalAnchor\"\n ref=\"anchor\"\n data-qa=\"dt-tooltip-anchor\"\n @focusin=\"onEnterAnchor\"\n @focusout=\"onLeaveAnchor\"\n @mouseenter=\"onEnterAnchor\"\n @mouseleave=\"onLeaveAnchor\"\n @keydown.esc=\"onLeaveAnchor\"\n >\n <!-- @slot Slot for the anchor element -->\n <slot\n name=\"anchor\"\n />\n </span>\n <div\n :id=\"id\"\n ref=\"content\"\n data-qa=\"dt-tooltip\"\n :class=\"[\n 'd-tooltip',\n {\n [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n },\n contentClass,\n ]\"\n v-on=\"$listeners\"\n >\n <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n <!-- after-leave event can be used instead of transitionend -->\n <!-- @slot Slot for the content, defaults to message prop -->\n <slot>\n {{ message }}\n </slot>\n </div>\n </div>\n</template>\n\n<script>\nimport {\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_DIRECTIONS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString } from '@/common/utils';\nimport {\n createTippy,\n getAnchor,\n getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n name: 'DtTooltip',\n\n props: {\n /**\n * The id of the tooltip\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\"\n * if defined, otherwise it will automatically position to a new location\n * as it sees best fit. See\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * */\n fallbackPlacements: {\n type: Array,\n default: () => ['auto'],\n },\n\n /**\n * If true, applies inverted styles to the tooltip\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Displaces the tooltip from its reference element\n * by the specified number of pixels. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n */\n offset: {\n type: Array,\n default: () => [0, 12],\n },\n\n /**\n * The direction the popover displays relative to the anchor. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n */\n placement: {\n type: String,\n default: 'top',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /**\n * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n * if the reference element's position is animating, or to automatically update the popover\n * position in those cases the DOM layout changes the reference element's position.\n * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n * checks the \"popper\" rect for changes. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values true, false, reference, popper\n */\n sticky: {\n type: [Boolean, String],\n default: true,\n validator: (sticky) => {\n return TOOLTIP_STICKY_VALUES.includes(sticky);\n },\n },\n\n /**\n * Sets the element to which the tooltip is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * This prop is not reactive, must be set on initial render.\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * Additional css classes for the tooltip content 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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * A provided message for the tooltip content\n */\n message: {\n type: String,\n default: '',\n },\n\n /**\n * Controls whether hover/focus causes the tooltip to appear.\n * Cannot be combined with the show prop. show value will be ignored.\n * by default this is true, if you override with false, the tooltip will never show up.\n */\n enabled: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n show: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Whether the tooltip should have a transition effect (fade).\n */\n transition: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the tooltip will have a delay when being focused or moused over.\n * @values true, false\n */\n delay: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n */\n theme: {\n type: String,\n default: undefined,\n },\n\n /**\n * External anchor id to use in those cases the anchor can't be provided via the slot.\n * For instance, using the combobox's input as the anchor for the popover.\n */\n externalAnchor: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /**\n * Emitted when tooltip is shown or hidden\n *\n * @event shown\n * @type {Boolean}\n */\n 'shown',\n\n /**\n * Sync show value\n *\n * @event update:show\n */\n 'update:show',\n ],\n\n data () {\n return {\n TOOLTIP_KIND_MODIFIERS,\n tip: null,\n\n inTimer: null,\n\n // Internal state for whether the tooltip is shown. Changing the prop\n // will update this.\n internalShow: false,\n\n // this is where the placement currently is, this can be different than\n // the placement prop when there is not enough available room for the tip\n // to display and it uses a fallback placement.\n currentPlacement: this.placement,\n };\n },\n\n computed: {\n // eslint-disable-next-line complexity\n tippyProps () {\n return {\n offset: this.offset,\n delay: this.delay ? TOOLTIP_DELAY_MS : false,\n placement: this.placement,\n sticky: this.sticky,\n theme: this.inverted ? 'inverted' : this.theme,\n animation: this.transition ? 'fade' : false,\n // onShown only triggers when transition is truthy\n onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n // onShown will always be called, but it will be called before the animation is complete\n onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n onHidden: this.onHide,\n\n popperOptions: getPopperOptions({\n fallbackPlacements: this.fallbackPlacements,\n hasHideModifierEnabled: true,\n onChangePlacement: this.onChangePlacement,\n }),\n };\n },\n\n anchor () {\n return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n },\n },\n\n watch: {\n\n tippyProps: {\n handler: 'setProps',\n deep: true,\n },\n\n show: {\n handler: function (show) {\n if (show !== null) {\n this.internalShow = show;\n }\n },\n\n immediate: true,\n },\n\n internalShow (value) {\n if (value) {\n this.setProps();\n this.tip.show();\n } else {\n this.tip.hide();\n }\n },\n\n sticky (sticky) {\n this.tip.setProps({\n sticky,\n });\n },\n },\n\n mounted () {\n if (!this.enabled && this.show != null) {\n console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n console.warn('The show prop will be ignored.');\n }\n this.externalAnchor && this.addExternalAnchorEventListeners();\n this.tip = createTippy(this.anchor, this.initOptions());\n },\n\n beforeDestroy () {\n this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n if (this.tip) {\n this.tip?.destroy();\n }\n },\n\n methods: {\n calculateAnchorZindex () {\n // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n if (this.$el.getRootNode()\n .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n // anchor of popover is within a drawer.\n this.$el.closest('.d-zi-drawer')) {\n return 651;\n } else {\n return 400;\n }\n },\n\n hasVisibleFocus () {\n return this.anchor.matches(':focus-visible');\n },\n\n onEnterAnchor (e) {\n if (this.delay && this.inTimer === null) {\n this.inTimer = setTimeout(() => {\n this.triggerShow(e);\n }, TOOLTIP_DELAY_MS);\n } else {\n this.triggerShow(e);\n }\n },\n\n triggerShow (e) {\n if (e.type === 'focusin') {\n // only show tooltips on visible focus when triggered via focus.\n // when the user is using the mouse they only want tooltips to display\n // on mouseover.\n //\n // Example: anchor of a popover is a button with tooltip.\n // closing it with the mouse would trigger the tooltip to display as\n // the anchor is focused on close. Not what we want.\n if (this.show === null && this.hasVisibleFocus()) {\n this.internalShow = true;\n }\n } else {\n if (this.show === null) this.internalShow = true;\n }\n },\n\n onLeaveAnchor (e) {\n if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n clearTimeout(this.inTimer);\n this.inTimer = null;\n this.triggerHide();\n },\n\n triggerHide () {\n if (this.show === null) this.internalShow = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onHide () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onShow (tooltipInstance, callingMethod) {\n if (!this.tooltipHasContent(tooltipInstance)) {\n return false;\n }\n if (this.transition && callingMethod === 'onShow') {\n return;\n }\n this.$emit('shown', true);\n if (this.show !== null) {\n this.$emit('update:show', true);\n }\n },\n\n setProps () {\n if (this.tip && this.tip.setProps) {\n this.tip.setProps({\n ...this.tippyProps,\n // these need to be set here rather than in tippyProps because they are non-reactive\n appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n zIndex: this.calculateAnchorZindex(),\n });\n }\n },\n\n onMount () {\n this.setProps();\n },\n\n tooltipHasContent (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\n return true;\n },\n\n // set initial options here. If any of the options need to dynamically change, they should be put in\n // tippyProps instead.\n initOptions () {\n const template = this.$refs.content;\n return {\n content: template,\n arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n // transition duration - same as our custom fade delay in dialtone-globals.less\n duration: 180,\n interactive: false,\n trigger: 'manual',\n hideOnClick: false,\n // disable tooltip from displaying on touch devices\n touch: false,\n onMount: this.onMount,\n showOnCreate: this.internalShow,\n popperOptions: getPopperOptions({\n hasHideModifierEnabled: true,\n }),\n };\n },\n\n addExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n\n removeExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n visibility: hidden;\n pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n opacity: 0;\n}\n</style>\n"],"names":[],"mappings":"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"}
package/dist/style.css CHANGED
@@ -273,7 +273,7 @@
273
273
  background-color: var(--dt-color-surface-contrast);
274
274
  color: var(--dt-color-foreground-secondary-inverted);
275
275
  }
276
- .dt-leftbar-row[data-v-85a76326] {
276
+ .dt-leftbar-row[data-v-9ffe21aa] {
277
277
  --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
278
278
  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
279
279
  --leftbar-row-radius: var(--dt-size-radius-pill);
@@ -304,65 +304,61 @@
304
304
  transition-timing-function: var(--ttf-out-quint);
305
305
  cursor: pointer;
306
306
  }
307
- .dt-leftbar-row[data-v-85a76326]:not(.dt-leftbar-row--no-action):hover,
308
- .dt-leftbar-row[data-v-85a76326]:not(.dt-leftbar-row--no-action):focus-within {
307
+ .dt-leftbar-row[data-v-9ffe21aa]:not(.dt-leftbar-row--no-action):hover,
308
+ .dt-leftbar-row[data-v-9ffe21aa]:not(.dt-leftbar-row--no-action):focus-within {
309
309
  --leftbar-row-unread-badge-display: none;
310
310
  }
311
- .dt-leftbar-row[data-v-85a76326]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
312
- .dt-leftbar-row[data-v-85a76326]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
311
+ .dt-leftbar-row[data-v-9ffe21aa]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
312
+ .dt-leftbar-row[data-v-9ffe21aa]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
313
313
  display: inline-flex;
314
314
  }
315
- .dt-leftbar-row[data-v-85a76326]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
316
- .dt-leftbar-row[data-v-85a76326]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
315
+ .dt-leftbar-row[data-v-9ffe21aa]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
316
+ .dt-leftbar-row[data-v-9ffe21aa]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
317
317
  opacity: 1;
318
318
  }
319
- .dt-leftbar-row[data-v-85a76326]:hover,
320
- .dt-leftbar-row[data-v-85a76326]:focus-within {
319
+ .dt-leftbar-row[data-v-9ffe21aa]:hover,
320
+ .dt-leftbar-row[data-v-9ffe21aa]:focus-within {
321
321
  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
322
322
  }
323
- .dt-leftbar-row[data-v-85a76326]:hover .d-presence,
324
- .dt-leftbar-row[data-v-85a76326]:focus-within .d-presence {
323
+ .dt-leftbar-row[data-v-9ffe21aa]:hover .d-presence,
324
+ .dt-leftbar-row[data-v-9ffe21aa]:focus-within .d-presence {
325
325
  --presence-color-border-base: var(--dt-color-black-200);
326
326
  }
327
- .dt-leftbar-row[data-v-85a76326]:hover .d-avatar__count,
328
- .dt-leftbar-row[data-v-85a76326]:focus-within .d-avatar__count {
327
+ .dt-leftbar-row[data-v-9ffe21aa]:hover .d-avatar__count,
328
+ .dt-leftbar-row[data-v-9ffe21aa]:focus-within .d-avatar__count {
329
329
  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
330
330
  }
331
- .dt-leftbar-row--has-unread[data-v-85a76326] {
331
+ .dt-leftbar-row--has-unread[data-v-9ffe21aa] {
332
332
  --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
333
333
  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
334
334
  --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
335
335
  }
336
- .dt-leftbar-row--unread-count[data-v-85a76326] .dt-leftbar-row__action {
336
+ .dt-leftbar-row--unread-count[data-v-9ffe21aa] .dt-leftbar-row__action {
337
337
  display: none;
338
338
  }
339
- .dt-leftbar-row__unread-count-badge[data-v-85a76326] {
339
+ .dt-leftbar-row__unread-count-badge[data-v-9ffe21aa] {
340
340
  border-top-right-radius: var(--dt-size-radius-0);
341
341
  border-bottom-right-radius: var(--dt-size-radius-0);
342
342
  }
343
- .dt-leftbar-row__unread-mention-count-badge[data-v-85a76326] {
343
+ .dt-leftbar-row__unread-mention-count-badge[data-v-9ffe21aa] {
344
344
  border-top-left-radius: var(--dt-size-radius-0);
345
345
  border-bottom-left-radius: var(--dt-size-radius-0);
346
346
  background-color: var(--dt-color-purple-500);
347
347
  }
348
- .dt-leftbar-row__unread-mention-count-only-badge[data-v-85a76326] {
349
- background-color: var(--dt-color-purple-500);
350
- color: var(--dt-color-foreground-primary-inverted);
351
- }
352
- .dt-leftbar-row--muted[data-v-85a76326] {
348
+ .dt-leftbar-row--muted[data-v-9ffe21aa] {
353
349
  --leftbar-row-opacity: 60%;
354
350
  }
355
- .dt-leftbar-row--selected[data-v-85a76326] {
351
+ .dt-leftbar-row--selected[data-v-9ffe21aa] {
356
352
  --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
357
353
  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
358
354
  }
359
- .dt-leftbar-row--selected[data-v-85a76326] .d-presence {
355
+ .dt-leftbar-row--selected[data-v-9ffe21aa] .d-presence {
360
356
  --presence-color-border-base: var(--dt-color-black-200);
361
357
  }
362
- .dt-leftbar-row--selected[data-v-85a76326] .d-avatar__count {
358
+ .dt-leftbar-row--selected[data-v-9ffe21aa] .d-avatar__count {
363
359
  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
364
360
  }
365
- .dt-leftbar-row__is-typing[data-v-85a76326] {
361
+ .dt-leftbar-row__is-typing[data-v-9ffe21aa] {
366
362
  --is-typing-size-shape: var(--dt-size-550);
367
363
  height: var(--is-typing-size-shape);
368
364
  width: var(--is-typing-size-shape);
@@ -374,7 +370,7 @@
374
370
  border-radius: var(--dt-size-radius-pill);
375
371
  opacity: 0.75;
376
372
  }
377
- .dt-leftbar-row__is-typing span[data-v-85a76326] {
373
+ .dt-leftbar-row__is-typing span[data-v-9ffe21aa] {
378
374
  transition: all 500ms ease;
379
375
  background: var(--dt-color-surface-strong);
380
376
  height: 4px;
@@ -383,18 +379,18 @@
383
379
  padding: 0;
384
380
  opacity: 0.3;
385
381
  border-radius: var(--dt-size-radius-pill);
386
- animation: wave-85a76326 1.5s ease infinite;
382
+ animation: wave-9ffe21aa 1.5s ease infinite;
387
383
  }
388
- .dt-leftbar-row__is-typing span[data-v-85a76326]:nth-child(1) {
384
+ .dt-leftbar-row__is-typing span[data-v-9ffe21aa]:nth-child(1) {
389
385
  animation-delay: 0ms;
390
386
  }
391
- .dt-leftbar-row__is-typing span[data-v-85a76326]:nth-child(2) {
387
+ .dt-leftbar-row__is-typing span[data-v-9ffe21aa]:nth-child(2) {
392
388
  animation-delay: var(--td100);
393
389
  }
394
- .dt-leftbar-row__is-typing span[data-v-85a76326]:nth-child(3) {
390
+ .dt-leftbar-row__is-typing span[data-v-9ffe21aa]:nth-child(3) {
395
391
  animation-delay: var(--td200);
396
392
  }
397
- .dt-leftbar-row__primary[data-v-85a76326] {
393
+ .dt-leftbar-row__primary[data-v-9ffe21aa] {
398
394
  display: flex;
399
395
  align-items: center;
400
396
  flex: 1;
@@ -411,18 +407,18 @@
411
407
  padding: 0;
412
408
  border-radius: var(--leftbar-row-radius);
413
409
  }
414
- .dt-leftbar-row__primary[data-v-85a76326]:active {
410
+ .dt-leftbar-row__primary[data-v-9ffe21aa]:active {
415
411
  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
416
412
  }
417
- .dt-leftbar-row__primary[data-v-85a76326]:focus-visible {
413
+ .dt-leftbar-row__primary[data-v-9ffe21aa]:focus-visible {
418
414
  box-shadow: var(--dt-shadow-focus-inset);
419
415
  }
420
- .dt-leftbar-row__action-button[data-v-85a76326] {
416
+ .dt-leftbar-row__action-button[data-v-9ffe21aa] {
421
417
  opacity: 0;
422
418
  width: var(--leftbar-row-action-width);
423
419
  height: var(--leftbar-row-action-height);
424
420
  }
425
- .dt-leftbar-row__alpha[data-v-85a76326] {
421
+ .dt-leftbar-row__alpha[data-v-9ffe21aa] {
426
422
  color: var(--leftbar-row-alpha-color-foreground);
427
423
  display: flex;
428
424
  box-sizing: border-box;
@@ -434,11 +430,11 @@
434
430
  height: var(--leftbar-row-alpha-height);
435
431
  border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
436
432
  }
437
- .dt-leftbar-row__label[data-v-85a76326] {
433
+ .dt-leftbar-row__label[data-v-9ffe21aa] {
438
434
  flex: 0 1;
439
435
  min-width: 0;
440
436
  }
441
- .dt-leftbar-row__omega[data-v-85a76326] {
437
+ .dt-leftbar-row__omega[data-v-9ffe21aa] {
442
438
  position: absolute;
443
439
  display: flex;
444
440
  right: var(--leftbar-row-action-position-right);
@@ -450,26 +446,26 @@
450
446
  box-sizing: border-box;
451
447
  border-radius: var(--leftbar-row-radius);
452
448
  }
453
- .dt-leftbar-row__unread-badge[data-v-85a76326] {
449
+ .dt-leftbar-row__unread-badge[data-v-9ffe21aa] {
454
450
  display: var(--leftbar-row-unread-badge-display);
455
451
  }
456
- .dt-leftbar-row__active-voice[data-v-85a76326] {
452
+ .dt-leftbar-row__active-voice[data-v-9ffe21aa] {
457
453
  color: var(--dt-color-purple-400);
458
454
  display: inline-flex;
459
- -webkit-animation-name: opacity-pulsate-85a76326;
455
+ -webkit-animation-name: opacity-pulsate-9ffe21aa;
460
456
  -webkit-animation-duration: 1s;
461
457
  -webkit-animation-iteration-count: infinite;
462
458
  -webkit-animation-fill-mode: both;
463
- -moz-animation-name: opacity-pulsate-85a76326;
459
+ -moz-animation-name: opacity-pulsate-9ffe21aa;
464
460
  -moz-animation-duration: 1s;
465
461
  -moz-animation-iteration-count: infinite;
466
462
  -moz-animation-fill-mode: both;
467
- animation-name: opacity-pulsate-85a76326;
463
+ animation-name: opacity-pulsate-9ffe21aa;
468
464
  animation-duration: 1s;
469
465
  animation-iteration-count: infinite;
470
466
  animation-fill-mode: both;
471
467
  }
472
- .dt-leftbar-row__dnd[data-v-85a76326] {
468
+ .dt-leftbar-row__dnd[data-v-9ffe21aa] {
473
469
  padding-top: var(--dt-space-200);
474
470
  padding-right: var(--dt-space-300);
475
471
  color: var(--dt-color-foreground-tertiary);
@@ -477,26 +473,26 @@
477
473
  line-height: var(--dt-font-line-height-400);
478
474
  font-weight: var(--dt-font-weight-medium);
479
475
  }
480
- .dt-leftbar-row__container--off-duty[data-v-85a76326] {
476
+ .dt-leftbar-row__container--off-duty[data-v-9ffe21aa] {
481
477
  border-radius: var(--dt-size-radius-500);
482
478
  background-color: var(--dt-badge-color-background-critical);
483
479
  border: var(--dt-size-100) solid var(--dt-color-border-subtle);
484
480
  }
485
- .dt-leftbar-row__container--off-duty[data-v-85a76326] .dt-leftbar-row__primary {
481
+ .dt-leftbar-row__container--off-duty[data-v-9ffe21aa] .dt-leftbar-row__primary {
486
482
  margin: calc(var(--dt-size-100) * -1);
487
483
  }
488
- .dt-leftbar-row--contact-centers[data-v-85a76326] .dt-leftbar-row__alpha {
484
+ .dt-leftbar-row--contact-centers[data-v-9ffe21aa] .dt-leftbar-row__alpha {
489
485
  padding-right: var(--dt-space-450);
490
486
  padding-left: var(--dt-space-450);
491
487
  }
492
- .dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-85a76326] {
488
+ .dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-9ffe21aa] {
493
489
  display: inline-flex;
494
490
  align-items: center;
495
491
  justify-content: flex-end;
496
492
  min-width: var(--dt-size-600);
497
493
  height: var(--dt-size-500);
498
494
  }
499
- .dt-leftbar-row[data-v-85a76326] .dt-leftbar-row__description {
495
+ .dt-leftbar-row[data-v-9ffe21aa] .dt-leftbar-row__description {
500
496
  display: block;
501
497
  font-weight: var(--leftbar-row-description-font-weight);
502
498
  font-size: var(--leftbar-row-description-font-size);
@@ -506,7 +502,7 @@
506
502
  text-overflow: ellipsis;
507
503
  white-space: nowrap;
508
504
  }
509
- .dt-leftbar-row[data-v-85a76326] .dt-leftbar-row__status {
505
+ .dt-leftbar-row[data-v-9ffe21aa] .dt-leftbar-row__status {
510
506
  display: block;
511
507
  color: var(--leftbar-row-status-color-foreground);
512
508
  font-size: var(--leftbar-row-status-font-size);
@@ -516,30 +512,30 @@
516
512
  text-overflow: ellipsis;
517
513
  white-space: nowrap;
518
514
  }
519
- .dt-leftbar-row[data-v-85a76326] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty):before {
515
+ .dt-leftbar-row[data-v-9ffe21aa] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty):before {
520
516
  content: ' • ';
521
517
  color: var(--dt-theme-sidebar-status-color-foreground);
522
518
  }
523
- .dt-leftbar-row__icon-cc[data-v-85a76326] {
519
+ .dt-leftbar-row__icon-cc[data-v-9ffe21aa] {
524
520
  border-radius: var(--dt-size-200);
525
521
  width: calc(var(--dt-size-300) * 3.5);
526
522
  height: calc(var(--dt-size-300) * 3.5);
527
523
  }
528
- .opacity-pulsate[data-v-85a76326] {
529
- -webkit-animation-name: opacity-pulsate-85a76326;
524
+ .opacity-pulsate[data-v-9ffe21aa] {
525
+ -webkit-animation-name: opacity-pulsate-9ffe21aa;
530
526
  -webkit-animation-duration: 1s;
531
527
  -webkit-animation-iteration-count: infinite;
532
528
  -webkit-animation-fill-mode: both;
533
- -moz-animation-name: opacity-pulsate-85a76326;
529
+ -moz-animation-name: opacity-pulsate-9ffe21aa;
534
530
  -moz-animation-duration: 1s;
535
531
  -moz-animation-iteration-count: infinite;
536
532
  -moz-animation-fill-mode: both;
537
- animation-name: opacity-pulsate-85a76326;
533
+ animation-name: opacity-pulsate-9ffe21aa;
538
534
  animation-duration: 1s;
539
535
  animation-iteration-count: infinite;
540
536
  animation-fill-mode: both;
541
537
  }
542
- @-webkit-keyframes opacity-pulsate-85a76326 {
538
+ @-webkit-keyframes opacity-pulsate-9ffe21aa {
543
539
  0%,
544
540
  100% {
545
541
  opacity: 0.2;
@@ -548,7 +544,7 @@
548
544
  opacity: 1;
549
545
  }
550
546
  }
551
- @-moz-keyframes opacity-pulsate-85a76326 {
547
+ @-moz-keyframes opacity-pulsate-9ffe21aa {
552
548
  0%,
553
549
  100% {
554
550
  opacity: 0.2;
@@ -557,7 +553,7 @@
557
553
  opacity: 1;
558
554
  }
559
555
  }
560
- @keyframes opacity-pulsate-85a76326 {
556
+ @keyframes opacity-pulsate-9ffe21aa {
561
557
  0%,
562
558
  100% {
563
559
  opacity: 0.2;
@@ -566,7 +562,7 @@
566
562
  opacity: 1;
567
563
  }
568
564
  }
569
- @keyframes wave-85a76326 {
565
+ @keyframes wave-9ffe21aa {
570
566
  0%,
571
567
  50%,
572
568
  100% {
@@ -649,10 +645,6 @@
649
645
  border-bottom-left-radius: var(--dt-size-radius-0);
650
646
  background-color: var(--dt-color-purple-500);
651
647
  }
652
- .dt-leftbar-row__unread-mention-count-only-badge[data-v-f44e0386] {
653
- background-color: var(--dt-color-purple-500);
654
- color: var(--dt-color-foreground-primary-inverted);
655
- }
656
648
  .dt-leftbar-row--muted[data-v-f44e0386] {
657
649
  --leftbar-row-opacity: 60%;
658
650
  }
package/dist/types/components/tooltip/tooltip.vue.d.ts CHANGED
@@ -150,6 +150,13 @@ declare const _default: import("vue").DefineComponent<{
150
150
  type: BooleanConstructor;
151
151
  default: boolean;
152
152
  };
153
+ /**
154
+ * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/
155
+ */
156
+ theme: {
157
+ type: StringConstructor;
158
+ default: undefined;
159
+ };
153
160
  /**
154
161
  * External anchor id to use in those cases the anchor can't be provided via the slot.
155
162
  * For instance, using the combobox's input as the anchor for the popover.
@@ -181,7 +188,7 @@ declare const _default: import("vue").DefineComponent<{
181
188
  delay: number | boolean;
182
189
  placement: any;
183
190
  sticky: any;
184
- theme: string | undefined;
191
+ theme: any;
185
192
  animation: string | boolean;
186
193
  onShown: (tooltipInstance: any) => false | undefined;
187
194
  onShow: (tooltipInstance: any) => false | undefined;
@@ -428,6 +435,13 @@ declare const _default: import("vue").DefineComponent<{
428
435
  type: BooleanConstructor;
429
436
  default: boolean;
430
437
  };
438
+ /**
439
+ * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/
440
+ */
441
+ theme: {
442
+ type: StringConstructor;
443
+ default: undefined;
444
+ };
431
445
  /**
432
446
  * External anchor id to use in those cases the anchor can't be provided via the slot.
433
447
  * For instance, using the combobox's input as the anchor for the popover.
@@ -449,6 +463,7 @@ declare const _default: import("vue").DefineComponent<{
449
463
  delay: boolean;
450
464
  placement: string;
451
465
  sticky: string | boolean;
466
+ theme: string;
452
467
  enabled: boolean;
453
468
  externalAnchor: string;
454
469
  }>;
package/dist/types/components/tooltip/tooltip.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../components/tooltip/tooltip.vue.js"],"names":[],"mappings":";IA4BI;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;QArLP;;;;;WAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA+BC;;;mBAGG;;;;;;;;mBAHH;;;mBAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAHH;;;mBAGG;;;;;;;;mBAHH;;;mBAGG;;;;;;;;IA7BH;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG"}
1
+ {"version":3,"file":"tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../components/tooltip/tooltip.vue.js"],"names":[],"mappings":";IA4BI;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;;;;;QA7LP;;;;;WAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA+BC;;;mBAGG;;;;;;;;mBAHH;;;mBAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAHH;;;mBAGG;;;;;;;;mBAHH;;;mBAGG;;;;;;;;IA7BH;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG"}
package/dist/types/directives/tooltip/tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../directives/tooltip/tooltip.js"],"names":[],"mappings":";;IAKE,iCAmFC"}
1
+ {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../directives/tooltip/tooltip.js"],"names":[],"mappings":";;IAKE,iCAoFC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone-vue",
3
- "version": "2.136.1",
3
+ "version": "2.137.0",
4
4
  "description": "Vue component library for Dialpad's design system Dialtone",
5
5
  "files": [
6
6
  "dist"
@@ -33,7 +33,7 @@
33
33
  "regex-combined-emojis": "1.6.0",
34
34
  "tippy.js": "6.3.7",
35
35
  "@dialpad/dialtone-emojis": "1.0.7",
36
- "@dialpad/dialtone-icons": "4.17.0"
36
+ "@dialpad/dialtone-icons": "4.17.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@percy/cli": "1.28.2",
@@ -81,12 +81,12 @@
81
81
  "vue-tsc": "^1.8.25",
82
82
  "yo": "^5.0.0",
83
83
  "yorkie": "^2.0.0",
84
- "@dialpad/dialtone-css": "8.34.0",
84
+ "@dialpad/dialtone-css": "8.36.0",
85
85
  "@dialpad/generator-dialtone": "0.1.0"
86
86
  },
87
87
  "peerDependencies": {
88
88
  "vue": ">=2.6",
89
- "@dialpad/dialtone-css": "^8.34.0"
89
+ "@dialpad/dialtone-css": "^8.36.0"
90
90
  },
91
91
  "bugs": {
92
92
  "email": "dialtone@dialpad.com"