feat: DynamicComponent UI refactot

src/components/dynamic/ArrayBytesElement.vue

@@ -7,8 +7,8 @@ const props = defineProps({
 </script>
 <template>
   <div>
-    <div v-for="v in props.value">
-      {{ toBase64(v) }}
+    <div v-for="(item,index) of props.value" :key="index">
+      {{ toBase64(item) }}
     </div>
   </div>
 </template>

src/components/dynamic/ArrayObjectElement.vue

@@ -18,6 +18,7 @@ const header = computed(() => {
 });
 </script>
 <template>
+  <div class="overflow-x-auto">
     <VTable
       v-if="header.length > 0"
       density="compact"
@@ -46,4 +47,5 @@ const header = computed(() => {
     </VTable>
 
     <div v-else class="h-[300px]"></div>
+  </div>
 </template>

src/components/dynamic/ObjectHorizontalElement.vue

@@ -1,19 +1,26 @@
 <script lang="ts" setup>
 import DynamicComponent from './DynamicComponent.vue';
 import { select } from './index';
-
+import { ref} from 'vue'
 const props = defineProps(['value']);
 const tab = ref('');
+const changeTab = (val: string) => {
+  tab.value = val;
+};
 </script>
 <template>
   <div>
-    <VTabs v-model="tab">
-      <VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
-    </VTabs>
-    <VWindow v-model="tab" style="min-height: 25px">
-      <VWindowItem v-for="(v, k) of value" :value="k"
-        ><DynamicComponent :value="v"
-      /></VWindowItem>
-    </VWindow>
+    <div class="tabs">
+      <a class="tab  tab-bordered text-gray-400 uppercase" 
+        v-for="(item, index) of value" :value="index"
+        :class="{ 'tab-active': tab === String(index) }"
+        @click="changeTab(String(index))"
+      >{{ index }}</a>
+    </div>
+    <div class="min-h-[25px] mt-4">
+        <div v-for="(v, k) of value" :value="k">
+          <DynamicComponent :value="v" v-show=" tab === String(k)"/>
+        </div>
+    </div>
   </div>
 </template>

src/components/dynamic/TxsElement.vue

@@ -21,15 +21,16 @@ const format = useFormatter();
 const chain = useBlockchain();
 </script>
 <template>
-  <VTable density="compact" v-if="txs.length > 0">
+  <div class="overflow-x-auto mt-4">
+    <table class="table w-full" density="compact" v-if="txs.length > 0">
       <thead>
         <tr>
-        <th>Hash</th>
+          <th style="position: relative">Hash</th>
           <th>Msgs</th>
           <th>Memo</th>
         </tr>
       </thead>
-    <tbody>
+      <tbody class="text-sm">
         <tr v-for="item in txs">
           <td>
             <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
@@ -46,6 +47,7 @@ const chain = useBlockchain();
           <td>{{ item.tx.body.memo }}</td>
         </tr>
       </tbody>
-  </VTable>
+    </table>
     <div v-else>[]</div>
+  </div>
 </template>