@torpor/ui 0.3.7 → 1.0.0

package/dist/Pagination/Pagination.torp

@@ -0,0 +1,152 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import {
+	type ItemState,
+	type PageNumber,
+	type PaginationContext,
+	PaginationContextName,
+} from "./PaginationTypes";
+import buildPages from "./buildPages";
+
+interface PaginationProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The total number of pages (or items if the page size is greater than 1) */
+	count: number;
+	/** The active page */
+	page: number;
+	/** The number of items on each page **/
+	pageSize?: number;
+	/** The maximum number of pages to display (gaps will be indicated with ellipses) **/
+	maxPages?: number;
+	/** Accessible label for the pagination navigation */
+	"aria-label"?: string;
+	/** Called when a user wants to jump to a specific page (e.g., via ellipsis) */
+	onjump?: (targetPage: number, jumpTo: (page: number) => void) => void;
+}
+
+/**
+ * Buttons with page numbers that can be used to move between pages.
+ */
+export default function Pagination($props: PaginationProps) {
+	let $state = $watch({
+		get pages() {
+			return buildPages($props.count, $props.page, $props.pageSize, $props.maxPages);
+		},
+	});
+
+	let itemStates: ItemState[] = [];
+
+	// Put stuff into a PaginationContext
+	const context: PaginationContext = {
+		registerItem,
+		removeItem,
+		toggleItem,
+		handleItemKey,
+		jumpToPage: (page: number) => {
+			$props.page = Math.max(1, Math.min($props.count, page));
+		},
+	};
+	$context[PaginationContextName] = context;
+
+	function registerItem(item: ItemState) {
+		// Add the item's state to the array
+		itemStates.push(item);
+	}
+
+	function removeItem(target: PageNumber) {
+		// Remove the item
+		const index = itemStates.findIndex((i) => i.target === target);
+		if (index != -1) {
+			itemStates.splice(index, 1);
+		}
+	}
+
+	function toggleItem(target: PageNumber) {
+		switch (target) {
+			case "start": {
+				$props.page = 1;
+				break;
+			}
+			case "previous": {
+				$props.page = Math.max(1, $props.page - 1);
+				break;
+			}
+			case "next": {
+				$props.page = Math.min($props.count, $props.page + 1);
+				break;
+			}
+			case "end": {
+				$props.page = $props.count;
+				break;
+			}
+			case "startgap":
+			case "endgap": {
+				if ($props.onjump) {
+					$props.onjump($props.page, context.jumpToPage);
+				}
+				break;
+			}
+			default: {
+				$props.page = target;
+			}
+		}
+
+		const item = itemStates.find((i) => i.target === target);
+		if (item) {
+			item.setFocused();
+		}
+	}
+
+	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
+		// Focus the first button so that its key events can be triggered by the user
+		const el = e.currentTarget.getElementsByTagName("button")[0];
+		if (el) {
+			el.focus();
+		}
+	}
+
+	function handleItemKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case "ArrowLeft": {
+				toggleItem("previous");
+				e.preventDefault();
+				break;
+			}
+			case "ArrowRight": {
+				toggleItem("next");
+				e.preventDefault();
+				break;
+			}
+			case "Home": {
+				toggleItem("start");
+				e.preventDefault();
+				break;
+			}
+			case "End": {
+				toggleItem("end");
+				e.preventDefault();
+				break;
+			}
+		}
+	}
+
+	@render {
+		@if ($props.count > 0) {
+			<div
+				{$props?.id}
+				class={["torp-pagination", $props?.class]}
+				{$props?.style}
+				role="navigation"
+				aria-label={$props["aria-label"] ?? "Pagination"}
+				tabindex="0"
+				onfocus={handleFocus}
+			>
+				<slot {$state.pages} />
+			</div>
+		}
+	}
+}

package/dist/Pagination/PaginationItem.torp

