diff --git a/package.json b/package.json index 7a6be96..8a8cc99 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "type": "module", "scripts": { "test": "tstest test/ --web --verbose --timeout 30", - "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production", + "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild", "watch": "tswatch element", "buildDocs": "tsdoc" }, diff --git a/ts_web/elements/dees-input-dropdown.demo.ts b/ts_web/elements/dees-input-dropdown.demo.ts index 0f0db89..d61e36c 100644 --- a/ts_web/elements/dees-input-dropdown.demo.ts +++ b/ts_web/elements/dees-input-dropdown.demo.ts @@ -1,5 +1,8 @@ import { html, css } from '@design.estate/dees-element'; import '@design.estate/dees-wcctools/demotools'; +import './dees-panel.js'; +import './dees-form.js'; +import './dees-form-submit.js'; export const demoFunc = () => html` @@ -14,37 +17,12 @@ export const demoFunc = () => html` margin: 0 auto; } - .demo-section { - background: #f8f9fa; - border-radius: 8px; - padding: 24px; - position: relative; + dees-panel { + margin-bottom: 24px; } - @media (prefers-color-scheme: dark) { - .demo-section { - background: #1a1a1a; - } - } - - .demo-section h3 { - margin-top: 0; - margin-bottom: 16px; - color: #0069f2; - font-size: 18px; - } - - .demo-section p { - margin-top: 0; - margin-bottom: 16px; - color: #666; - font-size: 14px; - } - - @media (prefers-color-scheme: dark) { - .demo-section p { - color: #999; - } + dees-panel:last-child { + margin-bottom: 0; } .horizontal-group { @@ -66,10 +44,7 @@ export const demoFunc = () => html`
-
-

Basic Dropdowns

-

Standard dropdown with search functionality and various options

- + html` { option: 'Guest', key: 'guest' } ]} > -
+ -
-

Without Search

-

Dropdown with search functionality disabled for simpler selection

- + html` ]} .selectedOption=${{ option: 'Medium', key: 'medium' }} > -
+ -
-

Horizontal Layout

-

Multiple dropdowns in a horizontal layout for compact forms

- +
html` ]} >
-
+ -
-

States

-

Different states and configurations

- + html` ]} .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }} > -
+
(Spacer to test dropdown positioning)
-
-

Bottom Positioning

-

Dropdown that opens upward when near bottom of viewport

