imp: improve dynamic components
This commit is contained in:
parent
8ec5a9822a
commit
724ba72a71
@ -18,16 +18,8 @@ const header = computed(() => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="overflow-auto h-[500px] p-4">
|
||||
<div
|
||||
v-if="header.length > 0"
|
||||
class="table table-compact w-full"
|
||||
density="compact"
|
||||
:height="value.length > 5? '300px': ''"
|
||||
fixed-header
|
||||
hover
|
||||
|
||||
>
|
||||
<div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
|
||||
<table class="table table-compact w-full">
|
||||
<thead v-if="thead">
|
||||
<tr>
|
||||
<th
|
||||
@ -46,8 +38,6 @@ const header = computed(() => {
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</div>
|
||||
|
||||
<div v-else class="h-[300px]"></div>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -9,7 +9,7 @@ const props = defineProps(['value']);
|
||||
<tbody>
|
||||
<tr v-for="(v, k) of value">
|
||||
<td
|
||||
class="text-capitalize whitespace-break-spaces w-1/5"
|
||||
class="capitalize whitespace-break-spaces w-1/5"
|
||||
style="min-width: 180px"
|
||||
>
|
||||
{{ String(k).replaceAll('_', ' ') }}
|
||||
|
@ -12,7 +12,7 @@ const changeTab = (val: string) => {
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a
|
||||
class="tab tab-bordered text-gray-400 uppercase"
|
||||
class="tab tab-bordered text-gray-400 capitalize"
|
||||
v-for="(item, index) of value"
|
||||
:value="index"
|
||||
:class="{ 'tab-active': tab === String(index) }"
|
||||
|
@ -1,8 +1,10 @@
|
||||
<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 { computed } from 'vue';
|
||||
|
||||
const chainStore = useBlockchain()
|
||||
const props = defineProps(['value']);
|
||||
const format = useFormatter();
|
||||
function isMD() {
|
||||
@ -15,16 +17,26 @@ function isMD() {
|
||||
return false;
|
||||
}
|
||||
|
||||
function isAddress() {
|
||||
return isBech32Address(props.value) && String(props.value).indexOf('valoper1') === -1
|
||||
}
|
||||
|
||||
const text = computed(() => {
|
||||
if(!props.value) return ""
|
||||
const v = props.value
|
||||
switch(true) {
|
||||
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
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<MdEditor
|
||||
@ -33,6 +45,7 @@ const text = computed(() => {
|
||||
previewOnly
|
||||
class="md-editor-recover"
|
||||
></MdEditor>
|
||||
<RouterLink v-else-if="isAddress()" :to="`/${chainStore.chainName}/account/${text}`">{{ text }}</RouterLink>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
|
||||
|
10
src/components/dynamic/TokenElement.vue
Normal file
10
src/components/dynamic/TokenElement.vue
Normal 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>
|
@ -3,7 +3,7 @@ import TextElement from './TextElement.vue';
|
||||
import ArrayElement from './ArrayElement.vue';
|
||||
import UInt8Array from './UInt8Array.vue';
|
||||
import NumberElement from './NumberElement.vue';
|
||||
import TxsElement from './TxsElement.vue';
|
||||
import TokenElement from './TokenElement.vue';
|
||||
import ObjectHorizontalElement from './ObjectHorizontalElement.vue';
|
||||
import Long from 'long';
|
||||
|
||||
@ -31,6 +31,9 @@ function selectObject(v: Object, direct?: string) {
|
||||
return UInt8Array;
|
||||
case Array.isArray(v):
|
||||
return ArrayElement;
|
||||
case v && Object.keys(v).includes('amount') && Object.keys(v).includes('denom'): {
|
||||
return TokenElement;
|
||||
}
|
||||
case direct === 'horizontal':
|
||||
return ObjectHorizontalElement;
|
||||
default:
|
||||
|
@ -103,6 +103,12 @@ export function isHexAddress(v: any) {
|
||||
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) {
|
||||
// remove '#'
|
||||
hex = hex.replace('#', '');
|
||||
|
@ -56,7 +56,7 @@ const messages = computed(() => {
|
||||
<tr>
|
||||
<td>Time</td>
|
||||
<td>
|
||||
{{ tx.tx_response.timestamp }} ({{
|
||||
{{ format.toLocaleDate(tx.tx_response.timestamp) }} ({{
|
||||
format.toDay(tx.tx_response.timestamp, 'from')
|
||||
}})
|
||||
</td>
|
||||
@ -92,9 +92,8 @@ const messages = computed(() => {
|
||||
<h2 class="card-title truncate mb-2">
|
||||
Messages: ({{ messages.length }})
|
||||
</h2>
|
||||
<div class="divider"></div>
|
||||
<div v-for="(msg, i) in messages">
|
||||
<div>
|
||||
<div class="border border-slate-400 rounded-md mt-4">
|
||||
<DynamicComponent :value="msg" />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -278,7 +278,9 @@ export const useDashboard = defineStore('dashboard', {
|
||||
},
|
||||
loadingPrices() {
|
||||
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(a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
|
||||
coinIds.push(a.coingecko_id)
|
||||
|
@ -236,6 +236,10 @@ export const useFormatter = defineStore('formatter', {
|
||||
numberAndSign(input: number, fmt = '+0,0') {
|
||||
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') {
|
||||
if (!time) return '';
|
||||
if (format === 'long') {
|
||||
|
Loading…
Reference in New Issue
Block a user