drab 1.10.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,25 +8,25 @@ Data table to display an array of JS objects. Click a column header to sort.
8
8
  @props
9
9
 
10
10
  - `ascending` - default sort order
11
- - `buttonClass` - button class
11
+ - `classButton` - button class
12
+ - `classFooter` - footer class
13
+ - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
14
+ - `classPageNumber` - class of `div` wrapping page numbers
15
+ - `classTable` - table class
16
+ - `classTbodyTr` - tbody tr class
17
+ - `classTbody` - tbody class
18
+ - `classTdSorted` - currently sorted td
19
+ - `classTd` - td class
20
+ - `classThSorted` - currently sorted th
21
+ - `classTh` - th class
22
+ - `classTheadTr` - thead tr class
23
+ - `classThead` - thead class
12
24
  - `columns` - table columns, in order
13
25
  - `currentPage` - current page, defaults to `1`
14
26
  - `data` - a list of objects to render in the table
15
- - `footerClass` - footer class
16
- - `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
17
- - `pageNumberClass` - class of `div` wrapping page numbers
27
+ - `idTable` - table id
18
28
  - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
19
29
  - `sortBy` - column to sort by--defaults to first column
20
- - `sortedTdClass` - currently sorted td
21
- - `sortedThClass` - currently sorted th
22
- - `tBodyClass` - tbody class
23
- - `tBodyTrClass` - tbody tr class
24
- - `tHeadClass` - thead class
25
- - `tHeadTrClass` - thead tr class
26
- - `tableClass` - table class
27
- - `tableId` - table id
28
- - `tdClass` - td class
29
- - `thClass` - th class
30
30
 
31
31
  @slots
32
32
 
@@ -64,20 +64,20 @@ if (!columns.length && data[0]) {
64
64
  }
65
65
  export let sortBy = columns[0];
66
66
  export let ascending = true;
67
- export let tableClass = "";
68
- export let tableId = "";
69
- export let tHeadClass = "";
70
- export let tBodyClass = "";
71
- export let tHeadTrClass = "";
72
- export let tBodyTrClass = "";
73
- export let thClass = "";
74
- export let tdClass = "";
75
- export let sortedThClass = "";
76
- export let sortedTdClass = "";
77
- export let buttonClass = "";
78
- export let footerClass = "";
79
- export let pageNumberClass = "";
80
- export let pageControlsClass = "";
67
+ export let classTable = "";
68
+ export let idTable = "";
69
+ export let classThead = "";
70
+ export let classTbody = "";
71
+ export let classTheadTr = "";
72
+ export let classTbodyTr = "";
73
+ export let classTh = "";
74
+ export let classTd = "";
75
+ export let classThSorted = "";
76
+ export let classTdSorted = "";
77
+ export let classButton = "";
78
+ export let classFooter = "";
79
+ export let classPageNumber = "";
80
+ export let classPageControls = "";
81
81
  export let paginate = 0;
82
82
  export let currentPage = 1;
83
83
  $:
@@ -119,12 +119,12 @@ const sort = (column, toggleAscending = true) => {
119
119
  sort(sortBy, false);
120
120
  </script>
121
121
 
122
- <table class={tableClass} id={tableId}>
123
- <thead class={tHeadClass}>
124
- <tr class={tHeadTrClass}>
122
+ <table class={classTable} id={idTable}>
123
+ <thead class={classThead}>
124
+ <tr class={classTheadTr}>
125
125
  {#each columns as column}
126
126
  <th
127
- class="{thClass} {sortBy === column ? sortedThClass : ''}"
127
+ class="{classTh} {sortBy === column ? classThSorted : ''}"
128
128
  on:click={() => sort(column)}
129
129
  >
130
130
  {column}
@@ -132,14 +132,14 @@ sort(sortBy, false);
132
132
  {/each}
133
133
  </tr>
134
134
  </thead>
135
- <tbody class={tBodyClass}>
135
+ <tbody class={classTbody}>
136
136
  {#each data as row, i}
137
137
  {@const showRow =
138
138
  i < paginate * currentPage && i >= paginate * (currentPage - 1)}
139
139
  {#if paginate ? showRow : true}
140
- <tr class={tBodyTrClass}>
140
+ <tr class={classTbodyTr}>
141
141
  {#each columns as column}
142
- <td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
142
+ <td class="{classTd} {sortBy === column ? classTdSorted : ''}">
143
143
  {row[column]}
144
144
  </td>
145
145
  {/each}
@@ -150,18 +150,18 @@ sort(sortBy, false);
150
150
  </table>
151
151
 
152
152
  {#if paginate}
153
- <div class={footerClass}>
154
- <div class={pageNumberClass}>{currentPage} / {numberOfPages}</div>
155
- <div class={pageControlsClass}>
153
+ <div class={classFooter}>
154
+ <div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
155
+ <div class={classPageControls}>
156
156
  <button
157
- class={buttonClass}
157
+ class={classButton}
158
158
  disabled={currentPage < 2}
159
159
  on:click={() => currentPage--}
160
160
  >
161
161
  <slot name="previous">Previous</slot>
162
162
  </button>
163
163
  <button
164
- class={buttonClass}
164
+ class={classButton}
165
165
  disabled={currentPage >= numberOfPages}
166
166
  on:click={() => currentPage++}
167
167
  >
@@ -8,20 +8,20 @@ declare const __propDef: {
8
8
  /** table columns, in order */ columns?: string[] | undefined;
9
9
  /** column to sort by--defaults to first column */ sortBy?: string | undefined;
10
10
  /** default sort order */ ascending?: boolean | undefined;
11
- /** table class */ tableClass?: string | undefined;
12
- /** table id */ tableId?: string | undefined;
13
- /** thead class */ tHeadClass?: string | undefined;
14
- /** tbody class */ tBodyClass?: string | undefined;
15
- /** thead tr class */ tHeadTrClass?: string | undefined;
16
- /** tbody tr class */ tBodyTrClass?: string | undefined;
17
- /** th class */ thClass?: string | undefined;
18
- /** td class */ tdClass?: string | undefined;
19
- /** currently sorted th */ sortedThClass?: string | undefined;
20
- /** currently sorted td */ sortedTdClass?: string | undefined;
21
- /** button class */ buttonClass?: string | undefined;
22
- /** footer class */ footerClass?: string | undefined;
23
- /** class of `div` wrapping page numbers */ pageNumberClass?: string | undefined;
24
- /** class of `div` that wraps the "Previous" and "Next" buttons */ pageControlsClass?: string | undefined;
11
+ /** table class */ classTable?: string | undefined;
12
+ /** table id */ idTable?: string | undefined;
13
+ /** thead class */ classThead?: string | undefined;
14
+ /** tbody class */ classTbody?: string | undefined;
15
+ /** thead tr class */ classTheadTr?: string | undefined;
16
+ /** tbody tr class */ classTbodyTr?: string | undefined;
17
+ /** th class */ classTh?: string | undefined;
18
+ /** td class */ classTd?: string | undefined;
19
+ /** currently sorted th */ classThSorted?: string | undefined;
20
+ /** currently sorted td */ classTdSorted?: string | undefined;
21
+ /** button class */ classButton?: string | undefined;
22
+ /** footer class */ classFooter?: string | undefined;
23
+ /** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
24
+ /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
25
25
  /** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
26
26
  /** current page, defaults to `1` */ currentPage?: number | undefined;
27
27
  };
@@ -44,25 +44,25 @@ export type DataTableSlots = typeof __propDef.slots;
44
44
  * @props
45
45
  *
46
46
  * - `ascending` - default sort order
47
- * - `buttonClass` - button class
47
+ * - `classButton` - button class
48
+ * - `classFooter` - footer class
49
+ * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
50
+ * - `classPageNumber` - class of `div` wrapping page numbers
51
+ * - `classTable` - table class
52
+ * - `classTbodyTr` - tbody tr class
53
+ * - `classTbody` - tbody class
54
+ * - `classTdSorted` - currently sorted td
55
+ * - `classTd` - td class
56
+ * - `classThSorted` - currently sorted th
57
+ * - `classTh` - th class
58
+ * - `classTheadTr` - thead tr class
59
+ * - `classThead` - thead class
48
60
  * - `columns` - table columns, in order
49
61
  * - `currentPage` - current page, defaults to `1`
50
62
  * - `data` - a list of objects to render in the table
51
- * - `footerClass` - footer class
52
- * - `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
53
- * - `pageNumberClass` - class of `div` wrapping page numbers
63
+ * - `idTable` - table id
54
64
  * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
