drab 2.5.0 → 2.6.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/dist/components/Accordion.svelte +1 -2
- package/dist/components/Accordion.svelte.d.ts +1 -2
- package/dist/components/Breakpoint.svelte +71 -0
- package/dist/components/Breakpoint.svelte.d.ts +58 -0
- package/dist/components/Chord.svelte +1 -1
- package/dist/components/Chord.svelte.d.ts +1 -1
- package/dist/components/ContextMenu.svelte +74 -45
- package/dist/components/ContextMenu.svelte.d.ts +9 -6
- package/dist/components/CopyButton.svelte +11 -3
- package/dist/components/DataTable.svelte +1 -1
- package/dist/components/DataTable.svelte.d.ts +1 -1
- package/dist/components/Editor.svelte +1 -0
- package/dist/components/FullscreenButton.svelte +18 -11
- package/dist/components/FullscreenButton.svelte.d.ts +4 -4
- package/dist/components/Popover.svelte +59 -92
- package/dist/components/Popover.svelte.d.ts +24 -31
- package/dist/components/ShareButton.svelte +10 -2
- package/dist/components/Sheet.svelte +123 -110
- package/dist/components/Sheet.svelte.d.ts +18 -6
- package/dist/components/Tabs.svelte +51 -46
- package/dist/components/Tabs.svelte.d.ts +42 -41
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/util/delay.d.ts +1 -0
- package/dist/util/delay.js +1 -0
- package/dist/util/transition.d.ts +1 -1
- package/dist/util/transition.js +1 -1
- package/package.json +3 -3
@@ -7,15 +7,12 @@ Displays a popover relatively positioned to the button.
|
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
|
-
- `classButton` - `button` class
|
11
|
-
- `classPopover` - popover class
|
12
10
|
- `class`
|
13
11
|
- `display` - if `eventType="click"`, controls the display
|
14
|
-
- `eventType` - controls if hovering or clicking the button displays the popover
|
15
|
-
- `idButton` - `button` id
|
16
|
-
- `idPopover` - popover id
|
17
12
|
- `id`
|
18
|
-
- `position` - where the popover is displayed in relation to the
|
13
|
+
- `position` - where the popover is displayed in relation to the target
|
14
|
+
- `target` - target element to position the popover in relation to
|
15
|
+
- `transition` - fades in and out, set to false to disable
|
19
16
|
|
20
17
|
@slots
|
21
18
|
|
@@ -27,28 +24,27 @@ Displays a popover relatively positioned to the button.
|
|
27
24
|
@example
|
28
25
|
|
29
26
|
```svelte
|
30
|
-
<script>
|
27
|
+
<script lang="ts">
|
31
28
|
import { Popover } from "drab";
|
29
|
+
|
30
|
+
let button: HTMLButtonElement;
|
31
|
+
let hoverButton: HTMLButtonElement;
|
32
|
+
|
33
|
+
let display = false;
|
32
34
|
</script>
|
33
35
|
|
34
|
-
<
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
<button class="btn">Button</button>
|
40
|
-
<button class="btn">Button</button>
|
41
|
-
</div>
|
42
|
-
</Popover>
|
43
|
-
<Popover
|
44
|
-
classButton="btn"
|
45
|
-
classPopover="p-2 transition"
|
46
|
-
eventType="click"
|
47
|
-
position="right"
|
36
|
+
<button
|
37
|
+
class="btn"
|
38
|
+
type="button"
|
39
|
+
bind:this={button}
|
40
|
+
on:click={() => (display = !display)}
|
48
41
|
>
|
49
|
-
|
50
|
-
|
51
|
-
|
42
|
+
{display ? "Close" : "Open"}
|
43
|
+
</button>
|
44
|
+
|
45
|
+
<Popover target={button} bind:display class="p-2">
|
46
|
+
<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
|
47
|
+
<div class="font-bold">Bottom</div>
|
52
48
|
<button class="btn">Button</button>
|
53
49
|
<button class="btn">Button</button>
|
54
50
|
<button class="btn">Button</button>
|
@@ -57,55 +53,49 @@ Displays a popover relatively positioned to the button.
|
|
57
53
|
```
|
58
54
|
-->
|
59
55
|
|
60
|
-
<script>import {
|
56
|
+
<script>import { prefersReducedMotion } from "../util/accessibility";
|
57
|
+
import { duration } from "../util/transition";
|
58
|
+
import { onMount, tick } from "svelte";
|
59
|
+
import { fade } from "svelte/transition";
|
61
60
|
let className = "";
|
62
61
|
export { className as class };
|
63
62
|
export let id = "";
|
64
|
-
export let
|
65
|
-
export let classPopover = "";
|
66
|
-
export let idButton = "";
|
67
|
-
export let idPopover = "";
|
68
|
-
export let display = false;
|
63
|
+
export let display = true;
|
69
64
|
export let position = "bottom";
|
70
|
-
export let
|
71
|
-
let
|
65
|
+
export let target;
|
66
|
+
export let transition = { duration };
|
72
67
|
let popover;
|
73
|
-
let button;
|
74
68
|
let coordinates = { x: 0, y: 0 };
|
75
|
-
const
|
69
|
+
const setPosition = async () => {
|
76
70
|
if (position === "top" || position === "bottom") {
|
77
|
-
coordinates.x =
|
71
|
+
coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
|
78
72
|
if (position === "top") {
|
79
73
|
coordinates.y = -popover.offsetHeight;
|
80
74
|
} else {
|
81
|
-
coordinates.y =
|
75
|
+
coordinates.y = target.offsetHeight;
|
82
76
|
}
|
83
77
|
} else {
|
84
|
-
coordinates.y =
|
78
|
+
coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
|
85
79
|
if (position === "left") {
|
86
80
|
coordinates.x = -popover.offsetWidth;
|
87
81
|
} else {
|
88
|
-
coordinates.x =
|
82
|
+
coordinates.x = target.offsetWidth;
|
89
83
|
}
|
90
84
|
}
|
85
|
+
const targetRect = target.getBoundingClientRect();
|
86
|
+
coordinates.x += targetRect.x;
|
87
|
+
coordinates.y += targetRect.y;
|
91
88
|
await tick();
|
92
|
-
const
|
93
|
-
if (
|
94
|
-
coordinates.x += Math.abs(
|
95
|
-
} else if (
|
96
|
-
coordinates.x -=
|
89
|
+
const popoverRect = popover.getBoundingClientRect();
|
90
|
+
if (popoverRect.x < 0) {
|
91
|
+
coordinates.x += Math.abs(popoverRect.x);
|
92
|
+
} else if (popoverRect.x + popover.offsetWidth > window.innerWidth) {
|
93
|
+
coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + 16;
|
97
94
|
}
|
98
|
-
if (
|
99
|
-
coordinates.y += Math.abs(
|
100
|
-
} else if (
|
101
|
-
coordinates.y -=
|
102
|
-
}
|
103
|
-
};
|
104
|
-
const clickOutside = (e) => {
|
105
|
-
if (popover && e.target instanceof HTMLElement) {
|
106
|
-
if (!popover.contains(e.target)) {
|
107
|
-
display = false;
|
108
|
-
}
|
95
|
+
if (popoverRect.y < 0) {
|
96
|
+
coordinates.y += Math.abs(popoverRect.y);
|
97
|
+
} else if (popoverRect.y + popover.offsetHeight > window.innerHeight) {
|
98
|
+
coordinates.y -= popoverRect.y + popover.offsetHeight - window.innerHeight;
|
109
99
|
}
|
110
100
|
};
|
111
101
|
const onKeyDown = (e) => {
|
@@ -113,58 +103,35 @@ const onKeyDown = (e) => {
|
|
113
103
|
display = false;
|
114
104
|
}
|
115
105
|
};
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
};
|
106
|
+
$:
|
107
|
+
if (target && popover)
|
108
|
+
setPosition();
|
120
109
|
onMount(() => {
|
121
|
-
|
122
|
-
|
110
|
+
if (prefersReducedMotion()) {
|
111
|
+
if (transition)
|
112
|
+
transition.duration = 0;
|
113
|
+
}
|
123
114
|
});
|
124
115
|
</script>
|
125
116
|
|
126
|
-
<svelte:body on:keydown={onKeyDown}
|
117
|
+
<svelte:body on:keydown={onKeyDown} />
|
127
118
|
|
128
|
-
|
129
|
-
<button
|
130
|
-
bind:this={button}
|
131
|
-
id={idButton}
|
132
|
-
class={classButton}
|
133
|
-
on:click={openPopover}
|
134
|
-
on:mouseover={correctPosition}
|
135
|
-
on:focus={correctPosition}
|
136
|
-
>
|
137
|
-
<slot name="button">Open</slot>
|
138
|
-
</button>
|
119
|
+
{#if display}
|
139
120
|
<div
|
121
|
+
role="dialog"
|
140
122
|
bind:this={popover}
|
141
|
-
|
142
|
-
|
143
|
-
class:db-type-click={clientEventType === "click" && display}
|
144
|
-
class:db-type-hover={clientEventType === "hover"}
|
123
|
+
class={className}
|
124
|
+
{id}
|
145
125
|
style:top="{coordinates.y}px"
|
146
126
|
style:left="{coordinates.x}px"
|
147
|
-
|
127
|
+
transition:fade={transition ? transition : { duration: 0 }}
|
148
128
|
>
|
149
129
|
<slot>Popover</slot>
|
150
130
|
</div>
|
151
|
-
|
131
|
+
{/if}
|
152
132
|
|
153
133
|
<style>
|
154
|
-
|
155
|
-
position: relative;
|
156
|
-
}
|
157
|
-
.db-popover {
|
134
|
+
div {
|
158
135
|
position: absolute;
|
159
|
-
opacity: 0;
|
160
|
-
z-index: -10;
|
161
|
-
}
|
162
|
-
button:hover + .db-type-hover,
|
163
|
-
button:focus + .db-type-hover,
|
164
|
-
.db-type-hover:hover,
|
165
|
-
.db-type-hover:focus-within,
|
166
|
-
.db-type-click {
|
167
|
-
opacity: 1;
|
168
|
-
z-index: 10;
|
169
136
|
}
|
170
137
|
</style>
|
@@ -1,21 +1,18 @@
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
2
|
+
import { type FadeParams } from "svelte/transition";
|
2
3
|
declare const __propDef: {
|
3
4
|
props: {
|
4
5
|
class?: string | undefined;
|
5
6
|
id?: string | undefined;
|
6
|
-
/** `button` class */ classButton?: string | undefined;
|
7
|
-
/** popover class */ classPopover?: string | undefined;
|
8
|
-
/** `button` id */ idButton?: string | undefined;
|
9
|
-
/** popover id */ idPopover?: string | undefined;
|
10
7
|
/** if `eventType="click"`, controls the display */ display?: boolean | undefined;
|
11
|
-
/** where the popover is displayed in relation to the
|
12
|
-
/**
|
8
|
+
/** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
9
|
+
/** target element to position the popover in relation to */ target: HTMLElement;
|
10
|
+
/** fades in and out, set to false to disable */ transition?: false | FadeParams | undefined;
|
13
11
|
};
|
14
12
|
events: {
|
15
13
|
[evt: string]: CustomEvent<any>;
|
16
14
|
};
|
17
15
|
slots: {
|
18
|
-
button: {};
|
19
16
|
default: {};
|
20
17
|
};
|
21
18
|
};
|
@@ -29,15 +26,12 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
29
26
|
*
|
30
27
|
* @props
|
31
28
|
*
|
32
|
-
* - `classButton` - `button` class
|
33
|
-
* - `classPopover` - popover class
|
34
29
|
* - `class`
|
35
30
|
* - `display` - if `eventType="click"`, controls the display
|
36
|
-
* - `eventType` - controls if hovering or clicking the button displays the popover
|
37
|
-
* - `idButton` - `button` id
|
38
|
-
* - `idPopover` - popover id
|
39
31
|
* - `id`
|
40
|
-
* - `position` - where the popover is displayed in relation to the
|
32
|
+
* - `position` - where the popover is displayed in relation to the target
|
33
|
+
* - `target` - target element to position the popover in relation to
|
34
|
+
* - `transition` - fades in and out, set to false to disable
|
41
35
|
*
|
42
36
|
* @slots
|
43
37
|
*
|
@@ -49,28 +43,27 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
49
43
|
* @example
|
50
44
|
*
|
51
45
|
* ```svelte
|
52
|
-
* <script>
|
46
|
+
* <script lang="ts">
|
53
47
|
* import { Popover } from "drab";
|
48
|
+
*
|
49
|
+
* let button: HTMLButtonElement;
|
50
|
+
* let hoverButton: HTMLButtonElement;
|
51
|
+
*
|
52
|
+
* let display = false;
|
54
53
|
* </script>
|
55
54
|
*
|
56
|
-
* <
|
57
|
-
*
|
58
|
-
*
|
59
|
-
*
|
60
|
-
*
|
61
|
-
* <button class="btn">Button</button>
|
62
|
-
* <button class="btn">Button</button>
|
63
|
-
* </div>
|
64
|
-
* </Popover>
|
65
|
-
* <Popover
|
66
|
-
* classButton="btn"
|
67
|
-
* classPopover="p-2 transition"
|
68
|
-
* eventType="click"
|
69
|
-
* position="right"
|
55
|
+
* <button
|
56
|
+
* class="btn"
|
57
|
+
* type="button"
|
58
|
+
* bind:this={button}
|
59
|
+
* on:click={() => (display = !display)}
|
70
60
|
* >
|
71
|
-
*
|
72
|
-
*
|
73
|
-
*
|
61
|
+
* {display ? "Close" : "Open"}
|
62
|
+
* </button>
|
63
|
+
*
|
64
|
+
* <Popover target={button} bind:display class="p-2">
|
65
|
+
* <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
|
66
|
+
* <div class="font-bold">Bottom</div>
|
74
67
|
* <button class="btn">Button</button>
|
75
68
|
* <button class="btn">Button</button>
|
76
69
|
* <button class="btn">Button</button>
|
@@ -40,6 +40,7 @@ Uses the navigator api to share or copy a url link depending on browser support.
|
|
40
40
|
-->
|
41
41
|
|
42
42
|
<script>import { onMount } from "svelte";
|
43
|
+
import { delay } from "../util/delay";
|
43
44
|
let className = "";
|
44
45
|
export { className as class };
|
45
46
|
export let id = "";
|
@@ -56,7 +57,7 @@ const onClick = async () => {
|
|
56
57
|
} else {
|
57
58
|
await navigator.clipboard.writeText(url);
|
58
59
|
complete = true;
|
59
|
-
setTimeout(() => complete = false,
|
60
|
+
setTimeout(() => complete = false, delay);
|
60
61
|
}
|
61
62
|
} catch (error) {
|
62
63
|
console.log(error);
|
@@ -65,7 +66,14 @@ const onClick = async () => {
|
|
65
66
|
onMount(() => clientJs = true);
|
66
67
|
</script>
|
67
68
|
|
68
|
-
<button
|
69
|
+
<button
|
70
|
+
type="button"
|
71
|
+
disabled={!clientJs}
|
72
|
+
on:click={onClick}
|
73
|
+
class={className}
|
74
|
+
{id}
|
75
|
+
{title}
|
76
|
+
>
|
69
77
|
{#if complete}
|
70
78
|
<slot name="complete">Copied</slot>
|
71
79
|
{:else}
|
@@ -1,60 +1,71 @@
|
|
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
|
-
- `size` -
|
16
|
+
- `size` - width/height of sheet based on the `side` - 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
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
29
|
+
<script lang="ts">
|
30
|
+
import { Sheet } from "drab";
|
31
|
+
import { X } from "../../site/svg/X.svelte";
|
32
|
+
|
33
|
+
let display = false;
|
34
|
+
</script>
|
35
|
+
|
36
|
+
<div>
|
37
|
+
<button type="button" class="btn" on:click={() => (display = true)}>
|
38
|
+
Open
|
39
|
+
</button>
|
40
|
+
</div>
|
41
|
+
|
42
|
+
<Sheet
|
43
|
+
bind:display
|
44
|
+
class="bg-neutral-50/80 backdrop-blur"
|
45
|
+
classSheet="p-4 shadow bg-white"
|
46
|
+
>
|
47
|
+
<div class="mb-4 flex items-center justify-between">
|
48
|
+
<h2 class="my-0">Sheet</h2>
|
49
|
+
<button
|
50
|
+
type="button"
|
51
|
+
title="Close"
|
52
|
+
class="btn btn-s"
|
53
|
+
on:click={() => (display = false)}
|
54
|
+
>
|
55
|
+
<X />
|
56
|
+
</button>
|
57
|
+
</div>
|
58
|
+
<div>
|
59
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
60
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
61
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
62
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
63
|
+
cillum dolore eu fugiat nulla pariatur.
|
64
|
+
</div>
|
65
|
+
</Sheet>
|
55
66
|
```
|
56
|
-
-->
|
57
|
-
|
67
|
+
-->
|
68
|
+
|
58
69
|
<script>import { onMount } from "svelte";
|
59
70
|
import {
|
60
71
|
fade,
|
@@ -66,14 +77,15 @@ let className = "";
|
|
66
77
|
export { className as class };
|
67
78
|
export let id = "";
|
68
79
|
export let classSheet = "";
|
69
|
-
export let display =
|
80
|
+
export let display = false;
|
70
81
|
export let transition = { duration };
|
71
82
|
export let position = "right";
|
72
83
|
export let size = 488;
|
73
84
|
export let transitionSheet = { duration };
|
85
|
+
export let onClickClose = false;
|
74
86
|
let sheet;
|
75
87
|
const clickOutside = (e) => {
|
76
|
-
if (e.target instanceof Node && !sheet.contains(e.target)) {
|
88
|
+
if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
|
77
89
|
display = false;
|
78
90
|
}
|
79
91
|
};
|
@@ -101,66 +113,67 @@ onMount(() => {
|
|
101
113
|
transitionSheet.duration = 0;
|
102
114
|
}
|
103
115
|
});
|
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
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
class
|
126
|
-
class:d-
|
127
|
-
class:d-
|
128
|
-
class:d-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
116
|
+
</script>
|
117
|
+
|
118
|
+
<svelte:body on:keydown={onKeyDown} />
|
119
|
+
|
120
|
+
{#if display}
|
121
|
+
<div
|
122
|
+
role="button"
|
123
|
+
tabindex="0"
|
124
|
+
on:click={clickOutside}
|
125
|
+
on:keydown={onKeyDown}
|
126
|
+
transition:fade={transition ? transition : { duration: 0 }}
|
127
|
+
class="d-backdrop {className}"
|
128
|
+
{id}
|
129
|
+
>
|
130
|
+
<div
|
131
|
+
role="dialog"
|
132
|
+
bind:this={sheet}
|
133
|
+
transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
|
134
|
+
style={position === "top" || position === "bottom"
|
135
|
+
? `max-height: ${size}px;`
|
136
|
+
: `max-width: ${size}px`}
|
137
|
+
class="d-sheet {classSheet}"
|
138
|
+
class:d-bottom={position === "bottom"}
|
139
|
+
class:d-top={position === "top"}
|
140
|
+
class:d-left={position === "left"}
|
141
|
+
class:d-right={position === "right"}
|
142
|
+
>
|
143
|
+
<slot>Content</slot>
|
144
|
+
</div>
|
145
|
+
</div>
|
146
|
+
{/if}
|
147
|
+
|
148
|
+
<style>
|
149
|
+
.d-backdrop {
|
150
|
+
position: fixed;
|
151
|
+
display: grid;
|
152
|
+
z-index: 40;
|
153
|
+
top: 0;
|
154
|
+
bottom: 0;
|
155
|
+
left: 0;
|
156
|
+
right: 0;
|
157
|
+
overflow: hidden;
|
158
|
+
cursor: default;
|
159
|
+
}
|
160
|
+
.d-sheet {
|
161
|
+
margin: auto;
|
162
|
+
}
|
163
|
+
.d-bottom {
|
164
|
+
margin-bottom: 0;
|
165
|
+
width: 100%;
|
166
|
+
}
|
167
|
+
.d-top {
|
168
|
+
margin-top: 0;
|
169
|
+
width: 100%;
|
170
|
+
}
|
171
|
+
.d-right {
|
172
|
+
margin-right: 0;
|
173
|
+
height: 100%;
|
174
|
+
}
|
175
|
+
.d-left {
|
176
|
+
margin-left: 0;
|
177
|
+
height: 100%;
|
178
|
+
}
|
179
|
+
</style>
|
@@ -8,8 +8,9 @@ declare const __propDef: {
|
|
8
8
|
/** controls whether the sheet is displayed*/ display?: boolean | undefined;
|
9
9
|
/** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
|
10
10
|
/** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
11
|
-
/**
|
11
|
+
/** width/height of sheet based on the `side` - 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,8 +33,9 @@ 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
|
-
* - `size` -
|
38
|
+
* - `size` - width/height of sheet based on the `side` - can also use css instead
|
37
39
|
* - `transitionSheet` - slides the sheet, set to `false` to remove
|
38
40
|
* - `transition` - fades the entire component, set to `false` to remove
|
39
41
|
*
|
@@ -48,22 +50,32 @@ export type SheetSlots = typeof __propDef.slots;
|
|
48
50
|
* ```svelte
|
49
51
|
* <script lang="ts">
|
50
52
|
* import { Sheet } from "drab";
|
53
|
+
* import { X } from "../../site/svg/X.svelte";
|
51
54
|
*
|
52
55
|
* let display = false;
|
53
56
|
* </script>
|
54
57
|
*
|
55
58
|
* <div>
|
56
|
-
* <button class="btn" on:click={() => (display = true)}>
|
59
|
+
* <button type="button" class="btn" on:click={() => (display = true)}>
|
60
|
+
* Open
|
61
|
+
* </button>
|
57
62
|
* </div>
|
58
63
|
*
|
59
64
|
* <Sheet
|
60
65
|
* bind:display
|
61
|
-
* class="bg-
|
66
|
+
* class="bg-neutral-50/80 backdrop-blur"
|
62
67
|
* classSheet="p-4 shadow bg-white"
|
63
68
|
* >
|
64
69
|
* <div class="mb-4 flex items-center justify-between">
|
65
|
-
* <
|
66
|
-
* <button
|
70
|
+
* <h2 class="my-0">Sheet</h2>
|
71
|
+
* <button
|
72
|
+
* type="button"
|
73
|
+
* title="Close"
|
74
|
+
* class="btn btn-s"
|
75
|
+
* on:click={() => (display = false)}
|
76
|
+
* >
|
77
|
+
* <X />
|
78
|
+
* </button>
|
67
79
|
* </div>
|
68
80
|
* <div>
|
69
81
|
* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|