@torpor/ui 0.3.6 → 0.4.0

package/dist/Pagination/index.js

@@ -0,0 +1,40 @@
+// src/Pagination/Pagination.torp
+import Pagination_default from "./Pagination.torp";
+
+// src/Pagination/PaginationItem.torp
+import PaginationItem_default from "./PaginationItem.torp";
+
+// src/Pagination/buildPages.ts
+function buildPages(count, number, pageSize = 1, maxPages = 9) {
+  const pageCount = Math.ceil(count / pageSize);
+  if (pageCount <= maxPages) {
+    return Array.from({ length: pageCount }).fill(0).map((_, i) => i + 1);
+  } else {
+    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;
+    }
+    const numbers = Array.from({ length: end - start + 1 }).fill(0).map((_, i) => start + i);
+    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;
+  }
+}
+export {
+  Pagination_default as Pagination,
+  PaginationItem_default as PaginationItem,
+  buildPages
+};
+//# sourceMappingURL=index.js.map

package/dist/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Pagination/buildPages.ts"],"sourcesContent":["import { type PageNumber } from \"./PaginationTypes\";\n\n/**\n * Builds the pages that should be displayed for pagination.\n *\n * @param count The total number of pages (or items if the page size is greater than 1)\n * @param number The active page number\n * @param pageSize The number of items on each page\n * @param maxPages The maximum number of pages to display (gaps will be indicated with ellipses)\n */\nexport default function buildPages(\n\tcount: number,\n\tnumber: number,\n\tpageSize: number = 1,\n\tmaxPages: number = 9,\n): PageNumber[] {\n\t// Calculate the page count\n\tconst pageCount = Math.ceil(count / pageSize);\n\n\tif (pageCount <= maxPages) {\n\t\t// There\"s no need for ellipses, just return the numbers\n\t\treturn Array.from({ length: pageCount })\n\t\t\t.fill(0)\n\t\t\t.map((_, i) => i + 1);\n\t} else {\n\t\t// Get the start and end around the current page number\n\t\t// Use floor and ceil in case there is an even number of pages (e.g. if\n\t\t// maxPages is 8, there will be 3 numbers at the start and 4 at the end)\n\t\tlet start = number - Math.floor((maxPages - 1) / 2);\n\t\tlet end = number + Math.ceil((maxPages - 1) / 2);\n\t\tif (start < 1) {\n\t\t\tend += Math.abs(start) + 1;\n\t\t\tstart = 1;\n\t\t} else if (end > pageCount) {\n\t\t\tstart -= end - pageCount;\n\t\t\tend = pageCount;\n\t\t}\n\n\t\t// Build the numbers\n\t\tconst numbers: PageNumber[] = Array.from({ length: end - start + 1 })\n\t\t\t.fill(0)\n\t\t\t.map((_, i) => start + i);\n\n\t\t// Replace numbers at the start and end with ellipses if necessary\n\t\tif (numbers[0] !== 1) {\n\t\t\tnumbers[0] = 1;\n\t\t\tnumbers[1] = \"startgap\";\n\t\t}\n\t\tconst l = numbers.length;\n\t\tif (numbers[l - 1] !== pageCount) {\n\t\t\tnumbers[l - 1] = pageCount;\n\t\t\tnumbers[l - 2] = \"endgap\";\n\t\t}\n\n\t\treturn numbers;\n\t}\n}\n"],"mappings":";;;;;;;AAUe,SAAR,WACN,OACA,QACA,WAAmB,GACnB,WAAmB,GACJ;AAEf,QAAM,YAAY,KAAK,KAAK,QAAQ,QAAQ;AAE5C,MAAI,aAAa,UAAU;AAE1B,WAAO,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,EACrC,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,EACtB,OAAO;AAIN,QAAI,QAAQ,SAAS,KAAK,OAAO,WAAW,KAAK,CAAC;AAClD,QAAI,MAAM,SAAS,KAAK,MAAM,WAAW,KAAK,CAAC;AAC/C,QAAI,QAAQ,GAAG;AACd,aAAO,KAAK,IAAI,KAAK,IAAI;AACzB,cAAQ;AAAA,IACT,WAAW,MAAM,WAAW;AAC3B,eAAS,MAAM;AACf,YAAM;AAAA,IACP;AAGA,UAAM,UAAwB,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,CAAC,EAClE,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,MAAM,QAAQ,CAAC;AAGzB,QAAI,QAAQ,CAAC,MAAM,GAAG;AACrB,cAAQ,CAAC,IAAI;AACb,cAAQ,CAAC,IAAI;AAAA,IACd;AACA,UAAM,IAAI,QAAQ;AAClB,QAAI,QAAQ,IAAI,CAAC,MAAM,WAAW;AACjC,cAAQ,IAAI,CAAC,IAAI;AACjB,cAAQ,IAAI,CAAC,IAAI;AAAA,IAClB;AAEA,WAAO;AAAA,EACR;AACD;","names":[]}

