88 lines
1.5 KiB
Plaintext
88 lines
1.5 KiB
Plaintext
<template>
|
|
<div :class="['stock-badge', stockClass]">
|
|
<div class="stock-info">
|
|
<span class="stock-label">{{ label }}</span>
|
|
<span class="stock-value">{{ value }} {{ unit }}</span>
|
|
</div>
|
|
<div v-if="showThreshold && threshold" class="stock-threshold">
|
|
<small>Min: {{ threshold }} {{ unit }}</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
unit: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
threshold: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
showThreshold: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const stockClass = computed(() => {
|
|
if (props.threshold && props.value <= props.threshold) {
|
|
return 'stock-low';
|
|
}
|
|
return 'stock-normal';
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stock-badge {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
.stock-low {
|
|
background-color: #fef2f2;
|
|
border-color: #fecaca;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.stock-normal {
|
|
background-color: #f0fdf4;
|
|
border-color: #bbf7d0;
|
|
color: #166534;
|
|
}
|
|
|
|
.stock-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stock-label {
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.stock-value {
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.stock-threshold {
|
|
font-size: 0.75rem;
|
|
opacity: 0.8;
|
|
}
|
|
</style> |