@gitlab/ui 84.2.0 → 85.0.1

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

@@ -0,0 +1,162 @@
+import { extend } from '../vue'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING } from '../constants/props'
+import { SLOT_NAME_FIRST } from '../constants/slots'
+import { htmlOrText } from '../utils/html'
+import { looseEqual } from '../utils/loose-equal'
+import { makeModelMixin } from '../utils/model'
+import { omit, pick, sortKeys } from '../utils/object'
+import { makeProp, makePropsConfigurable } from '../utils/props'
+import { BFormCheckbox } from '../components/form-checkbox/form-checkbox'
+import { BFormRadio } from '../components/form-radio/form-radio'
+import { formControlMixin, props as formControlProps } from './form-control'
+import { formCustomMixin, props as formCustomProps } from './form-custom'
+import { formOptionsMixin, props as formOptionsProps } from './form-options'
+import { formSizeMixin, props as formSizeProps } from './form-size'
+import { formStateMixin, props as formStateProps } from './form-state'
+import { idMixin, props as idProps } from './id'
+import { normalizeSlotMixin } from './normalize-slot'
+
+// --- Constants ---
+
+// Attributes to pass down to checks/radios instead of applying them to the group
+const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby']
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('checked')
+
+export { MODEL_PROP_NAME, MODEL_EVENT_NAME }
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...modelProps,
+    ...formControlProps,
+    ...formOptionsProps,
+    ...formSizeProps,
+    ...formStateProps,
+    ...formCustomProps,
+    ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+    // Only applicable when rendered with button style
+    buttonVariant: makeProp(PROP_TYPE_STRING),
+    // Render as button style
+    buttons: makeProp(PROP_TYPE_BOOLEAN, false),
+    stacked: makeProp(PROP_TYPE_BOOLEAN, false),
+    validated: makeProp(PROP_TYPE_BOOLEAN, false)
+  }),
+  'formRadioCheckGroups'
+)
+
+// --- Mixin ---
+
+// @vue/component
+export const formRadioCheckGroupMixin = extend({
+  mixins: [
+    idMixin,
+    modelMixin,
+    normalizeSlotMixin,
+    formControlMixin,
+    formOptionsMixin,
+    formSizeMixin,
+    formStateMixin,
+    formCustomMixin
+  ],
+  inheritAttrs: false,
+  props,
+  data() {
+    return {
+      localChecked: this[MODEL_PROP_NAME]
+    }
+  },
+  computed: {
+    inline() {
+      return !this.stacked
+    },
+    groupName() {
+      // Checks/Radios tied to the same model must have the same name,
+      // especially for ARIA accessibility
+      return this.name || this.safeId()
+    },
+    groupClasses() {
+      const { inline, size, validated } = this
+
+      let classes = { 'was-validated': validated }
+      if (this.buttons) {
+        classes = [
+          classes,
+          'btn-group-toggle',
+          {
+            'btn-group': inline,
+            'btn-group-vertical': !inline,
+            [`btn-group-${size}`]: size
+          }
+        ]
+      }
+
+      return classes
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue) {
+      if (!looseEqual(newValue, this.localChecked)) {
+        this.localChecked = newValue
+      }
+    },
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit(MODEL_EVENT_NAME, newValue)
+      }
+    }
+  },
+  render(h) {
+    const { isRadioGroup } = this
+    const attrs = pick(this.$attrs, PASS_DOWN_ATTRS)
+    const optionComponent = isRadioGroup ? BFormRadio : BFormCheckbox
+
+    const $inputs = this.formOptions.map((option, index) => {
+      const key = `BV_option_${index}`
+
+      return h(
+        optionComponent,
+        {
+          props: {
+            // Individual radios or checks can be disabled in a group
+            disabled: option.disabled || false,
+            id: this.safeId(key),
+            value: option.value
+            // We don't need to include these, since the input's will know they are inside here
+            // form: this.form || null,
+            // name: this.groupName,
+            // required: Boolean(this.name && this.required),
+            // state: this.state
+          },
+          attrs,
+          key
+        },
+        [h('span', { domProps: htmlOrText(option.html, option.text) })]
+      )
+    })
+
+    return h(
+      'div',
+      {
+        class: [this.groupClasses, 'bv-no-focus-ring'],
+        attrs: {
+          ...omit(this.$attrs, PASS_DOWN_ATTRS),
+          'aria-invalid': this.computedAriaInvalid,
+          'aria-required': this.required ? 'true' : null,
+          id: this.safeId(),
+          role: isRadioGroup ? 'radiogroup' : 'group',
+          // Add `tabindex="-1"` to allow group to be focused if needed by screen readers
+          tabindex: '-1'
+        }
+      },
+      [this.normalizeSlot(SLOT_NAME_FIRST), $inputs, this.normalizeSlot()]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -0,0 +1,332 @@
+import { extend } from '../vue'
+import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props'
+import { EVENT_NAME_CHANGE } from '../constants/events'
+import { attemptBlur, attemptFocus } from '../utils/dom'
+import { isBoolean } from '../utils/inspect'
+import { looseEqual } from '../utils/loose-equal'
+import { makeModelMixin } from '../utils/model'
+import { sortKeys } from '../utils/object'
+import { makeProp, makePropsConfigurable } from '../utils/props'
+import { attrsMixin } from './attrs'
+import { formControlMixin, props as formControlProps } from './form-control'
+import { formCustomMixin, props as formCustomProps } from './form-custom'
+import { formSizeMixin, props as formSizeProps } from './form-size'
+import { formStateMixin, props as formStateProps } from './form-state'
+import { idMixin, props as idProps } from './id'
+import { normalizeSlotMixin } from './normalize-slot'
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('checked', { defaultValue: null })
+
+export { MODEL_PROP_NAME, MODEL_EVENT_NAME }
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...modelProps,
+    ...formControlProps,
+    ...formSizeProps,
+    ...formStateProps,
+    ...formCustomProps,
+    ariaLabel: makeProp(PROP_TYPE_STRING),
+    ariaLabelledby: makeProp(PROP_TYPE_STRING),
+    // Only applicable in standalone mode (non group)
+    button: makeProp(PROP_TYPE_BOOLEAN, false),
+    // Only applicable when rendered with button style
+    buttonVariant: makeProp(PROP_TYPE_STRING),
+    inline: makeProp(PROP_TYPE_BOOLEAN, false),
+    value: makeProp(PROP_TYPE_ANY)
+  }),
+  'formRadioCheckControls'
+)
+
+// --- Mixin ---
+
+// @vue/component
+export const formRadioCheckMixin = extend({
+  mixins: [
+    attrsMixin,
+    idMixin,
+    modelMixin,
+    normalizeSlotMixin,
+    formControlMixin,
+    formSizeMixin,
+    formStateMixin,
+    formCustomMixin
+  ],
+  inheritAttrs: false,
+  props,
+  data() {
+    return {
+      localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME],
+      hasFocus: false
+    }
+  },
+  computed: {
+    computedLocalChecked: {
+      get() {
+        return this.isGroup ? this.bvGroup.localChecked : this.localChecked
+      },
+      set(value) {
+        if (this.isGroup) {
+          this.bvGroup.localChecked = value
+        } else {
+          this.localChecked = value
+        }
+      }
+    },
+    isChecked() {
+      return looseEqual(this.value, this.computedLocalChecked)
+    },
+    isRadio() {
+      return true
+    },
+    isGroup() {
+      // Is this check/radio a child of check-group or radio-group?
+      return !!this.bvGroup
+    },
+    isBtnMode() {
+      // Support button style in single input mode
+      return this.isGroup ? this.bvGroup.buttons : this.button
+    },
+    isPlain() {
+      return this.isBtnMode ? false : this.isGroup ? this.bvGroup.plain : this.plain
+    },
+    isCustom() {
+      return this.isBtnMode ? false : !this.isPlain
+    },
+    isSwitch() {
+      // Custom switch styling (checkboxes only)
+      return this.isBtnMode || this.isRadio || this.isPlain
+        ? false
+        : this.isGroup
+          ? this.bvGroup.switches
+          : this.switch
+    },
+    isInline() {
+      return this.isGroup ? this.bvGroup.inline : this.inline
+    },
+    isDisabled() {
+      // Child can be disabled while parent isn't, but is always disabled if group is
+      return this.isGroup ? this.bvGroup.disabled || this.disabled : this.disabled
+    },
+    isRequired() {
+      // Required only works when a name is provided for the input(s)
+      // Child can only be required when parent is
+      // Groups will always have a name (either user supplied or auto generated)
+      return this.computedName && (this.isGroup ? this.bvGroup.required : this.required)
+    },
+    computedName() {
+      // Group name preferred over local name
+      return (this.isGroup ? this.bvGroup.groupName : this.name) || null
+    },
+    computedForm() {
+      return (this.isGroup ? this.bvGroup.form : this.form) || null
+    },
+    computedSize() {
+      return (this.isGroup ? this.bvGroup.size : this.size) || ''
+    },
+    computedState() {
+      return this.isGroup ? this.bvGroup.computedState : isBoolean(this.state) ? this.state : null
+    },
+    computedButtonVariant() {
+      // Local variant preferred over group variant
+      const { buttonVariant } = this
+      if (buttonVariant) {
+        return buttonVariant
+      }
+      if (this.isGroup && this.bvGroup.buttonVariant) {
+        return this.bvGroup.buttonVariant
+      }
+      return 'secondary'
+    },
+    buttonClasses() {
+      const { computedSize } = this
+      return [
+        'btn',
+        `btn-${this.computedButtonVariant}`,
+        {
+          [`btn-${computedSize}`]: computedSize,
+          // 'disabled' class makes "button" look disabled
+          disabled: this.isDisabled,
+          // 'active' class makes "button" look pressed
+          active: this.isChecked,
+          // Focus class makes button look focused
+          focus: this.hasFocus
+        }
+      ]
+    },
+    computedAttrs() {
+      const { isDisabled: disabled, isRequired: required } = this
+
+      return {
+        ...this.bvAttrs,
+        id: this.safeId(),
+        type: this.isRadio ? 'radio' : 'checkbox',
+        name: this.computedName,
+        form: this.computedForm,
+        disabled,
+        required,
+        'aria-required': required || null,
+        'aria-label': this.ariaLabel || null,
+        'aria-labelledby': this.ariaLabelledby || null
+      }
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](...args) {
+      this[`${MODEL_PROP_NAME}Watcher`](...args)
+    },
+    computedLocalChecked(...args) {
+      this.computedLocalCheckedWatcher(...args)
+    }
+  },
+  methods: {
+    [`${MODEL_PROP_NAME}Watcher`](newValue) {
+      if (!looseEqual(newValue, this.computedLocalChecked)) {
+        this.computedLocalChecked = newValue
+      }
+    },
+    computedLocalCheckedWatcher(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit(MODEL_EVENT_NAME, newValue)
+      }
+    },
+
+    handleChange({ target: { checked } }) {
+      const { value } = this
+      const localChecked = checked ? value : null
+
+      this.computedLocalChecked = value
+
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        // Change is only emitted on user interaction
+        this.$emit(EVENT_NAME_CHANGE, localChecked)
+
+        // If this is a child of a group, we emit a change event on it as well
+        if (this.isGroup) {
+          this.bvGroup.$emit(EVENT_NAME_CHANGE, localChecked)
+        }
+      })
+    },
+    handleFocus(event) {
+      // When in buttons mode, we need to add 'focus' class to label when input focused
+      // As it is the hidden input which has actual focus
+      if (event.target) {
+        if (event.type === 'focus') {
+          this.hasFocus = true
+        } else if (event.type === 'blur') {
+          this.hasFocus = false
+        }
+      }
+    },
+
+    // Convenience methods for focusing the input
+    focus() {
+      if (!this.isDisabled) {
+        attemptFocus(this.$refs.input)
+      }
+    },
+    blur() {
+      if (!this.isDisabled) {
+        attemptBlur(this.$refs.input)
+      }
+    }
+  },
+  render(h) {
+    const {
+      isRadio,
+      isBtnMode,
+      isPlain,
+      isCustom,
+      isInline,
+      isSwitch,
+      computedSize,
+      bvAttrs
+    } = this
+    const $content = this.normalizeSlot()
+
+    const $input = h('input', {
+      class: [
+        {
+          'form-check-input': isPlain,
+          'custom-control-input': isCustom,
+          // https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
+          'position-static': isPlain && !$content
+        },
+        isBtnMode ? '' : this.stateClass
+      ],
+      directives: [{ name: 'model', value: this.computedLocalChecked }],
+      attrs: this.computedAttrs,
+      domProps: {
+        value: this.value,
+        checked: this.isChecked
+      },
+      on: {
+        change: this.handleChange,
+        ...(isBtnMode ? { focus: this.handleFocus, blur: this.handleFocus } : {})
+      },
+      key: 'input',
+      ref: 'input'
+    })
+
+    if (isBtnMode) {
+      let $button = h('label', { class: this.buttonClasses }, [$input, $content])
+      if (!this.isGroup) {
+        // Standalone button mode, so wrap in 'btn-group-toggle'
+        // and flag it as inline-block to mimic regular buttons
+        $button = h('div', { class: ['btn-group-toggle', 'd-inline-block'] }, [$button])
+      }
+
+      return $button
+    }
+
+    // If no label content in plain mode we dont render the label
+    // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
+    let $label = h()
+    if (!(isPlain && !$content)) {
+      $label = h(
+        'label',
+        {
+          class: {
+            'form-check-label': isPlain,
+            'custom-control-label': isCustom
+          },
+          attrs: { for: this.safeId() }
+        },
+        $content
+      )
+    }
+
+    return h(
+      'div',
+      {
+        class: [
+          {
+            'form-check': isPlain,
+            'form-check-inline': isPlain && isInline,
+            'custom-control': isCustom,
+            'custom-control-inline': isCustom && isInline,
+            'custom-checkbox': isCustom && !isRadio && !isSwitch,
+            'custom-switch': isSwitch,
+            'custom-radio': isCustom && isRadio,
+            // Temporary until Bootstrap v4 supports sizing (most likely in V5)
+            [`b-custom-control-${computedSize}`]: computedSize && !isBtnMode
+          },
+          bvAttrs.class
+        ],
+        style: bvAttrs.style
+      },
+      [$input, $label]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/mixins/form-selection.js

@@ -0,0 +1,60 @@
+import { extend } from '../vue'
+
+// @vue/component
+export const formSelectionMixin = extend({
+  computed: {
+    selectionStart: {
+      // Expose selectionStart for formatters, etc
+      cache: false,
+      /* istanbul ignore next */
+      get() {
+        return this.$refs.input.selectionStart
+      },
+      /* istanbul ignore next */
+      set(val) {
+        this.$refs.input.selectionStart = val
+      }
+    },
+    selectionEnd: {
+      // Expose selectionEnd for formatters, etc
+      cache: false,
+      /* istanbul ignore next */
+      get() {
+        return this.$refs.input.selectionEnd
+      },
+      /* istanbul ignore next */
+      set(val) {
+        this.$refs.input.selectionEnd = val
+      }
+    },
+    selectionDirection: {
+      // Expose selectionDirection for formatters, etc
+      cache: false,
+      /* istanbul ignore next */
+      get() {
+        return this.$refs.input.selectionDirection
+      },
+      /* istanbul ignore next */
+      set(val) {
+        this.$refs.input.selectionDirection = val
+      }
+    }
+  },
+  methods: {
+    /* istanbul ignore next */
+    select() {
+      // For external handler that may want a select() method
+      this.$refs.input.select(...arguments)
+    },
+    /* istanbul ignore next */
+    setSelectionRange() {
+      // For external handler that may want a setSelectionRange(a,b,c) method
+      this.$refs.input.setSelectionRange(...arguments)
+    },
+    /* istanbul ignore next */
+    setRangeText() {
+      // For external handler that may want a setRangeText(a,b,c) method
+      this.$refs.input.setRangeText(...arguments)
+    }
+  }
+})

package/src/vendor/bootstrap-vue/src/mixins/form-size.js

@@ -0,0 +1,24 @@
+import { extend } from '../vue'
+import { PROP_TYPE_STRING } from '../constants/props'
+import { makeProp, makePropsConfigurable } from '../utils/props'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    size: makeProp(PROP_TYPE_STRING)
+  },
+  'formControls'
+)
+
+// --- Mixin ---
+
+// @vue/component
+export const formSizeMixin = extend({
+  props,
+  computed: {
+    sizeFormClass() {
+      return [this.size ? `form-control-${this.size}` : null]
+    }
+  }
+})

