This commit is contained in:
+8
@@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
import type { PopoverArrowProps } from "../types.js";
|
||||
import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: PopoverArrowProps = $props();
|
||||
</script>
|
||||
|
||||
<FloatingLayerArrow bind:ref {...restProps} data-popover-arrow="" />
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
declare const PopoverArrow: import("svelte").Component<import("../../utilities/arrow/types.js").ArrowProps, {}, "ref">;
|
||||
type PopoverArrow = ReturnType<typeof PopoverArrow>;
|
||||
export default PopoverArrow;
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { PopoverCloseProps } from "../types.js";
|
||||
import { PopoverCloseState } from "../popover.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
child,
|
||||
children,
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
...restProps
|
||||
}: PopoverCloseProps = $props();
|
||||
|
||||
const closeState = PopoverCloseState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
const mergedProps = $derived(mergeProps(restProps, closeState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<button {...mergedProps}>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopoverCloseProps } from "../types.js";
|
||||
declare const PopoverClose: import("svelte").Component<PopoverCloseProps, {}, "ref">;
|
||||
type PopoverClose = ReturnType<typeof PopoverClose>;
|
||||
export default PopoverClose;
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { PopoverContentStaticProps } from "../types.js";
|
||||
import { PopoverContentState } from "../popover.svelte.js";
|
||||
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
|
||||
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
child,
|
||||
children,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
forceMount = false,
|
||||
onCloseAutoFocus = noop,
|
||||
onEscapeKeydown = noop,
|
||||
onInteractOutside = noop,
|
||||
trapFocus = true,
|
||||
preventScroll = false,
|
||||
style,
|
||||
...restProps
|
||||
}: PopoverContentStaticProps = $props();
|
||||
|
||||
const contentState = PopoverContentState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
onInteractOutside: boxWith(() => onInteractOutside),
|
||||
onEscapeKeydown: boxWith(() => onEscapeKeydown),
|
||||
customAnchor: boxWith(() => null),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
||||
</script>
|
||||
|
||||
{#if forceMount}
|
||||
<PopperLayerForceMount
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
isStatic
|
||||
enabled={contentState.root.opts.open.current}
|
||||
{id}
|
||||
{trapFocus}
|
||||
{preventScroll}
|
||||
loop
|
||||
forceMount={true}
|
||||
{onCloseAutoFocus}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{
|
||||
style: getFloatingContentCSSVars("popover"),
|
||||
},
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayerForceMount>
|
||||
{:else if !forceMount}
|
||||
<PopperLayer
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
isStatic
|
||||
open={contentState.root.opts.open.current}
|
||||
{id}
|
||||
{trapFocus}
|
||||
{preventScroll}
|
||||
loop
|
||||
forceMount={false}
|
||||
{onCloseAutoFocus}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("popover") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayer>
|
||||
{/if}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopoverContentStaticProps } from "../types.js";
|
||||
declare const PopoverContentStatic: import("svelte").Component<PopoverContentStaticProps, {}, "ref">;
|
||||
type PopoverContentStatic = ReturnType<typeof PopoverContentStatic>;
|
||||
export default PopoverContentStatic;
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { PopoverContentProps } from "../types.js";
|
||||
import { PopoverContentState } from "../popover.svelte.js";
|
||||
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
|
||||
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
child,
|
||||
children,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
forceMount = false,
|
||||
onOpenAutoFocus = noop,
|
||||
onCloseAutoFocus = noop,
|
||||
onEscapeKeydown = noop,
|
||||
onInteractOutside = noop,
|
||||
trapFocus = true,
|
||||
preventScroll = false,
|
||||
customAnchor = null,
|
||||
style,
|
||||
...restProps
|
||||
}: PopoverContentProps = $props();
|
||||
|
||||
const contentState = PopoverContentState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
onInteractOutside: boxWith(() => onInteractOutside),
|
||||
onEscapeKeydown: boxWith(() => onEscapeKeydown),
|
||||
customAnchor: boxWith(() => customAnchor),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
||||
|
||||
// respect user's trapFocus setting, but disable when hover-opened without interaction
|
||||
const effectiveTrapFocus = $derived(trapFocus && contentState.shouldTrapFocus);
|
||||
|
||||
// prevent auto-focus when opened via hover until user interacts
|
||||
function handleOpenAutoFocus(e: Event) {
|
||||
if (!contentState.shouldTrapFocus) {
|
||||
e.preventDefault();
|
||||
}
|
||||
onOpenAutoFocus(e);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if forceMount}
|
||||
<PopperLayerForceMount
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
enabled={contentState.root.opts.open.current}
|
||||
{id}
|
||||
trapFocus={effectiveTrapFocus}
|
||||
{preventScroll}
|
||||
loop
|
||||
forceMount={true}
|
||||
{customAnchor}
|
||||
onOpenAutoFocus={handleOpenAutoFocus}
|
||||
{onCloseAutoFocus}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props, wrapperProps })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("popover") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...wrapperProps}>
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayerForceMount>
|
||||
{:else if !forceMount}
|
||||
<PopperLayer
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
open={contentState.root.opts.open.current}
|
||||
{id}
|
||||
trapFocus={effectiveTrapFocus}
|
||||
{preventScroll}
|
||||
loop
|
||||
forceMount={false}
|
||||
{customAnchor}
|
||||
onOpenAutoFocus={handleOpenAutoFocus}
|
||||
{onCloseAutoFocus}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props, wrapperProps })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("popover") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...wrapperProps}>
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayer>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopoverContentProps } from "../types.js";
|
||||
declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
|
||||
type PopoverContent = ReturnType<typeof PopoverContent>;
|
||||
export default PopoverContent;
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import { PopoverOverlayState } from "../popover.svelte.js";
|
||||
import type { PopoverOverlayProps } from "../types.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
id = createId(uid),
|
||||
forceMount = false,
|
||||
child,
|
||||
children,
|
||||
ref = $bindable(null),
|
||||
...restProps
|
||||
}: PopoverOverlayProps = $props();
|
||||
|
||||
const overlayState = PopoverOverlayState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, overlayState.props));
|
||||
</script>
|
||||
|
||||
{#if overlayState.shouldRender || forceMount}
|
||||
{#if child}
|
||||
{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
|
||||
{:else}
|
||||
<div {...mergeProps(mergedProps)}>
|
||||
{@render children?.(overlayState.snippetProps)}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopoverOverlayProps } from "../types.js";
|
||||
declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps, {}, "ref">;
|
||||
type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
|
||||
export default PopoverOverlay;
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { PopoverTriggerProps } from "../types.js";
|
||||
import { PopoverTriggerState } from "../popover.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
type = "button",
|
||||
disabled = false,
|
||||
openOnHover = false,
|
||||
openDelay = 700,
|
||||
closeDelay = 300,
|
||||
...restProps
|
||||
}: PopoverTriggerProps = $props();
|
||||
|
||||
const triggerState = PopoverTriggerState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
disabled: boxWith(() => Boolean(disabled)),
|
||||
openOnHover: boxWith(() => openOnHover),
|
||||
openDelay: boxWith(() => openDelay),
|
||||
closeDelay: boxWith(() => closeDelay),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
|
||||
</script>
|
||||
|
||||
<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<button {...mergedProps}>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
</FloatingLayerAnchor>
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopoverTriggerProps } from "../types.js";
|
||||
declare const PopoverTrigger: import("svelte").Component<PopoverTriggerProps, {}, "ref">;
|
||||
type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
|
||||
export default PopoverTrigger;
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import type { PopoverRootProps } from "../types.js";
|
||||
import { PopoverRootState } from "../popover.svelte.js";
|
||||
import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
onOpenChange = noop,
|
||||
onOpenChangeComplete = noop,
|
||||
children,
|
||||
}: PopoverRootProps = $props();
|
||||
|
||||
PopoverRootState.create({
|
||||
open: boxWith(
|
||||
() => open,
|
||||
(v) => {
|
||||
open = v;
|
||||
onOpenChange(v);
|
||||
}
|
||||
),
|
||||
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
|
||||
});
|
||||
</script>
|
||||
|
||||
<FloatingLayer>
|
||||
{@render children?.()}
|
||||
</FloatingLayer>
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
declare const Popover: import("svelte").Component<import("../types.js").PopoverRootPropsWithoutHTML, {}, "open">;
|
||||
type Popover = ReturnType<typeof Popover>;
|
||||
export default Popover;
|
||||
Reference in New Issue
Block a user