drab 1.10.0 → 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.
package/README.md
CHANGED
@@ -2,34 +2,8 @@
|
|
2
2
|
|
3
3
|
## An unstyled Svelte component library
|
4
4
|
|
5
|
-
### MIT License
|
6
|
-
|
7
|
-
### Install
|
8
|
-
|
9
|
-
```bash
|
10
|
-
npm create svelte@latest
|
11
|
-
```
|
12
|
-
|
13
|
-
```bash
|
14
|
-
npm i -D drab
|
15
|
-
```
|
16
|
-
|
17
|
-
### Use
|
18
|
-
|
19
|
-
```svelte
|
20
|
-
<script>
|
21
|
-
import { ShareButton } from "drab";
|
22
|
-
</script>
|
23
|
-
|
24
|
-
<ShareButton
|
25
|
-
text="Check out this page: "
|
26
|
-
title="drab"
|
27
|
-
url="https://drab.robino.dev"
|
28
|
-
/>
|
29
|
-
```
|
30
|
-
|
31
|
-
### Preview
|
32
|
-
|
33
5
|
[drab.robino.dev](https://drab.robino.dev)
|
34
6
|
|
7
|
+
### MIT License
|
8
|
+
|
35
9
|
### Open to contributions
|
@@ -8,19 +8,32 @@ 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
|
+
- `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
|
11
24
|
- `columns` - table columns, in order
|
25
|
+
- `currentPage` - current page, defaults to `1`
|
12
26
|
- `data` - a list of objects to render in the table
|
27
|
+
- `idTable` - table id
|
28
|
+
- `paginate` - number of rows to show on each page, defaults to `0` - no pagination
|
13
29
|
- `sortBy` - column to sort by--defaults to first column
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
- `tableId` - table id
|
22
|
-
- `tdClass` - td class
|
23
|
-
- `thClass` - th class
|
30
|
+
|
31
|
+
@slots
|
32
|
+
|
33
|
+
| name | purpose | default value |
|
34
|
+
| ---------- | ------------------------ | ------------- |
|
35
|
+
| `previous` | previous button contents | `Previous` |
|
36
|
+
| `next` | next button contents | `Next` |
|
24
37
|
|
25
38
|
@example
|
26
39
|
|
@@ -37,31 +50,38 @@ Data table to display an array of JS objects. Click a column header to sort.
|
|
37
50
|
{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
|
38
51
|
{ make: "Ford", model: "Model A", year: 1931, awd: false },
|
39
52
|
]}
|
40
|
-
sortBy="
|
53
|
+
sortBy="make"
|
41
54
|
/>
|
42
55
|
```
|
43
56
|
-->
|
44
57
|
|
45
58
|
<script context="module"></script>
|
46
59
|
|
47
|
-
<script>
|
48
|
-
export let data;
|
60
|
+
<script>export let data;
|
49
61
|
export let columns = [];
|
50
62
|
if (!columns.length && data[0]) {
|
51
63
|
columns = Object.keys(data[0]);
|
52
64
|
}
|
53
65
|
export let sortBy = columns[0];
|
54
66
|
export let ascending = true;
|
55
|
-
export let
|
56
|
-
export let
|
57
|
-
export let
|
58
|
-
export let
|
59
|
-
export let
|
60
|
-
export let
|
61
|
-
export let
|
62
|
-
export let
|
63
|
-
export let
|
64
|
-
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
|
+
export let paginate = 0;
|
82
|
+
export let currentPage = 1;
|
83
|
+
$:
|
84
|
+
numberOfPages = Math.floor(data.length / paginate) + 1;
|
65
85
|
const sort = (column, toggleAscending = true) => {
|
66
86
|
if (column === sortBy && toggleAscending) {
|
67
87
|
ascending = !ascending;
|
@@ -96,17 +116,15 @@ const sort = (column, toggleAscending = true) => {
|
|
96
116
|
data = data;
|
97
117
|
sortBy = column;
|
98
118
|
};
|
99
|
-
|
100
|
-
sort(sortBy, false);
|
101
|
-
});
|
119
|
+
sort(sortBy, false);
|
102
120
|
</script>
|
103
121
|
|
104
|
-
<table class={
|
105
|
-
<thead class={
|
106
|
-
<tr class={
|
122
|
+
<table class={classTable} id={idTable}>
|
123
|
+
<thead class={classThead}>
|
124
|
+
<tr class={classTheadTr}>
|
107
125
|
{#each columns as column}
|
108
126
|
<th
|
109
|
-
class="{
|
127
|
+
class="{classTh} {sortBy === column ? classThSorted : ''}"
|
110
128
|
on:click={() => sort(column)}
|
111
129
|
>
|
112
130
|
{column}
|
@@ -114,15 +132,41 @@ onMount(() => {
|
|
114
132
|
{/each}
|
115
133
|
</tr>
|
116
134
|
</thead>
|
117
|
-
<tbody class={
|
118
|
-
{#each data as row}
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
135
|
+
<tbody class={classTbody}>
|
136
|
+
{#each data as row, i}
|
137
|
+
{@const showRow =
|
138
|
+
i < paginate * currentPage && i >= paginate * (currentPage - 1)}
|
139
|
+
{#if paginate ? showRow : true}
|
140
|
+
<tr class={classTbodyTr}>
|
141
|
+
{#each columns as column}
|
142
|
+
<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
|
143
|
+
{row[column]}
|
144
|
+
</td>
|
145
|
+
{/each}
|
146
|
+
</tr>
|
147
|
+
{/if}
|
126
148
|
{/each}
|
127
149
|
</tbody>
|
128
150
|
</table>
|
151
|
+
|
152
|
+
{#if paginate}
|
153
|
+
<div class={classFooter}>
|
154
|
+
<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
|
155
|
+
<div class={classPageControls}>
|
156
|
+
<button
|
157
|
+
class={classButton}
|
158
|
+
disabled={currentPage < 2}
|
159
|
+
on:click={() => currentPage--}
|
160
|
+
>
|
161
|
+
<slot name="previous">Previous</slot>
|
162
|
+
</button>
|
163
|
+
<button
|
164
|
+
class={classButton}
|
165
|
+
disabled={currentPage >= numberOfPages}
|
166
|
+
on:click={() => currentPage++}
|
167
|
+
>
|
168
|
+
<slot name="next">Next</slot>
|
169
|
+
</button>
|
170
|
+
</div>
|
171
|
+
</div>
|
172
|
+
{/if}
|
@@ -8,21 +8,30 @@ 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 */
|
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
|
+
/** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
|
26
|
+
/** current page, defaults to `1` */ currentPage?: number | undefined;
|
21
27
|
};
|
22
28
|
events: {
|
23
29
|
[evt: string]: CustomEvent<any>;
|
24
30
|
};
|
25
|
-
slots: {
|
31
|
+
slots: {
|
32
|
+
previous: {};
|
33
|
+
next: {};
|
34
|
+
};
|
26
35
|
};
|
27
36
|
export type DataTableProps = typeof __propDef.props;
|
28
37
|
export type DataTableEvents = typeof __propDef.events;
|
@@ -35,19 +44,32 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
35
44
|
* @props
|
36
45
|
*
|
37
46
|
* - `ascending` - default sort order
|
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
|
38
60
|
* - `columns` - table columns, in order
|
61
|
+
* - `currentPage` - current page, defaults to `1`
|
39
62
|
* - `data` - a list of objects to render in the table
|
63
|
+
* - `idTable` - table id
|
64
|
+
* - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
|
40
65
|
* - `sortBy` - column to sort by--defaults to first column
|
41
|
-
*
|
42
|
-
*
|
43
|
-
*
|
44
|
-
*
|
45
|
-
*
|
46
|
-
*
|
47
|
-
*
|
48
|
-
* - `tableId` - table id
|
49
|
-
* - `tdClass` - td class
|
50
|
-
* - `thClass` - th class
|
66
|
+
*
|
67
|
+
* @slots
|
68
|
+
*
|
69
|
+
* | name | purpose | default value |
|
70
|
+
* | ---------- | ------------------------ | ------------- |
|
71
|
+
* | `previous` | previous button contents | `Previous` |
|
72
|
+
* | `next` | next button contents | `Next` |
|
51
73
|
*
|
52
74
|
* @example
|
53
75
|
*
|
@@ -64,7 +86,7 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
64
86
|
* { make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
|
65
87
|
* { make: "Ford", model: "Model A", year: 1931, awd: false },
|
66
88
|
* ]}
|
67
|
-
* sortBy="
|
89
|
+
* sortBy="make"
|
68
90
|
* />
|
69
91
|
* ```
|
70
92
|
*/
|
@@ -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
|
*
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"version": "
|
3
|
+
"version": "2.0.0",
|
4
4
|
"description": "An unstyled Svelte component library",
|
5
5
|
"keywords": [
|
6
6
|
"components",
|
@@ -23,7 +23,7 @@
|
|
23
23
|
"repository": "github:rossrobino/drab",
|
24
24
|
"scripts": {
|
25
25
|
"dev": "vite dev",
|
26
|
-
"build": "
|
26
|
+
"build": "npm run doc && vite build && npm run package",
|
27
27
|
"preview": "vite preview",
|
28
28
|
"package": "svelte-kit sync && svelte-package && publint",
|
29
29
|
"prepublishOnly": "npm run package",
|
@@ -31,7 +31,8 @@
|
|
31
31
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
32
32
|
"lint": "prettier --check . && eslint .",
|
33
33
|
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
|
34
|
-
"pub": "npm publish --access public"
|
34
|
+
"pub": "npm publish --access public",
|
35
|
+
"doc": "node src/lib/util/buildDocs.js"
|
35
36
|
},
|
36
37
|
"exports": {
|
37
38
|
".": {
|