drab 1.10.0 → 2.0.0

package/README.md

@@ -2,34 +2,8 @@
 
 ## An unstyled Svelte component library
 
-### MIT License
-
-### Install
-
-```bash
-npm create svelte@latest
-```
-
-```bash
-npm i -D drab
-```
-
-### Use
-
-```svelte
-<script>
-	import { ShareButton } from "drab";
-</script>
-
-<ShareButton
-	text="Check out this page: "
-	title="drab"
-	url="https://drab.robino.dev"
-/>
-```
-
-### Preview
-
 [drab.robino.dev](https://drab.robino.dev)
 
+### MIT License
+
 ### Open to contributions

package/dist/components/DataTable.svelte

@@ -8,19 +8,32 @@ Data table to display an array of JS objects. Click a column header to sort.
 @props
 
 - `ascending` - default sort order
+- `classButton` - button class
+- `classFooter` - footer 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
+- `classTdSorted` - currently sorted td
+- `classTd` - td class
+- `classThSorted` - currently sorted th
+- `classTh` - th class
+- `classTheadTr` - thead tr class
+- `classThead` - thead 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
+- `paginate` - number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - column to sort by--defaults to first column
-- `sortedTdClass` - currently sorted td
-- `sortedThClass` - currently sorted th
-- `tBodyClass` - tbody class
-- `tBodyTrClass` - tbody tr class
-- `tHeadClass` - thead class
-- `tHeadTrClass` - thead tr class
-- `tableClass` - table class
-- `tableId` - table id
-- `tdClass` - td class
-- `thClass` - th class
+
+@slots
+
+| name       | purpose                  | default value |
+| ---------- | ------------------------ | ------------- |
+| `previous` | previous button contents | `Previous`    |
+| `next`     | next button contents     | `Next`        |
 
 @example
 
@@ -37,31 +50,38 @@ Data table to display an array of JS objects. Click a column header to sort.
 		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
 		{ make: "Ford", model: "Model A", year: 1931, awd: false },
 	]}
-	sortBy="year"
+	sortBy="make"
 />
 ```
 -->
 
 <script context="module"></script>
 
-<script>import { onMount } from "svelte";
-export let data;
+<script>export let data;
 export let columns = [];
 if (!columns.length && data[0]) {
   columns = Object.keys(data[0]);
 }
 export let sortBy = columns[0];
 export let ascending = true;
-export let tableClass = "";
-export let tableId = "";
-export let tHeadClass = "";
-export let tBodyClass = "";
-export let tHeadTrClass = "";
-export let tBodyTrClass = "";
-export let thClass = "";
-export let tdClass = "";
-export let sortedThClass = "";
-export let sortedTdClass = "";
+export let classTable = "";
+export let idTable = "";
+export let classThead = "";
+export let classTbody = "";
+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 classPageNumber = "";
+export let classPageControls = "";
+export let paginate = 0;
+export let currentPage = 1;
+$:
+  numberOfPages = Math.floor(data.length / paginate) + 1;
 const sort = (column, toggleAscending = true) => {
   if (column === sortBy && toggleAscending) {
     ascending = !ascending;
@@ -96,17 +116,15 @@ const sort = (column, toggleAscending = true) => {
   data = data;
   sortBy = column;
 };
-onMount(() => {
-  sort(sortBy, false);
-});
+sort(sortBy, false);
 </script>
 
-<table class={tableClass} id={tableId}>
-	<thead class={tHeadClass}>
-		<tr class={tHeadTrClass}>
+<table class={classTable} id={idTable}>
+	<thead class={classThead}>
+		<tr class={classTheadTr}>
 			{#each columns as column}
 				<th
-					class="{thClass} {sortBy === column ? sortedThClass : ''}"
+					class="{classTh} {sortBy === column ? classThSorted : ''}"
 					on:click={() => sort(column)}
 				>
 					{column}
@@ -114,15 +132,41 @@ onMount(() => {
 			{/each}
 		</tr>
 	</thead>
-	<tbody class={tBodyClass}>
-		{#each data as row}
-			<tr class={tBodyTrClass}>
-				{#each columns as column}
-					<td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
-						{row[column]}
-					</td>
-				{/each}
-			</tr>
+	<tbody class={classTbody}>
+		{#each data as row, i}
+			{@const showRow =
+				i < paginate * currentPage && i >= paginate * (currentPage - 1)}
+			{#if paginate ? showRow : true}
+				<tr class={classTbodyTr}>
+					{#each columns as column}
+						<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
+							{row[column]}
+						</td>
+					{/each}
+				</tr>
+			{/if}
 		{/each}
 	</tbody>
 </table>
+
+{#if paginate}
+	<div class={classFooter}>
+		<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
+		<div class={classPageControls}>
+			<button
+				class={classButton}
+				disabled={currentPage < 2}
+				on:click={() => currentPage--}
+			>
+				<slot name="previous">Previous</slot>
+			</button>
+			<button
+				class={classButton}
+				disabled={currentPage >= numberOfPages}
+				on:click={() => currentPage++}
+			>
+				<slot name="next">Next</slot>
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -8,21 +8,30 @@ declare const __propDef: {
         /** table columns, in order */ columns?: string[] | undefined;
         /** column to sort by--defaults to first column */ sortBy?: string | undefined;
         /** default sort order */ ascending?: boolean | undefined;
-        /** table class */ tableClass?: string | undefined;
-        /** table id */ tableId?: string | undefined;
-        /** thead class */ tHeadClass?: string | undefined;
-        /** tbody class */ tBodyClass?: string | undefined;
-        /** thead tr class */ tHeadTrClass?: string | undefined;
-        /** tbody tr class */ tBodyTrClass?: string | undefined;
-        /** th class */ thClass?: string | undefined;
-        /** td class */ tdClass?: string | undefined;
-        /** currently sorted th */ sortedThClass?: string | undefined;
-        /** currently sorted td */ sortedTdClass?: string | undefined;
+        /** table class */ classTable?: string | undefined;
+        /** table id */ idTable?: string | undefined;
+        /** thead class */ classThead?: string | undefined;
+        /** tbody class */ classTbody?: string | undefined;
+        /** thead tr class */ classTheadTr?: string | undefined;
+        /** 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` wrapping page numbers */ classPageNumber?: string | undefined;
+        /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
+        /** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
+        /** current page, defaults to `1` */ currentPage?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        previous: {};
+        next: {};
+    };
 };
 export type DataTableProps = typeof __propDef.props;
 export type DataTableEvents = typeof __propDef.events;
