617 lines
19 KiB
TypeScript
617 lines
19 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import '../elements/index.js';
|
|
|
|
export const inputShowcase = () => html`
|
|
<div class="page-wrapper">
|
|
<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;
|
|
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')};
|
|
}
|
|
|
|
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.text { background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; }
|
|
.section-icon.selection { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
|
|
.section-icon.numeric { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
|
|
.section-icon.special { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
|
|
.section-icon.rich { background: ${cssManager.bdTheme('#fce4ec', '#880e4f')}; }
|
|
.section-icon.form { 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')};
|
|
margin: 0 0 32px 64px;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.demo-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.nav-menu {
|
|
position: sticky;
|
|
top: 24px;
|
|
float: right;
|
|
margin-left: 24px;
|
|
margin-bottom: 24px;
|
|
background: ${cssManager.bdTheme('white', '#1a1a1a')};
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.5)')};
|
|
z-index: 100;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.nav-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
display: block;
|
|
padding: 8px 12px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')};
|
|
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
|
}
|
|
|
|
dees-form {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
dees-panel {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
dees-panel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.code-example {
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 14px;
|
|
overflow-x: auto;
|
|
color: ${cssManager.bdTheme('#333', '#e0e0e0')};
|
|
}
|
|
|
|
.feature-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
|
|
color: ${cssManager.bdTheme('#1976d2', '#64b5f6')};
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Form section specific styles */
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.feature-card {
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.feature-card p {
|
|
margin: 8px 0 0 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
`}
|
|
</style>
|
|
|
|
<div class="showcase-container">
|
|
<!-- Navigation Menu -->
|
|
<nav class="nav-menu">
|
|
<a href="#text-inputs" class="nav-item">📝 Text Inputs</a>
|
|
<a href="#selection-inputs" class="nav-item">☑️ Selection Inputs</a>
|
|
<a href="#numeric-inputs" class="nav-item">🔢 Numeric Inputs</a>
|
|
<a href="#special-inputs" class="nav-item">✨ Special Inputs</a>
|
|
<a href="#rich-editors" class="nav-item">📄 Rich Editors</a>
|
|
<a href="#form-integration" class="nav-item">📋 Form Integration</a>
|
|
</nav>
|
|
|
|
<div class="showcase-header">
|
|
<h1 class="showcase-title">Input Components Showcase</h1>
|
|
<p class="showcase-subtitle">
|
|
A comprehensive collection of input components for building modern web forms and interfaces.
|
|
<br>All components support dark mode, validation, and integrate seamlessly with dees-form.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Text Inputs Section -->
|
|
<section id="text-inputs" class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon text">📝</div>
|
|
<h2 class="section-title">Text Inputs</h2>
|
|
</div>
|
|
<p class="section-description">
|
|
Standard text input components for collecting various types of textual data.
|
|
Includes password fields, validation, and specialized formatting.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Basic Text Inputs'}>
|
|
<div class="demo-grid">
|
|
<dees-input-text
|
|
.label=${'Username'}
|
|
.placeholder=${'Enter your username'}
|
|
.description=${'Choose a unique username'}
|
|
.required=${true}
|
|
></dees-input-text>
|
|
|
|
<dees-input-text
|
|
.label=${'Email Address'}
|
|
.inputType=${'email'}
|
|
.placeholder=${'user@example.com'}
|
|
.validationText=${'Please enter a valid email'}
|
|
.required=${true}
|
|
></dees-input-text>
|
|
|
|
<dees-input-text
|
|
.label=${'Password'}
|
|
.isPasswordBool=${true}
|
|
.placeholder=${'Enter secure password'}
|
|
.description=${'Must be at least 8 characters'}
|
|
></dees-input-text>
|
|
|
|
<dees-input-text
|
|
.label=${'Website URL'}
|
|
.inputType=${'url'}
|
|
.placeholder=${'https://example.com'}
|
|
.value=${'https://design.estate'}
|
|
></dees-input-text>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Search Bar'} .subtitle=${'Advanced search with suggestions'}>
|
|
<dees-searchbar
|
|
.placeholder=${'Search for anything...'}
|
|
></dees-searchbar>
|
|
|
|
<div class="code-example">
|
|
// Search with custom suggestions
|
|
<dees-searchbar
|
|
.placeholder="Search products..."
|
|
.suggestions=${['Laptop', 'Phone', 'Tablet']}
|
|
></dees-searchbar>
|
|
</div>
|
|
</dees-panel>
|
|
</section>
|
|
|
|
<!-- Selection Inputs Section -->
|
|
<section id="selection-inputs" class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon selection">☑️</div>
|
|
<h2 class="section-title">Selection Inputs</h2>
|
|
</div>
|
|
<p class="section-description">
|
|
Components for selecting from predefined options. Includes checkboxes, radio buttons,
|
|
dropdowns, and multi-select controls.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Checkboxes and Radio Buttons'}>
|
|
<div class="demo-grid">
|
|
<div>
|
|
<dees-input-checkbox
|
|
.label=${'Accept Terms & Conditions'}
|
|
.description=${'You must accept to continue'}
|
|
.required=${true}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Subscribe to Newsletter'}
|
|
.value=${true}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Enable Notifications'}
|
|
.disabled=${true}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
|
|
<div>
|
|
<dees-input-radiogroup
|
|
.label=${'Select Plan'}
|
|
.options=${['Free', 'Pro', 'Enterprise']}
|
|
.selectedOption=${'Pro'}
|
|
.required=${true}
|
|
></dees-input-radiogroup>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Dropdown Selection'}>
|
|
<div class="demo-grid">
|
|
<dees-input-dropdown
|
|
.label=${'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'}
|
|
]}
|
|
.placeholder=${'Select your country'}
|
|
.required=${true}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Preferred Language'}
|
|
.options=${[
|
|
{option: 'English', key: 'en', payload: 'EN'},
|
|
{option: 'Spanish', key: 'es', payload: 'ES'},
|
|
{option: 'French', key: 'fr', payload: 'FR'},
|
|
{option: 'German', key: 'de', payload: 'DE'},
|
|
{option: 'Japanese', key: 'ja', payload: 'JA'}
|
|
]}
|
|
.value=${{option: 'English', key: 'en', payload: 'EN'}}
|
|
></dees-input-dropdown>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Multi Toggle'} .subtitle=${'Toggle between multiple options'}>
|
|
<dees-input-multitoggle
|
|
.label=${'Theme Preference'}
|
|
.options=${['Light', 'Dark', 'Auto']}
|
|
.value=${'Auto'}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-input-multitoggle
|
|
.label=${'View Mode'}
|
|
.options=${['Grid', 'List', 'Cards']}
|
|
.value=${'Grid'}
|
|
.description=${'Choose how to display items'}
|
|
></dees-input-multitoggle>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Type List'} .subtitle=${'Dynamic list of typed items'}>
|
|
<dees-input-typelist
|
|
.label=${'Skills'}
|
|
.description=${'Add your technical skills'}
|
|
.placeholder=${'Type and press Enter'}
|
|
></dees-input-typelist>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Tags Input'} .subtitle=${'Add and manage tags with suggestions'}>
|
|
<div class="demo-grid">
|
|
<dees-input-tags
|
|
.label=${'Project Tags'}
|
|
.placeholder=${'Add tags...'}
|
|
.value=${['frontend', 'typescript', 'webcomponents']}
|
|
.description=${'Press Enter or comma to add'}
|
|
></dees-input-tags>
|
|
|
|
<dees-input-tags
|
|
.label=${'Technologies'}
|
|
.placeholder=${'Type to see suggestions...'}
|
|
.suggestions=${[
|
|
'React', 'Vue', 'Angular', 'Svelte',
|
|
'Node.js', 'Deno', 'Express', 'MongoDB'
|
|
]}
|
|
.value=${['React', 'Node.js']}
|
|
.maxTags=${5}
|
|
.description=${'Maximum 5 tags, with suggestions'}
|
|
></dees-input-tags>
|
|
</div>
|
|
</dees-panel>
|
|
</section>
|
|
|
|
<!-- Numeric Inputs Section -->
|
|
<section id="numeric-inputs" class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon numeric">🔢</div>
|
|
<h2 class="section-title">Numeric Inputs</h2>
|
|
</div>
|
|
<p class="section-description">
|
|
Specialized inputs for numeric values, including quantity selectors and formatted inputs.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Quantity Selector'}>
|
|
<div class="demo-grid">
|
|
<dees-input-quantityselector
|
|
.label=${'Product Quantity'}
|
|
.value=${1}
|
|
.min=${1}
|
|
.max=${100}
|
|
.description=${'Select quantity (1-100)'}
|
|
></dees-input-quantityselector>
|
|
|
|
<dees-input-quantityselector
|
|
.label=${'Team Size'}
|
|
.value=${5}
|
|
.min=${1}
|
|
.max=${50}
|
|
.step=${5}
|
|
></dees-input-quantityselector>
|
|
</div>
|
|
</dees-panel>
|
|
</section>
|
|
|
|
<!-- Special Inputs Section -->
|
|
<section id="special-inputs" class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon special">✨</div>
|
|
<h2 class="section-title">Special Inputs</h2>
|
|
</div>
|
|
<p class="section-description">
|
|
Specialized input components for specific data types like phone numbers, IBAN, and file uploads.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Phone & IBAN'}>
|
|
<div class="demo-grid">
|
|
<dees-input-phone
|
|
.label=${'Phone Number'}
|
|
.placeholder=${'+1 (555) 123-4567'}
|
|
.required=${true}
|
|
.description=${'International format supported'}
|
|
></dees-input-phone>
|
|
|
|
<dees-input-iban
|
|
.label=${'Bank Account (IBAN)'}
|
|
.placeholder=${'DE89 3704 0044 0532 0130 00'}
|
|
.description=${'European IBAN format'}
|
|
></dees-input-iban>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'File Upload'} .subtitle=${'Drag & drop or click to upload'}>
|
|
<dees-input-fileupload
|
|
.label=${'Upload Documents'}
|
|
.description=${'PDF, DOC, DOCX up to 10MB'}
|
|
.accept=${'.pdf,.doc,.docx'}
|
|
.multiple=${true}
|
|
></dees-input-fileupload>
|
|
|
|
<dees-input-fileupload
|
|
.label=${'Profile Picture'}
|
|
.description=${'JPG, PNG up to 5MB'}
|
|
.accept=${'image/*'}
|
|
></dees-input-fileupload>
|
|
</dees-panel>
|
|
</section>
|
|
|
|
<!-- Rich Editors Section -->
|
|
<section id="rich-editors" class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon rich">📄</div>
|
|
<h2 class="section-title">Rich Text Editors</h2>
|
|
<span class="feature-badge">New!</span>
|
|
</div>
|
|
<p class="section-description">
|
|
Advanced text editors for creating rich content with formatting, images, and structured blocks.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Rich Text Editor'} .subtitle=${'TipTap-based rich text editing'}>
|
|
<dees-input-richtext
|
|
.label=${'Article Content'}
|
|
.placeholder=${'Start writing...'}
|
|
.description=${'Full formatting toolbar with markdown shortcuts'}
|
|
.minHeight=${300}
|
|
.showWordCount=${true}
|
|
></dees-input-richtext>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'WYSIWYG Block Editor'} .subtitle=${'Block-based editor with slash commands'}>
|
|
<dees-input-wysiwyg
|
|
.label=${'Page Content'}
|
|
.description=${'Type "/" for commands or use markdown shortcuts'}
|
|
.outputFormat=${'html'}
|
|
></dees-input-wysiwyg>
|
|
</dees-panel>
|
|
</section>
|
|
|
|
<!-- Form Integration Section -->
|
|
<section id="form-integration" class="showcase-section">
|
|
<div class="section-header">
|
|
<div class="section-icon form">📋</div>
|
|
<h2 class="section-title">Form Integration</h2>
|
|
</div>
|
|
<p class="section-description">
|
|
All input components integrate seamlessly with dees-form for validation,
|
|
submission handling, and data management.
|
|
</p>
|
|
|
|
<dees-panel .title=${'Complete Form Example'} .subtitle=${'All inputs working together'}>
|
|
<dees-form>
|
|
<h3>User Registration</h3>
|
|
|
|
<div class="demo-grid">
|
|
<dees-input-text
|
|
.label=${'First Name'}
|
|
.required=${true}
|
|
.key=${'firstName'}
|
|
></dees-input-text>
|
|
|
|
<dees-input-text
|
|
.label=${'Last Name'}
|
|
.required=${true}
|
|
.key=${'lastName'}
|
|
></dees-input-text>
|
|
</div>
|
|
|
|
<dees-input-text
|
|
.label=${'Email'}
|
|
.inputType=${'email'}
|
|
.required=${true}
|
|
.key=${'email'}
|
|
></dees-input-text>
|
|
|
|
<dees-input-phone
|
|
.label=${'Phone Number'}
|
|
.required=${true}
|
|
.key=${'phone'}
|
|
></dees-input-phone>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'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'}
|
|
]}
|
|
.required=${true}
|
|
.key=${'country'}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-radiogroup
|
|
.label=${'Account Type'}
|
|
.options=${['Personal', 'Business']}
|
|
.required=${true}
|
|
.key=${'accountType'}
|
|
.selectedOption=${'Personal'}
|
|
></dees-input-radiogroup>
|
|
|
|
<dees-input-richtext
|
|
.label=${'Bio'}
|
|
.placeholder=${'Tell us about yourself...'}
|
|
.minHeight=${150}
|
|
.key=${'bio'}
|
|
></dees-input-richtext>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'I agree to the Terms of Service'}
|
|
.required=${true}
|
|
.key=${'terms'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Subscribe to newsletter'}
|
|
.key=${'newsletter'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-form-submit .text=${'Create Account'}></dees-form-submit>
|
|
</dees-form>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Form Features'}>
|
|
<div class="feature-grid">
|
|
<div class="feature-card" style="background: rgba(0, 150, 136, 0.1);">
|
|
<strong>✅ Validation</strong>
|
|
<p>Built-in validation for all input types</p>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(33, 150, 243, 0.1);">
|
|
<strong>🔄 Two-way Binding</strong>
|
|
<p>Automatic data synchronization</p>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(156, 39, 176, 0.1);">
|
|
<strong>📊 Data Collection</strong>
|
|
<p>Easy form data extraction</p>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255, 152, 0, 0.1);">
|
|
<strong>🎨 Theming</strong>
|
|
<p>Consistent styling across all inputs</p>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
`; |