@gitlab/ui 38.1.0 → 38.3.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [38.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.2.1...v38.3.0) (2022-04-04)
+
+
+### Features
+
+* **css:** Add responsive display inline classes ([21a6358](https://gitlab.com/gitlab-org/gitlab-ui/commit/21a6358266f0183f4b3b0c8b90dc379f3ab8d3a3))
+
+## [38.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.2.0...v38.2.1) (2022-04-01)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Generate stable token keys ([88dccde](https://gitlab.com/gitlab-org/gitlab-ui/commit/88dccde9f4df1352a7e06e831de8baced4a8d18f))
+
+# [38.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.1.0...v38.2.0) (2022-03-31)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Stop mutating value prop ([79aa5bc](https://gitlab.com/gitlab-org/gitlab-ui/commit/79aa5bc9712e293e08842c8c0234e29511de3401))
+* **GlFilteredSearch:** Stop mutating value prop ([31808db](https://gitlab.com/gitlab-org/gitlab-ui/commit/31808dbcf6b3c412db7191fe12317009b0d95542))
+
+
+### Features
+
+* **audio:** Implementation of GitLab Flavoured Markdown audio styles ([e4c613f](https://gitlab.com/gitlab-org/gitlab-ui/commit/e4c613f0892b7b1bf3bd97b17e64e4d2e6492ebe))
+
 # [38.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.0.1...v38.1.0) (2022-03-28)
 
 

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

@@ -1,11 +1,7 @@
-import examples from './examples';
-
-var description = "## Usage\n\nThe dropdown component offers a user multiple items or actions to choose from which are initially\ncollapsed behind a button.\n\n### Icon-only dropdown\n\nIcon-only dropdowns must have an accessible name.\nYou can provide this with the combination of `text` and `text-sr-only` props.\n\nOptionally, you can use `no-caret` to remove the caret and `category=\"tertiary\"` to remove the border.\n\n```html\n<gl-dropdown\n  icon=\"ellipsis_v\"\n  text=\"More actions\"\n  :text-sr-only=\"true\"\n  category=\"tertiary\"\n  no-caret\n>\n```\n\n### Button Content\n\nThere are 3 ways to set the dropdown button's content.\n\n1. Use the `text` attribute. This will display the text with the loading spinner (shown with the\n`loading` attribute), icon (if provided by the `icon` attribute), and dropdown caret:\n\n    ```html\n    <gl-dropdown text=\"Button text\">\n    ```\n\n1. Use the `button-text` template. This allows custom content for the button's text, but keeps the\nloading spinner, icon, and dropdown caret:\n\n    ```html\n    <gl-dropdown>\n      <template #button-text>\n        <!-- Loading spinner shown here -->\n        <!-- Icon shown here -->\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n        <gl-truncate position=\"middle\" text=\"Truncated button text\"/>\n        <!-- Dropdown arrow shown here -->\n      </template>\n    </gl-dropdown>\n    ```\n\n1. Use the `button-content` template. This will replace everything in the button with the template:\n\n    ```html\n    <gl-dropdown>\n      <template #button-content>\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n      </template>\n    </gl-dropdown>\n    ```\n";
+var description = "The dropdown component offers a user multiple items or actions to choose from which are initially\ncollapsed behind a button.\n\n### Icon-only dropdown\n\nIcon-only dropdowns must have an accessible name.\nYou can provide this with the combination of `text` and `text-sr-only` props.\n\nOptionally, you can use `no-caret` to remove the caret and `category=\"tertiary\"` to remove the border.\n\n```html\n<gl-dropdown\n  icon=\"ellipsis_v\"\n  text=\"More actions\"\n  :text-sr-only=\"true\"\n  category=\"tertiary\"\n  no-caret\n>\n```\n\n### Button Content\n\nThere are 3 ways to set the dropdown button's content.\n\n1. Use the `text` attribute. This will display the text with the loading spinner (shown with the\n`loading` attribute), icon (if provided by the `icon` attribute), and dropdown caret:\n\n    ```html\n    <gl-dropdown text=\"Button text\">\n    ```\n\n1. Use the `button-text` template. This allows custom content for the button's text, but keeps the\nloading spinner, icon, and dropdown caret:\n\n    ```html\n    <gl-dropdown>\n      <template #button-text>\n        <!-- Loading spinner shown here -->\n        <!-- Icon shown here -->\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n        <gl-truncate position=\"middle\" text=\"Truncated button text\"/>\n        <!-- Dropdown arrow shown here -->\n      </template>\n    </gl-dropdown>\n    ```\n\n1. Use the `button-content` template. This will replace everything in the button with the template:\n\n    ```html\n    <gl-dropdown>\n      <template #button-content>\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n      </template>\n    </gl-dropdown>\n    ```\n\n### GlDropdownForm\n\nUnlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.\nThis is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases\nshouldn't be needed. To add padding, either add a padding utility class to your form, or an inner\nelement with some padding.\n";
 
 var dropdown_documentation = {
   description,
-  bootstrapComponent: 'b-dropdown',
-  examples,
   followsDesignSystem: false
 };
 

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

@@ -1,8 +1,7 @@
-var description = "# Dropdown Item\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown item component is meant to be used for clickable entries inside a dropdown component.\nIf you provide the `href` attribute, it renders a link instead of a button.\n";
+var description = "The dropdown item component is meant to be used for clickable entries inside a dropdown component.\nIf you provide the `href` attribute, it renders a link instead of a button.\n";
 
 var dropdown_item_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
+  description
 };
 
 export default dropdown_item_documentation;

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

@@ -5,22 +5,12 @@ import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
-import { TERM_TOKEN_TYPE, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, normalizeTokens } from './filtered_search_utils';
+import { createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 Vue.use(PortalVue);
 let portalUuid = 0;
 
-function createTerm() {
-  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return {
-    type: TERM_TOKEN_TYPE,
-    value: {
-      data
-    }
-  };
-}
-
 function initialState() {
   return [createTerm()];
 }
@@ -172,6 +162,14 @@ var script = {
   watch: {
     tokens: {
       handler() {
+        if (process.env.NODE_ENV !== 'production') {
+          const invalidToken = this.tokens.find(token => !token.id);
+
+          if (invalidToken) {
+            throw new Error(`Token does not have an id:\n${JSON.stringify(invalidToken)}`);
+          }
+        }
+
         if (this.tokens.length === 0 || !this.isLastTokenEmpty()) {
           this.tokens.push(createTerm());
         }
@@ -278,12 +276,12 @@ var script = {
     },
 
     replaceToken(idx, token) {
-      this.$set(this.tokens, idx, { ...token,
+      this.$set(this.tokens, idx, ensureTokenId({ ...token,
         value: {
           data: '',
           ...token.value
         }
-      });
+      }));
       this.activeTokenIdx = idx;
     },
 
@@ -295,12 +293,7 @@ var script = {
         return;
       }
 
-      const newTokens = newStrings.map(data => ({
-        type: TERM_TOKEN_TYPE,
-        value: {
-          data
-        }
-      }));
+      const newTokens = newStrings.map(data => createTerm(data));
       this.tokens.splice(idx + 1, 0, ...newTokens);
       this.activeTokenIdx = idx + newStrings.length;
     },
@@ -333,7 +326,7 @@ var 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-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
             'gl-filtered-search-last-item': _vm.isLastToken(idx),
           },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];

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

@@ -59,7 +59,7 @@ var 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-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue($event)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"data-testid":"filtered-search-suggestion","href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue($event)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,7 +1,8 @@
+import _cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import { createTerm } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const SEGMENT_TITLE = 'TYPE';
@@ -77,7 +78,8 @@ var script = {
 
   data() {
     return {
-      activeSegment: null
+      activeSegment: null,
+      tokenValue: _cloneDeep(this.value)
     };
   },
 
@@ -87,7 +89,7 @@ var script = {
     },
 
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.value.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
     },
 
     availableTokensWithSelf() {
@@ -97,7 +99,7 @@ var script = {
     },
 
     operatorDescription() {
-      const operator = this.operators.find(op => op.value === this.value.operator);
+      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;
     }
 
@@ -108,7 +110,7 @@ var script = {
     SEGMENT_OPERATOR
   },
   watch: {
-    value: {
+    tokenValue: {
       deep: true,
 
       handler(newValue) {
@@ -121,6 +123,16 @@ 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,
@@ -128,9 +140,9 @@ var script = {
       handler(newValue) {
         if (newValue) {
           if (!this.activeSegment) {
-            this.activateSegment(this.value.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
-        } else if (this.value.data === '') {
+        } else if (this.tokenValue.data === '') {
           this.activeSegment = null;
           /**
            * Emitted when token is about to be destroyed.
@@ -146,15 +158,15 @@ var script = {
   },
 
   created() {
-    if (!('operator' in this.value)) {
+    if (!('operator' in this.tokenValue)) {
       if (this.operators.length === 1) {
         const operator = this.operators[0].value;
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           operator
         });
         this.activeSegment = SEGMENT_DATA;
       } else {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           operator: ''
         });
       }
@@ -186,17 +198,12 @@ var script = {
     },
 
     replaceWithTermIfEmpty() {
-      if (this.value.operator === '' && this.value.data === '') {
+      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
         /**
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
          */
-        this.$emit('replace', {
-          type: TERM_TOKEN_TYPE,
-          value: {
-            data: this.config.title
-          }
-        });
+        this.$emit('replace', createTerm(this.config.title));
       }
     },
 
@@ -219,7 +226,7 @@ var script = {
         const isCompatible = this.config.dataType && this.config.dataType === newTokenConfig.dataType;
         this.$emit('replace', {
           type: newTokenConfig.type,
-          value: isCompatible ? this.value : {
+          value: isCompatible ? this.tokenValue : {
             data: ''
           }
         });
@@ -249,7 +256,7 @@ var script = {
         } = _ref2;
         return value.startsWith(potentialValue);
       })) {
-        if (this.value.data === '') {
+        if (this.tokenValue.data === '') {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -259,7 +266,7 @@ var script = {
 
     activateDataSegment() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: ''
         });
       }
@@ -269,7 +276,7 @@ var script = {
 
     handleComplete() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: this.multiSelectValues.join(COMMA)
         });
       }
@@ -286,6 +293,7 @@ var script = {
     destroyByClose(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         event.preventDefault();
+        event.stopPropagation();
         this.$emit('destroy');
       }
     }
@@ -301,14 +309,14 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
 var inputValue = ref.inputValue;
 return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v(_vm._s(inputValue))])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":""},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v(_vm._s(_vm.operatorDescription))])]},proxy:true},{key:"option",fn:function(ref){
 var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.value.operator),callback:function ($$v) {_vm.$set(_vm.value, "operator", $$v);},expression:"value.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
 var inputValue = ref.inputValue;
 return [_vm._t("view-token",[_c('gl-token',{staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value"},on:{"mousedown":_vm.destroyByClose}},[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",[_vm._v(_vm._s(inputValue))],null,{ inputValue: inputValue })],2)])],null,{
           inputValue: inputValue,
           listeners: { mousedown: _vm.destroyByClose },
           cssClasses: Object.assign({}, {'gl-filtered-search-token-data': true},
             _vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA)),
-        })]}}],null,true),model:{value:(_vm.value.data),callback:function ($$v) {_vm.$set(_vm.value, "data", $$v);},expression:"value.data"}}):_vm._e()],1)};
+        })]}}],null,true),model:{value:(_vm.tokenValue.data),callback:function ($$v) {_vm.$set(_vm.tokenValue, "data", $$v);},expression:"tokenValue.data"}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -38,7 +38,45 @@ function needDenormalization(tokens) {
   }
 
   assertValidTokens(tokens);
