@gitlab/ui 49.0.0 → 49.0.2

package/dist/components/base/datepicker/datepicker.js

@@ -11,21 +11,19 @@ const pad = function (val) {
   let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return `0${val}`.slice(-len);
 };
+
 /**
  * Used `onSelect` method in pickaday
  * @param {Date} date UTC format
  * @return {String} Date formated in yyyy-mm-dd
  */
-
 const defaultDateFormatter = date => {
   const day = pad(date.getDate());
   const month = pad(date.getMonth() + 1);
   const year = date.getFullYear();
   return `${year}-${month}-${day}`;
 };
-
 const isBefore = (compareTo, date) => compareTo && date && date.getTime() < compareTo.getTime();
-
 const highlightPastDates = pikaday => {
   const pikaButtons = pikaday.el.querySelectorAll('.pika-button');
   const today = new Date();
@@ -36,13 +34,11 @@ const highlightPastDates = pikaday => {
       pikaDay
     } = pikaButton.dataset;
     const pikaButtonDate = new Date(pikaYear, pikaMonth, pikaDay);
-
     if (isBefore(today, pikaButtonDate)) {
       pikaButton.classList.add('is-past-date');
     }
   });
 };
-
 var script = {
   components: {
     GlFormInput,
@@ -58,7 +54,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.
      */
@@ -92,7 +87,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Accepts a function that accepts a date as argument and returns true if the date is disabled.
      */
@@ -116,7 +110,6 @@ var script = {
       required: false,
       default: defaultDateFormat
     },
-
     /**
      * Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.
      */
@@ -140,7 +133,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Use this prop to set the initial date for the datepicker.
      */
@@ -180,46 +172,36 @@ var script = {
       default: null
     }
   },
-
   data() {
     return {
       textInput: ''
     };
   },
-
   computed: {
     formattedDate() {
       return 'calendar' in this && this.calendar.toString();
     },
-
     customTrigger() {
       return _isString(this.target) && this.target !== '';
     },
-
     triggerOnFocus() {
       return this.target === null;
     },
-
     showDefaultField() {
       return !this.customTrigger || this.triggerOnFocus;
     },
-
     renderClearButton() {
       return this.showClearButton && this.textInput !== '' && !this.disabled;
     },
-
     inputAutocomplete() {
       if (this.autocomplete !== '') {
         return this.autocomplete;
       }
-
       if (this.triggerOnFocus) {
         return 'off';
       }
-
       return null;
     }
-
   },
   watch: {
     value(val) {
@@ -227,25 +209,19 @@ var script = {
         this.calendar.setDate(val, true);
       }
     },
-
     minDate(minDate) {
       this.calendar.setMinDate(minDate);
     },
-
     maxDate(maxDate) {
       this.calendar.setMaxDate(maxDate);
     },
-
     startRange(startRange) {
       this.calendar.setStartRange(startRange);
     },
-
     endRange(endRange) {
       this.calendar.setEndRange(endRange);
     }
-
   },
-
   mounted() {
     const $parentEl = this.$parent.$el;
     const drawEvent = this.draw.bind(this);
@@ -274,44 +250,40 @@ var script = {
         highlightPastDates(pikaday);
         drawEvent();
       }
-    }; // Pass `null` as `target` prop to use the `field` as the trigger (open on focus)
+    };
 
+    // Pass `null` as `target` prop to use the `field` as the trigger (open on focus)
     if (!this.triggerOnFocus && !this.disabled) {
       const trigger = this.customTrigger ? $parentEl.querySelector(this.target) : this.$refs.calendarTriggerBtn.$el;
-      pikadayConfig.trigger = trigger; // Set `trigger` as the `field` if `field` element doesn't exist (not passed via the slot)
+      pikadayConfig.trigger = trigger;
 
+      // Set `trigger` as the `field` if `field` element doesn't exist (not passed via the slot)
       if (!pikadayConfig.field && this.customTrigger) {
         pikadayConfig.field = trigger;
       }
-    } // Pass `null` as `container` prop to prevent passing the `container` option to Pikaday
-
+    }
 
+    // Pass `null` as `container` prop to prevent passing the `container` option to Pikaday
     if (this.container !== null) {
       const container = this.container ? $parentEl.querySelector(this.container) : this.$el;
       pikadayConfig.container = container;
     }
-
     if (this.i18n) {
       pikadayConfig.i18n = this.i18n;
     }
-
     this.calendar = new Pikaday(pikadayConfig);
-
     if (this.startOpened) {
       this.calendar.show();
     }
   },
-
   beforeDestroy() {
     this.calendar.destroy();
   },
