Composants
EquipmentCard
Carte d'affichage d'équipement avec sélection de quantité
Composant de carte affichant un équipement avec son image/icône, son label et un sélecteur de quantité.
Usage
Basic
Utilisez le composant EquipmentCard avec les props requises :
<template>
<EquipmentCard
label="Pompe à chaleur"
:quantity="quantity"
:max-quantity="5"
@update:quantity="quantity = $event"
/>
</template>
<script setup>
const quantity = ref(0);
</script>
Avec image
<template>
<EquipmentCard
label="Pompe à chaleur"
image-path="/intern-unit/pac.png"
:quantity="quantity"
:max-quantity="5"
@update:quantity="quantity = $event"
/>
</template>
Avec icône
<template>
<EquipmentCard
label="Pompe à chaleur"
icon="i-heroicons-home"
:quantity="quantity"
:max-quantity="5"
@update:quantity="quantity = $event"
/>
</template>
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label de l'équipement (requis) |
imagePath | string | - | Chemin vers l'image de l'équipement |
icon | string | - | Nom de l'icône (si pas d'image) |
quantity | number | - | Quantité actuelle (requis) |
maxQuantity | number | - | Quantité maximale autorisée (requis) |
Events
| Event | Payload | Description |
|---|---|---|
update:quantity | number | null | Émis lorsque l'utilisateur modifie la quantité |
Slots
Ce composant n'expose aucun slot.
Exemples
Exemple 1 : Liste d'équipements
<template>
<div class="grid grid-cols-3 gap-4">
<EquipmentCard
v-for="equipment in equipments"
:key="equipment.id"
:label="equipment.label"
:image-path="equipment.imagePath"
:quantity="equipment.quantity"
:max-quantity="maxQuantity"
@update:quantity="equipment.quantity = $event"
/>
</div>
</template>
<script setup>
const equipments = ref([
{ id: 1, label: 'PAC', imagePath: '/intern-unit/pac.png', quantity: 0 },
{ id: 2, label: 'Climatisation', imagePath: '/intern-unit/mural.png', quantity: 0 }
]);
const maxQuantity = ref(5);
</script>
Exemple 2 : Avec gestion d'état
<template>
<EquipmentCard
label="Pompe à chaleur"
icon="i-heroicons-home"
:quantity="form.equipment.quantity"
:max-quantity="maxQuantity"
@update:quantity="updateQuantity"
/>
</template>
<script setup>
const form = reactive({
equipment: {
quantity: 0
}
});
const maxQuantity = ref(5);
function updateQuantity(value) {
form.equipment.quantity = value ?? 0;
}
</script>
Notes
Le composant affiche soit une image (si imagePath est fourni), soit une icône (si icon est fourni). Si aucun des deux n'est fourni, seule la carte avec le label et le sélecteur de quantité sera affichée. Le sélecteur de quantité utilise UInputNumber de Nuxt UI avec les limites min (0) et max définies.