feat: Enhance dees-appui components with dynamic tab and menu configurations

- Updated dees-appui-mainmenu to accept dynamic tabs with actions and icons. - Modified dees-appui-mainselector to support dynamic selection options. - Introduced dees-appui-tabs for improved tab navigation with customizable styles. - Added dees-appui-view to manage views with tabs and content dynamically. - Implemented event dispatching for tab and option selections. - Created a comprehensive architecture documentation for dees-appui system. - Added demo implementations for dees-appui-base and other components. - Improved responsiveness and user interaction feedback across components.
2025-06-17 08:41:36 +00:00
parent e33f4e7a70
commit 5b4319432c
11 changed files with 1669 additions and 141 deletions
--- a/readme.md
+++ b/readme.md
@ -306,17 +306,119 @@ Submit button component specifically designed for `DeesForm`.
 ### Layout Components

 #### `DeesAppuiBase`
-Base container component for application layout structure.
+Base container component for application layout structure with integrated appbar, menu system, and content areas.

 ```typescript
-<dees-appui-base>
-  <dees-appui-mainmenu></dees-appui-mainmenu>
-  <dees-appui-mainselector></dees-appui-mainselector>
-  <dees-appui-maincontent></dees-appui-maincontent>
-  <dees-appui-appbar></dees-appui-appbar>
+<dees-appui-base
+  // Appbar configuration
+  .appbarMenuItems=${[
+    {
+      name: 'File',
+      action: async () => {},
+      submenu: [
+        { name: 'New', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => {} },
+        { name: 'Open', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => {} },
+        { divider: true },
+        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => {} }
+      ]
+    },
+    {
+      name: 'Edit',
+      action: async () => {},
+      submenu: [
+        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => {} },
+        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => {} }
+      ]
+    }
+  ]}
+  .appbarBreadcrumbs=${'Dashboard > Overview'}
+  .appbarTheme=${'dark'}
+  .appbarUser=${{
+    name: 'John Doe',
+    status: 'online'
+  }}
+  .appbarShowSearch=${true}
+  .appbarShowWindowControls=${true}
+  
+  // Main menu configuration (left sidebar)
+  .mainmenuTabs=${[
+    { key: 'dashboard', iconName: 'home', action: () => {} },
+    { key: 'projects', iconName: 'folder', action: () => {} },
+    { key: 'settings', iconName: 'cog', action: () => {} }
+  ]}
+  .mainmenuSelectedTab=${selectedTab}
+  
+  // Selector configuration (second sidebar)
+  .mainselectorOptions=${[
+    { key: 'Overview', action: () => {} },
+    { key: 'Components', action: () => {} },
+    { key: 'Services', action: () => {} }
+  ]}
+  .mainselectorSelectedOption=${selectedOption}
+  
+  // Main content tabs
+  .maincontentTabs=${[
+    { key: 'tab1', iconName: 'file', action: () => {} }
+  ]}
+  
+  // Event handlers
+  @appbar-menu-select=${(e) => handleMenuSelect(e.detail)}
+  @appbar-breadcrumb-navigate=${(e) => handleBreadcrumbNav(e.detail)}
+  @appbar-search-click=${() => handleSearch()}
+  @appbar-user-menu-open=${() => handleUserMenu()}
+  @mainmenu-tab-select=${(e) => handleTabSelect(e.detail)}
+  @mainselector-option-select=${(e) => handleOptionSelect(e.detail)}
+>
+  <div slot="maincontent">
+    <!-- Your main application content goes here -->
+  </div>
 </dees-appui-base>
 ```

+Key Features:
+- **Integrated Layout System**: Automatically arranges appbar, sidebars, and content area
+- **Centralized Configuration**: Pass properties to all child components from one place
+- **Event Propagation**: All child component events are re-emitted for easy handling
+- **Responsive Grid**: Uses CSS Grid for flexible, responsive layout
+- **Slot Support**: Main content area supports custom content via slots
+
+Layout Structure:
+```
+┌─────────────────────────────────────────────────┐
+│                    AppBar                       │
+├────┬──────────────┬─────────────────┬──────────┤
+│    │              │                 │          │
+│ M  │   Selector   │   Main Content  │ Activity │
+│ e  │              │                 │   Log    │
+│ n  │              │                 │          │
+│ u  │              │                 │          │
+│    │              │                 │          │
+└────┴──────────────┴─────────────────┴──────────┘
+```
+
+Grid Configuration:
+- Main Menu: 60px width
+- Selector: 240px width
+- Main Content: Flexible (1fr)
+- Activity Log: 240px width
+
+Child Component Access:
+```typescript
+// Access child components after firstUpdated
+const base = document.querySelector('dees-appui-base');
+base.appbar;       // DeesAppuiAppbar instance
+base.mainmenu;     // DeesAppuiMainmenu instance
+base.mainselector; // DeesAppuiMainselector instance
+base.maincontent;  // DeesAppuiMaincontent instance
+base.activitylog;  // DeesAppuiActivitylog instance
+```
+
+Best Practices:
+1. **Configuration**: Set all properties on the base component for consistency
+2. **Event Handling**: Listen to events on the base component rather than child components
+3. **Content**: Use the `maincontent` slot for your application's primary interface
+4. **State Management**: Manage selected tabs and options at the base component level
+
 #### `DeesAppuiMainmenu`
 Main navigation menu component for application-wide navigation.

