diff --git a/changelog.md b/changelog.md index a2898a6..c7128ed 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2026-01-26 - 3.38.0 - feat(appui) +add app shell and bottom bar APIs, new input components, and update README component listings and docs + +- README: updated components count (80+ β†’ 70+), reorganized categories (added App Shell / Pre-built Templates, renamed Workspace/IDE) and improved typography +- Document listing: added DeesActionbar, DeesInputToggle, DeesInputCode, DeesAppuiBottombar and other component entries +- Menu item interface: added closeable and onClose properties for dismissible menu items +- IViewDefinition: expanded content type to accept element constructors and async content, added badgeVariant and cache flags +- New interfaces added: IBottomBarWidget, IBottomBarAction, IViewActivationContext to support bottom bar widgets/actions and view activation context + ## 2026-01-25 - 3.37.1 - fix(editor) fix monaco/editor layout, update dev deps, simplify watch script and remove Playwright snapshots diff --git a/readme.md b/readme.md index aa575d7..4ddebcf 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # @design.estate/dees-catalog -A comprehensive web components library built with TypeScript and LitElement, providing **80+ production-ready UI components** for building modern web applications with consistent design and behavior. πŸš€ +A comprehensive web components library built with TypeScript and LitElement, providing **70+ production-ready UI components** for building modern web applications with consistent design and behavior. πŸš€ [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/) [![LitElement](https://img.shields.io/badge/LitElement-4.0+-orange.svg)](https://lit.dev/) @@ -11,12 +11,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community ## ✨ Features -- 🎨 **Consistent Design System** - Beautiful, cohesive components following modern UI/UX principles -- πŸŒ™ **Dark/Light Theme Support** - All components automatically adapt to your theme -- ⌨️ **Keyboard Accessible** - Full keyboard navigation and ARIA support -- πŸ“± **Responsive** - Mobile-first design that works across all screen sizes -- πŸ”§ **TypeScript-First** - Fully typed APIs with excellent IDE support -- 🧩 **Modular** - Use only what you need, tree-shakeable architecture +- 🎨 **Consistent Design System** β€” Beautiful, cohesive components following modern UI/UX principles +- πŸŒ™ **Dark/Light Theme Support** β€” All components automatically adapt to your theme +- ⌨️ **Keyboard Accessible** β€” Full keyboard navigation and ARIA support +- πŸ“± **Responsive** β€” Mobile-first design that works across all screen sizes +- πŸ”§ **TypeScript-First** β€” Fully typed APIs with excellent IDE support +- 🧩 **Modular** β€” Use only what you need, tree-shakeable architecture +- πŸ—οΈ **Full App Shell** β€” `dees-appui` provides a complete application framework with menus, routing, activity log, and bottom bar ## πŸ“¦ Installation @@ -52,16 +53,16 @@ For developers working on this library, please refer to the [UI Components Playb | Category | Components | |----------|------------| -| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) | -| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) | -| **Layout** | [`DeesAppui`](#deesappui), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) | +| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols), [`DeesActionbar`](#deesactionbar) | +| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) | +| **App Shell (Layout)** | [`DeesAppui`](#deesappui-), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) | | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) | | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) | | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) | | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) | -| **Development** | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) | +| **Workspace / IDE** | [`DeesEditor`](#deeseditor), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) | | **Theming** | [`DeesTheme`](#deestheme) | -| **Auth & Utilities** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) | +| **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) | | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) | --- @@ -117,14 +118,14 @@ Interactive chips/tags with selection capabilities. Display icons from FontAwesome and Lucide icon libraries with library prefixes. ```typescript -// FontAwesome icons - use 'fa:' prefix +// FontAwesome icons β€” use 'fa:' prefix -// Lucide icons - use 'lucide:' prefix +// Lucide icons β€” use 'lucide:' prefix ``` @@ -287,6 +288,18 @@ Window control buttons (minimize, maximize, close) for desktop-like applications > ``` +#### `DeesActionbar` +Floating action bar for contextual actions. + +```typescript + handleSave() }, + { icon: 'lucide:trash', label: 'Delete', action: () => handleDelete() } + ]} +> +``` + --- ### Form Components @@ -331,6 +344,18 @@ Checkbox input component for boolean values. > ``` +#### `DeesInputToggle` +Toggle switch component for boolean on/off states. + +```typescript + +``` + #### `DeesInputDropdown` Dropdown selection component with search and filtering capabilities. @@ -658,6 +683,19 @@ Advanced block-based editor with slash commands and rich content blocks. - Collaborative editing ready - Extensible block types +#### `DeesInputCode` +Code input component for editing source code with syntax highlighting. + +```typescript + +``` + #### `DeesFormSubmit` Submit button component specifically designed for `DeesForm`. @@ -670,10 +708,10 @@ Submit button component specifically designed for `DeesForm`. --- -### Layout Components +### App Shell (Layout) Components -#### `DeesAppui` -A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management. +#### `DeesAppui` πŸ—οΈ +A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, bottom bar, and view management. > **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui/readme.md](./ts_web/elements/00group-appui/dees-appui/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces. @@ -690,7 +728,6 @@ class MyApp extends DeesElement { async firstUpdated() { this.appui = this.shadowRoot.querySelector('dees-appui'); - // Configure with views and menu this.appui.configure({ branding: { logoIcon: 'lucide:box', logoText: 'My App' }, views: [ @@ -700,7 +737,13 @@ class MyApp extends DeesElement { mainMenu: { sections: [{ name: 'Main', views: ['dashboard', 'settings'] }] }, - defaultView: 'dashboard' + defaultView: 'dashboard', + bottomBar: { + visible: true, + widgets: [ + { id: 'status', iconName: 'lucide:activity', label: 'Online', status: 'success' } + ] + } }); } @@ -710,43 +753,123 @@ class MyApp extends DeesElement { } ``` -**Key Features:** -- **Configure API**: Single `configure()` method for complete app setup -- **View Management**: Automatic view caching, lazy loading, and lifecycle hooks -- **Programmatic APIs**: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log -- **View Lifecycle Hooks**: `onActivate()`, `onDeactivate()`, and `canDeactivate()` for view components -- **Hash-based Routing**: Automatic URL synchronization with view navigation -- **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming -- **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation -- **Activity Log Toggle**: Built-in appbar button to show/hide activity panel with entry count badge +**Architecture Overview:** -**Programmatic APIs include:** -- `navigateToView(viewId, params?)` - Navigate between views -- `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar -- `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation -- `setMainMenuCollapsed()`, `setMainMenuVisible()` - Control main menu visibility -- `setSecondaryMenu()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()` - Control secondary menu -- `setContentTabs()`, `setContentTabsVisible()` - Control view-specific UI -- `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries -- `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` - Control activity panel +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ AppBar (dees-appui-appbar) β”‚ +β”‚ β”œβ”€β”€ Menus (File, Edit, View...) β”‚ +β”‚ β”œβ”€β”€ Breadcrumbs β”‚ +β”‚ β”œβ”€β”€ User Profile + Dropdown β”‚ +β”‚ └── Activity Log Toggle β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ Main Menu β”‚ Content Area β”‚ Activity Log β”‚ +β”‚ (collapsed/ β”‚ β”œβ”€β”€ Content Tabs β”‚ (slide panel) β”‚ +β”‚ expanded) β”‚ β”‚ (closable, from tables/lists)β”‚ β”‚ +β”‚ β”‚ └── View Container β”‚ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ └── Active View β”‚ β”‚ +β”‚ β”‚ 🏠 Home β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ β”‚ +β”‚ β”‚ πŸ“ Filesβ”‚ β”‚ Secondary Menu β”‚ β”‚ β”‚ +β”‚ β”‚ βš™ Set.. β”‚ β”‚ β”œβ”€β”€ Collapsible Groups β”‚ β”‚ β”‚ +β”‚ β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ Tabs / Actions β”‚ β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ β”œβ”€β”€ Filters / Links β”‚ β”‚ β”‚ +β”‚ β”‚ β”‚ └── Dividers / Headers β”‚ β”‚ β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ Bottom Bar (dees-appui-bottombar) β€” 24px status bar β”‚ +β”‚ β”œβ”€β”€ Status widgets (left/right) β”‚ +β”‚ └── Action buttons (left/right) β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +**Configuration (`IAppConfig`):** -**View Visibility Control:** ```typescript -// In your view's onActivate hook -onActivate(context: IViewActivationContext) { - // Hide secondary menu for a fullscreen view - context.appui.setSecondaryMenuVisible(false); - - // Hide content tabs - context.appui.setContentTabsVisible(false); - - // Collapse main menu to give more space - context.appui.setMainMenuCollapsed(true); +interface IAppConfig { + branding?: { logoIcon?: string; logoText?: string }; + appBar?: IAppBarConfig; + views: IViewDefinition[]; + mainMenu?: IMainMenuConfig; + defaultView?: string; + activityLog?: IActivityLogConfig; + bottomBar?: IBottomBarConfig; + onViewChange?: (viewId: string, view: IViewDefinition) => void; + onSearch?: (query: string) => void; } ``` +**Key Features:** +- πŸ”§ **Configure API** β€” Single `configure()` method for complete app setup +- πŸ“„ **View Management** β€” Automatic view caching, lazy loading, and lifecycle hooks (`onActivate`, `onDeactivate`, `canDeactivate`) +- 🧭 **Hash-based Routing** β€” Automatic URL synchronization with view navigation and parameterized routes +- πŸ“Š **Activity Log** β€” Slide-out panel with stacked entries, date grouping, search, and filtering +- πŸ“Œ **Bottom Status Bar** β€” Configurable widgets and actions with status colors and loading states +- 🎯 **RxJS Observables** β€” `viewChanged$` and `viewLifecycle$` for reactive programming +- 🏷️ **TypeScript-first** β€” Typed `IViewActivationContext` passed to views on activation + +**Programmatic APIs:** + +| Area | Methods | +|------|---------| +| **Navigation** | `navigateToView(viewId, params?)`, `getCurrentView()`, `getViewRegistry()` | +| **App Bar** | `setAppBarMenus()`, `updateAppBarMenu()`, `setBreadcrumbs()`, `setUser()`, `setProfileMenuItems()`, `setSearchVisible()`, `onSearch()`, `setWindowControlsVisible()` | +| **Main Menu** | `setMainMenu()`, `updateMainMenuGroup()`, `addMainMenuItem()`, `removeMainMenuItem()`, `setMainMenuSelection()`, `setMainMenuCollapsed()`, `setMainMenuVisible()`, `setMainMenuBadge()`, `clearMainMenuBadge()` | +| **Secondary Menu** | `setSecondaryMenu()`, `updateSecondaryMenuGroup()`, `addSecondaryMenuItem()`, `setSecondaryMenuSelection()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()`, `clearSecondaryMenu()` | +| **Content Tabs** | `setContentTabs()`, `addContentTab()`, `removeContentTab()`, `selectContentTab()`, `getSelectedContentTab()`, `setContentTabsVisible()`, `setContentTabsAutoHide()` | +| **Activity Log** | `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()`, `activityLog.getEntries()`, `activityLog.filter()`, `activityLog.search()`, `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` | +| **Bottom Bar** | `bottomBar.addWidget()`, `bottomBar.updateWidget()`, `bottomBar.removeWidget()`, `bottomBar.getWidget()`, `bottomBar.clearWidgets()`, `bottomBar.addAction()`, `bottomBar.removeAction()`, `bottomBar.clearActions()`, `setBottomBarVisible()`, `getBottomBarVisible()` | +| **Observables** | `viewChanged$`, `viewLifecycle$` | + +**View Lifecycle Hooks:** + +```typescript +import { DeesElement, customElement } from '@design.estate/dees-element'; +import type { IViewActivationContext, IViewLifecycle } from '@design.estate/dees-catalog'; + +@customElement('my-settings-view') +class MySettingsView extends DeesElement implements IViewLifecycle { + // Called when view becomes visible + async onActivate(context: IViewActivationContext) { + const { appui, viewId, params } = context; + + // Set view-specific secondary menu + appui.setSecondaryMenu({ + heading: 'Settings', + groups: [{ name: 'Options', items: [...] }] + }); + + // Control visibility of other shell parts + appui.setContentTabsVisible(false); + appui.setSecondaryMenuVisible(true); + } + + // Called when navigating away + onDeactivate() { /* cleanup */ } + + // Return false or a message string to block navigation + canDeactivate(): boolean | string { + if (this.hasUnsavedChanges) return 'You have unsaved changes. Leave anyway?'; + return true; + } +} +``` + +**Secondary Menu Item Types:** + +The secondary menu supports **8 distinct item types** for building rich contextual sidebars: + +| Type | Description | +|------|-------------| +| **Tab** (default) | Selectable item that stays highlighted | +| **Action** | Executes on click without staying selected (blue styling) | +| **Filter** | Checkbox toggle for filtering | +| **MultiFilter** | Collapsible multi-select filter box | +| **Divider** | Visual separator line | +| **Header** | Non-interactive section label | +| **Link** | Opens an external URL | +| **Danger Action** | Red-styled action with optional confirmation | + #### `DeesAppuiMainmenu` -Main navigation menu component for application-wide navigation. +Main navigation menu component for application-wide navigation. Supports collapsed (icon-only) mode. ```typescript ``` #### `DeesAppuiSecondarymenu` -Secondary navigation component for sub-section selection with collapsible groups and badges. +Secondary navigation component for sub-section selection with collapsible groups, badges, and 8 item types. ```typescript {}, // No-op for parent menu items + action: async () => {}, submenu: [ - { - name: 'New File', - shortcut: 'Cmd+N', - iconName: 'file-plus', - action: async () => handleNewFile() - }, - { - name: 'Open...', - shortcut: 'Cmd+O', - iconName: 'folder-open', - action: async () => handleOpen() - }, - { divider: true }, // Menu separator - { - name: 'Save', - shortcut: 'Cmd+S', - iconName: 'save', - action: async () => handleSave(), - disabled: true // Disabled state - } + { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => handleNewFile() }, + { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => handleOpen() }, + { divider: true }, + { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => handleSave(), disabled: true } ] } ]} @@ -849,12 +956,12 @@ Professional application bar component with hierarchical menus, breadcrumb navig ``` **Key Features:** -- **Hierarchical Menu System** - Top-level menus with dropdown submenus, icons, and keyboard shortcuts -- **Keyboard Navigation** - Full keyboard support (Tab, Arrow keys, Enter, Escape) -- **Breadcrumb Navigation** - Customizable breadcrumb trail with click events -- **User Account Section** - Avatar with status indicator and profile dropdown -- **Activity Log Toggle** - Button with badge count to show/hide activity panel -- **Accessibility** - Full ARIA support with menubar roles +- **Hierarchical Menu System** β€” Top-level menus with dropdown submenus, icons, and keyboard shortcuts +- **Keyboard Navigation** β€” Full keyboard support (Tab, Arrow keys, Enter, Escape) +- **Breadcrumb Navigation** β€” Customizable breadcrumb trail with click events +- **User Account Section** β€” Avatar with status indicator and profile dropdown +- **Activity Log Toggle** β€” Button with badge count to show/hide activity panel +- **Accessibility** β€” Full ARIA support with menubar roles #### `DeesAppuiActivitylog` Real-time activity log panel for displaying user actions and system events. @@ -886,6 +993,61 @@ activityLog.search('settings'); // Search by message - Animated slide-in/out panel - Theme-aware styling +#### `DeesAppuiBottombar` +A 24px fixed-height status bar at the bottom of the application shell. Supports status widgets and action buttons positioned left or right. + +```typescript +// Configure via DeesAppui +appui.configure({ + bottomBar: { + visible: true, + widgets: [ + { + id: 'status', + iconName: 'lucide:activity', + label: 'System Online', + status: 'success', // 'idle' | 'active' | 'success' | 'warning' | 'error' + tooltip: 'All systems operational', + onClick: () => console.log('Status clicked'), + }, + { + id: 'version', + iconName: 'lucide:gitBranch', + label: 'v1.2.3', + position: 'right', + } + ], + actions: [ + { + id: 'terminal', + iconName: 'lucide:terminal', + tooltip: 'Open Terminal', + position: 'right', + onClick: () => console.log('Terminal clicked'), + } + ] + } +}); + +// Programmatic updates +appui.bottomBar.addWidget({ id: 'build', iconName: 'lucide:hammer', label: 'Building...', loading: true, status: 'active' }); +appui.bottomBar.updateWidget('build', { label: 'Build complete', loading: false, status: 'success' }); +appui.bottomBar.removeWidget('build'); + +appui.bottomBar.addAction({ id: 'refresh', iconName: 'lucide:refreshCw', onClick: () => location.reload() }); +appui.bottomBar.removeAction('refresh'); + +appui.setBottomBarVisible(false); +``` + +**Key Features:** +- Configurable status widgets with icons, labels, and colored status indicators +- Loading spinner state for widgets +- Contextual actions with icon buttons +- Left/right positioning for both widgets and actions +- Tooltips on hover +- Context menu support per widget + #### `DeesAppuiTabs` Reusable tab component with horizontal/vertical layout support. @@ -1007,7 +1169,7 @@ A responsive grid component for displaying statistical data with various visuali value: 125420, unit: '$', type: 'number', - icon: 'faDollarSign', + icon: 'lucide:dollarSign', description: '+12.5% from last month', color: '#22c55e' }, @@ -1016,7 +1178,7 @@ A responsive grid component for displaying statistical data with various visuali title: 'CPU Usage', value: 73, type: 'gauge', - icon: 'faMicrochip', + icon: 'lucide:cpu', gaugeOptions: { min: 0, max: 100, thresholds: [ @@ -1032,8 +1194,22 @@ A responsive grid component for displaying statistical data with various visuali value: '1.2k', unit: '/min', type: 'trend', - icon: 'faServer', + icon: 'lucide:server', trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92] + }, + { + id: 'cores', + title: 'CPU Cores', + value: 0, + type: 'cpuCores', + icon: 'lucide:cpu', + columnSpan: 2, + coresData: [ + { id: 0, usage: 45, label: '0' }, + { id: 1, usage: 72, label: '1' }, + { id: 2, usage: 30, label: '2' }, + { id: 3, usage: 88, label: '3' } + ] } ]} .minTileWidth=${250} @@ -1041,6 +1217,8 @@ A responsive grid component for displaying statistical data with various visuali > ``` +**Tile Types:** `number`, `gauge`, `percentage`, `trend`, `text`, `multiPercentage`, `cpuCores` + #### `DeesPagination` Pagination component for navigating through large datasets. @@ -1189,7 +1367,7 @@ Progress indicator component for tracking completion status. Theme provider component that wraps children and provides CSS custom properties for consistent theming. ```typescript -// Basic usage - wrap your app +// Basic usage β€” wrap your app @@ -1217,7 +1395,7 @@ Theme provider component that wraps children and provides CSS custom properties --- -### Development Components +### Workspace / IDE Components #### `DeesEditor` Code editor component with syntax highlighting and code completion, powered by Monaco Editor. @@ -1236,28 +1414,6 @@ Code editor component with syntax highlighting and code completion, powered by M > ``` -#### `DeesEditorMarkdown` -Markdown editor component with live preview. - -```typescript - -``` - -#### `DeesEditorMarkdownoutlet` -Markdown preview component for rendering markdown content. - -```typescript - -``` - #### `DeesTerminal` Terminal emulator component for command-line interface. @@ -1286,7 +1442,7 @@ Component for managing application updates and version control. --- -### Auth & Utilities Components +### Pre-built Templates #### `DeesSimpleAppdash` Simple application dashboard component for quick prototyping. @@ -1360,6 +1516,8 @@ interface IMenuItem { action: () => void; badge?: string | number; badgeVariant?: 'default' | 'success' | 'warning' | 'error'; + closeable?: boolean; + onClose?: () => void; } // Menu group interface for organized menus @@ -1375,11 +1533,13 @@ interface IViewDefinition { id: string; name: string; iconName?: string; - content: string | HTMLElement | (() => TemplateResult); + content: string | (new () => HTMLElement) | (() => TemplateResult) | (() => Promise); secondaryMenu?: ISecondaryMenuGroup[]; contentTabs?: IMenuItem[]; route?: string; badge?: string | number; + badgeVariant?: 'default' | 'success' | 'warning' | 'error'; + cache?: boolean; } // Activity log entry @@ -1392,6 +1552,36 @@ interface IActivityEntry { iconName?: string; data?: Record; } + +// Bottom bar widget +interface IBottomBarWidget { + id: string; + iconName?: string; + label?: string; + status?: 'idle' | 'active' | 'success' | 'warning' | 'error'; + tooltip?: string; + loading?: boolean; + onClick?: () => void; + position?: 'left' | 'right'; + order?: number; +} + +// Bottom bar action button +interface IBottomBarAction { + id: string; + iconName: string; + tooltip?: string; + onClick: () => void | Promise; + disabled?: boolean; + position?: 'left' | 'right'; +} + +// View activation context (passed to onActivate) +interface IViewActivationContext { + appui: DeesAppui; + viewId: string; + params?: Record; +} ``` --- diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index cf0e71f..e2a5298 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.37.1', + version: '3.38.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' }