@@ -35,19 +44,32 @@ export type DataTableSlots = typeof __propDef.slots;
  * @props
  *
  * - `ascending` - default sort order
+ * - `classButton` - button class
+ * - `classFooter` - footer 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
+ * - `classTdSorted` - currently sorted td
+ * - `classTd` - td class
+ * - `classThSorted` - currently sorted th
+ * - `classTh` - th class
+ * - `classTheadTr` - thead tr class
+ * - `classThead` - thead 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
+ * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - column to sort by--defaults to first column
- * - `sortedTdClass` - currently sorted td
- * - `sortedThClass` - currently sorted th
- * - `tBodyClass` - tbody class
- * - `tBodyTrClass` - tbody tr class
- * - `tHeadClass` - thead class
- * - `tHeadTrClass` - thead tr class
- * - `tableClass` - table class
- * - `tableId` - table id
- * - `tdClass` - td class
- * - `thClass` - th class
+ *
+ * @slots
+ *
+ * | name       | purpose                  | default value |
+ * | ---------- | ------------------------ | ------------- |
+ * | `previous` | previous button contents | `Previous`    |
+ * | `next`     | next button contents     | `Next`        |
  *
  * @example
  *
@@ -64,7 +86,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * 	{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
  * 	{ make: "Ford", model: "Model A", year: 1931, awd: false },
  * ]}
- * sortBy="year"
+ * sortBy="make"
  * />
  * ```
  */

package/dist/components/Editor.svelte

@@ -7,17 +7,17 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 @props
 
-- `buttonClass` - `class` of all the `button` elements
+- `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 content elements for the controls
-- `controlsClass` - `class` of the `div` that wraps the controls
-- `controlsId` - `id` of the `div` that wraps 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
 - `selectionStart` - `selectionStart` value of the text area
-- `textAreaClass` - `class` of the `textarea` element
-- `textAreaId` - `id` of the `textarea` element
-- `textAreaName` - `name` of the `textarea` element
-- `textAreaPlaceholder` - `placeholder` of the `textarea` element
-- `textAreaValue` - `value` of the `textarea` element
+- `valueTextarea` - `value` of the `textarea` element
 
 @example
 
@@ -56,14 +56,14 @@ Text editor with controls to add elements and keyboard shortcuts.
 <script context="module"></script>
 
 <script>export let contentElements = [];
