drab 2.6.0 → 2.7.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/Accordion.svelte +34 -9
- package/dist/components/Accordion.svelte.d.ts +34 -9
- package/dist/components/Breakpoint.svelte +3 -1
- package/dist/components/Breakpoint.svelte.d.ts +3 -1
- package/dist/components/Chord.svelte +1 -1
- package/dist/components/Chord.svelte.d.ts +1 -1
- package/dist/components/ContextMenu.svelte +72 -47
- package/dist/components/ContextMenu.svelte.d.ts +9 -8
- package/dist/components/CopyButton.svelte +12 -4
- package/dist/components/CopyButton.svelte.d.ts +1 -1
- package/dist/components/DataTable.svelte +65 -21
- package/dist/components/DataTable.svelte.d.ts +68 -15
- package/dist/components/Editor.svelte +1 -0
- package/dist/components/FullscreenButton.svelte +20 -14
- package/dist/components/FullscreenButton.svelte.d.ts +6 -7
- package/dist/components/Popover.svelte +60 -93
- package/dist/components/Popover.svelte.d.ts +25 -32
- package/dist/components/ShareButton.svelte +11 -3
- package/dist/components/ShareButton.svelte.d.ts +1 -1
- package/dist/components/Sheet.svelte +43 -34
- package/dist/components/Sheet.svelte.d.ts +10 -8
- package/dist/components/Tabs.svelte +77 -53
- package/dist/components/Tabs.svelte.d.ts +53 -47
- 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 +1 -1
@@ -8,7 +8,7 @@ declare const __propDef: {
|
|
8
8
|
id?: string | undefined;
|
9
9
|
/** a list of objects to render in the table */ data: DataTableRow<any>[];
|
10
10
|
/** table columns, in order */ columns?: string[] | undefined;
|
11
|
-
/** column to sort by
|
11
|
+
/** column to sort by, defaults to first column */ sortBy?: string | undefined;
|
12
12
|
/** default sort order */ ascending?: boolean | undefined;
|
13
13
|
/** `table` class */ classTable?: string | undefined;
|
14
14
|
/** `table` id */ idTable?: string | undefined;
|
@@ -24,7 +24,7 @@ declare const __propDef: {
|
|
24
24
|
/** `footer` class */ classFooter?: string | undefined;
|
25
25
|
/** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
|
26
26
|
/** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
|
27
|
-
/** number of rows to show on each page, defaults to `0` - no pagination */
|
27
|
+
/** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
|
28
28
|
/** current page, defaults to `1` */ currentPage?: number | undefined;
|
29
29
|
/** `noscript` class */ classNoscript?: string | undefined;
|
30
30
|
};
|
@@ -32,8 +32,23 @@ declare const __propDef: {
|
|
32
32
|
[evt: string]: CustomEvent<any>;
|
33
33
|
};
|
34
34
|
slots: {
|
35
|
-
|
36
|
-
|
35
|
+
th: {
|
36
|
+
column: string;
|
37
|
+
};
|
38
|
+
td: {
|
39
|
+
row: DataTableRow<any>;
|
40
|
+
column: string;
|
41
|
+
};
|
42
|
+
pageNumber: {
|
43
|
+
currentPage: number;
|
44
|
+
numberOfPages: number;
|
45
|
+
};
|
46
|
+
previous: {
|
47
|
+
currentPage: number;
|
48
|
+
};
|
49
|
+
next: {
|
50
|
+
currentPage: number;
|
51
|
+
};
|
37
52
|
};
|
38
53
|
};
|
39
54
|
export type DataTableProps = typeof __propDef.props;
|
@@ -67,15 +82,18 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
67
82
|
* - `data` - a list of objects to render in the table
|
68
83
|
* - `idTable` - `table` id
|
69
84
|
* - `id`
|
70
|
-
* - `
|
71
|
-
* - `sortBy` - column to sort by
|
85
|
+
* - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
|
86
|
+
* - `sortBy` - column to sort by, defaults to first column
|
72
87
|
*
|
73
88
|
* @slots
|
74
89
|
*
|
75
|
-
* | name
|
76
|
-
* |
|
77
|
-
* | `
|
78
|
-
* | `
|
90
|
+
* | name | purpose | default value | slot props |
|
91
|
+
* | ------------ | ------------------------ | -------------------------------- | ------------------------------ |
|
92
|
+
* | `next` | next button contents | `Next` | `currentPage` |
|
93
|
+
* | `pageNumber` | page numbers | `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
|
94
|
+
* | `previous` | previous button contents | `Previous` | `currentPage` |
|
95
|
+
* | `td` | td contents | `Previous` | `column`, `row` |
|
96
|
+
* | `th` | th contents | `Previous` | `column` |
|
79
97
|
*
|
80
98
|
* @example
|
81
99
|
*
|
@@ -85,6 +103,7 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
85
103
|
* </script>
|
86
104
|
*
|
87
105
|
* <DataTable
|
106
|
+
* class="mb-12"
|
88
107
|
* data={[
|
89
108
|
* { make: "Honda", model: "CR-V", year: 2011, awd: true },
|
90
109
|
* { make: "Volvo", model: "XC-40", year: 2024, awd: true },
|
@@ -96,15 +115,49 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
96
115
|
* { make: "GMC", model: "Acadia", year: 2008, awd: true },
|
97
116
|
* { make: "BMW", model: "X3", year: 2023, awd: true },
|
98
117
|
* ]}
|
99
|
-
*
|
100
|
-
*
|
118
|
+
* />
|
119
|
+
*
|
120
|
+
* <DataTable
|
121
|
+
* data={[
|
122
|
+
* { make: "Honda", model: "CR-V", year: 2011, awd: true },
|
123
|
+
* { make: "Volvo", model: "XC-40", year: 2024, awd: true },
|
124
|
+
* { make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
|
125
|
+
* { make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
|
126
|
+
* { make: "Ford", model: "Model A", year: 1931, awd: false },
|
127
|
+
* { make: "Subaru", model: "Outback", year: 2021, awd: true },
|
128
|
+
* { make: "Ford", model: "Bronco", year: 1970, awd: true },
|
129
|
+
* { make: "GMC", model: "Acadia", year: 2008, awd: true },
|
130
|
+
* { make: "BMW", model: "X3", year: 2023, awd: true },
|
131
|
+
* ]}
|
132
|
+
* sortBy="year"
|
133
|
+
* maxRows={4}
|
101
134
|
* class="tabular-nums"
|
102
|
-
* classTh="cursor-pointer
|
135
|
+
* classTh="cursor-pointer"
|
103
136
|
* classThSorted="underline"
|
104
|
-
* classTbodyTr="transition hover:bg-
|
137
|
+
* classTbodyTr="transition hover:bg-neutral-50"
|
105
138
|
* classFooter="flex justify-between items-center"
|
106
139
|
* classButton="btn"
|
107
|
-
*
|
140
|
+
* >
|
141
|
+
* <svelte:fragment slot="th" let:column>
|
142
|
+
* {#if column === "awd"}
|
143
|
+
* <span class="uppercase">{column}</span>
|
144
|
+
* {:else}
|
145
|
+
* {column}
|
146
|
+
* {/if}
|
147
|
+
* </svelte:fragment>
|
148
|
+
* <svelte:fragment slot="td" let:column let:row>
|
149
|
+
* {@const item = row[column]}
|
150
|
+
* {#if typeof item === "boolean"}
|
151
|
+
* {#if item}
|
152
|
+
* Yes
|
153
|
+
* {:else}
|
154
|
+
* No
|
155
|
+
* {/if}
|
156
|
+
* {:else}
|
157
|
+
* {item}
|
158
|
+
* {/if}
|
159
|
+
* </svelte:fragment>
|
160
|
+
* </DataTable>
|
108
161
|
* ```
|
109
162
|
*/
|
110
163
|
export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
|
@@ -363,6 +363,7 @@ onMount(() => clientJs = true);
|
|
363
363
|
<div id={idControls} class={classControls}>
|
364
364
|
{#each contentElements as el}
|
365
365
|
<button
|
366
|
+
type="button"
|
366
367
|
class={el.class ? `${classButton} ${el.class}` : classButton}
|
367
368
|
on:click={() => addContent(el)}
|
368
369
|
title={el.name}
|
@@ -11,7 +11,7 @@ Make the document or a specific element fullscreen.
|
|
11
11
|
- `class`
|
12
12
|
- `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
|
13
13
|
- `id`
|
14
|
-
- `
|
14
|
+
- `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
|
15
15
|
- `title`
|
16
16
|
|
17
17
|
@slots
|
@@ -36,12 +36,11 @@ Make the document or a specific element fullscreen.
|
|
36
36
|
|
37
37
|
<div
|
38
38
|
bind:this={fullscreenDiv}
|
39
|
-
class="mt-4 rounded bg-
|
39
|
+
class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
|
40
40
|
>
|
41
|
-
<div class="mb-2">Target element
|
42
|
-
<FullscreenButton
|
43
|
-
|
44
|
-
<span slot="enabled">Exit Element Fullscreen</span>
|
41
|
+
<div class="mb-2">Target element</div>
|
42
|
+
<FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
|
43
|
+
Enable Element Fullscreen
|
45
44
|
</FullscreenButton>
|
46
45
|
</div>
|
47
46
|
```
|
@@ -52,8 +51,8 @@ import { messageNoScript } from "../util/messages";
|
|
52
51
|
let className = "";
|
53
52
|
export { className as class };
|
54
53
|
export let id = "";
|
55
|
-
export let title = "
|
56
|
-
export let
|
54
|
+
export let title = "";
|
55
|
+
export let target = null;
|
57
56
|
export let confirmMessage = "";
|
58
57
|
export let classNoscript = "";
|
59
58
|
let supported = false;
|
@@ -62,13 +61,13 @@ const onClick = () => {
|
|
62
61
|
if (fullscreen) {
|
63
62
|
document.exitFullscreen();
|
64
63
|
} else {
|
65
|
-
if (
|
64
|
+
if (target && target.requestFullscreen) {
|
66
65
|
if (confirmMessage) {
|
67
66
|
const permission = confirm(confirmMessage);
|
68
67
|
if (permission)
|
69
|
-
|
68
|
+
target.requestFullscreen();
|
70
69
|
} else {
|
71
|
-
|
70
|
+
target.requestFullscreen();
|
72
71
|
}
|
73
72
|
}
|
74
73
|
}
|
@@ -76,14 +75,21 @@ const onClick = () => {
|
|
76
75
|
onMount(() => {
|
77
76
|
if (document.documentElement.requestFullscreen)
|
78
77
|
supported = true;
|
79
|
-
if (!
|
80
|
-
|
78
|
+
if (!target)
|
79
|
+
target = document.documentElement;
|
81
80
|
});
|
82
81
|
</script>
|
83
82
|
|
84
83
|
<svelte:window on:fullscreenchange={() => (fullscreen = !fullscreen)} />
|
85
84
|
|
86
|
-
<button
|
85
|
+
<button
|
86
|
+
type="button"
|
87
|
+
disabled={!supported}
|
88
|
+
on:click={onClick}
|
89
|
+
class={className}
|
90
|
+
{id}
|
91
|
+
{title}
|
92
|
+
>
|
87
93
|
{#if fullscreen}
|
88
94
|
<slot name="enabled">Exit Fullscreen</slot>
|
89
95
|
{:else}
|
@@ -4,7 +4,7 @@ declare const __propDef: {
|
|
4
4
|
class?: string | undefined;
|
5
5
|
id?: string | undefined;
|
6
6
|
title?: string | undefined;
|
7
|
-
/** element to make fullscreen (defaults to `document.documentElement` upon mount) */
|
7
|
+
/** element to make fullscreen (defaults to `document.documentElement` upon mount) */ target?: HTMLElement | null | undefined;
|
8
8
|
/** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
|
9
9
|
/** `noscript` class */ classNoscript?: string | undefined;
|
10
10
|
};
|
@@ -30,7 +30,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
|
|
30
30
|
* - `class`
|
31
31
|
* - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
|
32
32
|
* - `id`
|
33
|
-
* - `
|
33
|
+
* - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
|
34
34
|
* - `title`
|
35
35
|
*
|
36
36
|
* @slots
|
@@ -55,12 +55,11 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
|
|
55
55
|
*
|
56
56
|
* <div
|
57
57
|
* bind:this={fullscreenDiv}
|
58
|
-
* class="mt-4 rounded bg-
|
58
|
+
* class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
|
59
59
|
* >
|
60
|
-
* <div class="mb-2">Target element
|
61
|
-
* <FullscreenButton
|
62
|
-
*
|
63
|
-
* <span slot="enabled">Exit Element Fullscreen</span>
|
60
|
+
* <div class="mb-2">Target element</div>
|
61
|
+
* <FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
|
62
|
+
* Enable Element Fullscreen
|
64
63
|
* </FullscreenButton>
|
65
64
|
* </div>
|
66
65
|
* ```
|
@@ -3,19 +3,16 @@
|
|
3
3
|
|
4
4
|
### Popover
|
5
5
|
|
6
|
-
Displays a popover relatively positioned to the
|
6
|
+
Displays a popover relatively positioned to the target.
|
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
|
};
|
@@ -25,19 +22,16 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
25
22
|
/**
|
26
23
|
* ### Popover
|
27
24
|
*
|
28
|
-
* Displays a popover relatively positioned to the
|
25
|
+
* Displays a popover relatively positioned to the target.
|
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>
|
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
### ShareButton
|
5
5
|
|
6
|
-
Uses the
|
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.
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
@@ -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}
|
@@ -22,7 +22,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
|
|
22
22
|
/**
|
23
23
|
* ### ShareButton
|
24
24
|
*
|
25
|
-
* Uses the
|
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.
|
26
26
|
*
|
27
27
|
* @props
|
28
28
|
*
|