drab 1.10.0 → 1.10.1

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,8 +8,14 @@ Data table to display an array of JS objects. Click a column header to sort.
 @props
 
 - `ascending` - default sort order
+- `buttonClass` - button class
 - `columns` - table columns, in order
+- `currentPage` - current page, defaults to `1`
 - `data` - a list of objects to render in the table
+- `footerClass` - footer class
+- `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
+- `pageNumberClass` - class of `div` wrapping page numbers
+- `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
@@ -22,6 +28,13 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `tdClass` - td class
 - `thClass` - th class
 
+@slots
+
+| name       | purpose                  | default value |
+| ---------- | ------------------------ | ------------- |
+| `previous` | previous button contents | `Previous`    |
+| `next`     | next button contents     | `Next`        |
+
 @example
 
 ```svelte
@@ -37,15 +50,14 @@ 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]);
@@ -62,6 +74,14 @@ export let thClass = "";
 export let tdClass = "";
 export let sortedThClass = "";
 export let sortedTdClass = "";
+export let buttonClass = "";
+export let footerClass = "";
+export let pageNumberClass = "";
+export let pageControlsClass = "";
+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,9 +116,7 @@ const sort = (column, toggleAscending = true) => {
   data = data;
   sortBy = column;
 };
-onMount(() => {
-  sort(sortBy, false);
-});
+sort(sortBy, false);
 </script>
 
 <table class={tableClass} id={tableId}>
@@ -115,14 +133,40 @@ onMount(() => {
 		</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>
+		{#each data as row, i}
+			{@const showRow =
+				i < paginate * currentPage && i >= paginate * (currentPage - 1)}
+			{#if paginate ? showRow : true}
+				<tr class={tBodyTrClass}>
+					{#each columns as column}
+						<td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
+							{row[column]}
+						</td>
+					{/each}
+				</tr>
+			{/if}
 		{/each}
 	</tbody>
 </table>
+
+{#if paginate}
+	<div class={footerClass}>
+		<div class={pageNumberClass}>{currentPage} / {numberOfPages}</div>
+		<div class={pageControlsClass}>
+			<button
+				class={buttonClass}
+				disabled={currentPage < 2}
+				on:click={() => currentPage--}
+			>
+				<slot name="previous">Previous</slot>
+			</button>
+			<button
+				class={buttonClass}
+				disabled={currentPage >= numberOfPages}
+				on:click={() => currentPage++}
+			>
+				<slot name="next">Next</slot>
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -18,11 +18,20 @@ declare const __propDef: {
         /** td class */ tdClass?: string | undefined;
         /** currently sorted th */ sortedThClass?: string | undefined;
         /** currently sorted td */ sortedTdClass?: string | undefined;
+        /** button class */ buttonClass?: string | undefined;
+        /** footer class */ footerClass?: string | undefined;
+        /** class of `div` wrapping page numbers */ pageNumberClass?: string | undefined;
+        /** class of `div` that wraps the "Previous" and "Next" buttons */ pageControlsClass?: 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,8 +44,14 @@ export type DataTableSlots = typeof __propDef.slots;
  * @props
  *
  * - `ascending` - default sort order
+ * - `buttonClass` - button class
  * - `columns` - table columns, in order
+ * - `currentPage` - current page, defaults to `1`
  * - `data` - a list of objects to render in the table
+ * - `footerClass` - footer class
+ * - `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
+ * - `pageNumberClass` - class of `div` wrapping page numbers
+ * - `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
@@ -49,6 +64,13 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `tdClass` - td class
  * - `thClass` - th class
  *
+ * @slots
+ *
+ * | name       | purpose                  | default value |
+ * | ---------- | ------------------------ | ------------- |
+ * | `previous` | previous button contents | `Previous`    |
+ * | `next`     | next button contents     | `Next`        |
+ *
  * @example
  *
  * ```svelte
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "1.10.0",
+	"version": "1.10.1",
 	"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": {
 		".": {