stuff

src/lib/popup.ts

@@ -0,0 +1,28 @@
+import tippy from "tippy.js"
+import type {Action} from "svelte/action"
+import type {ComponentType, SvelteComponent} from "svelte"
+
+export const popup: Action<HTMLButtonElement, ComponentType> = (node, Component) => {
+  let component: SvelteComponent | undefined
+  let target: HTMLElement | undefined
+  const edit = tippy(node, {
+    interactive: true,
+    trigger: "click",
+    onShow(instance) {
+      target = instance.popper.querySelector(".tippy-content") as HTMLElement
+      target.classList.add("active")
+      component ??= new Component({target})
+    },
+    onHidden() {
+      component?.$destroy()
+      target?.classList.remove("active")
+      component = undefined
+    },
+  })
+
+  return {
+    destroy() {
+      edit.destroy()
+    },
+  }
+}