@gitlab/ui 115.11.0 → 117.0.0

package/src/tokens/tokens_story.vue

@@ -2,18 +2,16 @@
 import { colorFromBackground } from '../utils/utils';
 import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import GlBadge from '../components/base/badge/badge.vue';
-import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
 export default {
   name: 'TokensStory',
   components: {
     GlBadge,
-    GlColorContrast,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
+  inject: ['containerClass'],
   props: {
     tokens: {
       type: Object,
@@ -30,7 +28,6 @@ export default {
     },
     getClasses(value) {
       if (!this.isHex(value)) return '';
-      if (!this.isBackgroundColorStory) return '';
 
       const textColorVariant = colorFromBackground(value, 4.5);
       return {
@@ -38,13 +35,6 @@ export default {
         'gl-text-neutral-0': textColorVariant === 'light',
       };
     },
-    getStyle(value) {
-      if (this.isBackgroundColorStory) {
-        return { backgroundColor: value };
-      }
-
-      return { color: value };
-    },
   },
 };
 </script>
@@ -57,7 +47,7 @@ export default {
         :key="token.name"
         class="gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3"
         :class="getClasses(token.$value)"
-        :style="getStyle(token.$value)"
+        :style="{ backgroundColor: token.$value }"
       >
         <code v-gl-tooltip :title="token.comment" class="gl-text-inherit">
           {{ getTokenName(token) }}
@@ -67,16 +57,6 @@ export default {
             Deprecated
           </gl-badge>
           <code class="gl-text-inherit">{{ token.$value }}</code>
-          <gl-color-contrast
-            v-if="isHex(token.$value)"
-            :foreground="token.$value"
-            :background="darkBackground"
-          />
-          <gl-color-contrast
-            v-if="isHex(token.$value)"
-            :foreground="token.$value"
-            :background="lightBackground"
-          />
         </div>
       </li>
     </ul>

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__ = /*#__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/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__ = /*#__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/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,200 +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
-   */
-  // eslint-disable-next-line max-params
-  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 };

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