@gitlab/ui 84.2.0 → 85.0.0

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

@@ -0,0 +1,457 @@
+import Popper from 'popper.js';
+import { extend } from '../vue';
+import { NAME_DROPDOWN } from '../constants/components';
+import { HAS_TOUCH_SUPPORT } from '../constants/env';
+import { EVENT_NAME_SHOWN, EVENT_NAME_HIDDEN, EVENT_NAME_TOGGLE, EVENT_NAME_CLICK, EVENT_NAME_SHOW, EVENT_NAME_HIDE } from '../constants/events';
+import { CODE_ENTER, CODE_SPACE, CODE_DOWN, CODE_ESC, CODE_UP } from '../constants/key-codes';
+import { PLACEMENT_TOP_END, PLACEMENT_TOP_START, PLACEMENT_BOTTOM_START, PLACEMENT_RIGHT_START, PLACEMENT_LEFT_START, PLACEMENT_BOTTOM_END } from '../constants/popper';
+import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_OBJECT } from '../constants/props';
+import { HTMLElement } from '../constants/safe-types';
+import { BvEvent } from '../utils/bv-event.class';
+import { requestAF, contains, closest, attemptFocus, selectAll, isVisible } from '../utils/dom';
+import { getRootEventName, stopEvent } from '../utils/events';
+import { isNull } from '../utils/inspect';
+import { sortKeys, mergeDeep } from '../utils/object';
+import { makePropsConfigurable, makeProp } from '../utils/props';
+import { warn } from '../utils/warn';
+import { clickOutMixin } from './click-out';
+import { focusInMixin } from './focus-in';
+import { props as props$1, idMixin } from './id';
+import { listenOnRootMixin } from './listen-on-root';
+import { registerElementToInstance, removeElementToInstance } from '../utils/element-to-vue-instance-registry';
+
+// --- Constants ---
+
+const ROOT_EVENT_NAME_SHOWN = getRootEventName(NAME_DROPDOWN, EVENT_NAME_SHOWN);
+const ROOT_EVENT_NAME_HIDDEN = getRootEventName(NAME_DROPDOWN, EVENT_NAME_HIDDEN);
+
+// CSS selectors
+const SELECTOR_FORM_CHILD = '.dropdown form';
+const SELECTOR_ITEM = ['.dropdown-item', '.b-dropdown-form'].map(selector => `${selector}:not(.disabled):not([disabled])`).join(', ');
+
+// --- Helper methods ---
+
+// Return an array of visible items
+const filterVisibles = els => (els || []).filter(isVisible);
+
+// --- Props ---
+
+const props = makePropsConfigurable(sortKeys({
+  ...props$1,
+  // String: `scrollParent`, `window` or `viewport`
+  // HTMLElement: HTML Element reference
+  boundary: makeProp([HTMLElement, PROP_TYPE_STRING], 'scrollParent'),
+  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Place left if possible
+  dropleft: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Place right if possible
+  dropright: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Place on top if possible
+  dropup: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Disable auto-flipping of menu from bottom <=> top
+  noFlip: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Number of pixels or a CSS unit value to offset menu
+  // (i.e. `1px`, `1rem`, etc.)
+  offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
+  popperOpts: makeProp(PROP_TYPE_OBJECT, {}),
+  // Right align menu (default is left align)
+  right: makeProp(PROP_TYPE_BOOLEAN, false)
+}), NAME_DROPDOWN);
+
+// --- Mixin ---
+
+// @vue/component
+const dropdownMixin = extend({
+  mixins: [idMixin, listenOnRootMixin, clickOutMixin, focusInMixin],
+  provide() {
+    return {
+      getBvDropdown: () => this
+    };
+  },
+  inject: {
+    getBvNavbar: {
+      default: () => () => null
+    }
+  },
+  props,
+  data() {
+    return {
+      visible: false,
+      visibleChangePrevented: false
+    };
+  },
+  computed: {
+    bvNavbar() {
+      return this.getBvNavbar();
+    },
+    inNavbar() {
+      return !isNull(this.bvNavbar);
+    },
+    toggler() {
+      const {
+        toggle
+      } = this.$refs;
+      return toggle ? toggle.$el || toggle : null;
+    },
+    directionClass() {
+      if (this.dropup) {
+        return 'dropup';
+      } else if (this.dropright) {
+        return 'dropright';
+      } else if (this.dropleft) {
+        return 'dropleft';
+      }
+      return '';
+    },
+    boundaryClass() {
+      // Position `static` is needed to allow menu to "breakout" of the `scrollParent`
+      // boundaries when boundary is anything other than `scrollParent`
+      // See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
+      return this.boundary !== 'scrollParent' && !this.inNavbar ? 'position-static' : '';
+    },
+    hideDelay() {
+      return this.inNavbar ? HAS_TOUCH_SUPPORT ? 300 : 50 : 0;
+    }
+  },
+  watch: {
+    visible(newValue, oldValue) {
+      if (this.visibleChangePrevented) {
+        this.visibleChangePrevented = false;
+        return;
+      }
+      if (newValue !== oldValue) {
+        const eventName = newValue ? EVENT_NAME_SHOW : EVENT_NAME_HIDE;
+        const bvEvent = new BvEvent(eventName, {
+          cancelable: true,
+          vueTarget: this,
+          target: this.$refs.menu,
+          relatedTarget: null,
+          componentId: this.safeId ? this.safeId() : this.id || null
+        });
+        this.emitEvent(bvEvent);
+        if (bvEvent.defaultPrevented) {
+          // Reset value and exit if canceled
+          this.visibleChangePrevented = true;
+          this.visible = oldValue;
+          // Just in case a child element triggered `this.hide(true)`
+          this.$off(EVENT_NAME_HIDDEN, this.focusToggler);
+          return;
+        }
+        if (newValue) {
+          this.showMenu();
+        } else {
+          this.hideMenu();
+        }
+      }
+    },
+    disabled(newValue, oldValue) {
+      if (newValue !== oldValue && newValue && this.visible) {
+        // Hide dropdown if disabled changes to true
+        this.visible = false;
+      }
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_popper = null;
+    this.$_hideTimeout = null;
+  },
+  /* istanbul ignore next */
+  deactivated() {
+    // In case we are inside a `<keep-alive>`
+    this.visible = false;
+    this.whileOpenListen(false);
+    this.destroyPopper();
+  },
+  mounted() {
+    registerElementToInstance(this.$el, this);
+  },
+  beforeDestroy() {
+    this.visible = false;
+    this.whileOpenListen(false);
+    this.destroyPopper();
+    this.clearHideTimeout();
+    removeElementToInstance(this.$el);
+  },
+  methods: {
+    // Event emitter
+    emitEvent(bvEvent) {
+      const {
+        type
+      } = bvEvent;
+      this.emitOnRoot(getRootEventName(NAME_DROPDOWN, type), bvEvent);
+      this.$emit(type, bvEvent);
+    },
+    showMenu() {
+      if (this.disabled) {
+        /* istanbul ignore next */
+        return;
+      }
+
+      // Only instantiate Popper.js when dropdown is not in `<b-navbar>`
+      if (!this.inNavbar) {
+        if (typeof Popper === 'undefined') {
+          /* istanbul ignore next */
+          warn('Popper.js not found. Falling back to CSS positioning', NAME_DROPDOWN);
+        } else {
+          // For dropup with alignment we use the parent element as popper container
+          let el = this.dropup && this.right || this.split ? this.$el : this.$refs.toggle;
+          // Make sure we have a reference to an element, not a component!
+          el = el.$el || el;
+          // Instantiate Popper.js
+          this.createPopper(el);
+        }
+      }
+
+      // Ensure other menus are closed
+      this.emitOnRoot(ROOT_EVENT_NAME_SHOWN, this);
+
+      // Enable listeners
+      this.whileOpenListen(true);
+
+      // Wrap in `$nextTick()` to ensure menu is fully rendered/shown
+      this.$nextTick(() => {
+        // Focus on the menu container on show
+        this.focusMenu();
+        // Emit the shown event
+        this.$emit(EVENT_NAME_SHOWN);
+      });
+    },
+    hideMenu() {
+      this.whileOpenListen(false);
+      this.emitOnRoot(ROOT_EVENT_NAME_HIDDEN, this);
+      this.$emit(EVENT_NAME_HIDDEN);
+      this.destroyPopper();
+    },
+    createPopper(element) {
+      this.destroyPopper();
+      this.$_popper = new Popper(element, this.$refs.menu, this.getPopperConfig());
+    },
+    // Ensure popper event listeners are removed cleanly
+    destroyPopper() {
+      this.$_popper && this.$_popper.destroy();
+      this.$_popper = null;
+    },
+    // Instructs popper to re-computes the dropdown position
+    // useful if the content changes size
+    updatePopper() {
+      try {
+        this.$_popper.scheduleUpdate();
+      } catch {}
+    },
+    clearHideTimeout() {
+      clearTimeout(this.$_hideTimeout);
+      this.$_hideTimeout = null;
+    },
+    getPopperConfig() {
+      let placement = PLACEMENT_BOTTOM_START;
+      if (this.dropup) {
+        placement = this.right ? PLACEMENT_TOP_END : PLACEMENT_TOP_START;
+      } else if (this.dropright) {
+        placement = PLACEMENT_RIGHT_START;
+      } else if (this.dropleft) {
+        placement = PLACEMENT_LEFT_START;
+      } else if (this.right) {
+        placement = PLACEMENT_BOTTOM_END;
+      }
+      const popperConfig = {
+        placement,
+        modifiers: {
+          offset: {
+            offset: this.offset || 0
+          },
+          flip: {
+            enabled: !this.noFlip
+          }
+        }
+      };
+      const boundariesElement = this.boundary;
+      if (boundariesElement) {
+        popperConfig.modifiers.preventOverflow = {
+          boundariesElement
+        };
+      }
+      return mergeDeep(popperConfig, this.popperOpts || {});
+    },
+    // Turn listeners on/off while open
+    whileOpenListen(isOpen) {
+      // Hide the dropdown when clicked outside
+      this.listenForClickOut = isOpen;
+      // Hide the dropdown when it loses focus
+      this.listenForFocusIn = isOpen;
+      // Hide the dropdown when another dropdown is opened
+      const method = isOpen ? 'listenOnRoot' : 'listenOffRoot';
+      this[method](ROOT_EVENT_NAME_SHOWN, this.rootCloseListener);
+    },
+    rootCloseListener(vm) {
+      if (vm !== this) {
+        this.visible = false;
+      }
+    },
+    // Public method to show dropdown
+    show() {
+      if (this.disabled) {
+        return;
+      }
+      // Wrap in a `requestAF()` to allow any previous
+      // click handling to occur first
+      requestAF(() => {
+        this.visible = true;
+      });
+    },
+    // Public method to hide dropdown
+    hide() {
+      let refocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      /* istanbul ignore next */
+      if (this.disabled) {
+        return;
+      }
+      this.visible = false;
+      if (refocus) {
+        // Child element is closing the dropdown on click
+        this.$once(EVENT_NAME_HIDDEN, this.focusToggler);
+      }
+    },
+    // Called only by a button that toggles the menu
+    toggle(event) {
+      event = event || {};
+      // Early exit when not a click event or ENTER, SPACE or DOWN were pressed
+      const {
+        type,
+        keyCode
+      } = event;
+      if (type !== 'click' && !(type === 'keydown' && [CODE_ENTER, CODE_SPACE, CODE_DOWN].indexOf(keyCode) !== -1)) {
+        /* istanbul ignore next */
+        return;
+      }
+      /* istanbul ignore next */
+      if (this.disabled) {
+        this.visible = false;
+        return;
+      }
+      this.$emit(EVENT_NAME_TOGGLE, event);
+      stopEvent(event);
+      // Toggle visibility
+      if (this.visible) {
+        this.hide(true);
+      } else {
+        this.show();
+      }
+    },
+    // Mousedown handler for the toggle
+    /* istanbul ignore next */
+    onMousedown(event) {
+      // We prevent the 'mousedown' event for the toggle to stop the
+      // 'focusin' event from being fired
+      // The event would otherwise be picked up by the global 'focusin'
+      // listener and there is no cross-browser solution to detect it
+      // relates to the toggle click
+      // The 'click' event will still be fired and we handle closing
+      // other dropdowns there too
+      // See https://github.com/bootstrap-vue/bootstrap-vue/issues/4328
+      stopEvent(event, {
+        propagation: false
+      });
+    },
+    // Called from dropdown menu context
+    onKeydown(event) {
+      const {
+        keyCode
+      } = event;
+      if (keyCode === CODE_ESC) {
+        // Close on ESC
+        this.onEsc(event);
+      } else if (keyCode === CODE_DOWN) {
+        // Down Arrow
+        this.focusNext(event, false);
+      } else if (keyCode === CODE_UP) {
+        // Up Arrow
+        this.focusNext(event, true);
+      }
+    },
+    // If user presses ESC, close the menu
+    onEsc(event) {
+      if (this.visible) {
+        this.visible = false;
+        stopEvent(event);
+        // Return focus to original trigger button
+        this.$once(EVENT_NAME_HIDDEN, this.focusToggler);
+      }
+    },
+    // Called only in split button mode, for the split button
+    onSplitClick(event) {
+      /* istanbul ignore next */
+      if (this.disabled) {
+        this.visible = false;
+        return;
+      }
+      this.$emit(EVENT_NAME_CLICK, event);
+    },
+    // Shared hide handler between click-out and focus-in events
+    hideHandler(event) {
+      const {
+        target
+      } = event;
+      if (this.visible && !contains(this.$refs.menu, target) && !contains(this.toggler, target)) {
+        this.clearHideTimeout();
+        this.$_hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
+      }
+    },
+    // Document click-out listener
+    clickOutHandler(event) {
+      this.hideHandler(event);
+    },
+    // Document focus-in listener
+    focusInHandler(event) {
+      this.hideHandler(event);
+    },
+    // Keyboard nav
+    focusNext(event, up) {
+      // Ignore key up/down on form elements
+      const {
+        target
+      } = event;
+      if (!this.visible || event && closest(SELECTOR_FORM_CHILD, target)) {
+        /* istanbul ignore next: should never happen */
+        return;
+      }
+      stopEvent(event);
+      this.$nextTick(() => {
+        const items = this.getItems();
+        if (items.length < 1) {
+          /* istanbul ignore next: should never happen */
+          return;
+        }
+        let index = items.indexOf(target);
+        if (up && index > 0) {
+          index--;
+        } else if (!up && index < items.length - 1) {
+          index++;
+        }
+        if (index < 0) {
+          /* istanbul ignore next: should never happen */
+          index = 0;
+        }
+        this.focusItem(index, items);
+      });
+    },
+    focusItem(index, items) {
+      const el = items.find((el, i) => i === index);
+      attemptFocus(el);
+    },
+    getItems() {
+      // Get all items
+      return filterVisibles(selectAll(SELECTOR_ITEM, this.$refs.menu));
+    },
+    focusMenu() {
+      attemptFocus(this.$refs.menu);
+    },
+    focusToggler() {
+      this.$nextTick(() => {
+        attemptFocus(this.toggler);
+      });
+    }
+  }
+});
+
+export { dropdownMixin, props };

package/dist/vendor/bootstrap-vue/src/mixins/focus-in.js

@@ -0,0 +1,46 @@
+import { extend } from '../vue';
+import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events';
+import { eventOff, eventOn } from '../utils/events';
+
+// @vue/component
+const focusInMixin = extend({
+  data() {
+    return {
+      listenForFocusIn: false
+    };
+  },
+  watch: {
+    listenForFocusIn(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        eventOff(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE);
+        if (newValue) {
+          eventOn(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE);
+        }
+      }
+    }
+  },
+  beforeCreate() {
+    // Declare non-reactive properties
+    this.focusInElement = null;
+  },
+  mounted() {
+    if (!this.focusInElement) {
+      this.focusInElement = document;
+    }
+    if (this.listenForFocusIn) {
+      eventOn(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE);
+    }
+  },
+  beforeDestroy() {
+    eventOff(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE);
+  },
+  methods: {
+    _focusInHandler(event) {
+      if (this.focusInHandler) {
+        this.focusInHandler(event);
+      }
+    }
+  }
+});
+
+export { focusInMixin };

