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
|
-
- `
|
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
|
-
- `
|
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
|
68
|
-
export let
|
69
|
-
export let
|
70
|
-
export let
|
71
|
-
export let
|
72
|
-
export let
|
73
|
-
export let
|
74
|
-
export let
|
75
|
-
export let
|
76
|
-
export let
|
77
|
-
export let
|
78
|
-
export let
|
79
|
-
export let
|
80
|
-
export let
|
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={
|
123
|
-
<thead class={
|
124
|
-
<tr class={
|
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="{
|
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={
|
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={
|
140
|
+
<tr class={classTbodyTr}>
|
141
141
|
{#each columns as column}
|
142
|
-
<td class="{
|
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={
|
154
|
-
<div class={
|
155
|
-
<div class={
|
153
|
+
<div class={classFooter}>
|
154
|
+
<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
|
155
|
+
<div class={classPageControls}>
|
156
156
|
<button
|
157
|
-
class={
|
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={
|
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 */
|
12
|
-
/** table id */
|
13
|
-
/** thead class */
|
14
|
-
/** tbody class */
|
15
|
-
/** thead tr class */
|
16
|
-
/** tbody tr class */
|
17
|
-
/** th class */
|
18
|
-
/** td class */
|
19
|
-
/** currently sorted th */
|
20
|
-
/** currently sorted td */
|
21
|
-
/** button class */
|
22
|
-
/** footer class */
|
23
|
-
/** class of `div` wrapping page numbers */
|
24
|
-
/** class of `div` that wraps the "Previous" and "Next" buttons */
|
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
|
-
* - `
|
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
|
-
* - `
|
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
|
-
- `
|
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
|
-
- `
|
13
|
-
- `
|
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
|
-
- `
|
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
|
60
|
-
export let
|
61
|
-
export let
|
62
|
-
export let
|
63
|
-
export let
|
64
|
-
export let
|
65
|
-
export let
|
66
|
-
export let
|
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
|
-
|
90
|
+
valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
|
91
91
|
} else if (el.display === "wrap") {
|
92
|
-
|
93
|
-
|
94
|
-
|
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
|
-
|
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 <
|
115
|
-
if (
|
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 =
|
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 =
|
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
|
-
|
150
|
-
|
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
|
-
|
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
|
-
|
201
|
-
|
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 (
|
245
|
+
if (valueTextarea[textArea.selectionStart] === " ") {
|
246
246
|
textArea.setSelectionRange(
|
247
247
|
textArea.selectionStart + 1,
|
248
248
|
textArea.selectionEnd
|
249
249
|
);
|
250
250
|
}
|
251
|
-
if (
|
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 =
|
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 =
|
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
|
-
|
331
|
+
valueTextarea = lines.join("\n");
|
332
332
|
};
|
333
333
|
</script>
|
334
334
|
|
335
335
|
<textarea
|
336
|
-
id={
|
337
|
-
class={
|
338
|
-
name={
|
339
|
-
placeholder={
|
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={
|
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={
|
351
|
+
<div id={idControls} class={classControls}>
|
352
352
|
{#each contentElements as el}
|
353
353
|
<button
|
354
|
-
class={el.class ? `${
|
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 */
|
26
|
-
/** `placeholder` of the `textarea` element */
|
27
|
-
/** `class` of the `textarea` element */
|
28
|
-
/** `id` of the `textarea` element */
|
29
|
-
/** `name` of the `textarea` element */
|
30
|
-
/** `class` of all the `button` elements */
|
31
|
-
/** `class` of the `div` that wraps the controls */
|
32
|
-
/** `id` of the `div` that wraps the controls */
|
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
|
-
* - `
|
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
|
-
* - `
|
58
|
-
* - `
|
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
|
-
* - `
|
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
|
*
|