Tabs

<script setup lang="ts">
const tab = ref("overview");
const tabs = [
  { label: "Overview", value: "overview" },
  { label: "Activity", value: "activity" },
  { label: "Settings", value: "settings" },
  { label: "Billing", value: "billing", disabled: true },
];
</script>

<template>
  <UiTabs v-model="tab" :items="tabs" label="Project" class="demo-wide" v-slot="{ value }">
    <p v-if="value === 'overview'">A summary of the project.</p>
    <p v-else-if="value === 'activity'">Recent commits and comments.</p>
    <p v-else>Name, visibility and danger zone.</p>
  </UiTabs>
</template>

<script setup lang="ts">
const tab = ref("open");
const tabs = [
  { label: "Open", value: "open", count: 12 },
  { label: "In review", value: "review", count: 3 },
  { label: "Closed", value: "closed", count: 148 },
];
const countOf = (value?: string) => tabs.find((t) => t.value === value)?.count;
</script>

<template>
  <UiTabs v-model="tab" :items="tabs" label="Issues" class="demo-wide">
    <template #tab="{ item, selected }">
      {{ item.label }}
      <span class="tab-count" :data-selected="selected || undefined">{{
        countOf(item.value)
      }}</span>
    </template>
    <template #default="{ value }">
      <p>{{ countOf(value) }} issues.</p>
    </template>
  </UiTabs>
</template>