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

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-26 20:20:34 +00:00
parent 9df4a09414
commit 10c43ecd59
7 changed files with 152 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
ts_web/pages/zindex-showcase.ts
View File

@ -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`
<span class="layer-value">z-index: 2999-3000</span>
</div>
<div class="layer context">
<span class="layer-name">Context Menus & WYSIWYG</span>
<span class="layer-value">z-index: 4000-4500</span>
<span class="layer-name">Context Menus</span>
<span class="layer-value">z-index: 4000</span>
</div>
<div class="layer toast">
<span class="layer-name">Toast Notifications</span>
@ -650,6 +651,40 @@ export const showcasePage = () => html`
}}>Show Multiple Toasts</dees-button>
</div>
<div class="demo-card">
<h4>Modal with WYSIWYG Editor</h4>
<dees-button @click=${async () => {
await DeesModal.createAndShow({
heading: 'WYSIWYG Editor Test',
width: 'large',
content: html`
<p>Test the WYSIWYG editor slash commands and formatting menus in a modal:</p>
<dees-form>
<dees-input-wysiwyg
.label=${'Document Content'}
.placeholder=${'Type "/" to see slash commands or select text to format...'}
.outputFormat=${'html'}
.description=${'The slash menu and formatting menu should appear above this modal'}
></dees-input-wysiwyg>
</dees-form>
<p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
<strong>Tips:</strong><br>
• Type "/" to open the slash command menu<br>
• Select text to see the formatting toolbar<br>
• Both menus should appear above this modal
</p>
`,
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</dees-button>
</div>
<div class="demo-card">
<h4>Modal with Tags Input</h4>
<dees-button @click=${async () => {
@ -739,6 +774,7 @@ export const showcasePage = () => html`
<li>Unregister on cleanup: <code>zIndexRegistry.unregister(element)</code></li>
<li>Elements created later automatically appear on top</li>
<li>Test overlay interactions, especially dropdowns in modals</li>
<li>WYSIWYG menus (slash commands, formatting) now use dynamic z-index</li>
</ul>
<h4>Import Example:</h4>