update
This commit is contained in:
Juergen Kunz
@ -3,40 +3,91 @@ import type { DeesForm } from './dees-form.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-output {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
|
||||
color: ${cssManager.bdTheme('hsl(142.1 70.6% 35.3%)', 'hsl(142.1 70.6% 65.3%)')};
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 72.2% 50.6% / 0.2)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 72.2% 40.6%)', 'hsl(0 72.2% 60.6%)')};
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
const form = elementArg.querySelector('dees-form') as DeesForm;
|
||||
const outputDiv = elementArg.querySelector('.form-output');
|
||||
|
||||
if (form && outputDiv) {
|
||||
form.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
const data = eventArg.detail.data;
|
||||
console.log('Form submitted with data:', data);
|
||||
|
||||
// Show processing state
|
||||
form.setStatus('pending', 'Processing your registration...');
|
||||
outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
|
||||
|
||||
// Simulate API call
|
||||
await domtools.plugins.smartdelay.delayFor(2000);
|
||||
|
||||
// Show success
|
||||
form.setStatus('success', 'Registration completed successfully!');
|
||||
|
||||
// Reset form after delay
|
||||
await domtools.plugins.smartdelay.delayFor(2000);
|
||||
form.reset();
|
||||
outputDiv.innerHTML = '<em>Form has been reset</em>';
|
||||
});
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
// Track individual field changes
|
||||
const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
|
||||
inputs.forEach((input) => {
|
||||
input.addEventListener('changeSubject', () => {
|
||||
console.log('Field changed:', input.getAttribute('key'));
|
||||
});
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
|
||||
<dees-form
|
||||
@formData=${async (eventArg) => {
|
||||
const form: DeesForm = eventArg.currentTarget;
|
||||
form.setStatus('pending', 'Processing...');
|
||||
await domtools.plugins.smartdelay.delayFor(2000);
|
||||
form.setStatus('success', 'Form submitted successfully!');
|
||||
await domtools.plugins.smartdelay.delayFor(2000);
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
<dees-form>
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="firstName"
|
||||
@ -92,13 +143,47 @@ export const demoFunc = () => html`
|
||||
|
||||
<dees-form-submit>Create Account</dees-form-submit>
|
||||
</dees-form>
|
||||
|
||||
<div class="form-output">
|
||||
<em>Submit the form to see the collected data...</em>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</dees-demowrapper>
|
||||
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
const form = elementArg.querySelector('dees-form') as DeesForm;
|
||||
|
||||
if (form) {
|
||||
// Track horizontal layout behavior
|
||||
console.log('Horizontal form layout active');
|
||||
|
||||
// Monitor filter changes
|
||||
form.addEventListener('formData', (event: CustomEvent) => {
|
||||
const filters = event.detail.data;
|
||||
console.log('Filter applied:', filters);
|
||||
|
||||
// Simulate search
|
||||
const resultsCount = Math.floor(Math.random() * 100) + 1;
|
||||
console.log(`Found ${resultsCount} results with filters:`, filters);
|
||||
});
|
||||
|
||||
// Setup real-time filter updates
|
||||
const inputs = form.querySelectorAll('[key]');
|
||||
inputs.forEach((input) => {
|
||||
input.addEventListener('changeSubject', async () => {
|
||||
// Get current form data
|
||||
const formData = await form.collectFormData();
|
||||
console.log('Live filter update:', formData);
|
||||
});
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
|
||||
<dees-form horizontal-layout>
|
||||
<dees-input-text
|
||||
key="search"
|
||||
label="Search"
|
||||
placeholder="Enter keywords..."
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-dropdown
|
||||
@ -132,16 +217,55 @@ export const demoFunc = () => html`
|
||||
></dees-input-checkbox>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
</dees-demowrapper>
|
||||
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
const form = elementArg.querySelector('dees-form') as DeesForm;
|
||||
const statusDiv = elementArg.querySelector('#status-display');
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
const data = eventArg.detail.data;
|
||||
console.log('Advanced form data:', data);
|
||||
|
||||
// Show validation in progress
|
||||
form.setStatus('pending', 'Validating your information...');
|
||||
|
||||
// Simulate validation
|
||||
await domtools.plugins.smartdelay.delayFor(1500);
|
||||
|
||||
// Check IBAN validity (simple check)
|
||||
if (data.iban && data.iban.length > 15) {
|
||||
form.setStatus('success', 'Application submitted successfully!');
|
||||
|
||||
if (statusDiv) {
|
||||
statusDiv.className = 'status-message success';
|
||||
statusDiv.textContent = '✓ Your application has been submitted. We will contact you soon.';
|
||||
}
|
||||
} else {
|
||||
form.setStatus('error', 'Please check your IBAN');
|
||||
|
||||
if (statusDiv) {
|
||||
statusDiv.className = 'status-message error';
|
||||
statusDiv.textContent = '✗ Invalid IBAN format. Please check and try again.';
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Form data logged:', data);
|
||||
});
|
||||
|
||||
// Monitor file uploads
|
||||
const fileUpload = form.querySelector('dees-input-fileupload');
|
||||
if (fileUpload) {
|
||||
fileUpload.addEventListener('change', (event: any) => {
|
||||
const files = event.detail?.files || [];
|
||||
console.log(`${files.length} file(s) selected for upload`);
|
||||
});
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
|
||||
<dees-form
|
||||
@formData=${async (eventArg) => {
|
||||
const form: DeesForm = eventArg.currentTarget;
|
||||
const data = eventArg.detail.data;
|
||||
console.log('Form data:', data);
|
||||
form.setStatus('success', 'Data logged to console!');
|
||||
}}
|
||||
>
|
||||
<dees-form>
|
||||
<dees-input-iban
|
||||
key="iban"
|
||||
label="IBAN"
|
||||
@ -181,7 +305,9 @@ export const demoFunc = () => html`
|
||||
|
||||
<dees-form-submit>Submit Application</dees-form-submit>
|
||||
</dees-form>
|
||||
|
||||
<div id="status-display"></div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user