diff --git a/src/components/Node.vue b/src/components/Node.vue index e1686e3..4e61363 100644 --- a/src/components/Node.vue +++ b/src/components/Node.vue @@ -17,24 +17,21 @@ const unregister = inject(UnregisterNodeInjectionKey, () => {}); const node = ref<HTMLElement | null>(null); const parentNode = computed(() => node.value && node.value.parentElement); -if (register && unregister) { - watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => { - if (prevNode) { - unregister(unref(prevID)); - } - if (newNode) { - register(newID, newNode); - } - }); +watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => { + if (prevNode) { + unregister(unref(prevID)); + } + if (newNode) { + register(newID, newNode); + } +}); - onUnmounted(() => unregister(unref(props.id))); -} +onUnmounted(() => unregister(unref(props.id))); </script> <style scoped> .node { position: absolute; - z-index: -10; top: 0; left: 0; width: 100%; diff --git a/src/components/Notif.vue b/src/components/Notif.vue new file mode 100644 index 0000000..485ca4d --- /dev/null +++ b/src/components/Notif.vue @@ -0,0 +1,42 @@ +<template> + <div class="notif">!</div> +</template> + +<script setup lang="ts"></script> + +<style scoped> +.notif { + position: absolute; + top: 0; + left: 5px; + z-index: 10; + pointer-events: none; + color: var(--accent3); + font-size: x-large; + animation: 1s linear infinite bounce; + border-radius: var(--border-radius); + background: var(--locked); +} + +@keyframes bounce { + 0% { + animation-timing-function: cubic-bezier(0.1361, 0.2514, 0.2175, 0.8786); + transform: translate(0, 0px) scaleY(1); + } + 37% { + animation-timing-function: cubic-bezier(0.7674, 0.1844, 0.8382, 0.7157); + transform: translate(0, -20px) scaleY(1); + } + 72% { + animation-timing-function: cubic-bezier(0.1118, 0.2149, 0.2172, 0.941); + transform: translate(0, 0px) scaleY(1); + } + 87% { + animation-timing-function: cubic-bezier(0.7494, 0.2259, 0.8209, 0.6963); + transform: translate(0, 10px) scaleY(0.602); + } + 100% { + transform: translate(0, 0px) scaleY(1); + } +} +</style>