drab 2.8.5 → 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/Editor.svelte.d.ts +2 -2
- 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/Sheet.svelte.d.ts +1 -1
- package/dist/components/YouTube.svelte +9 -9
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -2
- package/package.json +81 -82
- package/dist/components/Tabs.svelte +0 -103
- package/dist/components/Tabs.svelte.d.ts +0 -112
@@ -1,11 +1,11 @@
|
|
1
|
-
<!--
|
2
|
-
@component
|
3
|
-
|
4
|
-
### DataTable
|
5
|
-
|
6
|
-
Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
|
7
|
-
|
8
|
-
@props
|
1
|
+
<!--
|
2
|
+
@component
|
3
|
+
|
4
|
+
### DataTable
|
5
|
+
|
6
|
+
Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
|
7
|
+
|
8
|
+
@props
|
9
9
|
|
10
10
|
- `ascending` - current sort order
|
11
11
|
- `classTbodyTr` - `tbody tr` class
|
@@ -23,88 +23,88 @@ Data table to display an array of JS objects. Provides pagination and sorting fo
|
|
23
23
|
- `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
|
24
24
|
- `sortBy` - key (column) to sort by, defaults to first key
|
25
25
|
|
26
|
-
@slots
|
27
|
-
|
28
|
-
| name | purpose | default value | slot props |
|
29
|
-
| ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
|
30
|
-
| `controls` | helper that passes back `maxRows` and `numberOfPages` | none | `maxRows`, `numberOfPages` |
|
31
|
-
| `td` | td contents | `value` | `item`, `key`, `sortBy` `value` |
|
32
|
-
| `th` | th contents | `key` | `key`, `sortBy` |
|
33
|
-
|
34
|
-
@example
|
26
|
+
@slots
|
27
|
+
|
28
|
+
| name | purpose | default value | slot props |
|
29
|
+
| ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
|
30
|
+
| `controls` | helper that passes back `maxRows` and `numberOfPages` | none | `maxRows`, `numberOfPages` |
|
31
|
+
| `td` | td contents | `value` | `item`, `key`, `sortBy` `value` |
|
32
|
+
| `th` | th contents | `key` | `key`, `sortBy` |
|
33
|
+
|
34
|
+
@example
|
35
35
|
|
36
36
|
```svelte
|
37
|
-
<script lang="ts">
|
38
|
-
import type { ComponentProps } from "svelte";
|
39
|
-
import { DataTable } from "drab";
|
40
|
-
|
41
|
-
let currentPage = 0;
|
42
|
-
|
43
|
-
const data: ComponentProps<DataTable>["data"] = [
|
44
|
-
{ make: "Honda", model: "CR-V", year: 2011, awd: true },
|
45
|
-
{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
|
46
|
-
{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
|
47
|
-
{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
|
48
|
-
{ make: "Ford", model: "Model A", year: 1931, awd: false },
|
49
|
-
{ make: "Subaru", model: "Outback", year: 2021, awd: true },
|
50
|
-
{ make: "Ford", model: "Bronco", year: 1970, awd: true },
|
51
|
-
{ make: "GMC", model: "Acadia", year: 2008, awd: true },
|
52
|
-
{ make: "BMW", model: "X3", year: 2023, awd: true },
|
53
|
-
];
|
54
|
-
</script>
|
55
|
-
|
56
|
-
<DataTable {data} class="mb-12" />
|
57
|
-
|
58
|
-
<DataTable
|
59
|
-
{data}
|
60
|
-
bind:currentPage
|
61
|
-
sortBy="year"
|
62
|
-
maxRows={4}
|
63
|
-
class="tabular-nums"
|
64
|
-
classTh="cursor-pointer capitalize"
|
65
|
-
classTbodyTr="transition hover:bg-neutral-50"
|
66
|
-
>
|
67
|
-
<svelte:fragment slot="th" let:key let:sortBy>
|
68
|
-
<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
|
69
|
-
{key}
|
70
|
-
</span>
|
71
|
-
</svelte:fragment>
|
72
|
-
<svelte:fragment slot="td" let:value>
|
73
|
-
{#if typeof value === "boolean"}
|
74
|
-
{value ? "Yes" : "No"}
|
75
|
-
{:else}
|
76
|
-
{value}
|
77
|
-
{/if}
|
78
|
-
</svelte:fragment>
|
79
|
-
<svelte:fragment slot="controls" let:maxRows let:numberOfPages>
|
80
|
-
{#if maxRows}
|
81
|
-
<div class="flex items-center justify-between">
|
82
|
-
<div>{currentPage + 1} / {numberOfPages}</div>
|
83
|
-
<div>
|
84
|
-
<button
|
85
|
-
type="button"
|
86
|
-
class="btn"
|
87
|
-
disabled={currentPage < 1}
|
88
|
-
on:click={() => currentPage--}
|
89
|
-
>
|
90
|
-
Previous
|
91
|
-
</button>
|
92
|
-
<button
|
93
|
-
type="button"
|
94
|
-
class="btn"
|
95
|
-
disabled={currentPage >= numberOfPages - 1}
|
96
|
-
on:click={() => currentPage++}
|
97
|
-
>
|
98
|
-
Next
|
99
|
-
</button>
|
100
|
-
</div>
|
101
|
-
</div>
|
102
|
-
{/if}
|
103
|
-
</svelte:fragment>
|
104
|
-
</DataTable>
|
37
|
+
<script lang="ts">
|
38
|
+
import type { ComponentProps } from "svelte";
|
39
|
+
import { DataTable } from "drab";
|
40
|
+
|
41
|
+
let currentPage = 0;
|
42
|
+
|
43
|
+
const data: ComponentProps<DataTable>["data"] = [
|
44
|
+
{ make: "Honda", model: "CR-V", year: 2011, awd: true },
|
45
|
+
{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
|
46
|
+
{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
|
47
|
+
{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
|
48
|
+
{ make: "Ford", model: "Model A", year: 1931, awd: false },
|
49
|
+
{ make: "Subaru", model: "Outback", year: 2021, awd: true },
|
50
|
+
{ make: "Ford", model: "Bronco", year: 1970, awd: true },
|
51
|
+
{ make: "GMC", model: "Acadia", year: 2008, awd: true },
|
52
|
+
{ make: "BMW", model: "X3", year: 2023, awd: true },
|
53
|
+
];
|
54
|
+
</script>
|
55
|
+
|
56
|
+
<DataTable {data} class="mb-12" />
|
57
|
+
|
58
|
+
<DataTable
|
59
|
+
{data}
|
60
|
+
bind:currentPage
|
61
|
+
sortBy="year"
|
62
|
+
maxRows={4}
|
63
|
+
class="tabular-nums"
|
64
|
+
classTh="cursor-pointer capitalize"
|
65
|
+
classTbodyTr="transition hover:bg-neutral-50"
|
66
|
+
>
|
67
|
+
<svelte:fragment slot="th" let:key let:sortBy>
|
68
|
+
<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
|
69
|
+
{key}
|
70
|
+
</span>
|
71
|
+
</svelte:fragment>
|
72
|
+
<svelte:fragment slot="td" let:value>
|
73
|
+
{#if typeof value === "boolean"}
|
74
|
+
{value ? "Yes" : "No"}
|
75
|
+
{:else}
|
76
|
+
{value}
|
77
|
+
{/if}
|
78
|
+
</svelte:fragment>
|
79
|
+
<svelte:fragment slot="controls" let:maxRows let:numberOfPages>
|
80
|
+
{#if maxRows}
|
81
|
+
<div class="flex items-center justify-between">
|
82
|
+
<div>{currentPage + 1} / {numberOfPages}</div>
|
83
|
+
<div>
|
84
|
+
<button
|
85
|
+
type="button"
|
86
|
+
class="btn"
|
87
|
+
disabled={currentPage < 1}
|
88
|
+
on:click={() => currentPage--}
|
89
|
+
>
|
90
|
+
Previous
|
91
|
+
</button>
|
92
|
+
<button
|
93
|
+
type="button"
|
94
|
+
class="btn"
|
95
|
+
disabled={currentPage >= numberOfPages - 1}
|
96
|
+
on:click={() => currentPage++}
|
97
|
+
>
|
98
|
+
Next
|
99
|
+
</button>
|
100
|
+
</div>
|
101
|
+
</div>
|
102
|
+
{/if}
|
103
|
+
</svelte:fragment>
|
104
|
+
</DataTable>
|
105
105
|
```
|
106
|
-
-->
|
107
|
-
|
106
|
+
-->
|
107
|
+
|
108
108
|
<script>let className = "";
|
109
109
|
export { className as class };
|
110
110
|
export let id = "";
|
@@ -170,33 +170,33 @@ const showRow = (i, currentPage2) => {
|
|
170
170
|
return overMin && underMax;
|
171
171
|
};
|
172
172
|
sort(sortBy, false);
|
173
|
-
</script>
|
174
|
-
|
175
|
-
<table class={className} {id}>
|
176
|
-
<thead class={classThead}>
|
177
|
-
<tr class="{classTr} {classTheadTr}">
|
178
|
-
{#each keys as key}
|
179
|
-
<th class={classTh} on:click={() => sort(key)}>
|
180
|
-
<slot name="th" {key} {sortBy}>{key}</slot>
|
181
|
-
</th>
|
182
|
-
{/each}
|
183
|
-
</tr>
|
184
|
-
</thead>
|
185
|
-
<tbody class={classTbody}>
|
186
|
-
{#each data as item, i}
|
187
|
-
{#if showRow(i, currentPage)}
|
188
|
-
<tr class="{classTr} {classTbodyTr}">
|
189
|
-
{#each keys as key}
|
190
|
-
<td class={classTd}>
|
191
|
-
<slot name="td" {item} {key} {sortBy} value={item[key]}>
|
192
|
-
{item[key]}
|
193
|
-
</slot>
|
194
|
-
</td>
|
195
|
-
{/each}
|
196
|
-
</tr>
|
197
|
-
{/if}
|
198
|
-
{/each}
|
199
|
-
</tbody>
|
200
|
-
</table>
|
201
|
-
|
202
|
-
<slot name="controls" {maxRows} {numberOfPages} />
|
173
|
+
</script>
|
174
|
+
|
175
|
+
<table class={className} {id}>
|
176
|
+
<thead class={classThead}>
|
177
|
+
<tr class="{classTr} {classTheadTr}">
|
178
|
+
{#each keys as key}
|
179
|
+
<th class={classTh} on:click={() => sort(key)}>
|
180
|
+
<slot name="th" {key} {sortBy}>{key}</slot>
|
181
|
+
</th>
|
182
|
+
{/each}
|
183
|
+
</tr>
|
184
|
+
</thead>
|
185
|
+
<tbody class={classTbody}>
|
186
|
+
{#each data as item, i}
|
187
|
+
{#if showRow(i, currentPage)}
|
188
|
+
<tr class="{classTr} {classTbodyTr}">
|
189
|
+
{#each keys as key}
|
190
|
+
<td class={classTd}>
|
191
|
+
<slot name="td" {item} {key} {sortBy} value={item[key]}>
|
192
|
+
{item[key]}
|
193
|
+
</slot>
|
194
|
+
</td>
|
195
|
+
{/each}
|
196
|
+
</tr>
|
197
|
+
{/if}
|
198
|
+
{/each}
|
199
|
+
</tbody>
|
200
|
+
</table>
|
201
|
+
|
202
|
+
<slot name="controls" {maxRows} {numberOfPages} />
|
@@ -1,50 +1,50 @@
|
|
1
|
-
<!--
|
2
|
-
@component
|
3
|
-
|
4
|
-
### Details
|
5
|
-
|
6
|
-
Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
|
7
|
-
|
8
|
-
@props
|
1
|
+
<!--
|
2
|
+
@component
|
3
|
+
|
4
|
+
### Details
|
5
|
+
|
6
|
+
Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
|
7
|
+
|
8
|
+
@props
|
9
9
|
|
10
10
|
- `class`
|
11
11
|
- `id`
|
12
12
|
- `open`
|
13
13
|
- `transition` - slides the content, set to `false` to remove
|
14
14
|
|
15
|
-
@slots
|
16
|
-
|
17
|
-
| name | purpose | default value | slot props |
|
18
|
-
| --------- | ------------------------------- | -------------- | ---------- |
|
19
|
-
| `summary` | `summary` element contents | none | `open` |
|
20
|
-
| `content` | contents when details is `open` | none | none |
|
21
|
-
|
22
|
-
@example
|
15
|
+
@slots
|
16
|
+
|
17
|
+
| name | purpose | default value | slot props |
|
18
|
+
| --------- | ------------------------------- | -------------- | ---------- |
|
19
|
+
| `summary` | `summary` element contents | none | `open` |
|
20
|
+
| `content` | contents when details is `open` | none | none |
|
21
|
+
|
22
|
+
@example
|
23
23
|
|
24
24
|
```svelte
|
25
|
-
<script lang="ts">
|
26
|
-
import { Details } from "drab";
|
27
|
-
import Chevron from "../../site/svg/Chevron.svelte";
|
28
|
-
</script>
|
29
|
-
|
30
|
-
<Details class="border-b">
|
31
|
-
<svelte:fragment slot="summary" let:open>
|
32
|
-
<div
|
33
|
-
class="flex cursor-pointer items-center justify-between gap-8 p-4
|
34
|
-
>
|
35
|
-
<div>Does it work without JavaScript?</div>
|
36
|
-
<div class="transition" class:rotate-180={open}>
|
37
|
-
<Chevron />
|
38
|
-
</div>
|
39
|
-
</div>
|
40
|
-
</svelte:fragment>
|
41
|
-
<svelte:fragment slot="content">
|
42
|
-
<div class="px-4 pb-4">Yes.</div>
|
43
|
-
</svelte:fragment>
|
44
|
-
</Details>
|
25
|
+
<script lang="ts">
|
26
|
+
import { Details } from "drab";
|
27
|
+
import Chevron from "../../site/svg/Chevron.svelte";
|
28
|
+
</script>
|
29
|
+
|
30
|
+
<Details class="border-b">
|
31
|
+
<svelte:fragment slot="summary" let:open>
|
32
|
+
<div
|
33
|
+
class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
|
34
|
+
>
|
35
|
+
<div>Does it work without JavaScript?</div>
|
36
|
+
<div class="transition" class:rotate-180={open}>
|
37
|
+
<Chevron />
|
38
|
+
</div>
|
39
|
+
</div>
|
40
|
+
</svelte:fragment>
|
41
|
+
<svelte:fragment slot="content">
|
42
|
+
<div class="px-4 pb-4">Yes.</div>
|
43
|
+
</svelte:fragment>
|
44
|
+
</Details>
|
45
45
|
```
|
46
|
-
-->
|
47
|
-
|
46
|
+
-->
|
47
|
+
|
48
48
|
<script>import { onMount } from "svelte";
|
49
49
|
import { slide } from "svelte/transition";
|
50
50
|
import { prefersReducedMotion } from "../util/accessibility";
|
@@ -63,41 +63,41 @@ onMount(() => {
|
|
63
63
|
if (prefersReducedMotion())
|
64
64
|
transition = false;
|
65
65
|
});
|
66
|
-
</script>
|
67
|
-
|
68
|
-
<div class={className} {id}>
|
69
|
-
<details bind:open>
|
70
|
-
<!-- svelte-ignore a11y-no-redundant-roles -->
|
71
|
-
<summary
|
72
|
-
role="button"
|
73
|
-
tabindex="0"
|
74
|
-
on:click|preventDefault={toggleOpen}
|
75
|
-
on:keydown={(e) => {
|
76
|
-
if (e.key === "Enter") {
|
77
|
-
e.preventDefault();
|
78
|
-
toggleOpen();
|
79
|
-
}
|
80
|
-
}}
|
81
|
-
>
|
82
|
-
<slot name="summary" {open} />
|
83
|
-
</summary>
|
84
|
-
{#if !clientJs || !transition}
|
85
|
-
<slot name="content" />
|
86
|
-
{/if}
|
87
|
-
</details>
|
88
|
-
{#if clientJs && open && transition}
|
89
|
-
<!-- outside the details for the transition -->
|
90
|
-
<div transition:slide={transition}>
|
91
|
-
<slot name="content" />
|
92
|
-
</div>
|
93
|
-
{/if}
|
94
|
-
</div>
|
95
|
-
|
96
|
-
<style>
|
97
|
-
summary {
|
98
|
-
list-style: none;
|
99
|
-
}
|
100
|
-
summary::-webkit-details-marker {
|
101
|
-
display: none;
|
102
|
-
}
|
103
|
-
</style>
|
66
|
+
</script>
|
67
|
+
|
68
|
+
<div class={className} {id}>
|
69
|
+
<details bind:open>
|
70
|
+
<!-- svelte-ignore a11y-no-redundant-roles -->
|
71
|
+
<summary
|
72
|
+
role="button"
|
73
|
+
tabindex="0"
|
74
|
+
on:click|preventDefault={toggleOpen}
|
75
|
+
on:keydown={(e) => {
|
76
|
+
if (e.key === "Enter") {
|
77
|
+
e.preventDefault();
|
78
|
+
toggleOpen();
|
79
|
+
}
|
80
|
+
}}
|
81
|
+
>
|
82
|
+
<slot name="summary" {open} />
|
83
|
+
</summary>
|
84
|
+
{#if !clientJs || !transition}
|
85
|
+
<slot name="content" />
|
86
|
+
{/if}
|
87
|
+
</details>
|
88
|
+
{#if clientJs && open && transition}
|
89
|
+
<!-- outside the details for the transition -->
|
90
|
+
<div transition:slide={transition}>
|
91
|
+
<slot name="content" />
|
92
|
+
</div>
|
93
|
+
{/if}
|
94
|
+
</div>
|
95
|
+
|
96
|
+
<style>
|
97
|
+
summary {
|
98
|
+
list-style: none;
|
99
|
+
}
|
100
|
+
summary::-webkit-details-marker {
|
101
|
+
display: none;
|
102
|
+
}
|
103
|
+
</style>
|
@@ -50,7 +50,7 @@ export type DetailsSlots = typeof __propDef.slots;
|
|
50
50
|
* <Details class="border-b">
|
51
51
|
* <svelte:fragment slot="summary" let:open>
|
52
52
|
* <div
|
53
|
-
* class="flex cursor-pointer items-center justify-between gap-8 p-4
|
53
|
+
* class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
|
54
54
|
* >
|
55
55
|
* <div>Does it work without JavaScript?</div>
|
56
56
|
* <div class="transition" class:rotate-180={open}>
|
@@ -24,39 +24,39 @@
|
|
24
24
|
@example
|
25
25
|
|
26
26
|
```svelte
|
27
|
-
<script lang="ts">
|
28
|
-
import { Editor } from "drab";
|
29
|
-
</script>
|
30
|
-
|
31
|
-
<Editor
|
32
|
-
classButton="btn"
|
33
|
-
classControls="flex gap-2"
|
34
|
-
classTextarea="border w-full h-36 p-2 rounded mb-2"
|
35
|
-
placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
|
36
|
-
contentElements={[
|
37
|
-
{
|
38
|
-
name: "Bullet",
|
39
|
-
text: "- ",
|
40
|
-
display: "block",
|
41
|
-
icon: "Bullet",
|
42
|
-
},
|
43
|
-
{
|
44
|
-
name: "
|
45
|
-
text: "*",
|
46
|
-
display: "wrap",
|
47
|
-
icon: "
|
48
|
-
key: "i",
|
49
|
-
class: "italic",
|
50
|
-
},
|
51
|
-
{
|
52
|
-
name: "Anchor",
|
53
|
-
text: "[text](href)",
|
54
|
-
display: "inline",
|
55
|
-
icon: "Anchor",
|
56
|
-
key: "[",
|
57
|
-
},
|
58
|
-
]}
|
59
|
-
/>
|
27
|
+
<script lang="ts">
|
28
|
+
import { Editor } from "drab";
|
29
|
+
</script>
|
30
|
+
|
31
|
+
<Editor
|
32
|
+
classButton="btn"
|
33
|
+
classControls="flex gap-2"
|
34
|
+
classTextarea="border w-full h-36 p-2 rounded mb-2"
|
35
|
+
placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
|
36
|
+
contentElements={[
|
37
|
+
{
|
38
|
+
name: "Bullet",
|
39
|
+
text: "- ",
|
40
|
+
display: "block",
|
41
|
+
icon: "Bullet",
|
42
|
+
},
|
43
|
+
{
|
44
|
+
name: "Italic",
|
45
|
+
text: "*",
|
46
|
+
display: "wrap",
|
47
|
+
icon: "Italic",
|
48
|
+
key: "i",
|
49
|
+
class: "italic",
|
50
|
+
},
|
51
|
+
{
|
52
|
+
name: "Anchor",
|
53
|
+
text: "[text](href)",
|
54
|
+
display: "inline",
|
55
|
+
icon: "Anchor",
|
56
|
+
key: "[",
|
57
|
+
},
|
58
|
+
]}
|
59
|
+
/>
|
60
60
|
```
|
61
61
|
-->
|
62
62
|
|
@@ -80,10 +80,10 @@ export type EditorSlots = typeof __propDef.slots;
|
|
80
80
|
* icon: "Bullet",
|
81
81
|
* },
|
82
82
|
* {
|
83
|
-
* name: "
|
83
|
+
* name: "Italic",
|
84
84
|
* text: "*",
|
85
85
|
* display: "wrap",
|
86
|
-
* icon: "
|
86
|
+
* icon: "Italic",
|
87
87
|
* key: "i",
|
88
88
|
* class: "italic",
|
89
89
|
* },
|
@@ -23,20 +23,20 @@ Make the document or a specific element fullscreen.
|
|
23
23
|
@example
|
24
24
|
|
25
25
|
```svelte
|
26
|
-
<script lang="ts">
|
27
|
-
import { FullscreenButton } from "drab";
|
28
|
-
|
29
|
-
let target: HTMLDivElement;
|
30
|
-
</script>
|
31
|
-
|
32
|
-
<FullscreenButton class="btn" />
|
33
|
-
|
34
|
-
<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
|
35
|
-
<div class="mb-2">Target element</div>
|
36
|
-
<FullscreenButton {target} class="btn btn-s bg-neutral-50">
|
37
|
-
Enable Element Fullscreen
|
38
|
-
</FullscreenButton>
|
39
|
-
</div>
|
26
|
+
<script lang="ts">
|
27
|
+
import { FullscreenButton } from "drab";
|
28
|
+
|
29
|
+
let target: HTMLDivElement;
|
30
|
+
</script>
|
31
|
+
|
32
|
+
<FullscreenButton class="btn" />
|
33
|
+
|
34
|
+
<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
|
35
|
+
<div class="mb-2">Target element</div>
|
36
|
+
<FullscreenButton {target} class="btn btn-s bg-neutral-50">
|
37
|
+
Enable Element Fullscreen
|
38
|
+
</FullscreenButton>
|
39
|
+
</div>
|
40
40
|
```
|
41
41
|
-->
|
42
42
|
|