imp: improve dynamic components

This commit is contained in:
liangping 2023-06-12 14:59:24 +08:00
parent 8ec5a9822a
commit 724ba72a71
10 changed files with 49 additions and 22 deletions

View File

@ -18,16 +18,8 @@ const header = computed(() => {
}); });
</script> </script>
<template> <template>
<div class="overflow-auto h-[500px] p-4"> <div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
<div <table class="table table-compact w-full">
v-if="header.length > 0"
class="table table-compact w-full"
density="compact"
:height="value.length > 5? '300px': ''"
fixed-header
hover
>
<thead v-if="thead"> <thead v-if="thead">
<tr> <tr>
<th <th
@ -46,8 +38,6 @@ const header = computed(() => {
</td> </td>
</tr> </tr>
</tbody> </tbody>
</div> </table>
<div v-else class="h-[300px]"></div>
</div> </div>
</template> </template>

View File

@ -9,7 +9,7 @@ const props = defineProps(['value']);
<tbody> <tbody>
<tr v-for="(v, k) of value"> <tr v-for="(v, k) of value">
<td <td
class="text-capitalize whitespace-break-spaces w-1/5" class="capitalize whitespace-break-spaces w-1/5"
style="min-width: 180px" style="min-width: 180px"
> >
{{ String(k).replaceAll('_', ' ') }} {{ String(k).replaceAll('_', ' ') }}

View File

@ -12,7 +12,7 @@ const changeTab = (val: string) => {
<div> <div>
<div class="tabs"> <div class="tabs">
<a <a
class="tab tab-bordered text-gray-400 uppercase" class="tab tab-bordered text-gray-400 capitalize"
v-for="(item, index) of value" v-for="(item, index) of value"
:value="index" :value="index"
:class="{ 'tab-active': tab === String(index) }" :class="{ 'tab-active': tab === String(index) }"

View File

@ -1,8 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useFormatter } from '@/stores'; import { isBech32Address } from '@/libs/utils';
import { useBlockchain, useFormatter } from '@/stores';
import MdEditor from 'md-editor-v3'; import MdEditor from 'md-editor-v3';
import { computed } from 'vue'; import { computed } from 'vue';
const chainStore = useBlockchain()
const props = defineProps(['value']); const props = defineProps(['value']);
const format = useFormatter(); const format = useFormatter();
function isMD() { function isMD() {
@ -15,16 +17,26 @@ function isMD() {
return false; return false;
} }
function isAddress() {
return isBech32Address(props.value) && String(props.value).indexOf('valoper1') === -1
}
const text = computed(() => { const text = computed(() => {
if(!props.value) return "" if(!props.value) return ""
const v = props.value const v = props.value
switch(true) { switch(true) {
case v.length === 28 && v.endsWith("="): { case v.length === 28 && v.endsWith("="): {
return format.validator(v) return format.validator(v) || v
}
// 2023-06-12T03:09:38.253756368Z
case v.search(/^[1-9]\d{3}-\d{1,2}-\d{1,2}T\d{1,2}:\d{2}:\d{2}[.\d]*Z$/g) > -1: {
return new Date(v).toLocaleString(navigator.language)
} }
} }
return v return v
}) })
</script> </script>
<template> <template>
<MdEditor <MdEditor
@ -33,6 +45,7 @@ const text = computed(() => {
previewOnly previewOnly
class="md-editor-recover" class="md-editor-recover"
></MdEditor> ></MdEditor>
<RouterLink v-else-if="isAddress()" :to="`/${chainStore.chainName}/account/${text}`">{{ text }}</RouterLink>
<span v-else>{{ text }}</span> <span v-else>{{ text }}</span>
</template> </template>

View File

@ -0,0 +1,10 @@
<script lang="ts" setup>
const props = defineProps(['value']);
</script>
<template>
<div class="overflow-auto">
{{ value["amount"] }} {{ value["denom"] }}
</div>
</template>

View File

@ -3,7 +3,7 @@ import TextElement from './TextElement.vue';
import ArrayElement from './ArrayElement.vue'; import ArrayElement from './ArrayElement.vue';
import UInt8Array from './UInt8Array.vue'; import UInt8Array from './UInt8Array.vue';
import NumberElement from './NumberElement.vue'; import NumberElement from './NumberElement.vue';
import TxsElement from './TxsElement.vue'; import TokenElement from './TokenElement.vue';
import ObjectHorizontalElement from './ObjectHorizontalElement.vue'; import ObjectHorizontalElement from './ObjectHorizontalElement.vue';
import Long from 'long'; import Long from 'long';
@ -31,6 +31,9 @@ function selectObject(v: Object, direct?: string) {
return UInt8Array; return UInt8Array;
case Array.isArray(v): case Array.isArray(v):
return ArrayElement; return ArrayElement;
case v && Object.keys(v).includes('amount') && Object.keys(v).includes('denom'): {
return TokenElement;
}
case direct === 'horizontal': case direct === 'horizontal':
return ObjectHorizontalElement; return ObjectHorizontalElement;
default: default:

View File

@ -103,6 +103,12 @@ export function isHexAddress(v: any) {
return v.length === 28; return v.length === 28;
} }
export function isBech32Address(v?: string) {
if(!v) return ""
const pattern = /^[a-z\d]+1[a-z\d]{38}$/g
return v.search(pattern) > -1
}
export function hexToRgb(hex: string) { export function hexToRgb(hex: string) {
// remove '#' // remove '#'
hex = hex.replace('#', ''); hex = hex.replace('#', '');

View File

@ -56,7 +56,7 @@ const messages = computed(() => {
<tr> <tr>
<td>Time</td> <td>Time</td>
<td> <td>
{{ tx.tx_response.timestamp }} ({{ {{ format.toLocaleDate(tx.tx_response.timestamp) }} ({{
format.toDay(tx.tx_response.timestamp, 'from') format.toDay(tx.tx_response.timestamp, 'from')
}}) }})
</td> </td>
@ -92,9 +92,8 @@ const messages = computed(() => {
<h2 class="card-title truncate mb-2"> <h2 class="card-title truncate mb-2">
Messages: ({{ messages.length }}) Messages: ({{ messages.length }})
</h2> </h2>
<div class="divider"></div>
<div v-for="(msg, i) in messages"> <div v-for="(msg, i) in messages">
<div> <div class="border border-slate-400 rounded-md mt-4">
<DynamicComponent :value="msg" /> <DynamicComponent :value="msg" />
</div> </div>
</div> </div>

View File

@ -278,7 +278,9 @@ export const useDashboard = defineStore('dashboard', {
}, },
loadingPrices() { loadingPrices() {
const coinIds = [] as string[] const coinIds = [] as string[]
Object.keys(this.favoriteMap).forEach(k => { const keys = Object.keys(this.chains) // load all blockchain
// Object.keys(this.favoriteMap) //only load favorite once it has too many chains
keys.forEach(k => {
if(this.chains[k]) this.chains[k].assets.forEach(a => { if(this.chains[k]) this.chains[k].assets.forEach(a => {
if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) { if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
coinIds.push(a.coingecko_id) coinIds.push(a.coingecko_id)

View File

@ -236,6 +236,10 @@ export const useFormatter = defineStore('formatter', {
numberAndSign(input: number, fmt = '+0,0') { numberAndSign(input: number, fmt = '+0,0') {
return numeral(input).format(fmt); return numeral(input).format(fmt);
}, },
toLocaleDate(time?: string | number | Date) {
if(!time) return ""
return new Date(time).toLocaleString(navigator.language)
},
toDay(time?: string | number| Date, format = 'long') { toDay(time?: string | number| Date, format = 'long') {
if (!time) return ''; if (!time) return '';
if (format === 'long') { if (format === 'long') {