@gitlab/ui 49.0.1 → 49.0.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [49.0.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.0.1...v49.0.2) (2022-10-25)
+
+
+### Bug Fixes
+
+* **GlPagination:** move attributes to root element ([def3d02](https://gitlab.com/gitlab-org/gitlab-ui/commit/def3d02878019c792b962c7632385e208d3c3fb8))
+
 ## [49.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.0.0...v49.0.1) (2022-10-24)
 
 

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

@@ -3,18 +3,15 @@ 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
+    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.
@@ -24,18 +21,15 @@ var script = {
       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;
       }
-
     }
   }
 };

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

@@ -27,7 +27,6 @@ var script = {
       type: String,
       required: true
     },
-
     /*
     Used to set the title of accordion link when the content is visible
     */
@@ -36,7 +35,6 @@ var script = {
       default: null,
       required: false
     },
-
     /*
     When set, it will ensure the accordion item is initially visible
     */
@@ -45,7 +43,6 @@ var script = {
       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.,
     */
@@ -53,13 +50,10 @@ var script = {
       type: Number,
       required: false,
       default: null,
-
       validator(value) {
         return value > 0 && value <= 6;
       }
-
     },
-
     /**
      * Additional CSS class(es) to be applied to the header.
      */
@@ -69,41 +63,33 @@ var script = {
       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);
       }
-
     }
   }
 };

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

@@ -17,7 +17,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Controls the dismiss button's visibility.
      */
@@ -26,7 +25,6 @@ var script = {
       required: false,
       default: true
     },
-
     /**
      * Shows icon based on variant.
      */
@@ -35,7 +33,6 @@ var script = {
       required: false,
       default: true
     },
-
     /**
      * Dismiss button's aria-label.
      */
@@ -50,7 +47,6 @@ var script = {
       default: alertVariantOptions.info,
       validator: value => Object.keys(alertVariantOptions).includes(value)
     },
-
     /**
      * If provided, renders the primary button as a link.
      */
@@ -59,7 +55,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * If provided, renders a primary action button.
      */
@@ -68,7 +63,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * If provided, renders the secondary button as a link.
      */
@@ -77,7 +71,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * If provided, renders a secondary action button.
      */
@@ -97,27 +90,21 @@ var script = {
       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,
@@ -141,24 +128,22 @@ var script = {
         }
       }].reduce((acc, actionButton) => {
         if (!actionButton.text) return acc;
-        const attrs = { ...actionButton.attrs
+        const attrs = {
+          ...actionButton.attrs
         };
-
         if (!attrs.href) {
           delete attrs.href;
         }
-
-        acc.push({ ...actionButton,
+        acc.push({
+          ...actionButton,
           attrs
         });
         return acc;
       }, []);
     },
-
     variantClass() {
       return `gl-alert-${this.variant}`;
     }
-
   },
   methods: {
     primaryButtonClicked(event) {
@@ -170,7 +155,6 @@ var script = {
        */
       this.$emit('primaryAction', event);
     },
-
     secondaryButtonClicked(event) {
       /**
        * Emitted when the secondary action button is clicked.
@@ -180,7 +164,6 @@ var script = {
        */
       this.$emit('secondaryAction', event);
     },
-
     onDismiss() {
       /**
        * Emitted when the dismiss button is clicked.
@@ -190,7 +173,6 @@ var script = {
        */
       this.$emit('dismiss');
     }
-
   }
 };
 

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

@@ -34,12 +34,10 @@ var script = {
         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;
@@ -56,7 +54,6 @@ var script = {
       if (_isNumber(this.size)) {
         return `gl-avatar-s${this.size}`;
       }
-
       const {
         default: defaultSize,
         ...nonDefaultSizes
@@ -66,11 +63,9 @@ var script = {
         return `gl-${breakpoint}-avatar-s${size}`;
       })];
     },
-
     isCircle() {
       return this.shape === avatarShapeOptions.circle;
     },
-
     identiconBackgroundClass() {
       /*
        * Gets a number between 1-7 depending on the 'entityId'.
@@ -79,11 +74,9 @@ var script = {
       const type = this.entityId % IDENTICON_BG_COUNT + 1;
       return `gl-avatar-identicon-bg${type}`;
     },
-
     identiconText() {
       return getAvatarChar(this.entityName);
     }
-
   }
 };
 

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

@@ -32,11 +32,9 @@ var script = {
     hasLabelLink() {
       return Boolean(this.labelLink);
     },
-
     hasSubLabelLink() {
       return Boolean(this.subLabelLink);
     }
-
   }
 };
 

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -49,43 +49,36 @@ var script = {
     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;
     },
-
     containerSizeStyles() {
       return {
         width: `${this.avatarSize * this.visibleAvatars.length}px`,
         height: `${this.avatarSize}px`
       };
     },
-
     badgeSize() {
       return this.avatarSize === 24 ? 'md' : 'lg';
     },
-
     badgeLabel() {
       return `+${this.hiddenAvatars.length}`;
     },
-
     badgeTooltipTitle() {
       if (!this.badgeTooltipProp) {
         return '';
       }
+      const tooltipTitle = this.hiddenAvatars.map(avatar => _get(avatar, this.badgeTooltipProp, '').trim()).join(', ');
 
-      const tooltipTitle = this.hiddenAvatars.map(avatar => _get(avatar, this.badgeTooltipProp, '').trim()).join(', '); // truncate will append '...'
+      // truncate will append '...'
       // we need to take these extra 3 characters into account in badgeTooltipMaxChars
-
       return this.badgeTooltipMaxChars ? _truncate(tooltipTitle, {
         length: this.badgeTooltipMaxChars
       }) : tooltipTitle;
     }
-
   },
   methods: {
     calcAvatarPosition(avatarIndex) {
@@ -96,7 +89,6 @@ var script = {
         zIndex: this.maxVisible + (avatarIndex - 1)
       };
     }
-
   }
 };
 

package/dist/components/base/badge/badge.js

@@ -17,28 +17,22 @@ var script = {
     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
      */
@@ -53,11 +47,9 @@ var script = {
       // 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;
     }
-
   }
 };
 

