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.
78 lines
1.4 KiB
78 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>
|
|
|