@gitlab/ui 72.12.0 → 72.12.1

package/dist/config.js

@@ -0,0 +1,86 @@
+import { BVConfigPlugin } from 'bootstrap-vue/esm/index.js';
+import Vue from 'vue';
+import translationKeys from '../translations.json';
+import { tooltipDelay } from './utils/constants';
+
+const bFormTextGlobalConfig = {
+  textVariant: 'gl-muted'
+};
+const tooltipGlobalConfig = {
+  // Work around for https://github.com/bootstrap-vue/bootstrap-vue/issues/6507
+  boundaryPadding: 5,
+  customClass: 'gl-tooltip',
+  delay: tooltipDelay
+};
+const popoverDelayConfig = {
+  show: 50,
+  // BootstrapVue's default delay on show.
+  hide: 150 // Increased hide delay so that it doesn't disappear to quickly when user attempts to interact with the content.
+};
+
+/**
+ * Guard against nonexistent localStorage,
+ * or corrupted localStorage
+ *
+ * localStorage access is not possible in certain environments like
+ * - in iframe usage in Chrome if embedded on another domain
+ * - tests / node
+ */
+try {
+  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+  if (glTooltipDelay) {
+    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  }
+} catch (e) {
+  // localStorage doesn't exist (or the value is not properly formatted)
+}
+const i18n = translationKeys;
+let configured = false;
+
+/**
+ * Set GitLab UI configuration.
+ *
+ * @typedef {object} GitLabUIConfiguration
+ * @template TValue=string
+ * @property {undefined | Object} translations Generic translations for component labels to fall back to.
+ * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ */
+const setConfigs = function () {
+  let {
+    translations
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (configured) {
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error('GitLab UI can only be configured once!');
+    }
+    return;
+  }
+  configured = true;
+  Vue.use(BVConfigPlugin, {
+    BFormText: bFormTextGlobalConfig,
+    BTooltip: tooltipGlobalConfig,
+    BPopover: {
+      delay: popoverDelayConfig
+    }
+  });
+  if (typeof translations === 'object') {
+    if (process.env.NODE_ENV === 'development') {
+      const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
+        if (!(current in translations)) {
+          acc.push(current);
+        }
+        return acc;
+      }, []);
+      if (undefinedTranslationKeys.length) {
+        /* eslint-disable no-console */
+        console.warn('[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:');
+        console.table(undefinedTranslationKeys);
+        /* eslint-enable no-console */
+      }
+    }
+    Object.assign(i18n, translations);
+  }
+};
+
+export default setConfigs;
+export { i18n };

package/dist/directives/collapse_toggle.js

@@ -0,0 +1 @@
+export { VBToggle as GlCollapseToggleDirective } from 'bootstrap-vue/esm/index.js';

package/dist/directives/hover_load/hover_load.js

@@ -0,0 +1,45 @@
+import isFunction from 'lodash/isFunction';
+
+const DELAY_ON_HOVER = 100;
+let mouseOverTimer;
+let mouseOverHandler;
+const bind = (el, _ref) => {
+  let {
+    value: loadHandler
+  } = _ref;
+  if (!isFunction(loadHandler)) {
+    throw TypeError('Directive value must be a function');
+  }
+  const mouseOutHandler = () => {
+    if (mouseOverTimer) {
+      clearTimeout(mouseOverTimer);
+      mouseOverTimer = undefined;
+    }
+  };
+  mouseOverHandler = () => {
+    el.addEventListener('mouseout', mouseOutHandler, {
+      passive: true
+    });
+    mouseOverTimer = setTimeout(() => {
+      loadHandler(el);
+
+      // Only execute once
+      el.removeEventListener('mouseover', mouseOverHandler, true);
+      el.removeEventListener('mouseout', mouseOutHandler);
+      mouseOverTimer = undefined;
+    }, DELAY_ON_HOVER);
+  };
+  el.addEventListener('mouseover', mouseOverHandler, {
+    capture: true,
+    passive: true
+  });
+};
+const unbind = el => {
+  el.removeEventListener('mouseover', mouseOverHandler, true);
+};
+const HoverLoadDirective = {
+  bind,
+  unbind
+};
+
+export { DELAY_ON_HOVER, HoverLoadDirective };

package/dist/directives/modal.js

@@ -0,0 +1 @@
+export { VBModal as GlModalDirective } from 'bootstrap-vue/esm/index.js';

package/dist/directives/outside/get_event_like_time_stamp.js

