@torpor/ui 0.1.6 → 0.2.0

package/dist/Menu/MenuRadioGroup.torp

@@ -0,0 +1,86 @@
+import {
+	type MenuRadioGroupContext,
+	MenuRadioGroupContextName,
+	type RadioGroupItemState
+} from "./MenuTypes";
+
+/**
+ * A container for a logical group of menu RadioGroup items.
+ *
+ * @prop {string} ariaLabel -- An ARIA label for describing the menu to screen readers
+ * @prop {string | undefined} value -- The value of the checked MenuRadio
+ * @prop {(any) => void} onchange - Called when the checked item has changed
+ */
+export default function MenuRadioGroup() {
+	// A collection containing the state and some functions for each item
+	let itemStates: RadioGroupItemState[] = [];
+
+	// Set the context to pass down to items
+	let context: MenuRadioGroupContext = {
+		registerItemInGroup,
+		toggleItem
+	};
+	$context[MenuRadioGroupContextName] = context;
+
+	$mount(() => {
+		// Set the initial checked item
+		setValue($props.value);
+	});
+
+	function registerItemInGroup(itemValue: string, setChecked: (value: boolean) => void) {
+		// Add the item"s state to the array
+		const newItemState: RadioGroupItemState = {
+			value: itemValue,
+			checked: false,
+			setChecked
+		};
+		itemStates.push(newItemState);
+		itemStates = itemStates;
+	}
+
+	function setValue(newValue?: string) {
+		// No point doing this if there aren't any items yet (e.g. from the initial setValue() call)
+		if (!itemStates.length) {
+			return;
+		}
+
+		// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
+		newValue = newValue?.toString();
+		for (let item of itemStates) {
+			item.checked = item.value === newValue;
+			item.setChecked(item.checked);
+		}
+
+		// Set the value
+		if ($props.value !== newValue) {
+			$props.value = newValue;
+
+			if ($props.onchange) {
+				$props.onchange($props.value);
+			}
+		}
+	}
+
+	function toggleItem(toggleValue: string) {
+		let newValue = "";
+		for (let item of itemStates) {
+			const checked = item.value === toggleValue;
+			item.setChecked(checked);
+			if (checked) {
+				newValue = item.value;
+			}
+		}
+		$props.value = newValue;
+	}
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-menu-radio-group ${$props.class ?? ""}`.trim()}
+			role="group"
+			aria-label={$props.ariaLabel}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Menu/MenuSeparator.torp

@@ -0,0 +1,14 @@
+/**
+ * An element in a menu that separates logical sets of menu items.
+ */
+export default function MenuSeparator() {
+	@render {
+		<div
+			{$props.id}
+			class={`torp-menu-separator ${$props.class ?? ""}`.trim()}
+			role="separator"
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Menu/MenuTypes.ts

@@ -0,0 +1,58 @@
+export const MenuContextName = "Menu";
+export const MenuButtonContextName = "MenuButton";
+export const MenuRadioGroupContextName = "MenuRadioGroup";
+export const MenuPopoutContextName = "MenuPopout";
+
+export interface MenuContext {
+	setVisible: (value: boolean, result?: any) => void;
+
+	/** Called from a MenuButton to close the Menu and return a result */
+	handleTrigger: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+
+	/** Called from a MenuButton when its button is focused */
+	handleItemFocus: (index: number) => void;
+
+	/** Called from a MenuButton when a key is pressed */
+	handleItemKey: (e: KeyboardEvent) => void;
+
+	state: {
+		/** Whether the Menu is visible. Writable so that it can be subscribed to by children */
+		visible: boolean;
+	};
+
+	/** The element that caused this Menu to be shown */
+	anchorElement?: HTMLElement;
+
+	/** Called from each MenuButton/Check/Radio to register itself with this Menu */
+	registerItem: (setFocused: () => void) => { index: number };
+}
+
+export interface MenuButtonContext {
+	state: {
+		checked: boolean;
+	};
+}
+
+export interface MenuRadioGroupContext {
+	registerItemInGroup: (value: string, setChecked: (value: boolean) => void) => void;
+	toggleItem: (value: string) => void;
+}
+
+export interface MenuPopoutContext {
+	setVisible: (value: boolean) => void;
+	state: {
+		visible: boolean;
+	};
+	anchorElement?: HTMLElement;
+	focusFirstElement?: () => void;
+}
+
+export interface ItemState {
+	setFocused: () => void;
+}
+
+export interface RadioGroupItemState {
+	value: string;
+	checked: boolean;
+	setChecked: (value: boolean) => void;
+}

package/dist/Menu/index.d.ts

@@ -0,0 +1,200 @@
+import { type SlotRender } from "@torpor/view";
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function Menu(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuCheck(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuGroup(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuIndicator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuPopout(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuPopoutContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuPopoutTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuRadio(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuRadioGroup(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuSeparator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Menu, MenuButton, MenuCheck, MenuGroup, MenuIndicator, MenuPopout, MenuPopoutContent, MenuPopoutTrigger, MenuRadio, MenuRadioGroup, MenuSeparator };

package/dist/Menu/index.js

@@ -0,0 +1,46 @@
+// src/Menu/Menu.torp
+import Menu_default from "./Menu.torp";
+
+// src/Menu/MenuButton.torp
+import MenuButton_default from "./MenuButton.torp";
+
+// src/Menu/MenuCheck.torp
+import MenuCheck_default from "./MenuCheck.torp";
+
+// src/Menu/MenuGroup.torp
+import MenuGroup_default from "./MenuGroup.torp";
+
+// src/Menu/MenuIndicator.torp
+import MenuIndicator_default from "./MenuIndicator.torp";
+
+// src/Menu/MenuPopout.torp
+import MenuPopout_default from "./MenuPopout.torp";
+
+// src/Menu/MenuPopoutContent.torp
+import MenuPopoutContent_default from "./MenuPopoutContent.torp";
+
+// src/Menu/MenuPopoutTrigger.torp
+import MenuPopoutTrigger_default from "./MenuPopoutTrigger.torp";
+
+// src/Menu/MenuRadio.torp
+import MenuRadio_default from "./MenuRadio.torp";
+
+// src/Menu/MenuRadioGroup.torp
+import MenuRadioGroup_default from "./MenuRadioGroup.torp";
+
+// src/Menu/MenuSeparator.torp
+import MenuSeparator_default from "./MenuSeparator.torp";
+export {
+  Menu_default as Menu,
+  MenuButton_default as MenuButton,
+  MenuCheck_default as MenuCheck,
+  MenuGroup_default as MenuGroup,
+  MenuIndicator_default as MenuIndicator,
+  MenuPopout_default as MenuPopout,
+  MenuPopoutContent_default as MenuPopoutContent,
+  MenuPopoutTrigger_default as MenuPopoutTrigger,
+  MenuRadio_default as MenuRadio,
+  MenuRadioGroup_default as MenuRadioGroup,
+  MenuSeparator_default as MenuSeparator
+};
+//# sourceMappingURL=index.js.map

package/dist/Menu/index.js.map

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

package/dist/MenuBar/MenuBar.torp

@@ -0,0 +1,150 @@
+import { MenuBarContextName, type MenuBarContext, type ItemState } from "./MenuBarTypes";
+
+/**
+ * A menu bar, similar to that shown at the top of Windows applications or at the top of the screen on Macs.
+ *
+ * See [the WAI ARIA guidelines for Menus](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
+ *
+ * The structure of a MenuBar is:
+ *
+ * ```
+ * <MenuBar>
+ *     <MenuBarItem>
+ *         <MenuBarItemTrigger />
+ *         <MenuBarItemContent>
+ *             <Menu />
+ *         </MenuBarItemContent>
+ *     </MenuBarItem>
+ * </MenuBar>
+ * ```
+ *
+ * @prop {string} 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 MenuBar() {
+	$props.orientation ??= "horizontal";
+
+	let $state = $watch({
+		active: false,
+	});
+
+	// A collection containing the state and some functions for each item
+	let itemStates: ItemState[] = [];
+	let focusIndex = -1;
+
+	// Set the context to pass down to items
+	let context: MenuBarContext = {
+		handleItemShow,
+		handleButtonFocus,
+		handleButtonKey,
+		registerItem,
+		state: $state
+	};
+	$context[MenuBarContextName] = context;
+
+	function registerItem(setVisible: (value: boolean) => void, setFocused: () => void) {
+		// Add the item"s state to the array and return its index
+		const newItemState: ItemState = {
+			setVisible,
+			setFocused
+		};
+		itemStates.push(newItemState);
+		itemStates = itemStates;
+		return { index: itemStates.length - 1 };
+	}
+
+	function handleItemShow(index: number) {
+		// Make sure other items are hidden
+		itemStates.forEach((item, i) => {
+			if (i !== index) {
+				item.setVisible(false);
+			}
+		});
+	}
+
+	function handleButtonFocus(index: number) {
+		focusIndex = index;
+	}
+
+	function handleButtonKey(e: KeyboardEvent) {
+		switch (e.key) {
+			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");
+				}
+				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 {
+		<div
+			{$props.id}
+			class={`torp-menu-bar ${$props.class ?? ""}`.trim()}
+			tabindex="-1"
+			role="menubar"
+			aria-label={$props.ariaLabel}
+			aria-orientation={$props.orientation}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/MenuBar/MenuBarItem.torp

@@ -0,0 +1,104 @@
+import {
+	MenuBarContextName,
+	MenuBarItemContextName,
+	type MenuBarContext,
+	type MenuBarItemContext
+} from "./MenuBarTypes";
+import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
+
+/**
+ * A popout that is attached to a menubar button and can be used to show a submenu.
+ *
+ * The structure of a MenuBarItem is:
+ *
+ * ```
+ * <MenuBarItem>
+ *     <MenuBarItemTrigger /> (optional)
+ *     <MenuBarItemContent />
+ * </MenuBarItem>
+ * ```
+ *
+ * @prop {boolean} visible -- Whether the item is visible
+ * @prop {(boolean) => void} ontoggle -- Called when the item is opened or closed
+ * @prop {() => void} onopen -- Called when the item has opened
+ * @prop {() => void} onclose -- Called when the item has closed
+ */
+export default function MenuBarItem() {
+	$props.visible ??= false;
+
+	let $state = $watch({
+		visible: $props.visible
+	});
+
+	let result: any;
+
+	// Get stuff out of the MenuBarContext
+	const menubarContext = $context[MenuBarContextName] as MenuBarContext;
+	if (!menubarContext) {
+		throw new Error("MenuBarItem must be contained within a MenuBar");
+	}
+	const { handleItemShow } = menubarContext;
+
+	// Set the context to pass down to items
+	let context: MenuBarItemContext = {
+		setVisible,
+		state: $state,
+		index: -1
+	};
+	$context[MenuBarItemContextName] = context;
+
+	// Set the context to pass down to items
+	let popoverContext: PopoverContext = {
+		setVisible,
+		handleButton,
+		modal: false,
+		state: $state,
+		//anchorElement: anchor,
+	};
+	$context[PopoverContextName] = popoverContext;
+
+	$mount(() => {
+		setVisible();
+	});
+
+	function setVisible(value: boolean) {
+		if (!value || menubarContext.state.active) {
+			$state.visible = value;
+			if (value) {
+				handleItemShow(context.index);
+			}
+		}
+	}
+
+	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) {
+		menubarContext.state.active = false;
+		setVisible(false);
+	}
+
+	@render {
+		<div 
+			{$props.id}
+			class={`torp-menu-bar-item ${$props.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}