@gitlab/ui 116.0.0 → 117.0.1

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/nav/nav.md

@@ -1,184 +0,0 @@
-## Overview
-
-The base `<gl-nav>` component is built with flexbox and provides a strong foundation for building all
-types of navigation components. It includes some style overrides (for working with lists), some link
-padding for larger hit areas, and basic disabled styling. No active states are included in the base
-nav.
-
-`<gl-nav>` supports the `<gl-nav-item>` child component for actionable links (or router-links).
-
-## Link appearance
-
-Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These
-variants are mutually exclusive - use only one style or the other.
-
-### Tab style
-
-Make the nav look like tabs by setting the `tabs` prop.
-
-```html
-<div>
-  <gl-nav tabs>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Another Link</gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</div>
-```
-
-### Pill style
-
-Use the pill style by setting the `pills` prop.
-
-```html
-<div>
-  <gl-nav pills>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Another Link</gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</div>
-```
-
-### Small
-
-Make the nav smaller by setting the `small` prop.
-
-```html
-<div>
-  <gl-nav small>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Another Link</gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</div>
-```
-
-## Fill and justify
-
-Force your `<gl-nav>` content to extend the full available width.
-
-### Fill
-
-To proportionately fill all available space with your `<gl-nav-item>` components, set the `fill`
-prop. Notice that all horizontal space is occupied, but not every nav item has the same width.
-
-```html
-<div>
-  <gl-nav tabs fill>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Link with a long name </gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</div>
-```
-
-### Justified
-
-For equal-width elements, set the `justified` prop instead. All horizontal space will be occupied by
-nav links, but unlike `fill` above, every `<gl-nav-item>` will be the same width.
-
-```html
-<div>
-  <gl-nav tabs justified>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Link with a long name </gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</div>
-```
-
-## Alignment
-
-To align your `<gl-nav-item>` components, use the `align` prop. Available values are `left`, `center`
-and `right`.
-
-```html
-<div>
-  <gl-nav tabs align="center">
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Link with a long name </gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</div>
-```
-
-## Tabbed local content support
-
-See the [`<gl-tabs>`](?path=/docs/base-tabs--docs) component for creating tabbable panes of local
-content (not suited for navigation).
-
-## Card integration
-
-Use a `<gl-nav>` in a [`<gl-card>`](?path=/docs/base-card--docs) header, by enabling the
-`card-header` prop on `<gl-nav>` and setting either the `pills` or `tabs` props:
-
-```html
-<div>
-  <gl-card title="Card Title">
-    <template #header>
-      <gl-nav card-header tabs>
-        <gl-nav-item active>Active</gl-nav-item>
-        <gl-nav-item>Inactive</gl-nav-item>
-      </gl-nav>
-    </template>
-
-    <template #default>
-      <p>With supporting text below as a natural lead-in to additional content.</p>
-      <gl-button variant="primary">Go somewhere</gl-button>
-    </template>
-  </gl-card>
-</div>
-```
-
-**Plain style:**
-
-The `card-header` prop is only needed when you are applying `tabs` or `pills` style. Note that
-we do not have special styling for `active` state plain style nav items.
-
-```html
-<div>
-  <gl-card title="Card Title">
-    <template #header>
-      <gl-nav>
-        <gl-nav-item active>Active</gl-nav-item>
-        <gl-nav-item>Inactive</gl-nav-item>
-      </gl-nav>
-    </template>
-
-    <template #default>
-      <p>pWith supporting text below as a natural lead-in to additional content.</p>
-      <gl-button variant="primary">Go somewhere</gl-button>
-    </template>
-  </gl-card>
-</div>
-```
-
-## Accessibility
-
-If you're using `<gl-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the
-most logical parent container of `<gl-nav>`, or wrap a `<nav>` element around `<gl-nav>`. Do **not**
-add the role to the `<gl-nav>` itself, as this would prevent it from being announced as an actual
-list by assistive technologies.
-
-### Tabbed interface accessibility
-
-Note that navigation bars, even if visually styled as tabs, should **not** be given
-`role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for
-[tabbed interfaces](?path=/docs/base-tabs--docs) that do not change the URL or `$route`, as
-described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
-See [`<gl-tabs>`](?path=/docs/base-tabs--docs) for dynamic tabbed interfaces that are compliant with
-WAI ARIA.
-
-## See also
-
-- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content, even via dropdown
-  menus.
-- [Router Link Support reference](?path=/docs/base-link--docs#router-link-support) for information
-  about router-link specific props available on `<gl-nav-item>`

package/src/components/base/nav/nav.scss

@@ -1,7 +0,0 @@
-.nav {
-  &-link {
-    &:focus-visible {
-      @apply gl-focus;
-    }
-  }
-}

package/src/components/base/nav/nav.vue

@@ -1,70 +0,0 @@
-<script>
-export default {
-  name: 'GlNav',
-  props: {
-    /**
-     * Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')
-     */
-    align: { type: String, required: false, default: '' },
-    /**
-     * Set this prop when the nav is placed inside a card header
-     */
-    cardHeader: { type: Boolean, required: false, default: false },
-    /**
-     * Proportionately fills all horizontal space with nav items.
-     * All horizontal space is occupied, but not every nav item has the same width
-     */
-    fill: { type: Boolean, required: false, default: false },
-    /**
-     * Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width
-     */
-    justified: { type: Boolean, required: false, default: false },
-    /**
-     * Renders the nav items with the appearance of pill buttons
-     */
-    pills: { type: Boolean, required: false, default: false },
-    /**
-     * Makes the nav smaller
-     */
-    small: { type: Boolean, required: false, default: false },
-    /**
-     * Renders the nav items with the appearance of tabs
-     */
-    tabs: { type: Boolean, required: false, default: false },
-    /**
-     * Specify the HTML tag to render instead of the default tag
-     */
-    tag: { type: String, required: false, default: 'ul' },
-  },
-  computed: {
-    justifyContent() {
-      if (!this.align) return '';
-
-      const alignMapping = {
-        left: 'start',
-        right: 'end',
-      };
-
-      return `justify-content-${alignMapping[this.align] || this.align}`;
-    },
-    classes() {
-      return {
-        'nav-tabs': this.tabs,
-        'nav-pills': this.pills && !this.tabs,
-        'card-header-tabs': this.cardHeader && this.tabs,
-        'card-header-pills': this.cardHeader && this.pills && !this.tabs,
-        'nav-fill': this.fill,
-        'nav-justified': this.justified,
-        [this.justifyContent]: this.align,
-        small: this.small,
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <component :is="tag" class="nav" :class="classes" v-on="$listeners">
-    <slot></slot>
-  </component>
-</template>

package/src/components/base/nav/nav_item.vue

@@ -1,109 +0,0 @@
-<script>
-import GlLink from '../link/link.vue';
-
-export default {
-  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>
-
-<template>
-  <li class="nav-item">
-    <gl-link
-      class="nav-link"
-      variant="unstyled"
-      :active="active"
-      :class="computedLinkClasses"
-      :disabled="disabled"
-      :href="href"
-      :to="to"
-      :active-class="activeClass"
-      :exact-active-class="exactActiveClass"
-      v-bind="linkAttrs"
-      v-on="$listeners"
-    >
-      <slot></slot>
-    </gl-link>
-  </li>
-</template>

package/src/components/base/token_selector/token_selector.md

@@ -1,78 +0,0 @@
-Choose from a provided list of tokens or add a user defined token.
-
-```html
-<script>
-export default {
-  data() {
-    return {
-      selectedTokens: [
-        {
-          id: 1,
-          name: 'Vue.js',
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-token-selector
-      v-model="selectedTokens"
-      :dropdown-items="[
-        {
-          id: 1,
-          name: 'Vue.js',
-        },
-        {
-          id: 2,
-          name: 'Ruby On Rails',
-        },
-        {
-          id: 3,
-          name: 'GraphQL',
-        },
-        {
-          id: 4,
-          name: 'Redis',
-        },
-      ]"
-    />
-    {{ selectedTokens }}
-  </div>
-</template>
-```
-
-## User created tokens
-
-This component allows for users to create their own tokens when configured to do so.
-There are two props that support this functionality: `allowUserDefinedTokens` and `showAddNewAlways`.
-
-`allowUserDefinedTokens` is required to enable the functionality
-
-When set to `true` and a user's search text returns nothing,
-they will be presented with an additional dropdown item `Add ...`
-that takes their current search input and emits `@input`.
-The parent component can then handle the event accordingly.
-
-Additionally, there are scenarios where the user may want the ability to add a new token
-even if some search results are returned.  This functionality can be enabled by additionally
-setting `showAddNewAlways` to `true`.
-This will allow for the `Add ...` dropdown item to appear at all times
-whenever a user has inputted text, regardless if results are found.
-
-```html
-<template>
-  <div>
-    <gl-token-selector
-      v-model="selectedTokens"
-      :dropdown-items="dropdownItems"
-      allow-user-defined-items
-      show-ad-new-always
-      @input="onTokenUpdate"
-    />
-    {{ selectedTokens }}
-  </div>
-</template>
-```

package/src/components/experimental/experiment_badge/experiment_badge.md

@@ -1,10 +0,0 @@
-The component represents a badge to mark experiment and beta features.
-It comes with a popover that explains what experiment or beta means, and links
-to [Support for features in different stages of development](https://docs.gitlab.com/ee/policy/development_stages_support.html)
-for more information.
-
-## Usage
-
-```html
-<gl-experiment-badge popover-placement="bottom" type="beta" />
-```