@gitlab/ui 115.11.0 → 117.0.0

package/dist/components/base/nav/nav_item.js

@@ -1,125 +0,0 @@
-import GlLink from '../link/link';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlNavItem',
-  components: {
-    GlLink
-  },
-  props: {
-    /**
-     * When set to `true`, places the component in the active state with active styling
-     */
-    active: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * When set to `true`, disables the component's functionality and places it in a disabled state.
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Denotes the target URL of the link for standard links.
-     */
-    href: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * <router-link> prop: Denotes the target route of the link.
-     * When clicked, the value of the to prop will be passed to `router.push()` internally,
-     * so the value can be either a string or a Location descriptor object.
-     */
-    to: {
-      type: [Object, String],
-      required: false,
-      default: undefined
-    },
-    /**
-     * <router-link> prop: Configure the active CSS class applied when the link is active.
-     */
-    activeClass: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
-     */
-    exactActiveClass: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * Attributes for the link element
-     */
-    linkAttrs: {
-      type: Object,
-      required: false,
-      default: null
-    },
-    /**
-     * Classes for the link element
-     */
-    linkClasses: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
-  },
-  computed: {
-    computedLinkClasses() {
-      const classes = this.linkClasses;
-
-      // the `unstyled` link variant does not do this by itself
-      if (this.disabled) classes.push('disabled');
-      if (this.active) classes.push('active');
-      return classes;
-    }
-  }
-};
-
-/* 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('li',{staticClass:"nav-item"},[_c('gl-link',_vm._g(_vm._b({staticClass:"nav-link",class:_vm.computedLinkClasses,attrs:{"variant":"unstyled","active":_vm.active,"disabled":_vm.disabled,"href":_vm.href,"to":_vm.to,"active-class":_vm.activeClass,"exact-active-class":_vm.exactActiveClass}},'gl-link',_vm.linkAttrs,false),_vm.$listeners),[_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__ = /*#__PURE__*/__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 { __vue_component__ as default };

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

@@ -1,2 +0,0 @@
-A wrapper element for `gl-form-*` input elements. Supports `@submit` and `@reset` events.
-To disable native HTML validation pass the `novalidate` attribute.

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

@@ -1,53 +0,0 @@
-## Usage
-
-`GlFormCharacterCount` can be used to add a character count to an input.
-If you are using `GlFormTextarea` on its own see [with character count example](https://design.gitlab.com/storybook?path=/story/base-form-form-textarea--with-character-count).
-If you are wrapping your input, such as in a markdown component, and need the character
-count separate from the input, use `GlFormCharacterCount`.
-
-## Example
-
-```html
-<script>
-  import { GlFormCharacterCount, GlFormInput, GlFormGroup } from '@gitlab/ui'
-
-  export default {
-    inputId: 'form-input-with-character-count',
-    countTextId: 'character-count-text',
-    limit: 100,
-    components: { GlFormCharacterCount, GlFormInput, GlFormGroup },
-    data() {
-      return {
-        value: '',
-      }
-    },
-    methods: {
-      remainingCountText(count) {
-        return  n__('%d character remaining.', '%d characters remaining.', count)
-      },
-      overLimitText(count) {
-        return n__('%d character over limit.', '%d characters over limit.', count);
-      },
-    },
-  }
-<script>
-
-<template>
-  <gl-form-group label="Form input with character count" :label-for="$options.inputId">
-    <gl-form-input
-      v-model="value"
-      :id="$options.inputId"
-      :value="value"
-      :aria-describedby="$options.countTextId"
-    />
-    <gl-form-character-count
-      :value="value"
-      :limit="$options.limit"
-      :count-text-id="$options.countTextId"
-    >
-      <template #remaining-count-text="{ count }">{{ remainingCountText(count) }}</template>
-      <template #over-limit-text="{ count }">{{ overLimitText(count) }}</template>
-    </gl-form-character-count>
-  </gl-form-group>
-<template>
-```

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

@@ -1,58 +0,0 @@
-<script>
-import GlFormCheckbox from '../form_checkbox/form_checkbox.vue';
-import { QA_PREFIX } from './models/constants';
-
-export default {
-  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>
-
-<template>
-  <div :class="rootClass" :data-testid="`${$options.qaPrefix}${option.value}`">
-    <gl-form-checkbox
-      :checked="node.isChecked"
-      :indeterminate="node.isIndeterminate"
-      :class="checkboxClass"
-      @change="tree.toggleOption(option, $event)"
-    >
-      {{ label }}
-    </gl-form-checkbox>
-    <gl-form-checkbox-tree-node
-      v-for="child in option.children"
-      :key="child.value"
-      :option="child"
-      is-nested
-    />
-  </div>
-</template>

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

@@ -1,73 +0,0 @@
-`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of
-children. It can be useful for creating a search filter that has nested facets.
-
-## Usage
-
-`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of
-an n-level deep tree. Each option should have a `value` and can have optional
-`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.
-Here's a simple `options` tree for example:
-
-```js
-[
-  {
-    label: 'Option #1',
-    value: 1,
-    children: [
-      {
-        label: 'Option #2',
-        value: 2,
-      },
-    ],
-  },
-  {
-    label: 'Option #3',
-    value: 3,
-  },
-]
-```
-
-`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with
-the `change` event.
-
-## Dos and don'ts
-
-### Don't
-
-When rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be
-passed to the component via the `v-model`/`value` property. For example, with the options tree
-above, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included
-in the initial value, don't rely on the component to infer initially checked boxes by only passing
-`1` or `2`.
-
-```html
-<!-- Good -->
-<gl-form-checkbox-tree
-  :value="[1, 2]"
-  :options="[
-    {
-      value: 1,
-      children: [
-        {
-          value: 2,
-        },
-      ],
-    },
-  ]"
-/>
-
-<!-- Bad -->
-<gl-form-checkbox-tree
-  :value="[1]"
-  :options="[
-    {
-      value: 1,
-      children: [
-        {
-          value: 2,
-        },
-      ],
-    },
-  ]"
-/>
-```

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