@torpor/ui 0.3.6 → 0.4.0

package/dist/Modal/Modal.torp

@@ -1,5 +1,6 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import { ModalContextName, type ModalContext, type ModalState } from "./ModalTypes";
+import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
 
 interface ModalProps {
 	/** An ID for the root element */
@@ -60,6 +61,10 @@ export default function Modal($props: ModalProps | undefined) {
 	};
 	$context[ModalContextName] = context;
 
+	// Set the context to pass down to items
+	let popoutContext: PopoutContext = context;
+	$context[PopoutContextName] = popoutContext;
+
 	// Dispatch the toggle event when the modal is opened or closed
 	let firstToggle = true;
 	$run(() => {
@@ -83,11 +88,11 @@ export default function Modal($props: ModalProps | 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: {

package/dist/Modal/ModalTypes.ts

@@ -1,4 +1,4 @@
-export const ModalContextName = "Modal";
+export const ModalContextName: unique symbol = Symbol.for("torp.Modal");
 
 /** The shared context for modal components (Contextual, Prompt and Modal) */
 export interface ModalContext {

package/dist/NavMenu/NavMenu.torp

@@ -51,6 +51,7 @@ export default function NavMenu($props: NavMenuProps | undefined) {
 	// Set the focusFirstElement method in the PopoverContext(s) so that it can be called after everything has been shown
 	if (popoutContext) {
 		popoutContext.focusFirstElement = focusFirstElement;
+		popoutContext.focusLastElement = focusLastElement;
 	}
 
 	// Set the context to pass down to items
@@ -74,6 +75,12 @@ export default function NavMenu($props: NavMenuProps | undefined) {
 		}
 	}
 
+	function focusLastElement() {
+		if (itemStates.length > 0) {
+			itemStates.at(-1)!.setFocused();
+		}
+	}
+
 	function registerItem(setFocused: () => void) {
 		// Add the item's state to the array and return its index
 		const newItemState: ItemState = {

package/dist/NavMenu/NavMenuButton.torp

@@ -10,6 +10,10 @@ interface NavMenuButtonProps {
 	style?: StyleValue,
 	/** Whether this button is disabled  */
 	disabled?: boolean,
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void,
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void,
 }
 
 /**
@@ -43,9 +47,8 @@ export default function NavMenuButton($props: NavMenuButtonProps | undefined) {
 			role="menuitem"
 			aria-disabled={$props?.disabled ? "true" : undefined}
 			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown
 			onkeydown={handleItemKey}
-			onclick
+			{$props?.onclick}
 			onfocus={() => handleItemFocus(index)}
 			&ref={button}
 		>

package/dist/NavMenu/NavMenuPopout.torp

@@ -25,7 +25,7 @@ interface NavMenuPopoutProps {
  *
  * ```
  * <NavMenuPopout>
- * 	<NavMenuPopoutButton />
+ * 	<NavMenuPopoutTrigger />
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```

package/dist/NavMenu/{NavMenuPopoutButton.torp → NavMenuPopoutTrigger.torp}

@@ -6,7 +6,7 @@ import {
 	type NavMenuPopoutContext,
 } from "./NavMenuTypes";
 
-interface NavMenuPopoutButtonProps {
+interface NavMenuPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
@@ -23,7 +23,7 @@ interface NavMenuPopoutButtonProps {
  * A button that is placed in a NavMenu and signals a response by a user.
  *
  */
-export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps | undefined) {
+export default function NavMenuPopoutTrigger($props: NavMenuPopoutTriggerProps | undefined) {
 	let defaultHoverDelay = 500;
 
 	let button: HTMLButtonElement;
@@ -32,14 +32,14 @@ export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps | u
 	// Get stuff out of the NavMenuContext
 	const menuContext = $context[NavMenuContextName] as NavMenuContext;
 	if (!menuContext) {
-		throw new Error("NavMenuPopoutButton must be contained within a NavMenu");
+		throw new Error("NavMenuPopoutTrigger must be contained within a NavMenu");
 	}
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Get stuff out of the NavMenuPopoutContext
 	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
 	if (!popoutContext) {
-		throw new Error("NavMenuPopoutButton must be contained within a NavMenuPopout");
+		throw new Error("NavMenuPopoutTrigger must be contained within a NavMenuPopout");
 	}
 	let $state = popoutContext.state;
 

package/dist/NavMenu/NavMenuSeparator.torp

@@ -16,7 +16,8 @@ export default function NavMenuSeparator($props: NavMenuSeparatorProps | undefin
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-nav-menu-separator ${$props?.class ?? ""}`.trim()} role="separator"
+			class={["torp-nav-menu-separator", $props?.class]}
+			role="separator"
 		>
 			<slot />
 		</div>

package/dist/NavMenu/NavMenuTypes.ts

@@ -1,6 +1,6 @@
-export const NavMenuContextName = "NavMenu";
-export const NavMenuPopoutContextName = "NavMenuPopout";
-export const NavMenuGroupContextName = "NavMenuGroup";
+export const NavMenuContextName: unique symbol = Symbol.for("torp.NavMenu");
+export const NavMenuPopoutContextName: unique symbol = Symbol.for("torp.NavMenuPopout");
+export const NavMenuGroupContextName: unique symbol = Symbol.for("torp.NavMenuGroup");
 
 export interface NavMenuContext {
 	/** Called from a NavMenuLink or NavMenuButton when its button is focused */
@@ -19,6 +19,7 @@ export interface NavMenuPopoutContext {
 	};
 	anchorElement?: HTMLElement;
 	focusFirstElement?: () => void;
+	focusLastElement?: () => void;
 }
 
 export interface NavMenuGroupContext {

package/dist/NavMenu/index.d.ts

@@ -49,6 +49,10 @@ interface NavMenuButtonProps {
 	style?: StyleValue,
 	/** Whether this button is disabled  */
 	disabled?: boolean,
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void,
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void,
 }
 
 /**
@@ -193,7 +197,7 @@ interface NavMenuPopoutProps {
  *
  * ```
  * <NavMenuPopout>
- * 	<NavMenuPopoutButton />
+ * 	<NavMenuPopoutTrigger />
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```
@@ -208,54 +212,54 @@ declare function NavMenuPopout(
 
 
 
-interface NavMenuPopoutButtonProps {
+interface NavMenuPopoutContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
 	class?: ClassValue,
 	/** Styles for the root element */
 	style?: StyleValue,
-	/** The delay before showing the popout, in milliseconds */
-	hoverDelay?: number,
-	/** Whether this button is disabled */
-	disabled?: boolean,
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end",
 }
 
 /**
- * A button that is placed in a NavMenu and signals a response by a user.
+ * The content that is displayed for a NavMenuPopout when it is open.
  *
  */
-declare function NavMenuPopoutButton(
+declare function NavMenuPopoutContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: NavMenuPopoutButtonProps | undefined,
+	$props: NavMenuPopoutContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-interface NavMenuPopoutContentProps {
+interface NavMenuPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
 	class?: ClassValue,
 	/** Styles for the root element */
 	style?: StyleValue,
-	/** Where the popout will be shown, relative to the popout button */
-	side?: "top" | "right" | "bottom" | "left",
-	/** How the popout will be aligned, relative to the popout button */
-	alignment?: "start" | "center" | "end",
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number,
+	/** Whether this button is disabled */
+	disabled?: boolean,
 }
 
 /**
- * The content that is displayed for a NavMenuPopout when it is open.
+ * A button that is placed in a NavMenu and signals a response by a user.
  *
  */
-declare function NavMenuPopoutContent(
+declare function NavMenuPopoutTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: NavMenuPopoutContentProps | undefined,
+	$props: NavMenuPopoutTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -282,4 +286,4 @@ declare function NavMenuSeparator(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutButton, NavMenuPopoutContent, NavMenuSeparator };
+export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutContent, NavMenuPopoutTrigger, NavMenuSeparator };

package/dist/NavMenu/index.js

@@ -19,12 +19,12 @@ import NavMenuLink_default from "./NavMenuLink.torp";
 // src/NavMenu/NavMenuPopout.torp
 import NavMenuPopout_default from "./NavMenuPopout.torp";
 
-// src/NavMenu/NavMenuPopoutButton.torp
-import NavMenuPopoutButton_default from "./NavMenuPopoutButton.torp";
-
 // src/NavMenu/NavMenuPopoutContent.torp
 import NavMenuPopoutContent_default from "./NavMenuPopoutContent.torp";
 
+// src/NavMenu/NavMenuPopoutTrigger.torp
+import NavMenuPopoutTrigger_default from "./NavMenuPopoutTrigger.torp";
+
 // src/NavMenu/NavMenuSeparator.torp
 import NavMenuSeparator_default from "./NavMenuSeparator.torp";
 export {
@@ -35,8 +35,8 @@ export {
   NavMenuGroupHeader_default as NavMenuGroupHeader,
   NavMenuLink_default as NavMenuLink,
   NavMenuPopout_default as NavMenuPopout,
-  NavMenuPopoutButton_default as NavMenuPopoutButton,
   NavMenuPopoutContent_default as NavMenuPopoutContent,
+  NavMenuPopoutTrigger_default as NavMenuPopoutTrigger,
   NavMenuSeparator_default as NavMenuSeparator
 };
 //# sourceMappingURL=index.js.map

package/dist/Pagination/Pagination.torp

@@ -0,0 +1,145 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { PaginationContextName, type PaginationContext, type ItemState, type PageNumber } from "./PaginationTypes";
+
+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 number */
+	number: number,
+}
+
+/**
+ * Buttons with page numbers that can be used to move between pages.
+ */
+export default function Pagination($props: PaginationProps) {
+	// TODO: Should we (by default) create PaginationItems?
+
+	// TODO: Do we actually need ItemStates when we're creating the item collection ourselves??
+	// A collection containing the active state and some functions for each item
+	let itemStates: ItemState[] = [];
+
+	// Put stuff into a PaginationContext
+	const context: PaginationContext = {
+		registerItem,
+		removeItem,
+		toggleItem,
+		handleItemKey
+	};
+	$context[PaginationContextName] = context;
+
+	function registerItem(
+		target: PageNumber,
+		setActive: (value: boolean) => void,
+		setFocused: () => void
+	) {
+		// Add the item's state to the array
+		const newItemState: ItemState = {
+			target,
+			active: false,
+			setActive,
+			setFocused
+		};
+		itemStates.push(newItemState);
+	}
+
+	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.number = 1;
+				break;
+			}
+			case "previous": {
+				$props.number = Math.max(1, $props.number - 1);
+				break;
+			}
+			case "next": {
+				$props.number = Math.min($props.count, $props.number + 1);
+				break;
+			}
+			case "end": {
+				$props.number = $props.count;
+				break;
+			}
+			case "startgap":
+			case "endgap": {
+				let input = prompt("Go to page:");
+				if (input) {
+					$props.number = parseInt(input);
+				}
+				break;
+			}
+			default: {
+				$props.number = 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) {
+		// TODO: Actually just change focus??
+		switch (e.key) {
+			case "Left":
+			case "ArrowLeft": {
+				toggleItem("previous");
+				e.preventDefault();
+				break;
+			}
+			case "Right":
+			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}
+				tabindex="0"
+				onfocus={handleFocus}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/dist/Pagination/PaginationItem.torp

@@ -0,0 +1,100 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { PaginationContextName, type PaginationContext, type PageNumber } 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;
+	/** Raised when this item is made active */
+	ontoggle?: (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($props.page, setActive, setFocused);
+
+	// 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?.ontoggle) {
+				$props.ontoggle(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}
+				data-state={$props.active ? "active" : "inactive"}
+			>
+				{$props.page}
+			</span>
+		} else {
+			<button
+				type="button"
+				{$props?.id}
+				class={["torp-pagination-item", $props?.class]}
+				data-type={$props.page}
+				data-state={$props.active ? "active" : "inactive"}
+				&ref={button}
+				onclick={handleClick}
+				onkeydown={handleKey}
+			>
+				<slot>
+					@if ($props.page === "start") {
+						<span>&lt;&lt;</span>
+					} else if ($props.page === "previous") {
+						<span>&lt;</span>
+					} else if ($props.page === "next") {
+						<span>&gt;</span>
+					} else if ($props.page === "end") {
+						<span>&gt;&gt;</span>
+					} 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,25 @@
+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
+	// methods with this component
+	registerItem: (
+		target: PageNumber,
+		setActive: (value: boolean) => void,
+		setFocused: () => void,
+	) => 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;
+}
+
+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,57 @@
+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 number The active page number
+ * @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,
+	number: 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 = number - Math.floor((maxPages - 1) / 2);
+		let end = number + 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;
+			numbers[1] = "startgap";
+		}
+		const l = numbers.length;
+		if (numbers[l - 1] !== pageCount) {
+			numbers[l - 1] = pageCount;
+			numbers[l - 2] = "endgap";
+		}
+
+		return numbers;
+	}
+}

package/dist/Pagination/index.d.ts

@@ -0,0 +1,53 @@
+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 number */
+	number: number,
+}
+
+/**
+ * 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;
+	/** Raised when this item is made active */
+	ontoggle?: (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 };