@gitlab/ui 132.0.1 → 132.0.2

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

@@ -0,0 +1,187 @@
+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 { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
+
+// v-b-visible
+// Private visibility check directive
+// Based on IntersectionObserver
+//
+// Usage:
+//  v-b-visibility.<margin>.<once>="<callback>"
+//
+//  Value:
+//  <callback>: method to be called when visibility state changes, receives one arg:
+//     true:  element is visible
+//     false: element is not visible
+//     null:  IntersectionObserver not supported
+//
+//  Modifiers:
+//    <margin>: a positive decimal value of pixels away from viewport edge
+//              before being considered "visible". default is 0
+//    <once>:   keyword 'once', meaning when the element becomes visible and
+//              callback is called observation/notification will stop.
+//
+// When used in a render function:
+// export default {
+//   directives: { 'b-visible': VBVisible },
+//   render(h) {
+//     h(
+//       'div',
+//       {
+//         directives: [
+//           { name: 'b-visible', value=this.callback, modifiers: { '123':true, 'once':true } }
+//         ]
+//       }
+//     )
+//   }
+
+const OBSERVER_PROP_NAME = '__bv__visibility_observer';
+class VisibilityObserver {
+  constructor(el, options, instance) {
+    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;
+    this.instance = instance;
+    // 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 */
+    this.instance.$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, bindings, vnode) => {
+  const {
+    value,
+    modifiers
+  } = bindings;
+  // `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
+  const instance = getInstanceFromDirective(vnode, bindings);
+  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options, instance);
+  // 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, bindings, vnode) => {
+  const {
+    value,
+    oldValue,
+    modifiers
+  } = bindings;
+  // Compare value/oldValue and modifiers to see if anything has changed
+  // and if so, destroy old observer and create new observer
+  /* istanbul ignore next */
+  const clonedModifiers = clone(modifiers);
+  /* istanbul ignore next */
+  if (el && (value !== oldValue || !el[OBSERVER_PROP_NAME] || !looseEqual(clonedModifiers, el[OBSERVER_PROP_NAME]._prevModifiers))) {
+    // Re-bind on element
+    bind(el, bindings, vnode);
+  }
+};
+
+// When directive un-binds from element
+const unbind = el => {
+  // Remove the observer
+  destroy(el);
+};
+
+// Export the directive
+const VBVisible = {
+  bind,
+  componentUpdated,
+  unbind
+};
+
+export { VBVisible };

package/dist/vendor/bootstrap-vue/src/mixins/attrs.js

@@ -0,0 +1,5 @@
+import { makePropCacheMixin } from '../utils/cache';
+
+const attrsMixin = makePropCacheMixin('$attrs', 'bvAttrs');
+
+export { attrsMixin };

package/dist/vendor/bootstrap-vue/src/mixins/click-out.js

@@ -0,0 +1,54 @@
+import { extend } from '../vue';
+import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events';
+import { contains } from '../utils/dom';
+import { eventOff, eventOn } from '../utils/events';
+
+// @vue/component
+const clickOutMixin = extend({
+  data() {
+    return {
+      listenForClickOut: false
+    };
+  },
+  watch: {
+    listenForClickOut(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        eventOff(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, EVENT_OPTIONS_NO_CAPTURE);
+        if (newValue) {
+          eventOn(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, EVENT_OPTIONS_NO_CAPTURE);
+        }
+      }
+    }
+  },
+  beforeCreate() {
+    // Declare non-reactive properties
+    this.clickOutElement = null;
+    this.clickOutEventName = null;
+  },
+  mounted() {
+    if (!this.clickOutElement) {
+      this.clickOutElement = document;
+    }
+    if (!this.clickOutEventName) {
+      this.clickOutEventName = 'click';
+    }
+    if (this.listenForClickOut) {
+      eventOn(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, EVENT_OPTIONS_NO_CAPTURE);
+    }
+  },
+  beforeDestroy() {
+    eventOff(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, EVENT_OPTIONS_NO_CAPTURE);
+  },
+  methods: {
+    isClickOut(event) {
+      return !contains(this.$el, event.target);
+    },
+    _clickOutHandler(event) {
+      if (this.clickOutHandler && this.isClickOut(event)) {
+        this.clickOutHandler(event);
+      }
+    }
+  }
+});
+
+export { clickOutMixin };