First tab showed

Signed-off-by: Zubairrafi <[email protected]>

src/components/ObjectForm.vue

@@ -23,6 +23,7 @@
  :schema="properties[key]"
  :errors="errors"
  :reference-model="referenceModel[key] || {}"
+ :tab-counter="2"
  @update:modelValue="handleChange"
  />
  </v-field>

src/components/ObjectFormWrapper.vue

@@ -22,7 +22,7 @@
  <!-- show errors-->
  <component-errors :errors="calcFormErrors(errors, fieldName)" />
  </h6>
- <tabs v-if="!onlyJson" v-model="activeTab" />
+ <tabs v-if="!onlyJson" v-model="activeTab" :showTabCounter="tabCounter" />
  </div>
  <!-- form for all the object's properties -->
  <object-form
@@ -39,6 +39,7 @@
  :is-self-folded="isFolded"
  :reference-model="referenceModel || {}"
  :errors="errors"
+ :tab-counter="tabCounter"
  />
  <!-- declared in tabs component -->
  <yaml-form
@@ -98,6 +99,10 @@ export default defineComponent({
  type: Number,
  default: 1,
  },
+ tabCounter: {
+ type: Number,
+ default: 0,
+ }
  },
 });
 </script>

src/components/Tabs.vue

@@ -1,5 +1,38 @@
 <template>
- <div class="tabs ac-tabs is-line">
+ <div v-if="showTabCounter===1" class="tabs is-line">
+
+<ul>
+ <li :class="{ 'is-active': activeTab === 'form' }">
+ <a @click.prevent="showForm()">
+ <span class="icon is-small"
+ ><i
+ class="fa fa-file-text fa-flip-horizontal"
+ aria-hidden="true"
+ ></i
+ ></span>
+ <span>Form</span>
+ </a>
+ </li>
+ <li :class="{ 'is-active': activeTab === 'yaml' }">
+ <a @click.prevent="showYaml()">
+ <span class="icon is-small"
+ ><i class="fa fa-code" aria-hidden="true"></i
+ ></span>
+ <span>YAML</span>
+ </a>
+ </li>
+ <li :class="{ 'is-active': activeTab === 'json' }">
+ <a @click.prevent="showJson()">
+ <span class="icon is-small"
+ ><i class="fa fa-code" aria-hidden="true"></i
+ ></span>
+ <span>JSON</span>
+ </a>
+ </li>
+</ul>
+</div>
+<div v-else class="tabs ac-tabs is-line">
+
  <ul>
  <li :class="{ 'is-active': activeTab === 'form' }">
  <a @click.prevent="showForm()">
@@ -30,6 +63,7 @@
  </li>
  </ul>
  </div>
+
 </template>
 
 <script>
@@ -42,6 +76,10 @@ export default defineComponent({
  type: String,
  default: 'form',
  },
+ showTabCounter: {
+ type: Number,
+ default: 0,
+ }
  },
  emits: ['update:modelValue'],
 

src/components/VueOpenapiForm.vue

@@ -21,6 +21,7 @@
  :schema="extendedSchema"
  :reference-model="referenceModel || {}"
  :errors="errors"
+ :tab-counter =1
  @update:modelValue="handleChange"
  />
  </v-field>