drab 2.7.0 → 2.8.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 +0 -2
- package/dist/components/Accordion.svelte +4 -4
- package/dist/components/Accordion.svelte.d.ts +2 -2
- package/dist/components/Breakpoint.svelte +3 -5
- package/dist/components/Breakpoint.svelte.d.ts +1 -3
- package/dist/components/Chord.svelte +1 -1
- package/dist/components/Chord.svelte.d.ts +1 -1
- package/dist/components/ContextMenu.svelte +27 -12
- package/dist/components/ContextMenu.svelte.d.ts +20 -6
- package/dist/components/CopyButton.svelte +3 -5
- package/dist/components/CopyButton.svelte.d.ts +2 -4
- package/dist/components/DataTable.svelte +31 -16
- package/dist/components/DataTable.svelte.d.ts +9 -6
- package/dist/components/Editor.svelte +14 -12
- package/dist/components/Editor.svelte.d.ts +6 -4
- package/dist/components/FullscreenButton.svelte +10 -19
- package/dist/components/FullscreenButton.svelte.d.ts +7 -12
- package/dist/components/Popover.svelte +7 -9
- package/dist/components/Popover.svelte.d.ts +6 -8
- package/dist/components/ShareButton.svelte +72 -22
- package/dist/components/ShareButton.svelte.d.ts +44 -13
- package/dist/components/Sheet.svelte +11 -35
- package/dist/components/Sheet.svelte.d.ts +8 -9
- package/dist/components/Tabs.svelte +16 -18
- package/dist/components/Tabs.svelte.d.ts +10 -10
- package/dist/components/YouTube.svelte +2 -2
- package/dist/components/YouTube.svelte.d.ts +2 -2
- package/package.json +1 -1
@@ -9,7 +9,7 @@ Make the document or a specific element fullscreen.
|
|
9
9
|
|
10
10
|
- `classNoscript` - `noscript` class
|
11
11
|
- `class`
|
12
|
-
- `confirmMessage` - message to display in the `confirm` popup,
|
12
|
+
- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
|
13
13
|
- `id`
|
14
14
|
- `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
|
15
15
|
- `title`
|
@@ -24,22 +24,17 @@ Make the document or a specific element fullscreen.
|
|
24
24
|
@example
|
25
25
|
|
26
26
|
```svelte
|
27
|
-
<script>
|
27
|
+
<script lang="ts">
|
28
28
|
import { FullscreenButton } from "drab";
|
29
29
|
|
30
|
-
let
|
30
|
+
let target: HTMLDivElement;
|
31
31
|
</script>
|
32
32
|
|
33
|
-
<
|
34
|
-
<FullscreenButton class="btn" />
|
35
|
-
</div>
|
33
|
+
<FullscreenButton class="btn mb-8" />
|
36
34
|
|
37
|
-
<div
|
38
|
-
bind:this={fullscreenDiv}
|
39
|
-
class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
|
40
|
-
>
|
35
|
+
<div bind:this={target} class="rounded bg-neutral-800 p-4 text-neutral-50">
|
41
36
|
<div class="mb-2">Target element</div>
|
42
|
-
<FullscreenButton target
|
37
|
+
<FullscreenButton {target} class="btn btn-s bg-neutral-50">
|
43
38
|
Enable Element Fullscreen
|
44
39
|
</FullscreenButton>
|
45
40
|
</div>
|
@@ -55,7 +50,7 @@ export let title = "";
|
|
55
50
|
export let target = null;
|
56
51
|
export let confirmMessage = "";
|
57
52
|
export let classNoscript = "";
|
58
|
-
let
|
53
|
+
let disabled = true;
|
59
54
|
let fullscreen = false;
|
60
55
|
const onClick = () => {
|
61
56
|
if (fullscreen) {
|
@@ -74,7 +69,7 @@ const onClick = () => {
|
|
74
69
|
};
|
75
70
|
onMount(() => {
|
76
71
|
if (document.documentElement.requestFullscreen)
|
77
|
-
|
72
|
+
disabled = false;
|
78
73
|
if (!target)
|
79
74
|
target = document.documentElement;
|
80
75
|
});
|
@@ -84,7 +79,7 @@ onMount(() => {
|
|
84
79
|
|
85
80
|
<button
|
86
81
|
type="button"
|
87
|
-
disabled
|
82
|
+
{disabled}
|
88
83
|
on:click={onClick}
|
89
84
|
class={className}
|
90
85
|
{id}
|
@@ -97,8 +92,4 @@ onMount(() => {
|
|
97
92
|
{/if}
|
98
93
|
</button>
|
99
94
|
|
100
|
-
<noscript>
|
101
|
-
<div class={classNoscript}>
|
102
|
-
{messageNoScript}
|
103
|
-
</div>
|
104
|
-
</noscript>
|
95
|
+
<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
|
@@ -5,7 +5,7 @@ declare const __propDef: {
|
|
5
5
|
id?: string | undefined;
|
6
6
|
title?: string | undefined;
|
7
7
|
/** element to make fullscreen (defaults to `document.documentElement` upon mount) */ target?: HTMLElement | null | undefined;
|
8
|
-
/** message to display in the `confirm` popup,
|
8
|
+
/** message to display in the `confirm` popup, defaults to empty string `""` -- disabled */ confirmMessage?: string | undefined;
|
9
9
|
/** `noscript` class */ classNoscript?: string | undefined;
|
10
10
|
};
|
11
11
|
events: {
|
@@ -28,7 +28,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
|
|
28
28
|
*
|
29
29
|
* - `classNoscript` - `noscript` class
|
30
30
|
* - `class`
|
31
|
-
* - `confirmMessage` - message to display in the `confirm` popup,
|
31
|
+
* - `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
|
32
32
|
* - `id`
|
33
33
|
* - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
|
34
34
|
* - `title`
|
@@ -43,22 +43,17 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
|
|
43
43
|
* @example
|
44
44
|
*
|
45
45
|
* ```svelte
|
46
|
-
* <script>
|
46
|
+
* <script lang="ts">
|
47
47
|
* import { FullscreenButton } from "drab";
|
48
48
|
*
|
49
|
-
* let
|
49
|
+
* let target: HTMLDivElement;
|
50
50
|
* </script>
|
51
51
|
*
|
52
|
-
* <
|
53
|
-
* <FullscreenButton class="btn" />
|
54
|
-
* </div>
|
52
|
+
* <FullscreenButton class="btn mb-8" />
|
55
53
|
*
|
56
|
-
* <div
|
57
|
-
* bind:this={fullscreenDiv}
|
58
|
-
* class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
|
59
|
-
* >
|
54
|
+
* <div bind:this={target} class="rounded bg-neutral-800 p-4 text-neutral-50">
|
60
55
|
* <div class="mb-2">Target element</div>
|
61
|
-
* <FullscreenButton target
|
56
|
+
* <FullscreenButton {target} class="btn btn-s bg-neutral-50">
|
62
57
|
* Enable Element Fullscreen
|
63
58
|
* </FullscreenButton>
|
64
59
|
* </div>
|
@@ -3,12 +3,12 @@
|
|
3
3
|
|
4
4
|
### Popover
|
5
5
|
|
6
|
-
Displays a popover relatively positioned to the target.
|
6
|
+
Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
10
|
- `class`
|
11
|
-
- `display` -
|
11
|
+
- `display` - shows / hides the popover
|
12
12
|
- `id`
|
13
13
|
- `position` - where the popover is displayed in relation to the target
|
14
14
|
- `target` - target element to position the popover in relation to
|
@@ -19,7 +19,6 @@ Displays a popover relatively positioned to the target.
|
|
19
19
|
| name | purpose | default value |
|
20
20
|
| ---------- | ------------------------------- | ------------- |
|
21
21
|
| `default` | default | Popover |
|
22
|
-
| `button` | button contents | Open |
|
23
22
|
|
24
23
|
@example
|
25
24
|
|
@@ -27,8 +26,7 @@ Displays a popover relatively positioned to the target.
|
|
27
26
|
<script lang="ts">
|
28
27
|
import { Popover } from "drab";
|
29
28
|
|
30
|
-
let
|
31
|
-
let hoverButton: HTMLButtonElement;
|
29
|
+
let target: HTMLButtonElement;
|
32
30
|
|
33
31
|
let display = false;
|
34
32
|
</script>
|
@@ -36,13 +34,13 @@ Displays a popover relatively positioned to the target.
|
|
36
34
|
<button
|
37
35
|
class="btn"
|
38
36
|
type="button"
|
39
|
-
bind:this={
|
37
|
+
bind:this={target}
|
40
38
|
on:click={() => (display = !display)}
|
41
39
|
>
|
42
40
|
{display ? "Close" : "Open"}
|
43
41
|
</button>
|
44
42
|
|
45
|
-
<Popover target
|
43
|
+
<Popover {target} bind:display class="p-2">
|
46
44
|
<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
|
47
45
|
<div class="font-bold">Bottom</div>
|
48
46
|
<button class="btn">Button</button>
|
@@ -83,8 +81,8 @@ const setPosition = async () => {
|
|
83
81
|
}
|
84
82
|
}
|
85
83
|
const targetRect = target.getBoundingClientRect();
|
86
|
-
coordinates.x += targetRect.x;
|
87
|
-
coordinates.y += targetRect.y;
|
84
|
+
coordinates.x += targetRect.x + window.scrollX;
|
85
|
+
coordinates.y += targetRect.y + window.scrollY;
|
88
86
|
await tick();
|
89
87
|
const popoverRect = popover.getBoundingClientRect();
|
90
88
|
if (popoverRect.x < 0) {
|
@@ -4,7 +4,7 @@ declare const __propDef: {
|
|
4
4
|
props: {
|
5
5
|
class?: string | undefined;
|
6
6
|
id?: string | undefined;
|
7
|
-
/**
|
7
|
+
/** shows / hides the popover */ display?: boolean | undefined;
|
8
8
|
/** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
9
9
|
/** target element to position the popover in relation to */ target: HTMLElement;
|
10
10
|
/** fades in and out, set to false to disable */ transition?: false | FadeParams | undefined;
|
@@ -22,12 +22,12 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
22
22
|
/**
|
23
23
|
* ### Popover
|
24
24
|
*
|
25
|
-
* Displays a popover relatively positioned to the target.
|
25
|
+
* Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
|
26
26
|
*
|
27
27
|
* @props
|
28
28
|
*
|
29
29
|
* - `class`
|
30
|
-
* - `display` -
|
30
|
+
* - `display` - shows / hides the popover
|
31
31
|
* - `id`
|
32
32
|
* - `position` - where the popover is displayed in relation to the target
|
33
33
|
* - `target` - target element to position the popover in relation to
|
@@ -38,7 +38,6 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
38
38
|
* | name | purpose | default value |
|
39
39
|
* | ---------- | ------------------------------- | ------------- |
|
40
40
|
* | `default` | default | Popover |
|
41
|
-
* | `button` | button contents | Open |
|
42
41
|
*
|
43
42
|
* @example
|
44
43
|
*
|
@@ -46,8 +45,7 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
46
45
|
* <script lang="ts">
|
47
46
|
* import { Popover } from "drab";
|
48
47
|
*
|
49
|
-
* let
|
50
|
-
* let hoverButton: HTMLButtonElement;
|
48
|
+
* let target: HTMLButtonElement;
|
51
49
|
*
|
52
50
|
* let display = false;
|
53
51
|
* </script>
|
@@ -55,13 +53,13 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
55
53
|
* <button
|
56
54
|
* class="btn"
|
57
55
|
* type="button"
|
58
|
-
* bind:this={
|
56
|
+
* bind:this={target}
|
59
57
|
* on:click={() => (display = !display)}
|
60
58
|
* >
|
61
59
|
* {display ? "Close" : "Open"}
|
62
60
|
* </button>
|
63
61
|
*
|
64
|
-
* <Popover target
|
62
|
+
* <Popover {target} bind:display class="p-2">
|
65
63
|
* <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
|
66
64
|
* <div class="font-bold">Bottom</div>
|
67
65
|
* <button class="btn">Button</button>
|
@@ -3,16 +3,22 @@
|
|
3
3
|
|
4
4
|
### ShareButton
|
5
5
|
|
6
|
-
Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
|
6
|
+
Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
|
7
|
+
|
8
|
+
- If the browser cannot share the provided data:
|
9
|
+
- `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
|
10
|
+
- `files` - uses a hidden `anchor` element to download the first file in the `files` array
|
11
|
+
- If no JavaScript:
|
12
|
+
- `button` is disabled
|
13
|
+
- `url` - displayed after the `button`
|
7
14
|
|
8
15
|
@props
|
9
16
|
|
10
17
|
- `classNoscript` - `noscript` class
|
11
18
|
- `class`
|
12
19
|
- `id`
|
13
|
-
- `
|
14
|
-
- `title`
|
15
|
-
- `url` - url to be shared
|
20
|
+
- `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
|
21
|
+
- `title`
|
16
22
|
|
17
23
|
@slots
|
18
24
|
|
@@ -24,43 +30,81 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
|
|
24
30
|
@example
|
25
31
|
|
26
32
|
```svelte
|
27
|
-
<script>
|
33
|
+
<script lang="ts">
|
28
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
|
+
};
|
29
45
|
</script>
|
30
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
|
+
|
31
58
|
<div>
|
32
|
-
<
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
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}
|
37
66
|
/>
|
67
|
+
<ShareButton class="btn" bind:shareData={fileShareData}>
|
68
|
+
Share File
|
69
|
+
</ShareButton>
|
38
70
|
</div>
|
39
71
|
```
|
40
72
|
-->
|
41
73
|
|
42
74
|
<script>import { onMount } from "svelte";
|
43
75
|
import { delay } from "../util/delay";
|
76
|
+
import { messageNoScript } from "../util/messages";
|
44
77
|
let className = "";
|
45
78
|
export { className as class };
|
46
79
|
export let id = "";
|
47
|
-
export let
|
48
|
-
export let
|
49
|
-
|
80
|
+
export let title = "";
|
81
|
+
export let shareData = {};
|
82
|
+
let downloadAnchor;
|
50
83
|
export let classNoscript = "";
|
51
84
|
let clientJs = false;
|
52
85
|
let complete = false;
|
53
86
|
const onClick = async () => {
|
54
|
-
|
55
|
-
|
56
|
-
await navigator.share(
|
57
|
-
}
|
58
|
-
|
87
|
+
if (navigator.canShare && navigator.canShare(shareData)) {
|
88
|
+
try {
|
89
|
+
await navigator.share(shareData);
|
90
|
+
} catch (error) {
|
91
|
+
if (error.name !== "AbortError") {
|
92
|
+
console.error(error);
|
93
|
+
}
|
94
|
+
}
|
95
|
+
} else if (shareData.url) {
|
96
|
+
try {
|
97
|
+
await navigator.clipboard.writeText(shareData.url);
|
59
98
|
complete = true;
|
60
99
|
setTimeout(() => complete = false, delay);
|
100
|
+
} catch (error) {
|
101
|
+
console.error(error);
|
61
102
|
}
|
62
|
-
}
|
63
|
-
|
103
|
+
} else if (shareData.files) {
|
104
|
+
const file = shareData.files[0];
|
105
|
+
downloadAnchor.download = file.name;
|
106
|
+
downloadAnchor.href = URL.createObjectURL(file);
|
107
|
+
downloadAnchor.click();
|
64
108
|
}
|
65
109
|
};
|
66
110
|
onMount(() => clientJs = true);
|
@@ -68,7 +112,7 @@ onMount(() => clientJs = true);
|
|
68
112
|
|
69
113
|
<button
|
70
114
|
type="button"
|
71
|
-
disabled={!clientJs}
|
115
|
+
disabled={!clientJs || (!shareData.url && !shareData.files)}
|
72
116
|
on:click={onClick}
|
73
117
|
class={className}
|
74
118
|
{id}
|
@@ -81,4 +125,10 @@ onMount(() => clientJs = true);
|
|
81
125
|
{/if}
|
82
126
|
</button>
|
83
127
|
|
84
|
-
<
|
128
|
+
<a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
|
129
|
+
|
130
|
+
<noscript>
|
131
|
+
<span class={classNoscript}>
|
132
|
+
{shareData.url ? shareData.url : messageNoScript}
|
133
|
+
</span>
|
134
|
+
</noscript>
|
@@ -3,9 +3,8 @@ declare const __propDef: {
|
|
3
3
|
props: {
|
4
4
|
class?: string | undefined;
|
5
5
|
id?: string | undefined;
|
6
|
-
|
7
|
-
/**
|
8
|
-
/** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
|
6
|
+
title?: string | undefined;
|
7
|
+
/** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) */ shareData?: ShareData | undefined;
|
9
8
|
/** `noscript` class */ classNoscript?: string | undefined;
|
10
9
|
};
|
11
10
|
events: {
|
@@ -22,16 +21,22 @@ export type ShareButtonSlots = typeof __propDef.slots;
|
|
22
21
|
/**
|
23
22
|
* ### ShareButton
|
24
23
|
*
|
25
|
-
* Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
|
24
|
+
* Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
|
25
|
+
*
|
26
|
+
* - If the browser cannot share the provided data:
|
27
|
+
* - `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
|
28
|
+
* - `files` - uses a hidden `anchor` element to download the first file in the `files` array
|
29
|
+
* - If no JavaScript:
|
30
|
+
* - `button` is disabled
|
31
|
+
* - `url` - displayed after the `button`
|
26
32
|
*
|
27
33
|
* @props
|
28
34
|
*
|
29
35
|
* - `classNoscript` - `noscript` class
|
30
36
|
* - `class`
|
31
37
|
* - `id`
|
32
|
-
* - `
|
33
|
-
* - `title`
|
34
|
-
* - `url` - url to be shared
|
38
|
+
* - `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
|
39
|
+
* - `title`
|
35
40
|
*
|
36
41
|
* @slots
|
37
42
|
*
|
@@ -43,17 +48,43 @@ export type ShareButtonSlots = typeof __propDef.slots;
|
|
43
48
|
* @example
|
44
49
|
*
|
45
50
|
* ```svelte
|
46
|
-
* <script>
|
51
|
+
* <script lang="ts">
|
47
52
|
* import { ShareButton } from "drab";
|
53
|
+
*
|
54
|
+
* let fileInput: HTMLInputElement;
|
55
|
+
*
|
56
|
+
* let fileShareData: ShareData;
|
57
|
+
*
|
58
|
+
* const onInput = () => {
|
59
|
+
* if (fileInput.files) {
|
60
|
+
* fileShareData.files = [fileInput.files[0]];
|
61
|
+
* }
|
62
|
+
* };
|
48
63
|
* </script>
|
49
64
|
*
|
50
|
-
* <div>
|
51
65
|
* <ShareButton
|
52
|
-
*
|
53
|
-
*
|
54
|
-
*
|
55
|
-
*
|
66
|
+
* class="btn mb-8"
|
67
|
+
* shareData={{
|
68
|
+
* text: "Check out this page: ",
|
69
|
+
* title: "drab",
|
70
|
+
* url: "https://drab.robino.dev",
|
71
|
+
* }}
|
72
|
+
* >
|
73
|
+
* Share URL
|
74
|
+
* </ShareButton>
|
75
|
+
*
|
76
|
+
* <div>
|
77
|
+
* <label class="label" for="fileInput">Upload File</label>
|
78
|
+
* <input
|
79
|
+
* type="file"
|
80
|
+
* id="fileInput"
|
81
|
+
* class="input mb-4"
|
82
|
+
* bind:this={fileInput}
|
83
|
+
* on:input={onInput}
|
56
84
|
* />
|
85
|
+
* <ShareButton class="btn" bind:shareData={fileShareData}>
|
86
|
+
* Share File
|
87
|
+
* </ShareButton>
|
57
88
|
* </div>
|
58
89
|
* ```
|
59
90
|
*/
|
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
### Sheet
|
5
5
|
|
6
|
-
Creates a sheet element based on the `position` provided.
|
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
7
|
|
8
8
|
@props
|
9
9
|
|
@@ -13,8 +13,8 @@ Creates a sheet element based on the `position` provided.
|
|
13
13
|
- `id`
|
14
14
|
- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
|
15
15
|
- `position` - determines the position of sheet
|
16
|
-
- `transitionSheet` -
|
17
|
-
- `transition` -
|
16
|
+
- `transitionSheet` - flys the sheet, set to `false` to remove
|
17
|
+
- `transition` - blurs the entire component, set to `false` to remove
|
18
18
|
|
19
19
|
@slots
|
20
20
|
|
@@ -31,16 +31,15 @@ Creates a sheet element based on the `position` provided.
|
|
31
31
|
let display = false;
|
32
32
|
</script>
|
33
33
|
|
34
|
-
<
|
35
|
-
|
36
|
-
|
37
|
-
</button>
|
38
|
-
</div>
|
34
|
+
<button type="button" class="btn" on:click={() => (display = true)}>
|
35
|
+
Open
|
36
|
+
</button>
|
39
37
|
|
40
38
|
<Sheet
|
41
39
|
bind:display
|
42
40
|
class="bg-neutral-50/80 backdrop-blur"
|
43
41
|
classSheet="p-4 shadow bg-white"
|
42
|
+
position="right"
|
44
43
|
>
|
45
44
|
<div class="mb-4 flex items-center justify-between">
|
46
45
|
<h2 class="my-0">Sheet</h2>
|
@@ -61,7 +60,7 @@ Creates a sheet element based on the `position` provided.
|
|
61
60
|
|
62
61
|
<script>import { onMount } from "svelte";
|
63
62
|
import {
|
64
|
-
|
63
|
+
blur,
|
65
64
|
fly
|
66
65
|
} from "svelte/transition";
|
67
66
|
import { prefersReducedMotion } from "../util/accessibility";
|
@@ -72,7 +71,7 @@ export let id = "";
|
|
72
71
|
export let classSheet = "";
|
73
72
|
export let display = false;
|
74
73
|
export let transition = { duration };
|
75
|
-
export let position = "
|
74
|
+
export let position = "left";
|
76
75
|
export let maxSize = 488;
|
77
76
|
export let transitionSheet = { duration };
|
78
77
|
let sheet;
|
@@ -106,7 +105,7 @@ onMount(() => {
|
|
106
105
|
|
107
106
|
{#if display}
|
108
107
|
<div
|
109
|
-
transition:
|
108
|
+
transition:blur={transition ? transition : { duration: 0 }}
|
110
109
|
class="d-backdrop {className}"
|
111
110
|
class:d-backdrop-bottom={position === "bottom"}
|
112
111
|
class:d-backdrop-top={position === "top"}
|
@@ -120,11 +119,7 @@ onMount(() => {
|
|
120
119
|
style={position === "top" || position === "bottom"
|
121
120
|
? `max-height: ${maxSize}px;`
|
122
121
|
: `max-width: ${maxSize}px`}
|
123
|
-
class=
|
124
|
-
class:d-sheet-bottom={position === "bottom"}
|
125
|
-
class:d-sheet-top={position === "top"}
|
126
|
-
class:d-sheet-left={position === "left"}
|
127
|
-
class:d-sheet-right={position === "right"}
|
122
|
+
class={classSheet}
|
128
123
|
>
|
129
124
|
<slot>Content</slot>
|
130
125
|
</div>
|
@@ -155,23 +150,4 @@ onMount(() => {
|
|
155
150
|
.d-backdrop-right {
|
156
151
|
flex-direction: row-reverse;
|
157
152
|
}
|
158
|
-
.d-sheet {
|
159
|
-
margin: auto;
|
160
|
-
}
|
161
|
-
.d-sheet-bottom {
|
162
|
-
margin-bottom: 0;
|
163
|
-
width: 100%;
|
164
|
-
}
|
165
|
-
.d-sheet-top {
|
166
|
-
margin-top: 0;
|
167
|
-
width: 100%;
|
168
|
-
}
|
169
|
-
.d-sheet-right {
|
170
|
-
margin-right: 0;
|
171
|
-
height: 100%;
|
172
|
-
}
|
173
|
-
.d-sheet-left {
|
174
|
-
margin-left: 0;
|
175
|
-
height: 100%;
|
176
|
-
}
|
177
153
|
</style>
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
2
|
-
import { type
|
2
|
+
import { type BlurParams, type FlyParams } from "svelte/transition";
|
3
3
|
declare const __propDef: {
|
4
4
|
props: {
|
5
5
|
class?: string | undefined;
|
6
6
|
id?: string | undefined;
|
7
7
|
/** sheet class - not the backdrop */ classSheet?: string | undefined;
|
8
8
|
/** controls whether the sheet is displayed*/ display?: boolean | undefined;
|
9
|
-
/**
|
9
|
+
/** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
|
10
10
|
/** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
11
11
|
/** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
|
12
|
-
/**
|
12
|
+
/** flys the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
|
13
13
|
};
|
14
14
|
events: {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
@@ -24,7 +24,7 @@ export type SheetSlots = typeof __propDef.slots;
|
|
24
24
|
/**
|
25
25
|
* ### Sheet
|
26
26
|
*
|
27
|
-
* Creates a sheet element based on the `position` provided.
|
27
|
+
* 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.
|
28
28
|
*
|
29
29
|
* @props
|
30
30
|
*
|
@@ -34,8 +34,8 @@ export type SheetSlots = typeof __propDef.slots;
|
|
34
34
|
* - `id`
|
35
35
|
* - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
|
36
36
|
* - `position` - determines the position of sheet
|
37
|
-
* - `transitionSheet` -
|
38
|
-
* - `transition` -
|
37
|
+
* - `transitionSheet` - flys the sheet, set to `false` to remove
|
38
|
+
* - `transition` - blurs the entire component, set to `false` to remove
|
39
39
|
*
|
40
40
|
* @slots
|
41
41
|
*
|
@@ -52,16 +52,15 @@ export type SheetSlots = typeof __propDef.slots;
|
|
52
52
|
* let display = false;
|
53
53
|
* </script>
|
54
54
|
*
|
55
|
-
* <div>
|
56
55
|
* <button type="button" class="btn" on:click={() => (display = true)}>
|
57
|
-
*
|
56
|
+
* Open
|
58
57
|
* </button>
|
59
|
-
* </div>
|
60
58
|
*
|
61
59
|
* <Sheet
|
62
60
|
* bind:display
|
63
61
|
* class="bg-neutral-50/80 backdrop-blur"
|
64
62
|
* classSheet="p-4 shadow bg-white"
|
63
|
+
* position="right"
|
65
64
|
* >
|
66
65
|
* <div class="mb-4 flex items-center justify-between">
|
67
66
|
* <h2 class="my-0">Sheet</h2>
|