vue-tippy 6.0.0-alpha.6 → 6.0.0-alpha.60
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +105 -2
- package/dist/{vue-tippy.cjs.prod.js → vue-tippy.cjs} +1010 -241
- package/dist/vue-tippy.d.ts +1314 -23
- package/dist/{vue-tippy.esm-bundler.js → vue-tippy.esm-browser.js} +692 -243
- package/dist/{vue-tippy.global.js → vue-tippy.iife.js} +1010 -241
- package/dist/vue-tippy.iife.prod.js +6 -0
- package/dist/{vue-tippy.esm.js → vue-tippy.mjs} +692 -243
- package/dist/{vue-tippy.cjs.js → vue-tippy.prod.cjs} +694 -241
- package/index.cjs +7 -0
- package/index.js +7 -0
- package/package.json +40 -11
- package/src/components/Tippy.ts +158 -0
- package/src/components/TippySingleton.ts +74 -0
- package/src/composables/index.ts +3 -0
- package/src/composables/useSingleton.ts +44 -0
- package/src/composables/useTippy.ts +255 -0
- package/src/composables/useTippyComponent.ts +25 -0
- package/src/directive/index.ts +89 -0
- package/src/global.d.ts +4 -0
- package/src/index.ts +39 -0
- package/src/plugin/index.ts +18 -0
- package/src/types/index.ts +31 -0
- package/tsconfig.json +31 -0
- package/dist/vue-tippy.global.prod.js +0 -6
@@ -1,6 +1,6 @@
|
|
1
1
|
/*!
|
2
|
-
* vue-tippy v6.0.0-alpha.
|
3
|
-
* (c)
|
2
|
+
* vue-tippy v6.0.0-alpha.60
|
3
|
+
* (c) 2022
|
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
|
}
|
@@ -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);
|
@@ -167,14 +165,67 @@ function getBasePlacement(placement) {
|
|
167
165
|
return placement.split('-')[0];
|
168
166
|
}
|
169
167
|
|
170
|
-
|
168
|
+
var max = Math.max;
|
169
|
+
var min = Math.min;
|
170
|
+
var round = Math.round;
|
171
|
+
|
172
|
+
function getBoundingClientRect(element, includeScale) {
|
173
|
+
if (includeScale === void 0) {
|
174
|
+
includeScale = false;
|
175
|
+
}
|
176
|
+
|
177
|
+
var rect = element.getBoundingClientRect();
|
178
|
+
var scaleX = 1;
|
179
|
+
var scaleY = 1;
|
180
|
+
|
181
|
+
if (isHTMLElement(element) && includeScale) {
|
182
|
+
var offsetHeight = element.offsetHeight;
|
183
|
+
var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
|
184
|
+
// Fallback to 1 in case both values are `0`
|
185
|
+
|
186
|
+
if (offsetWidth > 0) {
|
187
|
+
scaleX = round(rect.width) / offsetWidth || 1;
|
188
|
+
}
|
189
|
+
|
190
|
+
if (offsetHeight > 0) {
|
191
|
+
scaleY = round(rect.height) / offsetHeight || 1;
|
192
|
+
}
|
193
|
+
}
|
194
|
+
|
195
|
+
return {
|
196
|
+
width: rect.width / scaleX,
|
197
|
+
height: rect.height / scaleY,
|
198
|
+
top: rect.top / scaleY,
|
199
|
+
right: rect.right / scaleX,
|
200
|
+
bottom: rect.bottom / scaleY,
|
201
|
+
left: rect.left / scaleX,
|
202
|
+
x: rect.left / scaleX,
|
203
|
+
y: rect.top / scaleY
|
204
|
+
};
|
205
|
+
}
|
206
|
+
|
171
207
|
// means it doesn't take into account transforms.
|
208
|
+
|
172
209
|
function getLayoutRect(element) {
|
210
|
+
var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
|
211
|
+
// Fixes https://github.com/popperjs/popper-core/issues/1223
|
212
|
+
|
213
|
+
var width = element.offsetWidth;
|
214
|
+
var height = element.offsetHeight;
|
215
|
+
|
216
|
+
if (Math.abs(clientRect.width - width) <= 1) {
|
217
|
+
width = clientRect.width;
|
218
|
+
}
|
219
|
+
|
220
|
+
if (Math.abs(clientRect.height - height) <= 1) {
|
221
|
+
height = clientRect.height;
|
222
|
+
}
|
223
|
+
|
173
224
|
return {
|
174
225
|
x: element.offsetLeft,
|
175
226
|
y: element.offsetTop,
|
176
|
-
width:
|
177
|
-
height:
|
227
|
+
width: width,
|
228
|
+
height: height
|
178
229
|
};
|
179
230
|
}
|
180
231
|
|
@@ -224,9 +275,8 @@ function getParentNode(element) {
|
|
224
275
|
// $FlowFixMe[incompatible-return]
|
225
276
|
// $FlowFixMe[prop-missing]
|
226
277
|
element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
|
227
|
-
element.parentNode || // DOM Element detected
|
228
|
-
|
229
|
-
element.host || // ShadowRoot detected
|
278
|
+
element.parentNode || ( // DOM Element detected
|
279
|
+
isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
|
230
280
|
// $FlowFixMe[incompatible-call]: HTMLElement is a Node
|
231
281
|
getDocumentElement(element) // fallback
|
232
282
|
|
@@ -239,29 +289,32 @@ function getTrueOffsetParent(element) {
|
|
239
289
|
return null;
|
240
290
|
}
|
241
291
|
|
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;
|
292
|
+
return element.offsetParent;
|
253
293
|
} // `.offsetParent` reports `null` for fixed elements, while absolute elements
|
254
294
|
// return the containing block
|
255
295
|
|
256
296
|
|
257
297
|
function getContainingBlock(element) {
|
298
|
+
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
|
299
|
+
var isIE = navigator.userAgent.indexOf('Trident') !== -1;
|
300
|
+
|
301
|
+
if (isIE && isHTMLElement(element)) {
|
302
|
+
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
303
|
+
var elementCss = getComputedStyle(element);
|
304
|
+
|
305
|
+
if (elementCss.position === 'fixed') {
|
306
|
+
return null;
|
307
|
+
}
|
308
|
+
}
|
309
|
+
|
258
310
|
var currentNode = getParentNode(element);
|
259
311
|
|
260
312
|
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
|
261
313
|
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
|
262
314
|
// create a containing block.
|
315
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
263
316
|
|
264
|
-
if (css.transform !== 'none' || css.perspective !== 'none' || css.willChange && css.willChange !== '
|
317
|
+
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
318
|
return currentNode;
|
266
319
|
} else {
|
267
320
|
currentNode = currentNode.parentNode;
|
@@ -281,7 +334,7 @@ function getOffsetParent(element) {
|
|
281
334
|
offsetParent = getTrueOffsetParent(offsetParent);
|
282
335
|
}
|
283
336
|
|
284
|
-
if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
|
337
|
+
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
|
285
338
|
return window;
|
286
339
|
}
|
287
340
|
|
@@ -292,8 +345,12 @@ function getMainAxisFromPlacement(placement) {
|
|
292
345
|
return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
|
293
346
|
}
|
294
347
|
|
295
|
-
function within(min, value, max) {
|
296
|
-
return
|
348
|
+
function within(min$1, value, max$1) {
|
349
|
+
return max(min$1, min(value, max$1));
|
350
|
+
}
|
351
|
+
function withinMaxClamp(min, value, max) {
|
352
|
+
var v = within(min, value, max);
|
353
|
+
return v > max ? max : v;
|
297
354
|
}
|
298
355
|
|
299
356
|
function getFreshSideObject() {
|
@@ -306,7 +363,7 @@ function getFreshSideObject() {
|
|
306
363
|
}
|
307
364
|
|
308
365
|
function mergePaddingObject(paddingObject) {
|
309
|
-
return Object.assign(
|
366
|
+
return Object.assign({}, getFreshSideObject(), paddingObject);
|
310
367
|
}
|
311
368
|
|
312
369
|
function expandToHashMap(value, keys) {
|
@@ -316,11 +373,19 @@ function expandToHashMap(value, keys) {
|
|
316
373
|
}, {});
|
317
374
|
}
|
318
375
|
|
376
|
+
var toPaddingObject = function toPaddingObject(padding, state) {
|
377
|
+
padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
|
378
|
+
placement: state.placement
|
379
|
+
})) : padding;
|
380
|
+
return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
|
381
|
+
};
|
382
|
+
|
319
383
|
function arrow(_ref) {
|
320
384
|
var _state$modifiersData$;
|
321
385
|
|
322
386
|
var state = _ref.state,
|
323
|
-
name = _ref.name
|
387
|
+
name = _ref.name,
|
388
|
+
options = _ref.options;
|
324
389
|
var arrowElement = state.elements.arrow;
|
325
390
|
var popperOffsets = state.modifiersData.popperOffsets;
|
326
391
|
var basePlacement = getBasePlacement(state.placement);
|
@@ -332,7 +397,7 @@ function arrow(_ref) {
|
|
332
397
|
return;
|
333
398
|
}
|
334
399
|
|
335
|
-
var paddingObject =
|
400
|
+
var paddingObject = toPaddingObject(options.padding, state);
|
336
401
|
var arrowRect = getLayoutRect(arrowElement);
|
337
402
|
var minProp = axis === 'y' ? top : left;
|
338
403
|
var maxProp = axis === 'y' ? bottom : right;
|
@@ -354,12 +419,9 @@ function arrow(_ref) {
|
|
354
419
|
|
355
420
|
function effect$1(_ref2) {
|
356
421
|
var state = _ref2.state,
|
357
|
-
options = _ref2.options
|
358
|
-
name = _ref2.name;
|
422
|
+
options = _ref2.options;
|
359
423
|
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;
|
424
|
+
arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
|
363
425
|
|
364
426
|
if (arrowElement == null) {
|
365
427
|
return;
|
@@ -374,15 +436,21 @@ function effect$1(_ref2) {
|
|
374
436
|
}
|
375
437
|
}
|
376
438
|
|
439
|
+
{
|
440
|
+
if (!isHTMLElement(arrowElement)) {
|
441
|
+
console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
|
442
|
+
}
|
443
|
+
}
|
444
|
+
|
377
445
|
if (!contains(state.elements.popper, arrowElement)) {
|
446
|
+
{
|
447
|
+
console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
|
448
|
+
}
|
378
449
|
|
379
450
|
return;
|
380
451
|
}
|
381
452
|
|
382
453
|
state.elements.arrow = arrowElement;
|
383
|
-
state.modifiersData[name + "#persistent"] = {
|
384
|
-
padding: mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements))
|
385
|
-
};
|
386
454
|
} // eslint-disable-next-line import/no-unused-modules
|
387
455
|
|
388
456
|
|
@@ -396,6 +464,10 @@ var arrow$1 = {
|
|
396
464
|
requiresIfExists: ['preventOverflow']
|
397
465
|
};
|
398
466
|
|
467
|
+
function getVariation(placement) {
|
468
|
+
return placement.split('-')[1];
|
469
|
+
}
|
470
|
+
|
399
471
|
var unsetSides = {
|
400
472
|
top: 'auto',
|
401
473
|
right: 'auto',
|
@@ -411,8 +483,8 @@ function roundOffsetsByDPR(_ref) {
|
|
411
483
|
var win = window;
|
412
484
|
var dpr = win.devicePixelRatio || 1;
|
413
485
|
return {
|
414
|
-
x:
|
415
|
-
y:
|
486
|
+
x: round(x * dpr) / dpr || 0,
|
487
|
+
y: round(y * dpr) / dpr || 0
|
416
488
|
};
|
417
489
|
}
|
418
490
|
|
@@ -422,13 +494,15 @@ function mapToStyles(_ref2) {
|
|
422
494
|
var popper = _ref2.popper,
|
423
495
|
popperRect = _ref2.popperRect,
|
424
496
|
placement = _ref2.placement,
|
497
|
+
variation = _ref2.variation,
|
425
498
|
offsets = _ref2.offsets,
|
426
499
|
position = _ref2.position,
|
427
500
|
gpuAcceleration = _ref2.gpuAcceleration,
|
428
501
|
adaptive = _ref2.adaptive,
|
429
|
-
roundOffsets = _ref2.roundOffsets
|
502
|
+
roundOffsets = _ref2.roundOffsets,
|
503
|
+
isFixed = _ref2.isFixed;
|
430
504
|
|
431
|
-
var _ref3 = roundOffsets ? roundOffsetsByDPR(offsets) : offsets,
|
505
|
+
var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
|
432
506
|
_ref3$x = _ref3.x,
|
433
507
|
x = _ref3$x === void 0 ? 0 : _ref3$x,
|
434
508
|
_ref3$y = _ref3.y,
|
@@ -442,23 +516,34 @@ function mapToStyles(_ref2) {
|
|
442
516
|
|
443
517
|
if (adaptive) {
|
444
518
|
var offsetParent = getOffsetParent(popper);
|
519
|
+
var heightProp = 'clientHeight';
|
520
|
+
var widthProp = 'clientWidth';
|
445
521
|
|
446
522
|
if (offsetParent === getWindow(popper)) {
|
447
523
|
offsetParent = getDocumentElement(popper);
|
524
|
+
|
525
|
+
if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
|
526
|
+
heightProp = 'scrollHeight';
|
527
|
+
widthProp = 'scrollWidth';
|
528
|
+
}
|
448
529
|
} // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
|
449
530
|
|
450
|
-
/*:: offsetParent = (offsetParent: Element); */
|
451
531
|
|
532
|
+
offsetParent = offsetParent;
|
452
533
|
|
453
|
-
if (placement === top) {
|
534
|
+
if (placement === top || (placement === left || placement === right) && variation === end) {
|
454
535
|
sideY = bottom;
|
455
|
-
|
536
|
+
var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
|
537
|
+
offsetParent[heightProp];
|
538
|
+
y -= offsetY - popperRect.height;
|
456
539
|
y *= gpuAcceleration ? 1 : -1;
|
457
540
|
}
|
458
541
|
|
459
|
-
if (placement === left) {
|
542
|
+
if (placement === left || (placement === top || placement === bottom) && variation === end) {
|
460
543
|
sideX = right;
|
461
|
-
|
544
|
+
var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
|
545
|
+
offsetParent[widthProp];
|
546
|
+
x -= offsetX - popperRect.width;
|
462
547
|
x *= gpuAcceleration ? 1 : -1;
|
463
548
|
}
|
464
549
|
}
|
@@ -470,10 +555,10 @@ function mapToStyles(_ref2) {
|
|
470
555
|
if (gpuAcceleration) {
|
471
556
|
var _Object$assign;
|
472
557
|
|
473
|
-
return Object.assign(
|
558
|
+
return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
|
474
559
|
}
|
475
560
|
|
476
|
-
return Object.assign(
|
561
|
+
return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
|
477
562
|
}
|
478
563
|
|
479
564
|
function computeStyles(_ref4) {
|
@@ -486,15 +571,27 @@ function computeStyles(_ref4) {
|
|
486
571
|
_options$roundOffsets = options.roundOffsets,
|
487
572
|
roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
|
488
573
|
|
574
|
+
{
|
575
|
+
var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || '';
|
576
|
+
|
577
|
+
if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
|
578
|
+
return transitionProperty.indexOf(property) >= 0;
|
579
|
+
})) {
|
580
|
+
console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
|
581
|
+
}
|
582
|
+
}
|
583
|
+
|
489
584
|
var commonStyles = {
|
490
585
|
placement: getBasePlacement(state.placement),
|
586
|
+
variation: getVariation(state.placement),
|
491
587
|
popper: state.elements.popper,
|
492
588
|
popperRect: state.rects.popper,
|
493
|
-
gpuAcceleration: gpuAcceleration
|
589
|
+
gpuAcceleration: gpuAcceleration,
|
590
|
+
isFixed: state.options.strategy === 'fixed'
|
494
591
|
};
|
495
592
|
|
496
593
|
if (state.modifiersData.popperOffsets != null) {
|
497
|
-
state.styles.popper = Object.assign(
|
594
|
+
state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
|
498
595
|
offsets: state.modifiersData.popperOffsets,
|
499
596
|
position: state.options.strategy,
|
500
597
|
adaptive: adaptive,
|
@@ -503,7 +600,7 @@ function computeStyles(_ref4) {
|
|
503
600
|
}
|
504
601
|
|
505
602
|
if (state.modifiersData.arrow != null) {
|
506
|
-
state.styles.arrow = Object.assign(
|
603
|
+
state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
|
507
604
|
offsets: state.modifiersData.arrow,
|
508
605
|
position: 'absolute',
|
509
606
|
adaptive: false,
|
@@ -511,7 +608,7 @@ function computeStyles(_ref4) {
|
|
511
608
|
})));
|
512
609
|
}
|
513
610
|
|
514
|
-
state.attributes.popper = Object.assign(
|
611
|
+
state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
515
612
|
'data-popper-placement': state.placement
|
516
613
|
});
|
517
614
|
} // eslint-disable-next-line import/no-unused-modules
|
@@ -595,20 +692,6 @@ function getOppositeVariationPlacement(placement) {
|
|
595
692
|
});
|
596
693
|
}
|
597
694
|
|
598
|
-
function getBoundingClientRect(element) {
|
599
|
-
var rect = element.getBoundingClientRect();
|
600
|
-
return {
|
601
|
-
width: rect.width,
|
602
|
-
height: rect.height,
|
603
|
-
top: rect.top,
|
604
|
-
right: rect.right,
|
605
|
-
bottom: rect.bottom,
|
606
|
-
left: rect.left,
|
607
|
-
x: rect.left,
|
608
|
-
y: rect.top
|
609
|
-
};
|
610
|
-
}
|
611
|
-
|
612
695
|
function getWindowScroll(node) {
|
613
696
|
var win = getWindow(node);
|
614
697
|
var scrollLeft = win.pageXOffset;
|
@@ -671,16 +754,18 @@ function getViewportRect(element) {
|
|
671
754
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable
|
672
755
|
|
673
756
|
function getDocumentRect(element) {
|
757
|
+
var _element$ownerDocumen;
|
758
|
+
|
674
759
|
var html = getDocumentElement(element);
|
675
760
|
var winScroll = getWindowScroll(element);
|
676
|
-
var body = element.ownerDocument.body;
|
677
|
-
var width =
|
678
|
-
var height =
|
761
|
+
var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
|
762
|
+
var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
|
763
|
+
var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
|
679
764
|
var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
|
680
765
|
var y = -winScroll.scrollTop;
|
681
766
|
|
682
767
|
if (getComputedStyle(body || html).direction === 'rtl') {
|
683
|
-
x +=
|
768
|
+
x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
|
684
769
|
}
|
685
770
|
|
686
771
|
return {
|
@@ -722,12 +807,14 @@ reference element's position.
|
|
722
807
|
*/
|
723
808
|
|
724
809
|
function listScrollParents(element, list) {
|
810
|
+
var _element$ownerDocumen;
|
811
|
+
|
725
812
|
if (list === void 0) {
|
726
813
|
list = [];
|
727
814
|
}
|
728
815
|
|
729
816
|
var scrollParent = getScrollParent(element);
|
730
|
-
var isBody =
|
817
|
+
var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
|
731
818
|
var win = getWindow(scrollParent);
|
732
819
|
var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
733
820
|
var updatedList = list.concat(target);
|
@@ -736,7 +823,7 @@ function listScrollParents(element, list) {
|
|
736
823
|
}
|
737
824
|
|
738
825
|
function rectToClientRect(rect) {
|
739
|
-
return Object.assign(
|
826
|
+
return Object.assign({}, rect, {
|
740
827
|
left: rect.x,
|
741
828
|
top: rect.y,
|
742
829
|
right: rect.x + rect.width,
|
@@ -758,7 +845,7 @@ function getInnerBoundingClientRect(element) {
|
|
758
845
|
}
|
759
846
|
|
760
847
|
function getClientRectFromMixedType(element, clippingParent) {
|
761
|
-
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) :
|
848
|
+
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
762
849
|
} // A "clipping parent" is an overflowable container with the characteristic of
|
763
850
|
// clipping (or hiding) overflowing elements with a position different from
|
764
851
|
// `initial`
|
@@ -775,7 +862,7 @@ function getClippingParents(element) {
|
|
775
862
|
|
776
863
|
|
777
864
|
return clippingParents.filter(function (clippingParent) {
|
778
|
-
return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
|
865
|
+
return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle(clippingParent).position !== 'static' : true);
|
779
866
|
});
|
780
867
|
} // Gets the maximum area that the element is visible in due to any number of
|
781
868
|
// clipping parents
|
@@ -787,10 +874,10 @@ function getClippingRect(element, boundary, rootBoundary) {
|
|
787
874
|
var firstClippingParent = clippingParents[0];
|
788
875
|
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
|
789
876
|
var rect = getClientRectFromMixedType(element, clippingParent);
|
790
|
-
accRect.top =
|
791
|
-
accRect.right =
|
792
|
-
accRect.bottom =
|
793
|
-
accRect.left =
|
877
|
+
accRect.top = max(rect.top, accRect.top);
|
878
|
+
accRect.right = min(rect.right, accRect.right);
|
879
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
880
|
+
accRect.left = max(rect.left, accRect.left);
|
794
881
|
return accRect;
|
795
882
|
}, getClientRectFromMixedType(element, firstClippingParent));
|
796
883
|
clippingRect.width = clippingRect.right - clippingRect.left;
|
@@ -800,10 +887,6 @@ function getClippingRect(element, boundary, rootBoundary) {
|
|
800
887
|
return clippingRect;
|
801
888
|
}
|
802
889
|
|
803
|
-
function getVariation(placement) {
|
804
|
-
return placement.split('-')[1];
|
805
|
-
}
|
806
|
-
|
807
890
|
function computeOffsets(_ref) {
|
808
891
|
var reference = _ref.reference,
|
809
892
|
element = _ref.element,
|
@@ -889,18 +972,17 @@ function detectOverflow(state, options) {
|
|
889
972
|
padding = _options$padding === void 0 ? 0 : _options$padding;
|
890
973
|
var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
|
891
974
|
var altContext = elementContext === popper ? reference : popper;
|
892
|
-
var referenceElement = state.elements.reference;
|
893
975
|
var popperRect = state.rects.popper;
|
894
976
|
var element = state.elements[altBoundary ? altContext : elementContext];
|
895
977
|
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
|
896
|
-
var referenceClientRect = getBoundingClientRect(
|
978
|
+
var referenceClientRect = getBoundingClientRect(state.elements.reference);
|
897
979
|
var popperOffsets = computeOffsets({
|
898
980
|
reference: referenceClientRect,
|
899
981
|
element: popperRect,
|
900
982
|
strategy: 'absolute',
|
901
983
|
placement: placement
|
902
984
|
});
|
903
|
-
var popperClientRect = rectToClientRect(Object.assign(
|
985
|
+
var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
|
904
986
|
var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
|
905
987
|
// 0 or negative = within the clipping rect
|
906
988
|
|
@@ -924,9 +1006,6 @@ function detectOverflow(state, options) {
|
|
924
1006
|
return overflowOffsets;
|
925
1007
|
}
|
926
1008
|
|
927
|
-
/*:: type OverflowsMap = { [ComputedPlacement]: number }; */
|
928
|
-
|
929
|
-
/*;; type OverflowsMap = { [key in ComputedPlacement]: number }; */
|
930
1009
|
function computeAutoPlacement(state, options) {
|
931
1010
|
if (options === void 0) {
|
932
1011
|
options = {};
|
@@ -950,6 +1029,10 @@ function computeAutoPlacement(state, options) {
|
|
950
1029
|
|
951
1030
|
if (allowedPlacements.length === 0) {
|
952
1031
|
allowedPlacements = placements$1;
|
1032
|
+
|
1033
|
+
{
|
1034
|
+
console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
|
1035
|
+
}
|
953
1036
|
} // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
|
954
1037
|
|
955
1038
|
|
@@ -1151,7 +1234,7 @@ function hide(_ref) {
|
|
1151
1234
|
isReferenceHidden: isReferenceHidden,
|
1152
1235
|
hasPopperEscaped: hasPopperEscaped
|
1153
1236
|
};
|
1154
|
-
state.attributes.popper = Object.assign(
|
1237
|
+
state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
1155
1238
|
'data-popper-reference-hidden': isReferenceHidden,
|
1156
1239
|
'data-popper-escaped': hasPopperEscaped
|
1157
1240
|
});
|
@@ -1170,7 +1253,7 @@ function distanceAndSkiddingToXY(placement, rects, offset) {
|
|
1170
1253
|
var basePlacement = getBasePlacement(placement);
|
1171
1254
|
var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
|
1172
1255
|
|
1173
|
-
var _ref = typeof offset === 'function' ? offset(Object.assign(
|
1256
|
+
var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
|
1174
1257
|
placement: placement
|
1175
1258
|
})) : offset,
|
1176
1259
|
skidding = _ref[0],
|
@@ -1276,9 +1359,17 @@ function preventOverflow(_ref) {
|
|
1276
1359
|
var popperOffsets = state.modifiersData.popperOffsets;
|
1277
1360
|
var referenceRect = state.rects.reference;
|
1278
1361
|
var popperRect = state.rects.popper;
|
1279
|
-
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign(
|
1362
|
+
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
|
1280
1363
|
placement: state.placement
|
1281
1364
|
})) : tetherOffset;
|
1365
|
+
var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
|
1366
|
+
mainAxis: tetherOffsetValue,
|
1367
|
+
altAxis: tetherOffsetValue
|
1368
|
+
} : Object.assign({
|
1369
|
+
mainAxis: 0,
|
1370
|
+
altAxis: 0
|
1371
|
+
}, tetherOffsetValue);
|
1372
|
+
var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
|
1282
1373
|
var data = {
|
1283
1374
|
x: 0,
|
1284
1375
|
y: 0
|
@@ -1289,12 +1380,14 @@ function preventOverflow(_ref) {
|
|
1289
1380
|
}
|
1290
1381
|
|
1291
1382
|
if (checkMainAxis) {
|
1383
|
+
var _offsetModifierState$;
|
1384
|
+
|
1292
1385
|
var mainSide = mainAxis === 'y' ? top : left;
|
1293
1386
|
var altSide = mainAxis === 'y' ? bottom : right;
|
1294
1387
|
var len = mainAxis === 'y' ? 'height' : 'width';
|
1295
1388
|
var offset = popperOffsets[mainAxis];
|
1296
|
-
var min =
|
1297
|
-
var max =
|
1389
|
+
var min$1 = offset + overflow[mainSide];
|
1390
|
+
var max$1 = offset - overflow[altSide];
|
1298
1391
|
var additive = tether ? -popperRect[len] / 2 : 0;
|
1299
1392
|
var minLen = variation === start ? referenceRect[len] : popperRect[len];
|
1300
1393
|
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
|
@@ -1314,30 +1407,42 @@ function preventOverflow(_ref) {
|
|
1314
1407
|
// width or height)
|
1315
1408
|
|
1316
1409
|
var arrowLen = within(0, referenceRect[len], arrowRect[len]);
|
1317
|
-
var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin -
|
1318
|
-
var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax +
|
1410
|
+
var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
|
1411
|
+
var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
|
1319
1412
|
var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
|
1320
1413
|
var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
|
1321
|
-
var offsetModifierValue =
|
1322
|
-
var tetherMin =
|
1323
|
-
var tetherMax =
|
1324
|
-
var preventedOffset = within(tether ?
|
1414
|
+
var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
|
1415
|
+
var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
|
1416
|
+
var tetherMax = offset + maxOffset - offsetModifierValue;
|
1417
|
+
var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
|
1325
1418
|
popperOffsets[mainAxis] = preventedOffset;
|
1326
1419
|
data[mainAxis] = preventedOffset - offset;
|
1327
1420
|
}
|
1328
1421
|
|
1329
1422
|
if (checkAltAxis) {
|
1423
|
+
var _offsetModifierState$2;
|
1424
|
+
|
1330
1425
|
var _mainSide = mainAxis === 'x' ? top : left;
|
1331
1426
|
|
1332
1427
|
var _altSide = mainAxis === 'x' ? bottom : right;
|
1333
1428
|
|
1334
1429
|
var _offset = popperOffsets[altAxis];
|
1335
1430
|
|
1431
|
+
var _len = altAxis === 'y' ? 'height' : 'width';
|
1432
|
+
|
1336
1433
|
var _min = _offset + overflow[_mainSide];
|
1337
1434
|
|
1338
1435
|
var _max = _offset - overflow[_altSide];
|
1339
1436
|
|
1340
|
-
var
|
1437
|
+
var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
|
1438
|
+
|
1439
|
+
var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
|
1440
|
+
|
1441
|
+
var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
|
1442
|
+
|
1443
|
+
var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
|
1444
|
+
|
1445
|
+
var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
|
1341
1446
|
|
1342
1447
|
popperOffsets[altAxis] = _preventedOffset;
|
1343
1448
|
data[altAxis] = _preventedOffset - _offset;
|
@@ -1370,16 +1475,24 @@ function getNodeScroll(node) {
|
|
1370
1475
|
}
|
1371
1476
|
}
|
1372
1477
|
|
1478
|
+
function isElementScaled(element) {
|
1479
|
+
var rect = element.getBoundingClientRect();
|
1480
|
+
var scaleX = round(rect.width) / element.offsetWidth || 1;
|
1481
|
+
var scaleY = round(rect.height) / element.offsetHeight || 1;
|
1482
|
+
return scaleX !== 1 || scaleY !== 1;
|
1483
|
+
} // Returns the composite rect of an element relative to its offsetParent.
|
1373
1484
|
// Composite means it takes into account transforms as well as layout.
|
1374
1485
|
|
1486
|
+
|
1375
1487
|
function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
|
1376
1488
|
if (isFixed === void 0) {
|
1377
1489
|
isFixed = false;
|
1378
1490
|
}
|
1379
1491
|
|
1380
|
-
var documentElement = getDocumentElement(offsetParent);
|
1381
|
-
var rect = getBoundingClientRect(elementOrVirtualElement);
|
1382
1492
|
var isOffsetParentAnElement = isHTMLElement(offsetParent);
|
1493
|
+
var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
|
1494
|
+
var documentElement = getDocumentElement(offsetParent);
|
1495
|
+
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
|
1383
1496
|
var scroll = {
|
1384
1497
|
scrollLeft: 0,
|
1385
1498
|
scrollTop: 0
|
@@ -1396,7 +1509,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
|
|
1396
1509
|
}
|
1397
1510
|
|
1398
1511
|
if (isHTMLElement(offsetParent)) {
|
1399
|
-
offsets = getBoundingClientRect(offsetParent);
|
1512
|
+
offsets = getBoundingClientRect(offsetParent, true);
|
1400
1513
|
offsets.x += offsetParent.clientLeft;
|
1401
1514
|
offsets.y += offsetParent.clientTop;
|
1402
1515
|
} else if (documentElement) {
|
@@ -1471,12 +1584,114 @@ function debounce(fn) {
|
|
1471
1584
|
};
|
1472
1585
|
}
|
1473
1586
|
|
1587
|
+
function format(str) {
|
1588
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
1589
|
+
args[_key - 1] = arguments[_key];
|
1590
|
+
}
|
1591
|
+
|
1592
|
+
return [].concat(args).reduce(function (p, c) {
|
1593
|
+
return p.replace(/%s/, c);
|
1594
|
+
}, str);
|
1595
|
+
}
|
1596
|
+
|
1597
|
+
var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
|
1598
|
+
var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
|
1599
|
+
var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
|
1600
|
+
function validateModifiers(modifiers) {
|
1601
|
+
modifiers.forEach(function (modifier) {
|
1602
|
+
[].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
|
1603
|
+
.filter(function (value, index, self) {
|
1604
|
+
return self.indexOf(value) === index;
|
1605
|
+
}).forEach(function (key) {
|
1606
|
+
switch (key) {
|
1607
|
+
case 'name':
|
1608
|
+
if (typeof modifier.name !== 'string') {
|
1609
|
+
console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
|
1610
|
+
}
|
1611
|
+
|
1612
|
+
break;
|
1613
|
+
|
1614
|
+
case 'enabled':
|
1615
|
+
if (typeof modifier.enabled !== 'boolean') {
|
1616
|
+
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
|
1617
|
+
}
|
1618
|
+
|
1619
|
+
break;
|
1620
|
+
|
1621
|
+
case 'phase':
|
1622
|
+
if (modifierPhases.indexOf(modifier.phase) < 0) {
|
1623
|
+
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
|
1624
|
+
}
|
1625
|
+
|
1626
|
+
break;
|
1627
|
+
|
1628
|
+
case 'fn':
|
1629
|
+
if (typeof modifier.fn !== 'function') {
|
1630
|
+
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
|
1631
|
+
}
|
1632
|
+
|
1633
|
+
break;
|
1634
|
+
|
1635
|
+
case 'effect':
|
1636
|
+
if (modifier.effect != null && typeof modifier.effect !== 'function') {
|
1637
|
+
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
|
1638
|
+
}
|
1639
|
+
|
1640
|
+
break;
|
1641
|
+
|
1642
|
+
case 'requires':
|
1643
|
+
if (modifier.requires != null && !Array.isArray(modifier.requires)) {
|
1644
|
+
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
|
1645
|
+
}
|
1646
|
+
|
1647
|
+
break;
|
1648
|
+
|
1649
|
+
case 'requiresIfExists':
|
1650
|
+
if (!Array.isArray(modifier.requiresIfExists)) {
|
1651
|
+
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
|
1652
|
+
}
|
1653
|
+
|
1654
|
+
break;
|
1655
|
+
|
1656
|
+
case 'options':
|
1657
|
+
case 'data':
|
1658
|
+
break;
|
1659
|
+
|
1660
|
+
default:
|
1661
|
+
console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
|
1662
|
+
return "\"" + s + "\"";
|
1663
|
+
}).join(', ') + "; but \"" + key + "\" was provided.");
|
1664
|
+
}
|
1665
|
+
|
1666
|
+
modifier.requires && modifier.requires.forEach(function (requirement) {
|
1667
|
+
if (modifiers.find(function (mod) {
|
1668
|
+
return mod.name === requirement;
|
1669
|
+
}) == null) {
|
1670
|
+
console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
|
1671
|
+
}
|
1672
|
+
});
|
1673
|
+
});
|
1674
|
+
});
|
1675
|
+
}
|
1676
|
+
|
1677
|
+
function uniqueBy(arr, fn) {
|
1678
|
+
var identifiers = new Set();
|
1679
|
+
return arr.filter(function (item) {
|
1680
|
+
var identifier = fn(item);
|
1681
|
+
|
1682
|
+
if (!identifiers.has(identifier)) {
|
1683
|
+
identifiers.add(identifier);
|
1684
|
+
return true;
|
1685
|
+
}
|
1686
|
+
});
|
1687
|
+
}
|
1688
|
+
|
1474
1689
|
function mergeByName(modifiers) {
|
1475
1690
|
var merged = modifiers.reduce(function (merged, current) {
|
1476
1691
|
var existing = merged[current.name];
|
1477
|
-
merged[current.name] = existing ? Object.assign(
|
1478
|
-
options: Object.assign(
|
1479
|
-
data: Object.assign(
|
1692
|
+
merged[current.name] = existing ? Object.assign({}, existing, current, {
|
1693
|
+
options: Object.assign({}, existing.options, current.options),
|
1694
|
+
data: Object.assign({}, existing.data, current.data)
|
1480
1695
|
}) : current;
|
1481
1696
|
return merged;
|
1482
1697
|
}, {}); // IE11 does not support Object.values
|
@@ -1486,6 +1701,8 @@ function mergeByName(modifiers) {
|
|
1486
1701
|
});
|
1487
1702
|
}
|
1488
1703
|
|
1704
|
+
var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
|
1705
|
+
var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
|
1489
1706
|
var DEFAULT_OPTIONS = {
|
1490
1707
|
placement: 'bottom',
|
1491
1708
|
modifiers: [],
|
@@ -1520,7 +1737,7 @@ function popperGenerator(generatorOptions) {
|
|
1520
1737
|
var state = {
|
1521
1738
|
placement: 'bottom',
|
1522
1739
|
orderedModifiers: [],
|
1523
|
-
options: Object.assign(
|
1740
|
+
options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
|
1524
1741
|
modifiersData: {},
|
1525
1742
|
elements: {
|
1526
1743
|
reference: reference,
|
@@ -1533,9 +1750,10 @@ function popperGenerator(generatorOptions) {
|
|
1533
1750
|
var isDestroyed = false;
|
1534
1751
|
var instance = {
|
1535
1752
|
state: state,
|
1536
|
-
setOptions: function setOptions(
|
1753
|
+
setOptions: function setOptions(setOptionsAction) {
|
1754
|
+
var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
|
1537
1755
|
cleanupModifierEffects();
|
1538
|
-
state.options = Object.assign(
|
1756
|
+
state.options = Object.assign({}, defaultOptions, state.options, options);
|
1539
1757
|
state.scrollParents = {
|
1540
1758
|
reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
|
1541
1759
|
popper: listScrollParents(popper)
|
@@ -1547,6 +1765,40 @@ function popperGenerator(generatorOptions) {
|
|
1547
1765
|
state.orderedModifiers = orderedModifiers.filter(function (m) {
|
1548
1766
|
return m.enabled;
|
1549
1767
|
}); // Validate the provided modifiers so that the consumer will get warned
|
1768
|
+
// if one of the modifiers is invalid for any reason
|
1769
|
+
|
1770
|
+
{
|
1771
|
+
var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
|
1772
|
+
var name = _ref.name;
|
1773
|
+
return name;
|
1774
|
+
});
|
1775
|
+
validateModifiers(modifiers);
|
1776
|
+
|
1777
|
+
if (getBasePlacement(state.options.placement) === auto) {
|
1778
|
+
var flipModifier = state.orderedModifiers.find(function (_ref2) {
|
1779
|
+
var name = _ref2.name;
|
1780
|
+
return name === 'flip';
|
1781
|
+
});
|
1782
|
+
|
1783
|
+
if (!flipModifier) {
|
1784
|
+
console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
|
1785
|
+
}
|
1786
|
+
}
|
1787
|
+
|
1788
|
+
var _getComputedStyle = getComputedStyle(popper),
|
1789
|
+
marginTop = _getComputedStyle.marginTop,
|
1790
|
+
marginRight = _getComputedStyle.marginRight,
|
1791
|
+
marginBottom = _getComputedStyle.marginBottom,
|
1792
|
+
marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
|
1793
|
+
// cause bugs with positioning, so we'll warn the consumer
|
1794
|
+
|
1795
|
+
|
1796
|
+
if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
|
1797
|
+
return parseFloat(margin);
|
1798
|
+
})) {
|
1799
|
+
console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
|
1800
|
+
}
|
1801
|
+
}
|
1550
1802
|
|
1551
1803
|
runModifierEffects();
|
1552
1804
|
return instance.update();
|
@@ -1567,6 +1819,9 @@ function popperGenerator(generatorOptions) {
|
|
1567
1819
|
// anymore
|
1568
1820
|
|
1569
1821
|
if (!areValidElements(reference, popper)) {
|
1822
|
+
{
|
1823
|
+
console.error(INVALID_ELEMENT_ERROR);
|
1824
|
+
}
|
1570
1825
|
|
1571
1826
|
return;
|
1572
1827
|
} // Store the reference and popper rects to be read by modifiers
|
@@ -1590,8 +1845,17 @@ function popperGenerator(generatorOptions) {
|
|
1590
1845
|
state.orderedModifiers.forEach(function (modifier) {
|
1591
1846
|
return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
|
1592
1847
|
});
|
1848
|
+
var __debug_loops__ = 0;
|
1593
1849
|
|
1594
1850
|
for (var index = 0; index < state.orderedModifiers.length; index++) {
|
1851
|
+
{
|
1852
|
+
__debug_loops__ += 1;
|
1853
|
+
|
1854
|
+
if (__debug_loops__ > 100) {
|
1855
|
+
console.error(INFINITE_LOOP_ERROR);
|
1856
|
+
break;
|
1857
|
+
}
|
1858
|
+
}
|
1595
1859
|
|
1596
1860
|
if (state.reset === true) {
|
1597
1861
|
state.reset = false;
|
@@ -1630,6 +1894,9 @@ function popperGenerator(generatorOptions) {
|
|
1630
1894
|
};
|
1631
1895
|
|
1632
1896
|
if (!areValidElements(reference, popper)) {
|
1897
|
+
{
|
1898
|
+
console.error(INVALID_ELEMENT_ERROR);
|
1899
|
+
}
|
1633
1900
|
|
1634
1901
|
return instance;
|
1635
1902
|
}
|
@@ -1683,10 +1950,12 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
1683
1950
|
}); // eslint-disable-next-line import/no-unused-modules
|
1684
1951
|
|
1685
1952
|
/**!
|
1686
|
-
* tippy.js v6.
|
1687
|
-
* (c) 2017-
|
1953
|
+
* tippy.js v6.3.7
|
1954
|
+
* (c) 2017-2021 atomiks
|
1688
1955
|
* MIT License
|
1689
1956
|
*/
|
1957
|
+
|
1958
|
+
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>';
|
1690
1959
|
var BOX_CLASS = "tippy-box";
|
1691
1960
|
var CONTENT_CLASS = "tippy-content";
|
1692
1961
|
var BACKDROP_CLASS = "tippy-backdrop";
|
@@ -1696,6 +1965,13 @@ var TOUCH_OPTIONS = {
|
|
1696
1965
|
passive: true,
|
1697
1966
|
capture: true
|
1698
1967
|
};
|
1968
|
+
var TIPPY_DEFAULT_APPEND_TO = function TIPPY_DEFAULT_APPEND_TO() {
|
1969
|
+
return document.body;
|
1970
|
+
};
|
1971
|
+
|
1972
|
+
function hasOwnProperty(obj, key) {
|
1973
|
+
return {}.hasOwnProperty.call(obj, key);
|
1974
|
+
}
|
1699
1975
|
function getValueAtIndexOrReturn(value, index, defaultValue) {
|
1700
1976
|
if (Array.isArray(value)) {
|
1701
1977
|
var v = value[index];
|
@@ -1811,10 +2087,13 @@ function setVisibilityState(els, state) {
|
|
1811
2087
|
});
|
1812
2088
|
}
|
1813
2089
|
function getOwnerDocument(elementOrElements) {
|
2090
|
+
var _element$ownerDocumen;
|
2091
|
+
|
1814
2092
|
var _normalizeToArray = normalizeToArray(elementOrElements),
|
1815
|
-
element = _normalizeToArray[0];
|
2093
|
+
element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
|
1816
2094
|
|
1817
|
-
|
2095
|
+
|
2096
|
+
return element != null && (_element$ownerDocumen = element.ownerDocument) != null && _element$ownerDocumen.body ? element.ownerDocument : document;
|
1818
2097
|
}
|
1819
2098
|
function isCursorOutsideInteractiveBorder(popperTreeData, event) {
|
1820
2099
|
var clientX = event.clientX,
|
@@ -1850,6 +2129,26 @@ function updateTransitionEndListener(box, action, listener) {
|
|
1850
2129
|
box[method](event, listener);
|
1851
2130
|
});
|
1852
2131
|
}
|
2132
|
+
/**
|
2133
|
+
* Compared to xxx.contains, this function works for dom structures with shadow
|
2134
|
+
* dom
|
2135
|
+
*/
|
2136
|
+
|
2137
|
+
function actualContains(parent, child) {
|
2138
|
+
var target = child;
|
2139
|
+
|
2140
|
+
while (target) {
|
2141
|
+
var _target$getRootNode;
|
2142
|
+
|
2143
|
+
if (parent.contains(target)) {
|
2144
|
+
return true;
|
2145
|
+
}
|
2146
|
+
|
2147
|
+
target = target.getRootNode == null ? void 0 : (_target$getRootNode = target.getRootNode()) == null ? void 0 : _target$getRootNode.host;
|
2148
|
+
}
|
2149
|
+
|
2150
|
+
return false;
|
2151
|
+
}
|
1853
2152
|
|
1854
2153
|
var currentInput = {
|
1855
2154
|
isTouch: false
|
@@ -1913,8 +2212,63 @@ function bindGlobalEventListeners() {
|
|
1913
2212
|
}
|
1914
2213
|
|
1915
2214
|
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
|
1916
|
-
var
|
1917
|
-
|
2215
|
+
var isIE11 = isBrowser ? // @ts-ignore
|
2216
|
+
!!window.msCrypto : false;
|
2217
|
+
|
2218
|
+
function createMemoryLeakWarning(method) {
|
2219
|
+
var txt = method === 'destroy' ? 'n already-' : ' ';
|
2220
|
+
return [method + "() was called on a" + txt + "destroyed instance. This is a no-op but", 'indicates a potential memory leak.'].join(' ');
|
2221
|
+
}
|
2222
|
+
function clean(value) {
|
2223
|
+
var spacesAndTabs = /[ \t]{2,}/g;
|
2224
|
+
var lineStartWithSpaces = /^[ \t]*/gm;
|
2225
|
+
return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
|
2226
|
+
}
|
2227
|
+
|
2228
|
+
function getDevMessage(message) {
|
2229
|
+
return clean("\n %ctippy.js\n\n %c" + clean(message) + "\n\n %c\uD83D\uDC77\u200D This is a development-only message. It will be removed in production.\n ");
|
2230
|
+
}
|
2231
|
+
|
2232
|
+
function getFormattedMessage(message) {
|
2233
|
+
return [getDevMessage(message), // title
|
2234
|
+
'color: #00C584; font-size: 1.3em; font-weight: bold;', // message
|
2235
|
+
'line-height: 1.5', // footer
|
2236
|
+
'color: #a6a095;'];
|
2237
|
+
} // Assume warnings and errors never have the same message
|
2238
|
+
|
2239
|
+
var visitedMessages;
|
2240
|
+
|
2241
|
+
{
|
2242
|
+
resetVisitedMessages();
|
2243
|
+
}
|
2244
|
+
|
2245
|
+
function resetVisitedMessages() {
|
2246
|
+
visitedMessages = new Set();
|
2247
|
+
}
|
2248
|
+
function warnWhen(condition, message) {
|
2249
|
+
if (condition && !visitedMessages.has(message)) {
|
2250
|
+
var _console;
|
2251
|
+
|
2252
|
+
visitedMessages.add(message);
|
2253
|
+
|
2254
|
+
(_console = console).warn.apply(_console, getFormattedMessage(message));
|
2255
|
+
}
|
2256
|
+
}
|
2257
|
+
function errorWhen(condition, message) {
|
2258
|
+
if (condition && !visitedMessages.has(message)) {
|
2259
|
+
var _console2;
|
2260
|
+
|
2261
|
+
visitedMessages.add(message);
|
2262
|
+
|
2263
|
+
(_console2 = console).error.apply(_console2, getFormattedMessage(message));
|
2264
|
+
}
|
2265
|
+
}
|
2266
|
+
function validateTargets(targets) {
|
2267
|
+
var didPassFalsyValue = !targets;
|
2268
|
+
var didPassPlainObject = Object.prototype.toString.call(targets) === '[object Object]' && !targets.addEventListener;
|
2269
|
+
errorWhen(didPassFalsyValue, ['tippy() was passed', '`' + String(targets) + '`', 'as its targets (first) argument. Valid types are: String, Element,', 'Element[], or NodeList.'].join(' '));
|
2270
|
+
errorWhen(didPassPlainObject, ['tippy() was passed a plain object which is not supported as an argument', 'for virtual positioning. Use props.getReferenceClientRect instead.'].join(' '));
|
2271
|
+
}
|
1918
2272
|
|
1919
2273
|
var pluginProps = {
|
1920
2274
|
animateFill: false,
|
@@ -1934,9 +2288,7 @@ var renderProps = {
|
|
1934
2288
|
zIndex: 9999
|
1935
2289
|
};
|
1936
2290
|
var defaultProps = Object.assign({
|
1937
|
-
appendTo:
|
1938
|
-
return document.body;
|
1939
|
-
},
|
2291
|
+
appendTo: TIPPY_DEFAULT_APPEND_TO,
|
1940
2292
|
aria: {
|
1941
2293
|
content: 'auto',
|
1942
2294
|
expanded: 'auto'
|
@@ -1971,9 +2323,13 @@ var defaultProps = Object.assign({
|
|
1971
2323
|
touch: true,
|
1972
2324
|
trigger: 'mouseenter focus',
|
1973
2325
|
triggerTarget: null
|
1974
|
-
}, pluginProps,
|
2326
|
+
}, pluginProps, renderProps);
|
1975
2327
|
var defaultKeys = Object.keys(defaultProps);
|
1976
2328
|
var setDefaultProps = function setDefaultProps(partialProps) {
|
2329
|
+
/* istanbul ignore else */
|
2330
|
+
{
|
2331
|
+
validateProps(partialProps, []);
|
2332
|
+
}
|
1977
2333
|
|
1978
2334
|
var keys = Object.keys(partialProps);
|
1979
2335
|
keys.forEach(function (key) {
|
@@ -1987,12 +2343,14 @@ function getExtendedPassedProps(passedProps) {
|
|
1987
2343
|
defaultValue = plugin.defaultValue;
|
1988
2344
|
|
1989
2345
|
if (name) {
|
1990
|
-
|
2346
|
+
var _name;
|
2347
|
+
|
2348
|
+
acc[name] = passedProps[name] !== undefined ? passedProps[name] : (_name = defaultProps[name]) != null ? _name : defaultValue;
|
1991
2349
|
}
|
1992
2350
|
|
1993
2351
|
return acc;
|
1994
2352
|
}, {});
|
1995
|
-
return Object.assign({}, passedProps,
|
2353
|
+
return Object.assign({}, passedProps, pluginProps);
|
1996
2354
|
}
|
1997
2355
|
function getDataAttributeProps(reference, plugins) {
|
1998
2356
|
var propKeys = plugins ? Object.keys(getExtendedPassedProps(Object.assign({}, defaultProps, {
|
@@ -2023,13 +2381,36 @@ function evaluateProps(reference, props) {
|
|
2023
2381
|
var out = Object.assign({}, props, {
|
2024
2382
|
content: invokeWithArgsOrReturn(props.content, [reference])
|
2025
2383
|
}, props.ignoreAttributes ? {} : getDataAttributeProps(reference, props.plugins));
|
2026
|
-
out.aria = Object.assign({}, defaultProps.aria,
|
2384
|
+
out.aria = Object.assign({}, defaultProps.aria, out.aria);
|
2027
2385
|
out.aria = {
|
2028
2386
|
expanded: out.aria.expanded === 'auto' ? props.interactive : out.aria.expanded,
|
2029
2387
|
content: out.aria.content === 'auto' ? props.interactive ? null : 'describedby' : out.aria.content
|
2030
2388
|
};
|
2031
2389
|
return out;
|
2032
2390
|
}
|
2391
|
+
function validateProps(partialProps, plugins) {
|
2392
|
+
if (partialProps === void 0) {
|
2393
|
+
partialProps = {};
|
2394
|
+
}
|
2395
|
+
|
2396
|
+
if (plugins === void 0) {
|
2397
|
+
plugins = [];
|
2398
|
+
}
|
2399
|
+
|
2400
|
+
var keys = Object.keys(partialProps);
|
2401
|
+
keys.forEach(function (prop) {
|
2402
|
+
var nonPluginProps = removeProperties(defaultProps, Object.keys(pluginProps));
|
2403
|
+
var didPassUnknownProp = !hasOwnProperty(nonPluginProps, prop); // Check if the prop exists in `plugins`
|
2404
|
+
|
2405
|
+
if (didPassUnknownProp) {
|
2406
|
+
didPassUnknownProp = plugins.filter(function (plugin) {
|
2407
|
+
return plugin.name === prop;
|
2408
|
+
}).length === 0;
|
2409
|
+
}
|
2410
|
+
|
2411
|
+
warnWhen(didPassUnknownProp, ["`" + prop + "`", "is not a valid prop. You may have spelled it incorrectly, or if it's", 'a plugin, forgot to pass it in an array as props.plugins.', '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/'].join(' '));
|
2412
|
+
});
|
2413
|
+
}
|
2033
2414
|
|
2034
2415
|
var innerHTML = function innerHTML() {
|
2035
2416
|
return 'innerHTML';
|
@@ -2161,7 +2542,7 @@ var mouseMoveListeners = []; // Used by `hideAll()`
|
|
2161
2542
|
|
2162
2543
|
var mountedInstances = [];
|
2163
2544
|
function createTippy(reference, passedProps) {
|
2164
|
-
var props = evaluateProps(reference, Object.assign({}, defaultProps,
|
2545
|
+
var props = evaluateProps(reference, Object.assign({}, defaultProps, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
|
2165
2546
|
// 🔒 Private members
|
2166
2547
|
// ===========================================================================
|
2167
2548
|
|
@@ -2222,6 +2603,9 @@ function createTippy(reference, passedProps) {
|
|
2222
2603
|
/* istanbul ignore if */
|
2223
2604
|
|
2224
2605
|
if (!props.render) {
|
2606
|
+
{
|
2607
|
+
errorWhen(true, 'render() function has not been supplied.');
|
2608
|
+
}
|
2225
2609
|
|
2226
2610
|
return instance;
|
2227
2611
|
} // ===========================================================================
|
@@ -2258,10 +2642,9 @@ function createTippy(reference, passedProps) {
|
|
2258
2642
|
instance.clearDelayTimeouts();
|
2259
2643
|
}
|
2260
2644
|
});
|
2261
|
-
popper.addEventListener('mouseleave', function (
|
2645
|
+
popper.addEventListener('mouseleave', function () {
|
2262
2646
|
if (instance.props.interactive && instance.props.trigger.indexOf('mouseenter') >= 0) {
|
2263
2647
|
getDocument().addEventListener('mousemove', debouncedOnMouseMove);
|
2264
|
-
debouncedOnMouseMove(event);
|
2265
2648
|
}
|
2266
2649
|
});
|
2267
2650
|
return instance; // ===========================================================================
|
@@ -2281,7 +2664,7 @@ function createTippy(reference, passedProps) {
|
|
2281
2664
|
var _instance$props$rende;
|
2282
2665
|
|
2283
2666
|
// @ts-ignore
|
2284
|
-
return !!((_instance$props$rende = instance.props.render)
|
2667
|
+
return !!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy);
|
2285
2668
|
}
|
2286
2669
|
|
2287
2670
|
function getCurrentTarget() {
|
@@ -2308,8 +2691,12 @@ function createTippy(reference, passedProps) {
|
|
2308
2691
|
return getValueAtIndexOrReturn(instance.props.delay, isShow ? 0 : 1, defaultProps.delay);
|
2309
2692
|
}
|
2310
2693
|
|
2311
|
-
function handleStyles() {
|
2312
|
-
|
2694
|
+
function handleStyles(fromHide) {
|
2695
|
+
if (fromHide === void 0) {
|
2696
|
+
fromHide = false;
|
2697
|
+
}
|
2698
|
+
|
2699
|
+
popper.style.pointerEvents = instance.props.interactive && !fromHide ? '' : 'none';
|
2313
2700
|
popper.style.zIndex = "" + instance.props.zIndex;
|
2314
2701
|
}
|
2315
2702
|
|
@@ -2320,7 +2707,7 @@ function createTippy(reference, passedProps) {
|
|
2320
2707
|
|
2321
2708
|
pluginsHooks.forEach(function (pluginHooks) {
|
2322
2709
|
if (pluginHooks[hook]) {
|
2323
|
-
pluginHooks[hook].apply(
|
2710
|
+
pluginHooks[hook].apply(pluginHooks, args);
|
2324
2711
|
}
|
2325
2712
|
});
|
2326
2713
|
|
@@ -2386,15 +2773,18 @@ function createTippy(reference, passedProps) {
|
|
2386
2773
|
if (didTouchMove || event.type === 'mousedown') {
|
2387
2774
|
return;
|
2388
2775
|
}
|
2389
|
-
}
|
2776
|
+
}
|
2390
2777
|
|
2778
|
+
var actualTarget = event.composedPath && event.composedPath()[0] || event.target; // Clicked on interactive popper
|
2391
2779
|
|
2392
|
-
if (instance.props.interactive && popper
|
2780
|
+
if (instance.props.interactive && actualContains(popper, actualTarget)) {
|
2393
2781
|
return;
|
2394
2782
|
} // Clicked on the event listeners target
|
2395
2783
|
|
2396
2784
|
|
2397
|
-
if (
|
2785
|
+
if (normalizeToArray(instance.props.triggerTarget || reference).some(function (el) {
|
2786
|
+
return actualContains(el, actualTarget);
|
2787
|
+
})) {
|
2398
2788
|
if (currentInput.isTouch) {
|
2399
2789
|
return;
|
2400
2790
|
}
|
@@ -2522,7 +2912,7 @@ function createTippy(reference, passedProps) {
|
|
2522
2912
|
break;
|
2523
2913
|
|
2524
2914
|
case 'focus':
|
2525
|
-
on(
|
2915
|
+
on(isIE11 ? 'focusout' : 'blur', onBlurOrFocusOut);
|
2526
2916
|
break;
|
2527
2917
|
|
2528
2918
|
case 'focusin':
|
@@ -2748,7 +3138,7 @@ function createTippy(reference, passedProps) {
|
|
2748
3138
|
|
2749
3139
|
var node = getCurrentTarget();
|
2750
3140
|
|
2751
|
-
if (instance.props.interactive && appendTo ===
|
3141
|
+
if (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO || appendTo === 'parent') {
|
2752
3142
|
parentNode = node.parentNode;
|
2753
3143
|
} else {
|
2754
3144
|
parentNode = invokeWithArgsOrReturn(appendTo, [node]);
|
@@ -2760,7 +3150,14 @@ function createTippy(reference, passedProps) {
|
|
2760
3150
|
parentNode.appendChild(popper);
|
2761
3151
|
}
|
2762
3152
|
|
3153
|
+
instance.state.isMounted = true;
|
2763
3154
|
createPopperInstance();
|
3155
|
+
/* istanbul ignore else */
|
3156
|
+
|
3157
|
+
{
|
3158
|
+
// Accessibility check
|
3159
|
+
warnWhen(instance.props.interactive && appendTo === defaultProps.appendTo && node.nextElementSibling !== popper, ['Interactive tippy element may not be accessible via keyboard', 'navigation because it is not directly after the reference element', 'in the DOM source order.', '\n\n', 'Using a wrapper <div> or <span> tag around the reference element', 'solves this by creating a new parentNode context.', '\n\n', 'Specifying `appendTo: document.body` silences this warning, but it', 'assumes you are using a focus management solution to handle', 'keyboard navigation.', '\n\n', 'See: https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity'].join(' '));
|
3160
|
+
}
|
2764
3161
|
}
|
2765
3162
|
|
2766
3163
|
function getNestedPopperTree() {
|
@@ -2849,6 +3246,10 @@ function createTippy(reference, passedProps) {
|
|
2849
3246
|
}
|
2850
3247
|
|
2851
3248
|
function setProps(partialProps) {
|
3249
|
+
/* istanbul ignore else */
|
3250
|
+
{
|
3251
|
+
warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('setProps'));
|
3252
|
+
}
|
2852
3253
|
|
2853
3254
|
if (instance.state.isDestroyed) {
|
2854
3255
|
return;
|
@@ -2857,7 +3258,7 @@ function createTippy(reference, passedProps) {
|
|
2857
3258
|
invokeHook('onBeforeUpdate', [instance, partialProps]);
|
2858
3259
|
removeListeners();
|
2859
3260
|
var prevProps = instance.props;
|
2860
|
-
var nextProps = evaluateProps(reference, Object.assign({},
|
3261
|
+
var nextProps = evaluateProps(reference, Object.assign({}, prevProps, removeUndefinedProps(partialProps), {
|
2861
3262
|
ignoreAttributes: true
|
2862
3263
|
}));
|
2863
3264
|
instance.props = nextProps;
|
@@ -2907,6 +3308,10 @@ function createTippy(reference, passedProps) {
|
|
2907
3308
|
}
|
2908
3309
|
|
2909
3310
|
function show() {
|
3311
|
+
/* istanbul ignore else */
|
3312
|
+
{
|
3313
|
+
warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('show'));
|
3314
|
+
} // Early bail-out
|
2910
3315
|
|
2911
3316
|
|
2912
3317
|
var isAlreadyVisible = instance.state.isVisible;
|
@@ -2956,6 +3361,8 @@ function createTippy(reference, passedProps) {
|
|
2956
3361
|
}
|
2957
3362
|
|
2958
3363
|
onFirstUpdate = function onFirstUpdate() {
|
3364
|
+
var _instance$popperInsta2;
|
3365
|
+
|
2959
3366
|
if (!instance.state.isVisible || ignoreOnFirstUpdate) {
|
2960
3367
|
return;
|
2961
3368
|
}
|
@@ -2976,8 +3383,10 @@ function createTippy(reference, passedProps) {
|
|
2976
3383
|
|
2977
3384
|
handleAriaContentAttribute();
|
2978
3385
|
handleAriaExpandedAttribute();
|
2979
|
-
pushIfUnique(mountedInstances, instance);
|
2980
|
-
|
3386
|
+
pushIfUnique(mountedInstances, instance); // certain modifiers (e.g. `maxSize`) require a second update after the
|
3387
|
+
// popper has been positioned for the first time
|
3388
|
+
|
3389
|
+
(_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
|
2981
3390
|
invokeHook('onMount', [instance]);
|
2982
3391
|
|
2983
3392
|
if (instance.props.animation && getIsDefaultRenderFn()) {
|
@@ -2992,6 +3401,10 @@ function createTippy(reference, passedProps) {
|
|
2992
3401
|
}
|
2993
3402
|
|
2994
3403
|
function hide() {
|
3404
|
+
/* istanbul ignore else */
|
3405
|
+
{
|
3406
|
+
warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hide'));
|
3407
|
+
} // Early bail-out
|
2995
3408
|
|
2996
3409
|
|
2997
3410
|
var isAlreadyHidden = !instance.state.isVisible;
|
@@ -3020,7 +3433,7 @@ function createTippy(reference, passedProps) {
|
|
3020
3433
|
|
3021
3434
|
cleanupInteractiveMouseListeners();
|
3022
3435
|
removeDocumentPress();
|
3023
|
-
handleStyles();
|
3436
|
+
handleStyles(true);
|
3024
3437
|
|
3025
3438
|
if (getIsDefaultRenderFn()) {
|
3026
3439
|
var _getDefaultTemplateCh4 = getDefaultTemplateChildren(),
|
@@ -3046,6 +3459,10 @@ function createTippy(reference, passedProps) {
|
|
3046
3459
|
}
|
3047
3460
|
|
3048
3461
|
function hideWithInteractivity(event) {
|
3462
|
+
/* istanbul ignore else */
|
3463
|
+
{
|
3464
|
+
warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hideWithInteractivity'));
|
3465
|
+
}
|
3049
3466
|
|
3050
3467
|
getDocument().addEventListener('mousemove', debouncedOnMouseMove);
|
3051
3468
|
pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
|
@@ -3053,6 +3470,10 @@ function createTippy(reference, passedProps) {
|
|
3053
3470
|
}
|
3054
3471
|
|
3055
3472
|
function unmount() {
|
3473
|
+
/* istanbul ignore else */
|
3474
|
+
{
|
3475
|
+
warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('unmount'));
|
3476
|
+
}
|
3056
3477
|
|
3057
3478
|
if (instance.state.isVisible) {
|
3058
3479
|
instance.hide();
|
@@ -3082,6 +3503,10 @@ function createTippy(reference, passedProps) {
|
|
3082
3503
|
}
|
3083
3504
|
|
3084
3505
|
function destroy() {
|
3506
|
+
/* istanbul ignore else */
|
3507
|
+
{
|
3508
|
+
warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('destroy'));
|
3509
|
+
}
|
3085
3510
|
|
3086
3511
|
if (instance.state.isDestroyed) {
|
3087
3512
|
return;
|
@@ -3102,12 +3527,25 @@ function tippy(targets, optionalProps) {
|
|
3102
3527
|
}
|
3103
3528
|
|
3104
3529
|
var plugins = defaultProps.plugins.concat(optionalProps.plugins || []);
|
3530
|
+
/* istanbul ignore else */
|
3531
|
+
|
3532
|
+
{
|
3533
|
+
validateTargets(targets);
|
3534
|
+
validateProps(optionalProps, plugins);
|
3535
|
+
}
|
3105
3536
|
|
3106
3537
|
bindGlobalEventListeners();
|
3107
3538
|
var passedProps = Object.assign({}, optionalProps, {
|
3108
3539
|
plugins: plugins
|
3109
3540
|
});
|
3110
3541
|
var elements = getArrayOfElements(targets);
|
3542
|
+
/* istanbul ignore else */
|
3543
|
+
|
3544
|
+
{
|
3545
|
+
var isSingleContentElement = isElement$1(passedProps.content);
|
3546
|
+
var isMoreThanOneReferenceElement = elements.length > 1;
|
3547
|
+
warnWhen(isSingleContentElement && isMoreThanOneReferenceElement, ['tippy() was passed an Element as the `content` prop, but more than', 'one tippy instance was created by this invocation. This means the', 'content element will only be appended to the last tippy instance.', '\n\n', 'Instead, pass the .innerHTML of the element, or use a function that', 'returns a cloned version of the element instead.', '\n\n', '1) content: element.innerHTML\n', '2) content: () => element.cloneNode(true)'].join(' '));
|
3548
|
+
}
|
3111
3549
|
|
3112
3550
|
var instances = elements.reduce(function (acc, reference) {
|
3113
3551
|
var instance = reference && createTippy(reference, passedProps);
|
@@ -3125,16 +3563,63 @@ tippy.defaultProps = defaultProps;
|
|
3125
3563
|
tippy.setDefaultProps = setDefaultProps;
|
3126
3564
|
tippy.currentInput = currentInput;
|
3127
3565
|
|
3566
|
+
// every time the popper is destroyed (i.e. a new target), removing the styles
|
3567
|
+
// and causing transitions to break for singletons when the console is open, but
|
3568
|
+
// most notably for non-transform styles being used, `gpuAcceleration: false`.
|
3569
|
+
|
3570
|
+
var applyStylesModifier = Object.assign({}, applyStyles$1, {
|
3571
|
+
effect: function effect(_ref) {
|
3572
|
+
var state = _ref.state;
|
3573
|
+
var initialStyles = {
|
3574
|
+
popper: {
|
3575
|
+
position: state.options.strategy,
|
3576
|
+
left: '0',
|
3577
|
+
top: '0',
|
3578
|
+
margin: '0'
|
3579
|
+
},
|
3580
|
+
arrow: {
|
3581
|
+
position: 'absolute'
|
3582
|
+
},
|
3583
|
+
reference: {}
|
3584
|
+
};
|
3585
|
+
Object.assign(state.elements.popper.style, initialStyles.popper);
|
3586
|
+
state.styles = initialStyles;
|
3587
|
+
|
3588
|
+
if (state.elements.arrow) {
|
3589
|
+
Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
3590
|
+
} // intentionally return no cleanup function
|
3591
|
+
// return () => { ... }
|
3592
|
+
|
3593
|
+
}
|
3594
|
+
});
|
3595
|
+
|
3128
3596
|
var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
3597
|
+
var _optionalProps$popper;
|
3598
|
+
|
3129
3599
|
if (optionalProps === void 0) {
|
3130
3600
|
optionalProps = {};
|
3131
3601
|
}
|
3132
3602
|
|
3603
|
+
/* istanbul ignore else */
|
3604
|
+
{
|
3605
|
+
errorWhen(!Array.isArray(tippyInstances), ['The first argument passed to createSingleton() must be an array of', 'tippy instances. The passed value was', String(tippyInstances)].join(' '));
|
3606
|
+
}
|
3607
|
+
|
3133
3608
|
var individualInstances = tippyInstances;
|
3134
3609
|
var references = [];
|
3610
|
+
var triggerTargets = [];
|
3135
3611
|
var currentTarget;
|
3136
3612
|
var overrides = optionalProps.overrides;
|
3137
3613
|
var interceptSetPropsCleanups = [];
|
3614
|
+
var shownOnCreate = false;
|
3615
|
+
|
3616
|
+
function setTriggerTargets() {
|
3617
|
+
triggerTargets = individualInstances.map(function (instance) {
|
3618
|
+
return normalizeToArray(instance.props.triggerTarget || instance.reference);
|
3619
|
+
}).reduce(function (acc, item) {
|
3620
|
+
return acc.concat(item);
|
3621
|
+
}, []);
|
3622
|
+
}
|
3138
3623
|
|
3139
3624
|
function setReferences() {
|
3140
3625
|
references = individualInstances.map(function (instance) {
|
@@ -3168,42 +3653,123 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3168
3653
|
instance.setProps = originalSetProps;
|
3169
3654
|
};
|
3170
3655
|
});
|
3656
|
+
} // have to pass singleton, as it maybe undefined on first call
|
3657
|
+
|
3658
|
+
|
3659
|
+
function prepareInstance(singleton, target) {
|
3660
|
+
var index = triggerTargets.indexOf(target); // bail-out
|
3661
|
+
|
3662
|
+
if (target === currentTarget) {
|
3663
|
+
return;
|
3664
|
+
}
|
3665
|
+
|
3666
|
+
currentTarget = target;
|
3667
|
+
var overrideProps = (overrides || []).concat('content').reduce(function (acc, prop) {
|
3668
|
+
acc[prop] = individualInstances[index].props[prop];
|
3669
|
+
return acc;
|
3670
|
+
}, {});
|
3671
|
+
singleton.setProps(Object.assign({}, overrideProps, {
|
3672
|
+
getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
|
3673
|
+
var _references$index;
|
3674
|
+
|
3675
|
+
return (_references$index = references[index]) == null ? void 0 : _references$index.getBoundingClientRect();
|
3676
|
+
}
|
3677
|
+
}));
|
3171
3678
|
}
|
3172
3679
|
|
3173
3680
|
enableInstances(false);
|
3174
3681
|
setReferences();
|
3682
|
+
setTriggerTargets();
|
3175
3683
|
var plugin = {
|
3176
3684
|
fn: function fn() {
|
3177
3685
|
return {
|
3178
3686
|
onDestroy: function onDestroy() {
|
3179
3687
|
enableInstances(true);
|
3180
3688
|
},
|
3181
|
-
|
3182
|
-
|
3183
|
-
|
3184
|
-
|
3185
|
-
if (
|
3186
|
-
|
3689
|
+
onHidden: function onHidden() {
|
3690
|
+
currentTarget = null;
|
3691
|
+
},
|
3692
|
+
onClickOutside: function onClickOutside(instance) {
|
3693
|
+
if (instance.props.showOnCreate && !shownOnCreate) {
|
3694
|
+
shownOnCreate = true;
|
3695
|
+
currentTarget = null;
|
3187
3696
|
}
|
3188
|
-
|
3189
|
-
|
3190
|
-
|
3191
|
-
|
3192
|
-
|
3193
|
-
}
|
3194
|
-
|
3195
|
-
|
3196
|
-
|
3197
|
-
}
|
3198
|
-
}));
|
3697
|
+
},
|
3698
|
+
onShow: function onShow(instance) {
|
3699
|
+
if (instance.props.showOnCreate && !shownOnCreate) {
|
3700
|
+
shownOnCreate = true;
|
3701
|
+
prepareInstance(instance, references[0]);
|
3702
|
+
}
|
3703
|
+
},
|
3704
|
+
onTrigger: function onTrigger(instance, event) {
|
3705
|
+
prepareInstance(instance, event.currentTarget);
|
3199
3706
|
}
|
3200
3707
|
};
|
3201
3708
|
}
|
3202
3709
|
};
|
3203
3710
|
var singleton = tippy(div(), Object.assign({}, removeProperties(optionalProps, ['overrides']), {
|
3204
3711
|
plugins: [plugin].concat(optionalProps.plugins || []),
|
3205
|
-
triggerTarget:
|
3712
|
+
triggerTarget: triggerTargets,
|
3713
|
+
popperOptions: Object.assign({}, optionalProps.popperOptions, {
|
3714
|
+
modifiers: [].concat(((_optionalProps$popper = optionalProps.popperOptions) == null ? void 0 : _optionalProps$popper.modifiers) || [], [applyStylesModifier])
|
3715
|
+
})
|
3206
3716
|
}));
|
3717
|
+
var originalShow = singleton.show;
|
3718
|
+
|
3719
|
+
singleton.show = function (target) {
|
3720
|
+
originalShow(); // first time, showOnCreate or programmatic call with no params
|
3721
|
+
// default to showing first instance
|
3722
|
+
|
3723
|
+
if (!currentTarget && target == null) {
|
3724
|
+
return prepareInstance(singleton, references[0]);
|
3725
|
+
} // triggered from event (do nothing as prepareInstance already called by onTrigger)
|
3726
|
+
// programmatic call with no params when already visible (do nothing again)
|
3727
|
+
|
3728
|
+
|
3729
|
+
if (currentTarget && target == null) {
|
3730
|
+
return;
|
3731
|
+
} // target is index of instance
|
3732
|
+
|
3733
|
+
|
3734
|
+
if (typeof target === 'number') {
|
3735
|
+
return references[target] && prepareInstance(singleton, references[target]);
|
3736
|
+
} // target is a child tippy instance
|
3737
|
+
|
3738
|
+
|
3739
|
+
if (individualInstances.indexOf(target) >= 0) {
|
3740
|
+
var ref = target.reference;
|
3741
|
+
return prepareInstance(singleton, ref);
|
3742
|
+
} // target is a ReferenceElement
|
3743
|
+
|
3744
|
+
|
3745
|
+
if (references.indexOf(target) >= 0) {
|
3746
|
+
return prepareInstance(singleton, target);
|
3747
|
+
}
|
3748
|
+
};
|
3749
|
+
|
3750
|
+
singleton.showNext = function () {
|
3751
|
+
var first = references[0];
|
3752
|
+
|
3753
|
+
if (!currentTarget) {
|
3754
|
+
return singleton.show(0);
|
3755
|
+
}
|
3756
|
+
|
3757
|
+
var index = references.indexOf(currentTarget);
|
3758
|
+
singleton.show(references[index + 1] || first);
|
3759
|
+
};
|
3760
|
+
|
3761
|
+
singleton.showPrevious = function () {
|
3762
|
+
var last = references[references.length - 1];
|
3763
|
+
|
3764
|
+
if (!currentTarget) {
|
3765
|
+
return singleton.show(last);
|
3766
|
+
}
|
3767
|
+
|
3768
|
+
var index = references.indexOf(currentTarget);
|
3769
|
+
var target = references[index - 1] || last;
|
3770
|
+
singleton.show(target);
|
3771
|
+
};
|
3772
|
+
|
3207
3773
|
var originalSetProps = singleton.setProps;
|
3208
3774
|
|
3209
3775
|
singleton.setProps = function (props) {
|
@@ -3219,9 +3785,10 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
|
|
3219
3785
|
individualInstances = nextInstances;
|
3220
3786
|
enableInstances(false);
|
3221
3787
|
setReferences();
|
3222
|
-
|
3788
|
+
setTriggerTargets();
|
3789
|
+
interceptSetPropsCleanups = interceptSetProps(singleton);
|
3223
3790
|
singleton.setProps({
|
3224
|
-
triggerTarget:
|
3791
|
+
triggerTarget: triggerTargets
|
3225
3792
|
});
|
3226
3793
|
};
|
3227
3794
|
|
@@ -3236,7 +3803,10 @@ var animateFill = {
|
|
3236
3803
|
var _instance$props$rende;
|
3237
3804
|
|
3238
3805
|
// @ts-ignore
|
3239
|
-
if (!((_instance$props$rende = instance.props.render)
|
3806
|
+
if (!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy)) {
|
3807
|
+
{
|
3808
|
+
errorWhen(instance.props.animateFill, 'The `animateFill` plugin requires the default render function.');
|
3809
|
+
}
|
3240
3810
|
|
3241
3811
|
return {};
|
3242
3812
|
}
|
@@ -3358,6 +3928,7 @@ var followCursor = {
|
|
3358
3928
|
|
3359
3929
|
if (isCursorOverReference || !instance.props.interactive) {
|
3360
3930
|
instance.setProps({
|
3931
|
+
// @ts-ignore - unneeded DOMRect properties
|
3361
3932
|
getReferenceClientRect: function getReferenceClientRect() {
|
3362
3933
|
var rect = reference.getBoundingClientRect();
|
3363
3934
|
var x = clientX;
|
@@ -3494,6 +4065,7 @@ var inlinePositioning = {
|
|
3494
4065
|
var placement;
|
3495
4066
|
var cursorRectIndex = -1;
|
3496
4067
|
var isInternalUpdate = false;
|
4068
|
+
var triedPlacements = [];
|
3497
4069
|
var modifier = {
|
3498
4070
|
name: 'tippyInlinePositioning',
|
3499
4071
|
enabled: true,
|
@@ -3502,8 +4074,14 @@ var inlinePositioning = {
|
|
3502
4074
|
var state = _ref2.state;
|
3503
4075
|
|
3504
4076
|
if (isEnabled()) {
|
3505
|
-
if (placement !==
|
4077
|
+
if (triedPlacements.indexOf(state.placement) !== -1) {
|
4078
|
+
triedPlacements = [];
|
4079
|
+
}
|
4080
|
+
|
4081
|
+
if (placement !== state.placement && triedPlacements.indexOf(state.placement) === -1) {
|
4082
|
+
triedPlacements.push(state.placement);
|
3506
4083
|
instance.setProps({
|
4084
|
+
// @ts-ignore - unneeded DOMRect properties
|
3507
4085
|
getReferenceClientRect: function getReferenceClientRect() {
|
3508
4086
|
return _getReferenceClientRect(state.placement);
|
3509
4087
|
}
|
@@ -3540,10 +4118,11 @@ var inlinePositioning = {
|
|
3540
4118
|
var cursorRect = rects.find(function (rect) {
|
3541
4119
|
return rect.left - 2 <= event.clientX && rect.right + 2 >= event.clientX && rect.top - 2 <= event.clientY && rect.bottom + 2 >= event.clientY;
|
3542
4120
|
});
|
3543
|
-
|
4121
|
+
var index = rects.indexOf(cursorRect);
|
4122
|
+
cursorRectIndex = index > -1 ? index : cursorRectIndex;
|
3544
4123
|
}
|
3545
4124
|
},
|
3546
|
-
|
4125
|
+
onHidden: function onHidden() {
|
3547
4126
|
cursorRectIndex = -1;
|
3548
4127
|
}
|
3549
4128
|
};
|
@@ -3687,12 +4266,20 @@ tippy.setDefaultProps({
|
|
3687
4266
|
},
|
3688
4267
|
});
|
3689
4268
|
function useTippy(el, opts = {}, settings = { mount: true }) {
|
4269
|
+
const vm = vue.getCurrentInstance();
|
3690
4270
|
const instance = vue.ref();
|
4271
|
+
const state = vue.ref({
|
4272
|
+
isEnabled: false,
|
4273
|
+
isVisible: false,
|
4274
|
+
isDestroyed: false,
|
4275
|
+
isMounted: false,
|
4276
|
+
isShown: false,
|
4277
|
+
});
|
3691
4278
|
let container = null;
|
3692
4279
|
const getContainer = () => {
|
3693
4280
|
if (container)
|
3694
4281
|
return container;
|
3695
|
-
container = document.
|
4282
|
+
container = document.createDocumentFragment();
|
3696
4283
|
return container;
|
3697
4284
|
};
|
3698
4285
|
const getContent = (content) => {
|
@@ -3701,11 +4288,18 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3701
4288
|
? content.value
|
3702
4289
|
: content;
|
3703
4290
|
if (vue.isVNode(unwrappedContent)) {
|
4291
|
+
if (vm) {
|
4292
|
+
unwrappedContent.appContext = vm.appContext;
|
4293
|
+
}
|
3704
4294
|
vue.render(unwrappedContent, getContainer());
|
3705
4295
|
newContent = () => getContainer();
|
3706
4296
|
}
|
3707
4297
|
else if (typeof unwrappedContent === 'object') {
|
3708
|
-
vue.
|
4298
|
+
let comp = vue.h(unwrappedContent);
|
4299
|
+
if (vm) {
|
4300
|
+
comp.appContext = vm.appContext;
|
4301
|
+
}
|
4302
|
+
vue.render(comp, getContainer());
|
3709
4303
|
newContent = () => getContainer();
|
3710
4304
|
}
|
3711
4305
|
else {
|
@@ -3716,7 +4310,7 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3716
4310
|
const getProps = (opts) => {
|
3717
4311
|
let options = {};
|
3718
4312
|
if (vue.isRef(opts)) {
|
3719
|
-
options = opts.value;
|
4313
|
+
options = opts.value || {};
|
3720
4314
|
}
|
3721
4315
|
else if (vue.isReactive(opts)) {
|
3722
4316
|
options = { ...opts };
|
@@ -3724,8 +4318,51 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3724
4318
|
else {
|
3725
4319
|
options = { ...opts };
|
3726
4320
|
}
|
3727
|
-
if (options.content)
|
4321
|
+
if (options.content) {
|
3728
4322
|
options.content = getContent(options.content);
|
4323
|
+
}
|
4324
|
+
if (options.triggerTarget) {
|
4325
|
+
options.triggerTarget = vue.isRef(options.triggerTarget)
|
4326
|
+
? options.triggerTarget.value
|
4327
|
+
: options.triggerTarget;
|
4328
|
+
}
|
4329
|
+
if (!options.plugins || !Array.isArray(options.plugins)) {
|
4330
|
+
options.plugins = [];
|
4331
|
+
}
|
4332
|
+
options.plugins = options.plugins.filter((plugin) => plugin.name !== 'vueTippyReactiveState');
|
4333
|
+
options.plugins.push({
|
4334
|
+
name: 'vueTippyReactiveState',
|
4335
|
+
fn: () => {
|
4336
|
+
return {
|
4337
|
+
onCreate() {
|
4338
|
+
state.value.isEnabled = true;
|
4339
|
+
},
|
4340
|
+
onMount() {
|
4341
|
+
state.value.isMounted = true;
|
4342
|
+
},
|
4343
|
+
onShow() {
|
4344
|
+
state.value.isMounted = true;
|
4345
|
+
state.value.isVisible = true;
|
4346
|
+
},
|
4347
|
+
onShown() {
|
4348
|
+
state.value.isShown = true;
|
4349
|
+
},
|
4350
|
+
onHide() {
|
4351
|
+
state.value.isMounted = false;
|
4352
|
+
state.value.isVisible = false;
|
4353
|
+
},
|
4354
|
+
onHidden() {
|
4355
|
+
state.value.isShown = false;
|
4356
|
+
},
|
4357
|
+
onUnmounted() {
|
4358
|
+
state.value.isMounted = false;
|
4359
|
+
},
|
4360
|
+
onDestroy() {
|
4361
|
+
state.value.isDestroyed = true;
|
4362
|
+
},
|
4363
|
+
};
|
4364
|
+
}
|
4365
|
+
});
|
3729
4366
|
return options;
|
3730
4367
|
};
|
3731
4368
|
const refresh = () => {
|
@@ -3764,10 +4401,12 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3764
4401
|
const disable = () => {
|
3765
4402
|
var _a;
|
3766
4403
|
(_a = instance.value) === null || _a === void 0 ? void 0 : _a.disable();
|
4404
|
+
state.value.isEnabled = false;
|
3767
4405
|
};
|
3768
4406
|
const enable = () => {
|
3769
4407
|
var _a;
|
3770
4408
|
(_a = instance.value) === null || _a === void 0 ? void 0 : _a.enable();
|
4409
|
+
state.value.isEnabled = true;
|
3771
4410
|
};
|
3772
4411
|
const unmount = () => {
|
3773
4412
|
var _a;
|
@@ -3798,9 +4437,9 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3798
4437
|
enable,
|
3799
4438
|
unmount,
|
3800
4439
|
mount,
|
4440
|
+
state,
|
3801
4441
|
};
|
3802
4442
|
if (settings.mount) {
|
3803
|
-
const vm = vue.getCurrentInstance();
|
3804
4443
|
if (vm) {
|
3805
4444
|
if (vm.isMounted) {
|
3806
4445
|
mount();
|
@@ -3825,12 +4464,170 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
|
|
3825
4464
|
return response;
|
3826
4465
|
}
|
3827
4466
|
|
3828
|
-
|
3829
|
-
|
3830
|
-
|
3831
|
-
|
3832
|
-
|
3833
|
-
|
4467
|
+
function useTippyComponent(opts = {}, children) {
|
4468
|
+
const instance = vue.ref();
|
4469
|
+
return {
|
4470
|
+
instance,
|
4471
|
+
TippyComponent: vue.h(TippyComponent, {
|
4472
|
+
...opts,
|
4473
|
+
onVnodeMounted: (vnode) => {
|
4474
|
+
//@ts-ignore
|
4475
|
+
instance.value = vnode.component.ctx;
|
4476
|
+
},
|
4477
|
+
}, children),
|
4478
|
+
};
|
4479
|
+
}
|
4480
|
+
|
4481
|
+
function useSingleton(instances, optionalProps) {
|
4482
|
+
const singleton = vue.ref();
|
4483
|
+
vue.onMounted(() => {
|
4484
|
+
const pendingTippyInstances = Array.isArray(instances)
|
4485
|
+
? instances.map(i => i.value)
|
4486
|
+
: typeof instances === 'function'
|
4487
|
+
? instances()
|
4488
|
+
: instances.value;
|
4489
|
+
const tippyInstances = pendingTippyInstances
|
4490
|
+
.map((instance) => {
|
4491
|
+
if (instance instanceof Element) {
|
4492
|
+
//@ts-ignore
|
4493
|
+
return instance._tippy;
|
4494
|
+
}
|
4495
|
+
return instance;
|
4496
|
+
})
|
4497
|
+
.filter(Boolean);
|
4498
|
+
singleton.value = createSingleton(tippyInstances, optionalProps
|
4499
|
+
? { allowHTML: true, ...optionalProps }
|
4500
|
+
: { allowHTML: true });
|
4501
|
+
});
|
4502
|
+
return {
|
4503
|
+
singleton,
|
4504
|
+
};
|
4505
|
+
}
|
4506
|
+
|
4507
|
+
const TippyComponent = vue.defineComponent({
|
4508
|
+
props: {
|
4509
|
+
to: {
|
4510
|
+
type: [String, Function],
|
4511
|
+
},
|
4512
|
+
tag: {
|
4513
|
+
type: String,
|
4514
|
+
default: 'span'
|
4515
|
+
},
|
4516
|
+
contentTag: {
|
4517
|
+
type: String,
|
4518
|
+
default: 'span'
|
4519
|
+
},
|
4520
|
+
contentClass: {
|
4521
|
+
type: String,
|
4522
|
+
default: null
|
4523
|
+
},
|
4524
|
+
appendTo: { default: () => tippy.defaultProps['appendTo'] },
|
4525
|
+
aria: { default: () => tippy.defaultProps['aria'] },
|
4526
|
+
delay: { default: () => tippy.defaultProps['delay'] },
|
4527
|
+
duration: { default: () => tippy.defaultProps['duration'] },
|
4528
|
+
getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
|
4529
|
+
hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
|
4530
|
+
ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
|
4531
|
+
interactive: { default: () => tippy.defaultProps['interactive'] },
|
4532
|
+
interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
|
4533
|
+
interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
|
4534
|
+
moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
|
4535
|
+
offset: { default: () => tippy.defaultProps['offset'] },
|
4536
|
+
onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
|
4537
|
+
onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
|
4538
|
+
onCreate: { default: () => tippy.defaultProps['onCreate'] },
|
4539
|
+
onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
|
4540
|
+
onHidden: { default: () => tippy.defaultProps['onHidden'] },
|
4541
|
+
onHide: { default: () => tippy.defaultProps['onHide'] },
|
4542
|
+
onMount: { default: () => tippy.defaultProps['onMount'] },
|
4543
|
+
onShow: { default: () => tippy.defaultProps['onShow'] },
|
4544
|
+
onShown: { default: () => tippy.defaultProps['onShown'] },
|
4545
|
+
onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
|
4546
|
+
onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
|
4547
|
+
onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
|
4548
|
+
placement: { default: () => tippy.defaultProps['placement'] },
|
4549
|
+
plugins: { default: () => tippy.defaultProps['plugins'] },
|
4550
|
+
popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
|
4551
|
+
render: { default: () => tippy.defaultProps['render'] },
|
4552
|
+
showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
|
4553
|
+
touch: { default: () => tippy.defaultProps['touch'] },
|
4554
|
+
trigger: { default: () => tippy.defaultProps['trigger'] },
|
4555
|
+
triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
|
4556
|
+
animateFill: { default: () => tippy.defaultProps['animateFill'] },
|
4557
|
+
followCursor: { default: () => tippy.defaultProps['followCursor'] },
|
4558
|
+
inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
|
4559
|
+
sticky: { default: () => tippy.defaultProps['sticky'] },
|
4560
|
+
allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
|
4561
|
+
animation: { default: () => tippy.defaultProps['animation'] },
|
4562
|
+
arrow: { default: () => tippy.defaultProps['arrow'] },
|
4563
|
+
content: { default: () => tippy.defaultProps['content'] },
|
4564
|
+
inertia: { default: () => tippy.defaultProps['inertia'] },
|
4565
|
+
maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
|
4566
|
+
role: { default: () => tippy.defaultProps['role'] },
|
4567
|
+
theme: { default: () => tippy.defaultProps['theme'] },
|
4568
|
+
zIndex: { default: () => tippy.defaultProps['zIndex'] }
|
4569
|
+
},
|
4570
|
+
emits: ['state'],
|
4571
|
+
setup(props, { slots, emit, expose }) {
|
4572
|
+
const elem = vue.ref();
|
4573
|
+
const contentElem = vue.ref();
|
4574
|
+
const mounted = vue.ref(false);
|
4575
|
+
const getOptions = () => {
|
4576
|
+
let options = { ...props };
|
4577
|
+
for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
|
4578
|
+
if (options.hasOwnProperty(prop)) {
|
4579
|
+
// @ts-ignore
|
4580
|
+
delete options[prop];
|
4581
|
+
}
|
4582
|
+
}
|
4583
|
+
return options;
|
4584
|
+
};
|
4585
|
+
let target = elem;
|
4586
|
+
if (props.to) {
|
4587
|
+
if (typeof Element !== 'undefined' && props.to instanceof Element) {
|
4588
|
+
target = () => props.to;
|
4589
|
+
}
|
4590
|
+
else if (typeof props.to === 'string' || props.to instanceof String) {
|
4591
|
+
target = () => document.querySelector(props.to);
|
4592
|
+
}
|
4593
|
+
}
|
4594
|
+
const tippy = useTippy(target, getOptions());
|
4595
|
+
vue.onMounted(() => {
|
4596
|
+
mounted.value = true;
|
4597
|
+
vue.nextTick(() => {
|
4598
|
+
if (slots.content)
|
4599
|
+
tippy.setContent(() => contentElem.value);
|
4600
|
+
});
|
4601
|
+
});
|
4602
|
+
vue.watch(tippy.state, () => {
|
4603
|
+
emit('state', vue.unref(tippy.state));
|
4604
|
+
}, { immediate: true, deep: true });
|
4605
|
+
vue.watch(() => props, () => {
|
4606
|
+
tippy.setProps(getOptions());
|
4607
|
+
if (slots.content)
|
4608
|
+
tippy.setContent(() => contentElem.value);
|
4609
|
+
});
|
4610
|
+
let exposed = vue.reactive({
|
4611
|
+
elem,
|
4612
|
+
contentElem,
|
4613
|
+
mounted,
|
4614
|
+
...tippy
|
4615
|
+
});
|
4616
|
+
expose(exposed);
|
4617
|
+
return () => {
|
4618
|
+
const slot = slots.default ? slots.default(exposed) : [];
|
4619
|
+
return vue.h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
|
4620
|
+
slot,
|
4621
|
+
vue.h(props.contentTag, {
|
4622
|
+
ref: contentElem,
|
4623
|
+
style: { display: mounted.value ? 'inherit' : 'none' },
|
4624
|
+
class: props.contentClass
|
4625
|
+
}, slots.content(exposed)),
|
4626
|
+
] : slot);
|
4627
|
+
};
|
4628
|
+
},
|
4629
|
+
});
|
4630
|
+
|
3834
4631
|
const booleanProps = [
|
3835
4632
|
'a11y',
|
3836
4633
|
'allowHTML',
|
@@ -3865,22 +4662,40 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
|
|
3865
4662
|
};
|
3866
4663
|
}
|
3867
4664
|
});
|
3868
|
-
const
|
4665
|
+
const TippySingleton = vue.defineComponent({
|
3869
4666
|
props,
|
3870
4667
|
setup(props) {
|
3871
|
-
const
|
3872
|
-
const
|
3873
|
-
return {
|
4668
|
+
const instances = vue.ref([]);
|
4669
|
+
const { singleton } = useSingleton(instances, props);
|
4670
|
+
return { instances, singleton };
|
4671
|
+
},
|
4672
|
+
mounted() {
|
4673
|
+
var _a;
|
4674
|
+
const parent = this.$el.parentElement;
|
4675
|
+
const elements = parent.querySelectorAll('[data-v-tippy]');
|
4676
|
+
this.instances = Array.from(elements)
|
4677
|
+
.map((el) => el._tippy)
|
4678
|
+
.filter(Boolean);
|
4679
|
+
(_a = this.singleton) === null || _a === void 0 ? void 0 : _a.setInstances(this.instances);
|
3874
4680
|
},
|
3875
4681
|
render() {
|
3876
4682
|
let slot = this.$slots.default ? this.$slots.default() : [];
|
3877
|
-
return vue.h(
|
4683
|
+
return vue.h(() => slot);
|
3878
4684
|
},
|
3879
4685
|
});
|
3880
4686
|
|
3881
4687
|
const directive = {
|
3882
4688
|
mounted(el, binding, vnode) {
|
3883
|
-
const opts = binding.value || {};
|
4689
|
+
const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
|
4690
|
+
const modifiers = Object.keys(binding.modifiers || {});
|
4691
|
+
const placement = modifiers.find(modifier => modifier !== 'arrow');
|
4692
|
+
const withArrow = modifiers.findIndex(modifier => modifier === 'arrow') !== -1;
|
4693
|
+
if (placement) {
|
4694
|
+
opts.placement = opts.placement || placement;
|
4695
|
+
}
|
4696
|
+
if (withArrow) {
|
4697
|
+
opts.arrow = opts.arrow !== undefined ? opts.arrow : true;
|
4698
|
+
}
|
3884
4699
|
if (vnode.props && vnode.props.onTippyShow) {
|
3885
4700
|
opts.onShow = function (...args) {
|
3886
4701
|
var _a;
|
@@ -3929,7 +4744,7 @@ const directive = {
|
|
3929
4744
|
}
|
3930
4745
|
},
|
3931
4746
|
updated(el, binding) {
|
3932
|
-
const opts = binding.value || {};
|
4747
|
+
const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
|
3933
4748
|
if (el.getAttribute('title') && !opts.content) {
|
3934
4749
|
opts.content = el.getAttribute('title');
|
3935
4750
|
el.removeAttribute('title');
|
@@ -3951,70 +4766,24 @@ const plugin = {
|
|
3951
4766
|
tippy.setDefaultProps(options.defaultProps || {});
|
3952
4767
|
app.directive(options.directive || 'tippy', directive);
|
3953
4768
|
app.component(options.component || 'tippy', TippyComponent);
|
4769
|
+
app.component(options.componentSingleton || 'tippy-singleton', TippySingleton);
|
3954
4770
|
},
|
3955
4771
|
};
|
3956
4772
|
|
3957
|
-
function useSingleton(instances, optionalProps) {
|
3958
|
-
const singleton = vue.ref();
|
3959
|
-
vue.onMounted(() => {
|
3960
|
-
const pendingTippyInstances = Array.isArray(instances)
|
3961
|
-
? instances.map(i => i.value)
|
3962
|
-
: instances.value;
|
3963
|
-
const tippyInstances = pendingTippyInstances
|
3964
|
-
.map((instance) => {
|
3965
|
-
if (instance instanceof Element) {
|
3966
|
-
//@ts-ignore
|
3967
|
-
return instance._tippy;
|
3968
|
-
}
|
3969
|
-
return instance;
|
3970
|
-
})
|
3971
|
-
.filter(Boolean);
|
3972
|
-
singleton.value = createSingleton(tippyInstances, optionalProps);
|
3973
|
-
});
|
3974
|
-
return {
|
3975
|
-
singleton,
|
3976
|
-
};
|
3977
|
-
}
|
3978
|
-
|
3979
|
-
function styleInject(css, ref) {
|
3980
|
-
if ( ref === void 0 ) ref = {};
|
3981
|
-
var insertAt = ref.insertAt;
|
3982
|
-
|
3983
|
-
if (!css || typeof document === 'undefined') { return; }
|
3984
|
-
|
3985
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
3986
|
-
var style = document.createElement('style');
|
3987
|
-
style.type = 'text/css';
|
3988
|
-
|
3989
|
-
if (insertAt === 'top') {
|
3990
|
-
if (head.firstChild) {
|
3991
|
-
head.insertBefore(style, head.firstChild);
|
3992
|
-
} else {
|
3993
|
-
head.appendChild(style);
|
3994
|
-
}
|
3995
|
-
} else {
|
3996
|
-
head.appendChild(style);
|
3997
|
-
}
|
3998
|
-
|
3999
|
-
if (style.styleSheet) {
|
4000
|
-
style.styleSheet.cssText = css;
|
4001
|
-
} else {
|
4002
|
-
style.appendChild(document.createTextNode(css));
|
4003
|
-
}
|
4004
|
-
}
|
4005
|
-
|
4006
|
-
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}";
|
4007
|
-
styleInject(css_248z);
|
4008
|
-
|
4009
4773
|
const setDefaultProps$1 = tippy.setDefaultProps;
|
4010
4774
|
setDefaultProps$1({
|
4775
|
+
ignoreAttributes: true,
|
4011
4776
|
plugins: [sticky, inlinePositioning, followCursor, animateFill],
|
4012
4777
|
});
|
4013
4778
|
|
4014
4779
|
exports.Tippy = TippyComponent;
|
4780
|
+
exports.TippySingleton = TippySingleton;
|
4015
4781
|
exports.default = plugin;
|
4016
4782
|
exports.directive = directive;
|
4783
|
+
exports.plugin = plugin;
|
4784
|
+
exports.roundArrow = ROUND_ARROW;
|
4017
4785
|
exports.setDefaultProps = setDefaultProps$1;
|
4018
4786
|
exports.tippy = tippy;
|
4019
4787
|
exports.useSingleton = useSingleton;
|
4020
4788
|
exports.useTippy = useTippy;
|
4789
|
+
exports.useTippyComponent = useTippyComponent;
|