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