drab 2.8.2 → 2.8.4

package/dist/components/DataTable.svelte

@@ -1,18 +1,17 @@
-<!--
-@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
-- `classPageNumber` - class of `div` wrapping page numbers
 - `classTable` - `table` class
 - `classTbodyTr` - `tbody tr` class
 - `classTbody` - `tbody` class
@@ -22,36 +21,33 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 - `classTh` - `th` class
 - `classTheadTr` - `thead tr` class
 - `classThead` - `thead` class
+- `classTr` - `tr` class
 - `class` 
-- `columns` - table columns, in order
 - `currentPage` - current page, defaults to `1`
 - `data` - a list of objects to render in the table
 - `idTable` - `table` id
 - `id` 
+- `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` - column to sort by, defaults to first column
-- `transition` - fades the rows in, set to `false` to disable
+- `sortBy` - key (column) to sort by, defaults to first key
+
+@slots
 
-@slots
-
-| name         | purpose                  | default value                    | slot props                     |
-| ------------ | ------------------------ | -------------------------------- | ------------------------------ |
-| `next`       | next button contents     | `Next`                           | `currentPage`                  |
-| `pageNumber` | page numbers             |  `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
-| `previous`   | previous button contents | `Previous`                       | `currentPage`                  |
-| `td`         | td contents              | `Previous`                       | `column`, `row`                |
-| `th`         | th contents              | `Previous`                       | `column`                       |
-
-@example
+| 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
 
 ```svelte
 <script lang="ts">
-	import { DataTable } from "drab";
-</script>
+	import { DataTable, type DataTableItem } from "drab";
 
