navigation_tabs.vue 1.59 KB
Newer Older
1
<script>
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  /**
   * Given an array of tabs, renders non linked bootstrap tabs.
   * When a tab is clicked it will trigger an event and provide the clicked scope.
   *
   * This component is used in apps that handle the API call.
   * If you only need to change the URL this component should not be used.
   *
   * @example
   * <navigation-tabs
   *   :tabs="[
   *   {
   *      name: String,
   *      scope: String,
   *      count: Number || Undefined,
   *      isActive: Boolean,
   *    },
   *   ]"
   *   @onChangeTab="onChangeTab"
   *   />
   */
22
  export default {
23
    name: 'NavigationTabs',
24
    props: {
25 26
      tabs: {
        type: Array,
27 28
        required: true,
      },
29 30 31 32 33
      scope: {
        type: String,
        required: false,
        default: '',
      },
34
    },
35 36
    mounted() {
      $(document).trigger('init.scrolling-tabs');
37
    },
38 39 40 41 42
    methods: {
      shouldRenderBadge(count) {
        // 0 is valid in a badge, but evaluates to false, we need to check for undefined
        return count !== undefined;
      },
43 44 45 46

      onTabClick(tab) {
        this.$emit('onChangeTab', tab.scope);
      },
47
    },
Filipa Lacerda's avatar
Filipa Lacerda committed
48
  };
49 50 51 52
</script>
<template>
  <ul class="nav-links scrolling-tabs">
    <li
53 54 55 56 57
      v-for="(tab, i) in tabs"
      :key="i"
      :class="{
        active: tab.isActive,
      }"
Filipa Lacerda's avatar
Filipa Lacerda committed
58
    >
59 60 61
      <a
        role="button"
        @click="onTabClick(tab)"
62
        :class="`js-${scope}-tab-${tab.scope}`"
Filipa Lacerda's avatar
Filipa Lacerda committed
63
      >
64 65
        {{ tab.name }}

66
        <span
67 68
          v-if="shouldRenderBadge(tab.count)"
          class="badge"
Filipa Lacerda's avatar
Filipa Lacerda committed
69 70
        >
          {{ tab.count }}
71 72 73 74 75
        </span>
      </a>
    </li>
  </ul>
</template>