Floater imrprovement with parametrable show and hide events, title and minimization.

This commit is contained in:
Clément Pons
2025-10-10 16:57:36 +02:00
parent 26aa0847d9
commit 16cc3ee438
7 changed files with 78 additions and 39 deletions

View File

@@ -1,11 +1,11 @@
import { dom, icon, type NodeChildren, type Node, div, type Class } from "#shared/dom.util";
import { parseURL } from 'ufo';
import render from "#shared/markdown.util";
import { popper } from "#shared/floating.util";
import { Canvas } from "#shared/canvas.util";
import { Content, iconByType, type LocalContent } from "#shared/content.util";
import { parsePath, unifySlug } from "#shared/general.util";
import { async, floater, loading } from "./components.util";
import { unifySlug } from "#shared/general.util";
import { async, floater } from "./components.util";
import type { FloatState } from "./floating.util";
export type CustomProse = (properties: any, children: NodeChildren) => Node;
@@ -44,11 +44,11 @@ export const a: Prose = {
return dom('div', { class: 'w-[600px] h-[600px] group-data-[pinned]:h-full group-data-[pinned]:w-full h-[600px] relative w-[600px] relative' }, [canvas.container]);
}
return div('');
})).current], { position: 'bottom-start', pinned: false }) : element;
})).current], { position: 'bottom-start', pinned: false, title: properties?.label }) : element;
}
}
export const preview: Prose = {
custom(properties: { href: string, class?: Class, size?: 'small' | 'large' }, children) {
custom(properties: { href: string, class?: Class, label: string }, children) {
const href = properties.href as string;
const { hash, pathname } = parseURL(href);
const router = useRouter();
@@ -77,10 +77,10 @@ export const preview: Prose = {
events: {
show: ['mouseenter', 'mousemove'],
hide: ['mouseleave'],
onshow() {
return !magicKeys.current.has('control') || !magicKeys.current.has('meta');
onshow(state: FloatState) {
return state === 'shown' || state === 'hiding' || magicKeys.current.has('control') || magicKeys.current.has('meta');
}
}, }) : element;
}, title: properties?.label, href: { name: 'explore-path', params: { path: overview.path }, hash: hash } }) : element;
}
}
export const callout: Prose = {