@gitlab/ui 84.2.0 → 85.0.1

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

@@ -0,0 +1,217 @@
+// 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

@@ -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'
+    })
+  }
+})