@torpor/ui 0.3.7 → 1.0.0

package/dist/Chart/LineChart.torp

@@ -1,196 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-import XAxis from "./XAxis.torp";
-import YAxis from "./YAxis.torp";
-import GridLines from "./GridLines.torp";
-import {
-	calculateMaxValue,
-	calculateStepValue,
-	calculateStepLabels,
-	calculateItemWidth,
-	calculateValueHeight,
-	calculateChartBottom,
-	calculateChartLeft
-} from "../utils/chartUtils";
-import { chartColors } from "../utils/chartColors";
-
-import type DataSeries from "./DataSeries";
-
-interface LineChartProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	series: DataSeries[],
-	height?: number,
-	width?: number,
-	xLabel?: string,
-	yLabel?: string,
-	maxValue?: number,
-	stepCount?: number,
-	stepValue?: number,
-	showPoints?: boolean,
-	hideXAxis?: boolean,
-	hideYAxis?: boolean,
-	showHLines?: boolean,
-	showVLines?: boolean,
-}
-
-export default function LineChart($props: LineChartProps) {
-	const defaultHeight = 200;
-	const defaultWidth = 400;
-
-	let container: HTMLElement;
-	let measurer: SVGTextElement;
-
-	let $state = $watch({
-		textWidth: 0,
-		textHeight: 0,
-		get labels() {
-			return $props.series.map((s) => s.name);
-		},
-		get calculatedHeight() { 
-			return $props.height || defaultHeight;
-		},
-		get calculatedWidth() {
-			return $props.width || container?.clientWidth || defaultWidth;
-		},
-		get maxValue() {
-			return $props.maxValue || calculateMaxValue($props.series);
-		},
-		get calculatedStepValue() {
-			return $props.stepValue || calculateStepValue($state.maxValue, $props.stepCount);
-		},
-		get stepLabels() {
-			return calculateStepLabels($props.stepCount || 2, $state.calculatedStepValue);
-		},
-		get itemWidth() {
-			return calculateItemWidth($state.calculatedWidth, $state.chartLeft, $state.labels);
-		},
-		get valueHeight() {
-			return calculateValueHeight($state.chartBottom, $state.textHeight, $state.calculatedStepValue, $props.stepCount || 2);
-		},
-		get chartBottom() {
-			return calculateChartBottom($props.xLabel ?? "", $state.calculatedHeight, $state.textHeight);
-		},
-		get chartLeft() {
-			return calculateChartLeft($state.stepLabels, $props.yLabel ?? "", $state.textHeight, $state.textWidth);
-		},
-		get pointSeries() {
-			return buildPointSeries(
-				$props.series,
-				$state.chartLeft,
-				$state.chartBottom,
-				$state.itemWidth,
-				$state.valueHeight
-			);
-		}
-	});
-
-	$mount(() => {
-		// HACK: Wait until the measurer is really available
-		setTimeout(() => {
-			const bbox = measurer.getBBox();
-			$state.textWidth = bbox.width;
-			$state.textHeight = bbox.height * 1.5;
-			measurer.remove();
-		}, 1);
-	});
-
-	function buildPointSeries(
-		theSeries: DataSeries[],
-		theChartLeft: number,
-		theChartBottom: number,
-		theItemWidth: number,
-		theValueHeight: number
-	): { x: number; y: number }[][] {
-		return theSeries.map((series) => {
-			return series.data.map((value, i) => {
-				const x = +(theChartLeft + i * theItemWidth + theItemWidth / 2).toFixed(2);
-				const y = +(theChartBottom - value * theValueHeight).toFixed(2);
-				return { x, y };
-			});
-		});
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-line-chart", $props?.class]}
-			{$props?.style}
-			&ref={container}
-		>
-			<svg version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight}>
-				<g>
-				 	<text &ref={measurer} x="-999" y="-999">8</text>
-
-					@if ($state.textWidth && $state.textHeight) {
-						<XAxis
-							showAxis={!$props.hideXAxis}
-							height={$state.calculatedHeight}
-							width={$state.calculatedWidth}
-							{$state.itemWidth}
-							{$state.textHeight}
-							xLabel={$props.xLabel ?? ""}
-							{$state.labels}
-							stepLabels={[]}
-							stepValue={0}
-							{$state.chartLeft}
-							{$state.chartBottom}
-						/>
-						<YAxis
-							showAxis={!$props.hideYAxis}
-							{$state.valueHeight}
-							{$state.textHeight}
-							yLabel={$props.yLabel ?? ""}
-							{$state.stepLabels}
-							stepValue={$state.calculatedStepValue}
-							{$state.chartLeft}
-							{$state.chartBottom}
-						/>
-						<GridLines
-							{$props.showHLines}
-							{$props.showVLines}
-							width={$state.calculatedWidth}
-							{$state.labels}
-							xStepValue={0}
-							xStepLabels={[]}
-							yStepValue={$state.calculatedStepValue}
-							yStepLabels={[]}
-							{$state.stepLabels}
-							{$state.itemWidth}
-							{$state.valueHeight}
-							{$state.chartLeft}
-							{$state.chartBottom}
-							type="line"
-						/>
-						@for (let [i, series] of $props.series.entries()) {
-							<polyline
-								points={$state.pointSeries[i].map((p) => `${p.x},${p.y}`).join(" ")}
-								stroke={series.color || chartColors[i % chartColors.length]}
-								stroke-width="2"
-								fill="none"
-							/>
-							@if ($props.showPoints) {
-								@for (let [j, point] of $state.pointSeries[i].entries()) {
-									<circle
-										cx={point.x}
-										cy={point.y}
-										r="4"
-										stroke={series.color || chartColors[i % chartColors.length]}
-										stroke-width="2"
-										fill="white"
-									>
-										<title>{`${[series.name, $state.labels[j], series.data[j]].filter(Boolean).join("\n")}`}</title>
-									</circle>
-								}
-							}
-						}
-					}
-				</g>
-			</svg>
-		</div>
-	}
-}

