@gitlab/ui 116.0.0 → 117.0.1

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

@@ -1,132 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  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 */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g({tag:"component",staticClass:"nav",class:_vm.classes},_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__ = /*#__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/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_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;
-  }
-}