crater/resources/scripts/components/base/BaseTabGroup.vue

<template>
  <div>
    <TabGroup :default-index="defaultIndex" @change="onChange">
      <TabList
        :class="[
          'flex border-b border-grey-light',
          'relative overflow-x-auto overflow-y-hidden',
          'lg:pb-0 lg:ml-0',
        ]"
      >
        <Tab
          v-for="(tab, index) in tabs"
          v-slot="{ selected }"
          :key="index"
          as="template"
        >
          <button
            :class="[
              'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap',
              selected
                ? ' border-primary-400 text-black font-medium'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
            ]"
          >
            {{ tab.title }}

            <BaseBadge
              v-if="tab.count"
              class="!rounded-full overflow-hidden ml-2"
              :variant="tab['count-variant']"
              default-class="flex items-center justify-center w-5 h-5 p-1 rounded-full text-medium"
            >
              {{ tab.count }}
            </BaseBadge>
          </button>
        </Tab>
      </TabList>

      <slot name="before-tabs" />

      <TabPanels>
        <slot />
      </TabPanels>
    </TabGroup>
  </div>
</template>

<script setup>
import { computed, useSlots } from 'vue'
import { TabGroup, TabList, Tab, TabPanels } from '@headlessui/vue'

const props = defineProps({
  defaultIndex: {
    type: Number,
    default: 0,
  },
  filter: {
    type: String,
    default: null,
  },
})

const emit = defineEmits(['change'])

const slots = useSlots()

const tabs = computed(() => slots.default().map((tab) => tab.props))

function onChange(d) {
  emit('change', tabs.value[d])
}
</script>