104 lines
2.5 KiB
TypeScript
Executable File
104 lines
2.5 KiB
TypeScript
Executable File
import { defineComponent, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
export default defineComponent({
|
|
name: 'CRISBalanceBar',
|
|
props: {
|
|
// Saldo corrente
|
|
currentBalance: {
|
|
type: Number,
|
|
required: true,
|
|
default: 0,
|
|
},
|
|
// Limite minimo (negativo)
|
|
minLimit: {
|
|
type: Number,
|
|
required: true,
|
|
default: -100,
|
|
},
|
|
// Limite massimo (positivo)
|
|
maxLimit: {
|
|
type: Number,
|
|
required: true,
|
|
default: 200,
|
|
},
|
|
// Label opzionale
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
small: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
info: {
|
|
type: Boolean,
|
|
default: true,
|
|
}
|
|
},
|
|
setup(props) {
|
|
|
|
const { t } = useI18n();
|
|
// Range totale
|
|
const totalRange = computed(() => {
|
|
return Math.abs(props.minLimit) + props.maxLimit;
|
|
});
|
|
|
|
// Larghezza zona negativa in percentuale
|
|
const negativeZoneWidth = computed(() => {
|
|
return (Math.abs(props.minLimit) / totalRange.value) * 100;
|
|
});
|
|
|
|
// Larghezza zona positiva in percentuale
|
|
const positiveZoneWidth = computed(() => {
|
|
return (props.maxLimit / totalRange.value) * 100;
|
|
});
|
|
|
|
const zeroPosition = computed(() => {
|
|
return negativeZoneWidth.value;
|
|
});
|
|
|
|
// Posizione indicatore in percentuale (0-100)
|
|
const indicatorPosition = computed(() => {
|
|
// Il minLimit è negativo, quindi lo convertiamo in positivo per il calcolo
|
|
const offsetFromMin = props.currentBalance - props.minLimit;
|
|
const position = (offsetFromMin / totalRange.value) * 100;
|
|
|
|
// Clamp tra 0 e 100
|
|
return Math.max(0, Math.min(100, position));
|
|
});
|
|
|
|
// Classe CSS per il colore in base al saldo
|
|
const balanceClass = computed(() => {
|
|
if (props.currentBalance < 0) return 'negative';
|
|
if (props.currentBalance === 0) return 'neutral';
|
|
return 'positive';
|
|
});
|
|
|
|
// Quanto può ancora dare (quanto può andare in negativo)
|
|
const canGive = computed(() => {
|
|
return Math.abs(props.minLimit) + props.currentBalance;
|
|
});
|
|
|
|
// Quanto può ancora ricevere (quanto può andare in positivo)
|
|
const canReceive = computed(() => {
|
|
return props.maxLimit - props.currentBalance;
|
|
});
|
|
|
|
return {
|
|
negativeZoneWidth,
|
|
positiveZoneWidth,
|
|
indicatorPosition,
|
|
balanceClass,
|
|
canGive,
|
|
canReceive,
|
|
zeroPosition,
|
|
t,
|
|
};
|
|
},
|
|
});
|