@gitlab/ui 38.1.0 → 38.2.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [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_token.js

@@ -1,3 +1,4 @@
+import _cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
@@ -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,7 +198,7 @@ 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
@@ -219,7 +231,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 +261,7 @@ var script = {
         } = _ref2;
         return value.startsWith(potentialValue);
       })) {
-        if (this.value.data === '') {
+        if (this.tokenValue.data === '') {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -259,7 +271,7 @@ var script = {
 
     activateDataSegment() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: ''
         });
       }
@@ -269,7 +281,7 @@ var script = {
 
     handleComplete() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: this.multiSelectValues.join(COMMA)
         });
       }
@@ -301,14 +313,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/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);
       }