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

feat(appui): add dees-appui-bottombar component with config, programmatic API, demo and docs

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-03 12:40:11 +00:00
parent ba4aa912af
commit 9b0b448cb1
10 changed files with 899 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts Normal file
View File

@@ -0,0 +1,210 @@
import { html } from '@design.estate/dees-element';
import type { DeesAppuiBottombar } from './dees-appui-bottombar.js';
import '@design.estate/dees-wcctools/demotools';
export const demoFunc = () => {
return html`
<dees-demowrapper>
<style>
.demo-container {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px;
background: #1a1a1a;
}
.demo-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.demo-label {
font-size: 12px;
color: #737373;
font-family: 'Geist Sans', sans-serif;
}
.demo-bottombar-wrapper {
border: 1px solid hsl(0 0% 20%);
border-radius: 4px;
overflow: hidden;
}
</style>
<div class="demo-container">
<div class="demo-section">
<div class="demo-label">Bottom bar with status widgets and actions</div>
<div class="demo-bottombar-wrapper">
<dees-appui-bottombar
id="demo-bottombar"
></dees-appui-bottombar>
</div>
</div>
<div class="demo-section">
<div class="demo-label">Controls</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<button onclick="addSuccessWidget()">Add Success Widget</button>
<button onclick="addWarningWidget()">Add Warning Widget</button>
<button onclick="addErrorWidget()">Add Error Widget</button>
<button onclick="addLoadingWidget()">Add Loading Widget</button>
<button onclick="addRightWidget()">Add Right Widget</button>
<button onclick="addAction()">Add Action</button>
<button onclick="clearAll()">Clear All</button>
</div>
</div>
</div>
<script type="module">
const bottombar = document.getElementById('demo-bottombar');
// Wait for component to initialize
await bottombar.updateComplete;
// Add initial widgets
bottombar.addWidget({
id: 'status',
iconName: 'lucide:activity',
label: 'System Online',
status: 'success',
tooltip: 'All systems operational',
onClick: () => console.log('Status clicked'),
contextMenuItems: [
{ name: 'View Details', iconName: 'lucide:info', action: () => alert('System details') },
{ divider: true },
{ name: 'Refresh Status', iconName: 'lucide:refreshCw', action: () => alert('Refreshing...') },
],
});
bottombar.addWidget({
id: 'notifications',
iconName: 'lucide:bell',
label: '3 notifications',
status: 'warning',
tooltip: 'You have unread notifications',
onClick: () => console.log('Notifications clicked'),
});
bottombar.addWidget({
id: 'version',
iconName: 'lucide:gitBranch',
label: 'v1.2.3',
tooltip: 'Current version',
position: 'right',
onClick: () => console.log('Version clicked'),
});
// Add initial actions
bottombar.addAction({
id: 'settings',
iconName: 'lucide:settings',
tooltip: 'Settings',
position: 'right',
onClick: () => alert('Settings clicked'),
});
bottombar.addAction({
id: 'help',
iconName: 'lucide:helpCircle',
tooltip: 'Help',
position: 'right',
onClick: () => alert('Help clicked'),
});
// Demo control functions
let widgetCounter = 0;
let actionCounter = 0;
window.addSuccessWidget = () => {
widgetCounter++;
bottombar.addWidget({
id: 'success-' + widgetCounter,
iconName: 'lucide:checkCircle',
label: 'Success ' + widgetCounter,
status: 'success',
tooltip: 'Success widget',
onClick: () => bottombar.removeWidget('success-' + widgetCounter),
});
};
window.addWarningWidget = () => {
widgetCounter++;
bottombar.addWidget({
id: 'warning-' + widgetCounter,
iconName: 'lucide:alertTriangle',
label: 'Warning ' + widgetCounter,
status: 'warning',
tooltip: 'Warning widget',
onClick: () => bottombar.removeWidget('warning-' + widgetCounter),
});
};
window.addErrorWidget = () => {
widgetCounter++;
bottombar.addWidget({
id: 'error-' + widgetCounter,
iconName: 'lucide:xCircle',
label: 'Error ' + widgetCounter,
status: 'error',
tooltip: 'Error widget',
onClick: () => bottombar.removeWidget('error-' + widgetCounter),
});
};
window.addLoadingWidget = () => {
widgetCounter++;
const id = 'loading-' + widgetCounter;
bottombar.addWidget({
id: id,
iconName: 'lucide:loader2',
label: 'Loading...',
status: 'active',
loading: true,
tooltip: 'Loading in progress',
});
// Simulate completion after 3 seconds
setTimeout(() => {
bottombar.updateWidget(id, {
iconName: 'lucide:check',
label: 'Done!',
status: 'success',
loading: false,
});
}, 3000);
};
window.addRightWidget = () => {
widgetCounter++;
bottombar.addWidget({
id: 'right-' + widgetCounter,
iconName: 'lucide:info',
label: 'Right ' + widgetCounter,
position: 'right',
onClick: () => bottombar.removeWidget('right-' + widgetCounter),
});
};
window.addAction = () => {
actionCounter++;
bottombar.addAction({
id: 'action-' + actionCounter,
iconName: 'lucide:zap',
tooltip: 'Action ' + actionCounter,
onClick: () => {
alert('Action ' + actionCounter + ' clicked');
bottombar.removeAction('action-' + actionCounter);
},
});
};
window.clearAll = () => {
bottombar.clearWidgets();
bottombar.clearActions();
widgetCounter = 0;
actionCounter = 0;
};
</script>
</dees-demowrapper>
`;
};