drab 2.8.3 → 2.8.5

package/dist/components/DataTable.svelte

@@ -1,108 +1,117 @@
-<!--
-@component
-
-### DataTable
-
-Data table to display an array of JS objects. Provides sorting and pagination. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props. 
-
-@props
+<!--
+@component
+
+### DataTable
+
+Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props. 
+
+@props
 
 - `ascending` - current sort order
-- `classButton` - `button` class
-- `classFooter` - footer class
-- `classNoscript` - `noscript` class
-- `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
-- `classTable` - `table` class
 - `classTbodyTr` - `tbody tr` class
 - `classTbody` - `tbody` class
-- `classTdSorted` - currently sorted `td`
 - `classTd` - `td` class
-- `classThSorted` - currently sorted `th`
 - `classTh` - `th` class
 - `classTheadTr` - `thead tr` class
 - `classThead` - `thead` class
 - `classTr` - `tr` class
 - `class` 
-- `currentPage` - current page, defaults to `1`
-- `data` - a list of objects to render in the table
-- `idTable` - `table` id
+- `currentPage` - current page index, defaults to `0`
+- `data` - an array of items to render in the table
 - `id` 
-- `keys` - table columns to include in the table, in order
+- `keys` - table columns to include in the table, in order. Defaults to first item's keys
 - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - key (column) to sort by, defaults to first key
 
-@slots
-
-| name         | purpose                  | default value                   | slot props                      |
-| ------------ | ------------------------ | ------------------------------- | ------------------------------- |
-| `next`       | next button contents     | `Next`                          |                                 |
-| `pageNumber` | page numbers             | `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages`  |
-| `previous`   | previous button contents | `Previous`                      |                                 |
-| `td`         | td contents              | `item[key]`                     | `item`, `key`, `sortBy` `value` |
-| `th`         | th contents              | `key`                           | `key`, `sortBy`                 |
-
-@example
+@slots
+
+| name       | purpose                                               | default value | slot props                      |
+| ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
+| `controls` | helper that passes back `maxRows` and `numberOfPages` | none          | `maxRows`, `numberOfPages`      |
+| `td`       | td contents                                           | `value`       | `item`, `key`, `sortBy` `value` |
+| `th`       | th contents                                           | `key`         | `key`, `sortBy`                 |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import { DataTable, type DataTableItem } from "drab";
-
-	const data: DataTableItem[] = [
-		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
-		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
-		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
-		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
-		{ make: "Ford", model: "Model A", year: 1931, awd: false },
-		{ make: "Subaru", model: "Outback", year: 2021, awd: true },
-		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
-		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
-		{ make: "BMW", model: "X3", year: 2023, awd: true },
-	];
-</script>
-
-<DataTable {data} class="mb-12" />
-
-<DataTable
-	{data}
-	sortBy="year"
-	maxRows={4}
-	class="tabular-nums"
-	classTh="cursor-pointer capitalize"
-	classThSorted="underline"
-	classTbodyTr="transition hover:bg-neutral-50"
-	classFooter="flex justify-between items-center"
-	classButton="btn"
->
-	<svelte:fragment slot="th" let:key>
-		<span class:uppercase={key === "awd"}>{key}</span>
-	</svelte:fragment>
-	<svelte:fragment slot="td" let:value>
-		{#if typeof value === "boolean"}
-			{value ? "Yes" : "No"}
-		{:else}
-			{value}
-		{/if}
-	</svelte:fragment>
-</DataTable>
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { DataTable } from "drab";
+
+	let currentPage = 0;
+
+	const data: ComponentProps<DataTable>["data"] = [
+		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
+		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
+		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
+		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
+		{ make: "Ford", model: "Model A", year: 1931, awd: false },
+		{ make: "Subaru", model: "Outback", year: 2021, awd: true },
+		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
+		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
+		{ make: "BMW", model: "X3", year: 2023, awd: true },
+	];
+</script>
+
+<DataTable {data} class="mb-12" />
+
+<DataTable
+	{data}
+	bind:currentPage
+	sortBy="year"
+	maxRows={4}
+	class="tabular-nums"
+	classTh="cursor-pointer capitalize"
+	classTbodyTr="transition hover:bg-neutral-50"
+>
+	<svelte:fragment slot="th" let:key let:sortBy>
+		<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
+			{key}
+		</span>
+	</svelte:fragment>
+	<svelte:fragment slot="td" let:value>
+		{#if typeof value === "boolean"}
+			{value ? "Yes" : "No"}
+		{:else}
+			{value}
+		{/if}
+	</svelte:fragment>
+	<svelte:fragment slot="controls" let:maxRows let:numberOfPages>
+		{#if maxRows}
+			<div class="flex items-center justify-between">
+				<div>{currentPage + 1} / {numberOfPages}</div>
+				<div>
+					<button
+						type="button"
+						class="btn"
+						disabled={currentPage < 1}
+						on:click={() => currentPage--}
+					>
+						Previous
+					</button>
+					<button
+						type="button"
+						class="btn"
+						disabled={currentPage >= numberOfPages - 1}
+						on:click={() => currentPage++}
+					>
+						Next
+					</button>
+				</div>
+			</div>
+		{/if}
+	</svelte:fragment>
+</DataTable>
 ```
