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

2
package.json
View File

@@ -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"
},

129
ts_web/elements/dees-input-dropdown.demo.ts
View File

@@ -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>
`

6
ts_web/elements/dees-input-dropdown.ts
View File

@@ -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 () => {

4
ts_web/elements/dees-windowlayer.ts
View File

@@ -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>
`;

17
ts_web/elements/wysiwyg/dees-formatting-menu.ts
View File

@@ -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 {

17
ts_web/elements/wysiwyg/dees-slash-menu.ts
View File

@@ -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 {

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>