@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/data/LinkListItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Where the title links to; resolved through the components context. */
+    href: string;
+    /** The linked title; rendered as a heading when `headingLevel` is set. */
+    title: string;
+    /** A line of context under the title — an owner, a parent, a date. */
+    subtitle?: string | undefined;
+    /** Short markers rendered as badges. */
+    badges?: readonly string[] | undefined;
+    /** Render the title as a real heading at this level. */
+    headingLevel?: HeadingLevel | undefined;
+    /** Extra detail under the subtitle — formatted dates, counts, a second link. */
+    meta?: Snippet<[]> | undefined;
+}
+/** The row body most lists want: a linked title, a line of context under it, and short badges. */
+declare const LinkListItem: import("svelte").Component<Props, {}, "">;
+type LinkListItem = ReturnType<typeof LinkListItem>;
+export default LinkListItem;

package/dist/data/MessageThread.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+A conversation: a named region holding an ordered list of `ChatBubble`s.
+-->
+<!--
+  MessageThread — comments on a planting, a support thread, a note from the
+  garden coordinator. A `<section aria-label>` (a `region` a reader can jump
+  to) around an `<ol>`, because order is the content. Its children are
+  `ChatBubble`s, each an `<li>`.
+
+  `live` is for a thread that grows while it is read (live chat): the
+  section becomes `role="log"`, which announces appended messages politely.
+  Off by default, because a static comment history must not read itself
+  out as it renders.
+-->
+<script lang="ts">let { label, live = false, children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<section
+  {...rest}
+  aria-label={label}
+  role={live ? 'log' : undefined}
+  aria-live={live ? 'polite' : undefined}
+  class={className}
+>
+  <ol class="flex list-none flex-col gap-1 p-0">
+    {@render children()}
+  </ol>
+</section>

package/dist/data/MessageThread.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Accessible name, e.g. `'Comments on Bed 4'`. */
+    label: string;
+    /**
+     * Announce new messages as they arrive (`role="log"`).
+     * @defaultValue `false`
+     */
+    live?: boolean | undefined;
+    /** The `ChatBubble`s, oldest first. */
+    children: Snippet<[]>;
+}
+/** A conversation: a named region holding an ordered list of `ChatBubble`s. */
+declare const MessageThread: import("svelte").Component<Props, {}, "">;
+type MessageThread = ReturnType<typeof MessageThread>;
+export default MessageThread;

package/dist/data/Pagination.svelte

