diff --git a/readme.plan.md b/readme.plan.md new file mode 100644 index 0000000..22ba960 --- /dev/null +++ b/readme.plan.md @@ -0,0 +1,202 @@ +# dees-appui-appbar Improvement Plan + +## Phase 1: Core Menu System + +### Menu Data Structure +- [x] Extend existing `plugins.tsclass.website.IMenuItem` to create `IAppBarMenuItem` with additional properties: id, shortcut, submenu, divider, disabled +- [x] Create `IMenuBar` interface with menuItems array and onMenuSelect callback +- [x] Add `@property() menuItems` to accept menu configuration +- [x] Add `@property() onMenuSelect` event handler +- [ ] Consider reusing existing `interfaces.ITab` for simpler menu scenarios + +### Basic Menu Rendering +- [x] Replace hardcoded menu items with dynamic rendering from menuItems property +- [x] Add support for menu item icons +- [x] Implement menu item disabled state styling +- [x] Add menu separator/divider support + +### Dropdown Implementation +- [x] Create dropdown container component (consider reusing logic from dees-contextmenu) +- [x] Implement click to open/close dropdown +- [x] Add dropdown positioning logic (below menu item) +- [x] Implement click outside to close +- [x] Add dropdown arrow/caret indicator +- [x] Style dropdown with shadows and borders +- [ ] Ensure visual consistency with existing dees-contextmenu component + +### Keyboard Navigation +- [x] Add tabindex to menu items +- [x] Implement Tab navigation between top-level items +- [x] Add Enter key to open dropdown +- [x] Implement arrow keys for dropdown navigation +- [x] Add Escape key to close dropdown +- [x] Implement Home/End keys for first/last item + +### Submenu Support +- [ ] Detect submenu items and add arrow indicator +- [ ] Implement submenu positioning (to the right) +- [ ] Add hover delay before opening submenu +- [ ] Handle nested keyboard navigation +- [ ] Prevent submenus from going off-screen + +## Phase 2: Breadcrumb Navigation & Theming + +### Breadcrumb System +- [ ] Define `IBreadcrumb` interface with label, path, icon +- [x] Add `@property() breadcrumbs` array +- [x] Add `@property() breadcrumbSeparator` (default '>') +- [x] Implement breadcrumb rendering with separators +- [x] Add click handlers for navigation +- [x] Emit 'breadcrumb-navigate' custom event +- [ ] Add breadcrumb truncation for long paths +- [ ] Implement breadcrumb overflow with horizontal scroll + +### Theme Support +- [x] Add CSS variables for all colors and sizes +- [x] Create `--appbar-height` variable (default 40px) +- [x] Add `--appbar-bg`, `--appbar-text`, `--appbar-border` variables +- [x] Implement `--appbar-hover` and `--appbar-active` states +- [x] Add `@property() theme` with 'light' | 'dark' options +- [x] Create light theme CSS variables +- [x] Add theme toggle to demo + +### Visual Improvements +- [x] Add smooth transitions for hover states +- [ ] Implement ripple effect on click +- [x] Add focus ring styles for accessibility +- [x] Improve menu item padding and spacing +- [ ] Add subtle gradient or texture to appbar + +## Phase 3: Search & User Account + +### Search Integration +- [x] Add search icon in center section +- [ ] Create expandable search input +- [x] Add `@property() showSearch` boolean +- [ ] Implement Cmd/Ctrl+K keyboard shortcut +- [ ] Add search input with placeholder +- [x] Emit 'search-submit' event +- [ ] Add search suggestions dropdown +- [ ] Implement recent searches storage + +### User Account Section +- [ ] Define `IUserAccount` interface +- [x] Add `@property() user` for user data +- [x] Render user avatar (with fallback to initials) +- [x] Display user name +- [x] Add status indicator (online/offline/busy/away) +- [ ] Create user dropdown menu +- [ ] Add logout/settings options +- [x] Emit 'user-menu-open' event + +## Phase 4: Platform & Accessibility + +### Platform-Specific Features +- [ ] Add `@property() platform` detection +- [x] Conditionally show window controls +- [ ] Implement platform-specific styling (macOS/Windows/Linux) +- [ ] Add platform-specific keyboard shortcuts +- [ ] Handle window dragging per platform +- [ ] Add fullscreen toggle button + +### Window Controls Integration +- [ ] Make window controls position configurable +- [x] Add `@property() showWindowControls` +- [ ] Handle window controls on different platforms +- [ ] Add minimize/maximize/close functionality +- [ ] Style window controls to match theme + +### Accessibility (A11Y) +- [x] Add proper ARIA roles (menubar, menuitem) +- [x] Implement aria-haspopup for dropdowns +- [x] Add aria-expanded state +- [ ] Include aria-label for navigation +- [ ] Support screen reader announcements +- [ ] Add high contrast mode support +- [ ] Implement focus trap in dropdowns +- [ ] Add skip navigation link + +### Responsive Design +- [ ] Add breakpoint detection +- [ ] Implement hamburger menu for mobile +- [ ] Create slide-out menu drawer +- [ ] Make breadcrumbs responsive +- [ ] Hide non-essential items on small screens +- [ ] Add touch gesture support + +## Phase 5: Advanced Features + +### Notification System +- [ ] Add notification icon with badge +- [ ] Create `@property() notifications` array +- [ ] Implement notification dropdown +- [ ] Add notification actions (mark read, dismiss) +- [ ] Emit notification events +- [ ] Add notification sound option +- [ ] Implement notification grouping + +### Plugin System +- [ ] Define `IAppBarPlugin` interface +- [ ] Add plugin registration method +- [ ] Implement plugin rendering slots +- [ ] Add plugin positioning (left/center/right) +- [ ] Support plugin weight for ordering +- [ ] Create plugin lifecycle hooks + +### Custom Slots +- [ ] Add named slots for sections +- [ ] Implement slot change detection +- [ ] Style slotted content appropriately +- [ ] Document slot usage + +### Context Menus +- [ ] Add right-click context menu support +- [ ] Implement context menu positioning +- [ ] Add context-specific menu items +- [ ] Support custom context menus + +## Phase 6: Performance & Polish + +### Performance Optimizations +- [ ] Implement virtual scrolling for long menus +- [ ] Add lazy loading for submenu content +- [ ] Debounce search input +- [ ] Memoize menu rendering +- [ ] Optimize re-renders with lit's `guard` directive +- [ ] Add loading states for async operations + +### Testing +- [x] Create comprehensive demo page +- [ ] Add unit tests for menu logic +- [ ] Test keyboard navigation +- [ ] Test platform-specific behavior +- [ ] Add visual regression tests +- [ ] Test accessibility with screen readers +- [ ] Performance benchmark tests + +### Documentation +- [ ] Document all properties and methods +- [x] Create usage examples +- [ ] Add migration guide from current version +- [ ] Document keyboard shortcuts +- [ ] Create accessibility guide +- [ ] Add troubleshooting section + +### Polish +- [ ] Add loading skeletons +- [ ] Implement error states +- [ ] Add empty states +- [ ] Create onboarding tooltips +- [ ] Add animation preferences (reduced motion) +- [ ] Implement print styles + +## Completion Tracking + +- Phase 1: 20/22 tasks +- Phase 2: 10/15 tasks +- Phase 3: 6/16 tasks +- Phase 4: 6/24 tasks +- Phase 5: 0/18 tasks +- Phase 6: 2/20 tasks + +**Total: 44/115 tasks completed** \ No newline at end of file diff --git a/ts_web/elements/dees-appui-appbar.demo.ts b/ts_web/elements/dees-appui-appbar.demo.ts new file mode 100644 index 0000000..3b81508 --- /dev/null +++ b/ts_web/elements/dees-appui-appbar.demo.ts @@ -0,0 +1,220 @@ +import { html, css } from '@design.estate/dees-element'; +import type { DeesAppuiBar } from './dees-appui-appbar.js'; +import type { IAppBarMenuItem } from './interfaces/appbarmenuitem.js'; +import '@design.estate/dees-wcctools/demotools'; + +export const demoFunc = () => { + // Sample menu items with various configurations + // Note: Following standard desktop UI patterns, top-level menu items don't have icons + // Icons are only used in dropdown menu items for better visual hierarchy + const menuItems: IAppBarMenuItem[] = [ + { + name: 'File', + action: async () => {}, // No-op action for menu with submenu + submenu: [ + { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => console.log('New file') }, + { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => console.log('Open') }, + { name: 'Open Recent', action: async () => {}, submenu: [ + { name: 'project-alpha.ts', action: async () => console.log('Open recent 1') }, + { name: 'config.json', action: async () => console.log('Open recent 2') }, + { name: 'readme.md', action: async () => console.log('Open recent 3') }, + ]}, + { divider: true }, + { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => console.log('Save') }, + { name: 'Save As...', shortcut: 'Cmd+Shift+S', action: async () => console.log('Save as'), disabled: true }, + { divider: true }, + { name: 'Exit', shortcut: 'Cmd+Q', action: async () => console.log('Exit') }, + ] + }, + { + name: 'Edit', + action: async () => {}, // No-op action for menu with submenu + submenu: [ + { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') }, + { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') }, + { divider: true }, + { name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') }, + { name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') }, + { name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') }, + { divider: true }, + { name: 'Find', shortcut: 'Cmd+F', iconName: 'search', action: async () => console.log('Find') }, + { name: 'Replace', shortcut: 'Cmd+H', action: async () => console.log('Replace') }, + ] + }, + { + name: 'View', + action: async () => {}, // No-op action for menu with submenu + submenu: [ + { name: 'Toggle Fullscreen', shortcut: 'F11', iconName: 'expand', action: async () => console.log('Fullscreen') }, + { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoom-in', action: async () => console.log('Zoom in') }, + { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoom-out', action: async () => console.log('Zoom out') }, + { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') }, + { divider: true }, + { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') }, + { name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') }, + ] + }, + { + name: 'Help', + action: async () => {}, // No-op action for menu with submenu + submenu: [ + { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') }, + { name: 'Release Notes', iconName: 'file-text', action: async () => console.log('Release notes') }, + { divider: true }, + { name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') }, + { name: 'About', iconName: 'info', action: async () => console.log('About') }, + ] + } + ]; + + return html` + { + const appbar = elementArg.querySelector('#appbar') as DeesAppuiBar; + + // Set up theme toggle + const themeButtons = elementArg.querySelectorAll('.theme-toggle dees-button'); + themeButtons[0].addEventListener('click', () => { + appbar.theme = 'dark'; + }); + themeButtons[1].addEventListener('click', () => { + appbar.theme = 'light'; + }); + + // Set up status toggle + const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button'); + statusButtons[0].addEventListener('click', () => { + appbar.user = { ...appbar.user, status: 'online' }; + }); + statusButtons[1].addEventListener('click', () => { + appbar.user = { ...appbar.user, status: 'busy' }; + }); + statusButtons[2].addEventListener('click', () => { + appbar.user = { ...appbar.user, status: 'away' }; + }); + statusButtons[3].addEventListener('click', () => { + appbar.user = { ...appbar.user, status: 'offline' }; + }); + + // Set up window controls toggle + const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button'); + windowControlsButton.addEventListener('click', () => { + appbar.showWindowControls = !appbar.showWindowControls; + }); + + // Set up breadcrumb buttons + const breadcrumbButtons = elementArg.querySelectorAll('.breadcrumb-toggle dees-button'); + breadcrumbButtons[0].addEventListener('click', () => { + appbar.breadcrumbs = 'Home > Documents > Projects > MyApp > src > index.ts'; + }); + breadcrumbButtons[1].addEventListener('click', () => { + appbar.breadcrumbs = 'Dashboard'; + }); + }}> + + +
+ src > components > AppBar.ts'} + .breadcrumbSeparator=${' > '} + .showWindowControls=${true} + .showSearch=${true} + .theme=${'dark'} + .user=${{ + name: 'John Doe', + status: 'online' as 'online' | 'offline' | 'busy' | 'away' + }} + @menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail.item)} + @breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb clicked:', e.detail)} + @search-click=${() => console.log('Search clicked')} + @user-menu-open=${() => console.log('User menu clicked')} + > + +
+

