@torpor/ui 0.3.4 → 0.3.6

package/src/TabGroup/TabGroup.torp

@@ -1,250 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
-
-interface TabGroupProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The orientation of the tab buttons, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
-	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
-	activation?: "automatic" | "manual",
-	/** The value of the active TabContent */
-	value?: string,
-	/** If set to true, the user cannot interact with any items in the TabGroup */
-	disabled?: boolean,
-	/** Raised when the active item has changed */
-	onchange?: (value: string | string[]) => void
-}
-
-/**
- * A list of interactive headings coupled with layered sections of content that
- * enable users to reveal a single section of content at a time.
- *
- * See [the WAI ARIA guidelines for Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
- *
- * The structure of a TabGroup is:
- *
- * ```
- * <TabGroup>
- * 	<TabList>
- * 		<TabHeader>
- * 			<TabTrigger />
- * 		</TabHeader>
- * 	</TabList>
- * 	<TabContent />
- * </TabGroup>
- * ```
- */
-export default function TabGroup($props: TabGroupProps | undefined) {
-	let orientation = $props?.orientation ?? "horizontal";
-	let activation = $props?.activation ?? "automatic";
-
-	let $state = $watch({
-		value: ""
-	});
-
-	// Sync props and state
-	$run(() => {
-		$state.value = $props?.value ?? "";
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
-
-	let itemStates: ItemState[] = [];
-
-	// This is used to assign automatic indexes to items where needed
-	let nextHeaderIndex = 0;
-	let nextItemIndex = 0;
-
-	// Set the context to pass down to headers and content, with functions for each item to call
-	let context: TabGroupContext = {
-		registerHeader,
-		registerItem,
-		removeItem,
-		triggerItem,
-		handleHeaderKey,
-		orientation,
-		activation,
-	};
-	$context[TabGroupContextName] = context;
-
-	$run(() => {
-		// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-		$state.value = $state.value.toString();
-		for (let item of itemStates) {
-			item.active = item.value === $state.value;
-		}
-	});
-
-	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
-	});
-
-	// Dispatch the change event when the value changes
-	let firstChange = true;
-	$run(() => {
-		const ev = $props?.onchange;
-		const value = $props?.value;
-		if (firstChange) {
-			firstChange = false;
-		} else if (ev) {
-			ev(value!);
-		}
-	});
-
-	// On mount, if no value was set, show the first tab content
-	$mount(() => {
-		if ($state.value === "" && itemStates.length) {
-			$state.value = itemStates[0].value;
-		}
-	});
-
-	function registerHeader(index: number | undefined, value: string | undefined, setFocused: () => void): ItemState {
-		// If an index wasn't set for the header, set it automatically
-		if (!index) {
-			index = nextHeaderIndex++;
-		}
-
-		// Get or add the ItemState at this index
-		const itemState = getItemState(index, value);
-
-		itemState.setFocused = setFocused;
-
-		return itemState;
-	}
-
-	function registerItem(index: number | undefined, value: string | undefined): ItemState {
-		// If an index wasn't set for the item, set it automatically
-		if (index === undefined) {
-			index = nextItemIndex++;
-		}
-
-		// Get or add the ItemState at this index
-		const itemState = getItemState(index, value);
-
-		return itemState;
-	}
-
-	function getItemState(index: number, value: string | undefined): ItemState {
-		// If we already have an item at this index, just return it
-		if (itemStates.length > index) {
-			return itemStates[index];
-		}
-
-		// If a value wasn't set for the item, set it to the index
-		if (value === undefined) {
-			value = index.toString();
-		}
-
-		// Add the item's state to the array
-		const newItemState: ItemState = $watch({
-			index,
-			value,
-			// TODO: this would be better than using $mount, but it doesn't work with nested tabs
-			// active: value === $props?.value || ($props?.value === "" && index === 0),
-			active: value === $state.value,
-			headerId: "",
-			contentId: "",
-			disabled: false,
-			parentDisabled: false,
-			get dataState() {
-				return this.active ? "active" : "inactive";
-			},
-			setFocused: () => {},
-			orientation,
-			activation
-		});
-		itemStates.splice(index, 0, newItemState);
-
-		return newItemState;
-	}
-
-	// TODO: I think this should be done by value
-	function removeItem(itemIndex: number) {
-		// Remove the item and re-index
-		let index = itemStates.findIndex((item) => item.index === itemIndex);
-		if (index !== -1) {
-			itemStates.splice(itemIndex, 1);
-		}
-		itemStates.forEach((item, i) => (item.index = i));
-	}
-
-	function triggerItem(toggleValue: string) {
-		for (let item of itemStates) {
-			// The item is active if it has the supplied value
-			if (item.value === toggleValue) {
-				$state.value = item.value;
-				break;
-			}
-		}
-	}
-
-	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
-		switch (e.key) {
-			case "Left":
-			case "ArrowLeft": {
-				if (orientation === "horizontal" && headerIndex > 0) {
-					e.preventDefault();
-					itemStates[headerIndex - 1].setFocused();
-				}
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				if (orientation === "vertical" && headerIndex > 0) {
-					e.preventDefault();
-					itemStates[headerIndex - 1].setFocused();
-				}
-				break;
-			}
-			case "Right":
-			case "ArrowRight": {
-				if (orientation === "horizontal" && headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[headerIndex + 1].setFocused();
-				}
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				if (orientation === "vertical" && headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[headerIndex + 1].setFocused();
-				}
-				break;
-			}
-			case "Home": {
-				if (headerIndex > 0) {
-					e.preventDefault();
-					itemStates[0].setFocused();
-				}
-				break;
-			}
-			case "End": {
-				if (headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[itemStates.length - 1].setFocused();
-				}
-				break;
-			}
-		}
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-tab-group", $props?.class]}
-			{$props?.style}
-			data-orientation={$props?.orientation}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/TabGroup/TabGroupTypes.ts

@@ -1,44 +0,0 @@
-export const TabGroupContextName = "TabGroup";
-export const TabItemContextName = "TabItem";
-
-export interface TabGroupContext {
-	/** Called from a header when it is added */
-	registerHeader: (
-		index: number | undefined,
-		value: string | undefined,
-		setFocused: () => void,
-	) => ItemState;
-	/** Called from an item when it is added */
-	registerItem: (index: number | undefined, value: string | undefined) => ItemState;
-	/** Called from an item when it is removed */
-	removeItem: (index: number) => void;
-	/** Called from an item when it is triggered */
-	triggerItem: (value: string) => void;
-	/** Called from a TabHeader when it receives a keyboard event */
-	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
-	orientation: "horizontal" | "vertical";
-	activation: "automatic" | "manual";
-}
-
-export interface TabItemContext {
-	/** Raised when an item is triggered */
-	triggerItem: (value: string) => void;
-	/** Raised when a TabHeader receives a keyboard event */
-	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
-	/** The reactive state for an item */
-	state: ItemState;
-	orientation: "horizontal" | "vertical";
-	activation: "automatic" | "manual";
-}
-
-export interface ItemState {
-	index: number;
-	value: string;
-	active: boolean;
-	headerId: string;
-	contentId: string;
-	disabled: boolean;
-	parentDisabled: boolean;
-	/** Called in the TabGroup when a header needs to be focused */
-	setFocused: () => void;
-}

package/src/TabGroup/TabHeader.torp

@@ -1,81 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
-
-interface TabHeaderProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
-	/** The index of this header's item */
-	index?: number,
-	/** The value for this header's item */
-	value?: string,
-}
-
-/**
- * The header for a tab item, which contains the TabTrigger.
- *
- * The structure of a TabHeader is:
- * 
- * ```
- * <TabHeader>
- * 	<TabTrigger />
- * </TabHeader>
- * ```
- */
-export default function TabHeader($props: TabHeaderProps | undefined) {
-	let button: HTMLButtonElement;
-
-	const context = $context[TabGroupContextName] as TabGroupContext;
-	if (!context) {
-		throw new Error("TabHeader must be contained within a TabGroup");
-	}
-	let $state = context.registerHeader($props?.index, $props?.value);
-
-	const itemContext: TabItemContext = {
-		triggerItem: context.triggerItem,
-		handleHeaderKey: context.handleHeaderKey,
-		state: $state,
-		orientation: context.orientation,
-		activation: context.activation
-	};
-	$context[TabItemContextName] = itemContext;
-
-	// Remove the item from the parent TabGroup when this item is destroyed
-	$run(() => {
-		return () => {
-			context.removeItem($state.index);
-		}
-	});
-
-	@render {
-		@// TODO: $props?.as
-		<h4
-			{$props?.id}
-			class={[
-				"torp-tab-header",
-				$props?.class,
-				context.orientation
-			]}
-			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled ? "true" : undefined}
-			&ref={button}
-		>
-			<slot />
-		</h4>
-	}
-
-	@style {
-		.torp-tab-header.horizontal {
-			display: inline-block;
-		}
-
-		.torp-tab-header.vertical {
-			display: block;
-		}
-	}
-}