@@ -0,0 +1,136 @@
+<!-- @component
+Offset-based page navigation: numbered links with gaps or a bare Previous/Next pair, as links (`href`) or callbacks (`onPage`).
+-->
+<!--
+  Pagination — one component for the five pagers the four apps had grown:
+  numbered page links with gaps, a bare Previous/Next pair, the link form and
+  the callback form.
+
+  Two axes, and that is the whole design. `variant` chooses how much is
+  drawn — `window` renders first / last / the current page's neighbours,
+  `prevNext` renders the two arms and nothing else, which is what a listing
+  that only knows "there is more" can honestly offer. `href` versus `onPage`
+  chooses what the controls ARE: given `href` they are real links, which keeps
+  Ctrl-click, middle-click and "copy link address" and works with no
+  JavaScript at all; given `onPage` they are buttons, for a pager over state
+  the URL does not carry. `href` wins when both are passed.
+
+  ARIA contract: a `<nav>` named by `label`, holding a list of controls. The
+  arms carry `rel="prev"` / `rel="next"`. An unavailable arm is an
+  `aria-disabled` `<span>` — never a link to nowhere, and never removed, since
+  a pager whose Previous disappears on page one slides Next under the reader's
+  cursor. The current page is a `<span>` with `aria-current="page"` rather
+  than a link to where you already are; every numbered control is named
+  "Page 8" through `pageLabel`, because a bare digit is not an accessible
+  name; and the gap marker is `aria-hidden`, because "…" is not information.
+
+  In `window` mode a single page renders nothing at all — there is nothing to
+  navigate — unless `showRange` asked for the range line, which is a fact
+  about the result and still true. In `prevNext` mode both arms stay, disabled:
+  that variant is drawn by a caller that wants its control bar to hold place.
+-->
+<script lang="ts">import { ChevronLeft, ChevronRight } from "@lucide/svelte";
+import { getComponentsContext } from "../context.svelte.js";
+import { buttonSize } from "../ui/tones.js";
+import { pageWindow } from "./pagination.js";
+let { offset, limit, total, variant = "window", href, onPage, siblings = 1, label = "Pagination", previousLabel = "Previous", nextLabel = "Next", pageLabel = (page) => `Page ${page}`, formatPage = (page) => String(page), size = "sm", showRange = false, rangeLabel, statusLabel, locales = getComponentsContext().locale(), class: className, ...rest } = $props();
+const context = getComponentsContext();
+const view = $derived(pageWindow({
+	offset,
+	limit
+}, total, siblings));
+// The formatter and the formatted string are separate `$derived`s so the
+// (relatively expensive) `Intl.NumberFormat` is not rebuilt when only the
+// offset moves. Counts are quantities and get grouped; the page NUMBERS
+// below are identifiers and stay bare unless `formatPage` says otherwise.
+const counts = $derived(new Intl.NumberFormat(locales));
+const rangeText = $derived(rangeLabel === undefined ? `Showing ${counts.format(view.from)}–${counts.format(view.to)} of ${counts.format(total)}` : rangeLabel(view.from, view.to, total));
+/** A target offset's href, resolved through the context. */
+const linkTo = (target) => href === undefined ? undefined : context.href(href(target));
+const itemClass = $derived(["btn join-item", buttonSize[size]]);
+const inertClass = $derived(["btn btn-disabled join-item", buttonSize[size]]);
+</script>
+
+{#snippet armBody(text: string, leading: boolean)}
+  {#if leading}<ChevronLeft class="size-4" aria-hidden="true" />{/if}
+  <span>{text}</span>
+  {#if !leading}<ChevronRight class="size-4" aria-hidden="true" />{/if}
+{/snippet}
+
+{#snippet arm(target: number | undefined, text: string, rel: 'prev' | 'next', leading: boolean)}
+  <li>
+    {#if target === undefined}
+      <span class={inertClass} aria-disabled="true">{@render armBody(text, leading)}</span>
+    {:else if href !== undefined}
+      <a href={linkTo(target)} {rel} class={itemClass}>{@render armBody(text, leading)}</a>
+    {:else}
+      <button
+        type="button"
+        class={itemClass}
+        onclick={() => {
+          onPage?.(target);
+        }}
+      >
+        {@render armBody(text, leading)}
+      </button>
+    {/if}
+  </li>
+{/snippet}
+
+{#if variant === 'prevNext' || view.pageCount > 1}
+  <nav
+    {...rest}
+    aria-label={label}
+    class={['flex flex-col items-center gap-2 sm:flex-row sm:justify-between', className]}
+  >
+    {#if showRange}
+      <p class="text-base-content/70 text-sm tabular-nums">{rangeText}</p>
+    {/if}
+    <ul class="join">
+      {@render arm(view.previous, previousLabel, 'prev', true)}
+      {#if variant === 'prevNext'}
+        {#if statusLabel !== undefined}
+          <li>
+            <span class={['btn btn-ghost join-item pointer-events-none', buttonSize[size]]}>
+              {statusLabel(view.page, view.pageCount)}
+            </span>
+          </li>
+        {/if}
+      {:else}
+        {#each view.items as item (item.kind === 'page' ? item.page : `gap-${item.after}`)}
+          <li>
+            {#if item.kind === 'gap'}
+              <span class={inertClass} aria-hidden="true">…</span>
+            {:else if item.current}
+              <span class={['btn btn-active join-item', buttonSize[size]]} aria-current="page">
+                <span class="sr-only">{pageLabel(item.page)}</span>
+                <span aria-hidden="true">{formatPage(item.page)}</span>
+              </span>
+            {:else if href !== undefined}
+              <a href={linkTo(item.offset)} class={itemClass} aria-label={pageLabel(item.page)}>
+                <span aria-hidden="true">{formatPage(item.page)}</span>
+              </a>
+            {:else}
+              <button
+                type="button"
+                class={itemClass}
+                aria-label={pageLabel(item.page)}
+                onclick={() => {
+                  onPage?.(item.offset);
+                }}
+              >
+                <span aria-hidden="true">{formatPage(item.page)}</span>
+              </button>
+            {/if}
+          </li>
+        {/each}
+      {/if}
+      {@render arm(view.next, nextLabel, 'next', false)}
+    </ul>
+  </nav>
+{:else if showRange}
+  <!-- One page, so there is nothing to navigate — but the range line is a
+       fact about the result, not about the pager, and stays. A <nav> around
+       it alone would be a landmark with no controls in it. -->
+  <p {...rest} class={['text-base-content/70 text-sm tabular-nums', className]}>{rangeText}</p>
+{/if}

package/dist/data/Pagination.svelte.d.ts

@@ -0,0 +1,79 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Size } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** The offset the current page was rendered with. */
+    offset: number;
+    /** The page size the current page was rendered with. */
+    limit: number;
+    /** The unpaged total across every page. */
+    total: number;
+    /**
+     * `window` renders numbered page links with gaps; `prevNext` a bare Previous/Next pair.
+     * @defaultValue `'window'`
+     */
+    variant?: 'window' | 'prevNext' | undefined;
+    /**
+     * Build the link for a target offset. Preserving the page's own query
+     * parameters is the caller's job — `pageHref` does it for a JSON:API
+     * URL — and the result is resolved through the components context.
+     */
+    href?: ((offset: number) => string) | undefined;
+    /** Page without navigating. Ignored when `href` is given. */
+    onPage?: ((offset: number) => void) | undefined;
+    /**
+     * Pages rendered either side of the current one.
+     * @defaultValue `1`
+     */
+    siblings?: number | undefined;
+    /**
+     * The navigation landmark's accessible name.
+     * @defaultValue `'Pagination'`
+     */
+    label?: string | undefined;
+    /**
+     * Text of the previous-page control.
+     * @defaultValue `'Previous'`
+     */
+    previousLabel?: string | undefined;
+    /**
+     * Text of the next-page control.
+     * @defaultValue `'Next'`
+     */
+    nextLabel?: string | undefined;
+    /**
+     * How a numbered control is named — its digit alone is not a name.
+     * @defaultValue `"Page <page>"`
+     */
+    pageLabel?: ((page: number) => string) | undefined;
+    /**
+     * How a page number is written on its control — the visible digits only;
+     * `pageLabel` is the accessible name. Page numbers are identifiers, so they
+     * are bare by default; pass e.g. `(page) => new Intl.NumberFormat('en-AU').format(page)`
+     * to group them ("1,000").
+     * @defaultValue `String(page)`
+     */
+    formatPage?: ((page: number) => string) | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'sm'`
+     */
+    size?: Size | undefined;
+    /** Print the range line ("Showing 41–60 of 151"). */
+    showRange?: boolean | undefined;
+    /**
+     * The range line when `showRange`.
+     * @defaultValue `"Showing <start>–<end> of <total>"`
+     */
+    rangeLabel?: ((start: number, end: number, total: number) => string) | undefined;
+    /** Text between the two arms in `prevNext` mode ("Page 2 of 8"). */
+    statusLabel?: ((page: number, pages: number) => string) | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** Offset-based page navigation: numbered links with gaps or a bare Previous/Next pair, as links (`href`) or callbacks (`onPage`). */
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/data/PaginationFooter.svelte

@@ -0,0 +1,42 @@
+<!-- @component
+The count line and the pager that sit under a paginated index page.
+-->
+<!--
+  PaginationFooter — what sits under a paginated index page: the count, and
+  the pager.
+
+  The two always travel together, and rendering them separately at each call
+  site meant the same dozen lines in every listing — a dozen lines in which
+  the limit, the offset and the total are threaded through twice and can
+  disagree. Here they come from one set of props, so they cannot.
+
+  `ResultCount` and `Pagination` stay exported on their own: a page that shows
+  a count without paging, or pages without a count, is a real thing. This is
+  the pairing, not a replacement.
+
+  ARIA contract: whatever its two parts carry — a `<p>` and a labelled `<nav>`.
+-->
+<script lang="ts">import Pagination from "./Pagination.svelte";
+import ResultCount from "./ResultCount.svelte";
+let { shown, offset, limit, total, href, onPage, variant = "window", siblings = 1, size = "sm", label = "Pagination", previousLabel = "Previous", nextLabel = "Next", pageLabel, formatPage, countLabel, locales, class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['space-y-4', className]}>
+  <ResultCount {shown} {total} label={countLabel} {locales} />
+  <Pagination
+    {offset}
+    {limit}
+    {total}
+    {variant}
+    {href}
+    {onPage}
+    {siblings}
+    {size}
+    {label}
+    {previousLabel}
+    {nextLabel}
+    {pageLabel}
+    {formatPage}
+    {locales}
+  />
+</div>

package/dist/data/PaginationFooter.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Size } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Rows on this page — the length of what was rendered. */
+    shown: number;
+    /** The offset this page was rendered with. */
+    offset: number;
+    /** The page size this page was rendered with. */
+    limit: number;
+    /** The unpaged total. */
+    total: number;
+    /** Build the link for a target offset; the page's own query parameters included. */
+    href?: ((offset: number) => string) | undefined;
+    /** Page without navigating. Ignored when `href` is given. */
+    onPage?: ((offset: number) => void) | undefined;
+    /**
+     * `window` renders numbered page links with gaps; `prevNext` a bare Previous/Next pair.
+     * @defaultValue `'window'`
+     */
+    variant?: 'window' | 'prevNext' | undefined;
+    /**
+     * Pages rendered either side of the current one.
+     * @defaultValue `1`
+     */
+    siblings?: number | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'sm'`
+     */
+    size?: Size | undefined;
+    /**
+     * The pager landmark's accessible name.
+     * @defaultValue `'Pagination'`
+     */
+    label?: string | undefined;
+    /**
+     * Text of the previous-page control.
+     * @defaultValue `'Previous'`
+     */
+    previousLabel?: string | undefined;
+    /**
+     * Text of the next-page control.
+     * @defaultValue `'Next'`
+     */
+    nextLabel?: string | undefined;
+    /** How a numbered control is named; see `Pagination`. */
+    pageLabel?: ((page: number) => string) | undefined;
+    /** Passed to `Pagination`: how a page number's visible digits are written. */
+    formatPage?: ((page: number) => string) | undefined;
+    /** The count line, when "Showing x of y" is not the sentence wanted. */
+    countLabel?: ((shown: number, total: number) => string) | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** The count line and the pager that sit under a paginated index page. */
+declare const PaginationFooter: import("svelte").Component<Props, {}, "">;
+type PaginationFooter = ReturnType<typeof PaginationFooter>;
+export default PaginationFooter;

package/dist/data/ResultCount.svelte

@@ -0,0 +1,27 @@
+<!-- @component
+The "Showing 24 of 310" line under a list.
+-->
+<!--
+  ResultCount — "Showing 24 of 310" under a list.
+
+  Every list an API serves is a `LIMIT`ed window, so a page that showed only
+  the window would quietly imply it was everything; this says otherwise. It
+  renders nothing when `shown` is zero: an empty result is already saying
+  "nothing here" through its empty state, and "Showing 0 of 0" beside that is
+  noise, not reassurance.
+
+  ARIA contract: a plain `<p>`. Not a live region — the count is part of the
+  page that was just rendered, not an update to it, and announcing it on
+  every keystroke of a filter is the thing live regions are misused for.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { shown, total, label, locales = getComponentsContext().locale(), class: className, ...rest } = $props();
+// Formatter and formatted string in separate `$derived`s: the constructor
+// is the expensive half and only the locale should rebuild it.
+const counts = $derived(new Intl.NumberFormat(locales));
+const text = $derived(label === undefined ? `Showing ${counts.format(shown)} of ${counts.format(total)}` : label(shown, total));
+</script>
+
+{#if shown > 0}
+  <p {...rest} class={['text-base-content/60 text-sm tabular-nums', className]}>{text}</p>
+{/if}

package/dist/data/ResultCount.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    /** Rows on this page. */
+    shown: number;
+    /** Rows the query matched in total, before the window was applied. */
+    total: number;
+    /** The whole line, when "Showing x of y" is not the sentence wanted. */
+    label?: ((shown: number, total: number) => string) | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** The "Showing 24 of 310" line under a list. */
+declare const ResultCount: import("svelte").Component<Props, {}, "">;
+type ResultCount = ReturnType<typeof ResultCount>;
+export default ResultCount;

package/dist/data/Table.svelte

@@ -0,0 +1,151 @@
+<!-- @component
+A daisyUI `table` from column definitions and rows, with optional sortable headers and activatable rows.
+-->
+<!--
+  Table — columns in, rows in, a daisyUI `table` out.
+
+  It decides nothing about WHICH rows: a caller hands it the window it wants
+  shown, in the order it wants it, and this draws the header, the body, the
+  footer and the empty state. Sorting is the same deal — the header offers
+  the control and announces the state, and the caller (or `DataGrid`) does
+  the reordering. That split is what lets one component serve both a
+  client-side grid over 40 rows and a server-paged listing over 40,000, where
+  sorting the page in hand would be a lie.
+
+  ARIA contract: a real `<table>` with `<th scope="col">` headers. `caption`
+  is the table's accessible name — an unnamed table is one a screen-reader
+  user cannot tell from the next one — and `captionHidden` keeps it for
+  assistive technology only when the page's own heading already shows it. A
+  sortable column's header is a real `<button>` inside the `<th>` (the
+  activation), and the `<th>` carries `aria-sort` (the state); the arrow
+  beside it is `aria-hidden`, because the sort must be announced by the state
+  and not by a glyph.
+
+  `onSelect` makes each row activatable with `role="button"`, `tabindex="0"`
+  and Enter/Space — a click handler on a bare `<tr>` is invisible to everyone
+  not using a mouse. It costs the row its `row` semantics, so prefer a link
+  or a button inside a cell where the row's structure matters, and keep this
+  for a grid whose whole row is one destination.
+
+  The empty state is not an optional nicety: a table body with no rows and no
+  explanation reads as broken, and only the caller knows whether "nothing"
+  means "none yet" or "none matched".
+-->
+<script lang="ts" generics="T">import { columnAriaSort, nextSortState } from "./table-types.js";
+let { rows, columns, rowKey, caption, captionHidden = false, size = "md", zebra = false, pinRows = false, sort = $bindable(undefined), onSort, onSelect, emptyMessage = "Nothing to show.", emptyState, foot, sortLabel = (column) => `Sort by ${column.header}`, containerClass, class: className, ...rest } = $props();
+const tableSize = {
+	xs: "table-xs",
+	sm: "table-sm",
+	md: "table-md",
+	lg: "table-lg",
+	xl: "table-xl"
+};
+/** Alignment and the column's own classes, shared by its `<th>` and `<td>`. */
+const columnClass = (column) => [column.align === "end" ? "text-end" : "text-start", column.class];
+const toggleSort = (column) => {
+	const next = nextSortState(sort, column.key);
+	sort = next;
+	onSort?.(next);
+};
+/** The arrow beside a sorted header. Decorative — `aria-sort` is the state. */
+const sortIndicator = (key) => {
+	if (sort === undefined || sort.key !== key) return "";
+	return sort.direction === "asc" ? "▲" : "▼";
+};
+/**
+* Everything an activatable row needs, as one spread — or nothing at all
+* when it is not activatable. Assembled here rather than as four attribute
+* ternaries in the markup, because those four have to agree with each other
+* (a `role` without a `tabindex` is a lie) and one object is where that
+* agreement is visible.
+*/
+const rowAttributes = (row) => onSelect === undefined ? {} : {
+	role: "button",
+	tabindex: 0,
+	class: "cursor-pointer",
+	onclick: () => {
+		onSelect(row);
+	},
+	onkeydown: (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		// Space scrolls the page and Enter can submit a wrapping form;
+		// an activation that also does one of those is a bug report.
+		event.preventDefault();
+		onSelect(row);
+	}
+};
+</script>
+
+{#snippet cellBody(column: TableColumn<T>, row: T)}
+  {#if column.cell}{@render column.cell(row)}{:else}{column.value(row)}{/if}
+{/snippet}
+
+<div class={['overflow-x-auto', containerClass]}>
+  <table
+    {...rest}
+    class={[
+      'table bg-base-100',
+      tableSize[size],
+      zebra && 'table-zebra',
+      pinRows && 'table-pin-rows',
+      className,
+    ]}
+  >
+    {#if caption !== undefined}
+      <caption class={captionHidden ? 'sr-only' : 'p-3 text-start text-sm font-medium'}>
+        {caption}
+      </caption>
+    {/if}
+    <thead>
+      <tr>
+        {#each columns as column (column.key)}
+          <th scope="col" class={columnClass(column)} aria-sort={column.sortable ? columnAriaSort(sort, column.key) : undefined}>
+            {#if column.sortable}
+              <button
+                type="button"
+                class="link link-hover inline-flex items-center gap-1"
+                onclick={() => {
+                  toggleSort(column);
+                }}
+                aria-label={sortLabel(column)}
+              >
+                {column.header}
+                <span aria-hidden="true" class="text-xs">{sortIndicator(column.key)}</span>
+              </button>
+            {:else}
+              {column.header}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if rows.length === 0}
+        <tr>
+          <!-- Without the colspan the message sits under the first column and
+               the table looks like it lost its data rather than never had any. -->
+          <td colspan={columns.length} class="text-base-content/60 py-8 text-center">
+            {#if emptyState}{@render emptyState()}{:else}{emptyMessage}{/if}
+          </td>
+        </tr>
+      {:else}
+        {#each rows as row (rowKey(row))}
+          <tr class="hover:bg-base-200" {...rowAttributes(row)}>
+            {#each columns as column (column.key)}
+              {#if column.rowHeader}
+                <th scope="row" class={['font-normal', columnClass(column)]}>{@render cellBody(column, row)}</th>
+              {:else}
+                <td class={columnClass(column)}>{@render cellBody(column, row)}</td>
+              {/if}
+            {/each}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+    {#if foot}
+      <tfoot>
+        <tr>{@render foot()}</tr>
+      </tfoot>
+    {/if}
+  </table>
+</div>

package/dist/data/Table.svelte.d.ts

@@ -0,0 +1,75 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
+import type { Size } from '../ui/tones.ts';
+import { type SortState, type TableColumn } from './table-types.ts';
+declare function $$render<T>(): {
+    props: Omit<HTMLTableAttributes, "children"> & {
+        /** The rows to draw, in the order to draw them. */
+        rows: readonly T[];
+        /** Column definitions: header, cell renderer, sort key. */
+        columns: readonly TableColumn<T>[];
+        /** Stable identity per row — the `{#each}` key. */
+        rowKey: (row: T) => string;
+        /** The table's accessible name, rendered as its `<caption>`. */
+        caption?: string | undefined;
+        /** Keep the caption for assistive technology only. */
+        captionHidden?: boolean | undefined;
+        /**
+         * daisyUI size step.
+         * @defaultValue `'md'`
+         */
+        size?: Size | undefined;
+        /** Stripe alternate rows. */
+        zebra?: boolean | undefined;
+        /**
+         * Stick the header row while the body scrolls. Needs the scroll container
+         * to be the scrolling element, so give it a `max-h-*` through `class`
+         * when the page itself should not scroll.
+         */
+        pinRows?: boolean | undefined;
+        /** Which column is sorted, and which way. Bindable; `undefined` is unsorted. */
+        sort?: SortState | undefined;
+        /** Called with the next state when a sortable header is activated. */
+        onSort?: ((sort: SortState | undefined) => void) | undefined;
+        /** Makes every row activatable by pointer and keyboard. */
+        onSelect?: ((row: T) => void) | undefined;
+        /**
+         * The line shown instead of an empty body.
+         * @defaultValue `'Nothing to show.'`
+         */
+        emptyMessage?: string | undefined;
+        /** Richer empty state, in place of `emptyMessage`. */
+        emptyState?: Snippet<[]> | undefined;
+        /** A `<tfoot>` row — totals, or a summary. Render `<td>`/`<th>` cells. */
+        foot?: Snippet<[]> | undefined;
+        /**
+         * How a sortable column's button is named.
+         * @defaultValue `"Sort by <header>"`
+         */
+        sortLabel?: ((column: TableColumn<T>) => string) | undefined;
+        /** Classes on the scroll container the table sits in. */
+        containerClass?: string | undefined;
+    };
+    exports: {};
+    bindings: "sort";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sort";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** A daisyUI `table` from column definitions and rows, with optional sortable headers and activatable rows. */
+declare const Table: $$IsomorphicComponent;
+type Table<T> = InstanceType<typeof Table<T>>;
+export default Table;