cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: DynamicComponent UI refactot

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-07 09:07:33 +08:00
parent 60767b499b
commit b1f3afba3e
4 changed files with 76 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dynamic/ArrayBytesElement.vue
View File

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

56
src/components/dynamic/ArrayObjectElement.vue
View File

@ -18,32 +18,34 @@ const header = computed(() => {
}); });
</script> </script>
<template> <template>
<VTable <div class="overflow-x-auto">
v-if="header.length > 0" <VTable
density="compact" v-if="header.length > 0"
height="300px" density="compact"
fixed-header height="300px"
hover fixed-header
> hover
<thead v-if="thead"> >
<tr> <thead v-if="thead">
<th <tr>
v-for="(item, index) in header" <th
:key="index" v-for="(item, index) in header"
class="text-left text-capitalize" :key="index"
> class="text-left text-capitalize"
{{ item }} >
</th> {{ item }}
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr v-for="(item, index) in value" :key="index"> <tbody>
<td v-for="(el, key) in header" :key="key"> <tr v-for="(item, index) in value" :key="index">
<DynamicComponent :value="item[el]" /> <td v-for="(el, key) in header" :key="key">
</td> <DynamicComponent :value="item[el]" />
</tr> </td>
</tbody> </tr>
</VTable> </tbody>
</VTable>
<div v-else class="h-[300px]"></div> <div v-else class="h-[300px]"></div>
</div>
</template> </template>

25
src/components/dynamic/ObjectHorizontalElement.vue
View File

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

56
src/components/dynamic/TxsElement.vue
View File

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