-export let textAreaValue = "";
-export let textAreaPlaceholder = "";
-export let textAreaClass = "";
-export let textAreaId = "";
-export let textAreaName = "";
-export let buttonClass = "";
-export let controlsClass = "";
-export let controlsId = "";
+export let valueTextarea = "";
+export let placeholderTextarea = "";
+export let classTextarea = "";
+export let idTextarea = "";
+export let nameTextarea = "";
+export let classButton = "";
+export let classControls = "";
+export let idControls = "";
 export let selectionStart = 0;
 export let keyPairs = {
   "(": ")",
@@ -87,11 +87,11 @@ const removeChar = (str, index) => {
 };
 const insertText = async (el, selectionStart2, selectionEnd) => {
   if (el.display === "inline") {
-    textAreaValue = `${textAreaValue.slice(0, selectionEnd)}${el.text}${textAreaValue.slice(selectionEnd)}`;
+    valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
   } else if (el.display === "wrap") {
-    textAreaValue = insertChar(textAreaValue, el.text, selectionStart2);
-    textAreaValue = insertChar(
-      textAreaValue,
+    valueTextarea = insertChar(valueTextarea, el.text, selectionStart2);
+    valueTextarea = insertChar(
+      valueTextarea,
       keyPairs[el.text],
       selectionEnd + el.text.length
     );
@@ -104,15 +104,15 @@ const insertText = async (el, selectionStart2, selectionEnd) => {
     } else {
       lines[lineNumber] = el.text + lines[lineNumber];
     }
-    textAreaValue = lines.join("\n");
+    valueTextarea = lines.join("\n");
   }
 };
 const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
   let startPos = 0;
   let endPos = 0;
   if (/[a-z]/i.test(text)) {
-    for (let i = selectionEnd; i < textAreaValue.length; i++) {
-      if (textAreaValue[i].match(/[a-z]/i)) {
+    for (let i = selectionEnd; i < valueTextarea.length; i++) {
+      if (valueTextarea[i].match(/[a-z]/i)) {
         if (!startPos) {
           startPos = i;
         } else {
@@ -137,17 +137,17 @@ const addContent = async (el) => {
 };
 const onKeyDown = async (e) => {
   const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
-  const nextChar = textAreaValue[textArea.selectionEnd];
+  const nextChar = valueTextarea[textArea.selectionEnd];
   if (resetKeys.includes(e.key)) {
     openChars = [];
   } else if (e.key === "Backspace") {
-    const prevChar = textAreaValue[textArea.selectionStart - 1];
+    const prevChar = valueTextarea[textArea.selectionStart - 1];
     if (prevChar in keyPairs && nextChar === keyPairs[prevChar]) {
       e.preventDefault();
       const start = textArea.selectionStart - 1;
       const end = textArea.selectionEnd - 1;
-      textAreaValue = removeChar(textAreaValue, start);
-      textAreaValue = removeChar(textAreaValue, end);
+      valueTextarea = removeChar(valueTextarea, start);
+      valueTextarea = removeChar(valueTextarea, end);
       setTimeout(() => {
         textArea.setSelectionRange(start, end);
       }, 0);
@@ -158,7 +158,7 @@ const onKeyDown = async (e) => {
       const newPos = textArea.selectionStart - 1;
       const { lineNumber } = getLineInfo();
       correctFollowing(lineNumber, true);
-      textAreaValue = removeChar(textAreaValue, newPos);
+      valueTextarea = removeChar(valueTextarea, newPos);
       setTimeout(async () => {
         textArea.setSelectionRange(newPos, newPos);
       }, 0);
@@ -197,8 +197,8 @@ ${repeat}`,
       const selectionEnd = textArea.selectionEnd;
       const newPos = selectionEnd - original.length;
       for (let i = 0; i < original.length; i++) {
-        textAreaValue = removeChar(
-          textAreaValue,
+        valueTextarea = removeChar(
+          valueTextarea,
           textArea.selectionEnd - (i + 1)
         );
       }
@@ -242,13 +242,13 @@ ${repeat}`,
 };
 const trimSelection = () => {
   if (textArea.selectionStart !== textArea.selectionEnd) {
-    if (textAreaValue[textArea.selectionStart] === " ") {
+    if (valueTextarea[textArea.selectionStart] === " ") {
       textArea.setSelectionRange(
         textArea.selectionStart + 1,
         textArea.selectionEnd
       );
     }
-    if (textAreaValue[textArea.selectionEnd - 1] === " ") {
+    if (valueTextarea[textArea.selectionEnd - 1] === " ") {
       textArea.setSelectionRange(
         textArea.selectionStart,
         textArea.selectionEnd - 1
@@ -260,7 +260,7 @@ const updateSelectionStart = () => {
   selectionStart = textArea.selectionStart;
 };
 const getLineInfo = () => {
-  const lines = textAreaValue.split("\n");
+  const lines = valueTextarea.split("\n");
   let characterCount = 0;
   for (let i = 0; i < lines.length; i++) {
     characterCount++;
@@ -276,7 +276,7 @@ const getLineInfo = () => {
   return { lines, lineNumber: 0, columnNumber: 0 };
 };
 const getCurrentBlock = () => {
-  const blocks = textAreaValue.split("```");
+  const blocks = valueTextarea.split("```");
   let totalChars = 0;
   for (const [i, block] of blocks.entries()) {
     totalChars += block.length + 3;
@@ -328,19 +328,19 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
       lines[i] = String(newNum) + lines[i];
     }
   }
-  textAreaValue = lines.join("\n");
+  valueTextarea = lines.join("\n");
 };
 </script>
 
 <textarea
-	id={textAreaId}
-	class={textAreaClass}
-	name={textAreaName}
-	placeholder={textAreaPlaceholder}
+	id={idTextarea}
+	class={classTextarea}
+	name={nameTextarea}
+	placeholder={placeholderTextarea}
 	on:keydown={onKeyDown}
 	on:keyup={updateSelectionStart}
 	on:dblclick={trimSelection}
-	bind:value={textAreaValue}
+	bind:value={valueTextarea}
 	bind:this={textArea}
 	on:click={() => {
 		openChars = [];
@@ -348,10 +348,10 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
 	}}
 	on:input
 />
-<div id={controlsId} class={controlsClass}>
+<div id={idControls} class={classControls}>
 	{#each contentElements as el}
 		<button
-			class={el.class ? `${buttonClass} ${el.class}` : buttonClass}
+			class={el.class ? `${classButton} ${el.class}` : classButton}
 			on:click={() => addContent(el)}
 			title={el.name}
 			aria-label={el.name}

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

@@ -22,14 +22,14 @@ import type { ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;
-        /** `value` of the `textarea` element */ textAreaValue?: string | undefined;
-        /** `placeholder` of the `textarea` element */ textAreaPlaceholder?: string | undefined;
-        /** `class` of the `textarea` element */ textAreaClass?: string | undefined;
-        /** `id` of the `textarea` element */ textAreaId?: string | undefined;
-        /** `name` of the `textarea` element */ textAreaName?: string | undefined;
-        /** `class` of all the `button` elements */ buttonClass?: string | undefined;
-        /** `class` of the `div` that wraps the controls */ controlsClass?: string | undefined;
-        /** `id` of the `div` that wraps the controls */ controlsId?: string | undefined;
+        /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
+        /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
+        /** `class` of the `textarea` element */ classTextarea?: string | undefined;
+        /** `id` of the `textarea` element */ idTextarea?: string | undefined;
+        /** `name` of the `textarea` element */ nameTextarea?: string | undefined;
+        /** `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;
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
@@ -52,17 +52,17 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `buttonClass` - `class` of all the `button` elements
+ * - `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 content elements for the controls
- * - `controlsClass` - `class` of the `div` that wraps the controls
- * - `controlsId` - `id` of the `div` that wraps 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
  * - `selectionStart` - `selectionStart` value of the text area
- * - `textAreaClass` - `class` of the `textarea` element
- * - `textAreaId` - `id` of the `textarea` element
- * - `textAreaName` - `name` of the `textarea` element
- * - `textAreaPlaceholder` - `placeholder` of the `textarea` element
- * - `textAreaValue` - `value` of the `textarea` element
+ * - `valueTextarea` - `value` of the `textarea` element
  *
  * @example
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "1.10.0",
+	"version": "2.0.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
@@ -23,7 +23,7 @@
 	"repository": "github:rossrobino/drab",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "node src/lib/util/buildDocs.js && vite build && npm run package",
+		"build": "npm run doc && vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
@@ -31,7 +31,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
-		"pub": "npm publish --access public"
+		"pub": "npm publish --access public",
+		"doc": "node src/lib/util/buildDocs.js"
 	},
 	"exports": {
 		".": {