@gitlab/duo-ui 0.1.0

package/src/vendor/bootstrap-vue/src/components/form-input/form-input.js

@@ -0,0 +1,168 @@
+import { extend } from '../../vue'
+import { NAME_FORM_INPUT } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props'
+import { arrayIncludes } from '../../utils/array'
+import { attemptBlur } from '../../utils/dom'
+import { eventOn, eventOff, eventOnOff, stopEvent } from '../../utils/events'
+import { sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
+import { formSelectionMixin } from '../../mixins/form-selection'
+import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
+import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
+import { formTextMixin, props as formTextProps } from '../../mixins/form-text'
+import { formValidityMixin } from '../../mixins/form-validity'
+import { idMixin, props as idProps } from '../../mixins/id'
+import { listenersMixin } from '../../mixins/listeners'
+
+// --- Constants ---
+
+// Valid supported input types
+const TYPES = [
+  'text',
+  'password',
+  'email',
+  'number',
+  'url',
+  'tel',
+  'search',
+  'range',
+  'color',
+  'date',
+  'time',
+  'datetime',
+  'datetime-local',
+  'month',
+  'week'
+]
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...formControlProps,
+    ...formSizeProps,
+    ...formStateProps,
+    ...formTextProps,
+    list: makeProp(PROP_TYPE_STRING),
+    max: makeProp(PROP_TYPE_NUMBER_STRING),
+    min: makeProp(PROP_TYPE_NUMBER_STRING),
+    // Disable mousewheel to prevent wheel from changing values (i.e. number/date)
+    noWheel: makeProp(PROP_TYPE_BOOLEAN, false),
+    step: makeProp(PROP_TYPE_NUMBER_STRING),
+    type: makeProp(PROP_TYPE_STRING, 'text', type => {
+      return arrayIncludes(TYPES, type)
+    })
+  }),
+  NAME_FORM_INPUT
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormInput = /*#__PURE__*/ extend({
+  name: NAME_FORM_INPUT,
+  // Mixin order is important!
+  mixins: [
+    listenersMixin,
+    idMixin,
+    formControlMixin,
+    formSizeMixin,
+    formStateMixin,
+    formTextMixin,
+    formSelectionMixin,
+    formValidityMixin
+  ],
+  props,
+  computed: {
+    localType() {
+      // We only allow certain types
+      const { type } = this
+      return arrayIncludes(TYPES, type) ? type : 'text'
+    },
+    computedAttrs() {
+      const { localType: type, name, form, disabled, placeholder, required, min, max, step } = this
+
+      return {
+        id: this.safeId(),
+        name,
+        form,
+        type,
+        disabled,
+        placeholder,
+        required,
+        autocomplete: this.autocomplete || null,
+        readonly: this.readonly || this.plaintext,
+        min,
+        max,
+        step,
+        list: type !== 'password' ? this.list : null,
+        'aria-required': required ? 'true' : null,
+        'aria-invalid': this.computedAriaInvalid
+      }
+    },
+    computedListeners() {
+      return {
+        ...this.bvListeners,
+        input: this.onInput,
+        change: this.onChange,
+        blur: this.onBlur
+      }
+    }
+  },
+  watch: {
+    noWheel(newValue) {
+      this.setWheelStopper(newValue)
+    }
+  },
+  mounted() {
+    this.setWheelStopper(this.noWheel)
+  },
+  /* istanbul ignore next */
+  deactivated() {
+    // Turn off listeners when keep-alive component deactivated
+    /* istanbul ignore next */
+    this.setWheelStopper(false)
+  },
+  /* istanbul ignore next */
+  activated() {
+    // Turn on listeners (if no-wheel) when keep-alive component activated
+    /* istanbul ignore next */
+    this.setWheelStopper(this.noWheel)
+  },
+  beforeDestroy() {
+    /* istanbul ignore next */
+    this.setWheelStopper(false)
+  },
+  methods: {
+    setWheelStopper(on) {
+      const input = this.$el
+      // We use native events, so that we don't interfere with propagation
+      eventOnOff(on, input, 'focus', this.onWheelFocus)
+      eventOnOff(on, input, 'blur', this.onWheelBlur)
+      if (!on) {
+        eventOff(document, 'wheel', this.stopWheel)
+      }
+    },
+    onWheelFocus() {
+      eventOn(document, 'wheel', this.stopWheel)
+    },
+    onWheelBlur() {
+      eventOff(document, 'wheel', this.stopWheel)
+    },
+    stopWheel(event) {
+      stopEvent(event, { propagation: false })
+      attemptBlur(this.$el)
+    }
+  },
+  render(h) {
+    return h('input', {
+      class: this.computedClass,
+      attrs: this.computedAttrs,
+      domProps: { value: this.localValue },
+      on: this.computedListeners,
+      ref: 'input'
+    })
+  }
+})

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

