vue-tippy 6.0.0-alpha.35 → 6.0.0-alpha.39

package/dist/vue-tippy.iife.js

@@ -1,6 +1,6 @@
 /*!
-  * vue-tippy v6.0.0-alpha.35
-  * (c) 2021 Georges KABBOUCHI
+  * vue-tippy v6.0.0-alpha.39
+  * (c) 2021 
   * @license MIT
   */
 var VueTippy = (function (exports, vue) {
@@ -408,7 +408,16 @@ var VueTippy = (function (exports, vue) {
       }
     }
 
+    if (process.env.NODE_ENV !== "production") {
+      if (!isHTMLElement(arrowElement)) {
+        console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
+      }
+    }
+
     if (!contains(state.elements.popper, arrowElement)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
+      }
 
       return;
     }
@@ -526,6 +535,16 @@ var VueTippy = (function (exports, vue) {
         _options$roundOffsets = options.roundOffsets,
         roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
 
+    if (process.env.NODE_ENV !== "production") {
+      var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || '';
+
+      if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
+        return transitionProperty.indexOf(property) >= 0;
+      })) {
+        console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
+      }
+    }
+
     var commonStyles = {
       placement: getBasePlacement(state.placement),
       popper: state.elements.popper,
@@ -977,6 +996,10 @@ var VueTippy = (function (exports, vue) {
 
     if (allowedPlacements.length === 0) {
       allowedPlacements = placements$1;
+
+      if (process.env.NODE_ENV !== "production") {
+        console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
+      }
     } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
@@ -1501,6 +1524,103 @@ var VueTippy = (function (exports, vue) {
     };
   }
 
+  function format(str) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return [].concat(args).reduce(function (p, c) {
+      return p.replace(/%s/, c);
+    }, str);
+  }
+
+  var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
+  var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
+  var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
+  function validateModifiers(modifiers) {
+    modifiers.forEach(function (modifier) {
+      Object.keys(modifier).forEach(function (key) {
+        switch (key) {
+          case 'name':
+            if (typeof modifier.name !== 'string') {
+              console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
+            }
+
+            break;
+
+          case 'enabled':
+            if (typeof modifier.enabled !== 'boolean') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
+            }
+
+          case 'phase':
+            if (modifierPhases.indexOf(modifier.phase) < 0) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
+            }
+
+            break;
+
+          case 'fn':
+            if (typeof modifier.fn !== 'function') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
+            }
+
+            break;
+
+          case 'effect':
+            if (typeof modifier.effect !== 'function') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
+            }
+
+            break;
+
+          case 'requires':
+            if (!Array.isArray(modifier.requires)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
+            }
+
+            break;
+
+          case 'requiresIfExists':
+            if (!Array.isArray(modifier.requiresIfExists)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
+            }
+
+            break;
+
+          case 'options':
+          case 'data':
+            break;
+
+          default:
+            console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
+              return "\"" + s + "\"";
+            }).join(', ') + "; but \"" + key + "\" was provided.");
+        }
+
+        modifier.requires && modifier.requires.forEach(function (requirement) {
+          if (modifiers.find(function (mod) {
+            return mod.name === requirement;
+          }) == null) {
+            console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
+          }
+        });
+      });
+    });
+  }
+
+  function uniqueBy(arr, fn) {
+    var identifiers = new Set();
+    return arr.filter(function (item) {
+      var identifier = fn(item);
+
+      if (!identifiers.has(identifier)) {
+        identifiers.add(identifier);
+        return true;
+      }
+    });
+  }
+
   function mergeByName(modifiers) {
     var merged = modifiers.reduce(function (merged, current) {
       var existing = merged[current.name];
@@ -1516,6 +1636,8 @@ var VueTippy = (function (exports, vue) {
     });
   }
 
+  var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
+  var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
   var DEFAULT_OPTIONS = {
     placement: 'bottom',
     modifiers: [],
@@ -1577,6 +1699,40 @@ var VueTippy = (function (exports, vue) {
           state.orderedModifiers = orderedModifiers.filter(function (m) {
             return m.enabled;
           }); // Validate the provided modifiers so that the consumer will get warned
+          // if one of the modifiers is invalid for any reason
+
+          if (process.env.NODE_ENV !== "production") {
+            var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
+              var name = _ref.name;
+              return name;
+            });
+            validateModifiers(modifiers);
+
+            if (getBasePlacement(state.options.placement) === auto) {
+              var flipModifier = state.orderedModifiers.find(function (_ref2) {
+                var name = _ref2.name;
+                return name === 'flip';
+              });
+
+              if (!flipModifier) {
+                console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
+              }
+            }
+
+            var _getComputedStyle = getComputedStyle(popper),
+                marginTop = _getComputedStyle.marginTop,
+                marginRight = _getComputedStyle.marginRight,
+                marginBottom = _getComputedStyle.marginBottom,
+                marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
+            // cause bugs with positioning, so we'll warn the consumer
+
+
+            if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
+              return parseFloat(margin);
+            })) {
+              console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
+            }
+          }
 
           runModifierEffects();
           return instance.update();
