feat: WIP create teleport composable

This commit is contained in:
Zack Spear
2024-10-03 14:40:31 -07:00
committed by Pujit Mehrotra
parent 92ec931aff
commit d04001e052
4 changed files with 32 additions and 19 deletions

View File

@@ -45,10 +45,7 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
<div class="shrink-0 flex flex-row items-center justify-end gap-2 mt-1">
<p class="text-12px opacity-75">{{ date }}</p>
<button class="relative z-20" title="Archive Notification">
<span class="sr-only">Archive Notification</span>
<ArchiveBoxIcon class="size-4" />
</button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>

View File

@@ -72,20 +72,7 @@ const archiveNotifications: NotificationItemProps[] = [
},
];
const teleportTarget = ref<string | HTMLElement | Element>("#modals");
const determineTeleportTarget = () => {
const myModalsComponent = document.querySelector("unraid-modals");
if (!myModalsComponent?.shadowRoot) return;
const potentialTarget = myModalsComponent.shadowRoot.querySelector("#modals");
if (!potentialTarget) return;
teleportTarget.value = potentialTarget;
console.log("[determineTeleportTarget] teleportTarget", teleportTarget.value);
};
onMounted(() => {
determineTeleportTarget();
});
const { teleportTarget, determineTeleportTarget } = useTeleport();
</script>
<template>