forked from cerc-io/cosmos-explorer
feat: Card
This commit is contained in:
parent
19fbeb8ffd
commit
d5b71cf5f2
@ -1,55 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { controlledComputed } from '@vueuse/shared';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
color?: string;
|
||||
icon: string;
|
||||
stats: number;
|
||||
change?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'primary',
|
||||
});
|
||||
|
||||
const isPositive = controlledComputed(
|
||||
() => props.change,
|
||||
() => Math.sign(props.change || 0) === 1
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VAvatar
|
||||
size="40"
|
||||
rounded
|
||||
:color="props.color"
|
||||
variant="tonal"
|
||||
class="me-4"
|
||||
>
|
||||
<VIcon :icon="props.icon" size="24" />
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<h6 class="text-h6">
|
||||
{{ props.stats }}
|
||||
</h6>
|
||||
<div
|
||||
v-if="props.change"
|
||||
:class="`${isPositive ? 'text-success' : 'text-error'}`"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'"
|
||||
/>
|
||||
<span class="text-caption">{{ Math.abs(props.change) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-caption">{{ props.title }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
@ -1,64 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
stats: string;
|
||||
change: number;
|
||||
image: string;
|
||||
imgWidth: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'primary',
|
||||
});
|
||||
|
||||
const isPositive = controlledComputed(
|
||||
() => props.change,
|
||||
() => Math.sign(props.change) === 1
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-base font-weight-semibold mb-2">
|
||||
{{ props.title }}
|
||||
</h6>
|
||||
<VChip
|
||||
v-if="props.subtitle"
|
||||
size="x-small"
|
||||
:color="props.color"
|
||||
class="mb-5"
|
||||
>
|
||||
{{ props.subtitle }}
|
||||
</VChip>
|
||||
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<h5 class="text-h5 me-2">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
<span
|
||||
class="text-caption"
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
>
|
||||
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="illustrator-img">
|
||||
<VImg v-if="props.image" :src="props.image" :width="props.imgWidth" />
|
||||
</div>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.illustrator-img {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 5%;
|
||||
}
|
||||
</style>
|
@ -1,9 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
import { toBase64 } from '@cosmjs/encoding';
|
||||
import type { PropType } from 'vue';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import DynamicComponentVue from './DynamicComponent.vue';
|
||||
import { select } from './index';
|
||||
import ArrayBytesElement from './ArrayBytesElement.vue';
|
||||
import ArrayObjectElement from './ArrayObjectElement.vue';
|
||||
import TextElement from './TextElement.vue';
|
||||
|
@ -1,5 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
import DynamicComponent from './DynamicComponent.vue';
|
||||
import { select } from './index';
|
||||
|
||||
const props = defineProps(['value']);
|
||||
|
@ -1,7 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import DynamicComponent from './DynamicComponent.vue';
|
||||
import { select } from './index';
|
||||
import { ref} from 'vue'
|
||||
import { ref } from 'vue';
|
||||
const props = defineProps(['value']);
|
||||
const tab = ref(Object.keys(props.value)[0] || '');
|
||||
|
||||
@ -12,16 +11,19 @@ const changeTab = (val: string) => {
|
||||
<template>
|
||||
<div>
|
||||
<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) }"
|
||||
<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>
|
||||
>{{ 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 v-for="(v, k) of value" :value="k">
|
||||
<DynamicComponent :value="v" v-show="tab === String(k)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,5 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
import { fromHex } from '@cosmjs/encoding';
|
||||
import { useWasmStore } from '../WasmStore';
|
||||
import { ref } from 'vue';
|
||||
import type {
|
||||
@ -8,7 +7,6 @@ import type {
|
||||
PaginabledContracts,
|
||||
} from '../types';
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import type CustomRadiosVue from '@/plugins/vuetify/@core/components/CustomRadios.vue';
|
||||
import type { CustomInputContent } from '@/plugins/vuetify/@core/types';
|
||||
import { useFormatter } from '@/stores';
|
||||
|
||||
|
@ -1,12 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
|
||||
import type {
|
||||
ClientStateWithProof,
|
||||
Connection,
|
||||
ClientState,
|
||||
Channel,
|
||||
} from '@/types';
|
||||
import { useBaseStore, useBlockchain } from '@/stores';
|
||||
import type { Connection, ClientState, Channel } from '@/types';
|
||||
import { onMounted } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
@ -31,8 +31,8 @@ const messages = computed(() => {
|
||||
>
|
||||
<h2 class="card-title truncate mb-2">Summary</h2>
|
||||
<div class="overflow-auto-x">
|
||||
<table class="table text-sm">
|
||||
<tbody>
|
||||
<table class="table text-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tx Hash</td>
|
||||
<td>{{ tx.tx_response.txhash }}</td>
|
||||
@ -52,13 +52,17 @@ const messages = computed(() => {
|
||||
<VChip color="primary">oioio</VChip>
|
||||
<div
|
||||
class="text-xs truncate relative py-2 px-4 rounded-full w-fit mr-2"
|
||||
:class="`text-${tx.tx_response.code === 0 ? 'success': 'error'}`"
|
||||
:class="`text-${
|
||||
tx.tx_response.code === 0 ? 'success' : 'error'
|
||||
}`"
|
||||
>
|
||||
<span
|
||||
class="inset-x-0 inset-y-0 opacity-10 absolute"
|
||||
:class="`bg-${tx.tx_response.code === 0 ? 'success': 'error'}`"
|
||||
:class="`bg-${
|
||||
tx.tx_response.code === 0 ? 'success' : 'error'
|
||||
}`"
|
||||
></span>
|
||||
{{ tx.tx_response.code === 0 ? 'Success': 'Failded' }}
|
||||
{{ tx.tx_response.code === 0 ? 'Success' : 'Failded' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -95,14 +99,15 @@ const messages = computed(() => {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="tx.tx_response"
|
||||
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
|
||||
>
|
||||
<h2 class="card-title truncate mb-2">Messages: ({{messages.length}})</h2>
|
||||
<h2 class="card-title truncate mb-2">
|
||||
Messages: ({{ messages.length }})
|
||||
</h2>
|
||||
<div class="divider"></div>
|
||||
<div v-for="(msg, i) in messages">
|
||||
<div><DynamicComponent :value="msg" /></div>
|
||||
@ -110,7 +115,6 @@ const messages = computed(() => {
|
||||
<div v-if="messages.length === 0">No messages</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-if="tx.tx_response"
|
||||
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"
|
||||
@ -118,6 +122,5 @@ const messages = computed(() => {
|
||||
<h2 class="card-title truncate mb-2">JSON</h2>
|
||||
<vue-json-pretty :data="tx" :deep="3" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user