-<DataTable
-	class="mb-12"
-	data={[
+	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 },
@@ -61,74 +57,52 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 		{ 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={[
-		{ 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 },
-	]}
+	{data}
 	sortBy="year"
 	maxRows={4}
 	class="tabular-nums"
-	classTh="cursor-pointer"
+	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:column>
-		{#if column === "awd"}
-			<span class="uppercase">{column}</span>
-		{:else}
-			{column}
-		{/if}
+	<svelte:fragment slot="th" let:key>
+		<span class:uppercase={key === "awd"}>{key}</span>
 	</svelte:fragment>
-	<svelte:fragment slot="td" let:column let:row>
-		{@const item = row[column]}
-		{#if typeof item === "boolean"}
-			{#if item}
-				Yes
-			{:else}
-				No
-			{/if}
+	<svelte:fragment slot="td" let:value>
+		{#if typeof value === "boolean"}
+			{value ? "Yes" : "No"}
 		{:else}
-			{item}
+			{value}
 		{/if}
 	</svelte:fragment>
 </DataTable>
 ```
--->
-
-<script context="module"></script>
-
+-->
+
+<script context="module"></script>
+
 <script>import { onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { duration } from "../util/transition";
-import { prefersReducedMotion } from "../util/accessibility";
 import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
 export let data;
-export let columns = [];
-if (!columns.length && data[0]) {
-  columns = Object.keys(data[0]);
-}
-export let sortBy = columns[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 = "";
 export let classTheadTr = "";
 export let classTbodyTr = "";
 export let classTh = "";
@@ -137,48 +111,51 @@ export let classThSorted = "";
 export let classTdSorted = "";
 export let classButton = "";
 export let classFooter = "";
-export let classPageNumber = "";
 export let classPageControls = "";
 export let maxRows = 0;
 export let currentPage = 1;
-export let transition = { duration };
 export let classNoscript = "";
 let clientJs = false;
 $:
   numberOfPages = Math.floor(data.length / maxRows) + 1;
-const sort = (column, toggleAscending = true) => {
-  if (column === sortBy && toggleAscending) {
+const sort = (key, toggleAscending = true) => {
+  if (key === sortBy && toggleAscending) {
     ascending = !ascending;
   } else {
     ascending = true;
   }
   data.sort((a, b) => {
-    const aVal = a[column];
-    const bVal = b[column];
-    if (typeof aVal === "number") {
+    const aVal = a[key];
+    const bVal = b[key];
+    if (typeof aVal === "number" && typeof bVal === "number") {
       if (ascending) {
         return aVal - bVal;
       } else {
         return bVal - aVal;
       }
-    } else if (typeof aVal === "string") {
+    } else if (typeof aVal === "string" && typeof bVal === "string") {
       const collator = new Intl.Collator();
       if (ascending) {
         return collator.compare(aVal, bVal);
       } 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 = column;
+  sortBy = key;
 };
 const showRow = (i, currentPage2) => {
   if (!maxRows)
@@ -188,74 +165,65 @@ const showRow = (i, currentPage2) => {
   return overMin && underMax;
 };
 sort(sortBy, false);
-onMount(() => {
-  if (prefersReducedMotion()) {
-    if (transition)
-      transition.duration = 0;
-  }
-  clientJs = true;
-});
-</script>
-
-<div class={className} {id}>
-	<table class={classTable} id={idTable}>
-		<thead class={classThead}>
-			<tr class={classTheadTr}>
-				{#each columns as column}
-					<th
-						class="{classTh} {sortBy === column ? classThSorted : ''}"
-						on:click={() => sort(column)}
-					>
-						<slot name="th" {column}>{column}</slot>
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody class={classTbody}>
-			{#each data as row, i}
-				{#if showRow(i, currentPage)}
-					<tr
-						in:fade={transition ? transition : { duration: 0 }}
-						class={classTbodyTr}
-					>
-						{#each columns as column}
-							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
-								<slot name="td" {row} {column}>{row[column]}</slot>
-							</td>
-						{/each}
-					</tr>
-				{/if}
-			{/each}
-		</tbody>
-	</table>
-
-	{#if maxRows}
-		<div class={classFooter}>
-			<div class={classPageNumber}>
-				<slot name="pageNumber" {currentPage} {numberOfPages}>
-					{currentPage} / {numberOfPages}
-				</slot>
-			</div>
-			<div class={classPageControls}>
-				<button
-					type="button"
-					class={classButton}
-					disabled={!clientJs || currentPage < 2}
-					on:click={() => currentPage--}
-				>
-					<slot name="previous" {currentPage}>Previous</slot>
-				</button>
-				<button
-					type="button"
-					class={classButton}
-					disabled={!clientJs || currentPage >= numberOfPages}
-					on:click={() => currentPage++}
-				>
-					<slot name="next" {currentPage}>Next</slot>
-				</button>
-			</div>
-		</div>
-
-		<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
-	{/if}
-</div>
+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>

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

@@ -1,20 +1,18 @@
 import { SvelteComponent } from "svelte";
-export type DataTableRow<T> = {
-    [K in keyof T]: T[K];
-};
-import { type FadeParams } from "svelte/transition";
+export type DataTableItem = Record<string | number, string | number | boolean | Date | undefined | null>;
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** a list of objects to render in the table */ data: DataTableRow<any>[];
-        /** table columns, in order */ columns?: string[] | undefined;
-        /** column to sort by, defaults to first column */ sortBy?: string | undefined;
+        /** a list of objects to render in the table */ data: DataTableItem[];
+        /** 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;
         /** `thead tr` class */ classTheadTr?: string | undefined;
         /** `tbody tr` class */ classTbodyTr?: string | undefined;
         /** `th` class */ classTh?: string | undefined;
@@ -23,11 +21,9 @@ declare const __propDef: {
         /** currently sorted `td` */ classTdSorted?: string | undefined;
         /** `button` class */ classButton?: string | undefined;
         /** footer class */ classFooter?: string | undefined;
-        /** class of `div` wrapping page numbers */ classPageNumber?: 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;
-        /** fades the rows in, set to `false` to disable */ transition?: false | FadeParams | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -35,22 +31,21 @@ declare const __propDef: {
     };
     slots: {
         th: {
-            column: string;
+            key: string;
+            sortBy: string;
         };
         td: {
-            row: DataTableRow<any>;
-            column: string;
+            item: DataTableItem;
+            key: string;
+            sortBy: string;
+            value: string | number | boolean | Date | null | undefined;
         };
         pageNumber: {
             currentPage: number;
             numberOfPages: number;
         };
-        previous: {
-            currentPage: number;
-        };
-        next: {
-            currentPage: number;
-        };
+        previous: {};
+        next: {};
     };
 };
 export type DataTableProps = typeof __propDef.props;
@@ -59,7 +54,7 @@ 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
  *
@@ -68,7 +63,6 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `classFooter` - footer class
  * - `classNoscript` - `noscript` class
  * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
- * - `classPageNumber` - class of `div` wrapping page numbers
  * - `classTable` - `table` class
  * - `classTbodyTr` - `tbody tr` class
  * - `classTbody` - `tbody` class
@@ -78,36 +72,33 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `classTh` - `th` class
  * - `classTheadTr` - `thead tr` class
  * - `classThead` - `thead` class
+ * - `classTr` - `tr` class
  * - `class`
- * - `columns` - table columns, in order
  * - `currentPage` - current page, defaults to `1`
  * - `data` - a list of objects to render in the table
  * - `idTable` - `table` id
  * - `id`
+ * - `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` - column to sort by, defaults to first column
- * - `transition` - fades the rows in, set to `false` to disable
+ * - `sortBy` - key (column) to sort by, defaults to first key
  *
  * @slots
  *
- * | name         | purpose                  | default value                    | slot props                     |
- * | ------------ | ------------------------ | -------------------------------- | ------------------------------ |
- * | `next`       | next button contents     | `Next`                           | `currentPage`                  |
- * | `pageNumber` | page numbers             |  `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
- * | `previous`   | previous button contents | `Previous`                       | `currentPage`                  |
- * | `td`         | td contents              | `Previous`                       | `column`, `row`                |
- * | `th`         | th contents              | `Previous`                       | `column`                       |
+ * | 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
  *
  * ```svelte
  * <script lang="ts">
- * import { DataTable } from "drab";
- * </script>
+ * import { DataTable, type DataTableItem } from "drab";
  *
- * <DataTable
- * class="mb-12"
- * data={[
+ * 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 },
@@ -117,47 +108,30 @@ export type DataTableSlots = typeof __propDef.slots;
  * 	{ 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={[
- * 	{ 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 },
- * ]}
+ * {data}
  * sortBy="year"
  * maxRows={4}
  * class="tabular-nums"
- * classTh="cursor-pointer"
+ * 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:column>
- * 	{#if column === "awd"}
- * 		<span class="uppercase">{column}</span>
- * 	{:else}
- * 		{column}
- * 	{/if}
+ * <svelte:fragment slot="th" let:key>
+ * 	<span class:uppercase={key === "awd"}>{key}</span>
  * </svelte:fragment>
- * <svelte:fragment slot="td" let:column let:row>
- * 	{@const item = row[column]}
- * 	{#if typeof item === "boolean"}
- * 		{#if item}
- * 			Yes
- * 		{:else}
- * 			No
- * 		{/if}
+ * <svelte:fragment slot="td" let:value>
+ * 	{#if typeof value === "boolean"}
+ * 		{value ? "Yes" : "No"}
  * 	{:else}
- * 		{item}
+ * 		{value}
  * 	{/if}
  * </svelte:fragment>
  * </DataTable>

package/dist/components/Popover.svelte

@@ -29,23 +29,21 @@ Displays a popover relatively positioned to the target. Does not require the tar
 	let target: HTMLButtonElement;
 
 	let display = false;
+
+	const open = () => (display = true);
+	const close = () => (display = false);
 </script>
 
-<button
-	class="btn"
-	type="button"
-	bind:this={target}
-	on:click={() => (display = !display)}
->
-	{display ? "Close" : "Open"}
+<button class="btn" type="button" bind:this={target} on:click={open}>
+	Open
 </button>
 
 <Popover {target} bind:display class="p-2">
 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 		<div class="font-bold">Bottom</div>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
 	</div>
 </Popover>
 ```
@@ -105,10 +103,8 @@ $:
   if (target && popover)
     setPosition();
 onMount(() => {
-  if (prefersReducedMotion()) {
-    if (transition)
-      transition.duration = 0;
-  }
+  if (prefersReducedMotion())
+    transition = false;
 });
 </script>
 

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

@@ -48,23 +48,21 @@ export type PopoverSlots = typeof __propDef.slots;
  * let target: HTMLButtonElement;
  *
  * let display = false;
+ *
+ * const open = () => (display = true);
+ * const close = () => (display = false);
  * </script>
  *
- * <button
- * class="btn"
- * type="button"
- * bind:this={target}
- * on:click={() => (display = !display)}
- * >
- * {display ? "Close" : "Open"}
+ * <button class="btn" type="button" bind:this={target} on:click={open}>
+ * Open
  * </button>
  *
  * <Popover {target} bind:display class="p-2">
  * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 	<div class="font-bold">Bottom</div>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
+ * 	<button class="btn" on:click={close}>Close</button>
+ * 	<button class="btn" on:click={close}>Close</button>
+ * 	<button class="btn" on:click={close}>Close</button>
  * </div>
  * </Popover>
  * ```