refactor: price data product

src/components/04_product-service/PriceDataComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { commaInput } from 'stores/utils';
 
 const serviceCharge = defineModel<number>('serviceCharge');
@@ -12,6 +12,10 @@ const price4Show = ref('');
 const agentPrice4Show = ref('');
 const serviceCharge4Show = ref('');
 
+watch(calcVat, () => {
+  if (calcVat.value === false) vatIncluded.value = false;
+});
+
 withDefaults(
   defineProps<{
     dense?: boolean;
@@ -37,7 +41,7 @@ withDefaults(
 
 <template>
   <div class="row col-12">
-    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
+    <div class="col-12 q-pb-sm row items-center">
       <q-icon
         flat
         size="xs"
@@ -46,11 +50,28 @@ withDefaults(
         name="mdi-cash"
         style="background-color: var(--surface-3)"
       />
-      {{ $t('productService.product.priceInformation') }}
-
+      <span class="text-body1 text-weight-bold">
+        {{ $t('productService.product.priceInformation') }}
+      </span>
+      <section class="q-px-md">
+        <input
+          id="input-calc-vat"
+          type="checkbox"
+          v-model="calcVat"
+          :disabled="readonly"
+        />
+        <label
+          class="q-pl-sm"
+          for="input-calc-vat"
+          :style="{ opacity: readonly ? '.5' : undefined }"
+        >
+          {{ $t('general.calculateVat') }}
+        </label>
+      </section>
       <div
-        class="surface-3 q-px-sm q-py-xs row text-caption q-ml-md app-text-muted"
+        class="surface-3 q-px-sm q-py-xs row text-caption app-text-muted"
         style="border-radius: var(--radius-3)"
+        v-if="calcVat"
       >
         <span
           id="btn-include-vat"
@@ -155,22 +176,6 @@ withDefaults(
           }
         "
       />
-
-      <section class="q-px-md q-mx-xs">
-        <input
-          id="input-calc-vat"
-          type="checkbox"
-          v-model="calcVat"
-          :disabled="readonly"
-        />
-        <label
-          class="q-pl-sm"
-          for="input-calc-vat"
-          :style="{ opacity: readonly ? '.5' : undefined }"
-        >
-          {{ $t('general.calculateVat') }}
-        </label>
-      </section>
     </div>
   </div>
 </template>