<template>
  <!-- Squelette de chargement en forme de tableau (préserve la mise en page pendant le fetch au lieu d'un flash vide). -->
  <div class="tbl-skel">
    <div v-for="r in rows" :key="r" class="tbl-skel-row">
      <q-skeleton v-for="c in cols" :key="c" type="text" class="tbl-skel-cell" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  rows: { type: Number, default: 6 },
  cols: { type: Number, default: 5 },
})
</script>

<style scoped>
.tbl-skel { padding: 4px 0; }
.tbl-skel-row { display: flex; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--ops-border); }
.tbl-skel-cell { flex: 1; height: 14px; border-radius: 5px; }
.tbl-skel-cell:first-child { max-width: 34%; }
</style>
