275 lines
8.7 KiB
TypeScript
275 lines
8.7 KiB
TypeScript
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>
|
|
`; |