QuantEngineByItz/src/frontend/src/components/QuantTabPanel.vue

<!-- PrimeVue Tabs Adapter Wrapper: QuantTabPanel -->
<template>
  <div class="quant-tab-panel-wrapper w-full flex flex-col h-full">
    <Tabs :value="activeTabId" class="w-full h-full flex flex-col" @update:value="onTabChange">
      <TabList class="bg-slate-100 border-b border-slate-300">
        <Tab
          v-for="tab in tabs"
          :key="tab.id"
          :value="tab.id"
          class="px-4 py-2.5 text-xs font-bold text-slate-700 focus:outline-none cursor-pointer border-b-2 border-transparent data-[p-active=true]:border-blue-600 data-[p-active=true]:text-blue-600"
        >
          {{ tab.label }}
          <span v-if="tab.badge" class="ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] bg-slate-200 text-slate-700">
            {{ tab.badge }}
          </span>
        </Tab>
      </TabList>

      <TabPanels class="flex-1 p-4 bg-white overflow-y-auto">
        <TabPanel v-for="tab in tabs" :key="tab.id" :value="tab.id">
          <slot :name="tab.id"></slot>
        </TabPanel>
      </TabPanels>
    </Tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import Tabs from 'primevue/tabs';
import TabList from 'primevue/tablist';
import Tab from 'primevue/tab';
import TabPanels from 'primevue/tabpanels';
import TabPanel from 'primevue/tabpanel';

export interface TabItem {
  id: string;
  label: string;
  badge?: string | number;
}

const props = defineProps<{
  tabs: TabItem[];
  modelValue?: string;
}>();

const emit = defineEmits(['update:modelValue', 'tab-change']);

const activeTabId = ref<string>(props.modelValue || (props.tabs[0] ? props.tabs[0].id : ''));

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) activeTabId.value = newVal;
  }
);

const onTabChange = (val: string | number | undefined) => {
  const strVal = String(val ?? '');
  activeTabId.value = strVal;
  emit('update:modelValue', strVal);
  emit('tab-change', strVal);
};
</script>