@gitlab/ui 132.0.0 → 132.0.2

package/dist/vendor/bootstrap-vue/src/components/form-select/form-select.js

@@ -0,0 +1,143 @@
+import { extend } from '../../vue';
+import { NAME_FORM_SELECT } from '../../constants/components';
+import { EVENT_NAME_CHANGE } from '../../constants/events';
+import { PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER } from '../../constants/props';
+import { SLOT_NAME_FIRST } from '../../constants/slots';
+import { from } from '../../utils/array';
+import { attemptFocus, attemptBlur } from '../../utils/dom';
+import { htmlOrText } from '../../utils/html';
+import { isArray } from '../../utils/inspect';
+import { sortKeys } from '../../utils/object';
+import { makeProp } from '../../utils/props';
+import { props as props$3, formControlMixin } from '../../mixins/form-control';
+import { props as props$4, formCustomMixin } from '../../mixins/form-custom';
+import { props as props$5, formSizeMixin } from '../../mixins/form-size';
+import { props as props$6, formStateMixin } from '../../mixins/form-state';
+import { props as props$1, idMixin } from '../../mixins/id';
+import { props as props$2, modelMixin, MODEL_PROP_NAME, MODEL_EVENT_NAME } from '../../mixins/model';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+import { optionsMixin } from './helpers/mixin-options';
+import { BFormSelectOption } from './form-select-option';
+import { BFormSelectOptionGroup } from './form-select-option-group';
+
+// --- Props ---
+
+const props = sortKeys({
+  ...props$1,
+  ...props$2,
+  ...props$3,
+  ...props$4,
+  ...props$5,
+  ...props$6,
+  ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+  multiple: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Browsers default size to `0`, which shows 4 rows in most browsers in multiple mode
+  // Size of `1` can bork out Firefox
+  selectSize: makeProp(PROP_TYPE_NUMBER, 0)
+});
+
+// --- Main component ---
+
+// @vue/component
+const BFormSelect = /*#__PURE__*/extend({
+  name: NAME_FORM_SELECT,
+  mixins: [idMixin, modelMixin, formControlMixin, formSizeMixin, formStateMixin, formCustomMixin, optionsMixin, normalizeSlotMixin],
+  props,
+  data() {
+    return {
+      localValue: this[MODEL_PROP_NAME]
+    };
+  },
+  computed: {
+    computedSelectSize() {
+      // Custom selects with a size of zero causes the arrows to be hidden,
+      // so dont render the size attribute in this case
+      return !this.plain && this.selectSize === 0 ? null : this.selectSize;
+    },
+    inputClass() {
+      return [this.plain ? 'form-control' : 'custom-select', this.size && this.plain ? `form-control-${this.size}` : null, this.size && !this.plain ? `custom-select-${this.size}` : null, this.stateClass];
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.localValue = newValue;
+    },
+    localValue() {
+      this.$emit(MODEL_EVENT_NAME, this.localValue);
+    }
+  },
+  methods: {
+    focus() {
+      attemptFocus(this.$refs.input);
+    },
+    blur() {
+      attemptBlur(this.$refs.input);
+    },
+    onChange(event) {
+      const {
+        target
+      } = event;
+      const selectedValue = from(target.options).filter(o => o.selected).map(o => '_value' in o ? o._value : o.value);
+      this.localValue = target.multiple ? selectedValue : selectedValue[0];
+      this.$nextTick(() => {
+        this.$emit(EVENT_NAME_CHANGE, this.localValue);
+      });
+    }
+  },
+  render(h) {
+    const {
+      name,
+      disabled,
+      required,
+      computedSelectSize: size,
+      localValue: value
+    } = this;
+    const $options = this.formOptions.map((option, index) => {
+      const {
+        value,
+        label,
+        options,
+        disabled
+      } = option;
+      const key = `option_${index}`;
+      return isArray(options) ? h(BFormSelectOptionGroup, {
+        props: {
+          label,
+          options
+        },
+        key
+      }) : h(BFormSelectOption, {
+        props: {
+          value,
+          disabled
+        },
+        domProps: htmlOrText(option.html, option.text),
+        key
+      });
+    });
+    return h('select', {
+      class: this.inputClass,
+      attrs: {
+        id: this.safeId(),
+        name,
+        form: this.form || null,
+        multiple: this.multiple || null,
+        size,
+        disabled,
+        required,
+        'aria-required': required ? 'true' : null,
+        'aria-invalid': this.computedAriaInvalid
+      },
+      on: {
+        change: this.onChange
+      },
+      directives: [{
+        name: 'model',
+        value
+      }],
+      ref: 'input'
+    }, [this.normalizeSlot(SLOT_NAME_FIRST), $options, this.normalizeSlot()]);
+  }
+});
+
+export { BFormSelect, props };