-  return tokens.some(t => typeof t === 'string');
+  return tokens.some(t => typeof t === 'string' || !t.id);
+}
+let tokenIdCounter = 0;
+
+const getTokenId = () => {
+  const tokenId = `token-${tokenIdCounter}`;
+  tokenIdCounter += 1;
+  return tokenId;
+};
+/**
+ * Ensure the given token has an `id` property, which `GlFilteredSearch` relies
+ * on as a unique key for the token.
+ *
+ * If the given token does not have an `id`, it returns a shallow copy of the
+ * token with an `id`. Otherwise, it returns the given token.
+ *
+ * @param {object} token The token to check.
+ * @returns {object} A token with an `id`.
+ */
+
+
+function ensureTokenId(token) {
+  if (!token.id) {
+    return { ...token,
+      id: getTokenId()
+    };
+  }
+
+  return token;
+}
+function createTerm() {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return {
+    id: getTokenId(),
+    type: TERM_TOKEN_TYPE,
+    value: {
+      data
+    }
+  };
 }
 function denormalizeTokens(inputTokens) {
   assertValidTokens(inputTokens);
@@ -47,14 +85,9 @@ function denormalizeTokens(inputTokens) {
   tokens.forEach(t => {
     if (typeof t === 'string') {
       const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach(strToken => result.push({
-        type: TERM_TOKEN_TYPE,
-        value: {
-          data: strToken
-        }
-      }));
+      stringTokens.forEach(strToken => result.push(createTerm(strToken)));
     } else {
-      result.push(t);
+      result.push(ensureTokenId(t));
     }
   });
   return result;
@@ -135,4 +168,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, denormalizeTokens, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };
+export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };

