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 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="year"
53
+ sortBy="make"
41
54
  />
42
55
  ```
43
56
  -->
44
57
 
45
58
  <script context="module"></script>
46
59
 
47
- <script>import { onMount } from "svelte";
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
- onMount(() => {
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
- <tr class={tBodyTrClass}>
120
- {#each columns as column}
121
- <td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
122
- {row[column]}
123
- </td>
124
- {/each}
125
- </tr>
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="year"
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.0",
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": "node src/lib/util/buildDocs.js && vite build && npm run package",
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
  ".": {