package/dist/vendor/bootstrap-vue/src/components/form-select/helpers/mixin-options.js

@@ -0,0 +1,56 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_STRING } from '../../../constants/props';
+import { get } from '../../../utils/get';
+import { isPlainObject, isNull, isUndefined } from '../../../utils/inspect';
+import { sortKeys } from '../../../utils/object';
+import { makeProp } from '../../../utils/props';
+import { props as props$1, formOptionsMixin } from '../../../mixins/form-options';
+
+// --- Props ---
+
+const props = sortKeys({
+  ...props$1,
+  labelField: makeProp(PROP_TYPE_STRING, 'label'),
+  optionsField: makeProp(PROP_TYPE_STRING, 'options')
+});
+
+// --- Mixin ---
+
+// @vue/component
+const optionsMixin = extend({
+  mixins: [formOptionsMixin],
+  props,
+  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);
+        const options = get(option, this.optionsField, null);
+        // When it has options, create an `<optgroup>` object
+        if (!isNull(options)) {
+          return {
+            label: String(get(option, this.labelField) || text),
+            options: this.normalizeOptions(options)
+          };
+        }
+        // Otherwise create an `<option>` object
+        return {
+          value: isUndefined(value) ? key || text : value,
+          text: 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: String(option),
+        disabled: false
+      };
+    }
+  }
+});
+
+export { optionsMixin, props };

package/dist/vendor/bootstrap-vue/src/components/form-select/index.js

@@ -0,0 +1,3 @@
+export { BFormSelect } from './form-select';
+export { BFormSelectOption } from './form-select-option';
+export { BFormSelectOptionGroup } from './form-select-option-group';

package/dist/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.js

