@gitlab/ui 84.1.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/components/form/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@bootstrap-vue/form",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Form",
+    "description": "Form component and form helper components that optionally supports inline form styles and validation states.",
+    "slug": "form",
+    "components": [
+      {
+        "component": "BForm",
+        "props": [
+          {
+            "prop": "inline",
+            "description": "When set, the form will be in inline mode which display labels, form controls, and buttons on a single horizontal row"
+          },
+          {
+            "prop": "novalidate",
+            "description": "When set, disables browser native HTML5 validation on controls in the form"
+          },
+          {
+            "prop": "validated",
+            "description": "When set, adds the Bootstrap class 'was-validated' on the form, triggering the native browser validation states"
+          }
+        ],
+        "events": [
+          {
+            "event": "submit",
+            "description": "Emitted when the form is being submitted",
+            "args": [
+              {
+                "arg": "event",
+                "type": "Event",
+                "description": "Native submit event"
+              }
+            ]
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the form"
+          }
+        ]
+      },
+      {
+        "component": "BFormText",
+        "props": [
+          {
+            "prop": "inline",
+            "description": "When set, renders the help text as an inline element, rather than a block element"
+          },
+          {
+            "prop": "textVariant",
+            "description": "Applies one of the Bootstrap theme color variants to the text"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the form text"
+          }
+        ]
+      },
+      {
+        "component": "BFormInvalidFeedback",
+        "props": [
+          {
+            "prop": "forceShow",
+            "description": "Shows the feedback text, regardless of the value of the 'state' prop"
+          },
+          {
+            "prop": "state",
+            "description": "When explicitly 'false', forces the feedback to show"
+          },
+          {
+            "prop": "tooltip",
+            "description": "Renders the feedback text in a rudimentary tooltip style"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the form invalid feedback"
+          }
+        ]
+      },
+      {
+        "component": "BFormValidFeedback",
+        "props": [
+          {
+            "prop": "forceShow",
+            "description": "Shows the feedback text, regardless of the value of the 'state' prop"
+          },
+          {
+            "prop": "state",
+            "description": "When explicitly 'true', forces the feedback to show"
+          },
+          {
+            "prop": "tooltip",
+            "description": "Renders the feedback text in a rudimentary tooltip style"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the form valid feedback element"
+          }
+        ]
+      },
+      {
+        "component": "BFormDatalist",
+        "aliases": [
+          "BDatalist"
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the from datalist"
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/vendor/bootstrap-vue/src/components/form-btn-label-control/_form-btn-label-control.scss

@@ -0,0 +1,125 @@
+$bv-form-btn-label-control-defined: false !default;
+
+// Make sure to include these style definitions only once
+@if $bv-form-btn-label-control-defined == false {
+  $bv-form-btn-label-control-defined: true;
+
+  // Custom BVFormBtnLabelControl styling
+  // Currently used by BFormTimepicker and BFormDatepicker
+  // Does not apply to button-only styling
+  .b-form-btn-label-control.form-control {
+    display: flex;
+    align-items: stretch;
+    height: auto;
+    padding: 0;
+    // Remove background validation images and padding from
+    // main wrapper as they will be present in the inner label element
+    background-image: none;
+
+    @at-root {
+      // Handle `.input-group` padding overrides
+      .input-group & {
+        padding: 0;
+      }
+    }
+
+    @at-root {
+      // Prevent the button/label from reversing order on in horizontal RTL mode
+      [dir="rtl"] &,
+      &[dir="rtl"] {
+        flex-direction: row-reverse;
+
+        > label {
+          text-align: right;
+        }
+      }
+    }
+
+    > .btn {
+      line-height: 1;
+      font-size: inherit;
+      box-shadow: none !important;
+      border: 0;
+
+      &:disabled {
+        pointer-events: none;
+      }
+    }
+
+    &.is-valid > .btn {
+      color: $form-feedback-valid-color;
+    }
+
+    &.is-invalid > .btn {
+      color: $form-feedback-invalid-color;
+    }
+
+    > .dropdown-menu {
+      padding: 0.5rem;
+    }
+
+    > .form-control {
+      height: auto;
+      // Set a minimum height, as we have height set to `auto`
+      // (to allow the content to wrap, if needed)
+      // We subtract off the border, as we have border set to `0`
+      min-height: calc(#{$input-height} - #{$input-height-border});
+      padding-left: 0.25rem;
+      margin: 0;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      word-break: break-word;
+      font-size: inherit;
+      white-space: normal;
+      @if $enable-pointer-cursor-for-buttons {
+        cursor: pointer;
+      }
+
+      &.form-control-sm {
+        min-height: calc(#{$input-height-sm} - #{$input-height-border});
+      }
+
+      &.form-control-lg {
+        min-height: calc(#{$input-height-lg} - #{$input-height-border});
+      }
+
+      @at-root {
+        // Handle input group sizing
+        .input-group.input-group-sm & {
+          min-height: calc(#{$input-height-sm} - #{$input-height-border});
+          padding-top: $input-padding-y-sm;
+          padding-bottom: $input-padding-y-sm;
+        }
+
+        .input-group.input-group-lg & {
+          min-height: calc(#{$input-height-lg} - #{$input-height-border});
+          padding-top: $input-padding-y-lg;
+          padding-bottom: $input-padding-y-lg;
+        }
+      }
+    }
+
+    // Disabled and read-only styling
+    &[aria-disabled="true"],
+    &[aria-readonly="true"] {
+      background-color: $input-disabled-bg;
+      opacity: 1;
+    }
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+
+      > label {
+        cursor: default;
+      }
+    }
+  }
+
+  // Button only mode menu padding overrides
+  .b-form-btn-label-control.btn-group {
+    > .dropdown-menu {
+      padding: 0.5rem;
+    }
+  }
+}

package/src/vendor/bootstrap-vue/src/components/form-btn-label-control/bv-form-btn-label-control.js

@@ -0,0 +1,278 @@
+//
+// Private component used by `b-form-datepicker` and `b-form-timepicker`
+//
+import { extend } from '../../vue'
+import { NAME_FORM_BUTTON_LABEL_CONTROL } from '../../constants/components'
+import {
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../../constants/slots'
+import { attemptBlur, attemptFocus } from '../../utils/dom'
+import { stopEvent } from '../../utils/events'
+import { omit, sortKeys } from '../../utils/object'
+import { makeProp } from '../../utils/props'
+import { toString } from '../../utils/string'
+import { dropdownMixin, props as dropdownProps } from '../../mixins/dropdown'
+import { props as formControlProps } from '../../mixins/form-control'
+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 { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { VBHover } from '../../directives/hover/hover'
+import { BIconChevronDown } from '../../icons/icons'
+
+// --- Props ---
+
+export const props = sortKeys({
+  ...idProps,
+  ...formSizeProps,
+  ...formStateProps,
+  ...omit(dropdownProps, ['disabled']),
+  ...omit(formControlProps, ['autofocus']),
+  // When `true`, renders a `btn-group` wrapper and visually hides the label
+  buttonOnly: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Applicable in button mode only
+  buttonVariant: makeProp(PROP_TYPE_STRING, 'secondary'),
+  // This is the value shown in the label
+  // Defaults back to `value`
+  formattedValue: makeProp(PROP_TYPE_STRING),
+  // Value placed in `.sr-only` span inside label when value is present
+  labelSelected: makeProp(PROP_TYPE_STRING),
+  lang: makeProp(PROP_TYPE_STRING),
+  // Extra classes to apply to the `dropdown-menu` div
+  menuClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  // This is the value placed on the hidden input when no value selected
+  placeholder: makeProp(PROP_TYPE_STRING),
+  readonly: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Tri-state prop: `true`, `false` or `null`
+  rtl: makeProp(PROP_TYPE_BOOLEAN, null),
+  value: makeProp(PROP_TYPE_STRING, '')
+})
+
+// --- Main component ---
+
+// @vue/component
+export const BVFormBtnLabelControl = /*#__PURE__*/ extend({
+  name: NAME_FORM_BUTTON_LABEL_CONTROL,
+  directives: {
+    'b-hover': VBHover
+  },
+  mixins: [idMixin, formSizeMixin, formStateMixin, dropdownMixin, normalizeSlotMixin],
+  props,
+  data() {
+    return {
+      isHovered: false,
+      hasFocus: false
+    }
+  },
+  computed: {
+    idButton() {
+      return this.safeId()
+    },
+    idLabel() {
+      return this.safeId('_value_')
+    },
+    idMenu() {
+      return this.safeId('_dialog_')
+    },
+    idWrapper() {
+      return this.safeId('_outer_')
+    },
+    computedDir() {
+      return this.rtl === true ? 'rtl' : this.rtl === false ? 'ltr' : null
+    }
+  },
+  methods: {
+    focus() {
+      if (!this.disabled) {
+        attemptFocus(this.$refs.toggle)
+      }
+    },
+    blur() {
+      if (!this.disabled) {
+        attemptBlur(this.$refs.toggle)
+      }
+    },
+    setFocus(event) {
+      this.hasFocus = event.type === 'focus'
+    },
+    handleHover(hovered) {
+      this.isHovered = hovered
+    }
+  },
+  render(h) {
+    const {
+      idButton,
+      idLabel,
+      idMenu,
+      idWrapper,
+      disabled,
+      readonly,
+      required,
+      name,
+      state,
+      visible,
+      size,
+      isHovered,
+      hasFocus,
+      labelSelected,
+      buttonVariant,
+      buttonOnly
+    } = this
+    const value = toString(this.value) || ''
+    const invalid = state === false || (required && !value)
+
+    const btnScope = { isHovered, hasFocus, state, opened: visible }
+    const $button = h(
+      'button',
+      {
+        staticClass: 'btn',
+        class: {
+          [`btn-${buttonVariant}`]: buttonOnly,
+          [`btn-${size}`]: size,
+          'h-auto': !buttonOnly,
+          // `dropdown-toggle` is needed for proper
+          // corner rounding in button only mode
+          'dropdown-toggle': buttonOnly,
+          'dropdown-toggle-no-caret': buttonOnly
+        },
+        attrs: {
+          id: idButton,
+          type: 'button',
+          disabled,
+          'aria-haspopup': 'dialog',
+          'aria-expanded': visible ? 'true' : 'false',
+          'aria-invalid': invalid ? 'true' : null,
+          'aria-required': required ? 'true' : null
+        },
+        directives: [{ name: 'b-hover', value: this.handleHover }],
+        on: {
+          mousedown: this.onMousedown,
+          click: this.toggle,
+          keydown: this.toggle, // Handle ENTER, SPACE and DOWN
+          '!focus': this.setFocus,
+          '!blur': this.setFocus
+        },
+        ref: 'toggle'
+      },
+      [
+        this.hasNormalizedSlot(SLOT_NAME_BUTTON_CONTENT)
+          ? this.normalizeSlot(SLOT_NAME_BUTTON_CONTENT, btnScope)
+          : /* istanbul ignore next */ h(BIconChevronDown, { props: { scale: 1.25 } })
+      ]
+    )
+
+    // Hidden input
+    let $hidden = h()
+    if (name && !disabled) {
+      $hidden = h('input', {
+        attrs: {
+          type: 'hidden',
+          name: name || null,
+          form: this.form || null,
+          value
+        }
+      })
+    }
+
+    // Dropdown content
+    const $menu = h(
+      'div',
+      {
+        staticClass: 'dropdown-menu',
+        class: [
+          this.menuClass,
+          {
+            show: visible,
+            'dropdown-menu-right': this.right
+          }
+        ],
+        attrs: {
+          id: idMenu,
+          role: 'dialog',
+          tabindex: '-1',
+          'aria-modal': 'false',
+          'aria-labelledby': idLabel
+        },
+        on: {
+          keydown: this.onKeydown // Handle ESC
+        },
+        ref: 'menu'
+      },
+      [this.normalizeSlot(SLOT_NAME_DEFAULT, { opened: visible })]
+    )
+
+    // Value label
+    const $label = h(
+      'label',
+      {
+        class: buttonOnly
+          ? 'sr-only' // Hidden in button only mode
+          : [
+              'form-control',
+              // Mute the text if showing the placeholder
+              { 'text-muted': !value },
+              this.stateClass,
+              this.sizeFormClass
+            ],
+        attrs: {
+          id: idLabel,
+          for: idButton,
+          'aria-invalid': invalid ? 'true' : null,
+          'aria-required': required ? 'true' : null
+        },
+        directives: [{ name: 'b-hover', value: this.handleHover }],
+        on: {
+          // Disable bubbling of the click event to
+          // prevent menu from closing and re-opening
+
+          '!click': /* istanbul ignore next */ event => {
+            stopEvent(event, { preventDefault: false })
+          }
+        }
+      },
+      [
+        value ? this.formattedValue || value : this.placeholder || '',
+        // Add the selected label for screen readers when a value is provided
+        value && labelSelected ? h('bdi', { staticClass: 'sr-only' }, labelSelected) : ''
+      ]
+    )
+
+    // Return the custom form control wrapper
+    return h(
+      'div',
+      {
+        staticClass: 'b-form-btn-label-control dropdown',
+        class: [
+          this.directionClass,
+          this.boundaryClass,
+          [
+            {
+              'btn-group': buttonOnly,
+              'form-control': !buttonOnly,
+              focus: hasFocus && !buttonOnly,
+              show: visible,
+              'is-valid': state === true,
+              'is-invalid': state === false
+            },
+            buttonOnly ? null : this.sizeFormClass
+          ]
+        ],
+        attrs: {
+          id: idWrapper,
+          role: buttonOnly ? null : 'group',
+          lang: this.lang || null,
+          dir: this.computedDir,
+          'aria-disabled': disabled,
+          'aria-readonly': readonly && !disabled,
+          'aria-labelledby': idLabel,
+          'aria-invalid': state === false || (required && !value) ? 'true' : null,
+          'aria-required': required ? 'true' : null
+        }
+      },
+      [$button, $hidden, $menu, $label]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/form-btn-label-control/index.scss

@@ -0,0 +1 @@
+@import "form-btn-label-control";

package/src/vendor/bootstrap-vue/src/components/form-btn-label-control/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@bootstrap-vue/form-btn-label-control",
+  "version": "1.0.0",
+  "private": true
+}