62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<script setup>
|
|
import AppPanel from "../../../Components/AppPanel.vue";
|
|
import {NNumberAnimation, NStatistic, enUS} from "naive-ui";
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
counter: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
isDoubleCounter: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
counterSuffix: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
percent: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const counterPrecision = computed(() => {
|
|
if (Number.isNaN(props.counter)) return 0
|
|
if (props.counter % 1 !== 0) return 2
|
|
return 0
|
|
})
|
|
const counterSuffixPrecision = computed(() => {
|
|
if (Number.isNaN(props.counterSuffix)) return 0
|
|
if (props.counterSuffix % 1 !== 0) return 2
|
|
return 0
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AppPanel class="min-w-[120px] min-h-[100px] max-h-[102px] h-full"
|
|
style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
|
|
<div class="w-full h-full flex flex items-center justify-center">
|
|
<NStatistic class="text-center">
|
|
<template #label>
|
|
<slot />
|
|
</template>
|
|
<template v-if="isDoubleCounter">
|
|
<NNumberAnimation :from="0" :to="counter" :precision="counterPrecision" :locale="enUS" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
<span style="color: var(--n-close-icon-color)"> / </span>
|
|
<NNumberAnimation :from="0" :to="counterSuffix" :precision="counterSuffixPrecision" :locale="enUS" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</template>
|
|
<NNumberAnimation v-else :from="0" :to="counter" :precision="counterPrecision" :locale="enUS" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</NStatistic>
|
|
</div>
|
|
</AppPanel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|