package/dist/vendor/bootstrap-vue/src/mixins/form-control.js

@@ -0,0 +1,50 @@
+import { extend } from '../vue';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props';
+import { requestAF, isVisible, matches, select, attemptFocus } from '../utils/dom';
+import { makePropsConfigurable, makeProp } from '../utils/props';
+
+// --- Constants ---
+
+const SELECTOR = 'input, textarea, select';
+
+// --- Props ---
+
+const props = makePropsConfigurable({
+  autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
+  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+  form: makeProp(PROP_TYPE_STRING),
+  id: makeProp(PROP_TYPE_STRING),
+  name: makeProp(PROP_TYPE_STRING),
+  required: makeProp(PROP_TYPE_BOOLEAN, false)
+}, 'formControls');
+
+// --- Mixin ---
+
+// @vue/component
+const formControlMixin = extend({
+  props,
+  mounted() {
+    this.handleAutofocus();
+  },
+  /* istanbul ignore next */
+  activated() {
+    this.handleAutofocus();
+  },
+  methods: {
+    handleAutofocus() {
+      this.$nextTick(() => {
+        requestAF(() => {
+          let el = this.$el;
+          if (this.autofocus && isVisible(el)) {
+            if (!matches(el, SELECTOR)) {
+              el = select(SELECTOR, el);
+            }
+            attemptFocus(el);
+          }
+        });
+      });
+    }
+  }
+});
+
+export { formControlMixin, props };