@@ -0,0 +1,33 @@
+/**
+ * This file is based on Vue's scheduler code:
+ * https://github.com/vuejs/vue/blob/v2.6.12/src/core/observer/scheduler.js#L44-L66
+ *
+ * See the LICENSE file in this directory.
+ */
+
+const {
+  performance
+} = window;
+
+/**
+ * Get a current timestamp that can be meaningfully compared to an event's
+ * `timeStamp` property.
+ *
+ * Event timestamps can be a DOMHighResTimeStamp (if supported), otherwise
+ * a DOMTimeStamp (used by jsdom and older browsers).
+ *
+ * This function will return a current timestamp of the same type used by the
+ * underlying environment when it creates DOM events.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp for
+ * more details.
+ *
+ * @returns {number}
+ */
+const getEventLikeTimeStamp =
+// If the event timestamp, although evaluated AFTER the Date.now(), is
+// smaller, it means the event is using a hi-res timestamp, and we need to
+// use the hi-res version for event listener timestamps as well.
+typeof (performance === null || performance === void 0 ? void 0 : performance.now) === 'function' && Date.now() > document.createEvent('Event').timeStamp ? () => performance.now() : () => Date.now();
+
+export { getEventLikeTimeStamp };

package/dist/directives/outside/outside.js

@@ -0,0 +1,106 @@
+import { getEventLikeTimeStamp } from './get_event_like_time_stamp';
+
+/**
+ * Map<HTMLElement, { bindTimeStamp: number, callback: Function }>
+ */
+const callbacks = new Map();
+
+/**
+ * Is a global listener already set up?
+ */
+let listening = false;
+let lastMousedown = null;
+const globalListener = event => {
+  callbacks.forEach((_ref, element) => {
+    let {
+      bindTimeStamp,
+      callback
+    } = _ref;
+    const originalEvent = lastMousedown || event;
+    if (
+    // Ignore events that aren't targeted outside the element
+    element.contains(originalEvent.target) ||
+    // Only consider events triggered after the directive was bound
+    event.timeStamp <= bindTimeStamp) {
+      return;
+    }
+    try {
+      callback(event);
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }
+  });
+  lastMousedown = null;
+};
+
+// We need to listen for mouse events because text selection fires click event only when selection ends.
+// This means that the click event target could differ from the element where it originally started.
+// As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
+const onMousedown = event => {
+  lastMousedown = event;
+};
+const startListening = () => {
+  if (listening) {
+    return;
+  }
+  document.addEventListener('mousedown', onMousedown);
+  document.addEventListener('click', globalListener, {
+    capture: true
+  });
+  listening = true;
+  lastMousedown = null;
+};
+const stopListening = () => {
+  if (!listening) {
+    return;
+  }
+  document.removeEventListener('mousedown', onMousedown);
+  document.removeEventListener('click', globalListener);
+  listening = false;
+};
+const bind = (el, _ref2) => {
+  let {
+    value,
+    arg = 'click'
+  } = _ref2;
+  if (typeof value !== 'function') {
+    throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
+  }
+  if (arg !== 'click') {
+    throw new Error(`[GlOutsideDirective] Cannot bind ${arg} events; only click events are currently supported!`);
+  }
+  if (callbacks.has(el)) {
+    // This element is already bound. This is possible if two components, which
+    // share the same root node, (i.e., one is a higher-order component
+    // wrapping another) _both_ have this directive applied.
+    //
+    // Because Vue binds directives in the direction towards the root, only the
+    // deepest instance of this directive will be bound.
+    //
+    // A future iteration may add support for binding all instances on a given
+    // element.
+    return;
+  }
+  if (!listening) {
+    startListening();
+  }
+  callbacks.set(el, {
+    bindTimeStamp: getEventLikeTimeStamp(),
+    callback: value
+  });
+};
+const unbind = el => {
+  callbacks.delete(el);
+  if (callbacks.size === 0) {
+    stopListening();
+  }
+};
+const OutsideDirective = {
+  bind,
+  unbind
+};
+
+export { OutsideDirective };

package/dist/directives/resize_observer/resize_observer.js

@@ -0,0 +1,51 @@
+import isFunction from 'lodash/isFunction';
+
+let observer = null;
+const attachObserver = (el, resizeHandler) => {
+  if (!isFunction(resizeHandler)) {
+    throw TypeError('directive value must be a function');
+  }
+  if (!observer) {
+    // the observer instance is shared for performance reasons
+    // more information: https://github.com/WICG/ResizeObserver/issues/59
+    observer = new ResizeObserver(entries => {
+      entries.forEach(event => {
+        event.target.glResizeHandler(event);
+      });
+    });
+  }
+  el.glResizeHandler = resizeHandler;
+  observer.observe(el);
+};
+const detachObserver = el => {
+  if (el.glResizeHandler) {
+    var _observer;
+    delete el.glResizeHandler;
+    (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(el);
+  }
+};
+const GlResizeObserverDirective = {
+  bind(el, _ref) {
+    let {
+      value: resizeHandler,
+      arg: enabled = true
+    } = _ref;
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    }
+  },
+  update(el, _ref2) {
+    let {
+      value: resizeHandler,
+      arg: enabled = true
+    } = _ref2;
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    } else {
+      detachObserver(el);
+    }
+  },
+  unbind: detachObserver
+};
+
+export { GlResizeObserverDirective };