package/src/TabGroup/TabList.torp

@@ -1,61 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
-
-interface TabListProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** An ARIA label for describing the tab list to screen readers */
-	ariaLabel?: string,
-}
-
-/**
- * A component that holds the TabHeaders of a TabGroup.
- * 
- * The structure of a TabList is:
- * 
- * ```
- * <TabList>
- * 	<TabHeader>
- * 		<TabTrigger />
- * 	</TabHeader>
- * </TabList>
- * ```
- */
-export default function TabList($props: TabListProps | undefined) {
-	// Get stuff out of the TabGroupContext
-	const context = $context[TabGroupContextName] as TabGroupContext;
-	if (!context) {
-		throw new Error("TabList must be contained within a TabGroup");
-	}
-	// TODO: const { orientation } = context;
-	const orientation = context.orientation;
-
-	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
-		// TODO: Should this be the first button?
-		const el = e.currentTarget.childNodes[0];
-		if (el instanceof HTMLElement) {
-			el.focus();
-			e.preventDefault();
-		}
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-tab-list", $props?.class]}
-			{$props?.style}
-			role="tablist"
-			aria-label={$props?.ariaLabel}
-			aria-orientation={orientation}
-			data-orientation={orientation}
-			tabindex="0"
-			onfocus={handleFocus}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/TabGroup/TabTrigger.torp

@@ -1,76 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
-
-interface TabTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * A header button for a tab item, which can be used to reveal an associated TabContent.
- */
-export default function TabTrigger($props: TabTriggerProps | undefined) {
-	let defaultId = getId();
-
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the TabItemContext
-	const context = $context[TabItemContextName] as TabItemContext;
-	if (!context) {
-		throw new Error("TabTrigger must be contained within a TabHeader");
-	}
-	let $state = context.state;
-
-	// Set the header ID so that it can be used with aria-labelledby in TabContent
-	$state.headerId = $props?.id ?? defaultId;
-
-	// Let the item know how to set the button's focus
-	$state.setFocused = setFocused;
-
-	// This function is called by the parent TabGroup to focus this item's button
-	function setFocused() {
-		button.focus();
-		if (context.activation === "automatic") {
-			context.triggerItem($state.value);
-		}
-	}
-
-	function handleClick() {
-		// Pass the value to the triggerItem method in the parent TabGroup which will handle toggling
-		// the value of active for all items (e.g. to close other items if necessary)
-		context.triggerItem($state.value);
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		// Pass the key press up to the parent TabGroup which will handle setting the focused button
-		context.handleHeaderKey($state.index, e);
-	}
-
-	@render {
-		<button
-			type="button"
-			id={$props?.id ?? defaultId}
-			class={["torp-tab-trigger", $props?.class]}
-			{$props?.style}
-			role="tab"
-			tabindex="-1"
-			disabled={$state.disabled || $state.parentDisabled}
-			aria-selected={$state.active.toString()}
-			aria-disabled={$state.disabled}
-			aria-controls={$state.contentId}
-			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled}
-			data-orientation={context.orientation}
-			&ref={button}
-			onclick={handleClick}
-			onkeydown={handleKey}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/TabGroup/index.ts

@@ -1,7 +0,0 @@
-import TabContent from "./TabContent.torp";
-import TabGroup from "./TabGroup.torp";
-import TabHeader from "./TabHeader.torp";
-import TabList from "./TabList.torp";
-import TabTrigger from "./TabTrigger.torp";
-
-export { TabGroup, TabList, TabHeader, TabTrigger, TabContent };

package/src/ambient.d.ts

@@ -1,7 +0,0 @@
-// TODO: Figure out how to export this from @torpor/view so it doesn't need to
-// be created in every app
-declare module "*.torp" {
-	import { Component as ComponentType } from "@torpor/view";
-	const Component: ComponentType;
-	export default Component;
-}

package/src/icons/ArrowDown.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ArrowDown($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<polygon points="25,40 50,70 75,40" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/ArrowLeft.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ArrowLeft($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<polygon points="60,25 30,50 60,75" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/ArrowRight.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ArrowRight($props: IconProps | any) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<polygon points="40,25 70,50 40,75" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/ArrowUp.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ArrowUp($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<polygon points="25,60 50,30 75,60" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/Bars.torp

@@ -1,20 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function Bars($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M10,25 L90,25" />
-				<path d="M10,50 L90,50" />
-				<path d="M10,75 L90,75" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/Check.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function Check($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M10,55 L35,80 L90,25" fill="none" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/ChevronDown.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ChevronDown($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M10,30 L50,70 L90,30" fill="none" />
-			</g>
-		</svg>
-	}
-}

package/src/icons/ChevronLeft.torp

@@ -1,18 +0,0 @@
-import { type IconProps } from "./IconTypes";
-
-export default function ChevronLeft($props: IconProps | undefined) {
-	@render {
-		<svg
-			{$props?.id}
-			class={["torp-icon", $props?.class]}
-			{$props?.style}
-			viewBox="0 0 100 100"
-			stroke-linejoin="round"
-			stroke-width="12"
-		>
-			<g>
-				<path d="M70,10 L30,50 L70,90" fill="none" />
-			</g>
-		</svg>
-	}
-}