@torpor/ui 0.0.17 → 0.1.0

package/dist/Dialog/DialogHeader.torp

@@ -0,0 +1,34 @@
+import getId from "../utils/getId";
+import { DialogContextName, type DialogContext } from "./DialogTypes";
+
+/**
+ * The header for a Dialog. Content in the header will be announced by screen
+ * readers when the Dialog is opened, unless ariaAnnounce is false.
+ * 
+ * @prop {boolean} ariaAnnounce -- Whether the header will be announced by screen readers when the Dialog is opened
+ */
+export default function DialogHeader($props: any) {
+	$props.id ??= getId();
+	$props.ariaAnnounce ??= true;
+
+	// Get stuff out of the DialogContext
+	const context = $context[DialogContextName] as DialogContext;
+	if (!context) {
+		throw new Error("DialogHeader must be contained within a Dialog");
+	}
+	let $state = context.state;
+
+	// Set the header id for using in the Dialog's ARIA attributes
+	if ($props.ariaAnnounce) {
+		$state.headerId = $props.id;
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/Dialog/DialogTypes.ts

@@ -0,0 +1,16 @@
+export const DialogContextName = "Dialog";
+
+export interface DialogContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	state: DialogState;
+	anchorElement?: HTMLElement;
+	confirmButton?: HTMLButtonElement;
+	cancelButton?: HTMLButtonElement;
+}
+
+export interface DialogState {
+	dialogId: string;
+	headerId: string;
+	bodyId: string;
+	visible: boolean;
+}

package/dist/Dialog/index.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Dialog/index.ts
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  Dialog: () => Dialog_default,
+  DialogBody: () => DialogBody_default,
+  DialogButton: () => DialogButton_default,
+  DialogFooter: () => DialogFooter_default,
+  DialogHeader: () => DialogHeader_default
+});
+module.exports = __toCommonJS(Dialog_exports);
+
+// src/Dialog/Dialog.torp
+import Dialog_default from "./Dialog.torp";
+
+// src/Dialog/DialogBody.torp
+import DialogBody_default from "./DialogBody.torp";
+
+// src/Dialog/DialogButton.torp
+import DialogButton_default from "./DialogButton.torp";
+
+// src/Dialog/DialogFooter.torp
+import DialogFooter_default from "./DialogFooter.torp";
+
+// src/Dialog/DialogHeader.torp
+import DialogHeader_default from "./DialogHeader.torp";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  DialogBody,
+  DialogButton,
+  DialogFooter,
+  DialogHeader
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Dialog/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/index.ts"],"sourcesContent":["import Dialog from \"./Dialog.torp\";\nimport DialogBody from \"./DialogBody.torp\";\nimport DialogButton from \"./DialogButton.torp\";\nimport DialogFooter from \"./DialogFooter.torp\";\nimport DialogHeader from \"./DialogHeader.torp\";\n\nexport { Dialog, DialogHeader, DialogBody, DialogFooter, DialogButton };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A","names":[]}

package/dist/Dialog/index.js

