@gitlab/ui 72.11.1 → 72.12.0

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

@@ -1,49 +0,0 @@
-import { BForm } from 'bootstrap-vue/esm/components/form';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlForm',
-  components: {
-    BForm
-  },
-  inheritAttrs: false
-};
-
-/* 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',_vm._g(_vm._b({},'b-form',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,78 +0,0 @@
-import { BFormCheckbox } from 'bootstrap-vue/esm/index.js';
-import uniqueId from 'lodash/uniqueId';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormCheckbox',
-  components: {
-    BFormCheckbox
-  },
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'input'
-  },
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: () => uniqueId()
-    }
-  },
-  methods: {
-    change($event) {
-      /**
-       * Emitted when selected value(s) is changed due to user interaction.
-       *
-       * @event change
-       */
-      this.$emit('change', $event);
-    },
-    input($event) {
-      /**
-       * Emitted when checked state is changed.
-       *
-       * @event input
-       */
-      this.$emit('input', $event);
-    }
-  }
-};
-
-/* 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-checkbox',_vm._b({staticClass:"gl-form-checkbox",attrs:{"id":_vm.id},on:{"change":_vm.change,"input":_vm.input}},'b-form-checkbox',_vm.$attrs,false),[_vm._t("default"),_vm._v(" "),(Boolean(_vm.$scopedSlots.help))?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,60 +0,0 @@
-import { BFormCheckboxGroup } from 'bootstrap-vue/esm/index.js';
-import { formOptionsMixin } from 'bootstrap-vue/esm/mixins/form-options';
-import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
-import GlFormCheckbox from './form_checkbox';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormCheckboxGroup',
-  components: {
-    BFormCheckboxGroup,
-    GlFormCheckbox
-  },
-  directives: {
-    SafeHtml: SafeHtmlDirective
-  },
-  mixins: [formOptionsMixin],
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'input'
-  }
-};
-
-/* 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('div',[_c('b-form-checkbox-group',_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"change":function($event){return _vm.$emit('change', $event)},"input":function($event){return _vm.$emit('input', $event)}}},'b-form-checkbox-group',_vm.$attrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-checkbox',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,79 +0,0 @@
-import GlFormCheckbox from '../form_checkbox/form_checkbox';
-import { QA_PREFIX } from './models/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormCheckboxTreeNode',
-  qaPrefix: QA_PREFIX,
-  components: {
-    GlFormCheckbox
-  },
-  inject: ['tree'],
-  props: {
-    option: {
-      type: Object,
-      required: true
-    },
-    isNested: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    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,
-        isIndeterminate
-      } = this.node;
-      return [isChecked && 'js-is-checked', isIndeterminate && 'js-is-indeterminate'];
-    }
-  }
-};
-
-/* 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('div',{class:_vm.rootClass,attrs:{"data-testid":("" + (_vm.$options.qaPrefix) + (_vm.option.value))}},[_c('gl-form-checkbox',{class:_vm.checkboxClass,attrs:{"checked":_vm.node.isChecked,"indeterminate":_vm.node.isIndeterminate},on:{"change":function($event){return _vm.tree.toggleOption(_vm.option, $event)}}},[_vm._v("\n    "+_vm._s(_vm.label)+"\n  ")]),_vm._v(" "),_vm._l((_vm.option.children),function(child){return _c('gl-form-checkbox-tree-node',{key:child.value,attrs:{"option":child,"is-nested":""}})})],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,138 +0,0 @@
-import GlFormCheckbox from '../form_checkbox/form_checkbox';
-import GlFormGroup from '../form_group/form_group';
-import GlFormCheckboxTreeNode from './checkbox_tree_node';
-import { V_MODEL } from './models/constants';
-import { Tree } from './models/tree';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormCheckboxTree',
-  components: {
-    GlFormGroup,
-    GlFormCheckbox,
-    GlFormCheckboxTreeNode
-  },
-  provide() {
-    return {
-      tree: this.tree
-    };
-  },
-  model: {
-    prop: V_MODEL.PROP,
-    event: V_MODEL.EVENT
-  },
-  props: {
-    /**
-     * Options tree where each option is in the form:
-     * {
-     *  value: String|Number,
-     *  label: String,
-     *  children: Array,
-     * }
-     */
-    options: {
-      type: Array,
-      required: true
-    },
-    /**
-     * 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,
-      default: 'Unselect all'
-    },
-    label: {
-      type: String,
-      required: false,
-      default: 'Checkbox tree'
-    },
-    labelSrOnly: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  data() {
-    return {
-      tree: new Tree(this.options, this.value)
-    };
-  },
-  computed: {
-    toggleAllLabel() {
-      return this.tree.allOptionsChecked ? this.unselectAllLabel : this.selectAllLabel;
-    }
-  },
-  watch: {
-    'tree.selected': {
-      handler(selected) {
-        /**
-         * Emitted when the selection changes.
-         */
-        this.$emit(V_MODEL.EVENT, selected);
-      }
-    }
-  }
-};
-
-/* 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-form-group',{attrs:{"label":_vm.label,"label-sr-only":_vm.labelSrOnly}},[(!_vm.hideToggleAll)?_c('gl-form-checkbox',{staticClass:"gl-form-checkbox-tree-toggle-all",attrs:{"checked":_vm.tree.allOptionsChecked,"indeterminate":_vm.tree.someOptionsChecked},on:{"change":function($event){return _vm.tree.toggleAllOptions($event)}}},[_vm._v("\n    "+_vm._s(_vm.toggleAllLabel)+"\n  ")]):_vm._e(),_vm._v(" "),_vm._l((_vm.options),function(option){return _c('gl-form-checkbox-tree-node',{key:option.value,attrs:{"option":option}})})],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,12 +0,0 @@
-const CHECKED_STATE = {
-  UNCHECKED: 0,
-  INDETERMINATE: 1,
-  CHECKED: 2
-};
-const V_MODEL = {
-  PROP: 'value',
-  EVENT: 'change'
-};
-const QA_PREFIX = 'form_checkbox_tree_node_';
-
-export { CHECKED_STATE, QA_PREFIX, V_MODEL };

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

@@ -1,51 +0,0 @@
-import { CHECKED_STATE } from './constants';
-
-class Node {
-  constructor(_ref) {
-    let {
-      value,
-      label,
-      parent = null,
-      children = [],
-      depth,
-      isChecked
-    } = _ref;
-    this.value = value;
-    this.label = label;
-    this.parent = parent;
-    this.children = children;
-    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

@@ -1,199 +0,0 @@
-import { CHECKED_STATE } from './constants';
-import { Node } from './node';
-
-class Tree {
-  constructor(options, selected) {
-    this.treeDepth = 0;
-    this.nodes = {};
-    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
-   * @param {array}  selected  Pre-selected option values
-   * @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,
-        parent,
-        isChecked,
-        depth
-      });
-      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) => {
-        if (node.depth === i && node.isUnchecked) {
-          node.setCheckedState(this.optionHasSomeChildrenChecked(node) ? CHECKED_STATE.INDETERMINATE : node.checkedState);
-          removeIndices.push(nodeIndex);
-        }
-      });
-      removeIndices.reverse().forEach(index => {
-        nodes.splice(index, 1);
-      });
-    }
-  }
-
-  /**
-   * 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.
-   * We consider the INDETERMINATE state as a checked state so we can propagate INDETERMINATE states
-   * to the option's parents.
-   * @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 {
-        value
-      } = _ref;
-      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.
-   * @param {object} param0 The option to be toggled
-   * @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
-    } = _ref2;
-    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
-   * recursively propagates the state changes to all the ancestors chain until we have reached the
-   * 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)) {
-      node.checkedState = CHECKED_STATE.INDETERMINATE;
-    } else {
-      node.checkedState = CHECKED_STATE.UNCHECKED;
-    }
-    if (node.isChild) {
-      this.toggleParentOption(node.parent);
-    }
-  }
-}
-
-export { Tree };