package/dist/components/base/banner/banner.js

@@ -17,7 +17,6 @@ var script = {
       type: String,
       required: true
     },
-
     /**
      * Text for the submit button.
      */
@@ -25,7 +24,6 @@ var script = {
       type: String,
       required: true
     },
-
     /**
      * Link for the submit button.
      */
@@ -34,7 +32,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The illustration's URL.
      */
@@ -43,7 +40,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The variant of the banner.
      */
@@ -51,13 +47,10 @@ var script = {
       type: String,
       required: false,
       default: bannerVariants[0],
-
       validator(value) {
         return bannerVariants.includes(value);
       }
-
     },
-
     /**
      * Removes the border for banners embedded in content.
      */
@@ -71,7 +64,6 @@ var script = {
     isIntroducing() {
       return this.variant === bannerVariants[1];
     }
-
   },
   methods: {
     handleClose() {
@@ -83,7 +75,6 @@ var script = {
        */
       this.$emit('close');
     },
-
     primaryButtonClicked() {
       /**
        * Emitted when the primary action button is clicked.
@@ -93,7 +84,6 @@ var script = {
        */
       this.$emit('primary');
     }
-
   }
 };
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -37,39 +37,31 @@ var script = {
       }
     }
   },
-
   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) {
@@ -77,19 +69,15 @@ var script = {
         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;
     }
-
   }
 };
 

package/dist/components/base/breadcrumb/breadcrumb_item.js

@@ -26,11 +26,9 @@ var script = {
       type: [String, Boolean],
       required: false,
       default: false,
-
       validator(value) {
         return [false, 'page'].indexOf(value) !== -1;
       }
-
     }
   }
 };

package/dist/components/base/broadcast_message/broadcast_message.js

@@ -17,7 +17,6 @@ var script = {
       required: false,
       default: 'bullhorn'
     },
-
     /**
      * The dismiss button's label, it is visible in mobile viewports and used for the button's aria-label attribute.
      */
@@ -26,7 +25,6 @@ var script = {
       required: false,
       default: 'Dismiss'
     },
-
     /**
      * The theme's name to use, this should correspond to the user's selected theme in GitLab.
      */
@@ -47,7 +45,6 @@ var script = {
        */
       this.$emit('dismiss');
     }
-
   }
 };
 

package/dist/components/base/button/button.js

@@ -68,50 +68,39 @@ var script = {
     hasIcon() {
       return this.icon !== '';
     },
-
     hasIconOnly() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Object.keys(this.$slots).length === 0 && this.hasIcon;
     },
-
     isButtonDisabled() {
       return this.disabled || this.loading;
     },
-
     buttonClasses() {
       const classes = ['gl-button'];
       const nonCategoryVariants = [buttonVariantOptions.dashed, buttonVariantOptions.link, buttonVariantOptions.reset];
-
       if (!nonCategoryVariants.includes(this.variant) && this.category !== buttonCategoryOptions.primary) {
         classes.push(`btn-${this.variant}-${this.category}`);
       }
-
       classes.push({
         'btn-icon': this.hasIconOnly,
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected
       });
-
       if (this.label) {
         classes.push('btn', 'btn-label', `btn-${this.buttonSize}`);
       }
-
       return classes;
     },
-
     buttonSize() {
       return buttonSizeOptionsMap[this.size];
     }
-
   },
-
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
       logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.');
     }
   }
-
 };
 
 /* script */

package/dist/components/base/card/card.js

@@ -1,6 +1,7 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+
 var script = {
   props: {
     /**
@@ -11,7 +12,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Additional CSS class(es) to be applied to the body.
      */
@@ -20,7 +20,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Additional CSS class(es) to be applied to the footer.
      */