@@ -0,0 +1,22 @@
+// src/Dialog/Dialog.torp
+import Dialog_default from "./Dialog.torp";
+
+// src/Dialog/DialogBody.torp
+import DialogBody_default from "./DialogBody.torp";
+
+// src/Dialog/DialogButton.torp
+import DialogButton_default from "./DialogButton.torp";
+
+// src/Dialog/DialogFooter.torp
+import DialogFooter_default from "./DialogFooter.torp";
+
+// src/Dialog/DialogHeader.torp
+import DialogHeader_default from "./DialogHeader.torp";
+export {
+  Dialog_default as Dialog,
+  DialogBody_default as DialogBody,
+  DialogButton_default as DialogButton,
+  DialogFooter_default as DialogFooter,
+  DialogHeader_default as DialogHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/NavMenu/NavMenu.torp

@@ -0,0 +1,178 @@
+import {
+	NavMenuContextName,
+	type NavMenuContext,
+	type ItemState,
+	NavMenuPopoutContextName,
+	type NavMenuPopoutContext
+} from "./NavMenuTypes";
+
+/**
+ * A list of links for navigating a website.
+ *
+ * See [the WAI ARIA guidelines for Menus](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
+ *
+ * The structure of a NavMenu is:
+ *
+ * ```
+ * <NavMenu>
+ *	 <NavMenuLink />
+ *	 <NavMenuSeparator /> (optional)
+ *	 <NavMenuPopout /> (optional)
+ *	 ...
+ * </NavMenu>
+ * ```
+ *
+ * @prop {string | undefined} ariaLabel -- An ARIA label for describing the menu to screen readers 
+ * @prop {"horizontal" | "vertical"} orientation -- The orientation of the menu, which affects keyboard navigation
+ */
+export default function NavMenu($props: any) {
+	$props.orientation ||= "horizontal";
+
+	// A collection containing the state and some functions for each item
+	let itemStates: ItemState[] = [];
+	let focusIndex = -1;
+
+	// Check whether this is a menu in a popout
+	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
+	const inPopout = !!popoutContext;
+	let popoutState = popoutContext?.state;
+
+	// Set the focusFirstElement method in the PopoverContext(s) so that it can be called after everything has been shown
+	if (popoutContext) {
+		popoutContext.focusFirstElement = focusFirstElement;
+	}
+
+	// Set the context to pass down to items
+	let context: NavMenuContext = {
+		handleItemFocus,
+		handleItemKey,
+		registerItem
+	};
+	$context[NavMenuContextName] = context;
+
+	// If the NavMenu is not in a popout, focus its first item. Otherwise the popout will call focusFirstElement, below
+	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
+		if (!popoutContext && itemStates.length) {
+			itemStates[0].setFocused();
+		}
+	}
+
+	function focusFirstElement() {
+		if (itemStates.length) {
+			itemStates[0].setFocused();
+		}
+	}
+
+	function registerItem(setFocused: () => void) {
+		// Add the item's state to the array and return its index
+		const newItemState: ItemState = {
+			setFocused
+		};
+		itemStates.push(newItemState);
+		itemStates = itemStates;
+		return { index: itemStates.length - 1 };
+	}
+
+	function handleItemFocus(index: number) {
+		focusIndex = index;
+	}
+
+	function handleItemKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case "Esc":
+			case "Escape": {
+				if (inPopout) {
+					e.preventDefault();
+					//setPopoutVisible(false);
+					popoutState.visible = false;
+				}
+				break;
+			}
+			case "Right":
+			case "ArrowRight": {
+				if (orientation === "horizontal") {
+					e.preventDefault();
+					focusItem("next");
+				}
+				break;
+			}
+			case "Left":
+			case "ArrowLeft": {
+				if (orientation === "horizontal") {
+					e.preventDefault();
+					focusItem("previous");
+				}
+				break;
+			}
+			case "Down":
+			case "ArrowDown": {
+				if (orientation === "vertical") {
+					e.preventDefault();
+					focusItem("next");
+				}
+				break;
+			}
+			case "Up":
+			case "ArrowUp": {
+				if (orientation === "vertical") {
+					e.preventDefault();
+					focusItem("previous");
+				} else {
+					// TODO: This should be based on what side the menu shows on
+					// And on the orientation
+					if (inPopout) {
+						e.preventDefault();
+						popoutState.visible = false;
+					}
+				}
+				break;
+			}
+			case "Home": {
+				e.preventDefault();
+				focusItem("start");
+				break;
+			}
+			case "End": {
+				e.preventDefault();
+				focusItem("end");
+				break;
+			}
+		}
+	}
+
+	function focusItem(target: "start" | "previous" | "next" | "end") {
+		switch (target) {
+			case "start": {
+				focusIndex = 0;
+				break;
+			}
+			case "previous": {
+				focusIndex = Math.max(0, focusIndex - 1);
+				break;
+			}
+			case "next": {
+				focusIndex = Math.min(itemStates.length - 1, focusIndex + 1);
+				break;
+			}
+			case "end": {
+				focusIndex = itemStates.length - 1;
+				break;
+			}
+		}
+		itemStates[focusIndex]?.setFocused();
+	}
+
+	@render {
+		<nav
+			id={$props.id}
+			class={`torp-nav-menu ${$props.class ?? ""}`.trim()}
+			tabindex="0"
+			role="menubar"
+			aria-label={$props.ariaLabel}
+			aria-orientation={$props.orientation}
+			onfocus={handleFocus}
+		>
+			<:slot />
+		</nav>
+	}
+}

