drab 2.8.6 → 3.0.0

package/dist/components/DataTable.svelte

@@ -1,11 +1,17 @@
-<!--
-@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
+<!--
+@component
+
+### DataTable
+
+Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the `data` prop.
+
+- Set the `maxRows` prop to enable pagination, bind to `currentPage` to navigate (see second example below)
+- Provides sorting for `number`, `string`, `boolean`, and `Date`
+- Strings are sorted using `Intl.Collator`
+- Style or modify the rendering of data with slot props
+- `numberOfPages` is calculated and sent back through the `controls` slot
+
+@props
 
 - `ascending` - current sort order
 - `classTbodyTr` - `tbody tr` class
@@ -23,88 +29,88 @@ Data table to display an array of JS objects. Provides pagination and sorting fo
 - `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                      |
-| ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
-| `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
+@slots
+
+| name       | purpose                                                          | default value | slot props                      |
+| ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
+| `controls` | helper that passes back `maxRows` and calculated `numberOfPages` | empty         | `maxRows`, `numberOfPages`      |
+| `td`       | td contents                                                      | `value`       | `item`, `key`, `sortBy` `value` |
+| `th`       | th contents                                                      | `key`         | `key`, `sortBy`                 |
+
+@example
 
 ```svelte
-<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 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 gap-4">
+				<div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
+				<div class="flex gap-2">
+					<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>let className = "";
 export { className as class };
 export let id = "";
@@ -129,6 +135,7 @@ const sort = (key, toggleAscending = true) => {
   } else {
     ascending = true;
   }
+  const collator = new Intl.Collator();
   data.sort((a, b) => {
     const aVal = a[key];
     const bVal = b[key];
@@ -139,7 +146,6 @@ const sort = (key, toggleAscending = true) => {
         return bVal - aVal;
       }
     } else if (typeof aVal === "string" && typeof bVal === "string") {
-      const collator = new Intl.Collator();
       if (ascending) {
         return collator.compare(aVal, bVal);
       } else {
@@ -170,33 +176,33 @@ const showRow = (i, currentPage2) => {
   return overMin && underMax;
 };
 sort(sortBy, false);
-</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} />
+</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

@@ -43,7 +43,13 @@ export type DataTableSlots = typeof __propDef.slots;
 /**
  * ### 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.
+ * Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the `data` prop.
+ *
+ * - Set the `maxRows` prop to enable pagination, bind to `currentPage` to navigate (see second example below)
+ * - Provides sorting for `number`, `string`, `boolean`, and `Date`
+ * - Strings are sorted using `Intl.Collator`
+ * - Style or modify the rendering of data with slot props
+ * - `numberOfPages` is calculated and sent back through the `controls` slot
  *
  * @props
  *
@@ -65,11 +71,11 @@ export type DataTableSlots = typeof __propDef.slots;
  *
  * @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`                 |
+ * | name       | purpose                                                          | default value | slot props                      |
+ * | ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
+ * | `controls` | helper that passes back `maxRows` and calculated `numberOfPages` | empty         | `maxRows`, `numberOfPages`      |
+ * | `td`       | td contents                                                      | `value`       | `item`, `key`, `sortBy` `value` |
+ * | `th`       | th contents                                                      | `key`         | `key`, `sortBy`                 |
  *
  * @example
  *
@@ -118,9 +124,9 @@ export type DataTableSlots = typeof __propDef.slots;
  * </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>
+ * 		<div class="flex items-center justify-between gap-4">
+ * 			<div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
+ * 			<div class="flex gap-2">
  * 				<button
  * 					type="button"
  * 					class="btn"

package/dist/components/Details.svelte