package/dist/directives/safe_html/constants.js

@@ -0,0 +1,6 @@
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421#note_617098438
+// for more details
+const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method', 'data-disable-with', 'data-disabled', 'data-disable', 'data-turbo'];
+const forbiddenTags = ['style', 'mstyle', 'form'];
+
+export { forbiddenDataAttrs, forbiddenTags };

package/dist/directives/safe_html/safe_html.js

@@ -0,0 +1,39 @@
+import DOMPurify from 'dompurify';
+import { forbiddenDataAttrs, forbiddenTags } from './constants';
+
+const {
+  sanitize
+} = DOMPurify;
+
+// Mitigate against future dompurify mXSS bypasses by
+// avoiding additional serialize/parse round trip.
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782
+// and https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2127
+// for more details.
+const DEFAULT_CONFIG = {
+  RETURN_DOM_FRAGMENT: true,
+  ALLOW_UNKNOWN_PROTOCOLS: true,
+  FORBID_ATTR: forbiddenDataAttrs,
+  FORBID_TAGS: forbiddenTags
+};
+const transform = (el, binding) => {
+  if (binding.oldValue !== binding.value) {
+    var _binding$arg;
+    const config = {
+      ...DEFAULT_CONFIG,
+      ...((_binding$arg = binding.arg) !== null && _binding$arg !== void 0 ? _binding$arg : {})
+    };
+    el.textContent = '';
+    el.appendChild(sanitize(binding.value, config));
+  }
+};
+const clear = el => {
+  el.textContent = '';
+};
+const SafeHtmlDirective = {
+  bind: transform,
+  update: transform,
+  unbind: clear
+};
+
+export { SafeHtmlDirective };

package/dist/directives/safe_link/mock_data.js

@@ -0,0 +1,10 @@
+const absoluteUrls = ['http://example.org', 'http://example.org:8080', 'https://example.org', 'https://example.org:8080', 'https://192.168.1.1', 'ftp://192.168.1.1', 'mailto:someone@example.com'];
+
+/* eslint-disable no-script-url */
+const javascriptUrls = ['javascript:', 'javascript:alert("XSS")', 'jav\tascript:alert("XSS");'];
+/* eslint-disable no-script-url */
+
+const encodedJavaScriptUrls = ['&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041', 'javascript:alert('XSS')', '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29', '   javascript:alert("XSS");'];
+const relativeUrls = ['./relative/link', '../relative/link', '/relative/link', '/users/sign_in', '#docs/link', '#'];
+
+export { absoluteUrls, encodedJavaScriptUrls, javascriptUrls, relativeUrls };

package/dist/directives/safe_link/safe_link.js

@@ -0,0 +1,65 @@
+import Vue from 'vue';
+
+const getBaseURL = () => {
+  const {
+    protocol,
+    host
+  } = window.location;
+  return `${protocol}//${host}`;
+};
+const isExternalURL = (target, hostname) => {
+  return target === '_blank' && hostname !== window.location.hostname;
+};
+const secureRel = rel => {
+  const rels = rel ? rel.trim().split(' ') : [];
+  if (!rels.includes('noopener')) {
+    rels.push('noopener');
+  }
+  if (!rels.includes('noreferrer')) {
+    rels.push('noreferrer');
+  }
+  return rels.join(' ');
+};
+const isSafeURL = url => {
+  try {
+    const parsedURL = new URL(url, getBaseURL());
+    return ['http:', 'https:', 'mailto:', 'ftp:'].includes(parsedURL.protocol);
+  } catch (e) {
+    return false;
+  }
+};
+const transform = function (el) {
+  let {
+    arg: {
+      skipSanitization = false
+    } = {}
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (skipSanitization) {
+    return;
+  }
+  const {
+    href,
+    target,
+    rel,
+    hostname
+  } = el;
+  if (!isSafeURL(href)) {
+    el.href = 'about:blank';
+  }
+  if (isExternalURL(target, hostname)) {
+    el.rel = secureRel(rel);
+  }
+};
+const SafeLinkDirective = {
+  inserted: transform,
+  update: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    Vue.nextTick(() => {
+      transform(...args);
+    });
+  }
+};
+
+export { SafeLinkDirective };

package/dist/directives/tooltip.js

@@ -0,0 +1 @@
+export { VBTooltip as GlTooltipDirective } from 'bootstrap-vue/esm/index.js';