From f3a0e2ba6cbd520cd3b487d735c5ac94b59ff2e7 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Fri, 7 Jun 2024 15:15:42 +0700
Subject: [PATCH] fix: tab style decoration

---
 .../03_customer-management/AboutComponent.vue | 63 ++++++++++---------
 src/components/TabComponent.vue               | 11 ++--
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index c7997277..e79d68f5 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -56,10 +56,11 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           :readonly="true"
           :borderless="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-3"
           :label="$t('legalEntityCode')"
           v-model="legalEntityCode"
         />
+
         <q-input
           v-if="typeCustomer === 'customerLegalEntity'"
           :dense="dense"
@@ -67,20 +68,31 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           :readonly="readonly"
           :borderless="readonly"
           hide-bottom-space
-          class="col-5"
-          :label="$t('taxNo')"
-          v-model="taxNo"
+          class="col-3"
+          :label="$t('customerEnglishName')"
+          v-model="customerEnglishName"
+        />
+        <q-input
+          :dense="dense"
+          :outlined="!readonly"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('customerName')"
+          v-model="customerName"
         />
       </div>
       <q-input
+        v-if="typeCustomer === 'customerLegalEntity'"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
         :borderless="readonly"
         hide-bottom-space
-        class="col"
-        :label="$t('customerName')"
-        v-model="customerName"
+        class="col-6"
+        :label="$t('taxNo')"
+        v-model="taxNo"
       />
       <q-input
         v-if="typeCustomer === 'customerLegalEntity'"
@@ -90,8 +102,19 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         :borderless="readonly"
         hide-bottom-space
         class="col-6"
-        :label="$t('customerEnglishName')"
-        v-model="customerEnglishName"
+        :label="$t('registerName')"
+        v-model="registerName"
+      />
+      <q-input
+        v-if="typeCustomer === 'customerLegalEntity'"
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('authorizedCapital')"
+        v-model="authorizedCapital"
       />
       <VueDatePicker
         v-if="typeCustomer === 'customerLegalEntity'"
@@ -137,28 +160,6 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           </q-input>
         </template>
       </VueDatePicker>
-      <q-input
-        v-if="typeCustomer === 'customerLegalEntity'"
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-3"
-        :label="$t('authorizedCapital')"
-        v-model="authorizedCapital"
-      />
-      <q-input
-        v-if="typeCustomer === 'customerLegalEntity'"
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-6"
-        :label="$t('registerName')"
-        v-model="registerName"
-      />
     </div>
   </div>
   <q-separator
diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index 8001aa97..b77fc34b 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -66,18 +66,19 @@ function close(index: number) {
 <template>
   <div class="row no-wrap">
     <q-btn
-      class="q-px-lg tab-style app-text-muted"
+      class="q-px-lg bordered-b bordered-r app-text-muted"
       flat
+      :color="$q.dark.isActive ? 'primary' : ''"
       style="background-color: var(--_body-bg)"
       @click="addData()"
       icon="mdi-plus"
       :disable="readonly"
     ></q-btn>
     <q-tabs
-      active-bg-color="white"
-      active-color="primary"
+      :active-bg-color="$q.dark.isActive ? 'dark' : 'white'"
+      :active-color="$q.dark.isActive ? 'white' : 'primary'"
       indicator-color="transparent"
-      active-class="active-tab"
+      active-class="bordered-r"
       v-model="tab"
       align="left"
       inline-label
@@ -91,7 +92,7 @@ function close(index: number) {
         :label="`${$t('customerBranchFormTab')} ${index + 1}`"
         @click="tab = index"
         no-caps
-        :class="tab === index ? '' : 'tab-style'"
+        :class="tab === index ? '' : 'bordered-b bordered-r'"
       >
         <q-btn
           round