@gitlab/ui 132.0.1 → 132.0.3

package/dist/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -0,0 +1,690 @@
+import { extend, COMPONENT_UID_KEY, REF_FOR_KEY } from '../../vue';
+import { NAME_TABS, NAME_TAB_BUTTON_HELPER } from '../../constants/components';
+import { IS_BROWSER } from '../../constants/env';
+import { EVENT_NAME_CHANGED, EVENT_NAME_ACTIVATE_TAB, EVENT_NAME_CLICK, EVENT_NAME_FIRST, EVENT_NAME_PREV, EVENT_NAME_NEXT, EVENT_NAME_LAST } from '../../constants/events';
+import { CODE_SPACE, CODE_UP, CODE_LEFT, CODE_HOME, CODE_DOWN, CODE_RIGHT, CODE_END } from '../../constants/key-codes';
+import { PROP_TYPE_NUMBER, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
+import { SLOT_NAME_TABS_START, SLOT_NAME_TABS_END, SLOT_NAME_TOOLBAR_START, SLOT_NAME_TOOLBAR_END, SLOT_NAME_EMPTY, SLOT_NAME_TITLE } from '../../constants/slots';
+import { BvEvent } from '../../utils/bv-event.class';
+import { selectAll, attemptFocus, requestAF } from '../../utils/dom';
+import { stopEvent } from '../../utils/events';
+import { identity } from '../../utils/identity';
+import { isEvent } from '../../utils/inspect';
+import { looseEqual } from '../../utils/loose-equal';
+import { mathMax } from '../../utils/math';
+import { makeModelMixin } from '../../utils/model';
+import { toInteger } from '../../utils/number';
+import { sortKeys } from '../../utils/object';
+import { observeDom } from '../../utils/observe-dom';
+import { stableSort } from '../../utils/stable-sort';
+import { props as props$1, idMixin } from '../../mixins/id';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+import { BLink } from '../link/link';
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('value', {
+  type: PROP_TYPE_NUMBER
+});
+
+// --- Helper methods ---
+
+// Filter function to filter out disabled tabs
+const notDisabled = tab => !tab.disabled;
+
+// --- Helper components ---
+
+// @vue/component
+const BVTabButton = /*#__PURE__*/extend({
+  name: NAME_TAB_BUTTON_HELPER,
+  inject: {
+    getBvTabs: {
+      default: /* istanbul ignore next */() => () => ({})
+    }
+  },
+  props: {
+    controls: {
+      type: PROP_TYPE_STRING,
+      required: false,
+      default: undefined
+    },
+    id: {
+      type: PROP_TYPE_STRING,
+      required: false,
+      default: undefined
+    },
+    noKeyNav: {
+      type: PROP_TYPE_BOOLEAN,
+      required: false,
+      default: false
+    },
+    posInSet: {
+      type: PROP_TYPE_NUMBER,
+      required: false,
+      default: undefined
+    },
+    setSize: {
+      type: PROP_TYPE_NUMBER,
+      required: false,
+      default: undefined
+    },
+    // Reference to the child <b-tab> instance
+    tab: {
+      required: false,
+      default: undefined
+    },
+    tabIndex: {
+      type: PROP_TYPE_NUMBER,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    bvTabs() {
+      return this.getBvTabs();
+    }
+  },
+  methods: {
+    focus() {
+      attemptFocus(this.$refs.link);
+    },
+    handleEvent(event) {
+      /* istanbul ignore next */
+      if (this.tab.disabled) {
+        return;
+      }
+      const {
+        type,
+        keyCode,
+        shiftKey
+      } = event;
+      if (type === 'click') {
+        stopEvent(event);
+        this.$emit(EVENT_NAME_CLICK, event);
+      } else if (type === 'keydown' && keyCode === CODE_SPACE) {
+        // For ARIA tabs the SPACE key will also trigger a click/select
+        // Even with keyboard navigation disabled, SPACE should "click" the button
+        // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/4323
+        stopEvent(event);
+        this.$emit(EVENT_NAME_CLICK, event);
+      } else if (type === 'keydown' && !this.noKeyNav) {
+        // For keyboard navigation
+        if ([CODE_UP, CODE_LEFT, CODE_HOME].indexOf(keyCode) !== -1) {
+          stopEvent(event);
+          if (shiftKey || keyCode === CODE_HOME) {
+            this.$emit(EVENT_NAME_FIRST, event);
+          } else {
+            this.$emit(EVENT_NAME_PREV, event);
+          }
+        } else if ([CODE_DOWN, CODE_RIGHT, CODE_END].indexOf(keyCode) !== -1) {
+          stopEvent(event);
+          if (shiftKey || keyCode === CODE_END) {
+            this.$emit(EVENT_NAME_LAST, event);
+          } else {
+            this.$emit(EVENT_NAME_NEXT, event);
+          }
+        }
+      }
+    }
+  },
+  render(h) {
+    const {
+      id,
+      tabIndex,
+      setSize,
+      posInSet,
+      controls,
+      handleEvent
+    } = this;
+    const {
+      title,
+      localActive,
+      disabled,
+      titleItemClass,
+      titleLinkClass,
+      titleLinkAttributes
+    } = this.tab;
+    const $link = h(BLink, {
+      staticClass: 'nav-link',
+      class: [{
+        active: localActive && !disabled,
+        disabled
+      }, titleLinkClass,
+      // Apply <b-tabs> `activeNavItemClass` styles when the tab is active
+      localActive ? this.bvTabs.activeNavItemClass : null],
+      props: {
+        disabled
+      },
+      attrs: {
+        ...titleLinkAttributes,
+        id,
+        role: 'tab',
+        // Roving tab index when keynav enabled
+        tabindex: tabIndex,
+        'aria-selected': localActive && !disabled ? 'true' : 'false',
+        'aria-setsize': setSize,
+        'aria-posinset': posInSet,
+        'aria-controls': controls
+      },
+      on: {
+        click: handleEvent,
+        keydown: handleEvent
+      },
+      ref: 'link'
+    }, [this.tab.normalizeSlot(SLOT_NAME_TITLE) || title]);
+    return h('li', {
+      staticClass: 'nav-item',
+      class: [titleItemClass],
+      attrs: {
+        role: 'presentation'
+      }
+    }, [$link]);
+  }
+});
+
+// --- Props ---
+const navProps = {
+  align: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  fill: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  justified: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  pills: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  small: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
+};
+const props = sortKeys({
+  ...props$1,
+  ...modelProps,
+  ...navProps,
+  // Only applied to the currently active `li`
+  activeNavItemClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  // Only applied to the currently active `<b-tab>`
+  // This prop is sniffed by the `<b-tab>` child
+  activeTabClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  contentClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  // Synonym for 'bottom'
+  end: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // This prop is sniffed by the `<b-tab>` child
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  navClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  navWrapperClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  noFade: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noKeyNav: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noNavStyle: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  }
+});
+
+// --- Main component ---
+
+// @vue/component
+const BTabs = /*#__PURE__*/extend({
+  name: NAME_TABS,
+  mixins: [idMixin, modelMixin, normalizeSlotMixin],
+  provide() {
+    return {
+      getBvTabs: () => this
+    };
+  },
+  props,
+  data() {
+    return {
+      // Index of current tab
+      currentTab: toInteger(this[MODEL_PROP_NAME], -1),
+      // Array of direct child `<b-tab>` instances, in DOM order
+      tabs: [],
+      // Array of child instances registered (for triggering reactive updates)
+      registeredTabs: []
+    };
+  },
+  computed: {
+    fade() {
+      // This computed prop is sniffed by the tab child
+      return !this.noFade;
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue, oldValue) {
+      if (newValue !== oldValue) {
+        newValue = toInteger(newValue, -1);
+        oldValue = toInteger(oldValue, 0);
+        const $tab = this.tabs[newValue];
+        if ($tab && !$tab.disabled) {
+          this.activateTab($tab);
+        } else {
+          // Try next or prev tabs
+          if (newValue < oldValue) {
+            this.previousTab();
+          } else {
+            this.nextTab();
+          }
+        }
+      }
+    },
+    currentTab(newValue) {
+      let index = -1;
+
+      // Ensure only one tab is active at most
+      this.tabs.forEach(($tab, i) => {
+        if (i === newValue && !$tab.disabled) {
+          $tab.localActive = true;
+          index = i;
+        } else {
+          $tab.localActive = false;
+        }
+      });
+
+      // Update the v-model
+      this.$emit(MODEL_EVENT_NAME, index);
+    },
+    // If tabs added, removed, or re-ordered, we emit a `changed` event
+    tabs(newValue, oldValue) {
+      // We use `_uid` instead of `safeId()`, as the later is changed in a `$nextTick()`
+      // if no explicit ID is provided, causing duplicate emits
+      if (!looseEqual(newValue.map($tab => $tab[COMPONENT_UID_KEY]), oldValue.map($tab => $tab[COMPONENT_UID_KEY]))) {
+        // In a `$nextTick()` to ensure `currentTab` has been set first
+        this.$nextTick(() => {
+          // We emit shallow copies of the new and old arrays of tabs,
+          // to prevent users from potentially mutating the internal arrays
+          this.$emit(EVENT_NAME_CHANGED, newValue.slice(), oldValue.slice());
+        });
+      }
+    },
+    // Each `<b-tab>` will register/unregister itself
+    // We use this to detect when tabs are added/removed
+    // to trigger the update of the tabs
+    registeredTabs() {
+      this.updateTabs();
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_observer = null;
+  },
+  mounted() {
+    this.setObserver(true);
+  },
+  beforeDestroy() {
+    this.setObserver(false);
+    // Ensure no references to child instances exist
+    this.tabs = [];
+  },
+  methods: {
+    registerTab($tab) {
+      if (!this.registeredTabs.includes($tab)) {
+        this.registeredTabs.push($tab);
+      }
+    },
+    unregisterTab($tab) {
+      this.registeredTabs = this.registeredTabs.slice().filter($t => $t !== $tab);
+    },
+    // DOM observer is needed to detect changes in order of tabs
+    setObserver() {
+      let on = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.$_observer && this.$_observer.disconnect();
+      this.$_observer = null;
+      if (on) {
+        /* istanbul ignore next: difficult to test mutation observer in JSDOM */
+        const handler = () => {
+          this.$nextTick(() => {
+            requestAF(() => {
+              this.updateTabs();
+            });
+          });
+        };
+
+        // Watch for changes to `<b-tab>` sub components
+        this.$_observer = observeDom(this.$refs.content, handler, {
+          childList: true,
+          subtree: false,
+          attributes: true,
+          attributeFilter: ['id']
+        });
+      }
+    },
+    getTabs() {
+      const $tabs = this.registeredTabs;
+      // Dropped intentionally
+      // .filter(
+      //   $tab => $tab.$children.filter($t => $t && $t._isTab).length === 0
+      // )
+
+      // DOM Order of Tabs
+      let order = [];
+      /* istanbul ignore next: too difficult to test */
+      if (IS_BROWSER && $tabs.length > 0) {
+        // We rely on the DOM when mounted to get the "true" order of the `<b-tab>` children
+        // `querySelectorAll()` always returns elements in document order, regardless of
+        // order specified in the selector
+        const selector = $tabs.map($tab => `#${$tab.safeId()}`).join(', ');
+        order = selectAll(selector, this.$el).map($el => $el.id).filter(identity);
+      }
+
+      // Stable sort keeps the original order if not found in the `order` array,
+      // which will be an empty array before mount
+      return stableSort($tabs, (a, b) => order.indexOf(a.safeId()) - order.indexOf(b.safeId()));
+    },
+    updateTabs() {
+      const $tabs = this.getTabs();
+
+      // Find last active non-disabled tab in current tabs
+      // We trust tab state over `currentTab`, in case tabs were added/removed/re-ordered
+      let tabIndex = $tabs.indexOf($tabs.slice().reverse().find($tab => $tab.localActive && !$tab.disabled));
+
+      // Else try setting to `currentTab`
+      if (tabIndex < 0) {
+        const {
+          currentTab
+        } = this;
+        if (currentTab >= $tabs.length) {
+          // Handle last tab being removed, so find the last non-disabled tab
+          tabIndex = $tabs.indexOf($tabs.slice().reverse().find(notDisabled));
+        } else if ($tabs[currentTab] && !$tabs[currentTab].disabled) {
+          // Current tab is not disabled
+          tabIndex = currentTab;
+        }
+      }
+
+      // Else find first non-disabled tab in current tabs
+      if (tabIndex < 0) {
+        tabIndex = $tabs.indexOf($tabs.find(notDisabled));
+      }
+
+      // Ensure only one tab is active at a time
+      $tabs.forEach(($tab, index) => {
+        $tab.localActive = index === tabIndex;
+      });
+      this.tabs = $tabs;
+      this.currentTab = tabIndex;
+    },
+    // Find a button that controls a tab, given the tab reference
+    // Returns the button vm instance
+    getButtonForTab($tab) {
+      return (this.$refs.buttons || []).find($btn => $btn.tab === $tab);
+    },
+    // Force a button to re-render its content, given a `<b-tab>` instance
+    // Called by `<b-tab>` on `update()`
+    updateButton($tab) {
+      const $button = this.getButtonForTab($tab);
+      if ($button && $button.$forceUpdate) {
+        $button.$forceUpdate();
+      }
+    },
+    // Activate a tab given a `<b-tab>` instance
+    // Also accessed by `<b-tab>`
+    activateTab($tab) {
+      const {
+        currentTab,
+        tabs: $tabs
+      } = this;
+      let result = false;
+      if ($tab) {
+        const index = $tabs.indexOf($tab);
+        if (index !== currentTab && index > -1 && !$tab.disabled) {
+          const tabEvent = new BvEvent(EVENT_NAME_ACTIVATE_TAB, {
+            cancelable: true,
+            vueTarget: this,
+            componentId: this.safeId()
+          });
+          this.$emit(tabEvent.type, index, currentTab, tabEvent);
+          if (!tabEvent.defaultPrevented) {
+            this.currentTab = index;
+            result = true;
+          }
+        }
+      }
+
+      // Couldn't set tab, so ensure v-model is up to date
+      /* istanbul ignore next: should rarely happen */
+      if (!result && this[MODEL_PROP_NAME] !== currentTab) {
+        this.$emit(MODEL_EVENT_NAME, currentTab);
+      }
+      return result;
+    },
+    // Deactivate a tab given a `<b-tab>` instance
+    // Accessed by `<b-tab>`
+    deactivateTab($tab) {
+      if ($tab) {
+        // Find first non-disabled tab that isn't the one being deactivated
+        // If no tabs are available, then don't deactivate current tab
+        return this.activateTab(this.tabs.filter($t => $t !== $tab).find(notDisabled));
+      }
+      /* istanbul ignore next: should never/rarely happen */
+      return false;
+    },
+    // Focus a tab button given its `<b-tab>` instance
+    focusButton($tab) {
+      // Wrap in `$nextTick()` to ensure DOM has completed rendering
+      this.$nextTick(() => {
+        attemptFocus(this.getButtonForTab($tab));
+      });
+    },
+    // Emit a click event on a specified `<b-tab>` component instance
+    emitTabClick(tab, event) {
+      if (isEvent(event) && tab && tab.$emit && !tab.disabled) {
+        tab.$emit(EVENT_NAME_CLICK, event);
+      }
+    },
+    // Click handler
+    clickTab($tab, event) {
+      this.activateTab($tab);
+      this.emitTabClick($tab, event);
+    },
+    // Move to first non-disabled tab
+    firstTab(focus) {
+      const $tab = this.tabs.find(notDisabled);
+      if (this.activateTab($tab) && focus) {
+        this.focusButton($tab);
+        this.emitTabClick($tab, focus);
+      }
+    },
+    // Move to previous non-disabled tab
+    previousTab(focus) {
+      const currentIndex = mathMax(this.currentTab, 0);
+      const $tab = this.tabs.slice(0, currentIndex).reverse().find(notDisabled);
+      if (this.activateTab($tab) && focus) {
+        this.focusButton($tab);
+        this.emitTabClick($tab, focus);
+      }
+    },
+    // Move to next non-disabled tab
+    nextTab(focus) {
+      const currentIndex = mathMax(this.currentTab, -1);
+      const $tab = this.tabs.slice(currentIndex + 1).find(notDisabled);
+      if (this.activateTab($tab) && focus) {
+        this.focusButton($tab);
+        this.emitTabClick($tab, focus);
+      }
+    },
+    // Move to last non-disabled tab
+    lastTab(focus) {
+      const $tab = this.tabs.slice().reverse().find(notDisabled);
+      if (this.activateTab($tab) && focus) {
+        this.focusButton($tab);
+        this.emitTabClick($tab, focus);
+      }
+    }
+  },
+  render(h) {
+    const {
+      align,
+      end,
+      fill,
+      firstTab,
+      justified,
+      lastTab,
+      nextTab,
+      noKeyNav,
+      noNavStyle,
+      pills,
+      previousTab,
+      small,
+      tabs: $tabs
+    } = this;
+
+    // Currently active tab
+    const $activeTab = $tabs.find($tab => $tab.localActive && !$tab.disabled);
+
+    // Tab button to allow focusing when no active tab found (keynav only)
+    const $fallbackTab = $tabs.find($tab => !$tab.disabled);
+
+    // For each `<b-tab>` found create the tab buttons
+    const $buttons = $tabs.map(($tab, index) => {
+      const {
+        safeId
+      } = $tab;
+
+      // Ensure at least one tab button is focusable when keynav enabled (if possible)
+      let tabIndex = null;
+      if (!noKeyNav) {
+        // Buttons are not in tab index unless active, or a fallback tab
+        tabIndex = -1;
+        if ($tab === $activeTab || !$activeTab && $tab === $fallbackTab) {
+          // Place tab button in tab sequence
+          tabIndex = null;
+        }
+      }
+      return h(BVTabButton, {
+        props: {
+          controls: safeId ? safeId() : null,
+          id: $tab.controlledBy || (safeId ? safeId(`_BV_tab_button_`) : null),
+          noKeyNav,
+          posInSet: index + 1,
+          setSize: $tabs.length,
+          tab: $tab,
+          tabIndex
+        },
+        on: {
+          [EVENT_NAME_CLICK]: event => {
+            this.clickTab($tab, event);
+          },
+          [EVENT_NAME_FIRST]: firstTab,
+          [EVENT_NAME_PREV]: previousTab,
+          [EVENT_NAME_NEXT]: nextTab,
+          [EVENT_NAME_LAST]: lastTab
+        },
+        key: $tab[COMPONENT_UID_KEY] || index,
+        ref: 'buttons',
+        // Needed to make `this.$refs.buttons` an array
+        [REF_FOR_KEY]: true
+      });
+    });
+    const computeJustifyContent = value => {
+      value = value === 'left' ? 'start' : value === 'right' ? 'end' : value;
+      return `justify-content-${value}`;
+    };
+    let $nav = h('ul', {
+      staticClass: 'nav',
+      class: [this.navClass, {
+        'nav-tabs': !noNavStyle && !pills,
+        'nav-pills': !noNavStyle && pills,
+        'nav-fill': fill,
+        'nav-justified': justified,
+        [computeJustifyContent(align)]: align,
+        small
+      }],
+      attrs: {
+        role: 'tablist',
+        id: this.safeId('_BV_tab_controls_')
+      },
+      ref: 'nav'
+    }, [this.normalizeSlot(SLOT_NAME_TABS_START) || h(), $buttons, this.normalizeSlot(SLOT_NAME_TABS_END) || h()]);
+    $nav = h('div', {
+      class: this.navWrapperClass,
+      key: 'bv-tabs-nav'
+    }, [this.normalizeSlot(SLOT_NAME_TOOLBAR_START) || h(), $nav, this.normalizeSlot(SLOT_NAME_TOOLBAR_END) || h()]);
+    const $children = this.normalizeSlot() || [];
+    let $empty = h();
+    if ($children.length === 0) {
+      $empty = h('div', {
+        class: ['tab-pane', 'active'],
+        key: 'bv-empty-tab'
+      }, this.normalizeSlot(SLOT_NAME_EMPTY));
+    }
+    const $content = h('div', {
+      staticClass: 'tab-content',
+      class: this.contentClass,
+      attrs: {
+        id: this.safeId('_BV_tab_container_')
+      },
+      key: 'bv-content',
+      ref: 'content'
+    }, [$children, $empty]);
+
+    // Render final output
+    return h(this.tag, {
+      staticClass: 'tabs',
+      attrs: {
+        id: this.safeId()
+      }
+    }, [end ? $content : h(), $nav, end ? h() : $content]);
+  }
+});
+
+export { BTabs, props };