64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { VAlert } from 'vuetify/components';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
export type AlertData = Pick<InstanceType<typeof VAlert>["$props"],
|
||
|
|
| "color"
|
||
|
|
| "icon"
|
||
|
|
| "text"
|
||
|
|
| "title"
|
||
|
|
| "type"
|
||
|
|
| "closable"
|
||
|
|
| "closeIcon"
|
||
|
|
>;
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
alerts: Array<AlertData>;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
// eslint-disable-next-line func-call-spacing
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: "update:alerts", value: typeof props.alerts): void,
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const alerts = computed({
|
||
|
|
get() { return props.alerts ?? []; },
|
||
|
|
set(value: typeof props.alerts) { emit("update:alerts", value); },
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VOverlay
|
||
|
|
model-value
|
||
|
|
:scrim="false"
|
||
|
|
no-click-animation
|
||
|
|
persistent
|
||
|
|
class="alerts"
|
||
|
|
>
|
||
|
|
<VAlert
|
||
|
|
v-for="i of alerts"
|
||
|
|
:key="alerts.indexOf(i)"
|
||
|
|
class="alert"
|
||
|
|
:color=" i.color"
|
||
|
|
model-value
|
||
|
|
:icon="i.icon ?? false"
|
||
|
|
:text="i.text"
|
||
|
|
:title="i.title"
|
||
|
|
:type="i.type ?? 'error'"
|
||
|
|
:closable="i.closable ?? true"
|
||
|
|
:close-icon="i.closeIcon ?? undefined"
|
||
|
|
/>
|
||
|
|
</VOverlay>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.alerts {
|
||
|
|
flex-direction: column-reverse;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert {
|
||
|
|
margin: 0.5em;
|
||
|
|
}
|
||
|
|
</style>
|