package/dist/vendor/bootstrap-vue/src/mixins/form-custom.js

@@ -0,0 +1,23 @@
+import { extend } from '../vue';
+import { PROP_TYPE_BOOLEAN } from '../constants/props';
+import { makePropsConfigurable, makeProp } from '../utils/props';
+
+// --- Props ---
+
+const props = makePropsConfigurable({
+  plain: makeProp(PROP_TYPE_BOOLEAN, false)
+}, 'formControls');
+
+// --- Mixin ---
+
+// @vue/component
+const formCustomMixin = extend({
+  props,
+  computed: {
+    custom() {
+      return !this.plain;
+    }
+  }
+});
+
+export { formCustomMixin, props };

package/dist/vendor/bootstrap-vue/src/mixins/form-options.js

@@ -0,0 +1,72 @@
+import { extend } from '../vue';
+import { PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT } from '../constants/props';
+import { get } from '../utils/get';
+import { stripTags } from '../utils/html';
+import { isPlainObject, isUndefined, isArray } from '../utils/inspect';
+import { keys } from '../utils/object';
+import { makePropsConfigurable, makeProp } from '../utils/props';
+import { warn } from '../utils/warn';
+
+// --- Constants ---
+
+const OPTIONS_OBJECT_DEPRECATED_MSG = 'Setting prop "options" to an object is deprecated. Use the array format instead.';
+
+// --- Props ---
+
+const props = makePropsConfigurable({
+  disabledField: makeProp(PROP_TYPE_STRING, 'disabled'),
+  htmlField: makeProp(PROP_TYPE_STRING, 'html'),
+  options: makeProp(PROP_TYPE_ARRAY_OBJECT, []),
+  textField: makeProp(PROP_TYPE_STRING, 'text'),
+  valueField: makeProp(PROP_TYPE_STRING, 'value')
+}, 'formOptionControls');
+
+// --- Mixin ---
+
+// @vue/component
+const formOptionsMixin = extend({
+  props,
+  computed: {
+    formOptions() {
+      return this.normalizeOptions(this.options);
+    }
+  },
+  methods: {
+    normalizeOption(option) {
+      let key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      // When the option is an object, normalize it
+      if (isPlainObject(option)) {
+        const value = get(option, this.valueField);
+        const text = get(option, this.textField);
+        return {
+          value: isUndefined(value) ? key || text : value,
+          text: stripTags(String(isUndefined(text) ? key : text)),
+          html: get(option, this.htmlField),
+          disabled: Boolean(get(option, this.disabledField))
+        };
+      }
+      // Otherwise create an `<option>` object from the given value
+      return {
+        value: key || option,
+        text: stripTags(String(option)),
+        disabled: false
+      };
+    },
+    normalizeOptions(options) {
+      // Normalize the given options array
+      if (isArray(options)) {
+        return options.map(option => this.normalizeOption(option));
+      } else if (isPlainObject(options)) {
+        // Deprecate the object options format
+        warn(OPTIONS_OBJECT_DEPRECATED_MSG, this.$options.name);
+        // Normalize a `options` object to an array of options
+        return keys(options).map(key => this.normalizeOption(options[key] || {}, key));
+      }
+      // If not an array or object, return an empty array
+      /* istanbul ignore next */
+      return [];
+    }
+  }
+});
+
+export { formOptionsMixin, props };