tp-elements/tp-toaster
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make styling more versitile and add a timeout strip

Browse Source
This commit is contained in:
trading_peter
2025-07-31 15:56:32 +02:00
parent f348b32833
commit 8af6c51058
2 changed files with 29 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@tp/tp-toaster",
"version": "1.0.1",
"version": "2.0.0",
"description": "",
"main": "tp-toaster.js",
"scripts": {
@@ -16,6 +16,7 @@
"@tp/helpers": "^1.2.1",
"@tp/tp-icon": "^1.0.1",
"@tp/tp-media-query": "^1.0.0",
"@tp/tp-timeout-strip": "^1.0.0",
"lit": "^2.2.0"
}
}

64
tp-toast.js
View File

@@ -3,6 +3,7 @@
Copyright (c) 2023 EDV Wasmeier
*/
import '@tp/tp-timeout-strip/tp-timeout-strip.js';
import { EventHelpers } from '@tp/helpers/event-helpers.js';
import { LitElement, html, css, svg } from 'lit';
@@ -11,13 +12,10 @@ class TpToast extends EventHelpers(LitElement) {
return [
css`
:host {
--tp-toast-info-icon-color: #fff;
--tp-toast-success-icon-color: #fff;
--tp-toast-error-icon-color: #fff;
--tp-toast-warning-icon-color: #fff;
display: inline-block;
position: relative;
transition: transform 0.5s, opacity 0.3s;
will-change: transform, opacity;
display: inline-block;
border-radius: 2px;
background: #FAFAFA;
font-size: 0.8em;
@@ -28,40 +26,30 @@ class TpToast extends EventHelpers(LitElement) {
0 3px 3px -2px rgba(0, 0, 0, 0.4);
}
tp-timeout-strip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.wrap {
display: flex;
flex-direction: row;
gap: 10px;
}
.icon {
padding: 10px;
border-right: 1px #fff;
color: #ffffff;
padding: 10px 0 10px 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
:host([type="info"]) .icon {
background: #039BE5;
}
:host([type="success"]) .icon {
background: #558B2F;
color: #fff;
}
:host([type="warning"]) .icon {
background: #FFCA28;
}
:host([type="error"]) .icon {
background: #B71C1C;
}
.content {
padding: 10px 10px 10px 10px;
padding: 10px 0;
line-height: 24px;
}
@@ -85,18 +73,19 @@ class TpToast extends EventHelpers(LitElement) {
return html`
<div class="wrap">
<div class="icon">
<tp-icon .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
<div class="icon" part="type-icon-wrap">
<tp-icon part="type-icon" .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
</div>
<div class="content">
<div class="content" part="content">
<slot></slot>
</div>
${!sticky ? html`
<div class="dismiss">
<tp-icon .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
<div class="dismiss" part="dismiss-icon-wrap">
<tp-icon part="dismiss-icon" .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
</div>
` : null}
</div>
<tp-timeout-strip exportparts="strip: inner-strip" part="timeout-strip"></tp-timeout-strip>
`;
}
@@ -108,7 +97,7 @@ class TpToast extends EventHelpers(LitElement) {
/**
* Configures what kind of toast this is.
* Comes with the variants `info`, `warning`, `error`, `success`.
* Each type comes with a pre-defined icon, but via the `icon` property a custom icon can also be used.
* Each type comes with a pre-defined icon. To use a custom icon use the `icon` property.
*/
type: { type: String, reflect: true },
@@ -138,23 +127,23 @@ class TpToast extends EventHelpers(LitElement) {
}
static get defaultDismissIcon() {
return svg`<path fill="var(--tp-toast-dismiss-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
return svg`<path fill="var(--tp-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
}
static get infoIcon() {
return svg`<path fill="var(--tp-toast-info-icon-color)" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
return svg`<path fill="var(--tp-icon-color)" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
}
static get successIcon() {
return svg`<path fill="var(--tp-toast-success-icon-color)" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
return svg`<path fill="var(--tp-icon-color)" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
}
static get errorIcon() {
return svg`<path fill="var(--tp-toast-error-icon-color)" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />`;
return svg`<path fill="var(--tp-icon-color)" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />`;
}
static get warningIcon() {
return svg`<path fill="var(--tp-toast-warning-icon-color)" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />`;
return svg`<path fill="var(--tp-icon-color)" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />`;
}
connectedCallback() {
@@ -183,6 +172,7 @@ class TpToast extends EventHelpers(LitElement) {
*/
activateDelay() {
if (this.delay > 0) {
this.shadowRoot.querySelector('tp-timeout-strip').show(this.delay);
this.stopDelay();
this._delayJob = setTimeout(this.dismiss, this.delay);
}