This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
@@ -0,0 +1,98 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { LinkPreviewContentStaticProps } from "../types.js";
import { LinkPreviewContentState } from "../link-preview.svelte.js";
import { createId } from "../../../internal/create-id.js";
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
import Mounted from "../../utilities/mounted.svelte";
import { noop } from "../../../internal/noop.js";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
onInteractOutside = noop,
onEscapeKeydown = noop,
forceMount = false,
style,
...restProps
}: LinkPreviewContentStaticProps = $props();
const contentState = LinkPreviewContentState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
onInteractOutside: boxWith(() => onInteractOutside),
onEscapeKeydown: boxWith(() => onEscapeKeydown),
});
const mergedProps = $derived(mergeProps(restProps, contentState.props));
</script>
{#if forceMount}
<PopperLayerForceMount
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
enabled={contentState.root.opts.open.current}
isStatic
{id}
trapFocus={false}
loop={false}
preventScroll={false}
forceMount={true}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("link-preview") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, ...contentState.snippetProps })}
{:else}
<div {...finalProps}>
{@render children?.()}
</div>
{/if}
<Mounted bind:mounted={contentState.root.contentMounted} />
{/snippet}
</PopperLayerForceMount>
{:else if !forceMount}
<PopperLayer
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
open={contentState.root.opts.open.current}
isStatic
{id}
trapFocus={false}
loop={false}
preventScroll={false}
forceMount={false}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("link-preview") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, ...contentState.snippetProps })}
{:else}
<div {...finalProps}>
{@render children?.()}
</div>
{/if}
{/snippet}
</PopperLayer>
{/if}
@@ -0,0 +1,4 @@
import type { LinkPreviewContentStaticProps } from "../types.js";
declare const LinkPreviewContentStatic: import("svelte").Component<LinkPreviewContentStaticProps, {}, "ref">;
type LinkPreviewContentStatic = ReturnType<typeof LinkPreviewContentStatic>;
export default LinkPreviewContentStatic;
@@ -0,0 +1,120 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { LinkPreviewContentProps } from "../types.js";
import { LinkPreviewContentState } from "../link-preview.svelte.js";
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
import Mounted from "../../utilities/mounted.svelte";
import { noop } from "../../../internal/noop.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
side = "top",
sideOffset = 0,
align = "center",
avoidCollisions = true,
arrowPadding = 0,
sticky = "partial",
hideWhenDetached = false,
collisionPadding = 0,
onInteractOutside = noop,
onEscapeKeydown = noop,
forceMount = false,
style,
...restProps
}: LinkPreviewContentProps = $props();
const contentState = LinkPreviewContentState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
onInteractOutside: boxWith(() => onInteractOutside),
onEscapeKeydown: boxWith(() => onEscapeKeydown),
});
const floatingProps = $derived({
side,
sideOffset,
align,
avoidCollisions,
arrowPadding,
sticky,
hideWhenDetached,
collisionPadding,
});
const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
</script>
{#if forceMount}
<PopperLayerForceMount
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
enabled={contentState.root.opts.open.current}
{id}
trapFocus={false}
loop={false}
preventScroll={false}
forceMount={true}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props, wrapperProps })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("link-preview") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
{:else}
<div {...wrapperProps}>
<div {...finalProps}>
{@render children?.()}
</div>
</div>
{/if}
<Mounted bind:mounted={contentState.root.contentMounted} />
{/snippet}
</PopperLayerForceMount>
{:else if !forceMount}
<PopperLayer
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
open={contentState.root.opts.open.current}
{id}
trapFocus={false}
loop={false}
preventScroll={false}
forceMount={false}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props, wrapperProps })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("link-preview") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
{:else}
<div {...wrapperProps}>
<div {...finalProps}>
{@render children?.()}
</div>
</div>
{/if}
<Mounted bind:mounted={contentState.root.contentMounted} />
{/snippet}
</PopperLayer>
{/if}
@@ -0,0 +1,4 @@
import type { LinkPreviewContentProps } from "../types.js";
declare const LinkPreviewContent: import("svelte").Component<LinkPreviewContentProps, {}, "ref">;
type LinkPreviewContent = ReturnType<typeof LinkPreviewContent>;
export default LinkPreviewContent;
@@ -0,0 +1,37 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { LinkPreviewTriggerProps } from "../types.js";
import { LinkPreviewTriggerState } from "../link-preview.svelte.js";
import { createId } from "../../../internal/create-id.js";
import { FloatingLayer } from "../../utilities/floating-layer/index.js";
const uid = $props.id();
let {
ref = $bindable(null),
id = createId(uid),
child,
children,
...restProps
}: LinkPreviewTriggerProps = $props();
const triggerState = LinkPreviewTriggerState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, triggerState.props));
</script>
<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<a {...mergedProps}>
{@render children?.()}
</a>
{/if}
</FloatingLayer.Anchor>
@@ -0,0 +1,4 @@
import type { LinkPreviewTriggerProps } from "../types.js";
declare const LinkPreviewTrigger: import("svelte").Component<LinkPreviewTriggerProps, {}, "ref">;
type LinkPreviewTrigger = ReturnType<typeof LinkPreviewTrigger>;
export default LinkPreviewTrigger;
@@ -0,0 +1,35 @@
<script lang="ts">
import { boxWith } from "svelte-toolbelt";
import type { LinkPreviewRootProps } from "../types.js";
import { LinkPreviewRootState } from "../link-preview.svelte.js";
import { noop } from "../../../internal/noop.js";
import { FloatingLayer } from "../../utilities/floating-layer/index.js";
let {
disabled = false,
open = $bindable(false),
onOpenChange = noop,
onOpenChangeComplete = noop,
openDelay = 700,
closeDelay = 300,
children,
}: LinkPreviewRootProps = $props();
LinkPreviewRootState.create({
disabled: boxWith(() => disabled),
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
openDelay: boxWith(() => openDelay),
closeDelay: boxWith(() => closeDelay),
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
</script>
<FloatingLayer.Root>
{@render children?.()}
</FloatingLayer.Root>
@@ -0,0 +1,3 @@
declare const LinkPreview: import("svelte").Component<import("../types.js").LinkPreviewRootPropsWithoutHTML, {}, "open">;
type LinkPreview = ReturnType<typeof LinkPreview>;
export default LinkPreview;