diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue new file mode 100644 index 00000000000..3ff87ba3c4f --- /dev/null +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue @@ -0,0 +1,67 @@ +<script> +import { GlTabs, GlTab, GlBadge } from '@gitlab/ui'; + +export default { + components: { + GlTabs, + GlTab, + GlBadge, + }, + props: { + tabs: { + type: Array, + required: true, + }, + tabCounts: { + type: Object, + required: false, + default: null, + }, + currentTab: { + type: String, + required: true, + }, + }, + methods: { + isTabActive(tabName) { + return tabName === this.currentTab; + }, + isTabCountNumeric(tab) { + return Number.isInteger(this.tabCounts[tab.name]); + }, + }, +}; +</script> + +<template> + <div class="top-area"> + <gl-tabs + class="gl-display-flex gl-flex-grow-1 gl-p-0 gl-m-0 mobile-separator issuable-state-filters" + nav-class="gl-border-b-0" + > + <gl-tab + v-for="tab in tabs" + :key="tab.id" + :active="isTabActive(tab.name)" + @click="$emit('click', tab.name)" + > + <template #title> + <span :title="tab.titleTooltip" :data-qa-selector="`${tab.name}_issuables_tab`"> + {{ tab.title }} + </span> + <gl-badge + v-if="tabCounts && isTabCountNumeric(tab)" + variant="muted" + size="sm" + class="gl-tab-counter-badge" + > + {{ tabCounts[tab.name] }} + </gl-badge> + </template> + </gl-tab> + </gl-tabs> + <div class="nav-controls"> + <slot name="nav-actions"></slot> + </div> + </div> +</template> |