@@ -0,0 +1,137 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import ChevronDoubleLeft from "../icons/ChevronDoubleLeft.torp";
+import ChevronDoubleRight from "../icons/ChevronDoubleRight.torp";
+import ChevronLeft from "../icons/ChevronLeft.torp";
+import ChevronRight from "../icons/ChevronRight.torp";
+import { type PageNumber, type PaginationContext, PaginationContextName } from "./PaginationTypes";
+
+interface PaginationItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The page for the button */
+	page: PageNumber;
+	/** Whether this is the active item */
+	active?: boolean;
+	/** Whether this item is disabled */
+	disabled?: boolean;
+	/** Raised when this item is made active */
+	onchange?: (active: boolean) => void;
+}
+
+export default function PaginationItem($props: PaginationItemProps) {
+	let button: HTMLButtonElement;
+
+	// Get stuff out of the Pagination context
+	const context = $context[PaginationContextName] as PaginationContext;
+	if (!context) {
+		throw new Error("PaginationItem must be contained within a Pagination");
+	}
+	const { registerItem, removeItem, toggleItem, handleItemKey } = context;
+
+	// Register this item with the parent Pagination, which will handle setting this item's focus on keyboard events
+	registerItem({ target: $props.page, active: false, setActive, setFocused });
+
+	$run(() => {
+		return () => {
+			removeItem($props.page);
+		};
+	});
+
+	// Call onchange when the active state changes
+	let prevActive = $props.active ?? false;
+	$run(() => {
+		const active = $props.active ?? false;
+		if (active !== prevActive) {
+			prevActive = active;
+			if ($props?.onchange) {
+				$props.onchange(active);
+			}
+		}
+	});
+
+	// This function is called by the parent Pagination to set this item's active value
+	function setActive(value: boolean) {
+		if ($props.active !== value) {
+			$props.active = value;
+
+			/** Raised when this item is made active */
+			//dispatch("toggle", value);
+			if ($props?.onchange) {
+				$props.onchange(value);
+			}
+		}
+	}
+
+	// This function is called by the parent Pagination to focus this item's button
+	function setFocused() {
+		button.focus();
+	}
+
+	function handleClick() {
+		// Pass the value to the toggleItem method in the parent Pagination which will handle toggling
+		// the value for all items
+		toggleItem($props.page);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		// Pass the key press up to the parent Pagination which will handle setting the focused button
+		handleItemKey(e);
+	}
+
+	@render {
+		@if ($props.active) {
+			<span
+				{$props?.id}
+				class={["torp-pagination-item", $props?.class]}
+				{$props?.style}
+				role="button"
+				aria-current="page"
+				aria-label={`Page ${$props.page}`}
+				data-state={$props.active ? "active" : "inactive"}
+			>
+				{$props.page}
+			</span>
+		} else {
+			<button
+				type="button"
+				{$props?.id}
+				class={["torp-pagination-item", $props?.class]}
+				{$props?.disabled}
+				aria-label={
+					$props.page === "start" ? "First page" :
+					$props.page === "previous" ? "Previous page" :
+					$props.page === "next" ? "Next page" :
+					$props.page === "end" ? "Last page" :
+					$props.page === "startgap" || $props.page === "endgap" ? "More pages" :
+					`Page ${$props.page}`
+				}
+				aria-disabled={$props.disabled ? "true" : undefined}
+				data-type={$props.page}
+				data-state={$props.active ? "active" : "inactive"}
+				&ref={button}
+				onclick={handleClick}
+				onkeydown={handleKey}
+			>
+				<slot>
+					@if ($props.page === "start") {
+						<ChevronDoubleLeft />
+					} else if ($props.page === "previous") {
+						<ChevronLeft />
+					} else if ($props.page === "next") {
+						<ChevronRight />
+					} else if ($props.page === "end") {
+						<ChevronDoubleRight />
+					} else if ($props.page === "startgap" || $props.page === "endgap") {
+						<span>…</span>
+					} else {
+						<span>{$props.page}</span>
+					}
+				</slot>
+			</button>
+		}
+	}
+}