@@ -0,0 +1,217 @@
+import { extend } from '../../vue';
+import { NAME_FORM_TEXTAREA } from '../../constants/components';
+import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
+import { requestAF, isVisible, getCS, getStyle, setStyle } from '../../utils/dom';
+import { isNull } from '../../utils/inspect';
+import { mathMax, mathMin, mathCeil } from '../../utils/math';
+import { toInteger, toFloat } from '../../utils/number';
+import { sortKeys } from '../../utils/object';
+import { makeProp } from '../../utils/props';
+import { props as props$2, formControlMixin } from '../../mixins/form-control';
+import { formSelectionMixin } from '../../mixins/form-selection';
+import { props as props$3, formSizeMixin } from '../../mixins/form-size';
+import { props as props$4, formStateMixin } from '../../mixins/form-state';
+import { props as props$5, formTextMixin } from '../../mixins/form-text';
+import { formValidityMixin } from '../../mixins/form-validity';
+import { props as props$1, idMixin } from '../../mixins/id';
+import { listenOnRootMixin } from '../../mixins/listen-on-root';
+import { listenersMixin } from '../../mixins/listeners';
+import { VBVisible } from '../../directives/visible/visible';
+
+// --- Props ---
+
+const props = sortKeys({
+  ...props$1,
+  ...props$2,
+  ...props$3,
+  ...props$4,
+  ...props$5,
+  maxRows: makeProp(PROP_TYPE_NUMBER_STRING),
+  // When in auto resize mode, disable shrinking to content height
+  noAutoShrink: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Disable the resize handle of textarea
+  noResize: makeProp(PROP_TYPE_BOOLEAN, false),
+  rows: makeProp(PROP_TYPE_NUMBER_STRING, 2),
+  // 'soft', 'hard' or 'off'
+  // Browser default is 'soft'
+  wrap: makeProp(PROP_TYPE_STRING, 'soft')
+});
+
+// --- Main component ---
+
+// @vue/component
+const BFormTextarea = /*#__PURE__*/extend({
+  name: NAME_FORM_TEXTAREA,
+  directives: {
+    'b-visible': VBVisible
+  },
+  // Mixin order is important!
+  mixins: [listenersMixin, idMixin, listenOnRootMixin, formControlMixin, formSizeMixin, formStateMixin, formTextMixin, formSelectionMixin, formValidityMixin],
+  props,
+  data() {
+    return {
+      heightInPx: null
+    };
+  },
+  computed: {
+    type() {
+      return null;
+    },
+    computedStyle() {
+      const styles = {
+        // Setting `noResize` to true will disable the ability for the user to
+        // manually resize the textarea. We also disable when in auto height mode
+        resize: !this.computedRows || this.noResize ? 'none' : null
+      };
+      if (!this.computedRows) {
+        // Conditionally set the computed CSS height when auto rows/height is enabled
+        // We avoid setting the style to `null`, which can override user manual resize handle
+        styles.height = this.heightInPx;
+        // We always add a vertical scrollbar to the textarea when auto-height is
+        // enabled so that the computed height calculation returns a stable value
+        styles.overflowY = 'scroll';
+      }
+      return styles;
+    },
+    computedMinRows() {
+      // Ensure rows is at least 2 and positive (2 is the native textarea value)
+      // A value of 1 can cause issues in some browsers, and most browsers
+      // only support 2 as the smallest value
+      return mathMax(toInteger(this.rows, 2), 2);
+    },
+    computedMaxRows() {
+      return mathMax(this.computedMinRows, toInteger(this.maxRows, 0));
+    },
+    computedRows() {
+      // This is used to set the attribute 'rows' on the textarea
+      // If auto-height is enabled, then we return `null` as we use CSS to control height
+      return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null;
+    },
+    computedAttrs() {
+      const {
+        disabled,
+        required
+      } = this;
+      return {
+        id: this.safeId(),
+        name: this.name || null,
+        form: this.form || null,
+        disabled,
+        placeholder: this.placeholder || null,
+        required,
+        autocomplete: this.autocomplete || null,
+        readonly: this.readonly || this.plaintext,
+        rows: this.computedRows,
+        wrap: this.wrap || null,
+        'aria-required': this.required ? 'true' : null,
+        'aria-invalid': this.computedAriaInvalid
+      };
+    },
+    computedListeners() {
+      return {
+        ...this.bvListeners,
+        input: this.onInput,
+        change: this.onChange,
+        blur: this.onBlur
+      };
+    }
+  },
+  watch: {
+    localValue() {
+      this.setHeight();
+    }
+  },
+  mounted() {
+    this.setHeight();
+  },
+  methods: {
+    // Called by intersection observer directive
+    /* istanbul ignore next */
+    visibleCallback(visible) {
+      if (visible) {
+        // We use a `$nextTick()` here just to make sure any
+        // transitions or portalling have completed
+        this.$nextTick(this.setHeight);
+      }
+    },
+    setHeight() {
+      this.$nextTick(() => {
+        requestAF(() => {
+          this.heightInPx = this.computeHeight();
+        });
+      });
+    },
+    /* istanbul ignore next: can't test getComputedStyle in JSDOM */
+    computeHeight() {
+      if (this.$isServer || !isNull(this.computedRows)) {
+        return null;
+      }
+      const el = this.$el;
+
+      // Element must be visible (not hidden) and in document
+      // Must be checked after above checks
+      if (!isVisible(el)) {
+        return null;
+      }
+
+      // Get current computed styles
+      const computedStyle = getCS(el);
+      // Height of one line of text in px
+      const lineHeight = toFloat(computedStyle.lineHeight, 1);
+      // Calculate height of border and padding
+      const border = toFloat(computedStyle.borderTopWidth, 0) + toFloat(computedStyle.borderBottomWidth, 0);
+      const padding = toFloat(computedStyle.paddingTop, 0) + toFloat(computedStyle.paddingBottom, 0);
+      // Calculate offset
+      const offset = border + padding;
+      // Minimum height for min rows (which must be 2 rows or greater for cross-browser support)
+      const minHeight = lineHeight * this.computedMinRows + offset;
+
+      // Get the current style height (with `px` units)
+      const oldHeight = getStyle(el, 'height') || computedStyle.height;
+      // Probe scrollHeight by temporarily changing the height to `auto`
+      setStyle(el, 'height', 'auto');
+      const scrollHeight = el.scrollHeight;
+      // Place the original old height back on the element, just in case `computedProp`
+      // returns the same value as before
+      setStyle(el, 'height', oldHeight);
+
+      // Calculate content height in 'rows' (scrollHeight includes padding but not border)
+      const contentRows = mathMax((scrollHeight - padding) / lineHeight, 2);
+      // Calculate number of rows to display (limited within min/max rows)
+      const rows = mathMin(mathMax(contentRows, this.computedMinRows), this.computedMaxRows);
+      // Calculate the required height of the textarea including border and padding (in pixels)
+      const height = mathMax(mathCeil(rows * lineHeight + offset), minHeight);
+
+      // Computed height remains the larger of `oldHeight` and new `height`,
+      // when height is in `sticky` mode (prop `no-auto-shrink` is true)
+      if (this.noAutoShrink && toFloat(oldHeight, 0) > height) {
+        return oldHeight;
+      }
+
+      // Return the new computed CSS height in px units
+      return `${height}px`;
+    }
+  },
+  render(h) {
+    return h('textarea', {
+      class: this.computedClass,
+      style: this.computedStyle,
+      directives: [{
+        name: 'b-visible',
+        value: this.visibleCallback,
+        // If textarea is within 640px of viewport, consider it visible
+        modifiers: {
+          '640': true
+        }
+      }],
+      attrs: this.computedAttrs,
+      domProps: {
+        value: this.localValue
+      },
+      on: this.computedListeners,
+      ref: 'input'
+    });
+  }
+});
+
+export { BFormTextarea, props };

