@gitlab/duo-ui 3.0.0 → 4.0.0

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

@@ -1,217 +0,0 @@
-// Temporary fix for cssnano bug: https://github.com/cssnano/cssnano/issues/712
-// By moving center to last value in `background-position` property
-// See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2599
-@if $enable-validation-icons {
-  .form-control {
-    .was-validated &:invalid,
-    .was-validated &:valid,
-    &.is-invalid,
-    &.is-valid {
-      background-position: right $input-height-inner-quarter center;
-    }
-  }
-}
-
-// Bootstrap v4.x does not have special styling for color input
-// So we define some basic styles to compensate
-input[type="color"].form-control {
-  height: $input-height;
-  // We use the smaller padding to make the color block larger
-  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
-}
-
-input[type="color"].form-control.form-control-sm,
-.input-group-sm input[type="color"].form-control {
-  height: $input-height-sm;
-  // We use the smaller padding to make the color block larger
-  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
-}
-
-input[type="color"].form-control.form-control-lg,
-.input-group-lg input[type="color"].form-control {
-  height: $input-height-lg;
-  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
-}
-
-input[type="color"].form-control:disabled {
-  // Disabled styling needs to be a bit different than regular inputs
-  background-color: $gray-500;
-  opacity: $btn-disabled-opacity;
-}
-
-// --- Base `.input-group > .custom-range` styling (no PR yet on Bootstrap v4) ---
-.input-group {
-  > .custom-range {
-    position: relative;
-    flex: 1 1 auto;
-    width: 1%;
-    margin-bottom: 0;
-
-    + .form-control,
-    + .form-control-plaintext,
-    + .custom-select,
-    + .custom-range,
-    + .custom-file {
-      margin-left: -$input-border-width;
-    }
-  }
-
-  > .form-control,
-  > .form-control-plaintext,
-  > .custom-select,
-  > .custom-range,
-  > .custom-file {
-    + .custom-range {
-      margin-left: -$input-border-width;
-    }
-  }
-
-  > .custom-range:focus {
-    z-index: 3;
-  }
-
-  > .custom-range {
-    &:not(:last-child) {
-      @include border-right-radius(0);
-    }
-    &:not(:first-child) {
-      @include border-left-radius(0);
-    }
-  }
-
-  > .custom-range {
-    height: $input-height;
-    padding: 0 $input-padding-x;
-    background-color: $input-bg;
-    background-clip: padding-box;
-    border: $input-border-width solid $input-border-color;
-    height: $input-height;
-
-    @if $enable-rounded {
-      border-radius: $input-border-radius;
-    } @else {
-      border-radius: 0;
-    }
-
-    @include box-shadow($input-box-shadow);
-    @include transition($input-transition);
-    // Bootstrap v4.3.2 has deprecated this mixin
-    // @include form-control-focus();
-    // So we manually add its content here
-    &:focus {
-      color: $input-focus-color; // only needed for fallback to text input
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      outline: 0;
-      @if $enable-shadows {
-        box-shadow: $input-box-shadow, $input-focus-box-shadow;
-      } @else {
-        box-shadow: $input-focus-box-shadow;
-      }
-    }
-
-    &:disabled,
-    &[readonly] {
-      background-color: $input-disabled-bg;
-    }
-  }
-}
-
-.input-group-lg > .custom-range {
-  height: $input-height-lg;
-  padding: 0 $input-padding-x-lg;
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .custom-range {
-  height: $input-height-sm;
-  padding: 0 $input-padding-x-sm;
-  @include border-radius($input-border-radius-sm);
-}
-
-// --- <b-form-input>: custom-range validation styling - valid (no PR yet for Bootstrap v4.2) ---
-// Mixin for generating `.input-group .custom-range` validation styling
-@mixin bv-custom-range-validation-state($state, $color) {
-  .input-group .custom-range {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      border-color: $color;
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
-      }
-    }
-  }
-
-  .custom-range {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      // Pseudo-elements must be split across multiple rulesets to have an affect
-      &:focus {
-        &::-webkit-slider-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
-        }
-        &::-moz-range-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
-        }
-        &::-ms-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: lighten($color, 35%);
-          background-image: none;
-        }
-      }
-
-      &::-webkit-slider-runnable-track {
-        background-color: rgba($color, 0.35);
-      }
-
-      &::-moz-range-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: lighten($color, 35%);
-          background-image: none;
-        }
-      }
-
-      &::-moz-range-track {
-        background: rgba($color, 0.35);
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-
-      &::-ms-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: lighten($color, 35%);
-          background-image: none;
-        }
-      }
-
-      &::-ms-track-lower {
-        background: rgba($color, 0.35);
-      }
-      &::-ms-track-upper {
-        background: rgba($color, 0.35);
-      }
-    }
-  }
-}
-
-@include bv-custom-range-validation-state("valid", $form-feedback-valid-color);
-@include bv-custom-range-validation-state("invalid", $form-feedback-invalid-color);

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

@@ -1,168 +0,0 @@
-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'
-    })
-  }
-})