36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<tr>
|
|
<th>{{ name }}</th>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
|
|
v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
|
|
{{ $n(getPercent() / 100, 'percent') }}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="rightCell">
|
|
{{ $n(Math.round((total - used) / 1024), 'kilobyte') }}
|
|
</td>
|
|
<td class="rightCell">{{ $n(Math.round(used / 1024), 'kilobyte') }}</td>
|
|
<td class="rightCell">{{ $n(Math.round(total / 1024), 'kilobyte') }}</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
name: String,
|
|
total: { type: Number, required: true },
|
|
used: { type: Number, required: true },
|
|
},
|
|
methods: {
|
|
getPercent() {
|
|
return this.total === 0 ? 0 : Math.round((this.used / this.total) * 100);
|
|
},
|
|
},
|
|
});
|
|
</script>
|