package/dist/Pagination/PaginationTypes.ts

@@ -0,0 +1,22 @@
+export const PaginationContextName: unique symbol = Symbol.for("torp.Pagination");
+
+export interface PaginationContext {
+	// The registerItem function is called from each SeriesItem to register itself and its
+	// state with this component
+	registerItem: (item: ItemState) => void;
+	// The removeItem function is called from a SeriesItem when it has been unloaded so that we
+	// can remove it from the itemStates array
+	removeItem: (target: PageNumber) => void;
+	toggleItem: (target: PageNumber) => void;
+	handleItemKey: (e: KeyboardEvent) => void;
+	jumpToPage: (page: number) => void;
+}
+
+export interface ItemState {
+	target: PageNumber;
+	active: boolean;
+	setActive: (value: boolean) => void;
+	setFocused: () => void;
+}
+
+export type PageNumber = "start" | "startgap" | "previous" | "next" | "end" | "endgap" | number;

package/dist/Pagination/buildPages.ts

@@ -0,0 +1,61 @@
+import { type PageNumber } from "./PaginationTypes";
+
+/**
+ * Builds the pages that should be displayed for pagination.
+ *
+ * @param count The total number of pages (or items if the page size is greater than 1)
+ * @param page The active page
+ * @param pageSize The number of items on each page
+ * @param maxPages The maximum number of pages to display (gaps will be indicated with ellipses)
+ */
+export default function buildPages(
+	count: number,
+	page: number,
+	pageSize: number = 1,
+	maxPages: number = 9,
+): PageNumber[] {
+	// Calculate the page count
+	const pageCount = Math.ceil(count / pageSize);
+
+	if (pageCount <= maxPages) {
+		// There's no need for ellipses, just return the numbers
+		return Array.from({ length: pageCount })
+			.fill(0)
+			.map((_, i) => i + 1);
+	} else {
+		// Get the start and end around the current page number
+		// Use floor and ceil in case there is an even number of pages (e.g. if
+		// maxPages is 8, there will be 3 numbers at the start and 4 at the end)
+		let start = page - Math.floor((maxPages - 1) / 2);
+		let end = page + Math.ceil((maxPages - 1) / 2);
+		if (start < 1) {
+			end += Math.abs(start) + 1;
+			start = 1;
+		} else if (end > pageCount) {
+			start -= end - pageCount;
+			end = pageCount;
+		}
+
+		// Build the numbers
+		const numbers: PageNumber[] = Array.from({ length: end - start + 1 })
+			.fill(0)
+			.map((_, i) => start + i);
+
+		// Replace numbers at the start and end with ellipses if necessary
+		if (numbers[0] !== 1) {
+			numbers[0] = 1;
+			//if (numbers.length > 1) {
+			numbers[1] = "startgap";
+			//}
+		}
+		const l = numbers.length;
+		if (numbers[l - 1] !== pageCount) {
+			numbers[l - 1] = pageCount;
+			//if (l > 2) {
+			numbers[l - 2] = "endgap";
+			//}
+		}
+
+		return numbers;
+	}
+}

package/dist/Pagination/index.d.ts

@@ -0,0 +1,63 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface PaginationProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The total number of pages (or items if the page size is greater than 1) */
+	count: number;
+	/** The active page */
+	page: number;
+	/** The number of items on each page **/
+	pageSize?: number;
+	/** The maximum number of pages to display (gaps will be indicated with ellipses) **/
+	maxPages?: number;
+	/** Accessible label for the pagination navigation */
+	"aria-label"?: string;
+	/** Called when a user wants to jump to a specific page (e.g., via ellipsis) */
+	onjump?: (targetPage: number, jumpTo: (page: number) => void) => void;
+}
+
+/**
+ * Buttons with page numbers that can be used to move between pages.
+ */
+declare function Pagination(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PaginationProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PaginationItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The page for the button */
+	page: PageNumber;
+	/** Whether this is the active item */
+	active?: boolean;
+	/** Whether this item is disabled */
+	disabled?: boolean;
+	/** Raised when this item is made active */
+	onchange?: (active: boolean) => void;
+}
+
+declare function PaginationItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PaginationItemProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Pagination, PaginationItem };

