@gitlab/ui 72.12.0 → 72.12.1

package/dist/components/base/avatar_labeled/avatar_labeled.js

@@ -0,0 +1,107 @@
+import GlAvatar from '../avatar/avatar';
+import GlLink from '../link/link';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAvatarLabeled',
+  components: {
+    GlAvatar,
+    GlLink
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    subLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    labelLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    subLabelLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    inlineLabels: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    hasLabelLink() {
+      return Boolean(this.labelLink);
+    },
+    hasSubLabelLink() {
+      return Boolean(this.subLabelLink);
+    },
+    avatarListeners() {
+      if (this.hasLabelLink) {
+        return {
+          ...this.$listeners,
+          click: this.onAvatarClick
+        };
+      }
+      return this.$listeners;
+    },
+    avatarCssClasses() {
+      return {
+        'gl-cursor-pointer': this.hasLabelLink
+      };
+    },
+    avatarRowLayoutClass() {
+      return {
+        'inline-labels': this.inlineLabels
+      };
+    }
+  },
+  methods: {
+    onAvatarClick() {
+      this.$refs.labelLink.$el.click();
+    }
+  }
+};
+
+/* 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-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels gl-text-left!",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_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/avatar_link/avatar_link.js

@@ -0,0 +1,47 @@
+import GlLink from '../link/link';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'AvatarLink',
+  components: {
+    GlLink
+  }
+};
+
+/* 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('gl-link',_vm._g(_vm._b({staticClass:"gl-avatar-link"},'gl-link',_vm.$attrs,false),_vm.$listeners),[_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/avatars_inline/avatars_inline.js

@@ -0,0 +1,119 @@
+import truncate from 'lodash/truncate';
+import get from 'lodash/get';
+import { avatarsInlineSizeOptions } from '../../../utils/constants';
+import GlAvatar from '../avatar/avatar';
+import GlTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'AvatarsInline',
+  components: {
+    GlAvatar,
+    GlTooltip
+  },
+  props: {
+    avatars: {
+      type: Array,
+      required: true
+    },
+    maxVisible: {
+      type: Number,
+      required: true
+    },
+    avatarSize: {
+      type: Number,
+      required: true,
+      validator: value => avatarsInlineSizeOptions.includes(value)
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    badgeSrOnlyText: {
+      type: String,
+      required: true
+    },
+    badgeTooltipProp: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    badgeTooltipMaxChars: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    hiddenAvatars() {
+      return this.avatars.slice(this.maxVisible);
+    },
+    collapsable() {
+      return this.hiddenAvatars.length > 0;
+    },
+    visibleAvatars() {
+      return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
+    },
+    badgeSize() {
+      return {
+        16: 'sm',
+        24: 'md',
+        32: 'lg'
+      }[this.avatarSize] || 'lg';
+    },
+    badgeLabel() {
+      return `+${this.hiddenAvatars.length}`;
+    },
+    badgeTooltipTitle() {
+      if (!this.badgeTooltipProp) {
+        return '';
+      }
+      const tooltipTitle = this.hiddenAvatars.map(avatar => get(avatar, this.badgeTooltipProp, '').trim()).join(', ');
+
+      // truncate will append '...'
+      // we need to take these extra 3 characters into account in badgeTooltipMaxChars
+      return this.badgeTooltipMaxChars ? truncate(tooltipTitle, {
+        length: this.badgeTooltipMaxChars
+      }) : tooltipTitle;
+    }
+  }
+};
+
+/* 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-avatars-inline",class:("gl-avatars-inline-" + _vm.badgeSize)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child"},[_vm._t("avatar",function(){return [_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))]},{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child"},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],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/badge/badge.js

@@ -0,0 +1,105 @@
+import { BBadge } from 'bootstrap-vue/esm/index.js';
+import { badgeSizeOptions, badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+var script = {
+  name: 'GlBadge',
+  components: {
+    BBadge,
+    GlIcon
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The size of the badge.
+     */
+    size: {
+      type: String,
+      default: badgeSizeOptions.md,
+      validator(value) {
+        return badgeSizeOptions[value] !== undefined;
+      },
+      required: false
+    },
+    /**
+     * The variant of the badge.
+     */
+    variant: {
+      type: String,
+      default: badgeVariantOptions.muted,
+      validator(value) {
+        return badgeVariantOptions[value] !== undefined;
+      },
+      required: false
+    },
+    /**
+     * The icon to show next to the text
+     */
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The size of the icon 16 or 12
+     */
+    iconSize: {
+      type: String,
+      default: 'md',
+      validator: value => Object.keys(badgeIconSizeOptions).includes(value),
+      required: false
+    }
+  },
+  computed: {
+    hasIconOnly() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
+    },
+    role() {
+      return this.hasIconOnly ? 'img' : undefined;
+    },
+    iconSizeComputed() {
+      return badgeIconSizeOptions[this.iconSize];
+    }
+  }
+};
+
+/* 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('b-badge',_vm._b({class:['gl-badge', _vm.size],attrs:{"variant":_vm.variant,"role":_vm.role,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ 'gl-mr-2': !_vm.hasIconOnly },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),_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/banner/banner.js

@@ -0,0 +1,139 @@
+import { bannerVariants } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
+import GlButton from '../button/button';
+import GlCard from '../card/card';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlBanner',
+  components: {
+    CloseButton,
+    GlButton,
+    GlCard
+  },
+  props: {
+    /**
+     * Used to set the title of the banner.
+     */
+    title: {
+      type: String,
+      required: true
+    },
+    /**
+     * HTML attributes to add to the submit button.
+     */
+    buttonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    /**
+     * Text for the submit button.
+     */
+    buttonText: {
+      type: String,
+      required: true
+    },
+    /**
+     * Link for the submit button.
+     */
+    buttonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The illustration's URL.
+     */
+    svgPath: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The variant of the banner.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: bannerVariants[0],
+      validator(value) {
+        return bannerVariants.includes(value);
+      }
+    },
+    /**
+     * Dismiss button's aria-label.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Dismiss'
+    }
+  },
+  computed: {
+    isIntroducing() {
+      return this.variant === bannerVariants[1];
+    }
+  },
+  methods: {
+    handleClose() {
+      /**
+       * Emitted when the close button is clicked.
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close');
+    },
+    primaryButtonClicked() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event primary
+       * @type {object}
+       */
+      this.$emit('primary');
+    }
+  }
+};
+
+/* 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('gl-card',{staticClass:"gl-pl-6 gl-pr-8 gl-py-6",class:{
+    'gl-banner-introduction': _vm.isIntroducing,
+    'gl-bg-gray-10!': !_vm.isIntroducing,
+  },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',_vm._b({attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},'gl-button',_vm.buttonAttributes,false),[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],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/breadcrumb/breadcrumb.js

@@ -0,0 +1,122 @@
+import { BBreadcrumb } from 'bootstrap-vue/esm/index.js';
+import GlButton from '../button/button';
+import GlAvatar from '../avatar/avatar';
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlBreadcrumbItem from './breadcrumb_item';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+const COLLAPSE_AT_SIZE = 4;
+var script = {
+  name: 'GlBreadcrumb',
+  components: {
+    BBreadcrumb,
+    GlButton,
+    GlBreadcrumbItem,
+    GlAvatar
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The breadcrumb items to be displayed as links.
+     */
+    items: {
+      type: Array,
+      required: true,
+      default: () => [{
+        text: '',
+        href: ''
+      }],
+      validator: items => {
+        return items.every(item => {
+          const keys = Object.keys(item);
+          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+        });
+      }
+    }
+  },
+  data() {
+    return {
+      isListCollapsed: true
+    };
+  },
+  computed: {
+    breadcrumbsSize() {
+      return this.items.length;
+    },
+    hasCollapsible() {
+      return this.breadcrumbsSize > COLLAPSE_AT_SIZE;
+    },
+    nonCollapsibleIndices() {
+      return [0, this.breadcrumbsSize - 1, this.breadcrumbsSize - 2];
+    }
+  },
+  methods: {
+    isFirstItem(index) {
+      return index === 0;
+    },
+    isLastItem(index) {
+      return index === this.breadcrumbsSize - 1;
+    },
+    expandBreadcrumbs() {
+      this.isListCollapsed = false;
+      try {
+        this.$refs.firstItem[0].querySelector('a').focus();
+      } catch (e) {
+        /* eslint-disable-next-line no-console */
+        console.error(`Failed to set focus on the first breadcrumb item.`);
+      }
+    },
+    showCollapsedBreadcrumbsExpander(index) {
+      return index === 0 && this.hasCollapsible && this.isListCollapsed;
+    },
+    isItemCollapsed(index) {
+      return this.hasCollapsible && this.isListCollapsed && !this.nonCollapsibleIndices.includes(index);
+    },
+    getAriaCurrentAttr(index) {
+      return this.isLastItem(index) ? 'page' : false;
+    }
+  }
+};
+
+/* 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('nav',{staticClass:"gl-breadcrumbs",attrs:{"aria-label":"Breadcrumb"}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('gl-breadcrumb-item',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isItemCollapsed(index)),expression:"!isItemCollapsed(index)"}],ref:_vm.isFirstItem(index) ? 'firstItem' : null,refInFor:true,attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1),_vm._v(" "),(_vm.showCollapsedBreadcrumbsExpander(index))?[_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:('Show all breadcrumbs'),expression:"'Show all breadcrumbs'",modifiers:{"hover":true}}],attrs:{"aria-label":"Show all breadcrumbs","data-testid":"collapsed-expander","icon":"ellipsis_h","category":"primary"},on:{"click":_vm.expandBreadcrumbs}})],1)]:_vm._e()]})],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__;
+export { COLLAPSE_AT_SIZE };