@torpor/ui 0.2.1 → 0.3.0

package/dist/Popover/mountHoverPopover.ts

@@ -1,57 +0,0 @@
-import type { Component } from "@torpor/view";
-import hoverTrigger from "../mount/hoverTrigger";
-import showPopover from "./showPopover";
-
-interface HoverPopoverOptions {
-	popover: Component;
-	props?: Record<PropertyKey, any>;
-	hoverDelay?: number;
-	touchDelay?: number;
-}
-
-/**
- * A mount directive for showing a popover when an element is hovered.
- * @param node The element to show the popover for
- * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
- */
-export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
-	const { popover, props, hoverDelay, touchDelay } = options;
-
-	let div: HTMLDivElement | undefined;
-
-	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
-		// Show the popover in a div
-		if (div) {
-			document.body.removeChild(div);
-		}
-		div = document.createElement("div");
-		document.body.appendChild(div);
-
-		// Get the position relative to the element, so we can reposition on scroll
-		const rect = node.getBoundingClientRect();
-		let position: { x: number; y: number };
-		if (e.type.startsWith("mouse")) {
-			const me = e as MouseEvent;
-			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
-		} else {
-			const te = e as TouchEvent;
-			position = {
-				x: te.touches[0].clientX - rect.left,
-				y: te.touches[0].clientY - rect.top,
-			};
-		}
-		const allProps = Object.assign({}, props, { anchor: node, position });
-
-		showPopover(popover, node, allProps, div);
-	}
-
-	function onExit() {
-		// Remove the div
-		if (div) {
-			document.body.removeChild(div);
-			div = undefined;
-		}
-	}
-
-	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
-}

package/dist/Popover/showPopoverPrompt.ts

@@ -1,23 +0,0 @@
-import type { Component } from "@torpor/view";
-
-/**
- * Shows a popover component in code, and asynchronously returns the value selected by the user.
- * @param popover The popover component
- * @param props The properties for the popover component
- * @param target The target element to show the popover in
- * @returns The value selected by the user
- */
-export default function showPopoverPrompt(
-	popover: Component,
-	props?: Record<PropertyKey, any>,
-	target?: Element,
-): Promise<void> {
-	return new Promise((resolve) => {
-		// Add the promise as the callback
-		const allProps = Object.assign({}, props, { callback: resolve });
-
-		// Create the popover
-		// TODO: This needs to clean up after itself, like the use methods do
-		popover(target || document.body, null, allProps);
-	});
-}

package/src/Popover/PopoverContentAnchored.torp

@@ -1,113 +0,0 @@
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverContentAnchoredProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-	/** Where the popover will be shown, relative to the popover button */
-	side?: "top" | "right" | "bottom" | "left",
-	/** How the popover will be aligned, relative to the popover button */
-	alignment?: "start" | "center" | "end",
-}
-
-/**
- * The content that is displayed for a Popover when it is open, displayed
- * alongside an element.
- */
-export default function PopoverContentAnchored($props: PopoverContentAnchoredProps) {
-	$props ??= $watch({});
-	$props.side ??= "bottom";
-	$props.alignment ??= "center";
-
-	let div: HTMLDivElement;
-	let shown = false;
-	let closeOnClick = false;
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverContentAnchored must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
-		// before we close on click. Otherwise the click immediately bubbles to the document
-		closeOnClick = false;
-		addDocumentEvent("mousedown", handleDocumentMouseDown);
-		addDocumentEvent("click", handleDocumentClick);
-
-		// Set the position and listen for window resize and scroll to reset the position
-		setPosition();
-		const scrollParent = getScrollParent(context.anchorElement)
-		scrollParent.addEventListener("resize", setPosition);
-		scrollParent.addEventListener("scroll", setPosition);
-		if (context.focusFirstElement) {
-			context.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		removeDocumentEvent("mousedown", handleDocumentMouseDown);
-		removeDocumentEvent("click", handleDocumentClick);
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		const scrollParent = getScrollParent(context.anchorElement)
-		scrollParent.removeEventListener("resize", setPosition);
-		scrollParent.removeEventListener("scroll", setPosition);
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
-		}
-	}
-
-	function handleDocumentMouseDown() {
-		closeOnClick = true;
-	}
-
-	function handleDocumentClick(e: MouseEvent) {
-		if (
-			closeOnClick &&
-			div &&
-			!div.contains(e.target as HTMLElement) &&
-			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
-		) {
-			e.preventDefault();
-			context.handleClickOutside!(e);
-		}
-	}
-
-	function setPosition() {
-		if (!context.anchorElement) {
-			throw new Error("PopoverContentAnchored must have an anchor element");
-		}
-
-		setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props.id}
-				class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Popover/PopoverOverlay.torp

