@torpor/ui 0.3.5 → 0.3.7

package/src/icons/ChevronRight.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ChevronRight($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M30,10 L70,50 L30,90" fill="none" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/ChevronUp.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ChevronUp($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M10,70 L50,30 L90,70" fill="none" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/Cross.torp

@@ -1,19 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function Cross($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M15,15 L85,85" />
-				<path d="M15,85 L85,15" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/IconTypes.ts

@@ -1,10 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-export interface IconProps {
-	/** An ID for the svg element */
-	id?: string;
-	/** Classes for the svg element */
-	class?: ClassValue;
-	/** Styles for the root element */
-	style?: StyleValue;
-}

package/src/icons/Loading.torp

@@ -1,19 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function Loading($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="20"
-		>
-			<g>
-				<circle cx="50" cy="50" r="40" fill="none" opacity="0.3" />
-				<path d="M 22 22 A 40 40 0 0 1 78 22" fill="none" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/Minus.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function Minus($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M10,50 L90,50" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/Plus.torp

@@ -1,19 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function Plus($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M50,10 L50,90" />
-				<path d="M10,50 L90,50" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/index.ts

@@ -1,31 +0,0 @@
-import ArrowDown from "./ArrowDown.torp";
-import ArrowLeft from "./ArrowLeft.torp";
-import ArrowRight from "./ArrowRight.torp";
-import ArrowUp from "./ArrowUp.torp";
-import Bars from "./Bars.torp";
-import Check from "./Check.torp";
-import ChevronDown from "./ChevronDown.torp";
-import ChevronLeft from "./ChevronLeft.torp";
-import ChevronRight from "./ChevronRight.torp";
-import ChevronUp from "./ChevronUp.torp";
-import Cross from "./Cross.torp";
-import Loading from "./Loading.torp";
-import Minus from "./Minus.torp";
-import Plus from "./Plus.torp";
-
-export {
-	ArrowDown,
-	ArrowLeft,
-	ArrowRight,
-	ArrowUp,
-	Bars,
-	Check,
-	ChevronDown,
-	ChevronLeft,
-	ChevronRight,
-	ChevronUp,
-	Cross,
-	Loading,
-	Minus,
-	Plus,
-};

package/src/motion/fade.ts

@@ -1,16 +0,0 @@
-import { type Animation } from "@torpor/view";
-
-export default function fade(
-	_el: HTMLElement,
-	options?: number | KeyframeAnimationOptions,
-): Animation {
-	const keyframes = [
-		{
-			opacity: 0,
-		},
-		{
-			opacity: 1,
-		},
-	];
-	return { keyframes, options };
-}

package/src/motion/grow.ts

@@ -1,23 +0,0 @@
-import { type Animation } from "@torpor/view";
-import measure from "./measure";
-
-export default function grow(
-	el: HTMLElement,
-	options?: number | KeyframeAnimationOptions,
-): Animation {
-	const height = measure(el, (el) => el.clientHeight);
-	const keyframes = [
-		{
-			height: "0px",
-			overflow: "hidden",
-			paddingTop: "0px",
-			paddingBottom: "0px",
-			marginTop: "0px",
-			marginBottom: "0px",
-		},
-		{
-			height: height + "px",
-		},
-	];
-	return { keyframes, options };
-}

package/src/motion/index.ts

@@ -1,6 +0,0 @@
-import fade from "./fade";
-import grow from "./grow";
-import measure from "./measure";
-import slide from "./slide";
-
-export { fade, grow, measure, slide };

package/src/motion/measure.ts

@@ -1,28 +0,0 @@
-/**
- * Measures an element before it is added to the DOM
- * @param el The element to measure
- * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
- */
-export default function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number {
-	// From https://stackoverflow.com/a/46707458
-	let oldVisibility = el.style.visibility;
-	let oldPosition = el.style.position;
-
-	let oldParent = el.parentNode;
-	let oldBefore = el.nextSibling;
-
-	el.style.visibility = "hidden";
-	el.style.position = "absolute";
-
-	document.body.appendChild(el);
-	let result = fn(el);
-	el.parentNode!.removeChild(el);
-
-	if (oldParent !== null) {
-		oldParent.insertBefore(el, oldBefore);
-		el.style.visibility = oldVisibility;
-		el.style.position = oldPosition;
-	}
-
-	return result;
-}

package/src/motion/slide.ts

@@ -1,45 +0,0 @@
-import { type Animation } from "@torpor/view";
-import measure from "./measure";
-
-interface Options extends KeyframeAnimationOptions {
-	side: "left" | "right" | "top" | "bottom";
-}
-
-export default function slide(el: HTMLElement, options?: Options): Animation {
-	let position = options?.side ?? "left";
-	switch (position) {
-		case "left": {
-			el.style.left = "0px";
-			const width = measure(el, (el) => el.offsetWidth);
-			const keyframes = [
-				{ transform: `translateX(-${width}px)` },
-				{ transform: "translateX(0px)" },
-			];
-			return { keyframes, options };
-		}
-		case "top": {
-			el.style.top = "0px";
-			const height = measure(el, (el) => el.offsetHeight);
-			const keyframes = [
-				{ transform: `translateY(-${height}px)` },
-				{ transform: "translateY(0px)" },
-			];
-			return { keyframes, options };
-		}
-		case "right": {
-			el.style.right = "0px";
-			const width = measure(el, (el) => el.offsetWidth);
-			const keyframes = [{ transform: `translateX(${width}px)` }, { transform: "translateX(0px)" }];
-			return { keyframes, options };
-		}
-		case "bottom": {
-			el.style.bottom = "0px";
-			const height = measure(el, (el) => el.offsetHeight);
-			const keyframes = [
-				{ transform: `translateY(${height}px)` },
-				{ transform: "translateY(0px)" },
-			];
-			return { keyframes, options };
-		}
-	}
-}

package/src/mount/clickPopover.ts

@@ -1,51 +0,0 @@
-//import type { Component } from "@torpor/view";
-//import showPopover from "../Modal/showModal";
-//
-//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/mount/contextPopover.ts

@@ -1,51 +0,0 @@
-//import type { Component } from "@torpor/view";
-//import showPopover from "../Modal/showModal";
-//
-//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/mount/disableScroll.ts

@@ -1,28 +0,0 @@
-export function disableScroll(): () => void {
-	// Remember body styles
-	const overflowX = document.body.style.overflowY;
-	const overflowY = document.body.style.overflowY;
-	const overscrollBehaviourX = document.body.style.overscrollBehaviorX;
-	const overscrollBehaviourY = document.body.style.overscrollBehaviorY;
-	const marginRight = document.body.style.marginRight;
-
-	// Get scrollbar width (if visible) so that we can set a margin to avoid things jumping around
-	// HACK: Does this work in all browsers/systems?
-	const scrollBarWidth = window.innerWidth - document.body.clientWidth;
-
-	// Set body styles to disallow scrolling
-	document.body.style.overflowY = "hidden";
-	document.body.style.overflowY = "hidden";
-	document.body.style.overscrollBehaviorX = "contain";
-	document.body.style.overscrollBehaviorY = "contain";
-	document.body.style.marginRight = scrollBarWidth + "px";
-
-	return () => {
-		// Reset body styles
-		document.body.style.overflowY = overflowX;
-		document.body.style.overflowY = overflowY;
-		document.body.style.overscrollBehaviorX = overscrollBehaviourX;
-		document.body.style.overscrollBehaviorY = overscrollBehaviourY;
-		document.body.style.marginRight = marginRight;
-	};
-}

package/src/mount/hoverPopover.ts

@@ -1,58 +0,0 @@
-//import type { Component } from "@torpor/view";
-//import showPopover from "../Modal/showModal";
-//import hoverTrigger from "./hoverTrigger";
-//
-//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/mount/hoverTrigger.ts

@@ -1,59 +0,0 @@
-interface HoverTriggerOptions {
-	onHover: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;
-	onExit?: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;
-	hoverDelay?: number;
-	touchDelay?: number;
-}
-
-export default function hoverTrigger(node: HTMLElement, options: HoverTriggerOptions): () => void {
-	const { onHover, onExit } = options;
-	const hoverDelay = options.hoverDelay || 1000;
-	const touchDelay = options.touchDelay || 1000;
-
-	let interval: NodeJS.Timeout | undefined;
-
-	// Add click event handlers to the node
-	node.addEventListener("mouseenter", handleMouseEnter);
-	node.addEventListener("mouseleave", handleMouseLeave);
-	node.addEventListener("mousemove", handleMouseMove);
-	node.addEventListener("touchstart", handleMouseEnter);
-	node.addEventListener("touchend", handleMouseLeave);
-
-	function handleMouseEnter(e: MouseEvent | TouchEvent) {
-		// Handle the hover after a delay
-		e.preventDefault();
-		if (!interval) {
-			const delay = e.type.startsWith("mouse") ? hoverDelay : touchDelay;
-			interval = setTimeout(() => onHover(node, e), delay);
-		}
-	}
-
-	function handleMouseLeave(e: MouseEvent | TouchEvent) {
-		// Prevent short hovers or touches from firing the event
-		if (interval) {
-			clearTimeout(interval);
-			interval = undefined;
-		}
-
-		if (onExit) {
-			onExit(node, e);
-		}
-	}
-
-	function handleMouseMove(e: MouseEvent) {
-		// Reset the interval on mouse move
-		if (interval) {
-			clearTimeout(interval);
-			interval = setTimeout(() => onHover(node, e), hoverDelay);
-		}
-	}
-
-	// Remove the event listeners from the node on destroy
-	return () => {
-		node.removeEventListener("mouseenter", handleMouseEnter);
-		node.removeEventListener("mouseleave", handleMouseLeave);
-		node.removeEventListener("mousemove", handleMouseMove);
-		node.removeEventListener("touchstart", handleMouseEnter);
-		node.removeEventListener("touchend", handleMouseLeave);
-	};
-}

package/src/mount/trapFocus.ts

@@ -1,58 +0,0 @@
-export interface TrapFocusOptions {
-	focusableElements: HTMLElement[];
-}
-
-export function trapFocus(node: HTMLElement, options?: TrapFocusOptions): () => void {
-	options = options || { focusableElements: [] };
-
-	// Selectors for all things that are focusable:
-	const focusableSelectors = [
-		"a[href]",
-		"area[href]",
-		'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
-		"select:not([disabled]):not([aria-hidden])",
-		"textarea:not([disabled]):not([aria-hidden])",
-		"button:not([disabled]):not([aria-hidden])",
-		"iframe",
-		"object",
-		"embed",
-		"[contenteditable]",
-		'[tabindex]:not([tabindex^="-"])',
-	];
-
-	// Set the focusable elements array in the options, which can be used in the caller e.g. to focus the first element
-	options.focusableElements = Array.from(node.querySelectorAll(focusableSelectors.join()));
-
-	// Store first and last focusable elements
-	const firstFocusableElement = options.focusableElements[0] as HTMLElement;
-	const lastFocusableElement = options.focusableElements[
-		options.focusableElements.length - 1
-	] as HTMLElement;
-
-	// Add the keydown event listener to the node
-	node.addEventListener("keydown", handleKey);
-
-	// On Tab or Shift+Tab, move through the focusable elements, wrapping at either end
-	function handleKey(e: KeyboardEvent) {
-		if (e.key === "Tab") {
-			if (e.shiftKey) {
-				if (document.activeElement === firstFocusableElement) {
-					// Shift + Tab on the first element, so move to the last one
-					lastFocusableElement.focus();
-					e.preventDefault();
-				}
-			} else {
-				if (document.activeElement === lastFocusableElement) {
-					// Tab on the last element, so move to the first one
-					firstFocusableElement.focus();
-					e.preventDefault();
-				}
-			}
-		}
-	}
-
-	// Remove the keydown event listener from the node on destroy
-	return () => {
-		node.removeEventListener("keydown", handleKey);
-	};
-}