arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-04 14:17:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Table): hide data when loading state is active (#460)

Browse Source
This commit is contained in:
Haytham A. Salama
2023-07-30 00:31:29 +03:00
committed by GitHub
parent 5cf3bcf32d
commit 2b3dc8d065
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/runtime/components/data/Table.vue
View File

@@ -22,18 +22,6 @@
</tr> </tr>
</thead> </thead>
<tbody :class="ui.tbody"> <tbody :class="ui.tbody">
<tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
<td v-if="modelValue" class="ps-4">
<UCheckbox v-model="selected" :value="row" @click.stop />
</td>
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
<slot :name="`${column.key}-data`" :column="column" :row="row" :index="index">
{{ row[column.key] }}
</slot>
</td>
</tr>
<tr v-if="loadingState && loading"> <tr v-if="loadingState && loading">
<td :colspan="columns.length + (modelValue ? 1 : 0)"> <td :colspan="columns.length + (modelValue ? 1 : 0)">
<slot name="loading-state"> <slot name="loading-state">
@@ -59,6 +47,20 @@
</slot> </slot>
</td> </td>
</tr> </tr>
<template v-else>
<tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
<td v-if="modelValue" class="ps-4">
<UCheckbox v-model="selected" :value="row" @click.stop />
</td>
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
<slot :name="`${column.key}-data`" :column="column" :row="row" :index="index">
{{ row[column.key] }}
</slot>
</td>
</tr>
</template>
</tbody> </tbody>
</table> </table>
</div> </div>