@gitlab/ui 72.12.0 → 72.12.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [72.12.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.12.1...v72.12.2) (2024-01-25)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** remove aria-owns attribute from search ([c9520a6](https://gitlab.com/gitlab-org/gitlab-ui/commit/c9520a6e6006234c184085ea87b8421eacf36191))
+* **Typography:** remove scale from gl-heading-5 and gl-heading-6 classes ([2630e31](https://gitlab.com/gitlab-org/gitlab-ui/commit/2630e310c4a96fed1439b8d21ad99931ab3dbfb1))
+
+## [72.12.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.12.0...v72.12.1) (2024-01-24)
+
+
+### Bug Fixes
+
+* Building of `dist/` folder ([6592727](https://gitlab.com/gitlab-org/gitlab-ui/commit/6592727b7b2de66a5d40111d37fd331ca65e2411))
+
 # [72.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.11.1...v72.12.0) (2024-01-24)
 
 

package/dist/charts.js

@@ -0,0 +1,14 @@
+export { default as GlChart } from './components/charts/chart/chart';
+export { default as GlAreaChart } from './components/charts/area/area';
+export { default as GlBarChart } from './components/charts/bar/bar';
+export { default as GlGaugeChart } from './components/charts/gauge/gauge';
+export { default as GlLineChart } from './components/charts/line/line';
+export { default as GlChartLegend } from './components/charts/legend/legend';
+export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label';
+export { default as GlChartTooltip } from './components/charts/tooltip/tooltip';
+export { default as GlHeatmap } from './components/charts/heatmap';
+export { default as GlColumnChart } from './components/charts/column/column';
+export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column';
+export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter';
+export { default as GlSingleStat } from './components/charts/single_stat/single_stat';
+export { default as GlSparklineChart } from './components/charts/sparkline/sparkline';

package/dist/components/base/accordion/accordion.js

@@ -0,0 +1,73 @@
+import uniqueId from 'lodash/uniqueId';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAccordion',
+  provide() {
+    const accordionId = uniqueId('accordion-set-');
+    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
+    return {
+      defaultHeaderLevel: () => this.headerLevel,
+      accordionSetId: () => this.autoCollapse && accordionId
+    };
+  },
+  props: {
+    /*
+    When true, will have the effect of closing other accordion items when one accordion item is visible.
+     */
+    autoCollapse: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /*
+    The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
+     */
+    headerLevel: {
+      type: Number,
+      required: true,
+      validator(value) {
+        return value > 0 && value <= 6;
+      }
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/base/accordion/accordion_item.js

@@ -0,0 +1,133 @@
+import { BCollapse } from 'bootstrap-vue/esm/index.js';
+import uniqueId from 'lodash/uniqueId';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAccordionItem',
+  components: {
+    BCollapse,
+    GlButton
+  },
+  directives: {
+    GlCollapseToggle: GlCollapseToggleDirective
+  },
+  inject: ['accordionSetId', 'defaultHeaderLevel'],
+  inheritAttrs: false,
+  model: {
+    prop: 'visible',
+    event: 'input'
+  },
+  props: {
+    /**
+     * Used to set the title of accordion link
+     */
+    title: {
+      type: String,
+      required: true
+    },
+    /**
+     * Used to set the title of accordion link when the content is visible
+     * */
+    titleVisible: {
+      type: String,
+      default: null,
+      required: false
+    },
+    /**
+     * When set, it will ensure the accordion item is initially visible
+     */
+    visible: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    /**
+     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
+     */
+    headerLevel: {
+      type: Number,
+      required: false,
+      default: null,
+      validator(value) {
+        return value > 0 && value <= 6;
+      }
+    },
+    /**
+     * Additional CSS class(es) to be applied to the header
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      accordionItemId: uniqueId('accordion-item-'),
+      isVisible: this.visible
+    };
+  },
+  computed: {
+    headerComponent() {
+      const level = this.headerLevel || this.defaultHeaderLevel();
+      return `h${level}`;
+    },
+    accordion() {
+      return this.accordionSetId() || undefined;
+    },
+    icon() {
+      return this.isVisible ? 'chevron-down' : 'chevron-right';
+    },
+    buttonTitle() {
+      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
+    }
+  },
+  watch: {
+    isVisible: {
+      immediate: true,
+      handler(isVisible) {
+        this.$emit('input', isVisible);
+      }
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/base/alert/alert.js

@@ -0,0 +1,222 @@
+import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
+import GlButton from '../button/button';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+var script = {
+  name: 'GlAlert',
+  components: {
+    GlIcon,
+    CloseButton,
+    GlButton
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Controls the dismiss button's visibility.
+     */
+    dismissible: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Shows icon based on variant.
+     */
+    showIcon: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Dismiss button's aria-label.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Dismiss'
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: alertVariantOptions.info,
+      validator: value => Object.keys(alertVariantOptions).includes(value)
+    },
+    /**
+     * If provided, renders the primary button as a link.
+     */
+    primaryButtonLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * If provided, renders a primary action button.
+     */
+    primaryButtonText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * If provided, renders the secondary button as a link.
+     */
+    secondaryButtonLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * If provided, renders a secondary action button.
+     */
+    secondaryButtonText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    sticky: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    ariaLive() {
+      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
+        return 'assertive';
+      }
+      return 'polite';
+    },
+    role() {
+      if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
+        return 'alert';
+      }
+      return 'status';
+    },
+    iconName() {
+      return alertVariantIconMap[this.variant];
+    },
+    shouldRenderActions() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.actions || this.actionButtons.length);
+    },
+    actionButtons() {
+      return [{
+        text: this.primaryButtonText,
+        attrs: {
+          href: this.primaryButtonLink,
+          variant: 'confirm',
+          category: buttonCategoryOptions.primary
+        },
+        listeners: {
+          click: this.primaryButtonClicked
+        }
+      }, {
+        text: this.secondaryButtonText,
+        attrs: {
+          href: this.secondaryButtonLink,
+          variant: 'default',
+          category: buttonCategoryOptions.secondary
+        },
+        listeners: {
+          click: this.secondaryButtonClicked
+        }
+      }].reduce((acc, actionButton) => {
+        if (!actionButton.text) return acc;
+        const attrs = {
+          ...actionButton.attrs
+        };
+        if (!attrs.href) {
+          delete attrs.href;
+        }
+        acc.push({
+          ...actionButton,
+          attrs
+        });
+        return acc;
+      }, []);
+    },
+    variantClass() {
+      return `gl-alert-${this.variant}`;
+    }
+  },
+  methods: {
+    primaryButtonClicked(event) {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event primaryAction
+       * @type {object}
+       */
+      this.$emit('primaryAction', event);
+    },
+    secondaryButtonClicked(event) {
+      /**
+       * Emitted when the secondary action button is clicked.
+       *
+       * @event secondaryAction
+       * @type {object}
+       */
+      this.$emit('secondaryAction', event);
+    },
+    onDismiss() {
+      /**
+       * Emitted when the dismiss button is clicked.
+       *
+       * @event dismiss
+       * @type {object}
+       */
+      this.$emit('dismiss');
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+    'gl-alert',
+    { 'gl-alert-sticky': _vm.sticky },
+    { 'gl-alert-not-dismissible': !_vm.dismissible },
+    { 'gl-alert-no-icon': !_vm.showIcon },
+    { 'gl-alert-has-title': !!_vm.title },
+    _vm.variantClass ]},[(_vm.showIcon)?_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":_vm.role,"aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/base/avatar/avatar.js

@@ -0,0 +1,160 @@
+import isNumber from 'lodash/isNumber';
+import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import { getAvatarChar } from '../../../utils/string_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+const IDENTICON_BG_COUNT = 7;
+var script = {
+  name: 'GlAvatar',
+  props: {
+    entityId: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    entityName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    src: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Show fallback identicon when image fails to load
+     */
+    fallbackOnError: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    alt: {
+      type: String,
+      required: false,
+      default: 'avatar'
+    },
+    size: {
+      type: [Number, Object],
+      required: false,
+      default: avatarSizeOptions[1],
+      validator: value => {
+        const sizes = isNumber(value) ? [value] : Object.values(value);
+        const areValidSizes = sizes.every(size => {
+          const isValidSize = avatarSizeOptions.includes(size);
+          if (!isValidSize) {
+            /* eslint-disable-next-line no-console */
+            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
+          }
+          return isValidSize;
+        });
+        return areValidSizes;
+      }
+    },
+    shape: {
+      type: String,
+      required: false,
+      default: avatarShapeOptions.circle
+    }
+  },
+  data() {
+    return {
+      imageLoadError: false
+    };
+  },
+  computed: {
+    sizeClasses() {
+      if (isNumber(this.size)) {
+        return `gl-avatar-s${this.size}`;
+      }
+      const {
+        default: defaultSize,
+        ...nonDefaultSizes
+      } = this.size;
+      return [`gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(_ref => {
+        let [breakpoint, size] = _ref;
+        return `gl-${breakpoint}-avatar-s${size}`;
+      })];
+    },
+    isCircle() {
+      return this.shape === avatarShapeOptions.circle;
+    },
+    identiconBackgroundClass() {
+      /*
+       * Gets a number between 1-7 depending on the 'entityId'.
+       * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
+       */
+      const type = this.entityId % IDENTICON_BG_COUNT + 1;
+      return `gl-avatar-identicon-bg${type}`;
+    },
+    identiconText() {
+      return getAvatarChar(this.entityName);
+    },
+    showImage() {
+      // Don't show when image is not present
+      if (!this.src) {
+        return false;
+      }
+      // Don't show when fallbackOnError is true and there was failure to load image
+      if (this.src && this.fallbackOnError && this.imageLoadError) {
+        return false;
+      }
+      return true;
+    }
+  },
+  watch: {
+    src(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) this.imageLoadError = false;
+    }
+  },
+  methods: {
+    handleLoadError(event) {
+      this.imageLoadError = true;
+      this.$emit('load-error', event);
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showImage)?_c('img',_vm._g({class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClasses],attrs:{"src":_vm.src,"alt":_vm.alt},on:{"error":_vm.handleLoadError}},_vm.$listeners)):_c('div',_vm._g({class:[
+    'gl-avatar gl-avatar-identicon',
+    { 'gl-avatar-circle': _vm.isCircle },
+    _vm.sizeClasses,
+    _vm.identiconBackgroundClass ]},_vm.$listeners),[_vm._v("\n  "+_vm._s(_vm.identiconText)+"\n")])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;