drab 2.8.6 → 2.8.7

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.
Files changed (16) hide show
  1. package/README.md +67 -67
  2. package/dist/components/Breakpoint.svelte +7 -7
  3. package/dist/components/Chord.svelte +30 -30
  4. package/dist/components/ContextMenu.svelte +75 -75
  5. package/dist/components/CopyButton.svelte +35 -13
  6. package/dist/components/CopyButton.svelte.d.ts +8 -4
  7. package/dist/components/DataTable.svelte +117 -117
  8. package/dist/components/Details.svelte +76 -76
  9. package/dist/components/Details.svelte.d.ts +1 -1
  10. package/dist/components/Editor.svelte +33 -33
  11. package/dist/components/FullscreenButton.svelte +14 -14
  12. package/dist/components/Popover.svelte +63 -63
  13. package/dist/components/ShareButton.svelte +38 -38
  14. package/dist/components/Sheet.svelte +100 -100
  15. package/dist/components/YouTube.svelte +9 -9
  16. package/package.json +81 -81
package/dist/components/DataTable.svelte CHANGED
@@ -1,11 +1,11 @@
1
- <!--
2
- @component
3
-
4
- ### DataTable
5
-
6
- Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
7
-
8
- @props
1
+ <!--
2
+ @component
3
+
4
+ ### DataTable
5
+
6
+ Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
7
+
8
+ @props
9
9
 
10
10
  - `ascending` - current sort order
11
11
  - `classTbodyTr` - `tbody tr` class
@@ -23,88 +23,88 @@ Data table to display an array of JS objects. Provides pagination and sorting fo
23
23
  - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
24
24
  - `sortBy` - key (column) to sort by, defaults to first key
25
25
 
26
- @slots
27
-
28
- | name | purpose | default value | slot props |
29
- | ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
30
- | `controls` | helper that passes back `maxRows` and `numberOfPages` | none | `maxRows`, `numberOfPages` |
31
- | `td` | td contents | `value` | `item`, `key`, `sortBy` `value` |
32
- | `th` | th contents | `key` | `key`, `sortBy` |
33
-
34
- @example
26
+ @slots
27
+
28
+ | name | purpose | default value | slot props |
29
+ | ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
30
+ | `controls` | helper that passes back `maxRows` and `numberOfPages` | none | `maxRows`, `numberOfPages` |
31
+ | `td` | td contents | `value` | `item`, `key`, `sortBy` `value` |
32
+ | `th` | th contents | `key` | `key`, `sortBy` |
33
+
34
+ @example
35
35
 
