@gitlab/ui 84.2.0 → 85.0.0

package/dist/vendor/bootstrap-vue/src/directives/toggle/toggle.js

@@ -0,0 +1,253 @@
+import { NAME_COLLAPSE } from '../../constants/components';
+import { IS_BROWSER } from '../../constants/env';
+import { EVENT_OPTIONS_PASSIVE } from '../../constants/events';
+import { CODE_ENTER, CODE_SPACE } from '../../constants/key-codes';
+import { RX_SPACE_SPLIT, RX_HASH_ID, RX_HASH } from '../../constants/regex';
+import { arrayIncludes, concat } from '../../utils/array';
+import { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
+import { removeClass, removeAttr, removeStyle, hasAttr, setAttr, setStyle, requestAF, isTag, getAttr, addClass, isDisabled } from '../../utils/dom';
+import { getRootActionEventName, getRootEventName, eventOff, eventOn } from '../../utils/events';
+import { isString } from '../../utils/inspect';
+import { looseEqual } from '../../utils/loose-equal';
+import { keys } from '../../utils/object';
+import { getEventRoot } from '../../utils/get-event-root';
+
+// --- Constants ---
+
+// Classes to apply to trigger element
+const CLASS_BV_TOGGLE_COLLAPSED = 'collapsed';
+const CLASS_BV_TOGGLE_NOT_COLLAPSED = 'not-collapsed';
+
+// Property key for handler storage
+const BV_BASE = '__BV_toggle';
+// Root event listener property (Function)
+const BV_TOGGLE_ROOT_HANDLER = `${BV_BASE}_HANDLER__`;
+// Trigger element click handler property (Function)
+const BV_TOGGLE_CLICK_HANDLER = `${BV_BASE}_CLICK__`;
+// Target visibility state property (Boolean)
+const BV_TOGGLE_STATE = `${BV_BASE}_STATE__`;
+// Target ID list property (Array)
+const BV_TOGGLE_TARGETS = `${BV_BASE}_TARGETS__`;
+
+// Commonly used strings
+const STRING_FALSE = 'false';
+const STRING_TRUE = 'true';
+
+// Commonly used attribute names
+const ATTR_ARIA_CONTROLS = 'aria-controls';
+const ATTR_ARIA_EXPANDED = 'aria-expanded';
+const ATTR_ROLE = 'role';
+const ATTR_TABINDEX = 'tabindex';
+
+// Commonly used style properties
+const STYLE_OVERFLOW_ANCHOR = 'overflow-anchor';
+
+// Emitted control event for collapse (emitted to collapse)
+const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle');
+
+// Listen to event for toggle state update (emitted by collapse)
+const ROOT_EVENT_NAME_STATE = getRootEventName(NAME_COLLAPSE, 'state');
+
+// Private event emitted on `$root` to ensure the toggle state is always synced
+// Gets emitted even if the state of b-collapse has not changed
+// This event is NOT to be documented as people should not be using it
+const ROOT_EVENT_NAME_SYNC_STATE = getRootEventName(NAME_COLLAPSE, 'sync-state');
+
+// Private event we send to collapse to request state update sync event
+const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state');
+const KEYDOWN_KEY_CODES = [CODE_ENTER, CODE_SPACE];
+
+// --- Helper methods ---
+
+const isNonStandardTag = el => !arrayIncludes(['button', 'a'], el.tagName.toLowerCase());
+const getTargets = (_ref, el) => {
+  let {
+    modifiers,
+    arg,
+    value
+  } = _ref;
+  // Any modifiers are considered target IDs
+  const targets = keys(modifiers || {});
+
+  // If value is a string, split out individual targets (if space delimited)
+  value = isString(value) ? value.split(RX_SPACE_SPLIT) : value;
+
+  // Support target ID as link href (`href="#id"`)
+  if (isTag(el.tagName, 'a')) {
+    const href = getAttr(el, 'href') || '';
+    if (RX_HASH_ID.test(href)) {
+      targets.push(href.replace(RX_HASH, ''));
+    }
+  }
+
+  // Add ID from `arg` (if provided), and support value
+  // as a single string ID or an array of string IDs
+  // If `value` is not an array or string, then it gets filtered out
+  concat(arg, value).forEach(t => isString(t) && targets.push(t));
+
+  // Return only unique and truthy target IDs
+  return targets.filter((t, index, arr) => t && arr.indexOf(t) === index);
+};
+const removeClickListener = el => {
+  const handler = el[BV_TOGGLE_CLICK_HANDLER];
+  if (handler) {
+    eventOff(el, 'click', handler, EVENT_OPTIONS_PASSIVE);
+    eventOff(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE);
+  }
+  el[BV_TOGGLE_CLICK_HANDLER] = null;
+};
+const addClickListener = (el, instance) => {
+  removeClickListener(el);
+  if (instance) {
+    const handler = event => {
+      if (!(event.type === 'keydown' && !arrayIncludes(KEYDOWN_KEY_CODES, event.keyCode)) && !isDisabled(el)) {
+        const targets = el[BV_TOGGLE_TARGETS] || [];
+        targets.forEach(target => {
+          getEventRoot(instance).$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, target);
+        });
+      }
+    };
+    el[BV_TOGGLE_CLICK_HANDLER] = handler;
+    eventOn(el, 'click', handler, EVENT_OPTIONS_PASSIVE);
+    if (isNonStandardTag(el)) {
+      eventOn(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE);
+    }
+  }
+};
+const removeRootListeners = (el, instance) => {
+  if (el[BV_TOGGLE_ROOT_HANDLER] && instance) {
+    getEventRoot(instance).$off([ROOT_EVENT_NAME_STATE, ROOT_EVENT_NAME_SYNC_STATE], el[BV_TOGGLE_ROOT_HANDLER]);
+  }
+  el[BV_TOGGLE_ROOT_HANDLER] = null;
+};
+const addRootListeners = (el, instance) => {
+  removeRootListeners(el, instance);
+  if (instance) {
+    const handler = (id, state) => {
+      // `state` will be `true` if target is expanded
+      if (arrayIncludes(el[BV_TOGGLE_TARGETS] || [], id)) {
+        // Set/Clear 'collapsed' visibility class state
+        el[BV_TOGGLE_STATE] = state;
+        // Set `aria-expanded` and class state on trigger element
+        setToggleState(el, state);
+      }
+    };
+    el[BV_TOGGLE_ROOT_HANDLER] = handler;
+    // Listen for toggle state changes (public) and sync (private)
+    getEventRoot(instance).$on([ROOT_EVENT_NAME_STATE, ROOT_EVENT_NAME_SYNC_STATE], handler);
+  }
+};
+const setToggleState = (el, state) => {
+  // State refers to the visibility of the collapse/sidebar
+  if (state) {
+    removeClass(el, CLASS_BV_TOGGLE_COLLAPSED);
+    addClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);
+    setAttr(el, ATTR_ARIA_EXPANDED, STRING_TRUE);
+  } else {
+    removeClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);
+    addClass(el, CLASS_BV_TOGGLE_COLLAPSED);
+    setAttr(el, ATTR_ARIA_EXPANDED, STRING_FALSE);
+  }
+};
+
+// Reset and remove a property from the provided element
+const resetProp = (el, prop) => {
+  el[prop] = null;
+  delete el[prop];
+};
+
+// Handle directive updates
+const handleUpdate = (el, binding, vnode) => {
+  /* istanbul ignore next: should never happen */
+  if (!IS_BROWSER || !getInstanceFromDirective(vnode, binding)) {
+    return;
+  }
+
+  // If element is not a button or link, we add `role="button"`
+  // and `tabindex="0"` for accessibility reasons
+  if (isNonStandardTag(el)) {
+    if (!hasAttr(el, ATTR_ROLE)) {
+      setAttr(el, ATTR_ROLE, 'button');
+    }
+    if (!hasAttr(el, ATTR_TABINDEX)) {
+      setAttr(el, ATTR_TABINDEX, '0');
+    }
+  }
+
+  // Ensure the collapse class and `aria-*` attributes persist
+  // after element is updated (either by parent re-rendering
+  // or changes to this element or its contents)
+  setToggleState(el, el[BV_TOGGLE_STATE]);
+
+  // Parse list of target IDs
+  const targets = getTargets(binding, el);
+
+  // Ensure the `aria-controls` hasn't been overwritten
+  // or removed when vnode updates
+  // Also ensure to set `overflow-anchor` to `none` to prevent
+  // the browser's scroll anchoring behavior
+  /* istanbul ignore else */
+  if (targets.length > 0) {
+    setAttr(el, ATTR_ARIA_CONTROLS, targets.join(' '));
+    setStyle(el, STYLE_OVERFLOW_ANCHOR, 'none');
+  } else {
+    removeAttr(el, ATTR_ARIA_CONTROLS);
+    removeStyle(el, STYLE_OVERFLOW_ANCHOR);
+  }
+
+  // Add/Update our click listener(s)
+  // Wrap in a `requestAF()` to allow any previous
+  // click handling to occur first
+  requestAF(() => {
+    addClickListener(el, getInstanceFromDirective(vnode, binding));
+  });
+
+  // If targets array has changed, update
+  if (!looseEqual(targets, el[BV_TOGGLE_TARGETS])) {
+    // Update targets array to element storage
+    el[BV_TOGGLE_TARGETS] = targets;
+    // Ensure `aria-controls` is up to date
+    // Request a state update from targets so that we can
+    // ensure expanded state is correct (in most cases)
+    targets.forEach(target => {
+      getEventRoot(getInstanceFromDirective(vnode, binding)).$emit(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, target);
+    });
+  }
+};
+
+/*
+ * Export our directive
+ */
+const VBToggle = {
+  bind(el, binding, vnode) {
+    // State is initially collapsed until we receive a state event
+    el[BV_TOGGLE_STATE] = false;
+    // Assume no targets initially
+    el[BV_TOGGLE_TARGETS] = [];
+    // Add our root listeners
+    addRootListeners(el, getInstanceFromDirective(vnode, binding));
+    // Initial update of trigger
+    handleUpdate(el, binding, vnode);
+  },
+  componentUpdated: handleUpdate,
+  updated: handleUpdate,
+  unbind(el, binding, vnode) {
+    removeClickListener(el);
+    // Remove our $root listener
+    removeRootListeners(el, getInstanceFromDirective(vnode, binding));
+    // Reset custom props
+    resetProp(el, BV_TOGGLE_ROOT_HANDLER);
+    resetProp(el, BV_TOGGLE_CLICK_HANDLER);
+    resetProp(el, BV_TOGGLE_STATE);
+    resetProp(el, BV_TOGGLE_TARGETS);
+    // Reset classes/attrs/styles
+    removeClass(el, CLASS_BV_TOGGLE_COLLAPSED);
+    removeClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);
+    removeAttr(el, ATTR_ARIA_EXPANDED);
+    removeAttr(el, ATTR_ARIA_CONTROLS);
+    removeAttr(el, ATTR_ROLE);
+    removeStyle(el, STYLE_OVERFLOW_ANCHOR);
+  }
+};
+
+export { VBToggle };

