@heyramzi/ui 2.0.1 → 2.2.0

package/src/charts/dashboard/dashboard-empty.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// Not list-page's `EmptyState`: that one takes exactly one action, and a
-	// dashboard can be empty for reasons (nothing connected, nothing synced)
-	// that need two buttons.
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// Not list-page's `EmptyState`: that one takes exactly one action, and a
+		// dashboard can be empty for reasons (nothing connected, nothing synced)
+		// that need two buttons.
 
-	// The dashed edge marks truly empty, not loading.
-	icon?: PhosphorIcon;
-	title: string;
-	description?: string;
-	/** One or two buttons. Omit where there is nothing the reader can do. */
-	actions?: Snippet;
-	class?: string;
-};
+		// The dashed edge marks truly empty, not loading.
+		icon?: PhosphorIcon;
+		title: string;
+		description?: string;
+		/** One or two buttons. Omit where there is nothing the reader can do. */
+		actions?: Snippet;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { icon: Icon, title, description, actions, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { icon: Icon, title, description, actions, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/dashboard-section.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { ArrowRight } from "phosphor-svelte";
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ArrowRight } from "phosphor-svelte";
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	title: string;
-	/** One line on the right: a window, a provenance, a count. Never a sentence. */
-	note?: string;
-	/** The page that owns this area, when one page does. */
-	href?: string;
-	/** The link's wording. Translated at the call site. */
-	openLabel?: string;
-	children: Snippet;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** One line on the right: a window, a provenance, a count. Never a sentence. */
+		note?: string;
+		/** The page that owns this area, when one page does. */
+		href?: string;
+		/** The link's wording. Translated at the call site. */
+		openLabel?: string;
+		children: Snippet;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { title, note, href, openLabel = "Open", children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { title, note, href, openLabel = "Open", children, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/data-panel.svelte

@@ -1,56 +1,56 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
-import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-import { SectionLabel } from "../../components/list-page/index.js";
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
+	import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
+	import { SectionLabel } from "../../components/section-header/index.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** What this section of the dashboard is. Drawn as the app's one panel label. */
-	label: string;
-	labelIcon?: PhosphorIcon;
-	/**
-	 * A row count, total or freshness stamp. It's a prop, not an action,
-	 * because hand-placed hints ended up at three type sizes on one screen.
-	 */
-	hint?: string;
-	/** Controls that act on this panel. Pinned right, after the hint. */
-	actions?: Snippet;
-	/** A line under the label, for the scope a number was measured over. */
-	sublabel?: string;
-	/** Off for a body that supplies its own padding: a table, a full-bleed list. */
-	pad?: boolean;
-	/**
-	 * The body scrolls sideways rather than squeezing. For a wide table, which is
-	 * every table on a dashboard once the window is narrower than its columns.
-	 */
-	scroll?: boolean;
-	children: Snippet;
-	class?: string;
-	bodyClass?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** What this section of the dashboard is. Drawn as the app's one panel label. */
+		label: string;
+		labelIcon?: PhosphorIcon;
+		/**
+		 * A row count, total or freshness stamp. It's a prop, not an action,
+		 * because hand-placed hints ended up at three type sizes on one screen.
+		 */
+		hint?: string;
+		/** Controls that act on this panel. Pinned right, after the hint. */
+		actions?: Snippet;
+		/** A line under the label, for the scope a number was measured over. */
+		sublabel?: string;
+		/** Off for a body that supplies its own padding: a table, a full-bleed list. */
+		pad?: boolean;
+		/**
+		 * The body scrolls sideways rather than squeezing. For a wide table, which is
+		 * every table on a dashboard once the window is narrower than its columns.
+		 */
+		scroll?: boolean;
+		children: Snippet;
+		class?: string;
+		bodyClass?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	label,
-	labelIcon,
-	hint,
-	actions,
-	sublabel,
-	pad = true,
-	scroll = false,
-	children,
-	class: className,
-	bodyClass,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		label,
+		labelIcon,
+		hint,
+		actions,
+		sublabel,
+		pad = true,
+		scroll = false,
+		children,
+		class: className,
+		bodyClass,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/data-sort-head.svelte

@@ -1,68 +1,68 @@
 <script lang="ts">
-/*
- * A column head that sorts the table under it. Sort buttons above a table
- * never say which column they rank, and read as filter tabs.
- */
+	/*
+	 * A column head that sorts the table under it. Sort buttons above a table
+	 * never say which column they rank, and read as filter tabs.
+	 */
 
-// Every sortable head shows its caret, at 40%, solid on the active column.
-// Hover-only makes people hunt, and it shifts the label under the pointer.
+	// Every sortable head shows its caret, at 40%, solid on the active column.
+	// Hover-only makes people hunt, and it shifts the label under the pointer.
 
-// No padding of its own: it comes from the skin classes, so heads and cells
-// stay in line when a dense table tightens both.
+	// No padding of its own: it comes from the skin classes, so heads and cells
+	// stay in line when a dense table tightens both.
 
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { CaretDown, CaretUp } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { dataThClass, dataThNumClass } from "./data-table.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { CaretDown, CaretUp } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { dataThClass, dataThNumClass } from "./data-table.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** True when the table is currently ranked by this column. */
-	active: boolean;
-	/** Which way the active column runs. Ignored while inactive. */
-	descending: boolean;
-	/** Called on click and on Enter/Space. Toggling direction is the caller's. */
-	onSort: () => void;
-	/** Numbers right-align to their digits, so their caret leads the label. */
-	numeric?: boolean;
-	/** The long form of an abbreviated head, as the browser tooltip. */
-	title?: string;
-	class?: string;
-	children: Snippet;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** True when the table is currently ranked by this column. */
+		active: boolean;
+		/** Which way the active column runs. Ignored while inactive. */
+		descending: boolean;
+		/** Called on click and on Enter/Space. Toggling direction is the caller's. */
+		onSort: () => void;
+		/** Numbers right-align to their digits, so their caret leads the label. */
+		numeric?: boolean;
+		/** The long form of an abbreviated head, as the browser tooltip. */
+		title?: string;
+		class?: string;
+		children: Snippet;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	active,
-	descending,
-	onSort,
-	numeric = false,
-	title,
-	class: className,
-	children,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		active,
+		descending,
+		onSort,
+		numeric = false,
+		title,
+		class: className,
+		children,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-const ariaSort = $derived(active ? (descending ? "descending" : "ascending") : "none");
+	// =========================
+	// DERIVED
+	// =========================
+	const ariaSort = $derived(active ? (descending ? "descending" : "ascending") : "none");
 
-// =========================
-// FUNCTIONS
-// =========================
-function handleKeydown(event: KeyboardEvent) {
-	if (event.key === "Enter" || event.key === " ") {
-		event.preventDefault();
-		onSort();
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			onSort();
+		}
 	}
-}
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/data-table.svelte

@@ -1,159 +1,159 @@
 <script lang="ts" module>
-import type { Snippet } from "svelte";
+	import type { Snippet } from "svelte";
 
-/** Narrow screens drop the columns that only add detail. */
-export type DataColumnBreakpoint = "sm" | "md" | "lg";
+	/** Narrow screens drop the columns that only add detail. */
+	export type DataColumnBreakpoint = "sm" | "md" | "lg";
 
-/** One column after the lead. Give it `value`, `rating` or a `cell` snippet. */
-export type DataColumn<T> = {
-	key: string;
-	label: string;
-	/** The long form of the head, as its tooltip. */
-	hint?: string;
-	/** A Tailwind width class. Fixed widths are what keep the lead column wide. */
-	width: string;
-	/** Figures run to the end, so digits line up. Text, pills and bars start. */
-	align?: "start" | "end";
-	/** Makes the head rank the table. Higher is better; a new column starts descending. */
-	sort?: (row: T) => number;
-	/** Null draws the table's empty label, muted. */
-	value?: (row: T) => string | null;
-	rating?: (row: T) => { grade: string; hint?: string } | null;
-	cell?: Snippet<[T]>;
-	/** 0 to 1, a share-of-max track drawn before the value. */
-	bar?: (row: T) => number;
-	/** Cell tooltip. */
-	title?: (row: T) => string | undefined;
-	muted?: boolean | ((row: T) => boolean);
-	/** A loss, an overrun: the value turns the destructive colour. */
-	negative?: (row: T) => boolean;
-	/** The column the eye lands on first. */
-	strong?: boolean;
-	/** A hairline before this column, opening a group. */
-	rule?: boolean;
-	/** Hidden under this breakpoint. */
-	hideBelow?: DataColumnBreakpoint;
-};
+	/** One column after the lead. Give it `value`, `rating` or a `cell` snippet. */
+	export type DataColumn<T> = {
+		key: string;
+		label: string;
+		/** The long form of the head, as its tooltip. */
+		hint?: string;
+		/** A Tailwind width class. Fixed widths are what keep the lead column wide. */
+		width: string;
+		/** Figures run to the end, so digits line up. Text, pills and bars start. */
+		align?: "start" | "end";
+		/** Makes the head rank the table. Higher is better; a new column starts descending. */
+		sort?: (row: T) => number;
+		/** Null draws the table's empty label, muted. */
+		value?: (row: T) => string | null;
+		rating?: (row: T) => { grade: string; hint?: string } | null;
+		cell?: Snippet<[T]>;
+		/** 0 to 1, a share-of-max track drawn before the value. */
+		bar?: (row: T) => number;
+		/** Cell tooltip. */
+		title?: (row: T) => string | undefined;
+		muted?: boolean | ((row: T) => boolean);
+		/** A loss, an overrun: the value turns the destructive colour. */
+		negative?: (row: T) => boolean;
+		/** The column the eye lands on first. */
+		strong?: boolean;
+		/** A hairline before this column, opening a group. */
+		rule?: boolean;
+		/** Hidden under this breakpoint. */
+		hideBelow?: DataColumnBreakpoint;
+	};
 </script>
 
 <script lang="ts" generics="T">
-/*
- * The one data table: wide lead cell, fixed figure columns, sortable heads,
- * optional pager. A row opens by `rowHref` or `onRowClick`, stretched over the row from the lead.
- */
-import { cn } from "../../lib/utils.js";
-import DataSortHead from "./data-sort-head.svelte";
-import RatingChip from "./rating-chip.svelte";
-import { Pagination, paginateRows, totalPages } from "../../components/data-table/index.js";
-import {
-	dataTableClass,
-	dataTdClass,
-	dataTdNumClass,
-	dataThClass,
-	dataThNumClass,
-	dataTheadClass,
-	dataTrClass,
-} from "./data-table.js";
+	/*
+	 * The one data table: wide lead cell, fixed figure columns, sortable heads,
+	 * optional pager. A row opens by `rowHref` or `onRowClick`, stretched over the row from the lead.
+	 */
+	import { cn } from "../../lib/utils.js";
+	import DataSortHead from "./data-sort-head.svelte";
+	import RatingChip from "./rating-chip.svelte";
+	import { Pagination, paginateRows, totalPages } from "../../components/data-table/index.js";
+	import {
+		dataTableClass,
+		dataTdClass,
+		dataTdNumClass,
+		dataThClass,
+		dataThNumClass,
+		dataTheadClass,
+		dataTrClass,
+	} from "./data-table.js";
 
-interface Props {
-	rows: T[];
-	columns: DataColumn<T>[];
-	rowKey: (row: T) => string;
-	leadLabel: string;
-	lead: Snippet<[T]>;
-	/** Drawn where a value or rating is null. */
-	emptyLabel: string;
-	/** A Tailwind width class. Omit and the lead takes whatever the figures leave. */
-	leadWidth?: string;
-	/** A Tailwind min-width class, past which the panel scrolls sideways. */
-	minWidth?: string;
-	/** Omit for every row on one page. */
-	pageSize?: number;
-	sortKey?: string | null;
-	descending?: boolean;
-	page?: number;
-	/** The row opens a page. The lead becomes the link. */
-	rowHref?: (row: T) => string;
-	/** The row opens in place: a panel, a detail view. The lead becomes the button. */
-	onRowClick?: (row: T) => void;
-	/** Placeholder rows while the data is on its way. */
-	loading?: boolean;
-	/** Drawn in place of the body when there are no rows. */
-	empty?: Snippet;
-};
+	interface Props {
+		rows: T[];
+		columns: DataColumn<T>[];
+		rowKey: (row: T) => string;
+		leadLabel: string;
+		lead: Snippet<[T]>;
+		/** Drawn where a value or rating is null. */
+		emptyLabel: string;
+		/** A Tailwind width class. Omit and the lead takes whatever the figures leave. */
+		leadWidth?: string;
+		/** A Tailwind min-width class, past which the panel scrolls sideways. */
+		minWidth?: string;
+		/** Omit for every row on one page. */
+		pageSize?: number;
+		sortKey?: string | null;
+		descending?: boolean;
+		page?: number;
+		/** The row opens a page. The lead becomes the link. */
+		rowHref?: (row: T) => string;
+		/** The row opens in place: a panel, a detail view. The lead becomes the button. */
+		onRowClick?: (row: T) => void;
+		/** Placeholder rows while the data is on its way. */
+		loading?: boolean;
+		/** Drawn in place of the body when there are no rows. */
+		empty?: Snippet;
+	}
 
-let {
-	rows,
-	columns,
-	rowKey,
-	leadLabel,
-	lead,
-	emptyLabel,
-	leadWidth,
-	minWidth = "min-w-[48rem]",
-	pageSize,
-	sortKey = $bindable(null),
-	descending = $bindable(true),
-	page = $bindable(1),
-	rowHref,
-	onRowClick,
-	loading = false,
-	empty,
-}: Props = $props();
+	let {
+		rows,
+		columns,
+		rowKey,
+		leadLabel,
+		lead,
+		emptyLabel,
+		leadWidth,
+		minWidth = "min-w-[48rem]",
+		pageSize,
+		sortKey = $bindable(null),
+		descending = $bindable(true),
+		page = $bindable(1),
+		rowHref,
+		onRowClick,
+		loading = false,
+		empty,
+	}: Props = $props();
 
-const pad = "px-3";
-const LOADING_ROWS = 5;
+	const pad = "px-3";
+	const LOADING_ROWS = 5;
 
-// Literal classes, so Tailwind sees each one.
-const HIDE_BELOW: Record<DataColumnBreakpoint, string> = {
-	sm: "hidden sm:table-cell",
-	md: "hidden md:table-cell",
-	lg: "hidden lg:table-cell",
-};
+	// Literal classes, so Tailwind sees each one.
+	const HIDE_BELOW: Record<DataColumnBreakpoint, string> = {
+		sm: "hidden sm:table-cell",
+		md: "hidden md:table-cell",
+		lg: "hidden lg:table-cell",
+	};
 
-// The ::after covers the whole row, so any cell opens it and the lead stays the one tab stop.
-const stretch =
-	"text-left outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-ring";
+	// The ::after covers the whole row, so any cell opens it and the lead stays the one tab stop.
+	const stretch =
+		"text-left outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-ring";
 
-const sorted = $derived.by(() => {
-	const by = columns.find((column) => column.key === sortKey)?.sort;
-	if (!by) return rows;
-	const direction = descending ? -1 : 1;
-	return [...rows].sort((left, right) => (by(left) - by(right)) * direction);
-});
+	const sorted = $derived.by(() => {
+		const by = columns.find((column) => column.key === sortKey)?.sort;
+		if (!by) return rows;
+		const direction = descending ? -1 : 1;
+		return [...rows].sort((left, right) => (by(left) - by(right)) * direction);
+	});
 
-const visible = $derived(pageSize ? paginateRows(sorted, page, pageSize) : sorted);
-const opens = $derived(Boolean(rowHref || onRowClick));
+	const visible = $derived(pageSize ? paginateRows(sorted, page, pageSize) : sorted);
+	const opens = $derived(Boolean(rowHref || onRowClick));
 
-// Fewer rows than the page you stand on would draw an empty table.
-$effect(() => {
-	if (!pageSize) return;
-	const last = totalPages(sorted.length, pageSize);
-	if (page > last) page = last;
-});
+	// Fewer rows than the page you stand on would draw an empty table.
+	$effect(() => {
+		if (!pageSize) return;
+		const last = totalPages(sorted.length, pageSize);
+		if (page > last) page = last;
+	});
 
-function rankBy(key: string) {
-	page = 1;
-	if (sortKey === key) {
-		descending = !descending;
-		return;
+	function rankBy(key: string) {
+		page = 1;
+		if (sortKey === key) {
+			descending = !descending;
+			return;
+		}
+		sortKey = key;
+		descending = true;
 	}
-	sortKey = key;
-	descending = true;
-}
 
-function isMuted(column: DataColumn<T>, row: T) {
-	return typeof column.muted === "function" ? column.muted(row) : Boolean(column.muted);
-}
+	function isMuted(column: DataColumn<T>, row: T) {
+		return typeof column.muted === "function" ? column.muted(row) : Boolean(column.muted);
+	}
 
-function columnClass(column: DataColumn<T>) {
-	return cn(
-		pad,
-		column.align === "start" && "text-left",
-		column.rule && "border-l border-border",
-		column.hideBelow && HIDE_BELOW[column.hideBelow],
-	);
-}
+	function columnClass(column: DataColumn<T>) {
+		return cn(
+			pad,
+			column.align === "start" && "text-left",
+			column.rule && "border-l border-border",
+			column.hideBelow && HIDE_BELOW[column.hideBelow],
+		);
+	}
 </script>
 
 <table class={cn(dataTableClass, minWidth, "table-fixed")}>