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.
- package/README.md +67 -67
- package/dist/components/Breakpoint.svelte +7 -7
- package/dist/components/Chord.svelte +30 -30
- package/dist/components/ContextMenu.svelte +75 -75
- package/dist/components/CopyButton.svelte +35 -13
- package/dist/components/CopyButton.svelte.d.ts +8 -4
- package/dist/components/DataTable.svelte +117 -117
- package/dist/components/Details.svelte +76 -76
- package/dist/components/Details.svelte.d.ts +1 -1
- package/dist/components/Editor.svelte +33 -33
- package/dist/components/FullscreenButton.svelte +14 -14
- package/dist/components/Popover.svelte +63 -63
- package/dist/components/ShareButton.svelte +38 -38
- package/dist/components/Sheet.svelte +100 -100
- package/dist/components/YouTube.svelte +9 -9
- package/package.json +81 -81
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
@component
|
|
3
|
-
|
|
4
|
-
### Popover
|
|
5
|
-
|
|
6
|
-
Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
|
|
7
|
-
|
|
8
|
-
@props
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
|
|
4
|
+
### Popover
|
|
5
|
+
|
|
6
|
+
Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
|
|
7
|
+
|
|
8
|
+
@props
|
|
9
9
|
|
|
10
10
|
- `class`
|
|
11
11
|
- `display` - shows / hides the popover
|
|
@@ -14,41 +14,41 @@ Displays a popover relatively positioned to the target. Does not require the tar
|
|
|
14
14
|
- `target` - target element to position the popover in relation to
|
|
15
15
|
- `transition` - scales the popover, set to `false` to disable
|
|
16
16
|
|
|
17
|
-
@slots
|
|
18
|
-
|
|
19
|
-
| name | purpose | default value |
|
|
20
|
-
| ---------- | ------------------------------- | ------------- |
|
|
21
|
-
| `default` | default | Popover |
|
|
22
|
-
|
|
23
|
-
@example
|
|
17
|
+
@slots
|
|
18
|
+
|
|
19
|
+
| name | purpose | default value |
|
|
20
|
+
| ---------- | ------------------------------- | ------------- |
|
|
21
|
+
| `default` | default | Popover |
|
|
22
|
+
|
|
23
|
+
@example
|
|
24
24
|
|
|
25
25
|
```svelte
|
|
26
|
-
<script lang="ts">
|
|
27
|
-
import { Popover } from "drab";
|
|
28
|
-
|
|
29
|
-
let target: HTMLButtonElement;
|
|
30
|
-
|
|
31
|
-
let display = false;
|
|
32
|
-
|
|
33
|
-
const open = () => (display = true);
|
|
34
|
-
const close = () => (display = false);
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<button class="btn" type="button" bind:this={target} on:click={open}>
|
|
38
|
-
Open
|
|
39
|
-
</button>
|
|
40
|
-
|
|
41
|
-
<Popover {target} bind:display class="p-2">
|
|
42
|
-
<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
|
|
43
|
-
<div class="font-bold">Bottom</div>
|
|
44
|
-
<button class="btn" on:click={close}>Close</button>
|
|
45
|
-
<button class="btn" on:click={close}>Close</button>
|
|
46
|
-
<button class="btn" on:click={close}>Close</button>
|
|
47
|
-
</div>
|
|
48
|
-
</Popover>
|
|
26
|
+
<script lang="ts">
|
|
27
|
+
import { Popover } from "drab";
|
|
28
|
+
|
|
29
|
+
let target: HTMLButtonElement;
|
|
30
|
+
|
|
31
|
+
let display = false;
|
|
32
|
+
|
|
33
|
+
const open = () => (display = true);
|
|
34
|
+
const close = () => (display = false);
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<button class="btn" type="button" bind:this={target} on:click={open}>
|
|
38
|
+
Open
|
|
39
|
+
</button>
|
|
40
|
+
|
|
41
|
+
<Popover {target} bind:display class="p-2">
|
|
42
|
+
<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
|
|
43
|
+
<div class="font-bold">Bottom</div>
|
|
44
|
+
<button class="btn" on:click={close}>Close</button>
|
|
45
|
+
<button class="btn" on:click={close}>Close</button>
|
|
46
|
+
<button class="btn" on:click={close}>Close</button>
|
|
47
|
+
</div>
|
|
48
|
+
</Popover>
|
|
49
49
|
```
|
|
50
|
-
-->
|
|
51
|
-
|
|
50
|
+
-->
|
|
51
|
+
|
|
52
52
|
<script>import { prefersReducedMotion } from "../util/accessibility";
|
|
53
53
|
import { duration, start } from "../util/transition";
|
|
54
54
|
import { onMount, tick } from "svelte";
|
|
@@ -106,26 +106,26 @@ onMount(() => {
|
|
|
106
106
|
if (prefersReducedMotion())
|
|
107
107
|
transition = false;
|
|
108
108
|
});
|
|
109
|
-
</script>
|
|
110
|
-
|
|
111
|
-
<svelte:body on:keydown={onKeyDown} />
|
|
112
|
-
|
|
113
|
-
{#if display}
|
|
114
|
-
<div
|
|
115
|
-
role="dialog"
|
|
116
|
-
bind:this={popover}
|
|
117
|
-
class={className}
|
|
118
|
-
{id}
|
|
119
|
-
style:top="{coordinates.y}px"
|
|
120
|
-
style:left="{coordinates.x}px"
|
|
121
|
-
transition:scale={transition ? transition : { duration: 0 }}
|
|
122
|
-
>
|
|
123
|
-
<slot>Popover</slot>
|
|
124
|
-
</div>
|
|
125
|
-
{/if}
|
|
126
|
-
|
|
127
|
-
<style>
|
|
128
|
-
div {
|
|
129
|
-
position: absolute;
|
|
130
|
-
}
|
|
131
|
-
</style>
|
|
109
|
+
</script>
|
|
110
|
+
|
|
111
|
+
<svelte:body on:keydown={onKeyDown} />
|
|
112
|
+
|
|
113
|
+
{#if display}
|
|
114
|
+
<div
|
|
115
|
+
role="dialog"
|
|
116
|
+
bind:this={popover}
|
|
117
|
+
class={className}
|
|
118
|
+
{id}
|
|
119
|
+
style:top="{coordinates.y}px"
|
|
120
|
+
style:left="{coordinates.x}px"
|
|
121
|
+
transition:scale={transition ? transition : { duration: 0 }}
|
|
122
|
+
>
|
|
123
|
+
<slot>Popover</slot>
|
|
124
|
+
</div>
|
|
125
|
+
{/if}
|
|
126
|
+
|
|
127
|
+
<style>
|
|
128
|
+
div {
|
|
129
|
+
position: absolute;
|
|
130
|
+
}
|
|
131
|
+
</style>
|
|
@@ -30,44 +30,44 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
|
|
|
30
30
|
@example
|
|
31
31
|
|
|
32
32
|
```svelte
|
|
33
|
-
<script lang="ts">
|
|
34
|
-
import { ShareButton } from "drab";
|
|
35
|
-
|
|
36
|
-
let fileInput: HTMLInputElement;
|
|
37
|
-
|
|
38
|
-
let fileShareData: ShareData;
|
|
39
|
-
|
|
40
|
-
const onInput = () => {
|
|
41
|
-
if (fileInput.files) {
|
|
42
|
-
fileShareData.files = [fileInput.files[0]];
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
</script>
|
|
46
|
-
|
|
47
|
-
<ShareButton
|
|
48
|
-
class="btn mb-8"
|
|
49
|
-
shareData={{
|
|
50
|
-
text: "Check out this page: ",
|
|
51
|
-
title: "drab",
|
|
52
|
-
url: "https://drab.robino.dev",
|
|
53
|
-
}}
|
|
54
|
-
>
|
|
55
|
-
Share URL
|
|
56
|
-
</ShareButton>
|
|
57
|
-
|
|
58
|
-
<div>
|
|
59
|
-
<label class="label" for="fileInput">Upload File</label>
|
|
60
|
-
<input
|
|
61
|
-
type="file"
|
|
62
|
-
id="fileInput"
|
|
63
|
-
class="input mb-4"
|
|
64
|
-
bind:this={fileInput}
|
|
65
|
-
on:input={onInput}
|
|
66
|
-
/>
|
|
67
|
-
<ShareButton class="btn" bind:shareData={fileShareData}>
|
|
68
|
-
Share File
|
|
69
|
-
</ShareButton>
|
|
70
|
-
</div>
|
|
33
|
+
<script lang="ts">
|
|
34
|
+
import { ShareButton } from "drab";
|
|
35
|
+
|
|
36
|
+
let fileInput: HTMLInputElement;
|
|
37
|
+
|
|
38
|
+
let fileShareData: ShareData;
|
|
39
|
+
|
|
40
|
+
const onInput = () => {
|
|
41
|
+
if (fileInput.files) {
|
|
42
|
+
fileShareData.files = [fileInput.files[0]];
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<ShareButton
|
|
48
|
+
class="btn mb-8"
|
|
49
|
+
shareData={{
|
|
50
|
+
text: "Check out this page: ",
|
|
51
|
+
title: "drab",
|
|
52
|
+
url: "https://drab.robino.dev",
|
|
53
|
+
}}
|
|
54
|
+
>
|
|
55
|
+
Share URL
|
|
56
|
+
</ShareButton>
|
|
57
|
+
|
|
58
|
+
<div>
|
|
59
|
+
<label class="label" for="fileInput">Upload File</label>
|
|
60
|
+
<input
|
|
61
|
+
type="file"
|
|
62
|
+
id="fileInput"
|
|
63
|
+
class="input mb-4"
|
|
64
|
+
bind:this={fileInput}
|
|
65
|
+
on:input={onInput}
|
|
66
|
+
/>
|
|
67
|
+
<ShareButton class="btn" bind:shareData={fileShareData}>
|
|
68
|
+
Share File
|
|
69
|
+
</ShareButton>
|
|
70
|
+
</div>
|
|
71
71
|
```
|
|
72
72
|
-->
|
|
73
73
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
@component
|
|
3
|
-
|
|
4
|
-
### Sheet
|
|
5
|
-
|
|
6
|
-
Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
|
|
7
|
-
|
|
8
|
-
@props
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
|
|
4
|
+
### Sheet
|
|
5
|
+
|
|
6
|
+
Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
|
|
7
|
+
|
|
8
|
+
@props
|
|
9
9
|
|
|
10
10
|
- `classSheet` - sheet class - not the backdrop
|
|
11
11
|
- `class`
|
|
@@ -16,48 +16,48 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
|
|
|
16
16
|
- `transitionSheet` - flies the sheet, set to `false` to remove
|
|
17
17
|
- `transition` - blurs the entire component, set to `false` to remove
|
|
18
18
|
|
|
19
|
-
@slots
|
|
20
|
-
|
|
21
|
-
| name | purpose | default value |
|
|
22
|
-
| ---------- | ------------------------------- | ------------- |
|
|
23
|
-
| `default` | content | `Content` |
|
|
24
|
-
|
|
25
|
-
@example
|
|
19
|
+
@slots
|
|
20
|
+
|
|
21
|
+
| name | purpose | default value |
|
|
22
|
+
| ---------- | ------------------------------- | ------------- |
|
|
23
|
+
| `default` | content | `Content` |
|
|
24
|
+
|
|
25
|
+
@example
|
|
26
26
|
|
|
27
27
|
```svelte
|
|
28
|
-
<script lang="ts">
|
|
29
|
-
import { Sheet } from "drab";
|
|
30
|
-
|
|
31
|
-
let display = false;
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
<button type="button" class="btn" on:click={() => (display = true)}>
|
|
35
|
-
Open
|
|
36
|
-
</button>
|
|
37
|
-
|
|
38
|
-
<Sheet
|
|
39
|
-
bind:display
|
|
40
|
-
class="backdrop-blur"
|
|
41
|
-
classSheet="p-4 shadow bg-white"
|
|
42
|
-
position="right"
|
|
43
|
-
>
|
|
44
|
-
<div class="mb-4 flex items-center justify-between">
|
|
45
|
-
<h2 class="my-0">Sheet</h2>
|
|
46
|
-
<button type="button" class="btn btn-s" on:click={() => (display = false)}>
|
|
47
|
-
Close
|
|
48
|
-
</button>
|
|
49
|
-
</div>
|
|
50
|
-
<div>
|
|
51
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
52
|
-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
53
|
-
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
54
|
-
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
55
|
-
cillum dolore eu fugiat nulla pariatur.
|
|
56
|
-
</div>
|
|
57
|
-
</Sheet>
|
|
28
|
+
<script lang="ts">
|
|
29
|
+
import { Sheet } from "drab";
|
|
30
|
+
|
|
31
|
+
let display = false;
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<button type="button" class="btn" on:click={() => (display = true)}>
|
|
35
|
+
Open
|
|
36
|
+
</button>
|
|
37
|
+
|
|
38
|
+
<Sheet
|
|
39
|
+
bind:display
|
|
40
|
+
class="backdrop-blur"
|
|
41
|
+
classSheet="p-4 shadow bg-white"
|
|
42
|
+
position="right"
|
|
43
|
+
>
|
|
44
|
+
<div class="mb-4 flex items-center justify-between">
|
|
45
|
+
<h2 class="my-0">Sheet</h2>
|
|
46
|
+
<button type="button" class="btn btn-s" on:click={() => (display = false)}>
|
|
47
|
+
Close
|
|
48
|
+
</button>
|
|
49
|
+
</div>
|
|
50
|
+
<div>
|
|
51
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
52
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
53
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
54
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
55
|
+
cillum dolore eu fugiat nulla pariatur.
|
|
56
|
+
</div>
|
|
57
|
+
</Sheet>
|
|
58
58
|
```
|
|
59
|
-
-->
|
|
60
|
-
|
|
59
|
+
-->
|
|
60
|
+
|
|
61
61
|
<script>import { onMount } from "svelte";
|
|
62
62
|
import {
|
|
63
63
|
blur,
|
|
@@ -101,56 +101,56 @@ onMount(() => {
|
|
|
101
101
|
transitionSheet = false;
|
|
102
102
|
}
|
|
103
103
|
});
|
|
104
|
-
</script>
|
|
105
|
-
|
|
106
|
-
<svelte:body on:keydown={onKeyDown} />
|
|
107
|
-
|
|
108
|
-
{#if display}
|
|
109
|
-
<div
|
|
110
|
-
transition:blur={transition ? transition : { duration: 0 }}
|
|
111
|
-
use:focusElement
|
|
112
|
-
class="d-backdrop {className}"
|
|
113
|
-
class:d-backdrop-bottom={position === "bottom"}
|
|
114
|
-
class:d-backdrop-top={position === "top"}
|
|
115
|
-
class:d-backdrop-right={position === "right"}
|
|
116
|
-
{id}
|
|
117
|
-
tabindex="-1"
|
|
118
|
-
>
|
|
119
|
-
<div
|
|
120
|
-
role="dialog"
|
|
121
|
-
bind:this={sheet}
|
|
122
|
-
transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
|
|
123
|
-
style={position === "top" || position === "bottom"
|
|
124
|
-
? `max-height: ${maxSize}px;`
|
|
125
|
-
: `max-width: ${maxSize}px`}
|
|
126
|
-
class={classSheet}
|
|
127
|
-
>
|
|
128
|
-
<slot>Content</slot>
|
|
129
|
-
</div>
|
|
130
|
-
<button title="Close" on:click={() => (display = false)}></button>
|
|
131
|
-
</div>
|
|
132
|
-
{/if}
|
|
133
|
-
|
|
134
|
-
<style>
|
|
135
|
-
button {
|
|
136
|
-
flex-grow: 1;
|
|
137
|
-
}
|
|
138
|
-
.d-backdrop {
|
|
139
|
-
position: fixed;
|
|
140
|
-
display: flex;
|
|
141
|
-
top: 0;
|
|
142
|
-
bottom: 0;
|
|
143
|
-
left: 0;
|
|
144
|
-
right: 0;
|
|
145
|
-
overflow: hidden;
|
|
146
|
-
}
|
|
147
|
-
.d-backdrop-bottom {
|
|
148
|
-
flex-direction: column-reverse;
|
|
149
|
-
}
|
|
150
|
-
.d-backdrop-top {
|
|
151
|
-
flex-direction: column;
|
|
152
|
-
}
|
|
153
|
-
.d-backdrop-right {
|
|
154
|
-
flex-direction: row-reverse;
|
|
155
|
-
}
|
|
156
|
-
</style>
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<svelte:body on:keydown={onKeyDown} />
|
|
107
|
+
|
|
108
|
+
{#if display}
|
|
109
|
+
<div
|
|
110
|
+
transition:blur={transition ? transition : { duration: 0 }}
|
|
111
|
+
use:focusElement
|
|
112
|
+
class="d-backdrop {className}"
|
|
113
|
+
class:d-backdrop-bottom={position === "bottom"}
|
|
114
|
+
class:d-backdrop-top={position === "top"}
|
|
115
|
+
class:d-backdrop-right={position === "right"}
|
|
116
|
+
{id}
|
|
117
|
+
tabindex="-1"
|
|
118
|
+
>
|
|
119
|
+
<div
|
|
120
|
+
role="dialog"
|
|
121
|
+
bind:this={sheet}
|
|
122
|
+
transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
|
|
123
|
+
style={position === "top" || position === "bottom"
|
|
124
|
+
? `max-height: ${maxSize}px;`
|
|
125
|
+
: `max-width: ${maxSize}px`}
|
|
126
|
+
class={classSheet}
|
|
127
|
+
>
|
|
128
|
+
<slot>Content</slot>
|
|
129
|
+
</div>
|
|
130
|
+
<button title="Close" on:click={() => (display = false)}></button>
|
|
131
|
+
</div>
|
|
132
|
+
{/if}
|
|
133
|
+
|
|
134
|
+
<style>
|
|
135
|
+
button {
|
|
136
|
+
flex-grow: 1;
|
|
137
|
+
}
|
|
138
|
+
.d-backdrop {
|
|
139
|
+
position: fixed;
|
|
140
|
+
display: flex;
|
|
141
|
+
top: 0;
|
|
142
|
+
bottom: 0;
|
|
143
|
+
left: 0;
|
|
144
|
+
right: 0;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
}
|
|
147
|
+
.d-backdrop-bottom {
|
|
148
|
+
flex-direction: column-reverse;
|
|
149
|
+
}
|
|
150
|
+
.d-backdrop-top {
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
}
|
|
153
|
+
.d-backdrop-right {
|
|
154
|
+
flex-direction: row-reverse;
|
|
155
|
+
}
|
|
156
|
+
</style>
|
|
@@ -17,15 +17,15 @@ Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.
|
|
|
17
17
|
@example
|
|
18
18
|
|
|
19
19
|
```svelte
|
|
20
|
-
<script lang="ts">
|
|
21
|
-
import { YouTube } from "drab";
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
|
-
<YouTube
|
|
25
|
-
class="aspect-video w-full rounded"
|
|
26
|
-
title="Renegade - Kevin Olusola"
|
|
27
|
-
uid="gouiY85kD2o"
|
|
28
|
-
/>
|
|
20
|
+
<script lang="ts">
|
|
21
|
+
import { YouTube } from "drab";
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<YouTube
|
|
25
|
+
class="aspect-video w-full rounded"
|
|
26
|
+
title="Renegade - Kevin Olusola"
|
|
27
|
+
uid="gouiY85kD2o"
|
|
28
|
+
/>
|
|
29
29
|
```
|
|
30
30
|
-->
|
|
31
31
|
|
package/package.json
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "drab",
|
|
3
|
-
"version": "2.8.
|
|
4
|
-
"description": "An unstyled Svelte component library",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"components",
|
|
7
|
-
"Svelte",
|
|
8
|
-
"SvelteKit",
|
|
9
|
-
"Breakpoint",
|
|
10
|
-
"Chord",
|
|
11
|
-
"ContextMenu",
|
|
12
|
-
"Copy",
|
|
13
|
-
"DataTable",
|
|
14
|
-
"Details",
|
|
15
|
-
"Editor",
|
|
16
|
-
"Fullscreen",
|
|
17
|
-
"Popover",
|
|
18
|
-
"Share",
|
|
19
|
-
"Sheet",
|
|
20
|
-
"YouTube"
|
|
21
|
-
],
|
|
22
|
-
"homepage": "https://drab.robino.dev",
|
|
23
|
-
"license": "MIT",
|
|
24
|
-
"author": {
|
|
25
|
-
"name": "Ross Robino",
|
|
26
|
-
"url": "https://robino.dev"
|
|
27
|
-
},
|
|
28
|
-
"repository": "github:rossrobino/drab",
|
|
29
|
-
"scripts": {
|
|
30
|
-
"dev": "vite dev",
|
|
31
|
-
"build": "vite build && npm run package",
|
|
32
|
-
"preview": "vite preview",
|
|
33
|
-
"package": "svelte-kit sync && svelte-package && publint",
|
|
34
|
-
"prepublishOnly": "npm run package",
|
|
35
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
36
|
-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
37
|
-
"lint": "prettier --check . && eslint .",
|
|
38
|
-
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
|
|
39
|
-
"pub": "npm publish --access public",
|
|
40
|
-
"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
|
|
41
|
-
},
|
|
42
|
-
"exports": {
|
|
43
|
-
".": {
|
|
44
|
-
"types": "./dist/index.d.ts",
|
|
45
|
-
"svelte": "./dist/index.js"
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
"files": [
|
|
49
|
-
"dist"
|
|
50
|
-
],
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"svelte": "^4.2.0"
|
|
53
|
-
},
|
|
54
|
-
"devDependencies": {
|
|
55
|
-
"@sveltejs/adapter-vercel": "^3.0.3",
|
|
56
|
-
"@sveltejs/kit": "^1.22.6",
|
|
57
|
-
"@sveltejs/package": "^2.2.1",
|
|
58
|
-
"@tailwindcss/typography": "^0.5.9",
|
|
59
|
-
"@types/node": "^20.5.
|
|
60
|
-
"@typescript-eslint/eslint-plugin": "^6.4.
|
|
61
|
-
"@typescript-eslint/parser": "^6.4.
|
|
62
|
-
"autoprefixer": "^10.4.15",
|
|
63
|
-
"eslint": "^8.47.0",
|
|
64
|
-
"eslint-config-prettier": "^9.0.0",
|
|
65
|
-
"eslint-plugin-svelte": "^2.
|
|
66
|
-
"marked": "^7.0.4",
|
|
67
|
-
"postcss": "^8.4.28",
|
|
68
|
-
"prettier": "^3.0.2",
|
|
69
|
-
"prettier-plugin-svelte": "^3.0.3",
|
|
70
|
-
"prettier-plugin-tailwindcss": "^0.5.3",
|
|
71
|
-
"publint": "^0.2.
|
|
72
|
-
"svelte-check": "^3.5.0",
|
|
73
|
-
"tailwindcss": "^3.3.3",
|
|
74
|
-
"tslib": "^2.6.2",
|
|
75
|
-
"typescript": "^5.1.6",
|
|
76
|
-
"vite": "^4.4.9"
|
|
77
|
-
},
|
|
78
|
-
"svelte": "./dist/index.js",
|
|
79
|
-
"types": "./dist/index.d.ts",
|
|
80
|
-
"type": "module"
|
|
81
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "drab",
|
|
3
|
+
"version": "2.8.7",
|
|
4
|
+
"description": "An unstyled Svelte component library",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"components",
|
|
7
|
+
"Svelte",
|
|
8
|
+
"SvelteKit",
|
|
9
|
+
"Breakpoint",
|
|
10
|
+
"Chord",
|
|
11
|
+
"ContextMenu",
|
|
12
|
+
"Copy",
|
|
13
|
+
"DataTable",
|
|
14
|
+
"Details",
|
|
15
|
+
"Editor",
|
|
16
|
+
"Fullscreen",
|
|
17
|
+
"Popover",
|
|
18
|
+
"Share",
|
|
19
|
+
"Sheet",
|
|
20
|
+
"YouTube"
|
|
21
|
+
],
|
|
22
|
+
"homepage": "https://drab.robino.dev",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"author": {
|
|
25
|
+
"name": "Ross Robino",
|
|
26
|
+
"url": "https://robino.dev"
|
|
27
|
+
},
|
|
28
|
+
"repository": "github:rossrobino/drab",
|
|
29
|
+
"scripts": {
|
|
30
|
+
"dev": "vite dev",
|
|
31
|
+
"build": "vite build && npm run package",
|
|
32
|
+
"preview": "vite preview",
|
|
33
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
34
|
+
"prepublishOnly": "npm run package",
|
|
35
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
36
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
37
|
+
"lint": "prettier --check . && eslint .",
|
|
38
|
+
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
|
|
39
|
+
"pub": "npm publish --access public",
|
|
40
|
+
"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
|
|
41
|
+
},
|
|
42
|
+
"exports": {
|
|
43
|
+
".": {
|
|
44
|
+
"types": "./dist/index.d.ts",
|
|
45
|
+
"svelte": "./dist/index.js"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"files": [
|
|
49
|
+
"dist"
|
|
50
|
+
],
|
|
51
|
+
"dependencies": {
|
|
52
|
+
"svelte": "^4.2.0"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@sveltejs/adapter-vercel": "^3.0.3",
|
|
56
|
+
"@sveltejs/kit": "^1.22.6",
|
|
57
|
+
"@sveltejs/package": "^2.2.1",
|
|
58
|
+
"@tailwindcss/typography": "^0.5.9",
|
|
59
|
+
"@types/node": "^20.5.3",
|
|
60
|
+
"@typescript-eslint/eslint-plugin": "^6.4.1",
|
|
61
|
+
"@typescript-eslint/parser": "^6.4.1",
|
|
62
|
+
"autoprefixer": "^10.4.15",
|
|
63
|
+
"eslint": "^8.47.0",
|
|
64
|
+
"eslint-config-prettier": "^9.0.0",
|
|
65
|
+
"eslint-plugin-svelte": "^2.33.0",
|
|
66
|
+
"marked": "^7.0.4",
|
|
67
|
+
"postcss": "^8.4.28",
|
|
68
|
+
"prettier": "^3.0.2",
|
|
69
|
+
"prettier-plugin-svelte": "^3.0.3",
|
|
70
|
+
"prettier-plugin-tailwindcss": "^0.5.3",
|
|
71
|
+
"publint": "^0.2.2",
|
|
72
|
+
"svelte-check": "^3.5.0",
|
|
73
|
+
"tailwindcss": "^3.3.3",
|
|
74
|
+
"tslib": "^2.6.2",
|
|
75
|
+
"typescript": "^5.1.6",
|
|
76
|
+
"vite": "^4.4.9"
|
|
77
|
+
},
|
|
78
|
+
"svelte": "./dist/index.js",
|
|
79
|
+
"types": "./dist/index.d.ts",
|
|
80
|
+
"type": "module"
|
|
81
|
+
}
|