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.cjs.js
CHANGED
@@ -1,6 +1,6 @@
|
|
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
6
|
'use strict';
|
@@ -45,10 +45,11 @@ function getNodeName(element) {
|
|
45
45
|
return element ? (element.nodeName || '').toLowerCase() : null;
|
46
46
|
}
|
47
47
|
|
48
|
-
/*:: import type { Window } from '../types'; */
|
49
|
-
|
50
|
-
/*:: declare function getWindow(node: Node | Window): Window; */
|
51
48
|
function getWindow(node) {
|
49
|
+
if (node == null) {
|
50
|
+
return window;
|
51
|
+
}
|
52
|
+
|
52
53
|
if (node.toString() !== '[object Window]') {
|
53
54
|
var ownerDocument = node.ownerDocument;
|
54
55
|
return ownerDocument ? ownerDocument.defaultView || window : window;
|
@@ -57,26 +58,22 @@ function getWindow(node) {
|
|
57
58
|
return node;
|
58
59
|
}
|
59
60
|
|
60
|
-
/*:: declare function isElement(node: mixed): boolean %checks(node instanceof
|
61
|
-
Element); */
|
62
|
-
|
63
61
|
function isElement(node) {
|
64
62
|
var OwnElement = getWindow(node).Element;
|
65
63
|
return node instanceof OwnElement || node instanceof Element;
|
66
64
|
}
|
67
|
-
/*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
|
68
|
-
HTMLElement); */
|
69
|
-
|
70
65
|
|
71
66
|
function isHTMLElement(node) {
|
72
67
|
var OwnElement = getWindow(node).HTMLElement;
|
73
68
|
return node instanceof OwnElement || node instanceof HTMLElement;
|
74
69
|
}
|
75
|
-
/*:: declare function isShadowRoot(node: mixed): boolean %checks(node instanceof
|
76
|
-
ShadowRoot); */
|
77
|
-
|
78
70
|
|
79
71
|
function isShadowRoot(node) {
|
72
|
+
// IE 11 has no ShadowRoot
|
73
|
+
if (typeof ShadowRoot === 'undefined') {
|
74
|
+
return false;
|
75
|
+
}
|
76
|
+
|
80
77
|
var OwnElement = getWindow(node).ShadowRoot;
|
81
78
|
return node instanceof OwnElement || node instanceof ShadowRoot;
|
82
79
|
}
|
@@ -94,7 +91,7 @@ function applyStyles(_ref) {
|
|
94
91
|
return;
|
95
92
|
} // Flow doesn't support to extend this property, but it's the most
|
96
93
|
// effective way to apply styles to an HTMLElement
|
97
|
-
// $FlowFixMe
|
94
|
+
// $FlowFixMe[cannot-write]
|
98
95
|
|
99
96
|
|
100
97
|
Object.assign(element.style, style);
|
@@ -125,6 +122,7 @@ function effect(_ref2) {
|
|
125
122
|
reference: {}
|
126
123
|
};
|
127
124
|
Object.assign(state.elements.popper.style, initialStyles.popper);
|
125
|
+
state.styles = initialStyles;
|
128
126
|
|
129
127
|
if (state.elements.arrow) {
|
130
128
|
Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
@@ -143,10 +141,7 @@ function effect(_ref2) {
|
|
143
141
|
|
144
142
|
if (!isHTMLElement(element) || !getNodeName(element)) {
|
145
143
|
return;
|
146
|
-
}
|
147
|
-
// effective way to apply styles to an HTMLElement
|
148
|
-
// $FlowFixMe
|
149
|
-
|
144
|
+
}
|
150
145
|
|
151
146
|
Object.assign(element.style, style);
|
152
147
|
Object.keys(attributes).forEach(function (attribute) {
|
@@ -170,14 +165,42 @@ function getBasePlacement(placement) {
|
|
170
165
|
return placement.split('-')[0];
|
171
166
|
}
|
172
167
|
|
173
|
-
|
168
|
+
function getBoundingClientRect(element) {
|
169
|
+
var rect = element.getBoundingClientRect();
|
170
|
+
return {
|
171
|
+
width: rect.width,
|
172
|
+
height: rect.height,
|
173
|
+
top: rect.top,
|
174
|
+
right: rect.right,
|
175
|
+
bottom: rect.bottom,
|
176
|
+
left: rect.left,
|
177
|
+
x: rect.left,
|
178
|
+
y: rect.top
|
179
|
+
};
|
180
|
+
}
|
181
|
+
|
174
182
|
// means it doesn't take into account transforms.
|
183
|
+
|
175
184
|
function getLayoutRect(element) {
|
185
|
+
var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
|
186
|
+
// Fixes https://github.com/popperjs/popper-core/issues/1223
|
187
|
+
|
188
|
+
var width = element.offsetWidth;
|
189
|
+
var height = element.offsetHeight;
|
190
|
+
|
191
|
+
if (Math.abs(clientRect.width - width) <= 1) {
|
192
|
+
width = clientRect.width;
|
193
|
+
}
|
194
|
+
|
195
|
+
if (Math.abs(clientRect.height - height) <= 1) {
|
196
|
+
height = clientRect.height;
|
197
|
+
}
|
198
|
+
|
176
199
|
return {
|
177
200
|
x: element.offsetLeft,
|
178
201
|
y: element.offsetTop,
|
179
|
-
width:
|
180
|
-
height:
|
202
|
+
width: width,
|
203
|
+
height: height
|
181
204
|
};
|
182
205
|
}
|
183
206
|
|
@@ -193,7 +216,7 @@ function contains(parent, child) {
|
|
193
216
|
do {
|
194
217
|
if (next && parent.isSameNode(next)) {
|
195
218
|
return true;
|
196
|
-
} // $FlowFixMe: need a better way to handle this...
|
219
|
+
} // $FlowFixMe[prop-missing]: need a better way to handle this...
|
197
220
|
|
198
221
|
|
199
222
|
next = next.parentNode || next.host;
|
@@ -213,8 +236,9 @@ function isTableElement(element) {
|
|
213
236
|
}
|
214
237
|
|
215
238
|
function getDocumentElement(element) {
|
216
|
-
// $FlowFixMe: assume body is always available
|
217
|
-
return ((isElement(element) ? element.ownerDocument :
|
239
|
+
// $FlowFixMe[incompatible-return]: assume body is always available
|
240
|
+
return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
|
241
|
+
element.document) || window.document).documentElement;
|
218
242
|
}
|
219
243
|
|
220
244
|
function getParentNode(element) {
|
@@ -222,12 +246,13 @@ function getParentNode(element) {
|
|
222
246
|
return element;
|
223
247
|
}
|
224
248
|
|
225
|
-
return (//
|
249
|
+
return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
|
250
|
+
// $FlowFixMe[incompatible-return]
|
251
|
+
// $FlowFixMe[prop-missing]
|
226
252
|
element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
|
227
|
-
element.parentNode || // DOM Element detected
|
228
|
-
|
229
|
-
|
230
|
-
// $FlowFixMe: HTMLElement is a Node
|
253
|
+
element.parentNode || ( // DOM Element detected
|
254
|
+
isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
|
255
|
+
// $FlowFixMe[incompatible-call]: HTMLElement is a Node
|
231
256
|
getDocumentElement(element) // fallback
|
232
257
|
|
233
258
|
);
|
@@ -239,29 +264,32 @@ function getTrueOffsetParent(element) {
|
|
239
264
|
return null;
|
240
265
|
}
|
241
266
|
|
242
|
-
|
243
|
-
|
244
|
-
if (offsetParent) {
|
245
|
-
var html = getDocumentElement(offsetParent);
|
246
|
-
|
247
|
-
if (getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && getComputedStyle(html).position !== 'static') {
|
248
|
-
return html;
|
249
|
-
}
|
250
|
-
}
|
251
|
-
|
252
|
-
return offsetParent;
|
267
|
+
return element.offsetParent;
|
253
268
|
} // `.offsetParent` reports `null` for fixed elements, while absolute elements
|
254
269
|
// return the containing block
|
255
270
|
|
256
271
|
|
257
272
|
function getContainingBlock(element) {
|
273
|
+
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
|
274
|
+
var isIE = navigator.userAgent.indexOf('Trident') !== -1;
|
275
|
+
|
276
|
+
if (isIE && isHTMLElement(element)) {
|
277
|
+
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
278
|
+
var elementCss = getComputedStyle(element);
|
279
|
+
|
280
|
+
if (elementCss.position === 'fixed') {
|
281
|
+
return null;
|
282
|
+
}
|
283
|
+
}
|
284
|
+
|
258
285
|
var currentNode = getParentNode(element);
|
259
286
|
|
260
287
|
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
|
261
288
|
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
|
262
289
|
// create a containing block.
|
290
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
263
291
|
|
264
|
-
if (css.transform !== 'none' || css.perspective !== 'none' || css.willChange && css.willChange !== '
|
292
|
+
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') {
|
265
293
|
return currentNode;
|
266
294
|
} else {
|
267
295
|
currentNode = currentNode.parentNode;
|
@@ -281,7 +309,7 @@ function getOffsetParent(element) {
|
|
281
309
|
offsetParent = getTrueOffsetParent(offsetParent);
|
282
310
|
}
|
283
311
|
|
284
|
-
if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
|
312
|
+
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
|
285
313
|
return window;
|
286
314
|
}
|
287
315
|
|
@@ -292,8 +320,12 @@ function getMainAxisFromPlacement(placement) {
|
|
292
320
|
return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
|
293
321
|
}
|
294
322
|
|
295
|
-
|
296
|
-
|
323
|
+
var max = Math.max;
|
324
|
+
var min = Math.min;
|
325
|
+
var round = Math.round;
|
326
|
+
|
327
|
+
function within(min$1, value, max$1) {
|
328
|
+
return max(min$1, min(value, max$1));
|
297
329
|
}
|
298
330
|
|
299
331
|
function getFreshSideObject() {
|
@@ -306,7 +338,7 @@ function getFreshSideObject() {
|
|
306
338
|
}
|
307
339
|
|
308
340
|
function mergePaddingObject(paddingObject) {
|
309
|
-
return Object.assign(
|
341
|
+
return Object.assign({}, getFreshSideObject(), paddingObject);
|
310
342
|
}
|
311
343
|
|
312
344
|
function expandToHashMap(value, keys) {
|
@@ -316,11 +348,19 @@ function expandToHashMap(value, keys) {
|
|
316
348
|
}, {});
|
317
349
|
}
|
318
350
|
|
351
|
+
var toPaddingObject = function toPaddingObject(padding, state) {
|
352
|
+
padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
|
353
|
+
placement: state.placement
|
354
|
+
})) : padding;
|
355
|
+
return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
|
356
|
+
};
|
357
|
+
|
319
358
|
function arrow(_ref) {
|
320
359
|
var _state$modifiersData$;
|
321
360
|
|
322
361
|
var state = _ref.state,
|
323
|
-
name = _ref.name
|
362
|
+
name = _ref.name,
|
363
|
+
options = _ref.options;
|
324
364
|
var arrowElement = state.elements.arrow;
|
325
365
|
var popperOffsets = state.modifiersData.popperOffsets;
|
326
366
|
var basePlacement = getBasePlacement(state.placement);
|
@@ -332,7 +372,7 @@ function arrow(_ref) {
|
|
332
372
|
return;
|
333
373
|
}
|
334
374
|
|
335
|
-
var paddingObject =
|
375
|
+
var paddingObject = toPaddingObject(options.padding, state);
|
336
376
|
var arrowRect = getLayoutRect(arrowElement);
|
337
377
|
var minProp = axis === 'y' ? top : left;
|
338
378
|
var maxProp = axis === 'y' ? bottom : right;
|
@@ -354,12 +394,9 @@ function arrow(_ref) {
|
|
354
394
|
|
355
395
|
function effect$1(_ref2) {
|
356
396
|
var state = _ref2.state,
|
357
|
-
options = _ref2.options
|
358
|
-
name = _ref2.name;
|
397
|
+
options = _ref2.options;
|
359
398
|
var _options$element = options.element,
|
360
|
-
arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element
|
361
|
-
_options$padding = options.padding,
|
362
|
-
padding = _options$padding === void 0 ? 0 : _options$padding;
|
399
|
+
arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
|
363
400
|
|
364
401
|
if (arrowElement == null) {
|
365
402
|
return;
|
@@ -380,9 +417,6 @@ function effect$1(_ref2) {
|
|
380
417
|
}
|
381
418
|
|
382
419
|
state.elements.arrow = arrowElement;
|
383
|
-
state.modifiersData[name + "#persistent"] = {
|
384
|
-
padding: mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements))
|
385
|
-
};
|
386
420
|
} // eslint-disable-next-line import/no-unused-modules
|
387
421
|
|
388
422
|
|
@@ -405,14 +439,14 @@ var unsetSides = {
|
|
405
439
|
// Zooming can change the DPR, but it seems to report a value that will
|
406
440
|
// cleanly divide the values into the appropriate subpixels.
|
407
441
|
|
408
|
-
function
|
442
|
+
function roundOffsetsByDPR(_ref) {
|
409
443
|
var x = _ref.x,
|
410
444
|
y = _ref.y;
|
411
445
|
var win = window;
|
412
446
|
var dpr = win.devicePixelRatio || 1;
|
413
447
|
return {
|
414
|
-
x:
|
415
|
-
y:
|
448
|
+
x: round(round(x * dpr) / dpr) || 0,
|
449
|
+
y: round(round(y * dpr) / dpr) || 0
|
416
450
|
};
|
417
451
|
}
|
418
452
|
|
@@ -425,11 +459,14 @@ function mapToStyles(_ref2) {
|
|
425
459
|
offsets = _ref2.offsets,
|
426
460
|
position = _ref2.position,
|
427
461
|
gpuAcceleration = _ref2.gpuAcceleration,
|
428
|
-
adaptive = _ref2.adaptive
|
462
|
+
adaptive = _ref2.adaptive,
|
463
|
+
roundOffsets = _ref2.roundOffsets;
|
429
464
|
|
430
|
-
var
|
431
|
-
x =
|
432
|
-
|
465
|
+
var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
|
466
|
+
_ref3$x = _ref3.x,
|
467
|
+
x = _ref3$x === void 0 ? 0 : _ref3$x,
|
468
|
+
_ref3$y = _ref3.y,
|
469
|
+
y = _ref3$y === void 0 ? 0 : _ref3$y;
|
433
470
|
|
434
471
|
var hasX = offsets.hasOwnProperty('x');
|
435
472
|
var hasY = offsets.hasOwnProperty('y');
|
@@ -439,23 +476,32 @@ function mapToStyles(_ref2) {
|
|
439
476
|
|
440
477
|
if (adaptive) {
|
441
478
|
var offsetParent = getOffsetParent(popper);
|
479
|
+
var heightProp = 'clientHeight';
|
480
|
+
var widthProp = 'clientWidth';
|
442
481
|
|
443
482
|
if (offsetParent === getWindow(popper)) {
|
444
483
|
offsetParent = getDocumentElement(popper);
|
445
|
-
} // $FlowFixMe: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
|
446
484
|
|
447
|
-
|
485
|
+
if (getComputedStyle(offsetParent).position !== 'static') {
|
486
|
+
heightProp = 'scrollHeight';
|
487
|
+
widthProp = 'scrollWidth';
|
488
|
+
}
|
489
|
+
} // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
|
490
|
+
|
448
491
|
|
492
|
+
offsetParent = offsetParent;
|
449
493
|
|
450
494
|
if (placement === top) {
|
451
|
-
sideY = bottom;
|
452
|
-
|
495
|
+
sideY = bottom; // $FlowFixMe[prop-missing]
|
496
|
+
|
497
|
+
y -= offsetParent[heightProp] - popperRect.height;
|
453
498
|
y *= gpuAcceleration ? 1 : -1;
|
454
499
|
}
|
455
500
|
|
456
501
|
if (placement === left) {
|
457
|
-
sideX = right;
|
458
|
-
|
502
|
+
sideX = right; // $FlowFixMe[prop-missing]
|
503
|
+
|
504
|
+
x -= offsetParent[widthProp] - popperRect.width;
|
459
505
|
x *= gpuAcceleration ? 1 : -1;
|
460
506
|
}
|
461
507
|
}
|
@@ -467,19 +513,21 @@ function mapToStyles(_ref2) {
|
|
467
513
|
if (gpuAcceleration) {
|
468
514
|
var _Object$assign;
|
469
515
|
|
470
|
-
return Object.assign(
|
516
|
+
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));
|
471
517
|
}
|
472
518
|
|
473
|
-
return Object.assign(
|
519
|
+
return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
|
474
520
|
}
|
475
521
|
|
476
|
-
function computeStyles(
|
477
|
-
var state =
|
478
|
-
options =
|
522
|
+
function computeStyles(_ref4) {
|
523
|
+
var state = _ref4.state,
|
524
|
+
options = _ref4.options;
|
479
525
|
var _options$gpuAccelerat = options.gpuAcceleration,
|
480
526
|
gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
|
481
527
|
_options$adaptive = options.adaptive,
|
482
|
-
adaptive = _options$adaptive === void 0 ? true : _options$adaptive
|
528
|
+
adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
|
529
|
+
_options$roundOffsets = options.roundOffsets,
|
530
|
+
roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
|
483
531
|
|
484
532
|
var commonStyles = {
|
485
533
|
placement: getBasePlacement(state.placement),
|
@@ -489,22 +537,24 @@ function computeStyles(_ref3) {
|
|
489
537
|
};
|
490
538
|
|
491
539
|
if (state.modifiersData.popperOffsets != null) {
|
492
|
-
state.styles.popper = Object.assign(
|
540
|
+
state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
|
493
541
|
offsets: state.modifiersData.popperOffsets,
|
494
542
|
position: state.options.strategy,
|
495
|
-
adaptive: adaptive
|
543
|
+
adaptive: adaptive,
|
544
|
+
roundOffsets: roundOffsets
|
496
545
|
})));
|
497
546
|
}
|
498
547
|
|
499
548
|
if (state.modifiersData.arrow != null) {
|
500
|
-
state.styles.arrow = Object.assign(
|
549
|
+
state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
|
501
550
|
offsets: state.modifiersData.arrow,
|
502
551
|
position: 'absolute',
|
503
|
-
adaptive: false
|
552
|
+
adaptive: false,
|
553
|
+
roundOffsets: roundOffsets
|
504
554
|
})));
|
505
555
|
}
|
506
556
|
|
507
|
-
state.attributes.popper = Object.assign(
|
557
|
+
state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
508
558
|
'data-popper-placement': state.placement
|
509
559
|
});
|
510
560
|
} // eslint-disable-next-line import/no-unused-modules
|
@@ -588,20 +638,6 @@ function getOppositeVariationPlacement(placement) {
|
|
588
638
|
});
|
589
639
|
}
|
590
640
|
|
591
|
-
function getBoundingClientRect(element) {
|
592
|
-
var rect = element.getBoundingClientRect();
|
593
|
-
return {
|
594
|
-
width: rect.width,
|
595
|
-
height: rect.height,
|
596
|
-
top: rect.top,
|
597
|
-
right: rect.right,
|
598
|
-
bottom: rect.bottom,
|
599
|
-
left: rect.left,
|
600
|
-
x: rect.left,
|
601
|
-
y: rect.top
|
602
|
-
};
|
603
|
-
}
|
604
|
-
|
605
641
|
function getWindowScroll(node) {
|
606
642
|
var win = getWindow(node);
|
607
643
|
var scrollLeft = win.pageXOffset;
|
@@ -664,16 +700,18 @@ function getViewportRect(element) {
|
|
664
700
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable
|
665
701
|
|
666
702
|
function getDocumentRect(element) {
|
703
|
+
var _element$ownerDocumen;
|
704
|
+
|
667
705
|
var html = getDocumentElement(element);
|
668
706
|
var winScroll = getWindowScroll(element);
|
669
|
-
var body = element.ownerDocument.body;
|
670
|
-
var width =
|
671
|
-
var height =
|
707
|
+
var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
|
708
|
+
var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
|
709
|
+
var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
|
672
710
|
var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
|
673
711
|
var y = -winScroll.scrollTop;
|
674
712
|
|
675
713
|
if (getComputedStyle(body || html).direction === 'rtl') {
|
676
|
-
x +=
|
714
|
+
x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
|
677
715
|
}
|
678
716
|
|
679
717
|
return {
|
@@ -696,7 +734,7 @@ function isScrollParent(element) {
|
|
696
734
|
|
697
735
|
function getScrollParent(node) {
|
698
736
|
if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
|
699
|
-
// $FlowFixMe: assume body is always available
|
737
|
+
// $FlowFixMe[incompatible-return]: assume body is always available
|
700
738
|
return node.ownerDocument.body;
|
701
739
|
}
|
702
740
|
|
@@ -710,26 +748,28 @@ function getScrollParent(node) {
|
|
710
748
|
/*
|
711
749
|
given a DOM element, return the list of all scroll parents, up the list of ancesors
|
712
750
|
until we get to the top window object. This list is what we attach scroll listeners
|
713
|
-
to, because if any of these parent elements scroll, we'll need to re-calculate the
|
751
|
+
to, because if any of these parent elements scroll, we'll need to re-calculate the
|
714
752
|
reference element's position.
|
715
753
|
*/
|
716
754
|
|
717
755
|
function listScrollParents(element, list) {
|
756
|
+
var _element$ownerDocumen;
|
757
|
+
|
718
758
|
if (list === void 0) {
|
719
759
|
list = [];
|
720
760
|
}
|
721
761
|
|
722
762
|
var scrollParent = getScrollParent(element);
|
723
|
-
var isBody =
|
763
|
+
var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
|
724
764
|
var win = getWindow(scrollParent);
|
725
765
|
var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
726
766
|
var updatedList = list.concat(target);
|
727
|
-
return isBody ? updatedList : // $FlowFixMe: isBody tells us target will be an HTMLElement here
|
767
|
+
return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
|
728
768
|
updatedList.concat(listScrollParents(getParentNode(target)));
|
729
769
|
}
|
730
770
|
|
731
771
|
function rectToClientRect(rect) {
|
732
|
-
return Object.assign(
|
772
|
+
return Object.assign({}, rect, {
|
733
773
|
left: rect.x,
|
734
774
|
top: rect.y,
|
735
775
|
right: rect.x + rect.width,
|
@@ -764,7 +804,7 @@ function getClippingParents(element) {
|
|
764
804
|
|
765
805
|
if (!isElement(clipperElement)) {
|
766
806
|
return [];
|
767
|
-
} // $FlowFixMe: https://github.com/facebook/flow/issues/1414
|
807
|
+
} // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
|
768
808
|
|
769
809
|
|
770
810
|
return clippingParents.filter(function (clippingParent) {
|
@@ -780,10 +820,10 @@ function getClippingRect(element, boundary, rootBoundary) {
|
|
780
820
|
var firstClippingParent = clippingParents[0];
|
781
821
|
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
|
782
822
|
var rect = getClientRectFromMixedType(element, clippingParent);
|
783
|
-
accRect.top =
|
784
|
-
accRect.right =
|
785
|
-
accRect.bottom =
|
786
|
-
accRect.left =
|
823
|
+
accRect.top = max(rect.top, accRect.top);
|
824
|
+
accRect.right = min(rect.right, accRect.right);
|
825
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
826
|
+
accRect.left = max(rect.left, accRect.left);
|
787
827
|
return accRect;
|
788
828
|
}, getClientRectFromMixedType(element, firstClippingParent));
|
789
829
|
clippingRect.width = clippingRect.right - clippingRect.left;
|
@@ -850,11 +890,11 @@ function computeOffsets(_ref) {
|
|
850
890
|
|
851
891
|
switch (variation) {
|
852
892
|
case start:
|
853
|
-
offsets[mainAxis] =
|
893
|
+
offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
|
854
894
|
break;
|
855
895
|
|
856
896
|
case end:
|
857
|
-
offsets[mainAxis] =
|
897
|
+
offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
|
858
898
|
break;
|
859
899
|
}
|
860
900
|
}
|
@@ -893,7 +933,7 @@ function detectOverflow(state, options) {
|
|
893
933
|
strategy: 'absolute',
|
894
934
|
placement: placement
|
895
935
|
});
|
896
|
-
var popperClientRect = rectToClientRect(Object.assign(
|
936
|
+
var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
|
897
937
|
var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
|
898
938
|
// 0 or negative = within the clipping rect
|
899
939
|
|
@@ -917,9 +957,6 @@ function detectOverflow(state, options) {
|
|
917
957
|
return overflowOffsets;
|
918
958
|
}
|
919
959
|
|
920
|
-
/*:: type OverflowsMap = { [ComputedPlacement]: number }; */
|
921
|
-
|
922
|
-
/*;; type OverflowsMap = { [key in ComputedPlacement]: number }; */
|
923
960
|
function computeAutoPlacement(state, options) {
|
924
961
|
if (options === void 0) {
|
925
962
|
options = {};
|
@@ -936,15 +973,14 @@ function computeAutoPlacement(state, options) {
|
|
936
973
|
var variation = getVariation(placement);
|
937
974
|
var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
|
938
975
|
return getVariation(placement) === variation;
|
939
|
-
}) : basePlacements;
|
940
|
-
|
976
|
+
}) : basePlacements;
|
941
977
|
var allowedPlacements = placements$1.filter(function (placement) {
|
942
978
|
return allowedAutoPlacements.indexOf(placement) >= 0;
|
943
979
|
});
|
944
980
|
|
945
981
|
if (allowedPlacements.length === 0) {
|
946
982
|
allowedPlacements = placements$1;
|
947
|
-
} // $FlowFixMe: Flow seems to have problems with two array unions...
|
983
|
+
} // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
|
948
984
|
|
949
985
|
|
950
986
|
var overflows = allowedPlacements.reduce(function (acc, placement) {
|
@@ -1145,7 +1181,7 @@ function hide(_ref) {
|
|
1145
1181
|
isReferenceHidden: isReferenceHidden,
|
1146
1182
|
hasPopperEscaped: hasPopperEscaped
|
1147
1183
|
};
|
1148
|
-
state.attributes.popper = Object.assign(
|
1184
|
+
state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
1149
1185
|
'data-popper-reference-hidden': isReferenceHidden,
|
1150
1186
|
'data-popper-escaped': hasPopperEscaped
|
1151
1187
|
});
|
@@ -1164,7 +1200,7 @@ function distanceAndSkiddingToXY(placement, rects, offset) {
|
|
1164
1200
|
var basePlacement = getBasePlacement(placement);
|
1165
1201
|
var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
|
1166
1202
|
|
1167
|
-
var _ref = typeof offset === 'function' ? offset(Object.assign(
|
1203
|
+
var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
|
1168
1204
|
placement: placement
|
1169
1205
|
})) : offset,
|
1170
1206
|
skidding = _ref[0],
|
@@ -1270,7 +1306,7 @@ function preventOverflow(_ref) {
|
|
1270
1306
|
var popperOffsets = state.modifiersData.popperOffsets;
|
1271
1307
|
var referenceRect = state.rects.reference;
|
1272
1308
|
var popperRect = state.rects.popper;
|
1273
|
-
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign(
|
1309
|
+
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
|
1274
1310
|
placement: state.placement
|
1275
1311
|
})) : tetherOffset;
|
1276
1312
|
var data = {
|
@@ -1282,13 +1318,13 @@ function preventOverflow(_ref) {
|
|
1282
1318
|
return;
|
1283
1319
|
}
|
1284
1320
|
|
1285
|
-
if (checkMainAxis) {
|
1321
|
+
if (checkMainAxis || checkAltAxis) {
|
1286
1322
|
var mainSide = mainAxis === 'y' ? top : left;
|
1287
1323
|
var altSide = mainAxis === 'y' ? bottom : right;
|
1288
1324
|
var len = mainAxis === 'y' ? 'height' : 'width';
|
1289
1325
|
var offset = popperOffsets[mainAxis];
|
1290
|
-
var min = popperOffsets[mainAxis] + overflow[mainSide];
|
1291
|
-
var max = popperOffsets[mainAxis] - overflow[altSide];
|
1326
|
+
var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
|
1327
|
+
var max$1 = popperOffsets[mainAxis] - overflow[altSide];
|
1292
1328
|
var additive = tether ? -popperRect[len] / 2 : 0;
|
1293
1329
|
var minLen = variation === start ? referenceRect[len] : popperRect[len];
|
1294
1330
|
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
|
@@ -1315,26 +1351,29 @@ function preventOverflow(_ref) {
|
|
1315
1351
|
var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
|
1316
1352
|
var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
|
1317
1353
|
var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
|
1318
|
-
var preventedOffset = within(tether ? Math.min(min, tetherMin) : min, offset, tether ? Math.max(max, tetherMax) : max);
|
1319
|
-
popperOffsets[mainAxis] = preventedOffset;
|
1320
|
-
data[mainAxis] = preventedOffset - offset;
|
1321
|
-
}
|
1322
1354
|
|
1323
|
-
|
1324
|
-
|
1355
|
+
if (checkMainAxis) {
|
1356
|
+
var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
|
1357
|
+
popperOffsets[mainAxis] = preventedOffset;
|
1358
|
+
data[mainAxis] = preventedOffset - offset;
|
1359
|
+
}
|
1360
|
+
|
1361
|
+
if (checkAltAxis) {
|
1362
|
+
var _mainSide = mainAxis === 'x' ? top : left;
|
1325
1363
|
|
1326
|
-
|
1364
|
+
var _altSide = mainAxis === 'x' ? bottom : right;
|
1327
1365
|
|
1328
|
-
|
1366
|
+
var _offset = popperOffsets[altAxis];
|
1329
1367
|
|
1330
|
-
|
1368
|
+
var _min = _offset + overflow[_mainSide];
|
1331
1369
|
|
1332
|
-
|
1370
|
+
var _max = _offset - overflow[_altSide];
|
1333
1371
|
|
1334
|
-
|
1372
|
+
var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
|
1335
1373
|
|
1336
|
-
|
1337
|
-
|
1374
|
+
popperOffsets[altAxis] = _preventedOffset;
|
1375
|
+
data[altAxis] = _preventedOffset - _offset;
|
1376
|
+
}
|
1338
1377
|
}
|
1339
1378
|
|
1340
1379
|
state.modifiersData[name] = data;
|
@@ -1468,9 +1507,9 @@ function debounce(fn) {
|
|
1468
1507
|
function mergeByName(modifiers) {
|
1469
1508
|
var merged = modifiers.reduce(function (merged, current) {
|
1470
1509
|
var existing = merged[current.name];
|
1471
|
-
merged[current.name] = existing ? Object.assign(
|
1472
|
-
options: Object.assign(
|
1473
|
-
data: Object.assign(
|
1510
|
+
merged[current.name] = existing ? Object.assign({}, existing, current, {
|
1511
|
+
options: Object.assign({}, existing.options, current.options),
|
1512
|
+
data: Object.assign({}, existing.data, current.data)
|
1474
1513
|
}) : current;
|
1475
1514
|
return merged;
|
1476
1515
|
}, {}); // IE11 does not support Object.values
|
@@ -1514,7 +1553,7 @@ function popperGenerator(generatorOptions) {
|
|
1514
1553
|
var state = {
|
1515
1554
|
placement: 'bottom',
|
1516
1555
|
orderedModifiers: [],
|
1517
|
-
options: Object.assign(
|
1556
|
+
options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
|
1518
1557
|
modifiersData: {},
|
1519
1558
|
elements: {
|
1520
1559
|
reference: reference,
|
@@ -1529,7 +1568,7 @@ function popperGenerator(generatorOptions) {
|
|
1529
1568
|
state: state,
|
1530
1569
|
setOptions: function setOptions(options) {
|
1531
1570
|
cleanupModifierEffects();
|
1532
|
-
state.options = Object.assign(
|
1571
|
+
state.options = Object.assign({}, defaultOptions, state.options, options);
|
1533
1572
|
state.scrollParents = {
|
1534
1573
|
reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
|
1535
1574
|
popper: listScrollParents(popper)
|
@@ -1677,10 +1716,12 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
1677
1716
|
}); // eslint-disable-next-line import/no-unused-modules
|
1678
1717
|
|
1679
1718
|
/**!
|
1680
|
-
* tippy.js v6.
|
1681
|
-
* (c) 2017-
|
1719
|
+
* tippy.js v6.3.1
|
1720
|
+
* (c) 2017-2021 atomiks
|
1682
1721
|
* MIT License
|
1683
1722
|
*/
|
1723
|
+
|
1724
|
+
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>';
|
1684
1725
|
var BOX_CLASS = "tippy-box";
|
1685
1726
|
var CONTENT_CLASS = "tippy-content";
|
1686
1727
|
var BACKDROP_CLASS = "tippy-backdrop";
|
@@ -1805,10 +1846,13 @@ function setVisibilityState(els, state) {
|
|
1805
1846
|
});
|
1806
1847
|
}
|
1807
1848
|
function getOwnerDocument(elementOrElements) {
|
1849
|
+
var _element$ownerDocumen;
|
1850
|
+
|
1808
1851
|
var _normalizeToArray = normalizeToArray(elementOrElements),
|
1809
|
-
element = _normalizeToArray[0];
|
1852
|
+
element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
|
1810
1853
|
|
1811
|
-
|
1854
|
+
|
1855
|
+
return (element == null ? void 0 : (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body) ? element.ownerDocument : document;
|
1812
1856
|
}
|
1813
1857
|
function isCursorOutsideInteractiveBorder(popperTreeData, event) {
|
1814
1858
|
var clientX = event.clientX,
|
@@ -2950,6 +2994,8 @@ function createTippy(reference, passedProps) {
|
|
2950
2994
|
}
|
2951
2995
|
|
2952
2996
|
onFirstUpdate = function onFirstUpdate() {
|
2997
|
+
var _instance$popperInsta2;
|
2998
|
+
|
2953
2999
|
if (!instance.state.isVisible || ignoreOnFirstUpdate) {
|
2954
3000
|
return;
|
2955
3001
|
}
|
@@ -2970,7 +3016,10 @@ function createTippy(reference, passedProps) {
|
|
2970
3016
|
|
2971
3017
|
handleAriaContentAttribute();
|
2972
3018
|
handleAriaExpandedAttribute();
|
2973
|
-
pushIfUnique(mountedInstances, instance);
|
3019
|
+
pushIfUnique(mountedInstances, instance); // certain modifiers (e.g. `maxSize`) require a second update after the
|
3020
|
+
// popper has been positioned for the first time
|
3021
|
+
|
3022
|
+
(_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
|
2974
3023
|
instance.state.isMounted = true;
|
2975
3024
|
invokeHook('onMount', [instance]);
|
2976
3025
|
|
@@ -3119,7 +3168,39 @@ tippy.defaultProps = defaultProps;
|
|
3119
3168
|
tippy.setDefaultProps = setDefaultProps;
|
3120
3169
|
tippy.currentInput = currentInput;
|
3121
3170
|
|
3171
|
+
// every time the popper is destroyed (i.e. a new target), removing the styles
|
3172
|
+
// and causing transitions to break for singletons when the console is open, but
|
3173
|
+
// most notably for non-transform styles being used, `gpuAcceleration: false`.
|
3174
|
+
|
3175
|
+
var applyStylesModifier = Object.assign({}, applyStyles$1, {
|
3176
|
+
effect: function effect(_ref) {
|
3177
|
+
var state = _ref.state;
|
3178
|
+
var initialStyles = {
|
3179
|
+
popper: {
|
3180
|
+
position: state.options.strategy,
|
3181
|
+
left: '0',
|
3182
|
+
top: '0',
|
3183
|
+
margin: '0'
|
3184
|
+
},
|
3185
|
+
arrow: {
|
3186
|
+
position: 'absolute'
|
3187
|
+
},
|
3188
|
+
reference: {}
|
3189
|
+
};
|
3190
|
+
Object.assign(state.elements.popper.style, initialStyles.popper);
|
3191
|
+
state.styles = initialStyles;
|
3192
|
+
|
3193
|
+
if (state.elements.arrow) {
|
3194
|
+
Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
3195
|
+
} // intentionally return no cleanup function
|
3196
|
+
// return () => { ... }
|
3197
|
+
|
3198
|
+
}
|
3199
|
+
});
|
3200
|
+
|
3122
3201
|
var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
3202
|
+
var _optionalProps$popper;
|
3203
|
+
|
3123
3204
|
if (optionalProps === void 0) {
|
3124
3205
|
optionalProps = {};
|
3125
3206
|
}
|
@@ -3129,6 +3210,7 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3129
3210
|
var currentTarget;
|
3130
3211
|
var overrides = optionalProps.overrides;
|
3131
3212
|
var interceptSetPropsCleanups = [];
|
3213
|
+
var shownOnCreate = false;
|
3132
3214
|
|
3133
3215
|
function setReferences() {
|
3134
3216
|
references = individualInstances.map(function (instance) {
|
@@ -3162,6 +3244,26 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3162
3244
|
instance.setProps = originalSetProps;
|
3163
3245
|
};
|
3164
3246
|
});
|
3247
|
+
} // have to pass singleton, as it maybe undefined on first call
|
3248
|
+
|
3249
|
+
|
3250
|
+
function prepareInstance(singleton, target) {
|
3251
|
+
var index = references.indexOf(target); // bail-out
|
3252
|
+
|
3253
|
+
if (target === currentTarget) {
|
3254
|
+
return;
|
3255
|
+
}
|
3256
|
+
|
3257
|
+
currentTarget = target;
|
3258
|
+
var overrideProps = (overrides || []).concat('content').reduce(function (acc, prop) {
|
3259
|
+
acc[prop] = individualInstances[index].props[prop];
|
3260
|
+
return acc;
|
3261
|
+
}, {});
|
3262
|
+
singleton.setProps(Object.assign({}, overrideProps, {
|
3263
|
+
getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
|
3264
|
+
return target.getBoundingClientRect();
|
3265
|
+
}
|
3266
|
+
}));
|
3165
3267
|
}
|
3166
3268
|
|
3167
3269
|
enableInstances(false);
|
@@ -3172,32 +3274,90 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3172
3274
|
onDestroy: function onDestroy() {
|
3173
3275
|
enableInstances(true);
|
3174
3276
|
},
|
3175
|
-
|
3176
|
-
|
3177
|
-
|
3178
|
-
|
3179
|
-
if (
|
3180
|
-
|
3277
|
+
onHidden: function onHidden() {
|
3278
|
+
currentTarget = null;
|
3279
|
+
},
|
3280
|
+
onClickOutside: function onClickOutside(instance) {
|
3281
|
+
if (instance.props.showOnCreate && !shownOnCreate) {
|
3282
|
+
shownOnCreate = true;
|
3283
|
+
currentTarget = null;
|
3181
3284
|
}
|
3182
|
-
|
3183
|
-
|
3184
|
-
|
3185
|
-
|
3186
|
-
|
3187
|
-
}
|
3188
|
-
|
3189
|
-
|
3190
|
-
|
3191
|
-
}
|
3192
|
-
}));
|
3285
|
+
},
|
3286
|
+
onShow: function onShow(instance) {
|
3287
|
+
if (instance.props.showOnCreate && !shownOnCreate) {
|
3288
|
+
shownOnCreate = true;
|
3289
|
+
prepareInstance(instance, references[0]);
|
3290
|
+
}
|
3291
|
+
},
|
3292
|
+
onTrigger: function onTrigger(instance, event) {
|
3293
|
+
prepareInstance(instance, event.currentTarget);
|
3193
3294
|
}
|
3194
3295
|
};
|
3195
3296
|
}
|
3196
3297
|
};
|
3197
3298
|
var singleton = tippy(div(), Object.assign({}, removeProperties(optionalProps, ['overrides']), {
|
3198
3299
|
plugins: [plugin].concat(optionalProps.plugins || []),
|
3199
|
-
triggerTarget: references
|
3300
|
+
triggerTarget: references,
|
3301
|
+
popperOptions: Object.assign({}, optionalProps.popperOptions, {
|
3302
|
+
modifiers: [].concat(((_optionalProps$popper = optionalProps.popperOptions) == null ? void 0 : _optionalProps$popper.modifiers) || [], [applyStylesModifier])
|
3303
|
+
})
|
3200
3304
|
}));
|
3305
|
+
var originalShow = singleton.show;
|
3306
|
+
|
3307
|
+
singleton.show = function (target) {
|
3308
|
+
originalShow(); // first time, showOnCreate or programmatic call with no params
|
3309
|
+
// default to showing first instance
|
3310
|
+
|
3311
|
+
if (!currentTarget && target == null) {
|
3312
|
+
return prepareInstance(singleton, references[0]);
|
3313
|
+
} // triggered from event (do nothing as prepareInstance already called by onTrigger)
|
3314
|
+
// programmatic call with no params when already visible (do nothing again)
|
3315
|
+
|
3316
|
+
|
3317
|
+
if (currentTarget && target == null) {
|
3318
|
+
return;
|
3319
|
+
} // target is index of instance
|
3320
|
+
|
3321
|
+
|
3322
|
+
if (typeof target === 'number') {
|
3323
|
+
return references[target] && prepareInstance(singleton, references[target]);
|
3324
|
+
} // target is a child tippy instance
|
3325
|
+
|
3326
|
+
|
3327
|
+
if (individualInstances.includes(target)) {
|
3328
|
+
var ref = target.reference;
|
3329
|
+
return prepareInstance(singleton, ref);
|
3330
|
+
} // target is a ReferenceElement
|
3331
|
+
|
3332
|
+
|
3333
|
+
if (references.includes(target)) {
|
3334
|
+
return prepareInstance(singleton, target);
|
3335
|
+
}
|
3336
|
+
};
|
3337
|
+
|
3338
|
+
singleton.showNext = function () {
|
3339
|
+
var first = references[0];
|
3340
|
+
|
3341
|
+
if (!currentTarget) {
|
3342
|
+
return singleton.show(0);
|
3343
|
+
}
|
3344
|
+
|
3345
|
+
var index = references.indexOf(currentTarget);
|
3346
|
+
singleton.show(references[index + 1] || first);
|
3347
|
+
};
|
3348
|
+
|
3349
|
+
singleton.showPrevious = function () {
|
3350
|
+
var last = references[references.length - 1];
|
3351
|
+
|
3352
|
+
if (!currentTarget) {
|
3353
|
+
return singleton.show(last);
|
3354
|
+
}
|
3355
|
+
|
3356
|
+
var index = references.indexOf(currentTarget);
|
3357
|
+
var target = references[index - 1] || last;
|
3358
|
+
singleton.show(target);
|
3359
|
+
};
|
3360
|
+
|
3201
3361
|
var originalSetProps = singleton.setProps;
|
3202
3362
|
|
3203
3363
|
singleton.setProps = function (props) {
|
@@ -3681,6 +3841,7 @@ tippy.setDefaultProps({
|
|
3681
3841
|
},
|
3682
3842
|
});
|
3683
3843
|
function useTippy(el, opts = {}, settings = { mount: true }) {
|
3844
|
+
const vm = vue.getCurrentInstance();
|
3684
3845
|
const instance = vue.ref();
|
3685
3846
|
let container = null;
|
3686
3847
|
const getContainer = () => {
|
@@ -3695,11 +3856,18 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3695
3856
|
? content.value
|
3696
3857
|
: content;
|
3697
3858
|
if (vue.isVNode(unwrappedContent)) {
|
3859
|
+
if (vm) {
|
3860
|
+
unwrappedContent.appContext = vm.appContext;
|
3861
|
+
}
|
3698
3862
|
vue.render(unwrappedContent, getContainer());
|
3699
3863
|
newContent = () => getContainer();
|
3700
3864
|
}
|
3701
3865
|
else if (typeof unwrappedContent === 'object') {
|
3702
|
-
vue.
|
3866
|
+
let comp = vue.h(unwrappedContent);
|
3867
|
+
if (vm) {
|
3868
|
+
comp.appContext = vm.appContext;
|
3869
|
+
}
|
3870
|
+
vue.render(comp, getContainer());
|
3703
3871
|
newContent = () => getContainer();
|
3704
3872
|
}
|
3705
3873
|
else {
|
@@ -3718,8 +3886,14 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3718
3886
|
else {
|
3719
3887
|
options = { ...opts };
|
3720
3888
|
}
|
3721
|
-
if (options.content)
|
3889
|
+
if (options.content) {
|
3722
3890
|
options.content = getContent(options.content);
|
3891
|
+
}
|
3892
|
+
if (options.triggerTarget) {
|
3893
|
+
options.triggerTarget = vue.isRef(options.triggerTarget)
|
3894
|
+
? options.triggerTarget.value
|
3895
|
+
: options.triggerTarget;
|
3896
|
+
}
|
3723
3897
|
return options;
|
3724
3898
|
};
|
3725
3899
|
const refresh = () => {
|
@@ -3794,7 +3968,6 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3794
3968
|
mount,
|
3795
3969
|
};
|
3796
3970
|
if (settings.mount) {
|
3797
|
-
const vm = vue.getCurrentInstance();
|
3798
3971
|
if (vm) {
|
3799
3972
|
if (vm.isMounted) {
|
3800
3973
|
mount();
|
@@ -3819,6 +3992,46 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3819
3992
|
return response;
|
3820
3993
|
}
|
3821
3994
|
|
3995
|
+
function useTippyComponent(opts = {}, children) {
|
3996
|
+
const instance = vue.ref();
|
3997
|
+
return {
|
3998
|
+
instance,
|
3999
|
+
TippyComponent: vue.h(TippyComponent, {
|
4000
|
+
...opts,
|
4001
|
+
onVnodeMounted: vnode => {
|
4002
|
+
//@ts-ignore
|
4003
|
+
instance.value = vnode.component.ctx;
|
4004
|
+
},
|
4005
|
+
}, children),
|
4006
|
+
};
|
4007
|
+
}
|
4008
|
+
|
4009
|
+
function useSingleton(instances, optionalProps) {
|
4010
|
+
const singleton = vue.ref();
|
4011
|
+
vue.onMounted(() => {
|
4012
|
+
const pendingTippyInstances = Array.isArray(instances)
|
4013
|
+
? instances.map(i => i.value)
|
4014
|
+
: typeof instances === 'function'
|
4015
|
+
? instances()
|
4016
|
+
: instances.value;
|
4017
|
+
const tippyInstances = pendingTippyInstances
|
4018
|
+
.map((instance) => {
|
4019
|
+
if (instance instanceof Element) {
|
4020
|
+
//@ts-ignore
|
4021
|
+
return instance._tippy;
|
4022
|
+
}
|
4023
|
+
return instance;
|
4024
|
+
})
|
4025
|
+
.filter(Boolean);
|
4026
|
+
singleton.value = createSingleton(tippyInstances, optionalProps
|
4027
|
+
? { allowHTML: true, ...optionalProps }
|
4028
|
+
: { allowHTML: true });
|
4029
|
+
});
|
4030
|
+
return {
|
4031
|
+
singleton,
|
4032
|
+
};
|
4033
|
+
}
|
4034
|
+
|
3822
4035
|
// const pluginProps = [
|
3823
4036
|
// 'animateFill',
|
3824
4037
|
// 'followCursor',
|
@@ -3859,50 +4072,137 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
|
|
3859
4072
|
};
|
3860
4073
|
}
|
3861
4074
|
});
|
4075
|
+
props['to'] = {};
|
4076
|
+
props['tag'] = {
|
4077
|
+
default: 'span'
|
4078
|
+
};
|
4079
|
+
props['contentTag'] = {
|
4080
|
+
default: 'span'
|
4081
|
+
};
|
4082
|
+
props['contentClass'] = {
|
4083
|
+
default: null
|
4084
|
+
};
|
3862
4085
|
const TippyComponent = vue.defineComponent({
|
3863
4086
|
props,
|
3864
|
-
setup(props) {
|
4087
|
+
setup(props, { slots }) {
|
3865
4088
|
const elem = vue.ref();
|
3866
|
-
const
|
3867
|
-
|
4089
|
+
const contentElem = vue.ref();
|
4090
|
+
let options = props;
|
4091
|
+
if (options.to) {
|
4092
|
+
delete options.to;
|
4093
|
+
}
|
4094
|
+
let target = elem;
|
4095
|
+
if (props.to) {
|
4096
|
+
if (props.to instanceof Element) {
|
4097
|
+
target = () => props.to;
|
4098
|
+
}
|
4099
|
+
else if (typeof props.to === 'string' || props.to instanceof String) {
|
4100
|
+
target = () => document.querySelector(props.to);
|
4101
|
+
}
|
4102
|
+
}
|
4103
|
+
const tippy = useTippy(target, options);
|
4104
|
+
vue.onMounted(() => {
|
4105
|
+
if (slots.content)
|
4106
|
+
tippy.setContent(() => contentElem.value);
|
4107
|
+
});
|
4108
|
+
return { elem, contentElem, ...tippy };
|
4109
|
+
},
|
4110
|
+
render() {
|
4111
|
+
let slot = this.$slots.default ? this.$slots.default(this) : [];
|
4112
|
+
return vue.h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
|
4113
|
+
slot,
|
4114
|
+
vue.h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
|
4115
|
+
] : slot);
|
4116
|
+
},
|
4117
|
+
});
|
4118
|
+
|
4119
|
+
const booleanProps$1 = [
|
4120
|
+
'a11y',
|
4121
|
+
'allowHTML',
|
4122
|
+
'arrow',
|
4123
|
+
'flip',
|
4124
|
+
'flipOnUpdate',
|
4125
|
+
'hideOnClick',
|
4126
|
+
'ignoreAttributes',
|
4127
|
+
'inertia',
|
4128
|
+
'interactive',
|
4129
|
+
'lazy',
|
4130
|
+
'multiple',
|
4131
|
+
'showOnInit',
|
4132
|
+
'touch',
|
4133
|
+
'touchHold',
|
4134
|
+
];
|
4135
|
+
let props$1 = {};
|
4136
|
+
Object.keys(tippy.defaultProps).forEach((prop) => {
|
4137
|
+
if (booleanProps$1.includes(prop)) {
|
4138
|
+
props$1[prop] = {
|
4139
|
+
type: Boolean,
|
4140
|
+
default: function () {
|
4141
|
+
return tippy.defaultProps[prop];
|
4142
|
+
},
|
4143
|
+
};
|
4144
|
+
}
|
4145
|
+
else {
|
4146
|
+
props$1[prop] = {
|
4147
|
+
default: function () {
|
4148
|
+
return tippy.defaultProps[prop];
|
4149
|
+
},
|
4150
|
+
};
|
4151
|
+
}
|
4152
|
+
});
|
4153
|
+
const TippySingleton = vue.defineComponent({
|
4154
|
+
props: props$1,
|
4155
|
+
setup(props) {
|
4156
|
+
const instances = vue.ref([]);
|
4157
|
+
const { singleton } = useSingleton(instances, props);
|
4158
|
+
return { instances, singleton };
|
4159
|
+
},
|
4160
|
+
mounted() {
|
4161
|
+
var _a;
|
4162
|
+
const parent = this.$el.parentElement;
|
4163
|
+
const elements = parent.querySelectorAll('[data-v-tippy]');
|
4164
|
+
this.instances = Array.from(elements)
|
4165
|
+
.map((el) => el._tippy)
|
4166
|
+
.filter(Boolean);
|
4167
|
+
(_a = this.singleton) === null || _a === void 0 ? void 0 : _a.setInstances(this.instances);
|
3868
4168
|
},
|
3869
4169
|
render() {
|
3870
4170
|
let slot = this.$slots.default ? this.$slots.default() : [];
|
3871
|
-
return vue.h(
|
4171
|
+
return vue.h(() => slot);
|
3872
4172
|
},
|
3873
4173
|
});
|
3874
4174
|
|
3875
4175
|
const directive = {
|
3876
4176
|
mounted(el, binding, vnode) {
|
3877
|
-
const opts = binding.value || {};
|
3878
|
-
if (vnode.props && vnode.props.
|
4177
|
+
const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
|
4178
|
+
if (vnode.props && vnode.props.onTippyShow) {
|
3879
4179
|
opts.onShow = function (...args) {
|
3880
4180
|
var _a;
|
3881
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4181
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyShow(...args);
|
3882
4182
|
};
|
3883
4183
|
}
|
3884
|
-
if (vnode.props && vnode.props.
|
4184
|
+
if (vnode.props && vnode.props.onTippyShown) {
|
3885
4185
|
opts.onShown = function (...args) {
|
3886
4186
|
var _a;
|
3887
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4187
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyShown(...args);
|
3888
4188
|
};
|
3889
4189
|
}
|
3890
|
-
if (vnode.props && vnode.props.
|
4190
|
+
if (vnode.props && vnode.props.onTippyHidden) {
|
3891
4191
|
opts.onHidden = function (...args) {
|
3892
4192
|
var _a;
|
3893
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4193
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyHidden(...args);
|
3894
4194
|
};
|
3895
4195
|
}
|
3896
|
-
if (vnode.props && vnode.props.
|
4196
|
+
if (vnode.props && vnode.props.onTippyHide) {
|
3897
4197
|
opts.onHide = function (...args) {
|
3898
4198
|
var _a;
|
3899
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4199
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyHide(...args);
|
3900
4200
|
};
|
3901
4201
|
}
|
3902
|
-
if (vnode.props && vnode.props.
|
4202
|
+
if (vnode.props && vnode.props.onTippyMount) {
|
3903
4203
|
opts.onMount = function (...args) {
|
3904
4204
|
var _a;
|
3905
|
-
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.
|
4205
|
+
return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyMount(...args);
|
3906
4206
|
};
|
3907
4207
|
}
|
3908
4208
|
if (el.getAttribute('title') && !opts.content) {
|
@@ -3923,7 +4223,7 @@ const directive = {
|
|
3923
4223
|
}
|
3924
4224
|
},
|
3925
4225
|
updated(el, binding) {
|
3926
|
-
const opts = binding.value || {};
|
4226
|
+
const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
|
3927
4227
|
if (el.getAttribute('title') && !opts.content) {
|
3928
4228
|
opts.content = el.getAttribute('title');
|
3929
4229
|
el.removeAttribute('title');
|
@@ -3945,58 +4245,24 @@ const plugin = {
|
|
3945
4245
|
tippy.setDefaultProps(options.defaultProps || {});
|
3946
4246
|
app.directive(options.directive || 'tippy', directive);
|
3947
4247
|
app.component(options.component || 'tippy', TippyComponent);
|
4248
|
+
app.component(options.componentSingleton || 'tippy-singleton', TippySingleton);
|
3948
4249
|
},
|
3949
4250
|
};
|
3950
4251
|
|
3951
|
-
function useSingleton(instances, optionalProps) {
|
3952
|
-
const singleton = vue.ref();
|
3953
|
-
vue.onMounted(() => {
|
3954
|
-
singleton.value = createSingleton(instances.map(instance => instance.value), optionalProps);
|
3955
|
-
});
|
3956
|
-
return {
|
3957
|
-
singleton,
|
3958
|
-
};
|
3959
|
-
}
|
3960
|
-
|
3961
|
-
function styleInject(css, ref) {
|
3962
|
-
if ( ref === void 0 ) ref = {};
|
3963
|
-
var insertAt = ref.insertAt;
|
3964
|
-
|
3965
|
-
if (!css || typeof document === 'undefined') { return; }
|
3966
|
-
|
3967
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
3968
|
-
var style = document.createElement('style');
|
3969
|
-
style.type = 'text/css';
|
3970
|
-
|
3971
|
-
if (insertAt === 'top') {
|
3972
|
-
if (head.firstChild) {
|
3973
|
-
head.insertBefore(style, head.firstChild);
|
3974
|
-
} else {
|
3975
|
-
head.appendChild(style);
|
3976
|
-
}
|
3977
|
-
} else {
|
3978
|
-
head.appendChild(style);
|
3979
|
-
}
|
3980
|
-
|
3981
|
-
if (style.styleSheet) {
|
3982
|
-
style.styleSheet.cssText = css;
|
3983
|
-
} else {
|
3984
|
-
style.appendChild(document.createTextNode(css));
|
3985
|
-
}
|
3986
|
-
}
|
3987
|
-
|
3988
|
-
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}";
|
3989
|
-
styleInject(css_248z);
|
3990
|
-
|
3991
4252
|
const setDefaultProps$1 = tippy.setDefaultProps;
|
3992
4253
|
setDefaultProps$1({
|
4254
|
+
ignoreAttributes: true,
|
3993
4255
|
plugins: [sticky, inlinePositioning, followCursor, animateFill],
|
3994
4256
|
});
|
3995
4257
|
|
3996
4258
|
exports.Tippy = TippyComponent;
|
4259
|
+
exports.TippySingleton = TippySingleton;
|
3997
4260
|
exports.default = plugin;
|
3998
4261
|
exports.directive = directive;
|
4262
|
+
exports.plugin = plugin;
|
4263
|
+
exports.roundArrow = ROUND_ARROW;
|
3999
4264
|
exports.setDefaultProps = setDefaultProps$1;
|
4000
4265
|
exports.tippy = tippy;
|
4001
4266
|
exports.useSingleton = useSingleton;
|
4002
4267
|
exports.useTippy = useTippy;
|
4268
|
+
exports.useTippyComponent = useTippyComponent;
|