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
- - `sortedTdClass` - currently sorted td
15
- - `sortedThClass` - currently sorted th
16
- - `tBodyClass` - tbody class
17
- - `tBodyTrClass` - tbody tr class
18
- - `tHeadClass` - thead class
19
- - `tHeadTrClass` - thead tr class
20
- - `tableClass` - table class
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="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]);
52
64
  }
53
65
  export let sortBy = columns[0];
54
66
  export let ascending = true;
55
- export let tableClass = "";
56
- export let tableId = "";
57
- export let tHeadClass = "";
58
- export let tBodyClass = "";
59
- export let tHeadTrClass = "";
60
- export let tBodyTrClass = "";
61
- export let thClass = "";
62
- export let tdClass = "";
63
- export let sortedThClass = "";
64
- export let sortedTdClass = "";
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
- onMount(() => {
100
- sort(sortBy, false);
101
- });
119
+ sort(sortBy, false);
102
120
  </script>
103
121
 
104
- <table class={tableClass} id={tableId}>
105
- <thead class={tHeadClass}>
106
- <tr class={tHeadTrClass}>
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="{thClass} {sortBy === column ? sortedThClass : ''}"
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={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>
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 */ tableClass?: string | undefined;
12
- /** table id */ tableId?: string | undefined;
13
- /** thead class */ tHeadClass?: string | undefined;
14
- /** tbody class */ tBodyClass?: string | undefined;
15
- /** thead tr class */ tHeadTrClass?: string | undefined;
16
- /** tbody tr class */ tBodyTrClass?: string | undefined;
17
- /** th class */ thClass?: string | undefined;
18
- /** td class */ tdClass?: string | undefined;
19
- /** currently sorted th */ sortedThClass?: string | undefined;
20
- /** currently sorted td */ sortedTdClass?: string | undefined;
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
- * - `sortedTdClass` - currently sorted td
42
- * - `sortedThClass` - currently sorted th
43
- * - `tBodyClass` - tbody class
44
- * - `tBodyTrClass` - tbody tr class
45
- * - `tHeadClass` - thead class
46
- * - `tHeadTrClass` - thead tr class
47
- * - `tableClass` - table class
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="year"
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
- - `buttonClass` - `class` of all the `button` elements
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
- - `controlsClass` - `class` of the `div` that wraps the controls
13
- - `controlsId` - `id` of the `div` that wraps the controls
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
- - `textAreaClass` - `class` of the `textarea` element
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 textAreaValue = "";
60
- export let textAreaPlaceholder = "";
61
- export let textAreaClass = "";
62
- export let textAreaId = "";
63
- export let textAreaName = "";
64
- export let buttonClass = "";
65
- export let controlsClass = "";
66
- export let controlsId = "";
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
- textAreaValue = `${textAreaValue.slice(0, selectionEnd)}${el.text}${textAreaValue.slice(selectionEnd)}`;
90
+ valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
91
91
  } else if (el.display === "wrap") {
92
- textAreaValue = insertChar(textAreaValue, el.text, selectionStart2);
93
- textAreaValue = insertChar(
94
- textAreaValue,
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
- textAreaValue = lines.join("\n");
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 < textAreaValue.length; i++) {
115
- if (textAreaValue[i].match(/[a-z]/i)) {
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 = textAreaValue[textArea.selectionEnd];
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 = textAreaValue[textArea.selectionStart - 1];
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
- textAreaValue = removeChar(textAreaValue, start);
150
- textAreaValue = removeChar(textAreaValue, end);
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
- textAreaValue = removeChar(textAreaValue, newPos);
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
- textAreaValue = removeChar(
201
- textAreaValue,
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 (textAreaValue[textArea.selectionStart] === " ") {
245
+ if (valueTextarea[textArea.selectionStart] === " ") {
246
246
  textArea.setSelectionRange(
247
247
  textArea.selectionStart + 1,
248
248
  textArea.selectionEnd
249
249
  );
250
250
  }
251
- if (textAreaValue[textArea.selectionEnd - 1] === " ") {
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 = textAreaValue.split("\n");
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 = textAreaValue.split("```");
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
- textAreaValue = lines.join("\n");
331
+ valueTextarea = lines.join("\n");
332
332
  };
333
333
  </script>
334
334
 
335
335
  <textarea
336
- id={textAreaId}
337
- class={textAreaClass}
338
- name={textAreaName}
339
- placeholder={textAreaPlaceholder}
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={textAreaValue}
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={controlsId} class={controlsClass}>
351
+ <div id={idControls} class={classControls}>
352
352
  {#each contentElements as el}
353
353
  <button
354
- class={el.class ? `${buttonClass} ${el.class}` : buttonClass}
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 */ textAreaValue?: string | undefined;
26
- /** `placeholder` of the `textarea` element */ textAreaPlaceholder?: string | undefined;
27
- /** `class` of the `textarea` element */ textAreaClass?: string | undefined;
28
- /** `id` of the `textarea` element */ textAreaId?: string | undefined;
29
- /** `name` of the `textarea` element */ textAreaName?: string | undefined;
30
- /** `class` of all the `button` elements */ buttonClass?: string | undefined;
31
- /** `class` of the `div` that wraps the controls */ controlsClass?: string | undefined;
32
- /** `id` of the `div` that wraps the controls */ controlsId?: string | undefined;
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
- * - `buttonClass` - `class` of all the `button` elements
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
- * - `controlsClass` - `class` of the `div` that wraps the controls
58
- * - `controlsId` - `id` of the `div` that wraps the controls
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
- * - `textAreaClass` - `class` of the `textarea` element
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": "1.10.0",
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": "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
  ".": {