@gitlab/ui 49.0.0 → 49.0.2

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

@@ -32,7 +32,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Token configuration with available operators and options.
      */
@@ -41,7 +40,6 @@ var script = {
       required: false,
       default: () => ({})
     },
-
     /**
      * Determines if the token is being edited or not.
      */
@@ -55,7 +53,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Current token value.
      */
@@ -67,7 +64,6 @@ var script = {
         data: ''
       })
     },
-
     /**
      * Display operators' descriptions instead of their values (e.g., "is" instead of "=").
      */
@@ -88,7 +84,6 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       activeSegment: null,
@@ -96,33 +91,28 @@ var script = {
       intendedCursorPosition: this.cursorPosition
     };
   },
-
   computed: {
     operators() {
       return this.config.operators || DEFAULT_OPERATORS;
     },
-
     hasDataOrDataSegmentIsCurrentlyActive() {
       return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
     },
-
     availableTokensWithSelf() {
-      return [this.config, ...this.availableTokens.filter(t => t !== this.config)].map(t => ({ ...t,
+      return [this.config, ...this.availableTokens.filter(t => t !== this.config)].map(t => ({
+        ...t,
         value: t.title
       }));
     },
-
     operatorDescription() {
       const operator = this.operators.find(op => op.value === this.tokenValue.operator);
       return this.showFriendlyText ? operator === null || operator === void 0 ? void 0 : operator.description : operator === null || operator === void 0 ? void 0 : operator.value;
     },
-
     eventListeners() {
       return this.viewOnly ? {} : {
         mousedown: this.destroyByClose
       };
     }
-
   },
   segments: {
     SEGMENT_TITLE,
@@ -132,7 +122,6 @@ var script = {
   watch: {
     tokenValue: {
       deep: true,
-
       handler(newValue) {
         /**
          * Emitted when the token changes its value.
@@ -142,25 +131,20 @@ var script = {
          */
         this.$emit('input', newValue);
       }
-
     },
     value: {
       handler(newValue, oldValue) {
         if ((newValue === null || newValue === void 0 ? void 0 : newValue.data) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
           return;
         }
-
         this.tokenValue = _cloneDeep(newValue);
       }
-
     },
     active: {
       immediate: true,
-
       handler(newValue) {
         if (newValue) {
           this.intendedCursorPosition = this.cursorPosition;
-
           if (!this.activeSegment) {
             this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
@@ -171,35 +155,32 @@ var script = {
            *
            * @event destroy
            */
-
           this.$emit('destroy');
         }
       }
-
     }
   },
-
   created() {
     if (!('operator' in this.tokenValue)) {
       if (this.operators.length === 1) {
         const operator = this.operators[0].value;
-        this.$emit('input', { ...this.tokenValue,
+        this.$emit('input', {
+          ...this.tokenValue,
           operator
         });
         this.activeSegment = SEGMENT_DATA;
       } else {
-        this.$emit('input', { ...this.tokenValue,
+        this.$emit('input', {
+          ...this.tokenValue,
           operator: ''
         });
       }
     }
   },
-
   methods: {
     activateSegment(segment) {
       if (this.viewOnly) return;
       this.activeSegment = segment;
-
       if (!this.active) {
         /**
          * Emitted when this term token is clicked.
@@ -209,21 +190,17 @@ var script = {
         this.$emit('activate');
       }
     },
-
     getAdditionalSegmentClasses(segment) {
       if (this.viewOnly) {
         return 'gl-cursor-text';
       }
-
       return {
         'gl-cursor-pointer': !this.isSegmentActive(segment)
       };
     },
-
     isSegmentActive(segment) {
       return this.active && this.activeSegment === segment;
     },
-
     replaceWithTermIfEmpty() {
       if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
         /**
@@ -233,10 +210,8 @@ var script = {
         this.$emit('replace', createTerm(this.config.title));
       }
     },
-
     replaceToken(newTitle) {
       const newTokenConfig = this.availableTokens.find(t => t.title === newTitle);
-
       if (newTokenConfig === this.config) {
         this.$nextTick(() => {
           /**
@@ -248,7 +223,6 @@ var script = {
         });
         return;
       }
-
       if (newTokenConfig) {
         const isCompatible = this.config.dataType && this.config.dataType === newTokenConfig.dataType;
         this.$emit('replace', {
@@ -259,7 +233,6 @@ var script = {
         });
       }
     },
-
     handleOperatorKeydown(evt, _ref) {
       let {
         inputValue,
@@ -269,14 +242,11 @@ var script = {
       const {
         key
       } = evt;
-
       if (key === ' ' || key === 'Spacebar') {
         applySuggestion(suggestedValue);
         return;
       }
-
       const potentialValue = `${inputValue}${key}`;
-
       if (key.length === 1 && !this.operators.find(_ref2 => {
         let {
           value
@@ -290,40 +260,35 @@ var script = {
         }
       }
     },
-
     activateDataSegment() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.tokenValue,
+        this.$emit('input', {
+          ...this.tokenValue,
           data: ''
         });
       }
-
       this.activateSegment(this.$options.segments.SEGMENT_DATA);
     },
-
     activatePreviousOperatorSegment() {
       this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
       this.intendedCursorPosition = 'end';
     },
-
     activatePreviousTitleSegment() {
       this.activateSegment(this.$options.segments.SEGMENT_TITLE);
       this.intendedCursorPosition = 'end';
     },
-
     activateNextDataSegment() {
       this.activateDataSegment();
       this.intendedCursorPosition = 'start';
     },
-
     activateNextOperatorSegment() {
       this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
       this.intendedCursorPosition = 'start';
     },
-
     handleComplete() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.tokenValue,
+        this.$emit('input', {
+          ...this.tokenValue,
           data: this.multiSelectValues.join(COMMA)
         });
       }
@@ -332,11 +297,8 @@ var script = {
        *
        * @event complete
        */
-
-
       this.$emit('complete');
     },
-
     destroyByClose(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         event.preventDefault();
@@ -344,7 +306,6 @@ var script = {
         this.$emit('destroy');
       }
     }
-
   }
 };
 

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

@@ -6,49 +6,42 @@ import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
 import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+// We need some helpers to ensure @vue/compat compatibility
 // @vue/compat will render comment nodes for v-if and comments in HTML
 // Also it makes use of fragments - both comments and nodes are Symbols.
 // In Vue3 all of them (Comment, Fragment) are exposed as named exports on vue module
 // However we want to maintain compatibility with Vue2, so taking this hacky approach
 // relying on Symbol.toString()
+
 // I'm keeping this directly here instead of helper to increase probability of
 // fixing ASAP and because I don't want this helper to be reused
 // FIXME: replace with Symbols when we will switch to Vue3
 
 const isVue3Comment = vnode => {
   var _vnode$type, _vnode$type$toString;
-
   return (vnode === null || vnode === void 0 ? void 0 : (_vnode$type = vnode.type) === null || _vnode$type === void 0 ? void 0 : (_vnode$type$toString = _vnode$type.toString) === null || _vnode$type$toString === void 0 ? void 0 : _vnode$type$toString.call(_vnode$type)) === 'Symbol(Comment)';
 };
-
 const isVue3Fragment = vnode => {
   var _vnode$type2, _vnode$type2$toString;
-
   return (vnode === null || vnode === void 0 ? void 0 : (_vnode$type2 = vnode.type) === null || _vnode$type2 === void 0 ? void 0 : (_vnode$type2$toString = _vnode$type2.toString) === null || _vnode$type2$toString === void 0 ? void 0 : _vnode$type2$toString.call(_vnode$type2)) === 'Symbol(Fragment)';
 };
-
 const isVNodeEmpty = vnode => {
   if (isVue3Fragment(vnode)) {
     // vnode.children might be an array or single node in edge cases
     return Array.isArray(vnode.children) ? vnode.children.every(isVNodeEmpty) : isVNodeEmpty(vnode.children);
   }
-
   if (isVue3Comment(vnode)) {
     return true;
   }
-
   return false;
 };
-
 const isSlotNotEmpty = slot => {
   if (!slot) {
     return false;
   }
-
   const vnodes = typeof slot === 'function' ? slot() : slot;
   return !(Array.isArray(vnodes) ? vnodes.every(isVNodeEmpty) : isVNodeEmpty(vnodes));
 };
-
 var script = {
   name: 'GlFilteredSearchTokenSegment',
   components: {
@@ -92,7 +85,6 @@ var script = {
       required: false,
       default: () => () => false
     },
-
     /**
      * Current term value
      */
@@ -100,7 +92,6 @@ var script = {
       required: true,
       validator: () => true
     },
-
     /**
      * HTML attributes to add to the search input
      */
@@ -109,7 +100,6 @@ var script = {
       required: false,
       default: () => ({})
     },
-
     /**
      * If this is the last token
      */
@@ -135,32 +125,25 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       fallbackValue: this.value
     };
   },
-
   computed: {
     matchingOption() {
       var _this$options;
-
       return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
     },
-
     nonMultipleValue() {
       return this.multiSelect ? _last(this.value.split(COMMA)) : this.value;
     },
-
     inputValue: {
       get() {
         return this.matchingOption ? this.matchingOption[this.optionTextField] : this.nonMultipleValue;
       },
-
       set(v) {
         var _this$getMatchingOpti, _this$getMatchingOpti2;
-
         /**
          * Emitted when this token segment's value changes.
          *
@@ -168,43 +151,33 @@ var script = {
          */
         this.$emit('input', (_this$getMatchingOpti = (_this$getMatchingOpti2 = this.getMatchingOptionForInputValue(v)) === null || _this$getMatchingOpti2 === void 0 ? void 0 : _this$getMatchingOpti2.value) !== null && _this$getMatchingOpti !== void 0 ? _this$getMatchingOpti : v);
       }
-
     },
-
     hasOptionsOrSuggestions() {
       var _this$options2;
-
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.length) || isSlotNotEmpty(this.$slots.suggestions);
     },
-
     defaultSuggestedValue() {
       var _ref;
-
       if (!this.options) {
         return this.nonMultipleValue;
       }
-
       if (this.value) {
         const match = this.getMatchingOptionForInputValue(this.inputValue) || this.getMatchingOptionForInputValue(this.inputValue, {
           loose: true
         });
         return match === null || match === void 0 ? void 0 : match.value;
       }
-
       const defaultSuggestion = this.options.find(op => op.default);
       return (_ref = defaultSuggestion !== null && defaultSuggestion !== void 0 ? defaultSuggestion : this.options[0]) === null || _ref === void 0 ? void 0 : _ref.value;
     },
-
     containerAttributes() {
       return this.isLastToken && !this.active && this.currentValue.length > 1 && this.searchInputAttributes;
     }
-
   },
   watch: {
     active: {
       immediate: true,
-
       handler(newValue) {
         if (newValue) {
           this.activate();
@@ -212,21 +185,15 @@ var script = {
           this.deactivate();
         }
       }
-
     },
-
     inputValue(newValue) {
       var _this$getMatchingOpti3, _this$getMatchingOpti4;
-
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
-
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;
       }
-
       const [firstWord, ...otherWords] = splitOnQuotes(newValue).filter((w, idx, arr) => Boolean(w) || idx === arr.length - 1);
       this.$emit('input', (_this$getMatchingOpti3 = (_this$getMatchingOpti4 = this.getMatchingOptionForInputValue(firstWord)) === null || _this$getMatchingOpti4 === void 0 ? void 0 : _this$getMatchingOpti4.value) !== null && _this$getMatchingOpti3 !== void 0 ? _this$getMatchingOpti3 : firstWord);
-
       if (otherWords.length) {
         /**
          * Emitted when Space appears in token segment value
@@ -235,7 +202,6 @@ var script = {
         this.$emit('split', otherWords);
       }
     }
-
   },
   methods: {
     emitIfInactive(e) {
@@ -247,10 +213,8 @@ var script = {
         e.preventDefault();
       }
     },
-
     getMatchingOptionForInputValue(v) {
       var _this$options3;
-
       let {
         loose
       } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -258,14 +222,12 @@ var script = {
       };
       return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(o => loose ? o[this.optionTextField].startsWith(v) : [this.optionTextField] === v);
     },
-
     activate() {
       this.fallbackValue = this.value;
       this.$nextTick(() => {
         const {
           input
         } = this.$refs;
-
         if (input) {
           input.focus();
           input.scrollIntoView({
@@ -273,42 +235,35 @@ var script = {
             inline: 'end'
           });
           this.alignSuggestions(input);
-
           if (this.cursorPosition === 'start') {
             input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
           }
         }
       });
     },
-
     deactivate() {
       var _this$matchingOption;
-
       if (!this.options) {
         return;
       }
-
       if (((_this$matchingOption = this.matchingOption) === null || _this$matchingOption === void 0 ? void 0 : _this$matchingOption.value) !== this.value) {
         this.$emit('input', this.fallbackValue);
       }
     },
-
     applySuggestion(suggestedValue) {
       const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+
       /**
        * Emitted when autocomplete entry is selected.
        *
        * @type {string} value The selected value.
        */
-
       this.$emit('select', formattedSuggestedValue);
-
       if (!this.multiSelect) {
         this.$emit('input', formattedSuggestedValue);
         this.$emit('complete', formattedSuggestedValue);
       }
     },
-
     handleInputKeydown(e) {
       const {
         key
@@ -337,13 +292,11 @@ var script = {
             /**
              * Emitted when Backspace is pressed and the value is empty
              */
-
             this.$emit('backspace');
           }
         },
         Enter: () => {
           e.preventDefault();
-
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
@@ -364,7 +317,6 @@ var script = {
           /**
            * Emitted when suggestion is selected from the suggestion list
            */
-
           this.$emit('complete');
         }
       };
@@ -374,23 +326,19 @@ var script = {
         ArrowUp: () => suggestions.prevItem(),
         Up: () => suggestions.prevItem()
       };
-
       if (this.hasOptionsOrSuggestions) {
         Object.assign(handlers, suggestionsHandlers);
       }
-
       if (Object.keys(handlers).includes(key)) {
         handlers[key]();
         return;
       }
-
       this.customInputKeydownHandler(e, {
         suggestedValue,
         inputValue: this.inputValue,
         applySuggestion: v => this.applySuggestion(v)
       });
     },
-
     handleBlur() {
       if (this.multiSelect) {
         this.$emit('complete');
@@ -401,7 +349,6 @@ var script = {
         this.$emit('deactivate');
       }
     }
-
   }
 };
 

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

@@ -13,9 +13,9 @@ function normalizeTokens(tokens) {
     if (isEmptyTerm(token)) {
       return;
     }
-
     if (token.type !== TERM_TOKEN_TYPE) {
-      result.push({ ...token
+      result.push({
+        ...token
       });
     } else if (result.length > 0 && typeof result[result.length - 1] === 'string') {
       result[result.length - 1] += ` ${token.value.data}`;
@@ -25,23 +25,19 @@ function normalizeTokens(tokens) {
   });
   return result;
 }
-
 function assertValidTokens(tokens) {
   if (!Array.isArray(tokens) && !typeof tokens === 'string') {
     throw new TypeError('Either string or array of tokens is expected');
   }
 }
-
 function needDenormalization(tokens) {
   if (typeof tokens === 'string') {
     return true;
   }
-
   assertValidTokens(tokens);
   return tokens.some(t => typeof t === 'string' || !t.id);
 }
 let tokenIdCounter = 0;
-
 const getTokenId = () => {
   const tokenId = `token-${tokenIdCounter}`;
   tokenIdCounter += 1;
@@ -57,15 +53,13 @@ const getTokenId = () => {
  * @param {object} token The token to check.
  * @returns {object} A token with an `id`.
  */
-
-
 function ensureTokenId(token) {
   if (!token.id) {
-    return { ...token,
+    return {
+      ...token,
       id: getTokenId()
     };
   }
-
   return token;
 }
 function createTerm() {
@@ -96,20 +90,16 @@ function splitOnQuotes(str) {
   if (_first(str) === "'" && _last(str) === "'") {
     return [str];
   }
-
   if (_first(str) === '"' && _last(str) === '"') {
     return [str];
   }
-
   const queue = str.split(' ');
   const result = [];
   let waitingForMatchingQuote = false;
   let quoteContent = '';
-
   while (queue.length) {
     const part = queue.shift();
     const quoteIndex = part.indexOf('"');
-
     if (quoteIndex === -1) {
       if (waitingForMatchingQuote) {
         quoteContent += ` ${part}`;
@@ -118,30 +108,26 @@ function splitOnQuotes(str) {
       }
     } else {
       const [firstPart, secondPart] = part.split('"', 2);
-
       if (waitingForMatchingQuote) {
         waitingForMatchingQuote = false;
         quoteContent += ` ${firstPart}"`;
         result.push(quoteContent);
         quoteContent = '';
-
         if (secondPart.length) {
           queue.unshift(secondPart);
         }
       } else {
         waitingForMatchingQuote = true;
-
         if (firstPart.length) {
           result.push(firstPart);
         }
-
         quoteContent = `"${secondPart}`;
       }
     }
   }
-
   return result;
 }
+
 /**
  *  wraps the incoming token in double quotes.
  *  Eg. Foo Bar becomes "Foo Bar"
@@ -149,22 +135,19 @@ function splitOnQuotes(str) {
  *  1. token must have space.
  *  2. token should not already have a quote around it.
  */
-
 function wrapTokenInQuotes(token) {
   if (!_isString(token)) {
     return token;
   }
-
   if (!token.includes(' ')) {
     return token;
   }
+  const quotes = ["'", '"'];
 
-  const quotes = ["'", '"']; // If the token starts and ends with a quote, eg. "Foo Bar", then return the original token.
-
+  // If the token starts and ends with a quote, eg. "Foo Bar", then return the original token.
   if (quotes.some(quote => _first(token) === quote && _last(token) === quote)) {
     return token;
   }
-
   return `"${token}"`;
 }