@@ -1597,6 +1753,9 @@ var VueTippy = (function (exports, vue) {
           // anymore
 
           if (!areValidElements(reference, popper)) {
+            if (process.env.NODE_ENV !== "production") {
+              console.error(INVALID_ELEMENT_ERROR);
+            }
 
             return;
           } // Store the reference and popper rects to be read by modifiers
@@ -1620,8 +1779,17 @@ var VueTippy = (function (exports, vue) {
           state.orderedModifiers.forEach(function (modifier) {
             return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
           });
+          var __debug_loops__ = 0;
 
           for (var index = 0; index < state.orderedModifiers.length; index++) {
+            if (process.env.NODE_ENV !== "production") {
+              __debug_loops__ += 1;
+
+              if (__debug_loops__ > 100) {
+                console.error(INFINITE_LOOP_ERROR);
+                break;
+              }
+            }
 
             if (state.reset === true) {
               state.reset = false;
@@ -1660,6 +1828,9 @@ var VueTippy = (function (exports, vue) {
       };
 
       if (!areValidElements(reference, popper)) {
+        if (process.env.NODE_ENV !== "production") {
+          console.error(INVALID_ELEMENT_ERROR);
+        }
 
         return instance;
       }
@@ -1728,6 +1899,10 @@ var VueTippy = (function (exports, vue) {
     passive: true,
     capture: true
   };
+
+  function hasOwnProperty(obj, key) {
+    return {}.hasOwnProperty.call(obj, key);
+  }
   function getValueAtIndexOrReturn(value, index, defaultValue) {
     if (Array.isArray(value)) {
       var v = value[index];
@@ -1951,6 +2126,61 @@ var VueTippy = (function (exports, vue) {
   var ua = isBrowser ? navigator.userAgent : '';
   var isIE = /MSIE |Trident\//.test(ua);
 
+  function createMemoryLeakWarning(method) {
+    var txt = method === 'destroy' ? 'n already-' : ' ';
+    return [method + "() was called on a" + txt + "destroyed instance. This is a no-op but", 'indicates a potential memory leak.'].join(' ');
+  }
+  function clean(value) {
+    var spacesAndTabs = /[ \t]{2,}/g;
+    var lineStartWithSpaces = /^[ \t]*/gm;
+    return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
+  }
+
+  function getDevMessage(message) {
+    return clean("\n  %ctippy.js\n\n  %c" + clean(message) + "\n\n  %c\uD83D\uDC77\u200D This is a development-only message. It will be removed in production.\n  ");
+  }
+
+  function getFormattedMessage(message) {
+    return [getDevMessage(message), // title
+    'color: #00C584; font-size: 1.3em; font-weight: bold;', // message
+    'line-height: 1.5', // footer
+    'color: #a6a095;'];
+  } // Assume warnings and errors never have the same message
+
+  var visitedMessages;
+
+  if (process.env.NODE_ENV !== "production") {
+    resetVisitedMessages();
+  }
+
+  function resetVisitedMessages() {
+    visitedMessages = new Set();
+  }
+  function warnWhen(condition, message) {
+    if (condition && !visitedMessages.has(message)) {
+      var _console;
+
+      visitedMessages.add(message);
+
+      (_console = console).warn.apply(_console, getFormattedMessage(message));
+    }
+  }
+  function errorWhen(condition, message) {
+    if (condition && !visitedMessages.has(message)) {
+      var _console2;
+
+      visitedMessages.add(message);
+
+      (_console2 = console).error.apply(_console2, getFormattedMessage(message));
+    }
+  }
+  function validateTargets(targets) {
+    var didPassFalsyValue = !targets;
+    var didPassPlainObject = Object.prototype.toString.call(targets) === '[object Object]' && !targets.addEventListener;
+    errorWhen(didPassFalsyValue, ['tippy() was passed', '`' + String(targets) + '`', 'as its targets (first) argument. Valid types are: String, Element,', 'Element[], or NodeList.'].join(' '));
+    errorWhen(didPassPlainObject, ['tippy() was passed a plain object which is not supported as an argument', 'for virtual positioning. Use props.getReferenceClientRect instead.'].join(' '));
+  }
+
   var pluginProps = {
     animateFill: false,
     followCursor: false,
@@ -2009,6 +2239,10 @@ var VueTippy = (function (exports, vue) {
   }, pluginProps, {}, renderProps);
   var defaultKeys = Object.keys(defaultProps);
   var setDefaultProps = function setDefaultProps(partialProps) {
+    /* istanbul ignore else */
+    if (process.env.NODE_ENV !== "production") {
+      validateProps(partialProps, []);
+    }
 
     var keys = Object.keys(partialProps);
     keys.forEach(function (key) {
@@ -2065,6 +2299,29 @@ var VueTippy = (function (exports, vue) {
     };
     return out;
   }
+  function validateProps(partialProps, plugins) {
+    if (partialProps === void 0) {
+      partialProps = {};
+    }
+
+    if (plugins === void 0) {
+      plugins = [];
+    }
+
+    var keys = Object.keys(partialProps);
+    keys.forEach(function (prop) {
+      var nonPluginProps = removeProperties(defaultProps, Object.keys(pluginProps));
+      var didPassUnknownProp = !hasOwnProperty(nonPluginProps, prop); // Check if the prop exists in `plugins`
+
+      if (didPassUnknownProp) {
+        didPassUnknownProp = plugins.filter(function (plugin) {
+          return plugin.name === prop;
+        }).length === 0;
+      }
+
+      warnWhen(didPassUnknownProp, ["`" + prop + "`", "is not a valid prop. You may have spelled it incorrectly, or if it's", 'a plugin, forgot to pass it in an array as props.plugins.', '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/'].join(' '));
+    });
+  }
 
   var innerHTML = function innerHTML() {
     return 'innerHTML';
@@ -2257,6 +2514,9 @@ var VueTippy = (function (exports, vue) {
     /* istanbul ignore if */
 
     if (!props.render) {
+      if (process.env.NODE_ENV !== "production") {
+        errorWhen(true, 'render() function has not been supplied.');
+      }
 
       return instance;
     } // ===========================================================================
@@ -2796,6 +3056,12 @@ var VueTippy = (function (exports, vue) {
       }
 
       createPopperInstance();
+      /* istanbul ignore else */
+
+      if (process.env.NODE_ENV !== "production") {
+        // Accessibility check
+        warnWhen(instance.props.interactive && appendTo === defaultProps.appendTo && node.nextElementSibling !== popper, ['Interactive tippy element may not be accessible via keyboard', 'navigation because it is not directly after the reference element', 'in the DOM source order.', '\n\n', 'Using a wrapper <div> or <span> tag around the reference element', 'solves this by creating a new parentNode context.', '\n\n', 'Specifying `appendTo: document.body` silences this warning, but it', 'assumes you are using a focus management solution to handle', 'keyboard navigation.', '\n\n', 'See: https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity'].join(' '));
+      }
     }
 
     function getNestedPopperTree() {
@@ -2884,6 +3150,10 @@ var VueTippy = (function (exports, vue) {
     }
 
     function setProps(partialProps) {
+      /* istanbul ignore else */
+      if (process.env.NODE_ENV !== "production") {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('setProps'));
+      }
 
       if (instance.state.isDestroyed) {
         return;
@@ -2942,6 +3212,10 @@ var VueTippy = (function (exports, vue) {
     }
 
     function show() {
+      /* istanbul ignore else */
+      if (process.env.NODE_ENV !== "production") {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('show'));
+      } // Early bail-out
 
 
       var isAlreadyVisible = instance.state.isVisible;
@@ -3032,6 +3306,10 @@ var VueTippy = (function (exports, vue) {
     }
 
     function hide() {
+      /* istanbul ignore else */
+      if (process.env.NODE_ENV !== "production") {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hide'));
+      } // Early bail-out
 
 
       var isAlreadyHidden = !instance.state.isVisible;
@@ -3086,6 +3364,10 @@ var VueTippy = (function (exports, vue) {
     }
 
     function hideWithInteractivity(event) {
+      /* istanbul ignore else */
+      if (process.env.NODE_ENV !== "production") {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hideWithInteractivity'));
+      }
 
       getDocument().addEventListener('mousemove', debouncedOnMouseMove);
       pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
@@ -3093,6 +3375,10 @@ var VueTippy = (function (exports, vue) {
     }
 
     function unmount() {
+      /* istanbul ignore else */
+      if (process.env.NODE_ENV !== "production") {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('unmount'));
+      }
 
       if (instance.state.isVisible) {
         instance.hide();
@@ -3122,6 +3408,10 @@ var VueTippy = (function (exports, vue) {
     }
 
     function destroy() {
+      /* istanbul ignore else */
+      if (process.env.NODE_ENV !== "production") {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('destroy'));
+      }
 
       if (instance.state.isDestroyed) {
         return;
@@ -3142,12 +3432,25 @@ var VueTippy = (function (exports, vue) {
     }
 
     var plugins = defaultProps.plugins.concat(optionalProps.plugins || []);
+    /* istanbul ignore else */
+
+    if (process.env.NODE_ENV !== "production") {
+      validateTargets(targets);
+      validateProps(optionalProps, plugins);
+    }
 
     bindGlobalEventListeners();
     var passedProps = Object.assign({}, optionalProps, {
       plugins: plugins
     });
     var elements = getArrayOfElements(targets);
+    /* istanbul ignore else */
+
+    if (process.env.NODE_ENV !== "production") {
+      var isSingleContentElement = isElement$1(passedProps.content);
+      var isMoreThanOneReferenceElement = elements.length > 1;
+      warnWhen(isSingleContentElement && isMoreThanOneReferenceElement, ['tippy() was passed an Element as the `content` prop, but more than', 'one tippy instance was created by this invocation. This means the', 'content element will only be appended to the last tippy instance.', '\n\n', 'Instead, pass the .innerHTML of the element, or use a function that', 'returns a cloned version of the element instead.', '\n\n', '1) content: element.innerHTML\n', '2) content: () => element.cloneNode(true)'].join(' '));
+    }
 
     var instances = elements.reduce(function (acc, reference) {
       var instance = reference && createTippy(reference, passedProps);
@@ -3202,6 +3505,11 @@ var VueTippy = (function (exports, vue) {
       optionalProps = {};
     }
 
+    /* istanbul ignore else */
+    if (process.env.NODE_ENV !== "production") {
+      errorWhen(!Array.isArray(tippyInstances), ['The first argument passed to createSingleton() must be an array of', 'tippy instances. The passed value was', String(tippyInstances)].join(' '));
+    }
+
     var individualInstances = tippyInstances;
     var references = [];
     var currentTarget;
@@ -3388,6 +3696,9 @@ var VueTippy = (function (exports, vue) {
 
       // @ts-ignore
       if (!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy)) {
+        if (process.env.NODE_ENV !== "production") {
+          errorWhen(instance.props.animateFill, 'The `animateFill` plugin requires the default render function.');
+        }
 
         return {};
       }
@@ -4084,13 +4395,17 @@ var VueTippy = (function (exports, vue) {
       setup(props, { slots }) {
           const elem = vue.ref();
           const contentElem = vue.ref();
-          let options = props;
-          if (options.to) {
-              delete options.to;
+          const mounted = vue.ref(false);
+          let options = { ...props };
+          for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
+              if (options.hasOwnProperty(prop)) {
+                  // @ts-ignore
+                  delete options[prop];
+              }
           }
           let target = elem;
           if (props.to) {
-              if (props.to instanceof Element) {
+              if (typeof Element !== 'undefined' && props.to instanceof Element) {
                   target = () => props.to;
               }
               else if (typeof props.to === 'string' || props.to instanceof String) {
@@ -4099,16 +4414,19 @@ var VueTippy = (function (exports, vue) {
           }
           const tippy = useTippy(target, options);
           vue.onMounted(() => {
-              if (slots.content)
-                  tippy.setContent(() => contentElem.value);
+              mounted.value = true;
+              vue.nextTick(() => {
+                  if (slots.content)
+                      tippy.setContent(() => contentElem.value);
+              });
           });
-          return { elem, contentElem, ...tippy };
+          return { elem, contentElem, mounted, ...tippy };
       },
       render() {
           let slot = this.$slots.default ? this.$slots.default(this) : [];
           return vue.h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
               slot,
-              vue.h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
+              vue.h(this.contentTag, { ref: 'contentElem', style: { display: this.mounted ? 'inherit' : 'none' }, class: this.contentClass }, this.$slots.content(this)),
           ] : slot);
       },
   });