@torpor/ui 0.2.0 → 0.3.0

package/dist/Popover/PopoverOverlay.torp

@@ -1,30 +0,0 @@
-import { disableScroll } from "../mount/disableScroll";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-/**
- * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
- */
-export default function PopoverOverlay($props: any) {
-	// 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/dist/Popover/PopoverTriggerContextual.torp

@@ -1,37 +0,0 @@
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-/**
- * The element that causes a Popover to appear or disappear when right-clicked.
- */
-export default function PopoverTriggerContextual($props: any) {
-	// 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/dist/Popover/PopoverTriggerHover.torp

@@ -1,38 +0,0 @@
-
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-/**
- * The div that causes a Popover to appear or disappear when hovered.
- */
-export default function PopoverTriggerHover($props: any) {
-	// 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, e) {
-		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/dist/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/dist/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/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,106 +0,0 @@
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-/**
- * The content that is displayed for a Popover when it is open, displayed
- * alongside an element.
- *
- * @prop {"top" | "right" | "bottom" | "left"} site -- Where the popover will be
- * shown, relative to the popover button
- * @prop {"start" | "center" | "end"} alignment -- How the popover will be
- * aligned, relative to the popover button
- */
-export default function PopoverContentAnchored($props: any) {
-	$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,30 +0,0 @@
-import { disableScroll } from "../mount/disableScroll";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-/**
- * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
- */
-export default function PopoverOverlay($props: any) {
-	// 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,37 +0,0 @@
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-/**
- * The element that causes a Popover to appear or disappear when right-clicked.
- */
-export default function PopoverTriggerContextual($props: any) {
-	// 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,38 +0,0 @@
-
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-/**
- * The div that causes a Popover to appear or disappear when hovered.
- */
-export default function PopoverTriggerHover($props: any) {
-	// 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, e) {
-		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);
-	});
-}