136 lines
2.8 KiB
Vue
136 lines
2.8 KiB
Vue
<template>
|
|
<span v-if="floating" class="table-loading-anchor" aria-hidden="true"></span>
|
|
<Teleport to="body" :disabled="!floating">
|
|
<div
|
|
class="table-loading"
|
|
:class="[variant, tone, { 'screen-floating': floating, 'modal-floating': floating && blocking }]"
|
|
role="status"
|
|
:aria-label="ariaLabel"
|
|
aria-live="polite"
|
|
>
|
|
<FloatingLightBandWindow
|
|
:icon="icon"
|
|
:message="message"
|
|
:motion="motion"
|
|
:title="title"
|
|
:tone="tone"
|
|
:variant="variant"
|
|
/>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
import FloatingLightBandWindow from './FloatingLightBandWindow.vue'
|
|
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'panel',
|
|
validator: (value) => ['panel', 'detail', 'overlay', 'drawer', 'banner'].includes(value)
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: 'theme',
|
|
validator: (value) => ['theme', 'sky', 'success'].includes(value)
|
|
},
|
|
title: { type: String, default: '' },
|
|
message: { type: String, default: '' },
|
|
icon: { type: String, default: 'mdi mdi-loading' },
|
|
motion: {
|
|
type: String,
|
|
default: 'loop',
|
|
validator: (value) => ['loop', 'entry'].includes(value)
|
|
},
|
|
floating: { type: Boolean, default: false },
|
|
blocking: { type: Boolean, default: false },
|
|
showSkeleton: { type: Boolean, default: true },
|
|
skeletonRows: { type: Number, default: 5 }
|
|
})
|
|
|
|
const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).join(', ') || 'Loading')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.table-loading {
|
|
width: 100%;
|
|
color: #64748b;
|
|
}
|
|
|
|
.table-loading-anchor {
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-loading.screen-floating {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 430;
|
|
width: 100vw;
|
|
height: 100dvh;
|
|
min-height: 100dvh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: rgba(248, 250, 252, 0.08);
|
|
backdrop-filter: blur(0.5px);
|
|
-webkit-backdrop-filter: blur(0.5px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.table-loading.screen-floating.modal-floating {
|
|
z-index: 560;
|
|
background: rgba(15, 23, 42, 0.18);
|
|
backdrop-filter: blur(2px);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.table-loading.panel {
|
|
min-height: 220px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 28px 24px;
|
|
}
|
|
|
|
.table-loading.panel.screen-floating {
|
|
min-height: 100dvh;
|
|
padding: 24px;
|
|
}
|
|
|
|
.table-loading.detail {
|
|
min-height: 180px;
|
|
display: grid;
|
|
align-items: center;
|
|
justify-items: center;
|
|
padding: 22px 24px;
|
|
}
|
|
|
|
.table-loading.overlay,
|
|
.table-loading.drawer {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.table-loading.overlay {
|
|
min-height: 0;
|
|
}
|
|
|
|
.table-loading.drawer {
|
|
min-height: 160px;
|
|
}
|
|
|
|
.table-loading.banner {
|
|
display: block;
|
|
min-height: 0;
|
|
padding: 0;
|
|
color: #255b7d;
|
|
}
|
|
</style>
|