--->
-
-<script context="module"></script>
-
-<script>import { onMount } from "svelte";
-import { messageNoScript } from "../util/messages";
-let className = "";
+-->
+
+<script>let className = "";
 export { className as class };
 export let id = "";
 export let data;
-export let keys = [];
-if (!keys.length && data[0]) {
-  keys = Object.keys(data[0]);
-}
+export let keys = Object.keys(data[0]);
 export let sortBy = keys[0];
 export let ascending = true;
-export let classTable = "";
-export let idTable = "";
 export let classThead = "";
 export let classTbody = "";
 export let classTr = "";
@@ -110,15 +119,8 @@ export let classTheadTr = "";
 export let classTbodyTr = "";
 export let classTh = "";
 export let classTd = "";
-export let classThSorted = "";
-export let classTdSorted = "";
-export let classButton = "";
-export let classFooter = "";
-export let classPageControls = "";
 export let maxRows = 0;
-export let currentPage = 1;
-export let classNoscript = "";
-let clientJs = false;
+export let currentPage = 0;
 $:
   numberOfPages = Math.floor(data.length / maxRows) + 1;
 const sort = (key, toggleAscending = true) => {
@@ -143,14 +145,19 @@ const sort = (key, toggleAscending = true) => {
       } else {
         return collator.compare(bVal, aVal);
       }
-    } else if (typeof aVal === "boolean") {
+    } else if (aVal instanceof Date && bVal instanceof Date) {
+      if (ascending) {
+        return aVal.getTime() - bVal.getTime();
+      } else {
+        return bVal.getTime() - aVal.getTime();
+      }
+    } else {
       if (ascending) {
         return aVal === bVal ? 0 : aVal ? -1 : 1;
       } else {
         return aVal === bVal ? 0 : aVal ? 1 : -1;
       }
-    } else
-      return 0;
+    }
   });
   data = data;
   sortBy = key;
