814 lines
29 KiB
TypeScript
814 lines
29 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import { DeesModal } from '../elements/dees-modal.js';
|
|
import { DeesToast } from '../elements/dees-toast.js';
|
|
import { DeesContextmenu } from '../elements/dees-contextmenu.js';
|
|
import '../elements/dees-button.js';
|
|
import '../elements/dees-input-dropdown.js';
|
|
import '../elements/dees-form.js';
|
|
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 zIndexShowcase = () => html`
|
|
<style>
|
|
${css`
|
|
.page-wrapper {
|
|
display: block;
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
|
|
min-height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.showcase-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 48px 24px;
|
|
}
|
|
|
|
.showcase-header {
|
|
text-align: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.showcase-title {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
margin: 0 0 16px 0;
|
|
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
|
}
|
|
|
|
.showcase-subtitle {
|
|
font-size: 20px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
margin: 0 0 32px 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.showcase-section {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.showcase-section:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
/* Ensure all headings are theme-aware */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
line-height: 1.6;
|
|
}
|
|
|
|
strong {
|
|
color: ${cssManager.bdTheme('#333', '#e0e0e0')};
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
|
|
}
|
|
|
|
.section-icon.layers { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
|
|
.section-icon.registry { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
|
|
.section-icon.demo { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
|
|
.section-icon.guidelines { background: ${cssManager.bdTheme('#e0f2f1', '#004d40')}; }
|
|
|
|
.section-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
|
}
|
|
|
|
.section-description {
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.demo-card {
|
|
background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.demo-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
|
|
}
|
|
|
|
.demo-card h4 {
|
|
margin-bottom: 16px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hierarchy-visual {
|
|
background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.hierarchy-visual h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 24px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#1a1a1a', '#fff')};
|
|
}
|
|
|
|
.layer-stack {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.layer {
|
|
padding: 16px 20px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: 'Geist Mono', monospace;
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.layer:hover {
|
|
transform: translateX(4px);
|
|
border-color: ${cssManager.bdTheme('#e0e0e0', '#444')};
|
|
}
|
|
|
|
.layer.base {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#222')};
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
}
|
|
|
|
.layer.fixed {
|
|
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
|
|
color: ${cssManager.bdTheme('#1976d2', '#90caf9')};
|
|
}
|
|
|
|
.layer.dropdown {
|
|
background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')};
|
|
color: ${cssManager.bdTheme('#7b1fa2', '#ce93d8')};
|
|
}
|
|
|
|
.layer.modal {
|
|
background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')};
|
|
color: ${cssManager.bdTheme('#388e3c', '#81c784')};
|
|
}
|
|
|
|
.layer.context {
|
|
background: ${cssManager.bdTheme('#fff3e0', '#e65100')};
|
|
color: ${cssManager.bdTheme('#f57c00', '#ffb74d')};
|
|
}
|
|
|
|
.layer.toast {
|
|
background: ${cssManager.bdTheme('#ffebee', '#b71c1c')};
|
|
color: ${cssManager.bdTheme('#d32f2f', '#ef5350')};
|
|
}
|
|
|
|
.layer-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.layer-value {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.warning-box {
|
|
background: ${cssManager.bdTheme('#fff8e1', '#332701')};
|
|
border: 1px solid ${cssManager.bdTheme('#ffe082', '#664400')};
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 32px;
|
|
color: ${cssManager.bdTheme('#f57f17', '#ffecb5')};
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.warning-box::before {
|
|
content: '⚠️';
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.warning-box strong {
|
|
color: ${cssManager.bdTheme('#f57f17', '#ffd93d')};
|
|
}
|
|
|
|
code {
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')};
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Geist Mono', monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Consistent panel spacing */
|
|
dees-panel {
|
|
display: block;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
dees-panel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.test-area {
|
|
position: relative;
|
|
height: 200px;
|
|
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
|
|
border: 2px dashed ${cssManager.bdTheme('#ccc', '#444')};
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.profile-demo {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.registry-status {
|
|
background: ${cssManager.bdTheme('#e8f5e9', '#1a2e1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#4caf50', '#2e7d32')};
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 32px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.registry-status::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: ${cssManager.bdTheme('#4caf50', '#2e7d32')};
|
|
}
|
|
|
|
.registry-status h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
color: ${cssManager.bdTheme('#2e7d32', '#81c784')};
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.registry-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
color: ${cssManager.bdTheme('#558b2f', '#aed581')};
|
|
font-family: 'Geist Mono', monospace;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e0f2e1', '#1b5e20')};
|
|
}
|
|
|
|
.registry-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.registry-item.active {
|
|
color: ${cssManager.bdTheme('#2e7d32', '#4ade80')};
|
|
font-weight: 600;
|
|
}
|
|
|
|
.registry-item span:last-child {
|
|
font-weight: 600;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="page-wrapper">
|
|
<div class="showcase-container">
|
|
<div class="showcase-header">
|
|
<h1 class="showcase-title">Z-Index Management</h1>
|
|
<p class="showcase-subtitle">
|
|
A comprehensive system for managing overlay stacking order across all components.
|
|
Test different scenarios to see how the dynamic z-index registry ensures proper layering.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="warning-box">
|
|
<div>
|
|
<strong>Important:</strong> The z-index values are managed centrally in <code>00zindex.ts</code>.
|
|
Never use arbitrary z-index values in components - always import and use the z-index registry.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Registry Status Section -->
|
|
<div class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon registry">📊</div>
|
|
<div>
|
|
<h2 class="section-title">Live Registry Status</h2>
|
|
</div>
|
|
</div>
|
|
<div class="registry-status" id="registryStatus">
|
|
<h4>Z-Index Registry</h4>
|
|
<div class="registry-item">
|
|
<span>Active Elements:</span>
|
|
<span id="activeCount">0</span>
|
|
</div>
|
|
<div class="registry-item">
|
|
<span>Current Z-Index:</span>
|
|
<span id="currentZIndex">1000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Update registry status periodically
|
|
setInterval(() => {
|
|
const registryDiv = document.getElementById('registryStatus');
|
|
if (registryDiv && window.zIndexRegistry) {
|
|
const activeCount = document.getElementById('activeCount');
|
|
const currentZIndex = document.getElementById('currentZIndex');
|
|
|
|
if (activeCount) activeCount.textContent = window.zIndexRegistry.getActiveCount();
|
|
if (currentZIndex) currentZIndex.textContent = window.zIndexRegistry.getCurrentZIndex();
|
|
|
|
// Update active state
|
|
const items = registryDiv.querySelectorAll('.registry-item');
|
|
const count = window.zIndexRegistry.getActiveCount();
|
|
if (count > 0) {
|
|
items[0].classList.add('active');
|
|
} else {
|
|
items[0].classList.remove('active');
|
|
}
|
|
}
|
|
}, 500);
|
|
|
|
// Make registry available globally for the demo
|
|
import('../elements/00zindex.js').then(module => {
|
|
window.zIndexRegistry = module.zIndexRegistry;
|
|
});
|
|
</script>
|
|
|
|
<!-- Layer Hierarchy Section -->
|
|
<div class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon layers">📚</div>
|
|
<div>
|
|
<h2 class="section-title">Layer Hierarchy</h2>
|
|
</div>
|
|
</div>
|
|
<p class="section-description">
|
|
The traditional z-index layers are still defined for reference, but the new registry system
|
|
dynamically assigns z-indexes based on creation order.
|
|
</p>
|
|
<div class="hierarchy-visual">
|
|
<h3>Legacy Z-Index Layers (Reference)</h3>
|
|
<div class="layer-stack">
|
|
<div class="layer base">
|
|
<span class="layer-name">Base Content</span>
|
|
<span class="layer-value">z-index: auto</span>
|
|
</div>
|
|
<div class="layer fixed">
|
|
<span class="layer-name">Fixed Navigation</span>
|
|
<span class="layer-value">z-index: 10-250</span>
|
|
</div>
|
|
<div class="layer dropdown">
|
|
<span class="layer-name">Dropdown Overlays</span>
|
|
<span class="layer-value">z-index: 1999-2000</span>
|
|
</div>
|
|
<div class="layer modal">
|
|
<span class="layer-name">Modal Dialogs</span>
|
|
<span class="layer-value">z-index: 2999-3000</span>
|
|
</div>
|
|
<div class="layer context">
|
|
<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>
|
|
<span class="layer-value">z-index: 5000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive Demos Section -->
|
|
<div class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon demo">🎮</div>
|
|
<div>
|
|
<h2 class="section-title">Interactive Demos</h2>
|
|
</div>
|
|
</div>
|
|
<p class="section-description">
|
|
Test the z-index registry in action with these interactive examples. Each element gets the next
|
|
available z-index when created, ensuring proper stacking order.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Basic Overlay Tests'} .subtitle=${'Test individual overlay components'}>
|
|
<div class="demo-grid">
|
|
<div class="demo-card">
|
|
<h4>Dropdown Test</h4>
|
|
<dees-input-dropdown
|
|
.label=${'Select Option'}
|
|
.options=${[
|
|
{option: 'Show Toast', key: 'toast', payload: 'toast'},
|
|
{option: 'Option 2', key: 'opt2', payload: '2'},
|
|
{option: 'Option 3', key: 'opt3', payload: '3'},
|
|
{option: 'Option 4', key: 'opt4', payload: '4'},
|
|
]}
|
|
@change=${async (e: CustomEvent) => {
|
|
if (e.detail.value?.payload === 'toast') {
|
|
DeesToast.createAndShow({ message: 'Toast appears above dropdown!', type: 'success' });
|
|
}
|
|
}}
|
|
></dees-input-dropdown>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<h4>Context Menu Test</h4>
|
|
<div class="test-area" @contextmenu=${(e: MouseEvent) => {
|
|
DeesContextmenu.openContextMenuWithOptions(e, [
|
|
{ name: 'Show Toast', iconName: 'bell', action: async () => {
|
|
DeesToast.createAndShow({ message: 'Toast from context menu!', type: 'info' });
|
|
}},
|
|
{ divider: true },
|
|
{ name: 'Item 2', iconName: 'check', action: async () => {} },
|
|
{ name: 'Item 3', iconName: 'copy', action: async () => {} },
|
|
]);
|
|
}}>
|
|
<span style="color: ${cssManager.bdTheme('#999', '#666')}">Right-click here for context menu</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<h4>Toast Notification</h4>
|
|
<dees-button @click=${async () => {
|
|
DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' });
|
|
}}>Show Toast</dees-button>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Modal with Dropdown'} .subtitle=${'Critical test: Dropdown inside modal should appear above modal'}>
|
|
<p>This tests the most common z-index conflict scenario.</p>
|
|
<dees-button @click=${async () => {
|
|
const modal = await DeesModal.createAndShow({
|
|
heading: 'Modal with Dropdown',
|
|
width: 'medium',
|
|
showHelpButton: true,
|
|
onHelp: async () => {
|
|
DeesToast.createAndShow({ message: 'Help requested! Toast appears above modal.', type: 'info' });
|
|
},
|
|
content: html`
|
|
<p>The dropdown below should appear <strong>above</strong> this modal:</p>
|
|
<dees-form>
|
|
<dees-input-dropdown
|
|
.label=${'Select Country'}
|
|
.options=${[
|
|
{option: 'United States', key: 'us', payload: 'US'},
|
|
{option: 'Canada', key: 'ca', payload: 'CA'},
|
|
{option: 'United Kingdom', key: 'uk', payload: 'UK'},
|
|
{option: 'Germany', key: 'de', payload: 'DE'},
|
|
{option: 'France', key: 'fr', payload: 'FR'},
|
|
{option: 'Japan', key: 'jp', payload: 'JP'},
|
|
{option: 'Australia', key: 'au', payload: 'AU'},
|
|
{option: 'Brazil', key: 'br', payload: 'BR'},
|
|
]}
|
|
.required=${true}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-text
|
|
.label=${'Additional Field'}
|
|
.placeholder=${'Just to show form context'}
|
|
></dees-input-text>
|
|
|
|
<dees-input-tags
|
|
.label=${'Tags'}
|
|
.placeholder=${'Add tags...'}
|
|
.suggestions=${['urgent', 'bug', 'feature', 'documentation', 'testing']}
|
|
.description=${'Add relevant tags'}
|
|
></dees-input-tags>
|
|
</dees-form>
|
|
<p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
|
|
You can also right-click anywhere in this modal to test context menus.
|
|
</p>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modal) => modal.destroy() },
|
|
{ name: 'Save', action: async (modal) => modal.destroy() }
|
|
]
|
|
});
|
|
|
|
// Add context menu to modal content
|
|
const modalContent = modal.shadowRoot.querySelector('.modal .content');
|
|
if (modalContent) {
|
|
modalContent.addEventListener('contextmenu', async (e: MouseEvent) => {
|
|
DeesContextmenu.openContextMenuWithOptions(e, [
|
|
{ name: 'Context menu in modal', iconName: 'check', action: async () => {} },
|
|
{ divider: true },
|
|
{ name: 'Show Toast', iconName: 'bell', action: async () => {
|
|
DeesToast.createAndShow({ message: 'Toast from modal context menu!', type: 'warning' });
|
|
}}
|
|
]);
|
|
});
|
|
}
|
|
}}>Open Modal with Dropdown</dees-button>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Complex Stacking Scenario'} .subtitle=${'Multiple overlays active simultaneously'}>
|
|
<p>This creates a complex scenario with multiple overlays to test the complete hierarchy.</p>
|
|
<dees-button @click=${async () => {
|
|
// Show base modal
|
|
await DeesModal.createAndShow({
|
|
heading: 'Base Modal',
|
|
width: 'large',
|
|
content: html`
|
|
<h4>Level 1: Modal</h4>
|
|
<p>This is the base modal. Try the following:</p>
|
|
<ol>
|
|
<li>Open the dropdown below</li>
|
|
<li>Right-click for context menu</li>
|
|
<li>Click "Show Second Modal" to stack modals</li>
|
|
</ol>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Test Dropdown in Modal'}
|
|
.options=${[
|
|
{option: 'Trigger Toast', key: 'toast', payload: 'toast'},
|
|
{option: 'Option 2', key: 'opt2', payload: '2'},
|
|
{option: 'Option 3', key: 'opt3', payload: '3'},
|
|
]}
|
|
@change=${async (e: CustomEvent) => {
|
|
if (e.detail.value?.payload === 'toast') {
|
|
DeesToast.createAndShow({ message: 'Toast triggered from dropdown in modal!', type: 'success' });
|
|
}
|
|
}}
|
|
></dees-input-dropdown>
|
|
|
|
<div style="margin-top: 16px;">
|
|
<dees-button @click=${async () => {
|
|
await DeesModal.createAndShow({
|
|
heading: 'Second Modal',
|
|
width: 'small',
|
|
content: html`
|
|
<h4>Level 2: Stacked Modal</h4>
|
|
<p>This modal appears on top of the first one.</p>
|
|
<p>The dropdown here should still work:</p>
|
|
<dees-input-dropdown
|
|
.label=${'Nested Dropdown'}
|
|
.options=${[
|
|
{option: 'Option A', key: 'a'},
|
|
{option: 'Option B', key: 'b'},
|
|
{option: 'Option C', key: 'c'},
|
|
]}
|
|
></dees-input-dropdown>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Close', action: async (modal) => modal.destroy() }
|
|
]
|
|
});
|
|
}}>Show Second Modal</dees-button>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Close All', action: async (modal) => {
|
|
modal.destroy();
|
|
// Also show a toast
|
|
DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' });
|
|
}}
|
|
]
|
|
});
|
|
}}>Start Complex Stack Test</dees-button>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Profile Dropdown'} .subtitle=${'Testing app UI dropdowns'}>
|
|
<p>Profile dropdowns and similar UI elements use the dropdown z-index layer.</p>
|
|
<div class="profile-demo">
|
|
<dees-appui-profiledropdown
|
|
.user=${{
|
|
name: 'Test User',
|
|
email: 'test@example.com',
|
|
avatar: 'https://randomuser.me/api/portraits/lego/1.jpg',
|
|
status: 'online' as const
|
|
}}
|
|
.menuItems=${[
|
|
{ name: 'Show Toast', iconName: 'bell', shortcut: '', action: async () => {
|
|
DeesToast.createAndShow({ message: 'Profile action triggered!', type: 'success' });
|
|
}},
|
|
{ divider: true } as const,
|
|
{ name: 'Settings', iconName: 'settings', shortcut: '', action: async () => {} },
|
|
{ name: 'Logout', iconName: 'logOut', shortcut: '', action: async () => {} }
|
|
]}
|
|
></dees-appui-profiledropdown>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Edge Cases'} .subtitle=${'Special scenarios and gotchas'}>
|
|
<div class="demo-grid">
|
|
<div class="demo-card">
|
|
<h4>Multiple Toasts</h4>
|
|
<dees-button @click=${async () => {
|
|
DeesToast.createAndShow({ message: 'First toast', type: 'info' });
|
|
setTimeout(() => {
|
|
DeesToast.createAndShow({ message: 'Second toast', type: 'warning' });
|
|
}, 500);
|
|
setTimeout(() => {
|
|
DeesToast.createAndShow({ message: 'Third toast', type: 'success' });
|
|
}, 1000);
|
|
}}>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'}
|
|
.value=${`<p>Welcome to the WYSIWYG editor demo!</p>
|
|
<p>This editor demonstrates proper z-index management:</p>
|
|
<ul>
|
|
<li>Type <strong>/</strong> to open the slash command menu</li>
|
|
<li>Select any text to see the formatting toolbar</li>
|
|
<li>Both menus will appear <em>above</em> this modal</li>
|
|
</ul>
|
|
<p>Try it now: Type / here or select this text to format it.</p>`}
|
|
></dees-input-wysiwyg>
|
|
</dees-form>
|
|
<div style="margin-top: 16px; padding: 16px; background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; border-radius: 8px;">
|
|
<strong style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">✨ Z-Index Fix Applied!</strong><br>
|
|
<span style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">
|
|
The WYSIWYG menus now properly use the dynamic z-index registry.<br>
|
|
They will always appear above the modal, regardless of stacking order.
|
|
</span>
|
|
</div>
|
|
`,
|
|
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 () => {
|
|
await DeesModal.createAndShow({
|
|
heading: 'Tags Input Test',
|
|
width: 'medium',
|
|
content: html`
|
|
<p>Test the tags input component in a modal:</p>
|
|
<dees-form>
|
|
<dees-input-tags
|
|
.label=${'Search Terms'}
|
|
.placeholder=${'Enter search terms...'}
|
|
.value=${['typescript', 'modal']}
|
|
.suggestions=${[
|
|
'javascript', 'typescript', 'css', 'html',
|
|
'react', 'vue', 'angular', 'svelte',
|
|
'modal', 'dropdown', 'form', 'input'
|
|
]}
|
|
.description=${'Add search terms to filter results'}
|
|
></dees-input-tags>
|
|
|
|
<dees-input-tags
|
|
.label=${'Categories'}
|
|
.placeholder=${'Add categories...'}
|
|
.required=${true}
|
|
.maxTags=${3}
|
|
.description=${'Select up to 3 categories'}
|
|
></dees-input-tags>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modal) => modal.destroy() },
|
|
{ name: 'Apply', action: async (modal) => {
|
|
DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' });
|
|
modal.destroy();
|
|
}}
|
|
]
|
|
});
|
|
}}>Test Tags in Modal</dees-button>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<h4>Fullscreen Modal</h4>
|
|
<dees-button @click=${async () => {
|
|
await DeesModal.createAndShow({
|
|
heading: 'Fullscreen Modal Test',
|
|
width: 'fullscreen',
|
|
content: html`
|
|
<p>Even in fullscreen, overlays should work properly:</p>
|
|
<dees-input-radiogroup
|
|
.label=${'Select Option'}
|
|
.options=${['Option 1', 'Option 2', 'Option 3']}
|
|
></dees-input-radiogroup>
|
|
<dees-input-dropdown
|
|
.label=${'Dropdown in Fullscreen'}
|
|
.options=${[
|
|
{option: 'Works properly', key: '1'},
|
|
{option: 'Above modal', key: '2'},
|
|
]}
|
|
></dees-input-dropdown>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Exit Fullscreen', action: async (modal) => modal.destroy() }
|
|
]
|
|
});
|
|
}}>Open Fullscreen</dees-button>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
</div>
|
|
|
|
<!-- Guidelines Section -->
|
|
<div class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon guidelines">📖</div>
|
|
<div>
|
|
<h2 class="section-title">Usage Guidelines</h2>
|
|
</div>
|
|
</div>
|
|
<dees-panel>
|
|
<h4>Best Practices:</h4>
|
|
<ul>
|
|
<li>Always use the z-index registry from <code>00zindex.ts</code></li>
|
|
<li>Never use arbitrary z-index values like <code>z-index: 9999</code></li>
|
|
<li>Get z-index from registry when showing elements: <code>zIndexRegistry.getNextZIndex()</code></li>
|
|
<li>Register elements to track them: <code>zIndexRegistry.register(element, zIndex)</code></li>
|
|
<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>
|
|
<pre style="background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')}; padding: 16px; border-radius: 6px; overflow-x: auto;">
|
|
<code>import { zIndexRegistry } from './00zindex.js';
|
|
|
|
// In your component:
|
|
const myZIndex = zIndexRegistry.getNextZIndex();
|
|
element.style.zIndex = myZIndex.toString();
|
|
zIndexRegistry.register(element, myZIndex);
|
|
|
|
// On cleanup:
|
|
zIndexRegistry.unregister(element);</code></pre>
|
|
</dees-panel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`; |