@@ -0,0 +1,3 @@
+import { BFormInput } from './form-input'
+
+export { BFormInput }

package/src/vendor/bootstrap-vue/src/components/form-input/index.scss

@@ -0,0 +1 @@
+@import "form-input";

package/src/vendor/bootstrap-vue/src/components/form-radio/_form-radio-group.scss

@@ -0,0 +1,3 @@
+@import "../../utilities";
+// Needed when radio-groups are inside an input group
+@import "../input-group/index";

package/src/vendor/bootstrap-vue/src/components/form-radio/_form-radio.scss

@@ -0,0 +1,47 @@
+// Adds control sizing to Bootstrap custom radio inputs
+
+.custom-radio.b-custom-control-lg,
+.input-group-lg .custom-radio {
+  font-size: $font-size-lg;
+  line-height: $line-height-lg;
+  padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg;
+
+  .custom-control-label::before {
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
+    left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
+    width: $b-custom-control-indicator-size-lg;
+    height: $b-custom-control-indicator-size-lg;
+    border-radius: $b-custom-radio-indicator-border-radius-lg;
+  }
+
+  .custom-control-label::after {
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
+    left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
+    width: $b-custom-control-indicator-size-lg;
+    height: $b-custom-control-indicator-size-lg;
+    background: no-repeat 50% / #{$b-custom-control-indicator-bg-size-lg};
+  }
+}
+
+.custom-radio.b-custom-control-sm,
+.input-group-sm .custom-radio {
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm;
+
+  .custom-control-label::before {
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
+    left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
+    width: $b-custom-control-indicator-size-sm;
+    height: $b-custom-control-indicator-size-sm;
+    border-radius: $b-custom-radio-indicator-border-radius-sm;
+  }
+
+  .custom-control-label::after {
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
+    left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
+    width: $b-custom-control-indicator-size-sm;
+    height: $b-custom-control-indicator-size-sm;
+    background: no-repeat 50% / #{$b-custom-control-indicator-bg-size-sm};
+  }
+}

package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.js

@@ -0,0 +1,30 @@
+import { extend } from '../../vue'
+import { NAME_FORM_RADIO_GROUP } from '../../constants/components'
+import { makePropsConfigurable } from '../../utils/props'
+import {
+  formRadioCheckGroupMixin,
+  props as formRadioCheckGroupProps
+} from '../../mixins/form-radio-check-group'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(formRadioCheckGroupProps, NAME_FORM_RADIO_GROUP)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormRadioGroup = /*#__PURE__*/ extend({
+  name: NAME_FORM_RADIO_GROUP,
+  mixins: [formRadioCheckGroupMixin],
+  provide() {
+    return {
+      getBvRadioGroup: () => this
+    }
+  },
+  props,
+  computed: {
+    isRadioGroup() {
+      return true
+    }
+  }
+})

package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.js

@@ -0,0 +1,28 @@
+import { extend } from '../../vue'
+import { NAME_FORM_RADIO } from '../../constants/components'
+import { makePropsConfigurable } from '../../utils/props'
+import { formRadioCheckMixin, props as formRadioCheckProps } from '../../mixins/form-radio-check'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(formRadioCheckProps, NAME_FORM_RADIO)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormRadio = /*#__PURE__*/ extend({
+  name: NAME_FORM_RADIO,
+  mixins: [formRadioCheckMixin],
+  inject: {
+    getBvGroup: {
+      from: 'getBvRadioGroup',
+      default: () => () => null
+    }
+  },
+  props,
+  computed: {
+    bvGroup() {
+      return this.getBvGroup()
+    }
+  }
+})

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

@@ -0,0 +1,4 @@
+import { BFormRadio } from './form-radio'
+import { BFormRadioGroup } from './form-radio-group'
+
+export { BFormRadio, BFormRadioGroup }

