@gitlab/ui 129.1.0 → 129.1.2

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-filtering.js

@@ -6,10 +6,10 @@ import { RX_DIGITS, RX_SPACES } from '../../../constants/regex';
 import { concat } from '../../../utils/array';
 import { cloneDeep } from '../../../utils/clone-deep';
 import { identity } from '../../../utils/identity';
-import { isString, isRegExp, isFunction } from '../../../utils/inspect';
+import { isFunction, isString, isRegExp } from '../../../utils/inspect';
 import { looseEqual } from '../../../utils/loose-equal';
 import { toInteger } from '../../../utils/number';
-import { makeProp, hasPropFunction } from '../../../utils/props';
+import { makeProp } from '../../../utils/props';
 import { escapeRegExp } from '../../../utils/string';
 import { warn } from '../../../utils/warn';
 import { stringifyRecordValues } from './stringify-record-values';
@@ -81,7 +81,8 @@ const filteringMixin = extend({
       const {
         filterFunction
       } = this;
-      return hasPropFunction(filterFunction) ? filterFunction : null;
+      // `filterFunction` is an optional Function prop with no default
+      return isFunction(filterFunction) ? filterFunction : null;
     },
     // Returns the records in `localItems` that match the filter criteria
     // Returns the original `localItems` array if not sorting

package/dist/vendor/bootstrap-vue/src/mixins/form-text.js

@@ -7,7 +7,8 @@ import { mathMax } from '../utils/math';
 import { makeModelMixin } from '../utils/model';
 import { toInteger, toFloat } from '../utils/number';
 import { sortKeys } from '../utils/object';
-import { makeProp, hasPropFunction } from '../utils/props';
+import { isFunction } from '../utils/inspect';
+import { makeProp } from '../utils/props';
 import { toString } from '../utils/string';
 
 // --- Constants ---
@@ -78,7 +79,8 @@ const formTextMixin = extend({
       return mathMax(toInteger(this.debounce, 0), 0);
     },
     hasFormatter() {
-      return hasPropFunction(this.formatter);
+      // `formatter` is an optional Function prop with no default
+      return isFunction(this.formatter);
     }
   },
   watch: {

package/dist/vendor/bootstrap-vue/src/utils/props.js

@@ -1,8 +1,6 @@
 import { PROP_TYPE_ANY } from '../constants/props';
-import { cloneDeep } from './clone-deep';
-import { getComponentConfig } from './config';
 import { identity } from './identity';
-import { isUndefined, isObject, isArray, isFunction } from './inspect';
+import { isUndefined, isObject, isArray } from './inspect';
 import { hasOwnProperty, clone, keys } from './object';
 import { upperFirst } from './string';
 
@@ -66,32 +64,4 @@ const pluckProps = function (keysToPluck, objToPluck) {
   }, {});
 };
 
