@gitlab/ui 49.0.0 → 49.0.2

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

@@ -28,7 +28,6 @@ var script = {
        */
       this.$emit('change', $event);
     },
-
     input($event) {
       /**
        * Emitted when checked state is changed.
@@ -37,7 +36,6 @@ var script = {
        */
       this.$emit('input', $event);
     }
-
   }
 };
 

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

@@ -24,15 +24,12 @@ var script = {
     node() {
       return this.tree.getNode(this.option.value);
     },
-
     label() {
       return this.node.label || this.node.value;
     },
-
     rootClass() {
       return this.isNested ? 'gl-ml-6' : null;
     },
-
     checkboxClass() {
       const {
         isChecked,
@@ -40,7 +37,6 @@ var script = {
       } = this.node;
       return [isChecked && 'js-is-checked', isIndeterminate && 'js-is-indeterminate'];
     }
-
   }
 };
 

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

@@ -11,13 +11,11 @@ var script = {
     GlFormCheckbox,
     GlFormCheckboxTreeNode
   },
-
   provide() {
     return {
       tree: this.tree
     };
   },
-
   model: {
     prop: V_MODEL.PROP,
     event: V_MODEL.EVENT
@@ -35,7 +33,6 @@ var script = {
       type: Array,
       required: true
     },
-
     /**
      * The selected options as an array of values
      */
@@ -44,7 +41,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Set to true to hide the "Select/unselect all" checkbox
      */
@@ -53,7 +49,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Label for the toggle all checkbox when some or all options are unchecked
      */
@@ -62,7 +57,6 @@ var script = {
       required: false,
       default: 'Select all'
     },
-
     /**
      * Label for the toggle all checkbox when all options are checked
      */
@@ -82,18 +76,15 @@ var script = {
       default: true
     }
   },
-
   data() {
     return {
       tree: new Tree(this.options, this.value)
     };
   },
-
   computed: {
     toggleAllLabel() {
       return this.tree.allOptionsChecked ? this.unselectAllLabel : this.selectAllLabel;
     }
-
   },
   watch: {
     'tree.selected': {
@@ -103,7 +94,6 @@ var script = {
          */
         this.$emit(V_MODEL.EVENT, selected);
       }
-
     }
   }
 };

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

@@ -17,44 +17,35 @@ class Node {
     this.depth = depth;
     this.checkedState = isChecked ? CHECKED_STATE.CHECKED : CHECKED_STATE.UNCHECKED;
   }
+
   /**
    * Sets the node's checked state
    * @param {number} checkedState
    */
-
-
   setCheckedState(checkedState) {
     this.checkedState = checkedState;
   }
-
   get isChild() {
     return this.parent !== null;
   }
-
   get isParent() {
     return this.children.length > 0;
   }
-
   get isLeaf() {
     return !this.isParent;
   }
-
   get isUnchecked() {
     return this.checkedState === CHECKED_STATE.UNCHECKED;
   }
-
   get isIndeterminate() {
     return this.checkedState === CHECKED_STATE.INDETERMINATE;
   }
-
   get isChecked() {
     return this.checkedState === CHECKED_STATE.CHECKED;
   }
-
   get isCheckedOrIndeterminate() {
     return this.isChecked || this.isIndeterminate;
   }
-
 }
 
 export { Node };

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

@@ -8,38 +8,35 @@ class Tree {
     this.initNodes(options, selected);
     this.initIndeterminateStates();
   }
+
   /**
    * @returns {[Node]} The tree as an array of Node instances
    */
-
-
   get nodesList() {
     return Object.values(this.nodes);
   }
+
   /**
    * @returns {array} The values currently selected
    */
-
-
   get selected() {
     return this.nodesList.filter(node => node.isChecked).map(node => node.value);
   }
+
   /**
    * @returns {boolean} Whether all options are checked
    */
-
-
   get allOptionsChecked() {
     return this.selected.length === this.nodesList.length;
   }
+
   /**
    * @returns {boolean} Whether some, but not all options are checked
    */
