drab 2.5.0 → 2.6.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/dist/components/Breakpoint.svelte +59 -0
- package/dist/components/Breakpoint.svelte.d.ts +46 -0
- package/dist/components/Sheet.svelte +111 -109
- package/dist/components/Sheet.svelte.d.ts +2 -0
- package/dist/util/transition.d.ts +1 -1
- package/dist/util/transition.js +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
|
|
4
|
+
### Breakpoints
|
|
5
|
+
|
|
6
|
+
Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints).
|
|
7
|
+
|
|
8
|
+
@props
|
|
9
|
+
|
|
10
|
+
- `breakpoints` - array of objects representing the breakpoints of the application
|
|
11
|
+
- `class`
|
|
12
|
+
- `id`
|
|
13
|
+
|
|
14
|
+
@example
|
|
15
|
+
|
|
16
|
+
```svelte
|
|
17
|
+
<script lang="ts">
|
|
18
|
+
import { Breakpoint } from "drab";
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<div>
|
|
22
|
+
<Breakpoint
|
|
23
|
+
class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
```
|
|
27
|
+
-->
|
|
28
|
+
|
|
29
|
+
<script>import { messageNoScript } from "../util/messages";
|
|
30
|
+
let className = "";
|
|
31
|
+
export { className as class };
|
|
32
|
+
export let id = "";
|
|
33
|
+
export let breakpoints = [
|
|
34
|
+
{ name: "sm", width: 640 },
|
|
35
|
+
{ name: "md", width: 768 },
|
|
36
|
+
{ name: "lg", width: 1024 },
|
|
37
|
+
{ name: "xl", width: 1280 },
|
|
38
|
+
{ name: "2xl", width: 1536 }
|
|
39
|
+
];
|
|
40
|
+
breakpoints.sort((a, b) => b.width - a.width);
|
|
41
|
+
let innerWidth = 0;
|
|
42
|
+
$:
|
|
43
|
+
breakpoint = getBreakpoint(innerWidth);
|
|
44
|
+
const getBreakpoint = (innerWidth2) => {
|
|
45
|
+
for (let i = 0; i < breakpoints.length; i++) {
|
|
46
|
+
if (innerWidth2 > breakpoints[i].width) {
|
|
47
|
+
return breakpoints[i].name;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return "none";
|
|
51
|
+
};
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<svelte:window bind:innerWidth />
|
|
55
|
+
|
|
56
|
+
<div class={className} {id}>
|
|
57
|
+
{breakpoint}:{innerWidth}
|
|
58
|
+
<noscript>{messageNoScript}</noscript>
|
|
59
|
+
</div>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
class?: string | undefined;
|
|
5
|
+
id?: string | undefined;
|
|
6
|
+
/** array of objects representing the breakpoints of the application */ breakpoints?: {
|
|
7
|
+
name: string;
|
|
8
|
+
width: number;
|
|
9
|
+
}[] | undefined;
|
|
10
|
+
};
|
|
11
|
+
events: {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
};
|
|
14
|
+
slots: {};
|
|
15
|
+
};
|
|
16
|
+
export type BreakpointProps = typeof __propDef.props;
|
|
17
|
+
export type BreakpointEvents = typeof __propDef.events;
|
|
18
|
+
export type BreakpointSlots = typeof __propDef.slots;
|
|
19
|
+
/**
|
|
20
|
+
* ### Breakpoints
|
|
21
|
+
*
|
|
22
|
+
* Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints).
|
|
23
|
+
*
|
|
24
|
+
* @props
|
|
25
|
+
*
|
|
26
|
+
* - `breakpoints` - array of objects representing the breakpoints of the application
|
|
27
|
+
* - `class`
|
|
28
|
+
* - `id`
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
*
|
|
32
|
+
* ```svelte
|
|
33
|
+
* <script lang="ts">
|
|
34
|
+
* import { Breakpoint } from "drab";
|
|
35
|
+
* </script>
|
|
36
|
+
*
|
|
37
|
+
* <div>
|
|
38
|
+
* <Breakpoint
|
|
39
|
+
* class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
|
|
40
|
+
* />
|
|
41
|
+
* </div>
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
export default class Breakpoint extends SvelteComponent<BreakpointProps, BreakpointEvents, BreakpointSlots> {
|
|
45
|
+
}
|
|
46
|
+
export {};
|
|
@@ -1,60 +1,61 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
@component
|
|
3
|
-
|
|
4
|
-
### Sheet
|
|
5
|
-
|
|
6
|
-
Creates a sheet element based on the `position` provided.
|
|
7
|
-
|
|
8
|
-
@props
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
|
|
4
|
+
### Sheet
|
|
5
|
+
|
|
6
|
+
Creates a sheet element based on the `position` provided.
|
|
7
|
+
|
|
8
|
+
@props
|
|
9
9
|
|
|
10
10
|
- `classSheet` - sheet class - not the backdrop
|
|
11
11
|
- `class`
|
|
12
12
|
- `display` - controls whether the sheet is displayed
|
|
13
13
|
- `id`
|
|
14
|
+
- `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
|
|
14
15
|
- `position` - determines the position of sheet
|
|
15
16
|
- `size` - size of sheet based on position - can also use css instead
|
|
16
17
|
- `transitionSheet` - slides the sheet, set to `false` to remove
|
|
17
18
|
- `transition` - fades the entire component, set to `false` to remove
|
|
18
19
|
|
|
19
|
-
@slots
|
|
20
|
-
|
|
21
|
-
| name | purpose | default value |
|
|
22
|
-
| ---------- | ------------------------------- | ------------- |
|
|
23
|
-
| `default` | content | `Content` |
|
|
24
|
-
|
|
25
|
-
@example
|
|
20
|
+
@slots
|
|
21
|
+
|
|
22
|
+
| name | purpose | default value |
|
|
23
|
+
| ---------- | ------------------------------- | ------------- |
|
|
24
|
+
| `default` | content | `Content` |
|
|
25
|
+
|
|
26
|
+
@example
|
|
26
27
|
|
|
27
28
|
```svelte
|
|
28
|
-
<script lang="ts">
|
|
29
|
-
import { Sheet } from "drab";
|
|
30
|
-
|
|
31
|
-
let display = false;
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
<div>
|
|
35
|
-
<button class="btn" on:click={() => (display = true)}>Open</button>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<Sheet
|
|
39
|
-
bind:display
|
|
40
|
-
class="bg-gray-50/80 backdrop-blur"
|
|
41
|
-
classSheet="p-4 shadow bg-white"
|
|
42
|
-
>
|
|
43
|
-
<div class="mb-4 flex items-center justify-between">
|
|
44
|
-
<div class="text-lg font-bold">Sheet</div>
|
|
45
|
-
<button class="btn" on:click={() => (display = false)}>Close</button>
|
|
46
|
-
</div>
|
|
47
|
-
<div>
|
|
48
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
49
|
-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
50
|
-
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
51
|
-
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
52
|
-
cillum dolore eu fugiat nulla pariatur.
|
|
53
|
-
</div>
|
|
54
|
-
</Sheet>
|
|
29
|
+
<script lang="ts">
|
|
30
|
+
import { Sheet } from "drab";
|
|
31
|
+
|
|
32
|
+
let display = false;
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<div>
|
|
36
|
+
<button class="btn" on:click={() => (display = true)}>Open</button>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<Sheet
|
|
40
|
+
bind:display
|
|
41
|
+
class="bg-gray-50/80 backdrop-blur"
|
|
42
|
+
classSheet="p-4 shadow bg-white"
|
|
43
|
+
>
|
|
44
|
+
<div class="mb-4 flex items-center justify-between">
|
|
45
|
+
<div class="text-lg font-bold">Sheet</div>
|
|
46
|
+
<button class="btn" on:click={() => (display = false)}>Close</button>
|
|
47
|
+
</div>
|
|
48
|
+
<div>
|
|
49
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
50
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
51
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
52
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
53
|
+
cillum dolore eu fugiat nulla pariatur.
|
|
54
|
+
</div>
|
|
55
|
+
</Sheet>
|
|
55
56
|
```
|
|
56
|
-
-->
|
|
57
|
-
|
|
57
|
+
-->
|
|
58
|
+
|
|
58
59
|
<script>import { onMount } from "svelte";
|
|
59
60
|
import {
|
|
60
61
|
fade,
|
|
@@ -66,14 +67,15 @@ let className = "";
|
|
|
66
67
|
export { className as class };
|
|
67
68
|
export let id = "";
|
|
68
69
|
export let classSheet = "";
|
|
69
|
-
export let display =
|
|
70
|
+
export let display = false;
|
|
70
71
|
export let transition = { duration };
|
|
71
72
|
export let position = "right";
|
|
72
73
|
export let size = 488;
|
|
73
74
|
export let transitionSheet = { duration };
|
|
75
|
+
export let onClickClose = false;
|
|
74
76
|
let sheet;
|
|
75
77
|
const clickOutside = (e) => {
|
|
76
|
-
if (e.target instanceof Node && !sheet.contains(e.target)) {
|
|
78
|
+
if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
|
|
77
79
|
display = false;
|
|
78
80
|
}
|
|
79
81
|
};
|
|
@@ -101,66 +103,66 @@ onMount(() => {
|
|
|
101
103
|
transitionSheet.duration = 0;
|
|
102
104
|
}
|
|
103
105
|
});
|
|
104
|
-
</script>
|
|
105
|
-
|
|
106
|
-
<svelte:body on:keydown={onKeyDown} />
|
|
107
|
-
|
|
108
|
-
{#if display}
|
|
109
|
-
<div
|
|
110
|
-
role="button"
|
|
111
|
-
tabindex="0"
|
|
112
|
-
on:click={clickOutside}
|
|
113
|
-
on:keydown={onKeyDown}
|
|
114
|
-
transition:fade={transition ? transition : { duration: 0 }}
|
|
115
|
-
class="d-backdrop {className}"
|
|
116
|
-
{id}
|
|
117
|
-
>
|
|
118
|
-
<div
|
|
119
|
-
bind:this={sheet}
|
|
120
|
-
transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
|
|
121
|
-
style={position === "top" || position === "bottom"
|
|
122
|
-
? `max-height: ${size}px;`
|
|
123
|
-
: `max-width: ${size}px`}
|
|
124
|
-
class="d-sheet {classSheet}"
|
|
125
|
-
class:d-bottom={position === "bottom"}
|
|
126
|
-
class:d-top={position === "top"}
|
|
127
|
-
class:d-left={position === "left"}
|
|
128
|
-
class:d-right={position === "right"}
|
|
129
|
-
>
|
|
130
|
-
<slot>Content</slot>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
{/if}
|
|
134
|
-
|
|
135
|
-
<style>
|
|
136
|
-
.d-backdrop {
|
|
137
|
-
position: fixed;
|
|
138
|
-
display: grid;
|
|
139
|
-
z-index: 10;
|
|
140
|
-
top: 0;
|
|
141
|
-
bottom: 0;
|
|
142
|
-
left: 0;
|
|
143
|
-
right: 0;
|
|
144
|
-
overflow: hidden;
|
|
145
|
-
cursor: default;
|
|
146
|
-
}
|
|
147
|
-
.d-sheet {
|
|
148
|
-
margin: auto;
|
|
149
|
-
}
|
|
150
|
-
.d-bottom {
|
|
151
|
-
margin-bottom: 0;
|
|
152
|
-
width: 100%;
|
|
153
|
-
}
|
|
154
|
-
.d-top {
|
|
155
|
-
margin-top: 0;
|
|
156
|
-
width: 100%;
|
|
157
|
-
}
|
|
158
|
-
.d-right {
|
|
159
|
-
margin-right: 0;
|
|
160
|
-
height: 100%;
|
|
161
|
-
}
|
|
162
|
-
.d-left {
|
|
163
|
-
margin-left: 0;
|
|
164
|
-
height: 100%;
|
|
165
|
-
}
|
|
166
|
-
</style>
|
|
106
|
+
</script>
|
|
107
|
+
|
|
108
|
+
<svelte:body on:keydown={onKeyDown} />
|
|
109
|
+
|
|
110
|
+
{#if display}
|
|
111
|
+
<div
|
|
112
|
+
role="button"
|
|
113
|
+
tabindex="0"
|
|
114
|
+
on:click={clickOutside}
|
|
115
|
+
on:keydown={onKeyDown}
|
|
116
|
+
transition:fade={transition ? transition : { duration: 0 }}
|
|
117
|
+
class="d-backdrop {className}"
|
|
118
|
+
{id}
|
|
119
|
+
>
|
|
120
|
+
<div
|
|
121
|
+
bind:this={sheet}
|
|
122
|
+
transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
|
|
123
|
+
style={position === "top" || position === "bottom"
|
|
124
|
+
? `max-height: ${size}px;`
|
|
125
|
+
: `max-width: ${size}px`}
|
|
126
|
+
class="d-sheet {classSheet}"
|
|
127
|
+
class:d-bottom={position === "bottom"}
|
|
128
|
+
class:d-top={position === "top"}
|
|
129
|
+
class:d-left={position === "left"}
|
|
130
|
+
class:d-right={position === "right"}
|
|
131
|
+
>
|
|
132
|
+
<slot>Content</slot>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
{/if}
|
|
136
|
+
|
|
137
|
+
<style>
|
|
138
|
+
.d-backdrop {
|
|
139
|
+
position: fixed;
|
|
140
|
+
display: grid;
|
|
141
|
+
z-index: 10;
|
|
142
|
+
top: 0;
|
|
143
|
+
bottom: 0;
|
|
144
|
+
left: 0;
|
|
145
|
+
right: 0;
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
cursor: default;
|
|
148
|
+
}
|
|
149
|
+
.d-sheet {
|
|
150
|
+
margin: auto;
|
|
151
|
+
}
|
|
152
|
+
.d-bottom {
|
|
153
|
+
margin-bottom: 0;
|
|
154
|
+
width: 100%;
|
|
155
|
+
}
|
|
156
|
+
.d-top {
|
|
157
|
+
margin-top: 0;
|
|
158
|
+
width: 100%;
|
|
159
|
+
}
|
|
160
|
+
.d-right {
|
|
161
|
+
margin-right: 0;
|
|
162
|
+
height: 100%;
|
|
163
|
+
}
|
|
164
|
+
.d-left {
|
|
165
|
+
margin-left: 0;
|
|
166
|
+
height: 100%;
|
|
167
|
+
}
|
|
168
|
+
</style>
|
|
@@ -10,6 +10,7 @@ declare const __propDef: {
|
|
|
10
10
|
/** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
|
11
11
|
/** size of sheet based on position - can also use css instead */ size?: number | undefined;
|
|
12
12
|
/** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
|
|
13
|
+
/** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
|
|
13
14
|
};
|
|
14
15
|
events: {
|
|
15
16
|
[evt: string]: CustomEvent<any>;
|
|
@@ -32,6 +33,7 @@ export type SheetSlots = typeof __propDef.slots;
|
|
|
32
33
|
* - `class`
|
|
33
34
|
* - `display` - controls whether the sheet is displayed
|
|
34
35
|
* - `id`
|
|
36
|
+
* - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
|
|
35
37
|
* - `position` - determines the position of sheet
|
|
36
38
|
* - `size` - size of sheet based on position - can also use css instead
|
|
37
39
|
* - `transitionSheet` - slides the sheet, set to `false` to remove
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const duration =
|
|
1
|
+
export declare const duration = 250;
|
package/dist/util/transition.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const duration =
|
|
1
|
+
export const duration = 250;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drab",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "An unstyled Svelte component library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"repository": "github:rossrobino/drab",
|
|
28
28
|
"scripts": {
|
|
29
29
|
"dev": "vite dev",
|
|
30
|
-
"build": "
|
|
30
|
+
"build": "vite build && npm run package",
|
|
31
31
|
"preview": "vite preview",
|
|
32
32
|
"package": "svelte-kit sync && svelte-package && publint",
|
|
33
33
|
"prepublishOnly": "npm run package",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"lint": "prettier --check . && eslint .",
|
|
37
37
|
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
|
|
38
38
|
"pub": "npm publish --access public",
|
|
39
|
-
"doc": "node src/scripts/
|
|
39
|
+
"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js"
|
|
40
40
|
},
|
|
41
41
|
"exports": {
|
|
42
42
|
".": {
|