package/dist/Chart/index.d.ts

@@ -1,220 +0,0 @@
-import { type SlotRender } from "@torpor/view";
-
-
-interface BarChartProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	series: DataSeries[],
-	height?: number,
-	width?: number,
-	xLabel?: string,
-	yLabel?: string,
-	maxValue?: number,
-	stepCount?: number,
-	stepValue?: number,
-	hideXAxis?: boolean,
-	hideYAxis?: boolean,
-	showHLines?: boolean,
-	showVLines?: boolean,
-}
-
-declare function BarChart(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: BarChartProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface GridLinesProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	showHLines?: boolean,
-	showVLines?: boolean,
-	width: number;
-	labels: string[];
-	xStepValue: number;
-	xStepLabels: number[];
-	yStepValue: number;
-	yStepLabels: number[];
-	itemWidth: number;
-	valueHeight: number;
-	chartLeft: number;
-	chartBottom: number;
-	type: string;
-}
-
-declare function GridLines(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: GridLinesProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface LineChartProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	series: DataSeries[],
-	height?: number,
-	width?: number,
-	xLabel?: string,
-	yLabel?: string,
-	maxValue?: number,
-	stepCount?: number,
-	stepValue?: number,
-	showPoints?: boolean,
-	hideXAxis?: boolean,
-	hideYAxis?: boolean,
-	showHLines?: boolean,
-	showVLines?: boolean,
-}
-
-declare function LineChart(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: LineChartProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface PieChartProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	data: PieData[],
-	size?: number,
-	radius?: number,
-	cutout?: number,
-}
-
-declare function PieChart(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: PieChartProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface ScatterChartProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	series: DataSeries[],
-	height?: number,
-	width?: number,
-	xLabel?: string,
-	yLabel?: string,
-	xStepCount?: number,
-	xStepValue?: number,
-	yStepCount?: number,
-	yStepValue?: number,
-	hideXAxis?: boolean,
-	hideYAxis?: boolean,
-	showHLines?: boolean,
-	showVLines?: boolean,
-}
-
-declare function ScatterChart(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: ScatterChartProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface SparkLineProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	data: number[];
-	color?: string,
-	height?: number,
-	width?: number,
-}
-
-declare function SparkLine(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: SparkLineProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface XAxisProps {
-	showAxis: boolean,
-	height: number,
-	width: number,
-	itemWidth: number,
-	textHeight: number,
-	xLabel: string,
-	labels: string[] ,
-	stepLabels:number[] ,
-	stepValue: number,
-	chartLeft: number,
-	chartBottom: number,
-}
-
-declare function XAxis(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: XAxisProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface YAxisProps {
-	showAxis: boolean,
-	valueHeight: number,
-	textHeight: number,
-	yLabel: string,
-	stepLabels: number[],
-	stepValue: number,
-	chartLeft: number,
-	chartBottom: number,
-}
-
-declare function YAxis(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: YAxisProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-export { BarChart, GridLines, LineChart, PieChart, ScatterChart, SparkLine, XAxis, YAxis };

package/dist/Chart/index.js

@@ -1,34 +0,0 @@
-// src/Chart/BarChart.torp
-import BarChart_default from "./BarChart.torp";
-
-// src/Chart/GridLines.torp
-import GridLines_default from "./GridLines.torp";
-
-// src/Chart/LineChart.torp
-import LineChart_default from "./LineChart.torp";
-
-// src/Chart/PieChart.torp
-import PieChart_default from "./PieChart.torp";
-
-// src/Chart/ScatterChart.torp
-import ScatterChart_default from "./ScatterChart.torp";
-
-// src/Chart/SparkLine.torp
-import SparkLine_default from "./SparkLine.torp";
-
-// src/Chart/XAxis.torp
-import XAxis_default from "./XAxis.torp";
-
-// src/Chart/YAxis.torp
-import YAxis_default from "./YAxis.torp";
-export {
-  BarChart_default as BarChart,
-  GridLines_default as GridLines,
-  LineChart_default as LineChart,
-  PieChart_default as PieChart,
-  ScatterChart_default as ScatterChart,
-  SparkLine_default as SparkLine,
-  XAxis_default as XAxis,
-  YAxis_default as YAxis
-};
-//# sourceMappingURL=index.js.map

package/dist/Chart/index.js.map

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

package/dist/Contextual/index.js.map

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

package/dist/Dialog/index.js.map

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

package/dist/Disclosure/index.js.map

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

package/dist/Drawer/index.js.map

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

package/dist/Form/index.js.map

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

package/dist/Menu/index.js.map

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

package/dist/MenuBar/index.js.map

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

package/dist/NavMenu/NavMenuPopoutButton.torp

@@ -1,129 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	NavMenuContextName,
-	NavMenuPopoutContextName,
-	type NavMenuContext,
-	type NavMenuPopoutContext,
-} from "./NavMenuTypes";
-
-interface NavMenuPopoutButtonProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The delay before showing the popout, in milliseconds */
-	hoverDelay?: number,
-	/** Whether this button is disabled */
-	disabled?: boolean,
-}
-
-/**
- * A button that is placed in a NavMenu and signals a response by a user.
- *
- */
-export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps | undefined) {
-	let defaultHoverDelay = 500;
-
-	let button: HTMLButtonElement;
-	let interval: NodeJS.Timeout | undefined;
-
-	// Get stuff out of the NavMenuContext
-	const menuContext = $context[NavMenuContextName] as NavMenuContext;
-	if (!menuContext) {
-		throw new Error("NavMenuPopoutButton must be contained within a NavMenu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Get stuff out of the NavMenuPopoutContext
-	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
-	if (!popoutContext) {
-		throw new Error("NavMenuPopoutButton must be contained within a NavMenuPopout");
-	}
-	let $state = popoutContext.state;
-
-	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
-
-	// TODO: $mount should be run AFTER the button has been set
-	//$mount(() => {
-	//	// Set the anchor element to the button when it exists
-	//	popoutContext.anchorElement = button;
-	//});
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		$state.visible = true;
-	}
-
-	function handlePopoutKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Right":
-			case "ArrowRight":
-				// TODO: This should be based on what side the menu shows on
-				e.preventDefault();
-				$state.visible = true;
-				break;
-			default:
-				handleItemKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		if ($props?.disabled) return;
-
-		// Handle the hover after a delay
-		if (!interval) {
-			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
-
-	function handleMouseLeave() {
-		if ($props?.disabled) return;
-
-		// Prevent short hovers or touches from firing the event
-		if (interval) {
-			clearTimeout(interval);
-			interval = undefined;
-		}
-	}
-
-	function handleMouseMove() {
-		if ($props?.disabled) return;
-
-		// Reset the interval on mouse move
-		if (interval) {
-			clearTimeout(interval);
-			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-nav-menu-popout-button", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
-			role="menuitem"
-			aria-haspopup="true"
-			aria-expanded={$state.visible.toString()}
-			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown={handlePopoutKey}
-			onclick={handleClick}
-			onfocus={() => handleItemFocus(index)}
-			onmouseenter={handleMouseEnter}
-			onmouseleave={handleMouseLeave}
-			onmousemove={handleMouseMove}
-			&ref={button}
-			onmount={(el) => popoutContext.anchorElement = el }
-		>
-			<slot />
-		</button>
-	}
-}

package/dist/NavMenu/index.js.map

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

package/dist/TabGroup/index.js.map

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

package/dist/icons/index.js.map

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

package/dist/index.d.ts

@@ -1,19 +0,0 @@
-import { Animation } from '@torpor/view';
-
-declare function fade(_el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
-
-declare function grow(el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
-
-/**
- * Measures an element before it is added to the DOM
- * @param el The element to measure
- * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
- */
-declare function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number;
-
-interface Options extends KeyframeAnimationOptions {
-    side: "left" | "right" | "top" | "bottom";
-}
-declare function slide(el: HTMLElement, options?: Options): Animation;
-
-export { fade, grow, measure, slide };