@gitlab/ui 49.0.1 → 49.0.3

package/dist/components/base/toast/toast.js

@@ -5,11 +5,11 @@ import CloseButton from '../../shared_components/close_button/close_button';
 const DEFAULT_OPTIONS = {
   autoHideDelay: 5000,
   toastClass: 'gl-toast',
+  isStatus: true,
   noCloseButton: true,
   toaster: 'b-toaster-bottom-left'
 };
 let toastsCount = 0;
-
 function renderTitle(h, toast, options) {
   const nodes = [h(CloseButton, {
     class: ['gl-toast-close-button', 'gl-close-btn-color-inherit'],
@@ -17,7 +17,6 @@ function renderTitle(h, toast, options) {
       click: toast.hide
     }
   })];
-
   if (options.action) {
     nodes.splice(0, 0, h('a', {
       role: 'button',
@@ -27,24 +26,19 @@ function renderTitle(h, toast, options) {
       }
     }, options.action.text));
   }
-
   return nodes;
 }
-
 function showToast(message) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
-
   const hide = () => {
     this.$bvToast.hide(id);
   };
-
   const toast = {
     id,
     hide
   };
-
   if (_isFunction(options.onComplete)) {
     const toastHiddenCallback = e => {
       if (e.componentId === id) {
@@ -52,24 +46,22 @@ function showToast(message) {
         options.onComplete(e);
       }
     };
-
     this.$root.$on('bv::toast:hidden', toastHiddenCallback);
   }
-
-  this.$bvToast.toast(message, { ...DEFAULT_OPTIONS,
+  this.$bvToast.toast(message, {
+    ...DEFAULT_OPTIONS,
     id,
     title: renderTitle(this.$createElement, toast, options)
   });
   return toast;
 }
+
 /**
  * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
  * Once registered, the toast will be globally available throughout your app.
  *
  * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
  */
-
-
 var toast = {
   install(Vue) {
     Vue.use(ToastPlugin);
@@ -78,15 +70,12 @@ var toast = {
         if (this.$toast) {
           return;
         }
-
         this.$toast = {
           show: showToast.bind(this)
         };
       }
-
     });
   }
-
 };
 
 export default toast;

package/dist/components/base/toggle/toggle.js

@@ -20,7 +20,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The toggle's state.
      * @model
@@ -30,7 +29,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Whether the toggle should be disabled.
      */
@@ -39,7 +37,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Whether the toggle is in the loading state.
      */
@@ -48,7 +45,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * The toggle's label.
      */
@@ -56,7 +52,6 @@ var script = {
       type: String,
       required: true
     },
-
     /**
      * A help text to be shown below the toggle.
      */
@@ -65,7 +60,6 @@ var script = {
       required: false,
       default: undefined
     },
-
     /**
      * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
      */
@@ -73,49 +67,38 @@ var script = {
       type: String,
       required: false,
       default: 'top',
-
       validator(position) {
         return Object.values(toggleLabelPosition).includes(position);
       }
-
     }
   },
-
   data() {
     return {
       labelId: _uniqueId('toggle-label-')
     };
   },
-
   computed: {
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
-
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
     },
-
     helpId() {
       return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
-
     isChecked() {
       return this.value ? 'true' : 'false';
     },
-
     isVerticalLayout() {
       return this.labelPosition === 'top' || this.labelPosition === 'hidden';
     }
-
   },
-
   beforeCreate() {
     this.uuid = uuid;
     uuid += 1;
   },
-
   methods: {
     toggleFeature() {
       if (!this.disabled) {
@@ -128,7 +111,6 @@ var script = {
         this.$emit('change', !this.value);
       }
     }
-
   }
 };
 

package/dist/components/base/token/token.js

@@ -13,7 +13,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Token visual variants: default, search-type, and search-value.
      */
@@ -28,13 +27,11 @@ var script = {
     variantClass() {
       return `gl-token-${this.variant}-variant`;
     },
-
     viewOnlyClass() {
       return {
         'gl-token-view-only': this.viewOnly
       };
     }
-
   },
   methods: {
     close($event) {
@@ -45,7 +42,6 @@ var script = {
        */
       this.$emit('close', $event);
     }
-
   }
 };
 

package/dist/components/base/token_selector/token_container.js

@@ -36,30 +36,24 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       bindFocusEvent: true,
       focusedTokenIndex: null
     };
   },
