feat(table): add loading state (#259)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
2023-06-12 15:26:29 +03:00
committed by GitHub
parent d20983d355
commit 47415322ea
5 changed files with 210 additions and 6 deletions

View File

@@ -34,7 +34,20 @@
</td>
</tr>
<tr v-if="emptyState && !rows.length">
<tr v-if="loadingState && loading">
<td :colspan="columns.length">
<slot name="loading-state">
<div :class="ui.loadingState.wrapper">
<UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
<p :class="ui.loadingState.label">
{{ loadingState.label }}
</p>
</div>
</slot>
</td>
</tr>
<tr v-else-if="emptyState && !rows.length">
<td :colspan="columns.length">
<slot name="empty-state">
<div :class="ui.emptyState.wrapper">
@@ -106,6 +119,14 @@ export default defineComponent({
type: String,
default: () => appConfig.ui.table.default.sortDescIcon
},
loading: {
type: Boolean,
default: false
},
loadingState: {
type: Object as PropType<{ icon: string, label: string }>,
default: () => appConfig.ui.table.default.loadingState
},
emptyState: {
type: Object as PropType<{ icon: string, label: string }>,
default: () => appConfig.ui.table.default.emptyState