@torpor/ui 0.1.7 → 0.2.1

package/src/Popover/PopoverContentAnchored.torp

@@ -3,21 +3,28 @@ import getScrollParent from "../utils/getScrollParent";
 import setPopoverPosition from "../utils/setPopoverPosition";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
+interface PopoverContentAnchoredProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popover will be shown, relative to the popover button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popover will be aligned, relative to the popover button */
+	alignment?: "start" | "center" | "end",
+}
+
 /**
  * The content that is displayed for a Popover when it is open, displayed
  * alongside an element.
- *
- * @prop {"top" | "right" | "bottom" | "left"} site -- Where the popover will be
- * shown, relative to the popover button
- * @prop {"start" | "center" | "end"} alignment -- How the popover will be
- * aligned, relative to the popover button
  */
-export default function PopoverContentAnchored($props: any) {
+export default function PopoverContentAnchored($props: PopoverContentAnchoredProps) {
+	$props ??= $watch({});
 	$props.side ??= "bottom";
 	$props.alignment ??= "center";
 
 	let div: HTMLDivElement;
-
+	let shown = false;
 	let closeOnClick = false;
 
 	// Get stuff out of the PopoverContext
@@ -27,42 +34,45 @@ export default function PopoverContentAnchored($props: any) {
 	}
 	let $state = context.state;
 
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
+
+		// HACK: Because this Popover 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);
 
-		if (first) {
-			first = false;
-			return;
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
+
+	function hide() {
+		if (!shown) return;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
 
-		if (visible) {
-			// HACK: Because this Popover 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);
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			setPosition();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.addEventListener("resize", setPosition);
-			scrollParent.addEventListener("scroll", setPosition);
-		} else {
-			removeDocumentEvent("mousedown", handleDocumentMouseDown);
-			removeDocumentEvent("click", handleDocumentClick);
-			// Stop listening for window resize and focus the anchor element per WAI guidelines
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.removeEventListener("resize", setPosition);
-			scrollParent.removeEventListener("scroll", setPosition);
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function handleDocumentMouseDown() {
 		closeOnClick = true;
@@ -85,20 +95,18 @@ export default function PopoverContentAnchored($props: any) {
 			throw new Error("PopoverContentAnchored must have an anchor element");
 		}
 
-		if (div) {
-			setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
-		}
+		setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
 	}
 
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
 				&ref={div}
-				:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/src/Popover/PopoverContentContextual.torp

@@ -4,13 +4,22 @@ import getScrollParent from "../utils/getScrollParent";
 import setContextPosition from "../utils/setContextPosition";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
+interface PopoverContentContextualProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The content that is displayed for a Popover when it is open, displayed at the
  * position that the user right-clicked.
  */
-export default function PopoverContentContextual($props: any) {	
-	let div: HTMLDivElement;
+export default function PopoverContentContextual($props: PopoverContentContextualProps) {	
+	$props ??= $watch({});
 
+	let div: HTMLDivElement;
+	let shown = false;
 	let closeOnClick = false;
 
 	// Get stuff out of the PopoverContext
@@ -20,42 +29,45 @@ export default function PopoverContentContextual($props: any) {
 	}
 	let $state = context.state;
 
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
 
-		if (first) {
-			first = false;
-			return;
+		// HACK: Because this Contextual 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);
+
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
+
+	function hide() {
+		if (!shown) return;
 
-		if (visible) {
-			// HACK: Because this Contextual 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);
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			setPosition();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.addEventListener("resize", setPosition);
-			scrollParent.addEventListener("scroll", setPosition);
-		} else {
-			removeDocumentEvent("mousedown", handleDocumentMouseDown);
-			removeDocumentEvent("click", handleDocumentClick);
-			// Stop listening for window resize and focus the anchor element per WAI guidelines
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.removeEventListener("resize", setPosition);
-			scrollParent.removeEventListener("scroll", setPosition);
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function handleDocumentMouseDown() {
 		closeOnClick = true;
@@ -77,7 +89,7 @@ export default function PopoverContentContextual($props: any) {
 			throw new Error("ContextualContent must have an anchor element");
 		}
 
-		if (div && $state.position) {
+		if ($state.position) {
 			setContextPosition(context.anchorElement, div, $state.position);
 		}
 	}
@@ -85,12 +97,12 @@ export default function PopoverContentContextual($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-popover-content-contextual ${$props.class ?? ""}`.trim()}
 				&ref={div}
-				:onmount={(el) => setContextPosition(context.anchorElement, el, $state.position)}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/src/Popover/PopoverOverlay.torp

@@ -1,10 +1,19 @@
 import { disableScroll } from "../mount/disableScroll";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
+interface PopoverOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
  */
-export default function PopoverOverlay($props: any) {
+export default function PopoverOverlay($props: PopoverOverlayProps) {
+	$props ??= $watch({});
+
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
 	if (!context) {
@@ -18,12 +27,12 @@ export default function PopoverOverlay($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-popover-overlay ${$props.class ?? ""}`.trim()}
 				tabindex="-1"
-				:onmount={(el) => disableScroll(el)}
+				onmount={(el) => disableScroll(el)}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/src/Popover/PopoverTrigger.torp

@@ -1,9 +1,18 @@
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
+interface PopoverTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The button that causes a Popover to appear or disappear.
  */
-export default function PopoverTrigger($props: any) {
+export default function PopoverTrigger($props: PopoverTriggerProps) {
+	$props ??= $watch({});
+
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
 	if (!context) {
@@ -18,12 +27,12 @@ export default function PopoverTrigger($props: any) {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
 			onclick={handleClick}
 			&ref={context.anchorElement}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/Popover/PopoverTriggerContextual.torp

@@ -1,9 +1,18 @@
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
+interface PopoverTriggerContextualProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The element that causes a Popover to appear or disappear when right-clicked.
  */
-export default function PopoverTriggerContextual($props: any) {
+export default function PopoverTriggerContextual($props: PopoverTriggerContextualProps) {
+	$props ??= $watch({});
+
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
 	if (!context) {
@@ -26,12 +35,12 @@ export default function PopoverTriggerContextual($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover-trigger-contextual ${$props.class ?? ""}`.trim()}
 			oncontextmenu={handleContextual}
 			&ref={context.anchorElement}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Popover/PopoverTriggerHover.torp

@@ -2,10 +2,19 @@
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 import hoverTrigger from "../mount/hoverTrigger";
 
+interface PopoverTriggerHoverProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The div that causes a Popover to appear or disappear when hovered.
  */
-export default function PopoverTriggerHover($props: any) {
+export default function PopoverTriggerHover($props: PopoverTriggerHoverProps) {
+	$props ??= $watch({});
+
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
 	if (!context) {
@@ -13,7 +22,7 @@ export default function PopoverTriggerHover($props: any) {
 	}
 	let $state = context.state;
 
-	function handleHover(node, e) {
+	function handleHover(node: HTMLElement, e: TouchEvent | MouseEvent) {
 		if ($state.position) {
 			// Get the position relative to the element, so we can reposition on scroll
 			const rect = node.getBoundingClientRect();
@@ -27,12 +36,12 @@ export default function PopoverTriggerHover($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover-trigger-hover ${$props.class ?? ""}`.trim()}
-			:onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
+			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Slider/Slider.torp

@@ -0,0 +1,83 @@
+export default function Slider() {
+	//export let value = 0;
+	//export let total = 0;
+
+	let position = 0;
+	let dragging = false;
+	let background: HTMLElement;
+	let handle: HTMLElement;
+	let skipRecalc = false;
+
+	$mount(() => {
+		calculatePosition();
+	});
+
+	beforeUpdate(() => {
+		if (background && handle) {
+			if (skipRecalc) {
+				skipRecalc = false;
+			} else {
+				calculatePosition();
+			}
+		}
+	});
+
+	function calculatePosition() {
+		// Calculate the initial handle position
+		const handleRect = handle.getBoundingClientRect();
+		const backgroundRect = background.getBoundingClientRect();
+		const offsetX = (value / total) * backgroundRect.width;
+		position = offsetX - handleRect.width / 2;
+	}
+
+	function handleMouseDown() {
+		dragging = true;
+	}
+
+	function handleMouseUp() {
+		dragging = false;
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!e.buttons) {
+			dragging = false;
+		}
+
+		if (dragging) {
+			const handleRect = handle.getBoundingClientRect();
+			const backgroundRect = background.getBoundingClientRect();
+			let offsetX = e.clientX - backgroundRect.left;
+
+			const minWidth = handleRect.width / 2;
+			const maxWidth = backgroundRect.width - handleRect.width / 2;
+
+			if (offsetX < minWidth) {
+				offsetX = minWidth;
+				value = 0;
+			} else if (offsetX > maxWidth) {
+				offsetX = maxWidth;
+				value = total;
+			} else {
+				const width = backgroundRect.width - handleRect.width;
+				value = Math.floor((total / width) * offsetX);
+			}
+
+			position = offsetX - handleRect.width / 2;
+		}
+
+		// Don't recalc with the value change - we know where everything should be
+		skipRecalc = true;
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-slider ${$props.class ?? ""}`.trim()}
+			onmousemove={handleMouseMove}
+			onmouseup={handleMouseUp}
+		>
+			<div &ref={background} />
+			<div &ref={handle} style={`left: ${position}px;`} onmousedown={handleMouseDown} />
+		</div>
+	}
+}

package/src/Slider/index.ts

@@ -0,0 +1,3 @@
+import Slider from "./Slider.torp";
+
+export { Slider };

package/src/TabGroup/TabContent.torp

@@ -1,35 +1,41 @@
 import getId from "../utils/getId";
 import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
 
+interface TabContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
- *
- * @prop {string} [id] -- An ID for the TabContent's div container
  */
-export default function TabContent($props: any) {
+export default function TabContent($props: TabContentProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabContent must be contained within a TabGroup");
 	}
-	let $state = $context[TabGroupContextName].registerItem($props.index, $props.value);
+	let $state = context.registerItem($props.index, $props.value);
 
 	// Set the content ID so that it can be used with aria-controls in TabTrigger
 	$state.contentId = $props.id;
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-content ${$props.class ?? ""}`.trim()}
 			role="tabpanel"
 			aria-labelledby={$state.headerId}
 			data-orientation={$props.orientation}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.active) {
-				<:slot />
+				<slot />
 			}
 		</div>
 	}

package/src/TabGroup/TabGroup.torp

@@ -1,5 +1,22 @@
 import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
 
+interface TabGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** 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 | 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.
@@ -18,14 +35,9 @@ import { TabGroupContextName, type TabGroupContext, type ItemState } from "./Tab
  * 	<TabContent />
  * </TabGroup>
  * ```
- *
- * @prop {"horizontal" | "vertical"} orientation -- The orientation of the tab buttons, which affects keyboard navigation
- * @prop {"automatic" | "manual"} activation -- How tabs are activated; if automatic they are shown on focus, if manual they must be clicked
- * @prop {string | string[]} value -- The value of the active TabContent
- * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the TabGroup
- * @prop {(value: string | string[]) => void} [onchange] -- Raised when the active item has changed
  */
-export default function TabGroup($props: any) {
+export default function TabGroup($props: TabGroupProps) {
+	$props ??= $watch({});
 	$props.orientation ||= "horizontal";
 	$props.activation ||= "automatic";
 	$props.value ||= "";
@@ -63,7 +75,7 @@ export default function TabGroup($props: any) {
 	});
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+		itemStates.forEach((s) => s.parentDisabled = $props.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
@@ -74,7 +86,7 @@ export default function TabGroup($props: any) {
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
-			ev(value);
+			ev(value!);
 		}
 	});
 
@@ -218,11 +230,11 @@ export default function TabGroup($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-group ${$props.class ?? ""}`.trim()}
 			data-orientation={$props.orientation}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/TabGroup/TabHeader.torp

@@ -1,5 +1,14 @@
 import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
 
+interface TabHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
@@ -10,15 +19,15 @@ import { TabGroupContextName, TabItemContextName, type TabGroupContext, type Tab
  * 	<TabTrigger />
  * </TabHeader>
  * ```
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function TabHeader($props: any) {
+export default function TabHeader($props: TabHeaderProps) {
+	$props ??= $watch({});
+
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabHeader must be contained within a TabGroup");
 	}
-	let $state = $context[TabGroupContextName].registerHeader($props.index, $props.value);
+	let $state = context.registerHeader($props.index, $props.value);
 
 	const itemContext: TabItemContext = {
 		triggerItem: context.triggerItem,
@@ -37,16 +46,16 @@ export default function TabHeader($props: any) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			id={$props.id}
+			{$props.id}
 			class={[
 				"torp-tab-header",
 				$props.class,
 				$state.orientation
 			]}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}