@@ -1,39 +0,0 @@
-import { disableScroll } from "../mount/disableScroll";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverOverlayProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
- */
-export default function PopoverOverlay($props: PopoverOverlayProps) {
-	$props ??= $watch({});
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverOverlay must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	// Any Popover with an overlay is modal
-	context.modal = true;
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props.id}
-				class={`torp-popover-overlay ${$props.class ?? ""}`.trim()}
-				tabindex="-1"
-				onmount={(el) => disableScroll(el)}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Popover/PopoverTriggerContextual.torp

@@ -1,46 +0,0 @@
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverTriggerContextualProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The element that causes a Popover to appear or disappear when right-clicked.
- */
-export default function PopoverTriggerContextual($props: PopoverTriggerContextualProps) {
-	$props ??= $watch({});
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverTriggerContextual must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	function handleContextual(e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
-		e.preventDefault();
-		if ($state.position) {
-			// Get the position relative to the element, so we can reposition on scroll
-			const rect = e.currentTarget.getBoundingClientRect();
-			const x = e.clientX - rect.left;
-			const y = e.clientY - rect.top;
-			$state.position = { x, y };
-			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
-		}
-		$state.visible = !$state.visible;
-	}
-
-	@render {
-		<div
-			{$props.id}
-			class={`torp-popover-trigger-contextual ${$props.class ?? ""}`.trim()}
-			oncontextmenu={handleContextual}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Popover/PopoverTriggerHover.torp

@@ -1,47 +0,0 @@
-
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-interface PopoverTriggerHoverProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The div that causes a Popover to appear or disappear when hovered.
- */
-export default function PopoverTriggerHover($props: PopoverTriggerHoverProps) {
-	$props ??= $watch({});
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverTriggerHover must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	function handleHover(node: HTMLElement, e: TouchEvent | MouseEvent) {
-		if ($state.position) {
-			// Get the position relative to the element, so we can reposition on scroll
-			const rect = node.getBoundingClientRect();
-			const x = e.clientX - rect.left;
-			const y = e.clientY - rect.top;
-			$state.position = { x, y };
-			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
-		}
-		$state.visible = !$state.visible
-	}
-
-	@render {
-		<div
-			{$props.id}
-			class={`torp-popover-trigger-hover ${$props.class ?? ""}`.trim()}
-			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Popover/mountClickPopover.ts

@@ -1,50 +0,0 @@
-import type { Component } from "@torpor/view";
-import showPopover from "./showPopover";
-
-interface ClickPopoverOptions {
-	popover: Component;
-	props?: Record<PropertyKey, any>;
-}
-
-/**
- * A mount directive for showing a popover when an element is clicked.
- * @param node The element to show the popover for
- * @param options Options for showing the popover, consisting of the popover component and any props
- */
-export default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {
-	const { popover, props } = options;
-
-	// Add a click event handler to the node
-	node.addEventListener("click", handleClick);
-
-	function handleClick(e: MouseEvent) {
-		e.preventDefault();
-		show();
-	}
-
-	let div: HTMLDivElement;
-
-	function show() {
-		// Show the popover in a div
-		if (div) {
-			document.body.removeChild(div);
-		}
-		div = document.createElement("div");
-		document.body.appendChild(div);
-
-		showPopover(popover, node, props, div);
-	}
-
-	return {
-		destroy(): void {
-			// Remove the event listener from the node on destroy
-			node.removeEventListener("click", handleClick);
-
-			// Remove the div we added
-			// TODO: Should we do this in more places?
-			if (div) {
-				document.body.removeChild(div);
-			}
-		},
-	};
-}

package/src/Popover/mountContextPopover.ts

@@ -1,50 +0,0 @@
-import type { Component } from "@torpor/view";
-import showPopover from "./showPopover";
-
-interface ContextPopoverOptions {
-	popover: Component;
-	props?: Record<PropertyKey, any>;
-}
-
-/**
- * A mount directive for showing a popover when the user opens an element's context menu.
- * @param node The element to show the popover for
- * @param options Options for showing the popover, consisting of the popover component and any props
- */
-export default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {
-	const { popover, props } = options;
-
-	// Add a contextmenu event handler to the node
-	node.addEventListener("contextmenu", handleClick);
-
-	function handleClick(e: MouseEvent) {
-		e.preventDefault();
-		show();
-	}
-
-	let div: HTMLDivElement;
-
-	function show() {
-		// Show the popover in a div
-		if (div) {
-			document.body.removeChild(div);
-		}
-		div = document.createElement("div");
-		document.body.appendChild(div);
-
-		showPopover(popover, node, props, div);
-	}
-
-	return {
-		destroy(): void {
-			// Remove the event listener from the node on destroy
-			node.removeEventListener("contextmenu", handleClick);
-
-			// Remove the div we added
-			// TODO: Should we do this in more places?
-			if (div) {
-				document.body.removeChild(div);
-			}
-		},
-	};
-}

package/src/Popover/mountHoverPopover.ts

@@ -1,57 +0,0 @@
-import type { Component } from "@torpor/view";
-import hoverTrigger from "../mount/hoverTrigger";
-import showPopover from "./showPopover";
-
-interface HoverPopoverOptions {
-	popover: Component;
-	props?: Record<PropertyKey, any>;
-	hoverDelay?: number;
-	touchDelay?: number;
-}
-
-/**
- * A mount directive for showing a popover when an element is hovered.
- * @param node The element to show the popover for
- * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
- */
-export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
-	const { popover, props, hoverDelay, touchDelay } = options;
-
-	let div: HTMLDivElement | undefined;
-
-	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
-		// Show the popover in a div
-		if (div) {
-			document.body.removeChild(div);
-		}
-		div = document.createElement("div");
-		document.body.appendChild(div);
-
-		// Get the position relative to the element, so we can reposition on scroll
-		const rect = node.getBoundingClientRect();
-		let position: { x: number; y: number };
-		if (e.type.startsWith("mouse")) {
-			const me = e as MouseEvent;
-			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
-		} else {
-			const te = e as TouchEvent;
-			position = {
-				x: te.touches[0].clientX - rect.left,
-				y: te.touches[0].clientY - rect.top,
-			};
-		}
-		const allProps = Object.assign({}, props, { anchor: node, position });
-
-		showPopover(popover, node, allProps, div);
-	}
-
-	function onExit() {
-		// Remove the div
-		if (div) {
-			document.body.removeChild(div);
-			div = undefined;
-		}
-	}
-
-	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
-}

package/src/Popover/showPopoverPrompt.ts

@@ -1,23 +0,0 @@
-import type { Component } from "@torpor/view";
-
-/**
- * Shows a popover component in code, and asynchronously returns the value selected by the user.
- * @param popover The popover component
- * @param props The properties for the popover component
- * @param target The target element to show the popover in
- * @returns The value selected by the user
- */
-export default function showPopoverPrompt(
-	popover: Component,
-	props?: Record<PropertyKey, any>,
-	target?: Element,
-): Promise<void> {
-	return new Promise((resolve) => {
-		// Add the promise as the callback
-		const allProps = Object.assign({}, props, { callback: resolve });
-
-		// Create the popover
-		// TODO: This needs to clean up after itself, like the use methods do
-		popover(target || document.body, null, allProps);
-	});
-}

package/test/Dialog/components/CustomDialog.torp

@@ -1,20 +0,0 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
-import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
-
-export default function CustomDialog($props: any) {
-	@render {
-		<Popover visible callback={$props.callback}>
-			<PopoverContent>
-				<Dialog>
-					<DialogBody>
-						<p>Which color do you prefer?</p>
-					</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue">Blue</DialogButton>
-						<DialogButton value="red">Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</PopoverContent>
-		</Popover>
-	}
-}

package/test/Popover/components/PromptFunction.torp

@@ -1,19 +0,0 @@
-import { showPopover } from "../../../src/Popover/index";
-import CustomDialog from "./CustomDialog.torp";
-
-export default function PromptFunction() {
-	let anchor;
-	let $state = $watch({ color: "" });
-
-	async function show() {
-		showPopover(CustomDialog, anchor, { callback: (x) => $state.color = x });
-	}
-
-	@render {
-		<button type="button" &ref={anchor} onclick={show}>Show the prompt</button>
-
-		@if ($state.color) {
-			<p>Your favorite color is {$state.color}?!</p>
-		}
-	}
-}