package/dist/vendor/bootstrap-vue/src/components/form-textarea/index.js

@@ -0,0 +1 @@
+export { BFormTextarea } from './form-textarea';

package/dist/vendor/bootstrap-vue/src/components/layout/col.js

@@ -0,0 +1,155 @@
+import { mergeData } from '../../vue';
+import { NAME_COL } from '../../constants/components';
+import { PROP_TYPE_BOOLEAN_NUMBER_STRING, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
+import { RX_COL_CLASS } from '../../constants/regex';
+import { getBreakpointsUpCached } from '../../utils/config';
+import { identity } from '../../utils/identity';
+import { isUndefinedOrNull } from '../../utils/inspect';
+import { memoize } from '../../utils/memoize';
+import { create, assign, keys, sortKeys } from '../../utils/object';
+import { makeProp, suffixPropName } from '../../utils/props';
+import { lowerCase } from '../../utils/string';
+
+// --- Constants ---
+
+const ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
+
+// --- Helper methods ---
+
+// Compute a breakpoint class name
+const computeBreakpoint = (type, breakpoint, value) => {
+  let className = type;
+  if (isUndefinedOrNull(value) || value === false) {
+    return undefined;
+  }
+  if (breakpoint) {
+    className += `-${breakpoint}`;
+  }
+  // Handling the boolean style prop when accepting `[Boolean, String, Number]`
+  // means Vue will not convert `<b-col sm></b-col>` to `sm: true` for us
+  // Since the default is `false`, '' indicates the prop's presence
+  if (type === 'col' && (value === '' || value === true)) {
+    // .col-md
+    return lowerCase(className);
+  }
+  // .order-md-6
+  className += `-${value}`;
+  return lowerCase(className);
+};
+
+// Memoized function for better performance on generating class names
+const computeBreakpointClass = memoize(computeBreakpoint);
+
+// Cached copy of the breakpoint prop names
+let breakpointPropMap = create(null);
+
+// --- Props ---
+
+// Prop generator for lazy generation of props
+const generateProps = () => {
+  // Grab the breakpoints from the cached config (exclude the '' (xs) breakpoint)
+  const breakpoints = getBreakpointsUpCached().filter(identity);
+
+  // i.e. 'col-sm', 'col-md-6', 'col-lg-auto', ...
+  const breakpointCol = breakpoints.reduce((props, breakpoint) => {
+    props[breakpoint] = makeProp(PROP_TYPE_BOOLEAN_NUMBER_STRING);
+    return props;
+  }, create(null));
+
+  // i.e. 'offset-md-1', 'offset-lg-12', ...
+  const breakpointOffset = breakpoints.reduce((props, breakpoint) => {
+    props[suffixPropName(breakpoint, 'offset')] = makeProp(PROP_TYPE_NUMBER_STRING);
+    return props;
+  }, create(null));
+
+  // i.e. 'order-md-1', 'order-lg-12', ...
+  const breakpointOrder = breakpoints.reduce((props, breakpoint) => {
+    props[suffixPropName(breakpoint, 'order')] = makeProp(PROP_TYPE_NUMBER_STRING);
+    return props;
+  }, create(null));
+
+  // For loop doesn't need to check `.hasOwnProperty()`
+  // when using an object created from `null`
+  breakpointPropMap = assign(create(null), {
+    col: keys(breakpointCol),
+    offset: keys(breakpointOffset),
+    order: keys(breakpointOrder)
+  });
+
+  // Return the generated props
+  return sortKeys({
+    ...breakpointCol,
+    ...breakpointOffset,
+    ...breakpointOrder,
+    // Flex alignment
+    alignSelf: makeProp(PROP_TYPE_STRING, null, value => {
+      return ALIGN_SELF_VALUES.includes(value);
+    }),
+    // Generic flexbox 'col' (xs)
+    col: makeProp(PROP_TYPE_BOOLEAN, false),
+    // i.e. 'col-1', 'col-2', 'col-auto', ...
+    cols: makeProp(PROP_TYPE_NUMBER_STRING),
+    offset: makeProp(PROP_TYPE_NUMBER_STRING),
+    order: makeProp(PROP_TYPE_NUMBER_STRING),
+    tag: makeProp(PROP_TYPE_STRING, 'div')
+  });
+};
+
+// --- Main component ---
+
+// We do not use extend here as that would evaluate the props
+// immediately, which we do not want to happen
+// @vue/component
+const BCol = {
+  name: NAME_COL,
+  functional: true,
+  get props() {
+    // Allow props to be lazy evaled on first access and
+    // then they become a non-getter afterwards.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters
+    delete this.props;
+    // eslint-disable-next-line no-return-assign
+    return this.props = generateProps();
+  },
+  render(h, _ref) {
+    let {
+      props,
+      data,
+      children
+    } = _ref;
+    const {
+      cols,
+      offset,
+      order,
+      alignSelf
+    } = props;
+    const classList = [];
+    // Loop through `col`, `offset`, `order` breakpoint props
+    for (const type in breakpointPropMap) {
+      // Returns colSm, offset, offsetSm, orderMd, etc.
+      const keys = breakpointPropMap[type];
+      for (let i = 0; i < keys.length; i++) {
+        // computeBreakpoint(col, colSm => Sm, value=[String, Number, Boolean])
+        const c = computeBreakpointClass(type, keys[i].replace(type, ''), props[keys[i]]);
+        // If a class is returned, push it onto the array.
+        if (c) {
+          classList.push(c);
+        }
+      }
+    }
+    const hasColClasses = classList.some(className => RX_COL_CLASS.test(className));
+    classList.push({
+      // Default to .col if no other col-{bp}-* classes generated nor `cols` specified.
+      col: props.col || !hasColClasses && !cols,
+      [`col-${cols}`]: cols,
+      [`offset-${offset}`]: offset,
+      [`order-${order}`]: order,
+      [`align-self-${alignSelf}`]: alignSelf
+    });
+    return h(props.tag, mergeData(data, {
+      class: classList
+    }), children);
+  }
+};
+
+export { BCol, generateProps };

package/dist/vendor/bootstrap-vue/src/components/layout/form-row.js

@@ -0,0 +1,34 @@
+import { extend, mergeData } from '../../vue';
+import { NAME_FORM_ROW } from '../../constants/components';
+import { PROP_TYPE_STRING } from '../../constants/props';
+
+// --- Props ---
+
+const props = {
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  }
+};
+
+// --- Main component ---
+
+// @vue/component
+const BFormRow = /*#__PURE__*/extend({
+  name: NAME_FORM_ROW,
+  functional: true,
+  props,
+  render(h, _ref) {
+    let {
+      props,
+      data,
+      children
+    } = _ref;
+    return h(props.tag, mergeData(data, {
+      staticClass: 'form-row'
+    }), children);
+  }
+});
+
+export { BFormRow, props };

package/dist/vendor/bootstrap-vue/src/components/layout/index.js

@@ -0,0 +1,2 @@
+export { BCol } from './col';
+export { BFormRow } from './form-row';

package/dist/vendor/bootstrap-vue/src/components/link/index.js

@@ -0,0 +1 @@
+export { BLink } from './link';