@@ -158,70 +165,38 @@ const sort = (key, toggleAscending = true) => {
 const showRow = (i, currentPage2) => {
   if (!maxRows)
     return true;
-  const overMin = i >= maxRows * (currentPage2 - 1);
-  const underMax = i < maxRows * currentPage2;
+  const overMin = i >= maxRows * currentPage2;
+  const underMax = i < maxRows * (currentPage2 + 1);
   return overMin && underMax;
 };
 sort(sortBy, false);
-onMount(() => clientJs = true);
-</script>
-
-<div class={className} {id}>
-	<table class={classTable} id={idTable}>
-		<thead class={classThead}>
-			<tr class="{classTr} {classTheadTr}">
-				{#each keys as key}
-					<th
-						class="{classTh} {sortBy === key ? classThSorted : ''}"
-						on:click={() => sort(key)}
-					>
-						<slot name="th" {key} {sortBy}>{key}</slot>
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody class={classTbody}>
-			{#each data as item, i}
-				{#if showRow(i, currentPage)}
-					<tr class="{classTr} {classTbodyTr}">
-						{#each keys as key}
-							<td class="{classTd} {sortBy === key ? classTdSorted : ''}">
-								<slot name="td" {item} {key} {sortBy} value={item[key]}>
-									{item[key]}
-								</slot>
-							</td>
-						{/each}
-					</tr>
-				{/if}
-			{/each}
-		</tbody>
-	</table>
-
-	{#if maxRows}
-		<div class={classFooter}>
-			<slot name="pageNumber" {currentPage} {numberOfPages}>
-				<div>{currentPage} / {numberOfPages}</div>
-			</slot>
-			<div class={classPageControls}>
-				<button
-					type="button"
-					class={classButton}
-					disabled={!clientJs || currentPage < 2}
-					on:click={() => currentPage--}
-				>
-					<slot name="previous">Previous</slot>
-				</button>
-				<button
-					type="button"
-					class={classButton}
-					disabled={!clientJs || currentPage >= numberOfPages}
-					on:click={() => currentPage++}
-				>
-					<slot name="next">Next</slot>
-				</button>
-			</div>
-		</div>
-
-		<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
-	{/if}
-</div>
+</script>
+
+<table class={className} {id}>
+	<thead class={classThead}>
+		<tr class="{classTr} {classTheadTr}">
+			{#each keys as key}
+				<th class={classTh} on:click={() => sort(key)}>
+					<slot name="th" {key} {sortBy}>{key}</slot>
+				</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody class={classTbody}>
+		{#each data as item, i}
+			{#if showRow(i, currentPage)}
+				<tr class="{classTr} {classTbodyTr}">
+					{#each keys as key}
+						<td class={classTd}>
+							<slot name="td" {item} {key} {sortBy} value={item[key]}>
+								{item[key]}
+							</slot>
+						</td>
+					{/each}
+				</tr>
+			{/if}
+		{/each}
+	</tbody>
+</table>
+
+<slot name="controls" {maxRows} {numberOfPages} />

package/dist/components/DataTable.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponent } from "svelte";
-export type DataTableItem = Record<string | number, string | number | boolean>;
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** a list of objects to render in the table */ data: DataTableItem[];
-        /** table columns to include in the table, in order */ keys?: string[] | undefined;
+        /** an array of items to render in the table */ data: Record<string | number, string | number | boolean | Date | null | undefined>[];
+        /** table columns to include in the table, in order. Defaults to first item's keys */ keys?: string[] | undefined;
         /** key (column) to sort by, defaults to first key */ sortBy?: string | undefined;
         /** current sort order */ ascending?: boolean | undefined;
-        /** `table` class */ classTable?: string | undefined;
-        /** `table` id */ idTable?: string | undefined;
         /** `thead` class */ classThead?: string | undefined;
         /** `tbody` class */ classTbody?: string | undefined;
         /** `tr` class */ classTr?: string | undefined;
@@ -17,14 +14,8 @@ declare const __propDef: {
         /** `tbody tr` class */ classTbodyTr?: string | undefined;
         /** `th` class */ classTh?: string | undefined;
         /** `td` class */ classTd?: string | undefined;
-        /** currently sorted `th` */ classThSorted?: string | undefined;
-        /** currently sorted `td` */ classTdSorted?: string | undefined;
-        /** `button` class */ classButton?: string | undefined;
-        /** footer class */ classFooter?: string | undefined;
-        /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
         /** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
-        /** current page, defaults to `1` */ currentPage?: number | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
+        /** current page index, defaults to `0` */ currentPage?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -35,17 +26,15 @@ declare const __propDef: {
             sortBy: string;
         };
         td: {
-            item: DataTableItem;
+            item: Record<string | number, string | number | boolean | Date | null | undefined>;
             key: string;
             sortBy: string;
-            value: string | number | boolean;
+            value: string | number | boolean | Date | null | undefined;
         };
-        pageNumber: {
-            currentPage: number;
+        controls: {
+            maxRows: number;
             numberOfPages: number;
         };
-        previous: {};
-        next: {};
     };
 };
 export type DataTableProps = typeof __propDef.props;
@@ -54,51 +43,44 @@ export type DataTableSlots = typeof __propDef.slots;
 /**
  * ### DataTable
  *
- * Data table to display an array of JS objects. Provides sorting and pagination. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
+ * Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
  *
  * @props
  *
  * - `ascending` - current sort order
- * - `classButton` - `button` class
- * - `classFooter` - footer class
- * - `classNoscript` - `noscript` class
- * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
- * - `classTable` - `table` class
  * - `classTbodyTr` - `tbody tr` class
  * - `classTbody` - `tbody` class
- * - `classTdSorted` - currently sorted `td`
  * - `classTd` - `td` class
- * - `classThSorted` - currently sorted `th`
  * - `classTh` - `th` class
  * - `classTheadTr` - `thead tr` class
  * - `classThead` - `thead` class
  * - `classTr` - `tr` class
  * - `class`
- * - `currentPage` - current page, defaults to `1`
- * - `data` - a list of objects to render in the table
- * - `idTable` - `table` id
+ * - `currentPage` - current page index, defaults to `0`
+ * - `data` - an array of items to render in the table
  * - `id`
- * - `keys` - table columns to include in the table, in order
+ * - `keys` - table columns to include in the table, in order. Defaults to first item's keys
  * - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - key (column) to sort by, defaults to first key
  *
  * @slots
  *
- * | name         | purpose                  | default value                   | slot props                      |
- * | ------------ | ------------------------ | ------------------------------- | ------------------------------- |
- * | `next`       | next button contents     | `Next`                          |                                 |
- * | `pageNumber` | page numbers             | `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages`  |
- * | `previous`   | previous button contents | `Previous`                      |                                 |
- * | `td`         | td contents              | `item[key]`                     | `item`, `key`, `sortBy` `value` |
- * | `th`         | th contents              | `key`                           | `key`, `sortBy`                 |
+ * | name       | purpose                                               | default value | slot props                      |
+ * | ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
+ * | `controls` | helper that passes back `maxRows` and `numberOfPages` | none          | `maxRows`, `numberOfPages`      |
+ * | `td`       | td contents                                           | `value`       | `item`, `key`, `sortBy` `value` |
+ * | `th`       | th contents                                           | `key`         | `key`, `sortBy`                 |
  *
  * @example
  *
  * ```svelte
  * <script lang="ts">
- * import { DataTable, type DataTableItem } from "drab";
+ * import type { ComponentProps } from "svelte";
+ * import { DataTable } from "drab";
  *
- * const data: DataTableItem[] = [
+ * let currentPage = 0;
+ *
+ * const data: ComponentProps<DataTable>["data"] = [
  * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
  * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
  * 	{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
@@ -115,17 +97,17 @@ export type DataTableSlots = typeof __propDef.slots;
  *
  * <DataTable
  * {data}
+ * bind:currentPage
  * sortBy="year"
  * maxRows={4}
  * class="tabular-nums"
  * classTh="cursor-pointer capitalize"
- * classThSorted="underline"
  * classTbodyTr="transition hover:bg-neutral-50"
- * classFooter="flex justify-between items-center"
- * classButton="btn"
  * >
- * <svelte:fragment slot="th" let:key>
- * 	<span class:uppercase={key === "awd"}>{key}</span>
+ * <svelte:fragment slot="th" let:key let:sortBy>
+ * 	<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
+ * 		{key}
+ * 	</span>
  * </svelte:fragment>
  * <svelte:fragment slot="td" let:value>
  * 	{#if typeof value === "boolean"}
@@ -134,6 +116,31 @@ export type DataTableSlots = typeof __propDef.slots;
  * 		{value}
  * 	{/if}
  * </svelte:fragment>
+ * <svelte:fragment slot="controls" let:maxRows let:numberOfPages>
+ * 	{#if maxRows}
+ * 		<div class="flex items-center justify-between">
+ * 			<div>{currentPage + 1} / {numberOfPages}</div>
+ * 			<div>
+ * 				<button
+ * 					type="button"
+ * 					class="btn"
+ * 					disabled={currentPage < 1}
+ * 					on:click={() => currentPage--}
+ * 				>
+ * 					Previous
+ * 				</button>
+ * 				<button
+ * 					type="button"
+ * 					class="btn"
+ * 					disabled={currentPage >= numberOfPages - 1}
+ * 					on:click={() => currentPage++}
+ * 				>
+ * 					Next
+ * 				</button>
+ * 			</div>
+ * 		</div>
+ * 	{/if}
+ * </svelte:fragment>
  * </DataTable>
  * ```
  */

package/dist/components/Details.svelte

@@ -0,0 +1,103 @@
+<!--
+@component
+
+### Details
+
+Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
+
+@props
+
+- `class` 
+- `id` 
+- `open` 
+- `transition` - slides the content, set to `false` to remove
+
+@slots
+
+| name      | purpose                         | default value  | slot props |
+| --------- | ------------------------------- | -------------- | ---------- |
+| `summary` | `summary` element contents      | none           | `open`     |
+| `content` | contents when details is `open` | none           | none       |
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Details } from "drab";
+	import Chevron from "../../site/svg/Chevron.svelte";
+</script>
+
+<Details class="border-b">
+	<svelte:fragment slot="summary" let:open>
+		<div
+			class="flex cursor-pointer items-center justify-between gap-8 p-4 font-bold underline hover:decoration-dotted"
+		>
+			<div>Does it work without JavaScript?</div>
+			<div class="transition" class:rotate-180={open}>
+				<Chevron />
+			</div>
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="px-4 pb-4">Yes.</div>
+	</svelte:fragment>
+</Details>
+```
+-->
+
+<script>import { onMount } from "svelte";
+import { slide } from "svelte/transition";
+import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
+let className = "";
+export { className as class };
+export let id = "";
+export let transition = { duration };
+export let open = false;
+let clientJs = false;
+const toggleOpen = () => {
+  open = !open;
+};
+onMount(() => {
+  clientJs = true;
+  if (prefersReducedMotion())
+    transition = false;
+});
+</script>
+
+<div class={className} {id}>
+	<details bind:open>
+		<!-- svelte-ignore a11y-no-redundant-roles -->
+		<summary
+			role="button"
+			tabindex="0"
+			on:click|preventDefault={toggleOpen}
+			on:keydown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					toggleOpen();
+				}
+			}}
+		>
+			<slot name="summary" {open} />
+		</summary>
+		{#if !clientJs || !transition}
+			<slot name="content" />
+		{/if}
+	</details>
+	{#if clientJs && open && transition}
+		<!-- outside the details for the transition -->
+		<div transition:slide={transition}>
+			<slot name="content" />
+		</div>
+	{/if}
+</div>
+
+<style>
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+</style>