zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: Card

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-12 21:47:43 +08:00
parent 19fbeb8ffd
commit d5b71cf5f2
8 changed files with 26 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/CardStatisticsHorizontal.vue
View File

@ -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>

64
src/components/CardStatisticsWithImages.vue
View File

@ -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>

5
src/components/dynamic/ArrayElement.vue
View File

@ -1,9 +1,4 @@
<script lang="ts" setup> <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 ArrayBytesElement from './ArrayBytesElement.vue';
import ArrayObjectElement from './ArrayObjectElement.vue'; import ArrayObjectElement from './ArrayObjectElement.vue';
import TextElement from './TextElement.vue'; import TextElement from './TextElement.vue';

1
src/components/dynamic/ObjectElement.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import DynamicComponent from './DynamicComponent.vue';
import { select } from './index'; import { select } from './index';
const props = defineProps(['value']); const props = defineProps(['value']);

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

@ -1,7 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import DynamicComponent from './DynamicComponent.vue'; import DynamicComponent from './DynamicComponent.vue';
import { select } from './index'; import { ref } from 'vue';
import { ref} from 'vue'
const props = defineProps(['value']); const props = defineProps(['value']);
const tab = ref(Object.keys(props.value)[0] || ''); const tab = ref(Object.keys(props.value)[0] || '');
@ -12,16 +11,19 @@ const changeTab = (val: string) => {
<template> <template>
<div> <div>
<div class="tabs"> <div class="tabs">
<a class="tab tab-bordered text-gray-400 uppercase" <a
v-for="(item, index) of value" :value="index" class="tab tab-bordered text-gray-400 uppercase"
:class="{ 'tab-active':tab === String(index) }" v-for="(item, index) of value"
:value="index"
:class="{ 'tab-active': tab === String(index) }"
@click="changeTab(String(index))" @click="changeTab(String(index))"
>{{ index }}</a> >{{ index }}</a
>
</div> </div>
<div class="min-h-[25px] mt-4"> <div class="min-h-[25px] mt-4">
<div v-for="(v, k) of value" :value="k"> <div v-for="(v, k) of value" :value="k">
<DynamicComponent :value="v" v-show="tab === String(k)"/> <DynamicComponent :value="v" v-show="tab === String(k)" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>

2
src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import { fromHex } from '@cosmjs/encoding';
import { useWasmStore } from '../WasmStore'; import { useWasmStore } from '../WasmStore';
import { ref } from 'vue'; import { ref } from 'vue';
import type { import type {
@ -8,7 +7,6 @@ import type {
PaginabledContracts, PaginabledContracts,
} from '../types'; } from '../types';
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue'; 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 type { CustomInputContent } from '@/plugins/vuetify/@core/types';
import { useFormatter } from '@/stores'; import { useFormatter } from '@/stores';

10
src/modules/[chain]/ibc/[connection_id].vue
View File

@ -1,12 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue'; import { useBaseStore, useBlockchain } from '@/stores';
import { useBaseStore, useBlockchain, useFormatter } from '@/stores'; import type { Connection, ClientState, Channel } from '@/types';
import type {
ClientStateWithProof,
Connection,
ClientState,
Channel,
} from '@/types';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { ref } from 'vue'; import { ref } from 'vue';

21
src/modules/[chain]/tx/[hash].vue
View File

@ -31,8 +31,8 @@ const messages = computed(() => {
> >
<h2 class="card-title truncate mb-2">Summary</h2> <h2 class="card-title truncate mb-2">Summary</h2>
<div class="overflow-auto-x"> <div class="overflow-auto-x">
<table class="table text-sm"> <table class="table text-sm">
<tbody> <tbody>
<tr> <tr>
<td>Tx Hash</td> <td>Tx Hash</td>
<td>{{ tx.tx_response.txhash }}</td> <td>{{ tx.tx_response.txhash }}</td>
@ -52,13 +52,17 @@ const messages = computed(() => {
<VChip color="primary">oioio</VChip> <VChip color="primary">oioio</VChip>
<div <div
class="text-xs truncate relative py-2 px-4 rounded-full w-fit mr-2" 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 <span
class="inset-x-0 inset-y-0 opacity-10 absolute" 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> ></span>
{{ tx.tx_response.code === 0 ? 'Success': 'Failded' }} {{ tx.tx_response.code === 0 ? 'Success' : 'Failded' }}
</div> </div>
</td> </td>
</tr> </tr>
@ -95,14 +99,15 @@ const messages = computed(() => {
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div <div
v-if="tx.tx_response" v-if="tx.tx_response"
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4" 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 class="divider"></div>
<div v-for="(msg, i) in messages"> <div v-for="(msg, i) in messages">
<div><DynamicComponent :value="msg" /></div> <div><DynamicComponent :value="msg" /></div>
@ -110,7 +115,6 @@ const messages = computed(() => {
<div v-if="messages.length === 0">No messages</div> <div v-if="messages.length === 0">No messages</div>
</div> </div>
<div <div
v-if="tx.tx_response" v-if="tx.tx_response"
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow" 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> <h2 class="card-title truncate mb-2">JSON</h2>
<vue-json-pretty :data="tx" :deep="3" /> <vue-json-pretty :data="tx" :deep="3" />
</div> </div>
</div> </div>
</template> </template>