package/dist/Popover/Popover.torp

@@ -1,5 +1,6 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
+import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
 
 interface PopoverProps {
 	/** An ID for the root element */
@@ -62,11 +63,15 @@ 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;
 
+	// Set the context to pass down to items
+	let popoutContext: PopoutContext = context;
+	$context[PopoutContextName] = popoutContext;
+
 	// Dispatch the toggle event when the popover is opened or closed
 	let firstToggle = true;
 	$run(() => {
@@ -90,11 +95,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: {

package/dist/Popover/PopoverTypes.ts

@@ -1,4 +1,4 @@
-export const PopoverContextName = "Popover";
+export const PopoverContextName: unique symbol = Symbol.for("torp.Popover");
 
 /** The shared context for popover components (Contextual, Prompt and Popover) */
 export interface PopoverContext {

package/dist/SelectBox/SelectBox.torp

@@ -0,0 +1,136 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { SelectBoxContextName, type SelectBoxContext, type SelectBoxState } from "./SelectBoxTypes";
+import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
+
+interface SelectBoxProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** The data value selected by the user */
+	value?: any,
+	/** Whether the popout is visible  */
+	visible?: boolean,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+	/** Raised when the popout is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the popout has opened */
+	onopen?: () => void,
+	/** Raised when the popout has closed */
+	onclose?: (result: any) => void,
+}
+
+/**
+ * An input box for selecting a value from a popout ListBox or Dialog.
+ *
+ * See [the WAI ARIA guidelines for ComboBoxes](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+ *
+ * The structure of a SelectBox is:
+ *
+ * ```
+ * <SelectBox>
+ * 	<SelectBoxInput />
+ * 	<SelectBoxTrigger /> (optional)
+ * 	<SelectBoxContent />
+ * </SelectBox>
+ * ```
+ */
+export default function SelectBox($props: SelectBoxProps | undefined) {
+	let $state: SelectBoxState = $watch({
+		visible: false,
+		value: $props?.value,
+	});
+
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+			$props.value = $state.value;
+		}
+	});
+
+	let result: any;
+
+	// Set the context to pass down to items
+	let context: SelectBoxContext = {
+		handleButton,
+		handleClickOutside,
+		state: $state,
+	};
+	$context[SelectBoxContextName] = context;
+
+	// Set the context to pass down to items
+	let popoutContext: PopoutContext = context;
+	$context[PopoutContextName] = popoutContext;
+
+	// 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 = $state.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
+
+	function handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
+		// Get the button's result
+		switch (type) {
+			case "confirm": {
+				result = value ?? true;
+				break;
+			}
+			case "cancel": {
+				result = value ?? false;
+				break;
+			}
+			default: {
+				result = value;
+				break;
+			}
+		}
+
+		// Update the value
+		if (type !== "cancel") {
+			$state.value = result;
+		}
+
+		// Hide the popout
+		$state.visible = false;
+
+		// Call the callback
+		if ($props?.callback) {
+			$props?.callback(result);
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		e.preventDefault();
+		$state.visible = false;
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-select-box", $props?.class]}
+			{$props?.style}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/SelectBox/SelectBoxContent.torp

@@ -0,0 +1,81 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import { SelectBoxContextName, type SelectBoxContext } from "./SelectBoxTypes";
+
+interface SelectBoxContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+}
+
+/**
+ * The content that is displayed for a SelectBox when it is open, displayed
+ * alongside an element.
+ */
+export default function SelectBoxContent($props: SelectBoxContentProps | undefined) {
+	let div: HTMLDivElement;
+	let shown = false;
+	let closeOnClick = false;
+
+	// Get stuff out of the SelectBoxContext
+	const context = $context[SelectBoxContextName] as SelectBoxContext;
+	if (!context) {
+		throw new Error("SelectBoxContent must be contained within a SelectBox");
+	}
+	let $state = context.state;
+
+	$run(() => {
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
+
+		// HACK: Because this SelectBox 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);
+	}
+
+	function hide() {
+		if (!shown) return;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!div.contains(e.target as HTMLElement)
+		) {
+			e.preventDefault();
+			context.handleClickOutside!(e);
+		}
+	}
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={["torp-select-box-content", $props?.class]}
+				{$props?.style}
+				&ref={div}
+				onmount={show}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/dist/SelectBox/SelectBoxInput.torp

@@ -0,0 +1,95 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { SelectBoxContextName, type SelectBoxContext } from "./SelectBoxTypes";
+
+interface SelectBoxInputProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** The name of the input's form data field */
+	name?: string,
+	/** The value displayed in the input */
+	value?: any,
+	/** Text to display when the input value is empty */
+	placeholder?: string,
+	/** Whether the input's value is required */
+	required?: boolean,
+	/** An ARIA label for describing the input to screen readers when there is no associated label element */
+	ariaLabel?: string,
+	/** Raised on change */
+	onchange?: (e: Event) => void,
+}
+
+/**
+ * The input that causes a SelectBox to appear or disappear.
+ */
+export default function SelectBoxInput($props: SelectBoxInputProps | undefined) {
+	// Get stuff out of the SelectBoxContext
+	const context = $context[SelectBoxContextName] as SelectBoxContext;
+	if (!context) {
+		throw new Error("SelectBoxInput must be contained within a SelectBox");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		$state.visible = !$state.visible;
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case "Down":
+			case "ArrowDown": {
+				if (!$state.visible) {
+					e.preventDefault();
+					$state.visible = true;
+					if (context.focusFirstElement) {
+						context.focusFirstElement();
+					}
+				}
+				break;
+			}
+			case "Up":
+			case "ArrowUp": {
+				if (!$state.visible) {
+					e.preventDefault();
+					$state.visible = true;
+					if (context.focusLastElement) {
+						context.focusLastElement();
+					}
+				}
+				break;
+			}
+			case "Escape": {
+				if ($state.visible) {
+					e.preventDefault();
+					$state.visible = false;
+				}
+				break;
+			}
+		}
+	}
+
+	@render {
+		<input
+			readonly
+			role="combobox"
+			{$props?.id}
+			class={["torp-select-box-input", $props?.class]}
+			{$props?.style}
+			{$props?.name}
+			{$props?.value}
+			{$props?.placeholder}
+			{$props?.required}
+			aria-readonly
+			aria-controls={$state.contentId}
+			aria-expanded={$state.visible ? "true" : "false"}
+			aria-label={$props?.ariaLabel}
+			onchange={$props?.onchange}
+			onclick={handleClick}
+			onkeydown={handleKey}
+			&ref={context.anchorElement}
+		/>
+	}
+}

package/dist/SelectBox/SelectBoxTrigger.torp

@@ -0,0 +1,41 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { SelectBoxContextName, type SelectBoxContext } from "./SelectBoxTypes";
+
+interface SelectBoxTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+}
+
+/**
+ * The button that causes a SelectBox to appear or disappear.
+ */
+export default function SelectBoxTrigger($props: SelectBoxTriggerProps | undefined) {
+	// Get stuff out of the SelectBoxContext
+	const context = $context[SelectBoxContextName] as SelectBoxContext;
+	if (!context) {
+		throw new Error("SelectBoxTrigger must be contained within a SelectBox");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		$state.visible = !$state.visible;
+	}
+
+	@render {
+		<button
+			type="button"
+			{$props?.id}
+			class={["torp-select-box-trigger", $props?.class]}
+			{$props?.style}
+			tabindex="-1"
+			onclick={handleClick}
+			&ref={context.anchorElement}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/SelectBox/SelectBoxTypes.ts

@@ -0,0 +1,18 @@
+export const SelectBoxContextName: unique symbol = Symbol.for("torp.SelectBox");
+
+/** The shared context for modal components (Contextual, Prompt and SelectBox) */
+export interface SelectBoxContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
+	// There may be a more elegant way to accomplish this too
+	handleClickOutside?: (e: MouseEvent) => void;
+	state: SelectBoxState;
+	focusFirstElement?: () => void;
+	focusLastElement?: () => void;
+}
+
+export interface SelectBoxState {
+	visible: boolean;
+	value: any;
+	contentId?: string;
+}

package/dist/SelectBox/index.d.ts

@@ -0,0 +1,127 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface SelectBoxProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** The data value selected by the user */
+	value?: any,
+	/** Whether the popout is visible  */
+	visible?: boolean,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+	/** Raised when the popout is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the popout has opened */
+	onopen?: () => void,
+	/** Raised when the popout has closed */
+	onclose?: (result: any) => void,
+}
+
+/**
+ * An input box for selecting a value from a popout ListBox or Dialog.
+ *
+ * See [the WAI ARIA guidelines for ComboBoxes](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+ *
+ * The structure of a SelectBox is:
+ *
+ * ```
+ * <SelectBox>
+ * 	<SelectBoxInput />
+ * 	<SelectBoxTrigger /> (optional)
+ * 	<SelectBoxContent />
+ * </SelectBox>
+ * ```
+ */
+declare function SelectBox(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SelectBoxProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SelectBoxContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+}
+
+/**
+ * The content that is displayed for a SelectBox when it is open, displayed
+ * alongside an element.
+ */
+declare function SelectBoxContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SelectBoxContentProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SelectBoxInputProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** The name of the input's form data field */
+	name?: string,
+	/** The value displayed in the input */
+	value?: any,
+	/** Text to display when the input value is empty */
+	placeholder?: string,
+	/** Whether the input's value is required */
+	required?: boolean,
+	/** An ARIA label for describing the input to screen readers when there is no associated label element */
+	ariaLabel?: string,
+	/** Raised on change */
+	onchange?: (e: Event) => void,
+}
+
+/**
+ * The input that causes a SelectBox to appear or disappear.
+ */
+declare function SelectBoxInput(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SelectBoxInputProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SelectBoxTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+}
+
+/**
+ * The button that causes a SelectBox to appear or disappear.
+ */
+declare function SelectBoxTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SelectBoxTriggerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { SelectBox, SelectBoxContent, SelectBoxInput, SelectBoxTrigger };

