drab 1.9.3 → 1.10.1
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 +2 -28
- package/dist/components/ContextMenu.svelte +1 -1
- package/dist/components/ContextMenu.svelte.d.ts +1 -1
- package/dist/components/CopyButton.svelte +2 -2
- package/dist/components/CopyButton.svelte.d.ts +2 -2
- package/dist/components/DataTable.svelte +59 -15
- package/dist/components/DataTable.svelte.d.ts +25 -3
- package/dist/components/Editor.svelte +1 -1
- package/dist/components/Editor.svelte.d.ts +1 -1
- package/dist/components/FullscreenButton.svelte +1 -1
- package/dist/components/FullscreenButton.svelte.d.ts +1 -1
- package/dist/components/ShareButton.svelte +3 -3
- package/dist/components/ShareButton.svelte.d.ts +3 -3
- package/dist/components/YouTube.svelte +1 -1
- package/dist/components/YouTube.svelte.d.ts +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +4 -3
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
|
@@ -36,7 +36,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
|
|
36
36
|
*
|
37
37
|
* ```svelte
|
38
38
|
* <script>
|
39
|
-
* import { ContextMenu } from "
|
39
|
+
* import { ContextMenu } from "drab";
|
40
40
|
* </script>
|
41
41
|
*
|
42
42
|
* <div class="p-12 border border-dashed flex justify-center">
|
@@ -23,10 +23,10 @@ Uses the navigator api to copy text to the clipboard.
|
|
23
23
|
|
24
24
|
```svelte
|
25
25
|
<script>
|
26
|
-
import { CopyButton } from "
|
26
|
+
import { CopyButton } from "drab";
|
27
27
|
</script>
|
28
28
|
|
29
|
-
<CopyButton
|
29
|
+
<CopyButton text="Text to copy" />
|
30
30
|
```
|
31
31
|
-->
|
32
32
|
|
@@ -40,10 +40,10 @@ export type CopyButtonSlots = typeof __propDef.slots;
|
|
40
40
|
*
|
41
41
|
* ```svelte
|
42
42
|
* <script>
|
43
|
-
* import { CopyButton } from "
|
43
|
+
* import { CopyButton } from "drab";
|
44
44
|
* </script>
|
45
45
|
*
|
46
|
-
* <CopyButton
|
46
|
+
* <CopyButton text="Text to copy" />
|
47
47
|
* ```
|
48
48
|
*/
|
49
49
|
export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {
|
@@ -8,8 +8,14 @@ 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
12
|
- `columns` - table columns, in order
|
13
|
+
- `currentPage` - current page, defaults to `1`
|
12
14
|
- `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
|
18
|
+
- `paginate` - number of rows to show on each page, defaults to `0` - no pagination
|
13
19
|
- `sortBy` - column to sort by--defaults to first column
|
14
20
|
- `sortedTdClass` - currently sorted td
|
15
21
|
- `sortedThClass` - currently sorted th
|
@@ -22,11 +28,18 @@ Data table to display an array of JS objects. Click a column header to sort.
|
|
22
28
|
- `tdClass` - td class
|
23
29
|
- `thClass` - th class
|
24
30
|
|
31
|
+
@slots
|
32
|
+
|
33
|
+
| name | purpose | default value |
|
34
|
+
| ---------- | ------------------------ | ------------- |
|
35
|
+
| `previous` | previous button contents | `Previous` |
|
36
|
+
| `next` | next button contents | `Next` |
|
37
|
+
|
25
38
|
@example
|
26
39
|
|
27
40
|
```svelte
|
28
41
|
<script>
|
29
|
-
import { DataTable } from "
|
42
|
+
import { DataTable } from "drab";
|
30
43
|
</script>
|
31
44
|
|
32
45
|
<DataTable
|
@@ -37,15 +50,14 @@ 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]);
|
@@ -62,6 +74,14 @@ export let thClass = "";
|
|
62
74
|
export let tdClass = "";
|
63
75
|
export let sortedThClass = "";
|
64
76
|
export let sortedTdClass = "";
|
77
|
+
export let buttonClass = "";
|
78
|
+
export let footerClass = "";
|
79
|
+
export let pageNumberClass = "";
|
80
|
+
export let pageControlsClass = "";
|
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,9 +116,7 @@ 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
122
|
<table class={tableClass} id={tableId}>
|
@@ -115,14 +133,40 @@ onMount(() => {
|
|
115
133
|
</tr>
|
116
134
|
</thead>
|
117
135
|
<tbody class={tBodyClass}>
|
118
|
-
{#each data as row}
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
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={tBodyTrClass}>
|
141
|
+
{#each columns as column}
|
142
|
+
<td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
|
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={footerClass}>
|
154
|
+
<div class={pageNumberClass}>{currentPage} / {numberOfPages}</div>
|
155
|
+
<div class={pageControlsClass}>
|
156
|
+
<button
|
157
|
+
class={buttonClass}
|
158
|
+
disabled={currentPage < 2}
|
159
|
+
on:click={() => currentPage--}
|
160
|
+
>
|
161
|
+
<slot name="previous">Previous</slot>
|
162
|
+
</button>
|
163
|
+
<button
|
164
|
+
class={buttonClass}
|
165
|
+
disabled={currentPage >= numberOfPages}
|
166
|
+
on:click={() => currentPage++}
|
167
|
+
>
|
168
|
+
<slot name="next">Next</slot>
|
169
|
+
</button>
|
170
|
+
</div>
|
171
|
+
</div>
|
172
|
+
{/if}
|
@@ -18,11 +18,20 @@ declare const __propDef: {
|
|
18
18
|
/** td class */ tdClass?: string | undefined;
|
19
19
|
/** currently sorted th */ sortedThClass?: string | undefined;
|
20
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;
|
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,8 +44,14 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
35
44
|
* @props
|
36
45
|
*
|
37
46
|
* - `ascending` - default sort order
|
47
|
+
* - `buttonClass` - button class
|
38
48
|
* - `columns` - table columns, in order
|
49
|
+
* - `currentPage` - current page, defaults to `1`
|
39
50
|
* - `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
|
54
|
+
* - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
|
40
55
|
* - `sortBy` - column to sort by--defaults to first column
|
41
56
|
* - `sortedTdClass` - currently sorted td
|
42
57
|
* - `sortedThClass` - currently sorted th
|
@@ -49,11 +64,18 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
49
64
|
* - `tdClass` - td class
|
50
65
|
* - `thClass` - th class
|
51
66
|
*
|
67
|
+
* @slots
|
68
|
+
*
|
69
|
+
* | name | purpose | default value |
|
70
|
+
* | ---------- | ------------------------ | ------------- |
|
71
|
+
* | `previous` | previous button contents | `Previous` |
|
72
|
+
* | `next` | next button contents | `Next` |
|
73
|
+
*
|
52
74
|
* @example
|
53
75
|
*
|
54
76
|
* ```svelte
|
55
77
|
* <script>
|
56
|
-
* import { DataTable } from "
|
78
|
+
* import { DataTable } from "drab";
|
57
79
|
* </script>
|
58
80
|
*
|
59
81
|
* <DataTable
|
@@ -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
|
*/
|
@@ -24,13 +24,13 @@ Uses the navigator api to share or copy a url link depending on browser support.
|
|
24
24
|
|
25
25
|
```svelte
|
26
26
|
<script>
|
27
|
-
import { ShareButton } from "
|
27
|
+
import { ShareButton } from "drab";
|
28
28
|
</script>
|
29
29
|
|
30
30
|
<ShareButton
|
31
31
|
text="Check out this page: "
|
32
|
-
title="
|
33
|
-
url="https://
|
32
|
+
title="drab"
|
33
|
+
url="https://drab.robino.dev"
|
34
34
|
/>
|
35
35
|
```
|
36
36
|
-->
|
@@ -42,13 +42,13 @@ export type ShareButtonSlots = typeof __propDef.slots;
|
|
42
42
|
*
|
43
43
|
* ```svelte
|
44
44
|
* <script>
|
45
|
-
* import { ShareButton } from "
|
45
|
+
* import { ShareButton } from "drab";
|
46
46
|
* </script>
|
47
47
|
*
|
48
48
|
* <ShareButton
|
49
49
|
* text="Check out this page: "
|
50
|
-
* title="
|
51
|
-
* url="https://
|
50
|
+
* title="drab"
|
51
|
+
* url="https://drab.robino.dev"
|
52
52
|
* />
|
53
53
|
* ```
|
54
54
|
*/
|
@@ -18,7 +18,7 @@ Embeds a YouTube video into a website with the video `uid`, using [www.youtube-n
|
|
18
18
|
|
19
19
|
```svelte
|
20
20
|
<script>
|
21
|
-
import { YouTube } from "
|
21
|
+
import { YouTube } from "drab";
|
22
22
|
</script>
|
23
23
|
|
24
24
|
<YouTube title="Video Title" uid="youtube_uid" />
|
package/dist/index.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import Chord from "./components/Chord.svelte";
|
2
|
+
import ContextMenu from "./components/ContextMenu.svelte";
|
2
3
|
import CopyButton from "./components/CopyButton.svelte";
|
3
4
|
import DataTable from "./components/DataTable.svelte";
|
4
5
|
import type { DataTableRow } from "./components/DataTable.svelte";
|
@@ -7,4 +8,4 @@ import type { EditorContentElement } from "./components/Editor.svelte";
|
|
7
8
|
import FullscreenButton from "./components/FullscreenButton.svelte";
|
8
9
|
import ShareButton from "./components/ShareButton.svelte";
|
9
10
|
import YouTube from "./components/YouTube.svelte";
|
10
|
-
export { Chord, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, ShareButton, YouTube, };
|
11
|
+
export { Chord, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, ShareButton, YouTube, };
|
package/dist/index.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
import Chord from "./components/Chord.svelte";
|
2
|
+
import ContextMenu from "./components/ContextMenu.svelte";
|
2
3
|
import CopyButton from "./components/CopyButton.svelte";
|
3
4
|
import DataTable from "./components/DataTable.svelte";
|
4
5
|
import Editor from "./components/Editor.svelte";
|
5
6
|
import FullscreenButton from "./components/FullscreenButton.svelte";
|
6
7
|
import ShareButton from "./components/ShareButton.svelte";
|
7
8
|
import YouTube from "./components/YouTube.svelte";
|
8
|
-
export { Chord, CopyButton, DataTable, Editor, FullscreenButton, ShareButton, YouTube, };
|
9
|
+
export { Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, ShareButton, YouTube, };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"version": "1.
|
3
|
+
"version": "1.10.1",
|
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
|
".": {
|