36
36
  ```svelte
37
- <script lang="ts">
38
- import type { ComponentProps } from "svelte";
39
- import { DataTable } from "drab";
40
-
41
- let currentPage = 0;
42
-
43
- const data: ComponentProps<DataTable>["data"] = [
44
- { make: "Honda", model: "CR-V", year: 2011, awd: true },
45
- { make: "Volvo", model: "XC-40", year: 2024, awd: true },
46
- { make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
47
- { make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
48
- { make: "Ford", model: "Model A", year: 1931, awd: false },
49
- { make: "Subaru", model: "Outback", year: 2021, awd: true },
50
- { make: "Ford", model: "Bronco", year: 1970, awd: true },
51
- { make: "GMC", model: "Acadia", year: 2008, awd: true },
52
- { make: "BMW", model: "X3", year: 2023, awd: true },
53
- ];
54
- </script>
55
-
56
- <DataTable {data} class="mb-12" />
57
-
58
- <DataTable
59
- {data}
60
- bind:currentPage
61
- sortBy="year"
62
- maxRows={4}
63
- class="tabular-nums"
64
- classTh="cursor-pointer capitalize"
65
- classTbodyTr="transition hover:bg-neutral-50"
66
- >
67
- <svelte:fragment slot="th" let:key let:sortBy>
68
- <span class:uppercase={key === "awd"} class:underline={key === sortBy}>
69
- {key}
70
- </span>
71
- </svelte:fragment>
72
- <svelte:fragment slot="td" let:value>
73
- {#if typeof value === "boolean"}
74
- {value ? "Yes" : "No"}
75
- {:else}
76
- {value}
77
- {/if}
78
- </svelte:fragment>
79
- <svelte:fragment slot="controls" let:maxRows let:numberOfPages>
80
- {#if maxRows}
81
- <div class="flex items-center justify-between">
82
- <div>{currentPage + 1} / {numberOfPages}</div>
83
- <div>
84
- <button
85
- type="button"
86
- class="btn"
87
- disabled={currentPage < 1}
88
- on:click={() => currentPage--}
89
- >
90
- Previous
91
- </button>
92
- <button
93
- type="button"
94
- class="btn"
95
- disabled={currentPage >= numberOfPages - 1}
96
- on:click={() => currentPage++}
97
- >
98
- Next
99
- </button>
100
- </div>
101
- </div>
102
- {/if}
103
- </svelte:fragment>
104
- </DataTable>
37
+ <script lang="ts">
38
+ import type { ComponentProps } from "svelte";
39
+ import { DataTable } from "drab";
40
+
41
+ let currentPage = 0;
42
+
43
+ const data: ComponentProps<DataTable>["data"] = [
44
+ { make: "Honda", model: "CR-V", year: 2011, awd: true },
45
+ { make: "Volvo", model: "XC-40", year: 2024, awd: true },
46
+ { make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
47
+ { make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
48
+ { make: "Ford", model: "Model A", year: 1931, awd: false },
49
+ { make: "Subaru", model: "Outback", year: 2021, awd: true },
50
+ { make: "Ford", model: "Bronco", year: 1970, awd: true },
51
+ { make: "GMC", model: "Acadia", year: 2008, awd: true },
52
+ { make: "BMW", model: "X3", year: 2023, awd: true },
53
+ ];
54
+ </script>
55
+
56
+ <DataTable {data} class="mb-12" />
57
+
58
+ <DataTable
59
+ {data}
60
+ bind:currentPage
61
+ sortBy="year"
62
+ maxRows={4}
63
+ class="tabular-nums"
64
+ classTh="cursor-pointer capitalize"
65
+ classTbodyTr="transition hover:bg-neutral-50"
66
+ >
67
+ <svelte:fragment slot="th" let:key let:sortBy>
68
+ <span class:uppercase={key === "awd"} class:underline={key === sortBy}>
69
+ {key}
70
+ </span>
71
+ </svelte:fragment>
72
+ <svelte:fragment slot="td" let:value>
73
+ {#if typeof value === "boolean"}
74
+ {value ? "Yes" : "No"}
75
+ {:else}
76
+ {value}
77
+ {/if}
78
+ </svelte:fragment>
79
+ <svelte:fragment slot="controls" let:maxRows let:numberOfPages>
80
+ {#if maxRows}
81
+ <div class="flex items-center justify-between">
82
+ <div>{currentPage + 1} / {numberOfPages}</div>
83
+ <div>
84
+ <button
85
+ type="button"
86
+ class="btn"
87
+ disabled={currentPage < 1}
88
+ on:click={() => currentPage--}
89
+ >
90
+ Previous
91
+ </button>
92
+ <button
93
+ type="button"
94
+ class="btn"
95
+ disabled={currentPage >= numberOfPages - 1}
96
+ on:click={() => currentPage++}
97
+ >
98
+ Next
99
+ </button>
100
+ </div>
101
+ </div>
102
+ {/if}
103
+ </svelte:fragment>
104
+ </DataTable>
105
105
  ```
106
- -->
107
-
106
+ -->
107
+
108
108
  <script>let className = "";
109
109
  export { className as class };
110
110
  export let id = "";
@@ -170,33 +170,33 @@ const showRow = (i, currentPage2) => {
170
170
  return overMin && underMax;
171
171
  };
172
172
  sort(sortBy, false);
