Merge pull request #374 from alisaweb3/v3-single

UI refactor: DynamicComponent,ObjectHorizontalElement,Cosmwasm,Dashboard
This commit is contained in:
ping 2023-05-09 08:00:39 +08:00 committed by GitHub
commit 5c35cecc58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 280 additions and 239 deletions

View File

@ -26,15 +26,32 @@ const series = computed(() => {
}, },
]; ];
}); });
function changeChart(type: string) {
kind.value = type;
}
</script> </script>
<template> <template>
<VTabs v-model="kind" align-tabs="end" <div class="tabs tabs-boxed bg-transparent justify-end">
><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs <a
> class="tab text-xs mr-2 text-gray-400 uppercase"
:class="{ 'tab-active': kind === 'price' }"
@click="changeChart('price')"
>
Price
</a>
<a
class="tab text-xs text-gray-400 uppercase"
:class="{ 'tab-active': kind === 'volume' }"
@click="changeChart('volume')"
>
Volume
</a>
</div>
<VueApexCharts <VueApexCharts
type="area" type="area"
height="261" height="230"
:options="chartConfig" :options="chartConfig"
:series="series" :series="series"
/> />

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>

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>

View File

@ -1,19 +1,27 @@
<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(Object.keys(props.value)[0] || '');
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>

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>

View File

@ -93,29 +93,39 @@ const result = ref('');
</script> </script>
<template> <template>
<div> <div>
<VCard> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<VCardTitle>Contract List of Code: {{ props.code_id }}</VCardTitle> <h2 class="card-title truncate w-full">Contract List of Code: {{ props.code_id }}</h2>
<VTable> <div class="overflow-x-auto">
<thead> <table class="table w-full mt-4">
<tr> <thead>
<th>Contract List</th> <tr>
<th>Actions</th> <th style="position: relative;">Contract List</th>
</tr> <th>Actions</th>
</thead> </tr>
<tbody> </thead>
<tr v-for="v in response.contracts"> <tbody>
<td>{{ v }}</td> <tr v-for="v in response.contracts">
<td> <td>{{ v }}</td>
<VBtn size="small" @click="showInfo(v)">contract</VBtn> <td>
<VBtn size="small" @click="showState(v)" class="ml-2" <button
>States</VBtn class="btn btn-primary btn-sm text-xs mr-2"
> @click="showInfo(v)"
<VBtn size="small" @click="showQuery(v)" class="ml-2">Query</VBtn> >contract</button>
</td> <button
</tr> class="btn btn-primary btn-sm text-xs mr-2"
</tbody> @click="showState(v)"
</VTable> >States</button>
</VCard> <button
class="btn btn-primary btn-sm text-xs"
@click="showQuery(v)"
>Query</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<v-dialog v-model="infoDialog" width="auto"> <v-dialog v-model="infoDialog" width="auto">
<v-card> <v-card>
<VCardTitle>Contract Detail</VCardTitle> <VCardTitle>Contract Detail</VCardTitle>

View File

@ -14,13 +14,13 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
}); });
</script> </script>
<template> <template>
<div> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<VCard> <h2 class="card-title truncate w-full">Cosmos Wasm Smart Contracts</h2>
<VCardTitle>Cosmos Wasm Smart Contracts</VCardTitle> <div class="overflow-x-auto">
<VTable> <table class="table w-full mt-4 text-sm">
<thead> <thead>
<tr> <tr>
<th>Code Id</th> <th style="position: relative;">Code Id</th>
<th>Code Hash</th> <th>Code Hash</th>
<th>Creator</th> <th>Creator</th>
<th>Permissions</th> <th>Permissions</th>
@ -47,8 +47,8 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
</td> </td>
</tr> </tr>
</tbody> </tbody>
</VTable> </table>
</VCard> </div>
</div> </div>
</template> </template>

View File

