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.
74 lines
2.6 KiB
74 lines
2.6 KiB
<script lang="ts">
|
|
/**
|
|
* Eidos `<Tooltip.Content>` — adds responsive `size` resolution and a
|
|
* `variant` token. Maps both to `data-size` / `data-variant` so the
|
|
* recipe's padding / font-size / surface tokens kick in.
|
|
*
|
|
* Both attrs are eidos-only — the morfo doesn't declare them because
|
|
* they're pure visual concerns. Soma's `data-state` / `data-side`
|
|
* continue to come from the morfo runtime.
|
|
*/
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import { composeInlineStyle } from '$uix/eidos/lib/style';
|
|
import * as Tooltip from '$soma/components/tooltip';
|
|
import type { TooltipContentProps } from './types';
|
|
|
|
let {
|
|
size = 'md',
|
|
variant = 'solid',
|
|
matchAnchorWidth = false,
|
|
width,
|
|
minWidth,
|
|
maxWidth,
|
|
height,
|
|
minHeight,
|
|
maxHeight,
|
|
style,
|
|
children: bodyContent,
|
|
...rest
|
|
}: TooltipContentProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
|
const resolvedMatchAnchorWidth = $derived(eidos.resolve(matchAnchorWidth, false));
|
|
|
|
function serializeLength(value: string | number | undefined): string | undefined {
|
|
if (value === undefined) return undefined;
|
|
if (typeof value === 'number') {
|
|
if (!Number.isFinite(value)) return undefined;
|
|
return value === 0 ? '0' : `${value}px`;
|
|
}
|
|
const trimmed = value.trim();
|
|
return trimmed || undefined;
|
|
}
|
|
|
|
function dimensionVar(name: string, value: string | number | undefined): string | undefined {
|
|
const serialized = serializeLength(value);
|
|
return serialized ? `${name}: ${serialized};` : undefined;
|
|
}
|
|
|
|
const dimensionsStyle = $derived(
|
|
[
|
|
resolvedMatchAnchorWidth
|
|
? '--_tooltip-match-anchor-width: var(--soma-tooltip-anchor-width);'
|
|
: undefined,
|
|
dimensionVar('--_tooltip-content-width-override', serializeLength(eidos.resolve(width))),
|
|
dimensionVar('--_tooltip-content-min-width-override', serializeLength(eidos.resolve(minWidth))),
|
|
dimensionVar('--_tooltip-content-max-width-override', serializeLength(eidos.resolve(maxWidth))),
|
|
dimensionVar('--_tooltip-content-height-override', serializeLength(eidos.resolve(height))),
|
|
dimensionVar('--_tooltip-content-min-height-override', serializeLength(eidos.resolve(minHeight))),
|
|
dimensionVar('--_tooltip-content-max-height-override', serializeLength(eidos.resolve(maxHeight)))
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
);
|
|
|
|
const composedStyle = $derived(composeInlineStyle(style, dimensionsStyle));
|
|
</script>
|
|
|
|
<Tooltip.Content {...rest} style={composedStyle} data-size={resolvedSize} data-variant={variant}>
|
|
{#snippet children(snippetProps)}
|
|
{@render bodyContent?.(snippetProps)}
|
|
{/snippet}
|
|
</Tooltip.Content>
|