jws-frontend/src/components/TabComponent.vue

<script setup lang="ts">
import { ref } from 'vue';

import AppBox from './app/AppBox.vue';

const tab = ref<string>('');

const tabList = ref<{ name: string; label: string }[]>([]);

function test() {
  tabList.value.push({
    name: `สาขาที่ ${tabList.value.length + 1}`,
    label: `สาขาที่ ${tabList.value.length + 1}`,
  });

  tab.value = tabList.value[tabList.value.length - 1].name;
}

async function close(index: number) {
  if (tabList.value.length > 1) {
    tabList.value.splice(index, 1);
  }
  // tab.value = await tabList.value[tabList.value.length - 1].name;
  setTimeout(() => {
    tab.value = `สาขาที่ ${tabList.value.length.toString()}`;
  }, 10);
}
</script>

<template>
  <div class="column">
    <q-tabs
      active-bg-color="white"
      active-color="primary"
      indicator-color="white"
      active-class="active-tab"
      v-model="tab"
      align="left"
      inline-label
      class="text-grey"
      style="width: 960px; background-color: var(--_body-bg)"
    >
      <q-tab icon="mdi-plus" @click="test()" />
      <q-tab
        v-for="(v, index) in tabList"
        :key="index - 4"
        :name="v.name"
        :label="`${$t('branchLabel')} ${index + 1}`"
        no-caps
      >
        <q-btn
          round
          flat
          id="closeDialog"
          icon="mdi-close"
          padding="xs"
          color="red"
          :class="{ dark: $q.dark.isActive }"
          @click="close(index)"
        />
      </q-tab>
    </q-tabs>
  </div>
  <div class="column">
    <q-tab-panels v-model="tab" class="rounded-borders">
      <q-tab-panel v-for="v in tabList" :key="v.name" :name="v.name">
        {{ tab }}
        <slot name="about"></slot>
        <slot name="address"></slot>
        <slot name="businessInformation"></slot>
        <slot name="contactInformation"></slot>

        <slot name="otherDocuments"></slot>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<style scoped>
.active-tab {
  border: 1px solid #e0dcdc;
  border-bottom: none;
}
</style>