@gitlab/ui 38.0.0 → 38.2.0

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';
@@ -17,6 +18,7 @@ const DEFAULT_OPERATORS = [{
   description: 'is not'
 }];
 var script = {
+  name: 'GlFilteredSearchToken',
   components: {
     GlToken,
     GlFilteredSearchTokenSegment
@@ -28,11 +30,19 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Token configuration with available operators and options.
+     */
     config: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * Determines if the token is being edited or not.
+     */
     active: {
       type: Boolean,
       required: false,
@@ -43,6 +53,10 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Current token value.
+     */
     value: {
       type: Object,
       required: false,
@@ -51,6 +65,10 @@ var script = {
         data: ''
       })
     },
+
+    /**
+     * Display operators' descriptions instead of their values (e.g., "is" instead of "=").
+     */
     showFriendlyText: {
       type: Boolean,
       required: false,
@@ -60,7 +78,8 @@ var script = {
 
   data() {
     return {
-      activeSegment: null
+      activeSegment: null,
+      tokenValue: _cloneDeep(this.value)
     };
   },
 
@@ -70,7 +89,7 @@ var script = {
     },
 
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.value.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
     },
 
     availableTokensWithSelf() {
@@ -80,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;
     }
 
@@ -91,13 +110,29 @@ var script = {
     SEGMENT_OPERATOR
   },
   watch: {
-    value: {
+    tokenValue: {
       deep: true,
 
       handler(newValue) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
         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,
@@ -105,10 +140,16 @@ 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.
+           *
+           * @event destroy
+           */
+
           this.$emit('destroy');
         }
       }
@@ -117,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: ''
         });
       }
@@ -137,6 +178,11 @@ var script = {
       this.activeSegment = segment;
 
       if (!this.active) {
+        /**
+         * Emitted when this term token is clicked.
+         *
+         * @event activate
+         */
         this.$emit('activate');
       }
     },
@@ -152,7 +198,11 @@ 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: {
@@ -167,6 +217,11 @@ var script = {
 
       if (newTokenConfig === this.config) {
         this.$nextTick(() => {
+          /**
+           * Emitted when this term token will lose its focus.
+           *
+           * @event deactivate
+           */
           this.$emit('deactivate');
         });
         return;
@@ -176,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: ''
           }
         });
@@ -206,7 +261,7 @@ var script = {
         } = _ref2;
         return value.startsWith(potentialValue);
       })) {
-        if (this.value.data === '') {
+        if (this.tokenValue.data === '') {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -216,7 +271,7 @@ var script = {
 
     activateDataSegment() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: ''
         });
       }
@@ -226,10 +281,16 @@ var script = {
 
     handleComplete() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: this.multiSelectValues.join(COMMA)
         });
       }
+      /**
+       * Emitted when the token entry has been completed.
+       *
+       * @event complete
+       */
+
 
       this.$emit('complete');
     },
@@ -252,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/filtered_search/filtered_search_token_segment.documentation.js

@@ -1,4 +1,4 @@
-var filtered_search_token_segment = "# Filtered Search Token Segment\n\nThe filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
+var filtered_search_token_segment = "The filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6,51 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var filtered_search_token_segment_documentation = {
-  description,
-  bootstrapComponent: null,
-  propsInfo: {
-    active: {
-      additionalInfo: 'If this term token is currently active'
-    },
-    options: {
-      additionalInfo: ''
-    },
-    optionTextField: {
-      additionalInfo: ''
-    },
-    customInputKeydownHandler: {
-      additionalInfo: ''
-    },
-    value: {
-      additionalInfo: 'Current term value'
-    },
-    searchInputAttributes: {
-      additionalInfo: 'HTML attributes to add to the search input'
-    },
-    isLastToken: {
-      additionalInfo: 'If this is the last token'
-    }
-  },
-  events: [{
-    event: 'activate',
-    description: 'Emitted on mousedown event on the main component'
-  }, {
-    event: 'backspace',
-    description: 'Emitted when Backspace is pressed and the value is empty'
-  }, {
-    event: 'complete',
-    description: 'Emitted when suggestion is selected from the suggestion list'
-  }, {
-    event: 'submit',
-    description: 'Emitted when Enter is pressed and no suggestion is selected'
-  }, {
-    event: 'split',
-    args: [{
-      arg: 'newStrings',
-      description: '(Array of strings) New strings to be converted into term tokens'
-    }],
-    description: 'Emitted when Space appears in token segment value'
-  }]
+  description
 };
 
 export default filtered_search_token_segment_documentation;

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