-
-
   get someOptionsChecked() {
     return this.selected.length > 0 && !this.allOptionsChecked;
   }
+
   /**
    * Creates a flat tree of Node instances.
    * @param {array}  options  The options list
@@ -47,22 +44,19 @@ class Tree {
    * @param {object} parent The options' parent
    * @param {number} depth  The current depth-level in the tree
    */
-
-
   initNodes() {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     let parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-
     if (!options.length) {
       return;
     }
-
     this.treeDepth = depth > this.treeDepth ? depth : this.treeDepth;
     options.forEach(option => {
       const isChecked = selected.includes(option.value);
-      this.nodes[option.value] = new Node({ ...option,
+      this.nodes[option.value] = new Node({
+        ...option,
         parent,
         isChecked,
         depth
@@ -70,16 +64,14 @@ class Tree {
       this.initNodes(option.children, selected, option, depth + 1);
     });
   }
+
   /**
    * Looks for UNCHECKED nodes and sets their checked state to INDETERMINATE if needed. We start
    * with the deepest leaves and we go up level by level to propagate the correct INDETERMINATE
    * states to each parent node.
    */
-
-
   initIndeterminateStates() {
     const nodes = [...this.nodesList];
-
     for (let i = this.treeDepth; i >= 0; i -= 1) {
       const removeIndices = [];
       nodes.forEach((node, nodeIndex) => {
@@ -93,16 +85,16 @@ class Tree {
       });
     }
   }
+
   /**
    * Returns true if all of the option's children are checked, false otherwise.
    * @param {object} option
    * @returns {boolean}
    */
-
-
   optionHasAllChildrenChecked(option) {
     return this.getOptionChildren(option).every(child => child.isChecked);
   }
+
   /**
    * Returns true if at least one of the option's children is in a checked or indeterminate state,
    * returns false otherwise.
@@ -111,28 +103,24 @@ class Tree {
    * @param {object} option
    * @returns {boolean}
    */
-
-
   optionHasSomeChildrenChecked(option) {
     return this.getOptionChildren(option).some(child => child.isCheckedOrIndeterminate);
   }
+
   /**
    * Returns the Node instance for a given option's value.
    * @param {number|string} value The option's value
    * @returns {Node}
    */
-
-
   getNode(value) {
     return this.nodes[value];
   }
+
   /**
    * Returns the option's children as Node instances.
    * @param {object} option
    * @returns {[Node]}
    */
-
-
   getOptionChildren(option) {
     return option.children.map(_ref => {
       let {
@@ -141,27 +129,26 @@ class Tree {
       return this.getNode(value);
     });
   }
+
   /**
    * Sets a node's state based on whether it got checked or unchecked
    * @param {Node} node The node to be toggled
    * @param {boolean} checked Whether the node should be checked
    */
-
-
   static toggleNodeState(node, checked) {
     node.setCheckedState(checked ? CHECKED_STATE.CHECKED : CHECKED_STATE.UNCHECKED);
   }
+
   /**
    * Toggles all options.
    * @param {boolean} checked Whether the options should be checked or unchecked
    */
-
-
   toggleAllOptions(checked) {
     this.nodesList.forEach(node => {
       Tree.toggleNodeState(node, checked);
     });
   }
+
   /**
    * Toggles an option's checked state and propagates the state change to the
    * option's parents and children.
@@ -169,8 +156,6 @@ class Tree {
    * @param {boolean} checked Whether the option is checked
    * @param {boolean} propagateToParent Whether the state should be propagated to the parents
    */
-
-
   toggleOption(_ref2, checked) {
     let {
       value
@@ -178,15 +163,14 @@ class Tree {
     let propagateToParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     const node = this.getNode(value);
     Tree.toggleNodeState(node, checked);
-
     if (node.isChild && propagateToParent) {
       this.toggleParentOption(node.parent);
     }
-
     if (node.isParent) {
       node.children.forEach(child => this.toggleOption(child, checked, false));
     }
   }
+
   /**
    * Toggles a parent option's checked state. This is called as a result of a child option being
    * toggled by the user and the change being propagated to that option's parents. This method
@@ -194,14 +178,11 @@ class Tree {
    * tree's trunk.
    * @param {object} param0 The option to be toggled
    */
-
-
   toggleParentOption(_ref3) {
     let {
       value
     } = _ref3;
     const node = this.getNode(value);
-
     if (this.optionHasAllChildrenChecked(node)) {
       node.checkedState = CHECKED_STATE.CHECKED;
     } else if (this.optionHasSomeChildrenChecked(node)) {
@@ -209,12 +190,10 @@ class Tree {
     } else {
       node.checkedState = CHECKED_STATE.UNCHECKED;
     }
-
     if (node.isChild) {
       this.toggleParentOption(node.parent);
     }
   }
-
 }
 
 export { Tree };

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

@@ -31,7 +31,6 @@ var script = {
       type: Array,
       required: true
     },
-
     /**
      * List of action functions to display at the bottom of the dropdown
      */
@@ -54,7 +53,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Placeholder text for input field
      */
@@ -64,7 +62,6 @@ var script = {
       default: undefined
     }
   },
-
   data() {
     return {
       results: [],
@@ -74,32 +71,25 @@ var script = {
       inputId: _uniqueId('token-input-')
     };
   },
-
   computed: {
     ariaExpanded() {
       return this.showSuggestions.toString();
     },
-
     showAutocomplete() {
       return this.showSuggestions ? 'off' : 'on';
     },
-
     showSuggestions() {
       return this.value.length > 0 && this.allItems.length > 0;
     },
-
     displayedValue() {
       return this.matchValueToAttr && this.value[this.matchValueToAttr] ? this.value[this.matchValueToAttr] : this.value;
     },
-
     resultsLength() {
       return this.results.length;
     },
-
     allItems() {
       return [...this.results, ...this.actionList];
     }
-
   },
   watch: {
     tokenList(newList) {
@@ -110,85 +100,67 @@ var script = {
         this.arrowCounter = -1;
       }
     }
-
   },
-
   mounted() {
     document.addEventListener('click', this.handleClickOutside);
   },
-
   destroyed() {
     document.removeEventListener('click', this.handleClickOutside);
   },
-
   methods: {
     closeSuggestions() {
       this.results = [];
       this.arrowCounter = -1;
       this.userDismissedResults = true;
     },
-
     handleClickOutside(event) {
       if (!this.$el.contains(event.target)) {
         this.closeSuggestions();
       }
     },
-
     focusItem(index) {
       var _this$$refs$suggestio;
-
       (_this$$refs$suggestio = this.$refs.suggestionsMenu.querySelectorAll('.gl-new-dropdown-item')[index]) === null || _this$$refs$suggestio === void 0 ? void 0 : _this$$refs$suggestio.querySelector('button').focus();
     },
-
     onArrowDown(e) {
       e.preventDefault();
       let newCount = this.arrowCounter + 1;
-
       if (newCount >= this.allItems.length) {
         newCount = 0;
       }
-
       this.arrowCounter = newCount;
       this.focusItem(newCount);
     },
-
     onArrowUp(e) {
       e.preventDefault();
       let newCount = this.arrowCounter - 1;
-
       if (newCount < 0) {
         newCount = this.allItems.length - 1;
       }
-
       this.arrowCounter = newCount;
       this.focusItem(newCount);
     },
-
     onEsc() {
       if (!this.showSuggestions) {
         this.$emit('input', '');
       }
-
       this.closeSuggestions();
     },
-
     onEntry(value) {
       this.$emit('input', value);
-      this.userDismissedResults = false; // short circuit so that we don't false match on empty string
+      this.userDismissedResults = false;
 
+      // short circuit so that we don't false match on empty string
       if (value.length < 1) {
         this.closeSuggestions();
         return;
       }
-
       const filteredTokens = this.tokenList.filter(token => {
         if (this.matchValueToAttr) {
           return token[this.matchValueToAttr].toLowerCase().includes(value.toLowerCase());
         }
-
         return token.toLowerCase().includes(value.toLowerCase());
       });
-
       if (filteredTokens.length) {
         this.openSuggestions(filteredTokens);
       } else {
@@ -196,11 +168,9 @@ var script = {
         this.arrowCounter = -1;
       }
     },
-
     openSuggestions(filteredResults) {
       this.results = filteredResults;
     },
-
     selectToken(value) {
       this.$emit('input', value);
       this.closeSuggestions();
@@ -208,20 +178,16 @@ var script = {
        * Emitted when a value is selected.
        * @event value-selected
        */
-
       this.$emit('value-selected', value);
     },
-
     selectAction(value) {
       value.fn();
       this.$emit('input', this.value);
       this.closeSuggestions();
     },
-
     resetCounter() {
       this.arrowCounter = -1;
     }
-
   }
 };
 

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

@@ -39,29 +39,24 @@ var script = {
         labelClass
       } = this;
       const defaultClass = 'col-form-label';
-
       if (_isString(labelClass)) {
         return `${labelClass} ${defaultClass}`;
       }
-
       if (_isArray(labelClass)) {
         return [...labelClass, defaultClass];
       }
-
       if (_isPlainObject(labelClass)) {
-        return { ...labelClass,
+        return {
+          ...labelClass,
           [defaultClass]: true
         };
       }
-
       return defaultClass;
     },
-
     hasLabelDescription() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.labelDescription || this.$slots['label-description']);
     }
-
   }
 };
 

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

@@ -33,7 +33,6 @@ var script = {
       if (this.size === null) {
         return [];
       }
-
       if (_isObject(this.size)) {
         const {
           default: defaultSize,
@@ -44,21 +43,18 @@ var script = {
           return `gl-${breakpoint}-form-input-${size}`;
         })];
       }
-
       return [`gl-form-input-${this.size}`];
     },
-
     listeners() {
       var _this = this;
-
-      return { ...this.$listeners,
+      return {
+        ...this.$listeners,
         // Swap purpose of input and update events from underlying BFormInput.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-
           /**
            * Emitted to update the v-model
            *
@@ -71,7 +67,6 @@ var script = {
           for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
             args[_key2] = arguments[_key2];
           }
-
           /**
            * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
            * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
@@ -83,7 +78,6 @@ var script = {
         }
       };
     }
-
   }
 };
 

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

@@ -24,7 +24,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
      */
@@ -48,20 +47,17 @@ var script = {
       default: ''
     }
   },
-
   data() {
     return {
       activeOption: this.predefinedOptions && this.predefinedOptions[0].name
     };
   },
-
   methods: {
     handleClick() {
       if (this.selectOnClick) {
         this.$refs.input.$el.select();
       }
     },
-
     updateValue(option) {
       const {
         name,
@@ -70,7 +66,6 @@ var script = {
       this.activeOption = name;
       this.localValue = value;
     }
-
   }
 };
 

package/dist/components/base/form/form_input_group/form_input_group_mixin.js

@@ -5,31 +5,25 @@ const InputGroupMixin = {
       default: ''
     }
   },
-
   data() {
     return {
       localValue: this.stringifyValue(this.value)
     };
   },
-
   watch: {
     value(newVal) {
       if (newVal !== this.localValue) {
         this.localValue = this.stringifyValue(newVal);
       }
     },
-
     localValue(newVal) {
       if (newVal !== this.value) {
         this.$emit('input', newVal);
       }
     }
-
   },
-
   mounted() {
     const value = this.stringifyValue(this.value);
-
     if (this.activeOption) {
       const activeOption = this.predefinedOptions.find(opt => opt.name === this.activeOption);
       this.localValue = activeOption.value;
@@ -37,12 +31,10 @@ const InputGroupMixin = {
       this.localValue = value;
     }
   },
-
   methods: {
     stringifyValue(value) {
       return value === undefined || value === null ? '' : String(value);
     }
-
   }
 };