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.
@@ -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, set this to empty string `""` to disable `confirm`
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 fullscreenDiv;
30
+ let target: HTMLDivElement;
31
31
  </script>
32
32
 
33
- <div>
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={fullscreenDiv} class="btn btn-s bg-neutral-50">
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 supported = false;
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
- supported = true;
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={!supported}
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, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
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, set this to empty string `""` to disable `confirm`
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 fullscreenDiv;
49
+ * let target: HTMLDivElement;
50
50
  * </script>
51
51
  *
52
- * <div>
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={fullscreenDiv} class="btn btn-s bg-neutral-50">
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` - if `eventType="click"`, controls the 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 button: HTMLButtonElement;
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={button}
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={button} bind:display class="p-2">
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
- /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
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` - if `eventType="click"`, controls the 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 button: HTMLButtonElement;
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={button}
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={button} bind:display class="p-2">
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) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
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
- - `text` - prefixed text in share message
14
- - `title` - title of share message and `button` attribute, defaults to end of url
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
- <ShareButton
33
- class="btn"
34
- text="Check out this page: "
35
- title="drab"
36
- url="https://drab.robino.dev"
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 text = "";
48
- export let url;
49
- export let title = url.split("/").splice(-1)[0];
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
- try {
55
- if (navigator.canShare) {
56
- await navigator.share({ text, url, title });
57
- } else {
58
- await navigator.clipboard.writeText(url);
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
- } catch (error) {
63
- console.log(error);
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
- <noscript><span class={classNoscript}>{url}</span></noscript>
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
- /** prefixed text in share message */ text?: string | undefined;
7
- /** url to be shared */ url: string;
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) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
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
- * - `text` - prefixed text in share message
33
- * - `title` - title of share message and `button` attribute, defaults to end of url
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
- * class="btn"
53
- * text="Check out this page: "
54
- * title="drab"
55
- * url="https://drab.robino.dev"
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` - slides the sheet, set to `false` to remove
17
- - `transition` - fades the entire component, set to `false` to remove
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
- <div>
35
- <button type="button" class="btn" on:click={() => (display = true)}>
36
- Open
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
- fade,
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 = "right";
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:fade={transition ? transition : { duration: 0 }}
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="d-sheet {classSheet}"
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 FadeParams, type FlyParams } from "svelte/transition";
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
- /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
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
- /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
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` - slides the sheet, set to `false` to remove
38
- * - `transition` - fades the entire component, set to `false` to remove
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
- * Open
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>