package/src/vendor/bootstrap-vue/src/components/form-radio/index.scss

@@ -0,0 +1,2 @@
+@import "form-radio";
+@import "form-radio-group";

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

@@ -0,0 +1,48 @@
+import { extend } from '../../vue'
+import { NAME_FORM_SELECT_OPTION_GROUP } from '../../constants/components'
+import { PROP_TYPE_STRING } from '../../constants/props'
+import { SLOT_NAME_FIRST } from '../../constants/slots'
+import { htmlOrText } from '../../utils/html'
+import { sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { formOptionsMixin, props as formOptionsProps } from '../../mixins/form-options'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { BFormSelectOption } from './form-select-option'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...formOptionsProps,
+    label: makeProp(PROP_TYPE_STRING, undefined, true) // Required
+  }),
+  NAME_FORM_SELECT_OPTION_GROUP
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormSelectOptionGroup = /*#__PURE__*/ extend({
+  name: NAME_FORM_SELECT_OPTION_GROUP,
+  mixins: [normalizeSlotMixin, formOptionsMixin],
+  props,
+  render(h) {
+    const { label } = this
+
+    const $options = this.formOptions.map((option, index) => {
+      const { value, text, html, disabled } = option
+
+      return h(BFormSelectOption, {
+        attrs: { value, disabled },
+        domProps: htmlOrText(html, text),
+        key: `option_${index}`
+      })
+    })
+
+    return h('optgroup', { attrs: { label } }, [
+      this.normalizeSlot(SLOT_NAME_FIRST),
+      $options,
+      this.normalizeSlot()
+    ])
+  }
+})

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

@@ -0,0 +1,35 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_FORM_SELECT_OPTION } from '../../constants/components'
+import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN } from '../../constants/props'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+    value: makeProp(PROP_TYPE_ANY, undefined, true) // Required
+  },
+  NAME_FORM_SELECT_OPTION
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormSelectOption = /*#__PURE__*/ extend({
+  name: NAME_FORM_SELECT_OPTION,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    const { value, disabled } = props
+
+    return h(
+      'option',
+      mergeData(data, {
+        attrs: { disabled },
+        domProps: { value }
+      }),
+      children
+    )
+  }
+})

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

@@ -0,0 +1,153 @@
+import { extend } from '../../vue'
+import { NAME_FORM_SELECT } from '../../constants/components'
+import { EVENT_NAME_CHANGE } from '../../constants/events'
+import {
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_BOOLEAN_STRING,
+  PROP_TYPE_NUMBER
+} from '../../constants/props'
+import { SLOT_NAME_FIRST } from '../../constants/slots'
+import { from as arrayFrom } from '../../utils/array'
+import { attemptBlur, attemptFocus } from '../../utils/dom'
+import { htmlOrText } from '../../utils/html'
+import { isArray } from '../../utils/inspect'
+import { sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
+import { formCustomMixin, props as formCustomProps } from '../../mixins/form-custom'
+import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
+import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
+import { idMixin, props as idProps } from '../../mixins/id'
+import {
+  MODEL_EVENT_NAME,
+  MODEL_PROP_NAME,
+  modelMixin,
+  props as modelProps
+} 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 ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...modelProps,
+    ...formControlProps,
+    ...formCustomProps,
+    ...formSizeProps,
+    ...formStateProps,
+    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)
+  }),
+  NAME_FORM_SELECT
+)
+
+// --- Main component ---
+
+// @vue/component
+export 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 = arrayFrom(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()]
+    )
+  }
+})

package/src/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 { isNull, isPlainObject, isUndefined } from '../../../utils/inspect'
+import { sortKeys } from '../../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../../utils/props'
+import { formOptionsMixin, props as formOptionsProps } from '../../../mixins/form-options'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...formOptionsProps,
+    labelField: makeProp(PROP_TYPE_STRING, 'label'),
+    optionsField: makeProp(PROP_TYPE_STRING, 'options')
+  }),
+  'formOptions'
+)
+
+// --- Mixin ---
+
+// @vue/component
+export const optionsMixin = extend({
+  mixins: [formOptionsMixin],
+  props,
+  methods: {
+    normalizeOption(option, key = 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
+      }
+    }
+  }
+})

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

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