65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { formatMeterage } from '@/utils/format'
|
||
|
||
const props = defineProps<{
|
||
current: number
|
||
max: number
|
||
}>()
|
||
|
||
const remaining = computed(() => Math.max(0, props.max - props.current))
|
||
</script>
|
||
|
||
<template>
|
||
<div class="capacity-summary">
|
||
<div class="capacity-summary__row">
|
||
<span class="capacity-summary__label">جمع متراژ</span>
|
||
<span class="capacity-summary__value">{{ formatMeterage(current) }}</span>
|
||
</div>
|
||
<div class="capacity-summary__row">
|
||
<span class="capacity-summary__label">حداکثر مجاز</span>
|
||
<span class="capacity-summary__value">{{ formatMeterage(max) }}</span>
|
||
</div>
|
||
<div class="capacity-summary__row">
|
||
<span class="capacity-summary__label">باقیمانده</span>
|
||
<span class="capacity-summary__value capacity-summary__value--accent">
|
||
{{ formatMeterage(remaining) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.capacity-summary {
|
||
background: var(--color-summary-bg);
|
||
border-radius: var(--radius-md);
|
||
padding: 14px 16px;
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.capacity-summary__row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 6px 0;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.capacity-summary__row:not(:last-child) {
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.capacity-summary__label {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.capacity-summary__value {
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.capacity-summary__value--accent {
|
||
color: var(--color-primary);
|
||
}
|
||
</style>
|