feat: add npm run dev

This commit is contained in:
alisa 2023-04-25 01:05:00 +08:00
parent ab0fb2252e
commit 0618897761
2 changed files with 50 additions and 40 deletions

View File

@ -4,6 +4,7 @@
"private": true, "private": true,
"target": "", "target": "",
"scripts": { "scripts": {
"dev": "vite",
"serve": "vite", "serve": "vite",
"build": "run-p type-check build-only", "build": "run-p type-check build-only",
"preview": "vite preview", "preview": "vite preview",

View File

@ -1,39 +1,48 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useFormatter } from '@/stores'; import { useFormatter } from "@/stores";
import { computed } from '@vue/reactivity'; import { computed } from "@vue/reactivity";
import { ref, type PropType } from 'vue'; import { ref, type PropType } from "vue";
const props = defineProps({ const props = defineProps({
tally: { type: Object as PropType<{ tally: {
yes: string, type: Object as PropType<{
no: string, yes: string;
noWithVeto: string, no: string;
abstain: string noWithVeto: string;
}>}, abstain: string;
}>,
},
pool: { pool: {
type: Object as PropType<{ type: Object as PropType<{
notBondedTokens: string; notBondedTokens: string;
bondedTokens: string; bondedTokens: string;
}>, }>,
}, },
}) });
const format = useFormatter() const format = useFormatter();
const yes = computed(() => (format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens))) const yes = computed(() =>
const no = computed(() => ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens))) format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens)
const abstain = computed(() => (format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens))) );
const veto = computed(() => (format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens))) const no = computed(() =>
ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens))
);
console.log(yes.value, no.value, abstain.value, veto.value) const abstain = computed(() =>
format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens)
);
const veto = computed(() =>
format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens)
);
</script> </script>
<template> <template>
<div class="progress"> <div class="progress">
<div class="progress-bar bg-success" :style="`width: ${yes}`"></div> <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
<div class="progress-bar bg-error" :style="`width: ${no}`"></div> <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
<div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"></div> <div
class="progress-bar"
:style="`width: ${veto}; background-color: #B71C1C;`"
></div>
<div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div> <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.progress { .progress {