Le stock dans le panier

<script setup>
import { ref } from "vue";
import { useCatalogueStore } from "@/stores/catalogue.js";
import { usePanierStore } from "@/stores/panier.js";
import { prixEnEuros } from "@/utils/format.js";

const panier = usePanierStore();
const catalogue = useCatalogueStore();
catalogue.charger(); // sur /panier ouvert directement, le catalogue n'est pas encore là

// Le stock vient du catalogue ; tant qu'il n'est pas chargé, la limite reste 20.
const stockDe = (isbn) => catalogue.livres.find((l) => l.isbn === isbn)?.stock ?? 20;
const avertissement = ref("");

function changer(ligne, evenement) {
  const voulu = Number(evenement.target.value);
  const stock = stockDe(ligne.isbn);
  panier.changerQuantite(ligne.isbn, Math.min(voulu, stock));
  avertissement.value = voulu > stock
    ? `Il ne reste que ${stock} exemplaire(s) de « ${ligne.titre} ».`
    : "";
  evenement.target.value = Math.min(voulu, stock); // le champ affiche la quantité retenue
}
</script>

Dans le gabarit, le champ porte :max="stockDe(ligne.isbn)" et son événement change appelle changer avec la ligne et l'événement ; le message s'affiche dans un paragraphe aria-live="polite". Le test charge un catalogue où le livre a 3 exemplaires, puis saisit 5 :

max du champ : 3
quantité retenue : 3 | champ : 3
message : Il ne reste que 3 exemplaire(s) de « Introduction à l’algorithmique ».

L'appel catalogue.charger() ne coûte rien si le catalogue est déjà là (le store ne recharge pas). Tant qu'il n'est pas arrivé, la limite reste celle du store, 20 : le serveur garde de toute façon le dernier mot.