package/dist/SelectBox/index.js

@@ -0,0 +1,18 @@
+// src/SelectBox/SelectBox.torp
+import SelectBox_default from "./SelectBox.torp";
+
+// src/SelectBox/SelectBoxContent.torp
+import SelectBoxContent_default from "./SelectBoxContent.torp";
+
+// src/SelectBox/SelectBoxInput.torp
+import SelectBoxInput_default from "./SelectBoxInput.torp";
+
+// src/SelectBox/SelectBoxTrigger.torp
+import SelectBoxTrigger_default from "./SelectBoxTrigger.torp";
+export {
+  SelectBox_default as SelectBox,
+  SelectBoxContent_default as SelectBoxContent,
+  SelectBoxInput_default as SelectBoxInput,
+  SelectBoxTrigger_default as SelectBoxTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/SelectBox/index.js.map

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

package/dist/TabGroup/TabGroup.torp

@@ -90,12 +90,12 @@ export default function TabGroup($props: TabGroupProps | undefined) {
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props?.onchange;
+		const onchange = $props?.onchange;
 		const value = $props?.value;
 		if (firstChange) {
 			firstChange = false;
-		} else if (ev) {
-			ev(value!);
+		} else if (onchange) {
+			onchange(value!);
 		}
 	});
 

package/dist/TabGroup/TabGroupTypes.ts

@@ -1,5 +1,5 @@
-export const TabGroupContextName = "TabGroup";
-export const TabItemContextName = "TabItem";
+export const TabGroupContextName: unique symbol = Symbol.for("torp.TabGroup");
+export const TabItemContextName: unique symbol = Symbol.for("torp.TabItem");
 
 export interface TabGroupContext {
 	/** Called from a header when it is added */