feat(form-inputs): Improve form input consistency and auto spacing across inputs and buttons
This commit is contained in:
Juergen Kunz
@ -15,234 +15,173 @@ export const demoFunc = () => html`
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.form-container {
|
||||
background: #222;
|
||||
border-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-form {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-section">
|
||||
<h3>Complete Form Example</h3>
|
||||
<p>A comprehensive form with various input types, validation, and form submission handling</p>
|
||||
|
||||
<div class="form-container">
|
||||
<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-input-text
|
||||
.required=${true}
|
||||
key="firstName"
|
||||
label="First Name"
|
||||
.description=${'Your given name'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="lastName"
|
||||
label="Last Name"
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="email"
|
||||
label="Email Address"
|
||||
.description=${'We will use this to contact you'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-dropdown
|
||||
.required=${true}
|
||||
key="country"
|
||||
.label=${'Country'}
|
||||
.options=${[
|
||||
{ option: 'United States', key: 'us' },
|
||||
{ option: 'Canada', key: 'ca' },
|
||||
{ option: 'Germany', key: 'de' },
|
||||
{ option: 'France', key: 'fr' },
|
||||
{ option: 'United Kingdom', key: 'uk' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="password"
|
||||
label="Password"
|
||||
isPasswordBool
|
||||
.description=${'Minimum 8 characters'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-checkbox
|
||||
.required=${true}
|
||||
key="terms"
|
||||
label="I agree to the Terms and Conditions"
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-input-checkbox
|
||||
key="newsletter"
|
||||
label="Send me promotional emails"
|
||||
.value=${true}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-form-submit>Create Account</dees-form-submit>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
<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-input-text
|
||||
.required=${true}
|
||||
key="firstName"
|
||||
label="First Name"
|
||||
.description=${'Your given name'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="lastName"
|
||||
label="Last Name"
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="email"
|
||||
label="Email Address"
|
||||
.description=${'We will use this to contact you'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-dropdown
|
||||
.required=${true}
|
||||
key="country"
|
||||
.label=${'Country'}
|
||||
.options=${[
|
||||
{ option: 'United States', key: 'us' },
|
||||
{ option: 'Canada', key: 'ca' },
|
||||
{ option: 'Germany', key: 'de' },
|
||||
{ option: 'France', key: 'fr' },
|
||||
{ option: 'United Kingdom', key: 'uk' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="password"
|
||||
label="Password"
|
||||
isPasswordBool
|
||||
.description=${'Minimum 8 characters'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-checkbox
|
||||
.required=${true}
|
||||
key="terms"
|
||||
label="I agree to the Terms and Conditions"
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-input-checkbox
|
||||
key="newsletter"
|
||||
label="Send me promotional emails"
|
||||
.value=${true}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-form-submit>Create Account</dees-form-submit>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Horizontal Form Layout</h3>
|
||||
<p>Compact form with inputs arranged horizontally - perfect for filters and quick forms</p>
|
||||
|
||||
<div class="form-container">
|
||||
<dees-form horizontal-layout>
|
||||
<dees-input-text
|
||||
key="search"
|
||||
label="Search"
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-dropdown
|
||||
key="category"
|
||||
.label=${'Category'}
|
||||
.enableSearch=${false}
|
||||
.options=${[
|
||||
{ option: 'All', key: 'all' },
|
||||
{ option: 'Products', key: 'products' },
|
||||
{ option: 'Services', key: 'services' },
|
||||
{ option: 'Support', key: 'support' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-dropdown
|
||||
key="sort"
|
||||
.label=${'Sort By'}
|
||||
.enableSearch=${false}
|
||||
.options=${[
|
||||
{ option: 'Newest', key: 'newest' },
|
||||
{ option: 'Popular', key: 'popular' },
|
||||
{ option: 'Price: Low to High', key: 'price_asc' },
|
||||
{ option: 'Price: High to Low', key: 'price_desc' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-checkbox
|
||||
key="inStock"
|
||||
label="In Stock Only"
|
||||
.value=${true}
|
||||
></dees-input-checkbox>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-dropdown
|
||||
key="category"
|
||||
.label=${'Category'}
|
||||
.enableSearch=${false}
|
||||
.options=${[
|
||||
{ option: 'All', key: 'all' },
|
||||
{ option: 'Products', key: 'products' },
|
||||
{ option: 'Services', key: 'services' },
|
||||
{ option: 'Support', key: 'support' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-dropdown
|
||||
key="sort"
|
||||
.label=${'Sort By'}
|
||||
.enableSearch=${false}
|
||||
.options=${[
|
||||
{ option: 'Newest', key: 'newest' },
|
||||
{ option: 'Popular', key: 'popular' },
|
||||
{ option: 'Price: Low to High', key: 'price_asc' },
|
||||
{ option: 'Price: High to Low', key: 'price_desc' },
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-checkbox
|
||||
key="inStock"
|
||||
label="In Stock Only"
|
||||
.value=${true}
|
||||
></dees-input-checkbox>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Advanced Form Features</h3>
|
||||
<p>Form with specialized input types and complex validation</p>
|
||||
|
||||
<div class="form-container">
|
||||
<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-input-iban
|
||||
key="iban"
|
||||
label="IBAN"
|
||||
.required=${true}
|
||||
></dees-input-iban>
|
||||
|
||||
<dees-input-phone
|
||||
key="phone"
|
||||
label="Phone Number"
|
||||
.required=${true}
|
||||
></dees-input-phone>
|
||||
|
||||
<dees-input-multitoggle
|
||||
key="preferences"
|
||||
.label=${'Notification Preferences'}
|
||||
.options=${['Email', 'SMS', 'Push', 'In-App']}
|
||||
.selectedOption=${'Email'}
|
||||
></dees-input-multitoggle>
|
||||
|
||||
<dees-input-multiselect
|
||||
key="interests"
|
||||
.label=${'Areas of Interest'}
|
||||
.options=${[
|
||||
{ option: 'Technology', key: 'tech' },
|
||||
{ option: 'Design', key: 'design' },
|
||||
{ option: 'Business', key: 'business' },
|
||||
{ option: 'Marketing', key: 'marketing' },
|
||||
{ option: 'Sales', key: 'sales' },
|
||||
]}
|
||||
></dees-input-multiselect>
|
||||
|
||||
<dees-input-fileupload
|
||||
key="documents"
|
||||
.label=${'Upload Documents'}
|
||||
.description=${'PDF, DOC, or DOCX files up to 10MB'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-form-submit>Submit Application</dees-form-submit>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
<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-input-iban
|
||||
key="iban"
|
||||
label="IBAN"
|
||||
.required=${true}
|
||||
></dees-input-iban>
|
||||
|
||||
<dees-input-phone
|
||||
key="phone"
|
||||
label="Phone Number"
|
||||
.required=${true}
|
||||
></dees-input-phone>
|
||||
|
||||
<dees-input-multitoggle
|
||||
key="preferences"
|
||||
.label=${'Notification Preferences'}
|
||||
.options=${['Email', 'SMS', 'Push', 'In-App']}
|
||||
.selectedOption=${'Email'}
|
||||
></dees-input-multitoggle>
|
||||
|
||||
<dees-input-multiselect
|
||||
key="interests"
|
||||
.label=${'Areas of Interest'}
|
||||
.options=${[
|
||||
{ option: 'Technology', key: 'tech' },
|
||||
{ option: 'Design', key: 'design' },
|
||||
{ option: 'Business', key: 'business' },
|
||||
{ option: 'Marketing', key: 'marketing' },
|
||||
{ option: 'Sales', key: 'sales' },
|
||||
]}
|
||||
></dees-input-multiselect>
|
||||
|
||||
<dees-input-fileupload
|
||||
key="documents"
|
||||
.label=${'Upload Documents'}
|
||||
.description=${'PDF, DOC, or DOCX files up to 10MB'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-form-submit>Submit Application</dees-form-submit>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
`;
|
||||
Reference in New Issue
Block a user