INIT
This commit is contained in:
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
|
||||
import type { AnchorProps } from "./index.js";
|
||||
import type { Measurable } from "../../../../internal/floating-svelte/types.js";
|
||||
|
||||
let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
|
||||
|
||||
FloatingAnchorState.create(
|
||||
{
|
||||
id: boxWith(() => id),
|
||||
virtualEl: boxWith(() => virtualEl as unknown as Measurable | null),
|
||||
ref,
|
||||
},
|
||||
tooltip
|
||||
);
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
node_modules/bits-ui/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte.d.ts
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { AnchorProps } from "./index.js";
|
||||
declare const FloatingLayerAnchor: import("svelte").Component<AnchorProps, {}, "">;
|
||||
type FloatingLayerAnchor = ReturnType<typeof FloatingLayerAnchor>;
|
||||
export default FloatingLayerAnchor;
|
||||
Generated
Vendored
+20
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import { FloatingArrowState } from "../use-floating-layer.svelte.js";
|
||||
import { Arrow, type ArrowProps } from "../../arrow/index.js";
|
||||
import { useId } from "../../../../internal/use-id.js";
|
||||
|
||||
let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
|
||||
|
||||
const arrowState = FloatingArrowState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, arrowState.props));
|
||||
</script>
|
||||
|
||||
<Arrow {...mergedProps} />
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import { type ArrowProps } from "../../arrow/index.js";
|
||||
declare const FloatingLayerArrow: import("svelte").Component<ArrowProps, {}, "ref">;
|
||||
type FloatingLayerArrow = ReturnType<typeof FloatingLayerArrow>;
|
||||
export default FloatingLayerArrow;
|
||||
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { type Snippet, onMount } from "svelte";
|
||||
|
||||
let {
|
||||
content,
|
||||
onPlaced,
|
||||
}: {
|
||||
content?: Snippet<
|
||||
[{ props: Record<string, unknown>; wrapperProps: Record<string, unknown> }]
|
||||
>;
|
||||
onPlaced?: () => void;
|
||||
} = $props();
|
||||
|
||||
onMount(() => {
|
||||
onPlaced?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render content?.({ props: {}, wrapperProps: {} })}
|
||||
Generated
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
import { type Snippet } from "svelte";
|
||||
type $$ComponentProps = {
|
||||
content?: Snippet<[
|
||||
{
|
||||
props: Record<string, unknown>;
|
||||
wrapperProps: Record<string, unknown>;
|
||||
}
|
||||
]>;
|
||||
onPlaced?: () => void;
|
||||
};
|
||||
declare const FloatingLayerContentStatic: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type FloatingLayerContentStatic = ReturnType<typeof FloatingLayerContentStatic>;
|
||||
export default FloatingLayerContentStatic;
|
||||
Generated
Vendored
+65
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import { FloatingContentState } from "../use-floating-layer.svelte.js";
|
||||
import type { ContentImplProps } from "./index.js";
|
||||
import { useId } from "../../../../internal/use-id.js";
|
||||
|
||||
let {
|
||||
content,
|
||||
side = "bottom",
|
||||
sideOffset = 0,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
id,
|
||||
arrowPadding = 0,
|
||||
avoidCollisions = true,
|
||||
collisionBoundary = [],
|
||||
collisionPadding = 0,
|
||||
hideWhenDetached = false,
|
||||
onPlaced = () => {},
|
||||
sticky = "partial",
|
||||
updatePositionStrategy = "optimized",
|
||||
strategy = "fixed",
|
||||
dir = "ltr",
|
||||
style = {},
|
||||
wrapperId = useId(),
|
||||
customAnchor = null,
|
||||
enabled,
|
||||
tooltip = false,
|
||||
}: ContentImplProps = $props();
|
||||
|
||||
const contentState = FloatingContentState.create(
|
||||
{
|
||||
side: boxWith(() => side),
|
||||
sideOffset: boxWith(() => sideOffset),
|
||||
align: boxWith(() => align),
|
||||
alignOffset: boxWith(() => alignOffset),
|
||||
id: boxWith(() => id),
|
||||
arrowPadding: boxWith(() => arrowPadding),
|
||||
avoidCollisions: boxWith(() => avoidCollisions),
|
||||
collisionBoundary: boxWith(() => collisionBoundary),
|
||||
collisionPadding: boxWith(() => collisionPadding),
|
||||
hideWhenDetached: boxWith(() => hideWhenDetached),
|
||||
onPlaced: boxWith(() => onPlaced),
|
||||
sticky: boxWith(() => sticky),
|
||||
updatePositionStrategy: boxWith(() => updatePositionStrategy),
|
||||
strategy: boxWith(() => strategy),
|
||||
dir: boxWith(() => dir),
|
||||
style: boxWith(() => style),
|
||||
enabled: boxWith(() => enabled),
|
||||
wrapperId: boxWith(() => wrapperId),
|
||||
customAnchor: boxWith(() => customAnchor),
|
||||
},
|
||||
tooltip
|
||||
);
|
||||
|
||||
const mergedProps = $derived(
|
||||
mergeProps(contentState.wrapperProps, {
|
||||
style: {
|
||||
pointerEvents: "auto",
|
||||
},
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
{@render content?.({ props: contentState.props, wrapperProps: mergedProps })}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { ContentImplProps } from "./index.js";
|
||||
declare const FloatingLayerContent: import("svelte").Component<ContentImplProps, {}, "">;
|
||||
type FloatingLayerContent = ReturnType<typeof FloatingLayerContent>;
|
||||
export default FloatingLayerContent;
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import { FloatingRootState } from "../use-floating-layer.svelte.js";
|
||||
|
||||
let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
|
||||
|
||||
FloatingRootState.create(tooltip);
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { Snippet } from "svelte";
|
||||
type $$ComponentProps = {
|
||||
children?: Snippet;
|
||||
tooltip?: boolean;
|
||||
};
|
||||
declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type FloatingLayer = ReturnType<typeof FloatingLayer>;
|
||||
export default FloatingLayer;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
export { default as Anchor } from "./floating-layer-anchor.svelte";
|
||||
export { default as Arrow } from "./floating-layer-arrow.svelte";
|
||||
export { default as Content } from "./floating-layer-content.svelte";
|
||||
export { default as ContentStatic } from "./floating-layer-content-static.svelte";
|
||||
export { default as Root } from "./floating-layer.svelte";
|
||||
export type { FloatingLayerContentImplProps as ContentImplProps, FloatingLayerContentProps as ContentProps, FloatingLayerAnchorProps as AnchorProps, } from "../types.js";
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
export { default as Anchor } from "./floating-layer-anchor.svelte";
|
||||
export { default as Arrow } from "./floating-layer-arrow.svelte";
|
||||
export { default as Content } from "./floating-layer-content.svelte";
|
||||
export { default as ContentStatic } from "./floating-layer-content-static.svelte";
|
||||
export { default as Root } from "./floating-layer.svelte";
|
||||
Reference in New Issue
Block a user