drab 3.0.0 → 3.0.2

package/dist/components/DataTable.svelte

@@ -1,116 +1,116 @@
-<!--
-@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
-- `classTbody` - `tbody` class
-- `classTd` - `td` class
-- `classTh` - `th` class
-- `classTheadTr` - `thead tr` class
-- `classThead` - `thead` class
-- `classTr` - `tr` class
-- `class` 
-- `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. 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                      |
-| ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
-| `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 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>
-```
--->
-
+<!--
+@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
+- `classTbody` - `tbody` class
+- `classTd` - `td` class
+- `classTh` - `th` class
+- `classTheadTr` - `thead tr` class
+- `classThead` - `thead` class
+- `classTr` - `tr` class
+- `class` 
+- `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. 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                      |
+| ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
+| `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 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 = "";
@@ -176,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/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
-
-- `class` 
-- `id` 
-- `open` 
-- `transition` - slides the content, set to `false` to remove
-
-@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 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>
-```
--->
-
+<!--
+@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      | 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 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/Editor.svelte

@@ -1,65 +1,65 @@
-<!--
-@component
-
-### Editor
-
-`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)
-
-@props
-
-- `classButton` - `class` of all the `button` elements
-- `classControls` - `class` of the `div` that wraps the controls
-- `classTextarea` - `class` of the `textarea` element
-- `contentElements` - an array of `EditorContentElement`s for the controls
-- `idControls` - `id` of the `div` that wraps the controls
-- `idTextarea` - `id` of the `textarea` element
-- `keyPairs` - keys that will auto-close if typed, value is their closing character
-- `nameTextarea` - `name` of the `textarea` element
-- `placeholderTextarea` - `placeholder` of the `textarea` element
-- `selectionStartTextarea` - `selectionStart` value of the `textarea`
-- `valueTextarea` - `value` of the `textarea` element
-
-@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={[
-		{
-			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: "[",
-		},
-	]}
-/>
-```
--->
-
+<!--
+@component
+
+### Editor
+
+`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)
+
+@props
+
+- `classButton` - `class` of all the `button` elements
+- `classControls` - `class` of the `div` that wraps the controls
+- `classTextarea` - `class` of the `textarea` element
+- `contentElements` - an array of `EditorContentElement`s for the controls
+- `idControls` - `id` of the `div` that wraps the controls
+- `idTextarea` - `id` of the `textarea` element
+- `keyPairs` - keys that will auto-close if typed, value is their closing character
+- `nameTextarea` - `name` of the `textarea` element
+- `placeholderTextarea` - `placeholder` of the `textarea` element
+- `selectionStartTextarea` - `selectionStart` value of the `textarea`
+- `valueTextarea` - `value` of the `textarea` element
+
+@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={[
+		{
+			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: "[",
+		},
+	]}
+/>
+```
+-->
+
 <script>import { onMount } from "svelte";
 export let contentElements = [];
 export let valueTextarea = "";
@@ -338,39 +338,39 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
   valueTextarea = lines.join("\n");
 };
 onMount(() => clientJs = true);
-</script>
-
-<textarea
-	id={idTextarea}
-	class={classTextarea}
-	name={nameTextarea}
-	placeholder={placeholderTextarea}
-	on:keydown={onKeyDown}
-	on:keyup={updateSelectionStart}
-	on:dblclick={trimSelection}
-	bind:value={valueTextarea}
-	bind:this={textArea}
-	on:click={() => {
-		openChars = [];
-		updateSelectionStart();
-	}}
-	on:input
-/>
-
-<div id={idControls} class={classControls}>
-	{#each contentElements as el}
-		<button
-			type="button"
-			class={el.class ? `${classButton} ${el.class}` : classButton}
-			on:click={() => addContent(el)}
-			title={el.title}
-			disabled={!clientJs}
-		>
-			{#if typeof el.icon !== "string"}
-				<svelte:component this={el.icon} />
-			{:else}
-				{el.icon}
-			{/if}
-		</button>
-	{/each}
-</div>
+</script>
+
+<textarea
+	id={idTextarea}
+	class={classTextarea}
+	name={nameTextarea}
+	placeholder={placeholderTextarea}
+	on:keydown={onKeyDown}
+	on:keyup={updateSelectionStart}
+	on:dblclick={trimSelection}
+	bind:value={valueTextarea}
+	bind:this={textArea}
+	on:click={() => {
+		openChars = [];
+		updateSelectionStart();
+	}}
+	on:input
+/>
+
+<div id={idControls} class={classControls}>
+	{#each contentElements as el}
+		<button
+			type="button"
+			class={el.class ? `${classButton} ${el.class}` : classButton}
+			on:click={() => addContent(el)}
+			title={el.title}
+			disabled={!clientJs}
+		>
+			{#if typeof el.icon !== "string"}
+				<svelte:component this={el.icon} />
+			{:else}
+				{el.icon}
+			{/if}
+		</button>
+	{/each}
+</div>