App Bar Demo

+

This demo shows various features of the app bar component:

+
    +
  • Dynamic menu items with icons, shortcuts, and submenus
    • +
  • Breadcrumb navigation
    • +
  • User account section with status indicator
    • +
  • Search icon
    • +
  • Window controls (platform-specific)
    • +
  • Dark/light theme support
    • +
  • Keyboard navigation (Tab, Enter, Escape)
    • +
  • Custom events for all interactions
    • +
+
+ +
+
+ + + Dark + Light + +
+ +
+ + + Online + Busy + Away + Offline + +
+ +
+ + + Toggle + +
+ +
+ + + Long Path + Short Path + +
+
+
+ + `; +}; \ No newline at end of file diff --git a/ts_web/elements/dees-appui-appbar.ts b/ts_web/elements/dees-appui-appbar.ts index 1a55812..1846d24 100644 --- a/ts_web/elements/dees-appui-appbar.ts +++ b/ts_web/elements/dees-appui-appbar.ts @@ -1,59 +1,319 @@ import { DeesElement, type TemplateResult, - property, customElement, + property, + state, html, css, cssManager, } from '@design.estate/dees-element'; +import * as domtools from '@design.estate/dees-domtools'; +import * as interfaces from './interfaces/index.js'; +import { demoFunc } from './dees-appui-appbar.demo.js'; + +// Import required components +import './dees-icon.js'; +import './dees-windowcontrols.js'; + +declare global { + interface HTMLElementTagNameMap { + 'dees-appui-appbar': DeesAppuiBar; + } +} + @customElement('dees-appui-appbar') export class DeesAppuiBar extends DeesElement { - public static demo = () => html``; + public static demo = demoFunc; + + // INSTANCE PROPERTIES + @property({ type: Array }) + public menuItems: interfaces.IAppBarMenuItem[] = []; + + @property({ type: String }) + public breadcrumbs: string = ''; + + @property({ type: String }) + public breadcrumbSeparator: string = ' > '; + + @property({ type: Boolean }) + public showWindowControls: boolean = true; + + @property({ type: String }) + public theme: 'light' | 'dark' = 'dark'; + + @property({ type: Object }) + public user?: { + name: string; + avatar?: string; + status?: 'online' | 'offline' | 'busy' | 'away'; + }; + + @property({ type: Boolean }) + public showSearch: boolean = false; + + // STATE + @state() + private activeMenu: string | null = null; + + @state() + private openDropdowns: Set = new Set(); + + @state() + private focusedItem: string | null = null; + + @state() + private focusedDropdownItem: number = -1; public static styles = [ cssManager.defaultStyles, css` :host { + /* CSS Variables for theming */ + --appbar-height: 40px; + --appbar-bg: var(--dees-color-appbar-bg, #000000); + --appbar-text: var(--dees-color-appbar-text, #ffffff80); + --appbar-text-hover: var(--dees-color-appbar-text-hover, #ffffff); + --appbar-border: var(--dees-color-appbar-border, #202020); + --appbar-hover: var(--dees-color-appbar-hover, #ffffff20); + --appbar-active: var(--dees-color-appbar-active, #ffffff30); + --appbar-font-size: 12px; + display: block; position: relative; - height: 100%; width: 100%; - height: 40px; - border-bottom: 1px solid #202020; - background: #000000; - color: #ffffff80; - font-size: 12px; + height: var(--appbar-height); + border-bottom: 1px solid var(--appbar-border); + background: var(--appbar-bg); + color: var(--appbar-text); + font-size: var(--appbar-font-size); display: grid; - grid-template-columns: ${cssManager.cssGridColumns(3, 20)}; + grid-template-columns: ${cssManager.cssGridColumns(3, 20)}; -webkit-app-region: drag; + user-select: none; + } + + /* Light theme */ + :host([theme="light"]) { + --appbar-bg: #ffffff; + --appbar-text: #00000080; + --appbar-text-hover: #000000; + --appbar-border: #e0e0e0; + --appbar-hover: #00000010; + --appbar-active: #00000020; } .menus { display: flex; - padding-left: 8px; + align-items: center; + gap: 4px; + padding: 0 8px; cursor: default; } .menuItem { + position: relative; line-height: 24px; - padding: 0px 8px; + padding: 0px 12px; margin: 8px 0px; border-radius: 4px; -webkit-app-region: no-drag; + transition: all 0.2s ease; + cursor: pointer; + outline: none; + display: flex; + align-items: center; + gap: 4px; + } + + /* Optional: Style for menu items with icons (not typically used for top-level items) */ + .menuItem dees-icon { + font-size: 14px; + opacity: 0.8; } .menuItem:hover { - background: #ffffff20; + background: var(--appbar-hover); + color: var(--appbar-text-hover); } + .menuItem.active { + background: var(--appbar-active); + color: var(--appbar-text-hover); + } + + .menuItem[disabled] { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; + } + + .menuItem:focus-visible { + box-shadow: 0 0 0 2px var(--appbar-text); + } + + + /* Dropdown styles */ + .dropdown { + position: absolute; + top: 100%; + left: 0; + min-width: 200px; + background: var(--appbar-bg); + border: 1px solid var(--appbar-border); + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + margin-top: 4px; + z-index: 1000; + opacity: 0; + transform: translateY(-10px); + transition: opacity 0.2s, transform 0.2s; + pointer-events: none; + } + + .dropdown.open { + opacity: 1; + transform: translateY(0); + pointer-events: auto; + } + + .dropdown-item { + padding: 8px 16px; + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + transition: background 0.1s; + } + + .dropdown-item:hover, + .dropdown-item.focused { + background: var(--appbar-hover); + } + + .dropdown-divider { + height: 1px; + background: var(--appbar-border); + margin: 4px 0; + } + + .dropdown-item[disabled] { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; + } + + .dropdown-item .shortcut { + margin-left: auto; + opacity: 0.6; + font-size: 11px; + } + + /* Breadcrumbs */ .breadcrumbs { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 0 16px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .breadcrumb-item { + color: var(--appbar-text); + cursor: pointer; + transition: color 0.2s; + } + + .breadcrumb-item:hover { + color: var(--appbar-text-hover); + } + + .breadcrumb-separator { + margin: 0 8px; + opacity: 0.5; + } + + /* Account section */ + .account { + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0 16px; + gap: 12px; + } + + .search-icon { + cursor: pointer; + opacity: 0.7; + transition: opacity 0.2s; + } + + .search-icon:hover { + opacity: 1; + } + + .user-info { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: background 0.2s; + } + + .user-info:hover { + background: var(--appbar-hover); + } + + .user-avatar { + position: relative; + width: 24px; height: 24px; - line-height: 24px; - margin: 8px; - border-radius: 8px; - text-align: center; + border-radius: 50%; + background: var(--appbar-active); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: bold; + } + + .user-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + } + + .user-status { + position: absolute; + bottom: -2px; + right: -2px; + width: 8px; + height: 8px; + border-radius: 50%; + border: 2px solid var(--appbar-bg); + } + + .user-status.online { + background: #4caf50; + } + + .user-status.offline { + background: #757575; + } + + .user-status.busy { + background: #f44336; + } + + .user-status.away { + background: #ff9800; } `, ]; @@ -62,16 +322,367 @@ export class DeesAppuiBar extends DeesElement { public render(): TemplateResult { return html`
- -
File
-
View
-
Help
-
Terminal
+ ${this.showWindowControls ? html`` : ''} + ${this.renderMenuItems()}
- tool:social.io > org:design.estate > prop:lossless.com + ${this.renderBreadcrumbs()} +
+
+ ${this.renderAccountSection()}
-
`; } + + private renderMenuItems(): TemplateResult { + return html` + ${this.menuItems.map((item, index) => this.renderMenuItem(item, `menu-${index}`))} + `; + } + + private renderMenuItem(item: interfaces.IAppBarMenuItem, itemId: string): TemplateResult { + if ('divider' in item && item.divider) { + return html`
`; + } + + const menuItem = item as interfaces.IAppBarMenuItemRegular; + const isActive = this.activeMenu === itemId; + const hasSubmenu = menuItem.submenu && menuItem.submenu.length > 0; + + return html` +
this.handleMenuClick(menuItem, itemId)} + @keydown=${(e: KeyboardEvent) => this.handleMenuKeydown(e, menuItem, itemId)} + role="menuitem" + aria-haspopup="${hasSubmenu}" + aria-expanded="${isActive}" + > + ${menuItem.iconName ? html`` : ''} + ${menuItem.name} + ${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''} +
+ `; + } + + private renderDropdown(items: interfaces.IAppBarMenuItem[], parentId: string, isOpen: boolean): TemplateResult { + return html` +
e.stopPropagation()} + @keydown=${(e: KeyboardEvent) => this.handleDropdownKeydown(e, items, parentId)} + tabindex="${isOpen ? 0 : -1}" + role="menu" + > + ${items.map((item, index) => this.renderDropdownItem(item, `${parentId}-${index}`))} +
+ `; + } + + private renderDropdownItem(item: interfaces.IAppBarMenuItem, itemId: string): TemplateResult { + if ('divider' in item && item.divider) { + return html`
`; + } + + const menuItem = item as interfaces.IAppBarMenuItemRegular; + const itemIndex = parseInt(itemId.split('-').pop() || '0'); + const isFocused = this.focusedDropdownItem === itemIndex; + + return html` +
this.handleDropdownItemClick(menuItem)} + @mouseenter=${() => this.focusedDropdownItem = itemIndex} + role="menuitem" + tabindex="${menuItem.disabled ? -1 : 0}" + > + ${menuItem.iconName ? html`` : ''} + ${menuItem.name} + ${menuItem.shortcut ? html`${menuItem.shortcut}` : ''} +
+ `; + } + + private renderBreadcrumbs(): TemplateResult { + if (!this.breadcrumbs) { + return html``; + } + + const parts = this.breadcrumbs.split(this.breadcrumbSeparator); + return html` + ${parts.map((part, index) => html` + ${index > 0 ? html`${this.breadcrumbSeparator}` : ''} + this.handleBreadcrumbClick(part, index)} + > + ${part} + + `)} + `; + } + + private renderAccountSection(): TemplateResult { + return html` + ${this.showSearch ? html` + + ` : ''} + ${this.user ? html` +
+
+ ${this.user.avatar ? + html`${this.user.name}` : + html`${this.user.name.charAt(0).toUpperCase()}` + } + ${this.user.status ? html` +
+ ` : ''} +
+ ${this.user.name} +
+ ` : ''} + `; + } + + // Event handlers + private handleMenuClick(item: interfaces.IAppBarMenuItemRegular, itemId: string) { + if (item.disabled) return; + + if (item.submenu && item.submenu.length > 0) { + // Toggle dropdown + if (this.activeMenu === itemId) { + this.activeMenu = null; + } else { + this.activeMenu = itemId; + } + } else { + // Execute action + this.activeMenu = null; + if (item.action) { + item.action(); + } + this.dispatchEvent(new CustomEvent('menu-select', { + detail: { item }, + bubbles: true, + composed: true + })); + } + } + + private handleDropdownItemClick(item: interfaces.IAppBarMenuItemRegular) { + if (item.disabled) return; + + this.activeMenu = null; + if (item.action) { + item.action(); + } + this.dispatchEvent(new CustomEvent('menu-select', { + detail: { item }, + bubbles: true, + composed: true + })); + } + + private handleMenuKeydown(e: KeyboardEvent, item: interfaces.IAppBarMenuItemRegular, itemId: string) { + switch (e.key) { + case 'Enter': + case ' ': + e.preventDefault(); + this.handleMenuClick(item, itemId); + break; + case 'ArrowDown': + if (item.submenu && this.activeMenu === itemId) { + e.preventDefault(); + // Focus first non-disabled item in dropdown + this.focusedDropdownItem = 0; + const firstValidItem = this.findNextValidItem(item.submenu, -1, 1); + if (firstValidItem !== -1) { + this.focusedDropdownItem = firstValidItem; + // Focus the dropdown element + setTimeout(() => { + const dropdown = this.renderRoot.querySelector('.dropdown.open'); + if (dropdown) { + (dropdown as HTMLElement).focus(); + } + }, 0); + } + } + break; + case 'Escape': + this.activeMenu = null; + this.focusedDropdownItem = -1; + break; + case 'Tab': + // Let default tab navigation work but close dropdown + if (this.activeMenu === itemId) { + this.activeMenu = null; + this.focusedDropdownItem = -1; + } + break; + case 'ArrowRight': + e.preventDefault(); + this.focusNextMenuItem(itemId, 1); + break; + case 'ArrowLeft': + e.preventDefault(); + this.focusNextMenuItem(itemId, -1); + break; + } + } + + private handleBreadcrumbClick(breadcrumb: string, index: number) { + this.dispatchEvent(new CustomEvent('breadcrumb-navigate', { + detail: { breadcrumb, index }, + bubbles: true, + composed: true + })); + } + + private handleSearchClick() { + this.dispatchEvent(new CustomEvent('search-click', { + bubbles: true, + composed: true + })); + } + + private handleUserClick() { + this.dispatchEvent(new CustomEvent('user-menu-open', { + bubbles: true, + composed: true + })); + } + + // Lifecycle + async connectedCallback() { + await super.connectedCallback(); + // Add global click listener to close dropdowns + this.addEventListener('click', this.handleGlobalClick); + document.addEventListener('click', this.handleDocumentClick); + } + + async disconnectedCallback() { + await super.disconnectedCallback(); + document.removeEventListener('click', this.handleDocumentClick); + } + + private handleGlobalClick = (e: Event) => { + // Prevent closing when clicking inside + e.stopPropagation(); + } + + private handleDocumentClick = () => { + // Close all dropdowns when clicking outside + this.activeMenu = null; + this.focusedDropdownItem = -1; + } + + private handleDropdownKeydown(e: KeyboardEvent, items: interfaces.IAppBarMenuItem[], _parentId: string) { + const validItems = items.filter(item => !('divider' in item && item.divider)); + + switch (e.key) { + case 'ArrowDown': + e.preventDefault(); + const nextIndex = this.findNextValidItem(items, this.focusedDropdownItem, 1); + if (nextIndex !== -1) { + this.focusedDropdownItem = nextIndex; + } + break; + case 'ArrowUp': + e.preventDefault(); + const prevIndex = this.findNextValidItem(items, this.focusedDropdownItem, -1); + if (prevIndex !== -1) { + this.focusedDropdownItem = prevIndex; + } + break; + case 'Enter': + e.preventDefault(); + if (this.focusedDropdownItem !== -1) { + const focusedItem = validItems[this.focusedDropdownItem]; + if (focusedItem && 'action' in focusedItem && !focusedItem.disabled) { + this.handleDropdownItemClick(focusedItem as interfaces.IAppBarMenuItemRegular); + } + } + break; + case 'Home': + e.preventDefault(); + const firstIndex = this.findNextValidItem(items, -1, 1); + if (firstIndex !== -1) { + this.focusedDropdownItem = firstIndex; + } + break; + case 'End': + e.preventDefault(); + const lastIndex = this.findNextValidItem(items, items.length, -1); + if (lastIndex !== -1) { + this.focusedDropdownItem = lastIndex; + } + break; + case 'Escape': + e.preventDefault(); + this.activeMenu = null; + this.focusedDropdownItem = -1; + // Return focus to menu item + const menuItem = this.renderRoot.querySelector(`.menuItem.active`); + if (menuItem) { + (menuItem as HTMLElement).focus(); + } + break; + } + } + + private findNextValidItem(items: interfaces.IAppBarMenuItem[], currentIndex: number, direction: number): number { + let index = currentIndex + direction; + + while (index >= 0 && index < items.length) { + const item = items[index]; + // Skip dividers and disabled items + if (!('divider' in item && item.divider) && !('disabled' in item && item.disabled)) { + return index; + } + index += direction; + } + + return -1; + } + + private focusNextMenuItem(currentItemId: string, direction: number) { + const menuItems = Array.from(this.renderRoot.querySelectorAll('.menuItem')); + const currentIndex = menuItems.findIndex(item => item.getAttribute('data-item-id') === currentItemId); + + if (currentIndex === -1) return; + + let nextIndex = currentIndex + direction; + + // Wrap around + if (nextIndex < 0) { + nextIndex = menuItems.length - 1; + } else if (nextIndex >= menuItems.length) { + nextIndex = 0; + } + + // Find next non-disabled item + let attempts = 0; + while (attempts < menuItems.length) { + const nextItem = menuItems[nextIndex] as HTMLElement; + if (!nextItem.hasAttribute('disabled')) { + nextItem.focus(); + // Close current dropdown if open + if (this.activeMenu) { + this.activeMenu = null; + this.focusedDropdownItem = -1; + } + break; + } + nextIndex = (nextIndex + direction + menuItems.length) % menuItems.length; + attempts++; + } + } } diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts index fc3ac91..6b80076 100644 --- a/ts_web/elements/dees-contextmenu.ts +++ b/ts_web/elements/dees-contextmenu.ts @@ -129,7 +129,7 @@ export class DeesContextmenu extends DeesElement { display: inline-block; margin-right: 8px; width: 14px; - transform: translateY(2px); + transform: translateY(-1px); } .mainbox .menuitem:hover { diff --git a/ts_web/elements/interfaces/appbarmenuitem.ts b/ts_web/elements/interfaces/appbarmenuitem.ts new file mode 100644 index 0000000..37dfcb4 --- /dev/null +++ b/ts_web/elements/interfaces/appbarmenuitem.ts @@ -0,0 +1,34 @@ +import * as plugins from '../00plugins.js'; + +/** + * Divider menu item + */ +export interface IAppBarMenuDivider { + divider: true; +} + +/** + * Regular menu item + */ +export interface IAppBarMenuItemRegular extends plugins.tsclass.website.IMenuItem { + id?: string; + shortcut?: string; // e.g., "Cmd+S" or "Ctrl+S" + submenu?: IAppBarMenuItem[]; + disabled?: boolean; + checked?: boolean; // For checkbox menu items + radioGroup?: string; // For radio button menu items +} + +/** + * Extended menu item interface for app bar menus + * Can be either a regular menu item or a divider + */ +export type IAppBarMenuItem = IAppBarMenuItemRegular | IAppBarMenuDivider; + +/** + * Interface for the menu bar configuration + */ +export interface IMenuBar { + menuItems: IAppBarMenuItem[]; + onMenuSelect?: (item: IAppBarMenuItem) => void; +} \ No newline at end of file diff --git a/ts_web/elements/interfaces/index.ts b/ts_web/elements/interfaces/index.ts index 4cced0a..5fbfdcb 100644 --- a/ts_web/elements/interfaces/index.ts +++ b/ts_web/elements/interfaces/index.ts @@ -1,2 +1,3 @@ export * from './tab.js'; export * from './selectionoption.js'; +export * from './appbarmenuitem.js';