drab 1.9.3 → 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/ContextMenu.svelte

@@ -21,7 +21,7 @@ Displays when the parent element is right clicked.
 
 ```svelte
 <script>
-    import { ContextMenu } from "@rossrobino/components";
+    import { ContextMenu } from "drab";
 </script>
 
 <div class="p-12 border border-dashed flex justify-center">

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

@@ -36,7 +36,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { ContextMenu } from "@rossrobino/components";
+ *    import { ContextMenu } from "drab";
  * </script>
  *
  * <div class="p-12 border border-dashed flex justify-center">

package/dist/components/CopyButton.svelte

@@ -23,10 +23,10 @@ Uses the navigator api to copy text to the clipboard.
 
 ```svelte
 <script>
-    import { CopyButton } from "@rossrobino/components";
+    import { CopyButton } from "drab";
 </script>
 
-<CopyButton	text="Text to copy" />
+<CopyButton text="Text to copy" />
 ```
 -->
 

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

@@ -40,10 +40,10 @@ export type CopyButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- * import { CopyButton } from "@rossrobino/components";
+ * import { CopyButton } from "drab";
  * </script>
  *
- * <CopyButton	text="Text to copy" />
+ * <CopyButton text="Text to copy" />
  * ```
  */
 export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {

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,11 +28,18 @@ 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
 <script>
-	import { DataTable } from "@rossrobino/components";
+	import { DataTable } from "drab";
 </script>
 
 <DataTable 
@@ -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,11 +64,18 @@ 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
  * <script>
- * import { DataTable } from "@rossrobino/components";
+ * import { DataTable } from "drab";
  * </script>
  *
  * <DataTable
@@ -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

@@ -23,7 +23,7 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 ```svelte
 <script>
-	import { Editor } from "@rossrobino/components";
+	import { Editor } from "drab";
 </script>
 
 <Editor contentElements={[

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

@@ -68,7 +68,7 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- * import { Editor } from "@rossrobino/components";
+ * import { Editor } from "drab";
  * </script>
  *
  * <Editor contentElements={[

package/dist/components/FullscreenButton.svelte

@@ -24,7 +24,7 @@ Make the document or a specific element fullscreen.
 
 ```svelte
 <script>
-	import { FullscreenButton } from "@rossrobino/components";
+	import { FullscreenButton } from "drab";
 
 	let fullscreenDiv;
 </script>

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

@@ -42,7 +42,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- * import { FullscreenButton } from "@rossrobino/components";
+ * import { FullscreenButton } from "drab";
  *
  * let fullscreenDiv;
  * </script>

package/dist/components/ShareButton.svelte

@@ -24,13 +24,13 @@ Uses the navigator api to share or copy a url link depending on browser support.
 
 ```svelte
 <script>
-    import { ShareButton } from "@rossrobino/components";
+    import { ShareButton } from "drab";
 </script>
 
 <ShareButton
 	text="Check out this page: "
-	title="@rossrobino/components"
-    url="https://components.robino.dev"
+	title="drab"
+    url="https://drab.robino.dev"
 />
 ```
 -->

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

@@ -42,13 +42,13 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { ShareButton } from "@rossrobino/components";
+ *    import { ShareButton } from "drab";
  * </script>
  *
  * <ShareButton
  * text="Check out this page: "
- * title="@rossrobino/components"
- *    url="https://components.robino.dev"
+ * title="drab"
+ *    url="https://drab.robino.dev"
  * />
  * ```
  */

package/dist/components/YouTube.svelte

@@ -18,7 +18,7 @@ Embeds a YouTube video into a website with the video `uid`, using [www.youtube-n
 
 ```svelte
 <script>
-	import { YouTube } from "@rossrobino/components";
+	import { YouTube } from "drab";
 </script>
 
 <YouTube title="Video Title" uid="youtube_uid" />

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

@@ -34,7 +34,7 @@ export type YouTubeSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- * import { YouTube } from "@rossrobino/components";
+ * import { YouTube } from "drab";
  * </script>
  *
  * <YouTube title="Video Title" uid="youtube_uid" />

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import Chord from "./components/Chord.svelte";
+import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
 import DataTable from "./components/DataTable.svelte";
 import type { DataTableRow } from "./components/DataTable.svelte";
@@ -7,4 +8,4 @@ import type { EditorContentElement } from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Chord, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, ShareButton, YouTube, };
+export { Chord, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, ShareButton, YouTube, };

package/dist/index.js

@@ -1,8 +1,9 @@
 import Chord from "./components/Chord.svelte";
+import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
 import DataTable from "./components/DataTable.svelte";
 import Editor from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Chord, CopyButton, DataTable, Editor, FullscreenButton, ShareButton, YouTube, };
+export { Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, ShareButton, YouTube, };

package/package.json

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