feat(dees-input-list): add new input list component with demo and validation features
This commit is contained in:
275
ts_web/elements/dees-input-list.demo.ts
Normal file
275
ts_web/elements/dees-input-list.demo.ts
Normal file
@@ -0,0 +1,275 @@
|
||||
import { html, css } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import './dees-panel.js';
|
||||
import './dees-form.js';
|
||||
import './dees-input-text.js';
|
||||
import './dees-form-submit.js';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.output-preview {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
word-break: break-all;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.output-preview {
|
||||
background: #2c2c2c;
|
||||
color: #e4e4e7;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-note {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: #eff6ff;
|
||||
border-left: 3px solid #3b82f6;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.feature-note {
|
||||
background: #1e3a5f;
|
||||
color: #93c5fd;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-panel .title=${'1. Basic List Input'} .subtitle=${'Simple list management with add, edit, and delete'}>
|
||||
<dees-input-list
|
||||
.label=${'Shopping List'}
|
||||
.placeholder=${'Add item to your list...'}
|
||||
.value=${['Milk', 'Bread', 'Eggs', 'Cheese']}
|
||||
.description=${'Double-click to edit items, or use the edit button'}
|
||||
></dees-input-list>
|
||||
<div class="feature-note">
|
||||
💡 Double-click any item to quickly edit it inline
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'2. Sortable List'} .subtitle=${'Drag and drop to reorder items'}>
|
||||
<dees-input-list
|
||||
.label=${'Task Priority'}
|
||||
.placeholder=${'Add a task...'}
|
||||
.sortable=${true}
|
||||
.value=${[
|
||||
'Review pull requests',
|
||||
'Fix critical bug',
|
||||
'Update documentation',
|
||||
'Deploy to production',
|
||||
'Team standup meeting'
|
||||
]}
|
||||
.description=${'Drag items using the handle to reorder them'}
|
||||
></dees-input-list>
|
||||
<div class="feature-note">
|
||||
🔄 Drag the grip handle to reorder tasks by priority
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
|
||||
<div class="grid-layout">
|
||||
<dees-input-list
|
||||
.label=${'Team Members (Min 2, Max 5)'}
|
||||
.placeholder=${'Add team member...'}
|
||||
.minItems=${2}
|
||||
.maxItems=${5}
|
||||
.value=${['Alice', 'Bob']}
|
||||
.required=${true}
|
||||
.description=${'Add 2-5 team members'}
|
||||
></dees-input-list>
|
||||
|
||||
<dees-input-list
|
||||
.label=${'Unique Tags (No Duplicates)'}
|
||||
.placeholder=${'Add unique tag...'}
|
||||
.allowDuplicates=${false}
|
||||
.value=${['frontend', 'backend', 'database']}
|
||||
.description=${'Duplicate items are not allowed'}
|
||||
></dees-input-list>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
|
||||
<dees-input-list
|
||||
.label=${'Important Documents'}
|
||||
.placeholder=${'Add document name...'}
|
||||
.confirmDelete=${true}
|
||||
.value=${[
|
||||
'Contract_2024.pdf',
|
||||
'Financial_Report_Q3.xlsx',
|
||||
'Project_Proposal.docx',
|
||||
'Meeting_Notes.txt'
|
||||
]}
|
||||
.description=${'Deletion requires confirmation for safety'}
|
||||
></dees-input-list>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only list display'}>
|
||||
<dees-input-list
|
||||
.label=${'System Defaults'}
|
||||
.value=${['Default Setting 1', 'Default Setting 2', 'Default Setting 3']}
|
||||
.disabled=${true}
|
||||
.description=${'These items cannot be modified'}
|
||||
></dees-input-list>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'6. Form Integration'} .subtitle=${'List input working within a form context'}>
|
||||
<dees-form>
|
||||
<dees-input-text
|
||||
.label=${'Recipe Name'}
|
||||
.placeholder=${'My Amazing Recipe'}
|
||||
.required=${true}
|
||||
.key=${'name'}
|
||||
></dees-input-text>
|
||||
|
||||
<div class="grid-layout">
|
||||
<dees-input-list
|
||||
.label=${'Ingredients'}
|
||||
.placeholder=${'Add ingredient...'}
|
||||
.required=${true}
|
||||
.minItems=${3}
|
||||
.key=${'ingredients'}
|
||||
.sortable=${true}
|
||||
.value=${[
|
||||
'2 cups flour',
|
||||
'1 cup sugar',
|
||||
'3 eggs'
|
||||
]}
|
||||
.description=${'Add at least 3 ingredients'}
|
||||
></dees-input-list>
|
||||
|
||||
<dees-input-list
|
||||
.label=${'Instructions'}
|
||||
.placeholder=${'Add instruction step...'}
|
||||
.required=${true}
|
||||
.minItems=${2}
|
||||
.key=${'instructions'}
|
||||
.sortable=${true}
|
||||
.value=${[
|
||||
'Preheat oven to 350°F',
|
||||
'Mix dry ingredients'
|
||||
]}
|
||||
.description=${'Add cooking instructions in order'}
|
||||
></dees-input-list>
|
||||
</div>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Notes'}
|
||||
.inputType=${'textarea'}
|
||||
.placeholder=${'Any special notes or tips...'}
|
||||
.key=${'notes'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-form-submit .text=${'Save Recipe'}></dees-form-submit>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'7. Interactive Demo'} .subtitle=${'Build your own feature list and see the data'}>
|
||||
<dees-input-list
|
||||
id="interactive-list"
|
||||
.label=${'Product Features'}
|
||||
.placeholder=${'Add a feature...'}
|
||||
.sortable=${true}
|
||||
.confirmDelete=${false}
|
||||
.allowDuplicates=${false}
|
||||
.maxItems=${10}
|
||||
@change=${(e: CustomEvent) => {
|
||||
const preview = document.querySelector('#list-json');
|
||||
if (preview) {
|
||||
const data = {
|
||||
items: e.detail.value,
|
||||
count: e.detail.value.length,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
preview.textContent = JSON.stringify(data, null, 2);
|
||||
}
|
||||
}}
|
||||
></dees-input-list>
|
||||
|
||||
<div class="output-preview" id="list-json">
|
||||
{
|
||||
"items": [],
|
||||
"count": 0,
|
||||
"timestamp": "${new Date().toISOString()}"
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="feature-note">
|
||||
✨ Add, edit, remove, and reorder items to see the JSON output update in real-time
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'8. Advanced Configuration'} .subtitle=${'Combine all features for complex use cases'}>
|
||||
<dees-input-list
|
||||
.label=${'Project Milestones'}
|
||||
.placeholder=${'Add milestone...'}
|
||||
.value=${[
|
||||
'Project Kickoff - Week 1',
|
||||
'Requirements Gathering - Week 2-3',
|
||||
'Design Phase - Week 4-6',
|
||||
'Development Sprint 1 - Week 7-9',
|
||||
'Testing & QA - Week 10-11',
|
||||
'Deployment - Week 12'
|
||||
]}
|
||||
.sortable=${true}
|
||||
.confirmDelete=${true}
|
||||
.allowDuplicates=${false}
|
||||
.minItems=${3}
|
||||
.maxItems=${12}
|
||||
.required=${true}
|
||||
.description=${'Manage project milestones (3-12 items, sortable, no duplicates)'}
|
||||
></dees-input-list>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'9. Empty State'} .subtitle=${'How the component looks with no items'}>
|
||||
<dees-input-list
|
||||
.label=${'Your Ideas'}
|
||||
.placeholder=${'Share your ideas...'}
|
||||
.value=${[]}
|
||||
.description=${'Start adding items to build your list'}
|
||||
></dees-input-list>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
Reference in New Issue
Block a user