173
- </script>
174
-
175
- <table class={className} {id}>
176
- <thead class={classThead}>
177
- <tr class="{classTr} {classTheadTr}">
178
- {#each keys as key}
179
- <th class={classTh} on:click={() => sort(key)}>
180
- <slot name="th" {key} {sortBy}>{key}</slot>
181
- </th>
182
- {/each}
183
- </tr>
184
- </thead>
185
- <tbody class={classTbody}>
186
- {#each data as item, i}
187
- {#if showRow(i, currentPage)}
188
- <tr class="{classTr} {classTbodyTr}">
189
- {#each keys as key}
190
- <td class={classTd}>
191
- <slot name="td" {item} {key} {sortBy} value={item[key]}>
192
- {item[key]}
193
- </slot>
194
- </td>
195
- {/each}
196
- </tr>
197
- {/if}
198
- {/each}
199
- </tbody>
200
- </table>
201
-
202
- <slot name="controls" {maxRows} {numberOfPages} />
173
+ </script>
174
+
175
+ <table class={className} {id}>
176
+ <thead class={classThead}>
177
+ <tr class="{classTr} {classTheadTr}">
178
+ {#each keys as key}
179
+ <th class={classTh} on:click={() => sort(key)}>
180
+ <slot name="th" {key} {sortBy}>{key}</slot>
181
+ </th>
182
+ {/each}
183
+ </tr>
184
+ </thead>
185
+ <tbody class={classTbody}>
186
+ {#each data as item, i}
187
+ {#if showRow(i, currentPage)}
188
+ <tr class="{classTr} {classTbodyTr}">
189
+ {#each keys as key}
190
+ <td class={classTd}>
191
+ <slot name="td" {item} {key} {sortBy} value={item[key]}>
192
+ {item[key]}
193
+ </slot>
194
+ </td>
195
+ {/each}
196
+ </tr>
197
+ {/if}
198
+ {/each}
199
+ </tbody>
200
+ </table>
201
+
202
+ <slot name="controls" {maxRows} {numberOfPages} />
package/dist/components/Details.svelte CHANGED
@@ -1,50 +1,50 @@
1
- <!--
2
- @component
3
-
4
- ### Details
5
-
6
- Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
7
-
8
- @props
1
+ <!--
2
+ @component
3
+
4
+ ### Details
5
+
6
+ Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
7
+
8
+ @props
9
9
 
10
10
  - `class`
11
11
  - `id`
12
12
  - `open`
13
13
  - `transition` - slides the content, set to `false` to remove
14
14
 
15
- @slots
16
-
17
- | name | purpose | default value | slot props |
18
- | --------- | ------------------------------- | -------------- | ---------- |
19
- | `summary` | `summary` element contents | none | `open` |
20
- | `content` | contents when details is `open` | none | none |
21
-
22
- @example
15
+ @slots
16
+
17
+ | name | purpose | default value | slot props |
18
+ | --------- | ------------------------------- | -------------- | ---------- |
19
+ | `summary` | `summary` element contents | none | `open` |
20
+ | `content` | contents when details is `open` | none | none |
21
+
22
+ @example
23
23
 
24
24
  ```svelte
25
- <script lang="ts">
26
- import { Details } from "drab";
27
- import Chevron from "../../site/svg/Chevron.svelte";
28
- </script>
29
-
30
- <Details class="border-b">
31
- <svelte:fragment slot="summary" let:open>
32
- <div
33
- class="flex cursor-pointer items-center justify-between gap-8 p-4 font-bold underline hover:decoration-dotted"
34
- >
35
- <div>Does it work without JavaScript?</div>
36
- <div class="transition" class:rotate-180={open}>
37
- <Chevron />
38
- </div>
39
- </div>
40
- </svelte:fragment>
41
- <svelte:fragment slot="content">
42
- <div class="px-4 pb-4">Yes.</div>
43
- </svelte:fragment>
44
- </Details>
25
+ <script lang="ts">
26
+ import { Details } from "drab";
27
+ import Chevron from "../../site/svg/Chevron.svelte";
28
+ </script>
29
+
30
+ <Details class="border-b">
31
+ <svelte:fragment slot="summary" let:open>
32
+ <div
33
+ class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
34
+ >
35
+ <div>Does it work without JavaScript?</div>
36
+ <div class="transition" class:rotate-180={open}>
37
+ <Chevron />
38
+ </div>
39
+ </div>
40
+ </svelte:fragment>
41
+ <svelte:fragment slot="content">
42
+ <div class="px-4 pb-4">Yes.</div>
43
+ </svelte:fragment>
44
+ </Details>
45
45
  ```
46
- -->
47
-
46
+ -->
47
+
48
48
  <script>import { onMount } from "svelte";
49
49
  import { slide } from "svelte/transition";
50
50
  import { prefersReducedMotion } from "../util/accessibility";
@@ -63,41 +63,41 @@ onMount(() => {
63
63
  if (prefersReducedMotion())
64
64
  transition = false;
65
65
  });
66
- </script>
67
-
68
- <div class={className} {id}>
69
- <details bind:open>
70
- <!-- svelte-ignore a11y-no-redundant-roles -->
71
- <summary
72
- role="button"
73
- tabindex="0"
74
- on:click|preventDefault={toggleOpen}
75
- on:keydown={(e) => {
76
- if (e.key === "Enter") {
77
- e.preventDefault();
78
- toggleOpen();
79
- }
80
- }}
81
- >
82
- <slot name="summary" {open} />
83
- </summary>
84
- {#if !clientJs || !transition}
85
- <slot name="content" />
86
- {/if}
87
- </details>
88
- {#if clientJs && open && transition}
89
- <!-- outside the details for the transition -->
90
- <div transition:slide={transition}>
91
- <slot name="content" />
92
- </div>
93
- {/if}
94
- </div>
95
-
96
- <style>
97
- summary {
98
- list-style: none;
99
- }
100
- summary::-webkit-details-marker {
101
- display: none;
102
- }
103
- </style>
66
+ </script>
67
+
68
+ <div class={className} {id}>
69
+ <details bind:open>
70
+ <!-- svelte-ignore a11y-no-redundant-roles -->
71
+ <summary
72
+ role="button"
73
+ tabindex="0"
74
+ on:click|preventDefault={toggleOpen}
75
+ on:keydown={(e) => {
76
+ if (e.key === "Enter") {
77
+ e.preventDefault();
78
+ toggleOpen();
79
+ }
80
+ }}
81
+ >
82
+ <slot name="summary" {open} />
83
+ </summary>
84
+ {#if !clientJs || !transition}
85
+ <slot name="content" />
86
+ {/if}
87
+ </details>
88
+ {#if clientJs && open && transition}
89
+ <!-- outside the details for the transition -->
90
+ <div transition:slide={transition}>
91
+ <slot name="content" />
92
+ </div>
93
+ {/if}
94
+ </div>
95
+
96
+ <style>
97
+ summary {
98
+ list-style: none;
99
+ }
100
+ summary::-webkit-details-marker {
101
+ display: none;
102
+ }
103
+ </style>
package/dist/components/Details.svelte.d.ts CHANGED
@@ -50,7 +50,7 @@ export type DetailsSlots = typeof __propDef.slots;
50
50
  * <Details class="border-b">
51
51
  * <svelte:fragment slot="summary" let:open>
52
52
  * <div
53
- * class="flex cursor-pointer items-center justify-between gap-8 p-4 font-bold underline hover:decoration-dotted"
53
+ * class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
54
54
  * >
55
55
  * <div>Does it work without JavaScript?</div>
56
56
  * <div class="transition" class:rotate-180={open}>
package/dist/components/Editor.svelte CHANGED
@@ -24,39 +24,39 @@
24
24
  @example
25
25
 
26
26
  ```svelte
27
- <script lang="ts">
28
- import { Editor } from "drab";
29
- </script>
30
-
31
- <Editor
32
- classButton="btn"
33
- classControls="flex gap-2"
34
- classTextarea="border w-full h-36 p-2 rounded mb-2"
35
- placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
36
- contentElements={[
37
- {
38
- name: "Bullet",
39
- text: "- ",
40
- display: "block",
41
- icon: "Bullet",
42
- },
43
- {
44
- name: "Italic",
45
- text: "*",
46
- display: "wrap",
47
- icon: "Italic",
48
- key: "i",
49
- class: "italic",
50
- },
51
- {
52
- name: "Anchor",
53
- text: "[text](href)",
54
- display: "inline",
55
- icon: "Anchor",
56
- key: "[",
57
- },
58
- ]}
59
- />
27
+ <script lang="ts">
28
+ import { Editor } from "drab";
29
+ </script>
30
+
31
+ <Editor
32
+ classButton="btn"
33
+ classControls="flex gap-2"
34
+ classTextarea="border w-full h-36 p-2 rounded mb-2"
35
+ placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
36
+ contentElements={[
37
+ {
38
+ name: "Bullet",
39
+ text: "- ",
40
+ display: "block",
41
+ icon: "Bullet",
42
+ },
43
+ {
44
+ name: "Italic",
45
+ text: "*",
46
+ display: "wrap",
47
+ icon: "Italic",
48
+ key: "i",
49
+ class: "italic",
50
+ },
51
+ {
52
+ name: "Anchor",
53
+ text: "[text](href)",
54
+ display: "inline",
55
+ icon: "Anchor",
56
+ key: "[",
57
+ },
58
+ ]}
59
+ />
60
60
  ```
61
61
  -->
62
62
 
package/dist/components/FullscreenButton.svelte CHANGED
@@ -23,20 +23,20 @@ Make the document or a specific element fullscreen.
23
23
  @example
24
24
 
25
25
  ```svelte
26
- <script lang="ts">
27
- import { FullscreenButton } from "drab";
28
-
29
- let target: HTMLDivElement;
30
- </script>
31
-
32
- <FullscreenButton class="btn" />
33
-
34
- <div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
35
- <div class="mb-2">Target element</div>
36
- <FullscreenButton {target} class="btn btn-s bg-neutral-50">
37
- Enable Element Fullscreen
38
- </FullscreenButton>
39
- </div>
26
+ <script lang="ts">
27
+ import { FullscreenButton } from "drab";
28
+
29
+ let target: HTMLDivElement;
30
+ </script>
31
+
32
+ <FullscreenButton class="btn" />
33
+
34
+ <div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
35
+ <div class="mb-2">Target element</div>
36
+ <FullscreenButton {target} class="btn btn-s bg-neutral-50">
37
+ Enable Element Fullscreen
38
+ </FullscreenButton>
39
+ </div>
40
40
  ```
41
41
  -->
42
42