vue-tippy 6.0.0-alpha.3 → 6.0.0-alpha.33
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/LICENSE +1 -1
- package/README.md +105 -2
- package/dist/vue-tippy.cjs.js +489 -223
- package/dist/vue-tippy.cjs.prod.js +489 -223
- package/dist/vue-tippy.d.ts +802 -0
- package/dist/vue-tippy.esm-bundler.js +487 -225
- package/dist/vue-tippy.esm.js +487 -225
- package/dist/vue-tippy.global.js +489 -223
- package/dist/vue-tippy.global.prod.js +3 -3
- package/package.json +8 -4
package/dist/vue-tippy.esm.js
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
/*!
|
2
|
-
* vue-tippy v6.0.0-alpha.
|
3
|
-
* (c)
|
2
|
+
* vue-tippy v6.0.0-alpha.32
|
3
|
+
* (c) 2021 Georges KABBOUCHI
|
4
4
|
* @license MIT
|
5
5
|
*/
|
6
|
-
import {
|
6
|
+
import { getCurrentInstance, ref, onMounted, onUnmounted, isRef, isReactive, watch, isVNode, render as render$1, h, defineComponent } from 'vue';
|
7
7
|
|
8
8
|
var top = 'top';
|
9
9
|
var bottom = 'bottom';
|
@@ -41,10 +41,11 @@ function getNodeName(element) {
|
|
41
41
|
return element ? (element.nodeName || '').toLowerCase() : null;
|
42
42
|
}
|
43
43
|
|
44
|
-
/*:: import type { Window } from '../types'; */
|
45
|
-
|
46
|
-
/*:: declare function getWindow(node: Node | Window): Window; */
|
47
44
|
function getWindow(node) {
|
45
|
+
if (node == null) {
|
46
|
+
return window;
|
47
|
+
}
|
48
|
+
|
48
49
|
if (node.toString() !== '[object Window]') {
|
49
50
|
var ownerDocument = node.ownerDocument;
|
50
51
|
return ownerDocument ? ownerDocument.defaultView || window : window;
|
@@ -53,26 +54,22 @@ function getWindow(node) {
|
|
53
54
|
return node;
|
54
55
|
}
|
55
56
|
|
56
|
-
/*:: declare function isElement(node: mixed): boolean %checks(node instanceof
|
57
|
-
Element); */
|
58
|
-
|
59
57
|
function isElement(node) {
|
60
58
|
var OwnElement = getWindow(node).Element;
|
61
59
|
return node instanceof OwnElement || node instanceof Element;
|
62
60
|
}
|
63
|
-
/*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
|
64
|
-
HTMLElement); */
|
65
|
-
|
66
61
|
|
67
62
|
function isHTMLElement(node) {
|
68
63
|
var OwnElement = getWindow(node).HTMLElement;
|
69
64
|
return node instanceof OwnElement || node instanceof HTMLElement;
|
70
65
|
}
|
71
|
-
/*:: declare function isShadowRoot(node: mixed): boolean %checks(node instanceof
|
72
|
-
ShadowRoot); */
|
73
|
-
|
74
66
|
|
75
67
|
function isShadowRoot(node) {
|
68
|
+
// IE 11 has no ShadowRoot
|
69
|
+
if (typeof ShadowRoot === 'undefined') {
|
70
|
+
return false;
|
71
|
+
}
|
72
|
+
|
76
73
|
var OwnElement = getWindow(node).ShadowRoot;
|
77
74
|
return node instanceof OwnElement || node instanceof ShadowRoot;
|
78
75
|
}
|
@@ -90,7 +87,7 @@ function applyStyles(_ref) {
|
|
90
87
|
return;
|
91
88
|
} // Flow doesn't support to extend this property, but it's the most
|
92
89
|
// effective way to apply styles to an HTMLElement
|
93
|
-
// $FlowFixMe
|
90
|
+
// $FlowFixMe[cannot-write]
|
94
91
|
|
95
92
|
|
96
93
|
Object.assign(element.style, style);
|
@@ -121,6 +118,7 @@ function effect(_ref2) {
|
|
121
118
|
reference: {}
|
122
119
|
};
|
123
120
|
Object.assign(state.elements.popper.style, initialStyles.popper);
|
121
|
+
state.styles = initialStyles;
|
124
122
|
|
125
123
|
if (state.elements.arrow) {
|
126
124
|
Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
@@ -139,10 +137,7 @@ function effect(_ref2) {
|
|
139
137
|
|
140
138
|
if (!isHTMLElement(element) || !getNodeName(element)) {
|
141
139
|
return;
|
142
|
-
}
|
143
|
-
// effective way to apply styles to an HTMLElement
|
144
|
-
// $FlowFixMe
|
145
|
-
|
140
|
+
}
|
146
141
|
|
147
142
|
Object.assign(element.style, style);
|
148
143
|
Object.keys(attributes).forEach(function (attribute) {
|
@@ -166,14 +161,42 @@ function getBasePlacement(placement) {
|
|
166
161
|
return placement.split('-')[0];
|
167
162
|
}
|
168
163
|
|
169
|
-
|
164
|
+
function getBoundingClientRect(element) {
|
165
|
+
var rect = element.getBoundingClientRect();
|
166
|
+
return {
|
167
|
+
width: rect.width,
|
168
|
+
height: rect.height,
|
169
|
+
top: rect.top,
|
170
|
+
right: rect.right,
|
171
|
+
bottom: rect.bottom,
|
172
|
+
left: rect.left,
|
173
|
+
x: rect.left,
|
174
|
+
y: rect.top
|
175
|
+
};
|
176
|
+
}
|
177
|
+
|
170
178
|
// means it doesn't take into account transforms.
|
179
|
+
|
171
180
|
function getLayoutRect(element) {
|
181
|
+
var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
|
182
|
+
// Fixes https://github.com/popperjs/popper-core/issues/1223
|
183
|
+
|
184
|
+
var width = element.offsetWidth;
|
185
|
+
var height = element.offsetHeight;
|
186
|
+
|
187
|
+
if (Math.abs(clientRect.width - width) <= 1) {
|
188
|
+
width = clientRect.width;
|
189
|
+
}
|
190
|
+
|
191
|
+
if (Math.abs(clientRect.height - height) <= 1) {
|
192
|
+
height = clientRect.height;
|
193
|
+
}
|
194
|
+
|
172
195
|
return {
|
173
196
|
x: element.offsetLeft,
|
174
197
|
y: element.offsetTop,
|
175
|
-
width:
|
176
|
-
height:
|
198
|
+
width: width,
|
199
|
+
height: height
|
177
200
|
};
|
178
201
|
}
|
179
202
|
|
@@ -189,7 +212,7 @@ function contains(parent, child) {
|
|
189
212
|
do {
|
190
213
|
if (next && parent.isSameNode(next)) {
|
191
214
|
return true;
|
192
|
-
} // $FlowFixMe: need a better way to handle this...
|
215
|
+
} // $FlowFixMe[prop-missing]: need a better way to handle this...
|
193
216
|
|
194
217
|
|
195
218
|
next = next.parentNode || next.host;
|
@@ -209,8 +232,9 @@ function isTableElement(element) {
|
|
209
232
|
}
|
210
233
|
|
211
234
|
function getDocumentElement(element) {
|
212
|
-
// $FlowFixMe: assume body is always available
|
213
|
-
return ((isElement(element) ? element.ownerDocument :
|
235
|
+
// $FlowFixMe[incompatible-return]: assume body is always available
|
236
|
+
return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
|
237
|
+
element.document) || window.document).documentElement;
|
214
238
|
}
|
215
239
|
|
216
240
|
function getParentNode(element) {
|
@@ -218,12 +242,13 @@ function getParentNode(element) {
|
|
218
242
|
return element;
|
219
243
|
}
|
220
244
|
|
221
|
-
return (//
|
245
|
+
return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
|
246
|
+
// $FlowFixMe[incompatible-return]
|
247
|
+
// $FlowFixMe[prop-missing]
|
222
248
|
element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
|
223
|
-
element.parentNode || // DOM Element detected
|
224
|
-
|
225
|
-
|
226
|
-
// $FlowFixMe: HTMLElement is a Node
|
249
|
+
element.parentNode || ( // DOM Element detected
|
250
|
+
isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
|
251
|
+
// $FlowFixMe[incompatible-call]: HTMLElement is a Node
|
227
252
|
getDocumentElement(element) // fallback
|
228
253
|
|
229
254
|
);
|
@@ -235,29 +260,32 @@ function getTrueOffsetParent(element) {
|
|
235
260
|
return null;
|
236
261
|
}
|
237
262
|
|
238
|
-
|
239
|
-
|
240
|
-
if (offsetParent) {
|
241
|
-
var html = getDocumentElement(offsetParent);
|
242
|
-
|
243
|
-
if (getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && getComputedStyle(html).position !== 'static') {
|
244
|
-
return html;
|
245
|
-
}
|
246
|
-
}
|
247
|
-
|
248
|
-
return offsetParent;
|
263
|
+
return element.offsetParent;
|
249
264
|
} // `.offsetParent` reports `null` for fixed elements, while absolute elements
|
250
265
|
// return the containing block
|
251
266
|
|
252
267
|
|
253
268
|
function getContainingBlock(element) {
|
269
|
+
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
|
270
|
+
var isIE = navigator.userAgent.indexOf('Trident') !== -1;
|
271
|
+
|
272
|
+
if (isIE && isHTMLElement(element)) {
|
273
|
+
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
274
|
+
var elementCss = getComputedStyle(element);
|
275
|
+
|
276
|
+
if (elementCss.position === 'fixed') {
|
277
|
+
return null;
|
278
|
+
}
|
279
|
+
}
|
280
|
+
|
254
281
|
var currentNode = getParentNode(element);
|
255
282
|
|
256
283
|
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
|
257
284
|
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
|
258
285
|
// create a containing block.
|
286
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
259
287
|
|
260
|
-
if (css.transform !== 'none' || css.perspective !== 'none' || css.willChange && css.willChange !== '
|
288
|
+
if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
|
261
289
|
return currentNode;
|
262
290
|
} else {
|
263
291
|
currentNode = currentNode.parentNode;
|
@@ -277,7 +305,7 @@ function getOffsetParent(element) {
|
|
277
305
|
offsetParent = getTrueOffsetParent(offsetParent);
|
278
306
|
}
|
279
307
|
|
280
|
-
if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
|
308
|
+
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
|
281
309
|
return window;
|
282
310
|
}
|
283
311
|
|
@@ -288,8 +316,12 @@ function getMainAxisFromPlacement(placement) {
|
|
288
316
|
return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
|
289
317
|
}
|
290
318
|
|
291
|
-
|
292
|
-
|
319
|
+
var max = Math.max;
|
320
|
+
var min = Math.min;
|
321
|
+
var round = Math.round;
|
322
|
+
|
323
|
+
function within(min$1, value, max$1) {
|
324
|
+
return max(min$1, min(value, max$1));
|
293
325
|
}
|
294
326
|
|
295
327
|
function getFreshSideObject() {
|
@@ -302,7 +334,7 @@ function getFreshSideObject() {
|
|
302
334
|
}
|
303
335
|
|
304
336
|
function mergePaddingObject(paddingObject) {
|
305
|
-
return Object.assign(
|
337
|
+
return Object.assign({}, getFreshSideObject(), paddingObject);
|
306
338
|
}
|
307
339
|
|
308
340
|
function expandToHashMap(value, keys) {
|
@@ -312,11 +344,19 @@ function expandToHashMap(value, keys) {
|
|
312
344
|
}, {});
|
313
345
|
}
|
314
346
|
|
347
|
+
var toPaddingObject = function toPaddingObject(padding, state) {
|
348
|
+
padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
|
349
|
+
placement: state.placement
|
350
|
+
})) : padding;
|
351
|
+
return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
|
352
|
+
};
|
353
|
+
|
315
354
|
function arrow(_ref) {
|
316
355
|
var _state$modifiersData$;
|
317
356
|
|
318
357
|
var state = _ref.state,
|
319
|
-
name = _ref.name
|
358
|
+
name = _ref.name,
|
359
|
+
options = _ref.options;
|
320
360
|
var arrowElement = state.elements.arrow;
|
321
361
|
var popperOffsets = state.modifiersData.popperOffsets;
|
322
362
|
var basePlacement = getBasePlacement(state.placement);
|
@@ -328,7 +368,7 @@ function arrow(_ref) {
|
|
328
368
|
return;
|
329
369
|
}
|
330
370
|
|
331
|
-
var paddingObject =
|
371
|
+
var paddingObject = toPaddingObject(options.padding, state);
|
332
372
|
var arrowRect = getLayoutRect(arrowElement);
|
333
373
|
var minProp = axis === 'y' ? top : left;
|
334
374
|
var maxProp = axis === 'y' ? bottom : right;
|
@@ -350,12 +390,9 @@ function arrow(_ref) {
|
|
350
390
|
|
351
391
|
function effect$1(_ref2) {
|
352
392
|
var state = _ref2.state,
|
353
|
-
options = _ref2.options
|
354
|
-
name = _ref2.name;
|
393
|
+
options = _ref2.options;
|
355
394
|
var _options$element = options.element,
|
356
|
-
arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element
|
357
|
-
_options$padding = options.padding,
|
358
|
-
padding = _options$padding === void 0 ? 0 : _options$padding;
|
395
|
+
arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
|
359
396
|
|
360
397
|
if (arrowElement == null) {
|
361
398
|
return;
|
@@ -376,9 +413,6 @@ function effect$1(_ref2) {
|
|
376
413
|
}
|
377
414
|
|
378
415
|
state.elements.arrow = arrowElement;
|
379
|
-
state.modifiersData[name + "#persistent"] = {
|
380
|
-
padding: mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements))
|
381
|
-
};
|
382
416
|
} // eslint-disable-next-line import/no-unused-modules
|
383
417
|
|
384
418
|
|
@@ -401,14 +435,14 @@ var unsetSides = {
|
|
401
435
|
// Zooming can change the DPR, but it seems to report a value that will
|
402
436
|
// cleanly divide the values into the appropriate subpixels.
|
403
437
|
|
404
|
-
function
|
438
|
+
function roundOffsetsByDPR(_ref) {
|
405
439
|
var x = _ref.x,
|
406
440
|
y = _ref.y;
|
407
441
|
var win = window;
|
408
442
|
var dpr = win.devicePixelRatio || 1;
|
409
443
|
return {
|
410
|
-
x:
|
411
|
-
y:
|
444
|
+
x: round(round(x * dpr) / dpr) || 0,
|
445
|
+
y: round(round(y * dpr) / dpr) || 0
|
412
446
|
};
|
413
447
|
}
|
414
448
|
|
@@ -421,11 +455,14 @@ function mapToStyles(_ref2) {
|
|
421
455
|
offsets = _ref2.offsets,
|
422
456
|
position = _ref2.position,
|
423
457
|
gpuAcceleration = _ref2.gpuAcceleration,
|
424
|
-
adaptive = _ref2.adaptive
|
458
|
+
adaptive = _ref2.adaptive,
|
459
|
+
roundOffsets = _ref2.roundOffsets;
|
425
460
|
|
426
|
-
var
|
427
|
-
x =
|
428
|
-
|
461
|
+
var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
|
462
|
+
_ref3$x = _ref3.x,
|
463
|
+
x = _ref3$x === void 0 ? 0 : _ref3$x,
|
464
|
+
_ref3$y = _ref3.y,
|
465
|
+
y = _ref3$y === void 0 ? 0 : _ref3$y;
|
429
466
|
|
430
467
|
var hasX = offsets.hasOwnProperty('x');
|
431
468
|
var hasY = offsets.hasOwnProperty('y');
|
@@ -435,23 +472,32 @@ function mapToStyles(_ref2) {
|
|
435
472
|
|
436
473
|
if (adaptive) {
|
437
474
|
var offsetParent = getOffsetParent(popper);
|
475
|
+
var heightProp = 'clientHeight';
|
476
|
+
var widthProp = 'clientWidth';
|
438
477
|
|
439
478
|
if (offsetParent === getWindow(popper)) {
|
440
479
|
offsetParent = getDocumentElement(popper);
|
441
|
-
} // $FlowFixMe: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
|
442
480
|
|
443
|
-
|
481
|
+
if (getComputedStyle(offsetParent).position !== 'static') {
|
482
|
+
heightProp = 'scrollHeight';
|
483
|
+
widthProp = 'scrollWidth';
|
484
|
+
}
|
485
|
+
} // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
|
486
|
+
|
444
487
|
|
488
|
+
offsetParent = offsetParent;
|
445
489
|
|
446
490
|
if (placement === top) {
|
447
|
-
sideY = bottom;
|
448
|
-
|
491
|
+
sideY = bottom; // $FlowFixMe[prop-missing]
|
492
|
+
|
493
|
+
y -= offsetParent[heightProp] - popperRect.height;
|
449
494
|
y *= gpuAcceleration ? 1 : -1;
|
450
495
|
}
|
451
496
|
|
452
497
|
if (placement === left) {
|
453
|
-
sideX = right;
|
454
|
-
|
498
|
+
sideX = right; // $FlowFixMe[prop-missing]
|
499
|
+
|
500
|
+
x -= offsetParent[widthProp] - popperRect.width;
|
455
501
|
x *= gpuAcceleration ? 1 : -1;
|
456
502
|
}
|
457
503
|
}
|
@@ -463,19 +509,21 @@ function mapToStyles(_ref2) {
|
|
463
509
|
if (gpuAcceleration) {
|
464
510
|
var _Object$assign;
|
465
511
|
|
466
|
-
return Object.assign(
|
512
|
+
return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
|
467
513
|
}
|
468
514
|
|
469
|
-
return Object.assign(
|
515
|
+
return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
|
470
516
|
}
|
471
517
|
|
472
|
-
function computeStyles(
|
473
|
-
var state =
|
474
|
-
options =
|
518
|
+
function computeStyles(_ref4) {
|
519
|
+
var state = _ref4.state,
|
520
|
+
options = _ref4.options;
|
475
521
|
var _options$gpuAccelerat = options.gpuAcceleration,
|
476
522
|
gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
|
477
523
|
_options$adaptive = options.adaptive,
|
478
|
-
adaptive = _options$adaptive === void 0 ? true : _options$adaptive
|
524
|
+
adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
|
525
|
+
_options$roundOffsets = options.roundOffsets,
|
526
|
+
roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
|
479
527
|
|
480
528
|
var commonStyles = {
|
481
529
|
placement: getBasePlacement(state.placement),
|
@@ -485,22 +533,24 @@ function computeStyles(_ref3) {
|
|
485
533
|
};
|
486
534
|
|
487
535
|
if (state.modifiersData.popperOffsets != null) {
|
488
|
-
state.styles.popper = Object.assign(
|
536
|
+
state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
|
489
537
|
offsets: state.modifiersData.popperOffsets,
|
490
538
|
position: state.options.strategy,
|
491
|
-
adaptive: adaptive
|
539
|
+
adaptive: adaptive,
|
540
|
+
roundOffsets: roundOffsets
|
492
541
|
})));
|
493
542
|
}
|
494
543
|
|
495
544
|
if (state.modifiersData.arrow != null) {
|
496
|
-
state.styles.arrow = Object.assign(
|
545
|
+
state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
|
497
546
|
offsets: state.modifiersData.arrow,
|
498
547
|
position: 'absolute',
|
499
|
-
adaptive: false
|
548
|
+
adaptive: false,
|
549
|
+
roundOffsets: roundOffsets
|
500
550
|
})));
|
501
551
|
}
|
502
552
|
|
503
|
-
state.attributes.popper = Object.assign(
|
553
|
+
state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
504
554
|
'data-popper-placement': state.placement
|
505
555
|
});
|
506
556
|
} // eslint-disable-next-line import/no-unused-modules
|
@@ -584,20 +634,6 @@ function getOppositeVariationPlacement(placement) {
|
|
584
634
|
});
|
585
635
|
}
|
586
636
|
|
587
|
-
function getBoundingClientRect(element) {
|
588
|
-
var rect = element.getBoundingClientRect();
|
589
|
-
return {
|
590
|
-
width: rect.width,
|
591
|
-
height: rect.height,
|
592
|
-
top: rect.top,
|
593
|
-
right: rect.right,
|
594
|
-
bottom: rect.bottom,
|
595
|
-
left: rect.left,
|
596
|
-
x: rect.left,
|
597
|
-
y: rect.top
|
598
|
-
};
|
599
|
-
}
|
600
|
-
|
601
637
|
function getWindowScroll(node) {
|
602
638
|
var win = getWindow(node);
|
603
639
|
var scrollLeft = win.pageXOffset;
|
@@ -660,16 +696,18 @@ function getViewportRect(element) {
|
|
660
696
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable
|
661
697
|
|
662
698
|
function getDocumentRect(element) {
|
699
|
+
var _element$ownerDocumen;
|
700
|
+
|
663
701
|
var html = getDocumentElement(element);
|
664
702
|
var winScroll = getWindowScroll(element);
|
665
|
-
var body = element.ownerDocument.body;
|
666
|
-
var width =
|
667
|
-
var height =
|
703
|
+
var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
|
704
|
+
var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
|
705
|
+
var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
|
668
706
|
var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
|
669
707
|
var y = -winScroll.scrollTop;
|
670
708
|
|
671
709
|
if (getComputedStyle(body || html).direction === 'rtl') {
|
672
|
-
x +=
|
710
|
+
x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
|
673
711
|
}
|
674
712
|
|
675
713
|
return {
|
@@ -692,7 +730,7 @@ function isScrollParent(element) {
|
|
692
730
|
|
693
731
|
function getScrollParent(node) {
|
694
732
|
if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
|
695
|
-
// $FlowFixMe: assume body is always available
|
733
|
+
// $FlowFixMe[incompatible-return]: assume body is always available
|
696
734
|
return node.ownerDocument.body;
|
697
735
|
}
|
698
736
|
|
@@ -706,26 +744,28 @@ function getScrollParent(node) {
|
|
706
744
|
/*
|
707
745
|
given a DOM element, return the list of all scroll parents, up the list of ancesors
|
708
746
|
until we get to the top window object. This list is what we attach scroll listeners
|
709
|
-
to, because if any of these parent elements scroll, we'll need to re-calculate the
|
747
|
+
to, because if any of these parent elements scroll, we'll need to re-calculate the
|
710
748
|
reference element's position.
|
711
749
|
*/
|
712
750
|
|
713
751
|
function listScrollParents(element, list) {
|
752
|
+
var _element$ownerDocumen;
|
753
|
+
|
714
754
|
if (list === void 0) {
|
715
755
|
list = [];
|
716
756
|
}
|
717
757
|
|
718
758
|
var scrollParent = getScrollParent(element);
|
719
|
-
var isBody =
|
759
|
+
var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
|
720
760
|
var win = getWindow(scrollParent);
|
721
761
|
var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
722
762
|
var updatedList = list.concat(target);
|
723
|
-
return isBody ? updatedList : // $FlowFixMe: isBody tells us target will be an HTMLElement here
|
763
|
+
return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
|
724
764
|
updatedList.concat(listScrollParents(getParentNode(target)));
|
725
765
|
}
|
726
766
|
|
727
767
|
function rectToClientRect(rect) {
|
728
|
-
return Object.assign(
|
768
|
+
return Object.assign({}, rect, {
|
729
769
|
left: rect.x,
|
730
770
|
top: rect.y,
|
731
771
|
right: rect.x + rect.width,
|
@@ -760,7 +800,7 @@ function getClippingParents(element) {
|
|
760
800
|
|
761
801
|
if (!isElement(clipperElement)) {
|
762
802
|
return [];
|
763
|
-
} // $FlowFixMe: https://github.com/facebook/flow/issues/1414
|
803
|
+
} // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
|
764
804
|
|
765
805
|
|
766
806
|
return clippingParents.filter(function (clippingParent) {
|
@@ -776,10 +816,10 @@ function getClippingRect(element, boundary, rootBoundary) {
|
|
776
816
|
var firstClippingParent = clippingParents[0];
|
777
817
|
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
|
778
818
|
var rect = getClientRectFromMixedType(element, clippingParent);
|
779
|
-
accRect.top =
|
780
|
-
accRect.right =
|
781
|
-
accRect.bottom =
|
782
|
-
accRect.left =
|
819
|
+
accRect.top = max(rect.top, accRect.top);
|
820
|
+
accRect.right = min(rect.right, accRect.right);
|
821
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
822
|
+
accRect.left = max(rect.left, accRect.left);
|
783
823
|
return accRect;
|
784
824
|
}, getClientRectFromMixedType(element, firstClippingParent));
|
785
825
|
clippingRect.width = clippingRect.right - clippingRect.left;
|
@@ -846,11 +886,11 @@ function computeOffsets(_ref) {
|
|
846
886
|
|
847
887
|
switch (variation) {
|
848
888
|
case start:
|
849
|
-
offsets[mainAxis] =
|
889
|
+
offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
|
850
890
|
break;
|
851
891
|
|
852
892
|
case end:
|
853
|
-
offsets[mainAxis] =
|
893
|
+
offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
|
854
894
|
break;
|
855
895
|
}
|
856
896
|
}
|
@@ -889,7 +929,7 @@ function detectOverflow(state, options) {
|
|
889
929
|
strategy: 'absolute',
|
890
930
|
placement: placement
|
891
931
|
});
|
892
|
-
var popperClientRect = rectToClientRect(Object.assign(
|
932
|
+
var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
|
893
933
|
var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
|
894
934
|
// 0 or negative = within the clipping rect
|
895
935
|
|
@@ -913,9 +953,6 @@ function detectOverflow(state, options) {
|
|
913
953
|
return overflowOffsets;
|
914
954
|
}
|
915
955
|
|
916
|
-
/*:: type OverflowsMap = { [ComputedPlacement]: number }; */
|
917
|
-
|
918
|
-
/*;; type OverflowsMap = { [key in ComputedPlacement]: number }; */
|
919
956
|
function computeAutoPlacement(state, options) {
|
920
957
|
if (options === void 0) {
|
921
958
|
options = {};
|
@@ -932,15 +969,14 @@ function computeAutoPlacement(state, options) {
|
|
932
969
|
var variation = getVariation(placement);
|
933
970
|
var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
|
934
971
|
return getVariation(placement) === variation;
|
935
|
-
}) : basePlacements;
|
936
|
-
|
972
|
+
}) : basePlacements;
|
937
973
|
var allowedPlacements = placements$1.filter(function (placement) {
|
938
974
|
return allowedAutoPlacements.indexOf(placement) >= 0;
|
939
975
|
});
|
940
976
|
|
941
977
|
if (allowedPlacements.length === 0) {
|
942
978
|
allowedPlacements = placements$1;
|
943
|
-
} // $FlowFixMe: Flow seems to have problems with two array unions...
|
979
|
+
} // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
|
944
980
|
|
945
981
|
|
946
982
|
var overflows = allowedPlacements.reduce(function (acc, placement) {
|
@@ -1141,7 +1177,7 @@ function hide(_ref) {
|
|
1141
1177
|
isReferenceHidden: isReferenceHidden,
|
1142
1178
|
hasPopperEscaped: hasPopperEscaped
|
1143
1179
|
};
|
1144
|
-
state.attributes.popper = Object.assign(
|
1180
|
+
state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
1145
1181
|
'data-popper-reference-hidden': isReferenceHidden,
|
1146
1182
|
'data-popper-escaped': hasPopperEscaped
|
1147
1183
|
});
|
@@ -1160,7 +1196,7 @@ function distanceAndSkiddingToXY(placement, rects, offset) {
|
|
1160
1196
|
var basePlacement = getBasePlacement(placement);
|
1161
1197
|
var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
|
1162
1198
|
|
1163
|
-
var _ref = typeof offset === 'function' ? offset(Object.assign(
|
1199
|
+
var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
|
1164
1200
|
placement: placement
|
1165
1201
|
})) : offset,
|
1166
1202
|
skidding = _ref[0],
|
@@ -1266,7 +1302,7 @@ function preventOverflow(_ref) {
|
|
1266
1302
|
var popperOffsets = state.modifiersData.popperOffsets;
|
1267
1303
|
var referenceRect = state.rects.reference;
|
1268
1304
|
var popperRect = state.rects.popper;
|
1269
|
-
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign(
|
1305
|
+
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
|
1270
1306
|
placement: state.placement
|
1271
1307
|
})) : tetherOffset;
|
1272
1308
|
var data = {
|
@@ -1278,13 +1314,13 @@ function preventOverflow(_ref) {
|
|
1278
1314
|
return;
|
1279
1315
|
}
|
1280
1316
|
|
1281
|
-
if (checkMainAxis) {
|
1317
|
+
if (checkMainAxis || checkAltAxis) {
|
1282
1318
|
var mainSide = mainAxis === 'y' ? top : left;
|
1283
1319
|
var altSide = mainAxis === 'y' ? bottom : right;
|
1284
1320
|
var len = mainAxis === 'y' ? 'height' : 'width';
|
1285
1321
|
var offset = popperOffsets[mainAxis];
|
1286
|
-
var min = popperOffsets[mainAxis] + overflow[mainSide];
|
1287
|
-
var max = popperOffsets[mainAxis] - overflow[altSide];
|
1322
|
+
var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
|
1323
|
+
var max$1 = popperOffsets[mainAxis] - overflow[altSide];
|
1288
1324
|
var additive = tether ? -popperRect[len] / 2 : 0;
|
1289
1325
|
var minLen = variation === start ? referenceRect[len] : popperRect[len];
|
1290
1326
|
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
|
@@ -1311,26 +1347,29 @@ function preventOverflow(_ref) {
|
|
1311
1347
|
var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
|
1312
1348
|
var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
|
1313
1349
|
var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
|
1314
|
-
var preventedOffset = within(tether ? Math.min(min, tetherMin) : min, offset, tether ? Math.max(max, tetherMax) : max);
|
1315
|
-
popperOffsets[mainAxis] = preventedOffset;
|
1316
|
-
data[mainAxis] = preventedOffset - offset;
|
1317
|
-
}
|
1318
1350
|
|
1319
|
-
|
1320
|
-
|
1351
|
+
if (checkMainAxis) {
|
1352
|
+
var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
|
1353
|
+
popperOffsets[mainAxis] = preventedOffset;
|
1354
|
+
data[mainAxis] = preventedOffset - offset;
|
1355
|
+
}
|
1356
|
+
|
1357
|
+
if (checkAltAxis) {
|
1358
|
+
var _mainSide = mainAxis === 'x' ? top : left;
|
1321
1359
|
|
1322
|
-
|
1360
|
+
var _altSide = mainAxis === 'x' ? bottom : right;
|
1323
1361
|
|
1324
|
-
|
1362
|
+
var _offset = popperOffsets[altAxis];
|
1325
1363
|
|
1326
|
-
|
1364
|
+
var _min = _offset + overflow[_mainSide];
|
1327
1365
|
|
1328
|
-
|
1366
|
+
var _max = _offset - overflow[_altSide];
|
1329
1367
|
|
1330
|
-
|
1368
|
+
var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
|
1331
1369
|
|
1332
|
-
|
1333
|
-
|
1370
|
+
popperOffsets[altAxis] = _preventedOffset;
|
1371
|
+
data[altAxis] = _preventedOffset - _offset;
|
1372
|
+
}
|
1334
1373
|
}
|
1335
1374
|
|
1336
1375
|
state.modifiersData[name] = data;
|
@@ -1464,9 +1503,9 @@ function debounce(fn) {
|
|
1464
1503
|
function mergeByName(modifiers) {
|
1465
1504
|
var merged = modifiers.reduce(function (merged, current) {
|
1466
1505
|
var existing = merged[current.name];
|
1467
|
-
merged[current.name] = existing ? Object.assign(
|
1468
|
-
options: Object.assign(
|
1469
|
-
data: Object.assign(
|
1506
|
+
merged[current.name] = existing ? Object.assign({}, existing, current, {
|
1507
|
+
options: Object.assign({}, existing.options, current.options),
|
1508
|
+
data: Object.assign({}, existing.data, current.data)
|
1470
1509
|
}) : current;
|
1471
1510
|
return merged;
|
1472
1511
|
}, {}); // IE11 does not support Object.values
|
@@ -1510,7 +1549,7 @@ function popperGenerator(generatorOptions) {
|
|
1510
1549
|
var state = {
|
1511
1550
|
placement: 'bottom',
|
1512
1551
|
orderedModifiers: [],
|
1513
|
-
options: Object.assign(
|
1552
|
+
options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
|
1514
1553
|
modifiersData: {},
|
1515
1554
|
elements: {
|
1516
1555
|
reference: reference,
|
@@ -1525,7 +1564,7 @@ function popperGenerator(generatorOptions) {
|
|
1525
1564
|
state: state,
|
1526
1565
|
setOptions: function setOptions(options) {
|
1527
1566
|
cleanupModifierEffects();
|
1528
|
-
state.options = Object.assign(
|
1567
|
+
state.options = Object.assign({}, defaultOptions, state.options, options);
|
1529
1568
|
state.scrollParents = {
|
1530
1569
|
reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
|
1531
1570
|
popper: listScrollParents(popper)
|
@@ -1673,10 +1712,12 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
1673
1712
|
}); // eslint-disable-next-line import/no-unused-modules
|
1674
1713
|
|
1675
1714
|
/**!
|
1676
|
-
* tippy.js v6.
|
1677
|
-
* (c) 2017-
|
1715
|
+
* tippy.js v6.3.1
|
1716
|
+
* (c) 2017-2021 atomiks
|
1678
1717
|
* MIT License
|
1679
1718
|
*/
|
1719
|
+
|
1720
|
+
var ROUND_ARROW = '<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"></svg>';
|
1680
1721
|
var BOX_CLASS = "tippy-box";
|
1681
1722
|
var CONTENT_CLASS = "tippy-content";
|
1682
1723
|
var BACKDROP_CLASS = "tippy-backdrop";
|
@@ -1801,10 +1842,13 @@ function setVisibilityState(els, state) {
|
|
1801
1842
|
});
|
1802
1843
|
}
|
1803
1844
|
function getOwnerDocument(elementOrElements) {
|
1845
|
+
var _element$ownerDocumen;
|
1846
|
+
|
1804
1847
|
var _normalizeToArray = normalizeToArray(elementOrElements),
|
1805
|
-
element = _normalizeToArray[0];
|
1848
|
+
element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
|
1806
1849
|
|
1807
|
-
|
1850
|
+
|
1851
|
+
return (element == null ? void 0 : (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body) ? element.ownerDocument : document;
|
1808
1852
|
}
|
1809
1853
|
function isCursorOutsideInteractiveBorder(popperTreeData, event) {
|
1810
1854
|
var clientX = event.clientX,
|
@@ -2946,6 +2990,8 @@ function createTippy(reference, passedProps) {
|
|
2946
2990
|
}
|
2947
2991
|
|
2948
2992
|
onFirstUpdate = function onFirstUpdate() {
|
2993
|
+
var _instance$popperInsta2;
|
2994
|
+
|
2949
2995
|
if (!instance.state.isVisible || ignoreOnFirstUpdate) {
|
2950
2996
|
return;
|
2951
2997
|
}
|
@@ -2966,7 +3012,10 @@ function createTippy(reference, passedProps) {
|
|
2966
3012
|
|
2967
3013
|
handleAriaContentAttribute();
|
2968
3014
|
handleAriaExpandedAttribute();
|
2969
|
-
pushIfUnique(mountedInstances, instance);
|
3015
|
+
pushIfUnique(mountedInstances, instance); // certain modifiers (e.g. `maxSize`) require a second update after the
|
3016
|
+
// popper has been positioned for the first time
|
3017
|
+
|
3018
|
+
(_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
|
2970
3019
|
instance.state.isMounted = true;
|
2971
3020
|
invokeHook('onMount', [instance]);
|
2972
3021
|
|
@@ -3115,7 +3164,39 @@ tippy.defaultProps = defaultProps;
|
|
3115
3164
|
tippy.setDefaultProps = setDefaultProps;
|
3116
3165
|
tippy.currentInput = currentInput;
|
3117
3166
|
|
3167
|
+
// every time the popper is destroyed (i.e. a new target), removing the styles
|
3168
|
+
// and causing transitions to break for singletons when the console is open, but
|
3169
|
+
// most notably for non-transform styles being used, `gpuAcceleration: false`.
|
3170
|
+
|
3171
|
+
var applyStylesModifier = Object.assign({}, applyStyles$1, {
|
3172
|
+
effect: function effect(_ref) {
|
3173
|
+
var state = _ref.state;
|
3174
|
+
var initialStyles = {
|
3175
|
+
popper: {
|
3176
|
+
position: state.options.strategy,
|
3177
|
+
left: '0',
|
3178
|
+
top: '0',
|
3179
|
+
margin: '0'
|
3180
|
+
},
|
3181
|
+
arrow: {
|
3182
|
+
position: 'absolute'
|
3183
|
+
},
|
3184
|
+
reference: {}
|
3185
|
+
};
|
3186
|
+
Object.assign(state.elements.popper.style, initialStyles.popper);
|
3187
|
+
state.styles = initialStyles;
|
3188
|
+
|
3189
|
+
if (state.elements.arrow) {
|
3190
|
+
Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
3191
|
+
} // intentionally return no cleanup function
|
3192
|
+
// return () => { ... }
|
3193
|
+
|
3194
|
+
}
|
3195
|
+
});
|
3196
|
+
|
3118
3197
|
var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
3198
|
+
var _optionalProps$popper;
|
3199
|
+
|
3119
3200
|
if (optionalProps === void 0) {
|
3120
3201
|
optionalProps = {};
|
3121
3202
|
}
|
@@ -3125,6 +3206,7 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3125
3206
|
var currentTarget;
|
3126
3207
|
var overrides = optionalProps.overrides;
|
3127
3208
|
var interceptSetPropsCleanups = [];
|
3209
|
+
var shownOnCreate = false;
|
3128
3210
|
|
3129
3211
|
function setReferences() {
|
3130
3212
|
references = individualInstances.map(function (instance) {
|
@@ -3158,6 +3240,26 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3158
3240
|
instance.setProps = originalSetProps;
|
3159
3241
|
};
|
3160
3242
|
});
|
3243
|
+
} // have to pass singleton, as it maybe undefined on first call
|
3244
|
+
|
3245
|
+
|
3246
|
+
function prepareInstance(singleton, target) {
|
3247
|
+
var index = references.indexOf(target); // bail-out
|
3248
|
+
|
3249
|
+
if (target === currentTarget) {
|
3250
|
+
return;
|
3251
|
+
}
|
3252
|
+
|
3253
|
+
currentTarget = target;
|
3254
|
+
var overrideProps = (overrides || []).concat('content').reduce(function (acc, prop) {
|
3255
|
+
acc[prop] = individualInstances[index].props[prop];
|
3256
|
+
return acc;
|
3257
|
+
}, {});
|
3258
|
+
singleton.setProps(Object.assign({}, overrideProps, {
|
3259
|
+
getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
|
3260
|
+
return target.getBoundingClientRect();
|
3261
|
+
}
|
3262
|
+
}));
|
3161
3263
|
}
|
3162
3264
|
|
3163
3265
|
enableInstances(false);
|
@@ -3168,32 +3270,90 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3168
3270
|
onDestroy: function onDestroy() {
|
3169
3271
|
enableInstances(true);
|
3170
3272
|
},
|
3171
|
-
|
3172
|
-
|
3173
|
-
|
3174
|
-
|
3175
|
-
if (
|
3176
|
-
|
3273
|
+
onHidden: function onHidden() {
|
3274
|
+
currentTarget = null;
|
3275
|
+
},
|
3276
|
+
onClickOutside: function onClickOutside(instance) {
|
3277
|
+
if (instance.props.showOnCreate && !shownOnCreate) {
|
3278
|
+
shownOnCreate = true;
|
3279
|
+
currentTarget = null;
|
3177
3280
|
}
|
3178
|
-
|
3179
|
-
|
3180
|
-
|
3181
|
-
|
3182
|
-
|
3183
|
-
}
|
3184
|
-
|
3185
|
-
|
3186
|
-
|
3187
|
-
}
|
3188
|
-
}));
|
3281
|
+
},
|
3282
|
+
onShow: function onShow(instance) {
|
3283
|
+
if (instance.props.showOnCreate && !shownOnCreate) {
|
3284
|
+
shownOnCreate = true;
|
3285
|
+
prepareInstance(instance, references[0]);
|
3286
|
+
}
|
3287
|
+
},
|
3288
|
+
onTrigger: function onTrigger(instance, event) {
|
3289
|
+
prepareInstance(instance, event.currentTarget);
|
3189
3290
|
}
|
3190
3291
|
};
|
3191
3292
|
}
|
3192
3293
|
};
|
3193
3294
|
var singleton = tippy(div(), Object.assign({}, removeProperties(optionalProps, ['overrides']), {
|
3194
3295
|
plugins: [plugin].concat(optionalProps.plugins || []),
|
3195
|
-
triggerTarget: references
|
3296
|
+
triggerTarget: references,
|
3297
|
+
popperOptions: Object.assign({}, optionalProps.popperOptions, {
|
3298
|
+
modifiers: [].concat(((_optionalProps$popper = optionalProps.popperOptions) == null ? void 0 : _optionalProps$popper.modifiers) || [], [applyStylesModifier])
|
3299
|
+
})
|
3196
3300
|
}));
|
3301
|
+
var originalShow = singleton.show;
|
3302
|
+
|
3303
|
+
singleton.show = function (target) {
|
3304
|
+
originalShow(); // first time, showOnCreate or programmatic call with no params
|
3305
|
+
// default to showing first instance
|
3306
|
+
|
3307
|
+
if (!currentTarget && target == null) {
|
3308
|
+
return prepareInstance(singleton, references[0]);
|
3309
|
+
} // triggered from event (do nothing as prepareInstance already called by onTrigger)
|
3310
|
+
// programmatic call with no params when already visible (do nothing again)
|
3311
|
+
|
3312
|
+
|
3313
|
+
if (currentTarget && target == null) {
|
3314
|
+
return;
|
3315
|
+
} // target is index of instance
|
3316
|
+
|
3317
|
+
|
3318
|
+
if (typeof target === 'number') {
|
3319
|
+
return references[target] && prepareInstance(singleton, references[target]);
|
3320
|
+
} // target is a child tippy instance
|
3321
|
+
|
3322
|
+
|
3323
|
+
if (individualInstances.includes(target)) {
|
3324
|
+
var ref = target.reference;
|
3325
|
+
return prepareInstance(singleton, ref);
|
3326
|
+
} // target is a ReferenceElement
|
3327
|
+
|
3328
|
+
|
3329
|
+
if (references.includes(target)) {
|
3330
|
+
return prepareInstance(singleton, target);
|
3331
|
+
}
|
3332
|
+
};
|
3333
|
+
|
3334
|
+
singleton.showNext = function () {
|
3335
|
+
var first = references[0];
|
3336
|
+
|
3337
|
+
if (!currentTarget) {
|
3338
|
+
return singleton.show(0);
|
3339
|
+
}
|
3340
|
+
|
3341
|
+
var index = references.indexOf(currentTarget);
|
3342
|
+
singleton.show(references[index + 1] || first);
|
3343
|
+
};
|
3344
|
+
|
3345
|
+
singleton.showPrevious = function () {
|
3346
|
+
var last = references[references.length - 1];
|
3347
|
+
|
3348
|
+
if (!currentTarget) {
|
3349
|
+
return singleton.show(last);
|
3350
|
+
}
|
3351
|
+
|
3352
|
+
var index = references.indexOf(currentTarget);
|
3353
|
+
var target = references[index - 1] || last;
|
3354
|
+
singleton.show(target);
|
3355
|
+
};
|
3356
|
+
|
3197
3357
|
var originalSetProps = singleton.setProps;
|
3198
3358
|
|
3199
3359
|
singleton.setProps = function (props) {
|
@@ -3677,6 +3837,7 @@ tippy.setDefaultProps({
|
|
3677
3837
|
},
|
3678
3838
|
});
|
3679
3839
|
function useTippy(el, opts = {}, settings = { mount: true }) {
|
3840
|
+
const vm = getCurrentInstance();
|
3680
3841
|
const instance = ref();
|
3681
3842
|
let container = null;
|
3682
3843
|
const getContainer = () => {
|
@@ -3691,11 +3852,18 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3691
3852
|
? content.value
|
3692
3853
|
: content;
|
3693
3854
|
if (isVNode(unwrappedContent)) {
|
3855
|
+
if (vm) {
|
3856
|
+
unwrappedContent.appContext = vm.appContext;
|
3857
|
+
}
|
3694
3858
|
render$1(unwrappedContent, getContainer());
|
3695
3859
|
newContent = () => getContainer();
|
3696
3860
|
}
|
3697
3861
|
else if (typeof unwrappedContent === 'object') {
|
3698
|
-
|
3862
|
+
let comp = h(unwrappedContent);
|
3863
|
+
if (vm) {
|
3864
|
+
comp.appContext = vm.appContext;
|
3865
|
+
}
|
3866
|
+
render$1(comp, getContainer());
|
3699
3867
|
newContent = () => getContainer();
|
3700
3868
|
}
|
3701
3869
|
else {
|
@@ -3714,8 +3882,14 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3714
3882
|
else {
|
3715
3883
|
options = { ...opts };
|
3716
3884
|
}
|
3717
|
-
if (options.content)
|
3885
|
+
if (options.content) {
|
3718
3886
|
options.content = getContent(options.content);
|
3887
|
+
}
|
3888
|
+
if (options.triggerTarget) {
|
3889
|
+
options.triggerTarget = isRef(options.triggerTarget)
|
3890
|
+
? options.triggerTarget.value
|
3891
|
+
: options.triggerTarget;
|
3892
|
+
}
|
3719
3893
|
return options;
|
3720
3894
|
};
|
3721
3895
|
const refresh = () => {
|
@@ -3790,7 +3964,6 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3790
3964
|
mount,
|
3791
3965
|
};
|
3792
3966
|
if (settings.mount) {
|
3793
|
-
const vm = getCurrentInstance();
|
3794
3967
|
if (vm) {
|
3795
3968
|
if (vm.isMounted) {
|
3796
3969
|
mount();
|
@@ -3815,6 +3988,46 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3815
3988
|
return response;
|
3816
3989
|
}
|
3817
3990
|
|
3991
|
+
function useTippyComponent(opts = {}, children) {
|
3992
|
+
const instance = ref();
|
3993
|
+
return {
|
3994
|
+
instance,
|
3995
|
+
TippyComponent: h(TippyComponent, {
|
3996
|
+
...opts,
|
3997
|
+
onVnodeMounted: vnode => {
|
3998
|
+
//@ts-ignore
|
3999
|
+
instance.value = vnode.component.ctx;
|
4000
|
+
},
|
4001
|
+
}, children),
|
4002
|
+
};
|
4003
|
+
}
|
4004
|
+
|
4005
|
+
function useSingleton(instances, optionalProps) {
|
4006
|
+
const singleton = ref();
|
4007
|
+
onMounted(() => {
|
4008
|
+
const pendingTippyInstances = Array.isArray(instances)
|
4009
|
+
? instances.map(i => i.value)
|
4010
|
+
: typeof instances === 'function'
|
4011
|
+
? instances()
|
4012
|
+
: instances.value;
|
4013
|
+
const tippyInstances = pendingTippyInstances
|
4014
|
+
.map((instance) => {
|
4015
|
+
if (instance instanceof Element) {
|
4016
|
+
//@ts-ignore
|
4017
|
+
return instance._tippy;
|
4018
|
+
}
|
4019
|
+
return instance;
|
4020
|
+
})
|
4021
|
+
.filter(Boolean);
|
4022
|
+
singleton.value = createSingleton(tippyInstances, optionalProps
|
4023
|
+
? { allowHTML: true, ...optionalProps }
|
4024
|
+
: { allowHTML: true });
|
4025
|
+
});
|
4026
|
+
return {
|
4027
|
+
singleton,
|
4028
|
+
};
|
4029
|
+
}
|
4030
|
+
|
3818
4031
|
// const pluginProps = [
|
3819
4032
|
// 'animateFill',
|
3820
4033
|
// 'followCursor',
|
@@ -3855,50 +4068,137 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
|
|
3855
4068
|
};
|
3856
4069
|
}
|
3857
4070
|
});
|
4071
|
+
props['to'] = {};
|
4072
|
+
props['tag'] = {
|
4073
|
+
default: 'span'
|
4074
|
+
};
|
4075
|
+
props['contentTag'] = {
|
4076
|
+
default: 'span'
|
4077
|
+
};
|
4078
|
+
props['contentClass'] = {
|
4079
|
+
default: null
|
4080
|
+
};
|
3858
4081
|
const TippyComponent = defineComponent({
|
3859
4082
|
props,
|
3860
|
-
setup(props) {
|
4083
|
+
setup(props, { slots }) {
|
3861
4084
|
const elem = ref();
|
3862
|
-
const
|
3863
|
-
|
4085
|
+
const contentElem = ref();
|
4086
|
+
let options = props;
|
4087
|
+
if (options.to) {
|
4088
|
+
delete options.to;
|
4089
|
+
}
|
4090
|
+
let target = elem;
|
4091
|
+
if (props.to) {
|
4092
|
+
if (props.to instanceof Element) {
|
4093
|
+
target = () => props.to;
|
4094
|
+
}
|
4095
|
+
else if (typeof props.to === 'string' || props.to instanceof String) {
|
4096
|
+
target = () => document.querySelector(props.to);
|
4097
|
+
}
|
4098
|
+
}
|
4099
|
+
const tippy = useTippy(target, options);
|
4100
|
+
onMounted(() => {
|
4101
|
+
if (slots.content)
|
4102
|
+
tippy.setContent(() => contentElem.value);
|
4103
|
+
});
|
4104
|
+
return { elem, contentElem, ...tippy };
|
4105
|
+
},
|
4106
|
+
render() {
|
4107
|
+
let slot = this.$slots.default ? this.$slots.default(this) : [];
|
4108
|
+
return h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
|
4109
|
+
slot,
|
4110
|
+
h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
|
4111
|
+
] : slot);
|
4112
|
+
},
|
4113
|
+
});
|
4114
|
+
|
4115
|
+
const booleanProps$1 = [
|
4116
|
+
'a11y',
|
4117
|
+
'allowHTML',
|
4118
|
+
'arrow',
|
4119
|
+
'flip',
|
4120
|
+
'flipOnUpdate',
|
4121
|
+
'hideOnClick',
|
4122
|
+
'ignoreAttributes',
|
4123
|
+
'inertia',
|
4124
|
+
'interactive',
|
4125
|
+
'lazy',
|
4126
|
+
'multiple',
|
4127
|
+
'showOnInit',
|
4128
|
+
'touch',
|
4129
|
+
'touchHold',
|
4130
|
+
];
|
4131
|
+
let props$1 = {};
|
4132
|
+
Object.keys(tippy.defaultProps).forEach((prop) => {
|
4133
|
+
if (booleanProps$1.includes(prop)) {
|
4134
|
+
props$1[prop] = {
|
4135
|
+
type: Boolean,
|
4136
|
+
default: function () {
|
4137
|
+
return tippy.defaultProps[prop];
|
4138
|
+
},
|
4139
|
+
};
|
4140
|
+
}
|
4141
|
+
else {
|
4142
|
+
props$1[prop] = {
|
4143
|
+
default: function () {
|
4144
|
+
return tippy.defaultProps[prop];
|
4145
|
+
},
|
4146
|
+
};
|
4147
|
+
}
|
4148
|
+
});
|
4149
|
+
const TippySingleton = defineComponent({
|
4150
|
+
props: props$1,
|
4151
|
+
setup(props) {
|
4152
|
+
const instances = ref([]);
|
4153
|
+
const { singleton } = useSingleton(instances, props);
|
4154
|
+
return { instances, singleton };
|
4155
|
+
},
|
4156
|
+
mounted() {
|
4157
|
+
var _a;
|
4158
|
+
const parent = this.$el.parentElement;
|
4159
|
+
const elements = parent.querySelectorAll('[data-v-tippy]');
|
4160
|
+
this.instances = Array.from(elements)
|
4161
|
+
.map((el) => el._tippy)
|
4162
|
+
.filter(Boolean);
|
4163
|
+
(_a = this.singleton) === null || _a === void 0 ? void 0 : _a.setInstances(this.instances);
|
3864
4164
|
},
|
3865
4165
|
render() {
|
3866
4166
|
let slot = this.$slots.default ? this.$slots.default() : [];
|
3867
|
-
return h(
|
4167
|
+
return h(() => slot);
|
3868
4168
|
},
|
3869
4169
|
});
|
3870
4170
|
|
3871
4171
|
const directive = {
|
3872
4172
|
mounted(el, binding, vnode) {
|
3873
|
-
const opts = binding.value || {};
|
3874
|
-
if (vnode.props && vnode.props.
|
4173
|
+
const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
|
4174
|
+
if (vnode.props && vnode.props.onTippyShow) {
|
3875
4175
|
opts.onShow = function (...args) {
|
3876
4176
|
var _a;
|
3877
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4177
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyShow(...args);
|
3878
4178
|
};
|
3879
4179
|
}
|
3880
|
-
if (vnode.props && vnode.props.
|
4180
|
+
if (vnode.props && vnode.props.onTippyShown) {
|
3881
4181
|
opts.onShown = function (...args) {
|
3882
4182
|
var _a;
|
3883
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4183
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyShown(...args);
|
3884
4184
|
};
|
3885
4185
|
}
|
3886
|
-
if (vnode.props && vnode.props.
|
4186
|
+
if (vnode.props && vnode.props.onTippyHidden) {
|
3887
4187
|
opts.onHidden = function (...args) {
|
3888
4188
|
var _a;
|
3889
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4189
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyHidden(...args);
|
3890
4190
|
};
|
3891
4191
|
}
|
3892
|
-
if (vnode.props && vnode.props.
|
4192
|
+
if (vnode.props && vnode.props.onTippyHide) {
|
3893
4193
|
opts.onHide = function (...args) {
|
3894
4194
|
var _a;
|
3895
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4195
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyHide(...args);
|
3896
4196
|
};
|
3897
4197
|
}
|
3898
|
-
if (vnode.props && vnode.props.
|
4198
|
+
if (vnode.props && vnode.props.onTippyMount) {
|
3899
4199
|
opts.onMount = function (...args) {
|
3900
4200
|
var _a;
|
3901
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4201
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyMount(...args);
|
3902
4202
|
};
|
3903
4203
|
}
|
3904
4204
|
if (el.getAttribute('title') && !opts.content) {
|
@@ -3919,7 +4219,7 @@ const directive = {
|
|
3919
4219
|
}
|
3920
4220
|
},
|
3921
4221
|
updated(el, binding) {
|
3922
|
-
const opts = binding.value || {};
|
4222
|
+
const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
|
3923
4223
|
if (el.getAttribute('title') && !opts.content) {
|
3924
4224
|
opts.content = el.getAttribute('title');
|
3925
4225
|
el.removeAttribute('title');
|
@@ -3941,53 +4241,15 @@ const plugin = {
|
|
3941
4241
|
tippy.setDefaultProps(options.defaultProps || {});
|
3942
4242
|
app.directive(options.directive || 'tippy', directive);
|
3943
4243
|
app.component(options.component || 'tippy', TippyComponent);
|
4244
|
+
app.component(options.componentSingleton || 'tippy-singleton', TippySingleton);
|
3944
4245
|
},
|
3945
4246
|
};
|
3946
4247
|
|
3947
|
-
function useSingleton(instances, optionalProps) {
|
3948
|
-
const singleton = ref();
|
3949
|
-
onMounted(() => {
|
3950
|
-
singleton.value = createSingleton(instances.map(instance => instance.value), optionalProps);
|
3951
|
-
});
|
3952
|
-
return {
|
3953
|
-
singleton,
|
3954
|
-
};
|
3955
|
-
}
|
3956
|
-
|
3957
|
-
function styleInject(css, ref) {
|
3958
|
-
if ( ref === void 0 ) ref = {};
|
3959
|
-
var insertAt = ref.insertAt;
|
3960
|
-
|
3961
|
-
if (!css || typeof document === 'undefined') { return; }
|
3962
|
-
|
3963
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
3964
|
-
var style = document.createElement('style');
|
3965
|
-
style.type = 'text/css';
|
3966
|
-
|
3967
|
-
if (insertAt === 'top') {
|
3968
|
-
if (head.firstChild) {
|
3969
|
-
head.insertBefore(style, head.firstChild);
|
3970
|
-
} else {
|
3971
|
-
head.appendChild(style);
|
3972
|
-
}
|
3973
|
-
} else {
|
3974
|
-
head.appendChild(style);
|
3975
|
-
}
|
3976
|
-
|
3977
|
-
if (style.styleSheet) {
|
3978
|
-
style.styleSheet.cssText = css;
|
3979
|
-
} else {
|
3980
|
-
style.appendChild(document.createTextNode(css));
|
3981
|
-
}
|
3982
|
-
}
|
3983
|
-
|
3984
|
-
var css_248z = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
|
3985
|
-
styleInject(css_248z);
|
3986
|
-
|
3987
4248
|
const setDefaultProps$1 = tippy.setDefaultProps;
|
3988
4249
|
setDefaultProps$1({
|
4250
|
+
ignoreAttributes: true,
|
3989
4251
|
plugins: [sticky, inlinePositioning, followCursor, animateFill],
|
3990
4252
|
});
|
3991
4253
|
|
3992
4254
|
export default plugin;
|
3993
|
-
export { TippyComponent as Tippy, directive, setDefaultProps$1 as setDefaultProps, tippy, useSingleton, useTippy };
|
4255
|
+
export { TippyComponent as Tippy, TippySingleton, directive, plugin, ROUND_ARROW as roundArrow, setDefaultProps$1 as setDefaultProps, tippy, useSingleton, useTippy, useTippyComponent };
|