55
65
  * - `sortBy` - column to sort by--defaults to first column
56
- * - `sortedTdClass` - currently sorted td
57
- * - `sortedThClass` - currently sorted th
58
- * - `tBodyClass` - tbody class
59
- * - `tBodyTrClass` - tbody tr class
60
- * - `tHeadClass` - thead class
61
- * - `tHeadTrClass` - thead tr class
62
- * - `tableClass` - table class
63
- * - `tableId` - table id
64
- * - `tdClass` - td class
65
- * - `thClass` - th class
66
66
  *
67
67
  * @slots
68
68
  *
@@ -7,17 +7,17 @@ Text editor with controls to add elements and keyboard shortcuts.
7
7
 
8
8
  @props
9
9
 
10
- - `buttonClass` - `class` of all the `button` elements
10
+ - `classButton` - `class` of all the `button` elements
11
+ - `classControls` - `class` of the `div` that wraps the controls
12
+ - `classTextarea` - `class` of the `textarea` element
11
13
  - `contentElements` - an array of content elements for the controls
12
- - `controlsClass` - `class` of the `div` that wraps the controls
13
- - `controlsId` - `id` of the `div` that wraps the controls
14
+ - `idControls` - `id` of the `div` that wraps the controls
15
+ - `idTextarea` - `id` of the `textarea` element
14
16
  - `keyPairs` - keys that will auto-close if typed, value is their closing character