- + html` { option: 'Fifth Option', key: 'fifth' } ]} > -
+ + + + { + const output = document.querySelector('#selection-output'); + if (output && e.detail.value) { + output.innerHTML = ` + Selected: ${e.detail.value.option}
+ Key: ${e.detail.value.key}
+ Price: $${e.detail.value.payload?.price || 'N/A'}
+ Features: ${e.detail.value.payload?.features?.join(', ') || 'N/A'} + `; + } + }} + > + +
+ Select a product to see details... +
+ + + + + + + + + + +
` \ No newline at end of file diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts index 4b326b3..86744f3 100644 --- a/ts_web/elements/dees-input-dropdown.ts +++ b/ts_web/elements/dees-input-dropdown.ts @@ -294,6 +294,12 @@ export class DeesInputDropdown extends DeesInputBase { console.log(elevatedDropdown.selectedOption); console.log(elevatedDropdown.highlightedIndex); this.windowOverlay.appendChild(elevatedDropdown); + + // Prevent clicks on the dropdown from closing it + elevatedDropdown.addEventListener('click', (e: Event) => { + e.stopPropagation(); + }); + await domtoolsInstance.convenience.smartdelay.delayFor(0); elevatedDropdown.toggleSelectionBox(); const destroyOverlay = async () => { diff --git a/ts_web/elements/dees-windowlayer.ts b/ts_web/elements/dees-windowlayer.ts index 18f290a..56930e5 100644 --- a/ts_web/elements/dees-windowlayer.ts +++ b/ts_web/elements/dees-windowlayer.ts @@ -87,9 +87,9 @@ export class DeesWindowLayer extends DeesElement { pointer-events: all; } -
+
-
+
`; diff --git a/ts_web/elements/wysiwyg/dees-formatting-menu.ts b/ts_web/elements/wysiwyg/dees-formatting-menu.ts index fda6170..dea2918 100644 --- a/ts_web/elements/wysiwyg/dees-formatting-menu.ts +++ b/ts_web/elements/wysiwyg/dees-formatting-menu.ts @@ -7,7 +7,7 @@ import { css, state, } from '@design.estate/dees-element'; -import { zIndexLayers } from '../00zindex.js'; +import { zIndexRegistry } from '../00zindex.js'; import { WysiwygFormatting } from './wysiwyg.formatting.js'; @@ -35,6 +35,9 @@ export class DeesFormattingMenu extends DeesElement { @state() private position: { x: number; y: number } = { x: 0, y: 0 }; + @state() + private menuZIndex: number = 1000; + private callback: ((command: string) => void | Promise) | null = null; public static styles = [ @@ -42,7 +45,6 @@ export class DeesFormattingMenu extends DeesElement { css` :host { position: fixed; - z-index: ${zIndexLayers.wysiwygMenus}; pointer-events: none; } @@ -119,6 +121,9 @@ export class DeesFormattingMenu extends DeesElement { render(): TemplateResult { if (!this.visible) return html``; + // Apply z-index to host element + this.style.zIndex = this.menuZIndex.toString(); + return html`
void) | null = null; public static styles = [ @@ -50,7 +53,6 @@ export class DeesSlashMenu extends DeesElement { css` :host { position: fixed; - z-index: ${zIndexLayers.wysiwygMenus}; pointer-events: none; } @@ -119,6 +121,9 @@ export class DeesSlashMenu extends DeesElement { render(): TemplateResult { if (!this.visible) return html``; + // Apply z-index to host element + this.style.zIndex = this.menuZIndex.toString(); + const menuItems = this.getFilteredMenuItems(); return html` @@ -162,6 +167,11 @@ export class DeesSlashMenu extends DeesElement { this.callback = callback; this.filter = ''; this.selectedIndex = 0; + + // Get z-index from registry + this.menuZIndex = zIndexRegistry.getNextZIndex(); + zIndexRegistry.register(this, this.menuZIndex); + this.visible = true; } @@ -170,6 +180,9 @@ export class DeesSlashMenu extends DeesElement { this.callback = null; this.filter = ''; this.selectedIndex = 0; + + // Unregister from z-index registry + zIndexRegistry.unregister(this); } public updateFilter(filter: string): void { diff --git a/ts_web/pages/zindex-showcase.ts b/ts_web/pages/zindex-showcase.ts index 62e8c71..b8b63fa 100644 --- a/ts_web/pages/zindex-showcase.ts +++ b/ts_web/pages/zindex-showcase.ts @@ -9,6 +9,7 @@ import '../elements/dees-panel.js'; import '../elements/dees-input-text.js'; import '../elements/dees-input-radiogroup.js'; import '../elements/dees-input-tags.js'; +import '../elements/dees-input-wysiwyg.js'; import '../elements/dees-appui-profiledropdown.js'; export const showcasePage = () => html` @@ -412,8 +413,8 @@ export const showcasePage = () => html` z-index: 2999-3000
- Context Menus & WYSIWYG - z-index: 4000-4500 + Context Menus + z-index: 4000
Toast Notifications @@ -650,6 +651,40 @@ export const showcasePage = () => html` }}>Show Multiple Toasts
+
+

Modal with WYSIWYG Editor

+ { + await DeesModal.createAndShow({ + heading: 'WYSIWYG Editor Test', + width: 'large', + content: html` +

Test the WYSIWYG editor slash commands and formatting menus in a modal:

+ + + +

+ Tips:
+ • Type "/" to open the slash command menu
+ • Select text to see the formatting toolbar
+ • Both menus should appear above this modal +

+ `, + menuOptions: [ + { name: 'Cancel', action: async (modal) => modal.destroy() }, + { name: 'Save', action: async (modal) => { + DeesToast.createAndShow({ message: 'Document saved!', type: 'success' }); + modal.destroy(); + }} + ] + }); + }}>Test WYSIWYG in Modal +
+

Modal with Tags Input

{ @@ -739,6 +774,7 @@ export const showcasePage = () => html`
  • Unregister on cleanup: zIndexRegistry.unregister(element)
  • Elements created later automatically appear on top
  • Test overlay interactions, especially dropdowns in modals
    • +
  • WYSIWYG menus (slash commands, formatting) now use dynamic z-index

    • Import Example: