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.
@@ -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--defaults to first column */ sortBy?: string | undefined;
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 */ paginate?: number | undefined;
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
- previous: {};
36
- next: {};
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
- * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
71
- * - `sortBy` - column to sort by--defaults to first column
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 | purpose | default value |
76
- * | ---------- | ------------------------ | ------------- |
77
- * | `previous` | previous button contents | `Previous` |
78
- * | `next` | next button contents | `Next` |
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
- * sortBy="make"
100
- * paginate={4}
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 uppercase"
135
+ * classTh="cursor-pointer"
103
136
  * classThSorted="underline"
104
- * classTbodyTr="transition hover:bg-gray-50"
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
- - `targetElement` - element to make fullscreen (defaults to `document.documentElement` upon mount)
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-gray-800 p-4 text-gray-50"
39
+ class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
40
40
  >
41
- <div class="mb-2">Target element fullscreen</div>
42
- <FullscreenButton targetElement={fullscreenDiv} class="btn">
43
- <span>Enable Element Fullscreen</span>
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 = "Fullscreen";
56
- export let targetElement = null;
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 (targetElement && targetElement.requestFullscreen) {
64
+ if (target && target.requestFullscreen) {
66
65
  if (confirmMessage) {
67
66
  const permission = confirm(confirmMessage);
68
67
  if (permission)
69
- targetElement.requestFullscreen();
68
+ target.requestFullscreen();
70
69
  } else {
71
- targetElement.requestFullscreen();
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 (!targetElement)
80
- targetElement = document.documentElement;
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 disabled={!supported} on:click={onClick} class={className} {id} {title}>
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) */ targetElement?: HTMLElement | null | undefined;
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
- * - `targetElement` - element to make fullscreen (defaults to `document.documentElement` upon mount)
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-gray-800 p-4 text-gray-50"
58
+ * class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
59
59
  * >
60
- * <div class="mb-2">Target element fullscreen</div>
61
- * <FullscreenButton targetElement={fullscreenDiv} class="btn">
62
- * <span>Enable Element Fullscreen</span>
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 button.
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 button
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
- <Popover classButton="btn" classPopover="p-2 transition">
35
- <span slot="button">Hover</span>
36
- <div class="card flex w-48 flex-col gap-2">
37
- <div class="font-bold">Bottom</div>
38
- <button class="btn">Button</button>
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
- <span slot="button">Click</span>
50
- <div class="card flex w-48 flex-col gap-2">
51
- <div class="font-bold">Right</div>
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 { onMount, tick } from "svelte";
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 classButton = "";
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 eventType = "hover";
71
- let clientEventType = "hover";
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 correctPosition = async () => {
69
+ const setPosition = async () => {
76
70
  if (position === "top" || position === "bottom") {
77
- coordinates.x = button.offsetWidth / 2 - popover.offsetWidth / 2;
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 = button.offsetHeight;
75
+ coordinates.y = target.offsetHeight;
82
76
  }
83
77
  } else {
84
- coordinates.y = button.offsetHeight / 2 - popover.offsetHeight / 2;
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 = button.offsetWidth;
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 rect = popover.getBoundingClientRect();
93
- if (rect.x < 0) {
94
- coordinates.x += Math.abs(rect.x);
95
- } else if (rect.x + popover.offsetWidth > window.innerWidth) {
96
- coordinates.x -= rect.x + popover.offsetWidth - window.innerWidth + 16;
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 (rect.y < 0) {
99
- coordinates.y += Math.abs(rect.y);
100
- } else if (rect.y + popover.offsetHeight > window.innerHeight) {
101
- coordinates.y -= rect.y + popover.offsetHeight - window.innerHeight;
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
- const openPopover = async (e) => {
117
- e.stopPropagation();
118
- display = true;
119
- };
106
+ $:
107
+ if (target && popover)
108
+ setPosition();
120
109
  onMount(() => {
121
- clientEventType = eventType;
122
- correctPosition();
110
+ if (prefersReducedMotion()) {
111
+ if (transition)
112
+ transition.duration = 0;
113
+ }
123
114
  });
124
115
  </script>
125
116
 
126
- <svelte:body on:keydown={onKeyDown} on:click={clickOutside} />
117
+ <svelte:body on:keydown={onKeyDown} />
127
118
 
128
- <div class="db-relative {className}" {id}>
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
- id={idPopover}
142
- class="db-popover {classPopover}"
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
- inert={clientEventType === "hover" || display ? false : true}
127
+ transition:fade={transition ? transition : { duration: 0 }}
148
128
  >
149
129
  <slot>Popover</slot>
150
130
  </div>
151
- </div>
131
+ {/if}
152
132
 
153
133
  <style>
154
- .db-relative {
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 button */ position?: "top" | "bottom" | "left" | "right" | undefined;
12
- /** controls if hovering or clicking the button displays the popover */ eventType?: ("click" | "hover") | undefined;
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 button.
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 button
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
- * <Popover classButton="btn" classPopover="p-2 transition">
57
- * <span slot="button">Hover</span>
58
- * <div class="card flex w-48 flex-col gap-2">
59
- * <div class="font-bold">Bottom</div>
60
- * <button class="btn">Button</button>
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
- * <span slot="button">Click</span>
72
- * <div class="card flex w-48 flex-col gap-2">
73
- * <div class="font-bold">Right</div>
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 navigator api 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) 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, 800);
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 disabled={!clientJs} on:click={onClick} class={className} {id} {title}>
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 navigator api to share or copy a url link depending on browser support.
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
  *