@ -291,7 +291,7 @@ const processList = computed(()=>{
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title">Votes</h2> <h2 class="card-title">Votes</h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table w-full "> <table class="table w-full">
<tbody> <tbody>
<tr v-for="(item,index) of votes" :key="index"> <tr v-for="(item,index) of votes" :key="index">
<td>{{ item.voter }}</td> <td>{{ item.voter }}</td>

View File

@ -2,6 +2,7 @@
import MdEditor from 'md-editor-v3'; import MdEditor from 'md-editor-v3';
import PriceMarketChart from '@/components/charts/PriceMarketChart.vue'; import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
import { Icon } from '@iconify/vue';
import { useBlockchain, useFormatter } from '@/stores'; import { useBlockchain, useFormatter } from '@/stores';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useIndexModule } from './indexStore'; import { useIndexModule } from './indexStore';
@ -38,150 +39,155 @@ function shortName(name: string, id: string) {
? id ? id
: name; : name;
} }
const comLinks = [
{
name: 'Website',
icon: 'mdi-web',
href: store.homepage,
},
{
name: 'Twitter',
icon: 'mdi-twitter',
href: store.twitter,
},
{
name: 'Telegram',
icon: 'mdi-telegram',
href: store.telegram,
},
{
name: 'Github',
icon: 'mdi-github',
href: store.github,
},
];
</script> </script>
<template> <template>
<div> <div>
<VCard v-if="coinInfo && coinInfo.name" class="mb-5"> <div
<VRow> v-if="coinInfo && coinInfo.name"
<VCol md="5"> class="bg-base-100 rounded shadow mb-4"
<VCardItem> >
<VCardTitle> <div class="flex p-4">
{{ coinInfo.name }} ( <div class="flex-1 mr-10">
<span class="text-uppercase">{{ coinInfo.symbol }}</span> <div class="text-xl font-semibold text-main">
) {{ coinInfo.name }} (<span class="uppercase">{{
</VCardTitle> coinInfo.symbol
<VCardSubtitle> }}</span
Rank: >)
<VChip color="error" size="x-small" </div>
>#{{ coinInfo.market_cap_rank }}</VChip <div class="text-xs mt-2">
> Rank:
</VCardSubtitle>
</VCardItem>
<VDivider />
<VCardItem>
<VBtn
variant="text"
size="small"
:href="store.homepage"
prependIcon="mdi-web"
>
Website
</VBtn>
<VBtn
variant="text"
size="small"
:href="store.twitter"
prependIcon="mdi-twitter"
>
Twitter
</VBtn>
<VBtn
variant="text"
size="small"
:href="store.telegram"
prependIcon="mdi-telegram"
>
Telegram
</VBtn>
<VBtn
variant="text"
size="small"
:href="store.github"
prependIcon="mdi-github"
>
Github
</VBtn>
</VCardItem>
<VCardItem>
<!-- SECTION upgrade plan banner -->
<div <div
class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3" class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
> >
<h3 class="plan-details me-3" :class="store.priceColor"> #{{ coinInfo.market_cap_rank }}
{{ store.priceChange }} </div>
<small>%</small> </div>
</h3>
<VMenu open-on-hover> <div class="mt-4 flex items-center">
<template #activator="{ props }"> <a
<div class="d-flex flex-column align-start" v-bind="props"> v-for="(item, index) of comLinks"
<h3 class="text-base font-weight-semibold"> :key="index"
:href="item.href"
class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center"
>
<Icon :icon="item?.icon" />
<span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
</a>
</div>
<div>
<div class="dropdown dropdown-hover w-full mt-[16px] md:mt-[32px]">
<label>
<div
class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
>
<div>
<div
class="font-semibold text-xl text-[#666] dark:text-white"
>
{{ ticker?.market?.name || '' }} {{ ticker?.market?.name || '' }}
</h3> </div>
<span class="text-primary text-xs"> <div class="text-info text-sm">
{{ shortName(ticker?.base, ticker.coin_id) }}/{{ {{ shortName(ticker?.base, ticker.coin_id) }}/{{
shortName(ticker?.target, ticker.target_coin_id) shortName(ticker?.target, ticker.target_coin_id)
}} }}
</span> </div>
</div> </div>
</template>
<VList style="max-height: 300px"> <div class="text-right">
<VListItem <div
v-for="(item, i) in store.coinInfo.tickers" class="text-xl font-semibold text-[#666] dark:text-white"
:key="i" >
rounded ${{ ticker.converted_last.usd }}
@click="store.selectTicker(i)" </div>
> <div class="text-sm" :class="store.priceColor">
<template #prepend></template> {{ store.priceChange }}%
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component --> </div>
<VListItemTitle v-text="item.market.name" /> </div>
<VListItemSubtitle> </div>
{{ shortName(item?.base, item.coin_id) }}/{{ </label>
shortName(item?.target, item.target_coin_id) <div class="dropdown-content pt-1">
}} <div class="h-64 overflow-auto w-full shadow rounded">
</VListItemSubtitle> <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
<template #append> <li
<span v-for="(item, index) in store.coinInfo.tickers"
class="ml-3" :key="index"
:class="`text-${store.tickerColor(item.trust_score)}`" @click="store.selectTicker(index)"
>
<div
class="flex items-center justify-between hover:bg-base-100"
> >
{{ item.converted_last.usd }} <div class="text-main text-sm">
</span> {{ shortName(item?.base, item.coin_id) }}/{{
</template> shortName(item?.target, item.target_coin_id)
</VListItem> }}
</VList> </div>
</VMenu>
<VSpacer /> <div class="text-base text-main">
${{ item.converted_last.usd }}
<div class="d-flex align-center"> </div>
<sub> </div>
<h6 class="text-xs font-weight-regular">$</h6> </li>
</sub> </ul>
<span class="text-h5">{{ ticker.converted_last.usd }}</span> </div>
</div> </div>
</div> </div>
<VSpacer />
<VBtn <a
block
:color="store.trustColor" :color="store.trustColor"
class="mt-3" class="mt-5 text-white btn btn-success w-full flex items-center"
:href="ticker.trade_url" :href="ticker.trade_url"
target="_blank"
> >
Buy {{ coinInfo.symbol || '' }} Buy {{ coinInfo.symbol || '' }}
</VBtn> </a>
</VCardItem> </div>
</VCol> </div>
<VCol md="7">
<VCardItem> <div class="flex-1 hidden md:block">
<PriceMarketChart /> <PriceMarketChart />
</VCardItem> </div>
</VCol> </div>
</VRow> <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
<VDivider /> <div class="max-h-[250px] overflow-auto p-4 text-sm">
<VCardText style="max-height: 250px; overflow: auto">
<MdEditor <MdEditor
:model-value="coinInfo.description?.en" :model-value="coinInfo.description?.en"
previewOnly previewOnly
></MdEditor> ></MdEditor>
</VCardText> </div>
<VCardItem> <div class="mx-4 flex flex-wrap items-center">
<VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ <div
tag v-for="tag in coinInfo.categories"
}}</VChip> class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
</VCardItem> >
</VCard> {{ tag }}
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6"> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
<div v-for="item in store.stats"> <div v-for="item in store.stats">
@ -189,30 +195,26 @@ function shortName(name: string, id: string) {
</div> </div>
</div> </div>
<VCard class="my-5"> <div class="bg-base-100 rounded mt-4 shadow">
<VCardItem class="pb-0"> <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
<VCardTitle>Active Proposals</VCardTitle> Active Proposals
</VCardItem> </div>
<VCardItem> <div class="px-4 pb-4">
<ProposalListItem :proposals="store?.proposals" /> <ProposalListItem :proposals="store?.proposals" />
</VCardItem> </div>
<VCardText v-if="store.proposals.length === 0" <div class="pl-4 pb-8 py-4" v-if="store.proposals?.length === 0">
>No active proposals</VCardText No active proposals
> </div>
</VCard> </div>
<VBtn block color="secondary" variant="outlined" class="mt-5" <div
>Connect Wallet</VBtn class="btn btn-primary w-full mt-5 flex items-center bg-transparent text-primary hover:bg-gray-100 hover:bg-transparent"
> >
Connect Wallet
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.card-box {
border: 1px solid rgb(var(--v-theme-primary));
}
</style>
<route> <route>
{ {
meta: { meta: {