-
   computed: {
     focusedToken() {
       return this.tokens[this.focusedTokenIndex] || null;
     }
-
   },
   watch: {
     focusedToken(newValue) {
       var _this$$refs$tokens;
-
       if (newValue === null) {
         return;
       }
-
       const tokenRef = (_this$$refs$tokens = this.$refs.tokens) === null || _this$$refs$tokens === void 0 ? void 0 : _this$$refs$tokens.find(ref => ref.dataset.tokenId === newValue.id.toString());
-
       if (tokenRef) {
         // Prevent `handleTokenFocus` from being called when we manually focus on a token
         this.bindFocusEvent = false;
@@ -67,19 +61,15 @@ var script = {
         this.bindFocusEvent = true;
       }
     }
-
   },
-
   created() {
     this.registerFocusOnToken(this.focusOnToken);
   },
-
   methods: {
     handleClose(token) {
       this.$emit('token-remove', token);
       this.focusedTokenIndex = null;
     },
-
     handleLeftArrow() {
       if (this.focusedTokenIndex === 0) {
         this.focusLastToken();
@@ -87,7 +77,6 @@ var script = {
         this.focusPrevToken();
       }
     },
-
     handleRightArrow() {
       if (this.focusedTokenIndex === this.tokens.length - 1) {
         this.focusFirstToken();
@@ -95,58 +84,45 @@ var script = {
         this.focusNextToken();
       }
     },
-
     handleHome() {
       this.focusFirstToken();
     },
-
     handleEnd() {
       this.focusLastToken();
     },
-
     handleDelete() {
       this.$emit('token-remove', this.focusedToken);
-
       if (this.focusedTokenIndex > 0) {
         this.focusPrevToken();
       }
     },
-
     handleEscape() {
       this.focusedTokenIndex = null;
       this.$emit('cancel-focus');
     },
-
     handleTab() {
       this.$emit('cancel-focus');
     },
-
     // Only called when a token is focused by a click/tap
     handleTokenFocus(index) {
       this.focusedTokenIndex = index;
     },
-
     focusLastToken() {
       this.focusedTokenIndex = this.tokens.length - 1;
     },
-
     focusFirstToken() {
       this.focusedTokenIndex = 0;
     },
-
     focusNextToken() {
       this.focusedTokenIndex += 1;
     },
-
     focusPrevToken() {
       this.focusedTokenIndex -= 1;
     },
-
     focusOnToken() {
       let tokenIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       this.focusedTokenIndex = tokenIndex;
     }
-
   }
 };
 

package/dist/components/base/token_selector/token_selector.js

@@ -26,7 +26,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Should users be allowed to add tokens that are not in `dropdown-items`
      */
@@ -35,7 +34,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Dropdown items are loading, can be used when requesting new dropdown items
      */
@@ -44,7 +42,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
      */
@@ -53,7 +50,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * CSS classes to add to the main token selector container (`.gl-token-selector`)
      */
@@ -62,7 +58,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * CSS classes to add to dropdown menu `ul` element
      */
@@ -71,7 +66,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * The autocomplete attribute value for the underlying `input` element
      */
@@ -80,7 +74,6 @@ var script = {
       required: false,
       default: 'off'
     },
-
     /**
      * The `aria-labelledby` attribute value for the underlying `input` element
      */
@@ -89,7 +82,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The `placeholder` attribute value for the underlying `input` element
      */
@@ -98,7 +90,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
      */
@@ -107,7 +98,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
      */
@@ -116,7 +106,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Tokens that are selected. This prop will automatically be added when using `v-model`
      */
@@ -126,7 +115,6 @@ var script = {
       validator: tokensValidator,
       required: true
     },
-
     /**
      * Controls the `view-only` mode for the tokens
      */
@@ -135,7 +123,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Allows user to bulk delete tokens when enabled
      */
@@ -145,7 +132,6 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       inputText: '',
@@ -164,52 +150,40 @@ var script = {
       focusOnToken: () => {}
     };
   },
-
   computed: {
     filteredDropdownItems() {
       return this.dropdownItems.filter(dropdownItem => this.selectedTokens.findIndex(token => token.id === dropdownItem.id) === -1);
     },
-
     dropdownHasNoItems() {
       return !this.filteredDropdownItems.length;
     },
-
     userDefinedTokenCanBeAdded() {
       return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
     },
-
     hideDropdown() {
       if (this.userDefinedTokenCanBeAdded) {
         return false;
       }
-
       if (this.hideDropdownWithNoItems && this.dropdownHasNoItems) {
         return true;
       }
-
       return false;
     },
-
     stateClass() {
       if (this.state === null) {
         return 'gl-inset-border-1-gray-400!';
       }
-
       return this.state ? 'is-valid gl-inset-border-1-gray-400!' : 'is-invalid gl-inset-border-1-red-500!';
     },
-
     hasSelectedTokens() {
       return this.selectedTokens.length > 0;
     },
-
     showEmptyPlaceholder() {
       return !this.hasSelectedTokens && !this.inputFocused;
     },
-
     showClearAllButton() {
       return this.hasSelectedTokens && this.allowClearAll;
     }
-
   },
   watch: {
     inputText(newValue, oldValue) {
@@ -221,16 +195,15 @@ var script = {
          */
         this.$emit('text-input', newValue);
         this.resetFocusedDropdownItem();
-
         if (newValue !== '') {
           this.triggerTokenFocusNextBackspace = false;
         } else {
           this.triggerTokenFocusNextBackspace = true;
-        } // Wait a tick so `text-input` event can be used to validate
+        }
+
+        // Wait a tick so `text-input` event can be used to validate
         // the value and change the `allowUserDefinedTokens` and/or
         // `hideDropdownWithNoItems` props
-
-
         this.$nextTick(() => {
           if (this.hideDropdown) {
             this.closeDropdown();
@@ -240,7 +213,6 @@ var script = {
         });
       }
     }
-
   },
   methods: {
     handleFocus(event) {
@@ -253,12 +225,10 @@ var script = {
       this.openDropdown();
       this.inputFocused = true;
       this.focusOnToken();
-
       if (this.inputText === '') {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-
     handleBlur(event) {
       /**
        * Fired when the token selector is blurred
@@ -266,20 +236,19 @@ var script = {
        * @property {FocusEvent} event
        */
       this.$emit('blur', event);
-      this.inputFocused = false; // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
+      this.inputFocused = false;
+
+      // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Workaround is to:
       // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
       // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-
       this.$nextTick(() => {
         var _event$relatedTarget, _event$relatedTarget$;
-
         if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
           this.closeDropdown();
         }
       });
     },
-
     handleEnter() {
       if (this.userDefinedTokenCanBeAdded) {
         this.addToken();
@@ -287,20 +256,17 @@ var script = {
         this.addToken(this.focusedDropdownItem);
       }
     },
-
     handleEscape() {
       this.inputText = '';
       this.closeDropdown();
     },
-
     handleBackspace(event) {
       if (this.inputText !== '' || !this.selectedTokens.length) {
         return;
-      } // Prevent triggering the browser back button
-
+      }
 
+      // Prevent triggering the browser back button
       event.preventDefault();
-
       if (this.triggerTokenFocusNextBackspace) {
         this.$refs.textInput.blur();
         this.focusOnToken(this.selectedTokens.length - 1);
@@ -308,51 +274,45 @@ var script = {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-
     handleInputClick() {
       // Open the dropdown if the user clicks an already focused input
       if (this.inputFocused && this.inputText === '' && !this.dropdownIsOpen) {
         this.openDropdown();
       }
     },
-
     handleContainerClick(event) {
       // Bail if token is clicked
       const {
         target
       } = event;
-
       if ((target === null || target === void 0 ? void 0 : target.closest('.gl-token')) !== null || this.inputFocused) {
         return;
       }
-
       this.focusTextInput();
     },
-
     addToken() {
       let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       const token = dropdownItem !== null ? dropdownItem : {
         id: _uniqueId('user-defined-token'),
         name: this.inputText
       };
+
       /**
        * Fired when a token is added or removed
        *
        * @property {array} selectedTokens
        */
-
       this.$emit('input', [...this.selectedTokens, token]);
       this.inputText = '';
       this.closeDropdown();
+
       /**
        * Fired when a token is added
        *
        * @property {object} token
        */
-
       this.$emit('token-add', token);
     },
-
     removeToken(token) {
       /**
        * Fired when user types in the token selector
@@ -365,49 +325,38 @@ var script = {
        *
        * @property {object} token
        */
-
       this.$emit('token-remove', token);
     },
-
     cancelTokenFocus() {
       this.focusTextInput();
     },
-
     closeDropdown() {
       this.dropdownIsOpen = false;
       this.resetFocusedDropdownItem();
     },
-
     openDropdown() {
       if (this.hideDropdown) {
         return;
       }
-
       this.dropdownIsOpen = true;
     },
-
     focusTextInput() {
       this.$refs.textInput.focus();
     },
-
     // Register methods passed as props from child components
     registerDropdownEventHandlers(dropdownEventHandlers) {
       this.dropdownEventHandlers = dropdownEventHandlers;
     },
-
     registerResetFocusedDropdownItem(resetFocusedDropdownItem) {
       this.resetFocusedDropdownItem = resetFocusedDropdownItem;
     },
-
     registerFocusOnToken(focusOnToken) {
       this.focusOnToken = focusOnToken;
     },
-
     clearAll() {
       this.$emit('input', []);
       this.focusTextInput();
     }
-
   }
 };