-
   methods: {
     // is used to open datepicker programmatically
     show() {
       this.calendar.show();
     },
-
     selected(date) {
       /**
        * Emitted when a new date has been selected.
@@ -319,37 +291,31 @@ var script = {
        */
       this.$emit('input', date);
     },
-
     closed() {
       /**
        * Emitted when the datepicker is hidden.
        */
       this.$emit('close');
     },
-
     opened() {
       /**
        * Emitted when the datepicker becomes visible.
        */
       this.$emit('open');
     },
-
     cleared() {
       this.textInput = '';
       /**
        * Emitted when the clear button is clicked.
        */
-
       this.$emit('clear');
     },
-
     draw() {
       /**
        * Emitted when the datepicker draws a new month.
        */
       this.$emit('monthChange');
     },
-
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
@@ -357,7 +323,6 @@ var script = {
         this.selected(resetDate);
       }
     }
-
   }
 };
 

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -103,7 +103,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * If provided, renders an info icon with a tooltip.
      */
@@ -112,7 +111,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Additional class(es) to apply to the date range indicator section.
      */
@@ -122,7 +120,6 @@ var script = {
       default: ''
     }
   },
-
   data() {
     return {
       fromCalendarMaxDate: this.defaultMaxDate ? getDateInPast(this.defaultMaxDate, 1) : null,
@@ -131,52 +128,41 @@ var script = {
       openToCalendar: false
     };
   },
-
   computed: {
     effectiveMaxDateRange() {
       return this.sameDaySelection ? this.maxDateRange - 1 : this.maxDateRange;
     },
-
     toCalendarMinDate() {
       if (!this.startDate) return null;
       return this.sameDaySelection ? this.startDate : getDateInFuture(this.startDate, 1);
     },
-
     toCalendarMaxDate() {
       if (!this.startDate || !this.maxDateRange) return this.defaultMaxDate;
       const computedMaxEndDate = getDateInFuture(this.startDate, this.effectiveMaxDateRange);
       return new Date(Math.min(computedMaxEndDate, this.defaultMaxDate));
     },
-
     dateRangeViolation() {
       return this.startDate >= this.endDate || this.exceedsDateRange;
     },
-
     exceedsDateRange() {
       if (this.numberOfDays < 0) {
         return false;
       }
-
       return this.maxDateRange && this.numberOfDays > this.maxDateRange;
     },
-
     toCalendarDefaultDate() {
       return this.endDate || this.toCalendarMinDate;
     },
-
     numericStartTime() {
       return this.startDate ? this.startDate.getTime() : null;
     },
-
     numberOfDays() {
       if (!this.startDate || !this.endDate) {
         return -1;
       }
-
       const numberOfDays = getDayDifference(this.startDate, this.endDate);
       return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
     }
-
   },
   watch: {
     value(val) {
@@ -187,12 +173,10 @@ var script = {
       this.startDate = startDate;
       this.endDate = endDate;
     }
-
   },
   methods: {
     onStartDateSelected(startDate) {
       this.startDate = startDate;
-
       if (this.dateRangeViolation) {
         this.openToCalendar = true;
         this.endDate = null;
@@ -201,7 +185,6 @@ var script = {
         endDate: this.endDate
       });
     },
-
     onEndDateSelected(endDate) {
       this.openToCalendar = false;
       this.endDate = endDate;
@@ -210,13 +193,11 @@ var script = {
        *
        * @event input
        * */
-
       this.$emit('input', {
         startDate: this.startDate,
         endDate
       });
     },
-
     onStartPickerOpen() {
       /**
        * Emitted when the primary action button is clicked.
@@ -225,7 +206,6 @@ var script = {
        * */
       this.$emit('start-picker-open');
     },
-
     onStartPickerClose() {
       /**
        * Emitted when the start date datepicker is hidden.
@@ -234,7 +214,6 @@ var script = {
        * */
       this.$emit('start-picker-close');
     },
-
     onEndPickerOpen() {
       /**
        * Emitted when the end date datepicker becomes visible.
@@ -243,7 +222,6 @@ var script = {
        * */
       this.$emit('end-picker-open');
     },
-
     onEndPickerClose() {
       /**
        * Emitted when the end date datepicker is hidden.
@@ -252,7 +230,6 @@ var script = {
        * */
       this.$emit('end-picker-close');
     }
-
   }
 };
 

package/dist/components/base/drawer/drawer.js

@@ -39,40 +39,32 @@ var script = {
     positionFromTop() {
       return !isEmpty(this.headerHeight) ? this.headerHeight : 0;
     },
-
     drawerStyles() {
       const styles = {
         top: this.positionFromTop,
         zIndex: this.zIndex
       };
-
       if (this.positionFromTop) {
         styles.maxHeight = `calc(100vh - ${this.positionFromTop})`;
       }
-
       return styles;
     },
-
     drawerHeaderStyles() {
       return {
         zIndex: this.headerSticky ? maxZIndex : null
       };
     },
-
     shouldRenderFooter() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.footer);
     },
-
     variantClass() {
       return `gl-drawer-${this.variant}`;
     }
-
   },
   watch: {
     open: {
       immediate: true,
-
       handler(open) {
         if (open) {
           document.addEventListener('keydown', this.handleEscape);
@@ -80,23 +72,18 @@ var script = {
           document.removeEventListener('keydown', this.handleEscape);
         }
       }
-
     }
   },
-
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleEscape);
   },