package/dist/vendor/bootstrap-vue/src/directives/tooltip/index.js

@@ -0,0 +1,11 @@
+import { VBTooltip } from './tooltip';
+export { VBTooltip } from './tooltip';
+import { pluginFactory } from '../../utils/plugins';
+
+const VBTooltipPlugin = /*#__PURE__*/pluginFactory({
+  directives: {
+    VBTooltip
+  }
+});
+
+export { VBTooltipPlugin };

package/dist/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js

@@ -0,0 +1,264 @@
+import { NAME_TOOLTIP } from '../../constants/components';
+import { IS_BROWSER } from '../../constants/env';
+import { EVENT_NAME_SHOW } from '../../constants/events';
+import { concat } from '../../utils/array';
+import { nextTick, isVue3 } from '../../vue';
+import { getComponentConfig } from '../../utils/config';
+import { getScopeId } from '../../utils/get-scope-id';
+import { identity } from '../../utils/identity';
+import { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
+import { isFunction, isString, isNumber, isPlainObject, isUndefined, isUndefinedOrNull } from '../../utils/inspect';
+import { looseEqual } from '../../utils/loose-equal';
+import { toInteger } from '../../utils/number';
+import { keys } from '../../utils/object';
+import { createNewChildComponent } from '../../utils/create-new-child-component';
+import { BVTooltip } from '../../components/tooltip/helpers/bv-tooltip';
+
+// Key which we use to store tooltip object on element
+const BV_TOOLTIP = '__BV_Tooltip__';
+
+// Default trigger
+const DefaultTrigger = 'hover focus';
+
+// Valid event triggers
+const validTriggers = {
+  focus: true,
+  hover: true,
+  click: true,
+  blur: true,
+  manual: true
+};
+
+// Directive modifier test regular expressions. Pre-compile for performance
+const htmlRE = /^html$/i;
+const noninteractiveRE = /^noninteractive$/i;
+const noFadeRE = /^nofade$/i;
+const placementRE = /^(auto|top(left|right)?|bottom(left|right)?|left(top|bottom)?|right(top|bottom)?)$/i;
+const boundaryRE = /^(window|viewport|scrollParent)$/i;
+const delayRE = /^d\d+$/i;
+const delayShowRE = /^ds\d+$/i;
+const delayHideRE = /^dh\d+$/i;
+const offsetRE = /^o-?\d+$/i;
+const variantRE = /^v-.+$/i;
+const spacesRE = /\s+/;
+
+// Build a Tooltip config based on bindings (if any)
+// Arguments and modifiers take precedence over passed value config object
+const parseBindings = (bindings, vnode) => /* istanbul ignore next: not easy to test */{
+  // We start out with a basic config
+  let config = {
+    title: undefined,
+    trigger: '',
+    // Default set below if needed
+    placement: 'top',
+    fallbackPlacement: 'flip',
+    container: false,
+    // Default of body
+    animation: true,
+    offset: 0,
+    id: null,
+    html: false,
+    interactive: true,
+    disabled: false,
+    delay: getComponentConfig(NAME_TOOLTIP, 'delay', 50),
+    boundary: String(getComponentConfig(NAME_TOOLTIP, 'boundary', 'scrollParent')),
+    boundaryPadding: toInteger(getComponentConfig(NAME_TOOLTIP, 'boundaryPadding', 5), 0),
+    variant: getComponentConfig(NAME_TOOLTIP, 'variant'),
+    customClass: getComponentConfig(NAME_TOOLTIP, 'customClass')
+  };
+  // Process `bindings.value`
+  if (isString(bindings.value) || isNumber(bindings.value)) {
+    // Value is tooltip content (HTML optionally supported)
+    config.title = bindings.value;
+  } else if (isFunction(bindings.value)) {
+    // Title generator function
+    config.title = bindings.value;
+  } else if (isPlainObject(bindings.value)) {
+    // Value is config object, so merge
+    config = {
+      ...config,
+      ...bindings.value
+    };
+  }
+
+  // If title is not provided, try title attribute
+  if (isUndefined(config.title)) {
+    // Try attribute
+    const attrs = isVue3 ? vnode.props : (vnode.data || {}).attrs;
+    config.title = attrs && !isUndefinedOrNull(attrs.title) ? attrs.title : undefined;
+  }
+
+  // Normalize delay
+  if (!isPlainObject(config.delay)) {
+    config.delay = {
+      show: toInteger(config.delay, 0),
+      hide: toInteger(config.delay, 0)
+    };
+  }
+
+  // If argument, assume element ID of container element
+  if (bindings.arg) {
+    // Element ID specified as arg
+    // We must prepend '#' to become a CSS selector
+    config.container = `#${bindings.arg}`;
+  }
+
+  // Process modifiers
+  keys(bindings.modifiers).forEach(mod => {
+    if (htmlRE.test(mod)) {
+      // Title allows HTML
+      config.html = true;
+    } else if (noninteractiveRE.test(mod)) {
+      // Noninteractive
+      config.interactive = false;
+    } else if (noFadeRE.test(mod)) {
+      // No animation
+      config.animation = false;
+    } else if (placementRE.test(mod)) {
+      // Placement of tooltip
+      config.placement = mod;
+    } else if (boundaryRE.test(mod)) {
+      // Boundary of tooltip
+      mod = mod === 'scrollparent' ? 'scrollParent' : mod;
+      config.boundary = mod;
+    } else if (delayRE.test(mod)) {
+      // Delay value
+      const delay = toInteger(mod.slice(1), 0);
+      config.delay.show = delay;
+      config.delay.hide = delay;
+    } else if (delayShowRE.test(mod)) {
+      // Delay show value
+      config.delay.show = toInteger(mod.slice(2), 0);
+    } else if (delayHideRE.test(mod)) {
+      // Delay hide value
+      config.delay.hide = toInteger(mod.slice(2), 0);
+    } else if (offsetRE.test(mod)) {
+      // Offset value, negative allowed
+      config.offset = toInteger(mod.slice(1), 0);
+    } else if (variantRE.test(mod)) {
+      // Variant
+      config.variant = mod.slice(2) || null;
+    }
+  });
+
+  // Special handling of event trigger modifiers trigger is
+  // a space separated list
+  const selectedTriggers = {};
+
+  // Parse current config object trigger
+  concat(config.trigger || '').filter(identity).join(' ').trim().toLowerCase().split(spacesRE).forEach(trigger => {
+    if (validTriggers[trigger]) {
+      selectedTriggers[trigger] = true;
+    }
+  });
+
+  // Parse modifiers for triggers
+  keys(bindings.modifiers).forEach(mod => {
+    mod = mod.toLowerCase();
+    if (validTriggers[mod]) {
+      // If modifier is a valid trigger
+      selectedTriggers[mod] = true;
+    }
+  });
+
+  // Sanitize triggers
+  config.trigger = keys(selectedTriggers).join(' ');
+  if (config.trigger === 'blur') {
+    // Blur by itself is useless, so convert it to 'focus'
+    config.trigger = 'focus';
+  }
+  if (!config.trigger) {
+    // Use default trigger
+    config.trigger = DefaultTrigger;
+  }
+
+  // Return the config
+  return config;
+};
+
+// Add/update Tooltip on our element
+const applyTooltip = (el, bindings, vnode) => {
+  if (!IS_BROWSER) {
+    /* istanbul ignore next */
+    return;
+  }
+  const config = parseBindings(bindings, vnode);
+  if (!el[BV_TOOLTIP]) {
+    const parent = getInstanceFromDirective(vnode, bindings);
+    el[BV_TOOLTIP] = createNewChildComponent(parent, BVTooltip, {
+      // Add the parent's scoped style attribute data
+      _scopeId: getScopeId(parent, undefined)
+    });
+    el[BV_TOOLTIP].__bv_prev_data__ = {};
+    el[BV_TOOLTIP].$on(EVENT_NAME_SHOW, () => /* istanbul ignore next: for now */{
+      // Before showing the tooltip, we update the title if it is a function
+      if (isFunction(config.title)) {
+        el[BV_TOOLTIP].updateData({
+          title: config.title(el)
+        });
+      }
+    });
+  }
+  const data = {
+    title: config.title,
+    triggers: config.trigger,
+    placement: config.placement,
+    fallbackPlacement: config.fallbackPlacement,
+    variant: config.variant,
+    customClass: config.customClass,
+    container: config.container,
+    boundary: config.boundary,
+    delay: config.delay,
+    offset: config.offset,
+    noFade: !config.animation,
+    id: config.id,
+    interactive: config.interactive,
+    disabled: config.disabled,
+    html: config.html
+  };
+  const oldData = el[BV_TOOLTIP].__bv_prev_data__;
+  el[BV_TOOLTIP].__bv_prev_data__ = data;
+  if (!looseEqual(data, oldData)) {
+    // We only update the instance if data has changed
+    const newData = {
+      target: el
+    };
+    keys(data).forEach(prop => {
+      // We only pass data properties that have changed
+      if (data[prop] !== oldData[prop]) {
+        // if title is a function, we execute it here
+        newData[prop] = prop === 'title' && isFunction(data[prop]) ? data[prop](el) : data[prop];
+      }
+    });
+    el[BV_TOOLTIP].updateData(newData);
+  }
+};
+
+// Remove Tooltip on our element
+const removeTooltip = el => {
+  if (el[BV_TOOLTIP]) {
+    el[BV_TOOLTIP].$destroy();
+    el[BV_TOOLTIP] = null;
+  }
+  delete el[BV_TOOLTIP];
+};
+
+// Export our directive
+const VBTooltip = {
+  bind(el, bindings, vnode) {
+    applyTooltip(el, bindings, vnode);
+  },
+  // We use `componentUpdated` here instead of `update`, as the former
+  // waits until the containing component and children have finished updating
+  componentUpdated(el, bindings, vnode) {
+    // Performed in a `$nextTick()` to prevent render update loops
+    nextTick(() => {
+      applyTooltip(el, bindings, vnode);
+    });
+  },
+  unbind(el) {
+    removeTooltip(el);
+  }
+};
+
+export { VBTooltip };

package/dist/vendor/bootstrap-vue/src/directives/visible/index.js

@@ -0,0 +1,11 @@
+import { VBVisible } from './visible';
+export { VBVisible } from './visible';
+import { pluginFactory } from '../../utils/plugins';
+
+const VBVisiblePlugin = /*#__PURE__*/pluginFactory({
+  directives: {
+    VBVisible
+  }
+});
+
+export { VBVisiblePlugin };

package/dist/vendor/bootstrap-vue/src/directives/visible/visible.js

@@ -0,0 +1,156 @@
+import { RX_DIGITS } from '../../constants/regex';
+import { requestAF } from '../../utils/dom';
+import { isFunction } from '../../utils/inspect';
+import { looseEqual } from '../../utils/loose-equal';
+import { keys, clone } from '../../utils/object';
+import { nextTick } from '../../vue';
+
+// v-b-visible
+const OBSERVER_PROP_NAME = '__bv__visibility_observer';
+class VisibilityObserver {
+  constructor(el, options) {
+    this.el = el;
+    this.callback = options.callback;
+    this.margin = options.margin || 0;
+    this.once = options.once || false;
+    this.observer = null;
+    this.visible = undefined;
+    this.doneOnce = false;
+    // Create the observer instance (if possible)
+    this.createObserver();
+  }
+  createObserver() {
+    // Remove any previous observer
+    if (this.observer) {
+      /* istanbul ignore next */
+      this.stop();
+    }
+
+    // Should only be called once and `callback` prop should be a function
+    if (this.doneOnce || !isFunction(this.callback)) {
+      /* istanbul ignore next */
+      return;
+    }
+
+    // Create the observer instance
+    try {
+      // Future: Possibly add in other modifiers for left/right/top/bottom
+      // offsets, root element reference, and thresholds
+      this.observer = new IntersectionObserver(this.handler.bind(this), {
+        // `null` = 'viewport'
+        root: null,
+        // Pixels away from view port to consider "visible"
+        rootMargin: this.margin,
+        // Intersection ratio of el and root (as a value from 0 to 1)
+        threshold: 0
+      });
+    } catch {
+      // No IntersectionObserver support, so just stop trying to observe
+      this.doneOnce = true;
+      this.observer = undefined;
+      this.callback(null);
+      return;
+    }
+
+    // Start observing in a `$nextTick()` (to allow DOM to complete rendering)
+    /* istanbul ignore next: IntersectionObserver not supported in JSDOM */
+    nextTick(() => {
+      requestAF(() => {
+        // Placed in an `if` just in case we were destroyed before
+        // this `requestAnimationFrame` runs
+        if (this.observer) {
+          this.observer.observe(this.el);
+        }
+      });
+    });
+  }
+
+  /* istanbul ignore next */
+  handler(entries) {
+    const entry = entries ? entries[0] : {};
+    const isIntersecting = Boolean(entry.isIntersecting || entry.intersectionRatio > 0.0);
+    if (isIntersecting !== this.visible) {
+      this.visible = isIntersecting;
+      this.callback(isIntersecting);
+      if (this.once && this.visible) {
+        this.doneOnce = true;
+        this.stop();
+      }
+    }
+  }
+  stop() {
+    /* istanbul ignore next */
+    this.observer && this.observer.disconnect();
+    this.observer = null;
+  }
+}
+const destroy = el => {
+  const observer = el[OBSERVER_PROP_NAME];
+  if (observer && observer.stop) {
+    observer.stop();
+  }
+  delete el[OBSERVER_PROP_NAME];
+};
+const bind = (el, _ref) => {
+  let {
+    value,
+    modifiers
+  } = _ref;
+  // `value` is the callback function
+  const options = {
+    margin: '0px',
+    once: false,
+    callback: value
+  };
+  // Parse modifiers
+  keys(modifiers).forEach(mod => {
+    /* istanbul ignore else: Until <b-img-lazy> is switched to use this directive */
+    if (RX_DIGITS.test(mod)) {
+      options.margin = `${mod}px`;
+    } else if (mod.toLowerCase() === 'once') {
+      options.once = true;
+    }
+  });
+  // Destroy any previous observer
+  destroy(el);
+  // Create new observer
+  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options);
+  // Store the current modifiers on the object (cloned)
+  el[OBSERVER_PROP_NAME]._prevModifiers = clone(modifiers);
+};
+
+// When the directive options may have been updated (or element)
+const componentUpdated = (el, _ref2, vnode) => {
+  let {
+    value,
+    oldValue,
+    modifiers
+  } = _ref2;
+  // Compare value/oldValue and modifiers to see if anything has changed
+  // and if so, destroy old observer and create new observer
+  /* istanbul ignore next */
+  modifiers = clone(modifiers);
+  /* istanbul ignore next */
+  if (el && (value !== oldValue || !el[OBSERVER_PROP_NAME] || !looseEqual(modifiers, el[OBSERVER_PROP_NAME]._prevModifiers))) {
+    // Re-bind on element
+    bind(el, {
+      value,
+      modifiers
+    });
+  }
+};
+
+// When directive un-binds from element
+const unbind = el => {
+  // Remove the observer
+  destroy(el);
+};
+
+// Export the directive
+const VBVisible = {
+  bind,
+  componentUpdated,
+  unbind
+};
+
+export { VBVisible };