package/dist/Pagination/index.js

@@ -0,0 +1,3 @@
+import Pagination from "./Pagination.torp";
+import PaginationItem from "./PaginationItem.torp";
+export { Pagination, PaginationItem };

package/dist/Popover/Popover.torp

@@ -1,29 +1,32 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { type PopoutContext, PopoutContextName } from "../utils/PopoutTypes";
+import {
+	type Point,
+	type PopoverContext,
+	PopoverContextName,
+	type PopoverState,
+} from "./PopoverTypes";
 
 interface PopoverProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers  */
-	modal?: boolean,
+	modal?: boolean;
 	/** Whether the popover is visible  */
-	visible?: boolean,
+	visible: Bindable<boolean | undefined>;
 	/** The element to anchor this popover to, as an alternative to supplying a PopoverTrigger  */
-	anchor?: HTMLElement,
+	anchor?: HTMLElement;
 	/** The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual  */
-	position?: Point,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the popover is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	position?: Point;
 	/** Raised when the popover has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the popover has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -41,19 +44,16 @@ interface PopoverProps {
 export default function Popover($props: PopoverProps | undefined) {
 	let $state: PopoverState = $watch({
 		visible: false,
-		position: { x: 0, y: 0 }
-	})
+		position: { x: 0, y: 0 },
+		contentId: undefined,
+		triggerId: undefined,
+		contentRole: undefined,
+	});
 
-	// Sync props and state
+	$bind($state, $props, "visible");
 	$run(() => {
-		$state.visible = $props?.visible ?? false;
 		$state.position = $props?.position ?? { x: 0, y: 0 };
 	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
 
 	let result: any;
 
@@ -62,27 +62,23 @@ export default function Popover($props: PopoverProps | undefined) {
 		handleButton,
 		handleClickOutside,
 		state: $state,
-		modal: $props?.modal,
+		//modal: $props?.modal,
 		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
 	};
 	$context[PopoverContextName] = context;
 
-	// Dispatch the toggle event when the popover is opened or closed
-	let firstToggle = true;
-	$run(() => {
-		const ontoggle = $props?.ontoggle;
-		const onopen = $props?.onopen;
-		const onclose = $props?.onclose;
+	// Set the context to pass down to items
+	let popoutContext: PopoutContext = context;
+	$context[PopoutContextName] = popoutContext;
+
+	// Dispatch the open/close events when the popover is opened or closed
+	$handle((first) => {
 		const visible = $state.visible;
-		if (firstToggle) {
-			firstToggle = false;
+		if (first) return;
+		if (visible) {
+			$props?.onopen?.();
 		} else {
-			if (ontoggle) ontoggle(visible);
-			if (visible) {
-				if (onopen) onopen()
-			} else {
-				if (onclose) onclose(result);
-			}
+			$props?.onclose?.(result);
 		}
 	});
 
@@ -90,11 +86,11 @@ export default function Popover($props: PopoverProps | undefined) {
 		// Get the button's result
 		switch (type) {
 			case "confirm": {
-				result = value || true;
+				result = value ?? true;
 				break;
 			}
 			case "cancel": {
-				result = value || false;
+				result = value ?? false;
 				break;
 			}
 			default: {
@@ -105,25 +101,16 @@ export default function Popover($props: PopoverProps | undefined) {
 
 		// Hide the popover
 		$state.visible = false;
-
-		// Call the callback
-		if ($props?.callback) {
-			$props?.callback(result);
-		}
 	}
 
-	function handleClickOutside(e: MouseEvent) {
+	function handleClickOutside(e: MouseEvent | KeyboardEvent) {
 		e.preventDefault();
 		$state.visible = false;
 	}
 
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-popover", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-popover", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}
-}
+}