- Nuova Home Page RISO Moderna! Passo 1 - la struttura

src/components/CRISBalanceBar/CRISBalanceBar.ts

@@ -0,0 +1,87 @@
+import { defineComponent, computed } from 'vue';
+
+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: 'Range disponibile',
+    },
+  },
+  setup(props) {
+    // 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,
+    };
+  },
+});