add more floating things

huntabyte · Dec 2, 2023 · 05b70df · 05b70df
1 parent 541cb33
commit 05b70df
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 152 deletions.
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
@@ -3,7 +3,14 @@ import { menu } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
 import type * as ContextMenu from "$lib/bits/context-menu/_types";
 import * as C from "@/content/constants.js";
-import { transitionProps, asChild, union, builderAndAttrsSlotProps } from "./helpers";
+import {
+	transitionProps,
+	asChild,
+	union,
+	builderAndAttrsSlotProps,
+	enums,
+	seeFloating
+} from "./helpers";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
@@ -26,31 +33,63 @@ export const content: APISchema<ContextMenu.ContentProps> = {
 		alignOffset: {
 			type: C.NUMBER,
 			default: "0",
-			description: "An offset in pixels from the 'start' or 'end' alignment options."
+			description: seeFloating(
+				"An offset in pixels from the 'start' or 'end' alignment options.",
+				"https://floating-ui.com/docs/offset#options"
+			)
 		},
 		avoidCollisions: {
 			type: C.BOOLEAN,
 			default: C.TRUE,
-			description:
-				"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges."
+			description: seeFloating(
+				"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.",
+				"https://floating-ui.com/docs/flip"
+			)
 		},
 		collisionBoundary: {
 			type: {
 				type: C.UNION,
 				definition: union("'clippingAncestors'", "Element", "Array<Element>", "Rect")
 			},
-			description: "A boundary element or array of elements to check for collisions against."
+			description: seeFloating(
+				"A boundary element or array of elements to check for collisions against.",
+				"https://floating-ui.com/docs/detectoverflow#boundary"
+			)
 		},
 		collisionPadding: {
 			type: C.NUMBER,
 			default: "0",
-			description:
-				"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision."
+			description: seeFloating(
+				"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.",
+				"https://floating-ui.com/docs/detectOverflow#padding"
+			)
 		},
 		fitViewport: {
 			type: C.BOOLEAN,
 			default: C.FALSE,
-			description: "Whether the floating element should be constrained to the viewport."
+			description: seeFloating(
+				"Whether the floating element should be constrained to the viewport.",
+				"https://floating-ui.com/docs/size"
+			)
+		},
+		strategy: {
+			type: {
+				type: C.ENUM,
+				definition: enums("absolute", "fixed")
+			},
+			default: "absolute",
+			description: seeFloating(
+				"The positioning strategy to use for the floating element.",
+				"https://floating-ui.com/docs/computeposition#strategy"
+			)
+		},
+		overlap: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: seeFloating(
+				"Whether the floating element can overlap the reference element.",
+				"https://floating-ui.com/docs/shift#options"
+			)
 		}
 	},
 	slotProps: { ...builderAndAttrsSlotProps },

diff --git a/src/content/api-reference/floating.ts b/src/content/api-reference/floating.ts
@@ -1,59 +1,102 @@
 import * as C from "@/content/constants.js";
