mirror of
https://github.com/unraid/api.git
synced 2026-01-01 14:10:10 -06:00
55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ShieldExclamationIcon } from '@heroicons/vue/24/solid';
|
|
import { cn } from '~/components/shadcn/utils';
|
|
|
|
/**
|
|
* A default container for displaying loading and error states.
|
|
*
|
|
* By default, this component will expand to full height and display contents
|
|
* in the center of the container.
|
|
*
|
|
* Any slot/child will only render when a loading/error state isn't displayed.
|
|
*
|
|
* Exposes a 'retry' event (user-triggered during error state).
|
|
*
|
|
* @example
|
|
* <LoadingError @retry="retryFunction" :loading="loading" :error="error" />
|
|
*
|
|
* <LoadingError :loading="loading" :error="error">
|
|
* <p>Only displayed when both loading and error are false.</p>
|
|
* </LoadingError>
|
|
*/
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
class?: string;
|
|
loading: boolean;
|
|
error: Error | null | undefined;
|
|
}>(),
|
|
{ class: '' }
|
|
);
|
|
|
|
defineEmits(['retry']);
|
|
</script>
|
|
<template>
|
|
<div :class="cn('h-full flex flex-col items-center justify-center gap-3', props.class)">
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="contents">
|
|
<LoadingSpinner />
|
|
<p>Loading Notifications...</p>
|
|
</div>
|
|
<!-- Error State -->
|
|
<div v-else-if="error" class="space-y-3">
|
|
<div class="flex justify-center">
|
|
<ShieldExclamationIcon class="h-10 text-unraid-red" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold">{{ `Error` }}</h3>
|
|
<p>{{ error.message }}</p>
|
|
</div>
|
|
<Button type="button" class="w-full" @click="$emit('retry')">Try Again</Button>
|
|
</div>
|
|
<!-- Default state -->
|
|
<slot v-else />
|
|
</div>
|
|
</template>
|