From b1f3afba3e435eaa0c3886428e931a777d242c1c Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 09:07:33 +0800
Subject: [PATCH] feat: DynamicComponent UI refactot

---
 src/components/dynamic/ArrayBytesElement.vue  |  4 +-
 src/components/dynamic/ArrayObjectElement.vue | 56 ++++++++++---------
 .../dynamic/ObjectHorizontalElement.vue       | 25 ++++++---
 src/components/dynamic/TxsElement.vue         | 56 ++++++++++---------
 4 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/src/components/dynamic/ArrayBytesElement.vue b/src/components/dynamic/ArrayBytesElement.vue
index 7508013e..ed923cb6 100644
--- a/src/components/dynamic/ArrayBytesElement.vue
+++ b/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>
diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index 790a1cf3..6ac1fc3e 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/src/components/dynamic/ArrayObjectElement.vue
@@ -18,32 +18,34 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <VTable
-    v-if="header.length > 0"
-    density="compact"
-    height="300px"
-    fixed-header
-    hover
-  >
-    <thead v-if="thead">
-      <tr>
-        <th
-          v-for="(item, index) in header"
-          :key="index"
-          class="text-left text-capitalize"
-        >
-          {{ item }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(item, index) in value" :key="index">
-        <td v-for="(el, key) in header" :key="key">
-          <DynamicComponent :value="item[el]" />
-        </td>
-      </tr>
-    </tbody>
-  </VTable>
+  <div class="overflow-x-auto">
+    <VTable
+      v-if="header.length > 0"
+      density="compact"
+      height="300px"
+      fixed-header
+      hover
+    >
+      <thead v-if="thead">
+        <tr>
+          <th
+            v-for="(item, index) in header"
+            :key="index"
+            class="text-left text-capitalize"
+          >
+            {{ item }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in value" :key="index">
+          <td v-for="(el, key) in header" :key="key">
+            <DynamicComponent :value="item[el]" />
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
 
-  <div v-else class="h-[300px]"></div>
+    <div v-else class="h-[300px]"></div>
+  </div>
 </template>
diff --git a/src/components/dynamic/ObjectHorizontalElement.vue b/src/components/dynamic/ObjectHorizontalElement.vue
index 1db000aa..8158fc0b 100644
--- a/src/components/dynamic/ObjectHorizontalElement.vue
+++ b/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>
diff --git a/src/components/dynamic/TxsElement.vue b/src/components/dynamic/TxsElement.vue
index 2bbe6052..a2fca156 100644
--- a/src/components/dynamic/TxsElement.vue
+++ b/src/components/dynamic/TxsElement.vue
@@ -21,31 +21,33 @@ const format = useFormatter();
 const chain = useBlockchain();
 </script>
 <template>
-  <VTable density="compact" v-if="txs.length > 0">
-    <thead>
-      <tr>
-        <th>Hash</th>
-        <th>Msgs</th>
-        <th>Memo</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in txs">
-        <td>
-          <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
-            item.hash
-          }}</RouterLink>
-        </td>
-        <td>
-          {{
-            format.messages(
-              item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
-            )
-          }}
-        </td>
-        <td>{{ item.tx.body.memo }}</td>
-      </tr>
-    </tbody>
-  </VTable>
-  <div v-else>[]</div>
+  <div class="overflow-x-auto mt-4">
+    <table class="table w-full" density="compact" v-if="txs.length > 0">
+      <thead>
+        <tr>
+          <th style="position: relative">Hash</th>
+          <th>Msgs</th>
+          <th>Memo</th>
+        </tr>
+      </thead>
+      <tbody class="text-sm">
+        <tr v-for="item in txs">
+          <td>
+            <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
+              item.hash
+            }}</RouterLink>
+          </td>
+          <td>
+            {{
+              format.messages(
+                item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
+              )
+            }}
+          </td>
+          <td>{{ item.tx.body.memo }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else>[]</div>
+  </div>
 </template>