-import { enums, union } from "./helpers.js";
+import { enums, seeFloating, union } from "./helpers.js";
 
 export const floatingPositioning = {
 	side: {
 		type: {
 			type: C.ENUM,
 			definition: enums("top", "right", "bottom", "left")
 		},
-		description:
-			"The preferred side of the anchor to render against when open. Will be reversed when collisions occur."
+		description: seeFloating(
+			"The preferred side of the anchor to render against when open. Will be reversed when collisions occur.",
+			"https://floating-ui.com/docs/computePosition#placement"
+		)
 	},
 	sideOffset: {
 		type: C.NUMBER,
 		default: "0",
-		description: "The amount of offset to apply to the menu's position on the x-axis."
+		description: seeFloating(
+			"The amount of offset to apply to the menu's position on the x-axis.",
+			"https://floating-ui.com/docs/offset#options"
+		)
 	},
 	align: {
 		type: {
 			type: C.ENUM,
 			definition: enums("start", "center", "end")
 		},
-		description: "The preferred alignment of the anchor to render against when open."
+		description: seeFloating(
+			"The preferred alignment of the anchor to render against when open.",
+			"https://floating-ui.com/docs/computePosition#placement"
+		)
 	},
 	alignOffset: {
 		type: C.NUMBER,
 		default: "0",
-		description: "An offset in pixels from the 'start' or 'end' alignment options."
+		description: seeFloating(
+			"An offset in pixels from the 'start' or 'end' alignment options.",
+			"https://floating-ui.com/docs/offset#options"
+		)
 	},
 	avoidCollisions: {
 		type: C.BOOLEAN,
 		default: C.TRUE,
-		description:
-			"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges."
+		description: seeFloating(
+			"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.",
+			"https://floating-ui.com/docs/flip"
+		)
 	},
 	collisionBoundary: {
 		type: {
 			type: C.UNION,
 			definition: union("'clippingAncestors'", "Element", "Array<Element>", "Rect")
 		},
-		description: "A boundary element or array of elements to check for collisions against."
+		description: seeFloating(
+			"A boundary element or array of elements to check for collisions against.",
+			"https://floating-ui.com/docs/detectoverflow#boundary"
+		)
 	},
 	collisionPadding: {
 		type: C.NUMBER,
 		default: "0",
-		description:
-			"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision."
+		description: seeFloating(
+			"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.",
+			"https://floating-ui.com/docs/detectOverflow#padding"
+		)
 	},
 	fitViewport: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
-		description: "Whether the floating element should be constrained to the viewport."
+		description: seeFloating(
+			"Whether the floating element should be constrained to the viewport.",
+			"https://floating-ui.com/docs/size"
+		)
 	},
 	sameWidth: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
-		description: "Whether the content should be the same width as the trigger."
+		description: seeFloating(
+			"Whether the content should be the same width as the trigger.",
+			"https://floating-ui.com/docs/size"
+		)
+	},
+	strategy: {
+		type: {
+			type: C.ENUM,
+			definition: enums("absolute", "fixed")
+		},
+		default: "absolute",
+		description: seeFloating(
+			"The positioning strategy to use for the floating element.",
+			"https://floating-ui.com/docs/computeposition#strategy"
+		)
+	},
+	overlap: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: seeFloating(
+			"Whether the floating element can overlap the reference element.",
+			"https://floating-ui.com/docs/shift#options"
+		)
 	}
 };
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
@@ -93,9 +93,17 @@ export function portalProp(compName = "content") {
 }
 
 export function union(...types: string[]): string {
-	return types.join(" | ");
+	return types
+		.join(" | ")
+		.replaceAll(" ", "&nbsp;")
+		.replaceAll("<", "&lt;")
+		.replaceAll(">", "&gt;");
 }
 
 export function enums(...values: string[]): string {
 	return values.map((value) => `'${value}'`).join(" | ");
 }
+
+export function seeFloating(content: string, link: string) {
+	return `${content} [Floating UI reference](${link}).`;
+}
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
@@ -1,42 +1,10 @@
 import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
-import type { Boundary } from "../floating/_types";
+import type { FloatingProps } from "$lib/bits/floating/_types.js";
+
+type ContextFloatingProps = Omit<FloatingProps, "sameWidth" | "side" | "sideOffset" | "align">;
 
 export type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		/**
-		 * An offset in pixels from the "start" or "end" alignment options.
-		 */
-		alignOffset?: number;
-
-		/**
-		 * When `true`, overrides the `side` and `align` options to prevent collisions
-		 * with the boundary edges.
-		 *
-		 * @defaultValue `true`
-		 */
-		avoidCollisions?: boolean;
-
-		/**
-		 * The amount in pixels of virtual padding around the viewport edges to check
-		 * for overflow which will cause a collision.
-		 */
-		collisionPadding?: number;
-
-		/**
-		 * A boundary element or array of elements to check for collisions against.
-		 */
-		collisionBoundary?: Boundary;
-
-		/**
-		 * Whether the floating element should be constrained to the viewport.
-		 *
-		 * @defaultValue `false`
-		 */
-		fitViewport?: boolean;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
+> = Expand<ContextFloatingProps & TransitionProps<T, In, Out> & AsChild>;
diff --git a/src/lib/bits/date-picker/components/date-picker-content.svelte b/src/lib/bits/date-picker/components/date-picker-content.svelte
@@ -27,6 +27,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { content },
@@ -54,7 +56,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 

diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
@@ -27,6 +27,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { content },
@@ -54,7 +56,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>