-
   methods: {
     handleEscape(e) {
       const ESC = 27;
-
       if (this.open && e.keyCode === ESC) {
         this.$emit('close');
       }
     }
-
   }
 };
 

package/dist/components/base/dropdown/dropdown.js

@@ -10,20 +10,20 @@ import GlLoadingIcon from '../loading_icon/loading_icon';
 import GlDropdownDivider from './dropdown_divider';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+// Return an Array of visible items
 function filterVisible(els) {
   return (els || []).filter(isVisible);
 }
-
 const Selector = {
   ITEM_SELECTOR: '.dropdown-item:not(.disabled):not([disabled]),.form-control:not(.disabled):not([disabled])'
-}; // see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721
+};
 
+// see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721
 const ExtendedBDropdown = Vue.extend(BDropdown, {
   methods: {
     getItems() {
       return filterVisible(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu));
     }
-
   }
 });
 const DefaultPopperOptions = {
@@ -157,19 +157,14 @@ var script = {
     renderCaret() {
       return !this.split;
     },
-
     isIconOnly() {
       var _this$text;
-
       return Boolean(this.icon && (!((_this$text = this.text) !== null && _this$text !== void 0 && _this$text.length) || this.textSrOnly) && !this.hasSlotContents('button-text'));
     },
-
     isIconWithText() {
       var _this$text2;
-
       return Boolean(this.icon && ((_this$text2 = this.text) === null || _this$text2 === void 0 ? void 0 : _this$text2.length) && !this.textSrOnly);
     },
-
     toggleButtonClasses() {
       return [this.toggleClass, {
         'gl-button': true,
@@ -180,7 +175,6 @@ var script = {
         'dropdown-icon-text': this.isIconWithText
       }];
     },
-
     splitButtonClasses() {
       return [this.toggleClass, {
         'gl-button': true,
@@ -189,38 +183,30 @@ var script = {
         [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary
       }];
     },
-
     buttonText() {
       return this.split && this.icon ? null : this.text;
     },
-
     hasHighlightedItemsContent() {
       return this.hasSlotContents('highlighted-items');
     },
-
     hasHighlightedItemsOrClearAll() {
       return this.hasHighlightedItemsContent && this.showHighlightedItemsTitle || this.showClearAll;
     },
-
     popperOptions() {
       return _merge({}, DefaultPopperOptions, this.popperOpts);
     }
-
   },
   methods: {
     hasSlotContents(slotName) {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots[slotName]);
     },
-
     show() {
       this.$refs.dropdown.show(...arguments);
     },
-
     hide() {
       this.$refs.dropdown.hide(...arguments);
     }
-
   }
 };
 

package/dist/components/base/dropdown/dropdown_item.js

@@ -64,33 +64,27 @@ var script = {
       const {
         href,
         to
-      } = this.$attrs; // Support 'href' and Vue Router's 'to'
-
+      } = this.$attrs;
+      // Support 'href' and Vue Router's 'to'
       return href || to ? BDropdownItem : BDropdownItemButton;
     },
-
     iconColorCss() {
       return variantCssColorMap[this.iconColor] || 'gl-text-gray-700';
     },
-
     shouldShowCheckIcon() {
       return this.isChecked || this.isCheckItem;
     },
-
     checkedClasses() {
       if (this.isCheckCentered) {
         return '';
       }
-
       return 'gl-mt-3 gl-align-self-start';
     }
-
   },
   methods: {
     handleClickIconRight() {
       this.$emit('click-icon-right');
     }
-
   }
 };
 

package/dist/components/base/filtered_search/common_story_options.js

@@ -1,10 +1,9 @@
 const noop = () => {};
+
 /**
  * A mocked provide option for components that expect to be descendants of
  * GlFilteredSearch, to be used in their stories.
  */
-
-
 const provide = () => ({
   portalName: 'portal',
   alignSuggestions: noop,