@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.vue

@@ -1,116 +0,0 @@
-<script>
-import GlFormCheckbox from '../form_checkbox/form_checkbox.vue';
-import GlFormGroup from '../form_group/form_group.vue';
-import GlFormCheckboxTreeNode from './checkbox_tree_node.vue';
-import { V_MODEL } from './models/constants';
-import { Tree } from './models/tree';
-
-export default {
-  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>
-
-<template>
-  <gl-form-group :label="label" :label-sr-only="labelSrOnly">
-    <gl-form-checkbox
-      v-if="!hideToggleAll"
-      class="gl-form-checkbox-tree-toggle-all"
-      :checked="tree.allOptionsChecked"
-      :indeterminate="tree.someOptionsChecked"
-      @change="tree.toggleAllOptions($event)"
-    >
-      {{ toggleAllLabel }}
-    </gl-form-checkbox>
-    <gl-form-checkbox-tree-node v-for="option in options" :key="option.value" :option="option" />
-  </gl-form-group>
-</template>

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

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

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

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

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

@@ -1,186 +0,0 @@
-import { CHECKED_STATE } from './constants';
-import { Node } from './node';
-
-export 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
-   */
-  // eslint-disable-next-line max-params
-  initNodes(options = [], selected = [], parent = null, depth = 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(({ value }) => 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({ value }, checked, propagateToParent = 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({ value }) {
-    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);
-    }
-  }
-}

package/src/components/base/form/form_combobox/constants.js

@@ -1,50 +0,0 @@
-export const stringTokenList = [
-  'giraffe',
-  'dog',
-  'dodo',
-  'komodo dragon',
-  'hippo',
-  'platypus',
-  'jackalope',
-  'quetzal',
-  'badger',
-  'vicuña',
-  'whale',
-  'xenarthra',
-];
-
-export const labelText = 'Animals We Tolerate';
-
-export const objectTokenList = [
-  { id: '1', title: 'giraffe' },
-  { id: '2', title: 'dog' },
-  { id: '3', title: 'dodo' },
-  { id: '4', title: 'komodo dragon' },
-  { id: '5', title: 'hippo' },
-  { id: '6', title: 'platypus' },
-  { id: '7', title: 'jackalope' },
-  { id: '8', title: 'quetzal' },
-  { id: '9', title: 'badger' },
-  { id: '10', title: 'vicuña' },
-  { id: '11', title: 'whale' },
-  { id: '12', title: 'xenarthra' },
-];
-
-export const oneTokenList = ['dog'];
-
-export const actionsList = [
-  {
-    label: 'Create',
-    fn: () => {
-      // eslint-disable-next-line no-alert
-      window.alert('Create action');
-    },
-  },
-  {
-    label: 'Edit',
-    fn: () => {
-      // eslint-disable-next-line no-alert
-      window.alert('Edit action');
-    },
-  },
-];

package/src/components/base/form/form_combobox/form_combobox.md

@@ -1,52 +0,0 @@
-Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component
-with synchronous autocomplete dropdown. It behaves as follows:
-
-- Typing matches tokens; dropdown disappears when there is no match  
-- Up and down arrows navigate the dropdown  
-- Enter selects keyboard-highlighted item; clicking overrides this  
-- Esc closes dropdown when it is open, clears field when it is not  
-- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  
-- Tab selects current entered text and moves to next field  
-
-This behavior based on
-[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)
-and [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).
-
-## Usage
-
-The combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates
-unique element IDs so multiple can be used on one page without clashing.
-
-On selection it sets the input value to the selected string and emits a `value-selected` event for
-consumption by parent components.
-
-```html
-<gl-form-combobox
-  v-model="inputVal"
-  :token-list="tokens"
-  label-text="Combobox Label"
-/>
-```
-
-It does not have a loading state nor does it accept tokens other than strings. It allows for one
-selected value.
-
-### What if I need to load the options asynchronously?
-
-You may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].
-
-### What if I need multiple options?
-
-The [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search
-and include tokens.
-
-## Edge cases
-
-The algorithm to match tokens with the input is very naive. If you need to use the component with a
-very large list of matches, you may want to update the implementation or use one of the search
-inputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].
-
-[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default
-[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default
-[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default
-[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default

package/src/components/base/form/form_combobox/form_combobox.scss

@@ -1,5 +0,0 @@
-.gl-form-combobox {
-  .gl-form-combobox-inner {
-    max-height: $gl-max-dropdown-max-height;
-  }
-}