128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
interface Props {
|
|
loading?: boolean;
|
|
empty?: boolean;
|
|
error?: boolean;
|
|
loadingText?: string;
|
|
emptyText?: string;
|
|
emptyIcon?: string;
|
|
errorText?: string;
|
|
errorIcon?: string;
|
|
size?: 'small' | 'default' | 'large';
|
|
minHeight?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
loading: false,
|
|
empty: false,
|
|
error: false,
|
|
loadingText: 'Memuat data...',
|
|
emptyText: 'Tidak ada data',
|
|
emptyIcon: 'solar:folder-open-outline',
|
|
errorText: 'Terjadi kesalahan saat memuat data',
|
|
errorIcon: 'solar:danger-circle-outline',
|
|
size: 'default',
|
|
minHeight: '200px'
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'retry'): void;
|
|
}>();
|
|
|
|
const spinnerSize = computed(() => {
|
|
switch (props.size) {
|
|
case 'small': return 48;
|
|
case 'large': return 80;
|
|
default: return 64;
|
|
}
|
|
});
|
|
|
|
const iconSize = computed(() => {
|
|
switch (props.size) {
|
|
case 'small': return 48;
|
|
case 'large': return 80;
|
|
default: return 64;
|
|
}
|
|
});
|
|
|
|
const textClass = computed(() => {
|
|
switch (props.size) {
|
|
case 'small': return 'text-body-1';
|
|
case 'large': return 'text-h5';
|
|
default: return 'text-subtitle-1';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="loading-state-container" :style="{ minHeight: minHeight }">
|
|
<div class="state-content">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
:size="spinnerSize"
|
|
></v-progress-circular>
|
|
<p :class="['mt-4', textClass, 'text-medium-emphasis']">
|
|
{{ loadingText }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="empty" class="loading-state-container" :style="{ minHeight: minHeight }">
|
|
<div class="state-content">
|
|
<Icon :icon="emptyIcon" :height="iconSize" class="text-medium-emphasis" />
|
|
<p :class="['mt-4', textClass, 'text-medium-emphasis']">
|
|
{{ emptyText }}
|
|
</p>
|
|
<slot name="empty-action"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="error" class="loading-state-container" :style="{ minHeight: minHeight }">
|
|
<div class="state-content">
|
|
<Icon :icon="errorIcon" :height="iconSize" class="text-error" />
|
|
<p :class="['mt-4', textClass, 'text-error']">
|
|
{{ errorText }}
|
|
</p>
|
|
<v-btn
|
|
color="primary"
|
|
variant="tonal"
|
|
class="mt-4"
|
|
@click="emit('retry')"
|
|
>
|
|
<Icon icon="solar:refresh-outline" height="20" class="mr-2" />
|
|
Coba Lagi
|
|
</v-btn>
|
|
<slot name="error-action"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Slot -->
|
|
<slot v-else></slot>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.loading-state-container {
|
|
width: 100%;
|
|
min-height: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.state-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
width: 100%;
|
|
}
|
|
</style>
|