@@ -1,50 +1,50 @@
-<!--
-@component
-
-### Details
-
-Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
-
-@props
+<!--
+@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
+@slots
+
+| name      | purpose                         | default value  | slot props |
+| --------- | ------------------------------- | -------------- | ---------- |
+| `summary` | `summary` element contents      | empty          | `open`     |
+| `content` | contents when details is `open` | empty          | 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 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 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";
@@ -63,41 +63,41 @@ onMount(() => {
   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>
+</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>

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

@@ -36,8 +36,8 @@ export type DetailsSlots = typeof __propDef.slots;
  *
  * | name      | purpose                         | default value  | slot props |
  * | --------- | ------------------------------- | -------------- | ---------- |
- * | `summary` | `summary` element contents      | none           | `open`     |
- * | `content` | contents when details is `open` | none           | none       |
+ * | `summary` | `summary` element contents      | empty          | `open`     |
+ * | `content` | contents when details is `open` | empty          | none       |
  *
  * @example
  *
@@ -50,7 +50,7 @@ export type DetailsSlots = typeof __propDef.slots;
  * <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"
+ * 		class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
  * 	>
  * 		<div>Does it work without JavaScript?</div>
  * 		<div class="transition" class:rotate-180={open}>

package/dist/components/Editor.svelte

@@ -3,7 +3,7 @@
 
 ### Editor
 
-`textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, this component's value is just a `string` so you can easily store it in a database or manipulate it without learning a separate API. 
+`textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `valueTextarea` is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API. 
 
 - This component is used to create [Typo](https://typo.robino.dev)
 
@@ -24,39 +24,39 @@
 @example
 
 ```svelte
-<script lang="ts">
-	import { Editor } from "drab";
-</script>
-
-<Editor
-	classButton="btn"
-	classControls="flex gap-2"
-	classTextarea="border w-full h-36 p-2 rounded mb-2"
-	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
-	contentElements={[
-		{
-			name: "Bullet",
-			text: "- ",
-			display: "block",
-			icon: "Bullet",
-		},
-		{
-			name: "Italic",
-			text: "*",
-			display: "wrap",
-			icon: "Italic",
-			key: "i",
-			class: "italic",
-		},
-		{
-			name: "Anchor",
-			text: "[text](href)",
-			display: "inline",
-			icon: "Anchor",
-			key: "[",
-		},
-	]}
-/>
+<script lang="ts">
+	import { Editor } from "drab";
+</script>
+
+<Editor
+	classButton="btn"
+	classControls="flex gap-2"
+	classTextarea="border w-full h-36 p-2 rounded mb-2"
+	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
+	contentElements={[
+		{
+			title: "Bullet",
+			text: "- ",
+			display: "block",
+			icon: "Bullet",
+		},
+		{
+			title: "Italic",
+			text: "*",
+			display: "wrap",
+			icon: "Italic",
+			key: "i",
+			class: "italic",
+		},
+		{
+			title: "Anchor",
+			text: "[text](href)",
+			display: "inline",
+			icon: "Anchor",
+			key: "[",
+		},
+	]}
+/>
 ```
 -->
 
@@ -177,7 +177,7 @@ const onKeyDown = async (e) => {
         display: "inline",
         text: "	",
         icon: "tab",
-        name: "tab"
+        title: "tab"
       });
     }
   } else if (e.key === "Enter") {
@@ -197,7 +197,7 @@ const onKeyDown = async (e) => {
         text: `
 ${repeat}`,
         icon: "",
-        name: ""
+        title: ""
       });
     } else if (repeat && original.length === columnNumber) {
       e.preventDefault();
@@ -217,7 +217,7 @@ ${repeat}`,
           text: `
 `,
           icon: "",
-          name: ""
+          title: ""
         });
       }, 0);
     }
@@ -241,7 +241,7 @@ ${repeat}`,
         display: "wrap",
         text: e.key,
         icon: "",
-        name: ""
+        title: ""
       });
       openChars.push(e.key);
     }
@@ -363,7 +363,7 @@ onMount(() => clientJs = true);
 			type="button"
 			class={el.class ? `${classButton} ${el.class}` : classButton}
 			on:click={() => addContent(el)}
-			title={el.name}
+			title={el.title}
 			disabled={!clientJs}
 		>
 			{#if typeof el.icon !== "string"}

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

@@ -3,8 +3,8 @@ import { type ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         /** an array of `EditorContentElement`s for the controls */ contentElements?: {
-            /** name of element */
-            name: string;
+            /** title of element and it's corresponding button */
+            title: string;
             /** text to add */
             text: string;
             /** controls how the text is added */
@@ -42,7 +42,7 @@ export type EditorSlots = typeof __propDef.slots;
 /**
  * ### Editor
  *
- * `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, this component's value is just a `string` so you can easily store it in a database or manipulate it without learning a separate API.
+ * `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `valueTextarea` is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
  *
  * - This component is used to create [Typo](https://typo.robino.dev)
  *
@@ -74,13 +74,13 @@ export type EditorSlots = typeof __propDef.slots;
  * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
  * contentElements={[
  * 	{
- * 		name: "Bullet",
+ * 		title: "Bullet",
  * 		text: "- ",
  * 		display: "block",
  * 		icon: "Bullet",
  * 	},
  * 	{
- * 		name: "Italic",
+ * 		title: "Italic",
  * 		text: "*",
  * 		display: "wrap",
  * 		icon: "Italic",
@@ -88,7 +88,7 @@ export type EditorSlots = typeof __propDef.slots;
  * 		class: "italic",
  * 	},
  * 	{
- * 		name: "Anchor",
+ * 		title: "Anchor",
  * 		text: "[text](href)",
  * 		display: "inline",
  * 		icon: "Anchor",