17
+ - `nameTextarea` - `name` of the `textarea` element
18
+ - `placeholderTextarea` - `placeholder` of the `textarea` element
15
19
  - `selectionStart` - `selectionStart` value of the text area
16
- - `textAreaClass` - `class` of the `textarea` element
17
- - `textAreaId` - `id` of the `textarea` element
18
- - `textAreaName` - `name` of the `textarea` element
19
- - `textAreaPlaceholder` - `placeholder` of the `textarea` element
20
- - `textAreaValue` - `value` of the `textarea` element
20
+ - `valueTextarea` - `value` of the `textarea` element
21
21
 
22
22
  @example
23
23
 
@@ -56,14 +56,14 @@ Text editor with controls to add elements and keyboard shortcuts.
56
56
  <script context="module"></script>
57
57
 
58
58
  <script>export let contentElements = [];
59
- export let textAreaValue = "";
60
- export let textAreaPlaceholder = "";
61
- export let textAreaClass = "";
62
- export let textAreaId = "";
63
- export let textAreaName = "";
64
- export let buttonClass = "";
65
- export let controlsClass = "";
66
- export let controlsId = "";
59
+ export let valueTextarea = "";
60
+ export let placeholderTextarea = "";
61
+ export let classTextarea = "";
62
+ export let idTextarea = "";
63
+ export let nameTextarea = "";
64
+ export let classButton = "";
65
+ export let classControls = "";
66
+ export let idControls = "";
67
67
  export let selectionStart = 0;
