feat: tab component readonly

src/components/TabComponent.vue

@@ -2,6 +2,10 @@
 import { ref } from 'vue';
 import { CustomerBranchCreate } from 'stores/customer/types';
 
+defineProps<{
+  readonly?: boolean;
+}>();
+
 const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
   default: [],
 });
@@ -67,6 +71,7 @@ function close(index: number) {
       style="background-color: var(--_body-bg)"
       @click="addData()"
       icon="mdi-plus"
+      :disable="readonly"
     ></q-btn>
     <q-tabs
       active-bg-color="white"
@@ -97,11 +102,12 @@ function close(index: number) {
           color="red"
           :class="{ dark: $q.dark.isActive }"
           @click.stop="close(index)"
+          v-if="!readonly"
         />
       </q-tab>
     </q-tabs>
   </div>
-  <div class="column">
+  <div class="column seprarator-fix">
     <q-tab-panels v-model="tab" class="rounded-borders">
       <q-tab-panel
         v-for="(v, index) in customerBranch"
@@ -119,7 +125,7 @@ function close(index: number) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .active-tab {
   border: 1px solid #e0dcdc;
   border-bottom: none;
@@ -132,4 +138,8 @@ function close(index: number) {
   border-left: none;
   border-top: none;
 }
+
+:deep(.q-separator) {
+  padding-block: 0px !important;
+}
 </style>