drab 1.10.1 → 2.0.0

package/dist/components/DataTable.svelte

@@ -8,25 +8,25 @@ Data table to display an array of JS objects. Click a column header to sort.
 @props
 
 - `ascending` - default sort order
-- `buttonClass` - button class
+- `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
-- `footerClass` - footer class
-- `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
-- `pageNumberClass` - class of `div` wrapping page numbers
+- `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
 
@@ -64,20 +64,20 @@ if (!columns.length && 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 buttonClass = "";
-export let footerClass = "";
-export let pageNumberClass = "";
-export let pageControlsClass = "";
+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;
 $:
@@ -119,12 +119,12 @@ const sort = (column, toggleAscending = true) => {
 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}
@@ -132,14 +132,14 @@ sort(sortBy, false);
 			{/each}
 		</tr>
 	</thead>
-	<tbody class={tBodyClass}>
+	<tbody class={classTbody}>
 		{#each data as row, i}
 			{@const showRow =
 				i < paginate * currentPage && i >= paginate * (currentPage - 1)}
 			{#if paginate ? showRow : true}
-				<tr class={tBodyTrClass}>
+				<tr class={classTbodyTr}>
 					{#each columns as column}
-						<td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
+						<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
 							{row[column]}
 						</td>
 					{/each}
@@ -150,18 +150,18 @@ sort(sortBy, false);
 </table>
 
 {#if paginate}
-	<div class={footerClass}>
-		<div class={pageNumberClass}>{currentPage} / {numberOfPages}</div>
-		<div class={pageControlsClass}>
+	<div class={classFooter}>
+		<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
+		<div class={classPageControls}>
 			<button
-				class={buttonClass}
+				class={classButton}
 				disabled={currentPage < 2}
 				on:click={() => currentPage--}
 			>
 				<slot name="previous">Previous</slot>
 			</button>
 			<button
-				class={buttonClass}
+				class={classButton}
 				disabled={currentPage >= numberOfPages}
 				on:click={() => currentPage++}
 			>

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

@@ -8,20 +8,20 @@ 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;
-        /** 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;
+        /** 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;
     };
@@ -44,25 +44,25 @@ export type DataTableSlots = typeof __propDef.slots;
  * @props
  *
  * - `ascending` - default sort order
- * - `buttonClass` - button class
+ * - `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
- * - `footerClass` - footer class
- * - `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
- * - `pageNumberClass` - class of `div` wrapping page numbers
+ * - `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
  *

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.1",
+	"version": "2.0.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",