-// Make a prop object configurable by global configuration
-// Replaces the current `default` key of each prop with a `getComponentConfig()`
-// call that falls back to the current default value of the prop
-const makePropConfigurable = (prop, key, componentKey) => ({
-  ...cloneDeep(prop),
-  default: function bvConfigurablePropDefault() {
-    const value = getComponentConfig(componentKey, key, prop.default);
-    return isFunction(value) ? value() : value;
-  }
-});
-
-// Make a props object configurable by global configuration
-// Replaces the current `default` key of each prop with a `getComponentConfig()`
-// call that falls back to the current default value of the prop
-const makePropsConfigurable = (props, componentKey) => keys(props).reduce((result, key) => ({
-  ...result,
-  [key]: makePropConfigurable(props[key], key, componentKey)
-}), {});
-
-// Get function name we use in `makePropConfigurable()`
-// for the prop default value override to compare
-// against in `hasPropFunction()`
-const configurablePropDefaultFnName = makePropConfigurable({}, '', '').default.name;
-
-// Detect wether the given value is currently a function
-// and isn't the props default function
-const hasPropFunction = fn => isFunction(fn) && fn.name && fn.name !== configurablePropDefaultFnName;
-
-export { copyProps, hasPropFunction, makeProp, makePropConfigurable, makePropsConfigurable, pluckProps, suffixPropName };
+export { copyProps, makeProp, pluckProps, suffixPropName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "129.1.0",
+  "version": "129.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -70,7 +70,7 @@
     "echarts": "^5.6.0",
     "gridstack": "^12.4.2",
     "iframe-resizer": "^4.4.5",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "popper.js": "^1.16.1",
     "portal-vue": "2.1.7",
     "vue-functional-data-merge": "^3.1.0",

package/src/components/base/form/form_input/form_input.scss

@@ -1,3 +1,218 @@
+@use "sass:color";
+
+// 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: $gl-color-neutral-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 {
+    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);
+}
+
+// <gl-form-input> custom-range validation styling
+// Mixin for generating `.input-group .custom-range` validation styling
+@mixin 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 color.adjust($color, $lightness: 35%);
+        }
+
+        &::-moz-range-thumb {
+          box-shadow:
+            0 0 0 1px $body-bg,
+            0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
+        }
+
+        &::-ms-thumb {
+          box-shadow:
+            0 0 0 1px $body-bg,
+            0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
+        }
+      }
+
+      &::-webkit-slider-thumb {
+        background-color: $color;
+        background-image: none;
+
+        &:active {
+          background-color: color.adjust($color, $lightness: 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: color.adjust($color, $lightness: 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: color.adjust($color, $lightness: 35%);
+          background-image: none;
+        }
+      }
+
+      &::-ms-track-lower {
+        background: rgba($color, 0.35);
+      }
+
+      &::-ms-track-upper {
+        background: rgba($color, 0.35);
+      }
+    }
+  }
+}
+
+@include custom-range-validation-state("valid", $form-feedback-valid-color);
+@include custom-range-validation-state("invalid", $form-feedback-invalid-color);
+
 .gl-form-input,
 .gl-form-input.form-control {
   appearance: none;

package/src/components/base/table/table.vue

@@ -1,6 +1,7 @@
 <script>
 import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
 import { logWarning, isDev } from '../../../utils/utils';
+import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
 
 const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
@@ -16,6 +17,7 @@ export default {
   name: 'GlTable',
   components: {
     BTable,
+    GlLoadingIcon,
   },
   inheritAttrs: false,
   props: {
@@ -163,6 +165,11 @@ export default {
         </template>
       </div>
     </template>
+    <template #table-busy>
+      <slot name="table-busy">
+        <gl-loading-icon size="lg" />
+      </slot>
+    </template>
     <template #empty="scope">
       <slot name="empty" v-bind="scope">
         <p class="gl-mb-0 gl-py-2 gl-text-subtle">{{ scope.emptyText }}</p>

package/src/scss/bootstrap_vue.scss

@@ -7,7 +7,6 @@ $bv-enable-popover-variants: false;
 @import "../vendor/bootstrap-vue/src/utilities.scss";
 
 @import "../vendor/bootstrap-vue/src/components/dropdown/index.scss";
-@import "../vendor/bootstrap-vue/src/components/form-input/index.scss";
 @import "../vendor/bootstrap-vue/src/components/form-radio/index.scss";
 @import "../vendor/bootstrap-vue/src/components/modal/index.scss";
 @import "../vendor/bootstrap-vue/src/components/popover/index.scss";

package/src/vendor/bootstrap-vue/src/_variables.scss

@@ -44,7 +44,7 @@ $b-custom-switch-indicator-size-sm: calc(
 // --- Tables ---
 
 // Table busy state
-$b-table-busy-opacity: 0.55 !default;
+$b-table-busy-opacity: 1 !default;
 
 // Table sorting
 $b-table-sort-icon-bg-width: 0.65em !default;

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

@@ -1,6 +1,5 @@
 @import "dropdown/index";
 @import "form-checkbox/index";
-@import "form-input/index";
 @import "form-radio/index";
 @import "modal/index";
 @import "popover/index";

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-filtering.js

@@ -15,7 +15,7 @@ import { identity } from '../../../utils/identity'
 import { isFunction, isString, isRegExp } from '../../../utils/inspect'
 import { looseEqual } from '../../../utils/loose-equal'
 import { toInteger } from '../../../utils/number'
-import { hasPropFunction, makeProp } from '../../../utils/props'
+import { makeProp } from '../../../utils/props'
 import { escapeRegExp } from '../../../utils/string'
 import { warn } from '../../../utils/warn'
 import { stringifyRecordValues } from './stringify-record-values'
@@ -78,7 +78,8 @@ export const filteringMixin = extend({
     localFilterFn() {
       // Return `null` to signal to use internal filter function
       const { filterFunction } = this
-      return hasPropFunction(filterFunction) ? filterFunction : null
+      // `filterFunction` is an optional Function prop with no default
+      return isFunction(filterFunction) ? filterFunction : null
     },
     // Returns the records in `localItems` that match the filter criteria
     // Returns the original `localItems` array if not sorting

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

@@ -18,7 +18,8 @@ import { mathMax } from '../utils/math'
 import { makeModelMixin } from '../utils/model'
 import { toInteger, toFloat } from '../utils/number'
 import { sortKeys } from '../utils/object'
-import { hasPropFunction, makeProp } from '../utils/props'
+import { isFunction } from '../utils/inspect'
+import { makeProp } from '../utils/props'
 import { toString } from '../utils/string'
 
 // --- Constants ---
@@ -93,7 +94,8 @@ export const formTextMixin = extend({
       return mathMax(toInteger(this.debounce, 0), 0)
     },
     hasFormatter() {
-      return hasPropFunction(this.formatter)
+      // `formatter` is an optional Function prop with no default
+      return isFunction(this.formatter)
     }
   },
   watch: {

package/src/vendor/bootstrap-vue/src/utils/props.js

@@ -1,8 +1,6 @@
 import { PROP_TYPE_ANY } from '../constants/props'
-import { cloneDeep } from './clone-deep'
-import { getComponentConfig } from './config'
 import { identity } from './identity'
-import { isArray, isFunction, isObject, isUndefined } from './inspect'
+import { isArray, isObject, isUndefined } from './inspect'
 import { clone, hasOwnProperty, keys } from './object'
 import { upperFirst } from './string'
 
@@ -60,33 +58,3 @@ export const pluckProps = (keysToPluck, objToPluck, transformFn = identity) =>
     memo[transformFn(prop)] = objToPluck[prop]
     return memo
   }, {})
-
-// Make a prop object configurable by global configuration
-// Replaces the current `default` key of each prop with a `getComponentConfig()`
-// call that falls back to the current default value of the prop
-export const makePropConfigurable = (prop, key, componentKey) => ({
-  ...cloneDeep(prop),
-  default: function bvConfigurablePropDefault() {
-    const value = getComponentConfig(componentKey, key, prop.default)
-    return isFunction(value) ? value() : value
-  }
-})
-
-// Make a props object configurable by global configuration
-// Replaces the current `default` key of each prop with a `getComponentConfig()`
-// call that falls back to the current default value of the prop
-export const makePropsConfigurable = (props, componentKey) =>
-  keys(props).reduce(
-    (result, key) => ({ ...result, [key]: makePropConfigurable(props[key], key, componentKey) }),
-    {}
-  )
-
-// Get function name we use in `makePropConfigurable()`
-// for the prop default value override to compare
-// against in `hasPropFunction()`
-const configurablePropDefaultFnName = makePropConfigurable({}, '', '').default.name
-
-// Detect wether the given value is currently a function
-// and isn't the props default function
-export const hasPropFunction = fn =>
-  isFunction(fn) && fn.name && fn.name !== configurablePropDefaultFnName

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

@@ -1,219 +0,0 @@
-@use 'sass:color';
-
-// 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 color.adjust($color, $lightness: 35%);
-        }
-        &::-moz-range-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
-        }
-        &::-ms-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: color.adjust($color, $lightness: 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: color.adjust($color, $lightness: 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: color.adjust($color, $lightness: 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/index.scss

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