feat(dees-simple-appdash): add global message banners with actions and dismissal support

This commit is contained in:
2026-04-02 19:03:32 +00:00
parent c3b0f0df1f
commit c52854f902
4 changed files with 353 additions and 5 deletions

View File

@@ -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:0006: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',