drab 1.10.0 → 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/DataTable.svelte +58 -14
- package/dist/components/DataTable.svelte.d.ts +24 -2
- 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
|
@@ -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,6 +28,13 @@ 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
|
@@ -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,6 +64,13 @@ 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
|
@@ -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
|
*/
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"version": "1.10.
|
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
|
".": {
|