design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-29 01:20:24 +00:00
parent 9175799ec6
commit e38d3cd42a
78 changed files with 1413 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.demo.ts Normal file
View File

@@ -0,0 +1,45 @@
import { html, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
export const demoFunc = () => {
// Create the activity log element
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
// Add demo entries after the element is connected
setTimeout(() => {
activityLog.addMany([
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
]);
// Subscribe to updates
activityLog.entries$.subscribe((entries) => {
console.log('Activity log updated:', entries.length, 'entries');
});
}, 100);
return html`
<dees-demowrapper>
<style>
.demo-container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
padding: 32px;
}
</style>
<div class="demo-container">
${activityLog}
</div>
</dees-demowrapper>
`;
};

47
ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
View File

@@ -12,53 +12,14 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
import '../../dees-icon/dees-icon.js';
import '@design.estate/dees-wcctools/demotools';
import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';
import { demoFunc } from './dees-appui-activitylog.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-activitylog')
export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
// STATIC
public static demo = () => {
// Create the activity log element
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
// Add demo entries after the element is connected
setTimeout(() => {
activityLog.addMany([
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
]);
// Subscribe to updates
activityLog.entries$.subscribe((entries) => {
console.log('Activity log updated:', entries.length, 'entries');
});
}, 100);
return html`
<dees-demowrapper>
<style>
.demo-container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
padding: 32px;
}
</style>
<div class="demo-container">
${activityLog}
</div>
</dees-demowrapper>
`;
};
public static demo = demoFunc;
// INSTANCE PROPERTIES
@state()
@@ -75,8 +36,10 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
// STYLES
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
position: relative;