package/src/vendor/bootstrap-vue/src/mixins/form-state.js

@@ -0,0 +1,47 @@
+/* Form control contextual state class computation
+ *
+ * Returned class is either 'is-valid' or 'is-invalid' based on the 'state' prop
+ * state can be one of five values:
+ *  - true for is-valid
+ *  - false for is-invalid
+ *  - null for no contextual state
+ */
+import { extend } from '../vue'
+import { PROP_TYPE_BOOLEAN } from '../constants/props'
+import { isBoolean } from '../utils/inspect'
+import { makeProp, makePropsConfigurable } from '../utils/props'
+import { safeVueInstance } from '../utils/safe-vue-instance'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    // Tri-state prop: true, false, null (or undefined)
+    state: makeProp(PROP_TYPE_BOOLEAN, null)
+  },
+  'formState'
+)
+
+// --- Mixin ---
+
+// @vue/component
+export const formStateMixin = extend({
+  props,
+  computed: {
+    computedState() {
+      // If not a boolean, ensure that value is null
+      return isBoolean(this.state) ? this.state : null
+    },
+    stateClass() {
+      const state = this.computedState
+      return state === true ? 'is-valid' : state === false ? 'is-invalid' : null
+    },
+    computedAriaInvalid() {
+      const ariaInvalid = safeVueInstance(this).ariaInvalid
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true'
+      }
+      return this.computedState === false ? 'true' : ariaInvalid
+    }
+  }
+})