drab 2.7.0 → 2.8.1

package/README.md

@@ -5,5 +5,3 @@
 [drab.robino.dev](https://drab.robino.dev)
 
 ### MIT License
-
-### Open to contributions

package/dist/components/Accordion.svelte

@@ -3,7 +3,7 @@
 
 ### Accordion
 
-Displays a list of `details` elements with helpful defaults and transitions.
+Displays a list of `details` elements with helpful defaults and transitions. Use `AccordionItem.data` to send any additional data through the slot props. Works without JavaScript. 
 
 @props
 
@@ -52,7 +52,7 @@ Displays a list of `details` elements with helpful defaults and transitions.
 			summary: "Is it animated?",
 			content: "Yes, with the transition prop.",
 		},
-		{ summary: "Does it work without Javascript?", content: "Yes." },
+		{ summary: "Does it work without JavaScript?", content: "Yes." },
 	]}
 />
 
@@ -112,9 +112,8 @@ const toggleOpen = (i) => {
   items[i].open = !items[i].open;
   if (autoClose) {
     for (let j = 0; j < items.length; j++) {
-      const item = items[j];
       if (j !== i)
-        item.open = false;
+        items[j].open = false;
     }
   }
 };
@@ -169,6 +168,7 @@ onMount(() => {
 				{/if}
 			</details>
 			{#if clientJs && item.open && transition}
+				<!-- outside the details for the transition -->
 				<div class={classContent} transition:slide={transition}>
 					<slot name="content" {item} {index}>{item.content}</slot>
 				</div>

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

@@ -49,7 +49,7 @@ export type AccordionSlots = typeof __propDef.slots;
 /**
  * ### Accordion
  *
- * Displays a list of `details` elements with helpful defaults and transitions.
+ * Displays a list of `details` elements with helpful defaults and transitions. Use `AccordionItem.data` to send any additional data through the slot props. Works without JavaScript.
  *
  * @props
  *
@@ -98,7 +98,7 @@ export type AccordionSlots = typeof __propDef.slots;
  * 		summary: "Is it animated?",
  * 		content: "Yes, with the transition prop.",
  * 	},
- * 	{ summary: "Does it work without Javascript?", content: "Yes." },
+ * 	{ summary: "Does it work without JavaScript?", content: "Yes." },
  * ]}
  * />
  *

package/dist/components/Breakpoint.svelte

@@ -20,11 +20,9 @@ With SvelteKit, this component can be wrapped in an `{#if dev}` block that check
 	import { Breakpoint } from "drab";
 </script>
 
-<div>
-	<Breakpoint
-		class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
-	/>
-</div>
+<Breakpoint
+	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+/>
 ```
 -->
 

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

@@ -36,11 +36,9 @@ export type BreakpointSlots = typeof __propDef.slots;
  * import { Breakpoint } from "drab";
  * </script>
  *
- * <div>
  * <Breakpoint
- * 	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+ * class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
  * />
- * </div>
  * ```
  */
 export default class Breakpoint extends SvelteComponent<BreakpointProps, BreakpointEvents, BreakpointSlots> {

package/dist/components/Chord.svelte

@@ -17,7 +17,7 @@ Generates a guitar chord `svg`.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Chord } from "drab";
 </script>
 

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

@@ -41,7 +41,7 @@ export type ChordSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Chord } from "drab";
  * </script>
  *

package/dist/components/ContextMenu.svelte

@@ -3,13 +3,14 @@
 
 ### ContextMenu
 
-Displays when the parent element is right clicked, or long pressed on mobile.
+Displays when the `target` element is right clicked, or long pressed on mobile.
 
 @props
 
 - `class` 
-- `display` - controls `display` css property
+- `display` - shows / hides the menu
 - `id` 
+- `target` - target element to right click, defaults to the parent element
 - `transition` - fades the content, set to `false` to remove
 
 @slots
@@ -21,12 +22,14 @@ Displays when the parent element is right clicked, or long pressed on mobile.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { ContextMenu } from "drab";
+
+	let target: HTMLButtonElement;
 </script>
 
-<div class="flex justify-center rounded border border-dashed p-12">
-	<div>Right click here</div>
+<div class="mb-8 flex justify-center rounded border border-dashed p-12">
+	<div>Parent right click</div>
 	<ContextMenu>
 		<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 			<div class="font-bold">Context Menu</div>
@@ -36,13 +39,22 @@ Displays when the parent element is right clicked, or long pressed on mobile.
 		</div>
 	</ContextMenu>
 </div>
+
+<button class="btn" bind:this={target}>Target Right Click</button>
+<ContextMenu {target}>
+	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+		<div class="font-bold">Context Menu</div>
+		<button role="menuitem" class="btn">Button</button>
+		<button role="menuitem" class="btn">Button</button>
+		<button role="menuitem" class="btn">Button</button>
+	</div>
+</ContextMenu>
 ```
 -->
 
 <script>import { onMount, tick } from "svelte";
 import { fade } from "svelte/transition";
 import { duration } from "../util/transition";
-import { messageNoScript } from "../util/messages";
 import { prefersReducedMotion } from "../util/accessibility";
 import { delay } from "../util/delay";
 let className = "";
@@ -50,6 +62,7 @@ export { className as class };
 export let id = "";
 export let display = false;
 export let transition = { duration };
+export let target = null;
 let contextMenu;
 let base;
 let coordinates = { x: 0, y: 0 };
@@ -94,12 +107,14 @@ onMount(() => {
     if (transition)
       transition.duration = 0;
   }
-  const parentElement = base.parentElement;
-  if (parentElement) {
-    parentElement.addEventListener("contextmenu", displayMenu);
-    parentElement.addEventListener("touchstart", onTouchStart);
-    parentElement.addEventListener("touchend", onTouchEnd);
-    parentElement.addEventListener("touchcancel", onTouchEnd);
+  if (!target) {
+    target = base.parentElement;
+  }
+  if (target) {
+    target.addEventListener("contextmenu", displayMenu);
+    target.addEventListener("touchstart", onTouchStart);
+    target.addEventListener("touchend", onTouchEnd);
+    target.addEventListener("touchcancel", onTouchEnd);
   }
 });
 </script>

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

@@ -4,8 +4,9 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** controls `display` css property */ display?: boolean | undefined;
+        /** shows / hides the menu */ display?: boolean | undefined;
         /** fades the content, set to `false` to remove */ transition?: false | FadeParams | undefined;
+        /** target element to right click, defaults to the parent element */ target?: HTMLElement | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,13 +21,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
 /**
  * ### ContextMenu
  *
- * Displays when the parent element is right clicked, or long pressed on mobile.
+ * Displays when the `target` element is right clicked, or long pressed on mobile.
  *
  * @props
  *
  * - `class`
- * - `display` - controls `display` css property
+ * - `display` - shows / hides the menu
  * - `id`
+ * - `target` - target element to right click, defaults to the parent element
  * - `transition` - fades the content, set to `false` to remove
  *
  * @slots
@@ -38,12 +40,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { ContextMenu } from "drab";
+ *
+ * let target: HTMLButtonElement;
  * </script>
  *
- * <div class="flex justify-center rounded border border-dashed p-12">
- * <div>Right click here</div>
+ * <div class="mb-8 flex justify-center rounded border border-dashed p-12">
+ * <div>Parent right click</div>
  * <ContextMenu>
  * 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 		<div class="font-bold">Context Menu</div>
@@ -53,6 +57,16 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * 	</div>
  * </ContextMenu>
  * </div>
+ *
+ * <button class="btn" bind:this={target}>Target Right Click</button>
+ * <ContextMenu {target}>
+ * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+ * 	<div class="font-bold">Context Menu</div>
+ * 	<button role="menuitem" class="btn">Button</button>
+ * 	<button role="menuitem" class="btn">Button</button>
+ * 	<button role="menuitem" class="btn">Button</button>
+ * </div>
+ * </ContextMenu>
  * ```
  */
 export default class ContextMenu extends SvelteComponent<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {

package/dist/components/CopyButton.svelte

@@ -3,7 +3,7 @@
 
 ### CopyButton
 
-Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard.
+Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard. If JavaScript is disabled, the button is disabled and `text` is displayed after the button.
 
 @props
 
@@ -23,13 +23,11 @@ Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipbo
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { CopyButton } from "drab";
 </script>
 
-<div>
-	<CopyButton class="btn" text="Text to copy" />
-</div>
+<CopyButton class="btn" text="Text to copy" />
 ```
 -->
 

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

@@ -21,7 +21,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
 /**
  * ### CopyButton
  *
- * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard.
+ * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard. If JavaScript is disabled, the button is disabled and `text` is displayed after the button.
  *
  * @props
  *
@@ -41,13 +41,11 @@ export type CopyButtonSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { CopyButton } from "drab";
  * </script>
  *
- * <div>
  * <CopyButton class="btn" text="Text to copy" />
- * </div>
  * ```
  */
 export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {

package/dist/components/DataTable.svelte

@@ -3,13 +3,13 @@
 
 ### DataTable
 
-Data table to display an array of JS objects. Click a column header to sort.
+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
 
-- `ascending` - default sort order
+- `ascending` - current sort order
 - `classButton` - `button` class
-- `classFooter` - `footer` 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
@@ -30,6 +30,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `id` 
 - `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
 
 @slots
 
@@ -44,7 +45,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { DataTable } from "drab";
 </script>
 
@@ -109,8 +110,11 @@ Data table to display an array of JS objects. Click a column header to sort.
 
 <script context="module"></script>
 
-<script>import { messageNoScript } from "../util/messages";
-import { onMount } from "svelte";
+<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 = "";
@@ -137,6 +141,7 @@ export let classPageNumber = "";
 export let classPageControls = "";
 export let maxRows = 0;
 export let currentPage = 1;
+export let transition = { duration };
 export let classNoscript = "";
 let clientJs = false;
 $:
@@ -175,8 +180,21 @@ const sort = (column, toggleAscending = true) => {
   data = data;
   sortBy = column;
 };
+const showRow = (i, currentPage2) => {
+  if (!maxRows)
+    return true;
+  const overMin = i >= maxRows * (currentPage2 - 1);
+  const underMax = i < maxRows * currentPage2;
+  return overMin && underMax;
+};
 sort(sortBy, false);
-onMount(() => clientJs = true);
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
+  clientJs = true;
+});
 </script>
 
 <div class={className} {id}>
@@ -195,10 +213,11 @@ onMount(() => clientJs = true);
 		</thead>
 		<tbody class={classTbody}>
 			{#each data as row, i}
-				{@const showRow =
-					i < maxRows * currentPage && i >= maxRows * (currentPage - 1)}
-				{#if maxRows ? showRow : true}
-					<tr class={classTbodyTr}>
+				{#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>
@@ -237,10 +256,6 @@ onMount(() => clientJs = true);
 			</div>
 		</div>
 
-		<noscript>
-			<div class={classNoscript}>
-				{messageNoScript}
-			</div>
-		</noscript>
+		<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
 	{/if}
 </div>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 export type DataTableRow<T> = {
     [K in keyof T]: T[K];
 };
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -9,7 +10,7 @@ declare const __propDef: {
         /** 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;
-        /** default sort order */ ascending?: boolean | undefined;
+        /** current sort order */ ascending?: boolean | undefined;
         /** `table` class */ classTable?: string | undefined;
         /** `table` id */ idTable?: string | undefined;
         /** `thead` class */ classThead?: string | undefined;
@@ -21,11 +22,12 @@ declare const __propDef: {
         /** currently sorted `th` */ classThSorted?: string | undefined;
         /** currently sorted `td` */ classTdSorted?: string | undefined;
         /** `button` class */ classButton?: string | undefined;
-        /** `footer` class */ classFooter?: 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: {
@@ -57,13 +59,13 @@ export type DataTableSlots = typeof __propDef.slots;
 /**
  * ### DataTable
  *
- * Data table to display an array of JS objects. Click a column header to sort.
+ * 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
  *
- * - `ascending` - default sort order
+ * - `ascending` - current sort order
  * - `classButton` - `button` class
- * - `classFooter` - `footer` 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
@@ -84,6 +86,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `id`
  * - `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
  *
  * @slots
  *
@@ -98,7 +101,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { DataTable } from "drab";
  * </script>
  *

package/dist/components/Editor.svelte

@@ -3,7 +3,9 @@
 
 ### Editor
 
-Text editor with controls to add elements and keyboard shortcuts.
+`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. 
+
+- This component is used to create [Typo](https://typo.robino.dev)
 
 @props
 
@@ -17,13 +19,13 @@ Text editor with controls to add elements and keyboard shortcuts.
 - `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
-- `selectionStart` - `selectionStart` value of the text area
+- `selectionStartTextarea` - `selectionStart` value of the `textarea`
 - `valueTextarea` - `value` of the `textarea` element
 
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Editor } from "drab";
 </script>
 
@@ -72,7 +74,7 @@ export let nameTextarea = "";
 export let classButton = "";
 export let classControls = "";
 export let idControls = "";
-export let selectionStart = 0;
+export let selectionStartTextarea = 0;
 export let keyPairs = {
   "(": ")",
   "{": "}",
@@ -95,11 +97,11 @@ const insertChar = (str, char, index) => {
 const removeChar = (str, index) => {
   return str.slice(0, index) + str.slice(index + 1);
 };
-const insertText = async (el, selectionStart2, selectionEnd) => {
+const insertText = async (el, selectionStart, selectionEnd) => {
   if (el.display === "inline") {
     valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
   } else if (el.display === "wrap") {
-    valueTextarea = insertChar(valueTextarea, el.text, selectionStart2);
+    valueTextarea = insertChar(valueTextarea, el.text, selectionStart);
     valueTextarea = insertChar(
       valueTextarea,
       keyPairs[el.text],
@@ -117,7 +119,7 @@ const insertText = async (el, selectionStart2, selectionEnd) => {
     valueTextarea = lines.join("\n");
   }
 };
-const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
+const setCaretPosition = async (text, selectionStart, selectionEnd) => {
   let startPos = 0;
   let endPos = 0;
   if (/[a-z]/i.test(text)) {
@@ -133,7 +135,7 @@ const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
       }
     }
   } else {
-    startPos = selectionStart2 + text.length;
+    startPos = selectionStart + text.length;
     endPos = selectionEnd + text.length;
   }
   textArea.setSelectionRange(startPos, endPos);
@@ -141,9 +143,9 @@ const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
 };
 const addContent = async (el) => {
   const selectionEnd = textArea.selectionEnd;
-  const selectionStart2 = textArea.selectionStart;
-  await insertText(el, selectionStart2, selectionEnd);
-  setCaretPosition(el.text, selectionStart2, selectionEnd);
+  const selectionStart = textArea.selectionStart;
+  await insertText(el, selectionStart, selectionEnd);
+  setCaretPosition(el.text, selectionStart, selectionEnd);
 };
 const onKeyDown = async (e) => {
   const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
@@ -267,7 +269,7 @@ const trimSelection = () => {
   }
 };
 const updateSelectionStart = () => {
-  selectionStart = textArea.selectionStart;
+  selectionStartTextarea = textArea.selectionStart;
 };
 const getLineInfo = () => {
   const lines = valueTextarea.split("\n");

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

@@ -30,7 +30,7 @@ declare const __propDef: {
         /** `class` of all the `button` elements */ classButton?: string | undefined;
         /** `class` of the `div` that wraps the controls */ classControls?: string | undefined;
         /** `id` of the `div` that wraps the controls */ idControls?: string | undefined;
-        /** `selectionStart` value of the text area */ selectionStart?: number | undefined;
+        /** `selectionStart` value of the `textarea` */ selectionStartTextarea?: number | undefined;
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
         } | undefined;
@@ -49,7 +49,9 @@ export type EditorSlots = typeof __propDef.slots;
 /**
  * ### Editor
  *
- * Text editor with controls to add elements and keyboard shortcuts.
+ * `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.
+ *
+ * - This component is used to create [Typo](https://typo.robino.dev)
  *
  * @props
  *
@@ -63,13 +65,13 @@ export type EditorSlots = typeof __propDef.slots;
  * - `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
- * - `selectionStart` - `selectionStart` value of the text area
+ * - `selectionStartTextarea` - `selectionStart` value of the `textarea`
  * - `valueTextarea` - `value` of the `textarea` element
  *
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Editor } from "drab";
  * </script>
  *