drab 1.9.3

package/dist/components/DataTable.svelte

@@ -0,0 +1,128 @@
+<!--
+@component
+
+### DataTable
+
+Data table to display an array of JS objects. Click a column header to sort.
+
+@props
+
+- `ascending` - default sort order
+- `columns` - table columns, in order
+- `data` - a list of objects to render in the table
+- `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
+
+@example
+
+```svelte
+<script>
+	import { DataTable } from "@rossrobino/components";
+</script>
+
+<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 },
+	]}
+	sortBy="year"
+/>
+```
+-->
+
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+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 = "";
+const sort = (column, toggleAscending = true) => {
+  if (column === sortBy && toggleAscending) {
+    ascending = !ascending;
+  } else {
+    ascending = true;
+  }
+  data.sort((a, b) => {
+    const aVal = a[column];
+    const bVal = b[column];
+    if (typeof aVal === "number") {
+      if (ascending) {
+        return aVal - bVal;
+      } else {
+        return bVal - aVal;
+      }
+    } else if (typeof aVal === "string") {
+      const collator = new Intl.Collator();
+      if (ascending) {
+        return collator.compare(aVal, bVal);
+      } else {
+        return collator.compare(bVal, aVal);
+      }
+    } else if (typeof aVal === "boolean") {
+      if (ascending) {
+        return aVal === bVal ? 0 : aVal ? -1 : 1;
+      } else {
+        return aVal === bVal ? 0 : aVal ? 1 : -1;
+      }
+    } else
+      return 0;
+  });
+  data = data;
+  sortBy = column;
+};
+onMount(() => {
+  sort(sortBy, false);
+});
+</script>
+
+<table class={tableClass} id={tableId}>
+	<thead class={tHeadClass}>
+		<tr class={tHeadTrClass}>
+			{#each columns as column}
+				<th
+					class="{thClass} {sortBy === column ? sortedThClass : ''}"
+					on:click={() => sort(column)}
+				>
+					{column}
+				</th>
+			{/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>
+		{/each}
+	</tbody>
+</table>

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

@@ -0,0 +1,73 @@
+import { SvelteComponent } from "svelte";
+export type DataTableRow<T> = {
+    [K in keyof T]: T[K];
+};
+declare const __propDef: {
+    props: {
+        /** 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;
+        /** 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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableProps = typeof __propDef.props;
+export type DataTableEvents = typeof __propDef.events;
+export type DataTableSlots = typeof __propDef.slots;
+/**
+ * ### DataTable
+ *
+ * Data table to display an array of JS objects. Click a column header to sort.
+ *
+ * @props
+ *
+ * - `ascending` - default sort order
+ * - `columns` - table columns, in order
+ * - `data` - a list of objects to render in the table
+ * - `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
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ * import { DataTable } from "@rossrobino/components";
+ * </script>
+ *
+ * <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 },
+ * ]}
+ * sortBy="year"
+ * />
+ * ```
+ */
+export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
+}
+export {};

package/dist/components/Editor.svelte

@@ -0,0 +1,366 @@
+<!--
+@component
+
+### Editor
+
+Text editor with controls to add elements and keyboard shortcuts.
+
+@props
+
+- `buttonClass` - `class` of all the `button` elements
+- `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
+- `keyPairs` - keys that will auto-close if typed, value is their closing character
+- `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
+
+@example
+
+```svelte
+<script>
+	import { Editor } from "@rossrobino/components";
+</script>
+
+<Editor contentElements={[
+		{
+			name: "Bullet",
+			text: "- ",
+			display: "block",
+			icon: "Bullet",
+		},
+		{
+			name: "Asterisk",
+			text: "*",
+			display: "wrap",
+			icon: "Asterisk",
+			key: "i",
+			class: "italic",
+		},
+		{
+			name: "Anchor",
+			text: "[text](href)",
+			display: "inline",
+			icon: "Anchor",
+			key: "[",
+		},
+	]}
+/>
+```
+-->
+
+<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 selectionStart = 0;
+export let keyPairs = {
+  "(": ")",
+  "{": "}",
+  "[": "]",
+  "<": ">",
+  '"': '"',
+  "`": "`"
+};
+let textArea;
+contentElements.forEach((el) => {
+  if (el.display === "wrap")
+    keyPairs[el.text] = el.text;
+});
+let openChars = [];
+const insertChar = (str, char, index) => {
+  return str.slice(0, index) + char + str.slice(index);
+};
+const removeChar = (str, index) => {
+  return str.slice(0, index) + str.slice(index + 1);
+};
+const insertText = async (el, selectionStart2, selectionEnd) => {
+  if (el.display === "inline") {
+    textAreaValue = `${textAreaValue.slice(0, selectionEnd)}${el.text}${textAreaValue.slice(selectionEnd)}`;
+  } else if (el.display === "wrap") {
+    textAreaValue = insertChar(textAreaValue, el.text, selectionStart2);
+    textAreaValue = insertChar(
+      textAreaValue,
+      keyPairs[el.text],
+      selectionEnd + el.text.length
+    );
+    if (el.text.length < 2)
+      openChars.push(el.text);
+  } else if (el.display === "block") {
+    const { lines, lineNumber } = getLineInfo();
+    if (lines[lineNumber].startsWith(el.text[0])) {
+      lines[lineNumber] = el.text.trim() + lines[lineNumber];
+    } else {
+      lines[lineNumber] = el.text + lines[lineNumber];
+    }
+    textAreaValue = 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)) {
+        if (!startPos) {
+          startPos = i;
+        } else {
+          endPos = i + 1;
+        }
+      } else if (startPos) {
+        break;
+      }
+    }
+  } else {
+    startPos = selectionStart2 + text.length;
+    endPos = selectionEnd + text.length;
+  }
+  textArea.setSelectionRange(startPos, endPos);
+  textArea.focus();
+};
+const addContent = async (el) => {
+  const selectionEnd = textArea.selectionEnd;
+  const selectionStart2 = textArea.selectionStart;
+  await insertText(el, selectionStart2, selectionEnd);
+  setCaretPosition(el.text, selectionStart2, selectionEnd);
+};
+const onKeyDown = async (e) => {
+  const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
+  const nextChar = textAreaValue[textArea.selectionEnd];
+  if (resetKeys.includes(e.key)) {
+    openChars = [];
+  } else if (e.key === "Backspace") {
+    const prevChar = textAreaValue[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);
+      setTimeout(() => {
+        textArea.setSelectionRange(start, end);
+      }, 0);
+      openChars.pop();
+    }
+    if (prevChar === "\n" && textArea.selectionStart === textArea.selectionEnd) {
+      e.preventDefault();
+      const newPos = textArea.selectionStart - 1;
+      const { lineNumber } = getLineInfo();
+      correctFollowing(lineNumber, true);
+      textAreaValue = removeChar(textAreaValue, newPos);
+      setTimeout(async () => {
+        textArea.setSelectionRange(newPos, newPos);
+      }, 0);
+    }
+  } else if (e.key === "Tab") {
+    if (getCurrentBlock() % 2 !== 0) {
+      e.preventDefault();
+      await addContent({
+        display: "inline",
+        text: "	",
+        icon: "tab",
+        name: "tab"
+      });
+    }
+  } else if (e.key === "Enter") {
+    const { lines, lineNumber, columnNumber } = getLineInfo();
+    const currentLine = lines[lineNumber];
+    let repeat = getRepeat(currentLine);
+    const original = repeat;
+    const num = startsWithNumberAndPeriod(repeat);
+    if (num)
+      repeat = `${num + 1}. `;
+    if (repeat && original.length < columnNumber) {
+      e.preventDefault();
+      if (num)
+        correctFollowing(lineNumber);
+      await addContent({
+        display: "inline",
+        text: `
+${repeat}`,
+        icon: "",
+        name: ""
+      });
+    } else if (repeat && original.length === columnNumber) {
+      e.preventDefault();
+      const selectionEnd = textArea.selectionEnd;
+      const newPos = selectionEnd - original.length;
+      for (let i = 0; i < original.length; i++) {
+        textAreaValue = removeChar(
+          textAreaValue,
+          textArea.selectionEnd - (i + 1)
+        );
+      }
+      setTimeout(async () => {
+        textArea.setSelectionRange(newPos, newPos);
+        textArea.focus();
+        await addContent({
+          display: "inline",
+          text: `
+`,
+          icon: "",
+          name: ""
+        });
+      }, 0);
+    }
+  } else {
+    const nextCharIsClosing = Object.values(keyPairs).includes(nextChar);
+    const highlighted = textArea.selectionStart !== textArea.selectionEnd;
+    if (e.ctrlKey && e.key) {
+      const matchedEl = contentElements.find((el) => el.key === e.key);
+      if (matchedEl)
+        addContent(matchedEl);
+    } else if (nextCharIsClosing && (nextChar === e.key || e.key === "ArrowRight") && openChars.length && !highlighted) {
+      e.preventDefault();
+      textArea.setSelectionRange(
+        textArea.selectionStart + 1,
+        textArea.selectionEnd + 1
+      );
+      openChars.pop();
+    } else if (e.key in keyPairs) {
+      e.preventDefault();
+      await addContent({
+        display: "wrap",
+        text: e.key,
+        icon: "",
+        name: ""
+      });
+      openChars.push(e.key);
+    }
+  }
+};
+const trimSelection = () => {
+  if (textArea.selectionStart !== textArea.selectionEnd) {
+    if (textAreaValue[textArea.selectionStart] === " ") {
+      textArea.setSelectionRange(
+        textArea.selectionStart + 1,
+        textArea.selectionEnd
+      );
+    }
+    if (textAreaValue[textArea.selectionEnd - 1] === " ") {
+      textArea.setSelectionRange(
+        textArea.selectionStart,
+        textArea.selectionEnd - 1
+      );
+    }
+  }
+};
+const updateSelectionStart = () => {
+  selectionStart = textArea.selectionStart;
+};
+const getLineInfo = () => {
+  const lines = textAreaValue.split("\n");
+  let characterCount = 0;
+  for (let i = 0; i < lines.length; i++) {
+    characterCount++;
+    characterCount += lines[i].length;
+    if (characterCount > textArea.selectionEnd) {
+      return {
+        lines,
+        lineNumber: i,
+        columnNumber: textArea.selectionEnd - (characterCount - lines[i].length - 1)
+      };
+    }
+  }
+  return { lines, lineNumber: 0, columnNumber: 0 };
+};
+const getCurrentBlock = () => {
+  const blocks = textAreaValue.split("```");
+  let totalChars = 0;
+  for (const [i, block] of blocks.entries()) {
+    totalChars += block.length + 3;
+    if (textArea.selectionStart < totalChars) {
+      return i;
+    }
+  }
+  return 0;
+};
+const getRepeat = (str) => {
+  const blockStrings = [];
+  contentElements.forEach((el) => {
+    if (el.display === "block")
+      blockStrings.push(el.text);
+  });
+  for (let i = 0; i < blockStrings.length; i++) {
+    const repeatString = blockStrings[i];
+    if (str.startsWith(repeatString)) {
+      return repeatString;
+    }
+  }
+  const repeatNum = startsWithNumberAndPeriod(str);
+  if (repeatNum)
+    return `${repeatNum}. `;
+  return "";
+};
+const startsWithNumberAndPeriod = (str) => {
+  const result = str.match(/^(\d+)\./);
+  return result ? Number(result[1]) : null;
+};
+const correctFollowing = (currentLineNumber, decrement = false) => {
+  const { lines } = getLineInfo();
+  for (let i = currentLineNumber + 1; i < lines.length; i++) {
+    const num = startsWithNumberAndPeriod(lines[i]);
+    if (!num) {
+      break;
+    } else {
+      let newNum;
+      if (decrement) {
+        if (num > 1) {
+          newNum = num - 1;
+        } else {
+          break;
+        }
+      } else {
+        newNum = num + 1;
+      }
+      lines[i] = lines[i].slice(String(num).length);
+      lines[i] = String(newNum) + lines[i];
+    }
+  }
+  textAreaValue = lines.join("\n");
+};
+</script>
+
+<textarea
+	id={textAreaId}
+	class={textAreaClass}
+	name={textAreaName}
+	placeholder={textAreaPlaceholder}
+	on:keydown={onKeyDown}
+	on:keyup={updateSelectionStart}
+	on:dblclick={trimSelection}
+	bind:value={textAreaValue}
+	bind:this={textArea}
+	on:click={() => {
+		openChars = [];
+		updateSelectionStart();
+	}}
+	on:input
+/>
+<div id={controlsId} class={controlsClass}>
+	{#each contentElements as el}
+		<button
+			class={el.class ? `${buttonClass} ${el.class}` : buttonClass}
+			on:click={() => addContent(el)}
+			title={el.name}
+			aria-label={el.name}
+		>
+			{#if typeof el.icon !== "string"}
+				<svelte:component this={el.icon} />
+			{:else}
+				{el.icon}
+			{/if}
+		</button>
+	{/each}
+</div>

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

@@ -0,0 +1,102 @@
+import { SvelteComponent } from "svelte";
+/**
+ * - `EditorContentElement` to pass into the `contentElements` array prop
+ * - `contentElements` prop creates a list of button controls to insert
+ * text into the `TextAreaElement`
+ */
+export interface EditorContentElement {
+    /** name of element */
+    name: string;
+    /** text to add */
+    text: string;
+    /** controls how the text is added */
+    display: "inline" | "block" | "wrap";
+    /** contents of the button */
+    icon: string | ComponentType;
+    /** keyboard shortcut */
+    key?: string;
+    /** class to apply to the specific button */
+    class?: string;
+}
+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;
+        /** `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;
+        } | undefined;
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
+/**
+ * ### Editor
+ *
+ * Text editor with controls to add elements and keyboard shortcuts.
+ *
+ * @props
+ *
+ * - `buttonClass` - `class` of all the `button` elements
+ * - `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
+ * - `keyPairs` - keys that will auto-close if typed, value is their closing character
+ * - `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
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ * import { Editor } from "@rossrobino/components";
+ * </script>
+ *
+ * <Editor contentElements={[
+ * 	{
+ * 		name: "Bullet",
+ * 		text: "- ",
+ * 		display: "block",
+ * 		icon: "Bullet",
+ * 	},
+ * 	{
+ * 		name: "Asterisk",
+ * 		text: "*",
+ * 		display: "wrap",
+ * 		icon: "Asterisk",
+ * 		key: "i",
+ * 		class: "italic",
+ * 	},
+ * 	{
+ * 		name: "Anchor",
+ * 		text: "[text](href)",
+ * 		display: "inline",
+ * 		icon: "Anchor",
+ * 		key: "[",
+ * 	},
+ * ]}
+ * />
+ * ```
+ */
+export default class Editor extends SvelteComponent<EditorProps, EditorEvents, EditorSlots> {
+}
+export {};