@ -378,28 +480,148 @@ Main content area with tab management support.
 ```

 #### `DeesAppuiAppbar`
-Top application bar with actions and status information.
+Professional application bar component with hierarchical menus, breadcrumb navigation, and user account management.

 ```typescript
 <dees-appui-appbar
-  title="My Application"
-  .actions=${[
+  .menuItems=${[
    {
-      icon: 'bell',
-      label: 'Notifications',
-      action: () => showNotifications()
+      name: 'File',
+      action: async () => {},  // No-op for parent menu items
+      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
+        }
+      ]
    },
    {
-      icon: 'user',
-      label: 'Profile',
-      action: () => showProfile()
+      name: 'Edit',
+      action: async () => {},
+      submenu: [
+        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => handleUndo() },
+        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => handleRedo() }
+      ]
    }
  ]}
-  showSearch          // Optional: display search bar
-  @search=${handleSearch}
+  .breadcrumbs=${'Project > src > components > AppBar.ts'}
+  .breadcrumbSeparator=${' > '}
+  .showWindowControls=${true}
+  .showSearch=${true}
+  .theme=${'dark'}  // Options: 'light' | 'dark'
+  .user=${{
+    name: 'John Doe',
+    avatar: '/path/to/avatar.jpg',  // Optional
+    status: 'online'  // Options: 'online' | 'offline' | 'busy' | 'away'
+  }}
+  @menu-select=${(e) => handleMenuSelect(e.detail.item)}
+  @breadcrumb-navigate=${(e) => handleBreadcrumbClick(e.detail)}
+  @search-click=${() => handleSearchClick()}
+  @user-menu-open=${() => handleUserMenuOpen()}
 ></dees-appui-appbar>
 ```

+Key Features:
+- **Hierarchical Menu System**
+  - Top-level text-only menus (following desktop UI standards)
+  - Dropdown submenus with icons and keyboard shortcuts
+  - Support for nested submenus
+  - Menu dividers for visual grouping
+  - Disabled state support
+  
+- **Keyboard Navigation**
+  - Tab navigation between top-level items
+  - Arrow keys for dropdown navigation (Up/Down in dropdowns, Left/Right between top items)
+  - Enter to select items
+  - Escape to close dropdowns
+  - Home/End keys for first/last item
+  
+- **Breadcrumb Navigation**
+  - Customizable breadcrumb trail
+  - Configurable separator
+  - Click events for navigation
+  
+- **User Account Section**
+  - User avatar with fallback to initials
+  - Status indicator (online, offline, busy, away)
+  - Click handler for user menu
+  
+- **Visual Features**
+  - Light and dark theme support
+  - Smooth animations and transitions
+  - Window controls integration
+  - Search icon with click handler
+  - Responsive layout using CSS Grid
+  
+- **Accessibility**
+  - Full ARIA support (menubar, menuitem roles)
+  - Keyboard navigation
+  - Focus management
+  - Screen reader compatible
+
+Menu Item Interface:
+```typescript
+// Regular menu item
+interface IAppBarMenuItemRegular {
+  name: string;          // Display text
+  action: () => Promise<any>;  // Click handler
+  iconName?: string;     // Optional icon (for dropdown items)
+  shortcut?: string;     // Keyboard shortcut display
+  submenu?: IAppBarMenuItem[];  // Nested menu items
+  disabled?: boolean;    // Disabled state
+  checked?: boolean;     // For checkbox menu items
+  radioGroup?: string;   // For radio button menu items
+}
+
+// Divider item
+interface IAppBarMenuDivider {
+  divider: true;
+}
+
+// Combined type
+type IAppBarMenuItem = IAppBarMenuItemRegular | IAppBarMenuDivider;
+```
+
+Best Practices:
+1. **Menu Structure**
+   - Keep top-level menus text-only (no icons)
+   - Use icons in dropdown items for visual clarity
+   - Group related actions with dividers
+   - Provide keyboard shortcuts for common actions
+   
+2. **Navigation**
+   - Use breadcrumbs for deep navigation hierarchies
+   - Keep breadcrumb labels concise
+   - Provide meaningful navigation events
+   
+3. **User Experience**
+   - Show user status when relevant
+   - Provide clear visual feedback
+   - Ensure smooth transitions
+   - Handle edge cases (long menus, small screens)
+   
+4. **Accessibility**
+   - Always provide text labels
+   - Ensure keyboard navigation works
+   - Test with screen readers
+   - Maintain focus management
+
 #### `DeesMobileNavigation`
 Responsive navigation component for mobile devices.