vue-tippy 6.0.0-alpha.3 → 6.0.0-alpha.33

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