68
68
  export let keyPairs = {
69
69
  "(": ")",
@@ -87,11 +87,11 @@ const removeChar = (str, index) => {
87
87
  };
88
88
  const insertText = async (el, selectionStart2, selectionEnd) => {
89
89
  if (el.display === "inline") {
90
- textAreaValue = `${textAreaValue.slice(0, selectionEnd)}${el.text}${textAreaValue.slice(selectionEnd)}`;
90
+ valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
91
91
  } else if (el.display === "wrap") {
92
- textAreaValue = insertChar(textAreaValue, el.text, selectionStart2);
93
- textAreaValue = insertChar(
94
- textAreaValue,
92
+ valueTextarea = insertChar(valueTextarea, el.text, selectionStart2);
93
+ valueTextarea = insertChar(
94
+ valueTextarea,
95
95
  keyPairs[el.text],
96
96
  selectionEnd + el.text.length
97
97
  );
@@ -104,15 +104,15 @@ const insertText = async (el, selectionStart2, selectionEnd) => {
104
104
  } else {
105
105
  lines[lineNumber] = el.text + lines[lineNumber];
106
106
  }
107
- textAreaValue = lines.join("\n");
107
+ valueTextarea = lines.join("\n");
108
108
  }
109
109
  };
110
110
  const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
111
111
  let startPos = 0;
112
112
  let endPos = 0;
113
113
  if (/[a-z]/i.test(text)) {
114
- for (let i = selectionEnd; i < textAreaValue.length; i++) {
115
- if (textAreaValue[i].match(/[a-z]/i)) {
114
+ for (let i = selectionEnd; i < valueTextarea.length; i++) {
115
+ if (valueTextarea[i].match(/[a-z]/i)) {
116
116
  if (!startPos) {
117
117
  startPos = i;
118
118
  } else {
@@ -137,17 +137,17 @@ const addContent = async (el) => {
137
137
  };
138
138
  const onKeyDown = async (e) => {
139
139
  const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
140
- const nextChar = textAreaValue[textArea.selectionEnd];
140
+ const nextChar = valueTextarea[textArea.selectionEnd];
141
141
  if (resetKeys.includes(e.key)) {
142
142
  openChars = [];
143
143
  } else if (e.key === "Backspace") {
144
- const prevChar = textAreaValue[textArea.selectionStart - 1];
144
+ const prevChar = valueTextarea[textArea.selectionStart - 1];
145
145
  if (prevChar in keyPairs && nextChar === keyPairs[prevChar]) {
146
146
  e.preventDefault();
147
147
  const start = textArea.selectionStart - 1;
148
148
  const end = textArea.selectionEnd - 1;
149
- textAreaValue = removeChar(textAreaValue, start);
150
- textAreaValue = removeChar(textAreaValue, end);
149
+ valueTextarea = removeChar(valueTextarea, start);
150
+ valueTextarea = removeChar(valueTextarea, end);
151
151
  setTimeout(() => {
152
152
  textArea.setSelectionRange(start, end);
153
153
  }, 0);
@@ -158,7 +158,7 @@ const onKeyDown = async (e) => {
158
158
  const newPos = textArea.selectionStart - 1;
159
159
  const { lineNumber } = getLineInfo();
160
160
  correctFollowing(lineNumber, true);
161
- textAreaValue = removeChar(textAreaValue, newPos);
161
+ valueTextarea = removeChar(valueTextarea, newPos);
162
162
  setTimeout(async () => {
163
163
  textArea.setSelectionRange(newPos, newPos);
164
164
  }, 0);
@@ -197,8 +197,8 @@ ${repeat}`,
197
197
  const selectionEnd = textArea.selectionEnd;
198
198
  const newPos = selectionEnd - original.length;
199
199
  for (let i = 0; i < original.length; i++) {
200
- textAreaValue = removeChar(
201
- textAreaValue,
200
+ valueTextarea = removeChar(
201
+ valueTextarea,
202
202
  textArea.selectionEnd - (i + 1)
203
203
  );
204
204
  }
@@ -242,13 +242,13 @@ ${repeat}`,
242
242
  };
243
243
  const trimSelection = () => {
244
244
  if (textArea.selectionStart !== textArea.selectionEnd) {
245
- if (textAreaValue[textArea.selectionStart] === " ") {
245
+ if (valueTextarea[textArea.selectionStart] === " ") {
246
246
  textArea.setSelectionRange(
247
247
  textArea.selectionStart + 1,
248
248
  textArea.selectionEnd
249
249
  );
250
250
  }
251
- if (textAreaValue[textArea.selectionEnd - 1] === " ") {
251
+ if (valueTextarea[textArea.selectionEnd - 1] === " ") {
252
252
  textArea.setSelectionRange(
253
253
  textArea.selectionStart,
254
254
  textArea.selectionEnd - 1
@@ -260,7 +260,7 @@ const updateSelectionStart = () => {
260
260
  selectionStart = textArea.selectionStart;
261
261
  };
262
262
  const getLineInfo = () => {
263
- const lines = textAreaValue.split("\n");
263
+ const lines = valueTextarea.split("\n");
264
264
  let characterCount = 0;
265
265
  for (let i = 0; i < lines.length; i++) {
266
266
  characterCount++;
@@ -276,7 +276,7 @@ const getLineInfo = () => {
276
276
  return { lines, lineNumber: 0, columnNumber: 0 };
277
277
  };
278
278
  const getCurrentBlock = () => {
279
- const blocks = textAreaValue.split("```");
279
+ const blocks = valueTextarea.split("```");
280
280
  let totalChars = 0;
281
281
  for (const [i, block] of blocks.entries()) {
282
282
  totalChars += block.length + 3;
@@ -328,19 +328,19 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
328
328
  lines[i] = String(newNum) + lines[i];
329
329
  }
330
330
  }
331
- textAreaValue = lines.join("\n");
331
+ valueTextarea = lines.join("\n");
332
332
  };
333
333
  </script>
334
334
 
335
335
  <textarea
336
- id={textAreaId}
337
- class={textAreaClass}
338
- name={textAreaName}
339
- placeholder={textAreaPlaceholder}
336
+ id={idTextarea}
337
+ class={classTextarea}
338
+ name={nameTextarea}
339
+ placeholder={placeholderTextarea}
340
340
  on:keydown={onKeyDown}
341
341
  on:keyup={updateSelectionStart}
342
342
  on:dblclick={trimSelection}
343
- bind:value={textAreaValue}
343
+ bind:value={valueTextarea}
344
344
  bind:this={textArea}
345
345
  on:click={() => {
346
346
  openChars = [];
@@ -348,10 +348,10 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
348
348
  }}
349
349
  on:input
350
350
  />
351
- <div id={controlsId} class={controlsClass}>
351
+ <div id={idControls} class={classControls}>
352
352
  {#each contentElements as el}
353
353
  <button
354
- class={el.class ? `${buttonClass} ${el.class}` : buttonClass}
354
+ class={el.class ? `${classButton} ${el.class}` : classButton}
355
355
  on:click={() => addContent(el)}
356
356
  title={el.name}
357
357
  aria-label={el.name}
@@ -22,14 +22,14 @@ import type { ComponentType } from "svelte";
22
22
  declare const __propDef: {
23
23
  props: {
24
24
  /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;
25
- /** `value` of the `textarea` element */ textAreaValue?: string | undefined;
26
- /** `placeholder` of the `textarea` element */ textAreaPlaceholder?: string | undefined;
27
- /** `class` of the `textarea` element */ textAreaClass?: string | undefined;
28
- /** `id` of the `textarea` element */ textAreaId?: string | undefined;
29
- /** `name` of the `textarea` element */ textAreaName?: string | undefined;
30
- /** `class` of all the `button` elements */ buttonClass?: string | undefined;
31
- /** `class` of the `div` that wraps the controls */ controlsClass?: string | undefined;
32
- /** `id` of the `div` that wraps the controls */ controlsId?: string | undefined;
25
+ /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
26
+ /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
27
+ /** `class` of the `textarea` element */ classTextarea?: string | undefined;
28
+ /** `id` of the `textarea` element */ idTextarea?: string | undefined;
29
+ /** `name` of the `textarea` element */ nameTextarea?: string | undefined;
30
+ /** `class` of all the `button` elements */ classButton?: string | undefined;
31
+ /** `class` of the `div` that wraps the controls */ classControls?: string | undefined;
32
+ /** `id` of the `div` that wraps the controls */ idControls?: string | undefined;
33
33
  /** `selectionStart` value of the text area */ selectionStart?: number | undefined;
34
34
  /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
35
35
  [key: string]: string;
@@ -52,17 +52,17 @@ export type EditorSlots = typeof __propDef.slots;
52
52
  *
53
53
  * @props
54
54
  *
55
- * - `buttonClass` - `class` of all the `button` elements
55
+ * - `classButton` - `class` of all the `button` elements
56
+ * - `classControls` - `class` of the `div` that wraps the controls
57
+ * - `classTextarea` - `class` of the `textarea` element
56
58
  * - `contentElements` - an array of content elements for the controls
57
- * - `controlsClass` - `class` of the `div` that wraps the controls
58
- * - `controlsId` - `id` of the `div` that wraps the controls
59
+ * - `idControls` - `id` of the `div` that wraps the controls
60
+ * - `idTextarea` - `id` of the `textarea` element
59
61
  * - `keyPairs` - keys that will auto-close if typed, value is their closing character
62
+ * - `nameTextarea` - `name` of the `textarea` element
63
+ * - `placeholderTextarea` - `placeholder` of the `textarea` element
60
64
  * - `selectionStart` - `selectionStart` value of the text area
61
- * - `textAreaClass` - `class` of the `textarea` element
62
- * - `textAreaId` - `id` of the `textarea` element
63
- * - `textAreaName` - `name` of the `textarea` element
64
- * - `textAreaPlaceholder` - `placeholder` of the `textarea` element
65
- * - `textAreaValue` - `value` of the `textarea` element
65
+ * - `valueTextarea` - `value` of the `textarea` element
66
66
  *
67
67
  * @example
68
68
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "1.10.1",
3
+ "version": "2.0.0",
4
4
  "description": "An unstyled Svelte component library",
5
5
  "keywords": [
6
6
  "components",