refactor: tab

src/components/TabComponent.vue

@@ -5,18 +5,26 @@ import AppBox from './app/AppBox.vue';
 
 const tab = ref<string>('');
 
-const index = ref<number>(0);
 const tabList = ref<{ name: string; label: string }[]>([]);
 
 function test() {
-  index.value++;
   tabList.value.push({
-    name: `สาขาที่ ${index.value}`,
+    name: `สาขาที่ ${tabList.value.length + 1}`,
-    label: `สาขาที่ ${index.value}`,
+    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>
@@ -25,24 +33,38 @@ function test() {
       active-bg-color="white"
       active-color="primary"
       indicator-color="white"
+      active-class="active-tab"
       v-model="tab"
       align="left"
       inline-label
-      class="bg-primary text-white"
+      class="text-grey"
-      style="width: 960px"
+      style="width: 960px; background-color: var(--_body-bg)"
     >
       <q-tab icon="mdi-plus" @click="test()" />
       <q-tab
-        v-for="v in tabList"
+        v-for="(v, index) in tabList"
-        :key="v.name"
+        :key="index - 4"
         :name="v.name"
-        :label="v.label"
+        :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>
@@ -54,4 +76,9 @@ function test() {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.active-tab {
+  border: 1px solid #e0dcdc;
+  border-bottom: none;
+}
+</style>