WIP PWA for Grain
feat: add toast component for transient feedback
+55
+55
src/components/atoms/grain-toast.js
+55
src/components/atoms/grain-toast.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
3
+
export class GrainToast extends LitElement {
4
+
static properties = {
5
+
message: { type: String },
6
+
_visible: { state: true }
7
+
};
8
+
9
+
static styles = css`
10
+
:host {
11
+
position: fixed;
12
+
bottom: calc(var(--nav-height, 56px) + var(--space-md));
13
+
left: 50%;
14
+
transform: translateX(-50%);
15
+
z-index: 1001;
16
+
pointer-events: none;
17
+
}
18
+
.toast {
19
+
background: var(--color-text-primary);
20
+
color: var(--color-bg-primary);
21
+
padding: var(--space-sm) var(--space-md);
22
+
border-radius: var(--border-radius);
23
+
font-size: var(--font-size-sm);
24
+
opacity: 0;
25
+
transition: opacity 0.2s;
26
+
}
27
+
.toast.visible {
28
+
opacity: 1;
29
+
}
30
+
`;
31
+
32
+
constructor() {
33
+
super();
34
+
this.message = '';
35
+
this._visible = false;
36
+
}
37
+
38
+
show(message, duration = 2000) {
39
+
this.message = message;
40
+
this._visible = true;
41
+
setTimeout(() => {
42
+
this._visible = false;
43
+
}, duration);
44
+
}
45
+
46
+
render() {
47
+
return html`
48
+
<div class="toast ${this._visible ? 'visible' : ''}">
49
+
${this.message}
50
+
</div>
51
+
`;
52
+
}
53
+
}
54
+
55
+
customElements.define('grain-toast', GrainToast);