package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js

@@ -1,7 +1,4 @@
-import examples from './examples';
-import { V_MODEL } from './models/constants';
-
-var form_checkbox_tree = "# GlFormCheckboxTree\n\n<!-- STORY -->\n\n`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of\nchildren. It can be useful for creating a search filter that has nested facets.\n\n## Usage\n\n`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of\nan n-level deep tree. Each option should have a `value` and can have optional\n`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.\nHere's a simple `options` tree for example:\n\n```js\n[\n  {\n    label: 'Option #1',\n    value: 1,\n    children: [\n      {\n        label: 'Option #2',\n        value: 2,\n      },\n    ],\n  },\n  {\n    label: 'Option #3',\n    value: 3,\n  },\n]\n```\n\n`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with\nthe `change` event.\n\n## Dos and don'ts\n\n### Don't\n\nWhen rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be\npassed to the component via the `v-model`/`value` property. For example, with the options tree\nabove, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included\nin the initial value, don't rely on the component to infer initially checked boxes by only passing\n`1` or `2`.\n\n```html\n<!-- Good -->\n<gl-form-checkbox-tree\n  :value=\"[1, 2]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n\n<!-- Bad -->\n<gl-form-checkbox-tree\n  :value=\"[1]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n```\n";
+var form_checkbox_tree = "`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of\nchildren. It can be useful for creating a search filter that has nested facets.\n\n## Usage\n\n`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of\nan n-level deep tree. Each option should have a `value` and can have optional\n`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.\nHere's a simple `options` tree for example:\n\n```js\n[\n  {\n    label: 'Option #1',\n    value: 1,\n    children: [\n      {\n        label: 'Option #2',\n        value: 2,\n      },\n    ],\n  },\n  {\n    label: 'Option #3',\n    value: 3,\n  },\n]\n```\n\n`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with\nthe `change` event.\n\n## Dos and don'ts\n\n### Don't\n\nWhen rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be\npassed to the component via the `v-model`/`value` property. For example, with the options tree\nabove, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included\nin the initial value, don't rely on the component to infer initially checked boxes by only passing\n`1` or `2`.\n\n```html\n<!-- Good -->\n<gl-form-checkbox-tree\n  :value=\"[1, 2]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n\n<!-- Bad -->\n<gl-form-checkbox-tree\n  :value=\"[1]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n```\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,29 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var form_checkbox_tree_documentation = {
-  description,
-  examples,
-  propsInfo: {
-    options: {
-      additionalInfo: 'The options tree.'
-    },
-    [V_MODEL.PROP]: {
-      additionalInfo: 'The selected options as an array of values.'
-    },
-    hideToggleAll: {
-      additionalInfo: 'Set to true to hide the "Select/unselect all" checkbox'
-    },
-    selectAllLabel: {
-      additionalInfo: 'Label for the toggle all checkbox when some or all options are unchecked'
-    },
-    unselectAllLabel: {
-      additionalInfo: 'Label for the toggle all checkbox when all options are checked'
-    }
-  },
-  events: [{
-    event: V_MODEL.EVENT,
-    description: 'Emitted the selection changes.'
-  }]
+  description
 };
 
 export default form_checkbox_tree_documentation;

package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js

@@ -37,23 +37,35 @@ var script = {
     },
 
     /**
-     * Selected options
+     * The selected options as an array of values
      */
     value: {
       type: Array,
       required: false,
       default: () => []
     },
+
+    /**
+     * Set to true to hide the "Select/unselect all" checkbox
+     */
     hideToggleAll: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Label for the toggle all checkbox when some or all options are unchecked
+     */
     selectAllLabel: {
       type: String,
       required: false,
       default: 'Select all'
     },
+
+    /**
+     * Label for the toggle all checkbox when all options are checked
+     */
     unselectAllLabel: {
       type: String,
       required: false,
@@ -86,6 +98,9 @@ var script = {
   watch: {
     'tree.selected': {
       handler(selected) {
+        /**
+         * Emitted when the selection changes.
+         */
         this.$emit(V_MODEL.EVENT, selected);
       }