You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.4 KiB
77 lines
1.4 KiB
<script lang="ts">
|
|
import type { fireNotification } from "../utils";
|
|
|
|
type t = Parameters<typeof fireNotification>;
|
|
type Notification = {
|
|
type: t[0];
|
|
content: t[1];
|
|
lifetime: t[2];
|
|
};
|
|
|
|
export let nots: (Notification & { id: number })[] = [];
|
|
|
|
const removeId = (id: number) => (nots = nots.filter((e) => e.id != id));
|
|
|
|
let gid = 0;
|
|
document.addEventListener("CreateNotification", <any>((
|
|
e: CustomEvent<Notification>
|
|
) => {
|
|
const id = gid++;
|
|
nots = [...nots, { ...e.detail, id }];
|
|
setTimeout(() => removeId(id), (e.detail.lifetime || 3) * 1000);
|
|
}));
|
|
</script>
|
|
|
|
<div class="root">
|
|
{#each nots as not (not.id)}
|
|
<span class={not.type}
|
|
>{not.content}<span on:click={() => removeId(not.id)} class="clickable"
|
|
>X</span
|
|
></span
|
|
>
|
|
{/each}
|
|
</div>
|
|
|
|
<style scoped>
|
|
.clickable {
|
|
cursor: pointer;
|
|
float: right;
|
|
}
|
|
|
|
.root > span {
|
|
display: flex;
|
|
gap: 10px;
|
|
border: 1px solid;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
font-weight: bolder;
|
|
color: white;
|
|
min-width: 45vw;
|
|
}
|
|
|
|
.root {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.error {
|
|
background-color: /*KING*/ crimson;
|
|
}
|
|
|
|
.info {
|
|
background-color: cornflowerblue;
|
|
}
|
|
|
|
.warning {
|
|
background-color: darkgoldenrod;
|
|
}
|
|
|
|
.success {
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
|