431 lines
15 KiB
TypeScript
431 lines
15 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import { DeesModal } from '../dees-modal/dees-modal.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.demo-section {
|
|
background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
}
|
|
|
|
.demo-section h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
}
|
|
|
|
.demo-section p {
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.button-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<div class="demo-section">
|
|
<h3>Header Buttons</h3>
|
|
<p>Modals can have optional header buttons for help and closing.</p>
|
|
<div class="button-grid">
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'With Help Button',
|
|
showHelpButton: true,
|
|
onHelp: async () => {
|
|
await DeesModal.createAndShow({
|
|
heading: 'Help',
|
|
width: 'small',
|
|
showCloseButton: true,
|
|
showHelpButton: false,
|
|
content: html`
|
|
<p>This is the help content for the modal.</p>
|
|
<p>You can provide context-specific help here.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Got it',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
},
|
|
content: html`
|
|
<p>This modal has a help button in the header. Click it to see help content.</p>
|
|
<p>The close button is also visible by default.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'OK',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>With Help Button</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'No Close Button',
|
|
showCloseButton: false,
|
|
content: html`
|
|
<p>This modal has no close button in the header.</p>
|
|
<p>You must use the action buttons or click outside to close it.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Close',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>No Close Button</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Both Buttons',
|
|
showHelpButton: true,
|
|
showCloseButton: true,
|
|
onHelp: () => alert('Help clicked!'),
|
|
content: html`
|
|
<p>This modal has both help and close buttons.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Done',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Both Buttons</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Clean Header',
|
|
showCloseButton: false,
|
|
showHelpButton: false,
|
|
content: html`
|
|
<p>This modal has a clean header with no buttons.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Close',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Clean Header</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Modal Width Variations</h3>
|
|
<p>Modals can have different widths: small, medium, large, fullscreen, or custom pixel values.</p>
|
|
<div class="button-grid">
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Small Modal',
|
|
width: 'small',
|
|
content: html`
|
|
<p>This is a small modal with a width of 380px. Perfect for simple confirmations or brief messages.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'OK',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Small Modal</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Medium Modal (Default)',
|
|
width: 'medium',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text .label=${'Username'}></dees-input-text>
|
|
<dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
|
|
<dees-input-text .label=${'Password'} .inputType=${'password'}></dees-input-text>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Sign Up',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Medium Modal</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Large Modal',
|
|
width: 'large',
|
|
content: html`
|
|
<h4>Wide Content Area</h4>
|
|
<p>This large modal is 800px wide and perfect for displaying more complex content like forms with multiple columns, tables, or detailed information.</p>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
|
|
<dees-input-text .label=${'First Name'}></dees-input-text>
|
|
<dees-input-text .label=${'Last Name'}></dees-input-text>
|
|
<dees-input-text .label=${'Company'}></dees-input-text>
|
|
<dees-input-text .label=${'Position'}></dees-input-text>
|
|
</div>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Save',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Large Modal</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Fullscreen Editor',
|
|
width: 'fullscreen',
|
|
showHelpButton: true,
|
|
onHelp: async () => {
|
|
alert('In a real app, this would show editor documentation');
|
|
},
|
|
content: html`
|
|
<h4>Fullscreen Experience with Header Controls</h4>
|
|
<p>This modal takes up almost the entire viewport with a 20px margin on all sides. The header buttons are particularly useful in fullscreen mode.</p>
|
|
<p>The content area can be as tall as needed and will scroll if necessary.</p>
|
|
<div style="height: 200px; background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')}; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 16px;">
|
|
<span style="color: ${cssManager.bdTheme('#999', '#666')}">Large content area</span>
|
|
</div>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Save',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Fullscreen Modal</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Custom Width & Constraints</h3>
|
|
<p>You can also set custom pixel widths and min/max constraints.</p>
|
|
<div class="button-grid">
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Custom Width (700px)',
|
|
width: 700,
|
|
content: html`
|
|
<p>This modal has a custom width of exactly 700 pixels.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Close',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Custom 700px</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'With Max Width',
|
|
width: 'large',
|
|
maxWidth: 600,
|
|
content: html`
|
|
<p>This modal is set to 'large' but constrained by a maxWidth of 600px.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Got it',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Max Width 600px</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'With Min Width',
|
|
width: 300,
|
|
minWidth: 400,
|
|
content: html`
|
|
<p>This modal width is set to 300px but has a minWidth of 400px, so it will be 400px wide.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'OK',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Min Width 400px</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Button Variations</h3>
|
|
<p>Modals can have different button configurations with proper spacing.</p>
|
|
<div class="button-grid">
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Multiple Actions',
|
|
content: html`
|
|
<p>This modal demonstrates multiple buttons with proper spacing between them.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Delete',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Save Changes',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Three Buttons</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Single Action',
|
|
content: html`
|
|
<p>Sometimes you just need one button.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Acknowledge',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Single Button</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'No Actions',
|
|
content: html`
|
|
<p>This modal has no bottom buttons. Use the X button or click outside to close.</p>
|
|
<p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')};">This is useful for informational modals that don't require user action.</p>
|
|
`,
|
|
menuOptions: [],
|
|
});
|
|
}}>No Buttons</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Long Button Labels',
|
|
content: html`
|
|
<p>Testing button layout with longer labels.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Discard All Changes',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Save and Continue Editing',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Long Labels</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Responsive Behavior</h3>
|
|
<p>All modals automatically become full-width on mobile devices (< 768px viewport width) for better usability.</p>
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Responsive Modal',
|
|
width: 'large',
|
|
showHelpButton: true,
|
|
onHelp: () => console.log('Help requested for responsive modal'),
|
|
content: html`
|
|
<p>Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.</p>
|
|
<p>The header buttons remain accessible at all viewport sizes.</p>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Close',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Test Responsive</dees-button>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Scrollable Content</h3>
|
|
<p>When content exceeds the modal's max-height (<code>calc(100vh - 80px)</code>), the tile caps at that height and the content area scrolls inside. The heading and bottom buttons stay pinned.</p>
|
|
<div class="button-grid">
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Long Article',
|
|
width: 'medium',
|
|
content: html`
|
|
<h4 style="margin-top: 0;">Lorem ipsum dolor sit amet</h4>
|
|
${Array.from({ length: 40 }, (_, i) => html`
|
|
<p>
|
|
<strong>§ ${i + 1}.</strong>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
|
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
|
|
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
`)}
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Accept',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Long Article</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Long List',
|
|
width: 'small',
|
|
content: html`
|
|
<p>Selected items:</p>
|
|
<ul style="padding-left: 20px; margin: 0;">
|
|
${Array.from({ length: 80 }, (_, i) => html`
|
|
<li style="padding: 4px 0;">Item ${i + 1} — option label</li>
|
|
`)}
|
|
</ul>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Done',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Long List</dees-button>
|
|
|
|
<dees-button @click=${() => {
|
|
DeesModal.createAndShow({
|
|
heading: 'Tall Form',
|
|
width: 'medium',
|
|
content: html`
|
|
<dees-form>
|
|
${Array.from({ length: 25 }, (_, i) => html`
|
|
<dees-input-text .label=${`Field ${i + 1}`}></dees-input-text>
|
|
`)}
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [{
|
|
name: 'Cancel',
|
|
action: async (modal) => modal!.destroy()
|
|
}, {
|
|
name: 'Submit',
|
|
action: async (modal) => modal!.destroy()
|
|
}],
|
|
});
|
|
}}>Tall Form</dees-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` |