@@ -7,6 +7,7 @@ import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlFilteredSearchTokenSegment',
   components: {
     Portal,
     GlFilteredSearchSuggestionList,
@@ -15,6 +16,9 @@ var script = {
   inject: ['portalName', 'alignSuggestions'],
   inheritAttrs: false,
   props: {
+    /**
+     * If this token segment is currently being edited.
+     */
     active: {
       type: Boolean,
       required: false,
@@ -45,15 +49,27 @@ var script = {
       required: false,
       default: () => () => false
     },
+
+    /**
+     * Current term value
+     */
     value: {
       required: true,
       validator: () => true
     },
+
+    /**
+     * HTML attributes to add to the search input
+     */
     searchInputAttributes: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * If this is the last token
+     */
     isLastToken: {
       type: Boolean,
       required: false,
@@ -91,6 +107,11 @@ var script = {
       set(v) {
         var _this$getMatchingOpti, _this$getMatchingOpti2;
 
+        /**
+         * Emitted when this token segment's value changes.
+         *
+         * @type {object} option The current option.
+         */
         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);
       }
 
@@ -152,6 +173,10 @@ var script = {
       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
+         * @property {array|string} newStrings New strings to be converted into term tokens
+         */
         this.$emit('split', otherWords);
       }
     }
@@ -160,6 +185,9 @@ var script = {
   methods: {
     emitIfInactive(e) {
       if (!this.active) {
+        /**
+         * Emitted on mousedown event on the main component.
+         */
         this.$emit('activate');
         e.preventDefault();
       }
@@ -208,6 +236,12 @@ var script = {
 
     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) {
@@ -228,6 +262,10 @@ var script = {
       if (key === 'Backspace') {
         if (this.inputValue === '') {
           e.preventDefault();
+          /**
+           * Emitted when Backspace is pressed and the value is empty
+           */
+
           this.$emit('backspace');
         }
 
@@ -241,6 +279,9 @@ var script = {
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
+            /**
+             * Emitted when Enter is pressed and no suggestion is selected
+             */
             this.$emit('submit');
           }
         },
@@ -252,6 +293,10 @@ var script = {
         },
         Escape: () => {
           e.preventDefault();
+          /**
+           * Emitted when suggestion is selected from the suggestion list
+           */
+
           this.$emit('complete');
         }
       };
@@ -282,6 +327,9 @@ var script = {
       if (this.multiSelect) {
         this.$emit('complete');
       } else if (this.active) {
+        /**
+         * Emitted when this term token will lose its focus.
+         */
         this.$emit('deactivate');
       }
     }

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);
       }
 

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

@@ -30,7 +30,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('b-form-radio',_vm._g(_vm._b({staticClass:"gl-form-radio",attrs:{"checked":_vm.checked},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),(_vm.$scopedSlots.help)?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio',_vm._b({staticClass:"gl-form-radio",attrs:{"checked":_vm.checked},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio',_vm.$attrs,false),[_vm._t("default"),_vm._v(" "),(_vm.$scopedSlots.help)?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/series_label/series_label.js

@@ -11,7 +11,12 @@ var script = {
     type: {
       type: String,
       required: false,
-      default: 'solid'
+      default: 'solid',
+
+      validator(value) {
+        return ['solid', 'dashed'].indexOf(value) !== -1;
+      }
+
     }
   },