update
This commit is contained in:
Juergen Kunz
@ -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"
|
||||
},
|
||||
|
||||
@ -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`
|
||||
<dees-demowrapper>
|
||||
@ -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`
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-section">
|
||||
<h3>Basic Dropdowns</h3>
|
||||
<p>Standard dropdown with search functionality and various options</p>
|
||||
|
||||
<dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Select Country'}
|
||||
.options=${[
|
||||
@ -94,12 +69,9 @@ export const demoFunc = () => html`
|
||||
{ option: 'Guest', key: 'guest' }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Without Search</h3>
|
||||
<p>Dropdown with search functionality disabled for simpler selection</p>
|
||||
|
||||
<dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Priority Level'}
|
||||
.enableSearch=${false}
|
||||
@ -110,12 +82,9 @@ export const demoFunc = () => html`
|
||||
]}
|
||||
.selectedOption=${{ option: 'Medium', key: 'medium' }}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Horizontal Layout</h3>
|
||||
<p>Multiple dropdowns in a horizontal layout for compact forms</p>
|
||||
|
||||
<dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
|
||||
<div class="horizontal-group">
|
||||
<dees-input-dropdown
|
||||
.label=${'Department'}
|
||||
@ -150,12 +119,9 @@ export const demoFunc = () => html`
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>States</h3>
|
||||
<p>Different states and configurations</p>
|
||||
|
||||
<dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Required Field'}
|
||||
.required=${true}
|
||||
@ -174,16 +140,13 @@ export const demoFunc = () => html`
|
||||
]}
|
||||
.selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<div class="spacer">
|
||||
(Spacer to test dropdown positioning)
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Bottom Positioning</h3>
|
||||
<p>Dropdown that opens upward when near bottom of viewport</p>
|
||||
|
||||
<dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Opens Upward'}
|
||||
.options=${[
|
||||
@ -194,7 +157,65 @@ export const demoFunc = () => html`
|
||||
{ option: 'Fifth Option', key: 'fifth' }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Select Product'}
|
||||
.options=${[
|
||||
{ option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
|
||||
{ option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
|
||||
{ option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
|
||||
]}
|
||||
@change=${(e: CustomEvent) => {
|
||||
const output = document.querySelector('#selection-output');
|
||||
if (output && e.detail.value) {
|
||||
output.innerHTML = `
|
||||
<strong>Selected:</strong> ${e.detail.value.option}<br>
|
||||
<strong>Key:</strong> ${e.detail.value.key}<br>
|
||||
<strong>Price:</strong> $${e.detail.value.payload?.price || 'N/A'}<br>
|
||||
<strong>Features:</strong> ${e.detail.value.payload?.features?.join(', ') || 'N/A'}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;">
|
||||
<em>Select a product to see details...</em>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
|
||||
<dees-form>
|
||||
<dees-input-dropdown
|
||||
.label=${'Project Type'}
|
||||
.key=${'projectType'}
|
||||
.required=${true}
|
||||
.options=${[
|
||||
{ option: 'Web Application', key: 'web' },
|
||||
{ option: 'Mobile Application', key: 'mobile' },
|
||||
{ option: 'Desktop Application', key: 'desktop' },
|
||||
{ option: 'API Service', key: 'api' }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-dropdown
|
||||
.label=${'Development Framework'}
|
||||
.key=${'framework'}
|
||||
.required=${true}
|
||||
.options=${[
|
||||
{ option: 'React', key: 'react', payload: { type: 'web' } },
|
||||
{ option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
|
||||
{ option: 'Angular', key: 'angular', payload: { type: 'web' } },
|
||||
{ option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
|
||||
{ option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
|
||||
{ option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-form-submit .text=${'Create Project'}></dees-form-submit>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`
|
||||
@ -294,6 +294,12 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
|
||||
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 () => {
|
||||
|
||||
@ -87,9 +87,9 @@ export class DeesWindowLayer extends DeesElement {
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
</div>
|
||||
<div @click=${this.dispatchClicked} class="slotContent">
|
||||
<div class="slotContent">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -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<void>) | 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`
|
||||
<div
|
||||
class="formatting-menu"
|
||||
@ -153,6 +158,11 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
console.log('FormattingMenu.show called:', { position, visible: this.visible });
|
||||
this.position = position;
|
||||
this.callback = callback;
|
||||
|
||||
// Get z-index from registry
|
||||
this.menuZIndex = zIndexRegistry.getNextZIndex();
|
||||
zIndexRegistry.register(this, this.menuZIndex);
|
||||
|
||||
this.visible = true;
|
||||
console.log('FormattingMenu.show - visible set to:', this.visible);
|
||||
}
|
||||
@ -160,6 +170,9 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
public hide(): void {
|
||||
this.visible = false;
|
||||
this.callback = null;
|
||||
|
||||
// Unregister from z-index registry
|
||||
zIndexRegistry.unregister(this);
|
||||
}
|
||||
|
||||
public updatePosition(position: { x: number; y: number }): void {
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
css,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import { zIndexLayers } from '../00zindex.js';
|
||||
import { zIndexRegistry } from '../00zindex.js';
|
||||
|
||||
import { type ISlashMenuItem } from './wysiwyg.types.js';
|
||||
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
|
||||
@ -43,6 +43,9 @@ export class DeesSlashMenu extends DeesElement {
|
||||
@state()
|
||||
private selectedIndex: number = 0;
|
||||
|
||||
@state()
|
||||
private menuZIndex: number = 1000;
|
||||
|
||||
private callback: ((type: string) => 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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user