@sveltia/ui 0.8.0 → 0.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.
|
@@ -68,7 +68,16 @@
|
|
|
68
68
|
{#if $$slots.input}
|
|
69
69
|
<slot name="input" />
|
|
70
70
|
{:else}
|
|
71
|
-
<TextInput
|
|
71
|
+
<TextInput
|
|
72
|
+
bind:value
|
|
73
|
+
flex
|
|
74
|
+
autofocus
|
|
75
|
+
{...textboxAttrs}
|
|
76
|
+
on:input
|
|
77
|
+
on:keydown
|
|
78
|
+
on:keyup
|
|
79
|
+
on:keypress
|
|
80
|
+
/>
|
|
72
81
|
{/if}
|
|
73
82
|
</div>
|
|
74
83
|
</Dialog>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
@component
|
|
3
|
-
Toast notification. Use the Popover API if possible to acquire a non-modal top layer.
|
|
3
|
+
Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
|
|
4
4
|
@see https://w3c.github.io/aria/#alert
|
|
5
5
|
@see https://developer.chrome.com/blog/introducing-popover-api/
|
|
6
6
|
-->
|
|
@@ -8,6 +8,13 @@
|
|
|
8
8
|
import { onMount } from 'svelte';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
+
* The toast ID. If updated, the timer that hides the toast will be reset, meaning the same toast
|
|
12
|
+
* can be displayed for a longer period of time.
|
|
13
|
+
* @type {number}
|
|
14
|
+
*/
|
|
15
|
+
export let id = undefined;
|
|
16
|
+
/**
|
|
17
|
+
* Whether to show the toast.
|
|
11
18
|
* @type {boolean}
|
|
12
19
|
*/
|
|
13
20
|
export let show = false;
|
|
@@ -16,6 +23,11 @@
|
|
|
16
23
|
* @type {number}
|
|
17
24
|
*/
|
|
18
25
|
export let duration = 5000;
|
|
26
|
+
/**
|
|
27
|
+
* Position of the toast.
|
|
28
|
+
* @type {ToastPosition}
|
|
29
|
+
*/
|
|
30
|
+
export let position = 'bottom-right';
|
|
19
31
|
|
|
20
32
|
/**
|
|
21
33
|
* @type {HTMLElement}
|
|
@@ -29,6 +41,10 @@
|
|
|
29
41
|
* @type {HTMLElement}
|
|
30
42
|
*/
|
|
31
43
|
let toast;
|
|
44
|
+
/**
|
|
45
|
+
* @type {number}
|
|
46
|
+
*/
|
|
47
|
+
let timerId = 0;
|
|
32
48
|
|
|
33
49
|
onMount(() => {
|
|
34
50
|
popover = document.querySelector('.sui.toast-base.enabled');
|
|
@@ -59,8 +75,13 @@
|
|
|
59
75
|
}
|
|
60
76
|
|
|
61
77
|
$: {
|
|
78
|
+
void id;
|
|
79
|
+
void show;
|
|
80
|
+
void duration;
|
|
81
|
+
window.clearTimeout(timerId);
|
|
82
|
+
|
|
62
83
|
if (show && duration) {
|
|
63
|
-
window.setTimeout(() => {
|
|
84
|
+
timerId = window.setTimeout(() => {
|
|
64
85
|
show = false;
|
|
65
86
|
}, duration);
|
|
66
87
|
}
|
|
@@ -69,7 +90,7 @@
|
|
|
69
90
|
|
|
70
91
|
<div role="none" class="sui toast-base" bind:this={popoverBase} />
|
|
71
92
|
|
|
72
|
-
<div class="sui toast" aria-hidden={!show} bind:this={toast} {...$$restProps}>
|
|
93
|
+
<div class="sui toast {position}" aria-hidden={!show} bind:this={toast} {...$$restProps}>
|
|
73
94
|
<slot />
|
|
74
95
|
</div>
|
|
75
96
|
|
|
@@ -98,7 +119,6 @@
|
|
|
98
119
|
|
|
99
120
|
.toast {
|
|
100
121
|
position: absolute;
|
|
101
|
-
inset: auto 16px 16px auto;
|
|
102
122
|
box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
|
|
103
123
|
opacity: 1;
|
|
104
124
|
transition-duration: 250ms;
|
|
@@ -107,4 +127,24 @@
|
|
|
107
127
|
.toast[aria-hidden=true] {
|
|
108
128
|
display: block;
|
|
109
129
|
opacity: 0;
|
|
130
|
+
}
|
|
131
|
+
.toast.top-left {
|
|
132
|
+
inset: 16px auto auto 16px;
|
|
133
|
+
}
|
|
134
|
+
.toast.top-center {
|
|
135
|
+
inset: 16px auto auto 50%;
|
|
136
|
+
transform: translateX(-50%);
|
|
137
|
+
}
|
|
138
|
+
.toast.top-right {
|
|
139
|
+
inset: 16px 16px auto auto;
|
|
140
|
+
}
|
|
141
|
+
.toast.bottom-left {
|
|
142
|
+
inset: auto auto 16px 16px;
|
|
143
|
+
}
|
|
144
|
+
.toast.bottom-center {
|
|
145
|
+
inset: auto auto 16px 50%;
|
|
146
|
+
transform: translateX(-50%);
|
|
147
|
+
}
|
|
148
|
+
.toast.bottom-right {
|
|
149
|
+
inset: auto 16px 16px auto;
|
|
110
150
|
}</style>
|
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} ToastEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} ToastSlots */
|
|
4
4
|
/**
|
|
5
|
-
* Toast notification. Use the Popover API if possible to acquire a non-modal top layer.
|
|
5
|
+
* Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
|
|
6
6
|
* @see https://w3c.github.io/aria/#alert
|
|
7
7
|
* @see https://developer.chrome.com/blog/introducing-popover-api/
|
|
8
8
|
*/
|
|
9
9
|
export default class Toast extends SvelteComponent<{
|
|
10
10
|
[x: string]: any;
|
|
11
|
+
id?: number;
|
|
12
|
+
position?: ToastPosition;
|
|
11
13
|
show?: boolean;
|
|
12
14
|
duration?: number;
|
|
13
15
|
}, {
|
|
@@ -23,6 +25,8 @@ import { SvelteComponent } from "svelte";
|
|
|
23
25
|
declare const __propDef: {
|
|
24
26
|
props: {
|
|
25
27
|
[x: string]: any;
|
|
28
|
+
id?: number;
|
|
29
|
+
position?: ToastPosition;
|
|
26
30
|
show?: boolean;
|
|
27
31
|
duration?: number;
|
|
28
32
|
};
|
package/package/typedef.d.ts
CHANGED
package/package/typedef.js
CHANGED
|
@@ -2,3 +2,8 @@
|
|
|
2
2
|
* @typedef {('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' |
|
|
3
3
|
* 'bottom-right'|'left-top'|'left-bottom')} PopupPosition
|
|
4
4
|
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @typedef {'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' |
|
|
8
|
+
* 'bottom-right'} ToastPosition
|
|
9
|
+
*/
|