package/dist/NavMenu/NavMenuButton.torp

@@ -0,0 +1,46 @@
+import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+
+/**
+ * A button that is placed in a NavMenu to carry out a non-navigation action such as logging out.
+ *
+ * @prop {boolean} disabled -- Whether this button is disabled 
+ */
+export default function NavMenuButton($props: any) {
+	/** Set when the item is disabled */
+	let dataDisabled = $props.disabled || undefined;
+
+	let button: HTMLButtonElement;
+
+	// Get stuff out of the NavMenuContext
+	const menuContext = $context[NavMenuContextName] as NavMenuContext;
+	if (!menuContext) {
+		throw new Error("NavMenuButton must be contained within a NavMenu");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	// Register this item with the parent NavMenu and store the index
+	const { index } = registerItem(setFocused);
+
+	function setFocused() {
+		button.focus();
+	}
+
+	@render {
+		<button
+			id={$props.id}
+			class={`torp-nav-menu-button ${$props.class ?? ""}`.trim()}
+			type="button"
+			{disabled}
+			role="menuitem"
+			aria-disabled={disabled ? "true" : undefined}
+			data-disabled={dataDisabled}
+			onkeydown
+			onkeydown={handleItemKey}
+			onclick
+			onfocus={() => handleItemFocus(index)}
+			&ref={button}
+		>
+			<:slot />
+		</button>
+	}
+}

package/dist/NavMenu/NavMenuElement.torp

@@ -0,0 +1,43 @@
+import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+
+/**
+ * An element of any type that can be placed in a NavMenu.
+ *
+ * @prop {boolean} disabled -- Whether this button is disabled 
+ * @prop {HTMLElement} element -- An element that can be focused via keyboard navigation
+ */
+export default function NavMenuElement($props: any) {
+	/** Set when the item is disabled */
+	let dataDisabled = $props.disabled || undefined;
+
+	// Get stuff out of the NavMenuContext
+	const menuContext = $context[NavMenuContextName] as NavMenuContext;
+	if (!menuContext) {
+		throw new Error("NavMenuElement must be contained within a NavMenu");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	// Register this item with the parent NavMenu and store the index
+	const { index } = registerItem(setFocused);
+
+	function setFocused() {
+		element.focus();
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-nav-menu-div ${$props.class ?? ""}`.trim()}
+			type="div"
+			role="menuitem"
+			aria-disabled={$props.disabled ? "true" : undefined}
+			data-disabled={dataDisabled}
+			onkeydown
+			onkeydown={handleItemKey}
+			onclick
+			onfocus={() => handleItemFocus(index)}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/NavMenu/NavMenuGroup.torp

@@ -0,0 +1,30 @@
+import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
+
+/**
+ * A container for a logical group of navigation menu items.
+ *
+ * @prop {string | undefined} ariaLabel -- An ARIA label for describing the group to screen readers 
+ */
+export default function NavMenuGroup($props: any) {
+	let $state = $watch({
+		headerId: ""
+	});
+
+	// Set the context to pass down to items
+	let context: NavMenuGroupContext = {
+		state: $state,
+	};
+	$context[NavMenuGroupContextName] = context;
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-nav-menu-group ${$props.class ?? ""}`.trim()}
+			role="group"
+			aria-label={$props.ariaLabel}
+			aria-labelledby={$state.headerId}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/NavMenu/NavMenuGroupHeader.torp

@@ -0,0 +1,30 @@
+import getId from "../utils/getId";
+import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
+
+/**
+ * The header for a NavMenuGroup.
+ *
+ * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
+ */
+export default function NavMenuGroupHeader($props: any) {
+	$props.id ??= getId();
+
+	const context = $context[NavMenuGroupContextName] as NavMenuGroupContext;
+	if (!context) {
+		throw new Error("NavMenuGroupHeader must be contained within an NavMenuGroup");
+	}
+	let $state = context.state;
+
+	// Set the header ID now that we know what it is
+	$state.headerId = $props.id;
+
+	@render {
+		<h4
+			@// TODO: self={$props.as}
+			id={$props.id}
+			class={`torp-nav-menu-group-header ${$props.class ?? ""}`.trim()}
+		>
+			<:slot />
+		</h4>
+	}
+}

package/dist/NavMenu/NavMenuLink.torp

@@ -0,0 +1,52 @@
+
+import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+
+/**
+ * A link that is placed in a NavMenu and signals a response by a user.
+ *
+ * @prop {string} href -- The URL for the menu link
+ * @prop {newWindow} boolean -- Whether the menu link should open in a new tab/window
+ * @prop {boolean} disabled -- Whether this link is disabled
+ */
+export default function NavMenuLink($props: any) {
+	$props.newWindow ??= false;
+
+	/** Set when the item is disabled */
+	let dataDisabled = $props.disabled || undefined;
+
+	let link: HTMLAnchorElement;
+
+	// Get stuff out of the NavMenuContext
+	const menuContext = $context[NavMenuContextName] as NavMenuContext;
+	if (!menuContext) {
+		throw new Error("NavMenuLink must be contained within a NavMenu");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	// Register this item with the parent NavMenu and store the index
+	const { index } = registerItem(setFocused);
+
+	function setFocused() {
+		link.focus();
+	}
+
+	@render {
+		<a
+			id={$props.id}
+			class={`torp-nav-menu-link ${$props.class ?? ""}`.trim()}
+			href={$props.href}
+			disabled={$props.disabled}
+			target={$props.newWindow ? "_blank" : undefined}
+			role="menuitem"
+			aria-disabled={$props.disabled ? "true" : undefined}
+			data-disabled={dataDisabled}
+			onkeydown
+			onkeydown={handleItemKey}
+			onclick
+			onfocus={() => handleItemFocus(index)}
+			&ref={link}
+		>
+			<:slot />
+		</a>
+	}
+}

package/dist/NavMenu/NavMenuPopout.torp

@@ -0,0 +1,69 @@
+import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
+
+/**
+ * A popout that is attached to a menu button and can be used to show a submenu.
+ *
+ * The structure of a NavMenuPopout is:
+ *
+ * ```
+ * <NavMenuPopout>
+ *     <NavMenuPopoutButton />
+ * 	<NavMenuPopoutContent />
+ * </NavMenuPopout>
+ * ```
+ *
+ * @prop {boolean} visible -- Whether the popout is visible
+ */
+export default function NavMenuPopout($props: any) {
+	$props.visible ??= false;
+
+	let $state = $watch({
+		visible: $props.visible
+	});
+
+	let result: any;
+
+	// Set the context to pass down to items
+	let context: NavMenuPopoutContext = {
+		state: $state,
+	};
+	$context[NavMenuPopoutContextName] = context;
+
+	// Copy props into state whenever they change
+	$run(() => {
+		$state.visible = $props.visible ?? false;
+	});
+
+	// Dispatch the toggle event when the popout is opened or closed
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props.ontoggle;
+		const onopen = $props.onopen;
+		const onclose = $props.onclose;
+		const visible = $props.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
+
+	function handleMouseLeave() {
+		$state.visible = false;
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-nav-menu-popout ${$props.class ?? ""}`.trim()}
+			onmouseleave={handleMouseLeave}
+		>
+			<:slot />
+		</div>
+	}
+}