@dialpad/dialtone-vue 2.135.0 → 2.136.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.
- package/dist/component-documentation.json +1 -1
- package/dist/dialtone-vue.cjs +1 -0
- package/dist/dialtone-vue.cjs.map +1 -1
- package/dist/dialtone-vue.js +2 -1
- package/dist/lib/button.cjs +11 -2
- package/dist/lib/button.cjs.map +1 -1
- package/dist/lib/button.js +12 -3
- package/dist/lib/button.js.map +1 -1
- package/dist/lib/emoji-picker.cjs +97 -16
- package/dist/lib/emoji-picker.cjs.map +1 -1
- package/dist/lib/emoji-picker.js +97 -16
- package/dist/lib/emoji-picker.js.map +1 -1
- package/dist/lib/link.cjs +1 -0
- package/dist/lib/link.cjs.map +1 -1
- package/dist/lib/link.js +2 -1
- package/dist/lib/tooltip.cjs +26 -37
- package/dist/lib/tooltip.cjs.map +1 -1
- package/dist/lib/tooltip.js +26 -37
- package/dist/lib/tooltip.js.map +1 -1
- package/dist/types/components/button/button.vue.d.ts +21 -2
- package/dist/types/components/button/button.vue.d.ts.map +1 -1
- package/dist/types/components/emoji_picker/emoji_picker.vue.d.ts +1 -68
- package/dist/types/components/link/index.d.ts +1 -1
- package/dist/types/components/tooltip/tooltip.vue.d.ts +9 -13
- package/dist/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
- package/package.json +5 -5
package/dist/lib/tooltip.js
CHANGED
|
@@ -96,7 +96,7 @@ const _sfc_main = {
|
|
|
96
96
|
*/
|
|
97
97
|
sticky: {
|
|
98
98
|
type: [Boolean, String],
|
|
99
|
-
default:
|
|
99
|
+
default: true,
|
|
100
100
|
validator: (sticky) => {
|
|
101
101
|
return TOOLTIP_STICKY_VALUES.includes(sticky);
|
|
102
102
|
}
|
|
@@ -150,7 +150,7 @@ const _sfc_main = {
|
|
|
150
150
|
default: null
|
|
151
151
|
},
|
|
152
152
|
/**
|
|
153
|
-
* Whether the tooltip should have a transition effect.
|
|
153
|
+
* Whether the tooltip should have a transition effect (fade).
|
|
154
154
|
*/
|
|
155
155
|
transition: {
|
|
156
156
|
type: Boolean,
|
|
@@ -195,7 +195,7 @@ const _sfc_main = {
|
|
|
195
195
|
inTimer: null,
|
|
196
196
|
// Internal state for whether the tooltip is shown. Changing the prop
|
|
197
197
|
// will update this.
|
|
198
|
-
|
|
198
|
+
internalShow: false,
|
|
199
199
|
// this is where the placement currently is, this can be different than
|
|
200
200
|
// the placement prop when there is not enough available room for the tip
|
|
201
201
|
// to display and it uses a fallback placement.
|
|
@@ -203,20 +203,6 @@ const _sfc_main = {
|
|
|
203
203
|
};
|
|
204
204
|
},
|
|
205
205
|
computed: {
|
|
206
|
-
// whether the tooltip is visible or not.
|
|
207
|
-
isVisible() {
|
|
208
|
-
var _a, _b;
|
|
209
|
-
const hasMessage = !!((_a = this.message) == null ? void 0 : _a.trim());
|
|
210
|
-
const hasDefaultSlot = !!((_b = this.$slots) == null ? void 0 : _b.default);
|
|
211
|
-
const isDeviceCompatible = !this.isTouchDevice;
|
|
212
|
-
const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);
|
|
213
|
-
return shouldBeVisible && isDeviceCompatible;
|
|
214
|
-
},
|
|
215
|
-
tooltipListeners() {
|
|
216
|
-
return {
|
|
217
|
-
...this.$listeners
|
|
218
|
-
};
|
|
219
|
-
},
|
|
220
206
|
// eslint-disable-next-line complexity
|
|
221
207
|
tippyProps() {
|
|
222
208
|
return {
|
|
@@ -226,12 +212,11 @@ const _sfc_main = {
|
|
|
226
212
|
sticky: this.sticky,
|
|
227
213
|
theme: this.inverted ? "inverted" : void 0,
|
|
228
214
|
animation: this.transition ? "fade" : false,
|
|
229
|
-
// onShown only triggers when transition is truthy
|
|
230
|
-
onShown:
|
|
231
|
-
|
|
232
|
-
onShow:
|
|
233
|
-
|
|
234
|
-
onHidden: this.onLeaveTransitionComplete,
|
|
215
|
+
// onShown only triggers when transition is truthy
|
|
216
|
+
onShown: (tooltipInstance) => this.onShow(tooltipInstance, "onShown"),
|
|
217
|
+
// onShown will always be called, but it will be called before the animation is complete
|
|
218
|
+
onShow: (tooltipInstance) => this.onShow(tooltipInstance, "onShow"),
|
|
219
|
+
onHidden: this.onHide,
|
|
235
220
|
popperOptions: getPopperOptions({
|
|
236
221
|
fallbackPlacements: this.fallbackPlacements,
|
|
237
222
|
hasHideModifierEnabled: true,
|
|
@@ -251,13 +236,13 @@ const _sfc_main = {
|
|
|
251
236
|
show: {
|
|
252
237
|
handler: function(show) {
|
|
253
238
|
if (show !== null) {
|
|
254
|
-
this.
|
|
239
|
+
this.internalShow = show;
|
|
255
240
|
}
|
|
256
241
|
},
|
|
257
242
|
immediate: true
|
|
258
243
|
},
|
|
259
|
-
|
|
260
|
-
if (
|
|
244
|
+
internalShow(value) {
|
|
245
|
+
if (value) {
|
|
261
246
|
this.setProps();
|
|
262
247
|
this.tip.show();
|
|
263
248
|
} else {
|
|
@@ -277,9 +262,6 @@ const _sfc_main = {
|
|
|
277
262
|
}
|
|
278
263
|
this.externalAnchor && this.addExternalAnchorEventListeners();
|
|
279
264
|
this.tip = createTippy(this.anchor, this.initOptions());
|
|
280
|
-
if (this.isShown) {
|
|
281
|
-
this.tip.show();
|
|
282
|
-
}
|
|
283
265
|
},
|
|
284
266
|
beforeDestroy() {
|
|
285
267
|
var _a;
|
|
@@ -313,11 +295,11 @@ const _sfc_main = {
|
|
|
313
295
|
triggerShow(e) {
|
|
314
296
|
if (e.type === "focusin") {
|
|
315
297
|
if (this.show === null && this.hasVisibleFocus()) {
|
|
316
|
-
this.
|
|
298
|
+
this.internalShow = true;
|
|
317
299
|
}
|
|
318
300
|
} else {
|
|
319
301
|
if (this.show === null)
|
|
320
|
-
this.
|
|
302
|
+
this.internalShow = true;
|
|
321
303
|
}
|
|
322
304
|
},
|
|
323
305
|
onLeaveAnchor(e) {
|
|
@@ -329,12 +311,12 @@ const _sfc_main = {
|
|
|
329
311
|
},
|
|
330
312
|
triggerHide() {
|
|
331
313
|
if (this.show === null)
|
|
332
|
-
this.
|
|
314
|
+
this.internalShow = false;
|
|
333
315
|
},
|
|
334
316
|
onChangePlacement(placement) {
|
|
335
317
|
this.currentPlacement = placement;
|
|
336
318
|
},
|
|
337
|
-
|
|
319
|
+
onHide() {
|
|
338
320
|
var _a;
|
|
339
321
|
(_a = this.tip) == null ? void 0 : _a.unmount();
|
|
340
322
|
this.$emit("shown", false);
|
|
@@ -342,7 +324,13 @@ const _sfc_main = {
|
|
|
342
324
|
this.$emit("update:show", false);
|
|
343
325
|
}
|
|
344
326
|
},
|
|
345
|
-
|
|
327
|
+
onShow(tooltipInstance, callingMethod) {
|
|
328
|
+
if (!this.tooltipHasContent(tooltipInstance)) {
|
|
329
|
+
return false;
|
|
330
|
+
}
|
|
331
|
+
if (this.transition && callingMethod === "onShow") {
|
|
332
|
+
return;
|
|
333
|
+
}
|
|
346
334
|
this.$emit("shown", true);
|
|
347
335
|
if (this.show !== null) {
|
|
348
336
|
this.$emit("update:show", true);
|
|
@@ -362,10 +350,11 @@ const _sfc_main = {
|
|
|
362
350
|
onMount() {
|
|
363
351
|
this.setProps();
|
|
364
352
|
},
|
|
365
|
-
|
|
353
|
+
tooltipHasContent(tooltipInstance) {
|
|
366
354
|
if (tooltipInstance.props.content.textContent.trim().length === 0) {
|
|
367
355
|
return false;
|
|
368
356
|
}
|
|
357
|
+
return true;
|
|
369
358
|
},
|
|
370
359
|
// set initial options here. If any of the options need to dynamically change, they should be put in
|
|
371
360
|
// tippyProps instead.
|
|
@@ -382,7 +371,7 @@ const _sfc_main = {
|
|
|
382
371
|
// disable tooltip from displaying on touch devices
|
|
383
372
|
touch: false,
|
|
384
373
|
onMount: this.onMount,
|
|
385
|
-
|
|
374
|
+
showOnCreate: this.internalShow,
|
|
386
375
|
popperOptions: getPopperOptions({
|
|
387
376
|
hasHideModifierEnabled: true
|
|
388
377
|
})
|
|
@@ -418,7 +407,7 @@ var _sfc_render = function render() {
|
|
|
418
407
|
[_vm.TOOLTIP_KIND_MODIFIERS.inverted]: _vm.inverted
|
|
419
408
|
},
|
|
420
409
|
_vm.contentClass
|
|
421
|
-
], attrs: { "id": _vm.id, "data-qa": "dt-tooltip" } }, _vm
|
|
410
|
+
], attrs: { "id": _vm.id, "data-qa": "dt-tooltip" } }, _vm.$listeners), [_vm._t("default", function() {
|
|
422
411
|
return [_vm._v(" " + _vm._s(_vm.message) + " ")];
|
|
423
412
|
})], 2)]);
|
|
424
413
|
};
|
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=\"tooltipListeners\"\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: false,\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.\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 isShown: 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 // whether the tooltip is visible or not.\n isVisible () {\n const hasMessage = !!this.message?.trim();\n const hasDefaultSlot = !!this.$slots?.default;\n const isDeviceCompatible = !this.isTouchDevice;\n\n const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);\n\n return shouldBeVisible && isDeviceCompatible;\n },\n\n tooltipListeners () {\n return {\n ...this.$listeners,\n };\n },\n\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, otherwise use onShow\n onShown: this.transition ? this.onEnterTransitionComplete : () => {},\n onShow: this.transition ? () => {} : this.onEnterTransitionComplete,\n onHidden: this.onLeaveTransitionComplete,\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.isShown = show;\n }\n },\n\n immediate: true,\n },\n\n isShown (isShown) {\n if (isShown) {\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 // immediate watcher fires before mounted, so have this here in case\n // show prop was initially set to true.\n if (this.isShown) {\n this.tip.show();\n }\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.isShown = true;\n }\n } else {\n if (this.show === null) this.isShown = 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.isShown = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onLeaveTransitionComplete () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onEnterTransitionComplete () {\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 onShow (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\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 onShow: this.onShow,\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 * 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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"}
|
|
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
36
36
|
};
|
|
37
37
|
/**
|
|
38
38
|
* The color of the link and button if the button is styled as a link.
|
|
39
|
-
* @values default, warning, danger, success, muted
|
|
39
|
+
* @values default, warning, danger, success, muted
|
|
40
40
|
* @see DtLink
|
|
41
41
|
*/
|
|
42
42
|
linkKind: {
|
|
@@ -44,6 +44,15 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
44
44
|
default: string;
|
|
45
45
|
validator: (lk: unknown) => boolean;
|
|
46
46
|
};
|
|
47
|
+
/**
|
|
48
|
+
* Determines whether the link should have inverted styling if the button is styled as a link.
|
|
49
|
+
* @values true, false
|
|
50
|
+
* @see DtLink
|
|
51
|
+
*/
|
|
52
|
+
linkInverted: {
|
|
53
|
+
type: BooleanConstructor;
|
|
54
|
+
default: boolean;
|
|
55
|
+
};
|
|
47
56
|
/**
|
|
48
57
|
* HTML button disabled attribute
|
|
49
58
|
* <a
|
|
@@ -194,7 +203,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
194
203
|
};
|
|
195
204
|
/**
|
|
196
205
|
* The color of the link and button if the button is styled as a link.
|
|
197
|
-
* @values default, warning, danger, success, muted
|
|
206
|
+
* @values default, warning, danger, success, muted
|
|
198
207
|
* @see DtLink
|
|
199
208
|
*/
|
|
200
209
|
linkKind: {
|
|
@@ -202,6 +211,15 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
202
211
|
default: string;
|
|
203
212
|
validator: (lk: unknown) => boolean;
|
|
204
213
|
};
|
|
214
|
+
/**
|
|
215
|
+
* Determines whether the link should have inverted styling if the button is styled as a link.
|
|
216
|
+
* @values true, false
|
|
217
|
+
* @see DtLink
|
|
218
|
+
*/
|
|
219
|
+
linkInverted: {
|
|
220
|
+
type: BooleanConstructor;
|
|
221
|
+
default: boolean;
|
|
222
|
+
};
|
|
205
223
|
/**
|
|
206
224
|
* HTML button disabled attribute
|
|
207
225
|
* <a
|
|
@@ -308,6 +326,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
308
326
|
iconPosition: string;
|
|
309
327
|
importance: string;
|
|
310
328
|
linkKind: string;
|
|
329
|
+
linkInverted: boolean;
|
|
311
330
|
disabled: boolean;
|
|
312
331
|
width: string;
|
|
313
332
|
assertiveOnFocus: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.vue.d.ts","sourceRoot":"","sources":["../../../../components/button/button.vue.js"],"names":[],"mappings":";IA0BI;;;OAGG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;OAIG;;;;;IAMH;;;;OAIG;;;;;;IAOH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;OAUG;;;;;;IAOH;;;;;;OAMG;;;;;IAMH;;;OAGG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;;;OAKG;;;;;IAMH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"button.vue.d.ts","sourceRoot":"","sources":["../../../../components/button/button.vue.js"],"names":[],"mappings":";IA0BI;;;OAGG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;OAIG;;;;;IAMH;;;;OAIG;;;;;;IAOH;;;;OAIG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;OAUG;;;;;;IAOH;;;;;;OAMG;;;;;IAMH;;;OAGG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;;;OAKG;;;;;IAMH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;IA7JH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;OAIG;;;;;IAMH;;;;OAIG;;;;;;IAOH;;;;OAIG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;OAUG;;;;;;IAOH;;;;;;OAMG;;;;;IAMH;;;OAGG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;;;OAKG;;;;;IAMH;;;;OAIG"}
|
|
@@ -1,70 +1,3 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{
|
|
2
|
-
recentlyUsedEmojis: {
|
|
3
|
-
type: ArrayConstructor;
|
|
4
|
-
};
|
|
5
|
-
searchPlaceholderLabel: {
|
|
6
|
-
type: StringConstructor;
|
|
7
|
-
required: true;
|
|
8
|
-
};
|
|
9
|
-
searchResultsLabel: {
|
|
10
|
-
type: StringConstructor;
|
|
11
|
-
required: true;
|
|
12
|
-
};
|
|
13
|
-
searchNoResultsLabel: {
|
|
14
|
-
type: StringConstructor;
|
|
15
|
-
required: true;
|
|
16
|
-
};
|
|
17
|
-
tabSetLabels: {
|
|
18
|
-
type: ArrayConstructor;
|
|
19
|
-
required: true;
|
|
20
|
-
};
|
|
21
|
-
skinTone: {
|
|
22
|
-
type: StringConstructor;
|
|
23
|
-
};
|
|
24
|
-
skinSelectorButtonTooltipLabel: {
|
|
25
|
-
type: StringConstructor;
|
|
26
|
-
required: true;
|
|
27
|
-
};
|
|
28
|
-
}, {}, {
|
|
29
|
-
searchQuery: string;
|
|
30
|
-
highlightedEmoji: null;
|
|
31
|
-
selectedTabset: {};
|
|
32
|
-
scrollIntoTab: number;
|
|
33
|
-
isScrolling: boolean;
|
|
34
|
-
}, {
|
|
35
|
-
showRecentlyUsedTab(): boolean;
|
|
36
|
-
}, {
|
|
37
|
-
scrollToSelectedTabset(tabId: any): void;
|
|
38
|
-
updateScrollIntoTab(value: any): void;
|
|
39
|
-
updateIsScrolling(value: any): void;
|
|
40
|
-
updateHighlightedEmoji(emoji: any): void;
|
|
41
|
-
}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
|
|
42
|
-
recentlyUsedEmojis: {
|
|
43
|
-
type: ArrayConstructor;
|
|
44
|
-
};
|
|
45
|
-
searchPlaceholderLabel: {
|
|
46
|
-
type: StringConstructor;
|
|
47
|
-
required: true;
|
|
48
|
-
};
|
|
49
|
-
searchResultsLabel: {
|
|
50
|
-
type: StringConstructor;
|
|
51
|
-
required: true;
|
|
52
|
-
};
|
|
53
|
-
searchNoResultsLabel: {
|
|
54
|
-
type: StringConstructor;
|
|
55
|
-
required: true;
|
|
56
|
-
};
|
|
57
|
-
tabSetLabels: {
|
|
58
|
-
type: ArrayConstructor;
|
|
59
|
-
required: true;
|
|
60
|
-
};
|
|
61
|
-
skinTone: {
|
|
62
|
-
type: StringConstructor;
|
|
63
|
-
};
|
|
64
|
-
skinSelectorButtonTooltipLabel: {
|
|
65
|
-
type: StringConstructor;
|
|
66
|
-
required: true;
|
|
67
|
-
};
|
|
68
|
-
}>>, {}>;
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
69
2
|
export default _default;
|
|
70
3
|
//# sourceMappingURL=emoji_picker.vue.d.ts.map
|
|
@@ -136,7 +136,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
136
136
|
default: null;
|
|
137
137
|
};
|
|
138
138
|
/**
|
|
139
|
-
* Whether the tooltip should have a transition effect.
|
|
139
|
+
* Whether the tooltip should have a transition effect (fade).
|
|
140
140
|
*/
|
|
141
141
|
transition: {
|
|
142
142
|
type: BooleanConstructor;
|
|
@@ -173,13 +173,9 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
173
173
|
};
|
|
174
174
|
tip: null;
|
|
175
175
|
inTimer: null;
|
|
176
|
-
|
|
176
|
+
internalShow: boolean;
|
|
177
177
|
currentPlacement: any;
|
|
178
178
|
}, {
|
|
179
|
-
isVisible(): any;
|
|
180
|
-
tooltipListeners(): {
|
|
181
|
-
[x: string]: Function | Function[];
|
|
182
|
-
};
|
|
183
179
|
tippyProps(): {
|
|
184
180
|
offset: any;
|
|
185
181
|
delay: number | boolean;
|
|
@@ -187,8 +183,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
187
183
|
sticky: any;
|
|
188
184
|
theme: string | undefined;
|
|
189
185
|
animation: string | boolean;
|
|
190
|
-
onShown: () =>
|
|
191
|
-
onShow: () =>
|
|
186
|
+
onShown: (tooltipInstance: any) => false | undefined;
|
|
187
|
+
onShow: (tooltipInstance: any) => false | undefined;
|
|
192
188
|
onHidden: () => void;
|
|
193
189
|
popperOptions: {
|
|
194
190
|
modifiers: ({
|
|
@@ -231,11 +227,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
231
227
|
onLeaveAnchor(e: any): void;
|
|
232
228
|
triggerHide(): void;
|
|
233
229
|
onChangePlacement(placement: any): void;
|
|
234
|
-
|
|
235
|
-
|
|
230
|
+
onHide(): void;
|
|
231
|
+
onShow(tooltipInstance: any, callingMethod: any): false | undefined;
|
|
236
232
|
setProps(): void;
|
|
237
233
|
onMount(): void;
|
|
238
|
-
|
|
234
|
+
tooltipHasContent(tooltipInstance: any): boolean;
|
|
239
235
|
initOptions(): {
|
|
240
236
|
content: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue/types/v3-component-options.js").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> | import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>> | (Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue/types/v3-component-options.js").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> | import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>)[] | undefined;
|
|
241
237
|
arrow: string;
|
|
@@ -245,7 +241,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
245
241
|
hideOnClick: boolean;
|
|
246
242
|
touch: boolean;
|
|
247
243
|
onMount: () => void;
|
|
248
|
-
|
|
244
|
+
showOnCreate: boolean;
|
|
249
245
|
popperOptions: {
|
|
250
246
|
modifiers: ({
|
|
251
247
|
name: string;
|
|
@@ -418,7 +414,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
418
414
|
default: null;
|
|
419
415
|
};
|
|
420
416
|
/**
|
|
421
|
-
* Whether the tooltip should have a transition effect.
|
|
417
|
+
* Whether the tooltip should have a transition effect (fade).
|
|
422
418
|
*/
|
|
423
419
|
transition: {
|
|
424
420
|
type: BooleanConstructor;
|
|
@@ -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
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.136.0",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"emoji-toolkit": "8.0.0",
|
|
33
33
|
"regex-combined-emojis": "1.6.0",
|
|
34
34
|
"tippy.js": "6.3.7",
|
|
35
|
-
"@dialpad/dialtone-emojis": "1.0.
|
|
36
|
-
"@dialpad/dialtone-icons": "4.16.
|
|
35
|
+
"@dialpad/dialtone-emojis": "1.0.7",
|
|
36
|
+
"@dialpad/dialtone-icons": "4.16.3"
|
|
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.
|
|
84
|
+
"@dialpad/dialtone-css": "8.34.0",
|
|
85
85
|
"@dialpad/generator-dialtone": "0.1.0"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
88
|
"vue": ">=2.6",
|
|
89
|
-
"@dialpad/dialtone-css": "^8.
|
|
89
|
+
"@dialpad/dialtone-css": "^8.34.0"
|
|
90
90
|
},
|
|
91
91
|
"bugs": {
|
|
92
92
|
"email": "dialtone@dialpad.com"
|