feat(dees-simple-appdash): add global message banners with actions and dismissal support
This commit is contained in:
@@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-04-02 - 3.50.0 - feat(dees-simple-appdash)
|
||||
add global message banners with actions and dismissal support
|
||||
|
||||
- introduces typed global message APIs and public methods to add, remove, and clear banners
|
||||
- renders info, success, warning, and error banners with optional icons and action buttons
|
||||
- adjusts app content and terminal positioning to account for banner height dynamically
|
||||
- updates the demo to showcase dismissible and actionable global messages
|
||||
|
||||
## 2026-04-02 - 3.49.2 - fix(dees-input-list)
|
||||
refine dees-input-list spacing and simplify the add item action button
|
||||
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.49.2',
|
||||
version: '3.50.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
|
||||
import type { IView } from './dees-simple-appdash.js';
|
||||
import type { IView, IGlobalMessage } from './dees-simple-appdash.js';
|
||||
import '../../00group-form/dees-form/dees-form.js';
|
||||
import '../../00group-input/dees-input-text/dees-input-text.js';
|
||||
import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
|
||||
@@ -263,6 +263,44 @@ export const demoFunc = () => html`
|
||||
<dees-simple-appdash
|
||||
name="My Application"
|
||||
terminalSetupCommand="echo 'Welcome to the terminal!'"
|
||||
.globalMessages=${[
|
||||
{
|
||||
id: 'update',
|
||||
type: 'info',
|
||||
message: 'A new version (v3.50.0) is available with performance improvements and bug fixes.',
|
||||
dismissible: true,
|
||||
actions: [
|
||||
{
|
||||
name: 'Update Now',
|
||||
iconName: 'lucide:download',
|
||||
action: () => alert('Updating...'),
|
||||
},
|
||||
{
|
||||
name: 'Release Notes',
|
||||
action: () => alert('Opening release notes...'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'maintenance',
|
||||
type: 'warning',
|
||||
message: 'Scheduled maintenance window: April 5, 2026 02:00–06:00 UTC. Some services may be temporarily unavailable.',
|
||||
dismissible: true,
|
||||
},
|
||||
{
|
||||
id: 'critical',
|
||||
type: 'error',
|
||||
message: 'Your SSL certificate expires in 3 days. Renew now to avoid service disruption.',
|
||||
dismissible: false,
|
||||
actions: [
|
||||
{
|
||||
name: 'Renew Certificate',
|
||||
iconName: 'lucide:shieldCheck',
|
||||
action: () => alert('Renewing certificate...'),
|
||||
},
|
||||
],
|
||||
},
|
||||
] as IGlobalMessage[]}
|
||||
.viewTabs=${[
|
||||
{
|
||||
name: 'Dashboard',
|
||||
|
||||
@@ -29,6 +29,23 @@ export interface IView {
|
||||
element: DeesElement['constructor']['prototype'];
|
||||
}
|
||||
|
||||
export type TGlobalMessageType = 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
export interface IGlobalMessageAction {
|
||||
name: string;
|
||||
iconName?: string;
|
||||
action: () => void | Promise<void>;
|
||||
}
|
||||
|
||||
export interface IGlobalMessage {
|
||||
id: string;
|
||||
type: TGlobalMessageType;
|
||||
message: string;
|
||||
dismissible?: boolean;
|
||||
icon?: string;
|
||||
actions?: IGlobalMessageAction[];
|
||||
}
|
||||
|
||||
@customElement('dees-simple-appdash')
|
||||
export class DeesSimpleAppDash extends DeesElement {
|
||||
// STATIC
|
||||
@@ -45,9 +62,15 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
@property({ type: String })
|
||||
accessor terminalSetupCommand: string = `echo "Terminal ready"`;
|
||||
|
||||
@property({ type: Array })
|
||||
accessor globalMessages: IGlobalMessage[] = [];
|
||||
|
||||
@state()
|
||||
accessor selectedView!: IView;
|
||||
|
||||
@state()
|
||||
accessor _activeMessages: IGlobalMessage[] = [];
|
||||
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
@@ -327,6 +350,170 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
.control.status-terminal dees-icon {
|
||||
color: hsl(45 90% 55%);
|
||||
}
|
||||
|
||||
/* Global Message Banners */
|
||||
.messageBannerArea {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 240px;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.messageBanner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
.messageBanner.dismissing {
|
||||
animation: bannerSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes bannerSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bannerSlideUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.messageBanner dees-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.messageBanner-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.messageBanner-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.messageBanner-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.messageBanner-action:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.15)', 'hsl(0 0% 100% / 0.18)')};
|
||||
}
|
||||
|
||||
.messageBanner-action:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.messageBanner-action dees-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.messageBanner-dismiss {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.messageBanner-dismiss:hover {
|
||||
opacity: 1;
|
||||
background: hsl(0 0% 0% / 0.1);
|
||||
}
|
||||
|
||||
/* Message type: info */
|
||||
.messageBanner-info {
|
||||
background: ${cssManager.bdTheme('hsl(210 100% 97%)', 'hsl(210 50% 10%)')};
|
||||
color: ${cssManager.bdTheme('hsl(210 70% 30%)', 'hsl(210 70% 80%)')};
|
||||
border-left: 3px solid #0084ff;
|
||||
}
|
||||
.messageBanner-info dees-icon {
|
||||
color: #0084ff;
|
||||
}
|
||||
|
||||
/* Message type: success */
|
||||
.messageBanner-success {
|
||||
background: ${cssManager.bdTheme('hsl(142 70% 97%)', 'hsl(142 30% 10%)')};
|
||||
color: ${cssManager.bdTheme('hsl(142 50% 25%)', 'hsl(142 50% 80%)')};
|
||||
border-left: 3px solid #22c55e;
|
||||
}
|
||||
.messageBanner-success dees-icon {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
/* Message type: warning */
|
||||
.messageBanner-warning {
|
||||
background: ${cssManager.bdTheme('hsl(38 90% 97%)', 'hsl(38 40% 10%)')};
|
||||
color: ${cssManager.bdTheme('hsl(38 60% 25%)', 'hsl(38 60% 80%)')};
|
||||
border-left: 3px solid #f59e0b;
|
||||
}
|
||||
.messageBanner-warning dees-icon {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Message type: error */
|
||||
.messageBanner-error {
|
||||
background: ${cssManager.bdTheme('hsl(0 70% 97%)', 'hsl(0 40% 10%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 60% 30%)', 'hsl(0 60% 80%)')};
|
||||
border-left: 3px solid #ef4444;
|
||||
}
|
||||
.messageBanner-error dees-icon {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.messageBanner-dismiss:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
|
||||
}
|
||||
|
||||
.appcontent {
|
||||
top: var(--banner-area-height, 0px);
|
||||
height: calc(100% - 24px - var(--banner-area-height, 0px));
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -369,6 +556,34 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${this._activeMessages.length > 0 ? html`
|
||||
<div class="messageBannerArea">
|
||||
${this._activeMessages.map(msg => html`
|
||||
<div
|
||||
class="messageBanner messageBanner-${msg.type}"
|
||||
data-message-id="${msg.id}"
|
||||
>
|
||||
<dees-icon .icon="${this.getMessageIcon(msg)}"></dees-icon>
|
||||
<span class="messageBanner-text">${msg.message}</span>
|
||||
${msg.actions?.length ? html`
|
||||
<div class="messageBanner-actions">
|
||||
${msg.actions.map(a => html`
|
||||
<div class="messageBanner-action" @click=${() => a.action()}>
|
||||
${a.iconName ? html`<dees-icon .icon="${a.iconName.includes(':') ? a.iconName : `lucide:${a.iconName}`}"></dees-icon>` : ''}
|
||||
<span>${a.name}</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
` : ''}
|
||||
${msg.dismissible !== false ? html`
|
||||
<div class="messageBanner-dismiss" @click=${() => this.removeMessage(msg.id)}>
|
||||
<dees-icon .icon="${'lucide:x'}"></dees-icon>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="appcontent">
|
||||
<!-- Content goes here -->
|
||||
</div>
|
||||
@@ -395,6 +610,91 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
public willUpdate(changedProperties: Map<string, unknown>) {
|
||||
if (changedProperties.has('globalMessages')) {
|
||||
// Sync globalMessages property into _activeMessages
|
||||
// Keep any messages added via addMessage() that aren't in globalMessages
|
||||
const propertyIds = new Set(this.globalMessages.map(m => m.id));
|
||||
const existingIds = new Set(this._activeMessages.map(m => m.id));
|
||||
|
||||
// Add new messages from property that aren't already active
|
||||
const newMessages = this.globalMessages.filter(m => !existingIds.has(m.id));
|
||||
|
||||
// Keep messages added via API (those not in globalMessages are kept as-is)
|
||||
// Remove messages that were in the previous globalMessages but are no longer
|
||||
const previousGlobalMessages = (changedProperties.get('globalMessages') as IGlobalMessage[]) || [];
|
||||
const previousIds = new Set(previousGlobalMessages.map(m => m.id));
|
||||
const removedIds = new Set([...previousIds].filter(id => !propertyIds.has(id)));
|
||||
|
||||
this._activeMessages = [
|
||||
...this._activeMessages.filter(m => !removedIds.has(m.id)),
|
||||
...newMessages,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
public updated(changedProperties: Map<string, unknown>) {
|
||||
super.updated(changedProperties);
|
||||
this.updateBannerOffset();
|
||||
}
|
||||
|
||||
private updateBannerOffset() {
|
||||
requestAnimationFrame(() => {
|
||||
const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
|
||||
const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
|
||||
const height = bannerArea ? bannerArea.offsetHeight : 0;
|
||||
maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
|
||||
|
||||
// Keep terminal in sync with banner height
|
||||
if (this.currentTerminal) {
|
||||
this.currentTerminal.style.top = `${height}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getMessageIcon(msg: IGlobalMessage): string {
|
||||
if (msg.icon) return msg.icon;
|
||||
const defaults: Record<TGlobalMessageType, string> = {
|
||||
info: 'lucide:info',
|
||||
success: 'lucide:circleCheck',
|
||||
warning: 'lucide:triangleAlert',
|
||||
error: 'lucide:circleX',
|
||||
};
|
||||
return defaults[msg.type];
|
||||
}
|
||||
|
||||
public addMessage(message: Omit<IGlobalMessage, 'id'> & { id?: string }): string {
|
||||
const id = message.id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
const fullMessage: IGlobalMessage = {
|
||||
dismissible: true,
|
||||
...message,
|
||||
id,
|
||||
};
|
||||
this._activeMessages = [...this._activeMessages, fullMessage];
|
||||
return id;
|
||||
}
|
||||
|
||||
public removeMessage(id: string): void {
|
||||
const bannerEl = this.shadowRoot?.querySelector(`[data-message-id="${id}"]`) as HTMLElement;
|
||||
if (bannerEl) {
|
||||
bannerEl.classList.add('dismissing');
|
||||
bannerEl.addEventListener('animationend', () => {
|
||||
this._activeMessages = this._activeMessages.filter(m => m.id !== id);
|
||||
this.dispatchEvent(new CustomEvent('message-dismiss', {
|
||||
detail: { id },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}, { once: true });
|
||||
} else {
|
||||
this._activeMessages = this._activeMessages.filter(m => m.id !== id);
|
||||
}
|
||||
}
|
||||
|
||||
public clearMessages(): void {
|
||||
this._activeMessages = [];
|
||||
}
|
||||
|
||||
public currentTerminal: DeesWorkspaceTerminal | null = null;
|
||||
public async launchTerminal() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
@@ -410,9 +710,11 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
terminal.setupCommand = this.terminalSetupCommand;
|
||||
this.currentTerminal = terminal;
|
||||
maincontainer.appendChild(terminal);
|
||||
const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
|
||||
const bannerHeight = bannerArea ? bannerArea.offsetHeight : 0;
|
||||
terminal.style.position = 'absolute';
|
||||
terminal.style.zIndex = '10';
|
||||
terminal.style.top = '0px';
|
||||
terminal.style.top = `${bannerHeight}px`;
|
||||
terminal.style.left = '240px';
|
||||
terminal.style.right = '0px';
|
||||
terminal.style.bottom = '24px';
|
||||
@@ -421,7 +723,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
|
||||
terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px - 240px)`;
|
||||
terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
|
||||
terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px - ${bannerHeight}px)`;
|
||||
|
||||
// Add close button to terminal
|
||||
terminal.addEventListener('close', () => this.closeTerminal());
|
||||
|
||||
Reference in New Issue
Block a user